: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}}

/* =================== Pirkei Avot memory (pa1) =================== */
@font-face{font-family:"Noto Sans Hebrew";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/noto-sans-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
body{font-family:"Noto Sans Hebrew","Avenir Next","Avenir","Segoe UI","Helvetica Neue",Arial,sans-serif}
[dir=rtl] body, html[dir=rtl] body, [lang=he]{font-family:"Noto Sans Hebrew","Arial Hebrew","Avenir Next",Arial,sans-serif}
/* start screen: scrolls if a small phone needs it, centred otherwise */
.start{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0}
.start-in{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:min(1.6vh,14px);padding:8px 10px 10px}
.start .logo-star{width:min(10vh,84px)}
.start h1{display:flex;flex-direction:column;gap:2px;font-size:clamp(30px,6vmin,58px)}
.start h1 .t2{font-size:.52em;color:#b5780d;font-weight:800;letter-spacing:.3px}
.rhyme{background:linear-gradient(#fffdf5,#fff3d6);border:3px solid var(--gold);border-radius:22px;padding:10px 18px;box-shadow:0 4px 0 #e2c37a,0 8px 18px rgba(20,33,77,.12);max-width:560px}
.rhyme p{margin:0;font-size:clamp(16px,2.7vmin,24px);font-weight:700;color:var(--navy2);line-height:1.35}
.rhyme p:first-child{animation:wiggle 2.6s ease-in-out 1s infinite}
.rhyme .r3{color:var(--navy);font-weight:900}
.rhyme .r4{color:#1f8a57;font-weight:900;font-size:clamp(19px,3.2vmin,28px)}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-2deg)}90%{transform:rotate(2deg)}95%{transform:rotate(-1deg)}}
.how{margin:0;font-weight:700;color:#41507f;font-size:clamp(14px,2.2vmin,19px)}
.start-foot{display:flex;flex-direction:column;gap:4px;margin-top:2px;max-width:640px}
.start-foot p{margin:0;font-size:clamp(12px,1.8vmin,15px);line-height:1.3;color:#4a5684;font-weight:600}
.start-foot a{color:#1857b8;font-weight:800;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:3px 2px}
.start-foot .moshiach{color:#b5780d;font-weight:800}
.start-foot .credit{font-size:clamp(11px,1.6vmin,13px);color:#6a7398}
/* game screen: the board plus a reader for the open cards */
.game{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;padding:4px 6px 6px;gap:6px}
.board-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.board{grid-template-columns:repeat(var(--cols,4),var(--card-w,var(--card,120px)))}
.reader{flex:0 0 auto;height:clamp(118px,22vh,210px);background:rgba(255,255,255,.72);border:2px solid #e9dcb4;border-radius:18px;padding:6px;display:flex;flex-direction:column;gap:4px;
  transition:box-shadow .3s,background .3s;min-width:0}
.reader.good{background:#fff8dc;box-shadow:0 0 0 3px var(--gold),0 0 18px rgba(242,193,78,.6)}
.rd-cards{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;gap:6px}
.rd-cards.n1{justify-content:center}
.rd-cards.n1 .rd-card{flex:0 1 min(100%,520px)}
.rd-card{flex:1 1 0;min-width:0;position:relative;border-radius:14px;border:3px solid var(--gold);background:#fffaf0}
.rd-card.kind-m{border-color:#7fbfe9;background:#eef7ff}
.rd-eq{flex:0 0 auto;align-self:center;font-size:26px;font-weight:900;color:var(--navy2)}
.rd-msg{flex:0 0 auto;margin:0;text-align:center;font-weight:800;font-size:clamp(14px,2.2vmin,20px);color:#41507f;line-height:1.2}
.rd-cards + .rd-msg{font-size:clamp(13px,1.9vmin,18px)}
.reader > .rd-msg:only-child{flex:1 1 auto;display:flex;align-items:center;justify-content:center;font-size:clamp(17px,2.8vmin,26px)}
.rd-msg.match{color:#1f8a57}
.rd-msg.tryAgain{color:#c0583c}
/* card faces */
.back{background:radial-gradient(circle at 50% 42%,#2f4aa0,#14214d 72%);box-shadow:0 var(--sh,5px) 0 #0c1534,0 calc(var(--sh,5px) + 3px) 10px rgba(20,33,77,.25);border:var(--bw,3px) solid var(--gold)}
.back::after{content:"";position:absolute;inset:8%;background:url(cardback.svg) center/contain no-repeat}
.card.kind-s .front{background:#fffaf0;border-color:#f2d58a}
.card.kind-m .front{background:#eef7ff;border-color:#bfe0f7}
.card.matched.kind-m .front{background:#f3fbff}
.fit{position:absolute;inset:4%;display:flex;flex-direction:column;align-items:center;overflow:hidden;text-align:center;line-height:1.18;color:var(--navy);font-size:14px;overflow-wrap:break-word;hyphens:manual}
.fit > :first-child{margin-top:auto}
.fit > :last-child{margin-bottom:auto}
.say-txt{display:block;font-weight:800}
.say-txt[lang=he]{line-height:1.45;font-weight:700}
.say-who{display:block;margin-top:.25em;font-size:.74em;font-weight:800;color:#b5780d}
.say-src{display:inline-block;margin-top:.25em;font-size:.62em;font-weight:800;color:#fff;background:var(--navy2);border-radius:1em;padding:.1em .6em;white-space:nowrap}
.mean-emo{display:block;font-size:1.9em;line-height:1.1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.mean-txt{display:block;margin-top:.2em;font-weight:800;color:#0f4f86}
[dir=rtl] .mean-txt{line-height:1.4}
.card .front{border-width:var(--bw,3px)}
@media (max-width:600px) and (orientation:portrait){ .reader{height:clamp(112px,23vh,180px)} }
/* short landscape screens: the reader sits beside the board */
@media (max-height:500px) and (orientation:landscape){
  .game{flex-direction:row}
  .reader{height:auto;width:34%}
  .rd-cards{flex-direction:column}
  .rd-eq{display:none}
  .start-in{gap:6px}
  .start .logo-star{display:none}
}
.start .levels{margin:2px 0}

/* matched cards stay face up without relying on 3D back-face hiding (some WebKit builds showed them mirrored) */
.card.matched .inner{transform:none;transition:none}
.card.matched .front{transform:none}
.card.matched .back{visibility:hidden}

@media (max-height:600px) and (orientation:portrait){
  .start-in{gap:8px}
  .start .logo-star{width:46px}
  .start h1{font-size:28px}
  .rhyme{padding:6px 12px;border-radius:18px}
  .rhyme p{font-size:15px}
  .rhyme .r4{font-size:18px}
}

/* face up / face down never depends on 3D back-face hiding alone: each face is shown only on its own side of the turn */
.card .front{visibility:hidden;transition:visibility 0s linear .12s}
.card .back{visibility:visible;transition:visibility 0s linear .12s}
.card.flipped .front,.card.matched .front{visibility:visible}
.card.flipped .back,.card.matched .back{visibility:hidden}
.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}}

/* ---------- pa2: ← Back, ↺ Restart, read-aloud (🔊 like Tzadikim) ---------- */
.back-btn,.restart-btn{flex:0 0 auto;height:50px;min-width:50px;padding:0 14px;border-radius:25px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-weight:800;font-size:18px;line-height:1;color:var(--navy);background:linear-gradient(#ffe27a,#f5b82e);border:2px solid #c98a12;box-shadow:0 3px 0 #c98a12,0 6px 14px rgba(20,33,77,.12);
  cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.back-btn .arr{font-size:22px;font-weight:900}
.restart-btn span[aria-hidden]{font-size:22px;font-weight:900}
.back-btn:active,.restart-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #c98a12}
.restart-btn[hidden]{display:none}
.game > .restart-btn{display:none}
.rd-row .restart-btn{height:40px;padding:0 12px;font-size:16px;border-radius:20px;box-shadow:0 2px 0 #c98a12}
.rd-row .restart-btn span[aria-hidden]{font-size:19px}
@media (max-width:600px), (max-height:540px){
  .back-btn,.restart-btn{height:44px;min-width:44px;padding:0 11px;font-size:16px;border-radius:22px}
}
/* playing on a phone: the top row is full, so Back and Restart show only their arrows (names stay for screen readers) */
@media (max-width:600px){ .app.playing .back-btn .lbl{display:none} .app.playing .back-btn{padding:0;width:44px}
  .rd-row .restart-btn{height:36px;padding:0 9px;font-size:14px;gap:4px}
  .rd-say{width:34px;height:34px;min-height:34px;font-size:16px;border-radius:12px;top:3px;right:3px}
  .rd-card .fit{padding-right:34px} [dir=rtl] .rd-card .fit{padding-right:0;padding-left:34px}
  .rd-say-msg{width:38px;height:34px;min-height:34px;font-size:16px} }
@media (max-width:360px){ .app.playing .back-btn{width:36px;min-width:36px} .back-btn .lbl{display:none} .back-btn{padding:0;width:44px} }
/* confirm box */
.confirm{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(20,33,77,.45);padding:16px}
.confirm[hidden]{display:none}
.confirm-card{width:min(420px,92vw);background:#fffaf0;border:3px solid var(--gold);border-radius:22px;padding:20px 18px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.confirm-q{margin:0 0 16px;font-weight:800;font-size:clamp(19px,5vw,24px);color:var(--navy);line-height:1.3}
.confirm-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.confirm-btns .big-btn{flex:1 1 130px;min-height:52px;font-size:19px}
.confirm-yes{background:linear-gradient(#ffe27a,#f5b82e)!important;color:var(--navy)!important}
/* 🔊 buttons (same look as Tzadikim) */
.say-one{flex:0 0 auto;width:52px;min-height:44px;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;padding:0}
.say-one:active{transform:translateY(2px);box-shadow:0 1px 0 #e2b43b}
.say-one.saying{background:#ffe27a;animation:sayPulse 1s ease-in-out infinite}
@keyframes sayPulse{0%,100%{box-shadow:0 3px 0 #e2b43b,0 0 0 0 rgba(245,184,46,.7)}50%{box-shadow:0 3px 0 #e2b43b,0 0 0 10px rgba(245,184,46,0)}}
.how-row{display:flex;align-items:center;justify-content:center;gap:10px}
.how-row .how{margin:0}
.how.saying{color:#0f5d99}
.chip.auto-toggle{margin:2px auto 0;display:inline-block;padding:8px 16px;border-radius:20px;background:#fff;border:2px solid #f5c84a;font-weight:700;font-size:16px;color:var(--navy);box-shadow:0 2px 0 #e2b43b;cursor:pointer}
.chip.auto-toggle[aria-pressed="true"]{background:#ffe27a}
/* reader: a 🔊 on each open card and beside the message */
.rd-card .fit{padding-right:46px}
[dir=rtl] .rd-card .fit{padding-right:0;padding-left:46px}
.rd-say{position:absolute;top:4px;right:4px;width:42px;min-height:40px;height:40px;font-size:20px;border-radius:14px;z-index:2}
[dir=rtl] .rd-say{right:auto;left:4px}
.rd-card.saying{box-shadow:0 0 0 4px #f5c84a}
.rd-row{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:0}
.rd-row .rd-msg{flex:0 1 auto}
.rd-say-msg{width:44px;min-height:36px;height:36px;font-size:19px;border-radius:14px}
.reader > .rd-row:only-child{flex:1 1 auto}
.reader > .rd-row:only-child .rd-msg{font-size:clamp(17px,2.8vmin,26px)}
.rd-msg.saying{text-decoration:underline;text-decoration-color:#f5c84a;text-decoration-thickness:3px}
@media (prefers-reduced-motion:reduce){.say-one.saying{animation:none;box-shadow:0 0 0 4px #f5c84a}}

/* pa4: running boy drawn with a kippah (fixed image, same on every phone) */
.mean-emo .emo-img{display:inline-block;width:1.4em;height:1.4em;vertical-align:-.3em}
.mean-emo{height:1.15em}
/* pa4: the action card shows its mishna reference, same pill as the quote card */
.mean-txt + .say-src{margin-top:.35em}

.card,.card *{font-family:"Noto Sans Hebrew","Avenir Next","Avenir","Segoe UI","Helvetica Neue",Arial,sans-serif}
.mean-emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important}