/* lek-ny.css — Ordlek hub, Ordskär menu, run HUD and end screen.
   Load AFTER app.css. Nothing here hardcodes a rank theme: the night surface is
   var(--natt) and the accent var(--ljus), both set by malaVarld() on #spelRoot.
   Every RANGER[].t.bg is dark, so a --natt band always carries light text. */

/* ============================================================ 1. the hub */
/* Both games draw from the same words, so what is DUE belongs to the hub, not
   to either card. It is the reason to open a game at all. */
/* The due count is a line of instruction pointing at the games below, not a button (Linh, 2026-09-23). */
.lekdue { display: flex; align-items: center; gap: .55em; margin: 14px 2px 0; padding: 0; background: none; border: 0; color: var(--granite); font-size: .92rem; line-height: 1.4; }
.lekdue svg { flex: none; }
.lekdue b { color: var(--ink); font-weight: 600; }
.lekdue.tomt b { font-weight: 500; }

/* One column: each card's picture comes from a different renderer with a
   different native height, so the two are stacked rather than matched. */
.lekgrid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 600px) { .lekgrid { grid-template-columns: 1fr 1fr; } } /* side by side on a wide screen (Linh, 2026-09-16: the garden strip ran the full width) */
.lekcard { padding: 0; border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.07);
  background: var(--paper); text-align: left; display: flex; flex-direction: column; color: var(--ink); width: 100%; box-sizing: border-box; cursor: pointer; font: inherit; }
.lekcard > * { width: 100%; box-sizing: border-box; } /* a div, not a <button>: Safari shrank a button's content to its text */
.lekcard:hover { border-color: var(--blue); }
.lekcard:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* The garden slot BECOMES a .gbar when paintBanner() paints it, and miniSVG
   authors its scene as viewBox="0 0 W 58" with W = 58 * clientWidth / 68 — so
   the strip is natively 68px tall (58 under the narrow query). Do not set a
   height here; .gbar owns it, and overriding would stretch the scene. */
.lekpic { position: relative; }
.lekpic.island { height: 96px; background: var(--natt, #12242f); } /* ritaVarld is 1000×330 ≈ 3:1; same height as the garden strip in the card */
/* Safari (Linh's screenshot, 2026-09-18): a filtered child inside a rounded overflow-hidden card was not painted
   at all, and an inline SVG as a flex item took its width from its own aspect ratio, not from width:100%.
   So: plain block SVGs with explicit sizes, no filter — the preview is lightened inside the SVG instead (ordskar.js). */
.lekpic.island svg { display: block; width: 100%; height: 96px; }
.lekpic .gbar .gbinner { display: block; }
.lekpic .gbar .mini { display: block; width: 100%; height: 96px; } .lekpic .gbar { border-bottom: 0; }
/* The game's name sits on the first stat row, not on the picture (Linh, 2026-09-16). */
.lekstat.rub .namn { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; margin-right: .3em; }
.lekstat.rub svg { margin-left: auto; }
.lekstat.rub .v { margin-left: 0; }

.lekmeta { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 6px; }
.lekstat { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
.lekstat b { font-weight: 600; color: var(--ink); }
.lekstat .v { margin-left: auto; font-weight: 600; }
.lekstat .t { color: var(--granite); font-weight: 500; }
.lekprog { height: 5px; border-radius: 3px; background: #e8e5dc; overflow: hidden; }
.lekprog i { display: block; height: 100%; border-radius: 3px; }
@media (prefers-color-scheme: dark) { .lekprog { background: #2b2f36; } }

/* ============================================================ 2. Ordskär menu */
/* The header sits on its own surface, not on the panorama: the sky behind it
   ranges from #04060E to #F2E8B8 across the ranks, so no scrim alpha can serve
   all eleven. A --natt band is dark in every theme. */
.spel .oshead { position: relative; z-index: 2; padding: 16px 18px 14px; color: #EAE5D9;
  background: rgba(10,14,18,.82); background: color-mix(in srgb, var(--natt, #12242f) 85%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; gap: 9px; }
.spel .oshead h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.9rem; line-height: 1; }
.spel .oshead .underrad { margin: 4px 0 0; font-size: .82rem; color: #DCE8F0; }
/* the scrim now only has to protect the controls over the water */
.spel .osskugga { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(0,0,0,.42) 78%, var(--natt, #12242f) 100%); }

.spel .osmeny { position: relative; z-index: 2; padding: 0 16px 18px; display: flex; flex-direction: column; gap: 11px; }
/* Fiska is the only filled button on the screen and comes first. */
.spel .osprimary { display: flex; align-items: center; gap: 13px; width: 100%; padding: 16px 18px;
  border: 0; border-radius: 16px; background: var(--ljus); color: var(--natt, #12242f); text-align: left; }
.spel .osprimary .titel { display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.1; }
.spel .osprimary .info { display: block; font-size: .8rem; font-weight: 500; opacity: .75; margin-top: 4px; }
.spel .osprimary .vaxt { flex: 1; }

/* Förena is an event, so it keeps gold — but it sits below the start button. */
.spel .osforena { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px;
  border: 1.5px solid #F2C14E; border-radius: 15px; background: rgba(242,193,78,.13); color: #F6DFA0; text-align: left; }
.spel .osforena .titel { display: block; font-size: .95rem; font-weight: 600; line-height: 1.2; }
.spel .osforena .info { display: block; font-size: .78rem; font-weight: 500; opacity: .75; margin-top: 3px; }

.spel .oskort { padding: 12px 14px; border-radius: 15px; background: rgba(234,229,217,.07);
  border: 1px solid rgba(234,229,217,.13); display: flex; flex-direction: column; gap: 11px; }
.spel .rad2 { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: #EAE5D9; }
.spel .rad2 .ico { flex: none; display: grid; place-items: center; }
.spel .rad2 .namn { flex: none; }
.spel .rad2 .stapel { flex: 1; height: 6px; border-radius: 3px; background: rgba(234,229,217,.16); overflow: hidden; }
.spel .rad2 .stapel i { display: block; height: 100%; border-radius: 3px; background: var(--ljus); }
.spel .rad2 .kvar { flex: none; font-size: .78rem; font-weight: 600; color: #C3D5E0; }

/* The species shelf: one tile per species, count as the primary number, tier
   marks on their own row. `🐟 12 ✦2 👑1` in one string was not scannable. */
.spel .artrubrik { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.spel .artrubrik .etikett { font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #A6BCCA; }
.spel .artrubrik .av { font-size: .76rem; font-weight: 500; color: #A6BCCA; }
.spel .artgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.spel .arttile { padding: 8px 4px 7px; border-radius: 12px; background: rgba(234,229,217,.07);
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
.spel .arttile b { font-size: .9rem; font-weight: 700; color: #EAE5D9; }
.spel .arttile .pips { display: flex; gap: 3px; align-items: center; min-height: 10px; }
.spel .arttile .pip { display: flex; align-items: center; gap: 2px; font-size: .62rem; font-weight: 700; }
.spel .arttile .pip.t2 { color: #5FC8E0; } .arttile .pip.t3 { color: #F2C14E; } .arttile .pip.t4 { color: #E8907A; } .arttile .pip.t5 { color: #B48CF0; }
/* Locked: dim the creature, never the text that says how to unlock it. */
.spel .arttile.last { background: rgba(234,229,217,.04); border: 1px dashed rgba(159,182,198,.35); }
.spel .arttile.last svg { opacity: .45; }
.spel .arttile.last b { font-size: .68rem; color: #BCD2E0; text-align: center; }

.spel .ossek { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.spel .ossek button { padding: 9px 13px; border-radius: 11px; border: 1px solid rgba(234,229,217,.2);
  background: transparent; color: #C3D5E0; font-size: .8rem; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.spel .ossek button.on { background: rgba(234,229,217,.06); color: #EAE5D9; }

/* ============================================================ 3. the run HUD */
.spel .oshud { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(0,0,0,.3); }
.spel .oshud .fiskar { display: flex; align-items: center; gap: 6px; }
.spel .oshud .fiskar b { font-size: 1.5rem; font-weight: 700; color: #EAE5D9; line-height: 1; }
.spel .ossvit { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  background: rgba(242,193,78,.18); font-size: .82rem; font-weight: 700; color: #F2C14E; }
.spel .ossvit .mult { color: #F6DFA0; opacity: .75; }
/* Lives are what you check under time pressure — the old ◆ glyphs were the
   least legible thing on screen. */
.spel .ossump { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.spel .ossump .etikett { font-size: .66rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #A6BCCA; }
.spel .ossump .pips { display: flex; gap: 5px; align-items: center; }
.spel .ostid { height: 5px; background: rgba(234,229,217,.12); }
.spel .ostid i { display: block; height: 100%; background: var(--ljus); transition: width .2s linear; }

/* ============================================================ 4. the end screen */
/* Four tiers, not eight equal blocks: outcome, rewards, total, detail. */
.spel .slut { display: flex; flex-direction: column; gap: 14px; }
.spel .sluthuvud { text-align: center; }
.spel .sluthuvud h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 3.2rem; line-height: 1; color: #EAE5D9; }
.spel .slutrekord { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 5px 11px;
  border-radius: 999px; background: rgba(242,193,78,.18); font-size: .82rem; font-weight: 700; color: #F2C14E; }
.spel .fangst { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 4px 0 2px; }

/* The two reward moments get colour and size; the statistics do not. */
.spel .belon { padding: 15px 16px; border-radius: 16px; display: flex; align-items: center; gap: 13px;
  background: color-mix(in srgb, var(--ljus) 18%, transparent); border: 1.5px solid color-mix(in srgb, var(--ljus) 45%, transparent); }
.spel .belon .etikett { font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ljus); }
.spel .belon .namn { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.15; color: #EAE5D9; margin-top: 4px; }
.spel .belon .info { font-size: .8rem; color: #C3D5E0; margin-top: 3px; }
.spel .belon.bygge { background: rgba(234,229,217,.07); border: 1px solid rgba(234,229,217,.14); }
.spel .belon.bygge .namn { font-family: var(--sans); font-size: 1.05rem; }

.spel .slutbp { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px;
  border-radius: 15px; background: color-mix(in srgb, var(--ljus) 14%, transparent); }
.spel .slutbp span { font-size: .88rem; font-weight: 500; color: #C3D5E0; }
.spel .slutbp b { font-size: 1.5rem; font-weight: 700; color: var(--ljus); }

.spel .brickor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.spel .bricka { padding: 11px 6px; border-radius: 12px; background: rgba(234,229,217,.05); text-align: center; }
.spel .bricka b { display: block; font-size: 1.15rem; font-weight: 700; color: #EAE5D9; }
.spel .bricka span { display: block; font-size: .72rem; color: #A6BCCA; margin-top: 5px; }

/* bp breakdown and missed words collapse — they are reference, not reward. */
.spel .slutmer { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: #A6BCCA; padding: 2px; }
.spel .slutmer summary { cursor: pointer; border-bottom: 1px dotted rgba(166,188,202,.5); list-style: none; }
.spel .slutmer summary::-webkit-details-marker { display: none; }
.spel .slutmer table { width: 100%; margin-top: 8px; font-size: .8rem; color: #C3D5E0; border-collapse: collapse; }
.spel .slutmer td { padding: 3px 0; }
.spel .bpchip { display: inline-flex; align-items: baseline; gap: 5px; margin: 3px 4px 0 0;
  padding: 4px 9px; border-radius: 999px; background: rgba(234,229,217,.07); font-size: .76rem; color: #C3D5E0; }

.spel .slutknappar { display: flex; gap: 9px; margin-top: 2px; }
.spel .slutknappar .igen { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px; border: 0; border-radius: 15px; background: var(--ljus); color: var(--natt, #12242f); font-size: 1.02rem; font-weight: 700; }
.spel .slutknappar .hem { padding: 15px 20px; border-radius: 15px; border: 1px solid rgba(234,229,217,.22);
  background: transparent; color: #EAE5D9; font-size: 1rem; font-weight: 500; }

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

/* Ordskär: the second meaning on the facit row (Linh, 2026-10-03) */
.spel #os-hint.facit .osandra { display: block; font-size: .85rem; opacity: .8; margin-top: 2px; }