/* ═══════════════ NEKO KONBINI — UI chrome ═══════════════
   The game itself lives on the canvas. This file only styles the
   thin warm-paper shell around it. Keep it quiet.                */

:root{
  --sumi:#3B2E36;          --sumi-soft:#6A5560;
  --kinari:#F6EDDD;        --kinari-2:#EBDFC9;
  --paper:#FFFBF2;
  --wood:#C88F5A;
  --kon-blue:#2E7FC2;      --kon-green:#3FA96A;   --kon-orange:#E9863F;
  --red:#D9412F;           --gold:#E9B84B;
  --night:#1B2140;
  --ok:#3FA96A;            --warn:#E9863F;
  --shadow:0 6px 0 rgba(59,46,54,.16), 0 12px 30px rgba(59,46,54,.18);
  --r:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --font:"M PLUS Rounded 1c","Zen Maru Gothic",system-ui,sans-serif;
  --font-jp:"Zen Maru Gothic","M PLUS Rounded 1c",system-ui,sans-serif;
  --font-sign:"DotGothic16",monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Any class rule that sets `display` beats the browser default
   [hidden]{display:none}, because an author stylesheet always outranks the UA
   one. .cinema{display:grid} therefore kept the daruma scrim — a full-screen
   rgba(18,12,18,.66) sheet at z-index 45 — painted over the running game, and
   the same trap was armed for #hud, #toolbar, #sheet and the badges. */
[hidden]{display:none!important}
/* iOS Safari paints the text of every <button> in its own system blue unless
   told otherwise, and nothing here ever told it — so on an iPhone the toolbar,
   the pause and speed chips, the order tabs and the +10 buttons were all blue
   ink on warm paper. Buttons take the colour of whatever they sit in. */
button{color:inherit}

html,body{height:100%;margin:0;overflow:hidden;background:#12162c}
/* iOS Safari puts its address bar over the bottom of the layout viewport, so
   an element pinned to `bottom: 0` sits underneath it — which is why the
   toolbar was all but invisible on a phone. dvh is the visible height; the
   vh line stays as the fallback for anything that does not know it. */
:root{ --appH:100vh }
@supports (height:100dvh){ :root{ --appH:100dvh } }
body{font-family:var(--font);color:var(--sumi);overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}

/* Width and height are set from window.visualViewport at runtime where that
   exists (see main.js): pinch-zoom, the keyboard and the collapsing URL bar
   all move the VISIBLE box around inside the layout viewport, and a fixed HUD
   that ignores that ends up half off both edges of the screen at once. These
   values are the fallback for everything else. */
#app{position:fixed;left:0;top:0;width:100%;height:var(--appH);overflow:hidden;
  transform-origin:0 0}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}
#stage.grabbing{cursor:grabbing}
#stage.pointing{cursor:pointer}

/* ─────────── small screens ─────────── */
/* An iPhone SE or a mini in portrait is 320–375 CSS px across and under 700
   tall with the browser's own bars taken off. Everything below is the same
   layout at a smaller size rather than a different one — a phone should not
   get a worse shop, only a tighter frame around it. */
@media (max-width:400px), (max-height:700px){
  .hud{top:calc(var(--safe-t) + 6px);left:6px;right:6px}
  .chip{padding:4px 8px;font-size:13px;border-width:2px;border-radius:11px;box-shadow:0 2px 0 rgba(59,46,54,.22)}
  .chip-clock .day{font-size:8px}
  .chip-crew canvas{width:28px;height:28px}
  .hud-row{gap:6px;padding-right:70px}
  .phase{font-size:11px;padding:4px 9px}
  .toolbar{gap:4px;padding:5px 5px calc(5px + var(--safe-b))}
  .tool{min-height:46px;border-width:2px;border-radius:11px;padding:3px 2px;box-shadow:0 3px 0 rgba(59,46,54,.3)}
  .tool .ico{font-size:14px}
  .tool .jp{font-size:10.5px;letter-spacing:.5px}
  .tool .en{font-size:7px;letter-spacing:.8px}
  .stockpanel{top:calc(var(--safe-t) + 78px);bottom:86px}
}
@media (max-height:620px){
  .tool .en{display:none}
  .tool{min-height:40px}
}

/* ─────────── HUD ─────────── */
.hud{position:absolute;top:calc(var(--safe-t) + 10px);left:10px;right:10px;pointer-events:none;z-index:20}
/* The row runs off the right edge of a phone, which is fine for the sound and
   speed buttons and not fine for the one readout that is meant to be glanced
   at. The crew sits in its own corner, out of the row, at every width. */
.hud-row{display:flex;gap:8px;align-items:flex-start;padding-right:86px}
.chip{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(#FFFDF7,#F3E7D2);
  border:2.5px solid var(--sumi);border-radius:13px;
  padding:6px 11px;font-weight:800;font-size:15px;line-height:1;
  box-shadow:0 3px 0 rgba(59,46,54,.22);
}
.chip-money{color:#2A6B41;background:linear-gradient(#FFFDF7,#EAF6EC)}
.chip-money .yen{font-size:13px;opacity:.65;margin-right:-2px}
.chip-money .val{font-variant-numeric:tabular-nums;letter-spacing:.2px}
.chip-money.bump{animation:bump .35s cubic-bezier(.3,1.7,.5,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14) rotate(-1.5deg)}100%{transform:scale(1)}}
.chip-money.spend{animation:spend .4s ease}
@keyframes spend{0%,100%{filter:none}30%{filter:hue-rotate(-40deg) saturate(1.6)}}
.chip-clock{gap:7px}
.chip-clock .wx{font-size:14px;filter:saturate(1.1)}
.chip-clock .time{font-variant-numeric:tabular-nums;letter-spacing:.4px}
.chip-clock .day{font-size:10.5px;opacity:.6;letter-spacing:.7px;padding-left:5px;border-left:2px solid rgba(59,46,54,.2)}
.chip-btn{pointer-events:auto;cursor:pointer;font-family:var(--font);min-width:40px;justify-content:center;
  transition:transform .1s}
.chip-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(59,46,54,.22)}
.chip-btn.off{opacity:.45}
.chip-btn.on{background:var(--gold);color:#3B2E36;box-shadow:0 0 0 2px rgba(233,184,75,.35)}
.chip-rating{gap:3px;color:#E9A21E;font-weight:800}
.chip-rating span{color:var(--sumi);font-weight:800}
.lastorder{margin-top:6px;display:inline-flex;align-items:baseline;gap:8px;
  background:rgba(217,65,47,.92);color:#FFF6E4;border-radius:10px;padding:5px 11px;
  font-size:11px;letter-spacing:1.2px;animation:lastpulse 1s ease-in-out infinite}
.lastorder b{font-family:var(--font-jp);font-size:13px;letter-spacing:2px;font-weight:700}
@keyframes lastpulse{0%,100%{opacity:.96}50%{opacity:.62}}
.phase{margin-top:7px;display:inline-flex;align-items:baseline;gap:7px;
  background:rgba(59,46,54,.62);color:#FFF6E4;border-radius:10px;padding:4px 10px;
  font-size:11px;letter-spacing:1.2px}
.phase b{font-family:var(--font-jp);font-size:14px;letter-spacing:2px;font-weight:700}
.phase span{opacity:.7;text-transform:uppercase;font-size:9.5px}
.phase.flip{animation:phaseflip .55s ease}
@keyframes phaseflip{0%{transform:translateY(-8px) scaleY(.6);opacity:0}100%{transform:none;opacity:1}}
.hint{margin-top:6px;font-size:12px;color:#FFF6E4;text-shadow:0 1px 3px rgba(0,0,0,.6);
  opacity:0;transition:opacity .4s;max-width:min(70vw,340px);line-height:1.35}
.hint.on{opacity:.94}

/* ─────────── toolbar ─────────── */
.toolbar{position:absolute;left:0;right:0;bottom:0;z-index:22;
  display:flex;gap:6px;justify-content:center;
  padding:8px 8px calc(8px + var(--safe-b));
  background:linear-gradient(rgba(28,20,26,0),rgba(28,20,26,.42) 55%);}
.tool{
  flex:1 1 0;max-width:118px;min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(#FFFDF7,#F0E2C9);
  border:2.5px solid var(--sumi);border-radius:14px;
  box-shadow:0 4px 0 rgba(59,46,54,.3);
  font-family:var(--font);cursor:pointer;position:relative;
  transition:transform .08s,box-shadow .08s;padding:5px 2px}
.tool:active,.tool.is-on{transform:translateY(3px);box-shadow:0 1px 0 rgba(59,46,54,.3)}
.tool.is-on{background:linear-gradient(#FFF3D0,#F3D79A)}
.tool .ico{font-size:17px;line-height:1}
.tool .jp{font-family:var(--font-jp);font-weight:700;font-size:12px;letter-spacing:1px}
.tool .en{font-size:8px;letter-spacing:1.2px;opacity:.5;font-weight:700}
.tool .badge{position:absolute;top:-5px;right:-4px;width:15px;height:15px;border-radius:50%;
  background:var(--red);border:2px solid var(--paper);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
/* how much is left in the back, right on the button. Empty shouts in the same
   voice the order badge already uses. */
.tool .count{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--sumi);color:var(--kinari);border:2px solid var(--paper);
  font-size:9.5px;font-weight:800;font-style:normal;line-height:13px;letter-spacing:0}
.tool .count.low{background:var(--warn);color:#3B2E36}
.tool .count.out{background:var(--red);color:#FFF6E4;animation:pulse 1.5s infinite}

/* ─────────── arrange banner ─────────── */
.arr-legend{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-jp);
  font-size:11px;opacity:.75}
.arr-legend .lg{display:inline-block;border:2px dashed;border-radius:50%;margin-left:6px}
.arr-legend .lg-big{width:13px;height:9px;border-color:var(--ok)}
.arr-legend .lg-mid{width:10px;height:7px;border-color:var(--kon-blue)}
.arr-legend .lg-small{width:8px;height:6px;border-radius:2px;border-color:var(--gold)}
.arr-sel{display:inline-flex;align-items:center;gap:6px}
.arr-sel b{font-size:11.5px;font-weight:800}
.arr-sel button{border:2px solid var(--sumi);border-radius:9px;padding:4px 9px;
  font-family:var(--font);font-weight:800;font-size:10.5px;cursor:pointer;
  box-shadow:0 2px 0 rgba(59,46,54,.2)}
.arr-legend .lg-ok{width:10px;height:7px;border:0;border-radius:2px;background:rgba(63,169,106,.6)}
.arr-legend .lg-acc{width:10px;height:7px;border:0;border-radius:2px;background:rgba(78,142,208,.4)}
.arr-up{background:var(--gold);color:#3B2E36}
.arr-store{background:var(--paper);color:var(--sumi)}
.arr-sell{background:var(--paper);color:var(--sumi-soft)}
/* The storage tray and the arrange banner stack at the bottom, tray on top, so
   a banner that takes two lines on a phone pushes the tray up instead of under
   it. The dock spans the width and lets taps through; only its children catch
   them. (Centring with left:50% capped the banner at half the screen.) */
.arrange-dock{position:absolute;left:8px;right:8px;bottom:calc(78px + var(--safe-b));z-index:23;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.arrange-dock>*{pointer-events:auto;max-width:100%;box-sizing:border-box}
.inv-tray{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:min(100%,560px);
  background:rgba(255,246,228,.95);border:2.5px solid var(--sumi);border-radius:13px;padding:7px 10px;
  box-shadow:var(--shadow)}
.inv-head{display:flex;flex-direction:column;align-items:center;line-height:1.05;margin-right:2px}
.inv-head b{font-family:var(--font-jp);font-size:13px}
.inv-head span{font-size:8.5px;letter-spacing:1px;opacity:.6}
.inv-empty{font-size:10.5px;opacity:.6;padding:0 4px}
.inv-it{position:relative;width:48px;height:48px;border:2px solid rgba(59,46,54,.3);border-radius:10px;
  background:#FFFBF2;padding:2px;cursor:grab;touch-action:none}
.inv-it canvas{width:40px;height:40px;display:block}
.inv-n{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--sumi);color:var(--kinari);border:2px solid var(--paper);font-size:9.5px;font-weight:800;
  font-style:normal;line-height:13px;text-align:center}
.arr-sel button:disabled{opacity:.45;cursor:default}
.arrange-banner{display:flex;align-items:center;gap:10px;
  background:linear-gradient(#FFF3D0,#F1D18E);border:2.5px solid var(--sumi);
  border-radius:13px;padding:7px 8px 7px 14px;box-shadow:var(--shadow);
  animation:phaseflip .3s ease}
.arrange-banner .jp{font-family:var(--font-jp);font-weight:700;font-size:14px}
.arrange-banner .en{font-size:11px;opacity:.62;min-width:0}
.arrange-banner>.jp,.arrange-banner>.arr-legend,#btnArrangeDone{flex-shrink:0;white-space:nowrap}
/* a phone: name, key and DONE on the first line, the hint or the selection below */
@media (max-width:520px){
  .arrange-banner{flex-wrap:wrap;justify-content:space-between;row-gap:6px;padding:7px 8px 8px 12px}
  .arrange-banner>.en,.arrange-banner>.arr-sel{order:1;flex:1 0 100%;justify-content:center;text-align:center}
  .arr-sel{flex-wrap:wrap;row-gap:6px}
}
.arrange-banner button{font-family:var(--font);font-weight:800;font-size:11px;letter-spacing:1px;
  background:var(--sumi);color:#FFF6E4;border:0;border-radius:9px;padding:7px 12px;cursor:pointer}

/* ─────────── sheet ─────────── */
.sheet{position:absolute;inset:0;z-index:40}
.sheet-scrim{position:absolute;inset:0;background:rgba(24,16,22,.62);
  animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.sheet-body{position:absolute;left:0;right:0;bottom:0;max-height:82%;
  display:flex;flex-direction:column;
  background:var(--kinari);border-top:3px solid var(--sumi);
  border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.35);
  animation:rise .26s cubic-bezier(.2,.9,.3,1);padding-bottom:var(--safe-b)}
@keyframes rise{from{transform:translateY(100%)}}
.sheet-body.closing{animation:sink .2s ease forwards}
@keyframes sink{to{transform:translateY(100%)}}
.sheet-head{display:flex;align-items:center;gap:12px;padding:13px 14px 9px;
  border-bottom:2px dashed rgba(59,46,54,.2)}
.sheet-title{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}
.sheet-title b{font-family:var(--font-jp);font-size:20px;letter-spacing:2px}
.sheet-title span{font-size:10px;letter-spacing:2px;opacity:.5;font-weight:800}
.sheet-money{font-weight:800;font-size:16px;color:#2A6B41;font-variant-numeric:tabular-nums}
.sheet-x{width:34px;height:34px;border-radius:11px;border:2.5px solid var(--sumi);
  background:var(--paper);font-size:14px;cursor:pointer;font-family:var(--font);
  box-shadow:0 3px 0 rgba(59,46,54,.22)}
.sheet-x:active{transform:translateY(2px);box-shadow:none}
/* overflow-x:auto makes the other axis scroll-and-clip too, so the taller
   Japanese line box was being cut top and bottom. Explicit line-height on both
   scripts keeps the pill the size of its text. */
.sheet-tabs{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:10px 12px 14px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.sheet-tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;border:2.5px solid var(--sumi);border-radius:11px;background:var(--paper);
  padding:7px 13px;font-family:var(--font);font-weight:800;font-size:12.5px;letter-spacing:.6px;
  line-height:1.3;cursor:pointer;box-shadow:0 3px 0 rgba(59,46,54,.18);white-space:nowrap}
.tab .jpx{font-family:var(--font-jp);font-size:14.5px;line-height:1.3;margin-right:5px}
/* On a phone the Japanese and the English stack instead of sitting side by
   side. Hiding the English (V1.8) made the tabs fit and left a player who
   does not read Japanese looking at ごはん めん おかし with no idea which one
   is drinks. Stacked, a tab is only as wide as the longer of its two words. */
/* Compact tabs up to 680 px: the five need about 650 in a row, and between the
   phone breakpoint and that the last of them (STAFF) was off the right edge. */
@media (max-width:680px){
  .tab{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    padding:5px 11px;line-height:1.1}
  .tab .jpx{margin-right:0;font-size:14px}
  .tab .enx{display:block;font-size:8px;letter-spacing:.8px;opacity:.6;margin-top:2px}
}
.tab.is-on{background:linear-gradient(#FFE9AE,#F3CE7C);transform:translateY(2px);box-shadow:0 1px 0 rgba(59,46,54,.18)}
.sheet-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 12px 16px;flex:1}
.sheet-foot{padding:10px 12px calc(10px + var(--safe-b));border-top:2px dashed rgba(59,46,54,.2);
  background:var(--kinari-2)}

/* cards */
.card{display:flex;gap:11px;align-items:center;background:var(--paper);
  border:2.5px solid var(--sumi);border-radius:14px;padding:9px 11px;margin-bottom:9px;
  box-shadow:0 3px 0 rgba(59,46,54,.16);position:relative;overflow:hidden}
.card.locked{opacity:.55;filter:grayscale(.55)}
.card.owned{background:linear-gradient(#F0F8EF,#E6F1E4)}
/* a limited edition (V3.7): gold, and now and then a slow shine across it */
.card.ltd{border-color:#B8862A;background:linear-gradient(135deg,#FFF9E6,#FBEBC0 55%,#FFF6DC);
  box-shadow:0 3px 0 rgba(184,134,42,.4)}
.card.ltd::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  transform:translateX(-110%);animation:ltd-shine 4.2s ease-in-out infinite}
@keyframes ltd-shine{0%,70%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
@media (prefers-reduced-motion: reduce){.card.ltd::after{animation:none;display:none}}
.card-sub .ltdpill{display:inline-block;background:#B8862A;color:#FFF9E6;border-radius:6px;
  padding:2px 6px;margin-right:4px;font-size:10.5px;font-weight:800;letter-spacing:.3px}
.tab.ltd{background:linear-gradient(#FFF1C4,#EFC65C)}
.tab.ltd.is-on{background:linear-gradient(#FFE08A,#E0A93A)}
.card-art{flex:0 0 auto;width:58px;height:58px;border-radius:11px;background:var(--kinari-2);
  border:2px solid rgba(59,46,54,.18);display:block}
.card-mid{flex:1;min-width:0}
.card-nm{font-weight:800;font-size:15.5px;line-height:1.15;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.card-nm .jp{font-family:var(--font-jp);font-size:13.5px;opacity:.62;font-weight:700}
.card-sub{font-size:11.8px;opacity:.7;line-height:1.35;margin-top:2px}
.card-sub .tagpill{display:inline-block;background:rgba(59,46,54,.09);border-radius:6px;
  padding:2px 6px;margin-right:4px;font-size:10.5px;letter-spacing:.5px;font-weight:800;opacity:.85}
.card-sub .hot{color:var(--kon-orange);font-weight:800}
.card-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.price{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.price.cant{color:#B4483A}
.qty{display:flex;gap:4px}
.qbtn{border:2.5px solid var(--sumi);border-radius:9px;background:var(--paper);
  font-family:var(--font);font-weight:800;font-size:11px;padding:5px 7px;cursor:pointer;
  box-shadow:0 2.5px 0 rgba(59,46,54,.2);min-width:34px}
.qbtn:active{transform:translateY(2px);box-shadow:none}
.qbtn:disabled{opacity:.35;cursor:default}
.qbtn.buy{background:linear-gradient(#B9E6C4,#8FD3A4)}
.qbtn.big{padding:8px 14px;font-size:12.5px}
.stockpip{font-size:10px;opacity:.6;font-weight:800;letter-spacing:.4px}
.stockpip b{color:var(--kon-green)}
.stockpip.none b{color:#B4483A}

/* order basket */
.basket-line{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;margin-bottom:7px}
.basket-line .tot{font-size:16px;font-weight:800}
.btn-wide{width:100%;border:2.5px solid var(--sumi);border-radius:13px;
  background:linear-gradient(#FFE9AE,#F0C468);font-family:var(--font);font-weight:800;
  font-size:14px;letter-spacing:1px;padding:12px;cursor:pointer;box-shadow:0 4px 0 rgba(59,46,54,.3)}
.btn-wide:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(59,46,54,.3)}
.btn-wide:disabled{opacity:.4;cursor:default}

/* book */
.ach{display:flex;gap:10px;align-items:center;background:var(--paper);border:2.5px solid var(--sumi);
  border-radius:13px;padding:8px 10px;margin-bottom:8px;box-shadow:0 3px 0 rgba(59,46,54,.14)}
.ach.locked{opacity:.5}
.ach .seal{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:2.5px solid var(--red);
  color:var(--red);display:grid;place-items:center;font-family:var(--font-jp);font-weight:900;
  font-size:15px;transform:rotate(-7deg);background:#FFF6EE}
.ach.locked .seal{border-color:rgba(59,46,54,.3);color:rgba(59,46,54,.3);background:none;filter:grayscale(1)}
.ach-t{font-weight:800;font-size:13.5px}
.ach-d{font-size:11px;opacity:.6;margin-top:1px}
.ach-bar{height:5px;border-radius:3px;background:rgba(59,46,54,.13);margin-top:5px;overflow:hidden}
.ach-bar i{display:block;height:100%;background:var(--kon-green);border-radius:3px;transition:width .4s}
.who{display:flex;gap:11px;align-items:center;background:var(--paper);border:2.5px solid var(--sumi);
  border-radius:14px;padding:9px 11px;margin-bottom:9px;box-shadow:0 3px 0 rgba(59,46,54,.14)}
.who.unknown{opacity:.45;filter:grayscale(1)}
.who canvas{flex:0 0 auto;border-radius:11px;background:var(--kinari-2)}
.who-n{font-weight:800;font-size:14px}
.who-n .jp{font-family:var(--font-jp);font-size:11px;opacity:.55;margin-left:6px}
.who-d{font-size:11px;opacity:.65;line-height:1.4;margin-top:2px}
.who-v{font-size:10px;font-weight:800;letter-spacing:.6px;opacity:.55;margin-top:3px}
.sect{font-family:var(--font-jp);font-weight:700;font-size:13px;letter-spacing:2px;
  opacity:.55;margin:14px 0 8px;display:flex;align-items:center;gap:9px}
.sect:after{content:"";flex:1;height:2px;background:rgba(59,46,54,.16);border-radius:2px}
.sect:first-child{margin-top:4px}
.empty-note{font-size:12px;opacity:.55;text-align:center;padding:22px 10px;line-height:1.6}

/* ─────────── toasts ─────────── */
.toasts{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(80px + var(--safe-b));
  z-index:35;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:rgba(41,30,38,.9);color:#FFF3DF;border-radius:11px;padding:7px 14px;
  font-size:12.5px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.35);
  animation:toastin .3s cubic-bezier(.2,1.4,.4,1);max-width:80vw;text-align:center;line-height:1.35}
.toast.good{background:rgba(45,110,70,.93)}
.toast.bad{background:rgba(150,58,45,.93)}
.toast .jp{font-family:var(--font-jp);margin-right:6px;opacity:.85}
@keyframes toastin{from{transform:translateY(14px) scale(.9);opacity:0}}
.toast.out{animation:toastout .3s ease forwards}
@keyframes toastout{to{transform:translateY(-8px);opacity:0}}

/* ─────────── hanko stamp celebration ─────────── */
.stamp-layer{position:absolute;inset:0;z-index:38;pointer-events:none;display:grid;place-items:center}
.stamp{position:absolute;display:grid;place-items:center;width:190px;height:190px;
  animation:stampin 2.9s cubic-bezier(.2,1,.4,1) forwards}
.stamp .seal{width:130px;height:130px;border-radius:50%;border:7px solid var(--red);
  color:var(--red);display:grid;place-items:center;text-align:center;
  font-family:var(--font-jp);font-weight:900;font-size:26px;line-height:1.15;letter-spacing:2px;
  background:rgba(255,247,238,.14);transform:rotate(-9deg);
  box-shadow:0 0 0 3px rgba(217,65,47,.16) inset}
.stamp .cap{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--sumi);color:#FFF3DF;font-size:12px;font-weight:800;letter-spacing:1px;
  border-radius:9px;padding:6px 13px;box-shadow:0 5px 14px rgba(0,0,0,.35)}
.stamp .cap small{display:block;font-size:9px;opacity:.65;letter-spacing:1.4px;font-weight:700}
@keyframes stampin{
  0%{transform:scale(2.6) rotate(10deg);opacity:0}
  10%{transform:scale(.93) rotate(-2deg);opacity:1}
  16%{transform:scale(1.06) rotate(1deg)}
  22%{transform:scale(1) rotate(0)}
  78%{transform:scale(1) rotate(0);opacity:1}
  100%{transform:scale(1.05) translateY(-18px);opacity:0}}

/* ─────────── cinematic (daruma etc.) ─────────── */
.cinema{position:absolute;inset:0;z-index:45;background:rgba(18,12,18,.66);
  display:grid;place-items:center;animation:fade .55s ease}
.cinema .cin-card{text-align:center;color:#FFF3DF;max-width:min(84vw,420px);padding:20px}
.cinema canvas{display:block;margin:0 auto 14px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
.cinema h3{font-family:var(--font-jp);font-size:23px;letter-spacing:4px;margin:0 0 8px;font-weight:700}
.cinema p{font-size:13.5px;line-height:1.75;opacity:.86;margin:0 0 18px}
.cinema button{font-family:var(--font);font-weight:800;font-size:12px;letter-spacing:1.5px;
  border:2.5px solid #FFF3DF;background:none;color:#FFF3DF;border-radius:11px;
  padding:9px 22px;cursor:pointer}
.cinema button:active{transform:translateY(2px)}

/* ─────────── screens ─────────── */
.screen{position:absolute;inset:0;z-index:60;display:none;overflow:hidden}
.screen.is-active{display:block}
#titleCanvas{position:absolute;inset:0;width:100%;height:100%}
.title-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;padding:24px 20px calc(24px + var(--safe-b));
  text-align:center;overflow-y:auto}
.title-kicker{font-family:var(--font-jp);font-size:12px;letter-spacing:7px;color:#FFD9A5;opacity:.8;
  margin-bottom:8px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.title-logo{margin:0 0 10px;line-height:.86;display:flex;flex-direction:column;align-items:center}
.title-logo .l1{font-family:var(--font-sign);font-size:clamp(44px,13vw,74px);color:#FFF6E4;
  letter-spacing:4px;text-shadow:0 0 22px rgba(255,196,110,.55),0 5px 0 #A8442E,0 8px 26px rgba(0,0,0,.6)}
.title-logo .l2{font-family:var(--font-sign);font-size:clamp(28px,8.4vw,48px);color:#FFC97A;
  letter-spacing:9px;text-shadow:0 0 26px rgba(255,180,90,.7),0 4px 0 #7A2F22,0 8px 22px rgba(0,0,0,.6)}
.title-sub{font-size:13px;line-height:1.7;color:#F4E6D2;opacity:.82;margin:2px 0 20px;
  text-shadow:0 2px 8px rgba(0,0,0,.7)}
.name-block{background:rgba(28,20,30,.55);border:2.5px solid rgba(255,246,228,.28);
  border-radius:18px;padding:13px 14px;margin-bottom:18px;
  width:min(92vw,380px)}
.name-q{font-family:var(--font-jp);font-size:14px;color:#FFF3DF;letter-spacing:2px;margin-bottom:10px}
.name-q span{font-family:var(--font);font-size:9.5px;letter-spacing:1.6px;opacity:.5;margin-left:5px}
.name-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.nm{border:2.5px solid rgba(255,246,228,.4);background:rgba(255,246,228,.07);border-radius:12px;
  padding:8px 2px;cursor:pointer;color:#FFF3DF;font-family:var(--font);transition:transform .1s}
.nm b{display:block;font-family:var(--font-jp);font-size:14px;font-weight:700;letter-spacing:1px}
.nm span{display:block;font-size:9px;letter-spacing:1px;opacity:.55;margin-top:2px;font-weight:800}
.nm.is-on{background:linear-gradient(#FFE9AE,#F0C468);color:var(--sumi);border-color:#FFF3DF;
  transform:translateY(-2px);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.name-custom{width:100%;margin-top:8px;border:2.5px solid rgba(255,246,228,.3);border-radius:11px;
  background:rgba(0,0,0,.22);color:#FFF3DF;font-family:var(--font);font-size:13px;font-weight:700;
  padding:9px 12px;text-align:center;outline:none}
.name-custom::placeholder{color:rgba(255,243,223,.35);font-weight:400}
.name-custom:focus{border-color:#F0C468}
.btn-open{border:3px solid var(--sumi);border-radius:16px;
  background:linear-gradient(#FFE9AE,#F0BE55);cursor:pointer;font-family:var(--font);
  padding:13px 34px;box-shadow:0 6px 0 #A8712C,0 14px 30px rgba(0,0,0,.4);
  display:flex;align-items:baseline;gap:11px;transition:transform .1s,box-shadow .1s}
.btn-open:active{transform:translateY(4px);box-shadow:0 2px 0 #A8712C,0 8px 18px rgba(0,0,0,.4)}
.btn-open .jp{font-family:var(--font-jp);font-size:21px;font-weight:900;letter-spacing:3px}
.btn-open .en{font-size:10.5px;font-weight:800;letter-spacing:2px;opacity:.62}
.btn-cont{margin-top:14px;background:none;border:0;color:#FFE3B4;font-family:var(--font);
  font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;opacity:.85;padding:8px}
.btn-cont b{color:#FFF6E4}
.btn-wipe{margin-top:2px;background:none;border:0;color:rgba(255,227,180,.4);font-family:var(--font);
  font-size:10px;letter-spacing:1px;cursor:pointer;padding:6px}
/* the title's "load with a code" */
.code-block{width:min(92vw,300px);margin-top:4px}
.code-row{display:flex;gap:6px;align-items:stretch}
.code-row .code-in{flex:1;width:auto;min-width:0;margin-top:0;font-size:17px;letter-spacing:5px;
  text-transform:lowercase}
.code-in::placeholder{letter-spacing:1px}
.code-go{flex:0 0 auto;border:2.5px solid rgba(255,246,228,.4);background:rgba(255,246,228,.1);
  color:#FFF3DF;border-radius:11px;font-family:var(--font-jp);font-size:12px;font-weight:700;
  letter-spacing:1px;padding:0 12px;cursor:pointer}
.code-go:disabled{opacity:.5}
.code-msg{min-height:16px;margin-top:5px;font-size:11px;font-weight:700;color:#FFE3B4;letter-spacing:.5px}
.code-msg.is-bad{color:#FF9D8A}

/* end of day */
#screenClose{background:rgba(16,12,22,.8);display:none;place-items:center}
#screenClose.is-active{display:grid}
.close-card{width:min(92vw,420px);max-height:92vh;overflow-y:auto;background:var(--kinari);
  border:3px solid var(--sumi);border-radius:22px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:rise2 .4s cubic-bezier(.2,1,.3,1)}
@keyframes rise2{from{transform:translateY(30px) scale(.96);opacity:0}}
.close-head{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;
  border-bottom:2px dashed rgba(59,46,54,.22);margin-bottom:12px}
.close-head b{font-size:22px;font-weight:800;letter-spacing:1px}
.close-head span{font-family:var(--font-jp);font-size:12px;opacity:.5;letter-spacing:2px}
.close-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.crow{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700}
.crow span{opacity:.62;font-size:12px}
.crow b{font-variant-numeric:tabular-nums;font-size:15px}
.crow.big b{font-size:19px;color:#2A6B41}
.crow.neg b{color:#B4483A}
.crow.rule{border-top:2px dashed rgba(59,46,54,.22);padding-top:8px;margin-top:2px}
.close-note{font-size:12.5px;line-height:1.65;opacity:.75;background:rgba(59,46,54,.06);
  border-radius:12px;padding:10px 12px;margin-bottom:14px;min-height:20px}
.close-note .jp{font-family:var(--font-jp);font-weight:700}
.close-card .btn-open{width:100%;justify-content:center}

@media (max-width:420px){
  .tool{min-height:52px}
  .tool .jp{font-size:11px}
  .card-art{width:46px;height:46px}
}
@media (min-height:760px) and (min-width:520px){
  .hud{top:calc(var(--safe-t) + 14px);left:14px;right:14px}
}

/* ─────────── manager verdict ─────────── */
/* The verdict used to be plain text floating on the dim overlay, which read as
   a debug print rather than as something that happened in the shop. It is a
   page off the area manager's clipboard now: he stands there writing, and this
   is what he wrote. */
.cinema .mv-card{position:relative;min-width:min(88vw,346px);max-width:min(88vw,346px);
  background:
    repeating-linear-gradient(180deg,transparent 0 25px,rgba(90,130,150,.18) 25px 26px),
    linear-gradient(180deg,#FDF6E6,#F6EAD2);
  color:#3B2E36;text-align:left;border-radius:3px;padding:30px 20px 18px 30px;
  box-shadow:0 18px 34px rgba(0,0,0,.48),0 1px 0 rgba(255,255,255,.6) inset;
  transform:rotate(-1.1deg)}
/* the red margin rule every Japanese report pad has */
.cinema .mv-card::before{content:'';position:absolute;left:19px;top:0;bottom:0;width:1.5px;
  background:rgba(200,70,60,.34)}
/* the clip that holds the page to the board */
.cinema .mv-card::after{content:'';position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:64px;height:20px;border-radius:4px 4px 7px 7px;
  background:linear-gradient(180deg,#C9CED6,#9BA3AD 58%,#7E858F);
  box-shadow:0 3px 6px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.7) inset}
.cinema .mv-head{font-family:var(--font-jp);font-size:19px;letter-spacing:3px;color:#3B2E36;
  margin:0 0 2px;font-weight:700}
.cinema .mv-head span{display:block;font-family:var(--font);font-size:9px;letter-spacing:1.6px;
  opacity:.5;text-transform:uppercase;margin-top:2px}
.cinema .mv-grade{font-size:26px;font-weight:800;color:#C18A2E;margin:6px 0 10px;letter-spacing:1px}
.cinema .mv-row{display:flex;align-items:center;gap:9px;margin:5px 0}
.cinema .mv-l{flex:0 0 92px;text-align:right;font-family:var(--font-jp);font-size:12px;color:#3B2E36}
.cinema .mv-l b{display:block;font-family:var(--font);font-size:9px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;opacity:.45}
.cinema .mv-bar{flex:1;height:8px;border-radius:2px;background:rgba(59,46,54,.10);
  border:1px solid rgba(59,46,54,.22);overflow:hidden}
.cinema .mv-bar i{display:block;height:100%;background:#3E8F63}
.cinema .mv-say{margin:15px 0 4px;font-size:12px;line-height:1.6;color:#3B2E36;opacity:1}
.cinema .mv-say .jp{font-family:var(--font-jp);font-size:16px;color:#3B2E36}
.cinema .mv-romaji{font-size:10px;opacity:.5;letter-spacing:.6px}
.cinema .mv-bonus{color:#2A7D4E;font-weight:800;font-size:13px;margin:6px 0 0}
/* the inspector's hanko, stamped a little crooked like every real one */
.cinema .mv-stamp{position:absolute;right:14px;top:52px;width:46px;height:46px;border-radius:50%;
  border:2.5px solid rgba(196,62,48,.7);color:rgba(196,62,48,.75);
  font-family:var(--font-jp);font-size:19px;font-weight:700;
  display:grid;place-items:center;transform:rotate(11deg);opacity:.85}
.cinema .mv-card button{border-color:#3B2E36;color:#3B2E36;margin-top:14px;
  font-family:var(--font-jp);letter-spacing:3px;font-size:13px}

/* the store rating, explained (ui.js showRatingInfo): the manager's clipboard
   page, above the end-of-day card */
.info-pop{z-index:80}
.cinema .ri-card{text-align:left;max-height:92vh;overflow-y:auto}
.cinema .ri-card .mv-head,.cinema .ri-card .mv-grade{text-align:center}
.cinema .ri-card .mv-grade small{display:block;font-size:10.5px;font-weight:700;opacity:.55;color:#3B2E36;
  letter-spacing:.4px;margin-top:2px}
.cinema .ri-row{margin:10px 0 2px}
.cinema .ri-row p{margin:3px 0 0;font-size:11px;line-height:1.45;opacity:.92}
.cinema .ri-row .ri-up{color:#2A6B41}
.cinema .ri-row .ri-down{color:#A8463A}
.cinema .ri-card .mv-say{text-align:center;margin-top:12px}
.cinema .ri-card button{display:block;margin:12px auto 0}
.cinema .mv-card .mv-info{display:block;margin:10px auto 0;padding:5px 14px;font-family:var(--font);
  font-size:11px;letter-spacing:.4px}
.chip-rating .info-i{display:inline-grid;place-items:center;width:14px;height:14px;margin-left:5px;border-radius:50%;
  border:1.5px solid rgba(59,46,54,.45);color:var(--sumi);font:800 9px var(--font);font-style:normal;opacity:.7}
.info-btn{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:5px;padding:0;border-radius:50%;
  border:1.5px solid rgba(59,46,54,.45);background:none;color:inherit;font:800 10px var(--font);cursor:pointer;
  vertical-align:1px}

/* ─────────── stock panel ─────────── */
.stockpanel{position:absolute;left:8px;top:96px;bottom:104px;width:206px;z-index:30;
  display:flex;flex-direction:column;background:rgba(246,237,221,.97);
  border:2.5px solid rgba(59,46,54,.22);border-radius:14px;overflow:hidden;
  box-shadow:0 8px 26px rgba(59,46,54,.24)}
.sp-head{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 10px 7px;
  font-family:var(--font-jp);font-size:15px;letter-spacing:2px;color:var(--sumi);
  background:var(--kinari-2)}
.sp-head span{font-family:var(--font);font-size:9px;letter-spacing:1.5px;opacity:.5;font-weight:700}
.sp-x{margin-left:auto;border:0;background:none;font-size:17px;line-height:1;
  color:var(--sumi-soft);cursor:pointer;padding:0 2px}
.sp-list{flex:1;overflow-y:auto;overscroll-behavior:contain;touch-action:none;padding:5px}
/* none: stockpanel.js scrolls the list itself and decides every gesture, so
   the browser never gets to call a diagonal drag a scroll */
.sp-row{display:flex;align-items:center;gap:6px;padding:4px 5px;border-radius:8px;
  cursor:grab;touch-action:none;user-select:none}
.sp-row:active{cursor:grabbing;background:rgba(233,184,75,.28)}
.sp-row+.sp-row{margin-top:2px}
.sp-row.sp-empty{opacity:.42;cursor:default}
.sp-ico{flex:0 0 26px;height:26px;display:block;position:relative}
/* 欠 · in the back, on no shelf. Small, round, and red enough to find in a
   column of thirty pictures without shouting over the rest of them. */
.sp-miss{position:absolute;top:-4px;right:-6px;width:14px;height:14px;border-radius:50%;
  background:var(--red);color:#FFF6E4;border:1.5px solid var(--paper);
  font-family:var(--font-jp);font-style:normal;font-size:8.5px;font-weight:700;line-height:1;
  display:grid;place-items:center;box-shadow:0 1px 2px rgba(59,46,54,.3)}
.sp-tip em{display:block;font-style:normal;font-size:10px;font-weight:800;color:var(--red);margin-top:4px}
.sp-name{flex:1;min-width:0;font-size:10.5px;font-weight:700;color:var(--sumi);line-height:1.25}
.sp-name b{display:block;font-weight:700}
.sp-name i{font-style:normal;font-size:8px;letter-spacing:.8px;padding:1px 4px;
  border-radius:4px;margin-right:3px}
.sp-hot{background:var(--warn);color:#FFF6E4}
.sp-fav{background:#B0608E;color:#FFF6E4}
.sp-lowt{background:rgba(59,46,54,.16);color:var(--sumi-soft)}
.sp-outt{background:var(--red);color:#FFF6E4}
.sp-n{flex:0 0 30px;text-align:center;line-height:1.05}
.sp-n b{display:block;font-size:12px;font-weight:800;color:var(--sumi)}
.sp-n span{font-size:7.5px;letter-spacing:.6px;opacity:.45;text-transform:uppercase}
.sp-foot{flex:0 0 auto;padding:6px 9px;font-size:9px;letter-spacing:.7px;
  opacity:.5;background:var(--kinari-2);text-align:center}
.sp-none{padding:18px 12px;text-align:center;font-size:10.5px;opacity:.55;line-height:1.6}
/* a tap on a picture in the phone rail: what is it */
.sp-tip{position:absolute;z-index:31;transform:translateY(-50%);pointer-events:none;
  min-width:120px;max-width:200px;padding:7px 10px 7px 11px;border-radius:10px;
  background:var(--paper);border:2.5px solid var(--sumi);box-shadow:0 4px 0 rgba(59,46,54,.2);
  font-family:var(--font);color:var(--sumi);line-height:1.25;animation:tipIn .14s ease-out}
.sp-tip::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:11px;height:11px;background:var(--paper);border-left:2.5px solid var(--sumi);
  border-bottom:2.5px solid var(--sumi)}
.sp-tip b{display:block;font-size:13px;font-weight:800}
.sp-tip .jp{display:block;font-family:var(--font-jp);font-size:11px;opacity:.6;margin-top:1px}
.sp-tip i{display:block;font-style:normal;font-size:9.5px;opacity:.65;margin-top:3px;letter-spacing:.2px}
@keyframes tipIn{from{opacity:0;transform:translate(-4px,-50%)}to{opacity:1;transform:translate(0,-50%)}}

/* a stack carried back over the rail: letting go here puts it back */
.stockpanel.sp-return{border-color:#E9A63F;
  box-shadow:0 0 0 3px rgba(233,166,63,.38),0 8px 26px rgba(59,46,54,.24)}
.stockpanel.sp-return::after{content:'戻す · put back';position:absolute;left:0;right:0;bottom:0;
  padding:8px 4px;text-align:center;font-family:var(--font-jp);font-size:11.5px;font-weight:700;
  letter-spacing:.5px;background:#F3D79A;color:var(--sumi);pointer-events:none}
.stockpanel.sp-compact.sp-return::after{content:'戻す';font-size:13px;letter-spacing:1px}
/* Phones get the rail: icon, count, nothing else. Every row here is something
   you can pick up and drag, which is the only thing the panel is for on a
   screen this size. */
@media (max-width:520px){
  .stockpanel{width:66px;top:88px;bottom:96px;border-radius:12px}
  .sp-compact .sp-head{justify-content:center;padding:6px 4px 5px;font-size:13px;letter-spacing:0}
  .sp-compact .sp-head span{display:none}
  .sp-compact .sp-x{margin-left:0;font-size:15px}
  .sp-compact .sp-list{padding:4px 2px}
  .sp-compact .sp-row{flex-direction:column;gap:0;padding:4px 1px}
  .sp-compact .sp-row+.sp-row{margin-top:3px}
  .sp-compact .sp-ico{flex:0 0 30px;height:30px}
  .sp-compact .sp-name{display:none}
  .sp-compact .sp-n+.sp-n{display:none}
  .sp-compact .sp-n{flex:0 0 auto}
  .sp-compact .sp-n b{font-size:11px}
  .sp-compact .sp-n span{display:none}
  .sp-compact .sp-foot{display:none}
  .sp-compact .sp-none{padding:14px 2px;font-family:var(--font-jp);font-size:11px}
}

/* ─────────── the crew ─────────── */
.chip-crew{position:absolute;right:0;top:0;z-index:2;display:flex;align-items:center;gap:2px;padding:2px 5px}
/* On a phone the row is wider than the screen, so it wraps rather than
   sliding the speed and sound buttons off the edge — and the crew keeps its
   corner either way. */
/* likewise the HUD row: at 560 px the fullscreen button lay under the crew */
@media (max-width:680px){ .hud-row{flex-wrap:wrap;row-gap:6px} }
.chip-crew canvas{display:block;width:34px;height:34px}
.chip-crew canvas+canvas{margin-left:-6px}

/* ─────────── staff tab ─────────── */
.st-card{display:flex;gap:11px;align-items:flex-start;background:var(--paper);
  border:2.5px solid rgba(59,46,54,.18);border-radius:13px;padding:10px 11px;margin:0 0 9px}
.st-hire{border-style:dashed}
.st-card>canvas{flex:0 0 54px}
.st-b{flex:1;min-width:0}
.st-n{font-size:14px;font-weight:800;color:var(--sumi);line-height:1.25}
.st-n .jp{font-family:var(--font-jp);font-size:11px;font-weight:700;opacity:.45;margin-left:7px}
.st-d{font-size:11px;line-height:1.55;color:var(--sumi-soft);margin-top:3px}
.st-w{font-family:var(--font-jp);font-size:11.5px;color:var(--sumi);margin-top:6px;
  background:rgba(233,166,63,.16);border-radius:7px;padding:4px 8px;display:inline-block}
.st-w b{font-family:var(--font);font-weight:800}
.st-name{display:flex;align-items:center;gap:7px;margin-top:8px;
  font-family:var(--font-jp);font-size:12px;color:var(--sumi)}
.st-name input{flex:1;min-width:0;font-family:var(--font);font-size:13px;font-weight:700;
  color:var(--sumi);background:var(--kinari);border:2px solid rgba(59,46,54,.22);
  border-radius:8px;padding:6px 9px}
.st-a{flex:0 0 auto;display:flex;align-items:center}
.st-a button{font-family:var(--font-jp);font-size:12px;font-weight:700;letter-spacing:.5px;
  border:2.5px solid var(--sumi);background:var(--gold-soft,#F3CE7C);color:var(--sumi);
  border-radius:10px;padding:9px 13px;cursor:pointer;box-shadow:0 3px 0 rgba(59,46,54,.18)}
.st-a button:disabled{opacity:.45;cursor:default;background:var(--kinari-2)}
.st-a button:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(59,46,54,.18)}
.st-a .st-let{background:var(--kinari-2);border-color:rgba(180,72,58,.5);color:var(--red);font-size:11px}
.st-a .st-let.is-arm{background:var(--red);color:#FFF6E4;border-color:var(--red)}
@media (max-width:520px){
  .st-card{flex-wrap:wrap}
  .st-a{width:100%;margin-top:8px}
  .st-a button{flex:1}
}

/* ─────────── discounts ─────────── */
.boon-line{display:flex;align-items:baseline;gap:7px;margin:0 0 8px;padding:5px 9px;
  border-radius:8px;background:rgba(46,125,78,.12);border:1.5px dashed rgba(46,125,78,.45);
  font-family:var(--font-jp);font-size:12.5px;color:#2A7D4E}
.boon-line b{font-family:var(--font);font-size:13px;font-weight:800}
.boon-line span{font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.4px;
  opacity:.7;margin-left:auto;text-align:right}
.price s,.tagpill s{opacity:.45;font-weight:600;margin-left:5px;text-decoration:line-through}
.tagpill s{font-size:.85em}

/* ─────────── saves ─────────── */
.sv{display:flex;align-items:center;gap:10px;padding:9px 10px;margin:0 0 7px;
  background:var(--kinari);border:2px solid rgba(59,46,54,.16);border-radius:11px}
.sv-empty{opacity:.72;border-style:dashed}
.sv-n{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:12px;color:var(--sumi-soft);background:rgba(59,46,54,.10)}
.sv-b{flex:1;min-width:0}
.sv-t{font-size:12.5px;font-weight:800;color:var(--sumi);line-height:1.3}
.sv-d{font-size:10px;color:var(--sumi-soft);opacity:.8;margin-top:2px;line-height:1.35}
.sv-a{display:flex;gap:5px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.sv-a button{font-family:var(--font-jp);font-size:11px;font-weight:700;letter-spacing:.5px;
  border:2px solid rgba(59,46,54,.26);background:var(--kinari-2);color:var(--sumi);
  border-radius:8px;padding:5px 9px;cursor:pointer;min-height:30px}
.sv-a button:active{transform:translateY(1px)}
.sv-a .sv-load{border-color:rgba(46,125,78,.5);color:#2A7D4E}
.sv-a .sv-del{padding:5px 8px;color:var(--red);border-color:rgba(180,72,58,.4);font-size:13px}
.sv-a .is-arm{background:var(--red);color:#FFF6E4;border-color:var(--red)}
.sv-prev{border-color:rgba(138,110,208,.45);background:rgba(138,110,208,.08)}
.sv-prev .sv-n{background:rgba(138,110,208,.18);color:#6B52A8}
.sv-file{padding:10px 12px;background:var(--kinari);border:2px solid rgba(59,46,54,.16);
  border-radius:11px}
.sv-file p{margin:0 0 9px;font-size:11px;line-height:1.6;color:var(--sumi-soft)}
.sv-file .sv-a{justify-content:flex-start}
/* online: the code this shop is kept under, and a box to type another */
.cl-now{display:flex;align-items:center;gap:11px;margin:0 0 9px}
.cl-now .sv-d{margin:0}
.cl-code{font-family:var(--font);font-size:21px;font-weight:800;letter-spacing:4px;color:var(--sumi);
  background:#FFFBF2;border:2px dashed rgba(59,46,54,.34);border-radius:10px;padding:4px 10px 4px 14px;
  cursor:pointer;-webkit-user-select:all;user-select:all}
.cl-load{display:flex;gap:6px;margin-top:10px}
.cl-in{flex:1;min-width:0;font-family:var(--font);font-size:16px;font-weight:800;letter-spacing:4px;
  border:2px solid rgba(59,46,54,.26);border-radius:8px;padding:6px 10px;background:#FFFBF2;
  color:var(--sumi);outline:none;text-transform:lowercase}
.cl-in::placeholder{letter-spacing:1px;font-weight:400;color:rgba(59,46,54,.35)}
.cl-in:focus{border-color:var(--gold)}
.cl-go{font-family:var(--font-jp);font-size:11px;font-weight:700;letter-spacing:.5px;cursor:pointer;
  border:2px solid rgba(46,125,78,.5);color:#2A7D4E;background:var(--kinari-2);border-radius:8px;
  padding:5px 11px;min-height:34px}
.cl-card{margin-top:9px;padding:9px 10px;border-radius:10px;border:2px solid rgba(138,110,208,.45);
  background:rgba(138,110,208,.08)}
.cl-card .sv-a{margin-top:8px;justify-content:flex-start}
.cl-warn{font-size:10.5px;color:#6B52A8;margin-bottom:4px}
.cl-msg{font-size:11px;margin-top:8px;line-height:1.5;color:var(--sumi-soft)}
.cl-msg.is-good{color:#2A7D4E}
.cl-msg.is-bad{color:var(--red)}
.sv-a button:disabled,.cl-go:disabled{opacity:.5;cursor:default}
@media (max-width:520px){
  .sv{flex-wrap:wrap}
  .sv-a{width:100%;justify-content:stretch}
  .sv-a button{flex:1}
  .sv-a .sv-del{flex:0 0 40px}
}

/* ─────────── closing highlights ─────────── */
.chi-wrap{margin-top:12px;padding-top:10px;border-top:1.5px dashed rgba(59,46,54,.2)}
.chi{font-size:11px;line-height:1.7;color:var(--sumi-soft);padding-left:13px;position:relative}
.chi::before{content:'·';position:absolute;left:3px;top:-1px;font-weight:800;color:var(--wood)}
.chi b{color:var(--sumi);font-weight:800}

/* ─────────── order card: context beside the buttons ─────────── */
.ctx{display:flex;gap:8px;justify-content:flex-end;margin-bottom:4px}
.ctx span{display:flex;flex-direction:column;align-items:center;line-height:1.05;
  font-size:7.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--sumi-soft);opacity:.72}
.ctx b{font-size:13px;font-weight:800;color:var(--sumi);opacity:1}
.ctx.none b{color:var(--red)}
.ctx-q b{color:var(--kon-green)}
.card-sub .tagpill{font-size:10px}
.qbtn.clr{margin-top:3px;font-size:9px;opacity:.7}