/* 廃都迎撃 v2（2026-11-09）: 焼けた街の夕暮れ。暗い鉄と煤の地に、UFO の水色と火の橙だけを差し色にする */
:root{
  --ink:#e8e0d4; --ink2:#b5aca0; --dark:#141216; --panel:rgba(16,14,18,.78); --edge:rgba(232,224,212,.22);
  --fire:#ff8a3c; --fire2:#c4501a; --cyan:#6ff6ff; --mag:#ff3aa0; --paper:#d9d2c3;
  --head:'M PLUS 1p','Hiragino Sans','Yu Gothic',sans-serif;
  --sans:'BIZ UDPGothic','Hiragino Sans','Yu Gothic',sans-serif;
  --mono:'Share Tech Mono',ui-monospace,'SF Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden],.hidden{display:none!important}
html,body{height:100%;overflow:hidden;background:#2a2026;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:#120f13;color:var(--ink);font-family:var(--sans);transition:opacity .35s}
#boot.out{opacity:0;pointer-events:none}
.boot-city{width:min(300px,78vw);height:auto;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.boot-city .bc-beam{transform-origin:150px 34px;animation:bcSweep 3.2s ease-in-out infinite}
.boot-city .bc-ufo{animation:bcBob 2.4s ease-in-out infinite}
.boot-city .bc-fire rect{animation:bcFlick .5s steps(2) infinite}
.boot-city .bc-fire rect:nth-child(2n){animation-delay:.25s}
.boot-city .bc-ash{animation:bcAsh 4s linear infinite}
@keyframes bcSweep{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes bcBob{50%{transform:translateY(2px)}}
@keyframes bcFlick{50%{opacity:.35}}
@keyframes bcAsh{from{transform:translateY(-10px)}to{transform:translateY(60px)}}
.boot-msg{font-family:var(--head);font-weight:800;font-size:17px;letter-spacing:.12em;color:var(--ink2)}
.boot-bar{width:min(240px,64vw);height:6px;overflow:hidden;background:#2a2428;box-shadow:inset 0 0 0 1px #3d3438}
.boot-bar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);transition:transform .25s;background:repeating-linear-gradient(90deg,var(--fire) 0 10px,var(--fire2) 10px 14px);animation:bootGrain .8s linear infinite}
@keyframes bootGrain{to{background-position:28px 0}}
.boot-pct{font-family:var(--mono);font-size:12px;opacity:.7;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.boot-city *,.boot-bar i{animation:none!important}}
#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:max(28px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(14,10,14,.72) 0%,rgba(14,10,14,.2) 34%,rgba(14,10,14,0) 55%,rgba(14,10,14,.75) 100%)}
.title-text{margin-top:min(9svh,60px);text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.series{font-family:var(--mono);font-size:13px;letter-spacing:.3em;color:var(--fire);text-transform:uppercase}
.logo{margin-top:8px;font-family:var(--head);font-weight:900;line-height:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.logo span{font-size:min(19vw,92px);letter-spacing:.06em;color:#efe6da;-webkit-text-stroke:1px rgba(0,0,0,.35);background:linear-gradient(180deg,#f4ece2 30%,#c9b8a6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 10px rgba(0,0,0,.7))}
html[lang=en] .logo span{font-size:min(12vw,58px);letter-spacing:.04em}
.logo small{font-size:min(5.6vw,24px);font-weight:800;letter-spacing:.32em;color:var(--cyan);text-shadow:0 0 12px rgba(111,246,255,.45),0 2px 6px rgba(0,0,0,.8)}
.intro{margin:16px auto 0;max-width:20em;font-size:15px;line-height:1.6;color:var(--ink2)}
.title-actions{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
/* 主役のボタンはこれ1つだけ: 焼けた鉄板に火の縁 */
.cta{position:relative;min-width:min(290px,80vw);padding:15px 28px 14px;font-family:var(--head);font-weight:900;font-size:28px;letter-spacing:.24em;text-indent:.24em;color:#1a0e08;
  background:linear-gradient(180deg,#ffb06a,var(--fire) 55%,#d85e22);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);box-shadow:0 6px 24px rgba(255,120,40,.35);transition:transform .08s}
.cta:active{transform:translateY(2px) scale(.99)}
.cta.small{font-size:20px;min-width:200px;padding:12px 22px 11px;letter-spacing:.18em;text-indent:.18em}
.memo-link{font-size:15px;color:var(--ink2);text-decoration:underline;text-underline-offset:5px;padding:8px 10px}
.foot{display:flex;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;font-size:13px;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--edge);border-left:3px solid var(--fire2);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(10,8,12,.62)}
.sheet{position:relative;width:min(420px,100%);max-height:calc(100svh - 32px);overflow:hidden;background:#1b181c;border:1px solid var(--edge);border-top:4px solid var(--fire);padding:20px 22px 16px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center}
.sheet.narrow{width:min(320px,100%)}
.sheet h2{font-family:var(--head);font-weight:900;font-size:24px;letter-spacing:.14em;margin-bottom:12px}
.sheet ol{list-style:none;font-size:15px;line-height:1.55;display:flex;flex-direction:column;gap:10px;width:100%}
.sheet li{display:grid;grid-template-columns:28px 1fr;gap:6px}
.sheet li::before{content:attr(data-n);font-family:var(--mono);color:var(--fire);font-size:16px;line-height:1.45}
.sheet li b{color:var(--cyan);font-weight:700}
.sheet .keys{font-size:12px;color:var(--ink2);margin:10px 0 12px;text-align:center;line-height:1.5}
.sheet .keys:empty{margin:6px 0}
.sheet .credit{font-size:10px;color:#8a8278;margin-top:10px;text-align:center;line-height:1.4}
.sheet .credit a{color:#a8a096}
#pause .sheet button+button{margin-top:12px}

/* ---------- 遊び中 ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#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,236,214,.5) 100%);opacity:0}
#redflash{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,40,30,0) 30%,rgba(200,20,20,.62) 100%);opacity:0}
#whiteflash{position:fixed;inset:0;z-index:6;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,#fff 0%,#ffd8f0 60%,#ff9ad8 100%);opacity:0}
/* 左上: 作戦の表示 */
.ops{position:absolute;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));min-width:min(176px,44vw);padding:7px 11px 8px;background:var(--panel);border-left:3px solid var(--fire);box-shadow:0 2px 12px rgba(0,0,0,.4)}
.o-head{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:.06em;white-space:nowrap}
.o-score{display:block;font-family:var(--mono);font-weight:400;font-size:30px;line-height:1.05;margin-top:2px;color:#f4ece2;font-variant-numeric:tabular-nums}
.o-chain{--pulse:0;display:flex;align-items:center;gap:7px;margin-top:3px;opacity:.55}
.o-chain.on{opacity:1}
.o-chain b{font-family:var(--mono);font-weight:400;font-size:22px;line-height:1;color:var(--ink);transform:scale(calc(1 + var(--pulse) * .4));transform-origin:0 50%}
.o-chain.hot b{color:var(--fire);text-shadow:0 0 10px rgba(255,138,60,.7)}
.o-chain span{font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap}
.o-bar{flex:1;min-width:30px;height:3px;background:rgba(255,255,255,.12);display:block}
.o-bar i{display:block;height:100%;background:var(--fire);transform-origin:0 50%;transform:scaleX(0)}
/* 右上: 電池パック */
.pack{position:absolute;right:max(10px,env(safe-area-inset-right));top:calc(max(10px,env(safe-area-inset-top)) + 42px);width:min(58px,15vw);text-align:center}
.pack svg{width:100%;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.pack.hit svg{animation:wob .45s ease-out}
.pack.low svg{animation:lowBlink 1s steps(2) infinite}
.pk-cap{display:block;font-size:10px;font-weight:700;color:var(--ink2);text-shadow:0 1px 3px #000;margin-top:2px;letter-spacing:.1em}
@keyframes wob{0%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@keyframes lowBlink{50%{opacity:.6}}
.corner-btn{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));pointer-events:auto;font-size:13px;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--edge);padding:7px 12px}
/* 無線（管制）: 画面の下、操作の上 */
.say{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(16px,env(safe-area-inset-bottom)) + 128px);width:max-content;max-width:min(540px,calc(100% - 40px));font-size:15px;line-height:1.4;color:#d8f8fa;background:rgba(8,18,20,.82);border:1px solid rgba(111,246,255,.35);border-left:3px solid var(--cyan);padding:6px 12px;text-align:left;box-shadow:0 3px 12px rgba(0,0,0,.4);word-break:keep-all;overflow-wrap:anywhere}
.say small{display:inline-block;margin-right:.7em;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--cyan);vertical-align:1px}
/* 方角の矢印（いちばん近い敵） */
.edge-arrow{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));width:52px;height:52px;margin-left:-26px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(14,12,16,.55);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(111,246,255,.3)}
.edge-arrow svg{width:28px;height:28px;fill:var(--cyan);stroke:#0a0a0c;stroke-width:1.4}
.edge-arrow span{font-family:var(--mono);font-size:11px;color:#fff;text-shadow:0 1px 3px #000}
.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(--mag);-webkit-text-stroke:1.5px #fff}
.miss small{font-size:13px}
@keyframes fadeUp{0%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%)}}
.tags{position:absolute;inset:0;overflow:hidden}
.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;will-change:transform}
.tg-hp{display:flex;gap:2px}
.tg-hp b{width:8px;height:8px;background:var(--mag);box-shadow:0 0 0 1.5px rgba(10,6,10,.85),0 0 6px rgba(255,58,160,.6)}
.tag.weak .tg-hp b{background:#fff}
/* 当たった所から浮く点 */
.fpts{position:absolute;left:0;top:0;font-family:var(--mono);font-size:17px;color:#f4ece2;text-shadow:0 0 4px #000,0 1px 2px #000;white-space:nowrap;will-change:transform,opacity}
.fpts.hot{color:var(--fire);font-size:20px}
.fpts.kill{font-family:var(--head);font-weight:900;font-size:19px;color:var(--cyan);letter-spacing:.06em}
.lock{position:absolute;left:0;top:0;width:96px;height:96px;color:var(--mag);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 4px rgba(0,0,0,.6))}
.lock svg{position:absolute;inset:0;width:100%;height:100%;animation:lockSpin 1s linear infinite}
.lock span{position:relative;top:58px;font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff;background:#c41e78;padding:1px 6px}
@keyframes lockSpin{to{transform:rotate(90deg)}}
.bossbar{position:absolute;left:50%;transform:translateX(-50%);top:calc(max(10px,env(safe-area-inset-top)) + 158px);width:min(340px,calc(100% - 32px));color:var(--ink);text-shadow:0 1px 3px #000}
.bb-name{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;gap:8px;letter-spacing:.08em}
.bb-name b{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--mag)}
.bossbar.urgent .bb-name b{color:#fff;background:#c41e78;padding:0 4px;animation:lowBlink .5s steps(2) infinite}
.bb-bar{height:7px;margin-top:3px;background:rgba(14,12,16,.75);box-shadow:0 0 0 1px rgba(232,224,212,.35);overflow:hidden}
.bb-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a1a5a,var(--mag));transform-origin:0 50%;transition:transform .2s}
.banner{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:#f4ece2;text-shadow:0 3px 14px rgba(0,0,0,.85);white-space:nowrap}
.banner small{font-size:14px;font-weight:700;letter-spacing:.2em;color:var(--fire)}
.banner b{font-family:var(--head);font-weight:900;font-size:min(12vw,52px);letter-spacing:.12em}
.banner.pop{animation:bannerIn 2.2s ease-out forwards}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}10%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.near{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.85);pointer-events:none}
.near b{font-family:var(--head);font-weight:900;font-size:32px;letter-spacing:.08em;color:#fff2e4;-webkit-text-stroke:1px rgba(60,20,0,.8)}
.near small{font-family:var(--mono);font-size:15px;color:var(--fire)}
.near.pop{animation:nearIn .9s ease-out forwards}
@keyframes nearIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}30%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%)}}
/* スマホ操作 */
.touch{position:absolute;inset:0;pointer-events:none}
.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(232,224,212,.4);background:rgba(14,12,16,.35);opacity:.7;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(232,224,212,.82)}
.tbtn{position:absolute;pointer-events:auto;width:66px;height:66px;border-radius:50%;background:rgba(14,12,16,.55);border:2px solid rgba(232,224,212,.55);color:#fff;font-weight:700;font-size:14px;touch-action:none;display:flex;align-items:center;justify-content:center}
.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(196,80,26,.45);border-color:rgba(255,170,110,.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(255,138,60,.9)}
.tbtn[data-k=wire].aim-ufo{box-shadow:0 0 0 3px #fff,0 0 22px rgba(111,246,255,.95);background:rgba(20,120,130,.55);border-color:var(--cyan)}
.tbtn[data-k=jump]{right:max(132px,calc(env(safe-area-inset-right) + 132px));bottom:max(28px,calc(env(safe-area-inset-bottom) + 12px));width:80px;height:80px}
.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(10,8,12,.78)}
.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}
.master,.sheet li,.say,.intro{word-break:keep-all;overflow-wrap:anywhere}
/* 追ってくる追跡機の方角（画面の縁） */
.chase{position:absolute;left:0;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 6px rgba(255,80,30,.9))}
.chase svg{width:34px;height:34px;fill:#ff6a2a;stroke:#1a0800;stroke-width:1.5}
.chase b{position:absolute;bottom:-14px;font-family:var(--mono);font-weight:400;font-size:11px;color:#ffd0b0;text-shadow:0 1px 2px #000}
.chase.near svg{fill:#ff2a2a;animation:lowBlink .25s steps(2) infinite}
/* UFO の上の体力: シールドが開いた時（赤紫に光る）・追跡機（橙） */
.tag.open .tg-hp b{background:#fff;box-shadow:0 0 0 1.5px var(--mag),0 0 10px rgba(255,58,160,.95)}
.tag.hunter .tg-hp b{background:#ff7a2a;box-shadow:0 0 0 1.5px rgba(10,6,10,.85),0 0 8px rgba(255,110,40,.8)}
.o-speed{display:block;font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:2px}
.o-speed.ok{color:var(--cyan);text-shadow:0 0 8px rgba(111,246,255,.6)}
.tbtn .dash-l{position:absolute;bottom:14px;font-family:var(--head);font-weight:900;font-size:13px;letter-spacing:.1em}
.tbtn[data-k=wire].aim-ufo svg{transform:scale(1.1)}
.near b{white-space:nowrap;font-size:min(8.5vw,32px)}