/* Fredoka staat in deze repo en niet bij Google: een lettertype van een
   andere server blokkeert het tekenen van de pagina, en op een traag netwerk
   zie je dan niets. Licentie en herkomst: fonts/LEESMIJ.txt */
@font-face{
  font-family:'Fredoka';
  src:url('../fonts/fredoka-latin.woff2') format('woff2');
  font-weight:400 700;      /* één variabel bestand voor alle diktes */
  font-stretch:100%;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#241a5c;
  --bg2:#120b33;
  --card:rgba(255,255,255,.08);
  --card-line:rgba(255,255,255,.14);
  --ink:#fff;
  --ink-soft:rgba(255,255,255,.68);
  --accent:#ffd23f;
  --accent-ink:#3b2a00;
  --good:#3ddc97;
  --bad:#ff6b6b;
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{overscroll-behavior:none;background:var(--bg2)}   /* ook onder de pagina gekleurd */
body{
  margin:0;
  font-family:"Fredoka","Trebuchet MS",Verdana,system-ui,sans-serif;
  color:var(--ink);
  background:radial-gradient(120% 90% at 50% 0%,#4b2fa8 0%,var(--bg) 45%,var(--bg2) 100%);
  background-attachment:fixed;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
  overscroll-behavior:none;                 /* geen 'trek om te verversen' tijdens het spelen */
  -webkit-tap-highlight-color:transparent;  /* geen grijze flits bij tikken */
}

/* Knoppen zijn hier speelgoed, geen tekst: niet selecteerbaar, geen
   dubbeltik-zoom, en overal groot genoeg om met een kindervinger te raken. */
button{
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  -webkit-appearance:none; appearance:none;
}

/* sterretjes op de achtergrond */
.stars{position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(2px 2px at 20% 30%,#fff,transparent),
    radial-gradient(2px 2px at 70% 15%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 35% 75%,#fff,transparent),
    radial-gradient(2px 2px at 55% 45%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 10% 85%,#fff,transparent);
}

.screen{
  position:relative;
  max-width:520px;
  margin:0 auto;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
          max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  min-height:100vh;      /* oudere Safari */
  min-height:100dvh;     /* rekening houdend met de adresbalk die in- en uitschuift */
  display:flex;flex-direction:column;gap:16px;
}
[hidden]{display:none !important}

/* ---------- start ---------- */
.hero{text-align:center;padding:18px 0 4px}
h1{font-size:clamp(34px,9vw,50px);margin:0;font-weight:700;letter-spacing:-.5px}
h1 .x{color:var(--accent);margin:0 .12em;display:inline-block}
.tagline{margin:6px 0 0;color:var(--ink-soft);font-size:17px}

.card{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:var(--radius);
  padding:18px;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.card h2{margin:0 0 12px;font-size:17px;font-weight:600;color:var(--ink-soft)}
.card.small{font-size:15px}
.card.small summary{cursor:pointer;color:var(--ink-soft);font-weight:500}

/* ---------- de slinger ----------
   Hangt over de volle breedte van het venster, in swags zoals een echte
   slinger: op een telefoon één boog, op een breed scherm meerdere. Elk
   vlaggetje is een tafel. Grijs zolang je hem nog niet af hebt, in kleur
   zodra hij zit. Zo is de versiering niet zomaar versiering: het feestje
   groeit mee met wat je kent. */
.slinger{position:relative;width:100%;height:var(--slingerhoogte,64px);pointer-events:none;z-index:2}
.slinger-touw{position:absolute;inset:0;width:100%;height:100%}
.slinger-touw path{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2.5;stroke-linecap:round}
.vlaggetjes{position:absolute;inset:0}
.vlag{
  position:absolute;top:0;
  width:var(--vlagbreed,18px);height:calc(var(--vlagbreed,18px) * 1.35);
  margin-left:calc(var(--vlagbreed,18px) / -2);
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:rgba(255,255,255,.13);
  transform-origin:50% 0;
  transition:background .4s, opacity .4s;
}
.vlag.aan{
  animation:wapper 3.4s ease-in-out infinite;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
}
@keyframes wapper{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
/* net verdiend: het vlaggetje valt erbij */
.vlag.nieuw{animation:vlagErbij .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes vlagErbij{
  0%{transform:scale(0) rotate(-40deg);opacity:0}
  60%{transform:scale(1.3) rotate(8deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
body.speelt .slinger{display:none}   /* tijdens het rekenen niets dat afleidt */

/* ---------- ballonnen ----------
   Vijf stuks, langzaam, en alleen op het startscherm: tijdens het rekenen
   mag er niets bewegen dat je aandacht van de som afhaalt. */
.ballonnen{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ballonnen b{
  position:absolute;bottom:-90px;width:26px;height:33px;
  border-radius:50% 50% 46% 46% / 55% 55% 45% 45%;
  opacity:.13;animation:zweef linear infinite;
}
/* een glimlichtje maakt er een ballon van in plaats van een vlek */
.ballonnen b::before{
  content:'';position:absolute;top:18%;left:22%;width:7px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.55);
}
.ballonnen b::after{
  content:'';position:absolute;top:100%;left:50%;width:1px;height:30px;
  background:rgba(255,255,255,.3);
}
@keyframes zweef{
  from{transform:translateY(0) rotate(-4deg)}
  to{transform:translateY(-115vh) rotate(4deg)}
}
body.speelt .ballonnen{display:none}

/* ---------- de tafelkaart ----------
   Elke tegel is tegelijk een keuzeknop en een voortgangsmeter: het cijfer dat
   je kiest, de balk hoever je bent, en een ster als hij af is. */
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.tegel{
  position:relative;
  font:inherit;font-size:22px;font-weight:600;
  padding:11px 0 9px;border-radius:16px;cursor:pointer;min-height:62px;
  color:var(--ink);background:rgba(255,255,255,.06);
  border:2px solid transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:.15s transform,.15s background,.15s border-color;
}
.tegel:hover{background:rgba(255,255,255,.13)}
.tegel:active{transform:scale(.94)}
.tegel-nr{line-height:1}

/* het dunne balkje onder het cijfer */
.tegel-balk{display:block;width:60%;height:5px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.tegel-balk i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.tegel.staat-bezig .tegel-balk i{background:#ff9f1c}
.tegel.staat-goed  .tegel-balk i{background:var(--accent)}
.tegel-ster{font-size:13px;line-height:1;color:#ffd23f}

.tegel.staat-nieuw{opacity:.5}
.tegel.staat-top{
  background:linear-gradient(160deg,rgba(255,210,63,.22),rgba(255,159,28,.12));
  box-shadow:inset 0 0 0 1px rgba(255,210,63,.35);
}
/* gekozen om te oefenen */
.tegel[aria-pressed="true"]{
  background:var(--accent);color:var(--accent-ink);border-color:#fff4;opacity:1;
}
.tegel[aria-pressed="true"] .tegel-balk{background:rgba(0,0,0,.18)}
.tegel[aria-pressed="true"] .tegel-balk i{background:rgba(0,0,0,.45)}
.tegel[aria-pressed="true"] .tegel-ster{color:var(--accent-ink)}

.legenda{float:right;font-size:13px;font-weight:400;color:var(--ink-soft)}

/* ---------- waar ga je aan werken? ---------- */
.tips{display:flex;flex-direction:column;gap:10px}
.tip{
  font:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:13px;
  padding:14px 15px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--card-line);color:var(--ink);
  transition:.15s transform,.15s background;
}
.tip:hover{background:rgba(255,255,255,.13)}
.tip:active{transform:scale(.985)}
.tip-icoon{font-size:27px;line-height:1;flex:none}
.tip-woorden{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tip-woorden strong{font-size:16px;font-weight:600}
.tip-woorden span{font-size:14px;color:var(--ink-soft);line-height:1.4}
.tip-pijl{font-size:26px;color:var(--ink-soft);flex:none}
.tip-nieuw{background:linear-gradient(150deg,rgba(61,220,151,.20),rgba(255,210,63,.10));border-color:rgba(61,220,151,.35)}
.tip-oefenen{background:linear-gradient(150deg,rgba(255,159,28,.18),rgba(255,107,107,.08));border-color:rgba(255,159,28,.32)}

/* ---------- de cijfers onder je level ---------- */
.cijfers{display:flex;justify-content:space-around;margin-top:16px;padding-top:14px;border-top:1px solid var(--card-line)}
.cijfers div{display:flex;flex-direction:column;align-items:center;gap:2px}
.cijfers strong{font-size:21px}
.cijfers small{font-size:12px;color:var(--ink-soft)}

.chip-actions{display:flex;gap:16px;margin-top:12px}

.link{
  background:none;border:0;color:var(--ink-soft);font:inherit;font-size:15px;
  text-decoration:underline;cursor:pointer;padding:6px 0;
}
.link:hover{color:#fff}
.link.danger{color:#ffb4b4}

.level-card{padding:14px 18px}
.level-row{display:flex;align-items:center;gap:14px}
.level-badge{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:20px;
  background:linear-gradient(160deg,#ffd23f,#ff9f1c);color:var(--accent-ink);
  box-shadow:0 4px 14px rgba(255,159,28,.35);
}
.level-badge.small{width:30px;height:30px;font-size:14px}
.level-badge.big{width:70px;height:70px;font-size:30px}
.level-info{flex:1;min-width:0}
.level-info strong{display:block;font-weight:600;margin-bottom:6px}
.level-info small{color:var(--ink-soft);font-size:13px}
.bar{height:9px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffd23f,#3ddc97);transition:width .5s ease}

.big-btn{
  font:inherit;font-size:22px;font-weight:600;
  padding:18px;border:0;border-radius:20px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 8px 0 #c99b00;transition:.1s transform,.1s box-shadow;
}
.big-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #c99b00}
.big-btn:disabled{opacity:.5;box-shadow:none}
.big-btn.ghost{
  background:rgba(255,255,255,.1);color:var(--ink);
  box-shadow:0 6px 0 rgba(0,0,0,.25);font-size:18px;
}
.big-btn.ghost:active{box-shadow:0 2px 0 rgba(0,0,0,.25)}

.note{margin:0;text-align:center;color:var(--ink-soft);font-size:14px;min-height:20px}
.note.warn{color:#ffd9a0;background:rgba(255,159,28,.12);border-radius:14px;padding:10px 14px;line-height:1.5}
.toggle{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer}
.setting{padding:10px 0;border-top:1px solid var(--card-line);margin-top:6px}
.setting>span{display:block;margin-bottom:8px;color:var(--ink-soft)}
.setting select{
  font:inherit;font-size:15px;width:100%;padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.1);color:var(--ink);border:1px solid var(--card-line);
}
.setting select option{background:#241a5c;color:#fff}
.meter{height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:10px}
.meter-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#3ddc97,#ffd23f);transition:width .06s linear}
.hint{margin:8px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.hint.bad{color:#ffd9a0}
.hint.good{color:#9ff2c4}
.toggle input{width:20px;height:20px;accent-color:var(--accent)}

/* ---------- spelen ---------- */
.topbar{display:flex;align-items:center;gap:12px}
.level-mini{flex:1;display:flex;align-items:center;gap:8px}
.level-mini .bar{flex:1}
.score{font-weight:600;font-size:15px;color:var(--ink-soft);white-space:nowrap}
@media (max-width:360px){.score{font-size:13px}}
.icon-btn{
  font:inherit;font-size:20px;line-height:1;width:40px;height:40px;flex:none;
  border-radius:50%;border:1px solid var(--card-line);background:var(--card);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;
}
.icon-btn:active{transform:scale(.92)}

.question-wrap{display:flex;align-items:center;justify-content:center;margin-top:10px}
.question{
  font-size:min(clamp(64px,22vw,124px),20vh);font-weight:700;letter-spacing:1px;
  text-align:center;text-shadow:0 6px 24px rgba(0,0,0,.35);
}
.question.flash-good{animation:pop .45s ease}
.question.flash-bad{animation:shake .4s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.16);color:var(--good)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px);color:var(--bad)}60%{transform:translateX(10px);color:var(--bad)}}

.orb{
  width:92px;height:92px;margin:14px auto 0;padding:0;cursor:pointer;font:inherit;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),rgba(255,255,255,.06));
  border:2px solid var(--card-line);transition:.25s;
}
.orb span{width:34px;height:34px;border-radius:50%;background:var(--ink-soft);transition:.25s}
.orb.listening{border-color:var(--accent)}
.orb.listening span{
  background:var(--accent);
  transform:scale(var(--niveau,1));
  transition:transform .08s ease-out;
}
/* stil: rustig ademen, zodat je ziet dat hij nog luistert */
.orb.listening.stil{animation:pulse 1.6s ease-in-out infinite}
.orb.good{border-color:var(--good)} .orb.good span{background:var(--good)}
.orb.bad{border-color:var(--bad)} .orb.bad span{background:var(--bad)}
.orb.hidden{display:none}

/* Wachten: de som wordt voorgelezen, jij bent nog niet aan de beurt. */
.orb.wacht{border-color:var(--card-line);opacity:.55}
.orb.wacht span{display:none}
.orb.wacht::after{content:'🔊';font-size:34px;line-height:1}

/* Aan de beurt: de microfoon neemt op. Het bolletje wipt even op zodat je
   het ziet gebeuren, ook als je net niet naar het scherm keek. */
.orb.nubeurt{animation:aanDeBeurt .4s ease-out}
@keyframes aanDeBeurt{0%{transform:scale(.75);opacity:.4}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
.orb.tap{border-color:var(--accent);animation:breathe 2.2s ease-in-out infinite}
.orb.tap span{display:none}
.orb.tap::after{content:'🎤';font-size:38px;line-height:1}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,.4)}50%{box-shadow:0 0 0 22px rgba(255,210,63,0)}}

.status{text-align:center;color:var(--ink-soft);margin:10px 0 0;font-size:16px;min-height:24px;transition:color .2s}
.status.beurt{color:var(--accent);font-weight:600;font-size:19px}
.answer{
  text-align:center;font-size:34px;font-weight:700;min-height:46px;margin-top:4px;
  letter-spacing:2px;
}
.answer.good{color:var(--good)} .answer.bad{color:var(--bad)}

.keypad{display:none;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:18px}
.keypad.show{display:grid}
.keypad button{
  font:inherit;font-size:26px;font-weight:600;padding:16px 0;cursor:pointer;
  min-height:56px;
  border-radius:16px;border:1px solid var(--card-line);
  background:var(--card);color:var(--ink);
}
.keypad button:active{transform:scale(.95);background:rgba(255,255,255,.18)}
.keypad button.ok{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-size:20px}
.keypad button.alt{font-size:22px;color:var(--ink-soft)}
#btn-toggle-input{align-self:center;margin-top:auto}
/* Het speelscherm past altijd binnen het venster: nooit scrollen midden in
   een som, en de OK-toets blijft bereikbaar. */
#screen-play{
  gap:6px;
  height:100vh; height:100dvh;
  overflow:hidden;
}

/* ---------- timer ---------- */
.timer{
  height:12px;border-radius:99px;background:rgba(255,255,255,.12);
  overflow:hidden;margin:6px auto 0;max-width:340px;width:100%;
}
.timer-fill{
  height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#3ddc97,#ffd23f);
  transform-origin:left center;
}
.timer.warn .timer-fill{background:linear-gradient(90deg,#ffd23f,#ff9f1c)}
.timer.out .timer-fill{background:rgba(255,255,255,.22)}
.timer.done{opacity:.25}
.timer.wacht{opacity:.28}          /* de som wordt nog voorgelezen */

.bonus{
  text-align:center;font-size:20px;font-weight:600;color:var(--accent);
  min-height:26px;animation:pop-in .3s cubic-bezier(.2,1.5,.5,1);
}

/* ---------- resultaat ---------- */
#screen-done{justify-content:center}
.result{text-align:center;display:flex;flex-direction:column;gap:18px}
.result h2{font-size:26px;color:var(--ink);margin:0}
.result-numbers{display:flex;justify-content:center;gap:26px}
.result-numbers div{display:flex;flex-direction:column}
.result-numbers strong{font-size:34px}
.result-numbers small{color:var(--ink-soft)}
.tricky{color:var(--ink-soft);font-size:15px;line-height:1.7}
.tricky b{color:var(--accent);font-weight:600}

/* ---------- de ring die volloopt bij een level ----------
   Een badge die er ineens staat laat zien dát je een level hebt. Een ring die
   voor je ogen volloopt, overloopt en opnieuw begint laat zien dat je ergens
   naartoe werkt - dat is het gevoel dat we willen. */
.ring-wrap{position:relative;width:150px;height:150px;display:grid;place-items:center}
.ring{position:absolute;inset:0;width:100%;height:100%}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring-baan{stroke:rgba(255,255,255,.13)}
.ring-vul{
  stroke:var(--good);
  stroke-dasharray:326.7;
  stroke-dashoffset:326.7;
  transition:stroke-dashoffset .85s cubic-bezier(.35,.85,.4,1), stroke .3s;
}
.ring-vul.vol{stroke:var(--accent)}
.ring-wrap .level-badge{
  width:96px;height:96px;font-size:42px;
  transition:transform .35s cubic-bezier(.2,1.6,.4,1);
}
.ring-wrap .level-badge.wissel{animation:levelWissel .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes levelWissel{
  0%{transform:scale(1)}
  35%{transform:scale(.72) rotate(-8deg)}
  70%{transform:scale(1.22) rotate(4deg)}
  100%{transform:scale(1)}
}

/* schokgolf op het moment dat de ring vol is */
.golf{
  position:absolute;width:120px;height:120px;border-radius:50%;
  border:3px solid var(--accent);opacity:0;pointer-events:none;
}
.golf.uit{animation:golfUit .75s ease-out}
@keyframes golfUit{
  0%{transform:scale(.75);opacity:.85}
  100%{transform:scale(2.4);opacity:0}
}

#levelup-titel{font-size:28px}
#levelup-sub{font-size:16px;color:var(--ink-soft)}

/* ---------- feest ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.confetti i{position:absolute;font-size:26px;animation:fall linear forwards}
@keyframes fall{from{transform:translateY(-40px) rotate(0)}to{transform:translateY(105vh) rotate(540deg);opacity:.2}}

.overlay{
  position:fixed;inset:0;display:grid;place-items:center;z-index:30;
  background:rgba(10,6,30,.72);
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.overlay-card{
  background:linear-gradient(160deg,#3b2b8f,#241a5c);border:1px solid var(--card-line);
  border-radius:28px;padding:28px 34px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:10px;animation:pop-in .4s cubic-bezier(.2,1.4,.5,1);
  max-width:360px;width:100%;
}
.overlay-card strong{font-size:24px}
.overlay-sub{color:var(--accent);font-size:18px}
.overlay-vraag{margin:6px 0 0;font-size:20px;font-weight:600}
.overlay-knoppen{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:6px}
.overlay-knoppen .big-btn{width:100%}
.overlay-status{color:var(--ink-soft);font-size:14px;min-height:20px}
@keyframes pop-in{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- kleine en liggende schermen ----------
   Op een telefoon in landschap is er nauwelijks hoogte: dan de bol weg en
   alles compacter, zodat het toetsenbord altijd bereikbaar blijft. */
@media (max-height:700px){
  .hero{padding:6px 0 0}
  .question-wrap{margin-top:2px}
  .orb{width:64px;height:64px;margin:8px auto 0}
  .orb.tap::after{font-size:26px}
  .answer{font-size:28px;min-height:36px}
  .status{margin-top:6px;font-size:15px}
  .keypad{gap:7px;padding-top:10px}
  .keypad button{padding:10px 0;min-height:46px;font-size:22px}
  .big-btn{padding:14px;font-size:20px}
  .screen{gap:10px}
}
@media (max-height:460px){
  .orb,.bonus{display:none}
  .question{font-size:min(52px,16vh)}
  .timer{height:8px}
}
@media (max-width:360px){
  .chips{gap:6px}
  .chips button{font-size:18px;padding:10px 0}
  .card{padding:14px}
}
/* Liggend op een telefoon: som links, toetsen rechts. */
@media (max-height:520px) and (min-width:640px) and (orientation:landscape){
  #screen-play{
    display:grid;max-width:900px;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"top top" "vraag toetsen" "onder toetsen";
    align-content:start;column-gap:24px;
  }
  .topbar{grid-area:top}
  .question-wrap{grid-area:vraag;margin-top:0}
  .keypad{grid-area:toetsen;margin-top:0;padding-top:0}
  #screen-play .timer,#screen-play .status,#screen-play .answer,#btn-toggle-input{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}