main { background-color: dimgray; } #roles { background-color: gray; } header { background-color: silver; } header.your_turn { background-color: orange; } #role_Red .role_name { background-color: salmon; } #role_Blue .role_name { background-color: skyblue; } #role_Yellow .role_name { background-color: khaki; } #role_Green .role_name { background-color: darkseagreen; } #turn_info { background-color: gainsboro; } .role_vp { float: right; } body.Observer #hand_panel, body.Observer #draw_panel, body.Observer #discard_panel { display: none; } #role_Red .role_name { background-color: hsl(354,85%,67%) } #role_Blue .role_name { background-color: hsl(207,67%,78%) } #role_Yellow .role_name { background-color: hsl(47,100%,73%) } #role_Green .role_name { background-color: hsl(99,36%,60%) } body.Red .your_turn { background-color: hsl(354,85%,72%) } body.Blue .your_turn { background-color: hsl(207,67%,83%) } body.Yellow .your_turn { background-color: hsl(47,100%,78%) } body.Green .your_turn { background-color: hsl(99,36%,65%) } #log .h1.R { background-color: hsl(354,85%,77%) } #log .h1.B { background-color: hsl(207,67%,83%) } #log .h1.Y { background-color: hsl(47,100%,78%) } #log .h1.G { background-color: hsl(99,36%,70%) } #log span.M { color: hsl(358, 78%, 41%) } #log span.S { color: hsl(206, 100%, 30%) } #log span.P { color: hsl(44, 100%, 32%) } #log .tip { cursor: default } #log .tip:hover { text-decoration: underline; } #log { background-color: whitesmoke; } #log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; margin: 8px 0; text-align: center; } #log .h1 { border-bottom: 1px solid #444; border-top: 1px solid #444; } #log .h2 { background-color: gainsboro; text-align: center; } #log .h3 { text-decoration: underline; } #log div { padding-left: 20px; text-indent: -12px; } #log div.i { padding-left: 32px; text-indent: -12px; } #log .white, #log .black { display: inline-block; vertical-align: -2px; width: 12px; height: 12px; border-radius: 0px; box-shadow: none; border: none; background-size: 600% 100%; background-repeat: no-repeat; } #log .white { background-image: url(images/die_black_pips.svg); background-color: #fff; border: 1px solid #444; } #log .black { background-image: url(images/die_white_pips.svg); background-color: #666; border: 1px solid #222; } .action { cursor: pointer; } #mapwrap { width: 2550px; height: 1650px; box-shadow: 0px 1px 10px #0008; margin-bottom: 100px; } #map { width: 2550px; height: 1650px; background-size: cover; background-repeat: no-repeat; background-image: url(map75.jpg); background-color: #e8d792; } #crisis_table { display: none; position: absolute; width: 262px; height: 356px; top: 159px; right: 93px; } body.p2 #crisis_table { display: block; background-image: url(overlay_2p_75.jpg); } body.p3 #crisis_table { display: block; background-image: url(overlay_3p_75.jpg); } #active_event { position: absolute; display: block; width: 250px; height: 350px; bottom: 50px; left: 50px; } svg { position: absolute; } svg .region, svg .sea { fill: transparent; stroke: transparent; stroke-width: 4px; } svg .region.action, svg .sea.action { fill: black; fill-opacity: 0.3; } svg .region.selected { fill-opacity: 0.3; stroke-dasharray: 8 4; } body.military svg .region.action { fill: hsl(358, 78%, 51%); } body.senate svg .region.action { fill: hsl(206, 100%, 35%); } body.populace svg .region.action { fill: hsl(44, 80%, 52%); } body.military svg .region.selected { fill: hsl(358, 78%, 51%); stroke: hsl(358, 78%, 51%); } body.senate svg .region.selected { fill: hsl(206, 100%, 35%); fill-opacity: 0.3; stroke: hsl(206, 100%, 35%); } body.populace svg .region.selected { fill: hsl(44, 80%, 52%); fill-opacity: 0.3; stroke: hsl(44, 80%, 52%); } body svg .sea.action { fill: hsl(206, 100%, 35%); fill-opacity: 0.25; } #pieces div { position: absolute; transition-property: top, left, transform; transition-duration: 200ms; transition-timing-function: ease; } .support { box-sizing: border-box; width: 54px; height: 54px; border: 4px solid transparent; border-radius: 8px; z-index: 0; display: none; } .support.action { background-color: hsla(44, 80%, 52%, 0.4); border-color: white; display: block; } .dice { width: 36px; height: 36px; border-radius: 6px; border-width: 2px; border-style: solid; background-size: 600% 100%; background-repeat: no-repeat; } .d0 { background-position: -100% 0 } .d1 { background-position: 0% 0; } .d2 { background-position: 20% 0; } .d3 { background-position: 40% 0; } .d4 { background-position: 60% 0; } .d5 { background-position: 80% 0; } .d6 { background-position: 100% 0; } .dice.black { background-image: url(images/die_white_pips.svg); background-color: #444; } .dice.white { background-image: url(images/die_black_pips.svg); background-color: #eee; } .dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, 1px 2px 4px #0008; } .dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, 1px 2px 4px #0008; } /* MAGIC TRACKS */ .governor.s1 { transform: translateX(52px) } .governor.s2 { transform: translateX(104px) } .governor.s3 { transform: translateX(156px) } .governor.s4 { transform: translateX(208px) } .governor.s5 { transform: translate(26px, 52px) } .governor.s6 { transform: translate(78px, 52px) } .governor.s7 { transform: translate(129px, 52px) } .governor.s8 { transform: translate(181px, 52px) } .capital { display: none; box-sizing: border-box; width: 72px; height: 72px; } .capital.action { display: block; border: 5px solid white; box-shadow: 0 0 6px white, inset 0 0 6px black; } body.p3 #npg_hispania { display: block } body.p3 #npg_africa { display: block } body.p3 #npg_aegyptus { display: block } body.p2 #npg_britannia { display: block } body.p2 #npg_hispania { display: block } body.p2 #npg_africa { display: block } body.p2 #npg_aegyptus { display: block } body.p2 #npg_syria { display: block } body.p2 #npg_galatia { display: block } /* COUNTERS */ .amphitheater, .basilica, .limes { background-color: #efebea; } .red { background-color: #ed1b2f; } .blue { background-color: #a0caec; } .yellow { background-color: #ffe175; } .green { background-color: #80b563; } .alamanni { background-color: #c3bc8e; } .franks { background-color: #9cb4be; } .goths { background-color: #3a9cd6; } .nomads { background-color: #f99d1c; } .sassanids { background-color: #8e5ca6; } .rival_emperor { background-color: #b8b996; } .militia, .legion { background-color: #ffffff; } .neutral { background-color: #e3dedc; } .no_place_governor { background-color: #6e6e6e; } /* :r !node tools/gencolors.js */ .amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, 1px 2px 4px #0008; } .red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, 1px 2px 4px #0008; } .blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, 1px 2px 4px #0008; } .yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, 1px 2px 4px #0008; } .green { border-color: #ace48f #568837 #568837 #ace48f; box-shadow: 0 0 0 1px #033600, 1px 2px 4px #0008; } .alamanni { border-color: #f7efc0 #928b5f #928b5f #f7efc0; box-shadow: 0 0 0 1px #393204, 1px 2px 4px #0008; } .franks { border-color: #cce5ef #6f868f #6f868f #cce5ef; box-shadow: 0 0 0 1px #1d323a, 1px 2px 4px #0008; } .goths { border-color: #68c6ff #0073ab #0073ab #68c6ff; box-shadow: 0 0 0 1px #002759, 1px 2px 4px #0008; } .nomads { border-color: #ffcf60 #c56c00 #c56c00 #ffcf60; box-shadow: 0 0 0 1px #610700, 1px 2px 4px #0008; } .sassanids { border-color: #b17dca #6d3c83 #6d3c83 #b17dca; box-shadow: 0 0 0 1px #2f0042, 1px 2px 4px #0008; } .rival_emperor { border-color: #eaebc7 #888968 #888968 #eaebc7; box-shadow: 0 0 0 1px #323214, 1px 2px 4px #0008; } .neutral { border-color: #fffefc #a9a4a2 #a9a4a2 #fffefc; box-shadow: 0 0 0 1px #403d3b, 1px 2px 4px #0008; } .militia { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; } .legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; } .no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, 1px 2px 4px #0008; } .red.action { box-shadow: 0 0 0 1px #680000, 0 0 0 4px white; } .blue.action { box-shadow: 0 0 0 1px #113854, 0 0 0 4px white; } .yellow.action { box-shadow: 0 0 0 1px #553a00, 0 0 0 4px white; } .green.action { box-shadow: 0 0 0 1px #033600, 0 0 0 4px white; } .legion.action { box-shadow: 0 0 0 1px #434343, 0 0 0 4px white; } .militia.action { box-shadow: 0 0 0 1px #434343, 0 0 0 4px white; } .alamanni.action { box-shadow: 0 0 0 1px #393204, 0 0 0 4px white; } .franks.action { box-shadow: 0 0 0 1px #1d323a, 0 0 0 4px white; } .goths.action { box-shadow: 0 0 0 1px #002759, 0 0 0 4px white; } .nomads.action { box-shadow: 0 0 0 1px #610700, 0 0 0 4px white; } .sassanids.action { box-shadow: 0 0 0 1px #2f0042, 0 0 0 4px white; } .rival_emperor.action { box-shadow: 0 0 0 1px #323214, 0 0 0 4px white; } .red.selected { box-shadow: 0 0 0 1px #680000, 0 0 0 4px yellow; } .blue.selected { box-shadow: 0 0 0 1px #113854, 0 0 0 4px yellow; } .yellow.selected { box-shadow: 0 0 0 1px #553a00, 0 0 0 4px yellow; } .green.selected { box-shadow: 0 0 0 1px #033600, 0 0 0 4px yellow; } .militia.selected { box-shadow: 0 0 0 1px #434343, 0 0 0 4px yellow; } #legion_0 { background-position: 0px 0px } #legion_1 { background-position: -55px 0px } #legion_2 { background-position: -110px 0px } #legion_3 { background-position: -165px 0px } #legion_4 { background-position: -220px 0px } #legion_5 { background-position: -275px 0px } #legion_6 { background-position: -330px 0px } #legion_7 { background-position: -385px 0px } #legion_8 { background-position: -440px 0px } #legion_9 { background-position: 0px -55px } #legion_10 { background-position: -55px -55px } #legion_11 { background-position: -110px -55px } #legion_12 { background-position: -165px -55px } #legion_13 { background-position: -220px -55px } #legion_14 { background-position: -275px -55px } #legion_15 { background-position: -330px -55px } #legion_16 { background-position: -385px -55px } #legion_17 { background-position: -440px -55px } #legion_18 { background-position: 0px -110px } #legion_19 { background-position: -55px -110px } #legion_20 { background-position: -110px -110px } #legion_21 { background-position: -165px -110px } #legion_22 { background-position: -220px -110px } #legion_23 { background-position: -275px -110px } #legion_24 { background-position: -330px -110px } #legion_25 { background-position: -385px -110px } #legion_26 { background-position: -440px -110px } #legion_27 { background-position: 0px -165px } #legion_28 { background-position: -55px -165px } #legion_29 { background-position: -110px -165px } #legion_30 { background-position: -165px -165px } #legion_31 { background-position: -220px -165px } #legion_32 { background-position: -275px -165px } .amphitheater, .basilica, .limes { width: 92px; height: 46px; background-size: 92px 46px; border-radius: 8px; border-width: 2px; border-style: solid; } .militia, .legion, .alamanni, .franks, .goths, .nomads, .sassanids, .rival_emperor, .general, .emperor_turns, .no_place_governor { width: 55px; height: 55px; background-size: 55px 55px; background-repeat: no-repeat; border-radius: 8px; border-width: 2px; border-style: solid; } .general.unavailable { background-size: 330px 55px } .general.unavailable.n1 { background-position: -55px 0 } .general.unavailable.n2 { background-position: -110px 0 } .general.unavailable.n3 { background-position: -165px 0 } .general.unavailable.n4 { background-position: -220px 0 } .general.unavailable.n5 { background-position: -275px 0 } .no_place_governor { display: none; margin: 4px 0 0 4px; width: 58px; height: 58px; background-position: center; border-radius: 0; } .governor, .legacy, .legacy_40 { width: 50px; height: 50px; background-size: 50px 50px; border-radius: 50%; border-width: 2px; border-style: solid; } .governor { z-index: 1 } .governor.unavailable { background-size: 300px 50px } .governor.unavailable.n1 { background-position: -50px 0 } .governor.unavailable.n2 { background-position: -100px 0 } .governor.unavailable.n3 { background-position: -150px 0 } .governor.unavailable.n4 { background-position: -200px 0 } .governor.unavailable.n5 { background-position: -250px 0 } .castra, .quaestor, .mob, .mob_x2, .seat_of_power, .breakaway { pointer-events: none; width: 54px; height: 64px; background-size: 54px 64px; background-color: transparent; box-shadow: none; filter: drop-shadow(0px 1px 3px #0008); } .legion { background-size: 900% 400%; } .no_place_governor { background-image: url(images/no_place_governor.png) } .legion { background-image: url(images/legion_full.png) } .legion.reduced { background-image: url(images/legion_reduced.png) } .amphitheater { background-image: url(images/amphitheater.png) } .basilica { background-image: url(images/basilica.png) } .limes { background-image: url(images/limes.png) } .militia { background-image: url(images/militia.png) } .alamanni { background-image: url(images/alamanni_active.png) } .franks { background-image: url(images/franks_active.png) } .goths { background-image: url(images/goths_active.png) } .nomads { background-image: url(images/nomads_active.png) } .sassanids { background-image: url(images/sassanids_active.png) } .alamanni.inactive { background-image: url(images/alamanni_inactive.png) } .franks.inactive { background-image: url(images/franks_inactive.png) } .goths.inactive { background-image: url(images/goths_inactive.png) } .nomads.inactive { background-image: url(images/nomads_inactive.png) } .sassanids.inactive { background-image: url(images/sassanids_inactive.png) } .neutral.governor { background-image: url(images/neutral_governor.png) } .ardashir { background-image: url(images/ardashir.png) } .cniva { background-image: url(images/cniva.png) } .shapur { background-image: url(images/shapur.png) } .ardashir.inactive { background-image: url(images/shapur_back.png) } .cniva.inactive { background-image: url(images/cniva_back.png) } .shapur.inactive { background-image: url(images/shapur_back.png) } .postumus { background-image: url(images/rival_postumus.png) } .priest_king { background-image: url(images/rival_priest_king.png) } .zenobia { background-image: url(images/rival_zenobia.png) } body.shift .ardashir { background-image: url(images/shapur_back.png) } body.shift .cniva { background-image: url(images/cniva_back.png) } body.shift .shapur { background-image: url(images/shapur_back.png) } body.shift .postumus { background-image: url(images/rival_back.png) } body.shift .priest_king { background-image: url(images/rival_back.png) } body.shift .zenobia { background-image: url(images/rival_back.png) } body.shift .ardashir.inactive { background-image: url(images/ardashir.png) } body.shift .cniva.inactive { background-image: url(images/cniva.png) } body.shift .shapur.inactive { background-image: url(images/shapur.png) } .blue.governor { background-image: url(images/blue_governor.png) } .green.governor { background-image: url(images/green_governor.png) } .red.governor { background-image: url(images/red_governor.png) } .yellow.governor { background-image: url(images/yellow_governor.png) } .blue.legacy { background-image: url(images/blue_legacy.png) } .green.legacy { background-image: url(images/green_legacy.png) } .red.legacy { background-image: url(images/red_legacy.png) } .yellow.legacy { background-image: url(images/yellow_legacy.png) } .blue.legacy_40 { background-image: url(images/blue_legacy_40.png) } .green.legacy_40 { background-image: url(images/green_legacy_40.png) } .red.legacy_40 { background-image: url(images/red_legacy_40.png) } .yellow.legacy_40 { background-image: url(images/yellow_legacy_40.png) } .blue.general { background-image: url(images/blue_general.png) } .green.general { background-image: url(images/green_general.png) } .red.general { background-image: url(images/red_general.png) } .yellow.general { background-image: url(images/yellow_general.png) } .blue.emperor_turns { background-image: url(images/blue_emperor_turns.png) } .green.emperor_turns { background-image: url(images/green_emperor_turns.png) } .red.emperor_turns { background-image: url(images/red_emperor_turns.png) } .yellow.emperor_turns { background-image: url(images/yellow_emperor_turns.png) } .general.unavailable { background-image: url(images/general_numbers.png) } .governor.unavailable { background-image: url(images/governor_numbers.png) } .blue.governor.emperor { background-image: url(images/blue_governor_emperor.png) } .green.governor.emperor { background-image: url(images/green_governor_emperor.png) } .red.governor.emperor { background-image: url(images/red_governor_emperor.png) } .yellow.governor.emperor { background-image: url(images/yellow_governor_emperor.png) } .blue.general.emperor { background-image: url(images/blue_general_emperor.png) } .green.general.emperor { background-image: url(images/green_general_emperor.png) } .red.general.emperor { background-image: url(images/red_general_emperor.png) } .yellow.general.emperor { background-image: url(images/yellow_general_emperor.png) } .castra { background-image: url(images/castra.svg) } .quaestor { background-image: url(images/quaestor.svg) } .mob { background-image: url(images/mob.svg) } .mob_x2 { background-image: url(images/mob_x2.svg) } .blue.seat_of_power { background-image: url(images/blue_seat_of_power.svg) } .green.seat_of_power { background-image: url(images/green_seat_of_power.svg) } .red.seat_of_power { background-image: url(images/red_seat_of_power.svg) } .yellow.seat_of_power { background-image: url(images/yellow_seat_of_power.svg) } .blue.breakaway { background-image: url(images/blue_breakaway.svg) } .green.breakaway { background-image: url(images/green_breakaway.svg) } .red.breakaway { background-image: url(images/red_breakaway.svg) } .yellow.breakaway { background-image: url(images/yellow_breakaway.svg) } /* CARDS */ #card_tip { position: fixed; z-index: 200; right: 240px; top: 60px; } .card { width: 250px; height: 350px; background-size: 250px 350px; background-repeat: no-repeat; border-radius: 16px; box-shadow: 0 0 0px 1px #444, 0 0 4px #000; } .card.event.event_0 { background-color: #b73c26 } .card.event { background-color: #f1f2f4 } .card.influence.influence_back { background-color: #5c1d57 } .card.influence { background-color: #ece8dc } .card.action { transition: transform 100ms ease; transform: translate(0px, 0px); box-shadow: 0 0 0px 1px #444, 0 0 0px 4px white; } #discard .card.action { box-shadow: 0 0 0px 1px #444, 0 0 0px 3px red; } #market .card.action { box-shadow: 0 0 0px 1px #444, 0 0 0px 3px gold; } .card.action:hover { transform: translate(0px, -6px); } #played .influence_m1, #played .influence_s1, #played .influence_p1, .card.used { filter: brightness(75%) } #hand, #draw, #discard { min-height: 350px; } .card.event_0{background-image:url(cards.1x/event_back.jpg)} .card.event_1{background-image:url(cards.1x/event_01.jpg)} .card.event_2{background-image:url(cards.1x/event_02.jpg)} .card.event_3{background-image:url(cards.1x/event_03.jpg)} .card.event_4{background-image:url(cards.1x/event_04.jpg)} .card.event_5{background-image:url(cards.1x/event_05.jpg)} .card.event_6{background-image:url(cards.1x/event_06.jpg)} .card.event_7{background-image:url(cards.1x/event_07.jpg)} .card.event_8{background-image:url(cards.1x/event_08.jpg)} .card.event_9{background-image:url(cards.1x/event_09.jpg)} .card.event_10{background-image:url(cards.1x/event_10.jpg)} .card.event_11{background-image:url(cards.1x/event_11.jpg)} .card.event_12{background-image:url(cards.1x/event_12.jpg)} .card.event_13{background-image:url(cards.1x/event_13.jpg)} .card.event_14{background-image:url(cards.1x/event_14.jpg)} .card.event_15{background-image:url(cards.1x/event_15.jpg)} .card.influence_back{background-image:url(cards.1x/influence_back.jpg)} .card.influence_m1{background-image:url(cards.1x/influence_m1.jpg)} .card.influence_m2{background-image:url(cards.1x/influence_m2.jpg)} .card.influence_m3{background-image:url(cards.1x/influence_m3.jpg)} .card.influence_m4{background-image:url(cards.1x/influence_m4.jpg)} .card.influence_p1{background-image:url(cards.1x/influence_p1.jpg)} .card.influence_p2{background-image:url(cards.1x/influence_p2.jpg)} .card.influence_p3{background-image:url(cards.1x/influence_p3.jpg)} .card.influence_p4{background-image:url(cards.1x/influence_p4.jpg)} .card.influence_s1{background-image:url(cards.1x/influence_s1.jpg)} .card.influence_s2{background-image:url(cards.1x/influence_s2.jpg)} .card.influence_s3{background-image:url(cards.1x/influence_s3.jpg)} .card.influence_s4{background-image:url(cards.1x/influence_s4.jpg)} .card.influence_s4b{background-image:url(cards.1x/influence_s4b.jpg)} .card.influence_m2x{background-image:url(cards.1x/influence_m2x.jpg)} .card.influence_m3x{background-image:url(cards.1x/influence_m3x.jpg)} .card.influence_m4x{background-image:url(cards.1x/influence_m4x.jpg)} .card.influence_p2x{background-image:url(cards.1x/influence_p2x.jpg)} .card.influence_p3x{background-image:url(cards.1x/influence_p3x.jpg)} .card.influence_p4x{background-image:url(cards.1x/influence_p4x.jpg)} .card.influence_s2x{background-image:url(cards.1x/influence_s2x.jpg)} .card.influence_s3x{background-image:url(cards.1x/influence_s3x.jpg)} .card.influence_s4x{background-image:url(cards.1x/influence_s4x.jpg)} @media (min-resolution:97dpi) { .card.event_0{background-image:url(cards.2x/event_back.jpg)} .card.event_1{background-image:url(cards.2x/event_01.jpg)} .card.event_2{background-image:url(cards.2x/event_02.jpg)} .card.event_3{background-image:url(cards.2x/event_03.jpg)} .card.event_4{background-image:url(cards.2x/event_04.jpg)} .card.event_5{background-image:url(cards.2x/event_05.jpg)} .card.event_6{background-image:url(cards.2x/event_06.jpg)} .card.event_7{background-image:url(cards.2x/event_07.jpg)} .card.event_8{background-image:url(cards.2x/event_08.jpg)} .card.event_9{background-image:url(cards.2x/event_09.jpg)} .card.event_10{background-image:url(cards.2x/event_10.jpg)} .card.event_11{background-image:url(cards.2x/event_11.jpg)} .card.event_12{background-image:url(cards.2x/event_12.jpg)} .card.event_13{background-image:url(cards.2x/event_13.jpg)} .card.event_14{background-image:url(cards.2x/event_14.jpg)} .card.event_15{background-image:url(cards.2x/event_15.jpg)} .card.influence_back{background-image:url(cards.2x/influence_back.jpg)} .card.influence_m1{background-image:url(cards.2x/influence_m1.jpg)} .card.influence_m2{background-image:url(cards.2x/influence_m2.jpg)} .card.influence_m3{background-image:url(cards.2x/influence_m3.jpg)} .card.influence_m4{background-image:url(cards.2x/influence_m4.jpg)} .card.influence_p1{background-image:url(cards.2x/influence_p1.jpg)} .card.influence_p2{background-image:url(cards.2x/influence_p2.jpg)} .card.influence_p3{background-image:url(cards.2x/influence_p3.jpg)} .card.influence_p4{background-image:url(cards.2x/influence_p4.jpg)} .card.influence_s1{background-image:url(cards.2x/influence_s1.jpg)} .card.influence_s2{background-image:url(cards.2x/influence_s2.jpg)} .card.influence_s3{background-image:url(cards.2x/influence_s3.jpg)} .card.influence_s4{background-image:url(cards.2x/influence_s4.jpg)} .card.influence_s4b{background-image:url(cards.2x/influence_s4b.jpg)} .card.influence_m2x{background-image:url(cards.2x/influence_m2x.jpg)} .card.influence_m3x{background-image:url(cards.2x/influence_m3x.jpg)} .card.influence_m4x{background-image:url(cards.2x/influence_m4x.jpg)} .card.influence_p2x{background-image:url(cards.2x/influence_p2x.jpg)} .card.influence_p3x{background-image:url(cards.2x/influence_p3x.jpg)} .card.influence_p4x{background-image:url(cards.2x/influence_p4x.jpg)} .card.influence_s2x{background-image:url(cards.2x/influence_s2x.jpg)} .card.influence_s3x{background-image:url(cards.2x/influence_s3x.jpg)} .card.influence_s4x{background-image:url(cards.2x/influence_s4x.jpg)} } /* PANELS */ .panel { background-color: #444; max-width: min(calc(100% - 30px), 1636px); margin: 12px auto 36px auto; box-shadow: 1px 2px 6px #0004; border: 1px solid #0008; } .panel_header { color: white; user-select: none; font-weight: bold; text-align: center; padding: 3px 1em; border-bottom: 1px solid #0008; } .panel_body { background-color: #555; display: flex; justify-content: start; flex-wrap: wrap; padding: 18px; gap: 18px; min-height: 350px; } #market, #played { background-image: repeating-linear-gradient(135deg, hsl(0,0%,33%), hsl(0,0%,33%) 60px, hsl(0,0%,30%) 60px, hsl(0,0%,30%) 120px ) } .panel.p_red { background-color: hsl(354,20%,27%) } .panel.p_blue { background-color: hsl(207,20%,27%) } .panel.p_yellow { background-color: hsl(47,25%,27%) } .panel.p_green { background-color: hsl(99,15%,27%) } .panel.p_red #played { background-image: repeating-linear-gradient(135deg, hsl(354,20%,33%), hsl(354,20%,33%) 60px, hsl(354,20%,31%) 60px, hsl(354,20%,31%) 120px ) } .panel.p_blue #played { background-image: repeating-linear-gradient(135deg, hsl(207,20%,33%), hsl(207,20%,33%) 60px, hsl(207,20%,31%) 60px, hsl(207,20%,31%) 120px ) } .panel.p_yellow #played { background-image: repeating-linear-gradient(135deg, hsl(47,25%,33%), hsl(47,25%,33%) 60px, hsl(47,25%,31%) 60px, hsl(47,25%,31%) 120px ) } .panel.p_green #played { background-image: repeating-linear-gradient(135deg, hsl(99,15%,33%), hsl(99,15%,33%) 60px, hsl(99,15%,31%) 60px, hsl(99,15%,31%) 120px ) } /* CRISIS TABLE HIGHLIGHT */ #crisis_highlight { transition-property: inset, background-color; transition-duration: 500ms; transition-timing-function: ease; box-sizing: border-box; position: absolute; background-color: transparent; border: 4px solid transparent; top: 189px; left: 2194px; width: 263px; height: 30px; box-shadow: 0 0 0 1px #444; } #crisis_highlight.p_red { background-color: hsla(354,85%,67%,20%) } #crisis_highlight.p_blue { background-color: hsla(207,67%,78%,20%) } #crisis_highlight.p_yellow { background-color: hsla(47,100%,53%,20%) } #crisis_highlight.p_green { background-color: hsla(99,36%,60%,20%) } #crisis_highlight.p_red { border-color: hsl(354,85%,67%) } #crisis_highlight.p_blue { border-color: hsl(207,67%,78%) } #crisis_highlight.p_yellow { border-color: hsl(47,100%,53%) } #crisis_highlight.p_green { border-color: hsl(99,36%,60%) } #crisis_highlight.c0 { display: none } #crisis_highlight.c2 { top: 216px; } #crisis_highlight.c3 { top: 243px; } #crisis_highlight.c4 { top: 270px; } #crisis_highlight.c5 { top: 297px; } #crisis_highlight.c6 { top: 324px; } #crisis_highlight.c7 { top: 351px; } #crisis_highlight.c8 { top: 378px; } #crisis_highlight.c9 { top: 405px; } #crisis_highlight.c10 { top: 432px; } #crisis_highlight.c11 { top: 459px; } #crisis_highlight.c12 { top: 486px; } /* COMBAT MASK */ #combat_mask { box-sizing: border-box; position: absolute; z-index: 100; border-radius: 12px; box-shadow: 0px 2px 8px #000; background-color: #666; border: 2px solid #444; opacity: 0.8; } /* MOBILE LAYOUT */ @media (max-width: 640px) { .panel_body { justify-content: center; } }