/* HUD / オーバーレイ。サイズは --u (画面短辺の 1%) 基準 */
:root { --u: 1vmin; --gold: #ffd257; --ink: #15161c; --green: #3f7a4a; }
* { 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; }
.stroke, #banner, #countdown, #topbar, #msgs div, #me .nm, .logo .l1, .logo .l2 { paint-order: stroke fill; }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #fff; }
#hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 45%, rgba(220,20,20,.6)); transition: opacity .3s; }

/* 兵士一覧 (左上) */
#squad { position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 2); display: flex; flex-direction: column; gap: calc(var(--u) * .8); pointer-events: auto; }
.mem { position: relative; width: calc(var(--u) * 30); padding: calc(var(--u) * .7) calc(var(--u) * 1.2) calc(var(--u) * .8) calc(var(--u) * 6.4); background: rgba(12,14,20,.62); border: calc(var(--u) * .3) solid rgba(255,255,255,.25); border-radius: calc(var(--u) * 1); cursor: pointer; }
.mem.on { border-color: var(--gold); background: rgba(60,48,12,.7); }
.mem .key { position: absolute; left: calc(var(--u) * 1); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: calc(var(--u) * .6); display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 2.4); color: #222; }
.mem .n { font-size: calc(var(--u) * 2); display: flex; justify-content: space-between; gap: calc(var(--u) * 1); white-space: nowrap; }
.mem .n em { font-style: normal; font-size: calc(var(--u) * 1.5); color: #cfd6e6; font-weight: 700; }
.mem .bars { display: flex; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * .4); }
.mem .bars div { flex: 1; height: calc(var(--u) * .9); background: rgba(0,0,0,.6); border-radius: 99px; overflow: hidden; }
.mem .bars i { display: block; height: 100%; width: 100%; }
.mem .bars .h i { background: #6fe07a; } .mem .bars .g i { background: #7ac8ff; }
.mem.down { opacity: .55; }
.mem.danger { animation: blinkB .4s infinite; }
@keyframes blinkB { 50% { border-color: #ff4a3a; } }

/* 上中央 */
#topbar { position: absolute; top: calc(var(--u) * 1.6); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 3); align-items: baseline; font-size: calc(var(--u) * 2.6); -webkit-text-stroke: calc(var(--u) * .4) var(--ink); white-space: nowrap; }
#topbar b { color: var(--gold); font-size: calc(var(--u) * 3.6); }
#clock { font-variant-numeric: tabular-nums; }
#bosses { position: absolute; top: calc(var(--u) * 6.6); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: calc(var(--u) * .6); align-items: center; }
.boss { width: calc(var(--u) * 50); font-size: calc(var(--u) * 1.9); text-align: center; -webkit-text-stroke: calc(var(--u) * .3) var(--ink); paint-order: stroke fill; }
.boss .bar { height: calc(var(--u) * 1.4); margin-top: calc(var(--u) * .3); }
.boss .bar i { background: linear-gradient(#ff8a6a, #c8321e); }
.boss .bar.armor { height: calc(var(--u) * .8); }
.boss .bar.armor i { background: linear-gradient(#f2f0e2, #a8a690); }
.boss.dead { opacity: .4; }

#minimap { position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; border: calc(var(--u) * .4) solid rgba(255,255,255,.6); background: rgba(10,20,10,.4); }

/* 操作中の兵士 */
#me { position: absolute; left: calc(var(--u) * 2); bottom: calc(var(--u) * 2); width: calc(var(--u) * 36); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); background: rgba(12,14,20,.6); border-radius: calc(var(--u) * 1.2); border: calc(var(--u) * .3) solid rgba(255,255,255,.3); }
#me .nm { font-size: calc(var(--u) * 2.8); -webkit-text-stroke: calc(var(--u) * .3) var(--ink); margin-bottom: calc(var(--u) * .4); }
#me .row { display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 1.8); margin-top: calc(var(--u) * .5); }
#me .row span { width: calc(var(--u) * 4.4); }
#me .row b { color: var(--gold); font-size: calc(var(--u) * 2); min-width: calc(var(--u) * 4); }
.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: 100%; transition: width .1s; }
.bar.hp i { background: linear-gradient(#8af39a, #34b44c); }
.bar.gas i { background: linear-gradient(#a6dcff, #3a8ed8); }
.bar.blade i { background: linear-gradient(#f4f6fa, #9aa4b8); }
.bar i.low { background: linear-gradient(#ff8a7a, #d02a2a); animation: blink .5s infinite; }
#me .spears { letter-spacing: .1em; }
#me .st { font-size: calc(var(--u) * 1.8); color: #ffb04a; min-height: 1.2em; margin-top: calc(var(--u) * .4); }
@keyframes blink { 50% { filter: brightness(1.7); } }

/* 照準 / ロックオン */
#cross { position: absolute; left: 50%; top: 42%; width: calc(var(--u) * 3); height: calc(var(--u) * 3); transform: translate(-50%, -50%); opacity: .7; }
#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%); }
#cross.hit::before, #cross.hit::after { background: #6fffa0; }
#lock { position: absolute; left: 0; top: 0; display: none; transform: translate(-50%, -50%); }
#lock .ring { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border: calc(var(--u) * .5) solid #ff4a3a; border-radius: 50%; box-shadow: 0 0 calc(var(--u) * 1) rgba(255,60,40,.8); animation: spin 2s linear infinite; border-style: dashed; }
#lock.inrange .ring { border-color: #ffd257; border-style: solid; }
#lock .tring { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border: calc(var(--u) * .4) solid #fff; border-radius: 50%; transform: translate(-50%, -50%) scale(2); opacity: 0; }
#lock .lbl { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: calc(var(--u) * .6); white-space: nowrap; font-size: calc(var(--u) * 1.9); -webkit-text-stroke: calc(var(--u) * .3) var(--ink); paint-order: stroke fill; }
@keyframes spin { to { transform: rotate(360deg); } }
#mash { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); display: none; text-align: center; font-size: calc(var(--u) * 4); color: #ff6a4a; -webkit-text-stroke: calc(var(--u) * .5) var(--ink); paint-order: stroke fill; animation: blink .3s infinite; }
#mash .bar { width: calc(var(--u) * 30); margin: calc(var(--u) * 1) auto 0; height: calc(var(--u) * 2); }
#mash .bar i { background: #ffd257; width: 0; }

/* メッセージ / バナー */
#msgs { position: absolute; left: 50%; top: calc(var(--u) * 17); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); }
#msgs div { font-size: calc(var(--u) * 2.6); -webkit-text-stroke: calc(var(--u) * .4) var(--ink); white-space: nowrap; animation: msgIn .25s ease-out; transition: opacity .5s; }
#msgs div.warn { color: #ff9a5a; } #msgs div.bad { color: #ff5a4a; font-size: calc(var(--u) * 3.2); } #msgs div.good { color: #8affa0; }
@keyframes msgIn { from { transform: translateY(-40%); opacity: 0; } }
#banner { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) scale(.6); font-size: calc(var(--u) * 7.5); opacity: 0; white-space: nowrap; -webkit-text-stroke: calc(var(--u) * .8) var(--ink); transition: .2s cubic-bezier(.2, 2, .4, 1); text-align: center; }
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner small { display: block; font-size: .4em; letter-spacing: .2em; color: #ffe6b0; }
#banner.boss { color: #ff4a2a; font-size: calc(var(--u) * 9); }
#banner.good { color: var(--gold); }
#countdown { display: none; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 20); -webkit-text-stroke: calc(var(--u) * 1) var(--ink); paint-order: stroke fill; }
#keys { position: absolute; left: 50%; bottom: calc(var(--u) * 1.2); transform: translateX(-50%); font-size: calc(var(--u) * 1.6); 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"]):not([data-mode="ready"]) #me, body:not([data-mode="play"]):not([data-mode="ready"]) #keys,
body:not([data-mode="play"]):not([data-mode="ready"]) #cross, body:not([data-mode="play"]):not([data-mode="ready"]) #lock { display: none !important; }
body[data-mode="attract"] #squad { top: calc(var(--u) * 9); pointer-events: none; opacity: .8; }
body[data-mode="attract"] #minimap { opacity: .7; }
body[data-mode="attract"] #msgs { display: none; }
body[data-mode="attract"] #banner { top: 58%; }

/* タイトル (デモ) */
#title { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode="attract"] #title { display: block; }
#title .demo { position: absolute; bottom: calc(var(--u) * 3); right: calc(var(--u) * 3); font-size: calc(var(--u) * 2.6); letter-spacing: .3em; color: var(--gold); animation: blink 1.2s infinite; -webkit-text-stroke: calc(var(--u) * .3) var(--ink); paint-order: stroke fill; }
#title .logo { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.logo .l0 { font-size: calc(var(--u) * 2.8); letter-spacing: .3em; color: #f0e6d0; -webkit-text-stroke: calc(var(--u) * .4) #1a1010; paint-order: stroke fill; }
.logo .l1 { font-size: calc(var(--u) * 12); color: #fff; -webkit-text-stroke: calc(var(--u) * 1.4) #5a1010; letter-spacing: .06em; text-shadow: 0 calc(var(--u) * 1) 0 rgba(0,0,0,.6); line-height: 1.15; }
.logo .l2 { font-size: calc(var(--u) * 4.4); letter-spacing: .5em; color: #ffd257; -webkit-text-stroke: calc(var(--u) * .5) #1a1010; }
#title .press { position: absolute; left: 50%; bottom: calc(var(--u) * 14); transform: translateX(-50%); font-size: calc(var(--u) * 4.4); animation: blink 1s infinite; -webkit-text-stroke: calc(var(--u) * .5) #1a1010; paint-order: stroke fill; }
#title .tkeys { position: absolute; left: 50%; bottom: calc(var(--u) * 7); 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 { display: none; } body.is-touch #title .tkeys { 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) * 30); right: calc(var(--u) * 2); opacity: .8; }
body[data-mode="ready"] #quitBtn, body[data-mode="play"] #quitBtn, body[data-mode="result"] #quitBtn { display: block; }

/* 結果 */
#result { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); background: rgba(8,8,14,.66); pointer-events: none; text-align: center; z-index: 4; }
#result.show { display: flex; }
#result .rt { font-size: calc(var(--u) * 12); letter-spacing: .1em; -webkit-text-stroke: calc(var(--u) * 1) #1a1018; paint-order: stroke fill; }
#result .rt.win { color: #ffd257; } #result .rt.lose { color: #ff5a4a; }
#result .rs { font-size: calc(var(--u) * 3.2); }
#result .rg { display: grid; grid-template-columns: auto auto; gap: calc(var(--u) * .5) calc(var(--u) * 3); font-size: calc(var(--u) * 2.8); text-align: right; margin-top: calc(var(--u) * 1); }
#result .rg b { color: var(--gold); text-align: left; }
#result .rank { font-size: calc(var(--u) * 3.6); } #result .rank b { font-size: calc(var(--u) * 10); 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: #20242c; 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, body.is-touch[data-mode="ready"] #touch { display: block; }
body.is-touch #me { left: auto; right: calc(var(--u) * 2); bottom: auto; top: calc(var(--u) * 30); width: calc(var(--u) * 28); transform-origin: top right; }
body.is-touch #quitBtn { top: calc(var(--u) * 2); right: calc(var(--u) * 30); }
body.is-touch #squad .mem { width: calc(var(--u) * 26); }
#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(3, 14vmin) 22vmin; 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: 11vmin; height: 11vmin; font-size: 2.3vmin; }
#touch .md { width: 13.5vmin; height: 13.5vmin; font-size: 2.4vmin; }
#touch .big { width: 21vmin; height: 21vmin; font-size: 4vmin; background: rgba(200,50,40,.55); grid-column: 4; grid-row: 2 / span 2; }
#touch [data-k="lock"] { grid-column: 1; grid-row: 1; } #touch [data-k="part"] { grid-column: 2; grid-row: 1; } #touch [data-k="spear"] { grid-column: 3; grid-row: 1; background: rgba(200,140,40,.5); }
#touch [data-k="hook"] { grid-column: 1; grid-row: 3; } #touch [data-k="boost"] { grid-column: 2; grid-row: 3; } #touch [data-k="jump"] { grid-column: 3; grid-row: 3; }
#rotate { display: none; position: fixed; inset: 0; z-index: 20; background: #20242c; color: #fff; align-items: center; justify-content: center; font-size: 6vw; text-align: center; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }
body[data-mode="result"] #msgs, body[data-mode="result"] #banner, body[data-mode="result"] #bosses { display: none; }

/* ゲームパッド: 最後にパッドを使ったら操作説明をパッド用に (has-pad = 接続中) */
.gp, .gpp { display: none; }
body.is-pad .gp { display: inline; } body.is-pad .kb { display: none; }
body.has-pad #title .gpp { display: inline; margin-left: 1em; } body.is-pad #title .pc { display: none; } body.is-pad #title .gpp { margin-left: 0; }
body.is-pad #keys, body.is-pad #title .tkeys { display: block; }
#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.snd-blocked #sndHint { display: block; }