:root{
  --navy:#14214d; --navy2:#22397f; --gold:#f2c14e; --gold-d:#b98a1d; --cream:#fff8e8;
  --sky:#dfeefc; --ink:#1a2350; --green:#2e9d6a; --red:#e0664f;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html,body{touch-action:manipulation;margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:"Avenir Next","Avenir","Segoe UI","Helvetica Neue",Arial,"Arial Hebrew",sans-serif;color:var(--ink);
  background:radial-gradient(ellipse at 50% 0%,#fffdf6 0%,var(--cream) 40%,var(--sky) 100%);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
[dir=rtl] body, html[dir=rtl] body{font-family:"Arial Hebrew","Avenir Next","Segoe UI",Arial,sans-serif}
button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:4px solid #3b82f6;outline-offset:3px}
[hidden]{display:none!important}
.app{position:fixed;inset:0;display:flex;flex-direction:column;
  padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 10px)}
.app.playing{padding-bottom:calc(var(--safe-b) + 8px)}
.topbar{display:flex;align-items:center;gap:12px;min-height:60px;flex:0 0 auto;position:relative;z-index:11}
.app.playing .topbar{min-height:50px;margin-bottom:8px}
.app.playing .icon-btn{width:50px;height:50px;border-radius:16px}
.app.playing .pill-btn{height:50px}
.app.playing .score,.app.playing .gems{height:50px;padding-top:0;padding-bottom:0}
.app.playing .footer{display:none}
.spacer{flex:1}
.icon-btn{width:56px;height:56px;border-radius:18px;background:#fff;box-shadow:0 3px 0 #c9d6ea,0 6px 14px rgba(20,33,77,.12);display:grid;place-items:center}
.icon-btn svg{width:30px;height:30px;fill:var(--navy);stroke:var(--navy)}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #c9d6ea}
#muteBtn .snd-off{display:none}
#muteBtn[aria-pressed=true] .snd-on{display:none}
#muteBtn[aria-pressed=true] .snd-off{display:block}
.pill-btn{height:56px;padding:0 22px;border-radius:28px;background:#fff;font-weight:700;font-size:20px;color:var(--navy);
  box-shadow:0 3px 0 #c9d6ea,0 6px 14px rgba(20,33,77,.12)}
.pill-btn:active{transform:translateY(2px)}
.pill-btn.light{background:rgba(255,255,255,.9)}
.score{font-size:24px;font-weight:700;background:#fff;border-radius:28px;padding:10px 22px;box-shadow:0 3px 0 #c9d6ea;display:flex;align-items:center;gap:6px}
/* diamond counter */
.gems{display:flex;align-items:center;gap:6px;height:56px;padding:0 18px 0 10px;border-radius:28px;background:#fff;box-shadow:0 3px 0 #c9d6ea,0 6px 14px rgba(20,33,77,.12);
  font-size:24px;font-weight:800;color:#1857b8;white-space:nowrap;font-variant-numeric:tabular-nums}
.gem-ic{width:32px;height:32px;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(13,60,134,.35))}
.gems.pop{animation:gempop .45s cubic-bezier(.3,1.8,.5,1)}
.gems.pop .gem-ic{animation:gemspin .45s ease}
@keyframes gempop{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes gemspin{0%{transform:rotate(0)}40%{transform:rotate(-14deg) scale(1.15)}100%{transform:rotate(0)}}
.fly-gem{position:fixed;z-index:30;pointer-events:none;will-change:transform;filter:drop-shadow(0 4px 6px rgba(13,60,134,.45))}
.fly-gem svg{width:100%;height:100%;display:block}
#langBtn .short{display:none}
.round .short{display:none}
.score b{color:var(--navy2)}
main{flex:1 1 auto;min-height:0;position:relative}
.screen{position:absolute;inset:0}
/* start screen */
.start{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:min(2.2vh,18px);padding:8px}
.logo-star{width:min(14vh,110px);height:auto;filter:drop-shadow(0 6px 10px rgba(185,138,29,.35))}
h1{margin:0;font-size:clamp(40px,7.5vmin,78px);line-height:1.05;color:var(--navy);letter-spacing:.5px;font-weight:800}
.subtitle{margin:0;font-size:clamp(20px,3vmin,28px);color:#41507f;font-weight:600}
.tile-strip{display:flex;gap:min(2vmin,16px);margin:6px 0}
.tile-strip img{width:min(18vmin,22vh,160px);height:min(18vmin,22vh,160px);border-radius:16px;border:4px solid #fff;box-shadow:0 6px 16px rgba(20,33,77,.18);object-fit:cover}
.tile-strip img:nth-child(odd){transform:rotate(-4deg)} .tile-strip img:nth-child(even){transform:rotate(3deg) translateY(4px)}
.levels{display:flex;gap:min(4vmin,28px);flex-wrap:wrap;justify-content:center}
.big-btn{min-width:min(38vw,250px);padding:18px 30px;border-radius:28px;font-size:clamp(28px,4.4vmin,40px);font-weight:800;color:#fff;
  display:flex;flex-direction:column;align-items:center;line-height:1.1}
.big-btn small{font-size:.5em;font-weight:600;opacity:.92;margin-top:4px}
.big-btn.easy{background:linear-gradient(#3fbf86,#2e9d6a);box-shadow:0 7px 0 #1f7a50,0 12px 22px rgba(46,157,106,.35)}
.big-btn.hard{background:linear-gradient(#3a5cc6,#22397f);box-shadow:0 7px 0 #14214d,0 12px 22px rgba(34,57,127,.35)}
.big-btn.again{background:linear-gradient(#f6cf62,#e3a92a);color:var(--navy);box-shadow:0 7px 0 #a8761a,0 12px 22px rgba(185,138,29,.35)}
.big-btn:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
/* board */
.game{display:flex;align-items:center;justify-content:center}
.board{display:grid;gap:var(--gap,12px);grid-template-columns:repeat(var(--cols,4),var(--card,120px));grid-auto-rows:var(--card-h,var(--card,120px))}
.card{position:relative;width:100%;height:100%;perspective:900px;background:none;padding:0;border-radius:var(--r,16px)}
.card .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.35,.5,1)}
.card.flipped .inner,.card.matched .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:var(--r,16px);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.back{background:#3a2a1c url(cardback-zebra.jpg) center/cover no-repeat;box-shadow:0 var(--sh,5px) 0 #2a1d12,0 calc(var(--sh,5px) + 3px) 10px rgba(20,33,77,.25)}
.front{transform:rotateY(180deg);background:#fff;border:var(--bw,3px) solid #fff;box-shadow:0 var(--sh,5px) 0 #c9b98d,0 calc(var(--sh,5px) + 3px) 10px rgba(20,33,77,.2)}
.front img{width:100%;height:100%;object-fit:contain;display:block;border-radius:calc(var(--r,16px) - var(--bw,3px))}
.card:active:not(.flipped):not(.matched) .inner{transform:scale(.96)}
.card.matched .front{border-color:var(--gold);box-shadow:0 0 0 2px #fff3cf,0 var(--sh,5px) 0 var(--gold-d),0 0 16px rgba(242,193,78,.75)}
.card.matched{animation:pop .6s ease .35s}
.card.nope .inner{animation:shake .45s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:rotateY(180deg) translateX(0)}25%{transform:rotateY(180deg) translateX(-6px)}75%{transform:rotateY(180deg) translateX(6px)}}
/* footer */
.footer{flex:0 0 auto;text-align:center;padding:6px 8px 2px;font-size:clamp(13px,1.9vmin,17px)}
.footer a{color:#4a5684;text-decoration:none;font-weight:600}
.footer a:active{color:var(--navy)}
/* win */
.win{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(20,33,77,.55);animation:fade .35s ease}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.win-card{z-index:1}
.win-card{position:relative;background:linear-gradient(#fffdf5,#fff3d6);border:6px solid var(--gold);border-radius:36px;padding:28px 44px 34px;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.35);max-width:min(560px,90vw);animation:bounce .7s cubic-bezier(.3,1.6,.5,1)}
.win-star{width:96px;height:auto;margin-top:-80px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.win h2{margin:6px 0 4px;font-size:clamp(48px,9vmin,84px);color:var(--navy);font-weight:900;line-height:1.05;text-shadow:0 3px 0 var(--gold),0 7px 14px rgba(20,33,77,.25)}
.win h2 .w{display:inline-block;animation:drop .95s cubic-bezier(.25,1.7,.45,1) both,hop 1.5s ease-in-out infinite;animation-delay:calc(.2s + var(--i)*.2s),calc(1.4s + var(--i)*.2s)}
@keyframes drop{0%{transform:translateY(-160px) scale(.3) rotate(-10deg);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
@keyframes hop{0%,55%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-12px) scale(1.06)}}
.win .earned{font-weight:800;color:#1857b8;margin-top:10px;font-size:clamp(22px,3.4vmin,30px)}
.win .earned b{color:var(--navy);font-size:1.1em}
.gem-inline{width:1.15em;height:1.15em;vertical-align:-.2em;margin:0 .08em}
.win .treasure{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:6px 18px 6px 10px;border-radius:24px;background:linear-gradient(#fff1b8,#f6cf62);
  color:#6b3d0a;font-weight:800;box-shadow:0 3px 0 #c99a2e;animation:bounce .6s cubic-bezier(.3,1.6,.5,1) 1.6s both}
.win .treasure svg{width:1.6em;height:1.4em;flex:0 0 auto}
#confetti{z-index:2}
.win p{margin:4px 0;font-size:clamp(22px,3.4vmin,30px);font-weight:600;color:#41507f}
.win .moves{font-size:20px}
.win-buttons{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:20px}
@keyframes fade{from{opacity:0}}
@keyframes bounce{from{transform:scale(.6);opacity:0}}
html[dir=rtl] .tile-strip{flex-direction:row-reverse}
/* ---------- phones (iPad untouched: these only apply below 600px wide or 540px tall) ---------- */
.score{white-space:nowrap;direction:ltr}
@media (max-width:600px), (max-height:540px){
  .topbar{min-height:48px;gap:8px;padding:0 2px}
  .icon-btn,.app.playing .icon-btn{width:44px;height:44px;border-radius:14px}
  .icon-btn svg{width:26px;height:26px}
  .pill-btn,.app.playing .pill-btn{height:44px;padding:0 14px;font-size:17px;border-radius:22px}
  .score,.app.playing .score{font-size:18px;padding:0 12px;height:44px;display:flex;align-items:center;gap:5px;border-radius:22px}
  .gems,.app.playing .gems{height:44px;font-size:18px;padding:0 12px 0 7px;gap:4px;border-radius:22px}
  .gem-ic{width:26px;height:26px}
  .app{padding:calc(var(--safe-t) + 4px) calc(var(--safe-r) + 4px) calc(var(--safe-b) + 4px) calc(var(--safe-l) + 4px)}
  .app.playing{padding-bottom:calc(var(--safe-b) + 4px)}
  .app.playing .topbar{min-height:44px;gap:5px;margin-bottom:5px}
  .app.playing #langBtn{padding:0 11px}
  .app.playing #langBtn .full{display:none}
  .app.playing #langBtn .short{display:inline}
  .app.playing .score .lbl{display:none}
  .app.playing .topbar{gap:4px}
  .app.playing .score{gap:1px;padding:0 10px}
  .app.playing .gems{padding:0 10px 0 6px}
  .footer{padding:0 6px;font-size:12px;line-height:1.25}
  .footer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px}
  /* during a game the cards get the whole screen; the credit line shows on the start screen */
  .app.playing .footer{display:none}
  .start{gap:min(2vh,14px);padding:4px}
  .logo-star{width:min(11vh,84px)}
  h1{font-size:clamp(32px,10vw,48px)}
  .subtitle{font-size:clamp(16px,4.6vw,21px);max-width:24em}
  .tile-strip{gap:8px;margin:2px 0}
  .tile-strip img{width:min(19vw,13vh,92px);height:min(19vw,13vh,92px);border-radius:12px;border-width:3px}
  .levels{gap:12px;flex-wrap:nowrap}
  .big-btn{min-width:0;flex:1 1 0;max-width:200px;padding:14px 18px;font-size:clamp(24px,7.4vw,32px);border-radius:24px}
  .win-card{padding:22px 22px 24px;border-width:5px;border-radius:28px;max-width:92vw}
  .win-star{width:76px;margin-top:-62px}
  .win h2{font-size:clamp(40px,12vw,64px)}
  .win p{font-size:clamp(18px,5vw,24px)}
  .win .moves{font-size:18px}
  .win-buttons{gap:12px;margin-top:14px}
}
/* small phones (iPhone SE 375x667) */
@media (max-width:600px) and (max-height:700px){
  .logo-star{width:min(9vh,60px)}
  .tile-strip img{width:min(18vw,11vh,80px);height:min(18vw,11vh,80px)}
}
/* phone in landscape: short screen */
@media (max-height:540px) and (orientation:landscape){
  .start{flex-direction:row;flex-wrap:wrap;align-content:center;column-gap:4vw;row-gap:8px}
  .start .logo-star{width:min(16vh,64px)}
  .start h1{font-size:clamp(28px,9vh,44px)}
  .start .subtitle{flex-basis:100%;font-size:clamp(15px,4.4vh,20px)}
  .start .tile-strip{display:none}
  .start .levels{flex-basis:100%;justify-content:center}
  .start .big-btn{max-width:220px;padding:10px 18px}
  .win-card{padding:14px 24px 16px}
  .win-star{width:56px;margin-top:-40px}
  .win h2{font-size:clamp(34px,11vh,52px);margin:2px 0}
  .win p{font-size:18px;margin:2px 0}
  .win-buttons{flex-direction:row;justify-content:center;margin-top:10px}
  .win .big-btn.again{flex:0 0 auto;font-size:24px;padding:10px 22px}
}
/* ---------- names on matched cards ---------- */
.front .nm{position:absolute;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;text-align:center;
  padding:.25em .3em;font-size:var(--nm,14px);line-height:1.1;font-weight:800;color:var(--navy);background:rgba(255,253,245,.92);
  border-radius:0 0 calc(var(--r,16px) - 4px) calc(var(--r,16px) - 4px);overflow:hidden}
.card.named .front .nm{display:flex}
.card.long .front .nm{font-size:calc(var(--nm,14px)*.84)}
.board:not(.tall) .front .nm{font-size:calc(var(--nm,14px)*.9)}
.board:not(.tall) .card.long .front .nm{font-size:calc(var(--nm,14px)*.78)}
.board.tall .front{background:#fffdf5}
.board.tall .front img{height:auto;aspect-ratio:1/1}
.board.tall .front .nm{display:flex;top:calc(var(--card) - 2*var(--bw,5px));background:none;border-radius:0;padding:0 .15em}
.board.tall .card.matched .front{background:#fff6da}
/* ---------- round badge + start-screen options ---------- */
.spacer{display:flex;justify-content:center;min-width:0}
.round{font-weight:800;font-size:20px;color:var(--navy2);background:rgba(255,255,255,.75);border-radius:20px;padding:6px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.options{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin-top:4px}
.round-pick{display:flex;gap:8px;background:rgba(255,255,255,.6);padding:4px;border-radius:30px}
.chip{min-height:48px;padding:0 18px;border-radius:26px;background:#fff;font-weight:700;font-size:18px;color:var(--navy);box-shadow:0 2px 0 #c9d6ea}
.round-pick .chip[aria-pressed=true]{background:var(--navy2);color:#fff;box-shadow:0 2px 0 var(--navy)}
.quiz-toggle[aria-pressed=false]{color:#7b84a6;background:rgba(255,255,255,.7)}
.big-btn.next{background:linear-gradient(#3fbf86,#2e9d6a);box-shadow:0 7px 0 #1f7a50,0 12px 22px rgba(46,157,106,.35);font-size:clamp(22px,3.4vmin,30px)}
/* ---------- quiz popup ---------- */
.quiz{position:fixed;inset:0;z-index:12;display:grid;place-items:center;background:rgba(20,33,77,.45);animation:fade .25s ease;
  padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 10px)}
.quiz-card{background:linear-gradient(#fffdf5,#fff3d6);border:6px solid var(--gold);border-radius:32px;padding:22px 26px 26px;text-align:center;
  width:min(680px,94vw);max-height:100%;overflow:auto;box-shadow:0 18px 44px rgba(0,0,0,.3);animation:bounce .5s cubic-bezier(.3,1.6,.5,1)}
.quiz-img{width:min(76vw,600px,calc(100vh - 440px));width:min(76vw,600px,calc(100dvh - 440px));min-width:140px;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;
  border-radius:22px;border:5px solid #fff;box-shadow:0 0 0 3px var(--gold),0 8px 22px rgba(20,33,77,.28);display:block;margin:0 auto;animation:zoomin .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes zoomin{from{transform:scale(.35);opacity:0}}
.quiz-qrow{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 16px}
.quiz-qrow .quiz-q{margin:0;flex:0 1 auto;min-width:0}
.quiz-q{margin:14px 0 16px;font-size:clamp(24px,4.2vmin,36px);line-height:1.2;color:var(--navy);font-weight:800}
.quiz-answers{display:flex;flex-direction:column;gap:12px}
.ans{min-height:64px;padding:10px 18px;border-radius:22px;background:#fff;font-size:clamp(20px,3.4vmin,28px);font-weight:700;color:var(--navy);
  box-shadow:0 4px 0 #c9d6ea,0 6px 14px rgba(20,33,77,.1);transition:background .2s,color .2s,opacity .2s}
.ans:active{transform:translateY(3px);box-shadow:0 1px 0 #c9d6ea}
.ans.right{background:linear-gradient(#4fd394,#2e9d6a);color:#fff;box-shadow:0 0 0 4px #c8f3dc,0 0 26px rgba(46,157,106,.85);animation:pop .5s ease}
.ans.off{background:#e6e8ef;color:#a0a6bb;box-shadow:none;cursor:default}
.ans.nudge{animation:nudge .45s ease}
@keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@media (max-width:600px), (max-height:540px){
  .round{font-size:16px;padding:4px 12px}
  .options{gap:8px;margin-top:2px}
  .chip{min-height:44px;font-size:15px;padding:0 13px}
  .round-pick{gap:4px;padding:3px}
  .quiz-card{padding:16px 16px 18px;border-width:5px;border-radius:26px}
  .quiz-img{width:min(78vw,calc(100vh - 350px));width:min(78vw,calc(100dvh - 350px));border-radius:18px;border-width:4px}
  .quiz{padding:calc(var(--safe-t) + 6px) calc(var(--safe-r) + 6px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 6px)}
  .quiz-card{width:min(680px,96vw);padding:12px 12px 14px}
  .win .earned{font-size:clamp(17px,4.8vw,22px);margin-top:6px}
  .win .treasure{font-size:16px;margin-top:6px}
  .quiz-q{margin:10px 0 12px;font-size:clamp(21px,6vw,28px)}
  .ans{min-height:56px;font-size:clamp(18px,5.2vw,23px)}
  .quiz-answers{gap:10px}
  .big-btn.next{font-size:clamp(17px,4.9vw,22px)}
  .win-buttons .big-btn{width:100%;max-width:330px;padding:14px 16px}
}
/* phone upright: everything stays on one slim row; the round badge uses its short name */
@media (max-width:600px) and (orientation:portrait){
  .round{font-size:14px;padding:4px 8px}
  .round .full{display:none}
  .round .short{display:inline}
}
@media (max-height:540px) and (orientation:landscape){
  .quiz-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:18px;align-items:center;width:min(720px,94vw);padding:14px 18px}
  .quiz-img{grid-row:1 / span 2;width:min(42vw,calc(100vh - 72px));width:min(42vw,calc(100dvh - 72px))}
  .quiz-q{margin:0 0 10px;font-size:22px}
  .ans{min-height:48px}
  .quiz-answers{gap:8px}
  .win-buttons{flex-wrap:wrap}
  .win .big-btn.next{font-size:19px;padding:10px 18px;white-space:nowrap}
  .win-buttons .big-btn{width:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce){.card .inner{transition-duration:.01s}.card.matched,.win-card,.quiz-img,.gems.pop,.gems.pop .gem-ic{animation:none}
  .win h2 .w{animation:fade 1s ease both;animation-delay:calc(.2s + var(--i)*.25s)}}

/* v5: website link on the start and win screens */
.site-link{margin:2px 0 0;font-size:clamp(13px,3.6vw,16px);font-weight:600;color:#41507f;line-height:1.3;text-align:center}
.site-link a{color:#1857b8;font-weight:800;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;display:inline-block;padding:6px 2px}
.win .site-link{font-size:clamp(14px,3.8vw,17px);margin:4px 0 0}
.footer{display:none} /* v5: the start-screen site link replaces the old credit line */

/* v5: levels, next level, reset diamonds */
.big-btn.medium{background:linear-gradient(#f39a4a,#e0702a);box-shadow:0 7px 0 #a84c14,0 12px 22px rgba(224,112,42,.35)}
.big-btn.levelup{background:linear-gradient(#f39a4a,#e0702a);box-shadow:0 7px 0 #a84c14,0 12px 22px rgba(224,112,42,.35);font-size:clamp(22px,3.4vmin,30px)}
.top-level{font-weight:800;color:#b5780d;margin:2px 0;font-size:clamp(17px,3vmin,24px)}
.lvl{font-weight:800;font-size:18px;color:#fff;background:#e0702a;border-radius:20px;padding:5px 12px;white-space:nowrap;margin-inline-end:6px}
.reset-row{margin-top:2px;font-size:14px;color:#41507f;text-align:center}
.reset-link,.reset-yes,.reset-no{font:inherit;background:none;border:0;padding:8px 6px;cursor:pointer;color:#6a7398;text-decoration:underline;text-underline-offset:2px}
.reset-ask{font-weight:700}
.reset-yes{color:#c0392b;font-weight:800}
.reset-no{font-weight:700}
@media (max-width:600px){
  .levels .big-btn{padding:12px 6px;font-size:clamp(19px,6.2vw,28px);border-radius:22px}
  .levels{gap:8px}
  .lvl{font-size:14px;padding:4px 8px;margin-inline-end:4px}
  .win .big-btn.levelup{font-size:clamp(17px,4.9vw,22px)}
}
.spacer{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.spacer .lvl{flex:0 0 auto}
.spacer .round{flex:0 1 auto;min-width:0}
@media (max-width:430px){ .app.playing .spacer .round{display:none} } /* phones: the level badge gets the room; the round shows on the start screen and win screen */

/* ---------- read-aloud (v6) ---------- */
.say-btn{flex:0 0 auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:34px;line-height:1;background:linear-gradient(#ffe27a,#f5b82e);
  box-shadow:0 5px 0 #c98a12,0 8px 16px rgba(20,33,77,.22);border:3px solid #fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.say-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #c98a12}
.say-btn.busy{animation:sayPulse 1s ease-in-out infinite}
@keyframes sayPulse{0%,100%{box-shadow:0 5px 0 #c98a12,0 0 0 0 rgba(245,184,46,.7)}50%{box-shadow:0 5px 0 #c98a12,0 0 0 12px rgba(245,184,46,0)}}
.ans-row{display:flex;align-items:stretch;gap:8px}
.ans-row .ans{flex:1 1 auto;min-width:0}
.say-one{flex:0 0 auto;width:52px;border-radius:18px;display:grid;place-items:center;font-size:24px;background:#fff6d6;border:2px solid #f5c84a;box-shadow:0 3px 0 #e2b43b;cursor:pointer;-webkit-tap-highlight-color:transparent}
.say-one:active{transform:translateY(2px);box-shadow:0 1px 0 #e2b43b}
.say-one.saying{background:#ffe27a}
.ans.saying:not(.off):not(.right){box-shadow:0 0 0 4px #f5c84a,0 4px 0 #c9d6ea}
.quiz-q.saying{color:#0f5d99}
.auto-toggle{font-size:16px}
.auto-toggle[aria-pressed=false]{color:#7b84a6;background:rgba(255,255,255,.7)}
@media (max-width:600px), (max-height:540px){
  .say-btn{width:56px;height:56px;font-size:28px;border-width:2px}
  .quiz-qrow{gap:10px;margin:10px 0 12px}
  .say-one{width:46px;font-size:21px;border-radius:16px}
  .auto-toggle{font-size:14px}
}
@media (max-height:540px) and (orientation:landscape){
  .quiz-qrow{margin:0 0 10px}
  .say-btn{width:48px;height:48px;font-size:24px}
}
@media (prefers-reduced-motion:reduce){.say-btn.busy{animation:none;box-shadow:0 0 0 4px #f5c84a}}

/* v8: background music button + credit */
.icon-btn.stl-music-btn{border:0;font-size:27px}
.icon-btn.stl-music-btn.off::after{left:12px;right:12px}
.music-credit{margin:0;font-size:clamp(11px,3vw,14px);color:#5a6690;text-align:center;line-height:1.3}
@media (max-width:600px), (max-height:540px){.icon-btn.stl-music-btn{font-size:22px}}
@media (max-width:360px){.app.playing .icon-btn{width:34px}.app.playing .topbar{gap:2px}.app.playing .lvl{font-size:12px;padding:3px 6px}.app.playing .topbar .score{padding:0 7px}.app.playing .topbar .gems{padding:0 7px 0 4px}.app.playing #langBtn{padding:0 8px}.icon-btn.stl-music-btn{font-size:19px}}