:root{
  --amix-orient-bg:rgba(18,11,6,.95); --amix-orient-fg:#fff2d6; --shoyu:#1d110a; --broth:#e08a24; --yellow:#ffc21a; --red:#d8262f; --cream:#fff2d6; --steel:#2a343d; --leaf:#86d94c; --sky:#7fd0ff;
  --disp:'Dela Gothic One','Hiragino Kaku Gothic StdN','Yu Gothic','Meiryo',sans-serif;
  --body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif;
  /* iOS 26 の Safari では、画面に固定した要素の入れ物が下のツールバーの裏まで伸びることがある。その差（PC・古い iOS では 0）だけ下端を上げる。手本は tool-g-extant */
  --tb:max(0px,calc(100% - 100svh));
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{font-variant-emoji:text;height:100%;overflow:hidden;background:#120b06;color:var(--cream);font-family:var(--body);font-weight:700;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#gl{position:fixed;left:0;top:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
[hidden]{display:none!important}
.ol{text-shadow:-2px -2px 0 #140b05,2px -2px 0 #140b05,-2px 2px 0 #140b05,2px 2px 0 #140b05,0 3px 0 #140b05,3px 0 0 #140b05,-3px 0 0 #140b05,0 -3px 0 #140b05}

/* ---------- boot ---------- */
/* 読み込み画面：ロゴを中心に、上下に工事のトラロープの帯、ロゴの後ろに大鍋の湯気。飾りは大きなものだけ。
   ゲージは読み込みの段階で進む（js の bootStep）。終わったら「タップして はじめる」 */
#boot{position:fixed;inset:0;bottom:var(--tb);display:grid;place-items:center;z-index:50;font-family:var(--disp);font-size:18px;letter-spacing:.1em;text-align:center;padding:24px;overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 50% 52%,#4a2610 0%,#24120a 48%,#0d0704 100%)}
#boot .tape{position:absolute;left:-10%;width:120%;height:clamp(22px,4vh,38px);transform:rotate(-4deg);
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 24px,#140b05 24px 48px);background-size:67.88px 100%;box-shadow:0 0 0 3px #140b05,0 10px 28px rgba(0,0,0,.55);animation:tapeL 2.6s linear infinite}
#boot .t1{top:clamp(26px,9vh,90px)}
#boot .t2{bottom:clamp(26px,9vh,90px);animation-direction:reverse}
@keyframes tapeL{to{background-position:-67.88px 0}}
#boot .steam{position:absolute;left:50%;top:50%;width:0;height:0}
#boot .steam i{position:absolute;width:min(62vmin,520px);height:min(62vmin,520px);margin:-31vmin 0 0 -31vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,214,.34) 0%,rgba(255,236,214,.1) 45%,transparent 70%);filter:blur(8px);opacity:0;animation:steamUp 7.5s ease-in infinite}
#boot .steam i:nth-child(2){left:-16vmin;animation-delay:2.5s}
#boot .steam i:nth-child(3){left:14vmin;animation-delay:5s}
@keyframes steamUp{0%{transform:translateY(22vh) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-34vh) scale(1.5);opacity:0}}
#boot .bootIn{position:relative;z-index:1}
#bootLogo{display:block;width:min(80vw,540px);height:auto;margin:0 auto clamp(18px,3.4vh,30px);filter:drop-shadow(5px 6px 0 var(--red)) drop-shadow(2px 2px 0 #140b05);animation:bootBob 2.8s ease-in-out infinite}
@keyframes bootBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(-3deg)}}
#bootGauge{width:min(70vw,340px);height:16px;margin:0 auto 12px;border:2px solid var(--yellow);background:#140b05;box-shadow:0 0 0 2px #140b05;overflow:hidden;transform:skewX(-12deg);transition:opacity .3s,height .3s,margin .3s}
#bootBar{display:block;height:100%;width:4%;background:repeating-linear-gradient(-45deg,var(--yellow) 0 10px,#d99a00 10px 20px);background-size:28.28px 100%;transition:width .45s cubic-bezier(.3,.7,.3,1);animation:tora .8s linear infinite}
#bootMsg{display:block;font-family:var(--body);font-weight:900;font-size:15px;letter-spacing:.14em;color:var(--cream);text-shadow:0 2px 0 #140b05}
#boot.ready #bootGauge{opacity:0;height:0;margin:0 auto;border-width:0;box-shadow:none}
#boot.ready #bootMsg{animation:lgUp .4s ease-out both}
@keyframes tora{to{background-position:-28.28px 0}}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;top:0;pointer-events:none;z-index:10}
.pn{position:absolute;background:linear-gradient(180deg,rgba(40,24,13,.9),rgba(18,10,6,.9));border:2px solid var(--yellow);box-shadow:0 0 0 2px #140b05,4px 5px 0 rgba(0,0,0,.45);border-radius:3px;transform:skewX(-7deg)}
#hTime{top:calc(10px + var(--sat));left:calc(18px + var(--sal));padding:4px 16px 6px 12px;display:flex;align-items:baseline;gap:10px}
#phase{font-family:var(--disp);font-size:14px;color:#140b05;background:var(--yellow);padding:1px 8px 2px}
#clock{font-family:var(--disp);font-weight:400;font-size:32px;line-height:1;letter-spacing:.02em}
#clock.hurry{color:#ff5a4a;animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
#hPeople{top:calc(10px + var(--sat));left:50%;transform:translateX(-50%) skewX(-7deg);padding:3px 18px 5px;text-align:center;white-space:nowrap}
#hPeople small{display:block;font-size:11px;color:var(--yellow);line-height:1.2}
#people{font-family:var(--disp);font-size:30px;line-height:1.05;letter-spacing:.02em;display:inline-block}
#people.drop{color:#ff5a4a;animation:shakeX .5s}
#people.up{color:var(--leaf)}
#hPeople em{font-style:normal;font-size:14px;margin-left:3px}
@keyframes shakeX{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
#hObj{top:calc(70px + var(--sat));left:50%;transform:translateX(-50%) skewX(-7deg);padding:5px 14px 6px 8px;display:flex;gap:9px;align-items:center;max-width:min(52vw,600px);font-size:14px;line-height:1.35}
#hObj i{font-style:normal;font-family:var(--disp);font-size:12px;background:var(--red);color:#fff;padding:2px 7px;flex:none}
#hObj{transition:opacity .35s}#hObj.dim{opacity:0} /* 指示は変わったときと迷ったときだけ */
#hIntr{bottom:12px;left:50%;transform:translateX(-50%) skewX(-7deg);width:min(340px,62vw);padding:5px 12px 8px;font-size:13px;text-align:center;border-color:var(--red)}
#hIntr .bar{height:12px;margin-top:4px}#hIntr .bar>b{background:var(--leaf);transition:width .1s linear}
#hPot{top:calc(10px + var(--sat));right:calc(14px + var(--sar));width:min(290px,32vw);padding:12px 13px 10px;transform:none} /* 読む表なので斜めにしない */
#hPot h3{font-family:var(--disp);font-weight:400;font-size:13px;color:var(--yellow);display:flex;justify-content:space-between;margin-bottom:4px}
.row{display:grid;grid-template-columns:6.4em 1fr 34px;gap:6px;align-items:center;font-size:12.5px;height:19px}
.row.next{color:var(--yellow)}
.row.srv{grid-template-columns:3.6em 1fr 5.4em}.row.warn .nm,.row.warn .v{color:#ff6a55;animation:blink .6s steps(2) infinite}
#phase.intr{background:var(--red);color:#fff}
.row.ok .nm::after{content:'';display:inline-block;width:.42em;height:.72em;margin-left:.45em;border:solid var(--leaf);border-width:0 .2em .2em 0;transform:rotate(45deg) translateY(-.12em)}
.bar{position:relative;height:10px;background:#0b0603;border:1px solid #5a4330;overflow:hidden}
.bar>b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--broth)}
.bar>u{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;left:66.6%}
.bar>s{position:absolute;top:0;bottom:0;background:rgba(134,217,76,.35);border-left:1px solid var(--leaf);border-right:1px solid var(--leaf)}
.bar>em{position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;box-shadow:0 0 0 1px #000;left:0}
.dn{height:10px;background:#0b0603;border:1px solid #5a4330;position:relative;overflow:hidden}
.dn>b{position:absolute;left:0;top:0;bottom:0;width:0;background:#b9b09a}
.dn.done>b{background:var(--leaf)} .dn.over>b{background:var(--red)}
.sep{height:1px;background:#5a4330;margin:5px 0}
.row .v{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
#radar{position:absolute;left:calc(14px + var(--sal));bottom:18px;width:124px;height:124px}
#sideMon{position:absolute;right:calc(14px + var(--sar));bottom:18px;width:250px;height:150px;border:2px solid var(--yellow);box-shadow:0 0 0 2px #140b05;border-radius:3px;background:rgba(14,22,20,.86)}
#labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lbl{position:absolute;left:0;top:0;background:#fffaf0;color:#140b05;border:2.5px solid #140b05;border-radius:8px;padding:2px 10px 3px;font-weight:900;font-size:16px;line-height:1.2;white-space:nowrap;text-align:center;will-change:transform,opacity;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.lbl .chip{display:inline-block;width:.78em;height:.78em;border-radius:50%;border:2px solid #140b05;margin-right:.38em;vertical-align:-.06em}.lbl b{font-weight:900}.lbl span{font-size:.78em}.lbl em{font-style:normal;font-size:.72em;background:#140b05;color:var(--yellow);border-radius:4px;padding:0 4px}
.lbl small{display:block;font-size:10.5px;color:#a3361b;line-height:1.1}
.lbl .fb{display:block;height:7px;background:#140b05;border:1px solid #140b05;margin-top:3px;border-radius:3px;overflow:hidden}.lbl .fb b{display:block;height:100%}
.lbl.alert{border-color:var(--red);animation:blink .6s steps(2) infinite}.lbl.done{background:#e6ffd6}
#edge{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;will-change:transform}
#edgeArr{width:30px;height:30px;fill:var(--yellow);stroke:#140b05;stroke-width:1.1;stroke-linejoin:round;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
#edgeTxt{font-weight:900;font-size:13px;background:#fffaf0;color:#140b05;border:2px solid #140b05;border-radius:6px;padding:1px 7px;white-space:nowrap}
#toasts{position:absolute;left:50%;top:30%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:94vw;max-width:94vw;padding:6px 0}
.toast{font-family:var(--disp);font-size:clamp(16px,2.4vw,24px);color:#fff;animation:toast 2.3s ease-out forwards;overflow:hidden;padding:5px 12px;background:rgba(20,11,5,.42);border-radius:8px;white-space:normal;text-align:center;max-width:92vw;line-height:1.25;text-wrap:balance}
.toast.good{color:var(--leaf)} .toast.bad{color:#ff6a55} .toast.big{font-size:clamp(26px,4.6vw,50px);color:var(--yellow);animation-duration:3s}
.toast.gan{font-size:clamp(30px,5vw,56px);color:#fff;transform:rotate(-6deg);animation-duration:.9s}
/* その場で出て、その場で消える。上へ流さない(流すと欠けて読みにくい)。消えたあと行の高さをたたんで、残りが跳ねないようにする */
@keyframes toast{0%{transform:scale(.86);opacity:0;max-height:7em}9%{transform:none;opacity:1}80%{opacity:1;max-height:7em}91%{opacity:0;max-height:7em;padding-top:5px;padding-bottom:5px}100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}}
#sysBtns{position:absolute;left:calc(18px + var(--sal));top:calc(62px + var(--sat));display:flex;gap:6px;pointer-events:auto}
.sys{min-width:38px;height:32px;padding:0 8px;background:rgba(24,14,8,.85);border:2px solid var(--yellow);box-shadow:0 0 0 2px #140b05;font-size:13px;border-radius:3px;transform:skewX(-7deg)}
.sys.off{opacity:.5}
/* タイトルの音ボタン（主操作の「出動」より控えめに。OFF は線を消して薄く） */
#tSound,#bSound{position:absolute;right:calc(14px + var(--sar));top:calc(12px + var(--sat));display:flex;align-items:center;gap:5px;height:34px;min-width:0;padding:0 11px 0 10px;color:var(--cream);font-family:var(--body);font-weight:900;font-size:13px;z-index:2}
#tSound .ic,#bSound .ic{width:16px;height:16px;transform:none}
#tSound.off .w,#bSound.off .w{display:none}
#bSound[hidden]{display:none}
#tSound:focus-visible,#pSound:focus-visible,#pVoice:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* 記号は端末によって絵文字に化けるので、矢印類はすべてSVGで描く */
.ic{width:1em;height:1em;fill:currentColor;display:block;margin:0 auto;pointer-events:none}.ic-d{transform:rotate(180deg)}.ic-l{transform:rotate(-90deg)}.ic-r{transform:rotate(90deg)}
.cb .ic{width:.95em;height:.95em}.grp.h .cb .ic{width:1.3em;height:1.3em}.nav .ic{width:.9em;height:.9em}
/* ---------- 操作盤 ---------- */
#panel,#panel *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
#panel{position:fixed;left:0;right:0;bottom:var(--tb);z-index:12;display:grid;grid-template-columns:1.7fr 1.9fr 1fr 1fr 1fr;gap:6px;
  padding:9px calc(10px + var(--sar)) calc(16px + var(--sab)) calc(10px + var(--sal));touch-action:none; /* 下はボタンの厚み(影5px)ぶん余白を取る */
  background:linear-gradient(180deg,#3b444c,#252c33 30%,#1a2026);border-top:3px solid #0d1114;box-shadow:0 -1px 0 #56616b inset}
#panel::before{content:'';position:absolute;left:0;right:0;top:-9px;height:6px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,#15110c 12px 24px);border-top:2px solid #0d1114}
.grp{display:grid;grid-template-rows:auto 1fr 1fr;gap:5px;min-width:0}
.grp h5{font-family:var(--disp);font-weight:400;font-size:12px;text-align:center;color:#fff;text-shadow:0 1px 0 #000;white-space:nowrap;letter-spacing:.04em;pointer-events:none}
.grp.drv h5{color:var(--yellow)}
.grp.drv{grid-template-rows:auto 1fr}
#panel.kids .pro,#panel:not(.kids) .kid{display:none}
#panel.kids{grid-template-columns:1.6fr 1.6fr 1.5fr}
.cb.ks{background:linear-gradient(180deg,#f6c636,#d99c0b);box-shadow:0 4px 0 #6d4d04,0 5px 0 #0b0e11;font-size:19px}.cb.kd{background:linear-gradient(180deg,#ffb27a,#ff7a3a);box-shadow:0 4px 0 #8a3a10,0 5px 0 #0b0e11;font-size:19px}
#drive,#armpad{position:relative;border-radius:14px;border:2px solid #0b0e11;background:radial-gradient(circle at 50% 50%,#2c343c 0 38%,#12171b 39% 41%,#222a31 42%);box-shadow:0 0 0 2px #56616b inset,0 4px 0 #0b0e11;touch-action:none;cursor:pointer;min-height:100px}
#drive .da,#armpad .da{position:absolute;transform:translate(-50%,0);font-size:12px;line-height:0;color:var(--yellow);pointer-events:none;font-weight:400}
#drive .da[style*="top:50%"],#armpad .da[style*="top:50%"]{transform:translate(0,-50%)}
#drive i,#armpad i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:linear-gradient(180deg,#f6c636,#d99c0b);border:2px solid #0b0e11;box-shadow:0 4px 0 #6d4d04;pointer-events:none}
#drive.on i,#armpad.on i{filter:brightness(1.2)}
#drive kbd,#armpad kbd{position:absolute;right:6px;bottom:5px;font-family:var(--body);font-weight:900;font-size:10px;background:#17120a;color:#fff;border-radius:3px;padding:1px 4px;pointer-events:none}
body.touch #drive kbd,body.touch #armpad kbd{display:none}
.grp.h{grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr}
.grp.h h5{grid-column:1/3}
.cb{position:relative;min-height:52px;border-radius:7px;border:2px solid #0b0e11;background:linear-gradient(180deg,#f6c636,#d99c0b);color:#17120a;font-family:var(--disp);font-size:17px;line-height:1;
  box-shadow:0 4px 0 #6d4d04,0 5px 0 #0b0e11;display:grid;place-items:center;pointer-events:none}
.cb{background:linear-gradient(180deg,#e9edf0,#aeb7bf);box-shadow:0 4px 0 #59636c,0 5px 0 #0b0e11}
.cb{text-align:center}.cb>span{display:block;width:100%;text-align:center}
.cb small{font-size:10.5px;display:block;text-align:center;margin-top:3px;font-family:var(--body);font-weight:900}
.cb kbd{position:absolute;right:5px;top:4px;font-family:var(--body);font-weight:900;font-size:10px;background:#17120a;color:#fff;border-radius:3px;padding:1px 4px}
body.touch .cb kbd{display:none}
.cb.on{transform:translateY(4px);box-shadow:0 0 0 #000,0 1px 0 #0b0e11;filter:brightness(1.25)}
.cb.on{background:linear-gradient(180deg,#ffb27a,#ff7a3a)}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;bottom:var(--tb);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(16px + var(--sat)) 18px calc(16px + var(--sab));text-align:center}
#sTitle{justify-content:space-between;background:linear-gradient(180deg,rgba(18,10,6,.55),rgba(18,10,6,0) 38%,rgba(18,10,6,0) 60%,rgba(18,10,6,.8))}
#logo{margin-top:4vh;transform:rotate(-3deg)}
/* 上の小見出しは、黄黒のトラロープで挟んだ札。左から張られる */
#logo small{display:inline-block;font-family:var(--disp);font-size:clamp(13px,2vw,20px);color:#fff;letter-spacing:.3em;margin-bottom:4px;padding:3px 10px 3px 14px;background:#140b05;
  border-block:5px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--yellow) 0 7px,#140b05 7px 14px) 5;animation:lgTape .45s cubic-bezier(.3,.7,.3,1) .05s both}
/* ロゴは image/logo.svg を1文字ずつ動かせる形に組み直して埋め込んだもの（js/なし・CSSのみ）。縁取りが枠の外へ出るので viewBox を広げてある */
#logo h1{line-height:0;font-size:0}
#logo .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#logoSvg{--sh:clamp(3px,.8vw,7px);display:block;width:min(88vw,800px);height:auto;margin:0 auto;overflow:visible;filter:drop-shadow(var(--sh) calc(var(--sh)*1.15) 0 var(--red)) drop-shadow(2px 2px 0 #140b05)}
#logoSvg path{transform-box:fill-box}
/* 漢字は大鍋へ具材を落とすように1字ずつドスンと入り、そのあとは煮えているように小さく上下する */
#logoSvg .k{transform-origin:50% 100%;animation:lgDrop .62s cubic-bezier(.3,0,.5,1) calc(.18s + var(--i)*.1s) both,lgSimmer 2.8s ease-in-out calc(1.6s + var(--i)*.22s) infinite}
/* 英字は少し遅れてポンと出る */
#logoSvg .e{transform-origin:50% 60%;animation:lgPop .42s cubic-bezier(.2,1.6,.4,1) calc(.82s + var(--i)*.045s) both}
@keyframes lgDrop{0%{transform:translateY(-150%) rotate(-9deg);opacity:0}45%{opacity:1}62%{transform:translateY(5%) scale(1.07,.86)}80%{transform:translateY(-4%) scale(.97,1.04)}100%{transform:none}}
@keyframes lgSimmer{0%,100%{transform:none}50%{transform:translateY(-3.5%)}}
@keyframes lgPop{0%{transform:scale(0) rotate(-18deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes lgTape{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
#logo p span{display:inline-block}
#logo p{font-size:clamp(13px,1.9vw,19px);margin-top:12px;background:#140b05;display:inline-block;padding:3px 14px;border-left:10px solid var(--yellow);border-right:10px solid var(--yellow);animation:lgUp .4s ease-out 1.25s both}
@media (max-width:520px){#logo p{font-size:max(12px,3.4vw)}}
@keyframes lgUp{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
/* ロゴの下を流れる、場面の写真の帯（中身は ogp/ の候補 01〜12 を縮めた image/strip/）。画面の端までロゴと同じ角度で渡し、両端はぼかす */
#strip{width:124vw;margin:clamp(10px,2.2vh,20px) calc(50% - 62vw) 0;overflow:hidden;padding:5px 0;background:#140b05;border-block:3px solid var(--yellow);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 22%,#000 78%,transparent 92%);mask-image:linear-gradient(90deg,transparent 8%,#000 22%,#000 78%,transparent 92%);animation:lgUp .5s ease-out 1.4s both}
#strip .track{display:flex;gap:5px;padding-right:5px;width:max-content;animation:lgMarq 70s linear infinite}
#strip img{display:block;height:clamp(52px,9vh,88px);width:auto;aspect-ratio:20/13;border-radius:2px}
@keyframes lgMarq{to{transform:translateX(-50%)}}
/* タイトルの主操作は「出動」。黄色の大きなボタンでゆっくり脈打つ。「遊び方を見る」は下線の控えめなリンクにする（2026-10-29 本人：遊び方のほうが目立っていた） */
#startBtn{display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-size:clamp(22px,3.2vw,32px);letter-spacing:.12em;background:var(--yellow);color:#140b05;padding:12px 46px 10px;border:3px solid #140b05;border-radius:3px;
  box-shadow:0 0 0 2px var(--yellow),0 6px 0 2px #7a5606,0 10px 24px rgba(0,0,0,.45);margin-bottom:2vh;animation:goPulse 1.6s ease-in-out infinite;pointer-events:auto}
#startBtn small{font-size:12px;letter-spacing:.08em;font-weight:700;opacity:.75}
#startBtn:active{transform:translateY(4px);box-shadow:0 0 0 2px var(--yellow),0 2px 0 2px #7a5606}
@keyframes goPulse{0%,100%{transform:none}50%{transform:scale(1.045)}}
#demoBtn{background:none;border:0;color:var(--cream);font-family:var(--body);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:4px;padding:8px 12px;margin:0 0 2.2vh;opacity:.85}
#demoBtn:hover{opacity:1}
#startBtn:focus-visible,#demoBtn:focus-visible,#bootGo:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* 読み込みが終わったら「タップして はじめる」。このタップで音を作り、タイトルの曲を流す */
#boot.ready{cursor:pointer}
#boot.ready i{display:none}
#bootGo{display:block;margin:14px auto 10px;font-family:var(--body);font-weight:900;font-size:clamp(20px,3vw,28px);letter-spacing:.14em;background:var(--yellow);color:#140b05;padding:14px 34px;border:3px solid #140b05;border-radius:3px;box-shadow:0 0 0 2px var(--yellow),0 6px 0 2px #7a5606;animation:goPulse 1.6s ease-in-out infinite}
#bootGo[hidden],#bootNote[hidden]{display:none}
#boot.ready #bootGo{animation:bootPop .35s cubic-bezier(.2,1.6,.4,1) both,goPulse 1.6s ease-in-out .5s infinite}
@keyframes bootPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
#bootNote{display:block;margin-top:14px;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.04em;opacity:.7}
#credit{font-size:11px;font-weight:500;line-height:1.7;opacity:.85;max-width:94vw;margin:0 auto}
#credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#credit .cr-group{white-space:nowrap}
#credit .cr-note{display:block;font-size:10.5px;opacity:.8}

#sSelect{justify-content:flex-end;background:linear-gradient(180deg,rgba(18,10,6,.5),rgba(18,10,6,0) 22%,rgba(18,10,6,0) 46%,rgba(18,10,6,.9) 80%)}
#selHead{position:absolute;top:calc(14px + var(--sat));left:0;right:0;font-family:var(--disp);font-size:clamp(18px,3vw,30px)}
#selCard{width:min(720px,100%);display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;text-align:left;background:rgba(18,10,6,.86);border:2px solid var(--yellow);box-shadow:0 0 0 2px #140b05;padding:12px 18px 14px;border-radius:3px}
#selName{font-family:var(--disp);font-weight:400;font-size:clamp(22px,3.6vw,38px);color:var(--yellow);line-height:1.1}
#selCls{font-size:13px;color:#fff;background:var(--red);display:inline-block;padding:1px 8px;margin-top:4px}
#selDesc{font-size:13.5px;line-height:1.6;font-weight:500;margin-top:8px}
#selStats{display:grid;gap:5px;align-content:center}
.st{display:grid;grid-template-columns:4.6em 1fr;gap:8px;align-items:center;font-size:12.5px}
.pips{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;height:12px;transform:skewX(-14deg)}
.pips i{background:#3a2a1c} .pips i.on{background:var(--yellow)}
#selNav{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px;padding-bottom:8px;pointer-events:auto}
#selBtns{display:flex;gap:12px;align-items:center;justify-content:center}
.nav{font-family:var(--disp);font-size:24px;width:56px;height:52px;background:#140b05;border:2px solid var(--yellow);border-radius:3px}
.go{font-family:var(--disp);font-size:clamp(17px,2.3vw,22px);background:var(--yellow);color:#140b05;padding:12px 28px;border:3px solid #140b05;border-radius:3px;
  box-shadow:0 0 0 2px var(--yellow),0 6px 0 2px #7a5606} /* 黄色のフチ → その下に厚み。暗い背景でも下辺が消えない */
.go:active{transform:translateY(4px);box-shadow:0 0 0 2px var(--yellow),0 2px 0 2px #7a5606}
.go.sub{background:#140b05;color:var(--cream)}

#sBrief,#sResult,#sPause,#sCert,#sDemoEnd{background:rgba(18,10,6,.8)}
#hud.demo #hPot,#hud.demo #hPeople,#hud.demo #radar,#hud.demo #hTime,#hud.demo #sysBtns,#hud.demo #edge{display:none!important}
#hud.demo #hObj{top:calc(10px + var(--sat));bottom:auto;max-width:min(70vw,760px);font-size:16px}
@media (orientation:portrait){#hud.demo #hIntr{bottom:14px;width:min(190px,46vw)}#hud.demo #hObj{top:calc(56px + var(--sat));bottom:auto;left:calc(8px + var(--sal));right:auto;max-width:94vw;font-size:14px}}
@media (max-width:900px),(max-height:560px){#hud.demo #hObj{font-size:13px}}
.sheet.cert{background:#fff8e8;color:#1d110a;border:6px double #1d110a;box-shadow:0 0 0 3px var(--yellow),8px 10px 0 rgba(0,0,0,.5);text-align:center;position:relative;width:min(640px,100%)}
.certTitle{font-family:var(--disp)!important;font-weight:400!important;font-size:clamp(28px,6vw,60px)!important;color:#1d110a!important;letter-spacing:.12em;margin:6px 96px 10px 0;white-space:nowrap}
.certBody{font-size:15px;line-height:1.9;font-weight:700}.certBody b{font-size:1.7em;font-weight:900;margin-right:.5em}#certCls{font-size:13px;background:#1d110a;color:#fff8e8;padding:1px 8px}
#certInfo{font-size:13px;margin-top:10px;font-weight:700}#certDate{font-size:12.5px;margin-top:4px;font-weight:500}
#certStamp{position:absolute;right:18px;top:14px;width:92px;height:92px;border-radius:50%;border:5px solid var(--red);color:var(--red);font-family:var(--disp);font-weight:400;font-size:30px;display:grid;place-items:center;transform:rotate(-14deg);opacity:.9}
.cert .go.sub{background:#1d110a}
.row.les{grid-template-columns:1fr;height:auto;min-height:17px}.row.les.ok{color:var(--leaf)}
.sheet{width:min(760px,100%);max-height:100%;overflow:auto;background:linear-gradient(180deg,#2b1a0e,#170d07);border:2px solid var(--yellow);box-shadow:0 0 0 2px #140b05,8px 10px 0 rgba(0,0,0,.5);padding:16px 20px 18px;text-align:left;border-radius:3px;touch-action:pan-y}
.sheet h2{font-family:var(--disp);font-weight:400;font-size:clamp(20px,3vw,30px);color:var(--yellow);margin-bottom:8px}
.sheet h2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sheet h2 span{font-size:.5em;color:var(--cream);font-weight:900;font-family:var(--body)}
.note{font-size:12.5px;line-height:1.7;font-weight:500;margin-top:6px}
#briefKids{font-size:14px;line-height:1.75;font-weight:700}#briefKids .steps{font-size:14px}
.cols{display:grid;grid-template-columns:1.15fr 1fr;gap:18px}
.steps{list-style:none;counter-reset:s;display:grid;gap:6px;font-size:13.5px;line-height:1.5;font-weight:500}
.steps li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:8px}
.steps li::before{content:counter(s);font-family:var(--disp);background:var(--yellow);color:#140b05;width:24px;height:24px;display:grid;place-items:center;font-size:13px}
.steps b{color:var(--yellow);font-weight:900}
.keys{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13px;align-items:center;font-weight:500}
.keys kbd{font-family:var(--body);font-weight:900;font-size:12px;background:#140b05;border:1px solid var(--yellow);padding:2px 7px;border-radius:3px;white-space:nowrap}
.sheet h4{font-size:12px;color:var(--yellow);margin:0 0 6px;border-bottom:1px solid #5a4330;padding-bottom:3px}
.center{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
/* 一時停止：見出しとボタン群、ボタン群と枠の下に余白。ボタンの幅をそろえる */
#sPause .sheet{padding:22px 24px 26px}
#sPause h2{justify-content:center;margin-bottom:0}
#sPause .center{gap:12px;margin:20px 0 4px}
#sPause .center .go{width:min(280px,100%)}

#rank{font-family:var(--disp);font-weight:400;font-size:clamp(70px,13vw,130px);line-height:.9;color:var(--yellow);float:right;margin:0 4px 0 16px;transform:rotate(8deg);
  text-shadow:-4px -4px 0 #140b05,4px -4px 0 #140b05,-4px 4px 0 #140b05,4px 4px 0 #140b05,8px 9px 0 var(--red)}
#rankName{font-family:var(--disp);font-size:clamp(16px,2.4vw,22px);margin-bottom:8px}
#resTbl{width:100%;border-collapse:collapse;font-size:13.5px;font-weight:500;clear:both}
#resTbl td{padding:4px 2px;border-bottom:1px solid #4a3625}
#resTbl td:last-child{text-align:right;font-weight:900;font-variant-numeric:tabular-nums}
#resTbl tr.total td{font-family:var(--disp);font-size:20px;color:var(--yellow);border-bottom:0;padding-top:8px}
#resMsg{font-size:13.5px;line-height:1.6;font-weight:500;margin:4px 0 10px}

/* タイトル用の書体は大きな見出しだけ。小さめの文字は読みやすい太ゴシックで組む */
#boot,#phase,#clock,#people,#hObj i,#hPot h3,.toast,.grp h5,.cb,#logo small,#startBtn,#selHead,#selName,.nav,.go,.sheet h2,.steps li::before,#rankName,#resTbl tr.total td{font-family:var(--body);font-weight:900}
.toast.gan{font-family:var(--disp);font-weight:400}
.toast.se{background:none;padding:0} /* 擬音は下地なしで、そのまま画面に出す */ /* 効果音の「ガンッ！」だけタイトル書体。読ませるメッセージは大きくても太ゴシック */
.toast.big{letter-spacing:.02em}
#logo small{letter-spacing:.22em} #clock,#people{letter-spacing:0}
@media (max-width:900px),(max-height:560px){
  #hObj{max-width:44vw;font-size:11.5px;line-height:1.3;padding:3px 9px 4px 6px;top:calc(50px + var(--sat))}
  #hObj i{font-size:10px;padding:1px 5px}
  #hPeople{top:calc(6px + var(--sat));padding:2px 12px 3px} #hPeople small{font-size:9.5px} #people{font-size:21px} #hPeople em{font-size:11px}
  #hPot{width:196px;padding:7px 8px 6px;top:calc(6px + var(--sat));right:calc(8px + var(--sar))}
  #hPot h3{font-size:10.5px;margin-bottom:2px}
  .row{height:13.5px;font-size:10px;grid-template-columns:6em 1fr 22px;gap:4px}
  .bar,.dn{height:7px} .sep{margin:3px 0}
  #hTime{top:calc(6px + var(--sat));left:calc(10px + var(--sal));padding:2px 10px 3px 7px} #clock{font-size:21px} #phase{font-size:11px}
  #sysBtns{left:calc(10px + var(--sal));top:calc(44px + var(--sat))} .sys{min-width:32px;height:26px;font-size:11px;padding:0 6px}
  #radar{width:84px;height:84px;bottom:12px;left:calc(8px + var(--sal))}
  #sideMon{width:168px;height:94px;bottom:12px;right:calc(8px + var(--sar))}
  #panel{gap:5px;padding-top:7px;padding-bottom:calc(13px + var(--sab))} .grp{gap:4px} .grp h5{font-size:10.5px} #drive,#armpad{min-height:86px} .cb{min-height:44px;font-size:15px} .cb small{font-size:9.5px;margin-top:2px}
  .cols{grid-template-columns:1fr} #selCard{grid-template-columns:1fr;gap:8px;padding:9px 14px 10px}
  #selDesc{margin-top:4px;font-size:12px;line-height:1.5} .sheet{padding:12px 14px 14px}
  .steps{font-size:12.5px;gap:4px} .toast{font-size:14px} .toast.big{font-size:20px} .toast.gan{font-size:26px}
  .lbl{font-size:12.5px;padding:1px 7px 2px;border-width:2px}.lbl small{font-size:9px}
  #hIntr{bottom:6px;width:min(260px,44vw);font-size:11px;padding:3px 9px 6px} #hIntr .bar{height:9px;margin-top:3px}
  #hTime{max-width:46vw} #phase{white-space:nowrap}
}
@media (max-height:560px) and (orientation:landscape){
  #selCard{grid-template-columns:1.3fr 1fr;width:min(640px,100%)} #selNav{margin-top:8px} .nav{height:44px} .go{padding:9px 22px}
  .cols{grid-template-columns:1.15fr 1fr}
}
@media (orientation:portrait){
  #selBtns{flex-direction:column;align-items:stretch;gap:14px} #selBtns .go{padding:11px 16px} .nav{align-self:stretch;height:auto}
  #hPeople{left:auto;right:calc(8px + var(--sar));transform:skewX(-7deg)}
  #hIntr{top:auto;bottom:calc(176px);left:calc(8px + var(--sal));transform:skewX(-7deg);width:min(300px,80vw)}
  .toast.big{font-size:19px}
  #hPot{top:calc(58px + var(--sat))} /* 上の人数ウィンドウとくっつかないよう少しあける */
  #hObj{top:auto;bottom:calc(112px);left:calc(8px + var(--sal));transform:skewX(-7deg);max-width:94vw;font-size:12.5px}
  #panel{grid-template-columns:1.8fr 1.5fr 1fr 1fr 1fr;gap:4px;padding-left:calc(5px + var(--sal));padding-right:calc(5px + var(--sar))}
  .cb{min-height:60px;font-size:14px} .cb small{font-size:9px} .grp h5{font-size:9.5px;letter-spacing:0} #drive i,#armpad i{width:40px;height:40px;margin:-20px 0 0 -20px}
}
@media (orientation:portrait) and (min-width:901px) and (min-height:561px){ #hPot{top:calc(84px + var(--sat))} }
/* スマホ縦持ち: 3D画面をふさがない配置。上に情報を寄せ、右のパネルは「いま要る行だけ」の小さい表示(タップで全部) */
@media (orientation:portrait) and (max-width:620px){
  #hTime{top:calc(6px + var(--sat));left:calc(8px + var(--sal))}
  #sysBtns{top:calc(44px + var(--sat));left:calc(8px + var(--sal));gap:5px} .sys{min-width:34px;height:28px;font-size:11px;padding:0 7px}
  #hPeople{top:calc(6px + var(--sat))}
  #hPot{top:calc(64px + var(--sat));right:calc(8px + var(--sar));width:min(214px,56vw);padding:6px 9px 6px;pointer-events:auto;cursor:pointer}
  #hPot h3{font-size:10.5px;margin-bottom:2px} #hPot h3 span:last-child::after{content:'';display:inline-block;margin-left:6px;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;vertical-align:middle;opacity:.8}
  #hPot.mini .row:not(.next):not(.keep),#hPot.mini .sep{display:none} #hPot.mini h3 span:last-child::after{border:4px solid transparent;border-left-color:currentColor;border-right:0}
  #hPot.mini{background:linear-gradient(180deg,rgba(40,24,13,.82),rgba(18,10,6,.82))}
  #hObj{top:calc(116px + var(--sat));bottom:auto;left:calc(8px + var(--sal));right:calc(8px + var(--sar));max-width:none;transform:none;font-size:12.5px;line-height:1.35;padding:5px 10px 6px 8px;background:linear-gradient(180deg,rgba(40,24,13,.8),rgba(18,10,6,.8))}
  #hIntr{top:auto;bottom:108px;left:calc(8px + var(--sal));right:calc(8px + var(--sar));width:auto;transform:none;display:flex;align-items:center;gap:8px;padding:3px 10px 4px;font-size:11px;text-align:left}
  #hIntr[hidden]{display:none} #hIntr #intrTxt{flex:none;max-width:62%} #hIntr .bar{flex:1;margin-top:0;height:8px}
  #radar{width:88px;height:88px;bottom:10px} #sideMon{width:176px;height:92px;bottom:10px}
  #toasts{top:40%} .toast{font-size:13.5px} .toast.big{font-size:18px}
  #lesSkip{bottom:150px} #hud.demo #hObj{top:calc(52px + var(--sat))!important} #hud.demo #hIntr{bottom:108px;width:auto}
}
@media (prefers-reduced-motion:reduce){#boot .tape,#boot .steam i,#bootLogo,#bootBar,#boot.ready #bootGo,#startBtn,#bootGo,#clock.hurry,#logo small,#logoSvg .k,#logoSvg .e,#logo p,#strip,#strip .track{animation:none}}
/* 横持ちのスマホ (高さが低い): 操作盤を低くして3Dを広く、タイトルは小さめにして下のクレジットまで収める */
@media (max-height:500px) and (orientation:landscape){
  #panel{padding-top:5px;padding-bottom:calc(7px + var(--sab));gap:5px} .grp{gap:3px} .grp h5{font-size:9.5px}
  #drive,#armpad{min-height:62px} .cb{min-height:29px;font-size:13px} .cb small{display:none}
  #drive i,#armpad i{width:34px;height:34px;margin:-17px 0 0 -17px}
  #sTitle{overflow-y:auto;justify-content:center;gap:2vh}
  #logo{margin-top:0} #logoSvg{width:min(70vw,66vh)} #strip{display:none} #logo p{font-size:12px;margin-top:6px}
  #startBtn{margin-bottom:1vh;padding:7px 26px 6px;font-size:18px} #demoBtn{margin:0 0 1vh;padding:4px 10px;font-size:13px}
}
/* --tb を px で読むための見えない測り棒（js の resize が使う） */
#tbProbe{position:fixed;left:0;bottom:0;width:0;height:var(--tb);visibility:hidden;pointer-events:none}

/* ===== 2026-10-29 UI・UX の点検で直したもの（高・中） ===== */
/* 高1 背の低い PC の窓（1100×560 など）：タイトルの「出動」・遊び方・クレジットが下で切れていた */
@media (max-height:640px) and (min-width:700px){
  #logo{margin-top:1vh} #logoSvg{width:min(60vw,72vh)} #logo p{margin-top:6px}
  #strip{margin-top:1.2vh} #strip img{height:clamp(40px,7vh,60px)}
  #startBtn{padding:8px 34px 7px;margin-bottom:1vh;font-size:22px} #demoBtn{margin-bottom:1vh;padding:4px 10px}
}
/* 高2・高3 作業手順と結果：ボタンの列をシートの下に貼り付ける（スマホや背の低い窓で画面の外に出ていた） */
#sBrief .center,#sResult .center{position:sticky;bottom:-18px;z-index:1;margin:14px -20px -18px;padding:12px 20px 14px;background:linear-gradient(180deg,rgba(23,13,7,0),#170d07 35%)}
@media (max-width:900px),(max-height:560px){#sBrief .center,#sResult .center{bottom:-14px;margin:10px -14px -14px;padding:10px 14px 12px}}
@media (orientation:portrait) and (max-width:620px){#sBrief .tips,#sBrief .tips+.note{display:none}}
/* 高3 結果の見出し：人数と「人にふるまえました」を1つの文として折り返す */
#resHead{display:block}
#resHead .nb{font-size:1em;color:inherit;font-family:inherit;font-weight:inherit}
@media (max-height:600px){#resTbl td{padding:2px}}
/* 高4 キッズの時計「のんびり」が2行に割れていた */
#clock{white-space:nowrap}
@media (max-width:900px),(max-height:560px){body.kids #clock{font-size:16px}}
/* 高5 修了証の判が、スマホで機体の札に重なっていた */
@media (max-width:620px){#certStamp{width:62px;height:62px;font-size:20px;border-width:4px;top:10px;right:10px}.certTitle{margin-right:64px}}

/* 中1 HUD の一時停止・音・視点：押せる範囲を広げる。音は OFF でも押せる見た目のまま、線を消して OFF と書く */
#sysBtns .sys{position:relative}
#sysBtns .sys::after{content:'';position:absolute;inset:-6px}
@media (orientation:portrait) and (max-width:620px){#sysBtns .sys{min-width:40px;height:34px;font-size:12px}}
#bMute{display:flex;align-items:center;gap:3px}#bMute .ic{width:14px;height:14px;transform:none;margin:0}#bMute .snd-st{font-size:10px}
#bMute.off{opacity:1}#bMute.off .w{display:none}#bMute.off .snd-st{color:#ff8a6a}
/* 中3 タブレット：スマホ用に縮んだ HUD を PC の大きさに戻す */
@media (min-width:700px) and (min-height:900px){
  #hPot{width:min(290px,40vw);padding:10px 12px 9px} #hPot h3{font-size:13px}
  .row{height:19px;font-size:12.5px;grid-template-columns:6.4em 1fr 34px;gap:6px} .bar,.dn{height:10px}
  #sideMon{width:250px;height:150px} #radar{width:124px;height:124px} .sys,#sysBtns .sys{min-width:42px;height:36px;font-size:13px}
  #hObj{font-size:14px} #clock{font-size:28px} #phase{font-size:13px}
}
/* タブレット縦：部長の指示は左下のレーダーに重なっていたので、上の中央に出す */
@media (orientation:portrait) and (min-width:700px) and (min-height:900px){
  #hObj{top:calc(96px + var(--sat));bottom:auto;left:calc(10px + var(--sal));right:auto;transform:skewX(-7deg);max-width:calc(100vw - 350px)}
}
/* 中4 キッズの説明：タッチの端末ではキー名を出さない。文節の空白で折り返す */
body.touch .kk{display:none}
#briefKids,body.kids #hObj,body.kids .toast{word-break:keep-all;overflow-wrap:anywhere}
/* 中5 日本語の折り返し：1〜2字だけ次の行へ落ちないように（Chrome は文節で折る。Safari は従来どおり） */
.toast,#hObj,.steps,#resMsg,#selDesc,#sDemoEnd p,#briefKids{word-break:auto-phrase}
#selKids{white-space:nowrap}
.nb{display:inline-block}
/* 中6 スマホ縦の機体選び：出動を上に大きく、操作と教習所を下に横並び。矢印は柱にしない（重機がカードに隠れていた） */
@media (orientation:portrait) and (max-width:620px){
  #selBtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch} #selGo{grid-column:1/3;order:-1} #selBtns .go{padding:10px 6px;font-size:14px;white-space:nowrap;letter-spacing:0}
  .nav{height:52px;width:44px;align-self:center}
}
/* 中7 一時停止の「機体選びへ」：作業を捨てる操作なので、切り替えのボタンと離して控えめに。1回目は確かめる */
#sPause #pQuit{margin-top:14px;background:none;border-color:#7a5a3a;color:var(--cream)}
#sPause #pQuit.confirm{border-color:var(--red);color:#ff8a6a}
.go:disabled{opacity:.45;cursor:default}
/* 中9 教習とお手本の進み具合は黄色の枠（赤は割り込みだけ） */
#hIntr.les{border-color:var(--yellow)}
/* 作業手順・結果のボタンは、スマホ縦では横に並べて小さく（縦に積むと本文を隠しすぎた） */
@media (orientation:portrait) and (max-width:620px){
  #sBrief .center,#sResult .center{flex-wrap:nowrap;gap:8px}
  #sBrief .center .go,#sResult .center .go{flex:1;min-width:0;padding:10px 6px;font-size:15px}
}