/* =====================================================================
   FEATURE · GAMES (Peli, #vG): speed round (.inv.speed card) and the recognition game
   (level tiles, chapters, question card, result). Mockup 05-game.
   The component library already draws .mast, .speed, .levels/.lvl, .legend, .chaps/.chap,
   .segbar, .postit, .opts/.opt, .fb, .diecut, .help. This file adds only the game parts.
   Role tokens only. Inline styles in the templates are data properties (--v, --n, --ch).
   Explanations, reviews and the technique sheet size from --t-body, so they follow the "Aa" setting.
   ===================================================================== */

/* ---------- speed round ---------- */
.speed .speed__t .ic{flex:none}
.speed__time{white-space:nowrap}
/* meta rows wrap instead of overflowing (long languages at 320 px) */
#spCard .speed__meta{flex-wrap:wrap;gap:var(--s1) var(--s3)}
#spIntro .speed__sit{font-weight:600;font-size:16.5px;line-height:1.45}
/* the line to judge keeps a fixed height, so the answer buttons never move between lines */
#spQ{min-height:128px}
.speed__q.is-m{font-size:clamp(21px,6.2vw,24px);line-height:1.12}
.speed__q.is-s{font-size:clamp(18px,5.3vw,21px);line-height:1.18}
.speed__acts .btn{gap:6px}
.sp-ic:empty{display:none}
.sp-ic{display:inline-grid;place-items:center}
.sp-ic .ic{width:18px;height:18px}
/* after an answer: the right key fills (check), a wrong pick keeps a calm signal edge (cross); never red */
.speed__acts .btn[aria-disabled="true"]{opacity:1}
.speed__acts .btn.is-key{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.speed__acts .btn.is-miss{border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.speed.is-flash .speed__acts .btn:not(.is-key):not(.is-miss){opacity:.45}
/* round result */
.sp-res{margin-top:var(--s2);font-weight:var(--w-black);font-size:clamp(48px,15vw,60px);line-height:.95;letter-spacing:-.03em}
.sp-res span{font-size:.42em;font-weight:var(--w-heavy);letter-spacing:-.01em;color:var(--fg-3)}
.sp-res__l{margin-top:var(--s2)}
.sp-end__t{margin-top:var(--s2)}
.sp-rev{margin-top:var(--s5);padding-top:var(--s4);border-top:var(--hair) solid var(--rule)}
.sp-rev__l{margin-top:var(--s2)}
.sp-rev__i{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule)}
.sp-rev__i:last-child{border-bottom:0}
.sp-rev__t{flex:1;min-width:0;font-weight:600;font-size:calc(var(--t-body) - 1px);line-height:1.4;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.sp-rev .chip{flex:none;margin-top:1px}
.sp-end{margin-top:var(--s5)}
@media (max-width:359px){
  #spIntro .speed__sit{font-size:15px}
  #spQ{min-height:150px}
  .speed__acts .btn{padding:0 6px;font-size:13px;letter-spacing:.03em}
}

/* ---------- recognition game: level tiles and chapters ---------- */
#vG .lvl{width:100%;-webkit-tap-highlight-color:transparent;transition:transform var(--d1) var(--ease-out)}
#vG .lvl:active{transform:scale(.95)}
#vG .lvl--now:active{transform:rotate(-3deg) scale(.95)}
#vG .lvl small{white-space:nowrap}
/* opens after the previous level: hairline edge, quiet number (the lock is only for Pro) */
.lvl--wait{border-color:var(--rule);color:var(--fg-3)}
/* Pro chapters for members: one disclosure row per 10 levels */
.gch{border-bottom:var(--hair) solid var(--rule)}
.gch__h{width:100%;border-bottom:0;font:inherit;color:inherit;text-align:left}
.gch__m{color:var(--fg-3);white-space:nowrap}
.gch__chev{transition:transform var(--d2) var(--ease-out)}
.gch__h[aria-expanded="true"] .gch__chev{transform:rotate(180deg)}
.gch__b{padding:var(--s1) 0 var(--s4)}

/* ---------- question card ---------- */
.gnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s3);padding-left:var(--s3);border-left:var(--bold) solid var(--rule-2)}
.gnote .note{flex:1 1 220px;padding:var(--s2) 0;color:var(--fg-2)}
.gnote__skip{flex:none}
.gq{margin-top:var(--s7)}
.gq__q--s{font-size:20px;line-height:1.3}
.gq__sit{font-weight:var(--w-strong);font-size:20px;line-height:1.35;letter-spacing:-.005em;text-wrap:pretty}
.gq__sit--s{font-size:18px}
/* technique names never split inside a word: when name and tag ("Oikein", "Valintasi") do not fit, the tag wraps */
#gO .opt{flex-wrap:wrap;row-gap:var(--s1)}
#gO .opt__t{flex:1 1 0;min-width:auto}
/* feedback after an answer (role=status) */
.gfb{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.gfb:empty{display:none}
#gE:not(:empty){margin-top:var(--s6)}
.gfb__top{padding:var(--s1) 0 var(--s1) var(--s1)}
.gfb__h{font-weight:var(--w-heavy);font-size:19px;line-height:1.25;color:var(--fg)}
.gfb .gfb__x{font-weight:500;font-size:var(--t-body);line-height:1.55;color:var(--fg)}
.gfb__vs{display:flex;flex-direction:column;gap:2px;padding-left:var(--s3);border-left:var(--bold) solid var(--signal)}
.gfb__vd{font-size:calc(var(--t-body) - 1px);line-height:1.45;color:var(--fg-2)}
.gfb__vd strong{font-weight:var(--w-strong);color:var(--fg)}
.gfb .safety,.gfb__r{align-self:stretch}
.gfb .safety{margin-top:var(--s1)}

/* ---------- level result ---------- */
.gsum__n{font-weight:var(--w-black);font-size:clamp(64px,20vw,88px);line-height:.9;letter-spacing:-.04em}
.gsum__n span{font-size:.42em;font-weight:var(--w-heavy);letter-spacing:-.01em;color:var(--fg-3)}
.grev{border-top:var(--bold) solid var(--rule-strong)}
.grev__i{padding:var(--s4) 0;border-bottom:var(--hair) solid var(--rule)}
.grev__q{font-weight:var(--w-heavy);font-style:italic;font-size:18px;line-height:1.35;letter-spacing:-.005em}
.grev__a{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s2);margin-top:var(--s2)}
.grev__a strong{font-weight:var(--w-heavy);font-size:16px}
.grev__x{margin-top:var(--s2);font-size:calc(var(--t-body) - 1px);line-height:1.5;color:var(--fg-2)}

/* ---------- technique sheet (uiSheet) ---------- */
.tlist{border-top:var(--hair) solid var(--rule)}
.tlist__i{padding:var(--s3) 0;border-bottom:var(--hair) solid var(--rule)}
.tlist__n{font-weight:var(--w-heavy);font-size:17px;line-height:1.25}
.tlist__d{margin-top:2px;font-size:calc(var(--t-body) - 1px);line-height:1.45;color:var(--fg-2)}

/* focus targets moved to by script (headings, quote, result) keep the ring for keyboard users only */
#gLv:focus:not(:focus-visible),#gQ:focus:not(:focus-visible),#gEx:focus:not(:focus-visible),#gRevT:focus:not(:focus-visible),#spEndT:focus:not(:focus-visible){outline:none}