/* Languify — movie & series listening practice.
   Built on assets/v3.css: every colour is a theme token, so light and dark both work.
   The stage is a fixed-ratio frame (it doubles as the recording canvas for the video),
   so its type is sized in container units and scales with the frame. */

/* page header (same as the games pages) */
.game-head{padding-block:clamp(28px,4vw,44px) clamp(20px,3vw,28px);border-bottom:var(--bw) solid var(--hair)}
.game-head .wrap{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.game-head h1{font-size:clamp(28px,4.4vw,44px)}
.game-head .lead{max-width:64ch}
.steps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.steps li{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;
          background:var(--cream);border:1px solid var(--hair);font-weight:700;font-size:15px}
.steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
         background:var(--blue);color:var(--on-blue);font-size:12px}

main.practice{padding-block:clamp(22px,3vw,36px) clamp(40px,6vw,72px)}

/* ---- controls ------------------------------------------------------- */
.toolbar{padding:clamp(14px,2vw,20px);display:flex;flex-direction:column;gap:12px;border-radius:var(--r-lg)}
.tool-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tool-row.extra{padding-top:12px;border-top:1px solid var(--hair)}
.tool-label{font-size:13px;font-weight:700;color:var(--quiet-ink);margin-inline-end:4px}
.pager{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto}
#count{direction:ltr;unicode-bidi:isolate;font-family:var(--en);font-weight:700;font-size:14px;color:var(--sec);min-width:52px;text-align:center}

.toolbar select{font:600 15px var(--ar);color:var(--ink);background:var(--page);border:1px solid var(--edge);
                border-radius:12px;min-height:44px;padding:8px 12px;max-width:100%;cursor:pointer}
#sourceFilter{flex:0 1 260px}
#scene{flex:1 1 300px;min-width:0}

.ctl{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 16px;
     font:700 14.5px var(--ar);line-height:1.2;color:var(--ink);background:var(--cream);
     border:1px solid var(--edge);border-radius:999px;cursor:pointer;white-space:nowrap;
     transition:background .16s ease,border-color .16s ease,color .16s ease}
.ctl:hover{background:var(--tint);border-color:var(--blue)}
.ctl.main{background:var(--ink);color:var(--page);border-color:var(--ink)}
.ctl.main:hover{background:var(--ink-hover)}
.ctl.quiet{font-weight:600;font-size:13.5px;color:var(--sec);min-height:40px;padding:7px 14px}
.ctl.on{background:var(--tint);border-color:var(--blue);color:var(--ink-blue)}
.ctl:disabled{opacity:.4;cursor:default;background:var(--cream);border-color:var(--edge)}
.ctl:focus-visible,.toolbar select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.upload input{display:none}

/* ---- the stage ------------------------------------------------------ */
#stage{--pen:var(--blue);position:relative;width:100%;aspect-ratio:1.25;margin-top:16px;overflow:hidden;
       container-type:inline-size;background:var(--cream);border:1px solid var(--hair);border-radius:var(--r-lg)}
.film{position:absolute;top:2.5%;left:10%;width:80%;aspect-ratio:2.4;background:#0B111B;border-radius:14px;overflow:hidden}
#video{width:100%;height:100%;object-fit:contain;display:block;background:#0B111B}
#video:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
#audioMask{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#0B111B;
           color:#C9DAE6;font-size:3cqw;font-weight:700}

#sourceName{position:absolute;top:47%;left:0;width:100%;margin:0;text-align:center;
            font:600 1.45cqw var(--en);color:var(--quiet-ink)}
#prompt{position:absolute;top:51.5%;width:100%;margin:0;text-align:center;font-size:2.8cqw;font-weight:700;color:var(--blue)}
.note{position:absolute;left:8%;top:59%;width:84%;padding:1.2cqw;text-align:center;z-index:2}
.note [dir=ltr]{font:700 3.6cqw/1.4 var(--en);color:var(--ink);letter-spacing:-.01em}
.note #meaning{font-size:2.1cqw;color:var(--sec);margin-top:1.4cqw;font-weight:600}
.example{top:81%;left:12%;width:76%}
.example [dir=ltr]{font-size:2.7cqw;color:var(--blue)}
.example small{display:block;font-size:1.4cqw;font-weight:700;color:var(--quiet-ink);margin-bottom:.4cqw}
.handle{display:block;width:fit-content;min-width:70px;margin:0 auto 6px;padding:2px 12px;border-radius:999px;
        font-size:12px;color:var(--quiet-ink);background:var(--tint-soft);border:1px dashed var(--edge);
        cursor:grab;user-select:none;touch-action:none}
.handle:active{cursor:grabbing}
#ink{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;touch-action:none}
[contenteditable]:focus{outline:1px dashed var(--blue);outline-offset:4px;border-radius:6px}

#status{text-align:center;min-height:24px;margin:12px 0 0;font-size:14.5px;font-weight:600;color:var(--blue)}
#hint{text-align:center;font-size:13px;color:var(--quiet-ink);margin:6px auto 0;max-width:70ch}

.next-step{margin-top:clamp(28px,4vw,44px);padding:clamp(20px,3vw,30px);border-radius:var(--r-lg);
           display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;background:var(--tint);border-color:transparent}
.next-step h2{font-size:clamp(20px,2.4vw,26px)}
.next-step p{color:var(--sec);margin-top:6px;max-width:52ch}

/* ---- recording mode (H): only the stage stays ----------------------- */
#restore{position:fixed;bottom:14px;left:14px;z-index:60;opacity:.35}
#restore:hover,#restore:focus-visible{opacity:1}
.recording .nav,.recording .game-head,.recording #tools,.recording #hint,.recording #status,
.recording .handle,.recording .next-step,.recording .foot-bar,.recording .skip{display:none}
.recording main.practice{padding-block:20px}
.recording .wrap{max-width:1240px}
.recording #stage{border-color:transparent}

/* ---- phones: a taller frame with fixed sizes ------------------------ */
@media (max-width:700px){
  .game-head{padding-block:22px 18px}
  .game-head .wrap{gap:10px}
  .steps li{font-size:14px;padding-block:4px}
  .toolbar{padding:12px;gap:8px}
  .toolbar select{min-height:42px;font-size:14px}
  .pager{margin-inline-start:0;width:100%;justify-content:space-between}
  .pager .ctl{flex:1}
  #sourceFilter,#scene{flex:1 1 100%}
  .tool-row.play{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .tool-row.play .ctl{padding-inline:6px;font-size:13px;min-height:42px}
  .tool-row.extra{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .tool-row.extra::-webkit-scrollbar{display:none}
  .ctl.quiet{flex:0 0 auto}
  .ctl{font-size:13.5px}
  #stage{aspect-ratio:auto;height:720px}
  .film{top:12px;left:3%;width:94%;aspect-ratio:16/9;border-radius:10px}
  #audioMask{font-size:20px}
  #sourceName{top:28%;font-size:12px;padding:0 10px}
  #prompt{top:32.5%;font-size:22px;padding:0 10px}
  .note{top:39%;left:3%;width:94%;padding:8px}
  .note [dir=ltr]{font-size:25px}
  .note #meaning{font-size:18px;margin-top:10px}
  .example{top:72%;left:4%;width:92%}
  .example [dir=ltr]{font-size:22px}
  .example small{font-size:13px}
  .handle{min-height:30px;line-height:24px}
  .next-step .btn{width:100%}
}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.ctl{transition:none}}