/* =========================================================
   カフェ経営はやめとけ！ — UI layer
   The shop is a full-bleed isometric canvas; every piece of UI is printed matter
   laid on top of it: 伝票 (ruled order slips), the 日計表 receipt, 物件チラシ, ゴム印.
   ========================================================= */
/* Dela Gothic One draws 、 and 。 at a third to two fifths of a full width, so a heading reads 物件は5つ。客も、敵も with no room
   after them. Those two take the full-width marks of Zen Maru Gothic 700 (the body font, already in common) instead */
@font-face{font-family:"Cafe Punct";font-style:normal;font-weight:400;font-display:swap;src:url('../../common/fonts/zen-maru-gothic/700-239.woff2') format('woff2');unicode-range:U+3001-3002}
:root{
  /* ink & paper */
  --ink:#2b2420;          /* espresso ink — body text, borders */
  --ink-soft:#5e534b;     /* secondary text (7.3:1 on paper) */
  --ink-mute:#776b62;     /* tertiary text (5.0:1 on paper) */
  --paper:#fffcf4;        /* slip paper */
  --paper-2:#f5efe1;      /* second sheet / wells */
  --paper-3:#e9e1cd;      /* pressed wells */
  /* printed colours */
  --rule:#1f6b56;         /* 伝票グリーン — ruling, primary (white on it 6.4:1) */
  --rule-deep:#124a3b;
  --rule-soft:#cbdfd4;    /* hairline ruling */
  --rule-faint:#e7f0ea;
  --stamp:#c8372a;        /* 朱肉 — stamp, alerts, the 開店 action (white on it 5.2:1) */
  --stamp-deep:#8d2216;
  --stamp-soft:#f7e0da;
  --carbon:#34509e;       /* カーボン複写の青 — serials, handwritten entries (7.3:1) */
  --carbon-soft:#dfe5f3;
  --gold:#e0a43a;         /* stars only */
  --gold-ink:#9a6a12;
  --night:#1b2430;
  --board:#cfd8d2;        /* the table the slips lie on (= canvas bg) */
  /* spacing / radius / type scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r1:2px;--r2:4px;--r3:8px;
  --t-2xs:10px;--t-xs:11px;--t-sm:12px;--t-md:14px;--t-lg:17px;--t-xl:22px;--t-2xl:30px;
  --tap:44px;
  --lift:0 1px 0 rgba(31,107,86,.22),0 12px 26px -16px rgba(43,36,32,.6);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-pop:cubic-bezier(.2,1.45,.4,1);
  --f-display:"Cafe Punct","Dela Gothic One","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-num:"Space Mono","SFMono-Regular",ui-monospace,Menlo,monospace;
  --vh:100vh;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:max(10px,env(safe-area-inset-left,0px));--sar:max(10px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
@supports (height:100dvh){:root{--vh:100dvh}}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--board);color:var(--ink);overflow:hidden;overscroll-behavior:none}
html{font-synthesis-weight:none;font-synthesis:none}
body{font-family:var(--f-body);font-size:var(--t-md);line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0}
#game canvas{display:block;touch-action:none}
button{font-family:inherit;color:inherit;cursor:pointer;font-size:inherit;-webkit-touch-callout:none}
button:focus{outline:none}
:focus-visible{outline:2.5px solid var(--carbon)!important;outline-offset:2px}
h1,h2,h3,p{margin:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.yen::before{content:"¥";margin-right:1px}
.price{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- slip (伝票) base ---------- */
.slip{background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--r1);box-shadow:var(--lift)}
.slip-head{display:flex;align-items:center;gap:var(--s2);border-bottom:1.5px solid var(--rule);padding:var(--s2) var(--s3);color:var(--rule);min-height:44px}
.slip-head h2{font-size:var(--t-lg);font-weight:700;letter-spacing:.14em;color:var(--rule);line-height:1.2}
.slip-head small{font-size:var(--t-xs);letter-spacing:.04em;color:var(--ink-soft)}
.slip-head .serial,.serial{font-family:var(--f-num);font-size:var(--t-xs);color:var(--carbon);letter-spacing:.04em;margin-left:auto;white-space:nowrap}
.slip-head .serial b{font-weight:700}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 var(--s4);border:1.5px solid var(--ink);background:var(--paper);border-radius:var(--r1);font-weight:700;font-size:var(--t-md);line-height:1.2;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .15s;white-space:nowrap;touch-action:manipulation}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn.primary{background:var(--rule);color:#fff;border-color:var(--rule-deep);box-shadow:0 3px 0 var(--rule-deep)}
.btn.primary:active{box-shadow:0 1px 0 var(--rule-deep)}
.btn.danger{background:var(--stamp);color:#fff;border-color:var(--stamp-deep);box-shadow:0 3px 0 var(--stamp-deep)}
.btn.danger:active{box-shadow:0 1px 0 var(--stamp-deep)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn.ghost:active{transform:none;background:var(--paper-2)}
.btn[disabled]{opacity:1;background:var(--paper-2);color:var(--ink-mute);border-color:var(--paper-3);box-shadow:none;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
.btn small{font-weight:500;font-size:var(--t-xs);opacity:.85}
.btn.sm{min-height:40px;padding:0 var(--s3);font-size:var(--t-sm)}
.btn.icon-only{width:var(--tap);padding:0}
@media (hover:hover){.btn:not([disabled]):hover{background:var(--paper-2)}.btn.primary:not([disabled]):hover{background:#257a63}.btn.danger:not([disabled]):hover{background:#d2402f}.btn.ghost:hover{background:var(--paper-2)}}

/* ---------- HUD : one ruled slip, like the header of an order pad ---------- */
#hud{position:absolute;left:0;right:0;top:0;padding:calc(8px + var(--sat)) var(--sar) 0 var(--sal);z-index:20;pointer-events:none;display:flex;justify-content:center}
.hud-strip{pointer-events:auto;width:100%;max-width:1100px;display:grid;grid-template-columns:62px auto minmax(240px,1fr) auto 48px;grid-template-areas:"day time goal cash menu";align-items:stretch;padding:0;overflow:visible;position:relative}
.hud-strip > *{min-width:0}
.hud-strip > * + *{border-left:1px solid var(--rule-soft)}
.h-day{grid-area:day;display:grid;place-items:center;padding:4px 0}
.datestamp{width:48px;height:48px;border:2px solid var(--stamp);border-radius:50%;color:var(--stamp);display:grid;grid-template-rows:1fr auto 1fr;align-items:center;justify-items:center;transform:rotate(-9deg);line-height:1;font-weight:700;position:relative}
.datestamp small{font-size:8px;letter-spacing:.06em}
.datestamp small:first-child{align-self:end;padding-bottom:1px}
.datestamp small:last-child{align-self:start;padding-top:1px}
.datestamp b{font-family:var(--f-num);font-size:15px;width:100%;text-align:center;border-top:1.5px solid var(--stamp);border-bottom:1.5px solid var(--stamp);padding:1px 0 0;letter-spacing:-.04em}
.h-time{grid-area:time;padding:6px 12px;display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
.h-time .clock{font-size:20px;font-weight:700;line-height:1.05}
.h-time .sub{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--ink-soft);margin-top:2px}
.h-time .sub span{display:inline-flex;align-items:center;gap:2px}
.h-time .sub svg{width:15px;height:15px}
.h-time .sub .tmp{font-style:normal;margin-left:3px;font-weight:700}
.h-time .left{font-size:var(--t-xs);font-weight:700;color:var(--rule)}
.h-time .left.warn{color:var(--stamp)}
.h-goal{grid-area:goal;padding:6px 14px 8px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"lbl cust tgt" "val val pct" "meter meter meter";align-items:baseline;column-gap:8px;white-space:nowrap}
.h-goal .lbl{grid-area:lbl;font-size:var(--t-xs);font-weight:700;color:var(--rule);letter-spacing:.06em}
.h-goal .cust{grid-area:cust;font-size:var(--t-xs);color:var(--ink-mute)}
.h-goal .tgt{grid-area:tgt;font-size:var(--t-xs);color:var(--ink-soft);text-align:right}
.h-goal .val{grid-area:val;font-size:21px;font-weight:700;line-height:1.15}
.h-goal .pct{grid-area:pct;font-size:var(--t-sm);font-weight:700;color:var(--rule);text-align:right}
.h-goal .meter{grid-area:meter;margin-top:3px}
.h-goal .tgt i{font-style:normal}
.h-goal .tgt .n{display:none}
.h-goal.done .pct,.h-goal.done .lbl{color:var(--stamp)}
.h-cash{grid-area:cash;padding:6px 12px;text-align:right;white-space:nowrap;position:relative;display:flex;flex-direction:column;justify-content:center}
.h-cash .lbl{font-size:var(--t-2xs);color:var(--ink-soft);letter-spacing:.08em}
.h-cash .val{font-size:18px;font-weight:700;line-height:1.15}
.h-cash .val.neg{color:var(--stamp)}
.h-cash .rate{display:flex;gap:4px;align-items:center;justify-content:flex-end;font-size:var(--t-sm);margin-top:1px}
.h-cash .delta{position:absolute;right:10px;top:100%;margin-top:4px;font-size:var(--t-sm);font-weight:700;padding:1px 6px;background:var(--paper);border:1.5px solid currentColor;border-radius:var(--r1);pointer-events:none;opacity:0;white-space:nowrap}
.h-cash .delta.go{animation:delta 1.5s var(--ease-out) forwards}
.h-cash .delta.minus{color:var(--stamp)}
.h-cash .delta.plus{color:var(--rule)}
@keyframes delta{0%{opacity:0;transform:translateY(-6px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
.h-cash .val.bump{animation:bump .35s var(--ease-pop)}
@keyframes bump{40%{transform:scale(1.08)}}
.h-menu{grid-area:menu;border:0;background:transparent;display:grid;place-items:center;padding:0;color:var(--ink);min-height:var(--tap)}
.h-menu:active{background:var(--paper-2)}
.stars{display:inline-flex;gap:1px;vertical-align:-1px}
.stars svg{width:12px;height:12px}

/* progress meter — a ruled bar with 10% ticks; <em> marks yesterday */
.meter{position:relative;height:10px;background:var(--paper);border:1.5px solid var(--rule);border-radius:1px;overflow:hidden}
.meter::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--rule-soft) calc(10% - 1px) 10%);pointer-events:none}
.meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--rule);transition:width .45s var(--ease-out);z-index:1}
.meter em{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--carbon);z-index:2;display:none}
.meter.done i{background:var(--stamp)}

/* ---------- business: live stats + speed (one bar at the bottom) ---------- */
#live{position:absolute;left:var(--sal);bottom:calc(10px + var(--sab));display:flex;z-index:19;padding:0;overflow:hidden}
#live .lv{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:5px;align-items:center;padding:6px 12px 5px;min-width:74px}
#live .lv + .lv{border-left:1px solid var(--rule-soft)}
#live svg{width:16px;height:16px;color:var(--rule);grid-row:1}
#live b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:17px;line-height:1.1;grid-row:1}
#live b small{font-size:11px;color:var(--ink-mute);font-weight:500}
#live span{grid-column:1/3;font-size:var(--t-2xs);color:var(--ink-soft);white-space:nowrap}
#live .warn{background:var(--stamp-soft)}
#live .warn b,#live .warn svg,#live .warn span{color:var(--stamp)}
#speed{position:absolute;right:var(--sar);bottom:calc(10px + var(--sab));display:flex;z-index:20;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r1);box-shadow:0 3px 0 var(--ink);overflow:hidden}
#speed button{width:48px;height:46px;border:0;background:transparent;display:grid;place-items:center;font-family:var(--f-num);font-weight:700;font-size:var(--t-md);touch-action:manipulation}
#speed button + button{border-left:1.5px solid var(--ink)}
#speed button.on{background:var(--ink);color:var(--paper)}
#speed button.on.paused{background:var(--stamp);color:#fff}
#speed .cyc{display:none;border-left:0!important}
#speed .cyc.sp{border-left:1.5px solid var(--ink)!important}
#speed .cyc .lv3{display:flex;gap:2px;margin-top:1px}
#speed .cyc .lv3 i{width:5px;height:5px;border:1px solid currentColor;border-radius:50%}
#speed .cyc .lv3 i.f{background:currentColor}

/* ---------- dock (preparation) ---------- */
#dock{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0 var(--sar) calc(10px + var(--sab)) var(--sal);z-index:20;pointer-events:none}
.dock-in{pointer-events:auto;display:flex;align-items:stretch;max-width:720px;width:100%;overflow:hidden;padding:0}
.dock-in button{flex:1;min-width:0;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 2px 8px;font-size:var(--t-xs);font-weight:700;white-space:nowrap;color:var(--ink);position:relative;min-height:58px;touch-action:manipulation;letter-spacing:-.02em}
.dock-in button + button{border-left:1px solid var(--rule-soft)}
.dock-in button svg{width:22px;height:22px;color:var(--rule)}
.dock-in button.on{background:var(--rule);color:#fff}
.dock-in button.on svg{color:#fff}
.dock-in button:not(.open):active{background:var(--rule-faint)}
.dock-in .open{flex:1.55;background:var(--stamp);color:#fff;font-size:var(--t-md);border-left:1.5px solid var(--stamp-deep)!important;letter-spacing:.04em}
.dock-in .open svg{width:24px;height:24px;color:#fff}
.dock-in .open:active{background:var(--stamp-deep)}
.dock-in .dot{position:absolute;top:7px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--stamp);border:2px solid var(--paper)}
.dock-in button.on .dot{border-color:var(--rule)}

/* ---------- feed (toasts) ---------- */
#feed{position:absolute;left:var(--sal);bottom:calc(84px + var(--sab));display:flex;flex-direction:column-reverse;gap:6px;width:min(330px,calc(100% - 20px));z-index:32;pointer-events:none}
.toast{background:var(--paper);border:1px solid var(--ink);border-radius:var(--r1);padding:7px 10px 8px;font-size:var(--t-sm);line-height:1.5;box-shadow:0 8px 18px -10px rgba(43,36,32,.55);animation:tin .32s var(--ease-out);transform-origin:left bottom}
.toast .who{display:flex;gap:6px;align-items:center;font-size:var(--t-2xs);color:var(--ink-soft);margin-bottom:1px;letter-spacing:.04em}
.toast .who svg{width:13px;height:13px}
.toast q{quotes:"「" "」"}
.toast.ev{border-color:var(--stamp);border-width:1.5px}
.toast.ev .who{color:var(--stamp);font-weight:700}
.toast.rv .stars svg{width:11px;height:11px}
.toast.rv.bad{background:#fff7f4}
.toast.peek{border-style:dashed;border-color:var(--ink-soft)}
.toast.out{animation:tout .4s ease-in forwards}
@keyframes tin{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes tout{to{opacity:0;transform:translateX(-14px)}}

/* ---------- sheet (panels) ---------- */
#sheet{position:absolute;z-index:30;left:0;right:0;bottom:0;max-height:min(70%,640px);display:flex;flex-direction:column;border-bottom:0;border-radius:var(--r3) var(--r3) 0 0;padding-bottom:var(--sab);animation:sheetin .28s var(--ease-out)}
@keyframes sheetin{from{transform:translateY(40px);opacity:0}}
#sheet .slip-head{position:relative;padding-right:4px;flex:none}
#sheet .slip-head h2{font-size:var(--t-lg)}
#sheet .close{border:0;background:transparent;width:var(--tap);height:var(--tap);margin:-8px 0 -8px 2px;display:grid;place-items:center;color:var(--ink);flex:none}
#sheet .close:active{background:var(--paper-2)}
.sheet-body{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:var(--s3) max(14px,env(safe-area-inset-right,0px)) var(--s4) max(14px,env(safe-area-inset-left,0px));touch-action:pan-y;flex:1;animation:fadein .2s ease-out}
@keyframes fadein{from{opacity:0}}
@media (min-width:900px){
  #sheet{left:auto;right:12px;top:calc(var(--hud-h,82px) + 8px);bottom:calc(84px + var(--sab));width:410px;max-height:none;border-radius:var(--r1);border-bottom:1.5px solid var(--rule);animation-name:sheetin-r}
  @keyframes sheetin-r{from{transform:translateX(30px);opacity:0}}
}
.lede{font-size:var(--t-sm);color:var(--ink-soft);line-height:1.65;margin:0 0 var(--s3)}
.lede b{color:var(--ink)}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;color:var(--rule);margin:var(--s5) 0 0;padding-bottom:4px;border-bottom:1.5px solid var(--rule)}
.sec:first-child{margin-top:0}
.sec .aside{font-weight:700;letter-spacing:.02em;color:var(--ink-soft);font-size:var(--t-xs)}
.sec .aside b{font-family:var(--f-num);color:var(--ink)}
.rows{display:flex;flex-direction:column}
.r{display:grid;grid-template-columns:48px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--rule-soft);position:relative}
.r:last-child{border-bottom:0}
.r .ic{width:48px;height:44px;display:grid;place-items:center}
.r .ic img{max-width:48px;max-height:44px;object-fit:contain}
.r .nm{font-weight:700;font-size:var(--t-md);line-height:1.35;min-width:0}
.r .nm small{display:block;font-weight:500;font-size:var(--t-xs);color:var(--ink-soft);line-height:1.5;margin-top:1px}
.r .act{display:flex;flex-direction:column;align-items:flex-end;gap:4px;align-self:start;padding-top:2px}
.r .act .why{font-size:var(--t-2xs);color:var(--ink-mute);white-space:nowrap}
.r.off .nm,.r.off .ic{opacity:.5}
.r.flash{animation:rowflash 1.1s ease-out}
@keyframes rowflash{0%{background:var(--rule-faint)}100%{background:transparent}}
.mark{display:inline-block;font-size:var(--t-2xs);font-weight:700;color:var(--rule);border:1px solid currentColor;padding:0 4px;border-radius:1px;margin-left:6px;vertical-align:2px;line-height:1.5;letter-spacing:.02em;white-space:nowrap}
.mark.red{color:var(--stamp)}
.mark.blue{color:var(--carbon)}
.mark.solid{background:var(--stamp);border-color:var(--stamp);color:#fff}

/* spec table (equipment) — columns line up across rows so machines compare at a glance */
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px;border:1px solid var(--rule-soft);border-radius:1px}
.spec > div{padding:3px 6px 4px;font-size:var(--t-2xs);color:var(--ink-soft);line-height:1.3;white-space:nowrap}
.spec > div + div{border-left:1px solid var(--rule-soft)}
.spec b .bars{margin-top:3px}
.spec b{display:block;font-size:var(--t-sm);color:var(--ink);font-family:var(--f-num);font-weight:700;margin-top:1px}
.spec b.hi{color:var(--rule)}
/* a narrow phone: the four figures sit 2 × 2 so the numbers and the taste bars fit (they ran past their cells at 360px) */
@media (max-width:400px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}.spec > div:nth-child(3){border-left:0}.spec > div:nth-child(n+3){border-top:1px solid var(--rule-soft)}}
.bars{display:inline-flex;gap:2px;vertical-align:middle;margin-top:4px}
.bars i{width:10px;height:7px;border:1px solid var(--rule);border-radius:1px}
.bars i.f{background:var(--rule)}
.unlock{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:6px;font-size:var(--t-2xs);color:var(--ink-soft)}
.unlock img{width:26px;height:24px;object-fit:contain;margin-right:-3px}
.unlock .it{display:inline-flex;align-items:center;gap:1px;font-weight:700;color:var(--ink)}
.unlock .it.new{color:var(--stamp)}
.slots{display:flex;gap:6px;margin:var(--s2) 0 0}
.slots .sl{flex:1;max-width:60px;height:48px;border:1.5px dashed var(--rule-soft);border-radius:1px;display:grid;place-items:center;position:relative;background:var(--paper)}
.slots .sl.f{border-style:solid;border-color:var(--rule);background:var(--rule-faint)}
.slots .sl img{max-width:80%;max-height:80%}
.slots .sl span{position:absolute;left:3px;top:1px;font-family:var(--f-num);font-size:9px;color:var(--ink-mute)}

/* steppers / toggles / segmented */
.stepper{display:inline-flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:var(--r1);overflow:hidden;background:var(--paper);height:40px}
.stepper button{width:40px;border:0;background:var(--paper-2);display:grid;place-items:center;touch-action:manipulation;font-family:var(--f-num);font-weight:700;font-size:var(--t-xs)}
.stepper button + *{border-left:1.5px solid var(--ink)}
.stepper output + button{border-left:1.5px solid var(--ink)}
.stepper button:active{background:var(--paper-3)}
.stepper button svg{width:18px;height:18px}
.stepper button.wide{width:40px}
.stepper output{min-width:74px;padding:0 6px;display:grid;place-items:center;font-family:var(--f-num);font-weight:700;font-size:var(--t-md);font-variant-numeric:tabular-nums}
.stepper button[disabled]{color:var(--paper-3);pointer-events:none}
.toggle{width:56px;height:32px;margin:4px 0;border:1.5px solid var(--ink);border-radius:16px;background:var(--paper-2);position:relative;flex:none;padding:0;transition:background .15s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;background:var(--paper);border:1.5px solid var(--ink);border-radius:50%;transition:left .18s var(--ease-out)}
.toggle.on{background:var(--rule);border-color:var(--rule-deep)}
.toggle.on::after{left:26px;border-color:var(--rule-deep)}
.toggle-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:var(--t-2xs);color:var(--ink-mute);font-weight:700;min-width:var(--tap)}
.toggle-wrap.on{color:var(--rule)}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:var(--r1);overflow:hidden;background:var(--paper)}
.seg button{flex:1;border:0;background:transparent;padding:6px 4px;min-height:40px;font-size:var(--t-sm);font-weight:700;line-height:1.25;touch-action:manipulation}
.seg button + button{border-left:1px solid var(--ink)}
.seg button.on{background:var(--ink);color:var(--paper)}
.seg button small{display:block;font-family:var(--f-num);font-size:var(--t-2xs);font-weight:500;opacity:.8}
.hint{font-size:var(--t-xs);color:var(--ink-soft);margin-top:6px;line-height:1.5}
/* text and a button never touch (本人 2026-11-05「注釈とか文章とボタンが余白ゼロな点は無くしたい」): a note, a paragraph or a
   section heading followed by buttons gets air between them */
:is(.hint, p, .sec) + :is(.btn, .acts, .seg, .shop-acts, .stepper, .borrow){margin-top:10px}
:is(.btn, .acts, .seg) + :is(.hint, p){margin-top:8px}
.hint b{color:var(--ink)}
.pips{display:inline-flex;gap:2px;vertical-align:-1px}
.pips i{width:7px;height:9px;border:1px solid var(--ink-soft);border-radius:1px}
.pips i.f{background:var(--rule);border-color:var(--rule)}

/* menu rows */
.mrow{display:grid;grid-template-columns:44px 1fr auto;column-gap:var(--s3);row-gap:8px;padding:var(--s3) 0;border-bottom:1px solid var(--rule-soft);align-items:center}
.mrow:last-child{border-bottom:0}
.mrow .ic{width:44px;height:44px;display:grid;place-items:center;grid-row:1/3;align-self:start}
.mrow .ic img{max-width:44px;max-height:42px}
.mrow .nm{font-weight:700;line-height:1.35;min-width:0}
.mrow .nm small{display:block;font-weight:500;font-size:var(--t-xs);color:var(--ink-soft);margin-top:1px}
.mrow .nm small b{font-family:var(--f-num);color:var(--ink)}
.mrow .nm small b.bad{color:var(--stamp)}
.mrow .nm small b.good{color:var(--rule)}
.mrow .ctl{grid-column:2/4;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.mrow .feel{font-size:var(--t-xs);color:var(--ink-soft);line-height:1.35}
.mrow .feel b{display:block;font-size:var(--t-sm);color:var(--ink)}
.mrow .feel b.up{color:var(--stamp)}
.mrow .feel b.dn{color:var(--carbon)}
.mrow.off .nm,.mrow.off .ic{opacity:.5}
.mrow.na .ctl{display:none}

/* staff */
.staff{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule-soft);align-items:start}
.staff:last-child{border-bottom:0}
.staff .face{width:44px;height:56px;object-fit:contain;object-position:bottom}
.staff .nm{font-weight:700;line-height:1.35;min-width:0}
.staff .nm small{display:block;font-weight:500;font-size:var(--t-xs);color:var(--ink-soft)}
.staff .cost{text-align:right;font-size:var(--t-2xs);color:var(--ink-soft);line-height:1.3;white-space:nowrap}
.staff .cost b{display:block;font-family:var(--f-num);font-size:var(--t-md);color:var(--ink)}
.staff .ctl{grid-column:2/4;display:flex;flex-direction:column;gap:6px}
.staff .ctl .seg{width:100%}
.staff .stat{display:flex;gap:12px;font-size:var(--t-xs);color:var(--ink-soft);margin-top:3px;align-items:center}
.staff .fire{width:36px;height:36px;border:0;background:transparent;color:var(--ink-mute);display:grid;place-items:center;margin:-6px -6px 0 0}
.staff .fire:active{color:var(--stamp)}
.labor{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:var(--s2) var(--s3);background:var(--paper-2);border:1px solid var(--paper-3);margin-bottom:var(--s3);font-size:var(--t-sm);color:var(--ink-soft)}
.labor b{font-family:var(--f-num);font-size:var(--t-lg);color:var(--ink)}
.labor b.bad{color:var(--stamp)}
/* candidate comparison: a three-column 履歴書 line-up */
.cands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s2);border:1.5px solid var(--rule);border-radius:1px}
.cand{display:flex;flex-direction:column;align-items:stretch;text-align:center;min-width:0}
.cand + .cand{border-left:1px solid var(--rule-soft)}
.cand:last-child:not(:nth-child(3n)){border-right:1px solid var(--rule-soft)}   /* fewer than 3 applicants (after hiring): the last column still closes off (2026-11-05) */
.cand .face{height:64px;width:100%;object-fit:contain;object-position:bottom;background:var(--rule-faint);border-bottom:1px solid var(--rule-soft);padding-top:4px}
.cand .nm{font-weight:700;font-size:var(--t-sm);padding:6px 4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand dl{margin:0;display:grid;grid-template-columns:1fr;font-size:var(--t-2xs);color:var(--ink-soft)}
.cand dl div{padding:3px 4px;border-top:1px dashed var(--rule-soft)}
.cand dt{display:block}
.cand dd{margin:0;font-weight:700;color:var(--ink);font-size:var(--t-sm)}
.cand dd.num{font-family:var(--f-num)}
.cand dd.trait{font-size:var(--t-2xs);line-height:1.35;font-weight:700}
.cand dd.trait small{display:block;font-weight:500;color:var(--ink-soft)}
.cand dd.trait.bad{color:var(--stamp)}
.cand dd.best{color:var(--rule)}
.cand .btn{margin:6px;min-height:40px;font-size:var(--t-sm)}

/* prep */
.prep-day{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule-soft);margin-bottom:var(--s3)}
.prep-day > div{padding:6px 8px;font-size:var(--t-2xs);color:var(--ink-soft);line-height:1.3}
.prep-day > div + div{border-left:1px solid var(--rule-soft)}
.prep-day b{display:flex;align-items:center;gap:3px;font-size:var(--t-md);color:var(--ink);margin-top:2px}
.prep-day b svg{width:17px;height:17px}
.prep-day b.up{color:var(--rule)}
.prep-day b.dn{color:var(--stamp)}
.prow{padding:var(--s3) 0;border-bottom:1px solid var(--rule-soft)}
.prow:last-child{border-bottom:0}
.prow .top{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s3);align-items:center}
.prow .top img{max-width:44px;max-height:42px}
.prow .nm{font-weight:700;line-height:1.35}
.prow .nm small{display:block;font-weight:500;font-size:var(--t-xs);color:var(--ink-soft)}
.prow .cost{text-align:right;font-size:var(--t-2xs);color:var(--ink-soft);white-space:nowrap}
.prow .cost b{display:block;font-family:var(--f-num);font-size:var(--t-md);color:var(--ink)}
.prow .facts{display:grid;grid-template-columns:repeat(3,1fr);margin:8px 0;border-top:1px dashed var(--rule-soft);border-bottom:1px dashed var(--rule-soft)}
.prow .facts div{padding:4px 2px;font-size:var(--t-2xs);color:var(--ink-soft);text-align:center}
.prow .facts b{display:block;font-family:var(--f-num);font-size:var(--t-md);color:var(--ink)}
.prow .facts b.carbon{color:var(--carbon)}
.prow .ctl{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.prow .risk{font-size:var(--t-xs);font-weight:700;margin-left:auto;text-align:right;line-height:1.3}
.prow .risk.ok{color:var(--rule)}
.prow .risk.hi{color:var(--stamp)}
.prow .risk.lo{color:var(--carbon)}
.prow .risk small{display:block;font-weight:500;color:var(--ink-soft)}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--s3);padding-top:var(--s2);border-top:3px double var(--rule);font-size:var(--t-sm);color:var(--ink-soft)}
.tot b{font-family:var(--f-num);font-size:var(--t-lg);color:var(--ink)}

/* ---------- modal ---------- */
#modal{position:absolute;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;background:rgba(27,36,48,.46);padding:calc(12px + var(--sat)) var(--sar) calc(12px + var(--sab)) var(--sal);overflow:auto;animation:fadein .2s ease-out}
.dialog{width:min(440px,100%);max-height:calc(var(--vh) - 24px - var(--sat) - var(--sab));overflow:auto;animation:pop .3s var(--ease-pop)}
@keyframes pop{from{transform:translateY(10px) scale(.94);opacity:0}}
.dialog .body{padding:var(--s4);line-height:1.7;font-size:var(--t-md)}
.dialog .body > b:first-child{font-size:var(--t-lg)}
.dialog .acts{display:flex;gap:var(--s2);flex-wrap:wrap;padding:0 var(--s4) var(--s4)}
.dialog .acts .btn{flex:1 1 140px}
.dialog .master{padding:var(--s3) 0 0}
.dialog.notice{border-color:var(--stamp)}
.dialog.notice .slip-head{border-color:var(--stamp);color:var(--stamp)}
.dialog.notice .slip-head .kick{display:flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.16em;font-size:var(--t-sm)}
.dialog.notice .body h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-xl);line-height:1.3;margin-bottom:var(--s2);color:var(--ink)}
.dialog.notice .body p{color:var(--ink-soft)}
.dialog .opt{display:flex;flex-direction:column;gap:var(--s2)}
.dialog .opt .row{display:flex;gap:var(--s2)}
.dialog .opt .row .btn{flex:1}

/* ---------- daily report : a receipt from the register ---------- */
.report{width:min(460px,100%);max-height:calc(var(--vh) - 34px - var(--sat) - var(--sab));position:relative;display:flex;flex-direction:column;overflow:visible;animation:slideup .45s var(--ease-out);border-bottom:0;border-radius:var(--r1) var(--r1) 0 0}
@keyframes slideup{from{transform:translateY(40px);opacity:0}}
.report .slip-head{flex:none;min-width:0}
.report .slip-head h2{flex:none;white-space:nowrap}
.report .slip-head .serial{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* the long-play line (shop name + date) used to widen the slip past a phone */
.report .slip-head h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-xl);letter-spacing:.3em;color:var(--ink)}
.report .r-body{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;flex:1;min-height:0}
.report .r-foot{flex:none;padding:var(--s3) var(--s4) var(--s3);border-top:1px dashed var(--rule);background:var(--paper);display:flex;gap:var(--s2)}
.report .r-foot .btn{flex:1;min-height:50px;font-size:var(--t-lg)}
.report .perf{flex:none;height:10px;background:radial-gradient(circle at 6px 10px,transparent 5.5px,var(--paper) 6px) 0 0/12px 10px repeat-x;margin-top:-1px;filter:drop-shadow(0 4px 3px rgba(43,36,32,.2))}
.r-hero{position:relative;padding:var(--s4) var(--s4) var(--s3);display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center}
.r-hero .lbl{font-size:var(--t-xs);font-weight:700;color:var(--rule);letter-spacing:.1em}
.r-hero .big{display:block;font-family:var(--f-num);font-weight:700;font-size:38px;line-height:1.05;letter-spacing:-.04em;margin:2px 0 8px}
.r-hero .meter{height:12px}
.r-hero .gl{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--ink-soft);margin-top:4px}
.r-hero .gl b{font-family:var(--f-num);color:var(--ink)}
.r-hero.hit .gl b,.r-hero.hit .lbl{color:var(--stamp)}
.ledger{padding:0 var(--s4) var(--s2)}
.ledger .ln{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--t-sm);gap:var(--s2)}
.ledger .ln > span:first-child{color:var(--ink-soft)}
.ledger .ln .num{font-weight:700;white-space:nowrap}   /* a big loss broke between − and ¥ at 320 */
.ledger .ln em{font-style:normal;font-size:var(--t-2xs);color:var(--ink-mute);margin-left:6px;font-family:var(--f-num)}
.ledger .ln em.bad{color:var(--stamp);font-weight:700}
.ledger .ln.head{font-size:var(--t-2xs);letter-spacing:.14em;color:var(--rule);font-weight:700;border-bottom:1.5px solid var(--rule);padding:0 0 3px}
.ledger .ln.head span:first-child{color:var(--rule)}
.ledger .ln.big{font-size:var(--t-lg);font-weight:700;border-bottom:3px double var(--rule);padding:10px 0 8px}
.ledger .ln.big > span:first-child{color:var(--ink)}
.ledger .ln.big .num{font-size:22px}
.ledger .ln.sub{font-size:var(--t-sm);border-bottom:0;padding-top:6px}
.ledger .neg,.neg{color:var(--stamp)}
.ledger .pos{color:var(--ink)}
.rstamp{width:84px;height:84px;border:3px solid var(--stamp);outline:1.5px solid var(--stamp);outline-offset:-8px;border-radius:50%;display:grid;place-items:center;align-content:center;color:var(--stamp);transform:rotate(-14deg);opacity:.9;mix-blend-mode:multiply;animation:stamp .4s cubic-bezier(.3,1.7,.5,1) .55s both;line-height:1;text-align:center;pointer-events:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.75'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.75'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E")}
.rstamp .t{font-family:var(--f-display);font-weight:400;font-size:23px;letter-spacing:.02em}
.rstamp .d{font-family:var(--f-num);font-size:9px;font-weight:700;margin-top:4px;letter-spacing:.06em}
.rstamp.blue{border-color:var(--carbon);outline-color:var(--carbon);color:var(--carbon)}
.rstamp.gray{border-color:var(--ink-mute);outline-color:var(--ink-mute);color:var(--ink-mute)}
/* the daily report with more than one shop: tabs for this shop / each other shop / all shops */
.r-tabs{flex:none;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:var(--s2) var(--s4);border-bottom:1px dashed var(--rule);background:var(--paper);touch-action:pan-x}
.r-tabs::-webkit-scrollbar{display:none}
.r-tabs button{flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:700;font-size:var(--t-xs);white-space:nowrap;color:var(--ink);touch-action:manipulation}
.r-tabs button small{font-size:var(--t-2xs);font-weight:700;color:var(--ink-soft)}
.r-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.r-tabs button[aria-selected="true"] small{color:var(--paper);opacity:.8}
/* people (staff.js): badges, the talk / raise buttons, interview, the thought line under the HUD */
.sbs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.sb{font-style:normal;font-size:var(--t-2xs);font-weight:700;line-height:1.5;padding:0 6px;border:1px solid var(--rule-soft);border-radius:2px;color:var(--ink-soft);background:#fff;white-space:nowrap}
.sb.lv{border-color:var(--ink);color:var(--ink);font-family:var(--f-num)}
.sb.sk{border-color:var(--gold);color:#8a5a12;background:#fff7e6}
.sb.ce{border-color:var(--rule);color:var(--rule)}
.sb.gd{border-color:var(--rule);color:var(--rule)}
.sb.bd{border-color:var(--stamp);color:var(--stamp)}
.staff .sx{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.staff .sx .btn{flex:1 1 120px}
.cand .ci{font-size:var(--t-2xs);color:var(--ink-soft);margin:6px 4px 4px;min-height:1.6em;line-height:1.5;flex:1 0 auto}   /* grows, so the two buttons line up at the foot of every column */
.cand .btn{min-width:0;white-space:normal;padding:4px;line-height:1.25}   /* 面接（3問） was wider than a 320px column and ran into the next one */
.cand .ci b{color:#8a5a12}
.cand [data-iv]{margin-bottom:6px}
.cand .btn .nw{white-space:nowrap}
.r[data-row="reg2"] small.warn{display:block;margin-top:6px;color:var(--stamp)}   /* why the second register can't go in yet (furniture in front of it) */   /* a narrow column breaks it as 面接 / （3問）, not 面接（3 / 問） */   /* width:100% plus the 6px margins ran past the column */
.talk-face{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start;margin-bottom:var(--s3)}
.talk-face img{width:56px;height:72px;object-fit:contain;object-position:bottom}
.talk-face p{margin:0 0 6px;line-height:1.6}
.talk-face p.q{font-size:var(--t-xs);color:var(--ink-soft);margin-top:6px}
.iv-q{display:flex;flex-direction:column;gap:6px;margin-top:var(--s2)}
.iv-q .btn{justify-content:flex-start;text-align:left;font-weight:500;font-size:var(--t-sm);min-height:44px;line-height:1.4;padding:6px 12px;white-space:normal;min-width:0;width:100%}   /* a long question wraps inside its button */
#thought{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:min(560px,calc(100vw - 24px));padding:6px 12px 6px 6px;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r1);box-shadow:0 2px 0 var(--ink);font-size:var(--t-sm);line-height:1.45;pointer-events:none;transition:opacity .4s;z-index:21}
#thought img{width:30px;height:38px;object-fit:contain;object-position:bottom;flex:none}
#thought b{margin-right:6px;font-size:var(--t-xs);color:var(--rule)}
#thought.out{opacity:0}
#thought[hidden]{display:none!important}
.r.shop .trust{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:700;color:var(--ink-soft);white-space:nowrap}
.r.shop .trust em{font-style:normal;color:var(--rule)}
.r.shop .trust.low em{color:var(--stamp)}
.r.shop .trust.low .mtr i{background:var(--stamp)}
.r.shop .trust .mtr{position:relative;display:inline-block;width:70px;height:7px;border:1.5px solid var(--rule);border-radius:2px;background:var(--paper)}
.r.shop .trust .mtr i{position:absolute;left:0;top:0;bottom:0;background:var(--rule)}
.r.shop .shop-hd{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:var(--t-md)}
.r.shop .shop-hd b{font-weight:700}
.r.shop .shop-hd .tag{margin-left:0}
.r.shop .shop-sub{display:block;margin-top:2px}
.r.shop .shop-sub .nw{white-space:nowrap}
.r.shop .shop-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:8px}
.r.shop .shop-meta .mgr{margin-top:0;min-width:0;max-width:100%}
.r.shop small.warn{display:block;margin-top:6px}
/* endings */
.dialog.ending .body h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-2xl);line-height:1.25;margin:0 0 var(--s3);letter-spacing:.04em}
.dialog.ending .body h2 .kv{display:inline-block}   /* break only after 、 */
.end-shops{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:0 0 var(--s3)}
.end-shops figure{margin:0;border:1px solid var(--rule-soft);border-radius:var(--r1);background:#fff;overflow:hidden}
.end-shops img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.end-shops figcaption{font-size:var(--t-2xs);font-weight:700;padding:3px 6px 4px;line-height:1.3;display:flex;justify-content:space-between;gap:4px;flex-wrap:wrap}
.end-shops figcaption span{color:var(--gold);letter-spacing:-.05em}
.end-note{font-size:var(--t-xs);color:var(--ink-soft);margin:var(--s3) 0 0;line-height:1.6}
.rv-hint{font-style:normal;display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--rule);border-radius:2px;font-size:var(--t-2xs);font-weight:700;color:var(--rule);vertical-align:1px;line-height:1.5}
.r-note{margin:0 var(--s4) var(--s2);font-size:var(--t-xs);color:var(--ink-soft);line-height:1.6}
.rp:not([data-rp="0"]) .rstamp{animation-delay:.08s}   /* another shop's tab: the stamp lands as soon as the tab opens */
@keyframes stamp{0%{transform:rotate(-14deg) scale(2.3);opacity:0}60%{transform:rotate(-14deg) scale(.94);opacity:.95}100%{transform:rotate(-14deg) scale(1);opacity:.9}}
.kv{display:grid;grid-template-columns:repeat(3,1fr);margin:var(--s2) var(--s4) 0;border:1px solid var(--rule-soft)}
.kv > div{padding:7px 6px 6px;text-align:center;border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.kv > div:nth-child(3n){border-right:0}
.kv > div:nth-last-child(-n+3){border-bottom:0}
.kv b{display:flex;align-items:baseline;justify-content:center;gap:2px;font-family:var(--f-num);font-size:var(--t-lg);line-height:1.2}
.kv b small{font-size:var(--t-2xs);font-weight:500}
.kv span{display:flex;align-items:center;justify-content:center;gap:3px;font-size:var(--t-2xs);color:var(--ink-soft)}
.kv span svg{width:12px;height:12px}
.kv .warn{background:var(--stamp-soft)}
.kv .warn b,.kv .warn span{color:var(--stamp)}
.kv .good b{color:var(--rule)}
.r-chart{padding:var(--s3) var(--s4) 0}
.r-chart svg{width:100%;height:auto;display:block}
.r-chart .cap{display:flex;justify-content:space-between;font-size:var(--t-2xs);color:var(--ink-soft);letter-spacing:.06em;margin-bottom:2px}
.r-chart .cap b{color:var(--rule);font-weight:700;letter-spacing:.14em}
.r-rev{padding:var(--s2) var(--s4) 0}
.r-rev div{display:flex;gap:8px;align-items:baseline;font-size:var(--t-sm);padding:3px 0;line-height:1.45}
.r-rev .stars{flex:none}
.r-rev .who{font-size:var(--t-2xs);color:var(--ink-mute);white-space:nowrap}
.r-fore{margin:var(--s3) var(--s4) var(--s4);font-size:var(--t-xs);color:var(--ink-soft);display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px dashed var(--rule-soft)}
.r-fore svg{width:16px;height:16px;color:var(--carbon)}
.r-fore b{color:var(--carbon)}
/* the report: 売れ筋, 設備の稼働, 帳簿 (2026-11-05) */
.r-sales{margin:0 var(--s4) var(--s3)}
.r-sales h3{font-size:var(--t-sm);font-weight:700;margin:var(--s3) 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;white-space:nowrap}
.r-sales h3 small{white-space:normal}
.r-sales h3 small{font-weight:500;font-size:var(--t-2xs);color:var(--ink-soft)}
.rs{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.rs th{font-size:var(--t-2xs);font-weight:500;color:var(--ink-soft);text-align:right;padding:2px 4px;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
.rs th:first-child{text-align:left}
.rs td{padding:5px 4px;border-bottom:1px dashed var(--rule-soft);white-space:nowrap}
.rs td:first-child{position:relative;white-space:normal;width:100%}
.rs td.num{text-align:right;font-family:var(--f-num)}
.rs td.bad{color:var(--stamp)}
.rs .rk{display:inline-block;width:1.5em;font-family:var(--f-num);color:var(--rule);font-weight:700}
.rs .bar{position:absolute;left:0;bottom:1px;height:3px;background:var(--rule);opacity:.35;border-radius:2px}
.rs tr.rest td{color:var(--ink-soft)}
.rm{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rm li{display:grid;grid-template-columns:minmax(0,12em) 1fr auto;align-items:center;gap:8px;font-size:var(--t-sm)}
.rm i{position:relative}
.rm s{position:absolute;left:0;bottom:0;height:3px;background:var(--ink);opacity:.45;text-decoration:none}   /* the whole day, under the busiest hour */
.rm em small{font-size:var(--t-2xs);color:var(--ink-soft);font-weight:500}
@media (max-width:420px){.rm li{grid-template-columns:minmax(0,9.5em) 1fr auto;font-size:var(--t-xs)}}
.rm li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm i{display:block;height:10px;border:1px solid var(--rule-soft);border-radius:2px;background:var(--paper);overflow:hidden}
.rm b{display:block;height:100%;background:var(--rule)}
.rm em{font-style:normal;text-align:right;font-family:var(--f-num)}
.rm li.hot b{background:var(--stamp)}.rm li.hot em{color:var(--stamp);font-weight:700}
.rm li.idle b{background:var(--ink-soft);opacity:.5}
.r-book{margin:0 var(--s4) var(--s3);border:1.5px solid var(--rule);border-radius:1px;background:#fff}
.r-book summary{cursor:pointer;padding:10px 12px;font-weight:700;font-size:var(--t-sm);display:flex;gap:8px;min-height:var(--tap,44px);box-sizing:border-box;align-items:center;list-style:none}
.r-book summary::-webkit-details-marker{display:none}
.r-book summary > svg{width:18px;height:18px;flex:none;color:var(--rule)}
.r-book summary .t{flex:1;display:flex;align-items:baseline;gap:8px}
.r-book summary small{font-weight:500;color:var(--ink-soft);font-size:var(--t-2xs)}
/* a quiet hint that it opens: the arrow nods downward now and then until the book is opened (2026-11-05) */
.r-book .chev{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--rule);color:var(--rule);flex:none;transform:rotate(90deg);transition:transform .25s}
.r-book .chev svg{width:14px;height:14px}
.r-book:not([open]) .chev svg{animation:bookNod 2.4s ease-in-out infinite}
.r-book[open] .chev{transform:rotate(-90deg)}
.r-book summary:hover .chev{background:var(--rule);color:#fff}
@keyframes bookNod{0%,60%,100%{transform:translateX(0)}70%{transform:translateX(3px)}80%{transform:translateX(0)}88%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.r-book:not([open]) .chev svg{animation:none}}
.r-book h4{margin:4px 12px 4px;font-size:var(--t-sm);display:flex;align-items:baseline;gap:8px}.r-book h4 small{font-weight:500;color:var(--ink-soft);font-size:var(--t-2xs)}
.pl{width:calc(100% - 24px);margin:0 12px 10px;border-collapse:collapse;font-size:var(--t-sm)}
.pl th{text-align:left;font-weight:500;padding:4px 0;border-bottom:1px solid var(--rule-faint,#e6e2d8)}
.pl th small{margin-left:6px;font-size:var(--t-2xs);color:var(--ink-soft)}
.pl td{text-align:right;font-family:var(--f-num);padding:4px 0 4px 8px;border-bottom:1px solid var(--rule-faint,#e6e2d8);white-space:nowrap}
.pl td.pc{width:4.5em;color:var(--ink-soft);font-size:var(--t-2xs)}
.pl tr.sub th{padding-left:1em;color:var(--ink-soft)}
.pl tr.sum th,.pl tr.sum td{font-weight:700;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.pl tr.big th,.pl tr.big td{font-size:var(--t-md)}
.pl tr.subtot th,.pl tr.subtot td{border-top:2px solid var(--ink)}   /* a subtotal (販売費及び一般管理費): a heavier rule over it */
.pl th small{display:inline-block}
.pl tr.top th,.pl tr.top td{font-weight:700}
.pl tr.avg th,.pl tr.avg td{color:var(--ink-soft);font-size:var(--t-2xs);border-bottom:0}
.pl .neg{color:var(--stamp)}
.pl.bs{margin-top:4px}
.r-book .hint{margin:0 12px 10px;font-size:var(--t-2xs);color:var(--ink-soft)}
.r-lv{margin:0 var(--s4) var(--s2);font-size:var(--t-sm);line-height:1.5}   /* the day's level-ups (2026-11-05) */
.r-lv p{display:flex;align-items:baseline;gap:4px;margin:2px 0}
.r-lv svg{width:14px;height:14px;flex:none;align-self:center;fill:#e0a43a}
.todo{margin:0 var(--s4) var(--s2);padding:var(--s2) var(--s3);border:1.5px solid var(--carbon);border-radius:1px;color:var(--carbon);background:#fbfcff}
.todo h3{font-size:var(--t-2xs);letter-spacing:.16em;font-weight:700;margin-bottom:2px}
.todo ol{margin:0;padding:0;list-style:none}
.todo li{display:flex;gap:8px;align-items:center;font-size:var(--t-sm);font-weight:700;padding:3px 0;color:var(--ink)}
.todo li::before{content:"";width:12px;height:12px;border:1.5px solid var(--carbon);border-radius:1px;flex:none}

/* master speech */
.master{display:grid;grid-template-columns:56px 1fr;gap:var(--s3);align-items:start;padding:var(--s3) var(--s4)}
.master img{width:56px;height:56px}
.master .say{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r2);padding:8px 12px 10px;font-size:var(--t-md);line-height:1.7;position:relative}
.master .say::before{content:"";position:absolute;left:-9px;top:18px;border:8px solid transparent;border-right-color:var(--ink);border-left:0}
.master .say::after{content:"";position:absolute;left:-6px;top:19.5px;border:6.5px solid transparent;border-right-color:var(--paper);border-left:0}
.master .say b{color:var(--stamp)}
.master .name{font-size:var(--t-2xs);color:var(--ink-mute);margin-bottom:2px;letter-spacing:.04em}

/* result */
.res-stars{display:flex;justify-content:center;gap:10px;padding:var(--s4) var(--s4) var(--s2)}
.res-stars svg{width:46px;height:46px}
.res-stars span{animation:starin .5s var(--ease-pop) both}
.res-stars span:nth-child(2){animation-delay:.18s}
.res-stars span:nth-child(3){animation-delay:.36s}
@keyframes starin{from{transform:scale(0) rotate(-40deg);opacity:0}}
.res-head{text-align:center;padding:0 var(--s4) var(--s2)}
.res-head b{display:block;font-family:var(--f-display);font-weight:400;font-size:var(--t-xl);line-height:1.3}
.res-head span{font-size:var(--t-sm);color:var(--ink-soft)}
.crit .ln > span:last-child{display:flex;align-items:center;gap:6px}
.chk{width:28px;height:28px;border:2px solid var(--stamp);border-radius:50%;display:grid;place-items:center;color:var(--stamp);font-weight:700;font-size:var(--t-xs);transform:rotate(-12deg);letter-spacing:-.04em}
.chk.no{border-color:var(--paper-3);color:var(--ink-mute);transform:none}

/* master floating tip (tutorial / morning line) */
#tip{position:absolute;z-index:22;left:var(--sal);top:calc(96px + var(--sat));width:min(380px,calc(100% - 20px));pointer-events:auto;animation:tipin .35s var(--ease-out)}
@keyframes tipin{from{opacity:0;transform:translateY(-8px)}}
#tip .master{padding:0;grid-template-columns:52px 1fr}
#tip .master img{width:52px;height:52px}
#tip .say{box-shadow:0 10px 24px -12px rgba(43,36,32,.6);font-size:var(--t-md);cursor:pointer}
#tip .say .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--rule-soft)}
#tip .say .step{display:flex;gap:4px}
#tip .say .step i{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--ink-mute)}
#tip .say .step i.f{background:var(--ink);border-color:var(--ink)}
#tip .say .x{border:1.5px solid var(--ink);background:var(--paper);border-radius:var(--r1);font-size:var(--t-sm);font-weight:700;min-height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:4px;margin:0 -4px -4px 0}
#tip .say .x svg{width:16px;height:16px}
#tip .say .skip{border:0;background:transparent;font-size:var(--t-xs);color:var(--ink-mute);min-height:36px;padding:0 4px;text-decoration:underline;text-underline-offset:2px}
#tip .say .ctrl{display:flex;align-items:center;gap:6px;margin-left:auto}

/* ---------- title ---------- */
#title{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:space-between;padding:calc(14px + var(--sat)) var(--sar) calc(18px + var(--sab)) var(--sal);pointer-events:auto;touch-action:pan-y;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
#title::-webkit-scrollbar{display:none}
/* a short window (a phone, a laptop with the browser bars) scrolls the title instead of cutting off the bottom row. The whole
   title takes the finger (the gaps between the sign and the buttons used to fall through to the canvas, which never scrolls); the sign keeps
   room under it for its それでも、開けたい。 tag, so the tag never lies over the text below */
#title > .t-logo{padding-bottom:38px;flex-shrink:0}
@media (max-width:520px){#title > .t-logo{padding-bottom:46px}}
#title > .t-bot,#title > .t-top{flex-shrink:0}
#title > *{pointer-events:auto}
.t-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.t-kicker{display:flex;flex-direction:column;gap:2px;color:var(--ink);line-height:1.2}
.t-kicker b{font-size:var(--t-sm);font-weight:700;letter-spacing:.24em;background:var(--ink);color:var(--paper);padding:4px 8px;border-radius:1px;align-self:flex-start}
.t-kicker span{font-family:var(--f-num);font-size:9px;letter-spacing:.28em;color:var(--ink-soft);padding-left:1px}
.t-sound{display:flex;gap:6px}
.sound{white-space:nowrap;border:1.5px solid var(--ink);background:var(--paper);border-radius:var(--r1);height:var(--tap);padding:0 12px;display:flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:700;box-shadow:0 2px 0 var(--ink)}
.sound svg{width:18px;height:18px}
.sound.off{color:var(--ink-mute);background:var(--paper-2)}
.t-logo{margin:auto 0;align-self:center;text-align:center;position:relative;transform-origin:50% -60px;animation:swing 4.5s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(.6deg)}}
.t-logo .sign{display:inline-block;background:var(--paper);border:2px solid var(--ink);padding:34px 34px 32px;border-radius:var(--r2);position:relative;box-shadow:0 2px 0 var(--ink),0 22px 34px -18px rgba(27,36,48,.6)}
.t-logo .sign::before{content:"";position:absolute;inset:6px;border:1px solid var(--ink);border-radius:2px;pointer-events:none}
.t-logo .chain{position:absolute;top:-60px;width:2px;height:62px;background:repeating-linear-gradient(180deg,var(--ink) 0 5px,transparent 5px 7px)}
.t-logo .chain.l{left:22%}.t-logo .chain.r{right:22%}
.t-logo .chain::after{content:"";position:absolute;bottom:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.t-logo .l1{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,7.6vw,46px);line-height:1.05;letter-spacing:.04em}
.t-logo .l2{font-family:var(--f-display);font-weight:400;font-size:clamp(54px,15.5vw,108px);line-height:.95;color:var(--stamp);letter-spacing:-.03em;display:block;margin-top:6px}
.t-logo .en{display:flex;align-items:center;gap:10px;justify-content:center;font-family:var(--f-num);font-size:clamp(9px,2.4vw,12px);letter-spacing:.36em;margin-top:12px;color:var(--ink-soft);font-weight:700}
.t-logo .en::before,.t-logo .en::after{content:"";height:1px;width:24px;background:var(--ink-soft)}
.t-logo .note{position:absolute;right:-18px;bottom:-26px;background:var(--gold);color:var(--ink);font-weight:700;font-size:var(--t-sm);padding:7px 12px 7px 20px;transform:rotate(6deg);border:1.5px solid var(--ink);border-left:none;border-radius:0 1px 1px 0;white-space:nowrap}
/* the tag's point: drawn with its outline (a clip-path used to cut the border off the slanted edges) */
.t-logo .note::after{content:"";position:absolute;top:-1.5px;bottom:-1.5px;left:-12px;width:12.5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30' preserveAspectRatio='none'%3E%3Cpath d='M12.5 0L.9 15L12.5 30Z' fill='%23e0a43a'/%3E%3Cpath d='M12.5 .75L.9 15L12.5 29.25' fill='none' stroke='%232b2420' stroke-width='1.5' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.t-logo .note::before{content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the owner's logo (image/logo.svg inlined so each letter can move). Intro: the top line drops in, やめとけ is stamped
   letter by letter (the sign jolts on each), the ！ bounces in last, then the English line. Replayed by UI.title() */
.t-logo .logo{margin:0;line-height:0}
.logo-svg{display:block;width:clamp(240px,72vw,480px);height:auto;overflow:visible}
.logo-svg .lg-top{fill:#333}.logo-svg .lg-main{fill:#c1272d}.logo-svg .lg-en{fill:#666}
.logo-svg path{transform-box:fill-box;transform-origin:50% 100%}
.logo-svg .lg-main path{transform-origin:50% 62%}
.logo-play .lg-top path{animation:lgDrop .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 70ms)}
.logo-play .lg-main path{animation:lgStamp .42s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(560ms + var(--i) * 150ms)}
.logo-play .lg-main path:last-child{animation:lgBang .7s cubic-bezier(.2,1.7,.4,1) 1.22s both,lgWig 6s ease-in-out 3.4s infinite}
.logo-play .lg-en path{animation:lgFade .32s ease-out both;animation-delay:calc(1.55s + var(--i) * 32ms)}
.logo-play .sign{animation:lgThud .6s linear .8s both}
.t-logo .sign .note{bottom:-30px}
@media (max-width:520px){.t-logo .sign .note{bottom:-36px;right:-10px}}
.logo-play .note{animation:lgNote .55s cubic-bezier(.3,1.6,.5,1) 2.05s both}
@keyframes lgDrop{from{opacity:0;transform:translateY(-70%)}to{opacity:1;transform:none}}
@keyframes lgStamp{0%{opacity:0;transform:scale(2.3) rotate(-12deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lgBang{0%{opacity:0;transform:translateY(-90%) rotate(24deg) scale(.6)}55%{opacity:1;transform:translateY(6%) rotate(-8deg) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes lgWig{0%,86%,100%{transform:none}89%{transform:rotate(-10deg) translateY(-6%)}92%{transform:rotate(7deg)}95%{transform:rotate(-3deg)}}
@keyframes lgFade{from{opacity:0;transform:translateY(45%)}to{opacity:1;transform:none}}
@keyframes lgThud{0%,8%,25%,33%,50%,58%,75%,83%,100%{transform:none}3%,28%,53%,78%{transform:translateY(3px) rotate(-.4deg)}}
@keyframes lgNote{from{opacity:0;transform:rotate(28deg) scale(.4)}to{opacity:1;transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.logo-play .lg-top path,.logo-play .lg-main path,.logo-play .lg-en path,.logo-play .sign,.logo-play .note{animation:none!important}}
.t-bot{display:flex;flex-direction:column;align-items:center;gap:12px}
.t-bot .tag{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r1);padding:8px 14px;font-weight:700;font-size:var(--t-sm);text-align:center;line-height:1.6;max-width:100%;box-shadow:0 2px 0 var(--ink)}
.t-bot .tag em{font-style:normal;color:var(--stamp)}
.t-bot .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.t-bot .btn{min-width:200px;min-height:54px;font-size:var(--t-lg);letter-spacing:.08em}
.t-bot .btn .cont{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;letter-spacing:.02em}
.t-bot .btn .cont small{font-size:var(--t-2xs);font-weight:500}
/* difficulty switch on the title */
.t-diff-row{flex-basis:100%;display:flex;justify-content:center}
.t-diff{display:grid;grid-template-columns:auto auto auto auto;align-items:center;justify-content:center;gap:4px 6px;background:rgba(255,252,244,.9);border:1.5px solid var(--ink);border-radius:var(--r1);padding:6px 12px;box-shadow:0 2px 0 var(--ink);width:fit-content;max-width:100%}
.t-diff span{font-size:var(--t-xs);font-weight:700;color:var(--ink-soft);letter-spacing:.1em}
.t-diff button{min-height:36px;padding:0 12px;white-space:nowrap;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:700;font-size:var(--t-sm)}
.t-diff button.on{background:var(--rule);color:#fff}
.t-diff small{grid-column:1/-1;text-align:center;font-size:var(--t-2xs);color:var(--ink-soft)}
/* credit and links under the title buttons (AMIX games: about / license / game list) */
.t-credit{margin:2px 0 0;padding:4px 12px;background:rgba(255,252,244,.88);border:1px solid rgba(43,36,32,.25);border-radius:var(--r1);font-size:12px;line-height:1.75;text-align:center;color:var(--ink-soft);max-width:100%}
.t-credit a{color:var(--ink);font-weight:700;text-underline-offset:2px}
.t-credit .cr-group{display:inline-block}
.t-credit .cr-note{display:block;font-size:10.5px;color:var(--ink-mute)}

/* ---------- stage select : 物件チラシ taped to the agency window ---------- */
#select{position:absolute;inset:0;z-index:41;background:rgba(214,221,216,.95);overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:calc(12px + var(--sat)) var(--sar) calc(24px + var(--sab)) var(--sal)}
.sel-head{display:flex;align-items:center;gap:var(--s3);max-width:1100px;margin:0 auto var(--s5);padding-bottom:var(--s3);border-bottom:2px solid var(--ink)}
.sel-head .back{flex:none;padding:0 10px 0 4px}
.sel-head h1{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,5.4vw,32px);letter-spacing:.06em;line-height:1.15}
.sel-head p{margin:3px 0 0;font-size:var(--t-sm);color:var(--ink-soft)}
.sel-head .agency{margin-left:auto;text-align:right;font-size:var(--t-2xs);color:var(--ink-soft);line-height:1.4;white-space:nowrap}
.sel-head .agency b{display:block;font-size:var(--t-sm);color:var(--ink);letter-spacing:.08em}
.props{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 22px;max-width:1100px;margin:0 auto}
.prop{background:#fff;border:1px solid #bdb5a6;display:flex;flex-direction:column;position:relative;text-align:left;padding:14px 14px 12px;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.08),0 14px 22px -16px rgba(43,36,32,.5);transition:transform .2s var(--ease-out);transform:rotate(-.5deg)}
.prop:nth-child(2n){transform:rotate(.45deg)}
.prop:nth-child(3n){transform:rotate(-.2deg)}
@media (hover:hover){.prop:not(.locked):hover{transform:rotate(0) translateY(-3px)}}
.prop:not(.locked):active{transform:rotate(0) translateY(1px)}
.prop .tape{position:absolute;top:-11px;width:74px;height:22px;background:rgba(236,222,186,.82);border-left:1px dashed rgba(160,140,100,.35);border-right:1px dashed rgba(160,140,100,.35);pointer-events:none}
.prop .tape.l{left:16px;transform:rotate(-6deg)}
.prop .tape.r{right:16px;transform:rotate(5deg)}
.f-top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-2xs);color:var(--ink-soft);letter-spacing:.08em;border-bottom:1px solid var(--ink);padding-bottom:4px}
.f-top .no{font-family:var(--f-num);color:var(--carbon);font-weight:700;letter-spacing:.04em}
.f-top .kind{font-weight:700;color:var(--ink)}
.f-catch{font-family:var(--f-body);font-weight:700;font-size:21px;line-height:1.25;margin:10px 0 8px;letter-spacing:.02em}
.f-catch em{font-style:normal;color:var(--stamp)}
.prop .pic{aspect-ratio:16/9;background:#e9ece8;overflow:hidden;border:1px solid var(--ink);position:relative}
.prop .pic img{width:100%;height:100%;object-fit:cover;display:block}
.prop .pic .lbl{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;font-size:9px;padding:2px 6px;letter-spacing:.14em}
.f-main{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin:10px 0 8px}
.f-name h3{font-size:var(--t-lg);font-weight:700;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.f-name span{display:block;font-size:var(--t-xs);color:var(--ink-soft)}
.f-rent{display:flex;align-items:baseline;gap:2px;color:var(--stamp);white-space:nowrap;line-height:1}
.f-rent small{font-size:var(--t-xs);font-weight:700}
.f-rent b{font-family:var(--f-display);font-weight:400;font-size:44px;letter-spacing:-.04em;line-height:.9;margin:0 1px 0 3px}
.f-rent span{font-size:var(--t-sm);font-weight:700}
.f-spec{width:100%;border-collapse:collapse;font-size:var(--t-xs)}
.f-spec th,.f-spec td{border:1px solid #bdb5a6;padding:4px 6px;vertical-align:top;text-align:left;line-height:1.4}
.f-spec th{background:#f2efe8;font-weight:700;white-space:nowrap;width:1%;color:var(--ink-soft)}
.f-spec td.num{font-family:var(--f-num)}
.f-blurb{font-size:var(--t-sm);line-height:1.65;color:var(--ink-soft);margin:8px 0 10px}
.f-cond{display:flex;align-items:center;gap:10px;border:2px solid var(--rule);padding:6px 6px 6px 10px;margin-top:auto}
.f-cond .k{font-size:var(--t-2xs);font-weight:700;color:var(--rule);letter-spacing:.12em;line-height:1.3;writing-mode:horizontal-tb}
.f-cond .v{font-weight:700;font-size:var(--t-sm);line-height:1.35}
.f-cond .v b{font-family:var(--f-num);font-size:var(--t-lg)}
.f-cond .btn{margin-left:auto;min-height:40px;padding:0 12px;font-size:var(--t-sm)}
.prop .medal{position:absolute;right:10px;top:46px;width:70px;height:70px;border:2.5px solid var(--stamp);outline:1px solid var(--stamp);outline-offset:-6px;color:var(--stamp);border-radius:50%;display:grid;place-items:center;align-content:center;transform:rotate(-12deg);background:rgba(255,255,255,.82);line-height:1.1;text-align:center;z-index:2;mix-blend-mode:multiply}
.prop .runtag{position:absolute;left:14px;top:118px;z-index:2;background:var(--rule);color:#fff;font-size:var(--t-2xs);font-weight:700;padding:3px 8px;border-radius:2px;letter-spacing:.04em;pointer-events:none}   /* this property has a record (2026-11-05) */
.prop .medal b{font-family:var(--f-display);font-weight:400;font-size:var(--t-md);letter-spacing:.06em}
.prop .medal .stars svg{width:10px;height:10px}
.prop.locked{cursor:not-allowed}
.prop.locked .pic img{filter:grayscale(1) contrast(.75) brightness(1.12)}
.prop.locked > :not(.lock):not(.tape){opacity:.55}
.prop .lock{position:absolute;inset:0;display:grid;place-items:center;z-index:3}
.prop .lock div{border:3px solid var(--ink);color:var(--ink);background:rgba(255,255,255,.9);padding:10px 16px;transform:rotate(-6deg);text-align:center;line-height:1.5;font-size:var(--t-xs);font-weight:700}
.prop .lock b{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--f-display);font-weight:400;font-size:var(--t-xl);letter-spacing:.12em}
.sel-foot{max-width:1100px;margin:var(--s5) auto 0;font-size:var(--t-2xs);color:var(--ink-soft);line-height:1.7}

/* goal banner */
#banner{position:absolute;inset:0;z-index:45;display:grid;place-items:center;pointer-events:none}
#banner .b{background:var(--paper);border:3px solid var(--stamp);outline:1.5px solid var(--stamp);outline-offset:-9px;padding:20px 34px;text-align:center;transform:rotate(-5deg);animation:bannerin .6s cubic-bezier(.2,1.6,.4,1) both;box-shadow:0 22px 40px -18px rgba(0,0,0,.55)}
#banner .b small{display:block;font-weight:700;letter-spacing:.34em;color:var(--stamp);font-size:var(--t-sm);font-family:var(--f-num)}
#banner .b strong{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(34px,9vw,60px);color:var(--stamp);line-height:1.15}
#banner .b span{font-family:var(--f-num);font-weight:700;font-size:var(--t-lg)}
@keyframes bannerin{from{transform:rotate(-5deg) scale(3);opacity:0}}
#banner.out .b{animation:bannerout .5s ease-in forwards}
@keyframes bannerout{to{transform:rotate(-5deg) translateY(-40px);opacity:0}}

#loading{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--board);font-weight:700;color:var(--ink);letter-spacing:.14em}
#loading img{width:min(62vw,280px);height:auto;animation:ldBob 1.6s ease-in-out infinite}
#loading span{font-size:var(--t-sm)}
#loading.gate{background:rgba(223,229,224,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer;transition:opacity .3s ease}
#loading.gate.out{opacity:0;pointer-events:none}
.gate-go{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r2);box-shadow:0 3px 0 var(--ink);padding:14px 30px 12px;min-width:240px}
.gate-go b{font-family:var(--f-num);font-size:20px;letter-spacing:.24em;color:var(--stamp);animation:gateBlink 1.6s ease-in-out infinite}
.gate-go small{font-size:var(--t-2xs);letter-spacing:.06em;font-weight:700;color:var(--ink-soft)}
.gate-mute{background:none;border:none;text-decoration:underline;text-underline-offset:3px;font-size:var(--t-sm);font-weight:700;color:var(--ink-soft);min-height:var(--tap);padding:0 12px}
.gate-snd{margin:0;font-size:var(--t-2xs);color:var(--ink-mute);letter-spacing:.06em}
@keyframes gateBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.gate-go b{animation:none}}
@keyframes ldBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@media (prefers-reduced-motion:reduce){#loading img{animation:none}}

/* ---------- phone ---------- */
@media (max-width:899px){
  #sheet{bottom:var(--dock-h,74px);border-bottom:1.5px solid var(--rule);border-radius:var(--r3) var(--r3) var(--r1) var(--r1);left:var(--sal);right:var(--sar);padding-bottom:0;max-height:min(calc(100% - var(--hud-h,120px) - var(--dock-h,74px) - 8px),600px)}
}
@media (max-width:560px){
  #hud{padding-top:calc(6px + var(--sat))}
  .hud-strip{grid-template-columns:54px 1fr auto 44px;grid-template-areas:"day time cash menu" "goal goal goal goal"}
  .h-goal{border-left:0!important;border-top:1px dashed var(--rule-soft);padding:5px 10px 6px;grid-template-columns:auto auto auto 1fr auto;grid-template-areas:"lbl val tgt meter pct";align-items:center;column-gap:6px}
  .h-goal .lbl{font-size:var(--t-2xs);letter-spacing:.02em}
  .h-goal .val{font-size:var(--t-lg)}
  .h-goal .tgt{font-size:var(--t-2xs)}
  .h-goal .meter{margin-top:0;height:9px}
  .h-goal .cust{display:none}
  .h-goal .tgt .w{display:none}
  .h-goal .tgt .n{display:inline}
  .h-goal .pct{font-size:var(--t-xs);min-width:30px}
  .h-day{padding:3px 0}
  .datestamp{width:42px;height:42px}
  .datestamp b{font-size:13px}
  .datestamp small{font-size:7px}
  .h-time{padding:5px 8px}
  .h-time .clock{font-size:18px}
  .h-time .line2{display:flex;gap:6px;align-items:center}
  /* a narrow phone: the day / weather / days-left line wraps instead of running under the money and stars (「あと14日」「締めまで」が隠れていた) */
  .h-time{white-space:normal;overflow:hidden}
  .h-time .sub{flex-wrap:wrap;row-gap:0;column-gap:5px;line-height:1.35}
  .h-time .sub span{white-space:nowrap}
  .h-time .sub .left{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}   /* 「4月6日・締めまで26日」 breaks at the ・ on a narrow phone */
  .h-cash{padding:5px 10px}
  .h-cash .val{font-size:var(--t-lg)}
  .h-cash .lbl{display:none}
  #live{right:calc(var(--sar) + 112px)}
  #live .lv{flex:1;min-width:0;padding:5px 6px 4px;column-gap:3px}
  #live svg{width:14px;height:14px}
  #live b{font-size:var(--t-md)}
  #speed .full{display:none}
  #speed .cyc{display:grid}
  #speed button{width:52px;height:50px}
  #speed .cyc.sp{grid-template-rows:auto auto;place-content:center;justify-items:center;gap:0}
  #feed{bottom:calc(76px + var(--sab));gap:5px}
  .toast{padding:6px 9px 7px;font-size:var(--t-xs)}
  #tip{top:calc(84px + var(--sat))}
  #tip .say{font-size:13.5px;line-height:1.65}
  .t-kicker b{font-size:var(--t-xs);letter-spacing:.16em}
  .sound{padding:0 10px;font-size:var(--t-xs)}
  .sound .lb{display:none}
  .sound{width:var(--tap);justify-content:center;padding:0}
  .t-logo{margin-top:9vh;margin-bottom:auto}
  .t-logo .sign{padding:16px 18px 14px}
  .t-logo .note{right:-6px}
  .sel-head .agency{display:none}
  .props{grid-template-columns:1fr;gap:30px}
  .report .r-hero .big{font-size:34px}
  .rstamp{width:74px;height:74px}
  .rstamp .t{font-size:20px}
  .r-hero{padding:var(--s3) var(--s4) var(--s2)}
  .master{grid-template-columns:48px 1fr;gap:10px}
  .master img{width:48px;height:48px}
  .master .say{font-size:13.5px}
}
@media (max-width:420px){
  .dock-in.n6 button{font-size:10px;letter-spacing:-.06em}
  .dock-in.n6 .open{flex:1.35;font-size:var(--t-sm);letter-spacing:0}
}
@media (max-width:360px){
  .h-goal .tgt{display:none}
  .dock-in button{font-size:10px}
}
@media (min-width:900px){
  #live .lv{min-width:86px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .t-logo{animation:none}
}

/* build bar (owned by build.js) — a catalogue slip: index tabs, one row of catalogue entries, a perforated tear-off line with the actions */
#buildbar{position:absolute;left:0;right:0;bottom:0;z-index:25;display:flex;flex-direction:column;padding:0 0 env(safe-area-inset-bottom,0px);border-radius:var(--r3,8px) var(--r3,8px) 0 0;border-bottom:0;background:var(--paper)}
#buildbar button{-webkit-tap-highlight-color:transparent}
.bb-head{display:flex;align-items:center;gap:var(--s2,8px);padding:2px var(--sar,10px) 0 var(--sal,10px)}
/* a phone: the seats / atmosphere line goes under the tabs and buttons (with the 外装 tab added on 2026-11-05 the three tabs and
   that line overlapped at 390, and at 320 完了 dropped onto the next row against the meter) */
@media (max-width:480px){.bb-head{flex-wrap:wrap;row-gap:2px}.bb-head .bb-tabs{margin-right:auto}.bb-head .bb-stat{order:9;flex-basis:100%;justify-content:flex-start;margin:0;border-left:0;padding:2px 0 8px}}
@media (max-width:370px){.bb-head .bb-tabs{gap:0}.bb-head .bb-tabs button{padding:0 6px;letter-spacing:0;font-size:13px}.bb-head{gap:4px}.bb-head .bb-done{padding:0 10px}}   /* 320: tabs, undo and 完了 on one row */
.bb-tabs{display:flex;gap:var(--s1,4px);align-self:stretch;align-items:stretch}
.bb-tabs button{white-space:nowrap;border:0;background:none;min-height:var(--tap,44px);padding:0 var(--s2,8px);font-size:var(--t-md,14px);font-weight:700;letter-spacing:.08em;color:var(--ink-mute,#776b62);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;touch-action:manipulation}
.bb-tabs button.on{color:var(--rule);border-bottom-color:var(--rule)}
.bb-stat{flex:1 1 auto;margin-left:var(--s2,8px);padding-left:var(--s3,12px);border-left:1px solid var(--rule-soft);display:flex;gap:var(--s3,12px);justify-content:flex-end;align-items:center;font-size:var(--t-xs,11px);color:var(--ink-soft);white-space:nowrap;min-width:0}
.bb-stat span{display:inline-flex;align-items:center;gap:5px}
.bb-stat b{font-size:var(--t-md,14px);color:var(--ink)}
.bb-stat .mtr{position:relative;display:inline-block;width:46px;height:7px;border:1.5px solid var(--rule);border-radius:var(--r1,2px);background:repeating-linear-gradient(90deg,transparent 0 9px,var(--rule-soft) 9px 10px)}
.bb-stat .mtr i{position:absolute;left:0;top:0;bottom:0;background:var(--rule);transition:width .3s}
.bb-stat .mtr i.tgt{left:83.3%;width:0;top:-4px;bottom:-4px;border-left:1.5px solid var(--ink);background:none}
.bb-undo{flex:none;display:grid;place-items:center;width:40px;height:38px;border:1.5px solid var(--ink);border-radius:var(--r1,2px);background:var(--paper);box-shadow:0 2px 0 var(--ink);padding:0;touch-action:manipulation}
.bb-undo:active{transform:translateY(2px);box-shadow:none}
.bb-undo[disabled]{opacity:.32;pointer-events:none}
.bb-done{flex:none;min-height:38px;padding:0 var(--s3,12px);font-size:var(--t-sm,12px)}
.bb-done svg{width:16px;height:16px}

.palette{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:var(--s2,8px) var(--sar,10px) 10px var(--sal,10px);border-top:1.5px solid var(--rule);
  touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding:0 12px}
.palette::-webkit-scrollbar{display:none}
.pal{flex:none;position:relative;width:88px;padding:5px 4px;border:1px solid var(--rule-soft);border-radius:var(--r1,2px);background:#fff;touch-action:pan-x;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;transition:border-color .12s,background-color .12s}
.pal img{display:block;height:44px;width:76px;object-fit:contain;margin-bottom:2px}
.pal b{font-size:var(--t-xs,11px);line-height:1.3;letter-spacing:-.04em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pal .bb-spec{font-size:var(--t-2xs,10px);line-height:1.3;color:var(--rule);font-weight:700;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pal .price{font-family:var(--f-num);font-size:var(--t-xs,11px);font-weight:700;color:var(--ink)}
.pal .price::before{content:none}
.pal.sel{border-color:var(--rule);background:var(--rule-faint,#eef5f1);box-shadow:inset 0 0 0 1.5px var(--rule)}
.pal.cant{opacity:.42}
.pal .fit{position:absolute;top:4px;left:3px;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--stamp);border:1.2px solid var(--stamp);border-radius:var(--r1,2px);padding:0 2px;line-height:13px;transform:rotate(-7deg);background:rgba(255,255,255,.75)}
.pal .cnt{position:absolute;top:3px;right:4px;font-style:normal;font-size:var(--t-2xs,10px);color:var(--carbon,#34509e)}
.pal .cnt::before{content:"\00d7"}

.bb-ctx{display:flex;align-items:center;gap:6px;min-height:60px;box-sizing:border-box;padding:7px var(--sar,10px) var(--s2,8px) var(--sal,10px);
  background:repeating-linear-gradient(90deg,var(--rule) 0 5px,transparent 5px 9px) top left/100% 1.5px no-repeat,var(--paper-2)}
.bb-msg{flex:1 1 auto;min-width:0;font-size:var(--t-sm,12px);line-height:1.4;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-msg b{color:var(--ink);font-size:13px;margin-right:6px}
.bb-msg .bb-spec{color:var(--rule);font-weight:700;margin-right:6px}
.bb-msg .bb-arw{display:inline-block;width:12px;height:8px;margin:0 3px;vertical-align:1px;background:linear-gradient(currentColor,currentColor) left 50%/9px 1.5px no-repeat;position:relative}
.bb-msg .bb-arw::after{content:"";position:absolute;right:1px;top:1px;width:4px;height:4px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.bb-msg .desc{display:inline}
.bb-msg .note{color:var(--ink);font-weight:700}
.bb-msg .ng{color:var(--stamp);font-weight:700;font-size:13px}
.bb-msg .keys{display:block;margin-top:2px;font-size:var(--t-xs,11px);color:var(--ink-mute,#776b62)}
.bb-msgw{flex:1 1 auto;min-width:0}   /* the message (clamped to two lines) and, on PC, the keys line under it */
.bb-keys{margin-top:4px;font-size:var(--t-xs,11px);line-height:1.9;color:var(--ink-mute,#776b62)}
.bb-keys b{font-family:var(--f-num);font-size:var(--t-2xs,10px);font-weight:700;color:var(--ink);border:1px solid var(--ink-soft);border-bottom-width:2px;border-radius:var(--r1,2px);padding:0 3px;margin:0 3px 0 8px}
.bb-keys b:first-child{margin-left:0}
.bb-msg .keys b{font-family:var(--f-num);font-size:var(--t-2xs,10px);font-weight:700;color:var(--ink);border:1px solid var(--ink-soft);border-bottom-width:2px;border-radius:var(--r1,2px);padding:0 3px;margin:0 3px 0 8px}
.bb-msg .keys b:first-child{margin-left:0}
.bb-ctx.bad{background:repeating-linear-gradient(90deg,var(--stamp) 0 5px,transparent 5px 9px) top left/100% 1.5px no-repeat,var(--stamp-soft,#fbefe9)}
.bb-ctx .btn{min-height:var(--tap,44px);flex:none}
.bb-ctx .btn.sq{width:var(--tap,44px);padding:0}
.bb-ctx .btn.go{padding:0 var(--s3,12px);min-width:104px}
.bb-ctx .btn .num{font-size:var(--t-sm,12px);margin-left:2px}
.bb-ctx .btn.sell{padding:0 10px;color:var(--stamp);border-color:var(--stamp);box-shadow:0 3px 0 var(--stamp-deep,#8d2216)}
.bb-ctx .btn[disabled]{opacity:.45}

@media (max-width:380px){
  .bb-ctx .btn.go{min-width:0}
}
@media (min-width:900px){
  #buildbar{left:50%;right:auto;bottom:10px;width:min(880px,calc(100% - 40px));transform:translateX(-50%);border-radius:var(--r2,4px);border-bottom:1.5px solid var(--rule);padding-bottom:0}
  .pal{width:100px}
  .pal img{height:54px;width:88px}
  .pal b{font-size:11.5px}
  .bb-ctx{border-radius:0 0 var(--r2,4px) var(--r2,4px)}
}
@media (hover:hover) and (pointer:fine){
  .pal:hover{border-color:var(--rule)}
}

/* the sign hangs from the top of the screen: strings run all the way up, and it swings from up there (a long pendulum moves gently) */
.t-logo{transform-origin:50% -70vh;animation-name:swingLong}
.t-logo .chain{top:auto;bottom:calc(100% - 2px);height:110vh}
@keyframes swingLong{0%,100%{transform:rotate(-.55deg)}50%{transform:rotate(.25deg)}}
@media (prefers-reduced-motion:reduce){.t-logo{animation:none}}
/* ---- long play ---- */
.master.bank .say .name{color:var(--carbon)}
.master.bank img{border-radius:50%}   /* the face is drawn in a circle; a square background used to show around it */
.dock-in.n7 button{font-size:var(--t-2xs)}
.ledger.hq{margin:var(--s2) 0}
.ledger.hq .ln em{font-style:normal;font-size:var(--t-2xs);color:var(--ink-soft);margin-left:6px}
.credit{display:inline-block;width:120px;height:8px;border:1.5px solid var(--ink);border-radius:5px;overflow:hidden;vertical-align:middle;background:var(--paper)}
.credit i{display:block;height:100%;background:var(--carbon)}
.borrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s2) 0 var(--s3)}
.borrow .stepper{display:inline-flex;align-items:center;border:1.5px solid var(--ink);border-radius:var(--r1);overflow:hidden}
.borrow .stepper b{min-width:110px;text-align:center;font-family:var(--f-num)}
.borrow .stepper button{min-height:40px}
.r.shop .tag{font-style:normal;font-size:var(--t-2xs);font-weight:700;color:var(--paper);background:var(--rule);padding:1px 6px;border-radius:2px;margin-left:6px;vertical-align:middle}
.r.shop.here{background:rgba(31,107,86,.06)}
.r.shop .mgr{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:700;margin-top:6px;white-space:nowrap}
.r.shop .mgr select{font:inherit;font-weight:500;border:1.5px solid var(--ink);border-radius:var(--r1);background:var(--paper);padding:4px 6px;min-width:0;flex:0 1 auto;max-width:100%;min-height:40px;text-overflow:ellipsis}
.r.shop small.warn{color:var(--stamp)}
.r .btn .num{margin-left:4px}
.t-long{display:flex;flex-direction:column;gap:8px;margin-top:10px;pointer-events:auto}
.t-long .btn small{display:block;font-size:var(--t-2xs);font-weight:500;opacity:.75}
.t-long .btn{flex-direction:column;align-items:center;line-height:1.25;padding-top:6px;padding-bottom:6px}
.t-long .btn.locked{opacity:1;color:var(--ink-soft);background:var(--paper-2,#f1ece0);border-style:dashed;box-shadow:none}
.t-file{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:4px}
.t-file button{border:0;background:none;font-size:var(--t-xs);font-weight:700;text-decoration:underline;color:var(--ink);padding:6px 2px;min-height:40px}
#select.long .f-cond small{font-size:var(--t-2xs);font-weight:700;color:var(--ink-soft)}
.t-file button{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r1);text-decoration:none;padding:4px 10px;box-shadow:0 2px 0 var(--ink)}
.staff .mood{display:flex;align-items:center;gap:6px;font-size:var(--t-2xs);font-weight:700;margin-top:4px;color:var(--ink-soft)}
.staff .mood .mbar{width:56px;height:6px;border:1px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--paper)}
.staff .mood.good .mbar i{background:var(--rule)}.staff .mood.mid .mbar i{background:var(--gold)}.staff .mood.bad .mbar i{background:var(--stamp)}
.staff .mood.bad{color:var(--stamp)}
.staff .mbar i{display:block;height:100%}
.btn.off{min-height:36px;font-size:var(--t-xs);padding:0 10px;margin-bottom:6px}
.btn.off.on{background:var(--ink);color:var(--paper)}
.toast .face-s{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--paper-2);margin-right:4px;vertical-align:middle}
/* a shop row: name, figures and the manager take the full width; its two buttons sit on their own line underneath */
.r.shop{grid-template-columns:48px 1fr;align-items:start}
.r.shop .ic{align-self:start;margin-top:2px}
.r.shop .shop-acts{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px}
.r.shop .shop-acts:empty{display:none}
.r.shop .shop-acts .btn{min-height:38px;padding:0 16px;font-size:var(--t-sm)}
.r.shop .shop-acts .btn.out{box-shadow:none;color:var(--stamp);border-color:var(--stamp)}
.r.shop .shop-acts .btn.out{margin-left:auto}   /* 撤退 kept apart from the everyday buttons */
.r.shop small.warn .nw{white-space:nowrap}
/* owner avatar */
.dialog.avatar .body{max-height:min(70vh,640px);overflow:auto}
.av-prev{display:flex;justify-content:center;gap:18px;background:var(--paper-2,#f1ece0);border:1.5px solid var(--rule-soft,#d8d2c4);border-radius:var(--r1);padding:8px 0;margin-bottom:6px}
.av-prev img{width:72px;height:140px;image-rendering:auto}
.av-lbl{font-size:var(--t-2xs);font-weight:700;letter-spacing:.12em;color:var(--rule);margin:10px 0 4px}
.av-row{display:flex;flex-wrap:wrap;gap:6px}
.av-two{display:flex;flex-wrap:wrap;gap:12px}
.av-row .chip{border:1.5px solid var(--ink);background:var(--paper);border-radius:999px;padding:6px 12px;min-height:38px;font-weight:700;font-size:var(--t-xs)}
.av-row .chip.on{background:var(--ink);color:var(--paper)}
.av-row .swatch{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--c);position:relative}
.av-row .swatch.on{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--rule)}
.btn.av-open{display:flex;width:max-content;min-height:34px;font-size:var(--t-xs);padding:0 12px;margin-top:8px}   /* on its own line under the name */
@media (max-width:360px){ #hWx .wxn{display:none} }   /* 320-360: the icon says the weather; the name pushed ℃ out of the time box (くもり 20｜℃) */