/* WordBar Dictation — SushiBar (Phase 4). Ported from the frozen prototype
   v3.1 styles, scoped to .sushibar-root, using the app's own fonts (no Google
   Fonts). Reduced movement: the app setting (.sb-reduced) or the OS setting
   removes spin, hop, shake, zoom and flying items; faces, colours, badges and
   sounds stay (plan 5.7.5, D13). */
.sushibar-root{--ink:#2B2236;--muted:#6A5D72;--wall:#FFF3DF;--wall-2:#F8E2BF;--noren:#2D4778;--noren-2:#243B66;--wood:#B97A43;--wood-hi:#DDA66C;--counter:#E8BC84;
  --belt:#4E5A74;--slat:#8E9BB5;--slat-2:#7C89A4;--salmon:#FF875A;--tuna:#E5546A;--tamago:#FFCF4A;--avocado:#8CC66B;--nori:#22372C;--rice:#FFFDF6;--gold:#F5B82E;--mint:#3FB68B;--paper:#FFFFFF;--hint:#41C47B;
  --pp-ink:#2B2236;--display:"Nunito",Verdana,system-ui,sans-serif;
  flex:1;min-height:0;height:100%;max-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;isolation:isolate;z-index:0;
  background:var(--wall);color:var(--ink);font-family:"Nunito",Verdana,system-ui,sans-serif;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.sushibar-root :where(.sb-top,.sb-scene,.sb-matzone,.sb-beltzone) button{font:inherit;min-height:0;padding:0;border-radius:0;border:0;background:none;color:inherit}
.sushibar-root .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sb-hidden{display:none}

/* top bar */
.sb-top{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--noren);color:var(--paper);z-index:6;flex-shrink:0}
.sushibar-root .sb-icon{width:44px;height:44px;flex:0 0 auto;border-radius:12px;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:var(--paper);display:grid;place-items:center;cursor:pointer;font:800 18px/1 var(--display)}
.sushibar-root .sb-icon.dt-music[aria-pressed="false"]{opacity:.55}
.sb-progress{flex:1;display:flex;justify-content:center;gap:4px;min-width:0;flex-wrap:wrap}
.sb-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.4)}
.sb-dot.now{border-color:var(--tamago);background:rgba(255,207,74,.35)}
.sb-dot.done{background:var(--salmon);border-color:var(--paper)}
.sb-rounds{display:flex;gap:3px}
.sb-rounds[hidden]{display:none}
.sb-rounds span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 13px/1 var(--display);background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35)}
.sb-rounds span.now{background:var(--tamago);color:var(--ink);border-color:var(--paper)}
.sb-rounds span.done{background:var(--mint);border-color:var(--paper)}
.sb-combo{position:absolute;right:10px;top:64px;z-index:7;font:800 15px/1 var(--display);padding:6px 10px;border-radius:999px;background:var(--tamago);color:var(--ink);border:2px solid var(--ink);opacity:0;transform:scale(.6);transition:.2s;pointer-events:none}
.sb-combo.show{opacity:1;transform:scale(1)}
.sb-rush .sb-combo{background:var(--tuna);color:var(--paper);animation:sb-throb .5s infinite alternate}

/* scene: capped on tall phones, shrinks first on small ones (6.6) */
.sb-scene{position:relative;flex:1000 1 auto;min-height:118px;max-height:clamp(150px,48vh,420px);overflow:hidden;--petw:clamp(84px,15vh,128px);--catw:clamp(50px,8.8vh,76px);
  background:radial-gradient(circle at 20% 70%,rgba(255,255,255,.5) 0 30%,transparent 31%) 0 0/46px 46px,linear-gradient(var(--wall),var(--wall-2))}
.sb-noren{position:absolute;top:0;left:0;right:0;height:36px;display:grid;place-items:center;font:900 17px/1 var(--display);letter-spacing:.3em;color:var(--paper);
  background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 3px),var(--wall) calc(25% - 3px) 25%),linear-gradient(var(--noren-2),var(--noren));border-radius:0 0 6px 6px}
.sb-lantern{position:absolute;top:34px;width:24px;height:32px;transform-origin:50% -10px;animation:sb-sway 3.4s ease-in-out infinite}
.sb-lantern::before{content:"";position:absolute;left:11px;top:-8px;width:2px;height:8px;background:var(--ink)}
.sb-lantern i{display:block;width:24px;height:30px;border-radius:50%;background:repeating-linear-gradient(transparent 0 5px,rgba(0,0,0,.14) 5px 6px),radial-gradient(circle at 40% 35%,#FF8A7A,var(--tuna));border:2px solid var(--ink)}
.sb-lantern.l{left:10px}.sb-lantern.r{right:10px;animation-delay:-1.7s}
.sb-board{position:absolute;top:42px;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--wood);color:var(--paper);border:2.5px solid var(--ink);border-radius:10px;padding:4px 11px;font:900 13px/1.1 var(--display);white-space:nowrap;box-shadow:0 4px 0 rgba(43,34,54,.3);z-index:2;max-width:calc(100% - 80px);overflow:hidden;text-overflow:ellipsis}
.sb-counter{position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(var(--wood-hi) 0 6px,var(--wood) 6px);z-index:3;box-shadow:0 -2px 0 var(--ink) inset}
.sb-pet{position:absolute;bottom:12px;width:var(--petw);z-index:2}
.sb-pet svg{display:block;width:100%;height:auto;overflow:visible;animation:sb-breathe 3.4s ease-in-out infinite;transform-origin:50% 100%}
.sb-chef{left:6px}.sb-customer{right:8px}.sb-customer svg{animation-delay:-1.7s}
.sb-customer.vip::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-12px;height:10px;background:var(--tuna);border-radius:4px;z-index:-1}
.sb-tags{position:absolute;top:78px;left:44px;right:44px;display:flex;flex-wrap:wrap;justify-content:center;gap:9px 6px;z-index:1;pointer-events:none}
/* E8.1: the word tickets show at every height; with many words they get smaller (JS adds .dense / .denser) */
.sb-tags.dense{gap:8px 4px;top:74px}.sb-tags.dense .sb-tag{font-size:10.5px;padding:3px 6px 2px}
.sb-tags.denser{gap:7px 3px;top:72px;left:36px;right:36px}.sb-tags.denser .sb-tag{font-size:9.5px;padding:2px 4px 1px;letter-spacing:.03em}
.sb-tags.densest{gap:6px 3px;top:70px;left:8px;right:8px}.sb-tags.densest .sb-tag{font-size:8.5px;padding:2px 3px 1px;letter-spacing:0;border-width:1.5px}.sb-tags.densest .sb-tag::before{top:-7px;height:6px}
.sb-tag{position:relative;background:linear-gradient(#E3B07A,#C98B52);border:2px solid var(--ink);border-radius:5px;padding:4px 8px 3px;font:900 12px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);box-shadow:0 3px 0 rgba(43,34,54,.25);transform:rotate(var(--r,0deg))}
.sb-tag::before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:7px;background:var(--ink)}
.sb-tag.empty{background:rgba(255,255,255,.45);border-style:dashed;color:rgba(43,34,54,.35)}
.sb-cup{position:absolute;right:calc(var(--petw) - 4px);bottom:17px;width:36px;z-index:4}
.sb-cup svg{display:block;width:100%;overflow:visible}
.sb-cup .steam{animation:sb-steam 2.6s ease-in-out infinite}.sb-cup .steam.s2{animation-delay:-1.3s}
.sb-stars-pop{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font:900 24px/1 var(--display);color:var(--gold);text-shadow:0 2px 0 var(--ink);white-space:nowrap}
.sushibar-root .sb-bubble{position:absolute;right:calc(var(--petw) + 12px);bottom:calc(var(--petw)*.62 + 22px);z-index:5;display:flex;align-items:center;gap:7px;max-width:min(190px,calc(100% - var(--petw)*2 - var(--catw) - 24px));min-width:112px;min-height:44px;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;padding:6px 10px;font:800 14px/1.15 var(--display);cursor:pointer;box-shadow:0 4px 0 var(--ink);text-align:left}
.sb-bubble::after{content:"";position:absolute;right:-12px;bottom:10px;border:8px solid transparent;border-left:12px solid var(--ink)}
.sb-bubble::before{content:"";position:absolute;right:-7px;bottom:12px;border:6px solid transparent;border-left:9px solid var(--paper);z-index:1}
.sb-bubble:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.sb-bubble svg{width:24px;height:24px;flex:0 0 auto}
.sb-bubble .w1,.sb-bubble .w2{opacity:.25}
.sb-bubble.talking .w1{animation:sb-wavey .6s infinite}.sb-bubble.talking .w2{animation:sb-wavey .6s .15s infinite}

/* lucky cat (7.7) */
.sb-cat{position:absolute;left:calc(var(--petw) + 4px);bottom:16px;width:var(--catw);z-index:4}
.sb-cat svg{display:block;width:100%;height:auto;overflow:visible}
.sb-cat .body-g{transform-origin:40px 92px;transform-box:view-box}
.sb-cat .paw{transform-origin:21px 46px;transform-box:view-box;animation:sb-beckon 1.1s ease-in-out infinite;transition:transform .2s}
.sb-cat .tail{transform-origin:63px 78px;transform-box:view-box;animation:sb-tailflick 2.8s ease-in-out infinite}
.sb-cat .ear-l{transform-origin:26px 20px;transform-box:view-box;transition:transform .25s}
.sb-cat .ear-r{transform-origin:54px 20px;transform-box:view-box;transition:transform .25s}
.sb-cat .eyes-open{transform-origin:40px 31px;transform-box:view-box;animation:sb-catblink 4.5s infinite}
.sb-cat .pupils{transition:transform .35s}
.sb-cat .bell{transform-origin:40px 50px;transform-box:view-box}
.sb-cat .eyes-happy,.sb-cat .eyes-wink,.sb-cat .eyes-sleep,.sb-cat .brows,.sb-cat .mouth-open,.sb-cat .mouth-frown,.sb-cat .sweat,.sb-cat .zzz{display:none}
.sb-cat.happy .paw{animation-duration:.55s}
.sb-cat.happy .eyes-open{display:none}.sb-cat.happy .eyes-happy{display:inline}
.sb-cat.happy .bell{animation:sb-jingle .25s ease-in-out infinite}
.sb-cat.worried .paw{animation:none;transform:rotate(40deg)}
.sb-cat.worried .ear-l{transform:rotate(-18deg)}.sb-cat.worried .ear-r{transform:rotate(18deg)}
.sb-cat.worried .eyes-happy{display:none}.sb-cat.worried .eyes-open,.sb-cat.worried .brows,.sb-cat.worried .mouth-frown{display:inline}
.sb-cat.worried .mouth-normal{display:none}
.sb-cat.worried .sweat{display:inline;animation:sb-sweat .9s ease-in infinite}
.sb-cat.worried .body-g{animation:sb-shiver .12s linear 4}
.sb-cat.cheer .eyes-open{display:none}.sb-cat.cheer .eyes-happy{display:inline}
.sb-cat.cheer .body-g{animation:sb-cathop .45s ease-out 2}
.sb-cat.cheer .bell{animation:sb-jingle .2s ease-in-out infinite}
.sb-cat.dance .eyes-open{display:none}.sb-cat.dance .eyes-happy{display:inline}
.sb-cat.dance .body-g{animation:sb-catsway .4s ease-in-out 4}
.sb-cat.dance .paw{animation-duration:.3s}
.sb-cat.lucky .eyes-open{display:none}.sb-cat.lucky .eyes-happy{display:inline}
.sb-cat.lucky .body-g{animation:sb-jackpot .9s ease-in-out 2}
.sb-cat.lucky .paw{animation-duration:.2s}
.sb-cat.lucky .bell{animation:sb-jingle .15s ease-in-out infinite}
.sb-cat.wink .eyes-open,.sb-cat.wink .eyes-happy{display:none}.sb-cat.wink .eyes-wink{display:inline}
.sb-cat.yawn .eyes-open,.sb-cat.yawn .eyes-happy{display:none}.sb-cat.yawn .eyes-sleep,.sb-cat.yawn .mouth-open{display:inline}.sb-cat.yawn .mouth-normal{display:none}
.sb-cat.yawn .body-g{animation:sb-stretch 1.4s ease-in-out}.sb-cat.yawn .paw{animation:none;transform:rotate(-12deg)}
.sb-cat.watch .pupils{transform:translate(1.8px,2.6px)}
.sb-cat.sleep .eyes-open,.sb-cat.sleep .eyes-happy{display:none}.sb-cat.sleep .eyes-sleep,.sb-cat.sleep .zzz{display:inline}
.sb-cat.sleep .paw{animation:none;transform:rotate(30deg)}
.sb-cat.sleep .body-g{animation:sb-snooze 2.6s ease-in-out infinite}
.sb-cat .zzz text{animation:sb-zfloat 2.4s ease-out infinite}.sb-cat .zzz text:nth-child(2){animation-delay:-1.2s}

/* word ticket and mat (B05: wraps, minimum readable slot) */
.sb-matzone{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px;background:var(--counter);border-top:2px solid var(--ink);z-index:4;flex-shrink:0}
/* E9 (D32): the ear and eye buttons sit beside the word line, so the mat gets the full width */
.sb-ticket{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;min-height:46px}
.sb-tmid{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.sb-target{font:900 clamp(20px,6vw,28px)/1.05 var(--display);letter-spacing:.05em;text-align:center;text-transform:uppercase;overflow-wrap:anywhere;max-width:100%}
.sb-target.chunked{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;letter-spacing:0}
.sb-target .sb-tvis{display:contents}
/* E8.1: like the artifact, chunks are told apart by letter colour only (no blocks) */
.sb-target .pp-target-chunk{padding:0 .06em;border:0;border-radius:0;background:none!important;box-shadow:none}
.sb-target .pp-chunk-0{color:#D24D2B}.sb-target .pp-chunk-1{color:#2D6FB0}.sb-target .pp-chunk-2{color:#2F8F5B}.sb-target .pp-chunk-3{color:#8B4FB8}
.sb-target.chunked{gap:0 .22em}
.sb-target.sb-listen{font:800 17px/1.2 var(--display);color:var(--muted);text-transform:none;letter-spacing:0}
.sb-note{margin:2px 0 0;min-height:0;font:800 13px/1.2 var(--display);color:var(--muted)}
.sb-note:empty{display:none}
.sb-matrow{display:flex;align-items:center;gap:8px}
.sb-mat{flex:1;min-width:0;min-height:44px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:4px 3px;padding:6px;border-radius:12px;border:2.5px solid var(--ink);
  background:repeating-linear-gradient(90deg,#ECDDAE 0 9px,#CDB67B 9px 11px);box-shadow:0 4px 0 rgba(43,34,54,.35);box-sizing:border-box}
.sb-slot{flex:0 0 var(--sw,32px);width:var(--sw,32px);height:var(--sh,36px);border:2.5px dashed rgba(43,34,54,.4);border-radius:10px;display:grid;place-items:center;position:relative;background:rgba(255,253,246,.4);box-sizing:border-box;font:900 var(--sf,20px)/1 var(--display);text-transform:uppercase}
.sb-break{flex:0 0 100%;height:0}   /* E9: the two-row split (sizeMat) */
.sb-slot.fixed{flex:0 0 auto;width:auto;min-width:12px;border:0;background:none;font-size:var(--sf,20px)}
.sb-long-word .sb-target{font-size:clamp(18px,5vw,24px)}
.sb-xlong-word .sb-target{font-size:clamp(15px,4.2vw,20px);letter-spacing:.02em}
.sb-xlong-word .sb-matrow{flex-wrap:wrap;justify-content:center}
.sushibar-root.sb-xlong-word{overflow-y:auto}
.sb-xlong-word .sb-scene{min-height:64px;max-height:84px}.sb-xlong-word .sb-tags,.sb-xlong-word .sb-lantern,.sb-xlong-word .sb-bubble{display:none}
.sb-xlong-word .sb-mat{gap:3px}
.sb-xlong-word .sb-mat{order:-1;flex:1 1 100%}
.sb-slot.current{border-style:solid;border-color:var(--salmon);background:rgba(255,253,246,.85);animation:sb-pulse 1.1s ease-in-out infinite}
.sb-ghost{opacity:0;color:var(--ink)}
.sb-slot.reveal-now .sb-ghost{opacity:1!important;color:#C2187A;text-shadow:0 0 10px rgba(255,141,166,.9)}
.sb-slot.reveal-now{border-color:#FF8DA6!important;background:#FFE4EC!important}
.sb-r1 .sb-slot:not(.filled) .sb-ghost,.sb-peek .sb-slot:not(.filled) .sb-ghost{opacity:.3}
/* E8.1 (Nigel): a placed letter is a plain white tile — no sushi colour on top */
.sb-slot.filled{border:2.5px solid var(--ink);background:#fff;animation:none;box-shadow:0 2px 0 rgba(43,34,54,.25)}
.sb-slot.filled .sb-ghost{opacity:1}
.sushibar-root .sb-side{width:44px;height:44px;flex:0 0 auto;border-radius:14px;border:2.5px solid var(--ink);background:var(--paper);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.sb-side:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.sb-side svg{width:26px;height:26px}
.sb-mat.sb-join{gap:0}
.sb-roll{flex:1;min-height:50px;border-radius:28px;border:2.5px solid var(--ink);position:relative;display:flex;align-items:center;justify-content:center;padding:4px 10px 4px 52px;box-sizing:border-box;background:repeating-linear-gradient(90deg,var(--nori) 0 14px,#2C4637 14px 16px)}
.sb-cap{position:absolute;left:-2px;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:2.5px solid var(--ink);box-sizing:border-box;background:radial-gradient(circle,var(--tuna) 0 18%,var(--avocado) 19% 26%,var(--rice) 27% 64%,var(--nori) 65%)}
.sb-roll span{text-transform:uppercase;letter-spacing:.04em;background:var(--rice);border:2px solid var(--ink);border-radius:10px;padding:2px 10px;font:900 20px/1.2 var(--display);overflow-wrap:anywhere;text-align:center}

/* belt */
.sb-beltzone{position:relative;background:var(--belt);padding:6px 0 0;border-top:3px solid var(--ink);z-index:4;flex:1 0 auto;display:flex;flex-direction:column}   /* grows only once the scene has reached its cap (scene grow 1000:1) */
.sb-track{position:relative;height:clamp(108px,15vh,150px);overflow:hidden;touch-action:none;
  background:linear-gradient(rgba(0,0,0,.18),transparent 14px,transparent calc(100% - 10px),rgba(0,0,0,.2)),repeating-linear-gradient(90deg,var(--slat) 0 46px,var(--slat-2) 46px 48px);
  background-position:0 0,var(--off,0px) 0;border-top:4px solid #B9C3D6;border-bottom:4px solid #3A4459}
.sb-rush .sb-track{background:linear-gradient(rgba(255,135,90,.3),transparent 30%,transparent 70%,rgba(255,135,90,.3)),repeating-linear-gradient(90deg,var(--slat) 0 46px,var(--slat-2) 46px 48px);background-position:0 0,var(--off,0px) 0}
.sb-frozen .sb-track::after{content:"Listening…";position:absolute;left:50%;top:6px;transform:translateX(-50%);font:900 13px/1 var(--display);background:var(--ink);color:var(--paper);padding:5px 10px;border-radius:999px;z-index:5}
.sb-slowmo .sb-track::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(229,84,106,.22),rgba(255,207,74,.22),rgba(140,198,107,.22),rgba(59,143,224,.22),rgba(139,108,201,.22))}
.sb-slowmo:not(.sb-frozen) .sb-track::after{content:"SLOW-MO";position:absolute;right:8px;top:6px;font:900 12px/1 var(--display);background:#8B6CC9;color:#fff;padding:4px 8px;border-radius:999px;z-index:5}
.sb-rollers{display:flex;justify-content:space-around;padding:5px 6px 0}
.sb-rollers i{width:16px;height:16px;border-radius:50%;border:2px solid #23293A;background:conic-gradient(#C9D1E0 0 25%,#8893AA 0 50%,#C9D1E0 0 75%,#8893AA 0);transform:rotate(var(--rot,0deg))}
.sb-footer{display:flex;justify-content:center;padding:4px 8px calc(6px + env(safe-area-inset-bottom,0px));color:var(--paper)}
.sb-footer .dt-pace{display:inline-flex;align-items:center;gap:6px}
.sushibar-root .dt-pace-btn{min-width:44px;min-height:40px;border-radius:12px;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff;font:900 20px/1 var(--display)}
.sb-footer .dt-pace-label{font:800 13px/1 var(--display);min-width:5.5em;text-align:center}
.sushibar-root .sb-plate{position:absolute;left:0;bottom:6px;height:98px;width:var(--pw);padding:0;cursor:grab;touch-action:none;display:flex;justify-content:center;align-items:flex-end;will-change:transform;z-index:1;background:none;border:0}
.sb-plate:focus-visible{outline:3px solid var(--tamago);outline-offset:-2px;border-radius:14px}
.sb-plate.lifted{z-index:6;cursor:grabbing}
.sb-dish{position:absolute;bottom:0;left:3px;right:3px;height:24px;border-radius:50%;border:2.5px solid var(--ink);box-sizing:border-box;background:radial-gradient(ellipse at 50% 42%,var(--paper) 0 42%,#EDE6DA 43% 58%,var(--rim) 59%);box-shadow:0 5px 0 rgba(0,0,0,.25)}
.sb-plate.golden .sb-dish{background:radial-gradient(ellipse at 50% 42%,#FFF7D6 0 42%,#FBE6A0 43% 58%,var(--gold) 59%);box-shadow:0 5px 0 rgba(0,0,0,.25),0 0 24px 10px rgba(245,184,46,.9)}
.sb-plate.golden .sb-rice{background:linear-gradient(#FFF6D0,#FFE59A);border-color:#8A5A00}
.sb-plate.rainbow .sb-rice{box-shadow:0 0 0 3px #fff,0 0 0 6px #8B6CC9,0 0 18px 8px rgba(255,255,255,.9)}
.sb-plate.rainbow .sb-dish{background:radial-gradient(ellipse at 50% 42%,var(--paper) 0 42%,#EDE6DA 43% 54%,transparent 55%),conic-gradient(#E5546A,#FF875A,#FFCF4A,#8CC66B,#3B8FE0,#8B6CC9,#E5546A);box-shadow:0 5px 0 rgba(0,0,0,.25),0 0 18px 5px rgba(255,255,255,.9)}
.sb-badge{position:absolute;top:2px;right:0;z-index:3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:900 15px/1 var(--display);border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink);animation:sb-badge .7s ease-in-out infinite alternate;color:var(--ink)}
.sb-plate.golden .sb-badge{background:var(--gold)}
.sb-plate.rainbow .sb-badge{background:conic-gradient(#E5546A,#FF875A,#FFCF4A,#8CC66B,#3B8FE0,#8B6CC9,#E5546A)}
.sb-octo-plate .sb-badge{background:#FF8DA6}
.sb-sushi{position:relative;z-index:1;margin-bottom:11px;width:calc(var(--pw) - 16px);display:flex;flex-direction:column;align-items:center;animation:sb-wobble 2.6s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
.sb-plate.lifted .sb-sushi{animation:none;transform:rotate(-8deg) scale(1.08)}
.sb-topping{position:relative;z-index:2;width:100%;height:22px;margin-bottom:-7px;border:2.5px solid var(--ink);border-radius:14px 14px 7px 7px;box-sizing:border-box;background:var(--top)}
.t-salmon{--top:repeating-linear-gradient(115deg,#FF8C5E 0 7px,#FFC5A3 7px 9.5px)}
.t-tuna{--top:linear-gradient(160deg,#F06B7E,#D9475E)}
.t-tamago{--top:linear-gradient(90deg,var(--tamago) 0 38%,var(--nori) 38% 62%,var(--tamago) 62%)}
.t-avocado{--top:repeating-linear-gradient(100deg,#9BD47A 0 8px,#7CB85C 8px 10px)}
.t-ebi{--top:repeating-linear-gradient(90deg,#FFA987 0 9px,#FFE1D2 9px 12px)}
.sb-eye{position:absolute;top:7px;width:4px;height:5px;border-radius:50%;background:var(--ink);animation:sb-blink 4.2s infinite;animation-delay:var(--d,0s)}
.sb-eye.l{left:calc(50% - 10px)}.sb-eye.r{right:calc(50% - 10px)}
.sb-mouth{position:absolute;top:11px;left:50%;width:6px;height:3px;margin-left:-3px;border:2px solid var(--ink);border-top:0;border-radius:0 0 8px 8px}
.t-tamago .sb-eye,.t-tamago .sb-mouth{display:none}
.sb-rice{position:relative;z-index:1;width:94%;height:44px;box-sizing:border-box;border:2.5px solid var(--ink);border-radius:11px 11px 16px 16px;padding-top:6px;
  background:radial-gradient(circle at 30% 60%,rgba(0,0,0,.05) 0 2px,transparent 3px) 0 0/11px 9px,var(--rice);display:grid;place-items:center;font:900 30px/1 var(--display);color:var(--ink);white-space:nowrap;text-transform:uppercase}
.sb-chunks .sb-rice{font-size:22px}
.sb-plate.t5 .sb-rice{font-size:18px}.sb-plate.t6 .sb-rice{font-size:15px}.sb-plate.t7 .sb-rice{font-size:13px}
.sb-sushi.dizzy .sb-eye{background:none;animation:none;width:auto;height:auto;top:2px;font:900 11px/1 var(--display)}
.sb-sushi.dizzy .sb-eye::before{content:"×"}
.sb-sushi.happy .sb-eye{height:3px;border-radius:4px 4px 0 0;background:none;border:2px solid var(--ink);border-bottom:0;width:5px;animation:none}
.sb-plate.empty .sb-sushi{visibility:hidden}
.sb-plate.hint .sb-rice{box-shadow:0 0 0 4px var(--hint),0 0 16px 6px rgba(65,196,123,.8)}
.sb-plate.hint .sb-sushi{animation:sb-hop .6s ease-in-out infinite}
.sb-plate.wrong .sb-sushi{animation:sb-wiggle .32s}
.sb-plate.spin .sb-sushi{animation:sb-spinIn .45s ease-out}
.sb-extra{position:relative;z-index:1;margin-bottom:10px}
.sb-wasabi{width:54px;height:42px;border:2.5px solid var(--ink);border-radius:46% 54% 40% 40%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#C6EB8C,#6FB43B);display:grid;place-items:center;font:900 16px/1 var(--display);animation:sb-wobble 1.6s ease-in-out infinite}
.sb-octo svg{display:block;width:72px;height:auto;animation:sb-hop 1.1s ease-in-out infinite;overflow:visible}
.sb-octo .tent{animation:sb-tent .7s ease-in-out infinite alternate;transform-origin:50% 0;transform-box:fill-box}
.sb-octo .tent:nth-child(2n){animation-delay:-.35s}

/* effects layer */
.sb-fx{position:absolute;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.sb-flying{position:absolute;z-index:40;margin:0;animation:none!important;pointer-events:none}
.sb-coin{position:absolute;width:20px;height:27px;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,#FFF1B0,#F5B82E 60%,#C98A12);border:1.5px solid #8A5A00;box-sizing:border-box}
.sb-confetti{position:absolute;width:8px;height:12px;border-radius:2px}
.sb-heart{position:absolute;font:900 26px/1 var(--display);color:var(--tuna)}
.sb-spark{position:absolute;width:14px;height:14px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.sb-flash{position:absolute;inset:0;pointer-events:none}
.sb-ink{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 40%,#4A3A5E,#2B2236 60%,rgba(43,34,54,.85) 70%,transparent 72%)}
.sb-bubble.pop{animation:sb-bubblePop .35s}
/* E8.1: with very many word tickets the speech bubble gets compact so the tickets stay readable */
.sb-scene.sb-crowded .sb-bubble{font-size:11.5px;line-height:1.1;padding:3px 8px;min-height:34px;gap:4px}.sb-scene.sb-crowded .sb-bubble svg{width:18px;height:18px}
@keyframes sb-bubblePop{40%{transform:scale(1.1) rotate(-2deg)}}
.sb-peekbig{position:absolute;transform:translate(-50%,-100%);z-index:36;background:#FF8DA6;color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:6px 16px;font:900 40px/1 var(--display);text-transform:uppercase;box-shadow:0 5px 0 var(--ink)}
.sb-float{position:absolute;transform:translate(-50%,-50%);font:900 26px/1 var(--display);color:var(--paper);white-space:nowrap;
  text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 4px 0 var(--ink)}
.sb-float.big{font-size:36px;color:var(--tamago)}
.sb-banner{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:35;background:var(--noren);color:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:10px 18px;text-align:center;box-shadow:0 6px 0 var(--ink);pointer-events:none;white-space:nowrap;max-width:92%}
.sb-banner b{display:block;font:900 24px/1.05 var(--display)}
.sb-banner span{font:800 14px/1.2 var(--display);opacity:.9}

/* cards (shared final check, repair and results use .pp-overlay/.pp-card) */
.sushibar-root .pp-overlay{position:absolute;inset:0;background:rgba(43,34,54,.5);display:grid;place-items:center;padding:12px;z-index:50}
.sushibar-root .pp-overlay.hidden{display:none}
.sushibar-root .pp-card{width:min(100%,420px);max-height:calc(100% - 6px);overflow:auto;text-align:center;background:var(--wall);border:3px solid var(--ink);border-radius:20px;padding:16px;box-shadow:0 6px 0 rgba(43,34,54,.35);position:relative;box-sizing:border-box}
.sushibar-root .pp-card h1,.sushibar-root .pp-card h2{font-family:var(--display);color:var(--noren);margin:4px 0 8px;overflow-wrap:anywhere}
.sushibar-root .pp-card button{min-height:48px;margin:5px;border:3px solid var(--ink);border-radius:15px;background:var(--salmon);color:var(--ink);padding:8px 16px;font:900 17px/1.1 var(--display);box-shadow:0 4px 0 var(--ink);cursor:pointer}
.sushibar-root .pp-card button.secondary{background:#fff;color:var(--ink)}
.sushibar-root .pp-card button:disabled{opacity:.48;cursor:not-allowed}
.sushibar-root .pp-card .dt-overlay-music{display:block;min-width:44px;margin:0;background:#fff3cf;color:var(--ink)}   /* E9.1: placed in the card's top-left corner (game.css) */
.sushibar-root .sb-word-done{text-transform:uppercase;letter-spacing:.04em}
.sushibar-root .pp-overlay:not(.hidden)~.sb-combo,.sushibar-root .sb-combo.off{opacity:0}
.sushibar-root .pp-card .dt-type-actions button{flex:1 1 130px}
.sushibar-root .dt-type-card .pp-target,.sushibar-root .dt-recap-target{color:var(--tuna)}
.sushibar-root .dt-results-table tbody th{text-transform:uppercase;overflow-wrap:anywhere}
.sushibar-root .dt-results-table{font-size:.78rem}
.sb-stars-cell{color:var(--gold);letter-spacing:1px;text-shadow:0 1px 0 var(--ink)}
.sb-star-off{color:#B9AFC0;text-shadow:none}
.sb-extras{display:grid;gap:10px;margin-top:10px;text-align:left}
.sb-statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sb-statrow div{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:8px 4px;text-align:center}
.sb-statrow b{display:block;font:900 22px/1 var(--display)}
.sb-statrow span{font:700 12px/1.2 var(--display);color:var(--muted)}
.sb-tricky{font:700 14px/1.5 var(--display);background:rgba(255,255,255,.75);border-radius:14px;padding:10px 12px;border:2px dashed rgba(43,34,54,.35)}
.sb-tricky s{color:var(--tuna)}
.sb-tricky b,.sb-tricky s{text-transform:uppercase}
.sb-celebrate{text-align:center;line-height:1}
.sb-celebrate .sb-cat{position:static;display:inline-block;width:54px}
.sb-celebrate.big .sb-cat{width:66px}
.sb-stars{color:var(--gold);font-size:24px;text-shadow:0 2px 0 #ffe2a0;letter-spacing:5px}
.sb-intro{text-align:left}.sb-intro h2,.sb-intro .dt-headphones{text-align:center}
.sb-intro ol{padding-left:1.3em;margin:6px 0}.sb-intro li{margin:4px 0}
.sb-intro .sb-small{font-size:.85rem;color:var(--muted)}
.sb-intro button{display:block;margin:12px auto 6px!important}
@media (max-height:640px){.sb-intro{font-size:14px}.sb-intro p{margin:6px 0}.sb-intro .dt-headphones{font-size:1.6rem}.sb-intro h2{font-size:1.25rem}}
.sushibar-root .pp-toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:45;pointer-events:none;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:9px 16px;font:900 15px/1.25 var(--display);opacity:0;max-width:86%;text-align:center}
.sushibar-root .pp-toast.show{animation:sb-toast 1.2s ease}
.sushibar-root .pp-toast.show.long{animation-duration:2.5s}

@keyframes sb-toast{0%{opacity:0;transform:translate(-50%,-40%)}12%,80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-56%)}}
@keyframes sb-wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes sb-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes sb-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}70%{transform:translateY(0) scale(1.06,.94)}}
@keyframes sb-wiggle{0%,100%{transform:translateX(0) rotate(0)}20%,60%{transform:translateX(-2px) rotate(-3deg)}40%,80%{transform:translateX(2px) rotate(3deg)}}
@keyframes sb-spinIn{from{transform:rotate(-200deg) scale(.3)}to{transform:rotate(0) scale(1)}}
@keyframes sb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,135,90,.6)}50%{box-shadow:0 0 0 6px rgba(255,135,90,0)}}
@keyframes sb-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes sb-wavey{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes sb-throb{to{transform:scale(1.08)}}
@keyframes sb-beckon{0%,100%{transform:rotate(0)}50%{transform:rotate(24deg)}}
@keyframes sb-tailflick{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-14deg)}90%{transform:rotate(6deg)}}
@keyframes sb-catblink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes sb-cathop{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-14px) scale(.95,1.06)}75%{transform:translateY(0) scale(1.06,.94)}}
@keyframes sb-catsway{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes sb-jackpot{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-26px) rotate(180deg) scale(1.1)}70%{transform:translateY(-10px) rotate(360deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes sb-stretch{0%,100%{transform:scale(1,1)}45%{transform:scale(.94,1.1)}}
@keyframes sb-snooze{0%,100%{transform:scale(1,1) rotate(0)}50%{transform:scale(1.03,.97) rotate(-3deg)}}
@keyframes sb-shiver{0%,100%{transform:translateX(0)}50%{transform:translateX(-1.5px)}}
@keyframes sb-sweat{0%{transform:translateY(0);opacity:1}100%{transform:translateY(8px);opacity:0}}
@keyframes sb-zfloat{0%{transform:translate(0,0);opacity:0}25%{opacity:1}100%{transform:translate(8px,-16px);opacity:0}}
@keyframes sb-jingle{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes sb-steam{0%{transform:translateY(4px);opacity:0}30%{opacity:.85}100%{transform:translateY(-14px);opacity:0}}
@keyframes sb-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes sb-badge{from{transform:scale(1) rotate(-8deg)}to{transform:scale(1.15) rotate(8deg)}}
@keyframes sb-tent{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}

/* one reduced-movement rule (B10): the app setting or the OS setting */
.sb-reduced .sb-cat .body-g,.sb-reduced .sb-sushi,.sb-reduced .sb-lantern,.sb-reduced .sb-eye,.sb-reduced .sb-wasabi,.sb-reduced .sb-octo svg,.sb-reduced .sb-octo .tent,.sb-reduced .sb-cat .paw,.sb-reduced .sb-cat .tail,.sb-reduced .sb-pet svg,.sb-reduced .sb-badge,.sb-reduced .sb-cup .steam,.sb-reduced .sb-slot.current,.sb-reduced .sb-combo,.sb-reduced .sb-cat .bell,.sb-reduced .sb-cat .zzz text,.sb-reduced .sb-bubble .w1,.sb-reduced .sb-bubble .w2{animation:none!important}
.sb-reduced .sb-plate.spin .sb-sushi,.sb-reduced .sb-plate.hint .sb-sushi,.sb-reduced .sb-plate.wrong .sb-sushi{animation:none!important}
@media (prefers-reduced-motion: reduce){.sushibar-root *{animation:none!important;transition:none!important}}

/* small and short screens: the wall shrinks first (6.6) */
/* E8.1: pets and cat stay big on ordinary phones (they follow the height: about 104 px and 60 px at 390x690); the word tickets stay */
@media (max-height:700px){.sb-scene{min-height:104px}.sb-track{height:102px}.sushibar-root .sb-plate{height:92px}.sb-ticket{min-height:40px}}
@media (max-height:600px){.sb-scene{min-height:96px;max-height:190px;--petw:76px;--catw:46px}.sb-tags{top:58px}.sushibar-root .sb-bubble{display:none}.sb-banner b{font-size:18px}.sb-banner span{font-size:12px}.sb-banner{padding:6px 12px}.sb-cup{display:none}.sb-lantern{display:none}.sb-noren{height:28px;font-size:14px}.sb-board{top:32px}.sb-footer{padding-top:2px}.sushibar-root .dt-pace-btn{min-height:36px}}
@media (max-width:360px){.sushibar-root .sb-side{width:42px;height:42px}.sb-ticket{grid-template-columns:42px minmax(0,1fr) 42px}}
@media (max-height:470px){body.in-game .sushibar-root{min-height:520px}.sb-scene{--petw:64px;--catw:40px}.sb-tags{display:none}}
/* Phase 8 (X22, both games): the music button on the word card looks the same
   in both games — dark icon on cream when music is on, on white when off
   (it was white on salmon in both states, contrast 2.4:1). */
.sushibar-root .pp-card button.dt-music{color:var(--ink);background:#fff3cf;border:2px solid var(--ink)}
.sushibar-root .pp-card button.dt-music[aria-pressed="false"]{background:#fff}
/* E8.1 (E8-05): SushiBar's capital words need a little more room on small phones */
@media (max-width:360px){.sushibar-root .dt-results-table thead th:nth-child(1){width:37%}.sushibar-root .dt-results-table thead th:nth-child(2){width:25%}.sushibar-root .dt-results-table thead th:nth-child(3){width:20%}.sushibar-root .dt-results-table thead th:nth-child(4){width:18%}.sushibar-root .dt-results-table thead th{font-size:.58rem}.sushibar-root .dt-results-table tbody th{letter-spacing:0;font-size:.74rem;padding-left:4px;padding-right:2px}}
/* E9.9 (independent review R-02): the ✕ must be tappable in every state. The
   overlay (z 50) used to cover the whole game, including the top bar, so a
   finger could not reach ✕ during Type it, the final check, repair, a voice
   failure or the results. Now the top bar sits above the overlay (as Pet Pop's
   ✕ does) and the overlay's dimmed backdrop starts just below it. The Undo bar
   is above the overlay too; the pause sheet (z 1000) stays above everything. */
.sushibar-root .sb-top{position:relative;z-index:51}
.sushibar-root .pp-overlay{top:var(--sb-top-h,0px)}
.sushibar-root .dt-undo{z-index:52}
/* E9.9 (review R-06): fitTarget() keeps the word line on one line (at 14 px or more) */
.sushibar-root .sb-target.sb-fit{white-space:nowrap;flex-wrap:nowrap;overflow-wrap:normal}
/* E9.12 (Nigel, 8 Oct): the round clock (40% of Pet Pop), -2 for a wrong piece,
   the last 5 seconds; E9.18 wrong pieces shake on the plate */
.sb-clock{position:absolute;left:58px;right:58px;top:-11px;height:20px;display:none;align-items:center;gap:6px;z-index:6;pointer-events:none}
.sushibar-root.sb-timed .sb-clock{display:flex}
.sb-clock-num{min-width:30px;height:20px;padding:0 6px;box-sizing:border-box;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:900 13px/16px var(--display);text-align:center}
.sb-clock-track{position:relative;flex:1;height:10px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);overflow:hidden}
.sb-clock-fill{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#3FB68B,#FFCF4A,#E5546A)}
.sushibar-root.sb-overtime .sb-clock-num{background:var(--tamago)}
.sushibar-root.sb-hurry .sb-clock-num{background:#E5546A;color:var(--paper);animation:sbClockHurry 1s ease-in-out infinite}
@keyframes sbClockHurry{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}}
.sb-clock.sb-clock-hit .sb-clock-track{animation:sbClockHit 420ms ease}
@keyframes sbClockHit{0%,100%{box-shadow:none}35%{box-shadow:0 0 0 4px rgba(229,84,106,.55)}}
.sb-clock-drop{position:absolute;left:4px;top:16px;font:900 18px/1 var(--display);color:#E5546A;text-shadow:0 1px 0 var(--paper);animation:sbClockDrop 850ms ease-out forwards}
@keyframes sbClockDrop{0%{opacity:0;transform:translateY(-6px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(22px) scale(.9)}}
@media (max-width:360px){.sb-clock{left:52px;right:52px}}
@media (prefers-reduced-motion:reduce){.sushibar-root.sb-hurry .sb-clock-num{animation:none}.sb-clock-drop{animation:sbFadeOnly 850ms ease-out forwards}}
.sushibar-root.sb-reduced.sb-hurry .sb-clock-num{animation:none}.sushibar-root.sb-reduced .sb-clock-drop{animation:sbFadeOnly 850ms ease-out forwards}
@keyframes sbFadeOnly{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* ===== E9.16 (Nigel, 9 Oct): the drawn sushi =====
   The topping is a picture (sushi-art.js); the rice block, plate and letter are
   the game's own, so every sushi has the same rice and the letter never moves
   on it. The topping sits DOWN on the rice and covers its top edge by --ol. */
.sb-sushi.sb-art{--ol:9px;width:50px;margin-bottom:12px}
.sb-art-top{position:relative;z-index:2;flex:none;width:var(--tw);height:var(--th);margin-bottom:calc(-1 * (var(--ov) + var(--ol)));transform:translateX(var(--dx));
  /* E10.15: longhands, not the "background:" shorthand. On iPhone (WebKit) the shorthand
     with var(--idle) left resting sushi with no topping; the longhand (as used by the
     hint/picked-up faces below) always showed. */
  background-image:var(--idle);background-position:center bottom;background-size:100% 100%;background-repeat:no-repeat;
  pointer-events:none;animation:sb-bob 2.2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes sb-bob{0%,100%{transform:translate(var(--dx),0)}50%{transform:translate(var(--dx),-1.5px)}}
/* faces, lowest to highest priority: resting, picked up / hinted, cheering, correct (flying), wrong */
.sb-plate.lifted .sb-art-top,.sb-plate.hint .sb-art-top{background-image:var(--up)}
.sb-sushi.sb-art.cheer .sb-art-top{background-image:var(--excited)}
.sb-sushi.sb-art.happy .sb-art-top{background-image:var(--excited)}
.sb-sushi.sb-art.dizzy .sb-art-top{background-image:var(--surprised)}
.sb-sushi.sb-art.concerned:not(.happy):not(.cheer) .sb-art-top{background-image:var(--surprised)}
.sb-sushi.sb-art.cheer{animation:sb-cheer .7s ease-out}
@keyframes sb-cheer{0%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}55%{transform:translateY(0) scale(1.05,.95)}75%{transform:translateY(-4px)}}
/* the one standard rice block (50 x 46), in the drawing's soft cream look */
.sb-sushi.sb-art .sb-rice{width:50px;height:46px;padding-top:calc(var(--ol) - 2px);border-radius:6px 6px 14px 14px;font-size:27px;
  background:radial-gradient(ellipse 80% 75% at 42% 45%,#FFFEFA 0 55%,#F4EEE3 100%);box-shadow:inset -3px -3px 0 rgba(222,212,196,.55)}
.sb-plate.t5 .sb-sushi.sb-art .sb-rice{font-size:17px}.sb-plate.t6 .sb-sushi.sb-art .sb-rice,.sb-plate.t7 .sb-sushi.sb-art .sb-rice{font-size:14px}
.sb-plate.golden .sb-sushi.sb-art .sb-rice{background:linear-gradient(#FFF6D0,#FFE59A);border-color:#8A5A00}
.sb-plate.rainbow .sb-sushi.sb-art .sb-rice{box-shadow:0 0 0 3px #fff,0 0 0 6px #8B6CC9,0 0 18px 8px rgba(255,255,255,.9)}
.sb-plate.hint .sb-sushi.sb-art .sb-rice{box-shadow:0 0 0 4px var(--hint),0 0 16px 6px rgba(65,196,123,.8)}
.sb-reduced .sb-art-top,.sb-reduced .sb-sushi.sb-art.cheer{animation:none!important}
@media (prefers-reduced-motion:reduce){.sb-art-top,.sb-sushi.sb-art.cheer{animation:none!important}}

/* E9.18: only the eyes close. One CSS animation per topping, naturally staggered,
   silent and paused with the game. */
.sb-art-top.sb-blink-ready::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--blink-idle);background-position:center bottom;background-size:100% 100%;background-repeat:no-repeat;opacity:0;   /* E10.15: longhands (see .sb-art-top) */
  animation:sb-soft-blink var(--blink-cycle,6s) linear infinite;animation-delay:var(--blink-offset,0s)}
/* E9.22: only the resting calm face blinks (pre-made frame); any other face shows no blink */
.sb-plate.lifted .sb-blink-ready::after,.sb-plate.hint .sb-blink-ready::after,.sb-plate.empty .sb-blink-ready::after,
.sb-sushi.cheer .sb-blink-ready::after,.sb-sushi.happy .sb-blink-ready::after,
.sb-sushi.dizzy .sb-blink-ready::after,.sb-sushi.concerned .sb-blink-ready::after{display:none}
@keyframes sb-soft-blink{0%,91%,100%{opacity:0}94%,96%{opacity:1}}
.dt-paused .sb-blink-ready::after{animation-play-state:paused}
.sb-reduced .sb-blink-ready::after{animation:none!important;opacity:0}
@media(prefers-reduced-motion:reduce){.sb-blink-ready::after{animation:none!important;opacity:0}}

/* E9.25: pace controls keep a comfortable touch target on short screens. */
.sushibar-root .dt-pace-btn{min-height:44px}
.sb-reduced .sb-plate.wrong .sb-dish{filter:brightness(.88)}
.sb-plate.wrong .sb-sushi.sb-art{animation:sb-wiggle .32s}
/* E10.7: rigged pets breathe through their own idle, so the old whole-picture breathing is off for them */
.sb-pet .pet-rig-body svg{animation:none}
.sb-pet .pet-rig-body{width:116%;margin:0 -8%}
/* E10.10 (Nigel, 26 Oct): a floor and a small, simple table. The pets stand on a plank floor
   either side of the table; the lucky cat (a little smaller) and the tea sit on the table. */
.sb-scene{--floorh:22px;--tableh:calc(var(--petw)*.38)}
.sb-counter{height:var(--floorh);background:repeating-linear-gradient(90deg,#A06A3B 0 52px,#8E5A30 52px 54px),#A06A3B;box-shadow:0 2px 0 var(--ink) inset,0 5px 0 rgba(255,255,255,.12) inset}
.sb-table{position:absolute;left:calc(var(--petw) + 6px);right:calc(var(--petw) + 6px);bottom:calc(var(--floorh) - 4px);height:var(--tableh);z-index:1;pointer-events:none}
.sb-table svg{display:block;width:100%;height:100%;overflow:visible}
.sb-pet{bottom:calc(var(--floorh) - 14px)}
.sb-cat{left:calc(var(--petw) + 18px);bottom:calc(var(--floorh) - 4px + var(--tableh)*.8);width:calc(var(--catw)*.8);z-index:3}
.sb-cup{right:calc(var(--petw) + 18px);bottom:calc(var(--floorh) - 4px + var(--tableh)*.8);width:30px;z-index:3}
.sushibar-root .sb-bubble{bottom:calc(var(--floorh) + var(--tableh) + var(--catw)*.7 + 6px)}