diff options
| -rw-r--r-- | play.css | 878 | ||||
| -rw-r--r-- | play.html | 883 |
2 files changed, 879 insertions, 882 deletions
diff --git a/play.css b/play.css new file mode 100644 index 0000000..b2b7de0 --- /dev/null +++ b/play.css @@ -0,0 +1,878 @@ +@font-face { + font-family: CopperplateCC; + src: url(fonts/CopperplateCC/CopperplateCC-Heavy.woff2) format('woff2') +} + +@font-face { + font-family: CopperplateCC; + font-weight: bold; + src: url(fonts/CopperplateCC/CopperplateCC-Bold.woff2) format('woff2') +} + +@font-face { + font-family: TiffanyGothicCC; + src: url(fonts/TiffanyGothicCC/TiffanyGothicCC.woff2) format('woff2') +} + +:root { + --back-strategy: hsl(36, 71%, 66%); + --back-states: hsl(89, 30%, 50%); + --back-suf: hsl(278, 29%, 43%); + --back-opp: hsl(14, 67%, 56%); + + --action-suf: hsl(278, 29%, 43%); + --action-opp: hsl(14, 67%, 56%); + --action-strategy: hsl(36, 71%, 70%); + --action-states: hsl(89, 30%, 70%); + + --states-25: hsl(88, 100%, 20%); + --strategy-25: hsl(36, 100%, 20%); + + --suf-25: hsl(273, 80%, 25%); + --suf-50: hsl(273, 80%, 50%); + --suf-75: hsl(273, 39%, 75%); + --suf-85: hsl(273, 39%, 85%); + --suf-90: hsl(273, 39%, 90%); + --suf-95: hsl(273, 39%, 95%); + + --opp-25: hsl(16, 100%, 25%); + --opp-50: hsl(16, 90%, 50%); + --opp-75: hsl(16, 85%, 75%); + --opp-85: hsl(16, 85%, 85%); + --opp-90: hsl(16, 85%, 90%); + --opp-95: hsl(16, 85%, 95%); +} + +main { + background-color: slategray; + background-color: hsl(170, 15%, 40%); +} + +#role_Suffragist { background-color: var(--suf-85); } +#role_Opposition { background-color: var(--opp-85); } +.role.active .role_name span { text-decoration: underline; } + +.role_vp { float: right; height: 24px; color: #000c; } + +body.Suffragist header.your_turn { background-color: var(--suf-75); } +body.Opposition header.your_turn { background-color: var(--opp-75); } + +#log { background-color: floralwhite; } +#log .h1, #log .h2 { + font-family: TiffanyGothicCC; + font-size: 10px; + padding-top: 2px; + padding-bottom: 2px; + text-align: center; + border-top: 1px solid black; + border-bottom: 1px solid black; +} +#log .h1 { background-color: hsl(170, 40%, 73%); } +#log .h2 { background-color: hsl(170, 40%, 83%); } + +#log .suf { background-color: var(--suf-85); border-top: 1px solid var(--suf-25); border-bottom: 1px solid var(--suf-25); } +#log .opp { background-color: var(--opp-85); border-top: 1px solid var(--opp-25); border-bottom: 1px solid var(--opp-25); } +#log .suf, #log .opp { + font-family: TiffanyGothicCC; + font-size: 10px; +} +#log .tip { cursor: pointer; } +#log .tip.states { font-style: italic; } +#log .tip.support { font-style: italic; } +#log .tip.opposition { font-style: italic; } +#log .tip.strategy { font-style: italic; } +#log .tip:hover { text-decoration: underline; } + +#log .tip.support { color: var(--suf-25); } +#log .tip.opposition { color: var(--opp-25); } +#log .tip.states { color: var(--states-25); } +#log .tip.strategy { color: var(--strategy-25); } + +#log > .p { padding-left: 20px; text-align: right; font-style: italic; opacity: 75%; } +#log > .i { padding-left: 20px; } + +#log .icon { + display: inline-block; + vertical-align: -2px; + width: 12px; + height: 12px; + box-shadow: none; + border: none; + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} + +#log .die_d4, #log .die_d6, #log .die_d8 { + display: inline-block; + vertical-align: -3px; + width: 15px; + height: 15px; + background-size: auto 15px; +} + +#log .d1 { background-position: -0px 0px; } +#log .d2 { background-position: -15px 0px; } +#log .d3 { background-position: -30px 0px; } +#log .d4 { background-position: -45px 0px; } +#log .d5 { background-position: -60px 0px; } +#log .d6 { background-position: -75px 0px; } +#log .d7 { background-position: -90px 0px; } +#log .d8 { background-position: -105px 0px; } + +#log .die_d4 { background-image: url(images/d4.1x.png); } +#log .die_d6 { background-image: url(images/d6.1x.png); } +#log .die_d8 { background-image: url(images/d8.1x.png); } + +@media (min-resolution: 97dpi) { +#log .die_d4 { background-image: url(images/d4.2x.png); } +#log .die_d6 { background-image: url(images/d6.2x.png); } +#log .die_d8 { background-image: url(images/d8.2x.png); } +} + +#log .purple_campaigner { + background-image: url(images/icon_purple_campaigner.png); +} + +#log .yellow_campaigner { + background-image: url(images/icon_yellow_campaigner.png); +} + +#log .red_campaigner { + background-image: url(images/icon_opposition_campaigner.png); +} + +#log .purple_cube { + background-image: url(images/icon_purple_cube.png); +} + +#log .yellow_cube { + background-image: url(images/icon_yellow_cube.png); +} + +#log .purple_or_yellow_cube { + background-image: url(images/icon_purple_or_yellow_cube.png); +} + +#log .red_cube { + background-image: url(images/icon_opposition_cube.png); +} + +#log .button { + background-image: url(images/icon_button.png); +} + +#log .congressional_marker { + background-image: url(images/icon_congressional_marker.png); +} + +#log .green_check { + background-image: url(images/icon_green_check.png); +} + +#log .red_x { + background-image: url(images/icon_red_x.png); +} + +/* PANELS */ + +section > * { + margin: 24px auto; +} + +.row { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: start; + gap: 24px; +} + +.panel { + padding: 3px; + font-family: TiffanyGothicCC; + x-font-variant: small-caps; + font-feature-settings: 'smcp'; + background-color: hsl(43, 52%, 88%); + box-shadow: 1px 2px 4px #0004; + min-width: fit-content; + max-width: fit-content; +} + +.panel_header { + background-color: hsl(43, 42%, 78%); + border: 2px solid #222; + text-align: center; + padding: 2px 0; +} + +.panel_body { + margin-top: 3px; + border: 2px solid #222; + display: grid; + grid-template-columns: repeat(3, 250px); + padding: 16px; + gap: 16px; + min-height: 350px; + min-width: 250px; +} + +#support_claimed_panel { grid-column: 2; } +#opposition_claimed_panel { grid-column: 3; } + +#support_claimed_header { background-color: var(--back-suf); color: white; } +#opposition_claimed_header { background-color: var(--back-opp); color: white; } +#strategy_draw_header { background-color: var(--back-strategy); } +#states_draw_header { background-color: var(--back-states); } + +body.Suffragist #hand_header { background-color: var(--suf-75); } +body.Opposition #hand_header { background-color: var(--opp-75); } + +body.Suffragist #set_aside_header { background-color: var(--suf-85); } +body.Opposition #set_aside_header { background-color: var(--opp-85); } + +#support_claimed, #opposition_claimed { grid-template-columns: 250px; } +#strategy_draw { grid-template-columns: repeat(3, 250px); } + +#states_draw { + grid-template-columns: repeat(3, 250px); + grid-template-rows: repeat(3, 350px); +} + +@media (min-width: 1320px) { + #states_draw { + grid-template-columns: repeat(4, 250px); + grid-template-rows: repeat(3, 350px); + } +} + +@media (min-width: 1590px) { + #states_draw { + grid-template-columns: repeat(5, 250px); + grid-template-rows: repeat(2, 350px); + } +} + +@media (min-width: 1840px) { + #states_draw { + grid-template-columns: repeat(6, 250px); + grid-template-rows: repeat(2, 350px); + } +} + +#hand, #set_aside { + grid-template-columns: repeat(4, 250px); + grid-template-rows: repeat(2, 350px); +} + +@media (min-width: 2120px) { + #hand, #set_aside { + grid-template-columns: repeat(7, 250px); + grid-template-rows: repeat(1, 350px); + } +} + +@media (max-width: 800px) { + section { + width: 1100px; + } +} + +/* CARD ACTION POPUP MENU */ + +.popup { + min-width: 150px; + box-shadow: 0px 8px 16px 0px #0004; +} + +.popup li span { display: inline-block; width: 24px; } + +body.Suffragist .popup { background-color: var(--suf-95) } +body.Suffragist .popup li.title { color: black; background-color: var(--suf-75) } +body.Suffragist .popup li.action:hover { background-color: var(--suf-25) } + +body.Opposition .popup { background-color: var(--opp-95) } +body.Opposition .popup li.title { color: black; background-color: var(--opp-75) } +body.Opposition .popup li.action:hover { background-color: var(--opp-25) } + +/* MAP */ + +#mapwrap { + width: 1100px; + height: 850px; + x-border: 1px solid #222; + x-margin-top: -1px; + box-shadow: 1px 2px 4px #0004; +} + +#map { + width: 1100px; + height: 850px; + background-color: #f0e7d0; + background-image: url(map.webp); + background-size: 1100px 850px; +} + +#map-texture { + position: absolute; + width: 1100px; + height: 850px; + background-image: url(map-texture.jpg); + background-size: 1100px 850px; + mix-blend-mode: multiply; +} + +svg { + position: absolute; +} + +path.state { fill-opacity: 0.0; } +path.state.action { fill-opacity: 0.7; } +path.state.west { fill: teal } +path.state.plains { fill: chocolate } +path.state.midwest { fill: brown } +path.state.northeast { fill: royalblue } +path.state.atlantic { fill: green } +path.state.south { fill: #444 } + +div.state.action.northeast { background-color: #4169e1b3 } +div.state.action.atlantic { background-color: #008000b3 } + +path.state.selected { + stroke: black; + stroke-width: 12; +} + +path.state.tip { + stroke: white; + stroke-width: 12; + stroke-dasharray: 24 12; +} + +div.state { + position: absolute; + box-sizing: border-box; + background-clip: padding-box; + border-radius: 50%; + border: 5px solid transparent; + width: 62px; + height: 62px; + + color: black; + font-family: CopperplateCC; + font-weight: bold; + font-size: 14px; + text-align: center; + line-height: 52px; +} + +div.label { + pointer-events: none; + color: #222; + position: absolute; + font-family: CopperplateCC; + font-weight: bold; + font-size: 14px; + text-align: center; + line-height: 14px; + width: 50px; + height: 14px; +} + +div.label.large { + font-size: 15px; + line-height: 15px; + height: 15px; +} + +div.label.claimable { + color: white; +} + +div.state.selected { + border-color: black; +} + +div.state.tip { + border: 4px dashed white; +} + +div.region { + position: absolute; + box-sizing: border-box; + background-clip: padding-box; + border-radius: 50%; + border: 4px solid transparent; + width: 67px; + height: 67px; +} + +div.region.action { + border-color: white; +} + +div.region.tip { + border: 4px dashed white; +} + +div.persistent_box { + position: absolute; + width: 125px; +} + +.persistent_box .card { + position: absolute; + width: 125px; + height: 175px; + border-radius: 4px; + box-shadow: 0 0 0 1px #222, 1px 2px 2px #0004; +} + +body.shift .persistent_box .card:hover { + width: 250px; + height: 350px; + border-radius: 8px; + z-index: 100; +} + +div.congress_box { + position: absolute; + box-sizing: border-box; +} + +div.congress_box.action { + background-clip: padding-box; + background-color: #FFA500CC; + border: 5px solid orange; +} + +div.nineteenth_amendment_score:not(.hide) { + position: absolute; + background-color: #EEE7D2; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + + font-weight: bold; + font-size: 24pt; +} + +.piece { + pointer-events: none; + position: absolute; + background-repeat: no-repeat; + background-size: contain; + filter: drop-shadow(0px 1px 2px #0004); +} + +.piece.congress.action { + pointer-events: auto; + filter: + drop-shadow(2px 0px 0px orange) + drop-shadow(0px 2px 0px orange) + drop-shadow(-2px 0px 0px orange) + drop-shadow(0px -2px 0px orange); +} + +.piece.action { + pointer-events: auto; + filter: + drop-shadow(2px 0px 0px white) + drop-shadow(0px 2px 0px white) + drop-shadow(-2px 0px 0px white) + drop-shadow(0px -2px 0px white); +} + +.piece.selected { + filter: + drop-shadow(2px 0px 0px yellow) + drop-shadow(0px 2px 0px yellow) + drop-shadow(-2px 0px 0px yellow) + drop-shadow(0px -2px 0px yellow); +} + + +/* 3D CUBES */ +.piece.cube { width: 21px; height: 25px; } +.piece.red.cube { background-image: url(pieces/iso_red_cube.svg); } +.piece.yellow.cube { background-image: url(pieces/iso_yellow_cube.svg); } +.piece.purple.cube { background-image: url(pieces/iso_purple_cube.svg); } + +/* 2D CUBES */ +/* +.piece.cube { width: 14px; height: 14px; border: 1px solid black; } +.piece.purple.cube { background-color: #6d5798; } +.piece.yellow.cube { background-color: #fec36d; } +.piece.red.cube { background-color: #e06136; } +*/ + +.piece.turn { + width: 30px; + height: 30px; + border-radius: 50%; + border: 3px solid white; + backdrop-filter: invert(80%); +} + +.piece.yes { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/yes.svg); } +.piece.yellow2 { width: 36px; height: 50px; background-size: 36px 50px; background-image: url(pieces/yellow2.svg); } +.piece.yellow1 { width: 34px; height: 50px; background-size: 36px 50px; background-image: url(pieces/yellow1.svg); } +.piece.turn3d { width: 33px; height: 36px; background-size: 33px 36px; background-image: url(pieces/turn.svg); } +.piece.red3 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red3.svg); } +.piece.red2 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red2.svg); } +.piece.red1 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red1.svg); } +.piece.purple2 { width: 36px; height: 50px; background-size: 36px 50px; background-image: url(pieces/purple2.svg); } +.piece.purple1 { width: 34px; height: 50px; background-size: 36px 50px; background-image: url(pieces/purple1.svg); } +.piece.no { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/no.svg); } +.piece.congress { width: 32px; height: 48px; background-size: 32px 48px; background-image: url(pieces/iso_congress.svg); } + +div.button_box { + position: absolute; + box-sizing: border-box; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: start; + gap: 0px; +} + +div.button_box .button { margin: 0 0 -10px 0; } +div.button_box.h .button { margin: 0 0 0 -10px; } + +div.button_box.h { + flex-direction: row; +} + +div.button_box .button { + width: 38px; + height: 38px; + background-size: 100%; + border-radius: 50%; + border: 1px solid #0008; + box-shadow: 0 1px 4px #0004; +} + +.button_1{background-image:url(images/button1.png)} +.button_2{background-image:url(images/button2.png)} +.button_3{background-image:url(images/button3.png)} +.button_4{background-image:url(images/button4.png)} +.button_5{background-image:url(images/button5.png)} +.button_6{background-image:url(images/button6.png)} + +.card { + background-size: cover; + background-repeat: no-repeat; + width: 250px; + height: 350px; + border-radius: 8px; + box-shadow: 0 0 0 1px #222, 1px 2px 4px #0004; +} + +.card.support.action { + box-shadow: 0 0 0 1px black, 0 0 0 4px var(--suf-75); +} + +.card.opposition.action { + box-shadow: 0 0 0 1px black, 0 0 0 4px var(--opp-75); +} + +.card.states.action { + box-shadow: 0 0 0 1px black, 0 0 0 4px var(--action-states); +} + +.card.strategy.action { + box-shadow: 0 0 0 1px black, 0 0 0 4px var(--action-strategy); +} + +.card.selected { + box-shadow: 0 0 0 1px black, 0 0 0 4px yellow; +} + +.card.played { + box-shadow: 0 0 0 3px black; +} + +#tooltip { + position: fixed; + pointer-events: none; + z-index: 600; + right: 240px; + top: 60px; +} + +@media (max-width: 800px) { + #tooltip { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } +} + +/* CARD IMAGES */ + +.card_support_back{background-image:url(cards.1x/support_01.jpg)} +.card_opposition_back{background-image:url(cards.1x/opposition_01.jpg)} +.card_1{background-image:url(cards.1x/support_02.jpg)} +.card_2{background-image:url(cards.1x/support_03.jpg)} +.card_3{background-image:url(cards.1x/support_04.jpg)} +.card_4{background-image:url(cards.1x/support_05.jpg)} +.card_5{background-image:url(cards.1x/support_06.jpg)} +.card_6{background-image:url(cards.1x/support_07.jpg)} +.card_7{background-image:url(cards.1x/support_08.jpg)} +.card_8{background-image:url(cards.1x/support_09.jpg)} +.card_9{background-image:url(cards.1x/support_10.jpg)} +.card_10{background-image:url(cards.1x/support_11.jpg)} +.card_11{background-image:url(cards.1x/support_12.jpg)} +.card_12{background-image:url(cards.1x/support_13.jpg)} +.card_13{background-image:url(cards.1x/support_14.jpg)} +.card_14{background-image:url(cards.1x/support_15.jpg)} +.card_15{background-image:url(cards.1x/support_16.jpg)} +.card_16{background-image:url(cards.1x/support_17.jpg)} +.card_17{background-image:url(cards.1x/support_18.jpg)} +.card_18{background-image:url(cards.1x/support_19.jpg)} +.card_19{background-image:url(cards.1x/support_20.jpg)} +.card_20{background-image:url(cards.1x/support_21.jpg)} +.card_21{background-image:url(cards.1x/support_22.jpg)} +.card_22{background-image:url(cards.1x/support_23.jpg)} +.card_23{background-image:url(cards.1x/support_24.jpg)} +.card_24{background-image:url(cards.1x/support_25.jpg)} +.card_25{background-image:url(cards.1x/support_26.jpg)} +.card_26{background-image:url(cards.1x/support_27.jpg)} +.card_27{background-image:url(cards.1x/support_28.jpg)} +.card_28{background-image:url(cards.1x/support_29.jpg)} +.card_29{background-image:url(cards.1x/support_30.jpg)} +.card_30{background-image:url(cards.1x/support_31.jpg)} +.card_31{background-image:url(cards.1x/support_32.jpg)} +.card_32{background-image:url(cards.1x/support_33.jpg)} +.card_33{background-image:url(cards.1x/support_34.jpg)} +.card_34{background-image:url(cards.1x/support_35.jpg)} +.card_35{background-image:url(cards.1x/support_36.jpg)} +.card_36{background-image:url(cards.1x/support_37.jpg)} +.card_37{background-image:url(cards.1x/support_38.jpg)} +.card_38{background-image:url(cards.1x/support_39.jpg)} +.card_39{background-image:url(cards.1x/support_40.jpg)} +.card_40{background-image:url(cards.1x/support_41.jpg)} +.card_41{background-image:url(cards.1x/support_42.jpg)} +.card_42{background-image:url(cards.1x/support_43.jpg)} +.card_43{background-image:url(cards.1x/support_44.jpg)} +.card_44{background-image:url(cards.1x/support_45.jpg)} +.card_45{background-image:url(cards.1x/support_46.jpg)} +.card_46{background-image:url(cards.1x/support_47.jpg)} +.card_47{background-image:url(cards.1x/support_48.jpg)} +.card_48{background-image:url(cards.1x/support_49.jpg)} +.card_49{background-image:url(cards.1x/support_50.jpg)} +.card_50{background-image:url(cards.1x/support_51.jpg)} +.card_51{background-image:url(cards.1x/support_52.jpg)} +.card_52{background-image:url(cards.1x/support_53.jpg)} +.card_53{background-image:url(cards.1x/opposition_02.jpg)} +.card_54{background-image:url(cards.1x/opposition_03.jpg)} +.card_55{background-image:url(cards.1x/opposition_04.jpg)} +.card_56{background-image:url(cards.1x/opposition_05.jpg)} +.card_57{background-image:url(cards.1x/opposition_06.jpg)} +.card_58{background-image:url(cards.1x/opposition_07.jpg)} +.card_59{background-image:url(cards.1x/opposition_08.jpg)} +.card_60{background-image:url(cards.1x/opposition_09.jpg)} +.card_61{background-image:url(cards.1x/opposition_10.jpg)} +.card_62{background-image:url(cards.1x/opposition_11.jpg)} +.card_63{background-image:url(cards.1x/opposition_12.jpg)} +.card_64{background-image:url(cards.1x/opposition_13.jpg)} +.card_65{background-image:url(cards.1x/opposition_14.jpg)} +.card_66{background-image:url(cards.1x/opposition_15.jpg)} +.card_67{background-image:url(cards.1x/opposition_16.jpg)} +.card_68{background-image:url(cards.1x/opposition_17.jpg)} +.card_69{background-image:url(cards.1x/opposition_18.jpg)} +.card_70{background-image:url(cards.1x/opposition_19.jpg)} +.card_71{background-image:url(cards.1x/opposition_20.jpg)} +.card_72{background-image:url(cards.1x/opposition_21.jpg)} +.card_73{background-image:url(cards.1x/opposition_22.jpg)} +.card_74{background-image:url(cards.1x/opposition_23.jpg)} +.card_75{background-image:url(cards.1x/opposition_24.jpg)} +.card_76{background-image:url(cards.1x/opposition_25.jpg)} +.card_77{background-image:url(cards.1x/opposition_26.jpg)} +.card_78{background-image:url(cards.1x/opposition_27.jpg)} +.card_79{background-image:url(cards.1x/opposition_28.jpg)} +.card_80{background-image:url(cards.1x/opposition_29.jpg)} +.card_81{background-image:url(cards.1x/opposition_30.jpg)} +.card_82{background-image:url(cards.1x/opposition_31.jpg)} +.card_83{background-image:url(cards.1x/opposition_32.jpg)} +.card_84{background-image:url(cards.1x/opposition_33.jpg)} +.card_85{background-image:url(cards.1x/opposition_34.jpg)} +.card_86{background-image:url(cards.1x/opposition_35.jpg)} +.card_87{background-image:url(cards.1x/opposition_36.jpg)} +.card_88{background-image:url(cards.1x/opposition_37.jpg)} +.card_89{background-image:url(cards.1x/opposition_38.jpg)} +.card_90{background-image:url(cards.1x/opposition_39.jpg)} +.card_91{background-image:url(cards.1x/opposition_40.jpg)} +.card_92{background-image:url(cards.1x/opposition_41.jpg)} +.card_93{background-image:url(cards.1x/opposition_42.jpg)} +.card_94{background-image:url(cards.1x/opposition_43.jpg)} +.card_95{background-image:url(cards.1x/opposition_44.jpg)} +.card_96{background-image:url(cards.1x/opposition_45.jpg)} +.card_97{background-image:url(cards.1x/opposition_46.jpg)} +.card_98{background-image:url(cards.1x/opposition_47.jpg)} +.card_99{background-image:url(cards.1x/opposition_48.jpg)} +.card_100{background-image:url(cards.1x/opposition_49.jpg)} +.card_101{background-image:url(cards.1x/opposition_50.jpg)} +.card_102{background-image:url(cards.1x/opposition_51.jpg)} +.card_103{background-image:url(cards.1x/opposition_52.jpg)} +.card_104{background-image:url(cards.1x/opposition_53.jpg)} +.card_105{background-image:url(cards.1x/strategy_02.jpg)} +.card_106{background-image:url(cards.1x/strategy_03.jpg)} +.card_107{background-image:url(cards.1x/strategy_04.jpg)} +.card_108{background-image:url(cards.1x/strategy_05.jpg)} +.card_109{background-image:url(cards.1x/strategy_06.jpg)} +.card_110{background-image:url(cards.1x/strategy_07.jpg)} +.card_111{background-image:url(cards.1x/strategy_08.jpg)} +.card_112{background-image:url(cards.1x/strategy_09.jpg)} +.card_113{background-image:url(cards.1x/strategy_10.jpg)} +.card_114{background-image:url(cards.1x/strategy_11.jpg)} +.card_115{background-image:url(cards.1x/strategy_12.jpg)} +.card_116{background-image:url(cards.1x/strategy_13.jpg)} +.card_117{background-image:url(cards.1x/states_02.jpg)} +.card_118{background-image:url(cards.1x/states_03.jpg)} +.card_119{background-image:url(cards.1x/states_04.jpg)} +.card_120{background-image:url(cards.1x/states_05.jpg)} +.card_121{background-image:url(cards.1x/states_06.jpg)} +.card_122{background-image:url(cards.1x/states_07.jpg)} +.card_123{background-image:url(cards.1x/states_08.jpg)} +.card_124{background-image:url(cards.1x/states_09.jpg)} +.card_125{background-image:url(cards.1x/states_10.jpg)} +.card_126{background-image:url(cards.1x/states_11.jpg)} +.card_127{background-image:url(cards.1x/states_12.jpg)} +.card_128{background-image:url(cards.1x/states_13.jpg)} + +@media (min-resolution: 97dpi) { +.card_support_back{background-image:url(cards.2x/support_01.jpg)} +.card_opposition_back{background-image:url(cards.2x/opposition_01.jpg)} +.card_1{background-image:url(cards.2x/support_02.jpg)} +.card_2{background-image:url(cards.2x/support_03.jpg)} +.card_3{background-image:url(cards.2x/support_04.jpg)} +.card_4{background-image:url(cards.2x/support_05.jpg)} +.card_5{background-image:url(cards.2x/support_06.jpg)} +.card_6{background-image:url(cards.2x/support_07.jpg)} +.card_7{background-image:url(cards.2x/support_08.jpg)} +.card_8{background-image:url(cards.2x/support_09.jpg)} +.card_9{background-image:url(cards.2x/support_10.jpg)} +.card_10{background-image:url(cards.2x/support_11.jpg)} +.card_11{background-image:url(cards.2x/support_12.jpg)} +.card_12{background-image:url(cards.2x/support_13.jpg)} +.card_13{background-image:url(cards.2x/support_14.jpg)} +.card_14{background-image:url(cards.2x/support_15.jpg)} +.card_15{background-image:url(cards.2x/support_16.jpg)} +.card_16{background-image:url(cards.2x/support_17.jpg)} +.card_17{background-image:url(cards.2x/support_18.jpg)} +.card_18{background-image:url(cards.2x/support_19.jpg)} +.card_19{background-image:url(cards.2x/support_20.jpg)} +.card_20{background-image:url(cards.2x/support_21.jpg)} +.card_21{background-image:url(cards.2x/support_22.jpg)} +.card_22{background-image:url(cards.2x/support_23.jpg)} +.card_23{background-image:url(cards.2x/support_24.jpg)} +.card_24{background-image:url(cards.2x/support_25.jpg)} +.card_25{background-image:url(cards.2x/support_26.jpg)} +.card_26{background-image:url(cards.2x/support_27.jpg)} +.card_27{background-image:url(cards.2x/support_28.jpg)} +.card_28{background-image:url(cards.2x/support_29.jpg)} +.card_29{background-image:url(cards.2x/support_30.jpg)} +.card_30{background-image:url(cards.2x/support_31.jpg)} +.card_31{background-image:url(cards.2x/support_32.jpg)} +.card_32{background-image:url(cards.2x/support_33.jpg)} +.card_33{background-image:url(cards.2x/support_34.jpg)} +.card_34{background-image:url(cards.2x/support_35.jpg)} +.card_35{background-image:url(cards.2x/support_36.jpg)} +.card_36{background-image:url(cards.2x/support_37.jpg)} +.card_37{background-image:url(cards.2x/support_38.jpg)} +.card_38{background-image:url(cards.2x/support_39.jpg)} +.card_39{background-image:url(cards.2x/support_40.jpg)} +.card_40{background-image:url(cards.2x/support_41.jpg)} +.card_41{background-image:url(cards.2x/support_42.jpg)} +.card_42{background-image:url(cards.2x/support_43.jpg)} +.card_43{background-image:url(cards.2x/support_44.jpg)} +.card_44{background-image:url(cards.2x/support_45.jpg)} +.card_45{background-image:url(cards.2x/support_46.jpg)} +.card_46{background-image:url(cards.2x/support_47.jpg)} +.card_47{background-image:url(cards.2x/support_48.jpg)} +.card_48{background-image:url(cards.2x/support_49.jpg)} +.card_49{background-image:url(cards.2x/support_50.jpg)} +.card_50{background-image:url(cards.2x/support_51.jpg)} +.card_51{background-image:url(cards.2x/support_52.jpg)} +.card_52{background-image:url(cards.2x/support_53.jpg)} +.card_53{background-image:url(cards.2x/opposition_02.jpg)} +.card_54{background-image:url(cards.2x/opposition_03.jpg)} +.card_55{background-image:url(cards.2x/opposition_04.jpg)} +.card_56{background-image:url(cards.2x/opposition_05.jpg)} +.card_57{background-image:url(cards.2x/opposition_06.jpg)} +.card_58{background-image:url(cards.2x/opposition_07.jpg)} +.card_59{background-image:url(cards.2x/opposition_08.jpg)} +.card_60{background-image:url(cards.2x/opposition_09.jpg)} +.card_61{background-image:url(cards.2x/opposition_10.jpg)} +.card_62{background-image:url(cards.2x/opposition_11.jpg)} +.card_63{background-image:url(cards.2x/opposition_12.jpg)} +.card_64{background-image:url(cards.2x/opposition_13.jpg)} +.card_65{background-image:url(cards.2x/opposition_14.jpg)} +.card_66{background-image:url(cards.2x/opposition_15.jpg)} +.card_67{background-image:url(cards.2x/opposition_16.jpg)} +.card_68{background-image:url(cards.2x/opposition_17.jpg)} +.card_69{background-image:url(cards.2x/opposition_18.jpg)} +.card_70{background-image:url(cards.2x/opposition_19.jpg)} +.card_71{background-image:url(cards.2x/opposition_20.jpg)} +.card_72{background-image:url(cards.2x/opposition_21.jpg)} +.card_73{background-image:url(cards.2x/opposition_22.jpg)} +.card_74{background-image:url(cards.2x/opposition_23.jpg)} +.card_75{background-image:url(cards.2x/opposition_24.jpg)} +.card_76{background-image:url(cards.2x/opposition_25.jpg)} +.card_77{background-image:url(cards.2x/opposition_26.jpg)} +.card_78{background-image:url(cards.2x/opposition_27.jpg)} +.card_79{background-image:url(cards.2x/opposition_28.jpg)} +.card_80{background-image:url(cards.2x/opposition_29.jpg)} +.card_81{background-image:url(cards.2x/opposition_30.jpg)} +.card_82{background-image:url(cards.2x/opposition_31.jpg)} +.card_83{background-image:url(cards.2x/opposition_32.jpg)} +.card_84{background-image:url(cards.2x/opposition_33.jpg)} +.card_85{background-image:url(cards.2x/opposition_34.jpg)} +.card_86{background-image:url(cards.2x/opposition_35.jpg)} +.card_87{background-image:url(cards.2x/opposition_36.jpg)} +.card_88{background-image:url(cards.2x/opposition_37.jpg)} +.card_89{background-image:url(cards.2x/opposition_38.jpg)} +.card_90{background-image:url(cards.2x/opposition_39.jpg)} +.card_91{background-image:url(cards.2x/opposition_40.jpg)} +.card_92{background-image:url(cards.2x/opposition_41.jpg)} +.card_93{background-image:url(cards.2x/opposition_42.jpg)} +.card_94{background-image:url(cards.2x/opposition_43.jpg)} +.card_95{background-image:url(cards.2x/opposition_44.jpg)} +.card_96{background-image:url(cards.2x/opposition_45.jpg)} +.card_97{background-image:url(cards.2x/opposition_46.jpg)} +.card_98{background-image:url(cards.2x/opposition_47.jpg)} +.card_99{background-image:url(cards.2x/opposition_48.jpg)} +.card_100{background-image:url(cards.2x/opposition_49.jpg)} +.card_101{background-image:url(cards.2x/opposition_50.jpg)} +.card_102{background-image:url(cards.2x/opposition_51.jpg)} +.card_103{background-image:url(cards.2x/opposition_52.jpg)} +.card_104{background-image:url(cards.2x/opposition_53.jpg)} +.card_105{background-image:url(cards.2x/strategy_02.jpg)} +.card_106{background-image:url(cards.2x/strategy_03.jpg)} +.card_107{background-image:url(cards.2x/strategy_04.jpg)} +.card_108{background-image:url(cards.2x/strategy_05.jpg)} +.card_109{background-image:url(cards.2x/strategy_06.jpg)} +.card_110{background-image:url(cards.2x/strategy_07.jpg)} +.card_111{background-image:url(cards.2x/strategy_08.jpg)} +.card_112{background-image:url(cards.2x/strategy_09.jpg)} +.card_113{background-image:url(cards.2x/strategy_10.jpg)} +.card_114{background-image:url(cards.2x/strategy_11.jpg)} +.card_115{background-image:url(cards.2x/strategy_12.jpg)} +.card_116{background-image:url(cards.2x/strategy_13.jpg)} +.card_117{background-image:url(cards.2x/states_02.jpg)} +.card_118{background-image:url(cards.2x/states_03.jpg)} +.card_119{background-image:url(cards.2x/states_04.jpg)} +.card_120{background-image:url(cards.2x/states_05.jpg)} +.card_121{background-image:url(cards.2x/states_06.jpg)} +.card_122{background-image:url(cards.2x/states_07.jpg)} +.card_123{background-image:url(cards.2x/states_08.jpg)} +.card_124{background-image:url(cards.2x/states_09.jpg)} +.card_125{background-image:url(cards.2x/states_10.jpg)} +.card_126{background-image:url(cards.2x/states_11.jpg)} +.card_127{background-image:url(cards.2x/states_12.jpg)} +.card_128{background-image:url(cards.2x/states_13.jpg)} +} @@ -9,892 +9,11 @@ <link id="favicon" rel="icon" href="images/badge1.png"> <link rel="stylesheet" href="/fonts/fonts.css"> <link rel="stylesheet" href="/common/client.css"> +<link rel="stylesheet" href="play.css"> <script defer src="/common/client.js"></script> <script defer src="cards.js"></script> <script defer src="data.js"></script> <script defer src="play.js"></script> -<style> - -@font-face { - font-family: CopperplateCC; - src: url(fonts/CopperplateCC/CopperplateCC-Heavy.woff2) format('woff2') -} - -@font-face { - font-family: CopperplateCC; - font-weight: bold; - src: url(fonts/CopperplateCC/CopperplateCC-Bold.woff2) format('woff2') -} - -@font-face { - font-family: TiffanyGothicCC; - src: url(fonts/TiffanyGothicCC/TiffanyGothicCC.woff2) format('woff2') -} - -:root { - --back-strategy: hsl(36, 71%, 66%); - --back-states: hsl(89, 30%, 50%); - --back-suf: hsl(278, 29%, 43%); - --back-opp: hsl(14, 67%, 56%); - - --action-suf: hsl(278, 29%, 43%); - --action-opp: hsl(14, 67%, 56%); - --action-strategy: hsl(36, 71%, 70%); - --action-states: hsl(89, 30%, 70%); - - --states-25: hsl(88, 100%, 20%); - --strategy-25: hsl(36, 100%, 20%); - - --suf-25: hsl(273, 80%, 25%); - --suf-50: hsl(273, 80%, 50%); - --suf-75: hsl(273, 39%, 75%); - --suf-85: hsl(273, 39%, 85%); - --suf-90: hsl(273, 39%, 90%); - --suf-95: hsl(273, 39%, 95%); - - --opp-25: hsl(16, 100%, 25%); - --opp-50: hsl(16, 90%, 50%); - --opp-75: hsl(16, 85%, 75%); - --opp-85: hsl(16, 85%, 85%); - --opp-90: hsl(16, 85%, 90%); - --opp-95: hsl(16, 85%, 95%); -} - -main { - background-color: slategray; - background-color: hsl(170, 15%, 40%); -} - -#role_Suffragist { background-color: var(--suf-85); } -#role_Opposition { background-color: var(--opp-85); } -.role.active .role_name span { text-decoration: underline; } - -.role_vp { float: right; height: 24px; color: #000c; } - -body.Suffragist header.your_turn { background-color: var(--suf-75); } -body.Opposition header.your_turn { background-color: var(--opp-75); } - -#log { background-color: floralwhite; } -#log .h1, #log .h2 { - font-family: TiffanyGothicCC; - font-size: 10px; - padding-top: 2px; - padding-bottom: 2px; - text-align: center; - border-top: 1px solid black; - border-bottom: 1px solid black; -} -#log .h1 { background-color: hsl(170, 40%, 73%); } -#log .h2 { background-color: hsl(170, 40%, 83%); } - -#log .suf { background-color: var(--suf-85); border-top: 1px solid var(--suf-25); border-bottom: 1px solid var(--suf-25); } -#log .opp { background-color: var(--opp-85); border-top: 1px solid var(--opp-25); border-bottom: 1px solid var(--opp-25); } -#log .suf, #log .opp { - font-family: TiffanyGothicCC; - font-size: 10px; -} -#log .tip { cursor: pointer; } -#log .tip.states { font-style: italic; } -#log .tip.support { font-style: italic; } -#log .tip.opposition { font-style: italic; } -#log .tip.strategy { font-style: italic; } -#log .tip:hover { text-decoration: underline; } - -#log .tip.support { color: var(--suf-25); } -#log .tip.opposition { color: var(--opp-25); } -#log .tip.states { color: var(--states-25); } -#log .tip.strategy { color: var(--strategy-25); } - -#log > .p { padding-left: 20px; text-align: right; font-style: italic; opacity: 75%; } -#log > .i { padding-left: 20px; } - -#log .icon { - display: inline-block; - vertical-align: -2px; - width: 12px; - height: 12px; - box-shadow: none; - border: none; - background-size: contain; - background-position: center; - background-repeat: no-repeat; -} - -#log .die_d4, #log .die_d6, #log .die_d8 { - display: inline-block; - vertical-align: -3px; - width: 15px; - height: 15px; - background-size: auto 15px; -} - -#log .d1 { background-position: -0px 0px; } -#log .d2 { background-position: -15px 0px; } -#log .d3 { background-position: -30px 0px; } -#log .d4 { background-position: -45px 0px; } -#log .d5 { background-position: -60px 0px; } -#log .d6 { background-position: -75px 0px; } -#log .d7 { background-position: -90px 0px; } -#log .d8 { background-position: -105px 0px; } - -#log .die_d4 { background-image: url(images/d4.1x.png); } -#log .die_d6 { background-image: url(images/d6.1x.png); } -#log .die_d8 { background-image: url(images/d8.1x.png); } - -@media (min-resolution: 97dpi) { -#log .die_d4 { background-image: url(images/d4.2x.png); } -#log .die_d6 { background-image: url(images/d6.2x.png); } -#log .die_d8 { background-image: url(images/d8.2x.png); } -} - -#log .purple_campaigner { - background-image: url(images/icon_purple_campaigner.png); -} - -#log .yellow_campaigner { - background-image: url(images/icon_yellow_campaigner.png); -} - -#log .red_campaigner { - background-image: url(images/icon_opposition_campaigner.png); -} - -#log .purple_cube { - background-image: url(images/icon_purple_cube.png); -} - -#log .yellow_cube { - background-image: url(images/icon_yellow_cube.png); -} - -#log .purple_or_yellow_cube { - background-image: url(images/icon_purple_or_yellow_cube.png); -} - -#log .red_cube { - background-image: url(images/icon_opposition_cube.png); -} - -#log .button { - background-image: url(images/icon_button.png); -} - -#log .congressional_marker { - background-image: url(images/icon_congressional_marker.png); -} - -#log .green_check { - background-image: url(images/icon_green_check.png); -} - -#log .red_x { - background-image: url(images/icon_red_x.png); -} - -/* PANELS */ - -section > * { - margin: 24px auto; -} - -.row { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: start; - gap: 24px; -} - -.panel { - padding: 3px; - font-family: TiffanyGothicCC; - x-font-variant: small-caps; - font-feature-settings: 'smcp'; - background-color: hsl(43, 52%, 88%); - box-shadow: 1px 2px 4px #0004; - min-width: fit-content; - max-width: fit-content; -} - -.panel_header { - background-color: hsl(43, 42%, 78%); - border: 2px solid #222; - text-align: center; - padding: 2px 0; -} - -.panel_body { - margin-top: 3px; - border: 2px solid #222; - display: grid; - grid-template-columns: repeat(3, 250px); - padding: 16px; - gap: 16px; - min-height: 350px; - min-width: 250px; -} - -#support_claimed_panel { grid-column: 2; } -#opposition_claimed_panel { grid-column: 3; } - -#support_claimed_header { background-color: var(--back-suf); color: white; } -#opposition_claimed_header { background-color: var(--back-opp); color: white; } -#strategy_draw_header { background-color: var(--back-strategy); } -#states_draw_header { background-color: var(--back-states); } - -body.Suffragist #hand_header { background-color: var(--suf-75); } -body.Opposition #hand_header { background-color: var(--opp-75); } - -body.Suffragist #set_aside_header { background-color: var(--suf-85); } -body.Opposition #set_aside_header { background-color: var(--opp-85); } - -#support_claimed, #opposition_claimed { grid-template-columns: 250px; } -#strategy_draw { grid-template-columns: repeat(3, 250px); } - -#states_draw { - grid-template-columns: repeat(3, 250px); - grid-template-rows: repeat(3, 350px); -} - -@media (min-width: 1320px) { - #states_draw { - grid-template-columns: repeat(4, 250px); - grid-template-rows: repeat(3, 350px); - } -} - -@media (min-width: 1590px) { - #states_draw { - grid-template-columns: repeat(5, 250px); - grid-template-rows: repeat(2, 350px); - } -} - -@media (min-width: 1840px) { - #states_draw { - grid-template-columns: repeat(6, 250px); - grid-template-rows: repeat(2, 350px); - } -} - -#hand, #set_aside { - grid-template-columns: repeat(4, 250px); - grid-template-rows: repeat(2, 350px); -} - -@media (min-width: 2120px) { - #hand, #set_aside { - grid-template-columns: repeat(7, 250px); - grid-template-rows: repeat(1, 350px); - } -} - -@media (max-width: 800px) { - section { - width: 1100px; - } -} - -/* CARD ACTION POPUP MENU */ - -.popup { - min-width: 150px; - box-shadow: 0px 8px 16px 0px #0004; -} - -.popup li span { display: inline-block; width: 24px; } - -body.Suffragist .popup { background-color: var(--suf-95) } -body.Suffragist .popup li.title { color: black; background-color: var(--suf-75) } -body.Suffragist .popup li.action:hover { background-color: var(--suf-25) } - -body.Opposition .popup { background-color: var(--opp-95) } -body.Opposition .popup li.title { color: black; background-color: var(--opp-75) } -body.Opposition .popup li.action:hover { background-color: var(--opp-25) } - -/* MAP */ - -#mapwrap { - width: 1100px; - height: 850px; - x-border: 1px solid #222; - x-margin-top: -1px; - box-shadow: 1px 2px 4px #0004; -} - -#map { - width: 1100px; - height: 850px; - background-color: #f0e7d0; - background-image: url(map.webp); - background-size: 1100px 850px; -} - -#map-texture { - position: absolute; - width: 1100px; - height: 850px; - background-image: url(map-texture.jpg); - background-size: 1100px 850px; - mix-blend-mode: multiply; -} - -svg { - position: absolute; -} - -path.state { fill-opacity: 0.0; } -path.state.action { fill-opacity: 0.7; } -path.state.west { fill: teal } -path.state.plains { fill: chocolate } -path.state.midwest { fill: brown } -path.state.northeast { fill: royalblue } -path.state.atlantic { fill: green } -path.state.south { fill: #444 } - -div.state.action.northeast { background-color: #4169e1b3 } -div.state.action.atlantic { background-color: #008000b3 } - -path.state.selected { - stroke: black; - stroke-width: 12; -} - -path.state.tip { - stroke: white; - stroke-width: 12; - stroke-dasharray: 24 12; -} - -div.state { - position: absolute; - box-sizing: border-box; - background-clip: padding-box; - border-radius: 50%; - border: 5px solid transparent; - width: 62px; - height: 62px; - - color: black; - font-family: CopperplateCC; - font-weight: bold; - font-size: 14px; - text-align: center; - line-height: 52px; -} - -div.label { - pointer-events: none; - color: #222; - position: absolute; - font-family: CopperplateCC; - font-weight: bold; - font-size: 14px; - text-align: center; - line-height: 14px; - width: 50px; - height: 14px; -} - -div.label.large { - font-size: 15px; - line-height: 15px; - height: 15px; -} - -div.label.claimable { - color: white; -} - -div.state.selected { - border-color: black; -} - -div.state.tip { - border: 4px dashed white; -} - -div.region { - position: absolute; - box-sizing: border-box; - background-clip: padding-box; - border-radius: 50%; - border: 4px solid transparent; - width: 67px; - height: 67px; -} - -div.region.action { - border-color: white; -} - -div.region.tip { - border: 4px dashed white; -} - -div.persistent_box { - position: absolute; - width: 125px; -} - -.persistent_box .card { - position: absolute; - width: 125px; - height: 175px; - border-radius: 4px; - box-shadow: 0 0 0 1px #222, 1px 2px 2px #0004; -} - -body.shift .persistent_box .card:hover { - width: 250px; - height: 350px; - border-radius: 8px; - z-index: 100; -} - -div.congress_box { - position: absolute; - box-sizing: border-box; -} - -div.congress_box.action { - background-clip: padding-box; - background-color: #FFA500CC; - border: 5px solid orange; -} - -div.nineteenth_amendment_score:not(.hide) { - position: absolute; - background-color: #EEE7D2; - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - - font-weight: bold; - font-size: 24pt; -} - -.piece { - pointer-events: none; - position: absolute; - background-repeat: no-repeat; - background-size: contain; - filter: drop-shadow(0px 1px 2px #0004); -} - -.piece.congress.action { - pointer-events: auto; - filter: - drop-shadow(2px 0px 0px orange) - drop-shadow(0px 2px 0px orange) - drop-shadow(-2px 0px 0px orange) - drop-shadow(0px -2px 0px orange); -} - -.piece.action { - pointer-events: auto; - filter: - drop-shadow(2px 0px 0px white) - drop-shadow(0px 2px 0px white) - drop-shadow(-2px 0px 0px white) - drop-shadow(0px -2px 0px white); -} - -.piece.selected { - filter: - drop-shadow(2px 0px 0px yellow) - drop-shadow(0px 2px 0px yellow) - drop-shadow(-2px 0px 0px yellow) - drop-shadow(0px -2px 0px yellow); -} - - -/* 3D CUBES */ -.piece.cube { width: 21px; height: 25px; } -.piece.red.cube { background-image: url(pieces/iso_red_cube.svg); } -.piece.yellow.cube { background-image: url(pieces/iso_yellow_cube.svg); } -.piece.purple.cube { background-image: url(pieces/iso_purple_cube.svg); } - -/* 2D CUBES */ -/* -.piece.cube { width: 14px; height: 14px; border: 1px solid black; } -.piece.purple.cube { background-color: #6d5798; } -.piece.yellow.cube { background-color: #fec36d; } -.piece.red.cube { background-color: #e06136; } -*/ - -.piece.turn { - width: 30px; - height: 30px; - border-radius: 50%; - border: 3px solid white; - backdrop-filter: invert(80%); -} - -.piece.yes { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/yes.svg); } -.piece.yellow2 { width: 36px; height: 50px; background-size: 36px 50px; background-image: url(pieces/yellow2.svg); } -.piece.yellow1 { width: 34px; height: 50px; background-size: 36px 50px; background-image: url(pieces/yellow1.svg); } -.piece.turn3d { width: 33px; height: 36px; background-size: 33px 36px; background-image: url(pieces/turn.svg); } -.piece.red3 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red3.svg); } -.piece.red2 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red2.svg); } -.piece.red1 { width: 30px; height: 50px; background-size: 36px 50px; background-image: url(pieces/red1.svg); } -.piece.purple2 { width: 36px; height: 50px; background-size: 36px 50px; background-image: url(pieces/purple2.svg); } -.piece.purple1 { width: 34px; height: 50px; background-size: 36px 50px; background-image: url(pieces/purple1.svg); } -.piece.no { width: 42px; height: 32px; background-size: 42px 32px; background-image: url(pieces/no.svg); } -.piece.congress { width: 32px; height: 48px; background-size: 32px 48px; background-image: url(pieces/iso_congress.svg); } - -div.button_box { - position: absolute; - box-sizing: border-box; - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: start; - gap: 0px; -} - -div.button_box .button { margin: 0 0 -10px 0; } -div.button_box.h .button { margin: 0 0 0 -10px; } - -div.button_box.h { - flex-direction: row; -} - -div.button_box .button { - width: 38px; - height: 38px; - background-size: 100%; - border-radius: 50%; - border: 1px solid #0008; - box-shadow: 0 1px 4px #0004; -} - -.button_1{background-image:url(images/button1.png)} -.button_2{background-image:url(images/button2.png)} -.button_3{background-image:url(images/button3.png)} -.button_4{background-image:url(images/button4.png)} -.button_5{background-image:url(images/button5.png)} -.button_6{background-image:url(images/button6.png)} - -.card { - background-size: cover; - background-repeat: no-repeat; - width: 250px; - height: 350px; - border-radius: 8px; - box-shadow: 0 0 0 1px #222, 1px 2px 4px #0004; -} - -.card.support.action { - box-shadow: 0 0 0 1px black, 0 0 0 4px var(--suf-75); -} - -.card.opposition.action { - box-shadow: 0 0 0 1px black, 0 0 0 4px var(--opp-75); -} - -.card.states.action { - box-shadow: 0 0 0 1px black, 0 0 0 4px var(--action-states); -} - -.card.strategy.action { - box-shadow: 0 0 0 1px black, 0 0 0 4px var(--action-strategy); -} - -.card.selected { - box-shadow: 0 0 0 1px black, 0 0 0 4px yellow; -} - -.card.played { - box-shadow: 0 0 0 3px black; -} - -#tooltip { - position: fixed; - pointer-events: none; - z-index: 600; - right: 240px; - top: 60px; -} - -@media (max-width: 800px) { - #tooltip { - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - } -} - -/* CARD IMAGES */ - -.card_support_back{background-image:url(cards.1x/support_01.jpg)} -.card_opposition_back{background-image:url(cards.1x/opposition_01.jpg)} -.card_1{background-image:url(cards.1x/support_02.jpg)} -.card_2{background-image:url(cards.1x/support_03.jpg)} -.card_3{background-image:url(cards.1x/support_04.jpg)} -.card_4{background-image:url(cards.1x/support_05.jpg)} -.card_5{background-image:url(cards.1x/support_06.jpg)} -.card_6{background-image:url(cards.1x/support_07.jpg)} -.card_7{background-image:url(cards.1x/support_08.jpg)} -.card_8{background-image:url(cards.1x/support_09.jpg)} -.card_9{background-image:url(cards.1x/support_10.jpg)} -.card_10{background-image:url(cards.1x/support_11.jpg)} -.card_11{background-image:url(cards.1x/support_12.jpg)} -.card_12{background-image:url(cards.1x/support_13.jpg)} -.card_13{background-image:url(cards.1x/support_14.jpg)} -.card_14{background-image:url(cards.1x/support_15.jpg)} -.card_15{background-image:url(cards.1x/support_16.jpg)} -.card_16{background-image:url(cards.1x/support_17.jpg)} -.card_17{background-image:url(cards.1x/support_18.jpg)} -.card_18{background-image:url(cards.1x/support_19.jpg)} -.card_19{background-image:url(cards.1x/support_20.jpg)} -.card_20{background-image:url(cards.1x/support_21.jpg)} -.card_21{background-image:url(cards.1x/support_22.jpg)} -.card_22{background-image:url(cards.1x/support_23.jpg)} -.card_23{background-image:url(cards.1x/support_24.jpg)} -.card_24{background-image:url(cards.1x/support_25.jpg)} -.card_25{background-image:url(cards.1x/support_26.jpg)} -.card_26{background-image:url(cards.1x/support_27.jpg)} -.card_27{background-image:url(cards.1x/support_28.jpg)} -.card_28{background-image:url(cards.1x/support_29.jpg)} -.card_29{background-image:url(cards.1x/support_30.jpg)} -.card_30{background-image:url(cards.1x/support_31.jpg)} -.card_31{background-image:url(cards.1x/support_32.jpg)} -.card_32{background-image:url(cards.1x/support_33.jpg)} -.card_33{background-image:url(cards.1x/support_34.jpg)} -.card_34{background-image:url(cards.1x/support_35.jpg)} -.card_35{background-image:url(cards.1x/support_36.jpg)} -.card_36{background-image:url(cards.1x/support_37.jpg)} -.card_37{background-image:url(cards.1x/support_38.jpg)} -.card_38{background-image:url(cards.1x/support_39.jpg)} -.card_39{background-image:url(cards.1x/support_40.jpg)} -.card_40{background-image:url(cards.1x/support_41.jpg)} -.card_41{background-image:url(cards.1x/support_42.jpg)} -.card_42{background-image:url(cards.1x/support_43.jpg)} -.card_43{background-image:url(cards.1x/support_44.jpg)} -.card_44{background-image:url(cards.1x/support_45.jpg)} -.card_45{background-image:url(cards.1x/support_46.jpg)} -.card_46{background-image:url(cards.1x/support_47.jpg)} -.card_47{background-image:url(cards.1x/support_48.jpg)} -.card_48{background-image:url(cards.1x/support_49.jpg)} -.card_49{background-image:url(cards.1x/support_50.jpg)} -.card_50{background-image:url(cards.1x/support_51.jpg)} -.card_51{background-image:url(cards.1x/support_52.jpg)} -.card_52{background-image:url(cards.1x/support_53.jpg)} -.card_53{background-image:url(cards.1x/opposition_02.jpg)} -.card_54{background-image:url(cards.1x/opposition_03.jpg)} -.card_55{background-image:url(cards.1x/opposition_04.jpg)} -.card_56{background-image:url(cards.1x/opposition_05.jpg)} -.card_57{background-image:url(cards.1x/opposition_06.jpg)} -.card_58{background-image:url(cards.1x/opposition_07.jpg)} -.card_59{background-image:url(cards.1x/opposition_08.jpg)} -.card_60{background-image:url(cards.1x/opposition_09.jpg)} -.card_61{background-image:url(cards.1x/opposition_10.jpg)} -.card_62{background-image:url(cards.1x/opposition_11.jpg)} -.card_63{background-image:url(cards.1x/opposition_12.jpg)} -.card_64{background-image:url(cards.1x/opposition_13.jpg)} -.card_65{background-image:url(cards.1x/opposition_14.jpg)} -.card_66{background-image:url(cards.1x/opposition_15.jpg)} -.card_67{background-image:url(cards.1x/opposition_16.jpg)} -.card_68{background-image:url(cards.1x/opposition_17.jpg)} -.card_69{background-image:url(cards.1x/opposition_18.jpg)} -.card_70{background-image:url(cards.1x/opposition_19.jpg)} -.card_71{background-image:url(cards.1x/opposition_20.jpg)} -.card_72{background-image:url(cards.1x/opposition_21.jpg)} -.card_73{background-image:url(cards.1x/opposition_22.jpg)} -.card_74{background-image:url(cards.1x/opposition_23.jpg)} -.card_75{background-image:url(cards.1x/opposition_24.jpg)} -.card_76{background-image:url(cards.1x/opposition_25.jpg)} -.card_77{background-image:url(cards.1x/opposition_26.jpg)} -.card_78{background-image:url(cards.1x/opposition_27.jpg)} -.card_79{background-image:url(cards.1x/opposition_28.jpg)} -.card_80{background-image:url(cards.1x/opposition_29.jpg)} -.card_81{background-image:url(cards.1x/opposition_30.jpg)} -.card_82{background-image:url(cards.1x/opposition_31.jpg)} -.card_83{background-image:url(cards.1x/opposition_32.jpg)} -.card_84{background-image:url(cards.1x/opposition_33.jpg)} -.card_85{background-image:url(cards.1x/opposition_34.jpg)} -.card_86{background-image:url(cards.1x/opposition_35.jpg)} -.card_87{background-image:url(cards.1x/opposition_36.jpg)} -.card_88{background-image:url(cards.1x/opposition_37.jpg)} -.card_89{background-image:url(cards.1x/opposition_38.jpg)} -.card_90{background-image:url(cards.1x/opposition_39.jpg)} -.card_91{background-image:url(cards.1x/opposition_40.jpg)} -.card_92{background-image:url(cards.1x/opposition_41.jpg)} -.card_93{background-image:url(cards.1x/opposition_42.jpg)} -.card_94{background-image:url(cards.1x/opposition_43.jpg)} -.card_95{background-image:url(cards.1x/opposition_44.jpg)} -.card_96{background-image:url(cards.1x/opposition_45.jpg)} -.card_97{background-image:url(cards.1x/opposition_46.jpg)} -.card_98{background-image:url(cards.1x/opposition_47.jpg)} -.card_99{background-image:url(cards.1x/opposition_48.jpg)} -.card_100{background-image:url(cards.1x/opposition_49.jpg)} -.card_101{background-image:url(cards.1x/opposition_50.jpg)} -.card_102{background-image:url(cards.1x/opposition_51.jpg)} -.card_103{background-image:url(cards.1x/opposition_52.jpg)} -.card_104{background-image:url(cards.1x/opposition_53.jpg)} -.card_105{background-image:url(cards.1x/strategy_02.jpg)} -.card_106{background-image:url(cards.1x/strategy_03.jpg)} -.card_107{background-image:url(cards.1x/strategy_04.jpg)} -.card_108{background-image:url(cards.1x/strategy_05.jpg)} -.card_109{background-image:url(cards.1x/strategy_06.jpg)} -.card_110{background-image:url(cards.1x/strategy_07.jpg)} -.card_111{background-image:url(cards.1x/strategy_08.jpg)} -.card_112{background-image:url(cards.1x/strategy_09.jpg)} -.card_113{background-image:url(cards.1x/strategy_10.jpg)} -.card_114{background-image:url(cards.1x/strategy_11.jpg)} -.card_115{background-image:url(cards.1x/strategy_12.jpg)} -.card_116{background-image:url(cards.1x/strategy_13.jpg)} -.card_117{background-image:url(cards.1x/states_02.jpg)} -.card_118{background-image:url(cards.1x/states_03.jpg)} -.card_119{background-image:url(cards.1x/states_04.jpg)} -.card_120{background-image:url(cards.1x/states_05.jpg)} -.card_121{background-image:url(cards.1x/states_06.jpg)} -.card_122{background-image:url(cards.1x/states_07.jpg)} -.card_123{background-image:url(cards.1x/states_08.jpg)} -.card_124{background-image:url(cards.1x/states_09.jpg)} -.card_125{background-image:url(cards.1x/states_10.jpg)} -.card_126{background-image:url(cards.1x/states_11.jpg)} -.card_127{background-image:url(cards.1x/states_12.jpg)} -.card_128{background-image:url(cards.1x/states_13.jpg)} - -@media (min-resolution: 97dpi) { -.card_support_back{background-image:url(cards.2x/support_01.jpg)} -.card_opposition_back{background-image:url(cards.2x/opposition_01.jpg)} -.card_1{background-image:url(cards.2x/support_02.jpg)} -.card_2{background-image:url(cards.2x/support_03.jpg)} -.card_3{background-image:url(cards.2x/support_04.jpg)} -.card_4{background-image:url(cards.2x/support_05.jpg)} -.card_5{background-image:url(cards.2x/support_06.jpg)} -.card_6{background-image:url(cards.2x/support_07.jpg)} -.card_7{background-image:url(cards.2x/support_08.jpg)} -.card_8{background-image:url(cards.2x/support_09.jpg)} -.card_9{background-image:url(cards.2x/support_10.jpg)} -.card_10{background-image:url(cards.2x/support_11.jpg)} -.card_11{background-image:url(cards.2x/support_12.jpg)} -.card_12{background-image:url(cards.2x/support_13.jpg)} -.card_13{background-image:url(cards.2x/support_14.jpg)} -.card_14{background-image:url(cards.2x/support_15.jpg)} -.card_15{background-image:url(cards.2x/support_16.jpg)} -.card_16{background-image:url(cards.2x/support_17.jpg)} -.card_17{background-image:url(cards.2x/support_18.jpg)} -.card_18{background-image:url(cards.2x/support_19.jpg)} -.card_19{background-image:url(cards.2x/support_20.jpg)} -.card_20{background-image:url(cards.2x/support_21.jpg)} -.card_21{background-image:url(cards.2x/support_22.jpg)} -.card_22{background-image:url(cards.2x/support_23.jpg)} -.card_23{background-image:url(cards.2x/support_24.jpg)} -.card_24{background-image:url(cards.2x/support_25.jpg)} -.card_25{background-image:url(cards.2x/support_26.jpg)} -.card_26{background-image:url(cards.2x/support_27.jpg)} -.card_27{background-image:url(cards.2x/support_28.jpg)} -.card_28{background-image:url(cards.2x/support_29.jpg)} -.card_29{background-image:url(cards.2x/support_30.jpg)} -.card_30{background-image:url(cards.2x/support_31.jpg)} -.card_31{background-image:url(cards.2x/support_32.jpg)} -.card_32{background-image:url(cards.2x/support_33.jpg)} -.card_33{background-image:url(cards.2x/support_34.jpg)} -.card_34{background-image:url(cards.2x/support_35.jpg)} -.card_35{background-image:url(cards.2x/support_36.jpg)} -.card_36{background-image:url(cards.2x/support_37.jpg)} -.card_37{background-image:url(cards.2x/support_38.jpg)} -.card_38{background-image:url(cards.2x/support_39.jpg)} -.card_39{background-image:url(cards.2x/support_40.jpg)} -.card_40{background-image:url(cards.2x/support_41.jpg)} -.card_41{background-image:url(cards.2x/support_42.jpg)} -.card_42{background-image:url(cards.2x/support_43.jpg)} -.card_43{background-image:url(cards.2x/support_44.jpg)} -.card_44{background-image:url(cards.2x/support_45.jpg)} -.card_45{background-image:url(cards.2x/support_46.jpg)} -.card_46{background-image:url(cards.2x/support_47.jpg)} -.card_47{background-image:url(cards.2x/support_48.jpg)} -.card_48{background-image:url(cards.2x/support_49.jpg)} -.card_49{background-image:url(cards.2x/support_50.jpg)} -.card_50{background-image:url(cards.2x/support_51.jpg)} -.card_51{background-image:url(cards.2x/support_52.jpg)} -.card_52{background-image:url(cards.2x/support_53.jpg)} -.card_53{background-image:url(cards.2x/opposition_02.jpg)} -.card_54{background-image:url(cards.2x/opposition_03.jpg)} -.card_55{background-image:url(cards.2x/opposition_04.jpg)} -.card_56{background-image:url(cards.2x/opposition_05.jpg)} -.card_57{background-image:url(cards.2x/opposition_06.jpg)} -.card_58{background-image:url(cards.2x/opposition_07.jpg)} -.card_59{background-image:url(cards.2x/opposition_08.jpg)} -.card_60{background-image:url(cards.2x/opposition_09.jpg)} -.card_61{background-image:url(cards.2x/opposition_10.jpg)} -.card_62{background-image:url(cards.2x/opposition_11.jpg)} -.card_63{background-image:url(cards.2x/opposition_12.jpg)} -.card_64{background-image:url(cards.2x/opposition_13.jpg)} -.card_65{background-image:url(cards.2x/opposition_14.jpg)} -.card_66{background-image:url(cards.2x/opposition_15.jpg)} -.card_67{background-image:url(cards.2x/opposition_16.jpg)} -.card_68{background-image:url(cards.2x/opposition_17.jpg)} -.card_69{background-image:url(cards.2x/opposition_18.jpg)} -.card_70{background-image:url(cards.2x/opposition_19.jpg)} -.card_71{background-image:url(cards.2x/opposition_20.jpg)} -.card_72{background-image:url(cards.2x/opposition_21.jpg)} -.card_73{background-image:url(cards.2x/opposition_22.jpg)} -.card_74{background-image:url(cards.2x/opposition_23.jpg)} -.card_75{background-image:url(cards.2x/opposition_24.jpg)} -.card_76{background-image:url(cards.2x/opposition_25.jpg)} -.card_77{background-image:url(cards.2x/opposition_26.jpg)} -.card_78{background-image:url(cards.2x/opposition_27.jpg)} -.card_79{background-image:url(cards.2x/opposition_28.jpg)} -.card_80{background-image:url(cards.2x/opposition_29.jpg)} -.card_81{background-image:url(cards.2x/opposition_30.jpg)} -.card_82{background-image:url(cards.2x/opposition_31.jpg)} -.card_83{background-image:url(cards.2x/opposition_32.jpg)} -.card_84{background-image:url(cards.2x/opposition_33.jpg)} -.card_85{background-image:url(cards.2x/opposition_34.jpg)} -.card_86{background-image:url(cards.2x/opposition_35.jpg)} -.card_87{background-image:url(cards.2x/opposition_36.jpg)} -.card_88{background-image:url(cards.2x/opposition_37.jpg)} -.card_89{background-image:url(cards.2x/opposition_38.jpg)} -.card_90{background-image:url(cards.2x/opposition_39.jpg)} -.card_91{background-image:url(cards.2x/opposition_40.jpg)} -.card_92{background-image:url(cards.2x/opposition_41.jpg)} -.card_93{background-image:url(cards.2x/opposition_42.jpg)} -.card_94{background-image:url(cards.2x/opposition_43.jpg)} -.card_95{background-image:url(cards.2x/opposition_44.jpg)} -.card_96{background-image:url(cards.2x/opposition_45.jpg)} -.card_97{background-image:url(cards.2x/opposition_46.jpg)} -.card_98{background-image:url(cards.2x/opposition_47.jpg)} -.card_99{background-image:url(cards.2x/opposition_48.jpg)} -.card_100{background-image:url(cards.2x/opposition_49.jpg)} -.card_101{background-image:url(cards.2x/opposition_50.jpg)} -.card_102{background-image:url(cards.2x/opposition_51.jpg)} -.card_103{background-image:url(cards.2x/opposition_52.jpg)} -.card_104{background-image:url(cards.2x/opposition_53.jpg)} -.card_105{background-image:url(cards.2x/strategy_02.jpg)} -.card_106{background-image:url(cards.2x/strategy_03.jpg)} -.card_107{background-image:url(cards.2x/strategy_04.jpg)} -.card_108{background-image:url(cards.2x/strategy_05.jpg)} -.card_109{background-image:url(cards.2x/strategy_06.jpg)} -.card_110{background-image:url(cards.2x/strategy_07.jpg)} -.card_111{background-image:url(cards.2x/strategy_08.jpg)} -.card_112{background-image:url(cards.2x/strategy_09.jpg)} -.card_113{background-image:url(cards.2x/strategy_10.jpg)} -.card_114{background-image:url(cards.2x/strategy_11.jpg)} -.card_115{background-image:url(cards.2x/strategy_12.jpg)} -.card_116{background-image:url(cards.2x/strategy_13.jpg)} -.card_117{background-image:url(cards.2x/states_02.jpg)} -.card_118{background-image:url(cards.2x/states_03.jpg)} -.card_119{background-image:url(cards.2x/states_04.jpg)} -.card_120{background-image:url(cards.2x/states_05.jpg)} -.card_121{background-image:url(cards.2x/states_06.jpg)} -.card_122{background-image:url(cards.2x/states_07.jpg)} -.card_123{background-image:url(cards.2x/states_08.jpg)} -.card_124{background-image:url(cards.2x/states_09.jpg)} -.card_125{background-image:url(cards.2x/states_10.jpg)} -.card_126{background-image:url(cards.2x/states_11.jpg)} -.card_127{background-image:url(cards.2x/states_12.jpg)} -.card_128{background-image:url(cards.2x/states_13.jpg)} -} - -</style> </head> <body> |