/* HUD/オーバーレイ。サイズは --u (画面短辺の 1%) 基準 */
:root { --u: 1vmin; --gold: #ffcf3f; --ink: #1a1018; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; user-select: none; -webkit-user-select: none;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; font-weight: 900; color: #fff; }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; overflow: hidden; background: #000; }
#gl { width: 100%; height: 100%; display: block; }
#hud { position: absolute; inset: 0; pointer-events: none; }
.stroke, #banner, #combo, #countdown, #stats, #foes, #hpbox .lbl { -webkit-text-stroke: calc(var(--u) * .4) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .3) 0 rgba(0,0,0,.4); }

/* 巨像 HP / RAGE */
#hpbox { position: absolute; top: calc(var(--u) * 2.4); left: calc(var(--u) * 2.4); width: calc(var(--u) * 42); }
#hpbox .lbl { font-size: calc(var(--u) * 2.6); letter-spacing: .1em; }
.bar { position: relative; height: calc(var(--u) * 2.8); background: rgba(0,0,0,.55); border: calc(var(--u) * .3) solid #000; border-radius: 99px; overflow: hidden; margin-top: calc(var(--u) * .5); }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(#7aff8a, #2fbf4a); transition: width .1s; }
.bar i.low { background: linear-gradient(#ff8a7a, #d02a2a); animation: blink .5s infinite; }
.bar.rage { height: calc(var(--u) * 1.8); }
.bar.rage i { width: 0; background: linear-gradient(90deg, #ffb13a, #ff4a2a); }
.bar.rage em { position: absolute; left: calc(var(--u) * 1.2); top: 50%; transform: translateY(-50%); font-style: normal; font-size: calc(var(--u) * 1.3); letter-spacing: .15em; opacity: .9; }
#hpbox.rampage .bar.rage { box-shadow: 0 0 calc(var(--u) * 1.5) #ff6a2a; animation: blink .4s infinite; }
@keyframes blink { 50% { filter: brightness(1.6); } }

/* 人間の残り / 王城 */
#foes { position: absolute; top: calc(var(--u) * 2); left: 50%; transform: translateX(-50%); text-align: center; }
#foes .foe { font-size: calc(var(--u) * 3.4); }
#foes .foe b { font-size: calc(var(--u) * 7); color: var(--gold); font-variant-numeric: tabular-nums; }
#foes .castle { font-size: calc(var(--u) * 2.2); display: flex; align-items: center; gap: calc(var(--u) * 1); justify-content: center; }
.bar.castle { width: calc(var(--u) * 24); height: calc(var(--u) * 2); margin: 0; }
.bar.castle i { background: linear-gradient(#ffe27a, #e09a1a); }
#stats { position: absolute; top: calc(var(--u) * 2.4); right: calc(var(--u) * 2.4); text-align: right; font-size: calc(var(--u) * 2.6); line-height: 1.35; }
#stats b { font-size: calc(var(--u) * 3.6); color: var(--gold); font-variant-numeric: tabular-nums; margin-left: .3em; }
#minimap { position: absolute; left: calc(var(--u) * 2.4); bottom: calc(var(--u) * 2.4); width: calc(var(--u) * 22); height: calc(var(--u) * 22); border: calc(var(--u) * .4) solid rgba(255,255,255,.75); border-radius: 8%; opacity: .92; }

/* 技スロット(PC) */
#slots { position: absolute; left: 50%; bottom: calc(var(--u) * 2.4); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 1.4); }
.slot { position: relative; overflow: hidden; width: calc(var(--u) * 17); padding: calc(var(--u) * 1.2) 0; text-align: center; font-size: calc(var(--u) * 2.4); background: rgba(10,10,20,.6); border: calc(var(--u) * .3) solid rgba(255,255,255,.8); border-radius: calc(var(--u) * 1.2); --cd: 0%; }
.slot::after, #touch button .cdf { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cd); background: rgba(0,0,0,.6); }
.slot .key { display: block; font-size: calc(var(--u) * 1.5); color: var(--gold); letter-spacing: .1em; }
body.is-touch #slots { display: none; }
body:not([data-mode="play"]):not([data-mode="ready"]):not([data-mode="winning"]):not([data-mode="losing"]) #slots { display: none; }

/* バナー / コンボ / カウントダウン */
#banner { position: absolute; top: 24%; left: 50%; transform: translate(-50%, -50%) scale(.5); font-size: calc(var(--u) * 6.5); opacity: 0; white-space: nowrap; transition: .18s cubic-bezier(.2, 2, .4, 1); }
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner.big { font-size: calc(var(--u) * 8); color: var(--gold); }
#banner.warn { color: #ff8a5a; font-size: calc(var(--u) * 5); }
#banner.rage { color: #ff5a2a; font-size: calc(var(--u) * 10); }
#combo { position: absolute; top: 38%; right: 8%; font-size: calc(var(--u) * 4); color: #fff; opacity: 0; transform-origin: right center; }
#combo b { font-size: calc(var(--u) * 9); color: #ff9a3a; }
#combo.on { opacity: 1; } #combo.pop { animation: pop .25s cubic-bezier(.2, 2, .4, 1); }
#countdown { display: none; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 22); color: #fff; }
#countdown.pop { animation: pop .3s cubic-bezier(.2, 2, .4, 1); }
@keyframes pop { from { scale: .3; } to { scale: 1; } }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 40%, rgba(255,30,30,.55)); }
#flash.go { animation: flashA .3s ease-out; } @keyframes flashA { from { opacity: 1; } to { opacity: 0; } }

/* タイトル(デモ) */
#title { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode="attract"] #title { display: block; }
body[data-mode="attract"] #hud #foes, body[data-mode="attract"] #hud #stats { opacity: .75; }
#title .demo { position: absolute; top: calc(var(--u) * 14); right: calc(var(--u) * 3); font-size: calc(var(--u) * 3); letter-spacing: .3em; color: var(--gold); animation: blink 1.2s infinite; }
#title .logo { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.logo .l1 { font-size: calc(var(--u) * 13); color: #ffd84a; -webkit-text-stroke: calc(var(--u) * 1.1) #3a1008; paint-order: stroke fill; text-shadow: 0 calc(var(--u) * 1) 0 rgba(0,0,0,.5), 0 0 calc(var(--u) * 3) rgba(255,120,30,.6); letter-spacing: .08em; }
.logo .l2 { font-size: calc(var(--u) * 4.6); letter-spacing: .4em; color: #fff; -webkit-text-stroke: calc(var(--u) * .5) #1a1018; paint-order: stroke fill; }
.logo .l3 { margin-top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.6); color: #ffe6c0; -webkit-text-stroke: calc(var(--u) * .4) #1a1018; paint-order: stroke fill; }
#title .press { position: absolute; left: 50%; bottom: calc(var(--u) * 13); transform: translateX(-50%); font-size: calc(var(--u) * 4.4); animation: blink 1s infinite; -webkit-text-stroke: calc(var(--u) * .5) #1a1018; paint-order: stroke fill; }
#title .keys { position: absolute; left: 50%; bottom: calc(var(--u) * 3.5); transform: translateX(-50%); font-size: calc(var(--u) * 2); white-space: nowrap; background: rgba(0,0,0,.55); padding: calc(var(--u) * .8) calc(var(--u) * 2.4); border-radius: 99px; }
#title .tc { display: none; } body.is-touch #title .tc { display: inline; } body.is-touch #title .pc, body.is-touch .rp .pc { display: none; }
.rp .tc { display: none; } body.is-touch .rp .tc { display: inline; }
body.is-touch #title .keys { display: none; }
#hubLink, #quitBtn { position: absolute; z-index: 5; pointer-events: auto; font: inherit; font-size: calc(var(--u) * 2.4); color: #fff; text-decoration: none; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.5); border-radius: 99px; padding: calc(var(--u) * .6) calc(var(--u) * 2); cursor: pointer; }
#hubLink { top: calc(var(--u) * 3); left: calc(var(--u) * 3); }
#quitBtn { display: none; top: calc(var(--u) * 17); right: calc(var(--u) * 2.4); opacity: .75; }
body[data-mode="ready"] #quitBtn, body[data-mode="play"] #quitBtn, body[data-mode="winning"] #quitBtn, body[data-mode="losing"] #quitBtn, body[data-mode="win"] #quitBtn, body[data-mode="lose"] #quitBtn { display: block; }
body[data-mode="attract"] #hud #hpbox { top: calc(var(--u) * 10); }

/* 結果 */
#result { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); background: rgba(10,6,16,.62); pointer-events: none; text-align: center; }
#result.show { display: flex; }
#result .rt { font-size: calc(var(--u) * 13); letter-spacing: .1em; -webkit-text-stroke: calc(var(--u) * 1) #1a1018; paint-order: stroke fill; }
#result .rt.win { color: #ffd84a; } #result .rt.lose { color: #ff6a5a; }
#result .rs { font-size: calc(var(--u) * 3.6); }
#result .rg { display: grid; grid-template-columns: auto auto; gap: calc(var(--u) * .6) calc(var(--u) * 3); font-size: calc(var(--u) * 3); text-align: right; margin-top: calc(var(--u) * 1); }
#result .rg b { color: var(--gold); text-align: left; font-size: calc(var(--u) * 3.6); }
#result .rank { font-size: calc(var(--u) * 4); } #result .rank b { font-size: calc(var(--u) * 11); color: var(--gold); }
#result .rp { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 2.6); animation: blink 1s infinite; }

/* タッチ操作 */
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #1a1420; 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 #touch { display: block; }
body.is-touch[data-mode="attract"] #touch, body.is-touch[data-mode="win"] #touch, body.is-touch[data-mode="lose"] #touch { display: none; }
#stick { position: absolute; left: max(4vmin, env(safe-area-inset-left)); bottom: max(4vmin, env(safe-area-inset-bottom)); width: 32vmin; height: 32vmin; border-radius: 50%; border: .6vmin solid rgba(255,255,255,.7); background: rgba(20,10,30,.35); pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; }
#knob { width: 13vmin; height: 13vmin; border-radius: 50%; background: rgba(255,255,255,.55); border: .5vmin solid #fff; }
#touch .act { position: absolute; right: max(3vmin, env(safe-area-inset-right)); bottom: max(3vmin, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 2vmin; flex-wrap: wrap; justify-content: flex-end; width: 58vmin; }
#touch button { position: relative; overflow: hidden; pointer-events: auto; touch-action: none; border: .6vmin solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(40,16,16,.5); color: #fff; font: inherit; font-weight: 900; --cd: 0%; }
#touch button b { position: relative; }
#touch button.on { background: rgba(255,200,40,.7); transform: scale(.94); }
#touch .big { order: 5; width: 25vmin; height: 25vmin; font-size: 4vmin; background: rgba(255,70,50,.5); }
#touch .sm { width: 16vmin; height: 16vmin; font-size: 2.6vmin; }
#rotate { display: none; position: fixed; inset: 0; z-index: 20; background: #1a1420; color: #fff; align-items: center; justify-content: center; font-size: 6vw; text-align: center; }


/* 登られ警告 */
#climbWarn { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); font-size: calc(var(--u) * 3.2); white-space: nowrap; opacity: 0; transition: opacity .15s; padding: calc(var(--u) * .6) calc(var(--u) * 2.4); border-radius: 99px; background: rgba(0,0,0,.55); border: calc(var(--u) * .3) solid #ffcf3f; }
#climbWarn.show { opacity: 1; }
#climbWarn.danger { border-color: #ff3a2a; background: rgba(120,0,0,.7); color: #fff; font-size: calc(var(--u) * 3.6); animation: blink .35s infinite; }

/* カメラ設定 */
#camBtn { position: absolute; z-index: 6; top: calc(var(--u) * 23); right: calc(var(--u) * 2.4); pointer-events: auto; font: inherit; font-size: calc(var(--u) * 2.2); color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.5); border-radius: 99px; padding: calc(var(--u) * .6) calc(var(--u) * 2); cursor: pointer; }
#camPanel { display: none; position: absolute; z-index: 7; top: calc(var(--u) * 29); right: calc(var(--u) * 2.4); width: calc(var(--u) * 48); max-height: 62%; overflow: auto; padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.6); background: rgba(10,10,24,.88); border: 1px solid rgba(255,255,255,.4); font-size: calc(var(--u) * 2); font-weight: 700; pointer-events: auto; }
#camPanel.open { display: block; }
#camPanel .ch { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 2.4); margin-bottom: calc(var(--u) * 1); }
#camPanel button { font: inherit; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * .5) calc(var(--u) * 1.2); cursor: pointer; font-size: calc(var(--u) * 1.9); }
#camPanel button.on { background: #ffcf3f; color: #222; }
#camPresets { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .8); margin-bottom: calc(var(--u) * 1.2); }
.crow { display: grid; grid-template-columns: 30% 1fr 12%; align-items: center; gap: calc(var(--u) * 1); margin: calc(var(--u) * .6) 0; }
.crow input { width: 100%; }
.crow b { text-align: right; color: #ffcf3f; }
.ch2 { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.6); opacity: .8; font-weight: 400; }
body[data-mode="win"] #camBtn, body[data-mode="lose"] #camBtn { display: none; }

@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }