/* ═══════════════════════════════════════════════════════════════
   Sameiginlegi leikjahausinn (D3 úr hönnunarúttekt 24.7.2026,
   styrktur í UI-lotunni 25.8.2026).
   Markmið: einn haus-bútur í stað 59 handskrifaðra afbrigða.

   Notkun á leikjasíðu:
     <link rel="stylesheet" href="css/leikjahaus.css">
     <header class="lu-leikhaus" style="--haus:var(--lu-sunny);--haus-ink:var(--lu-ink)">
         <a href="/" class="back-link">← Kokomo</a>
         <h1>Heiti leiks</h1>
         <button class="hbtn hbtn--1" id="btn-info" aria-label="Reglur">SVG</button>
     </header>
   - --haus: litur leiksins (sjá "hver leikur á sinn lit" í tokens.css).
   - --haus-ink: textalitur, sjálfgefið hvítur; á LJÓSUM haus (sunny o.þ.h.) skal nota
     FASTAN dökkan lit (#2B2150), EKKI var(--lu-ink) sem verður ljós í dökku þema.
   Við yfirfærslu síðu: eyða header/h1/.back-link reglunum úr báðum lögum
   síðunnar (grunnstíl + Lundi-skin yfirskrift), þessi skrá kemur í staðinn.
   ═══════════════════════════════════════════════════════════════ */
.lu-leikhaus {
    text-align: center; padding: 14px 20px; position: relative;
    background: var(--haus, var(--lu-grape));
    color: var(--haus-ink, #fff);
    box-shadow: var(--lu-shadow-sm);
    /* Símar með kverk: hausinn er efsti fasti flöturinn og lenti undir henni. */
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.lu-leikhaus h1 { font-family: var(--lu-font-display); font-weight: 700; font-size: 20px; margin: 0; color: inherit; }
/* ATH um opacity: hvítur texti á grape mælist NÁKVÆMLEGA 4.50 og stenst þar með
   AA. Við .92 (sem stóð hér áður) varð hann #F7F1FD og mældist 4.06, sem féll á
   ellefu síðum. Deyfingin er því tekin af hvíldarstöðunni og hover fær í staðinn
   ljósari flöt á bak við sig. Enginn haus má bera daufari texta en fullan lit. */
.lu-leikhaus .back-link {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    text-decoration: none; color: inherit; font-size: 14px; font-weight: 800;
}
.lu-leikhaus .hbtn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: inherit;
    cursor: pointer; padding: 4px; line-height: 1;
    /* 18px: 43 síður af 45 skrifuðu þetta hjá sér og hinar tvær 20px. Táknin eru
       SVG með fastri stærð, svo þetta ræður aðeins textahnöppum („?"). */
    font-size: 18px;
}
.lu-leikhaus .back-link:hover, .lu-leikhaus .hbtn:hover { opacity: .82; }

/* ── Hnappastæði ────────────────────────────────────────────────
   Sama stæði stóð á 46, 48 og 52 px eftir því hvaða síða átti í hlut
   (mælt 25.8.2026), því hvert hnit var skrifað inline. Stæðin eru nú
   nefnd og jafndreifð. Inline right: vinnur áfram á eldri síðum, svo
   yfirfærsla getur gerst ein síða í einu án þess að neitt hoppi. */
.lu-leikhaus .hbtn--1 { right: 16px; }
.lu-leikhaus .hbtn--2 { right: 48px; }
.lu-leikhaus .hbtn--3 { right: 80px; }

/* ── Snertiflötur ───────────────────────────────────────────────
   Táknin eru um 20px og hnappurinn því langt undir lágmarkinu.
   Smellsvæðið er stækkað með gervihlut svo EKKERT hreyfist sjónrænt.
   HÆÐIN fer í 44px (hausinn á næga lóðrétta rýmd) en BREIDDIN aðeins í
   32px, því stæðin eru nákvæmlega 32px á milli. Breiðari flötur skarast
   við nágrannann og sá sem er neðar í skjalinu stelur smellinum af hinum.
   LEIÐRÉTTING 25.8.2026: fyrsta útgáfa setti 40px og fullyrti í þessari
   athugasemd að það skaraðist ekki. Það var rangt reiknað; axe-core mældi
   20px öruggt svæði á Dyflissunni, þar sem tvö aðliggjandi stæði eru bæði
   í notkun. 32×44 er yfir 24px lágmarki WCAG 2.5.8 og snertist án skörunar. */
.lu-leikhaus .back-link::after,
.lu-leikhaus .hbtn::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 32px);
    height: max(100%, var(--lu-tap-min, 44px));
}

/* Fókus: grunnurinn í tokens.css notar --lu-bg sem ytri hring, sem hverfur
   ofan á lituðum haus. Hér fær hann lit haussins í staðinn. */
.lu-leikhaus .back-link:focus-visible,
.lu-leikhaus .hbtn:focus-visible {
    outline: 3px solid var(--haus-ink, #fff);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--haus, var(--lu-grape));
}

/* ── Afbrigði: undirtitill ──────────────────────────────────────
   Leynigátan og Lundakot bera línu undir heitinu. Hún var skilgreind á
   hvorri síðu fyrir sig og Leynigátan harðkóðaði hvítan texta, sem hefði
   brotnað um leið og hauslitnum væri breytt. Erfir nú lit haussins. */
.lu-leikhaus .sub { font-size: 12px; font-weight: 700; color: inherit; }

/* ── Afbrigði: langt heiti ──────────────────────────────────────
   Réttritunarsíðan rakst á að heitið og „Fræðsluleikir"-hlekkurinn komust
   ekki fyrir á sömu línu undir 420px. Í stað þess að smíða sérhaus þar er
   afbrigðið skilgreint hér (sbr. §6: exception verður variant). */
.lu-leikhaus--tvilina { padding-bottom: 10px; }
.lu-leikhaus--tvilina .back-link { position: static; transform: none; display: block; margin-bottom: 6px; }

/* Tákn í fyrirsögnum leikjahausa (eigin grafík í stað emoji, sbr. CLAUDE.md) */
.lu-leikhaus h1 .haus-tak { height: 26px; width: auto; vertical-align: -5px; margin-right: 2px; border-radius: 7px; }

/* ── Lítil skjáhæð ──────────────────────────────────────────────
   Í landslagi á síma étur fastur haus of mikið af spilaborðinu. */
@media (max-height: 460px) {
    .lu-leikhaus { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
    .lu-leikhaus h1 { font-size: 17px; }
}