/* =========================================================
   カフェ経営のはずがゾンビパニック — 画面の部品
   本編（tool-g-cafeyame）の「伝票・日計表」の紙の質感を引き継ぎ、無線と夜の紺を足した。
   色はゲーム固有の固定配色（AI_GUIDELINES「ゲームの配色」）
   ========================================================= */
@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:#2b2420; --ink-soft:#5e534b; --ink-mute:#776b62;
  --paper:#fffcf4; --paper-2:#f5efe1; --paper-3:#e9e1cd;
  --rule:#1f6b56; --rule-deep:#124a3b; --rule-soft:#cbdfd4;
  --stamp:#c8372a; --stamp-deep:#8d2216; --stamp-soft:#f7e0da;
  --carbon:#34509e; --gold:#e0a43a; --gold-ink:#9a6a12;
  --night:#1b2430; --night-2:#263244; --night-line:#3c4a60; --glow:#ffd27a;
  --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;
  --tb:max(0px, calc(100% - 100svh));   /* iOS 26 の Safari で下端がツールバーに隠れる分 */
  --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));
  --lift:0 1px 0 rgba(0,0,0,.25),0 14px 28px -16px rgba(0,0,0,.7);
  color-scheme:light;
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{line-break:strict;height:100%;margin:0;background:var(--night);color:var(--ink);overflow:hidden;overscroll-behavior:none}
html{font-synthesis:none}
body{font-family:var(--f-body);font-weight:500;font-size:14px;line-height:1.55;-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;bottom:var(--tb);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;touch-action:manipulation;-webkit-touch-callout:none}
button:focus{outline:none}
:focus-visible{outline:2.5px solid var(--glow)!important;outline-offset:2px}
h1,h2,h3,p{margin:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 20px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);font-weight:700;font-size:15px;box-shadow:0 3px 0 var(--ink);transition:transform .08s}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn.primary{background:var(--rule);color:#fff}
.btn.ghost{background:var(--paper)}
.btn.small{min-height:38px;padding:0 12px;font-size:13px;box-shadow:0 2px 0 var(--ink)}
.btn.big{min-height:56px;padding:0 44px;font-size:18px}
.btn:disabled{opacity:.45;cursor:default}
.stamp-btn{background:var(--stamp);color:#fff;font-family:var(--f-display);font-weight:400;letter-spacing:.08em;font-size:16px}

/* ---------- 上の帯（HUD） ---------- */
#hud{position:absolute;top:0;left:0;right:0;padding:calc(6px + var(--sat)) var(--sar) 0 var(--sal);pointer-events:none;z-index:20}
.hud-in{display:flex;align-items:stretch;gap:6px;max-width:980px;margin:0 auto;background:var(--paper);border:2px solid var(--ink);border-radius:6px;box-shadow:var(--lift);padding:5px 6px;pointer-events:auto}
.h-day{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;padding:0 6px;border-right:1.5px dashed var(--paper-3);line-height:1}
.h-day b{font-size:24px;color:var(--stamp)}
.h-day small{font-size:10px;color:var(--ink-mute);margin-top:2px;white-space:nowrap}
.h-time{display:flex;flex-direction:column;justify-content:center;min-width:86px;padding:0 4px;line-height:1.15}
.h-time .clock{font-size:20px;font-weight:700}
.h-time .sub{display:flex;gap:6px;font-size:10.5px;color:var(--ink-soft);white-space:nowrap}
.h-time .sub span:last-child{color:var(--stamp);font-weight:700}
.h-res{display:flex;flex:1;gap:4px;justify-content:flex-end;align-items:center;flex-wrap:nowrap}
.rc{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:4px;background:var(--paper-2);font-size:12px;white-space:nowrap}
.rc i{font-style:normal;color:var(--ink-mute);font-size:11px}
.rc b{font-size:14px}
.rc svg{width:15px;height:15px;color:var(--ink-soft)}
.rc.r-ammo svg,.rc.r-shell svg{color:var(--gold-ink)}
.h-menu{flex:none;width:44px;min-height:44px;border:0;border-radius:5px;background:var(--night);color:#fff;display:grid;place-items:center}
.h-menu svg{width:22px;height:22px}
.h-shop{display:flex;align-items:center;gap:8px;max-width:980px;margin:5px auto 0;padding:5px 10px;background:rgba(27,36,48,.86);color:#fff;border-radius:6px;pointer-events:auto;font-size:12px}
.h-shop .lbl{color:#c9d2e0;white-space:nowrap}
.h-shop .lbl.k{margin-left:6px}
.h-shop .meter{flex:1;height:8px;border-radius:4px;background:#3c4a60;overflow:hidden}
.h-shop .meter i{display:block;height:100%;background:#7fd18a;transition:width .25s}
.h-shop.low .meter i{background:#e8604f}
.h-shop b{font-size:13px;min-width:2.6em}
@media (max-width:560px){
  /* スマホ縦：資源は2段目に並べる（1段に詰めると数字が折り返す） */
  .hud-in{flex-wrap:wrap;row-gap:4px}
  .h-time{flex:1}
  .h-res{order:5;flex-basis:100%;justify-content:space-between;padding-top:4px;border-top:1.5px dashed var(--paper-3)}
  .rc{flex:1;justify-content:center}
}

/* ---------- 知らせ ---------- */
#feed{position:absolute;left:50%;top:calc(var(--sat) + 116px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:30;width:min(92vw,420px)}
.tst{padding:7px 14px;border-radius:999px;background:rgba(27,36,48,.92);color:#fff;font-weight:700;font-size:13px;box-shadow:0 6px 18px -8px rgba(0,0,0,.6);animation:tIn .22s ease-out;transition:opacity .4s,transform .4s;text-align:center}
.tst.bad{background:rgba(141,34,22,.94)}
.tst.warn{background:rgba(154,106,18,.94)}
.tst.out{opacity:0;transform:translateY(-6px)}
@keyframes tIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 時間帯の操作パネル ---------- */
#panel{position:absolute;z-index:15;background:var(--paper);border:2px solid var(--ink);border-radius:8px;box-shadow:var(--lift);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:12px 14px 14px;user-select:none}
@media (min-width:821px){#panel{left:var(--sal);top:calc(var(--sat) + 76px);width:360px;max-height:calc(100% - var(--sat) - 76px - 92px - var(--sab))}}
@media (max-width:820px){#panel{left:var(--sal);right:var(--sar);bottom:calc(var(--sab) + 74px);max-height:37%;padding:8px 10px 10px}#panel .ph-head p{display:none}#panel .ph-head{margin-bottom:6px}.tool{min-height:72px}.tool img,.tool .ic{height:32px}}
.ph-head{margin-bottom:8px}
.ph-head h2{font-family:var(--f-display);font-weight:400;font-size:19px;letter-spacing:.04em}
.ph-head p{font-size:12px;color:var(--ink-soft)}
.hint{margin-top:8px;font-size:12px;color:var(--ink-soft);word-break:normal;line-break:strict;overflow-wrap:anywhere}
.places{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.place{padding:7px 9px;border:1.5px solid var(--paper-3);border-radius:6px;background:var(--paper-2);display:flex;flex-direction:column;gap:1px}
.place b{font-size:14px}
.place span{font-size:11.5px;color:var(--ink-soft)}
.risk{font-style:normal;font-size:11px;font-weight:700}
.risk.r-lo{color:var(--rule)}
.risk.r-mid{color:var(--gold-ink)}
.crewlist,.crewcards{display:flex;flex-direction:column;gap:8px}
.crew-row,.cc{padding:8px;border:1.5px solid var(--paper-3);border-radius:6px;background:#fff}
.cc.on{border-color:var(--carbon);box-shadow:0 0 0 2px rgba(52,80,158,.2)}
.who{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.who img{width:38px;height:42px;object-fit:cover;object-position:50% 18%;border-radius:50%;background:var(--paper-2);border:1.5px solid var(--paper-3);flex:none}
.who b{display:block;font-size:14px}
.who small{display:block;font-size:11px;color:var(--ink-mute);line-height:1.35}
.who small.st{color:var(--ink-soft)}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
.seg button{flex:1;min-height:40px;border:0;border-right:1.5px solid var(--ink);background:var(--paper);font-weight:700;font-size:12.5px;padding:0 4px}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--rule);color:#fff}
.seg button:disabled{color:var(--ink-mute);background:var(--paper-2)}
.ammo{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap}
.ammo b{font-size:17px;min-width:2em;text-align:center;color:var(--ink)}
.stp{width:40px;height:36px;border:1.5px solid var(--ink);border-radius:5px;background:var(--paper);font-weight:700;font-size:17px}
.cc .post{margin-top:7px;width:100%}
.cc.on .post{background:var(--carbon);color:#fff}
.tabs{display:flex;gap:4px;margin-bottom:8px}
.tab{flex:1;min-height:38px;border:1.5px solid var(--ink);border-radius:6px 6px 0 0;background:var(--paper-2);font-weight:700}
.tab.on{background:var(--night);color:#fff}
.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.tool{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:84px;padding:5px 2px;border:1.5px solid var(--paper-3);border-radius:6px;background:#fff;font-size:12px}
.tool img{height:40px;width:auto;max-width:100%}
.tool .ic{height:40px;display:grid;place-items:center;font-size:22px;color:var(--stamp)}
.tool b{font-size:13px}
.tool span{font-size:10.5px;color:var(--ink-mute)}
.tool.on{border-color:var(--gold);background:#fff7e3;box-shadow:0 0 0 2px rgba(224,164,58,.35)}
.tool:disabled{opacity:.45}
.repair{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:1.5px dashed var(--paper-3);font-size:12.5px;flex-wrap:wrap}

/* ---------- 下の操作帯 ---------- */
#dock{position:absolute;left:0;right:0;bottom:0;z-index:18;padding:0 var(--sar) calc(8px + var(--sab)) var(--sal);pointer-events:none}
.dock-in{display:flex;align-items:center;gap:8px;max-width:980px;margin:0 auto;padding:7px;background:rgba(27,36,48,.92);border-radius:8px;box-shadow:var(--lift);pointer-events:auto}
.dock-msg{flex:1;min-width:0}
.rmini{display:flex;align-items:center;gap:7px;color:#e6ecf5;font-size:12.5px;line-height:1.4}
.rmini svg{color:var(--glow)}
.rmini p{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#dock .btn{flex:none}
#dock.night .dock-in{justify-content:space-between}
.speed{display:flex;gap:4px}
.sp{min-width:44px;min-height:44px;border:1.5px solid #5a6a84;border-radius:6px;background:var(--night-2);color:#fff;font-family:var(--f-num);font-weight:700;display:grid;place-items:center}
.sp.on{background:var(--glow);color:var(--ink);border-color:var(--glow)}
.sp.pz svg{width:20px;height:20px}
.orders{display:flex;gap:6px}
.ord{min-height:44px;padding:2px 10px;white-space:nowrap;border:1.5px solid var(--glow);border-radius:6px;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.ord b{font-size:13px}
.ord small{font-size:10px;color:#c9d2e0}
.ord:disabled{opacity:.4}
@media (max-width:420px){.ord{padding:2px 5px}.ord b{font-size:11.5px}.sp{min-width:38px}.speed{gap:3px}.orders{gap:4px}.dock-in{gap:5px;padding:6px}}

/* ---------- 真ん中の紙（モーダル） ---------- */
#modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:calc(12px + var(--sat)) var(--sar) calc(12px + var(--sab)) var(--sal);background:rgba(12,16,24,.55);overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
#modal .sheet{width:min(480px,100%);margin:auto;background:var(--paper);border:2px solid var(--ink);border-radius:8px;box-shadow:0 20px 40px -18px rgba(0,0,0,.8);padding:18px 18px 16px;animation:mIn .24s cubic-bezier(.2,.8,.2,1)}
@keyframes mIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.mh{font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:.04em;margin-bottom:8px;line-height:1.25}
.mh.bad{color:var(--stamp)}
.mh.good{color:var(--rule)}
.kicker{font-size:11px;letter-spacing:.14em;color:var(--ink-mute);font-weight:700;margin-bottom:2px}
.lead{font-size:14px;margin-bottom:10px;word-break:normal;line-break:strict;overflow-wrap:anywhere}
.mute{color:var(--ink-mute);font-size:12.5px}
.acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.acts.col{flex-direction:column;align-items:stretch}
.acts .btn{flex:1 1 auto}
.radio{margin:8px 0 2px;padding:10px 12px;border-radius:6px;background:var(--night);color:#eef2f8}
.r-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:11px;color:#a9b6c8}
.r-head b{color:var(--glow);font-size:12px;letter-spacing:.1em}
.r-head svg{color:var(--glow);width:16px;height:16px}
.radio p{font-size:14px;line-height:1.6;margin:2px 0;word-break:normal;line-break:strict;overflow-wrap:anywhere}
.lines{margin:4px 0 10px;padding-left:1.1em;font-size:13.5px}
.lines li{margin:3px 0;word-break:normal;line-break:strict;overflow-wrap:anywhere}
.lines li.bad{color:var(--stamp-deep)}
.lines li.warn{color:var(--gold-ink)}
.lines li.mute{color:var(--ink-mute)}
.gains{display:flex;gap:6px;flex-wrap:wrap}
.gain{padding:4px 10px;border-radius:999px;background:var(--rule-soft);font-weight:700;font-size:13px}
.gain.none{background:var(--paper-2);color:var(--ink-mute)}
.diffs{display:flex;flex-direction:column;gap:8px}
.diff{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:2px solid var(--ink);border-radius:6px;background:#fff;text-align:left;box-shadow:0 3px 0 var(--ink)}
.diff b{font-family:var(--f-display);font-weight:400;font-size:18px;letter-spacing:.06em}
.diff span{font-size:12.5px;color:var(--ink-soft)}
.diff:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.how{padding-left:1.2em;font-size:13.5px}
.how li{margin:5px 0;word-break:normal;line-break:strict;overflow-wrap:anywhere}
/* 日計表の型（夜のふり返り） */
.report{position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:4px;padding:10px 12px}
.report tr + tr th,.report tr + tr td{border-top:1px solid var(--rule-faint,#e7f0ea)}
.rp-head{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--rule);padding-bottom:4px;margin-bottom:4px}
.rp-head b{font-family:var(--f-display);font-weight:400;font-size:18px;color:var(--rule)}
.rp-head span{font-size:11px;color:var(--ink-mute)}
.rp-head .num{color:var(--carbon)}
.report table{width:100%;border-collapse:collapse;font-size:13px}
.report th{text-align:left;font-weight:500;color:var(--ink-soft);padding:2px 0}
.report td{text-align:right;color:var(--carbon);font-weight:700;padding:2px 0}
.report tr.sum th,.report tr.sum td{border-top:1.5px solid var(--ink);color:var(--ink);font-weight:700;padding-top:4px}
.report tr.bad td{color:var(--stamp)}
.report.small{margin-top:8px}
.rp-left{display:flex;gap:10px;justify-content:space-between;margin-top:8px;padding-top:6px;border-top:1.5px dashed var(--paper-3);font-size:12px;color:var(--ink-soft)}
.rp-left b{display:block;font-size:16px;color:var(--ink)}
.rp-head .stamp{margin-left:auto;padding:2px 8px;border:2.5px solid var(--stamp);border-radius:4px;color:var(--stamp);font-family:var(--f-display);font-style:normal;font-size:13px;transform:rotate(-6deg);opacity:.88;white-space:nowrap}

/* ---------- タイトル（本人 2026-11-06「本編のカフェ経営のゲームと同じスタイルに」：本編 tool-g-cafeyame/css/style.css の 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);touch-action:pan-y;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;background:linear-gradient(180deg,rgba(12,16,24,0) 55%,rgba(12,16,24,.45) 100%)}
#title::-webkit-scrollbar{display:none}
#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}
.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:12px;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(--paper);padding-left:1px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.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:30px 34px 28px;border-radius:4px;position:relative;box-shadow:0 2px 0 var(--ink),0 22px 34px -18px rgba(27,36,48,.6);color:var(--ink)}
.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 .logo{margin:0;font-weight:400}
.t-logo .l1{display:block;font-family:var(--f-display);font-size:clamp(26px,7vw,42px);line-height:1.08;letter-spacing:.04em;color:#333}
.t-logo .l2{display:block;font-family:var(--f-display);font-size:clamp(50px,14.5vw,100px);line-height:.98;color:var(--stamp);letter-spacing:-.03em;margin-top:6px}
.t-logo .ch{display:inline-block}
.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:.3em;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:-30px;background:var(--gold);color:var(--ink);font-weight:700;font-size:12px;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;z-index:2}
.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)}
@media (max-width:520px){.t-logo{margin-top:9vh;margin-bottom:auto}.t-logo .sign{padding:16px 18px 14px}.t-logo .note{right:-8px;bottom:-36px}.t-kicker b{font-size:11px;letter-spacing:.16em}}
/* 文字の登場（本編と同じ動き）：上の段が落ちてきて、下の段を1文字ずつ判子のように押す（押すたびに看板が揺れる）。英字、リボンの順 */
.logo-play .l1 .ch{animation:lgDrop .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 70ms)}
.logo-play .l2 .ch{animation:lgStamp .42s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(700ms + var(--i) * 140ms)}
.logo-play .en{animation:lgFade .32s ease-out 1.85s both}
.logo-play .sign{animation:lgThud .6s linear .95s both}
.logo-play .note{animation:lgNote .55s cubic-bezier(.3,1.6,.5,1) 2.1s 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 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)}}
/* 看板に血のような飛沫が付き、しずくがゆっくり垂れる（本人 2026-11-06。ゲーム中は血を出さない。タイトルの看板だけ） */
.t-logo .splat{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1;stroke:none}   /* アイコン用の svg の線（白っぽい）が血しぶきにかかって、垂れが切れて見えていた（本人 2026-11-06） */
.t-logo .splat .sp{fill:#8a1610;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.t-logo .splat .drip{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}
.logo-play .splat .sp{animation:spHit .28s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(2.6s + var(--d) * 220ms)}
.logo-play .splat .drip{animation:spDrip 3.4s cubic-bezier(.5,0,.6,1) both;animation-delay:calc(3s + var(--d, 0) * 220ms)}
.logo-play .splat .drip.d2{animation-duration:4.6s}
@keyframes spHit{0%{opacity:0;transform:scale(.1)}60%{opacity:.95;transform:scale(1.18)}100%{opacity:.92;transform:scale(1)}}
@keyframes spDrip{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.t-logo{animation:none}.logo-play .ch,.logo-play .en,.logo-play .sign,.logo-play .note{animation:none!important}.logo-play .splat .sp{animation:none!important;opacity:.92}.logo-play .splat .drip{animation:none!important;transform:none}}
.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:2px;padding:8px 14px;font-weight:700;font-size:12px;text-align:center;line-height:1.6;max-width:100%;box-shadow:0 2px 0 var(--ink);color: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%;margin:0}
.t-bot .btn{min-width:200px;min-height:54px;font-size:17px;letter-spacing:.08em}
.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:2px;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)}

/* ---------- 読み込み ---------- */
#loading{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--night);color:#fff;transition:opacity .45s;text-align:center}
#loading b{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.3}
#loading span{font-size:13px;color:#a9b6c8}
#loading.out{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 守りの層の見出しと、店の壁の状態の札 */
.sub-h{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.sub-h:first-of-type{margin-top:0}
.sub-h em{font-style:normal;color:var(--stamp);font-size:11.5px}
.tools.t2{grid-template-columns:repeat(5,1fr)}
.walls{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:2px}
.wl{display:flex;flex-direction:column;align-items:center;padding:3px 0;border-radius:4px;background:var(--paper-2);font-size:10px;line-height:1.25;color:var(--ink-soft);white-space:nowrap}
.wl i{font-style:normal;font-weight:700;font-size:9.5px;color:var(--ink)}
.wl.s-crack{background:#fff1d6}
.wl.s-broken{background:var(--stamp-soft)}.wl.s-broken i{color:var(--stamp)}
.wl.s-board{background:#efe0c8}
.wl.s-shutter{background:#dfe3e6}

/* 仲間の体力（夜の上の帯）。スマホは最大6人でも名前と体力が重ならないよう3人ずつ */
.h-crew{display:flex;gap:8px;flex:1;min-width:0}
.hc{display:flex;align-items:center;gap:4px;flex:1;min-width:0;font-size:11px}
.hc b{font-weight:700;color:#e6ecf5;white-space:nowrap}
.hc i{flex:1;height:7px;border-radius:4px;background:#3c4a60;overflow:hidden;min-width:20px}
.hc i em{display:block;height:100%;background:#7fd18a;transition:width .25s}
.hc.low i em{background:#e8604f}
.hc.ko{opacity:.55}.hc.ko b{text-decoration:line-through}
.hc small{font-size:10px;color:#f7b0a6;white-space:nowrap}
.hc.late small{color:#c9d2e0}
@media (max-width:560px){
  .h-shop{flex-wrap:wrap;row-gap:4px}
  .h-crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex-basis:100%;gap:5px 10px}
  .hc b{min-width:2em;flex:none}
  .hc i{min-width:12px}
  .h-shop .lbl.k{margin-left:auto}
}
/* マスターの顔（無線） */
.radio{display:flex;gap:10px;align-items:flex-start}
.radio .r-face{width:52px;height:52px;border-radius:50%;flex:none;border:2px solid #4a5a72;background:#eef1ea}
.radio .r-body{flex:1;min-width:0}
.rmini .r-face{width:34px;height:34px;border-radius:50%;flex:none;border:1.5px solid #4a5a72}
/* 夜の持ち場の組みなおし（仲間の札） */
.cchips{display:flex;gap:4px}
.cchip{position:relative;width:40px;height:44px;padding:0;border:1.5px solid #5a6a84;border-radius:6px;background:var(--night-2);overflow:hidden;display:grid;place-items:center}
.cchip img{position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:30px;object-fit:cover;object-position:50% 14%}   /* 顔は弾数の帯（下14px）より上に収める（本人 2026-11-09「左下の顔は少し上に。弾数で隠れている」） */
.cchip small{position:absolute;bottom:0;left:0;right:0;background:rgba(16,24,36,.9);color:#fff;font:700 10px/1.4 sans-serif;white-space:nowrap;text-align:center}
.cchip.empty small{background:#773a16;color:#fff0c6}
.cchip.on{border-color:var(--glow);box-shadow:0 0 0 2px rgba(255,210,122,.45)}
.cchip:disabled{opacity:.35}
@media (max-width:520px){.cchip{width:34px}.cchip img{width:34px}#dock.night .dock-in{flex-wrap:wrap;justify-content:center}}

/* レベル（上の帯）：Lv と経験値の帯 */
.h-lv{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:46px;padding:0 4px;border-right:1.5px dashed var(--paper-3)}
.h-lv b{font-family:var(--f-num);font-size:13px;color:var(--carbon);line-height:1}
.h-lv i{display:block;height:5px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.h-lv i em{display:block;height:100%;background:#4fb6d8;transition:width .3s}
/* 遊び方の切り替え・難度の最高記録 */
.seg.modes{margin-bottom:6px}
.mdesc{margin-bottom:10px}
.diff .best{display:inline-block;margin-left:8px;font-style:normal;font-weight:700;color:var(--carbon)}
/* レベルアップのカード（バンサバ風） */
#modal.m-level .sheet{width:min(640px,100%)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 12px;border:2px solid var(--ink);border-radius:8px;background:#fff;box-shadow:0 3px 0 var(--ink);text-align:center;animation:cardIn .32s cubic-bezier(.2,1.4,.4,1) both}
.card:nth-child(2){animation-delay:.06s}.card:nth-child(3){animation-delay:.12s}
.card img{width:64px;height:64px}
.card b{font-size:14.5px}
.card small{font-size:11px;color:var(--ink-mute)}
.card small.lvl{color:var(--gold-ink);letter-spacing:.1em}
.card span{font-size:12px;line-height:1.5;color:var(--ink-soft);word-break:normal;line-break:strict;overflow-wrap:anywhere}
.card:hover,.card:focus-visible{background:#fff7e3;transform:translateY(-2px)}
.card:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:520px){.cards{grid-template-columns:1fr;gap:8px}.card{display:grid;grid-template-columns:52px 1fr;grid-template-areas:'i b' 'i s' 'i d';column-gap:10px;row-gap:1px;text-align:left;padding:10px 12px;align-items:center}.card img{grid-area:i;width:52px;height:52px}.card b{grid-area:b}.card small{grid-area:s}.card span{grid-area:d}#modal.m-level .mh{font-size:20px}}
/* エンドレスの記録 */
.record{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:6px 0 10px;padding:10px;border:2px dashed var(--paper-3);border-radius:8px}
.record b{font-size:36px;color:var(--ink)}
.record.new{border-color:var(--gold);background:#fff7e3}
.record.new b{color:var(--stamp)}
@media (max-width:560px){.h-lv{min-width:40px}}
/* 店（ステージ）を選ぶ一覧 */
.stages{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;max-height:46vh;overflow-y:auto;touch-action:pan-y;padding:2px}
.stg{display:grid;grid-template-columns:116px 1fr;gap:12px;align-items:center;text-align:left;padding:6px;border:1.5px solid var(--paper-3);border-radius:6px;background:var(--paper);color:var(--ink)}
.stg img{width:116px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;border:1.5px solid var(--ink);display:block}
.stg-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.stg-name{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;line-height:1.3}
.stg-name b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--night);color:#fff;font-family:var(--f-num);font-size:12px}
.stg small{font-size:11.5px;color:var(--ink-soft);line-height:1.5}
.stg.on{border-color:var(--rule);box-shadow:0 0 0 2px rgba(31,107,86,.25);background:#f2f8f4}
.stg.on .stg-name b{background:var(--rule)}
.stg:disabled{opacity:.6}.stg:disabled img{filter:grayscale(1) brightness(.75)}.stg:disabled .stg-name b{background:var(--ink-mute)}
/* 店と難度のあいだの見出しと罫線（本人 2026-11-06「難度設定との間には罫線などがあった方がいい」） */
.sec-h{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft)}
.sec-h::after{content:"";flex:1;height:1.5px;background:var(--paper-3)}
.lead.next{margin-top:10px;font-weight:700;color:var(--rule)}

/* 店長の見た目（本編の「店主の見た目」を写した） */
.t-av{margin:0}
.av-prev{display:flex;justify-content:center;gap:10px;background:var(--paper-2);border:1.5px solid var(--paper-3);border-radius:6px;padding:8px 0;margin-bottom:6px}
.av-prev img{width:72px;height:140px}
.av-lbl{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);margin:10px 0 4px}
.av-row{display:flex;flex-wrap:wrap;gap:6px}
.av-row .chip{border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 12px;min-height:38px;font-weight:700;font-size:13px}
.av-row .chip.on{background:var(--ink);color:var(--paper)}
.av-row .swatch{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--c)}
.av-row .swatch.on{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}

/* 無線の文字送り：まだ出ていない字は場所だけ取って見せない */
.ty-off{visibility:hidden}
/* タイトルのボタン：はじめるは横に広げすぎない。その下に店長の見た目と本編へのリンクを並べる（本人 2026-11-06） */
.t-bot .acts .btn#tStart{flex:0 1 auto;width:min(100%,320px)}
.t-sub{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.t-sub .btn{text-decoration:none}
/* 強化カードを取ったときの帯（本人 2026-11-06「わかりやすくエフェクトに」） */
.upb{position:fixed;left:50%;top:34%;z-index:80;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;background:var(--paper);border:2px solid var(--ink);border-radius:6px;box-shadow:0 4px 0 var(--ink),0 18px 30px -12px rgba(0,0,0,.5);pointer-events:none;transform:translate(-50%,0) scale(.6);opacity:0;animation:upbIn .32s cubic-bezier(.2,1.6,.4,1) forwards;white-space:nowrap}
.upb img{width:40px;height:40px}
.upb b{font-size:18px;font-weight:900;color:var(--ink)}
.upb em{font-style:normal;font-family:var(--f-num);font-weight:700;font-size:14px;color:#fff;background:var(--stamp);padding:2px 8px;border-radius:3px;letter-spacing:.06em}
.upb.out{animation:upbOut .38s ease-in forwards}
@keyframes upbIn{to{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes upbOut{from{transform:translate(-50%,0) scale(1);opacity:1}to{transform:translate(-50%,-24px) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.upb{animation:none;opacity:1;transform:translate(-50%,0)}.upb.out{animation:none;opacity:0}}
.upb.big{top:22%;background:var(--stamp);border-color:#2a0e0a;padding:12px 24px}
.upb.big b{color:#fff;font-family:var(--f-display);font-weight:400;font-size:26px;letter-spacing:.06em}
/* 夜の仲間のひとこと（本編 tool-g-cafeyame の #thought を写した） */
#thought{position:relative;order:-1;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:6px;box-shadow:0 2px 0 var(--ink);font-size:14px;line-height:1.45;pointer-events:none;transition:opacity .4s;z-index:21;line-break:strict}
#thought img{width:30px;height:32px;object-fit:cover;object-position:top;flex:none;border-radius:50%;background:var(--paper-2)}
#thought b{display:inline-block;margin-right:7px;padding:0 8px;border-radius:999px;background:var(--rule);color:#fff;font-size:12px;line-height:1.6;vertical-align:1px}   /* 名前はピルで囲む（本編と同じ・本人 2026-11-09） */
#thought.out{opacity:0}
#thought[hidden]{display:none!important}
@media (max-width:420px){.av-row .swatch{width:31px;height:31px}.av-row{gap:5px}}
.t-sub .t-main{min-height:38px;padding:4px 12px;font-size:12px;line-height:1.35;text-align:center;box-shadow:0 2px 0 var(--ink)}   /* 本編へは少し小さめ・2行（本人 2026-11-06） */

/* ---------- 音（2026-11-06）：開始の扉・タイトルの切りかえ・一時停止の切りかえ。本編 tool-g-cafeyame の .gate / .sound を、この作品の夜の色に合わせて写した ---------- */
#loading.gate{background:rgba(27,36,48,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer;gap:16px;padding:0 20px}
#loading.gate.out{opacity:0;pointer-events:none}
.gate-go{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:6px;box-shadow:0 3px 0 #000;padding:14px 30px 12px;min-width:240px;margin-top:8px}
.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:11px;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:13px;font-weight:700;color:#d6dde8;min-height:44px;padding:0 12px}
.gate-snd{margin:0;font-size:11px;color:#a9b6c8;letter-spacing:.06em}
@keyframes gateBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.gate-go b{animation:none}}
.t-sound{display:flex;gap:6px;flex:none}
.sound{white-space:nowrap;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:6px;height:38px;padding:0 11px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;box-shadow:0 2px 0 var(--ink)}
.sound svg{width:17px;height:17px}
.sound.off{color:var(--ink-mute);background:var(--paper-2)}
.sound:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
@media (max-width:520px){.sound{width:40px;justify-content:center;padding:0}.sound .lb{display:none}}
.snd-row{display:flex;gap:8px}
.snd-row .btn{flex:1 1 0;min-width:0;padding:0 10px;font-size:14px}
.tool[data-undo] .ic{color:var(--rule)}   /* 配置のアンドゥ（2026-11-06） */
/* いま効いている強化の札（2026-11-06 本人「地雷とか電気柵は次回使えるの？」） */
.ups{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 8px}
.ups-h{font-size:11px;font-weight:700;color:var(--ink-soft);margin-right:2px}
.upc{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border:1.5px solid var(--paper-3);border-radius:999px;background:#fff;font-size:11.5px;line-height:1.3;white-space:nowrap}
.upc img{width:20px;height:20px}
.upc b{font-weight:700}
.upc small{color:var(--ink-soft);font-size:11px}
.up-note{margin-top:10px;text-align:center;font-size:12px}
@media (max-width:820px){.ups{gap:3px 4px;margin-bottom:6px}.upc{font-size:11px}.upc small{display:none}}

/* ---------- ロゴ（本人作成 image/lgoo.svg・2026-11-06「アニメーションや配色など適宜活用して仕上げて」） ----------
   看板の文字をロゴの SVG に。上の段（墨）は1文字ずつ落ちてきて、ZOMBIE PANIC!（赤）は1文字ずつ判子のように押す（押すたびに看板が揺れる）。
   押し終えたら、赤い字がときどき1文字ずつ、ゾンビのようにぴくっと動く。差し色の赤もロゴの赤（#c32223）にそろえた */
:root{--stamp:#c32223}
.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}
.t-logo .logo-svg{display:block;width:clamp(250px,70vw,470px);height:auto;stroke:none;overflow:visible;margin:2px auto 0}
.lgk{fill:#333}.lgr{fill:#c32223}
.logo-svg .ch{transform-box:fill-box;transform-origin:50% 60%}
.logo-play .logo-svg .lgk{animation:lgDrop .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 55ms)}
.logo-play .logo-svg .lgr{animation:lgStamp .42s cubic-bezier(.2,1.5,.4,1) both,zTwitch 5.6s linear infinite;animation-delay:calc(.8s + var(--i) * 120ms),calc(4s + var(--i) * 1.31s)}
.logo-play .sign{animation:lgThudZ 1.32s linear 1.02s both}
.logo-play .note{animation-delay:2.45s}
.logo-play .splat .sp{animation-delay:calc(2.75s + var(--d) * 220ms)}
.logo-play .splat .drip{animation-delay:calc(3.15s + var(--d,0) * 220ms)}
@keyframes lgThudZ{0%{transform:none}0.10%{transform:translateY(3px) rotate(-0.5deg)}3.20%{transform:none}9.19%{transform:translateY(3px) rotate(0.4deg)}12.29%{transform:none}18.28%{transform:translateY(3px) rotate(-0.5deg)}21.38%{transform:none}27.37%{transform:translateY(3px) rotate(0.4deg)}30.47%{transform:none}36.46%{transform:translateY(3px) rotate(-0.5deg)}39.56%{transform:none}45.55%{transform:translateY(3px) rotate(0.4deg)}48.65%{transform:none}54.65%{transform:translateY(3px) rotate(-0.5deg)}57.75%{transform:none}63.74%{transform:translateY(3px) rotate(0.4deg)}66.84%{transform:none}72.83%{transform:translateY(3px) rotate(-0.5deg)}75.93%{transform:none}81.92%{transform:translateY(3px) rotate(0.4deg)}85.02%{transform:none}91.01%{transform:translateY(3px) rotate(-0.5deg)}94.11%{transform:none}100%{transform:none}}
@keyframes zTwitch{0%,90%,100%{transform:none}91.5%{transform:rotate(-5deg) translateY(-2%)}93%{transform:rotate(4deg)}94.5%{transform:rotate(-2deg) translateY(1%)}96%{transform:none}}
@media (prefers-reduced-motion:reduce){.logo-play .logo-svg .ch{animation:none!important}}
#loading .ld-logo{width:min(280px,72vw);height:auto;stroke:none;--lg-k:#f1ece2;--lg-r:#e2383a;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
#loading.gate .ld-logo{width:min(320px,78vw)}
/* 血しぶきはロゴの文字に重ねず、看板の角に大きくはみ出させる（右上は右の余白へ、左下は看板の下へ垂れる）。2026-11-06 ロゴを入れたとき */
.t-logo .splat.tr,.t-logo .splat.bl{inset:auto;--sw:clamp(118px,25vw,176px);width:var(--sw);height:calc(var(--sw) * 1.25)}
.t-logo .splat.tr{top:calc(var(--sw) * -.24);right:calc(var(--sw) * -.27)}
.t-logo .splat.bl{bottom:calc(var(--sw) * -.78);left:calc(var(--sw) * -.24)}
/* 紐は画面の上端まで（--hang は ui.js hang が入れる）。支点も上端に置くので、上の端は動かず看板だけが振れる */
.t-logo{transform-origin:50% calc(-1 * var(--hangL, 60px))}
.t-logo .chain{top:calc(-1 * var(--hang, 60px));height:calc(var(--hang, 60px) + 2px)}
@keyframes swing{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.35deg)}}
/* 血しぶきは看板の外へ出さない（本人 2026-11-06「血の飛沫は看板から出るとおかしい」）：看板の縁で切り、角にかかったように。しずくは看板の中を縁まで垂れる */
.t-logo .splats{position:absolute;inset:3px;overflow:hidden;border-radius:3px;pointer-events:none;z-index:1}
.t-logo .splat.tr{top:calc(var(--sw) * -.3);right:calc(var(--sw) * -.32)}
.t-logo .splat.bl{bottom:calc(var(--sw) * -.45);left:calc(var(--sw) * -.2)}
.t-logo .splats .sp{fill:#6f0d09}   /* ロゴの赤（#c32223）と見分けがつくよう濃い血の色に（本人 2026-11-06「もう少し飛沫は目立っていい」） */
/* 読み込み中は書体がまだ届いていないので、端末の書体で出す（届いた瞬間に文字が入れかわってカクッとならないように。本人 2026-11-06）。
   ロゴは SVG なので書体に関係ない。開始の扉（.gate）は書体を待ってから出すので、ゲームの書体のまま */
#loading:not(.gate),#loading:not(.gate) span{font-family:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
/* 風になびいて立ちのぼる火の粉（本人 2026-11-09）。i が上へ、b が横へ揺れ、b::before が明滅する。transform と opacity だけ */
.embers{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;--h:100vh}
.embers i{position:absolute;bottom:-14px;left:var(--x);width:var(--s,3px);height:var(--s,3px);animation:ember-up var(--t,9s) linear infinite;animation-delay:var(--d,0s)}
.embers b{position:absolute;inset:0;animation:ember-sway var(--sw,2s) ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.embers b::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:radial-gradient(circle,#fffbe6 0 16%,#ffd066 28%,#ff9a3c 42%,rgba(255,110,40,.45) 60%,rgba(255,90,30,0) 100%);animation:ember-flick var(--f,1.2s) ease-in-out infinite alternate}
@keyframes ember-up{0%{transform:translate(0,0);opacity:0}8%{opacity:1}70%{opacity:.9}100%{transform:translate(var(--w,120px),calc(var(--h) * var(--r,1) * -1));opacity:0}}
@keyframes ember-sway{from{transform:translateX(calc(var(--a,14px) * -1))}to{transform:translateX(var(--a,14px))}}
@keyframes ember-flick{from{opacity:1;transform:scale(1)}to{opacity:.55;transform:scale(.7)}}
@media (max-width:560px){.embers i:nth-child(n+15){display:none}}
@media (prefers-reduced-motion:reduce){.embers{display:none}}
/* TAP TO START は本編と同じ Space Mono の太字（本人 2026-11-09「tap to startは、cafeと同じフォントで」）。上の #loading b（読み込み画面の見出し用）が勝って Dela Gothic One になっていた */
#loading .gate-go b{font-family:var(--f-num);font-weight:700}
/* 夜明けまでのゲージ（2026-11-09 本人「夜明けまでのグラフみたいな視覚的要素が上にあってもいい」）：夜の帯（.h-shop）の1段目 */
.h-shop{flex-wrap:wrap;row-gap:5px}
.h-dawn{flex:0 0 100%;display:flex;align-items:center;gap:10px;min-width:0}
.hd-track{position:relative;flex:1;height:8px;border-radius:5px;background:linear-gradient(90deg,#26304a 0%,#343a66 55%,#7a4a72 80%,#d9744a 94%,#f2b45a 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hd-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:rgba(10,14,22,.55);pointer-events:none}   /* 過ぎた夜は暗く沈める */
.hd-track s{position:absolute;top:-2px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:rgba(230,236,245,.55)}
.hd-track s.big{background:#ff6a4a;width:3px;margin-left:-1.5px;top:-3px;height:14px;box-shadow:0 0 6px rgba(255,106,74,.7)}
.hd-track s.done{opacity:.22}
.hd-moon{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 65% 40%,transparent 0 5px,#f4ead0 5.5px);filter:drop-shadow(0 0 4px rgba(244,234,208,.8));transition:left .25s linear}   /* 三日月 */
.hd-sun{position:absolute;right:-6px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#ffb94a;box-shadow:0 0 0 3px rgba(255,185,74,.25),0 0 12px 3px rgba(255,170,60,.6)}
.h-dawn.near .hd-sun{animation:sunPulse 1.6s ease-in-out infinite}
@keyframes sunPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,185,74,.25),0 0 12px 3px rgba(255,170,60,.6)}50%{box-shadow:0 0 0 5px rgba(255,185,74,.3),0 0 20px 6px rgba(255,170,60,.85)}}
.hd-lbl{display:flex;align-items:baseline;gap:5px;white-space:nowrap;font-size:11px;color:#c9d2e0}
.hd-lbl b{font-size:13px;color:#ffd27a;min-width:0}
@media (max-width:520px){.hd-lbl .k{display:none}.h-dawn{gap:8px}}
@media (prefers-reduced-motion:reduce){.hd-moon{transition:none}.h-dawn.near .hd-sun{animation:none}}
/* 読み込み・開始の扉のロゴを少し小さく（本人 2026-11-09「初期のロード画面のロゴはもう少しだけ小さく」） */
#loading .ld-logo{width:min(250px,66vw)}
#loading.gate .ld-logo{width:min(290px,72vw)}