/* What Crisis? — "tabloid / dossier" look, laid over css/style.css (layout lives there; this file is the skin).
 * A wooden desk, manila folders for the boards, mugshot photos for officials, newspaper clippings for cards,
 * rubber stamps for buttons and scores, typed memos for text. Fonts bundled in fonts/ (licences there):
 * Anton (headlines, numbers), Libre Franklin (body), Oswald (labels, buttons), Special Elite (typewriter),
 * UnifrakturMaguntia (the newspaper masthead).
 */
@font-face { font-family: "Anton"; src: url("../fonts/Anton-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; src: url("../fonts/Anton-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Franklin"; src: url("../fonts/LibreFranklin-latin-ext.woff2") format("woff2"); font-weight: 500 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Libre Franklin"; src: url("../fonts/LibreFranklin-latin.woff2") format("woff2"); font-weight: 500 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-latin-ext.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Special Elite"; src: url("../fonts/SpecialElite-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Special Elite"; src: url("../fonts/SpecialElite-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "UnifrakturMaguntia"; src: url("../fonts/UnifrakturMaguntia-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #1b1a17; --ink-2: #3d3a33; --muted: #6e675a; --line: #1b1a17;
  --paper: #f1ead8; --newsprint: #e7e0cc; --manila: #d8c08a; --manila-2: #c9ac6c; --desk: #2e2116;
  --red: #c8241c; --gold: #a8841f;
  --good: #c8241c; --bad: #c8241c; --target: #c8241c; --accent: #1b1a17;
  --head: "Anton", "Oswald", Impact, sans-serif; --label: "Oswald", "Libre Franklin", sans-serif;
  --type: "Special Elite", "Courier New", monospace; --body: "Libre Franklin", system-ui, sans-serif;
}
body {
  color: var(--ink); font-family: var(--body); font-weight: 500;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, #3a2a1c, #241910);
}
button { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
button:hover:not(:disabled) { border-color: var(--red); }
button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
b { color: inherit; }
b[title] { text-decoration-color: var(--muted); }

/* the old rounded heading font, everywhere it was used */
.start h1, .enter-splash h1, .enter-splash .enter-hint, .start h3, .portrait, .hero .hero-name, .approval-badge, .capnum, .hero-power .pcost,
.hero-power .pname, .turn-panel .turn-no, .endturn, button.primary, .card .cost, .card .cname, .card .pw, .card .sp,
.pawn .pname, .pawn .pw, .pawn .sp, .pawn .zzz, .banner, .floater, .spot-label, .modal h2, .modal.gallery h3, .logbox h3, .deck span,
.stats-table td, .kw-box b, .dt-stat, .dt-keys b, .legend-banner small, .legend-banner span, .invite-code b, .country-pick h2, .country-row .vs {
  font-family: var(--head); font-weight: 400;
}

/* ---------------------------------------------------------------- start screen = front page */
.start { background: var(--newsprint); color: var(--ink); max-width: 980px; margin: 18px auto; padding: 18px 28px 60px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); border-radius: 0; max-height: calc(100vh - 36px);
  background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1.2px); background-size: 4px 4px; }
.start-bg { display: none; }
.start header { border-bottom: 4px double var(--ink); padding-bottom: 6px; }
.start .live, .enter-splash .live { background: var(--red); border-radius: 0; font-family: var(--label); letter-spacing: 3px; }
.start h1 { font-family: "UnifrakturMaguntia", serif; font-size: 84px; color: var(--ink); text-shadow: none; letter-spacing: 0; margin: 4px 0 0; line-height: 1.05; }
.start .tagline { font-family: var(--type); color: var(--ink-2); border-top: 1px solid var(--ink); padding-top: 4px; }
.start h3 { font-size: 34px; letter-spacing: 1px; color: var(--ink); text-transform: uppercase; margin: 14px 0 10px; }
.country-pick { background: transparent; border: 0; border-radius: 0; color: var(--ink); opacity: 1 !important; box-shadow: none !important;
  border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 14px 10px; }
.country-pick:hover { transform: none; background: rgba(0, 0, 0, 0.03); }
.country-pick.selected { background: rgba(200, 36, 28, 0.07); outline: 3px solid var(--red); outline-offset: -3px; }
.country-pick h2 { font-size: 34px; text-transform: uppercase; color: var(--ink); line-height: 1; }
.cp-emblem { border-radius: 0; border: 3px solid var(--ink); filter: grayscale(1) contrast(1.3); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); }
.country-pick.selected .cp-emblem { filter: none; }
.cp-title, .cp-flavor { font-family: var(--type); color: var(--ink-2); font-style: normal; }
.cp-style { color: var(--ink); }
.cp-power { background: var(--paper); border: 1px dashed var(--ink); border-radius: 0; color: var(--ink); }
.cp-power .pcost, .pcost { background: var(--red); color: #fff; clip-path: none; border-radius: 50%; font-family: var(--head); }
.cp-leaders small { color: var(--muted); }
.cp-leaders span { background: transparent; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); font-family: var(--label); text-transform: uppercase; }
.country-row .vs { color: var(--red); font-size: 54px; transform: rotate(-8deg); text-shadow: none; }
.seg button { box-shadow: none; }
.seg button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg-label { color: var(--ink) !important; font-family: var(--label); }
.big-start { font-family: var(--head) !important; font-size: 26px; letter-spacing: 1px; background: var(--red) !important; color: #fff !important;
  border: 3px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 5px 5px 0 var(--ink) !important; transform: rotate(-1.5deg); }
.big-start.challenge { background: var(--paper) !important; color: var(--ink) !important; transform: rotate(1.5deg); }
.big-start:hover { transform: rotate(0deg) scale(1.03); }
.start-row.secondary button { box-shadow: 2px 2px 0 var(--ink); }
.ticker { background: var(--ink); border-top: 0; }
.ticker b { background: var(--red); font-family: var(--head); font-weight: 400; letter-spacing: 2px; }
.ticker-move span { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.5px; color: var(--paper); }
.ticker-move span::before { color: var(--red); }
.enter-splash { background: var(--newsprint) !important; background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1.2px) !important; background-size: 4px 4px !important; }
.enter-splash h1 { font-family: "UnifrakturMaguntia", serif !important; color: var(--ink) !important; text-shadow: none !important; }
.enter-splash .tagline { color: var(--ink-2) !important; font-family: var(--type); }
.enter-splash .enter-hint { color: var(--red) !important; letter-spacing: 3px; }
.rotate-hint { background: var(--newsprint) !important; color: var(--ink) !important; }

/* ---------------------------------------------------------------- the desk: boards are manila folders */
.arena { background: none; }
.board { background: var(--manila) !important; border: 0 !important; border-radius: 3px !important; position: relative;
  background-image: radial-gradient(rgba(90, 60, 10, 0.12) 1px, transparent 1.5px), linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent) !important;
  background-size: 5px 5px, 100% 100% !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.15) !important; }
.board::before { position: absolute; top: 10px; right: 16px; font-family: var(--type); font-size: 22px; letter-spacing: 3px; z-index: 0;
  color: rgba(200, 36, 28, 0.55); border: 3px solid rgba(200, 36, 28, 0.55); padding: 2px 10px; transform: rotate(-6deg); pointer-events: none; }
.board.opp::before { content: "CLASSIFIED"; }
.board.me::before { content: "TOP SECRET"; top: auto; bottom: 12px; transform: rotate(4deg); }
.board::after { content: ""; position: absolute; left: 24px; width: 140px; height: 16px; background: var(--manila-2); pointer-events: none; }
.board.opp::after { top: -15px; border-radius: 6px 6px 0 0; }
.board.me::after { bottom: -15px; border-radius: 0 0 6px 6px; }
.my-turn .board.me, .their-turn .board.opp { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(241, 234, 216, 0.55) !important; }
.midline { background: none !important; border-top: 2px dashed rgba(241, 234, 216, 0.35) !important; height: 0 !important; }
.midline i { background: var(--red) !important; border-color: var(--paper) !important; box-shadow: none !important; }

/* officials = mugshot photos, clipped on */
.pawn { background: var(--paper) !important; border: 0 !important; border-radius: 1px !important; color: var(--ink);
  padding: 7px 7px 22px !important; box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.35) !important; z-index: 1; }
.pawn:nth-child(odd) { rotate: -1.5deg; }
.pawn:nth-child(even) { rotate: 1.2deg; }
.pawn .part { margin: 0 0 4px !important; border-radius: 0 !important; height: 60px; position: relative; }
.card .art { position: relative; }
/* newspaper halftone dots over the (colour) pictures; ::before, so the Teflon shine can use ::after */
.pawn .part::before, .card .art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(rgba(0, 0, 0, 0.32) 0.8px, transparent 1.1px); background-size: 3px 3px; }
.pawn .pname { font-family: var(--type); font-size: 12px; color: var(--ink); text-transform: uppercase; letter-spacing: 0; }
.pawn .ptext { font-family: var(--body); color: var(--ink-2); }
.pawn:not(.stealth):not(.redtape)::after { content: ""; position: absolute; top: -9px; left: 50%; width: 11px; height: 26px; transform: translateX(-50%) rotate(8deg);
  border: 2px solid #8a8a8a; border-radius: 6px; pointer-events: none; }
.pawn .pw, .pawn .sp, .card .pw, .card .sp { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--head) !important;
  border: 2px solid var(--ink) !important; border-radius: 0 !important; text-shadow: none !important; box-shadow: 1px 1px 0 var(--ink); }
.pawn .sp, .card .sp { border-color: var(--red) !important; color: var(--red) !important; border-radius: 50% !important; box-shadow: 1px 1px 0 var(--red); }
.pawn .sp.hurt, .card .sp.hurt { background: var(--red) !important; color: #fff !important; }
.pawn .pw.up, .card .pw.up { background: #e4f0d0 !important; }
.pawn.ready { box-shadow: 0 0 0 3px var(--red), 2px 4px 8px rgba(0, 0, 0, 0.35) !important; animation: inkPulse 1.6s ease-in-out infinite; }
@keyframes inkPulse { 50% { box-shadow: 0 0 0 5px var(--red), 2px 4px 8px rgba(0, 0, 0, 0.35); } }
.pawn.asleep .part { filter: brightness(0.75); }
.pawn.spent { filter: grayscale(0.5) brightness(0.8); }
.pawn.selected { box-shadow: 0 0 0 4px var(--ink), 2px 4px 8px rgba(0, 0, 0, 0.35) !important; }
.pawn.targetable, .hero.targetable .portrait { box-shadow: 0 0 0 3px var(--red), 0 0 0 6px var(--paper) !important; }
.pawn .crown, .card.legendary::before { color: var(--gold); text-shadow: 0 1px 0 #5c3c00; }
.pawn.legendary { box-shadow: 0 0 0 3px var(--gold), 2px 4px 8px rgba(0, 0, 0, 0.35) !important; }
.pawn.legendary.ready { box-shadow: 0 0 0 3px var(--red), 0 0 0 6px var(--gold) !important; }
.pawn .zzz { background: var(--paper); border: 2px solid var(--ink); color: var(--ink); text-shadow: none; border-radius: 0; font-family: var(--type); }
.pawn.stealth { border: 2px dashed var(--ink) !important; }

/* Teflon = the photo is laminated in a plastic sleeve: glossy blue-silver frame, a shine sweeping across, and a sticker.
   (outline, not box-shadow, so it stacks with the ready/legendary/target rings) */
.pawn.teflon { outline: 4px solid #8cc3f2; outline-offset: 2px; border-radius: 5px !important; }
.pawn.teflon .part::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0.15) 55%, transparent 70%);
  background-size: 250% 100%; animation: teflonShine 3.2s ease-in-out infinite; }
@keyframes teflonShine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -60% 0; } }
.pawn.teflon::before { content: "TEFLON"; position: absolute; top: 4px; left: -6px; z-index: 3; transform: rotate(-10deg); pointer-events: none;
  background: linear-gradient(180deg, #d9ecfb, #8cc3f2); color: #12324f; border: 1px solid #12324f; padding: 0 5px;
  font-family: var(--head); font-size: 11px; letter-spacing: 1px; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.35); }
.pawn.teflon .badges .badge.tef { display: none; } /* the sticker says it */
.badge { border-radius: 0 !important; font-family: var(--label); }
.badge.red { background: var(--red); color: #fff; }
.badge.tef { background: var(--ink); color: var(--paper); }
.badge.stl { background: var(--paper); color: var(--ink); border-color: var(--ink); }

/* cards = newspaper clippings with torn edges (outer glow can't show through the clip, so highlights are drawn inside) */
.card { --frame: var(--newsprint) !important; --frame-2: var(--newsprint) !important; background: var(--newsprint) !important; border-radius: 0 !important;
  color: var(--ink); padding: 6px !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
  clip-path: polygon(0 1%, 6% 0, 13% 1.5%, 21% 0.2%, 30% 1.2%, 38% 0, 47% 1.4%, 55% 0.3%, 63% 1.3%, 72% 0, 80% 1.2%, 88% 0.2%, 95% 1.4%, 100% 0.5%,
    99.3% 50%, 100% 99%, 93% 100%, 85% 98.6%, 77% 100%, 68% 98.8%, 60% 100%, 51% 98.5%, 43% 99.8%, 34% 98.7%, 26% 100%, 17% 98.6%, 9% 99.8%, 0 99%, 0.7% 50%); }
.hand, .mull-cards, .gallery-grid, .dt-card, .spotlight, .zoom, .mvp { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.45)); }
.card .art { border-radius: 0 !important; box-shadow: none; border: 1px solid var(--ink); }
.card.is-policy .art { border-radius: 0 !important; }
.card .nameplate { background: transparent !important; border: 0 !important; box-shadow: none; border-bottom: 2px solid var(--ink) !important; margin: 2px 0 0 !important; border-radius: 0 !important; }
.card .cname { font-size: 15px; text-transform: uppercase; color: var(--ink); letter-spacing: 0.3px; line-height: 1.05; }
.card .ctype { color: var(--muted); text-shadow: none; font-family: var(--label); letter-spacing: 1.5px; }
.card .textbox { background: transparent !important; color: var(--ink); border-radius: 0 !important; border-top: 1px solid var(--ink); padding-bottom: 30px !important; }
.card .ctext { color: var(--ink); font-family: var(--body); font-weight: 500; }
.card .ctext b { color: #000; }
.card .cflavor { font-family: var(--type); color: var(--muted); font-style: normal; }
.card .cost { clip-path: none !important; border-radius: 50%; background: var(--red) !important; color: #fff; text-shadow: none;
  border: 2px solid var(--newsprint); box-shadow: 0 0 0 2px var(--red); left: 4px !important; top: 4px !important; }
.card .cost.up { background: #7a120c !important; }
.card .cost.down { background: #2b6a3a !important; box-shadow: 0 0 0 2px #2b6a3a; }
.card .pw { left: 4px !important; bottom: 4px !important; }
.card .sp { right: 4px !important; bottom: 4px !important; }
.card .rarity { border-radius: 0; }
.card.legendary { box-shadow: inset 0 0 0 3px var(--gold) !important; }
.card.legendary::before { content: "EXCLUSIVE"; top: 8px; left: auto; right: 6px; transform: rotate(6deg); font-family: var(--head); font-size: 11px;
  letter-spacing: 1px; color: #fff; background: var(--gold); padding: 1px 6px; text-shadow: none; }
.card.legendary .nameplate { border-bottom-color: var(--gold) !important; }
.hand .card.playable { box-shadow: inset 0 0 0 4px var(--red) !important; }
.hand .card.selected { box-shadow: inset 0 0 0 5px var(--ink) !important; }
.hand .card.unplayable { filter: grayscale(0.4) brightness(0.8); }
.mull-cards .card.swap::after { color: var(--red); text-shadow: none; }

/* leaders = ID photos; Influence = red rubber stamp */
.hero .portrait { border-radius: 2px !important; border: 5px solid var(--paper) !important; box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.6) !important; }
.hero.active .portrait { box-shadow: 0 0 0 3px var(--red), 3px 5px 12px rgba(0, 0, 0, 0.6) !important; }
.hero .hero-name { text-transform: uppercase; background: var(--ink); color: var(--paper); border-radius: 0; letter-spacing: 0.5px; }
.approval-badge { background: var(--paper) !important; color: var(--red) !important; border: 3px solid var(--red) !important; border-radius: 4px !important;
  transform: rotate(-8deg); text-shadow: none !important; box-shadow: none !important; }
.approval-badge.low { background: var(--red) !important; color: #fff !important; }
.hero-power { background: var(--paper) !important; border: 2px solid var(--ink) !important; border-radius: 50% !important; color: var(--ink); box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5); }
.hero-power .pname { font-family: var(--label) !important; font-weight: 700; text-transform: uppercase; color: var(--ink); font-size: 10.5px; letter-spacing: 0; }
.hero-power .pcost { color: #fff; background: var(--red) !important; clip-path: none !important; border-radius: 50% !important; text-shadow: none; }
.hero-power.ready { box-shadow: 0 0 0 3px var(--red), 2px 3px 0 rgba(0, 0, 0, 0.5) !important; }
.hero-power .ptip { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; font-family: var(--body); }
.capnum { color: var(--paper); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.capital i { clip-path: none; border-radius: 50%; background: rgba(241, 234, 216, 0.18); }
.capital i.spent { background: rgba(200, 36, 28, 0.45); }
.capital i.full { background: var(--paper); }
.deck-stack { background: var(--manila) !important; border: 2px solid var(--paper) !important; border-radius: 0 !important; }
.deck span { color: var(--paper); }
.opp-hand .back { background: var(--manila) !important; border: 2px solid var(--paper) !important; border-radius: 0 !important;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 6px) !important; }

/* End turn = a red rubber stamp */
.endturn { font-size: 26px !important; text-transform: uppercase; letter-spacing: 2px; line-height: 1;
  background: rgba(241, 234, 216, 0.06) !important; color: var(--red) !important; border: 4px solid var(--red) !important; border-radius: 6px !important;
  box-shadow: none !important; transform: rotate(-4deg); animation: none !important; }
.endturn:hover:not(:disabled) { transform: rotate(-2deg) scale(1.04); }
.endturn.pulse { animation: stampPulse 1.4s ease-in-out infinite !important; }
@keyframes stampPulse { 50% { transform: rotate(-4deg) scale(1.07); } }
.endturn:disabled, .endturn.wait { color: rgba(241, 234, 216, 0.45) !important; border-color: rgba(241, 234, 216, 0.35) !important; }
.endturn.wait { font-size: 18px !important; letter-spacing: 1px; }
.turn-panel .turn-no, .turn-panel .status { color: var(--paper); font-family: var(--type); }
.turn-panel button[data-act="cancel"] { background: var(--paper); }

/* press office = typed memo on lined paper */
.logbox { background-color: var(--paper) !important; border-radius: 0 !important; box-shadow: 3px 5px 14px rgba(0, 0, 0, 0.6);
  background-image: repeating-linear-gradient(180deg, transparent 0 21px, rgba(60, 100, 160, 0.16) 21px 22px) !important; }
.logbox h3 { color: var(--red) !important; font-size: 18px !important; letter-spacing: 2px; }
.logbox div { font-family: var(--type); color: var(--ink) !important; font-size: 12px; }
.logbox div.turn { color: var(--muted) !important; }
.logbox div.p1 { color: #8a2a12 !important; }
.side .actions button { background: var(--paper); }
.net-pill { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; font-family: var(--type); }
.net-pill::before { color: #2b6a3a; }
.net-pill.bad::before { color: var(--red); }

/* in-game overlays: headlines, floaters, spotlight, legendary entrance, hover zoom */
.banner { background: var(--paper) !important; color: var(--ink) !important; border: 0 !important; border-radius: 0 !important; text-shadow: none !important;
  text-transform: uppercase; box-shadow: 0 0 0 4px var(--ink), 8px 8px 0 4px rgba(0, 0, 0, 0.5); border-top: 10px solid var(--red) !important; }
.floater { text-shadow: 2px 2px 0 var(--paper), -1px -1px 0 var(--paper); }
.floater.dmg, .floater.tape { color: var(--red); }
.floater.heal { color: #2b6a3a; }
.floater.info { color: var(--ink); }
.spot-label { color: var(--paper) !important; background: var(--red); padding: 2px 10px; text-shadow: none !important; }
.legend-banner { background: var(--paper) !important; border: 0 !important; border-radius: 0 !important; border-top: 10px solid var(--gold) !important;
  box-shadow: 0 0 0 4px var(--ink), 10px 10px 0 4px rgba(0, 0, 0, 0.5) !important; }
.legend-banner small { color: var(--red) !important; }
.legend-banner span { color: var(--ink) !important; text-shadow: none !important; text-transform: uppercase; }
.kw-box div { background: var(--paper) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; color: var(--ink); }
.kw-box b { color: var(--red) !important; }
.kw-box span { color: var(--ink-2) !important; }
.arrow path { stroke: var(--red); }

/* hits: red rubber-stamp numbers, ink splats, and the stamp itself on big hits */
.ink-stamp { position: fixed; z-index: 34; pointer-events: none; white-space: nowrap; font-family: var(--head); font-size: 34px; line-height: 1.1;
  color: var(--red); border: 4px solid var(--red); border-radius: 6px; padding: 0 10px; background: rgba(241, 234, 216, 0.35);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, 0.7) 78%); mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, 0.7) 78%); }
.ink-stamp.big { font-size: 50px; border-width: 5px; }
.ink-splat { position: fixed; z-index: 33; pointer-events: none; border-radius: 50%; background: var(--red); }
.rubber-stamp { position: fixed; z-index: 35; pointer-events: none; width: 84px; height: 110px; }
.rubber-stamp i { position: absolute; left: 28px; top: 0; width: 28px; height: 56px; border-radius: 14px 14px 4px 4px;
  background: linear-gradient(90deg, #5a3a1c, #8f5e2e 50%, #5a3a1c); }
.rubber-stamp b { position: absolute; left: 0; top: 52px; width: 84px; height: 24px; border-radius: 3px; background: linear-gradient(180deg, #3a3a3a, #1c1c1c); }
.rubber-stamp u { position: absolute; left: 4px; top: 74px; width: 76px; height: 9px; background: var(--red); }

/* an official dies: FIRED (red marker X, stamp, clip pops, photo drops off the desk) */
.fired-box { position: fixed; z-index: 30; pointer-events: none; }
.pawn.fired::after { display: none !important; } /* its own paper clip is replaced by one that pops off */
.fx .fired-box .ghost { z-index: 1; } /* under the X, the stamp and the clip */
.fired-x { position: absolute; height: 7px; margin-top: -3px; border-radius: 4px; background: var(--red); opacity: 0.9; transform-origin: 0 50%; z-index: 3; }
.ink-stamp.fired-stamp { position: absolute; left: 50%; top: 45%; z-index: 4; font-size: 30px; }
.fx-clip { position: absolute; top: -10px; left: 50%; width: 11px; height: 26px; border: 2px solid #8a8a8a; border-radius: 6px; z-index: 5; }

/* Teflon breaking: shards of the plastic sleeve and the falling sticker */
.fx-shard { position: fixed; z-index: 34; pointer-events: none; background: linear-gradient(135deg, rgba(220, 240, 255, 0.95), rgba(140, 195, 242, 0.7)); border: 1px solid #fff; }
.fx-sticker { position: fixed; z-index: 34; pointer-events: none; background: linear-gradient(180deg, #d9ecfb, #8cc3f2); color: #12324f; border: 1px solid #12324f;
  padding: 0 5px; font-family: var(--head); font-size: 11px; letter-spacing: 1px; }

/* legendary entrance: paparazzi flashbulbs */
.flashbulb { position: fixed; z-index: 36; pointer-events: none; width: 170px; height: 170px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 10%, rgba(255, 255, 240, 0.9) 18%, rgba(255, 255, 220, 0.35) 40%, transparent 70%); }
.whiteout { position: fixed; inset: 0; z-index: 36; pointer-events: none; background: #fff; }

/* dialogs = sheets of paper */
.overlay { background: rgba(20, 12, 6, 0.7); }
.modal { background: var(--paper) !important; color: var(--ink) !important; border: 0 !important; border-radius: 0 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important; }
.modal h2 { text-transform: uppercase; color: var(--ink) !important; letter-spacing: 0.5px; }
.modal p, .modal li { color: var(--ink-2) !important; }
.modal li b { color: var(--ink) !important; }
.modal.over.won h2 { color: var(--ink) !important; }
.modal.over.lost h2 { color: var(--red) !important; }
.stats-table td { color: var(--ink); }
.stats-table td.who { color: var(--ink-2); font-family: var(--label); }
.stats-table th { color: var(--muted); font-family: var(--label); }
.stats-table tr + tr { border-top-color: rgba(0, 0, 0, 0.2); }
.mvp small { color: var(--red) !important; font-family: var(--label); }
.mvp span, .over .rounds { color: var(--ink-2) !important; font-family: var(--type); }
.modal.settings label { color: var(--ink) !important; font-family: var(--label); text-transform: uppercase; letter-spacing: 0.5px; }
.modal.settings input { accent-color: var(--red) !important; }
.modal.gallery h3 { color: var(--ink) !important; border-bottom: 3px solid var(--ink); padding-bottom: 4px; font-size: 22px !important; letter-spacing: 1px; }
.gallery-hint { color: var(--muted); font-family: var(--type); }
.dt-meta { color: var(--muted); font-family: var(--label); }
.dt-stat { background: var(--paper) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; color: var(--ink) !important; }
.dt-stat.sp { color: var(--red) !important; border-color: var(--red) !important; }
.dt-text { background: transparent !important; color: var(--ink) !important; border-left-color: var(--red) !important; border-radius: 0 !important; }
.dt-keys { color: var(--ink-2) !important; }
.dt-keys b { color: var(--red) !important; }
.dt-flavor, .dt-line { color: var(--muted) !important; font-family: var(--type); font-style: normal !important; }
.dt-count { color: var(--muted); }
.dt-nav { background: var(--paper); }
.invite-code small { color: var(--muted); }
.invite-code b { color: var(--red) !important; }
.invite-link { background: #fff !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; font-family: var(--type); }
.invite-cancel { color: var(--ink-2) !important; box-shadow: none !important; border: 0 !important; background: none !important; }

/* three countries on the front page; the rival gets a stamp */
.country-row.three { gap: 10px; }
.country-row.three .country-pick { padding: 12px 8px; }
.country-row.three .country-pick h2 { font-size: 26px; }
.country-row.three .cp-emblem { width: 88px; height: 88px; }
.country-pick { position: relative; }
.rival-tag { position: absolute; top: 8px; right: 6px; z-index: 2; font-family: var(--head); font-size: 15px; letter-spacing: 2px; color: var(--red);
  border: 3px solid var(--red); padding: 0 6px; transform: rotate(8deg); background: rgba(241, 234, 216, 0.85); }
.rival-row { justify-content: center; margin-top: 12px !important; }
.rival-row .vs { font-family: var(--head); color: var(--red); font-size: 24px; transform: rotate(-6deg); }
.pcost { display: inline-grid; place-items: center; }

/* Polonium: sickly green photo, a radiation tag that pulses */
.pawn.poisoned { background: #e4ebcf !important; }
.pawn.poisoned .part img, .pawn.poisoned .part svg { filter: sepia(0.35) hue-rotate(40deg) saturate(1.5); }
.poison-tag { position: absolute; top: -10px; right: -10px; z-index: 4; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #ffd200; color: #1b1a17; border: 2px solid #1b1a17; font-size: 16px; line-height: 1; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4);
  animation: poisonPulse 1.4s ease-in-out infinite; }
@keyframes poisonPulse { 50% { transform: scale(1.15); box-shadow: 0 0 10px 2px rgba(150, 220, 60, 0.8); } }
.badge.psn { background: #ffd200; color: #1b1a17; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 640px) {
  .start { margin: 0; padding: 12px 12px 60px; max-height: 100vh; box-shadow: none; }
  .start h1 { font-size: 52px; }
  .start h3 { font-size: 24px; }
  .country-pick h2 { font-size: 22px; }
  .country-row .vs { font-size: 30px; }
  .country-row.three { gap: 4px; }
  .country-row.three .country-pick { padding: 8px 3px; }
  .country-row.three .country-pick h2 { font-size: 16px; }
  .country-row.three .cp-emblem { width: 52px; height: 52px; }
  .country-row.three .cp-title { font-size: 10px; }
  .country-row.three .cp-leaders span { font-size: 9px; padding: 0 3px; }
  .rival-tag { font-size: 10px; border-width: 2px; top: 4px; right: 2px; letter-spacing: 1px; }
  .rival-row .seg button { font-size: 11px; padding: 6px 6px; }
  .poison-tag { width: 18px; height: 18px; font-size: 11px; top: -7px; right: -7px; }
  .big-start { font-size: 21px; }
  .board::before { font-size: 13px; letter-spacing: 2px; padding: 1px 6px; border-width: 2px; top: 6px; right: 8px; }
  .board.me::before { bottom: 6px; }
  .board::after { width: 90px; height: 10px; left: auto; right: 24px; } /* tabs on the right: the leaders sit on the left */
  .board.opp::after { top: -9px; }
  .board.me::after { bottom: -9px; }
  .pawn { padding: 3px 3px 12px !important; }
  .pawn .part { height: 46px; margin: 0 0 2px !important; }
  .pawn .pname { font-family: var(--label); font-weight: 700; font-size: 8.5px; letter-spacing: 0; }
  .pawn:not(.stealth):not(.redtape)::after { top: -6px; width: 7px; height: 16px; border-width: 1.5px; }
  .endturn { font-size: 17px !important; border-width: 3px !important; letter-spacing: 1px; padding: 0 4px !important; }
  .endturn.wait, .endturn:disabled { font-size: 13px !important; }
  .approval-badge { border-width: 2px !important; }
  .hero .portrait { border-width: 3px !important; }
  .hero-power .pname { font-size: 7.5px; }
  .card.legendary::before { font-size: 9px; }
  .pawn.teflon { outline-width: 3px; outline-offset: 1px; }
  .pawn.teflon::before { font-size: 8px; padding: 0 3px; top: 2px; left: -4px; }
  .banner { font-size: 30px !important; }
  .ink-stamp { font-size: 22px; border-width: 3px; padding: 0 6px; }
  .ink-stamp.big { font-size: 32px; border-width: 4px; }
  .rubber-stamp { transform-origin: center; scale: 0.7; }
  .flashbulb { width: 120px; height: 120px; }
}