/* Gotcha*: sladderbladets forside. Rødt avishoved, rasterprikker, kæmpe citat-overskrifter,
   censurerede kildefotos og røde tusch-cirkler. Gælder kun når body har klassen game-gotcha. */

body.game-gotcha {
    --paper: #f4eedf;
    --red: #e1061b;
    --red-dark: #8a0410;
    --yellow: #ffe600;
    --ink: #111;
    --cream: #111;
    --tan: #333;
    --amber: #ffe600;
    --neon: #e1061b;
    color: var(--ink);
    background: var(--paper);
}
html:has(body.game-gotcha) { background: #f4eedf; }
/* Rasterprikker i stedet for scenens vignet. */
body.game-gotcha::after { background: radial-gradient(rgb(0 0 0 / .09) 1px, transparent 1.6px) 0 0 / 5px 5px; z-index: 0; }
body.game-gotcha > * { position: relative; z-index: 1; }
body.game-gotcha .stage::before { display: none; }

/* Avishovedet: topbaren bliver til et rødt bånd. */
body.game-gotcha .topbar { background: var(--red); border-bottom: 6px solid var(--ink); padding: 10px 28px; color: #fff; }
.gotcha-logo {
    background: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    text-transform: none;
    transform: none;
    font: 900 3.4rem/1 "Archivo Black", sans-serif;
    letter-spacing: -.04em;
    color: #fff;
    text-shadow: 4px 4px 0 var(--ink);
}
.gotcha-logo::after { display: none; }
body.game-gotcha .round-badge { color: #fff; font: 800 .9rem/1.35 "Archivo", sans-serif; letter-spacing: .14em; border-left: 3px solid #fff; padding-left: 14px; margin-right: auto; margin-left: 24px; }
body.game-gotcha .timer { --glow: var(--yellow); background: var(--ink); color: var(--yellow); text-shadow: none; box-shadow: none; border-radius: 0; }
body.game-gotcha .timer::after { background: var(--yellow); }
body.game-gotcha button.secondary { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
body.game-gotcha main button.secondary, body.game-gotcha .card button.secondary { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
body.game-gotcha button:not(.secondary):not(.link):not(.vote):not(.g-pick) { background: var(--red); box-shadow: 0 5px 0 var(--ink); }

/* Bånd og mærker i hjørnet af forsiden. */
.g-stamp { position: fixed; top: 24px; left: 56%; z-index: 5; background: var(--ink); color: var(--yellow); font: 400 1.5rem var(--stage); letter-spacing: .08em; padding: 6px 16px; transform: rotate(-4deg); text-transform: uppercase; }
.g-price { position: fixed; top: 14px; left: calc(56% + 200px); z-index: 5; background: var(--yellow); color: var(--ink); font: 900 .95rem/1.05 "Archivo Black", sans-serif; text-align: center; padding: 8px 10px; transform: rotate(6deg); border: 3px solid var(--ink); text-transform: uppercase; }

/* Forsiden */
.g-page { position: relative; width: 100%; max-width: 1400px; min-height: calc(100vh - 160px); margin: 0 auto; padding: 18px 40px 70px; text-align: left; }
.g-kicker { display: inline-block; background: var(--ink); color: #fff; font: 400 1.5rem var(--stage); letter-spacing: .06em; padding: 4px 14px; text-transform: uppercase; }
.g-head { font: 400 clamp(3rem, 6.2vw, 5.4rem)/.95 var(--stage); text-transform: uppercase; margin: 14px 0 0; max-width: 62%; color: var(--ink); }
.g-head .q { color: var(--red); font-size: 1.25em; line-height: 0; vertical-align: -.2em; }
.g-sub { font: 700 italic 1.35rem "Archivo", sans-serif; margin: 16px 0 0; max-width: 60%; }

.g-photo { position: absolute; right: 60px; top: 30px; width: 360px; background: #fff; padding: 14px 14px 60px; transform: rotate(3deg); box-shadow: 0 18px 30px rgb(0 0 0 / .35); }
.g-photo .pic { height: 300px; background: #cfe3ee; display: grid; place-items: center; overflow: hidden; position: relative; }
.g-photo .pic .avatar { width: 88%; height: auto; border: 0; box-shadow: none; background: none; border-radius: 0; }
.g-photo .cap { position: absolute; left: 14px; right: 14px; bottom: 12px; font: 400 1.8rem/1 var(--stage); text-transform: uppercase; text-align: center; color: var(--ink); }
.g-photo .mystery { width: 78%; aspect-ratio: 1; border-radius: 50%; background: #111; }
.g-photo .bar { position: absolute; left: 8%; right: 8%; top: 36%; height: 46px; background: #111; transform: rotate(-2deg); }
.g-photo .qm { position: absolute; font: 400 9rem/1 var(--stage); color: #fff; text-shadow: 5px 5px 0 var(--red); }

.g-burst { position: absolute; right: 340px; top: 0; width: 210px; height: 210px; background: var(--yellow); clip-path: polygon(50% 0, 61% 23%, 85% 11%, 79% 37%, 100% 50%, 79% 63%, 85% 89%, 61% 77%, 50% 100%, 39% 77%, 15% 89%, 21% 63%, 0 50%, 21% 37%, 15% 11%, 39% 23%); display: grid; place-items: center; font: 900 2rem/1 "Archivo Black", sans-serif; text-align: center; color: var(--red); transform: rotate(-12deg); animation: g-pop .4s cubic-bezier(.2, 1.6, .4, 1) .3s both; }
.g-circle { position: absolute; right: 90px; top: 52px; width: 300px; height: 300px; border: 6px solid var(--red); border-radius: 50%; transform: rotate(-8deg); animation: g-pop .4s ease-out .6s both; }
.g-arrow { position: absolute; right: 430px; top: 330px; font: 400 1.8rem var(--stage); color: var(--red); transform: rotate(-6deg); animation: g-fade .3s ease-out .9s both; }
@keyframes g-pop { from { transform: rotate(-12deg) scale(0); opacity: 0; } }
@keyframes g-fade { from { opacity: 0; } }

.g-box { position: absolute; left: 40px; bottom: 64px; width: 340px; border: 3px solid var(--ink); background: #fff; padding: 10px 14px; }
.g-box b { display: block; font: 400 1.2rem var(--stage); color: var(--red); letter-spacing: .06em; text-transform: uppercase; }
.g-box p { margin: 4px 0 0; font: 700 1rem/1.3 "Archivo", sans-serif; }
.g-votes { position: absolute; left: 410px; bottom: 60px; display: flex; gap: 18px; }
.g-votes div { font: 800 .85rem/1.2 "Archivo", sans-serif; text-align: center; min-width: 70px; }
.g-votes .avatar { width: 52px; height: 52px; display: block; margin: 0 auto 4px; border: 3px solid var(--ink); }
.g-votes .ok { color: var(--red); }
.g-votes .ok .avatar { border-color: var(--red); box-shadow: 0 0 0 3px var(--yellow); }
.g-page .vote-progress { position: absolute; left: 410px; bottom: 74px; color: var(--ink); font-family: var(--type); }
.g-page .vote-progress .dot { background: rgb(0 0 0 / .15); }
.g-page .vote-progress .dot.on { background: var(--red); box-shadow: none; }
.g-page .players { justify-content: flex-start; margin-top: 26px; }
.g-page .players li { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.g-page .players li.done { background: var(--yellow); border-color: var(--ink); }
.g-page .skip { position: absolute; right: 40px; bottom: 60px; }

.g-ticker { position: fixed; left: 0; right: 0; bottom: 0; height: 42px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 24px; padding: 0 20px; font: 400 1.15rem var(--stage); letter-spacing: .06em; white-space: nowrap; overflow: hidden; z-index: 5; }
.g-ticker b { background: var(--red); padding: 2px 10px; font-weight: 400; text-transform: uppercase; }

/* Stillingen og slutskærmen på avispapir */
body.game-gotcha .scoreboard li { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
body.game-gotcha .scoreboard li.top { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
body.game-gotcha .scoreboard .bar { background: linear-gradient(90deg, rgb(255 230 0 / .2), rgb(255 230 0 / .7)); }
body.game-gotcha .scoreboard li::before { color: var(--red); }
body.game-gotcha h1 { color: var(--ink); text-shadow: none; }
body.game-gotcha .lobby-panel, body.game-gotcha .join-info { color: var(--ink); }
body.game-gotcha .lobby-panel { background: #fff; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
body.game-gotcha .muted { color: #444; }

/* Telefonen: et avisudklip */
body.game-gotcha.player .topbar { padding: 10px 16px; }
body.game-gotcha.player #me { color: #fff; background: rgb(0 0 0 / .25); }
body.game-gotcha main.card { background: #fff; background-image: none; border: 3px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 var(--ink); padding: 22px 18px; transform: rotate(-.5deg); }
.g-anon { display: inline-block; background: var(--ink); color: #fff; font: 400 1.1rem var(--stage); padding: 3px 10px; letter-spacing: .06em; text-transform: uppercase; }
.g-quote { font: 400 2rem/.98 var(--stage); text-transform: uppercase; margin: 10px 0 14px; color: var(--ink); }
.g-quote .q { color: var(--red); }
.g-mine { background: var(--yellow); border: 2px solid var(--ink); padding: 8px 10px; font-weight: 800; margin-bottom: 10px; }
.g-list { border-top: 3px solid var(--ink); }
.g-list button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--ink); font: 800 1.2rem "Archivo", sans-serif; color: var(--ink); cursor: pointer; position: relative; }
.g-list button .avatar { width: 44px; height: 44px; border: 2px solid var(--ink); }
.g-list button:hover, .g-list button.sel { background: var(--yellow); }
.g-list button.sel::after { content: ""; position: absolute; inset: 2px 10px 2px -6px; border: 4px solid var(--red); border-radius: 50%; transform: rotate(-2deg); }
.g-list button:disabled { opacity: .6; cursor: default; }
body.game-gotcha.player .topbar::before { content: "Gotcha*"; font: 900 1.7rem/1 "Archivo Black", sans-serif; letter-spacing: -.04em; color: #fff; text-shadow: 3px 3px 0 var(--ink); margin-right: auto; }
body.game-gotcha.player .topbar { gap: 10px; }
body.game-gotcha.player #me { order: 2; }
body.game-gotcha.player .timer { order: 3; }

/* Landingssiden /gotcha */
body.game-gotcha.landing .lp-nav { padding-top: 22px; }
body.game-gotcha.landing .lp-nav .gotcha-logo { background: var(--red); color: #fff; padding: 4px 14px 8px; transform: rotate(-2deg); box-shadow: 5px 5px 0 var(--ink); font-size: 2.4rem; text-decoration: none; }
body.game-gotcha.landing .lp-hero h1, body.game-gotcha.landing .lp-section > h2, body.game-gotcha.landing .lp-cta h2 { color: var(--ink); text-shadow: none; }
body.game-gotcha.landing .lp-hero h1 em { color: var(--red); }
body.game-gotcha.landing .lp-kicker, body.game-gotcha.landing .lp-lead, body.game-gotcha.landing .lp-start-note, body.game-gotcha.landing .lp-feature p, body.game-gotcha.landing .lp-footer { color: #333; }
body.game-gotcha.landing .lp-feature { background: #fff; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
body.game-gotcha.landing .lp-feature h3 { color: var(--ink); }
body.game-gotcha.landing .lp-footer a { color: var(--red); }
body.game-gotcha.landing .lang-switch .flag .label { color: var(--ink); }
.gt-screen { background: #f4eedf; color: #111; padding: 0 !important; display: block !important; position: relative; }
.gt-mast { background: #e1061b; color: #fff; font: 900 1.4rem/1 "Archivo Black", sans-serif; padding: 8px 12px; border-bottom: 3px solid #111; display: flex; justify-content: space-between; align-items: center; text-shadow: 2px 2px 0 #111; }
.gt-mast span { font: 800 .55rem Archivo; letter-spacing: .14em; text-transform: uppercase; text-shadow: none; }
.gt-kick { display: inline-block; margin: 10px 12px 0; background: #111; color: #fff; font: 400 .7rem var(--stage); padding: 2px 6px; text-transform: uppercase; }
.gt-head { font: 400 1.5rem/.95 var(--stage); text-transform: uppercase; margin: 6px 12px; max-width: 56%; }
.gt-photo { position: absolute; right: 16px; top: 46px; width: 34%; background: #fff; padding: 6px 6px 22px; transform: rotate(3deg); box-shadow: 0 6px 12px rgb(0 0 0 / .3); }
.gt-photo img { width: 100%; background: #cfe3ee; display: block; }
.gt-photo b { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 400 .75rem var(--stage); text-transform: uppercase; }
.gt-burst { position: absolute; right: 34%; top: 40px; width: 70px; height: 70px; background: #ffe600; clip-path: polygon(50% 0,61% 23%,85% 11%,79% 37%,100% 50%,79% 63%,85% 89%,61% 77%,50% 100%,39% 77%,15% 89%,21% 63%,0 50%,21% 37%,15% 11%,39% 23%); display: grid; place-items: center; font: 900 .7rem/1 "Archivo Black", sans-serif; color: #e1061b; text-align: center; transform: rotate(-12deg); }

/* Rumkoden som avisens røde rubrik, og kort der ellers bruger scenens lyse tekst. */
body.game-gotcha .code { background: var(--ink); box-shadow: 6px 6px 0 var(--red); }
body.game-gotcha .code span { background: #fff; color: var(--ink); box-shadow: none; }
body.game-gotcha .best-card { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
body.game-gotcha .best-prompt { color: var(--red); }
body.game-gotcha .best-author { color: var(--ink); }
body.game-gotcha .after-title { color: var(--red); }
body.game-gotcha .own-game-tv { background: #fff; border: 3px solid var(--ink); }
body.game-gotcha .join-info .url { color: var(--ink); }
body.game-gotcha .best-points { color: var(--red); }
body.game-gotcha button.link { color: var(--red); }