/* play.css: the full-screen play mode (ws-play.js) and the /play launcher. Built for tablets first: big targets,
   no hover-only states, safe areas, portrait and landscape. Exercise cards stay white like paper in both themes. */
.fp-playing,.fp-playing body{overflow:hidden;overscroll-behavior:none}
.fp-playing ins.adsbygoogle,.fp-playing .google-auto-placed{visibility:hidden!important}
.fpp{position:fixed;inset:0;z-index:2147483600;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);height:100dvh;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  font-family:var(--body);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.fpp[hidden]{display:none}
.fpp button{touch-action:manipulation;font-family:inherit;color:inherit;cursor:pointer}
.fpp-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:64px}
.fpp-ico{flex:none;width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:20px;display:grid;place-items:center}
.fpp-t{flex:1;min-width:0;display:grid;line-height:1.2}
.fpp-t b{font:900 clamp(17px,2.6vw,24px) var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpp-t span{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpp-prog{display:flex;align-items:center;gap:10px;flex:none}
.fpp-prog b{font:800 17px var(--display);min-width:52px;text-align:right}
.fpp-pb{display:block;width:clamp(70px,18vw,200px);height:12px;border-radius:8px;background:var(--soft);overflow:hidden}
.fpp-pb i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--accent));border-radius:8px;transition:width .35s}
.fpp-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;padding:6px 16px 18px;align-items:center}
.fpp-q{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.fpp-card{background:#fff;color:#111;border-radius:26px;box-shadow:0 2px 0 rgba(0,0,0,.04),0 18px 40px -24px rgba(22,41,106,.55);padding:clamp(16px,3vw,36px);max-width:100%;color-scheme:light}
.fpp-wait{margin:auto;font:900 48px var(--display);color:var(--muted)}

/* question line */
.pq{display:flex;align-items:center;justify-content:center;gap:.32em;font:800 clamp(40px,9vmin,104px)/1.15 "Nunito",var(--display);white-space:nowrap;max-width:calc(100vw - 100px);overflow:hidden;font-variant-numeric:tabular-nums}
.pq.word{gap:.05em}
.pq.prow{gap:.28em}
.pt{display:inline-block}
.slot{font:inherit;min-height:1.32em;padding:0 .14em;border:.06em dashed #b9bfd6;border-radius:.22em;background:#f4f6fc;color:#2a5bd7!important;display:inline-grid;place-items:center;line-height:1.1;transition:background .15s,border-color .15s}
.slot.on{border-style:solid;border-color:#f26b1d;background:#fff4ec;box-shadow:0 0 0 .08em rgba(242,107,29,.18)}
.slot.good{border-style:solid;border-color:#1f9d55;background:#e4f6ea;color:#14713c!important;animation:fpp-bounce .45s}
.slot.bad{border-style:solid;border-color:#d1361b;background:#ffe3dd;color:#b3261e!important;animation:fpp-shake .4s}
.slot.rev{border-style:solid;border-color:#e09a00;background:#fff3cf;color:#8a5a00!important}
.slot.nudge{animation:fpp-shake .35s}
.slot svg{width:1.3em;height:1.3em;display:block}
.slot .clk{width:2.4em;height:2.4em}
.ph{display:inline-grid;place-items:center}
.ph svg[style]{width:auto!important;height:min(34vmin,300px)!important;max-width:58vw}
.ph .clk{width:min(42vmin,330px);height:auto}
.ph .frc{width:min(34vmin,250px);height:auto}
.ph .frb{width:min(56vw,440px);max-width:none;height:auto}
.ph .psh,.pk .psh{width:1.15em;height:1.15em;display:block}
.ph .tm{font:900 1em "Nunito",sans-serif;padding:0 .2em}

/* keypads */
.pk{display:grid;gap:12px;width:100%;max-width:520px;flex:none}
.pk.num{grid-template-columns:repeat(3,1fr)}
.pk.let{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));max-width:640px}
.pk.pick{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));max-width:640px}
.pk.quad{grid-template-columns:repeat(2,1fr);max-width:560px}
.key{height:clamp(58px,9.5vh,96px);border-radius:20px;border:1px solid var(--line);background:var(--surface);box-shadow:0 4px 0 var(--line);font:800 clamp(28px,4.4vh,42px) "Nunito",var(--display);display:grid;place-items:center;padding:4px;transition:transform .06s}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.key:disabled{opacity:.25;box-shadow:none}
.key.ok{background:#1f9d55;border-color:#1f9d55;color:#fff!important;box-shadow:0 4px 0 #157541}
.key.fn{color:var(--muted)!important;font-size:30px}
.pk.pick .key{height:clamp(68px,12vh,112px)}
.key.hk{background:#fff;color-scheme:light}
.pk.quad .key{height:auto;aspect-ratio:1.25;max-height:24vh}
.pk.quad .key .clk{width:auto;height:92%;max-width:92%}

/* tracing */
.fpp-q.tr .fpp-card{width:100%;max-width:1200px;padding:clamp(10px,2vw,24px)}
.trw{position:relative;touch-action:none}
.trw svg{width:100%!important;height:auto!important;display:block;max-height:58vh}
.trw canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.trt{display:flex;align-items:center;gap:12px;width:100%;max-width:1200px;flex-wrap:wrap}
.trt .grow{flex:1}
.cry{width:46px;height:46px;border-radius:50%;border:3px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--line)}
.cry.on{box-shadow:0 0 0 3px var(--c);transform:scale(1.08)}

/* buttons on end screens and tools */
.fpp-btn{font:800 clamp(17px,2.4vh,22px) var(--display);background:var(--accent);color:var(--accent-ink)!important;border:0;border-radius:18px;padding:16px 26px;min-height:58px;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000)}
.fpp-btn.alt{background:var(--surface);color:var(--ink)!important;border:1px solid var(--line);box-shadow:0 4px 0 var(--line)}
.fpp-btn:disabled{opacity:.4}
.fpp-btn:active{transform:translateY(3px)}

/* maze */
.mzq{width:100%}
.mzc{width:100%;height:100%;display:flex;padding:10px}
.mzs{width:100%;height:100%;touch-action:none;display:block}
.mzw2{fill:none;stroke:#18203a;stroke-width:1.15;stroke-linecap:square}
.mzt{fill:none;stroke:#f26b1d;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.mzh,.mze{font-size:8.2px;text-anchor:middle}

/* sudoku */
.sdq{width:100%}
.sdp{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);width:min(94vw,58vh);aspect-ratio:1;border:4px solid #18203a;border-radius:10px;overflow:hidden;background:#fff;color-scheme:light}
.sc{border:0;border-right:1px solid #c9cddc;border-bottom:1px solid #c9cddc;background:#fff;font:800 clamp(18px,calc(52vmin / var(--n)),64px) "Nunito",sans-serif;color:#2a5bd7!important;padding:0;display:grid;place-items:center}
.sc.br{border-right:3px solid #18203a}
.sc.bb{border-bottom:3px solid #18203a}
.sc.giv{color:#18203a!important}
.sc.hl{background:#f2f4fb}
.sc.eq{background:#dfe8ff}
.sc.on{background:#ffe2cc}
.sc.good{animation:fpp-bounce .45s;background:#e4f6ea}
.sc.bad{background:#ffe3dd;color:#b3261e!important;animation:fpp-shake .4s}
.pk.sdk-k{grid-template-columns:repeat(var(--k),1fr);max-width:760px}
.pk.sdk-k .key{height:clamp(54px,8vh,84px)}

/* word search */
.wsq{flex-direction:column;gap:14px;width:100%}
.wsp-l{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:900px;align-items:center}
.wsp-l b{font:800 15px var(--display);color:var(--muted);width:100%;text-align:center}
.wsp-l span{font:800 clamp(16px,2.2vh,22px) "Nunito",sans-serif;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 12px}
.wsp-l span.got{text-decoration:line-through;opacity:.7}
.wsc{padding:10px}
.wsp{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);width:min(92vw,60vh);aspect-ratio:1;touch-action:none}
.wsp span{display:grid;place-items:center;font:800 clamp(14px,calc(56vmin / var(--n)),50px) "Nunito",sans-serif;border-radius:8px}
.wsp span.sel{background:#ffd6bd!important}
.f0{background:#cfe0ff!important}.f1{background:#d7f3dc!important}.f2{background:#ffe6a6!important}.f3{background:#f8d3ea!important}.f4{background:#d9d4ff!important}.f5{background:#c9f0ee!important}
.wsp-l span.f0,.wsp-l span.f1,.wsp-l span.f2,.wsp-l span.f3,.wsp-l span.f4,.wsp-l span.f5{color:#111}

/* end screen and effects */
.fpp-end{margin:auto;text-align:center;display:grid;gap:8px;justify-items:center}
.fpp-big{font-size:clamp(80px,16vh,140px);line-height:1;animation:fpp-bounce .6s}
.fpp-end h2{font:900 clamp(32px,5vh,52px) var(--display);margin:6px 0 0}
.fpp-st{font:800 clamp(24px,3.6vh,34px) var(--display);margin:0 0 14px}
.fpp-acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.fpp-fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.fpp-fx i{position:absolute;top:-16px;width:11px;height:16px;border-radius:3px;animation:fpp-fall linear forwards}
.fpp-pop{position:absolute;left:50%;top:38%;font-size:72px;transform:translate(-50%,-50%);animation:fpp-pop .9s ease-out forwards}
@keyframes fpp-fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes fpp-pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-140%) scale(.9)}}
@keyframes fpp-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes fpp-bounce{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fpp *{animation:none!important;transition:none!important}}

/* landscape tablets: question on the left, keys on the right */
@media (orientation:landscape) and (min-width:700px){
  .fpp-main:has(>.pk){flex-direction:row;align-items:stretch;padding-bottom:20px}
  .fpp-main:has(>.pk)>.pk{width:min(40vw,440px);align-content:center}
  .fpp-main:has(>.pk.let)>.pk,.fpp-main:has(>.pk.pick)>.pk{width:min(44vw,520px)}
  .pk.num .key{height:clamp(58px,15vh,104px)}
  .pq{max-width:calc(56vw - 60px)}
  .sdp{width:min(56vw,78vh)}
  .pk.sdk-k{grid-template-columns:repeat(3,1fr);width:min(30vw,330px)!important}
  .pk.sdk-k .key{height:clamp(58px,13vh,100px)}
  .wsq{flex-direction:row-reverse;align-items:center}
  .wsp-l{flex-direction:column;flex-wrap:nowrap;max-height:80vh;overflow:auto;width:min(28vw,280px)}
  .wsp{width:min(60vw,76vh)}
}
@media (max-width:560px){
  .fpp-t span{display:none}
  .fpp-pb{width:60px}
  .fpp-main{padding:4px 10px 12px;gap:10px}
  .key{border-radius:16px}
}

/* ---------- the /play launcher page ---------- */
.pl-body{min-height:100dvh}
.mast.pl-head{padding-block:12px 54px}
.pl-head h1{margin:14px 0 4px}
#play{display:grid;gap:22px}
.pl-top{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.pl-set{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:flex-end}
.pl-f{display:grid;gap:5px}
.pl-f>span{font:700 11px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pl-chips{display:flex;gap:6px;flex-wrap:wrap}
.pl-chips button{min-width:48px;height:48px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:800 17px var(--display);cursor:pointer;touch-action:manipulation}
.pl-chips button.on{background:var(--hero2);border-color:var(--hero2);color:#fff}
.pl-f select,.pl-f input{height:48px;font:16px var(--body);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:0 12px}
.pl-name{margin-top:12px;max-width:340px}
.pl-stars{font:900 24px var(--display);white-space:nowrap}
.pl-g h2{font-size:22px;margin:0 0 10px}
.pl-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pl-tile{display:grid;justify-items:center;align-content:center;gap:8px;min-height:132px;border-radius:22px;border:0;padding:14px 10px;cursor:pointer;color:#18203a;touch-action:manipulation;box-shadow:0 4px 0 rgba(0,0,0,.08);transition:transform .08s}
.pl-tile:active{transform:translateY(3px) scale(.98)}
.pl-tile i{font:normal 900 44px/1 "Nunito",sans-serif}
.pl-tile b{font:800 16px/1.2 var(--display);text-align:center}
.pl-tile.g-math{background:#ffe3cf}
.pl-tile.g-puzzles{background:#d9e5ff}
.pl-tile.g-words{background:#dff3e2}
.pl-tile.g-trace{background:#fff0c2}
.pl-tile.g-read{background:#f3e1ff}
/* kids, screen time and the grown-ups panel */
.pl-setup{display:flex;gap:14px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(120deg,#fff4ec,#eef3ff);color:#1b1d33;border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.pl-setup b{font:900 19px var(--display)}.pl-setup p{margin:4px 0 0;max-width:640px;color:#4a5170}
.pl-who{display:grid;gap:6px;width:100%}
.pl-who>span{font:700 11px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pl-who .pl-chips button{height:56px;display:inline-flex;align-items:center;gap:8px;font-size:19px}
.pl-who .pl-chips i{font-style:normal;font-size:26px}
.pl-who .pl-chips small{font:700 14px var(--body);opacity:.7}
.pl-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pl-time{font:800 18px var(--display);white-space:nowrap;color:var(--muted)}
.pl-gear{height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--muted);font:700 14px var(--body);cursor:pointer}
.pl-cover{position:fixed;inset:0;z-index:2147483646;background:rgba(14,18,34,.72);display:grid;place-items:center;padding:16px;overflow:auto}
.pl-cover[hidden]{display:none}
.pl-box{background:#fff;color:#1b1d33;border-radius:26px;padding:24px;max-width:560px;width:100%;display:grid;gap:14px;justify-items:center;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);color-scheme:light}
.pl-box h2{margin:0;font:900 26px var(--display)}.pl-box p{margin:0;font-size:17px;color:#4a5170}
.pl-box .key{color:#1b1d33;background:#fff;border-color:#e2e4ef;box-shadow:0 4px 0 #e2e4ef}
.pl-box .pk.num{max-width:340px}.pl-box .pk.num .key{height:60px;font-size:28px}
.pl-big{font-size:64px;line-height:1}
.pl-in{min-width:180px;height:56px;border:2px solid #e2e4ef;border-radius:14px;font:900 30px var(--display);display:grid;place-items:center;letter-spacing:.12em}
.pl-in.nudge{animation:fpp-shake .4s;border-color:#d1361b}
.pl-setb{justify-items:stretch;text-align:left;max-width:720px}
.pl-setb .pl-f input,.pl-setb .pl-f select,.pl-kid input,.pl-kid select{height:46px;font:16px var(--body);color:#1b1d33;background:#f6f6fb;border:1.5px solid #e2e4ef;border-radius:12px;padding:0 10px}
.pl-setb .pl-f>span,.pl-kid label span{font:700 11px var(--body);letter-spacing:.07em;text-transform:uppercase;color:#5d6480}
.pl-setb small{color:#5d6480}
.pl-kids{display:grid;gap:10px}
.pl-kid{display:grid;grid-template-columns:auto 1.4fr .7fr 1.2fr auto;gap:8px;align-items:end}
.pl-kid label{display:grid;gap:4px;min-width:0}.pl-kid input,.pl-kid select{width:100%}
.pl-av{font-size:30px;line-height:46px}
.pl-del{width:46px;height:46px;border-radius:12px;border:1.5px solid #e2e4ef;background:#fff;color:#b3261e;font-size:18px;cursor:pointer}
.pl-setb .fpp-acts{justify-content:flex-start}
@media (max-width:560px){.pl-kid{grid-template-columns:auto 1fr auto}.pl-kid label:nth-of-type(2),.pl-kid label:nth-of-type(3){grid-column:span 1}}
/* reading and riddles */
.qz{flex:1;min-height:0;width:100%;max-width:880px;display:flex;flex-direction:column;gap:14px;align-items:stretch;justify-content:center}
.qz-txt{position:relative;overflow:auto;min-height:0;font:500 clamp(19px,2.6vmin,26px)/1.55 "Andika","Nunito",var(--body);-webkit-user-select:text;user-select:text}
.qz>.qz-txt{flex:0 1 auto}
.qz-txt h3{font:900 1.15em "Nunito",var(--display);margin:0 52px .5em 0}
.qz-txt p{margin:0 0 .6em}
.qz>.fpp-btn{align-self:center}
.qz-back{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px 16px;max-height:38vh;overflow:auto}
.qz-back summary{font:800 17px var(--display);cursor:pointer}
.qz-back .qz-txt{font-size:18px;padding-top:8px}
.qz-q{position:relative;font:800 clamp(22px,3.6vmin,36px)/1.3 "Nunito",var(--display)}
.qz-q p{margin:0 52px 0 0}
.qz-say{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid #d9dcea;background:#f4f6fc;font-size:20px;display:grid;place-items:center}
.qz-o{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.qz-b{height:auto;min-height:clamp(58px,9vh,88px);font-size:clamp(20px,3vmin,30px);line-height:1.2;padding:10px 14px;text-align:center}
.qz-b.good{border-color:#1f9d55;background:#e4f6ea;color:#14713c;animation:fpp-bounce .45s}
.qz-b.bad{border-color:#d1361b;background:#ffe3dd;color:#b3261e;animation:fpp-shake .4s}
.qz-b.rev{border-color:#e09a00;background:#fff3cf;color:#8a5a00}
.pl-inst{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px dashed var(--line);border-radius:18px;padding:14px 16px}
.pl-inst img{border-radius:12px;flex:none}
.pl-inst div{flex:1;min-width:220px}
.pl-inst b{font:800 17px var(--display)}
.pl-inst p{margin:2px 0 0;color:var(--muted);font-size:14.5px}
.pl-about{font-size:14.5px;color:var(--muted)}
.pl-about h2{font-size:18px;color:var(--ink);margin:0 0 6px}
@media (max-width:560px){.pl-tiles{grid-template-columns:repeat(2,1fr)}.pl-tile{min-height:116px}}