/* * Server-projection compatibility only. * * The recovered game.css is the canonical presentation contract. Every rule in * this compatibility sheet must bridge secure server-rendered DOM to that * contract or style a genuinely new account/achievement control. It must not * redesign recovered game content. */ /* Exact local copy of the recovered newspaper typeface; this declaration * wins when the external stylesheet is unavailable or delayed. */ @font-face { font-family: "UnifrakturMaguntia"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/unifraktur-maguntia.ttf") format("truetype"); } [hidden] { display: none !important; } /* The no-session screen keeps the recovered game's original start menu visible * until the server issues a game session. */ #landing-menu button { display: block; width: 100%; border: 0; background: transparent; padding: 0; color: var(--link-color); font: inherit; text-align: left; cursor: pointer; } #landing-menu li:hover, #landing-menu li:focus-within { background: var(--link-hover-color); } body.landing-page #landing-menu button, body.landing-page #scene-choices .choice { display: block; box-sizing: border-box; width: 100%; text-align: center; } body.landing-page #landing-start, body.landing-page #scene-choices > li:first-child .choice, body.landing-page #new-session { font-weight: 700; } /* Reversible landing-menu image experiment. Remove * `landing-menu-image-experiment` from to restore the original menu. */ body.landing-page.landing-menu-image-experiment #content { isolation: isolate; overflow: visible; background-color: transparent; background-image: none; box-shadow: none; } body.landing-page.landing-menu-image-experiment #content::before, body.landing-page.landing-menu-image-experiment #content::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } body.landing-page.landing-menu-image-experiment #content::before { inset: -4.75em -7em; background: radial-gradient(ellipse 68% 45% at 34% 18%, rgb(248 246 239 / 97%) 0 38%, transparent 76%), radial-gradient(ellipse 58% 62% at 70% 49%, rgb(243 243 243 / 94%) 0 42%, transparent 78%), radial-gradient(ellipse 74% 42% at 42% 84%, rgb(248 246 239 / 91%) 0 34%, transparent 76%), radial-gradient(ellipse 54% 86% at 50% 50%, rgb(243 243 243 / 98%) 0 43%, rgb(243 243 243 / 64%) 66%, transparent 91%); -webkit-mask-image: radial-gradient( ellipse closest-side at 50% 49%, #000 0 42%, rgb(0 0 0 / 92%) 55%, rgb(0 0 0 / 58%) 70%, rgb(0 0 0 / 16%) 86%, transparent 100% ); mask-image: radial-gradient( ellipse closest-side at 50% 49%, #000 0 42%, rgb(0 0 0 / 92%) 55%, rgb(0 0 0 / 58%) 70%, rgb(0 0 0 / 16%) 86%, transparent 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: blur(1.2em); transform: translateZ(0); } body.landing-page.landing-menu-image-experiment #content::after { inset: -3.5em -6em; background: radial-gradient(ellipse 37% 27% at 16% 34%, rgb(255 253 245 / 66%) 0 28%, transparent 76%), radial-gradient(ellipse 44% 31% at 86% 62%, rgb(255 253 245 / 61%) 0 24%, transparent 74%), radial-gradient(ellipse 38% 23% at 48% 94%, rgb(255 253 245 / 57%) 0 22%, transparent 72%); -webkit-mask-image: radial-gradient( ellipse closest-side at center, #000 0 35%, rgb(0 0 0 / 78%) 57%, rgb(0 0 0 / 25%) 79%, transparent 100% ); mask-image: radial-gradient( ellipse closest-side at center, #000 0 35%, rgb(0 0 0 / 78%) 57%, rgb(0 0 0 / 25%) 79%, transparent 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: blur(1.8em); animation: landing-content-mist 14s ease-in-out infinite alternate; } @keyframes landing-content-mist { from { opacity: 0.84; transform: translate3d(-0.35em, -0.2em, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0.45em, 0.3em, 0) scale(1.015); } } body.landing-page.landing-menu-image-experiment #content > .scene-heading { position: relative; isolation: isolate; } body.landing-page.landing-menu-image-experiment #content > .scene-heading::before { content: ""; position: absolute; z-index: -1; inset: -2.8em -6.5em -2.4em; background: radial-gradient( ellipse closest-side at center, rgb(255 253 245 / 100%) 0 38%, rgb(255 253 245 / 88%) 55%, rgb(255 253 245 / 48%) 72%, rgb(255 253 245 / 12%) 88%, transparent 100% ); filter: blur(0.9em); pointer-events: none; } body.landing-page.landing-menu-image-experiment :is(#game-title-2, #game-author-2) { display: none !important; } body.landing-page.landing-menu-image-experiment :is(#landing-menu, #scene-choices) { background: url("/img/hiiii.jpeg") center 72% / cover no-repeat; } body.landing-page.landing-menu-image-experiment :is(#landing-menu, #scene-choices) li { background-color: transparent; background-image: radial-gradient( ellipse 40% 76% at center, rgb(248 245 235 / 84%) 0%, rgb(248 245 235 / 60%) 42%, rgb(248 245 235 / 0%) 75% ); -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color 180ms ease, backdrop-filter 180ms ease; } body.landing-page.landing-menu-image-experiment :is(#landing-menu, #scene-choices) li:hover, body.landing-page.landing-menu-image-experiment :is(#landing-menu, #scene-choices) li:focus-within { background-color: rgb(243 243 243 / 28%); -webkit-backdrop-filter: blur(1.5px) saturate(94%) contrast(96%); backdrop-filter: blur(1.5px) saturate(94%) contrast(96%); } @media (prefers-reduced-motion: reduce) { body.landing-page.landing-menu-image-experiment :is(#landing-menu, #scene-choices) li { transition: none; } body.landing-page.landing-menu-image-experiment #content::after { animation: none; } } body.landing-page::before { content: ""; position: fixed; inset: 0; z-index: -98; background: var(--bg-color); opacity: 0.10; pointer-events: none; } body.landing-page.intro-gated::before { opacity: 0; } body.landing-page.intro-revealing::before { animation: landing-veil-fade-in 1400ms ease both; } #intro-gate { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; box-sizing: border-box; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); pointer-events: auto; } #intro-gate-action { min-height: 44px; border: 2px solid var(--border-color); border-radius: 0; background: rgb(243 243 243 / 72%); padding: 0.5em 1em; color: var(--text-color); font-family: "Minion Pro", Georgia, serif; font-size: clamp(1.35rem, 4vw, 1.9rem); font-weight: 400; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; } #intro-gate-action:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; } .intro-gate-keyboard-label { display: none; } .intro-gate-touch-label { display: inline; } @media (hover: hover) and (pointer: fine) and (min-width: 1025px) { .intro-gate-keyboard-label { display: inline; } .intro-gate-touch-label { display: none; } } html.touch-input .intro-gate-keyboard-label { display: none; } html.touch-input .intro-gate-touch-label { display: inline; } body.intro-gated #intro-gate { display: flex; } body.intro-gated #page, body.intro-gated #contentSpriteContainer, body.intro-gated #news-fab, body.intro-gated #advisors-fab, body.intro-gated #achievement-toast { visibility: hidden; opacity: 0; } body.intro-revealing #intro-gate { display: flex; animation: intro-gate-fade-out 1400ms ease both; } body.intro-revealing #page, body.intro-revealing #contentSpriteContainer, body.intro-revealing #news-fab, body.intro-revealing #advisors-fab, body.intro-revealing #achievement-toast { animation: intro-ui-fade-in 1400ms ease both; } @keyframes landing-veil-fade-in { from { opacity: 0; } to { opacity: 0.10; } } @keyframes intro-gate-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes intro-ui-fade-in { from { opacity: 0; } to { opacity: 1; } } #scene-title.landing-title { font-weight: 700; text-shadow: 2px 2px 3px rgb(0 0 0 / 35%); } #stats_sidebar.landing-poster-mode { box-sizing: border-box; width: min(22rem, calc(100vw - 0.8em)); padding: 0; background: transparent; box-shadow: none; transform: translateX(-7.05rem); } #stats_sidebar.landing-poster-mode #status-tabs { display: none; } body.landing-page #native-news, body.opening-campaign-screen #stats_sidebar { display: none !important; } #landing-status-poster { box-sizing: border-box; border: 3px solid #000; } @media (max-width: 1024px) { #stats_sidebar.landing-poster-mode { width: calc(100vw - 0.8em); transform: none; } } .landing-status h2 { margin: 0.75em 0; text-align: center; font-size: 1.15em; letter-spacing: 0.08em; } .landing-status p { margin-bottom: 0.9em; font-weight: normal; } .landing-status p b { font-weight: bold; } .landing-economics { width: fit-content; margin: 0.8em auto 1em !important; border: 2px solid var(--border-color); padding: 0.35em 0.65em; text-indent: 0; letter-spacing: 0.04em; } #campaign-radio-organizer { display: none; box-sizing: border-box; width: 16rem; border: 0; color: #000; font-size: 1.08em; transform: translateX(-1rem); } html.pre-game body:not(.landing-page) #campaign-radio-organizer { display: block; } #campaign-radio-organizer h2 { margin: 0.75em 0; font-size: 1.15em; letter-spacing: 0.08em; text-align: center; } #campaign-radio-tracks { margin-top: 0; border: 2px solid #000; border-radius: 0; } .campaign-radio-track { position: relative; display: grid; grid-template-columns: 0.9em minmax(0, 1fr); gap: 0.25em; align-items: center; border-bottom: 2px solid #000 !important; color: #000; cursor: default; } #campaign-radio-tracks .campaign-radio-track.is-added { background-color: rgb(45 90 27 / 24%); } #campaign-radio-tracks .campaign-radio-track.is-excluded { background-color: rgb(176 0 0 / 20%); } #campaign-radio-tracks .campaign-radio-track.is-locked { background-color: #ddd; } .campaign-radio-track.is-partition { border-bottom-width: 4px !important; } .campaign-radio-track:last-child { border-bottom: 0 !important; } .campaign-radio-track:focus { outline: none; } .campaign-radio-track:focus-visible { outline: 1px dotted #000; outline-offset: 1px; } .campaign-radio-track.dragging { opacity: 0.45; } .campaign-radio-track.drop-before::before, .campaign-radio-track.drop-after::after { content: ""; position: absolute; right: 0; left: 0; height: 2px; background: #000; } .campaign-radio-track.drop-before::before { top: -1px; } .campaign-radio-track.drop-after::after { bottom: -1px; } .campaign-radio-grip { color: inherit; font-family: sans-serif; line-height: 1; cursor: grab; user-select: none; } .campaign-radio-grip:active { cursor: grabbing; } .campaign-radio-track.is-locked .campaign-radio-grip { cursor: not-allowed; } .campaign-radio-details { min-width: 0; align-self: center; text-align: center; } .campaign-radio-name { display: block; min-width: 0; list-style: none; font-size: 1em; font-style: italic; text-align: center; cursor: pointer; } .campaign-radio-name::-webkit-details-marker { display: none; } .campaign-radio-context { margin: 0.45em 0 0.1em; color: inherit; font-size: 0.8em; font-style: normal; line-height: 1.3; text-align: left; cursor: pointer; } .campaign-radio-requirement { margin: 0.45em 0 0.25em; font-size: 0.8em; font-style: italic; line-height: 1.3; text-align: center; cursor: pointer; } @media screen and (max-width: 767px) { html.pre-game body:not(.landing-page) #campaign-radio-organizer { float: none; width: auto; margin: 0.4em; transform: none; } } html.hugenberg-mode { --bg-color: #0b1426 !important; --content-bg-color: rgb(14 26 56 / 95%) !important; --border-color: #0a111f !important; --text-color: #fff !important; --link-color: #fff !important; --link-hover-color: rgb(255 255 255 / 12%) !important; --tab-bg-color: #0b1426 !important; --tab-color: #080f1a !important; --tab-hover-color: #122340 !important; --card-border-color: #0a111f !important; --card-bg-color: rgb(20 36 74 / 95%) !important; } #hugenberg-bg { position: fixed; inset: -10vh 0 0; z-index: -50; height: 110vh; overflow: hidden; background: #0b1426; pointer-events: none; } .hugenberg-bg-layer { position: absolute; inset: 0; background-position: center top; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 3s ease; } .hugenberg-bg-layer.active { opacity: 1; } html.hugenberg-mode #content, html.hugenberg-mode .tools, html.hugenberg-mode footer, html.hugenberg-mode #native-news { background-color: rgb(14 26 56 / 95%) !important; } html.hugenberg-mode #dnvp_dashboard, html.hugenberg-mode #native-news { display: none !important; } html.hugenberg-mode header { background-color: transparent !important; } html.hugenberg-mode #header-links, html.hugenberg-mode .tab_container, html.hugenberg-mode .tab_button { background-color: rgb(8 15 28 / 95%) !important; color: #fff !important; } html.hugenberg-mode .tab_button.active { background-color: rgb(14 26 56 / 95%) !important; } html.hugenberg-mode .tab_button:hover { background-color: #122340 !important; } html.hugenberg-mode #content, html.hugenberg-mode .tools, html.hugenberg-mode header { color: #fff !important; } html.hugenberg-mode #content ul.choices li.unavailable, html.hugenberg-mode #content ul.choices li.unavailable * { color: #6d7c99 !important; } html.hugenberg-mode #content ul.choices li.unavailable { border-color: rgb(255 255 255 / 8%) !important; background: rgb(0 0 0 / 30%) !important; } html.hugenberg-mode #content ul.choices li:not(.unavailable) { border-color: rgb(255 255 255 / 42%) !important; background: rgb(255 255 255 / 5%) !important; } html.hugenberg-mode #content ul.choices li:not(.unavailable):hover { background: rgb(255 255 255 / 13%) !important; } /* Recovery's Left Rubicon cascade: all ordinary chrome and prose becomes white, * while authored inline colours (party names, warnings, outcomes) stay intact. */ html.hugenberg-mode #content *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode .tools *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode #dnvp_dashboard *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode header *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]) { color: #fff !important; } html.hugenberg-mode #dnvp_dashboard { color: #fff !important; } html.hugenberg-mode #content hr { border-color: #fff !important; background-color: #fff !important; color: #fff !important; } /* Bold and italic descendants of an authored coloured span inherit that colour * instead of being captured by the ordinary-white rule above. */ html.hugenberg-mode #content [style^="color:"] *, html.hugenberg-mode #content [style*=";color:"] *, html.hugenberg-mode #content [style*="; color:"] *, html.hugenberg-mode .tools [style^="color:"] *, html.hugenberg-mode .tools [style*=";color:"] *, html.hugenberg-mode .tools [style*="; color:"] *, html.hugenberg-mode #dnvp_dashboard [style^="color:"] *, html.hugenberg-mode #dnvp_dashboard [style*=";color:"] *, html.hugenberg-mode #dnvp_dashboard [style*="; color:"] *, html.hugenberg-mode header [style^="color:"] *, html.hugenberg-mode header [style*=";color:"] *, html.hugenberg-mode header [style*="; color:"] * { color: inherit !important; } /* The secure projection replaces recovery's #economics-link anchor with this * button; preserve the same white Rubicon control and outline. */ html.hugenberg-mode #qualities .sidebar-economics-link button { border-color: #fff !important; background: transparent !important; color: #fff !important; } html.hugenberg-mode #content .spd-list-expand-btn, html.hugenberg-mode #content .dnvp-list-expand-btn, html.hugenberg-mode #content .cnbl-expand-btn, html.hugenberg-mode #content #others-expand-btn, html.hugenberg-mode [class$="-expand-btn"] { border-color: #fff !important; background: transparent !important; color: #fff !important; } /* Keep disabled choices distinct after the broad ordinary-white cascade. */ html.hugenberg-mode #content ul.choices li.unavailable, html.hugenberg-mode #content ul.choices li.unavailable * { color: #6d7c99 !important; } html.hugenberg-mode .native-tooltip, html.hugenberg-mode .card-tooltip, html.hugenberg-mode .rw-tip-div, html.hugenberg-mode [class$="-tip"], html.hugenberg-mode [class*="-tip "], html.hugenberg-mode [class^="tip-"], html.hugenberg-mode .ideology-tooltip-card { border-color: rgb(14 26 56 / 95%) !important; background: rgb(14 26 56 / 95%) !important; color: #fff !important; box-shadow: 2px 2px 10px rgb(0 0 0 / 55%) !important; } html.hugenberg-mode .native-tooltip *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode .card-tooltip *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode .rw-tip-div *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode [class$="-tip"] *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode [class*="-tip "] *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode [class^="tip-"] *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]), html.hugenberg-mode .ideology-tooltip-title, html.hugenberg-mode .ideology-tooltip-description { color: #fff !important; } html.hugenberg-mode .ideology-tooltip-card::after { border-top-color: rgb(14 26 56 / 95%) !important; } html.hugenberg-mode .ideology-tooltip-anchor.has-ideology-tooltip { text-decoration-color: #8fa6cc !important; } /* Recovery's cabinet remains a cream exception within the Rubicon shell. */ html.hugenberg-mode #cabinet_overview#cabinet_overview, html.hugenberg-mode #cabinet_overview#cabinet_overview *:not([style^="color:"]):not([style*=";color:"]):not([style*="; color:"]) { color: #1a1a1a !important; } html.hugenberg-mode #exec_overview .exec-meter-label, html.hugenberg-mode #exec_overview .exec-portrait-role, html.hugenberg-mode #exec_overview .exec-portrait-name, html.hugenberg-mode #exec_overview .exec-portrait-party, html.hugenberg-mode #exec_overview .exec-priorities-text { color: #e6e6e6 !important; } html.hugenberg-mode #exec_overview .exec-meter-track, html.hugenberg-mode #exec_overview .exec-meter-row.exec-meter-divider { border-color: #888 !important; } /* Native elements that replace the recovered client's inline JavaScript links. */ #header-links button { border: 0; background: transparent; padding: 0 0.75em 0 0; color: var(--link-color); font: inherit; cursor: pointer; } #header-links button:hover, #header-links button:focus-visible { background: var(--link-hover-color); } #status-tabs { margin-bottom: 0; } .status-tab-row { display: flex; width: 100%; } .status-tab-row .tab_button { flex: 1; } #game-nav:empty { display: none; } .nav-button { border: 0; background: var(--tab-color); padding: 10px; color: var(--text-color); font: inherit; cursor: pointer; } .nav-button:hover, .nav-button:focus-visible { background: var(--tab-hover-color); } .nav-button[aria-current="page"] { background: var(--content-bg-color); } #scene-title:empty, #scene-subtitle:empty, #scene-choices:empty { display: none; } html.native-scene-typing #scene-choices { display: none !important; } #scene-subtitle { text-align: center; text-indent: 0; } #game-error { border: 2px solid #900; padding: 0.5em; color: #900; text-indent: 0; } /* Server-generated status fragments use the recovered sidebar's typography. */ #qualities .sidebar-metric { margin: 0 0 1em; } #qualities .sidebar-office, #qualities .sidebar-parliament { text-indent: 0; } #qualities .sidebar-parliament { line-height: 1.3em; } #qualities .backing-wrap { position: relative; display: inline; cursor: help; text-decoration: underline; text-decoration-style: dotted; } #content .economy-backing-wrap { position: relative; display: inline; cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; } #content .economy-backing-tip, body > .economy-backing-tip.viewport-tooltip-visible { position: absolute; bottom: 125%; left: 0; z-index: 100; display: none; box-sizing: border-box; width: 260px; border: 2px solid #999; background: #fff; padding: 10px; color: #431; box-shadow: 2px 2px 6px rgb(0 0 0 / 20%); font-size: 13px; font-weight: normal; line-height: 1.35; text-align: left; text-decoration: none; white-space: normal; } #content .economy-backing-wrap:hover .economy-backing-tip, #content .economy-backing-wrap:focus-within .economy-backing-tip { display: block; } #qualities .backing-wrap .backing-tip, body > .backing-tip.viewport-tooltip-visible { position: absolute; bottom: 125%; left: 50%; z-index: 100; display: none; box-sizing: border-box; width: 260px; border: 2px solid #999; background: #fff; padding: 10px; box-shadow: 2px 2px 6px rgb(0 0 0 / 20%); color: #431; /* The recovered tooltip is a normal-size paper inset. A reduced font here made the party names in Others look like a different UI. */ font-size: 1em; font-weight: normal; line-height: 1.3; text-align: center; text-decoration: none; transform: translateX(-50%); white-space: normal; } #qualities .backing-wrap:hover .backing-tip, #qualities .backing-wrap:focus-within .backing-tip { display: block; } #qualities .backing-tip-image, body > .backing-tip.viewport-tooltip-visible .backing-tip-image { display: block; width: 100%; margin: 0 auto 4px; border: 1px solid #999; } #qualities .backing-tip-rows, body > .backing-tip-rows.viewport-tooltip-visible { width: 260px !important; text-align: left !important; } #qualities .backing-tip-row, body > .backing-tip.viewport-tooltip-visible .backing-tip-row { display: block; line-height: 1.5; font-size: 1em; } #qualities .sidebar-economics-link { margin-top: 8px; text-align: center; } #qualities .sidebar-economics-link button, #qualities .sidebar-action { border: 1px solid #431; background: transparent; padding: 4px 10px; color: #431; cursor: pointer; } #qualities .sidebar-economics-link button { font-family: Georgia, serif; font-size: 1em; text-transform: uppercase; letter-spacing: 0.05em; } #qualities .sidebar-action { font: inherit; } #qualities .sidebar-economy { margin-top: 1em; } #qualities .sidebar-economy .sidebar-metric { margin: 0.3em 0; } #qualities .sidebar-trend-up { color: #b00000; } #qualities .sidebar-trend-down { color: #2d5a1b; } #qualities .sidebar-radio { margin-top: 0.8em; margin-bottom: 15px; text-align: center; } #qualities .sidebar-song { margin-bottom: 6px; color: #4a3728; font: italic 1em Georgia, serif; text-indent: 0; } #qualities .sidebar-radio-controls { display: flex; gap: 6px; justify-content: center; } #qualities .sidebar-radio-controls button { border: 1px solid #000; border-radius: 0; background: none; padding: 2px 8px; color: #000; font-family: Georgia, serif; cursor: pointer; } #qualities .kaiser-wrap { position: relative; display: inline; cursor: help; text-decoration: underline dotted; } #qualities .kaiser-wrap .kaiser-tip, body > .kaiser-tip.viewport-tooltip-visible { display: none; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #999; padding: 10px; width: 220px; font-size: 1em; text-align: center; z-index: 100; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); } #qualities .kaiser-wrap:hover .kaiser-tip, #qualities .kaiser-wrap:focus .kaiser-tip { display: block; } /* Status prose deliberately inherits the recovered game.css h1/p rhythm. */ #qualities .status-mission-heading { margin: 1em 0 0.5em; text-align: center; } #qualities .status-mission-title { margin: -8px 0 16px; border-top: 3px solid #000; border-bottom: 3px solid #000; padding: 15px; color: #000435; font-size: 1em; font-weight: 900; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; word-break: break-word; } #qualities .status-mission-title-join { margin: 2px 0; color: #000; font-size: 0.8em; letter-spacing: 0.2em; } #qualities .status-mission-image { display: block; box-sizing: border-box; width: 100%; max-width: 400px; height: 200px; margin: 16px auto; border: 2px solid #000435; object-fit: cover; cursor: pointer; } #qualities .status-mission-card.secondary .status-mission-image { height: auto; margin: 0 auto 8px; border: 1px solid #000; cursor: default; } #qualities .status-mission-metric { margin-top: 8px; text-align: center; } #qualities .status-mission-metrics.primary .status-mission-metric { margin-top: 0; text-align: left; } #qualities .status-mission-metric-label, #qualities .status-mission-metric-value { font-size: 0.85em; font-weight: 700; } #qualities .status-mission-portrait { display: block; width: 100%; max-width: 150px !important; margin: 8px auto 0; border: 2px solid #000435; } #qualities .status-mission-caption { margin-top: 4px; font-size: 0.85em; font-weight: 700; text-align: center; } #qualities .status-mission-office { font-size: 0.75em; letter-spacing: 0.1em; text-align: center; } .entente-panel-handle { position: absolute; z-index: 50; display: flex; width: 20px; height: 60px; align-items: center; justify-content: center; border: 1px solid #431; border-right: 0; background: #f3f3f3; padding: 0; box-shadow: -2px 2px 6px rgb(0 0 0 / 10%); cursor: pointer; } .entente-panel-bars { display: flex; height: 100%; gap: 4px; padding: 4px 0; } .entente-panel-bars i { display: block; width: 2px; background: #431; } .entente-side-panel { position: absolute; z-index: 49; box-sizing: content-box; width: 220px; border: 1px solid #431; background: #f3f3f3; padding: 0.6em; box-shadow: -2px 2px 12px rgb(0 0 0 / 20%); color: #431; font: 0.9em Georgia, serif; } .entente-panel-title { margin-bottom: 8px; font-weight: 700; text-align: center; } .entente-flag { width: 90px; height: 56px; border: 2px solid #000; object-fit: cover; } .entente-side-panel > .entente-flag { display: block; margin: 0 auto 8px; } .entente-cards { display: flex; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; margin-bottom: 8px; } .entente-card { width: 38px; height: 52px; border: 1px solid #333; background: #fff; } .entente-deterrence { padding: 8px 4px; color: #8b0000; font-style: italic; font-weight: bold; line-height: 1.3; text-align: center; } .entente-allied-flags { display: flex; justify-content: space-around; margin-bottom: 8px; } .entente-alerts { margin-bottom: 10px; font-size: 0.85em; text-align: center; } .entente-description { margin-bottom: 8px; font-size: 0.85em; text-align: center; } .entente-footnote { color: #666; font-size: 0.7em; font-style: italic; text-align: center; } #qualities .status-taming-metric { margin: 2px 0 6px; text-align: center; } #qualities .status-taming-label { color: #000; font-size: 0.85em; font-weight: 700; letter-spacing: 0.01em; } #qualities .status-taming-value { font-size: 0.85em; font-weight: 300; } #qualities .status-taming-relationship { margin-top: 2px; } #qualities .status-taming-relationship .status-taming-value { font-weight: 700; } #qualities .status-taming-party-nsdap { color: #5a2e0c; } #qualities .status-taming-party-volkisch { color: #06402b; } #qualities .status-taming-party-dvfp { color: #c4a484; } #qualities .status-taming-electoral { margin-top: 8px; margin-bottom: 0; } #qualities .status-taming-electoral .status-taming-value { font-weight: 400; } #qualities .status-taming-image-frame { max-width: 400px; height: 200px; margin: 0 auto 6px; overflow: hidden; border: 2px solid #000435; } #qualities .status-taming-image { width: 100%; } #qualities .status-taming-portraits { display: flex; justify-content: space-around; align-items: flex-start; margin: 16px 0 8px; } #qualities .status-taming-portrait-item { width: 45%; text-align: center; } #qualities .status-taming-portrait { display: block; width: 100%; max-width: 120px !important; height: 150px; margin: 0 auto; border: 2px solid #000435; filter: grayscale(100%); object-fit: cover; object-position: top; } #qualities .status-taming-portrait-name { margin-top: 4px; font-size: 0.7em; font-weight: 300; } #qualities .status-map-details { display: block; max-width: 800px; margin-top: 16px; } #qualities .status-map-details[hidden] { display: none; } #qualities .status-map-details h3 { margin: 0 0 4px; font-size: 1.2em; text-align: center; } #qualities .status-map-detail-image, #qualities .status-map-image { display: block; width: 100%; height: auto; border: 2px solid #000; } #qualities .status-card-description, #qualities .status-map-details > p { text-align: center; text-indent: 0; } #qualities .status-map-details > p { margin: 0 0 10px; font-size: 0.8em; } #qualities .status-map-frame { position: relative; display: inline-block; max-width: 100%; margin-top: 16px; line-height: 0; } #qualities .w-hs { position: absolute; z-index: 10; border: 0; background: transparent; padding: 0; transform: translate(-50%, -50%); cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; } #qualities .w-hs-dot { display: block; width: 5px; height: 5px; border: 1.5px solid #fff; border-radius: 50%; background: rgb(62 136 179 / 90%); transition: transform 0.15s, background 0.15s; } #qualities .w-hs:hover .w-hs-dot, #qualities .w-hs-active .w-hs-dot { border-color: #fff; background: rgb(201 169 110); transform: scale(1.6); } #qualities .status-map-detail-image { height: 200px; margin-bottom: 12px; object-fit: cover; } #qualities .status-map-stats p { margin: 4px 0; text-align: center; text-indent: 0; } #qualities .status-map-stats strong { font-size: 1em; } #qualities .status-map-stats span { font-size: 0.85em; } #qualities .status-map-government { margin-top: 8px; text-align: center; } #qualities .status-map-government .sidebar-action { display: inline-block; font-family: Georgia, serif; font-size: 1em; text-transform: uppercase; letter-spacing: 0.05em; } #qualities .status-government { margin-top: -8px; line-height: 1.5; text-align: center; } #qualities .status-government-message { margin-top: 4px; } #qualities .status-government-label { margin-top: 8px; font-weight: 700; } #qualities .status-government-track { height: 14px; margin-top: 4px; border: 2px solid #000; background: #f3f3f3; } #qualities .status-government-fill { height: 100%; } #qualities .status-government-action-title { margin-top: 6px; font-style: italic; } #qualities .status-government-minister { margin-top: 4px; } #qualities .status-government-action-description { margin-top: 6px; font-size: 0.9em; } #qualities .status-government .sidebar-action { margin-top: 8px; border: 2px solid #000; padding: 4px 14px; color: #431; font-family: Georgia, serif; font-size: 1em; letter-spacing: 0.05em; text-transform: uppercase; } #qualities .status-government-none { font-style: italic; } #qualities .status-government-meters { display: flex; justify-content: space-around; gap: 4px; margin-top: 10px; } #qualities .status-government-meter { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; } #qualities .status-government-meter-track { display: flex; width: 26px; height: 130px; align-items: flex-end; border: 2px solid #000; background: #f3f3f3; } #qualities .status-government-meter-fill { width: 100%; } #qualities .status-government-meter-label { margin-top: 4px; font-size: 0.7em; line-height: 1.1; white-space: nowrap; } /* The recovered client used anchors for cards and choices. Buttons keep native geometry while posting actions to the server. */ button.card { display: inline-block; position: relative; box-sizing: content-box; width: 120px; height: 150px; margin: 0 0 0.5em; border: 10px solid var(--card-border-color); background: transparent; padding: 0; box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); color: inherit; font: inherit; vertical-align: top; cursor: pointer; } button.card:hover:not(:disabled), button.card:focus-visible:not(:disabled) { left: -5px; top: -5px; box-shadow: 10px 10px 10px rgb(0 0 0 / 20%); } button.card:disabled { cursor: default; } button.card .card-img { display: block; width: 120px; height: 150px; object-fit: cover; } button.card .card-face-placeholder { display: block; width: 120px; height: 150px; background: var(--card-bg-color); } .card-tooltip { visibility: hidden; position: fixed; left: -9999px; top: 0; z-index: 1000; width: 150px; max-width: min(320px, calc(100vw - 24px)); border: 1px solid var(--border-color); background: var(--content-bg-color); padding: 0.5em; color: var(--text-color); text-align: left; white-space: normal; } button.card:hover .card-tooltip, button.card:focus .card-tooltip { visibility: visible; } button.card.passive-card { cursor: help; } ul.pinned-cards button.card:hover .card-passive-tip, ul.pinned-cards button.card:focus .card-passive-tip { display: block; } button.card[data-faction="authcon"] { border-color: #000435; } button.card[data-faction="christsoc"] { border-color: #dab1da; } button.card[data-faction="volkskons"] { border-color: #90d5ff; } button.card[data-faction="volkisch"] { border-color: #06402b; background: #06402b; } button.card[data-faction][data-role="deputy"] { width: 80px; height: 100px; border-width: 5px; } button.card[data-faction][data-role="deputy"] .card-img { width: 80px; height: 100px; } body.empowered-authcon button.card[data-faction="authcon"], body.empowered-christsoc button.card[data-faction="christsoc"], body.empowered-volkskons button.card[data-faction="volkskons"], body.empowered-volkisch button.card[data-faction="volkisch"] { border-color: #daa520; box-shadow: 0 0 12px rgb(218 165 32 / 50%), 3px 3px 8px rgb(0 0 0 / 30%); } ul.hand.has-executive > li.executive-fixed button.card { border-color: #b0b0b0; } .choice-image { float: left; width: 90px; height: 90px; margin: 0 1em 0.4em 0; object-fit: cover; } #scene-choices li .choice-opt-tip, body > .choice-opt-tip.viewport-tooltip-visible { display: none; position: fixed; top: 0; left: -9999px; z-index: 100; border: 2px solid #999; background: #fff; min-width: 150px; padding: 8px 12px; box-shadow: 2px 2px 6px rgb(0 0 0 / 20%); color: #000; font-size: 0.95em; font-style: normal; font-weight: normal; line-height: 1.7; text-align: left; text-decoration: none; white-space: nowrap; pointer-events: none; } #scene-choices .reichswehr-choice-gif, body > .reichswehr-choice-gif.viewport-tooltip-visible { display: none; position: fixed; top: 0; left: -9999px; z-index: 9999; width: 350px; max-width: calc(100vw - 16px); height: auto; border: 3px solid #888; pointer-events: none; } #scene-choices li:hover .choice-opt-tip, #scene-choices li:focus-within .choice-opt-tip { display: block; } #new-game { display: block; box-sizing: border-box; width: 100%; margin-top: 0.5em; border: 2px solid #876; border-radius: 4px; background: transparent; padding: 0.5em; color: var(--link-color); font: inherit; text-align: left; cursor: pointer; } /* Authored event markup is projected in original order. */ #scene-body::after { display: block; clear: both; content: ""; } #scene-body p { margin: 0 0 1em; text-indent: 1em; } .rich-image { max-width: 100%; } .rich-image-left { float: left; } .rich-image-right { float: right; } .rich-image-center { display: block; float: none; margin-right: auto; margin-left: auto; } .scene-table-wrap { clear: both; width: 100%; margin: 0; overflow: visible; } .scene-table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: inherit; } .scene-table th, .scene-table td { border: 0; padding: 6px 10px; text-align: left; text-indent: 0; vertical-align: middle; white-space: nowrap; } .scene-table th { font-weight: normal; } .scene-table tr[hidden] { display: none; } body.dsr-parliaments-screen .scene-table td, body.dsr-parliaments-screen .scene-table th { white-space: normal; } body.freedom-act-provisions-screen .scene-table-wrap { overflow: hidden; } body.freedom-act-provisions-screen .scene-table { table-layout: fixed; } body.freedom-act-provisions-screen .scene-table td, body.freedom-act-provisions-screen .scene-table th { white-space: normal; overflow-wrap: anywhere; } .scene-table-wrap.election-results-table { width: 100%; } .scene-table.election-results-table { width: 100%; border-collapse: collapse; border-spacing: 0; } .scene-table.election-results-table th, .scene-table.election-results-table td { padding: 4px 10px; font-size: 1em; white-space: nowrap; } .party-swatch { margin-right: 0.3em; vertical-align: -0.08em; } .table-group-toggle { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 1em; height: 1em; border: 1px solid #000; border-radius: 0; background: transparent; padding: 0; margin: 0 0.4em 0 -1.4em; color: inherit; font: inherit; line-height: 1; vertical-align: middle; cursor: pointer; } .scene-parliament-flow { display: block; max-width: 100%; margin: 0.6em auto; overflow: visible; } .scene-parliament-flow.state-parliament { width: 400px; height: 220px; margin: 5px auto 4px; } body.french-election-screen .scene-table-wrap.election-results-table { overflow: hidden; } body.french-election-screen .scene-table.election-results-table { table-layout: fixed; } body.french-election-screen .scene-table.election-results-table th, body.french-election-screen .scene-table.election-results-table td { box-sizing: border-box; padding: 4px 3px; text-align: center; white-space: nowrap; } body.french-election-screen .scene-table.election-results-table th:first-child, body.french-election-screen .scene-table.election-results-table td:first-child { width: 24%; text-align: left; } body.french-election-screen .scene-table.election-results-table th:nth-child(2), body.french-election-screen .scene-table.election-results-table td:nth-child(2) { width: 18%; } body.french-election-screen .scene-table.election-results-table th:nth-child(3), body.french-election-screen .scene-table.election-results-table td:nth-child(3) { width: 16%; } body.french-election-screen .scene-table.election-results-table th:nth-child(4), body.french-election-screen .scene-table.election-results-table td:nth-child(4) { width: 26%; } body.french-election-screen .scene-table.election-results-table th:nth-child(5), body.french-election-screen .scene-table.election-results-table td:nth-child(5) { width: 16%; } @media (max-width: 1024px) { body.french-election-screen .scene-table.election-results-table th, body.french-election-screen .scene-table.election-results-table td { padding: 3px 2px; font-size: 0.82em; } } #scene-body .state-flag { margin: 0 0 5px; text-align: center; text-indent: 0; } #scene-body .state-monarch, #scene-body .state-office, #scene-body .state-government, #scene-body .state-president { text-align: center; font-size: 0.9em; text-indent: 0; } #scene-body .state-monarch, #scene-body .state-office { margin: 0 0 2px; } #scene-body .state-government { margin: 0 0 -30px; } #scene-body .state-president { margin: -10px 0 0; } .election-region-map-wrap { position: relative; margin: 0 0 1em; text-indent: 0; } .election-region-map { display: block; box-sizing: border-box; width: 100%; max-width: 500px; height: auto; margin: 0 auto; border: 4px solid #000; border-radius: 4px; } .election-region-hitbox { fill: transparent; stroke: none; cursor: pointer; pointer-events: all; } .election-region-hitbox:focus-visible { fill: rgb(255 255 255 / 14%); outline: none; } .election-region-tooltip { position: fixed; z-index: 99999; min-width: 280px; max-width: 340px; border: 1px solid #999; border-radius: 5px; padding: 8px 10px; background: #fff; box-shadow: 0 3px 12px rgb(0 0 0 / 25%); color: #000; font-family: Georgia, serif; pointer-events: none; } .election-region-tooltip[hidden] { display: none; } .election-region-tooltip-title { margin-bottom: 5px; border-bottom: 1px solid #ddd; padding-bottom: 4px; font-weight: bold; text-align: center; } .election-region-tooltip-columns { display: flex; gap: 14px; } .election-region-tooltip-columns > div { flex: 1; min-width: 110px; } .election-region-tooltip-columns > div > b { display: block; margin-bottom: 3px; font-size: 14px; text-align: center; } .election-region-tooltip-columns > div > div { display: flex; align-items: center; gap: 4px; margin: 3px 0; font-size: 14px; } .election-region-tooltip-columns i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .election-region-tooltip canvas { display: block; margin: 6px auto 2px; } .election-region-map-mecklenburg { max-width: 320px; border: 2px solid #999; } .election-region-map-wrap-mecklenburg .election-region-tooltip { min-width: 160px; max-width: none; padding: 4px 10px; } .election-region-map-wrap-mecklenburg .election-region-tooltip-title { margin-bottom: 0; padding-bottom: 3px; font-size: 13px; } .election-region-map-wrap-mecklenburg .election-region-tooltip > div:last-child > div { display: flex; align-items: center; gap: 5px; margin: 1px 0; font-size: 11px; } .election-region-map-wrap-mecklenburg .election-region-tooltip > div:last-child i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .election-region-map-wrap-mecklenburg .election-region-tooltip canvas { margin: 4px auto; } #scene-body .election-region-map-caption { margin: 0.7em 0 0; text-indent: 0; } .native-tooltip-wrap { position: relative; display: inline; text-decoration: underline; text-decoration-style: dotted; cursor: help; } .native-tooltip { display: none; position: absolute; left: 50%; z-index: 1000; width: 200px; max-width: min(200px, calc(100vw - 24px)); border: 2px solid #999; background: #fff; padding: 10px; box-shadow: 2px 2px 6px rgb(0 0 0 / 20%); color: #000; font-size: 0.95em; line-height: 1.4; text-align: center; text-decoration: none; transform: translateX(-50%); white-space: normal; } .native-tooltip-above { bottom: 125%; } .native-tooltip-below { top: 125%; } .native-tooltip-wrap:hover > .native-tooltip, .native-tooltip-wrap:focus-within > .native-tooltip { display: block; } .vote-share-tooltip-wrap { text-decoration: none; } .vote-share-native-tooltip { box-sizing: border-box; width: 106px; max-width: 106px; height: 106px; padding: 5px; } .vote-share-tooltip-pie { display: block; width: 94px; height: 94px; } .vote-share-key-native-tooltip { width: 128px; max-width: min(128px, calc(100vw - 24px)); padding: 8px; } .vote-share-tooltip-key, .vote-share-tooltip-key > span { display: block; } .vote-share-tooltip-key > span { display: grid; grid-template-columns: 11px minmax(0, 1fr); align-items: center; gap: 6px; margin: 1px 0; color: #431; font-size: 12px; line-height: 1.2; text-align: left; white-space: nowrap; } .vote-share-tooltip-key i { width: 11px; height: 11px; border: 1px solid #000; } .table-group-toggle + .party-swatch, .table-group-toggle + .party-swatch + span { vertical-align: middle; } .minor-party-native-tooltip { width: 280px; max-width: min(280px, calc(100vw - 24px)); } .minor-party-native-tooltip > span { display: block; } .minor-party-native-tooltip img { display: block; width: 100px; height: 100px; margin: 0 auto 8px; object-fit: contain; } /* Server-projection compatibility only. Recovery authors these rules inside * the referendum scene's