/*
 * "Fang fidusen" — arkadespillet.
 *
 * Spillehal, ikke dashboard: mørkt kabinet, lysende cifre, hårde kanter. Det er den ENESTE
 * flade i huset der må larme — resten af sitet sælger ro, og et spil der ligner en rapport
 * bliver ikke spillet. Farverne er stadig husets egne tokens, så mørk tilstand og kontrast
 * ikke skal opfindes igen her.
 *
 * Ingen inline styles nogen steder (streng CSP), og ingen animation der flytter layout —
 * uret er en bredde, ikke en position.
 */

.arcade {
    display: grid;
    gap: var(--sp-6, 1.5rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
    .arcade { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); align-items: start; }
}

/* ── kabinettet ─────────────────────────────────────────────────────────── */
.arcade__cabinet {
    background: #0C1310;                     /* husets nat-baggrund, uanset tema */
    border: 2px solid #16453E;
    border-radius: var(--r-lg, 14px);
    padding: var(--sp-5, 1.25rem);
    color: #ECF3EE;
    box-shadow: 0 18px 40px rgba(11, 46, 42, .28);
}

.arcade__hud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4, 1rem);
    align-items: center;
    border-bottom: 1px solid #263630;
    padding-bottom: var(--sp-3, .75rem);
    margin-bottom: var(--sp-4, 1rem);
}

.arcade__stat { display: flex; align-items: baseline; gap: .45rem; }
.arcade__stat--wide { flex: 1 1 8rem; min-width: 6rem; }

.arcade__label {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #85998F;
}

.arcade__digits {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.15rem;
    color: #C7F24C;
}

.arcade__lives { color: #C0392B; letter-spacing: .1em; }

/* Uret er en bredde der krymper — aldrig en position, så intet layout hopper. */
.arcade__timer { display: block; flex: 1; height: .5rem; background: #182420; border-radius: 999px; overflow: hidden; }
.arcade__timer i { display: block; height: 100%; width: 100%; background: #C7F24C; transition: width .25s linear; }
.arcade__timer i.is-low { background: #C0392B; }

/* ── skærmen ────────────────────────────────────────────────────────────── */
.arcade__screen { min-height: 22rem; display: flex; align-items: stretch; }
.arcade__panel { flex: 1; display: flex; flex-direction: column; gap: var(--sp-4, 1rem); justify-content: center; }

.arcade__round { color: #85998F; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0; }

.arcade__mail {
    background: #131C18;
    border: 1px solid #263630;
    border-left: 3px solid #C7F24C;
    border-radius: var(--r-md, 10px);
    padding: var(--sp-4, 1rem);
    display: grid;
    gap: .35rem;
}

.arcade__meta { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.arcade__addr { color: #B7C9C0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
/* Mailens egen ramme. Hvid baggrund med vilje: en lokkemail er skrevet til en indbakke,
   og en mørk ramme ville afsløre den som "noget vi har lavet om". */
.arcade__frame {
    width: 100%;
    height: 20rem;
    border: 1px solid #263630;
    border-radius: var(--r-sm, 8px);
    background: #ffffff;
    margin-top: .5rem;
}

@media (max-width: 40rem) { .arcade__frame { height: 13rem; } }

.arcade__preview { margin: .35rem 0 0; color: #B7C9C0; font-size: .9rem; line-height: 1.5; }

.arcade__q { margin: 0; font-weight: 700; }

.arcade__options { display: grid; gap: .5rem; }
/* "Phishing eller ægte?" er ét valg mellem to — knapperne skal være store nok til en tommel. */
.arcade__options--two { grid-template-columns: 1fr 1fr; gap: .75rem; }
.arcade__option--big { justify-content: center; font-size: 1.05rem; font-weight: 700; padding: 1rem .9rem; }

.arcade__option {
    text-align: left;
    background: #131C18;
    color: #ECF3EE;
    border: 1px solid #3A4F46;
    border-radius: var(--r-md, 10px);
    padding: .7rem .9rem;
    font: inherit;
    cursor: pointer;
    display: flex;
    gap: .6rem;
    align-items: baseline;
}

.arcade__option:hover:not(:disabled) { border-color: #C7F24C; }
.arcade__option:focus-visible { outline: 2px solid #C7F24C; outline-offset: 2px; }
.arcade__option:disabled { cursor: default; opacity: .75; }
.arcade__option.is-right { border-color: #C7F24C; background: #16453E; opacity: 1; }
.arcade__option.is-wrong { border-color: #C0392B; background: #2A1614; opacity: 1; }
.arcade__key { color: #85998F; font-variant-numeric: tabular-nums; }

.arcade__verdict { font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; margin: 0; }
.arcade__verdict.is-right { color: #C7F24C; }
.arcade__verdict.is-wrong { color: #C0392B; }

.checklist--flags { margin: 0; }
.checklist--flags li { color: #B7C9C0; }

.arcade__gameover { font-size: 1.9rem; font-weight: 700; letter-spacing: .08em; margin: 0; color: #C7F24C; }

.arcade__initials { display: grid; gap: .6rem; justify-items: start; }

.arcade__input {
    width: 6.5rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .35em;
    text-align: center;
    text-transform: uppercase;
    background: #131C18;
    color: #C7F24C;
    border: 1px solid #3A4F46;
    border-radius: var(--r-md, 10px);
    padding: .3rem .2rem;
}

.arcade__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── dagens liste ───────────────────────────────────────────────────────── */
.arcade__board { align-self: start; }
.arcade__table { width: 100%; }
.arcade__rank { color: var(--c-ink-mute); font-variant-numeric: tabular-nums; width: 2.5rem; }
.arcade__who { font-weight: 700; letter-spacing: .18em; }
.arcade__board .arcade__digits { color: var(--c-ink); }

@media (prefers-reduced-motion: reduce) {
    .arcade__timer i { transition: none; }
}

/* Brødteksten under spillet bruger husets .legal — samme afstande som de juridiske sider.
   h3 mangler dér, fordi de sider ikke har tre niveauer. */
.legal h3 { margin: var(--s-5, 1.25rem) 0 var(--s-2, .5rem); font-size: 1.05rem; }