:root {
  color-scheme: dark;
  --navy: #071222;
  --panel: rgba(8, 18, 34, .82);
  --line: rgba(201, 229, 255, .2);
  --cyan: #7de4ff;
  --orange: #ff9a4c;
  --red: #ff5b57;
  --ink: #eaf4ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #050b15; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; }
body { overflow: hidden; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#app { min-height: 100svh; display: grid; place-items: center; padding: 16px; }
.game-shell { width: min(1280px, 100%); aspect-ratio: 16 / 9; position: relative; overflow: hidden; border: 1px solid rgba(163, 222, 255, .25); background: #0b1727; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 40px rgba(77, 168, 215, .12); }
#game { width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
.hud { position: absolute; inset: 0 0 auto; min-height: 92px; padding: 16px 20px 12px; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 16px; pointer-events: none; background: linear-gradient(180deg, rgba(4,11,22,.88), rgba(4,11,22,.35), transparent); }
.hud-cluster { min-width: 0; position: relative; }
.hud-cluster.center { text-align: center; padding-top: 8px; }
.hud-cluster.right { display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px; }
.brand-mark { font-size: 12px; letter-spacing: .13em; font-weight: 900; color: var(--cyan); }
.brand-mark span { color: rgba(234,244,255,.54); font-size: 9px; }
.stat-row { display: grid; grid-template-columns: 30px minmax(80px, 180px) 30px; gap: 7px; align-items: center; margin-top: 8px; font-size: 10px; letter-spacing: .1em; }
.stat-row b { font-size: 10px; color: var(--ink); text-align: right; }
.bar, .progress { height: 6px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.36); overflow: hidden; }
.bar i, .progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff675f, #ffb15c); transform-origin: left; }
.bar.cyan i { background: linear-gradient(90deg, #38bfe9, #a9f5ff); }
#stage-label { font-size: 11px; letter-spacing: .16em; color: var(--orange); font-weight: 900; }
.progress { margin: 8px auto 4px; max-width: 240px; height: 5px; }
.progress i { background: linear-gradient(90deg, var(--orange), #ffe2a4); }
.hud small { color: rgba(234,244,255,.72); font-size: 10px; letter-spacing: .04em; }
.score-label { font-size: 9px; letter-spacing: .15em; color: rgba(234,244,255,.63); padding-top: 5px; }
.score-label strong { color: var(--ink); font-size: 16px; letter-spacing: .08em; margin-left: 5px; }
.combo-label { color: var(--cyan); font-size: 11px; font-weight: 900; padding-top: 8px; min-width: 68px; }
.icon-btn { pointer-events: auto; width: 30px; height: 30px; background: rgba(16, 34, 52, .78); border: 1px solid var(--line); font-size: 14px; color: var(--cyan); }
.icon-btn:hover, .icon-btn:focus-visible { background: rgba(60, 135, 171, .45); }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: linear-gradient(90deg, rgba(4, 10, 20, .74), rgba(4, 10, 20, .35)); }
.overlay-card { width: min(560px, 100%); padding: clamp(28px, 5vw, 56px); background: linear-gradient(145deg, rgba(8,18,33,.88), rgba(10,24,39,.66)); border: 1px solid rgba(167,221,255,.27); box-shadow: 0 20px 70px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.title-card { margin-right: auto; }
.result-card { text-align: center; width: min(520px, 100%); }
.eyebrow { color: var(--cyan); font-size: 10px; letter-spacing: .28em; font-weight: 900; }
h1, h2 { margin: 12px 0 10px; line-height: .98; letter-spacing: -.055em; }
h1 { font-size: clamp(42px, 7vw, 86px); }
h1 em { font-style: normal; color: var(--orange); }
h2 { font-size: clamp(30px, 5vw, 58px); }
.lead { margin: 0 0 24px; color: rgba(234,244,255,.76); font-size: 14px; letter-spacing: .12em; }
.difficulty { display: flex; gap: 8px; margin-bottom: 18px; }
.difficulty button, .secondary-btn { flex: 1; padding: 11px 10px; background: rgba(23, 46, 67, .75); border: 1px solid rgba(168, 213, 237, .2); color: rgba(234,244,255,.66); font-size: 11px; letter-spacing: .16em; }
.difficulty button.selected, .difficulty button:hover { color: var(--ink); background: rgba(210, 100, 54, .35); border-color: rgba(255, 163, 94, .8); }
.primary-btn { display: inline-flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 18px; color: #08101b; background: linear-gradient(100deg, #f29552, #ffd08f); font-weight: 900; letter-spacing: .13em; box-shadow: 0 8px 20px rgba(240, 143, 72, .24); }
.primary-btn span { font-size: 22px; line-height: 12px; }
.primary-btn:hover, .primary-btn:focus-visible { filter: brightness(1.12); transform: translateY(-1px); }
.control-hint { margin-top: 18px; color: rgba(234,244,255,.48); font-size: 10px; line-height: 1.7; }
.title-foot { margin-top: 30px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 12px; color: rgba(234,244,255,.34); font-size: 8px; letter-spacing: .15em; }
.result-score { margin: 24px auto; display: inline-flex; flex-direction: column; gap: 5px; color: rgba(234,244,255,.5); font-size: 10px; letter-spacing: .2em; }
.result-score strong { color: var(--orange); font-size: 34px; letter-spacing: .08em; }
.result-actions { display: flex; gap: 10px; }
.result-actions .primary-btn, .result-actions .secondary-btn { width: auto; flex: 1; }
.toast { position: absolute; left: 50%; bottom: 15%; transform: translate(-50%, 20px); padding: 10px 18px; color: var(--ink); background: rgba(6, 18, 31, .86); border: 1px solid rgba(125, 228, 255, .38); font-size: 13px; font-weight: 900; letter-spacing: .16em; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-controls { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 16px max(14px, env(safe-area-inset-bottom)); pointer-events: none; background: linear-gradient(0deg, rgba(4,10,20,.72), transparent); }
.move-pad { width: 145px; height: 115px; position: relative; pointer-events: auto; }
.touch-btn { position: absolute; width: 46px; height: 42px; border: 1px solid rgba(164, 222, 245, .3); background: rgba(12, 32, 49, .74); color: var(--cyan); font-size: 18px; }
.touch-btn:active, .action-btn:active { background: rgba(214, 112, 62, .7); transform: scale(.96); }
.touch-btn.up { left: 50px; top: 0; }.touch-btn.left { left: 0; top: 45px; }.touch-btn.down { left: 50px; top: 45px; }.touch-btn.right { left: 100px; top: 45px; }
.action-pad { display: flex; gap: 8px; pointer-events: auto; }
.action-btn { width: 74px; height: 74px; border-radius: 50%; background: rgba(17, 40, 58, .82); border: 1px solid rgba(164, 222, 245, .38); display: grid; place-items: center; align-content: center; gap: 3px; }
.action-btn span { font-size: 9px; letter-spacing: .13em; color: var(--ink); }.action-btn b { font-size: 17px; color: var(--cyan); }.action-btn.slash { border-color: rgba(255, 155, 81, .62); }.action-btn.slash b { color: var(--orange); }

@media (max-width: 760px), (pointer: coarse) {
  #app { padding: 0; min-height: 100svh; }
  .game-shell { width: 100vw; max-width: none; height: 100svh; aspect-ratio: auto; border: 0; }
  .hud { min-height: 82px; padding: 12px 12px 8px; grid-template-columns: 1.2fr .8fr; gap: 8px; }
  .hud-cluster.center { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); width: 45%; padding: 0; }
  .hud-cluster.right { gap: 5px; }.score-label { display: none; }.combo-label { font-size: 9px; min-width: auto; }
  .brand-mark { font-size: 10px; }.brand-mark span { display: none; }.stat-row { margin-top: 5px; grid-template-columns: 25px minmax(55px, 110px) 25px; gap: 4px; font-size: 8px; }.bar { height: 5px; }
  .overlay { align-items: end; padding: 16px; padding-bottom: 150px; background: linear-gradient(0deg, rgba(4, 10, 20, .85), rgba(4, 10, 20, .12)); }
  .overlay-card { padding: 24px 20px; }.title-card { margin: 0; }.title-card h1 { font-size: clamp(36px, 12vw, 64px); }.lead { font-size: 11px; margin-bottom: 16px; }.title-foot { margin-top: 18px; }.control-hint { font-size: 9px; margin-top: 12px; }
  .result-card { align-self: center; }.result-actions { flex-direction: column; }.result-actions .primary-btn, .result-actions .secondary-btn { width: 100%; }
  .mobile-controls { display: flex; }
  .toast { bottom: 28%; font-size: 11px; white-space: nowrap; }
}

@media (orientation: portrait) and (max-width: 760px) {
  .game-shell::after { content: "横向きにすると出撃できます"; position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; text-align: center; background: rgba(5, 12, 23, .96); color: var(--ink); font-weight: 900; letter-spacing: .12em; z-index: 20; }
}