@font-face{font-family:"Varela Round";src:url(fonts/varela.ttf) format("truetype");font-display:swap}
@font-face{font-family:"AlefB";src:url(fonts/alef-bold.ttf) format("truetype");font-display:swap}
:root{
  --ink:#16351f; --leaf:#2fa84f; --leaf-d:#1d6e33; --sun:#ffd23f; --pink:#ff6b9a; --sky:#5ec8f2;
  --wood:#c98a4b; --wood-d:#6b3f1d; --card:#fffaf0; --r:18px;
  --ui:"Varela Round", "Rubik", "Arial Hebrew", system-ui, sans-serif;
  --nq:"AlefB", "Noto Sans Hebrew", "Arial Hebrew", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--ui);color:var(--ink);min-height:100dvh;display:flex;flex-direction:column;
  background:#0f4d2a;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:4px solid var(--sun);outline-offset:2px}
[hidden]{display:none!important}

/* ===== jungle background ===== */
#jungle{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(circle at 85% 8%, rgba(255,240,150,.55) 0 60px, rgba(255,240,150,0) 160px),
   linear-gradient(180deg,#59c3e8 0%,#a7e4b8 34%,#3fae5c 60%,#1c7a3c 85%,#0f5a2c 100%);}
#jungle::before,#jungle::after{content:"";position:absolute;width:62vmin;height:62vmin;max-width:420px;max-height:420px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23124d26' stroke-width='3'%3E%3Cpath d='M0 0 C60 10 110 40 140 95 C100 90 40 70 0 40Z' fill='%232e9e4b'/%3E%3Cpath d='M0 30 C40 60 70 110 75 170 C45 140 15 100 0 80Z' fill='%2347b85f'/%3E%3Cpath d='M20 0 C80 -5 150 10 195 45 C140 55 70 40 20 0Z' fill='%2337a853'/%3E%3C/g%3E%3Cg stroke='%23124d26' stroke-width='2' fill='none' opacity='.6'%3E%3Cpath d='M5 5 Q70 40 135 92'/%3E%3Cpath d='M3 35 Q45 95 72 165'/%3E%3Cpath d='M25 3 Q110 20 190 45'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
#jungle::before{top:0;right:0;transform:scaleX(-1)}
#jungle::after{bottom:0;left:0;transform:rotate(180deg)}

/* ===== top bar ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;
  padding-top:max(8px,env(safe-area-inset-top))}
.brand{flex:1;margin:0;text-align:center;font-size:clamp(20px,5.6vw,30px);color:#fff;letter-spacing:.5px;
  text-shadow:0 3px 0 var(--leaf-d),0 0 12px rgba(0,0,0,.25);white-space:nowrap}
.iconbtn{width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:rgba(255,255,255,.25);font-size:22px;
  display:grid;place-items:center;backdrop-filter:blur(4px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.iconbtn:active{transform:translateY(2px)}

main{flex:1;display:flex;flex-direction:column;align-items:center;width:100%}
.screen{display:none;width:100%;flex:1;flex-direction:column;align-items:center;padding:6px 12px 14px}
.screen.active{display:flex}

/* ===== start ===== */
.hero{text-align:center;margin-top:4px}
.hero-art{width:min(250px,64vw);height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.15))}
.hero h2{margin:4px 0 14px;color:#fff;font-size:clamp(22px,6vw,32px);text-shadow:0 3px 0 var(--leaf-d)}
.modes{display:grid;gap:14px;width:min(560px,100%)}
.mode-card{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;align-items:center;text-align:right;
  gap:0 12px;padding:14px 16px;border-radius:24px;border:4px solid #fff;min-height:96px;
  box-shadow:0 6px 0 rgba(0,0,0,.2);transition:transform .12s}
.mode-card:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.mode-ico{grid-row:1/3;font-size:36px;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center}
.mode-name{font-size:24px;font-weight:700}
.mode-sub{font-size:15px;opacity:.85}
.m-mult{background:linear-gradient(135deg,#ffe066,#ffb347)}
.m-add{background:linear-gradient(135deg,#9be7ff,#63b3ff)}
.m-read{background:linear-gradient(135deg,#ffc2e0,#ff8fb8)}

/* ===== panels ===== */
.panel{background:var(--card);border:5px solid #fff;border-radius:28px;padding:18px 16px 20px;width:min(560px,100%);
  box-shadow:0 8px 0 rgba(0,0,0,.18),0 18px 40px rgba(0,0,0,.18)}
.panel h2{margin:0 0 10px;text-align:center;font-size:26px;color:var(--leaf-d)}
.opt-group{margin:12px 0 4px}
.opt-group h3{margin:0 0 8px;font-size:19px}
.hint{margin:6px 0 0;font-size:14px;opacity:.7}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.col{flex-direction:column}
.chip{min-height:48px;min-width:52px;padding:8px 14px;border-radius:16px;border:3px solid #d9cfb8;background:#fff;font-size:18px;
  box-shadow:0 3px 0 #d9cfb8;transition:.12s}
.chips.big .chip{flex:1;font-size:19px}
.chips.col .chip{text-align:right;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chip.on{background:var(--leaf);border-color:var(--leaf-d);color:#fff;box-shadow:0 3px 0 var(--leaf-d)}
.chip .nq{font-family:var(--nq);font-size:22px;margin-inline-start:auto;background:rgba(255,255,255,.75);color:var(--ink);border-radius:10px;padding:0 8px}
#multChips .chip{width:calc((100% - 32px)/5);min-width:0;padding:8px 0;font-size:20px}
#multChips .chip.mix{width:100%}
#opChips{margin-top:8px}
.player-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:12px;padding:10px;border-radius:16px;background:#f3ecdc}
.player-row input{width:100%;font:inherit;font-size:19px;padding:10px 12px;border-radius:12px;border:3px solid #d9cfb8;background:#fff;min-height:48px}
.player-row .pnum{font-weight:700}
.pawn-pick{grid-column:1/-1;display:flex;gap:8px;justify-content:center}
.pawn-opt{width:56px;height:62px;border-radius:14px;border:3px solid transparent;background:#fff;padding:2px}
.pawn-opt.on{border-color:var(--leaf-d);background:#dff5e3}
.pawn-opt svg{width:100%;height:100%}
.bigbtn{display:block;width:100%;margin-top:18px;min-height:58px;border-radius:20px;border:4px solid #fff;font-size:22px;font-weight:700;
  box-shadow:0 6px 0 rgba(0,0,0,.2)}
.bigbtn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.bigbtn.go{background:linear-gradient(180deg,#ffe066,#ffb000);color:#5a3500}
.bigbtn.ghost{background:#fff;color:var(--leaf-d);border-color:#cfe9d5}
.bigbtn.pink{background:linear-gradient(180deg,#ff9cc0,#ff5d93);color:#fff}
.bigbtn.green{background:linear-gradient(180deg,#7be38f,#2fa84f);color:#fff}

/* ===== lesson ===== */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;background:#f3ecdc;border-radius:16px;padding:10px 12px;font-size:18px;line-height:1.45}
.st-ico{font-size:30px;width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center}

/* ===== game layout ===== */
#scrGame{padding:0 6px 6px}
.game{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.board-wrap{--bs:min(calc(100vw - 12px), calc(100dvh - 330px), 760px);width:var(--bs);height:var(--bs);min-width:300px;min-height:300px;
  padding:6px;border-radius:22px;background:linear-gradient(135deg,#8a5a2b,#c98a4b 40%,#8a5a2b);box-shadow:0 8px 0 rgba(0,0,0,.25),inset 0 0 0 3px #5b3514}
.board{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;container-type:inline-size;background:#fff8e6}
.cells,.labels,.pawns{position:absolute;inset:0}
.cells{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr)}
.cell{position:relative;border:1px solid rgba(80,50,20,.18)}
.cell .n{position:absolute;top:2%;right:5%;font-size:2.3cqw;font-weight:700;opacity:.55;line-height:1}
.c0{background:#ffe28a}.c1{background:#ffc9a8}.c2{background:#ffb8d0}.c3{background:#b5e3fb}.c4{background:#c8f0ae}.c5{background:#dccbf7}
.cell.start{background:repeating-linear-gradient(45deg,#fff 0 6px,#e6f7ea 6px 12px)}
.cell.goal{background:radial-gradient(circle,#fff6b0,#ffd23f)}
.cell.goal::after{content:"🏆";position:absolute;inset:0;display:grid;place-items:center;font-size:5.4cqw}
.cell.start::after{content:"התחלה";position:absolute;bottom:6%;inset-inline:0;text-align:center;font-size:1.9cqw;font-weight:700;color:var(--leaf-d)}
.art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.labels{pointer-events:none}
.lab{position:absolute;width:10%;height:10%;display:grid;place-items:center}
.lab span{display:block;max-width:94%;padding:.4cqw .6cqw;border-radius:1.4cqw;background:rgba(255,255,255,.92);border:.35cqw solid #ffb000;
  font-weight:700;font-size:2.55cqw;line-height:1.05;text-align:center;white-space:nowrap;box-shadow:0 .3cqw 0 rgba(0,0,0,.15);direction:ltr}
.lab.word span{font-family:var(--nq);direction:rtl;font-size:2.7cqw;padding:.2cqw .5cqw .5cqw;line-height:1.25}
.lab.word.long span{font-size:2.15cqw}
.lab.done span{background:#e3f8e5;border-color:var(--leaf)}
.lab.done span::before{content:"⭐";font-size:.85em;margin-inline-end:.2em}
.lab .gate{position:absolute;top:4%;left:4%;font-size:2.2cqw}
.pawn{position:absolute;width:10%;height:10%;transition:left .2s ease-in-out, top .2s ease-in-out;z-index:3;display:grid;place-items:center;pointer-events:none}
.pawn svg{width:72%;height:88%;filter:drop-shadow(0 .5cqw .3cqw rgba(0,0,0,.35));transform-origin:50% 100%}
.pawn.hop svg{animation:hop .26s ease-out}
.pawn.active svg{animation:bob 1.2s ease-in-out infinite}
.pawn.slide{transition:none}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.12,.85)}55%{transform:translateY(-38%) scale(.95,1.08)}100%{transform:translateY(0) scale(1,1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}

.side{width:min(560px,100%);display:flex;flex-direction:column;gap:8px}
.turnbar{display:flex;gap:8px;justify-content:center}
.pchip{flex:1;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:16px;background:rgba(255,255,255,.75);border:3px solid transparent;font-size:17px;min-height:50px}
.pchip svg{width:30px;height:36px;flex:none}
.pchip.on{background:#fff;border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,210,63,.4)}
.pchip .pname{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchip .pstars{margin-inline-start:auto;white-space:nowrap;font-size:15px}
.pchip .ppos{font-size:13px;opacity:.75;white-space:nowrap}
.dice-zone{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.82);border-radius:22px;padding:8px 14px;border:3px solid #fff}
.msg{flex:1;font-size:19px;font-weight:700;line-height:1.35;min-height:2.7em;display:flex;align-items:center}

/* ===== die ===== */
.dice-btn{--d:74px;position:relative;width:calc(var(--d) + 26px);height:calc(var(--d) + 34px);border:none;background:none;padding:0;perspective:500px;flex:none}
.dice-btn:disabled{cursor:default}
.dice-btn:not(:disabled) .dice-bounce{animation:ready 1.6s ease-in-out infinite}
.dice-shadow{position:absolute;bottom:2px;left:50%;width:calc(var(--d)*.9);height:12px;margin-left:calc(var(--d)*-.45);border-radius:50%;background:rgba(0,0,0,.22);transition:transform .2s}
.dice-bounce{position:absolute;left:13px;top:6px;width:var(--d);height:var(--d);transform-style:preserve-3d}
.dice-bounce.rolling{animation:bounce .95s cubic-bezier(.3,.6,.4,1)}
.dice{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(22deg);transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.face{position:absolute;inset:0;border-radius:16%;background:radial-gradient(circle at 30% 25%,#fff,#f1f1f1 60%,#ddd);border:2px solid #d6d6d6;
  box-shadow:inset 0 0 10px rgba(0,0,0,.12)}
.face i{position:absolute;width:19%;height:19%;margin:-9.5% 0 0 -9.5%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#555,#111)}
.f1 i{background:radial-gradient(circle at 35% 35%,#ff6b6b,#c0182a);width:24%;height:24%;margin:-12% 0 0 -12%}
.f1{transform:translateZ(calc(var(--d)/2))}
.f6{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.f2{transform:rotateY(90deg) translateZ(calc(var(--d)/2))}
.f5{transform:rotateY(-90deg) translateZ(calc(var(--d)/2))}
.f3{transform:rotateX(90deg) translateZ(calc(var(--d)/2))}
.f4{transform:rotateX(-90deg) translateZ(calc(var(--d)/2))}
.f1 i{left:50%;top:50%}
.f2 i:nth-child(1),.f3 i:nth-child(1){left:27%;top:27%}
.f2 i:nth-child(2),.f3 i:nth-child(3){left:73%;top:73%}
.f3 i:nth-child(2){left:50%;top:50%}
.f4 i:nth-child(1),.f5 i:nth-child(1),.f6 i:nth-child(1){left:27%;top:27%}
.f4 i:nth-child(2),.f5 i:nth-child(2),.f6 i:nth-child(2){left:73%;top:27%}
.f4 i:nth-child(3),.f5 i:nth-child(3),.f6 i:nth-child(3){left:27%;top:73%}
.f4 i:nth-child(4),.f5 i:nth-child(4),.f6 i:nth-child(4){left:73%;top:73%}
.f5 i:nth-child(5){left:50%;top:50%}
.f6 i:nth-child(5){left:27%;top:50%}
.f6 i:nth-child(6){left:73%;top:50%}
@keyframes bounce{0%{transform:translateY(0)}15%{transform:translateY(-46px) rotate(-8deg)}35%{transform:translateY(0)}50%{transform:translateY(-22px) rotate(6deg)}68%{transform:translateY(0)}80%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes ready{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== overlay + cards ===== */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(10,40,20,.55);display:flex;align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(2px)}
.card{position:relative;width:min(460px,100%);max-height:calc(100dvh - 24px);overflow:auto;background:var(--card);border-radius:28px;border:5px solid #fff;
  box-shadow:0 10px 0 rgba(0,0,0,.2),0 20px 50px rgba(0,0,0,.35);animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.card-head{display:flex;align-items:center;gap:10px;justify-content:center;padding:10px 14px;background:linear-gradient(180deg,#ffe066,#ffc93c);font-size:21px;font-weight:700;color:#6a4300}
.card-head.ladder{background:linear-gradient(180deg,#ffd9a8,#f0a85a)}
.card-badge{font-size:24px}
.card-body{padding:14px 16px 18px;text-align:center}
.q{font-size:clamp(36px,11vw,54px);font-weight:700;direction:ltr;margin:2px 0 10px;white-space:nowrap}
.q .eq{color:#9a8c6d}
.ansbox{display:inline-block;min-width:1.7em;border-bottom:5px solid var(--leaf);color:var(--leaf-d);padding:0 .1em}
.ansbox.empty{color:#c9bfa6}
.word-big{font-family:var(--nq);font-size:clamp(60px,18vw,88px);line-height:1.45;margin:0 0 6px;color:#1b2b55;direction:rtl}
.prompt{font-size:18px;margin:0 0 8px}
.prompt.nqp{font-family:var(--nq);font-size:22px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;direction:ltr;max-width:330px;margin:0 auto}
.pad button{min-height:56px;border-radius:16px;border:3px solid #d9cfb8;background:#fff;font-size:26px;font-weight:700;box-shadow:0 4px 0 #d9cfb8}
.pad button:active{transform:translateY(3px);box-shadow:0 1px 0 #d9cfb8}
.pad .ok{background:var(--leaf);border-color:var(--leaf-d);color:#fff;box-shadow:0 4px 0 var(--leaf-d)}
.pad .del{background:#ffe9e0}
.fb{border-radius:18px;padding:10px 12px;margin:0 0 10px;font-size:18px;line-height:1.5}
.fb.good{background:#e1f8e4;color:#14562a}
.fb.try{background:#fff1d6;color:#6a4300}
.fb b{font-size:1.1em}
.dots{display:inline-grid;gap:3px;margin:6px auto;direction:ltr;padding:6px;background:#fff;border-radius:12px}
.dots .row{display:flex;gap:3px;padding:2px 4px;border-radius:8px;background:#fff4c9}
.dots .row:nth-child(even){background:#e3f4ff}
.dots i{width:9px;height:9px;border-radius:50%;background:#ff7a59;display:block}
.skip{font-size:16px;direction:ltr;color:#555;word-spacing:2px}
.nline{width:100%;height:auto;margin:4px 0}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.btnrow .bigbtn{flex:1;margin-top:6px;min-width:130px;font-size:19px;min-height:54px}
.tabs{display:flex;gap:8px;margin:4px 0 10px}
.tab{flex:1;min-height:52px;border-radius:16px;border:3px solid #d9cfb8;background:#fff;font-size:18px;font-weight:700;box-shadow:0 3px 0 #d9cfb8}
.tab.on{background:#ffe8f1;border-color:#ff7aa8;box-shadow:0 3px 0 #ff7aa8}
.rec{display:flex;flex-direction:column;align-items:center;gap:8px}
.micbtn{width:96px;height:96px;border-radius:50%;border:5px solid #fff;background:radial-gradient(circle at 35% 30%,#ff8fa3,#e8335a);color:#fff;font-size:40px;
  box-shadow:0 6px 0 #a3163a,0 0 0 4px #ffd0dc}
.micbtn.on{animation:pulse 1s ease-in-out infinite;background:radial-gradient(circle at 35% 30%,#ff6b6b,#b80d2b)}
@keyframes pulse{0%,100%{box-shadow:0 6px 0 #a3163a,0 0 0 4px #ffd0dc}50%{box-shadow:0 6px 0 #a3163a,0 0 0 16px rgba(255,80,110,.25)}}
.rec audio{width:100%;max-width:320px}
.rec .small{font-size:15px;opacity:.75;margin:0}
.wtype{width:100%;font-family:var(--nq);font-size:34px;text-align:center;padding:8px;border-radius:16px;border:4px solid #d9cfb8;direction:rtl;min-height:64px}
.letters{font-family:var(--nq);font-size:34px;direction:rtl;letter-spacing:4px;margin:6px 0}
.letters .ok{color:#1e9e45}.letters .bad{color:#e23b3b;text-decoration:underline}
.flash{position:fixed;inset:0;pointer-events:none;z-index:60;display:grid;place-items:center;font-size:96px;animation:flash 1s ease-out forwards}
@keyframes flash{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* ===== win ===== */
.win{background:rgba(10,40,20,.6)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.wincard{text-align:center;padding:16px 18px 20px}
.trophy{font-size:80px;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.wincard h2{margin:0;font-size:30px;color:var(--leaf-d)}
.wincard p{font-size:19px;margin:6px 0}
.win-stars{font-size:26px;line-height:1.4}
.wincard .row{display:flex;gap:10px}
.wincard .row .bigbtn{flex:1}

.foot{text-align:center;color:rgba(255,255,255,.9);font-size:13px;padding:6px 0 max(8px,env(safe-area-inset-bottom));text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ===== larger screens ===== */
@media (min-width:860px) and (min-aspect-ratio:1/1){
  .game{flex-direction:row;align-items:flex-start;justify-content:center;gap:20px;padding-top:6px}
  .board-wrap{--bs:min(calc(100dvh - 110px), calc(100vw - 400px), 820px)}
  .side{width:330px}
  .turnbar{flex-direction:column}
  .dice-zone{flex-direction:column;padding:18px}
  .dice-btn{--d:110px}
  .msg{text-align:center;justify-content:center;font-size:21px;min-height:4em}
}
@media (max-height:700px) and (max-width:500px){
  .board-wrap{--bs:min(calc(100vw - 12px), calc(100dvh - 270px))}
  .dice-btn{--d:62px}
  .msg{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== snakes & ladders art ===== */
.rail-d{stroke:#5b3514;stroke-width:15;stroke-linecap:round}
.rail-l{stroke:#d08f4f;stroke-width:9;stroke-linecap:round}
.rail-h{stroke:#ffd9a8;stroke-width:2.5;stroke-linecap:round;opacity:.8}
.rung-d{stroke:#5b3514;stroke-width:13;stroke-linecap:round}
.rung-l{stroke:#e8b070;stroke-width:6;stroke-linecap:round}
.sn,.ld{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.2,1.4,.4,1),filter .45s}
.ld.alive{filter:url(#lift) brightness(1.12) saturate(1.2);transform:translateY(-12px) scale(1.06)}
@keyframes alive-sn{from{transform:translateY(-14px) scale(1.08) rotate(-1deg)}to{transform:translateY(-14px) scale(1.08) rotate(1deg)}}
@keyframes flick{0%{opacity:1}50%{opacity:0}}
.chips.three .chip{line-height:1.25;padding:6px 4px;font-size:17px}
.cells{direction:ltr}
.playbtn{margin-top:4px;min-height:50px;font-size:19px;max-width:320px}
.rec .playwrap{width:100%}
@media (min-height:760px) and (max-width:600px){.dice-btn{--d:96px}.dice-zone{padding:14px 16px}.msg{font-size:21px}.side{gap:12px}.game{gap:12px}}
.mode-ico.ico-pm{font-size:38px;font-weight:700;color:#2b2b2b;font-family:var(--ui);letter-spacing:1px;direction:ltr}
@media (orientation:landscape) and (max-height:520px){
  .topbar{padding:4px 10px}.iconbtn{width:40px;height:40px;font-size:19px}.brand{font-size:22px}
  .game{flex-direction:row;align-items:flex-start;justify-content:center;gap:12px}
  .board-wrap{--bs:min(calc(100dvh - 64px), calc(100vw - 280px));min-width:240px;min-height:240px}
  .side{width:250px}.turnbar{flex-direction:column}.dice-zone{flex-direction:column;padding:10px}.dice-btn{--d:70px}.msg{text-align:center;justify-content:center;font-size:17px}
  .foot{display:none}
}
@media (max-height:520px){.word-big{font-size:54px;line-height:1.3}.card-head{padding:6px 12px}.q{font-size:34px;margin-bottom:6px}.pad button{min-height:44px}.micbtn{width:72px;height:72px;font-size:30px}}

/* ===== 3D snakes ===== */
.board-wrap{position:relative}
.fxsn{transition:none!important}
.fx{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);overflow:visible;pointer-events:none;z-index:6}
.snake-dim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:2;
  background:radial-gradient(circle at 50% 45%,rgba(10,20,10,.32),rgba(5,10,5,.68))}
.snake-dim.on{opacity:1}
.pawns.dim .pawn:not(.victim){opacity:.55;transition:opacity .3s}
.pawn.victim{z-index:5}
.pawn.gulp svg{transform:scale(.1) translateY(-30%);opacity:0;transition:transform .14s ease-in,opacity .14s ease-in}
.pawn.spit svg{animation:spit .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes spit{0%{transform:scale(.1) translateY(0);opacity:0}40%{transform:scale(1.25,.85) translateY(-30%);opacity:1}70%{transform:scale(.95,1.08) translateY(-10%)}100%{transform:none;opacity:1}}
.board-wrap.quake{animation:quake .5s ease-out}
.board-wrap.quake2{animation:quake2 .3s ease-out}
@keyframes quake{0%,100%{transform:none}15%{transform:translate(-5px,3px) rotate(-.6deg)}30%{transform:translate(5px,-3px) rotate(.6deg)}45%{transform:translate(-4px,2px)}60%{transform:translate(3px,-2px)}80%{transform:translate(-1px,1px)}}
@keyframes quake2{0%,100%{transform:none}30%{transform:translateY(5px) scale(1.01)}60%{transform:translateY(-2px)}}
/* idle life: head sway, tongue flick, blink (head only -> small repaints) */
#art .sn .sway{animation:sway 3.6s ease-in-out infinite alternate}
#art .sn .tng{transform:scaleX(0);animation:flick 5.5s linear infinite}
#art .sn:nth-of-type(2n) .tng{animation-duration:6.7s}
#art .sn:nth-of-type(3n) .tng{animation-duration:4.6s}
#art .sn .lid{transform:scaleY(0);animation:blink 4.8s linear infinite}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes flick{0%,84%{transform:scaleX(0)}87%{transform:scaleX(1) rotate(6deg)}89%{transform:scaleX(.7) rotate(-6deg)}91%{transform:scaleX(1) rotate(5deg)}94%,100%{transform:scaleX(0)}}
@keyframes blink{0%,94%{transform:scaleY(0)}96%{transform:scaleY(1)}98%,100%{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){#art .sn .sway,#art .sn .tng,#art .sn .lid{animation:none!important}.board-wrap.quake,.board-wrap.quake2{animation:none!important}}

.iconbtn.homebtn{width:auto;border-radius:999px;padding:0 14px;gap:6px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.iconbtn.homebtn[hidden]{display:none}
.iconbtn.homebtn span{font-size:17px;font-weight:700;color:inherit}
@media (max-width:380px){.iconbtn.homebtn{padding:0 10px}.iconbtn.homebtn span{font-size:15px}}

.topbar>*{min-width:0}.topbar .brand{overflow:hidden;white-space:nowrap;text-overflow:clip}
@media (max-width:420px){.topbar .brand{font-size:18px}.iconbtn.homebtn{padding:0 9px;gap:4px}.iconbtn.homebtn span{font-size:14px}}

.lab.word.xlong span{font-size:1.6cqw}
.word-big.wb-l{font-size:clamp(44px,13vw,72px)}
.word-big.wb-xl{font-size:clamp(34px,9.5vw,60px)}