/* 纸上食堂 · Paper Canteen. Fonts are subsets served from /canteen/fonts/ (see NOTICE.txt there). */
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Dela Gothic One";src:url(fonts/dela-gothic-one.woff2) format("woff2");font-display:swap;}
@font-face{font-family:"Permanent Marker";src:url(fonts/permanent-marker.woff2) format("woff2");font-display:swap;}
@font-face{font-family:"Yuji Syuku";src:url(fonts/yuji-syuku.woff2) format("woff2");font-display:swap;}
@font-face{font-family:"Zen Antique";src:url(fonts/zen-antique.woff2) format("woff2");font-display:swap;}
:root{
  /* the screen's safe area (notch, Dynamic Island, home indicator): the HUD and the kitchen keep out of it */
  --sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);
  --paper:#F4EEDC; --paper-2:#EBE2C8; --paper-3:#DCCFAE;
  --ink:#28231E; --ink-2:#4B4239; --ink-3:#7B7063;
  --rust:#C4553A; --rust-2:#A5432B;
  --lav:#8F8BD6; --lav-2:#C9C6EE;
  --lemon:#F1CB45; --leaf:#7DB35A; --teal:#6FBFC2;
  --f-marker:"Permanent Marker","Marker Felt","Chalkboard SE","Comic Sans MS",cursive;
  --f-brush:"Yuji Syuku","Hiragino Mincho ProN","Kaiti SC","STKaiti",serif;
  --f-disp:"Dela Gothic One","Hiragino Sans","Yu Gothic","PingFang SC","Microsoft YaHei",sans-serif;
  --f-jp:"Zen Antique","Hiragino Mincho ProN","Yu Mincho","Songti SC",serif;
  --f-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --f-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .1 0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  color-scheme:light;
}
[hidden]{display:none!important;}
html,body{height:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);overflow:hidden;-webkit-font-smoothing:antialiased;}
#app{position:relative;width:100%;height:100%;overflow:hidden;background:var(--paper);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;}
#app.hovering #gl{cursor:pointer;}
#app.dragging #gl{cursor:grabbing;}

/* ---------- paper primitives ---------- */
.card{background:var(--grain),var(--paper);border:1.5px solid var(--ink);border-radius:7px;box-shadow:2px 2px 0 var(--ink);}
.micro{font:500 9.5px/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.btn{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;padding:8px 11px;cursor:pointer;box-shadow:1.5px 1.5px 0 var(--ink);transition:transform .08s,box-shadow .08s;white-space:nowrap;}
.btn:hover{transform:translate(-1px,-1px);box-shadow:2.5px 2.5px 0 var(--ink);}
.btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink);}
.btn:focus-visible,.pill:focus-visible,.dayt:focus-visible{outline:2px dashed var(--rust);outline-offset:3px;}
.btn.primary{background:var(--ink);color:var(--paper);box-shadow:2px 2px 0 var(--rust);}
.btn.primary:hover{box-shadow:3px 3px 0 var(--rust);}
.btn.big{font-size:13px;padding:12px 18px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:1.5px 1.5px 0 var(--ink);}
.btn[aria-pressed="false"]{color:var(--ink-3);}
.pill{font:500 10px/1 var(--f-sans);letter-spacing:.08em;color:var(--ink);background:var(--paper);border:1.3px solid var(--ink);border-radius:4px;padding:6px 8px;cursor:pointer;box-shadow:1px 1px 0 var(--ink);}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.coin-ico{display:inline-block;width:1em;height:1em;vertical-align:-.12em;}
.goal-num small,.dc-big small,.res-coins small,.goals b small,.floater b small,.wallet small{font:400 .42em/1 var(--f-disp);margin-left:3px;}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:var(--sat) var(--sar) var(--sab) var(--sal);pointer-events:none;z-index:3;}
.safe-probe{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;padding:var(--sat) var(--sar) var(--sab) var(--sal);}
#hud .card,#hud .btn,#hud .pill{pointer-events:auto;}
.hud-tl{position:absolute;left:14px;top:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.brand{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 7px;}
.brand-mark{width:32px;height:32px;flex:none;}
.brand-name{font:21px/1 var(--f-marker);letter-spacing:.02em;}
.tl-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:min(560px,31vw);}
.clock{display:flex;align-items:baseline;gap:8px;padding:6px 10px 6px;}
.clock b{font:500 17px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.clock-bar{display:none;position:relative;width:84px;height:6px;border:1.2px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--paper-2);align-self:center;}
.clock-bar i{display:block;height:100%;background:var(--ink);transform-origin:left;}
.clock-bar .clock-rush{position:absolute;top:0;bottom:0;height:auto;background:repeating-linear-gradient(-45deg,rgba(196,85,58,.95) 0 2px,rgba(244,238,220,.55) 2px 4px);}
.clock.rush{border-color:var(--rust-2);box-shadow:2px 2px 0 var(--rust);}
.clock.rush b{color:var(--rust-2);}
.pills{display:flex;gap:4px;flex-wrap:wrap;}
#app:not([data-mode="title"]) .tl-row{max-width:none;}
.clock .micro{white-space:nowrap;}
.hud-tr{position:absolute;right:14px;top:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:46vw;}
.goal{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:none;grid-template-columns:auto auto auto;align-items:center;gap:5px 10px;padding:6px 14px 7px 10px;}
.chal-strip{grid-column:1/-1;display:flex;gap:4px;justify-content:center;}
.chal-strip:empty{display:none;}
.cc{font:500 9.5px/1 var(--f-mono);letter-spacing:.04em;padding:3px 7px;border:1.2px solid var(--ink-3);border-radius:999px;background:var(--paper);color:var(--ink-2);white-space:nowrap;}
.cc.ok{background:var(--lemon);border-color:var(--ink);color:var(--ink);animation:ccpop .5s cubic-bezier(.3,1.8,.5,1);}
.cc.bad{color:var(--ink-3);text-decoration:line-through;border-style:dashed;}
@keyframes ccpop{0%{transform:scale(1.7) rotate(-8deg)}100%{transform:none}}
.goal .coin-ico{width:26px;height:26px;}
.goal-num{font:30px/1 var(--f-marker);min-width:2.6ch;font-variant-numeric:tabular-nums;}
.goal-col{display:flex;flex-direction:column;gap:4px;width:210px;}
.goal-text span{white-space:nowrap;}
.goal-track{position:relative;height:11px;border:1.4px solid var(--ink);border-radius:6px;background:var(--paper-2);}
.goal-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--rust);border-radius:4px;transition:width .35s ease;}
.gstar{position:absolute;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);}
.gstar svg{width:100%;height:100%;display:block;}
.gstar path{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;transition:fill .2s;}
.gstar.lit path{fill:var(--lemon);}
.gstar.lit{animation:starpop .5s cubic-bezier(.3,1.8,.5,1);}
.goal-text{display:flex;justify-content:space-between;}
@keyframes starpop{0%{transform:translate(-50%,-50%) scale(.6) rotate(-20deg)}100%{transform:translate(-50%,-50%) scale(1)}}

.radio{position:absolute;left:14px;bottom:14px;display:flex;gap:12px;align-items:center;padding:9px 12px;}
.radio-dial{width:52px;height:52px;border-radius:50%;background:var(--lemon);border:1.5px solid var(--ink);display:grid;place-items:center;text-align:center;flex:none;}
.radio-dial b{font:500 15px/1 var(--f-mono);display:block;}
.radio-dial span{font:500 8px/1 var(--f-mono);letter-spacing:.1em;}
.radio-body{display:flex;flex-direction:column;gap:4px;}
.radio-top{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.radio-name{font:15px/1.05 var(--f-disp);letter-spacing:.06em;}
.radio-song{font:13px/1.2 var(--f-jp);color:var(--ink);white-space:nowrap;}
.radio-btns{display:flex;gap:5px;}
.radio-btns .btn{padding:4px 7px;font-size:9.5px;}
.sb-tiles{display:flex;gap:3px;}
.sb-tile{min-width:30px;height:17px;padding:0 3px;border:1.2px solid var(--ink-3);border-radius:3px;background:var(--paper);display:grid;place-items:center;font:500 8.5px/1 var(--f-mono);letter-spacing:.02em;color:var(--ink-2);white-space:nowrap;}
.sb-tile.on{border-color:var(--ink);background:var(--lemon);box-shadow:1px 1px 0 var(--ink);}
.daycard{position:absolute;right:14px;bottom:14px;padding:10px 12px;min-width:160px;}
.daycard .dc-big{font:34px/1 var(--f-marker);display:flex;align-items:center;gap:6px;margin:4px 0 2px;}
.daycard .dc-big .coin-ico{width:26px;height:26px;}
.stars-inline{font-size:13px;letter-spacing:.1em;color:var(--rust);}

/* from the intro to the result the HUD keeps one shape (the score card only shows while the day runs),
   so the camera can measure it and frame the customers' order bubbles below it */
#app:not([data-mode="title"]) .goal{display:grid;}
#app[data-mode="intro"] .goal,#app[data-mode="result"] .goal{visibility:hidden;}
#app:not([data-mode="title"]) .clock-bar{display:block;}
#app:not([data-mode="title"]) .radio,#app:not([data-mode="title"]) .daycard{display:none;}
#app:not([data-mode="title"]) .pills{display:none;}
#app[data-mode="title"] #btnPause{display:none;}

/* ---------- world overlay (bubbles, gauges, hints) ---------- */
#world{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;}
.wpin{position:absolute;left:0;top:0;will-change:transform;}
.bubble .bin{position:relative;width:max-content;transform:translate(-50%,-100%);display:flex;flex-direction:column;gap:5px;padding:6px 7px 7px;background:var(--grain),var(--paper);border:1.5px solid var(--ink);border-radius:10px;box-shadow:2px 2px 0 var(--ink);animation:pop .4s cubic-bezier(.3,1.7,.5,1) both;}
.bubble .bin::after{content:"";position:absolute;left:50%;bottom:-7px;width:11px;height:11px;background:var(--paper);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateX(-50%) rotate(45deg);}
.b-items{display:flex;gap:2px;}
/* a crowded tall screen: each bubble lists its dishes in a column, so neighbours do not meet */
#world.stack .b-items{flex-direction:column;align-items:center;}
#world.stack.pair .b-items{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;justify-items:center;align-items:center;}
#world.stack .fam-more{display:none;}
#world.tight .b-dish .b-firm{position:absolute;right:-6px;top:-6px;min-width:14px;height:17px;font-size:11px;}
#world.tight .fam-n,#world.tight .crit-pre{display:none;}
/* order bubbles stack among themselves (z-index 1 and up, see bubbleStack); hints, speech, floaters, banners and
   the drag's ghost and tag always stay above them */
.wpin.hint,.wpin.say,.wpin.floater,.wpin.banner,.wpin.droptag,.dragghost{z-index:50;}
.b-name{align-self:center;margin:-2px 0 0;font:600 10.5px/1 var(--f-sans);color:var(--paper);background:var(--ink);border-radius:4px;padding:3px 6px 2px;white-space:nowrap;}
.bubble.reg .bin{border-color:var(--rust-2);box-shadow:2px 2px 0 var(--rust);}
.bubble.reg .b-name{background:var(--rust);}
.bubble.crit .bin{border-width:2px;box-shadow:2px 2px 0 #3A2E4A;}
.bubble.crit .b-name,.b-name.crit{background:#3A2E4A;}
.b-name.fam{background:#3F6F8C;}
.b-tog{height:5px;border:1.2px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--paper-2);}
.b-tog i{display:block;height:100%;width:100%;background:#3F6F8C;transform-origin:left center;}
.bubble.frozen .b-pat i{background:#7FB8D8;}
.b-item{position:relative;width:42px;height:42px;}
.b-item svg{width:100%;height:100%;display:block;overflow:visible;}
.b-item.done svg{opacity:.25;filter:grayscale(1);}
.ftag{position:absolute;right:-5px;top:-6px;font:12px/1 var(--f-disp);color:var(--paper);background:var(--rust);border:1.3px solid var(--ink);border-radius:4px;padding:2px 3px 1px;}
.ftag.f-hard{background:#3F6F8C;} .ftag.f-soft{background:#D9892B;}
.ftag.h-hito{background:#D9892B;} .ftag.h-atsu{background:#B8452E;}
.ftag.g-tare{background:#5A2E18;} .ftag.g-shio{background:#F4F1E8;color:var(--ink);}
.ftag.k-karashi{background:#F0C419;color:var(--ink);} .ftag.ok{box-shadow:0 0 0 2px var(--leaf);}
.b-item.done .ftag{opacity:.3;}
.bubble.drop-ok .bin{border-color:var(--ink);box-shadow:0 0 0 3px var(--leaf),3px 3px 0 3px var(--ink);}
.bubble.drop-no .bin{box-shadow:0 0 0 3px var(--rust),2px 2px 0 3px var(--ink);}
.b-item.done::after{content:"✓";position:absolute;left:50%;top:50%;transform:translate(-50%,-55%) rotate(-8deg);font:28px/1 var(--f-marker);color:var(--rust);}
.b-pat{height:6px;border:1.3px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--paper-2);}
.b-pat i{display:block;height:100%;width:100%;background:var(--leaf);transform-origin:left center;}
.bubble.mid .b-pat i{background:var(--lemon);}
.bubble.low .b-pat i{background:var(--rust);}
.bubble.low .bin{animation:pop .4s both,jitter .18s steps(2) infinite;}
.bubble.gone .bin{animation:shrink .25s ease-in forwards;}
@keyframes pop{0%{transform:translate(-50%,-100%) scale(.2);opacity:0}100%{transform:translate(-50%,-100%) scale(1);opacity:1}}
@keyframes shrink{to{transform:translate(-50%,-100%) scale(.3);opacity:0}}
@keyframes jitter{0%{margin-left:-1px}100%{margin-left:1px}}

.gauge{width:30px;height:30px;margin:-15px 0 0 -15px;transition:opacity .2s;}
.gauge svg{width:100%;height:100%;display:block;overflow:visible;}
.gauge .g-bg{fill:var(--paper);stroke:var(--ink);stroke-width:2;}
.gauge .g-arc{fill:none;stroke:var(--rust);stroke-width:5;stroke-linecap:round;}
.gauge .g-ok{fill:none;stroke:var(--leaf);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;display:none;}
.gauge .g-bad{font:18px/1 var(--f-marker);fill:var(--rust);display:none;}
.gauge .g-num{font:500 12px/1 var(--f-mono);fill:var(--ink);display:none;}
.gauge.ok .g-ok{display:block;} .gauge.ok .g-arc{stroke:var(--leaf);}
.gauge.warn .g-arc{stroke:var(--rust);} .gauge.warn{animation:blink .36s steps(2) infinite;}
.gauge.bad .g-bad{display:block;} .gauge.bad .g-arc{display:none;}
.gauge.num .g-num{display:block;} .gauge.num .g-arc{stroke:var(--ink);}
.gauge.off{opacity:0;}
.gauge.gold{filter:drop-shadow(0 0 4px rgba(241,203,69,.95));}
.gauge.gold .g-bg{fill:#FFF4C8;} .gauge.gold .g-arc,.gauge.gold .g-ok{stroke:#D69A1E;}
.gauge.firm .g-num{display:block;font:14px/1 var(--f-disp);} .gauge.firm .g-arc{stroke:var(--ink-3);stroke-width:3.4;}
.gauge.f-hard .g-bg{fill:#D5E9EE;} .gauge.f-norm .g-bg{fill:#E3F0D3;} .gauge.f-soft .g-bg{fill:#FCE7B4;}
.gauge.sm{width:22px;height:22px;margin:-11px 0 0 -11px;}
.gauge.heat .g-num{font-size:11px;}
.gauge.tagf{width:22px;height:22px;margin:-11px 0 0 -11px;} .gauge.tagf .g-arc{display:none;} .gauge.tagf .g-num{font-size:15px;}
.gauge.flip .g-bg{fill:#FFE1C4;} .gauge.flip .g-arc{stroke:#E0782E;} .gauge.flip .g-num{display:block;font:13px/1 var(--f-disp);fill:var(--rust-2);}
.gauge.flip.warn{animation:blink .22s steps(2) infinite;}
.gauge.melt .g-arc{stroke:#6FB6D8;} .gauge.melt .g-bg{fill:#EEF8FB;}
.gauge.melt.gold .g-bg{fill:#FFF4C8;} .gauge.melt.gold .g-arc{stroke:#6FB6D8;}
.gauge.chill .g-arc{stroke:#5AA8D0;} .gauge.chill .g-bg{fill:#EAF6FA;}
.gauge.wash .g-arc{stroke:#6FB6D8;} .gauge.wash .g-bg{fill:#F2FAFC;}
@keyframes blink{50%{opacity:.35}}

.tag{transform:translate(-50%,-50%) rotate(-3deg);font:500 10px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--paper);border:1.3px dashed var(--ink);padding:4px 7px;border-radius:4px;white-space:nowrap;color:var(--ink-2);}
.hint .hin{transform:translate(-50%,calc(-100% - 16px));background:var(--ink);color:var(--paper);font:600 13px/1.35 var(--f-sans);padding:7px 11px;border-radius:8px;white-space:nowrap;box-shadow:2px 2px 0 var(--rust);animation:bob .7s ease-in-out infinite alternate;}
.hint .hin::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--ink);}
@keyframes bob{from{margin-top:0}to{margin-top:-6px}}
.dragghost{position:absolute;left:0;top:0;width:60px;height:60px;margin:-30px 0 0 -30px;pointer-events:none;filter:drop-shadow(3px 5px 0 rgba(40,35,30,.3));transition:scale .12s;}
.dragghost svg{width:100%;height:100%;display:block;overflow:visible;transform:rotate(-8deg);}
/* the ghost and the gauges are placed with transform: scale the drawing inside, or the scale would also stretch the
   placement and push them away from the corner of the screen */
.dragghost.over svg{scale:1.18;}
.dragghost.j-burnt svg{filter:grayscale(1) brightness(.45);} .dragghost.j-raw svg{filter:saturate(.35) brightness(1.2);} .dragghost.j-soggy svg{filter:grayscale(.8) brightness(1.1);}
.droptag .dtin{transform:translate(-50%,-100%);font:600 12px/1.2 var(--f-sans);padding:4px 8px;border-radius:6px;border:1.4px solid var(--ink);white-space:nowrap;box-shadow:2px 2px 0 var(--ink);background:var(--lemon);}
.droptag.no .dtin{background:var(--paper);color:var(--rust-2);border-style:dashed;}
/* add-on slots: the same cells on the order bubbles, the dish cards and the box tags */
.b-slot{position:relative;display:block;width:16px;height:16px;border-radius:4px;box-sizing:border-box;}
.b-slot svg{width:100%;height:100%;display:block;}
.b-slot.no{border:1.4px dashed #B9AE98;background:rgba(255,255,255,.35);}
.b-slot.got{box-shadow:0 0 0 2px var(--leaf);}
.b-slot.got::after{content:"✓";position:absolute;right:-5px;top:-7px;font:11px/1 var(--f-marker);color:#3E7A2A;}
.b-firm{display:grid;place-items:center;min-width:16px;height:20px;box-sizing:border-box;font:13px/1 var(--f-disp);color:var(--paper);border:1.3px solid var(--ink);border-radius:4px;padding:1px 2px 0;}
.b-firm.f-hard{background:#3F6F8C;} .b-firm.f-soft{background:#D9892B;} .b-firm.f-norm{background:#6E9A52;}
.b-firm.ok{box-shadow:0 0 0 2px var(--leaf);}
.b-firm.miss{background-image:linear-gradient(-35deg,transparent 45%,var(--rust-2) 45%,var(--rust-2) 57%,transparent 57%);}
/* a ramen or shaved-ice line on a bubble: the dish with a strip of slots across its foot, like a ticket stub,
   and its firmness beside it */
.b-item.b-dish{width:auto;height:auto;padding-bottom:5px;border-radius:6px;}
.b-top{display:flex;align-items:center;gap:1px;}
.b-ico{width:42px;height:42px;}
.b-row{position:absolute;left:21px;bottom:0;transform:translateX(-50%);display:flex;gap:1px;padding:1px;background:var(--paper);border:1px solid var(--ink-3);border-radius:4px;}
.b-row .b-slot{width:14px;height:14px;}
/* more than three cells (a plate of oden): two short rows under the plate, so the bubble stays narrow */
.b-dish.long .b-row{position:static;transform:none;flex-wrap:wrap;justify-content:center;width:47px;margin:-8px auto 0;}
.b-item.fit{outline:2.5px solid var(--leaf);outline-offset:1px;}
/* a full dish that is not picked up would do for this guest as it is (an outline, so the bubble keeps its size) */
.bubble.alt .bin{outline:1.5px dashed #3E7A2A;outline-offset:2px;}
.b-item.nofit{opacity:.7;filter:grayscale(.55);}
.b-item.done .b-slot,.b-item.done .b-firm{opacity:.3;}
/* the card in front of a bowl or a glass */
.dcard{transition:opacity .15s;}
.dcard.off{opacity:0;}
.dcard{--cs:16px;}
.dc-in{position:relative;width:max-content;transform:translate(-50%,0);display:flex;align-items:center;gap:1px;padding:1.5px;background:var(--grain),var(--paper);border:1.3px solid var(--ink);border-radius:5px;box-shadow:1.5px 1.5px 0 var(--ink);white-space:nowrap;}
.dc-in.two{display:grid;grid-template-columns:repeat(2,var(--cs));}
.dc-in.one{display:grid;grid-template-columns:var(--cs);}
.dc-in .b-slot{width:var(--cs);height:var(--cs);}
.dc-in .b-firm{min-width:var(--cs);width:var(--cs);height:var(--cs);font-size:calc(var(--cs) - 3px);padding:0;}
.dcard.sel .dc-in{border:2.3px solid var(--rust-2);box-shadow:2px 2px 0 var(--rust);padding:.5px;}
.dcard.sel .dc-in::before{content:"";position:absolute;left:50%;top:-8px;margin-left:-5px;border:5px solid transparent;border-top:0;border-bottom:6px solid var(--rust-2);}
.dcard.wait .dc-in{border-style:dashed;background:var(--paper-2);box-shadow:none;}
.dc-wait{font:600 11px/1 var(--f-sans);color:var(--ink-2);padding:3px 4px;}
.dcard.flash .dc-in{animation:cflash .3s steps(2) 3;}
@keyframes cflash{50%{background:var(--lemon);}}
.b-slot.stamp{animation:stamp .35s cubic-bezier(.3,1.6,.5,1);}
@keyframes stamp{0%{transform:scale(1.9) rotate(-14deg);opacity:.3}100%{transform:none;opacity:1}}
/* the tags over the topping boxes and syrup bottles */
.bt-in{position:relative;width:max-content;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;}
.bt-in span{font:600 11px/1 var(--f-sans);color:var(--ink);background:var(--paper);border:1.2px solid var(--ink);border-radius:3px;padding:3px 4px 2px;white-space:nowrap;}
.bt-in .bt-dot{display:block;width:6px;height:6px;padding:0;border-radius:50%;background:var(--paper-3);}
.bt-in em{display:none;position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);width:2.2em;font:600 10px/1.1 var(--f-sans);font-style:normal;text-align:center;color:var(--paper);background:#3E7A2A;border:1.2px solid var(--ink);border-radius:4px;padding:2px 1px;}
.bintag.has span::before{content:"✓";margin-right:1px;color:#3E7A2A;}
.bt-undo{display:none;}
.bt-undo svg{display:block;width:100%;height:100%;}
.bintag.has.learnt em{display:none;}
/* a small round badge on the ✓ corner, so the tag keeps its width between its neighbours */
.bintag.has.learnt span{position:relative;}
.bintag.has.learnt .bt-undo{display:block;position:absolute;left:-6px;top:-8px;width:13px;height:13px;padding:1.5px;box-sizing:border-box;border-radius:50%;background:#3E7A2A;color:var(--paper);border:1px solid var(--ink);}
.bintag.mini.has.learnt .bt-undo{left:calc(50% + 2px);top:-11px;}
.bintag.off{display:none;}
.bintag.has span{background:#DCE8CC;color:var(--ink-3);}
.bintag.has em{display:block;}
.bintag.has .bt-dot{background:#3E7A2A;}
.bintag.dim span{opacity:.35;} .bintag.dim .bt-dot{background:transparent;}
.bintag.need span{background:var(--lemon);animation:breathe 1.1s ease-in-out infinite alternate;}
.bintag.need .bt-dot{width:9px;height:9px;background:var(--lemon);border:1.2px solid var(--ink);animation:breathe 1.1s ease-in-out infinite alternate;}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.12)}}
/* a skewer: picked up, and the chili or the soy on it, in the colours of the order icons */
.gauge .g-dot{display:none;stroke:var(--ink);stroke-width:1.4;}
.gauge.chili .g-dot{display:block;fill:#D8572A;} .gauge.soy .g-dot{display:block;fill:#6B3A1E;} .gauge.tare .g-dot{fill:#5A2E18;} .gauge.shio .g-dot{fill:#F4F1E8;}
.gauge.sel .g-bg{stroke:var(--rust-2);stroke-width:3.6;}
.gauge.sel svg{scale:1.15;}
.gauge.flash{animation:blink .15s steps(2) 6;}
.banner .bnin{transform:translate(-50%,-50%) rotate(-2deg);text-align:center;background:var(--grain),var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--rust);padding:8px 18px 9px;border-radius:9px;white-space:nowrap;animation:banin 2.4s cubic-bezier(.2,.8,.3,1) forwards;}
.banner b{display:block;font:34px/1.05 var(--f-disp);color:var(--rust);letter-spacing:.04em;}
.banner span{display:block;margin-top:4px;font:600 13px/1.3 var(--f-sans);}
.banner.small .bnin{box-shadow:2px 2px 0 var(--ink);padding:6px 12px;animation-duration:1.9s;}
.banner.small span{margin:0;}
@keyframes banin{0%{opacity:0;scale:.6}10%{opacity:1;scale:1.06}16%{scale:1}82%{opacity:1;margin-top:0}100%{opacity:0;margin-top:-18px}}
.say .sin{max-width:calc(100vw - 16px);width:max-content;box-sizing:border-box;transform:translate(-50%,-100%);background:var(--paper);border:1.4px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font:600 12px/1.3 var(--f-sans);padding:5px 9px;border-radius:6px;white-space:normal;animation:sayin 1.6s ease forwards;}
@keyframes sayin{0%{opacity:0;margin-top:6px}12%{opacity:1;margin-top:0}80%{opacity:1}100%{opacity:0;margin-top:-10px}}
.say.kh .sin{border-color:var(--rust);box-shadow:2px 2px 0 var(--rust);background:#FFF8F2;font-size:12.5px;}
.say.kh .sin::before{content:"小春";display:inline-block;margin-right:6px;font:500 9px/1 var(--f-mono);letter-spacing:.1em;color:var(--paper);background:var(--rust);border-radius:3px;padding:2px 4px;vertical-align:1px;}
.toasts{position:absolute;left:50%;top:92px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:4;pointer-events:none;}
.toast{display:flex;align-items:center;gap:7px;background:var(--grain),var(--paper);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:7px;padding:5px 10px 5px 5px;font:600 12.5px/1.3 var(--f-sans);white-space:nowrap;animation:sayin 3.2s ease forwards;}
.toast .ti{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--rust);color:var(--paper);font:12px/1 var(--f-disp);}
.toast.cat .ti{background:#E8923E;} .toast.clip .ti{background:#3A2E4A;} .toast.gift .ti{background:#D69A1E;}
.toast.out{opacity:0;transition:opacity .4s;}
#btnBoost{display:inline-flex;align-items:center;gap:4px;position:relative;}
#btnBoost .bb-ico{width:15px;height:15px;}
#btnBoost i{font:600 9.5px/1 var(--f-mono);font-style:normal;background:var(--rust);color:var(--paper);border-radius:999px;padding:2px 5px;}
#btnBoost.empty i{background:var(--ink-3);}
#app[data-mode="title"] #btnBoost{display:none;}
#app[data-mode="intro"] #btnBoost,#app[data-mode="result"] #btnBoost{visibility:hidden;}
.boost-pop{position:absolute;right:14px;top:52px;z-index:4;width:280px;padding:10px;display:flex;flex-direction:column;gap:6px;}
.bp-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px;}
.bp-h b{font:600 14px/1 var(--f-sans);}
.bp{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:8px;text-align:left;border:1.4px solid var(--ink);border-radius:7px;background:var(--paper);padding:5px 8px 5px 5px;cursor:pointer;font:inherit;color:inherit;box-shadow:1.5px 1.5px 0 var(--ink);}
.bp:hover{transform:translate(-1px,-1px);box-shadow:2.5px 2.5px 0 var(--ink);}
.bp[disabled]{opacity:.45;cursor:not-allowed;transform:none;}
.bp svg{width:36px;height:36px;}
.bp b{display:block;font:600 13px/1.2 var(--f-sans);}
.bp em{display:block;font:11.5px/1.3 var(--f-sans);font-style:normal;color:var(--ink-2);}
.bp i{font:500 12px/1 var(--f-mono);font-style:normal;}
.boost-timers{display:flex;gap:5px;flex-wrap:wrap;}
.boost-timers:empty{display:none;}
.bt{display:inline-flex;align-items:center;gap:4px;font:500 10.5px/1 var(--f-mono);background:var(--lemon);border:1.3px solid var(--ink);border-radius:999px;padding:3px 8px 3px 4px;box-shadow:1.5px 1.5px 0 var(--ink);}
.bt svg{width:16px;height:16px;}
#btnAlbum{position:relative;}
#btnAlbum.dot::after{content:"";position:absolute;right:-4px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--rust);border:1.5px solid var(--ink);}
.floater .fin{transform:translate(-50%,-100%);text-align:center;animation:floatup 1.5s cubic-bezier(.2,.8,.3,1) forwards;white-space:nowrap;}
.floater b{display:block;font:32px/1 var(--f-marker);color:var(--rust);text-shadow:2px 2px 0 var(--paper),-1px -1px 0 var(--paper),2px -1px 0 var(--paper),-1px 2px 0 var(--paper);}
.floater span{display:inline-block;margin-top:3px;font:500 10px/1.2 var(--f-mono);letter-spacing:.08em;background:var(--paper);border:1.2px solid var(--ink);border-radius:4px;padding:2px 5px;}
.floater.stamp b{font-size:26px;color:var(--ink);transform:rotate(-8deg);}
.floater.bad b{color:var(--ink-3);font-size:24px;}
@keyframes floatup{0%{opacity:0;margin-top:12px;scale:.6}15%{opacity:1;margin-top:0;scale:1.08}25%{scale:1}75%{opacity:1}100%{opacity:0;margin-top:-46px}}

.combo{position:absolute;left:18px;bottom:18px;z-index:3;pointer-events:none;font:30px/1 var(--f-marker);color:var(--paper);background:var(--rust);border:1.6px solid var(--ink);padding:8px 14px 6px;border-radius:8px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg);}
.combo small{display:block;font:500 9px/1 var(--f-mono);letter-spacing:.16em;margin-bottom:3px;}
.combo.bump{animation:bump .3s cubic-bezier(.3,1.8,.5,1);}
@keyframes bump{0%{transform:rotate(-4deg) scale(1.35)}100%{transform:rotate(-4deg) scale(1)}}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:5;pointer-events:none;}
.screen>*{pointer-events:auto;}
.modal{display:grid;place-items:center;background:rgba(40,35,30,.26);pointer-events:auto;padding:16px;}
.sheet{position:relative;box-sizing:border-box;width:min(607px,100%);max-height:calc(100% - 8px);overflow:auto;padding:20px 22px 22px;background:var(--grain),var(--paper);border:1.6px solid var(--ink);border-radius:11px;box-shadow:4px 4px 0 var(--ink);animation:sheetin .35s cubic-bezier(.3,1.4,.5,1) both;}
@keyframes sheetin{from{transform:translateY(18px) rotate(-1deg);opacity:0}to{transform:none;opacity:1}}
.sheet h2{margin:2px 0 0;font:34px/1.05 var(--f-marker);text-wrap:balance;}
.sheet h2 .cn{font-family:var(--f-disp);font-size:32px;margin-right:10px;letter-spacing:.03em;}
.sheet .lede{margin:8px 0 0;font:14px/1.6 var(--f-sans);color:var(--ink-2);max-width:48ch;}
.sheet .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.sheet .close{position:absolute;right:12px;top:12px;}
.kick{font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rust);}
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;}
.goals>div{border:1.3px solid var(--ink);border-radius:7px;padding:8px 10px;background:var(--paper-2);}
.goals b{display:flex;align-items:center;gap:5px;font:24px/1 var(--f-marker);margin-top:4px;}
.goals b .coin-ico{width:18px;height:18px;}
.news{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.kit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:13px/1.4 var(--f-sans);}
.kit b{font-weight:600;margin-right:4px;}
.kitchip{font:500 11px/1 var(--f-mono);letter-spacing:.04em;border:1.3px solid var(--ink);border-radius:999px;padding:5px 9px;background:var(--lemon);}
.rotate-tip{display:none;align-items:center;gap:8px;margin:14px 0 0;padding:8px 10px;border:1.3px dashed var(--rust);border-radius:7px;font:600 13px/1.4 var(--f-sans);color:var(--rust-2);}
.rotate-tip svg{width:22px;height:22px;flex:none;}
@media (orientation:portrait) and (max-width:760px){.kit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:13px/1.4 var(--f-sans);}
.kit b{font-weight:600;margin-right:4px;}
.kitchip{font:500 11px/1 var(--f-mono);letter-spacing:.04em;border:1.3px solid var(--ink);border-radius:999px;padding:5px 9px;background:var(--lemon);}
.rotate-tip{display:flex;}}
.chal-list{display:flex;flex-direction:column;gap:5px;margin-top:14px;}
.chal-list:empty{display:none;}
.chal-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:1px;}
.chal-h b{font:600 14px/1.2 var(--f-sans);}
.ch{display:flex;align-items:center;gap:8px;font:13px/1.35 var(--f-sans);color:var(--ink-2);}
.ck{flex:none;width:22px;height:22px;border-radius:50%;border:1.4px solid var(--ink);display:grid;place-items:center;font:500 11px/1 var(--f-mono);background:var(--paper);}
.ch.ok .ck{background:var(--rust);color:var(--paper);font:12px/1 var(--f-disp);transform:rotate(-8deg);}
.ch.ok .ct{color:var(--ink);}
.ch.bad .ck{color:var(--ink-3);border-style:dashed;}
.ch em{margin-left:auto;font:500 10px/1 var(--f-mono);font-style:normal;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap;}
.ch em.fresh{color:var(--rust-2);font-weight:600;font-size:11px;}
.stampline{margin-top:3px;font:500 10.5px/1.6 var(--f-mono);letter-spacing:.04em;color:var(--ink-2);}
.stampline.won{color:var(--rust-2);font-weight:600;}
.new{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;border-top:1.2px dashed var(--ink-3);padding-top:10px;}
.new svg{width:52px;height:52px;}
.new b{font:600 15px/1.2 var(--f-sans);}
.new p{margin:3px 0 0;font:13px/1.5 var(--f-sans);color:var(--ink-2);}

.title-wrap{position:absolute;left:50%;top:11%;transform:translateX(-50%);width:min(760px,92vw);text-align:center;}
.title-kick{font:17px/1 var(--f-marker);color:var(--rust);letter-spacing:.06em;}
.title-cn{position:relative;display:inline-block;margin:.12em 0 0;font:clamp(44px,min(8.6vw,15vh),112px)/1.05 var(--f-disp);letter-spacing:.04em;color:var(--ink);text-shadow:.045em .045em 0 var(--rust),0 0 26px rgba(244,238,220,.85);font-weight:400;}
.est{position:absolute;right:-.2em;top:-.55em;transform:rotate(9deg);writing-mode:vertical-rl;font:12px/1.1 var(--f-jp);letter-spacing:.12em;color:var(--paper);background:var(--rust);border:1.5px solid var(--ink);border-radius:4px;padding:6px 3px;text-shadow:none;box-shadow:2px 2px 0 var(--ink);}
.title-kana{margin:.35em 0 0;font:15px/1.2 var(--f-jp);letter-spacing:.6em;color:var(--ink-2);text-shadow:0 0 10px rgba(244,238,220,.9);}
.title-sub{display:inline-block;margin:.5em 0 0;padding:3px 10px;font:500 12px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:rgba(244,238,220,.82);border-radius:4px;}
.title-acts{position:absolute;left:50%;bottom:calc(16px + var(--sab));transform:translateX(-50%);display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:max-content;max-width:calc(100% - 32px);}

.days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;}
.chap{display:flex;align-items:baseline;gap:8px;margin-top:16px;border-bottom:1.3px dashed var(--ink-3);padding-bottom:4px;}
.chap b{font:600 14px/1.2 var(--f-sans);}
.dayt.beach{background:#F1F6F4;} .dayt.autumn{background:#F7EDE2;} .dayt.winter{background:#EEF2F7;}
.tabs{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px;}
.tabs .pill{font-size:12px;padding:7px 12px;}
.alb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-top:12px;}
.alb{border:1.4px solid var(--ink);border-radius:8px;background:var(--paper);padding:8px 8px 9px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;}
.alb svg{width:56px;height:56px;}
.alb b{font:600 13px/1.2 var(--f-sans);}
.alb span{font:500 9px/1.2 var(--f-mono);letter-spacing:.08em;color:var(--ink-3);}
.alb em{font:500 10px/1.3 var(--f-mono);font-style:normal;color:var(--rust-2);margin-top:2px;}
.alb.locked{background:var(--paper-2);border-style:dashed;}
/* a regular in the album (a regular's order bubble is .bubble.reg too, and must not take this layout) */
.reg:not(.bubble){display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:start;border-top:1.2px dashed var(--ink-3);padding:10px 0 8px;}
.reg:not(.bubble):first-child{margin-top:10px;}
.reg:not(.bubble) svg{width:56px;height:56px;}
.reg:not(.bubble) b{font:600 15px/1.2 var(--f-sans);}
.reg:not(.bubble) .en{font:500 9px/1 var(--f-mono);letter-spacing:.1em;color:var(--ink-3);}
.reg:not(.bubble) q{display:block;margin:5px 0 2px;font:13px/1.45 var(--f-jp);color:var(--ink);}
.reg:not(.bubble) .st{margin:5px 0 0;font:13px/1.55 var(--f-sans);color:var(--ink-2);padding-left:10px;border-left:2.5px solid var(--lemon);}
.reg:not(.bubble) .st.locked{color:var(--ink-3);border-left-color:var(--paper-3);font-style:italic;}
.reg:not(.bubble).locked b{color:var(--ink-3);}
.clip{margin-top:10px;border:1.4px solid var(--ink);border-radius:4px;background:#FBF7EC;padding:10px 12px;box-shadow:2px 2px 0 var(--ink);transform:rotate(-.6deg);}
.clip:nth-child(even){transform:rotate(.5deg);}
.clip .paper{font:600 10px/1 var(--f-mono);letter-spacing:.18em;color:var(--rust-2);border-bottom:1px solid var(--ink-3);padding-bottom:5px;margin-bottom:6px;}
.clip b{display:block;font:17px/1.35 var(--f-jp);}
.clip span{display:block;margin-top:4px;font:500 9.5px/1.3 var(--f-mono);letter-spacing:.06em;color:var(--ink-3);}
.up.owned{background:#F7F3E4;}
.sheet.story{width:min(667px,100%);display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;}
.st-face svg{width:96px;height:96px;display:block;}
.st-say p{margin:6px 0 0;font:17px/1.7 var(--f-sans);color:var(--ink);min-height:3.4em;}
.st-foot2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;}
.dots{display:flex;gap:5px;}
.dots i{width:7px;height:7px;border-radius:50%;border:1.2px solid var(--ink);}
.dots i.on{background:var(--rust);}
.dayt{position:relative;text-align:left;border:1.4px solid var(--ink);border-radius:8px;background:var(--paper);padding:8px 8px 9px;cursor:pointer;box-shadow:1.5px 1.5px 0 var(--ink);font:inherit;color:inherit;min-height:88px;display:flex;flex-direction:column;gap:3px;}
.dayt:hover{transform:translate(-1px,-1px);box-shadow:2.5px 2.5px 0 var(--ink);}
.dayt b{font:22px/1 var(--f-marker);}
.dayt .dn{font:12.5px/1.25 var(--f-disp);letter-spacing:.02em;}
.dayt .ds{margin-top:auto;font-size:12px;letter-spacing:.08em;color:var(--rust);}
.dayt .ds i{font:500 9px/1 var(--f-mono);font-style:normal;color:var(--ink-3);margin-left:5px;letter-spacing:.04em;}
.dayt[disabled]{cursor:not-allowed;background:var(--paper-2);color:var(--ink-3);box-shadow:none;transform:none;}
.dayt .tod{font:500 8.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}

.wallet{display:inline-flex;align-items:center;gap:6px;font:26px/1 var(--f-marker);}
.wallet .coin-ico{width:22px;height:22px;}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:16px;}
.up{border:1.4px solid var(--ink);border-radius:9px;padding:10px 11px;background:var(--paper);display:grid;grid-template-columns:44px 1fr;gap:4px 10px;align-items:start;}
.up>svg{width:44px;height:44px;grid-row:span 3;}
.up .btn .coin-ico{width:14px;height:14px;}
.up b{font:600 14px/1.2 var(--f-sans);}
.up .en{font:500 8.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.up p{margin:0;font:12.5px/1.45 var(--f-sans);color:var(--ink-2);}
.up .tiers{display:flex;gap:4px;margin-top:2px;}
.up .tiers i{width:10px;height:10px;border-radius:50%;border:1.3px solid var(--ink);}
.up .tiers i.on{background:var(--rust);}
.up .btn{grid-column:1/-1;margin-top:6px;display:flex;justify-content:center;align-items:center;gap:6px;}

.res-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.res-coins{display:flex;align-items:center;gap:8px;font:54px/1 var(--f-marker);}
.res-coins .coin-ico{width:40px;height:40px;}
.res-stars{display:flex;gap:6px;}
.res-stars span{display:inline-block;}
.res-stars svg{width:46px;height:46px;display:block;}
.res-stars path{fill:var(--paper-2);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;}
.res-stars .lit path{fill:var(--lemon);}
.res-stars .lit{animation:stamp .5s cubic-bezier(.3,1.8,.5,1) both;}
@keyframes stamp{0%{transform:scale(2.2) rotate(-18deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px;}
.stats>div{border-top:1.3px solid var(--ink);padding-top:6px;}
.stats b{display:block;font:24px/1.1 var(--f-marker);margin-top:2px;font-variant-numeric:tabular-nums;}
.closed-stamp{position:absolute;right:20px;top:18px;font:15px/1 var(--f-disp);color:var(--rust);border:2px solid var(--rust);padding:6px 10px 4px;border-radius:6px;transform:rotate(8deg);opacity:.9;}

/* ---------- studio panel ---------- */
#studio{position:absolute;right:14px;top:58px;z-index:6;width:272px;max-height:calc(100% - 74px);overflow:auto;padding:12px 14px 14px;}
.st-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.st-title{font:24px/1 var(--f-marker);display:inline-block;transform:skewX(-9deg);}
.st-sec{margin-top:12px;}
.st-sec h3{margin:0;font:600 12px/1 var(--f-sans);color:var(--rust);display:flex;align-items:center;gap:6px;}
.st-row{display:grid;grid-template-columns:1fr auto;gap:3px 8px;margin-top:9px;align-items:baseline;}
.st-row label{font:12px/1.2 var(--f-sans);color:var(--ink);}
.st-row label em{font:500 8.5px/1 var(--f-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-left:5px;}
.st-row output{font:500 11px/1 var(--f-mono);font-variant-numeric:tabular-nums;}
.st-row input{grid-column:1/-1;}
.st-pills{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;}
.st-check{display:flex;gap:8px;align-items:center;margin-top:10px;font:12px/1.2 var(--f-sans);}
.st-check input{width:15px;height:15px;accent-color:var(--rust);margin:0;}
.st-foot{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;margin:0;cursor:pointer;}
input[type=range]:focus-visible{outline:2px dashed var(--rust);outline-offset:2px;}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--rust) var(--p,50%),var(--paper-3) var(--p,50%));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--rust);border:1.5px solid var(--ink);margin-top:-5px;}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--paper-3);}
input[type=range]::-moz-range-progress{height:3px;border-radius:2px;background:var(--rust);}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--rust);border:1.5px solid var(--ink);}

#tip{position:absolute;left:0;top:0;z-index:7;pointer-events:none;background:var(--paper);border:1.3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:6px;padding:5px 8px;font:12px/1.35 var(--f-sans);white-space:nowrap;}
#tip b{font-weight:600;}
#tip span{display:block;font:500 9px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
#fail{position:absolute;inset:0;z-index:9;display:grid;place-items:center;padding:24px;text-align:center;font:15px/1.6 var(--f-sans);}

@media (max-width:1180px){
  .goal-col{width:170px;}
}
@media (max-width:820px),(max-height:560px){
  .brand-name{font-size:16px;} .brand-mark{width:24px;height:24px;} .brand{gap:7px;padding:5px 9px 5px 6px;}
  .brand .micro{display:none;}
  .clock b{font-size:14px;}
  .goal{top:10px;gap:7px;padding:5px 10px 6px 8px;} .goal-num{font-size:22px;} .goal-col{width:120px;} .goal .coin-ico{width:20px;height:20px;}
  .goal-text{display:none;}
  .cc{font-size:8.5px;padding:2px 5px;}
  .toasts{top:86px;} .toast{font-size:11.5px;}
  .boost-pop{top:44px;right:10px;width:260px;}
  .banner b{font-size:26px;} .banner span{font-size:12px;}
  .btn{padding:6px 8px;font-size:9.5px;}
  .b-item{width:32px;height:32px;} .bubble .bin{padding:4px 5px 5px;gap:4px;}
  .daycard{display:none !important;}
  .title-acts{bottom:calc(12px + var(--sab));}
  .radio{padding:7px 9px;} .radio-dial{width:40px;height:40px;} .radio-name{font-size:14px;}
  .title-wrap{top:11%;}
  .days{grid-template-columns:repeat(3,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .combo{font-size:22px;}
  #studio{top:50px;width:250px;}
}
@media (max-width:1060px){
  #app[data-mode="title"] .radio,#app[data-mode="title"] .daycard{bottom:74px;}
}
/* too narrow for clock, goal and buttons side by side: the goal card tucks under the clock */
@media (max-width:820px){
  .goal{left:14px;top:54px;transform:none;}
  .toasts{top:118px;}
}
/* the score card needs room for a five-figure take between the clock and the buttons: where the row runs short,
   the buttons keep only their icons, and then the clock drops its label */
@media (min-width:821px) and (max-width:1064px){
  #app:not([data-mode="title"]) .hud-tr .btn .lbl{display:none;}
}
@media (min-width:821px) and (max-width:940px){
  #app:not([data-mode="title"]) #clockLabel{display:none;}
}
/* a phone held sideways: the HUD keeps to one thin strip along the top, leaving the height to the kitchen
   and the order bubbles; the clock drops its label and the buttons their words */
@media (max-height:560px) and (min-aspect-ratio:4/3){
  #app:not([data-mode="title"]) #clockLabel,#app:not([data-mode="title"]) .hud-tr .btn .lbl{display:none;}
  #app:not([data-mode="title"]) .clock-bar{width:56px;}
  .goal{left:50%;top:10px;transform:translateX(-50%);}
}
/* wide enough to lay the score card out in one row (the coin goes first when it is tight) */
@media (max-height:560px) and (min-aspect-ratio:4/3) and (min-width:740px){
  .goal{grid-template-columns:auto auto auto auto;}
  .chal-strip{grid-column:auto;}
  .goal-col{width:92px;}
  .gstar{width:19px;height:19px;}
}
@media (max-height:560px) and (min-aspect-ratio:4/3) and (min-width:740px) and (max-width:799px){
  .goal{grid-template-columns:auto auto auto;}
  .goal .coin-ico{display:none;}
}
@media (max-height:520px){
  #app[data-mode="title"] .pills,#app[data-mode="title"] .radio,#app[data-mode="title"] .daycard{display:none;}
  .title-wrap{top:6%;} .title-sub{font-size:10px;}
  .btn.big{font-size:11px;padding:8px 12px;}
  .bubble .bin{padding:4px 5px 5px;gap:4px;} .b-item{width:30px;height:30px;}
  .b-ico{width:30px;height:30px;} .b-row{left:15px;} .b-row .b-slot{width:11px;height:11px;border-radius:3px;} .b-firm{min-width:13px;height:16px;font-size:11px;}
  .sheet{padding:14px 16px 16px;} .sheet h2{font-size:26px;} .sheet h2 .cn{font-size:30px;}
  .goals{margin-top:10px;} .news{margin-top:10px;gap:6px;} .new{padding-top:6px;}
}
#app:not([data-mode="title"]) .brand{display:none;}
@media (max-width:720px){
  #app:not([data-mode="title"]) #clockLabel{display:none;}
  .hud-tr .btn .lbl{display:none;}
  #app[data-mode="title"] .pills,#app[data-mode="title"] .radio{display:none;}
  .est{font-size:9px;right:-1.15em;top:-.75em;padding:4px 2px;}
  .title-wrap{top:max(15%,118px);}
  .title-acts{bottom:calc(14px + var(--sab));}
  .days{grid-template-columns:repeat(2,1fr);}
  .goals{grid-template-columns:1fr;}
  .sheet.story{grid-template-columns:64px 1fr;gap:10px;} .st-face svg{width:64px;height:64px;} .st-say p{font-size:15px;}
}
/* phones: the bowls stand about 30–45px apart, and a card must fit between */
@media (max-width:720px),(max-height:520px){ .dcard{--cs:13px;} }
@media (max-width:340px){ .dcard{--cs:11.5px;} }
/* big screens: the bowls stand 60–100px apart */
@media (min-width:1100px) and (min-height:700px){ .dcard{--cs:20px;} }
/* seasonings (v14): a word and a shape on every skewer line of an order and over every skewer on the grill, never colour alone;
   a tick (this one fits / a guest wants it) or a cross (it does not / nobody asked for it) as a badge in the corner */
.stag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:2px;white-space:nowrap;padding:1px 3px 1px 2px;font:700 11px/1.2 var(--f-sans);color:var(--ink);background:var(--paper);border:1.3px solid var(--ink);border-radius:5px;}
.stag svg{width:10px;height:10px;flex:none;display:block;}
.stag.s-plain{border-style:dashed;color:var(--ink-2);}
.smark{display:none;position:absolute;right:-7px;top:-8px;width:15px;height:15px;box-sizing:border-box;border:1.4px solid var(--ink);border-radius:50%;align-items:center;justify-content:center;}
.smark svg{width:9px;height:9px;display:block;}
.smark.yes{background:#3E7A2A;} .smark.no{background:var(--rust-2);}
#world.stack .b-sea:not(:last-child){margin-bottom:7px;}
.b-sea.sea-yes{outline:2px solid #3E7A2A;outline-offset:1px;border-radius:6px;}
.b-sea.sea-no{outline:2px dashed var(--rust-2);outline-offset:1px;border-radius:6px;}
.b-sea.sea-no>svg{opacity:.6;}
.b-sea.sea-yes .smark.yes,.b-sea.sea-no .smark.no{display:flex;}
.b-sea.done .stag,.b-sea.done .smark{opacity:.3;}
.seatag .stag{left:0;top:0;bottom:auto;transform:translate(-50%,-100%);}
.seatag.dn .stag{transform:translate(-50%,0);}
.seatag.off{display:none;}
.seatag .stag.sel{box-shadow:2px 2px 0 var(--ink);}
.seatag .stag.yes .smark.yes,.seatag .stag.no .smark.no{display:flex;}
.seatag .stag.no{border-color:var(--rust-2);}
.seatag .stag.pop{animation:seapop .5s cubic-bezier(.3,1.7,.5,1);}
@keyframes seapop{0%{scale:2;rotate:-9deg}100%{scale:1;rotate:0deg}}
.floater.sea b{display:inline-flex;align-items:center;gap:4px;font:800 17px/1.1 var(--f-sans);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:3px 7px 2px;box-shadow:2px 2px 0 var(--ink);text-shadow:none;}
.floater.sea b svg{width:16px;height:16px;display:block;}
/* what is selected (v14): the label at the bottom, the rings on the seasoning tools, a livelier ring on the skewer picked up */
.selbar{position:absolute;left:50%;bottom:12px;z-index:3;max-width:calc(100% - 24px);pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .2s,visibility 0s .2s;}
.selbar.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s;}
.sb-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;padding:5px 8px;background:var(--grain),var(--paper);border:1.5px solid var(--ink);border-radius:10px;box-shadow:2px 2px 0 var(--ink);font:700 12px/1.2 var(--f-sans);color:var(--ink);}
.sb-in.pop{animation:sbpop .3s cubic-bezier(.3,1.6,.5,1);}
@keyframes sbpop{0%{scale:.85;opacity:.4}100%{scale:1;opacity:1}}
.sb-h,.sb-c em{font-style:normal;color:var(--ink-2);}
.sb-c{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.sb-c svg{width:13px;height:13px;flex:none;display:block;}
.sb-c .sb-ico svg{width:20px;height:20px;}
.sb-c small{font:600 11px/1.2 var(--f-sans);color:var(--ink-2);}
.sb-c.held{padding-right:2px;}
.sb-c.bye{color:var(--ink-2);}
.sb-x{pointer-events:auto;display:inline-flex;align-items:center;gap:2px;min-height:28px;margin-left:2px;padding:0 7px;font:700 11px/1 var(--f-sans);color:var(--ink);background:#fff;border:1.3px solid var(--ink);border-radius:6px;cursor:pointer;}
.sb-x svg{width:9px;height:9px;}
.toolmark.off{display:none;}
.toolmark .tm-ring{position:absolute;left:-19px;top:-19px;width:38px;height:38px;box-sizing:border-box;border:2.5px dashed var(--ink);border-radius:50%;background:rgba(255,244,200,.28);}
.toolmark.held .tm-ring{border-style:solid;border-color:var(--rust-2);border-width:3px;box-shadow:0 0 0 2px var(--paper);}
.toolmark.ready .tm-ring,.toolmark.held .tm-ring{animation:selpulse .7s ease-in-out infinite alternate;}
.toolmark.dim .tm-ring{display:none;}
.toolmark .tm-tag{left:0;bottom:auto;top:21px;transform:translateX(-50%);}
.toolmark.dn .tm-tag{top:40px;}
.toolmark.dim .tm-tag{opacity:.4;}
@keyframes selpulse{from{scale:.92}to{scale:1.12}}
.gauge.sel svg{animation:gselpulse .7s ease-in-out infinite alternate;}
@keyframes gselpulse{from{scale:1.1}to{scale:1.3}}
.seatag .stag.sel{outline:2px solid var(--rust-2);outline-offset:1px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* the site allows no inline styles: what used to sit in style="" attributes */
#scrDays .sheet{width:min(687px,100%);}
#scrShop .sheet{width:min(807px,100%);}
#scrAlbum .sheet{width:min(767px,100%);}
.res-top.shop-top{margin-top:8px;}
.lede.flush{margin:0;}
.lede.gap{margin-top:12px;}
#albumNote{margin-top:6px;}
.svg-defs{position:absolute;}
.sin.closing{font-size:14px;padding:8px 14px;}
.banner b.small{font-size:26px;}
.res-stars span:nth-child(1){animation-delay:.25s;}
.res-stars span:nth-child(2){animation-delay:.53s;}
.res-stars span:nth-child(3){animation-delay:.81s;}
.fail-card{padding:18px 20px;max-width:420px;text-align:left;}
.fail-card b{font-size:16px;}
.fail-card p{margin:8px 0 0;}
/* the way back to the site, on the title screen only */
#btnHome{display:inline-flex;align-items:center;gap:4px;text-decoration:none;}
#app:not([data-mode="title"]) #btnHome{display:none;}
/* the three steps of picking a bowl, on the day the first topping arrives */
.new.steps{grid-template-columns:1fr;}
.st3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.st{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border:1.2px solid var(--ink-3);border-radius:8px;background:var(--paper);animation:stepon 3.6s infinite;}
.st svg{width:48px;height:48px;}
.st figcaption{font:600 12px/1.3 var(--f-sans);text-align:center;}
.st figcaption i{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:3px;border-radius:50%;background:var(--rust);color:var(--paper);font:11px/1 var(--f-disp);font-style:normal;}
.st.st2{animation-delay:-2.4s;} .st.st3{animation-delay:-1.2s;}
@keyframes stepon{0%,30%{border-color:var(--rust-2);box-shadow:2px 2px 0 var(--rust);transform:translateY(-2px);}34%,100%{opacity:.55;}}
/* ---- 縁日の夜市 (plan B challenge levels) ---- */
.en-sheet{max-width:560px;}
.en-list{display:grid;gap:10px;margin:12px 0 14px;}
.en-lv{display:grid;grid-template-columns:1fr;gap:4px 10px;text-align:left;font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:10px 12px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .08s,box-shadow .08s;}
.en-lv:hover,.en-lv:focus-visible{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--rust);outline:none;}
.en-lv:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.en-name{font:20px/1.1 var(--f-disp);letter-spacing:.02em;white-space:nowrap;}
.en-en{margin-top:-2px;font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);}
.en-rule{grid-column:1/-1;font:600 12.5px/1.35 var(--f-sans);color:var(--rust-2);}
.en-new{grid-column:1/-1;font:600 11.5px/1.3 var(--f-sans);color:var(--ink);}
.en-lv.en-locked{opacity:.55;cursor:not-allowed;box-shadow:none;}
.en-goals{grid-column:1/-1;font:500 10.5px/1.3 var(--f-mono);color:var(--ink-2);}
.en-rec{grid-column:1/-1;display:flex;gap:8px;align-items:center;font:600 12px/1.2 var(--f-sans);color:var(--ink-2);}
.en-st{font:15px/1 var(--f-sans);color:var(--ink-3);letter-spacing:.06em;}
.en-st.lit{color:var(--rust);}
@media (min-width:760px){.en-sheet{max-width:860px;}.en-list{grid-template-columns:1fr 1fr;}}
@media (max-width:420px){.en-name{font-size:19px;}.en-lv{padding:9px 10px;}}
#app.en-dark:not([data-mode="title"]) #gl{filter:brightness(.5) saturate(.75) sepia(.3);}
.en-dark-btn[aria-pressed="false"]{color:var(--ink-2);}
/* ---- end 縁日の夜市 ---- */

/* touch: thumb-zone control and pour close-up (the finger never has to cover the pot, the cup or the band) */
.thumb{position:absolute;left:50%;bottom:calc(16px + var(--sab,0px));z-index:8;transform:translateX(-50%);font:700 18px/1 var(--f-sans);letter-spacing:.06em;text-transform:none;padding:18px 34px;border-radius:40px;background:var(--rust);color:var(--paper);box-shadow:3px 3px 0 var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.thumb:hover{transform:translateX(-50%);box-shadow:3px 3px 0 var(--ink);}
.thumb.on{background:var(--ink);}
.thumb.beat{background:#E09A2A;transform:translateX(-50%) scale(1.08);}
.pinset{position:absolute;right:calc(12px + var(--sar,0px));bottom:calc(92px + var(--sab,0px));z-index:8;width:84px;padding:8px 6px 6px;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;box-shadow:2px 2px 0 var(--ink);text-align:center;pointer-events:none;}
/* the cup holds up to POUR.max (1.08): the band 0.60–0.95 is 55.6% up and 32.4% tall */
.pi-cup{position:relative;width:56px;height:84px;margin:0 auto;border:2.5px solid var(--ink);border-top:0;border-radius:0 0 16px 16px;background:#E9E3CF;overflow:hidden;}
.pi-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:#B8C25A;}
.pi-band{position:absolute;left:0;right:0;bottom:55.6%;height:32.4%;border-top:2.5px solid #C8312B;border-bottom:2.5px solid #C8312B;background:rgba(255,246,220,.35);}
.pi-txt{display:block;font:600 12px/1.2 var(--f-sans);margin-top:5px;color:var(--ink);}
.pinset.good .pi-txt{color:#3C7A2E;} .pinset.over .pi-txt{color:var(--rust);}
/* touch gestures: what the finger hides, shown just above it */
.wpin.tfb{z-index:50;pointer-events:none;}
.tfb .tf-in{transform:translate(-50%,-100%);background:var(--ink);color:var(--paper);font:600 13px/1.3 var(--f-sans);padding:6px 10px 7px;border-radius:8px;white-space:nowrap;box-shadow:2px 2px 0 var(--rust);}
.tfb .tf-bar{height:5px;background:rgba(255,255,255,.22);border-radius:3px;margin-top:4px;overflow:hidden;}
.tfb .tf-bar i{display:block;height:100%;width:0;background:#E9C46A;}

/* ---------- 常連の日 (regulars' days, 47/67-regulars-day*.js): the level list, the photos, the six-dish orders ---------- */
#scrRday .sheet{width:min(687px,100%);}
.rd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px;}
.rd-card{position:relative;display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto 1fr;column-gap:10px;row-gap:3px;text-align:left;border:1.4px solid var(--ink);border-radius:8px;background:var(--paper);padding:9px 10px 10px;cursor:pointer;box-shadow:1.5px 1.5px 0 var(--ink);font:inherit;color:inherit;min-height:92px;}
.rd-card:hover{transform:translate(-1px,-1px);box-shadow:2.5px 2.5px 0 var(--ink);}
.rd-card:focus-visible{outline:2px dashed var(--rust);outline-offset:3px;}
.rd-card.won{background:#F7EDE2;}
.rd-card[disabled]{cursor:not-allowed;background:var(--paper-2);color:var(--ink-3);box-shadow:none;transform:none;}
.rd-face{grid-row:1/4;width:56px;height:56px;align-self:center;}
.rd-face svg{width:100%;height:100%;display:block;}
.rd-n{position:absolute;right:9px;top:7px;font:18px/1 var(--f-marker);color:var(--ink-3);}
.rd-t{font:17px/1.2 var(--f-disp);letter-spacing:.02em;padding-right:26px;}
.rd-sub{font:600 12px/1.3 var(--f-sans);color:var(--ink-2);}
.rd-st{align-self:end;font-size:12.5px;letter-spacing:.06em;color:var(--rust);}
.rd-st i{font:600 11px/1 var(--f-sans);font-style:normal;color:var(--ink-2);margin-left:6px;letter-spacing:0;}
.rd-card[disabled] .rd-st{font:12px/1.35 var(--f-sans);color:var(--ink-3);letter-spacing:0;}
.rd-new svg{width:48px;height:48px;}
.rd-album{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:12px;}
.rd-photo{margin:0;padding:8px 8px 10px;background:#FFFDF7;border:1.4px solid var(--ink);border-radius:3px;box-shadow:2px 2px 0 var(--ink);}
.rd-photo:nth-child(odd){transform:rotate(-.8deg);} .rd-photo:nth-child(even){transform:rotate(.7deg);}
.rd-photo.locked{background:var(--paper-2);box-shadow:none;}
.rd-pic{display:block;width:100%;height:auto;border:1px solid var(--ink-3);}
.rd-cap,.rd-ptxt{font-family:var(--f-jp);fill:var(--ink);}
.rd-photo figcaption{display:flex;flex-direction:column;gap:3px;margin-top:7px;}
.rd-photo figcaption b{font:15px/1.2 var(--f-disp);}
.rd-photo figcaption span{font:13px/1.4 var(--f-sans);color:var(--ink-2);}
.rd-photo figcaption em{font:600 11.5px/1.2 var(--f-sans);font-style:normal;color:var(--rust);}
.rd-got{margin-top:10px;padding:8px;border:1.4px solid var(--ink);border-radius:4px;background:#FFFDF7;box-shadow:2px 2px 0 var(--ink);}
.rd-got-h{font:700 13px/1.3 var(--f-sans);color:var(--rust);margin-bottom:6px;}
.rd-got .rd-pic{max-width:340px;margin:0 auto;}
@media (max-width:560px){ .rd-grid,.rd-album{grid-template-columns:1fr;} }
/* an order of more than three dishes (Kenta's six) is numbered and goes in that order: one row on a wide screen,
   two rows of three on a narrow or tall one (and in the column layout); the next dish due is ringed */
.b-items:has(> .b-item:nth-child(4)){display:grid;grid-template-columns:repeat(6,auto);gap:9px 3px;justify-content:center;align-items:end;counter-reset:rdn;}
#world.stack .b-items:has(> .b-item:nth-child(4)){display:grid;grid-template-columns:repeat(3,auto);}
@media (max-width:720px),(orientation:portrait){ .b-items:has(> .b-item:nth-child(4)){grid-template-columns:repeat(3,auto);} }
.b-items:has(> .b-item:nth-child(4)) > .b-item{counter-increment:rdn;margin:0;}
.b-items:has(> .b-item:nth-child(4)) > .b-item::before{content:counter(rdn);position:absolute;left:-4px;top:-5px;z-index:1;display:grid;place-items:center;width:15px;height:15px;box-sizing:border-box;border:1.3px solid var(--ink);border-radius:50%;background:var(--paper);font:700 10px/1 var(--f-sans);color:var(--ink);}
.b-items:has(> .b-item:nth-child(4)) > .b-item:first-child:not(.done),.b-items:has(> .b-item:nth-child(4)) > .b-item.done + .b-item:not(.done){outline:2px dashed var(--rust-2);outline-offset:2px;border-radius:6px;}
.b-items:has(> .b-item:nth-child(4)) > .b-item:first-child:not(.done)::before,.b-items:has(> .b-item:nth-child(4)) > .b-item.done + .b-item:not(.done)::before{background:var(--rust-2);color:var(--paper);}
.b-items:has(> .b-item:nth-child(4)) > .b-item.done::before{opacity:.35;}
/* a Chinese reading after a Japanese title: always the sans face, smaller */
.zh{font:600 .62em/1.2 var(--f-sans);letter-spacing:0;white-space:nowrap;}
/* wide landscape title: two rows between the radio (left) and the day card (right) — play first, the rest below */
@media (min-width:1000px) and (orientation:landscape){
  .title-acts{left:404px;right:250px;transform:none;width:auto;max-width:none;row-gap:8px;}
  .title-acts::before{content:"";order:2;flex-basis:100%;height:0;}
  #btnStart,#btnDays,#btnDaily{order:1;}
  #btnEnnichi,#btnRday,#btnAlbum,#btnShop{order:3;}
  #btnEnnichi{order:3;} #btnRday{order:4;} #btnAlbum{order:5;} #btnShop{order:6;}
}
.thumb.measuring{visibility:hidden;}