/* =====================================================================
   Languify — v3 adjustments for the test and the games (2026-10-09)

   level.html and games/* keep their own CSS; this file is loaded after
   it and brings their components onto the v3 surface: no hard offset
   shadows, hairline edges instead of 2px ink borders, and selected
   states that stay readable in the dark theme. Behaviour is untouched —
   presentation only. Delete this file and the games still work.
   ===================================================================== */

/* ---- no more offset shadow blocks --------------------------------- */
.chip,.opt,.wtile,.tile,.mode,.bar,.radio-row label,.overlay .box,
.prof-row .track,.ladder li,.card,.btn{box-shadow:none}

/* ---- 2px ink outlines become quiet edges -------------------------- */
.chip,.opt,.wtile,.tile,.mode,.bar,.radio-row label,.overlay .box,
.prof-row .track,.slot.filled,.opt .k{border-color:var(--edge)}
.bar i,.prof-row .track i{border-inline-end-color:var(--page)}

/* ---- hover and press --------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .mode:hover{transform:translateY(-3px);box-shadow:var(--lift)}
  .chip:hover,.tile:hover,.opt:hover:not(:disabled),.wtile:hover{background:var(--tint)}
}
.mode:hover{transform:translateY(-3px)}
.tile:active,.wtile:active,.opt:active{transform:scale(.97);box-shadow:none}

/* ---- selected / correct / used ------------------------------------ */
.chip[aria-pressed="true"]{background:var(--mint-pale);border-color:var(--mint);color:var(--ink)}
.chip .mark-on{background:var(--mint);color:var(--page)}
.radio-row label:has(input:checked){background:var(--tint);border-color:var(--blue)}
.tile.used{background:var(--sky);color:var(--ink);transform:none;opacity:.9}
.wtile.in{background:var(--tint);border-color:var(--blue)}
.opt.right{background:var(--mint-pale);border-color:var(--mint);color:var(--ink);transform:none}
.opt.right .k{background:var(--mint);border-color:transparent;color:var(--page)}
.opt.wrong{background:transparent;border-style:dashed;border-color:var(--edge);color:var(--sec);transform:none}

/* ---- the end-of-game overlay keeps one dark ground in both themes -- */
.overlay{background:var(--ground);color:#FFFDF7}
.overlay .box{background:var(--cream);color:var(--ink);box-shadow:var(--lift-strong);border-color:var(--hair)}
.overlay p{color:var(--sec)}

/* ---- the test: result panel, bars, milestone ladder --------------- */
.score .flag{background:var(--tint);color:var(--ink-blue);border:0}
.score .flag.bad{background:var(--cream);color:var(--ink)}
.bar i{background:var(--blue)}
.prof-row .track i{background:var(--blue)}
.prof-row .track i.full{background:var(--mint)}
.ladder li{border-color:var(--hair);background:var(--cream)}
.ladder li.reached{border-color:transparent;background:var(--mint-pale)}
.ladder li.reached .lv,.ladder li.reached .lt{color:var(--ink)}
.ladder li.range{border-color:var(--blue);border-style:solid;background:var(--tint)}
.ladder li.range .lv{color:var(--ink-blue)}
.ladder .lv{color:var(--quiet-ink)}
.ladder .lt small a{color:var(--quiet-ink);text-decoration-color:var(--quiet)}

/* ---- dashed boxes and details ------------------------------------- */
details.more{border-color:var(--hair)}
.how,.measures,.box{border-color:var(--hair)}