/* HUD / オーバーレイ。サイズは --u (画面短辺の 1%) 基準 */
:root { --u: 1vmin; --gold: #ffd257; --ink: #140c0e; --red: #e8402e; --orange: #ff9a2a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; font-weight: 800; color: #fff; }
#app { position: fixed; inset: 0; overflow: hidden; }
#gl { width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#topbar, #banner, #countdown, #msgs div, #mobBox, #dmgBox, #arrest .t, #arrest .h, #chargeMark { paint-order: stroke fill; }
#vig { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(40,60,255,0) 40%, rgba(30,40,200,.55)); }

/* 上: 手配度と時間 */
#topbar { position: absolute; top: calc(var(--u) * 1.4); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 2.4); align-items: center; white-space: nowrap; -webkit-text-stroke: calc(var(--u) * .45) var(--ink); }
#stars { font-size: calc(var(--u) * 4.4); color: var(--gold); letter-spacing: .05em; }
#stars i { font-style: normal; color: rgba(255,255,255,.25); -webkit-text-stroke: calc(var(--u) * .3) rgba(0,0,0,.5); }
#clock { font-size: calc(var(--u) * 3.4); font-variant-numeric: tabular-nums; }
/* 左上: 暴徒の数 / 被害総額 */
#mobBox { position: absolute; top: calc(var(--u) * 1.6); left: calc(var(--u) * 2.2); display: flex; align-items: baseline; gap: calc(var(--u) * .6); -webkit-text-stroke: calc(var(--u) * .45) var(--ink); white-space: nowrap; }
#mobBox .lb { font-size: calc(var(--u) * 2.4); color: var(--orange); }
#mobBox b { font-size: calc(var(--u) * 6.4); color: var(--orange); font-variant-numeric: tabular-nums; line-height: 1; }
#mobBox .u { font-size: calc(var(--u) * 2.4); }
#mobBox .cop { margin-left: calc(var(--u) * 2); font-size: calc(var(--u) * 2.2); color: #8ab8ff; }
#mobBox .cop b { font-size: calc(var(--u) * 3.2); color: #8ab8ff; }
#dmgBox { position: absolute; top: calc(var(--u) * 9.6); left: calc(var(--u) * 2.2); display: flex; flex-direction: column; -webkit-text-stroke: calc(var(--u) * .45) var(--ink); white-space: nowrap; }
#dmgBox .lb { font-size: calc(var(--u) * 2); color: #f0d8c0; }
#dmgBox b { font-size: calc(var(--u) * 4.4); color: #fff; font-variant-numeric: tabular-nums; }
#minimap { position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); width: calc(var(--u) * 25); height: calc(var(--u) * 25); border-radius: calc(var(--u) * 1.4); border: calc(var(--u) * .4) solid rgba(255,255,255,.55); background: rgba(10,10,14,.5); }

/* 左下: リーダーの装備 */
#me { position: absolute; left: calc(var(--u) * 2); bottom: calc(var(--u) * 6); width: calc(var(--u) * 34); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6); background: rgba(14,10,12,.6); border-radius: calc(var(--u) * 1.2); border: calc(var(--u) * .3) solid rgba(255,255,255,.28); }
#mol { font-size: calc(var(--u) * 2.6); letter-spacing: .12em; color: rgba(255,255,255,.22); }
#mol b { font-size: calc(var(--u) * 1.9); color: #fff; margin-right: calc(var(--u) * 1); letter-spacing: 0; }
#mol .on { color: #ff8a30; text-shadow: 0 0 calc(var(--u) * .8) #ff5a10; }
#me .row { display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 1.8); margin-top: calc(var(--u) * .7); }
#me .row span { width: calc(var(--u) * 6.4); white-space: nowrap; }
.bar { position: relative; flex: 1; height: calc(var(--u) * 1.6); background: rgba(0,0,0,.6); border: calc(var(--u) * .2) solid #000; border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; transition: width .1s; }
#rage i { background: linear-gradient(#ffb04a, #d8401e); }
#rage.full i { background: linear-gradient(#fff07a, #ff6a1a); animation: blink .35s infinite; }
#rage.active i { background: linear-gradient(#ff7a7a, #ff2a1a); }
.bar.stam i { background: linear-gradient(#a6f0ff, #3aa8d8); }
@keyframes blink { 50% { filter: brightness(1.8); } }

/* 照準と号令の目印 */
#cross { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); transform: translate(-50%, -50%); opacity: .75; }
#cross::before, #cross::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
#cross::before { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
#cross::after { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
#chargeMark { display: none; position: absolute; transform: translate(-50%, -100%); font-size: calc(var(--u) * 2.6); color: var(--gold); -webkit-text-stroke: calc(var(--u) * .4) var(--ink); animation: bob .6s ease-in-out infinite alternate; }
#chargeMark::after { content: '▼'; display: block; text-align: center; font-size: .8em; }
@keyframes bob { to { margin-top: calc(var(--u) * -1); } }

/* 逮捕ゲージ */
#arrest { display: none; position: absolute; left: 50%; top: 64%; transform: translateX(-50%); width: calc(var(--u) * 48); text-align: center; }
#arrest .t { font-size: calc(var(--u) * 2.6); color: #8ab8ff; -webkit-text-stroke: calc(var(--u) * .4) var(--ink); }
#arrest .bar { height: calc(var(--u) * 2.4); margin-top: calc(var(--u) * .4); border-color: #fff; }
#arrest .bar i { background: linear-gradient(#7aa8ff, #2a48d8); }
#arrest .h { margin-top: calc(var(--u) * .6); font-size: calc(var(--u) * 2.6); color: #ff7a5a; -webkit-text-stroke: calc(var(--u) * .4) var(--ink); visibility: hidden; }
#arrest.grab .h { visibility: visible; animation: blink .3s infinite; }
#arrest.grab .bar { animation: shakeX .12s infinite; }
@keyframes shakeX { 50% { transform: translateX(calc(var(--u) * .4)); } }

/* メッセージ / バナー / カウント */
#msgs { position: absolute; left: 50%; top: calc(var(--u) * 9); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); }
#msgs .m { font-size: calc(var(--u) * 2.5); -webkit-text-stroke: calc(var(--u) * .4) var(--ink); white-space: nowrap; animation: msgIn .25s ease-out; transition: opacity .5s; }
#msgs .m.out { opacity: 0; }
#msgs .mob { color: #ffc07a; } #msgs .bad { color: #ff6a5a; } #msgs .good { color: #8affa0; } #msgs .tip { color: #fff6c8; font-size: calc(var(--u) * 2.7); }
@keyframes msgIn { from { transform: translateY(-40%); opacity: 0; } }
#banner { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; text-align: center; white-space: nowrap; transition: .22s cubic-bezier(.2, 2, .4, 1); -webkit-text-stroke: calc(var(--u) * .8) var(--ink); }
#banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner .t { font-size: calc(var(--u) * 7.6); }
#banner .s { font-size: calc(var(--u) * 2.6); color: #ffe6c8; -webkit-text-stroke: calc(var(--u) * .45) var(--ink); margin-top: calc(var(--u) * .6); }
#banner.level .t { color: var(--gold); font-size: calc(var(--u) * 5.6); }
#banner.collapse .t { color: #ffb04a; font-size: calc(var(--u) * 8.6); }
#banner.rage .t { color: #ff5a2a; font-size: calc(var(--u) * 9); }
#banner.caught .t { color: #7aa8ff; font-size: calc(var(--u) * 14); letter-spacing: .2em; }
#countdown { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 18); -webkit-text-stroke: calc(var(--u) * 1) var(--ink); white-space: nowrap; opacity: 0; }
#countdown.on { opacity: 1; animation: pop .5s ease-out; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
#keys { position: absolute; left: 50%; bottom: calc(var(--u) * 1.2); transform: translateX(-50%); font-size: calc(var(--u) * 1.55); white-space: nowrap; background: rgba(0,0,0,.45); padding: calc(var(--u) * .5) calc(var(--u) * 2); border-radius: 99px; opacity: .85; }
body.is-touch #keys, body.is-touch #cross { display: none; }

/* モード別の表示 */
body:not([data-mode="play"]) #me, body:not([data-mode="play"]) #keys, body:not([data-mode="play"]) #cross, body:not([data-mode="play"]) #arrest { display: none !important; }
body[data-mode="attract"] #mobBox, body[data-mode="attract"] #dmgBox, body[data-mode="attract"] #topbar, body[data-mode="attract"] #msgs, body[data-mode="attract"] #chargeMark { display: none !important; }
body[data-mode="attract"] #minimap { opacity: .7; top: auto; bottom: calc(var(--u) * 3); left: calc(var(--u) * 3); right: auto; width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
body[data-mode="loading"] #hud { display: none; }
body[data-mode="result"] #msgs, body[data-mode="result"] #banner { display: none; }

/* タイトル (デモ) */
#title { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode="attract"] #title { display: block; }
/* 共通ルール13: デモ中は下中央に小さな案内だけ (ロゴ・説明は出さない) */
#title .press { position: absolute; left: 50%; bottom: calc(var(--u) * 3); transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 1.4); white-space: nowrap; font-size: calc(var(--u) * 2.6); letter-spacing: .12em; color: rgba(255,255,255,.9); background: rgba(0,0,0,.45); padding: calc(var(--u) * .6) calc(var(--u) * 2.2); border-radius: 99px; }
#title .press > span:not(.dtag) { animation: blink 1s infinite; }
#title .press .dtag { font-size: calc(var(--u) * 2); letter-spacing: .15em; color: #fff; background: #c8401e; padding: calc(var(--u) * .3) calc(var(--u) * 1.2); border-radius: 99px; }
#title .tc { display: none; } body.is-touch #title .tc { display: inline; } body.is-touch #title .pc { display: none; }
#hubLink, #quitBtn { position: absolute; z-index: 6; pointer-events: auto; font: inherit; font-size: calc(var(--u) * 2.3); color: #fff; text-decoration: none; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.55); border-radius: 99px; padding: calc(var(--u) * .7) calc(var(--u) * 2); cursor: pointer; }
#hubLink { top: calc(var(--u) * 2); left: calc(var(--u) * 2); }
#quitBtn { display: none; top: calc(var(--u) * 29); right: calc(var(--u) * 2); opacity: .85; }
body[data-mode="play"] #quitBtn, body[data-mode="result"] #quitBtn, body[data-mode="caught"] #quitBtn { display: block; }

/* 結果 */
#result { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(8,8,18,.6); z-index: 4; pointer-events: none; }
#result.on { display: flex; }
#result .box { text-align: center; padding: calc(var(--u) * 2.4) calc(var(--u) * 5); background: rgba(16,12,20,.78); border: calc(var(--u) * .4) solid rgba(255,255,255,.3); border-radius: calc(var(--u) * 2); max-height: 96vh; overflow: auto; }
#result .h { font-size: calc(var(--u) * 9); letter-spacing: .3em; padding-left: .3em; color: #8ab8ff; -webkit-text-stroke: calc(var(--u) * .8) var(--ink); paint-order: stroke fill; line-height: 1.1; }
#result .rank { font-size: calc(var(--u) * 3.6); color: var(--gold); margin: calc(var(--u) * .6) 0 calc(var(--u) * 1.4); }
#result table { margin: 0 auto; border-collapse: collapse; font-size: calc(var(--u) * 2.6); }
#result th { text-align: right; padding: calc(var(--u) * .3) calc(var(--u) * 2.4) calc(var(--u) * .3) 0; color: #d8c8c0; font-weight: 700; }
#result td { text-align: left; color: #fff; font-variant-numeric: tabular-nums; }
#result td.big { font-size: calc(var(--u) * 4); color: var(--orange); }
#result .best { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.4); color: #ffe07a; }
#result .next { margin-top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.4); animation: blink 1s infinite; }
#result .tc { display: none; } body.is-touch #result .tc { display: inline; } body.is-touch #result .pc { display: none; }

/* タッチ操作 */
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #1c1418; font-size: 4vmin; z-index: 10; text-align: center; padding: 4vmin; }
#touch { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 5; }
body.is-touch[data-mode="play"] #touch { display: block; }
body.is-touch #me { bottom: auto; top: calc(var(--u) * 16); width: calc(var(--u) * 30); }
body.is-touch #quitBtn { top: calc(var(--u) * 2); right: calc(var(--u) * 29); }
body.is-touch #dmgBox { top: calc(var(--u) * 8.6); }
body.is-touch #arrest { top: 22%; }
#stick { position: absolute; left: max(4vmin, env(safe-area-inset-left)); bottom: max(4vmin, env(safe-area-inset-bottom)); width: 30vmin; height: 30vmin; border-radius: 50%; border: .6vmin solid rgba(255,255,255,.7); background: rgba(20,20,30,.35); pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; }
#knob { width: 12vmin; height: 12vmin; border-radius: 50%; background: rgba(255,255,255,.55); border: .5vmin solid #fff; }
#camPad { position: absolute; left: 36%; right: 0; top: 0; bottom: 0; pointer-events: auto; touch-action: none; }
#touch .act { position: absolute; right: max(2.5vmin, env(safe-area-inset-right)); bottom: max(2.5vmin, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, 14vmin) 23vmin; grid-template-rows: auto auto auto; gap: 1.8vmin; align-items: end; justify-items: center; }
#touch button { pointer-events: auto; touch-action: none; border: .5vmin solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(20,24,34,.5); color: #fff; font: inherit; font-weight: 900; line-height: 1.1; padding: 0; }
#touch button.on { background: rgba(255,210,80,.75); color: #222; transform: scale(.94); }
#touch .sm { width: 11.5vmin; height: 11.5vmin; font-size: 2.3vmin; }
#touch .md { width: 14vmin; height: 14vmin; font-size: 2.5vmin; }
#touch .big { width: 23vmin; height: 23vmin; font-size: 3.6vmin; background: rgba(200,50,40,.55); }
#touch [data-k="rampage"] { grid-column: 1; grid-row: 1; background: rgba(220,90,20,.5); }
#touch [data-k="command"] { grid-column: 2; grid-row: 1; background: rgba(200,160,30,.5); }
#touch [data-k="dash"] { grid-column: 3; grid-row: 1; }
#touch [data-k="throw"] { grid-column: 1; grid-row: 2 / span 2; align-self: center; background: rgba(230,110,30,.45); }
#touch [data-k="jump"] { grid-column: 2; grid-row: 3; }
#touch [data-k="attack"] { grid-column: 3; grid-row: 2 / span 2; }
#rotate { display: none; position: fixed; inset: 0; z-index: 20; background: #1c1418; color: #fff; align-items: center; justify-content: center; font-size: 6vw; text-align: center; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

/* ゲームパッド */
.gp, .gpp { display: none; }
body.is-pad .gp { display: inline; } body.is-pad .kb { display: none; }
body.has-pad #title .gpp { display: inline; } body.is-pad #title .pc { display: none; }
#sndHint { display: none; position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); font-size: calc(var(--u) * 2); background: rgba(0,0,0,.6); padding: calc(var(--u) * .6) calc(var(--u) * 1.6); border-radius: 99px; }
body.muted[data-mode="attract"] #sndHint { display: block; bottom: calc(var(--u) * 3); }