:root{
  --ink:#1b2233; --paper:#f5f2ea; --alert:#d8341f; --gold:#ffd27a;
  --hand:'Klee One','Hiragino Maru Gothic ProN',sans-serif;
  --title:'M PLUS 1p','Hiragino Sans','Yu Gothic',sans-serif;   /* テレビの字幕（テロップ）の太いゴシック。font-weight 900 で使う */
  --sans:'BIZ UDPGothic','Hiragino Sans','Yu Gothic',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden],.hidden{display:none!important}
html,body{height:100%;overflow:hidden;background:#1b2233;color:var(--ink);font-family:var(--sans);touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button,a{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;text-decoration:none}
#view{position:fixed;inset:0}
#view canvas{display:block;width:100%;height:100%;touch-action:none}
.screen{position:fixed;inset:0;z-index:10}
#boot{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,#141a2e 0%,#3b2a3c 62%,#8a4a34 100%);color:var(--paper);font-weight:700;transition:opacity .35s}
#boot.out{opacity:0;pointer-events:none}
.boot-sky{width:min(300px,80vw);height:auto;display:block;overflow:visible}
.boot-met{animation:fall 2.1s linear infinite;opacity:0}
.boot-met.m1{animation-delay:0s}.boot-met.m2{animation-delay:.7s}.boot-met.m3{animation-delay:1.4s}
@keyframes fall{0%{transform:translate(40px,-20px);opacity:0}10%{opacity:1}100%{transform:translate(230px,110px);opacity:0}}
.boot-met.m2{animation-name:fall2}@keyframes fall2{0%{transform:translate(-10px,-10px);opacity:0}10%{opacity:1}100%{transform:translate(150px,100px);opacity:0}}
.boot-met.m3{animation-name:fall3}@keyframes fall3{0%{transform:translate(90px,-30px);opacity:0}10%{opacity:1}100%{transform:translate(260px,80px);opacity:0}}
.boot-man{animation:dash 1.6s linear infinite}
@keyframes dash{0%{transform:translate(20px,132px)}50%{transform:translate(120px,129px)}100%{transform:translate(220px,132px)}}
.boot-msg{font-size:17px;letter-spacing:.06em}
.boot-bar{width:min(240px,64vw);height:10px;border-radius:5px;overflow:hidden;background:#1b2233;box-shadow:inset 0 0 0 2px #5a4060}
.boot-bar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);transition:transform .25s;background:linear-gradient(90deg,#ff7a1a,#ffd27a,#ff7a1a);background-size:60px 100%;animation:bootGrain 1.2s linear infinite}
@keyframes bootGrain{to{background-position:60px 0}}
.boot-pct{font-size:12px;opacity:.75;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.boot-met,.boot-man,.boot-bar i,.news-text{animation:none}.boot-met{opacity:1}}
#boot-err{position:fixed;inset:auto 8px 8px 8px;z-index:99;background:#fff;color:#b00;font:12px/1.4 monospace;white-space:pre-wrap;padding:10px;border-radius:6px}

/* ---------- タイトル: 朝のニュースの速報 ---------- */
#title{display:flex;flex-direction:column;align-items:center;padding:0 16px max(12px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(14,18,32,.62) 0%,rgba(14,18,32,0) 34%,rgba(14,18,32,0) 58%,rgba(14,18,32,.7) 100%)}
.news{display:flex;width:calc(100% + 32px);margin:0 -16px;padding-top:max(10px,env(safe-area-inset-top));height:auto}
.news-tag{flex:none;background:var(--alert);color:#fff;font-weight:700;font-size:16px;padding:7px 12px 6px;letter-spacing:.08em;display:flex;align-items:center}
.news-bar{flex:1;min-width:0;overflow:hidden;background:rgba(245,242,234,.95);color:var(--ink);font-weight:700;font-size:15px;display:flex;align-items:center;white-space:nowrap}
.news-text{display:inline-block;padding-left:100%;animation:ticker 22s linear infinite}
@keyframes ticker{to{transform:translateX(-100%)}}
.title-text{margin-top:min(9svh,64px);text-align:center;color:#fff}
.logo{font-family:var(--title);font-weight:900;line-height:1.05;text-shadow:0 3px 0 #1b2233,0 6px 18px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center}
.logo span{font-size:min(8.6vw,38px);letter-spacing:.04em}
.logo .logo-big{font-size:min(17vw,78px);color:#ffd27a;letter-spacing:.02em;-webkit-text-stroke:1.5px #1b2233}
.call{margin:18px auto 0;display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;background:rgba(245,242,234,.96);color:var(--ink);padding:9px 14px 10px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.35);max-width:min(330px,88vw);text-align:left;transform:rotate(-1.2deg)}
.call-who{display:flex;align-items:center;gap:6px;font-size:12px;color:#5a5649}
.call-who svg{width:14px;height:14px;color:var(--alert);animation:buzz .5s ease-in-out infinite}
.call-who b{color:var(--ink);font-size:13px}.call-who i{font-style:normal}
.call-line{font-family:var(--hand);font-size:17px;line-height:1.4}
@keyframes buzz{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.title-actions{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
/* 主役のボタン: 社員証の色（紺）に橙の縁。押せる厚みはこれだけ */
.go{position:relative;min-width:min(300px,80vw);padding:15px 28px 13px;font-family:var(--title);font-weight:900;font-size:28px;color:#fff;letter-spacing:.12em;background:var(--alert);border-radius:6px;box-shadow:0 5px 0 #7d1a10,0 10px 20px rgba(0,0,0,.35);transition:transform .08s}
.go:active{transform:translateY(4px);box-shadow:0 1px 0 #7d1a10,0 3px 8px rgba(0,0,0,.3)}
.go.small{font-size:21px;min-width:200px;padding:12px 22px 10px}
.memo-link{font-family:var(--hand);font-size:17px;color:#fff;text-decoration:underline;text-underline-offset:5px;padding:6px 10px}
.foot{display:flex;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;font-size:13px;font-weight:700;color:#fff;background:rgba(20,24,36,.6);border:1px solid rgba(255,255,255,.35);border-radius:4px;white-space:nowrap}
.chip:active{transform:scale(.96)}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ---------- 社内の掲示（遊び方・一時停止） ---------- */
#how,#pause{display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(14,18,32,.6)}
.memo{position:relative;width:min(420px,100%);max-height:calc(100svh - 32px);overflow:hidden;background:var(--paper);padding:18px 22px 16px;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;border-top:6px solid var(--ink)}
.memo.narrow{width:min(320px,100%)}
.memo-head{width:100%;display:flex;justify-content:space-between;font-size:11px;color:#5a5649;border-bottom:1px solid #cfc7b4;padding-bottom:5px;margin-bottom:8px}
.memo h2{font-family:var(--title);font-weight:900;font-size:22px;margin-bottom:12px;text-align:center}
.memo ol{list-style:none;font-size:16px;line-height:1.55;display:flex;flex-direction:column;gap:11px;width:100%}
.memo li{display:grid;grid-template-columns:30px 1fr;gap:2px;font-family:var(--hand);text-align:left}
.memo li::before{content:attr(data-n);font-family:var(--hand);color:var(--ink);font-size:16px}
.memo b{color:var(--alert)}
.memo .keys{font-size:12px;color:#5a5649;margin:10px 0 12px;text-align:center;line-height:1.5}
.memo .keys:empty{margin:8px 0}
.memo .credit{font-size:11px;color:#5a5649;margin-top:10px;text-align:center;line-height:1.5}
#pause .memo button+button{margin-top:12px}
#pause .memo-link{color:var(--ink)}

/* ---------- 遊び中 ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
/* 速さの線と、受け渡しの瞬間の光（しっぽ取り v5 と同じ。2026-11-03 本人「ワイヤー関連は全部迫力のある感じに」） */
#speedfx{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#hitflash{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,255,255,0) 35%,rgba(255,244,214,.55) 100%);opacity:0}
.watch{position:absolute;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;background:rgba(14,18,32,.62);border-radius:40px;color:#fff}
.watch-face{width:54px;height:54px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.watch-txt{display:flex;flex-direction:column;line-height:1.1}
.watch-txt b{font-family:var(--title);font-weight:900;font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.watch-txt span{font-size:12px;font-weight:700;color:#ffd27a}
.watch.hurry .watch-txt span{color:#ff9a7a;animation:blink .6s steps(2) infinite}
.watch.late .watch-txt b,.watch.late .watch-txt span{color:#ff6a4a}
@keyframes blink{50%{opacity:.35}}
.goal-box{position:absolute;left:max(10px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 70px);display:flex;align-items:baseline;gap:6px;padding:3px 10px;border-radius:12px;background:rgba(14,18,32,.62);color:#fff;font-size:12px;font-weight:700}
.goal-box b{font-family:var(--title);font-weight:900;font-size:17px;color:#7fdcff;font-variant-numeric:tabular-nums}
#redflash{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,60,30,0) 30%,rgba(220,40,20,.6) 100%);opacity:0}
.near{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;color:#fff}
.near b{font-family:var(--title);font-weight:900;font-size:min(12vw,54px);color:#ffd27a;-webkit-text-stroke:2px #1b2233;text-shadow:0 4px 0 #1b2233,0 8px 22px rgba(255,120,30,.7);white-space:nowrap}
.near span{font-family:var(--title);font-weight:900;font-size:20px;color:#fff;-webkit-text-stroke:1px #1b2233;text-shadow:0 2px 0 #1b2233}
.near.pop{animation:nearPop 1s ease-out forwards}
@keyframes nearPop{0%{transform:translate(-50%,-50%) scale(1.8) rotate(-6deg);opacity:0}12%{transform:translate(-50%,-50%) scale(1) rotate(-3deg);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}
.danger{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;animation:blink .5s steps(2) infinite}
.danger svg{width:100%;height:100%;fill:#e8341f;stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.danger.soon{animation-duration:.22s}
.say{position:absolute;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 114px);transform:translateX(-50%);font-family:var(--hand);font-size:19px;line-height:1.35;color:var(--ink);background:rgba(245,242,234,.97);padding:7px 15px 8px;border-radius:12px;width:max-content;max-width:min(520px,calc(100% - 32px));text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.say small{display:block;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--alert)}
/* 方角だけの矢印（行き先の向き）: 画面の上の真ん中に固定 */
.edge-arrow{position:absolute;right:max(12px,env(safe-area-inset-right));top:calc(max(10px,env(safe-area-inset-top)) + 46px);width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:rgba(14,18,32,.55);border-radius:50%}
.edge-arrow svg{width:30px;height:30px;fill:#7fdcff;stroke:#1b2233;stroke-width:1.6}
.miss{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:#fff;text-shadow:0 1px 4px #000;animation:fadeUp .8s ease-out forwards}
.miss span{font-size:40px;line-height:1;color:var(--alert);-webkit-text-stroke:1.5px #fff}
.miss small{font-family:var(--hand);font-size:13px}
@keyframes fadeUp{0%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%)}}
.corner-btn{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));pointer-events:auto;font-size:13px;font-weight:700;color:#fff;background:rgba(20,24,36,.6);min-width:52px;min-height:40px;padding:0 10px;border-radius:3px}
/* スマホ操作 */
.touch{position:absolute;inset:0;pointer-events:none}
/* 左手: 触った所にスティックが出る（WIRE ESCAPE と同じ） */
.stickzone{position:absolute;left:0;bottom:0;width:46%;height:62%;pointer-events:none}   /* 枠だけ。触れるのはスティックの円（左下に固定） */
.stick{position:absolute;left:calc(max(16px,env(safe-area-inset-left)) + 62px);top:calc(100% - max(16px,env(safe-area-inset-bottom)) - 62px);width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:rgba(20,24,36,.28);opacity:.65;pointer-events:auto;touch-action:none}
.stick::before{content:'';position:absolute;inset:-24px;border-radius:50%}   /* 円の少し外まで反応 */
.stick.held{opacity:1}
.stick .knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(246,241,228,.85)}
.tbtn{position:absolute;pointer-events:auto;width:66px;height:66px;border-radius:50%;background:rgba(20,24,36,.5);border:2px solid rgba(255,255,255,.6);color:#fff;font-weight:700;font-size:14px;touch-action:none;display:flex;align-items:center;justify-content:center}
/* 右手（WIRE ESCAPE と同じ並び）: ワイヤー（大・前の上へ自動で）、その左にジャンプ、ジャンプの上に投げる */
.tbtn[data-k=wire]{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:104px;height:104px;background:rgba(217,119,42,.42);border-color:rgba(255,190,120,.95)}
.tbtn[data-k=wire] svg{width:52px;height:52px}
.tbtn[data-k=wire].aim{box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 18px rgba(217,119,42,.9)}
.tbtn[data-k=jump]{right:max(146px,calc(env(safe-area-inset-right) + 146px));bottom:max(20px,calc(env(safe-area-inset-bottom) + 4px));width:80px;height:96px;border-radius:16px}
.tbtn.lit{background:#d9772a;border-color:#fff}
.tbtn.off{opacity:.3}
.tbtn:active{transform:scale(.94)}

/* ---------- 結果 ---------- */
#result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 16px max(10px,env(safe-area-inset-bottom));background:rgba(20,24,36,.7)}
.slip-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
#slip{max-width:100%;max-height:100%;width:auto;height:100%;aspect-ratio:1080/1350;object-fit:contain}
.result-actions{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;color:#fff}
@media (max-height:700px){
  .title-text{margin-top:28px}.logo .logo-big{font-size:min(15vw,62px)}.call{margin-top:12px}.call-line{font-size:15px}
  .memo ol{font-size:14px;gap:7px}.memo h2{font-size:19px;margin-bottom:8px}
}
@media (max-width:370px){ .tbtn[data-k=jump]{right:max(130px,calc(env(safe-area-inset-right) + 130px));width:70px} }

/* v3: スーツの燃え具合（腕時計の横の小さな絵）。0 スーツ → 1 焦げ → 2 上着なし → 3 シャツも焼けた → 4 パンツ一丁 → 5 確保 */
.suit{width:30px;height:36px;flex:none;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.suit path,.suit g{display:none}
.suit .skin{fill:#f2bf98;stroke:#1b2233;stroke-width:1.4}
.suit .shirt{fill:#f4f2ec;stroke:#1b2233;stroke-width:1.4}
.suit .rag{fill:#ece9e2;stroke:#1b2233;stroke-width:1}
.suit .jacket{fill:#3b4252;stroke:#1b2233;stroke-width:1.4}
.suit .lapel{fill:#f4f2ec}
.suit .tie{fill:#d23a2a}
.suit .soot{fill:#120e0c;opacity:.85}
.suit .briefs{fill:#f4f6fa;stroke:#3a6fd0;stroke-width:1.6}
.suit.s0 .skin,.suit.s0 .jacket,.suit.s0 .lapel,.suit.s0 .tie{display:inline}
.suit.s1 .skin,.suit.s1 .jacket,.suit.s1 .lapel,.suit.s1 .tie,.suit.s1 .soot{display:inline}
.suit.s2 .shirt,.suit.s2 .tie,.suit.s2 .soot{display:inline}
.suit.s3 .skin,.suit.s3 .rag,.suit.s3 .tie{display:inline}
.suit.s4 .skin,.suit.s4 .tie,.suit.s4 .briefs,.suit.s5 .skin,.suit.s5 .tie,.suit.s5 .briefs{display:inline}
.suit.s4,.suit.s5{animation:blink .5s steps(2) infinite}
.suit.pop{animation:suitPop .5s ease-out}
.suit.s4.pop,.suit.s5.pop{animation:suitPop .5s ease-out,blink .5s steps(2) .5s infinite}
@keyframes suitPop{0%{transform:scale(1.9) rotate(-8deg)}60%{transform:scale(.9)}100%{transform:scale(1)}}
/* パンツ一丁: 画面のふちに赤と青の回転灯の光 */
body.chased #redflash{opacity:1!important;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(220,40,30,.35) 100%);animation:patrol .7s steps(2) infinite}
@keyframes patrol{50%{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(40,90,230,.35) 100%)}}