:root {
  color-scheme: dark;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#10131a; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; overscroll-behavior:none; -webkit-text-size-adjust:100%; }
body { display:grid; place-items:center; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
button { border:0; font:inherit; -webkit-tap-highlight-color:transparent; }
#gameShell { position:relative; width:min(100vw,177.78vh); aspect-ratio:16/9; max-height:100vh; overflow:hidden; background:#7fd3ff; box-shadow:0 0 48px #0008; isolation:isolate; touch-action:none; overscroll-behavior:none; }
canvas { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; outline:none; image-rendering:auto; touch-action:none; }

/* HUD */
#hud { position:absolute; z-index:8; top:clamp(8px,1.5vw,20px); left:clamp(8px,1.5vw,20px); display:none; gap:10px; pointer-events:none; }
#gameShell.game-running #hud { display:flex; }
.pill { padding:8px 14px; border-radius:999px; background:#10131acc; border:1px solid #ffffff2d; color:#fff; font-weight:800; letter-spacing:.04em; backdrop-filter:blur(8px); text-shadow:0 2px 3px #0008; }

/* Title */
.title-screen { position:absolute; inset:0; z-index:30; overflow:hidden; background:linear-gradient(155deg,#8de1ff 0%,#d9f6ff 55%,#ffe8a6 100%); }
.title-screen.hidden { display:none; }
.title-screen::before { content:""; position:absolute; inset:auto -12% -34% -12%; height:62%; background:radial-gradient(ellipse at center,#62bd56 0 43%,#3a9145 44% 58%,transparent 59%); opacity:.9; }
.title-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#ffffff45 0%,transparent 48%,#ffffff16 100%); pointer-events:none; }
.title-glow { position:absolute; width:54%; aspect-ratio:1; right:-4%; top:-18%; border-radius:50%; background:radial-gradient(circle,#fff9 0%,#fff4 34%,transparent 69%); filter:blur(4px); }
.title-layout { position:relative; z-index:1; width:100%; height:100%; display:grid; grid-template-columns:minmax(360px,.93fr) minmax(360px,1.07fr); align-items:center; padding:clamp(26px,5vw,72px) clamp(30px,6vw,90px); }
.title-copy { align-self:center; padding-left:clamp(0px,2vw,26px); text-shadow:0 2px 0 #fff7; }
.title-kicker { margin-bottom:8px; font-size:clamp(10px,1vw,14px); font-weight:1000; letter-spacing:.18em; color:#24617b; }
.game-title { margin:0; color:#fff; font-size:clamp(52px,6.8vw,98px); line-height:.9; letter-spacing:-.06em; -webkit-text-stroke:clamp(1px,.16vw,3px) #244b5d; text-shadow:0 6px 0 #266985,0 12px 24px #245b6b45; }
.game-title span { color:#ffce3d; -webkit-text-stroke-color:#7a4b10; text-shadow:0 6px 0 #d47b1d,0 12px 24px #7a4b1045; }
.title-lead { margin:22px 0 18px; line-height:1.7; color:#17485e; font-size:clamp(14px,1.4vw,20px); font-weight:800; }
.title-buttons { display:grid; width:min(360px,100%); gap:12px; }
.menu-btn { min-height:54px; padding:12px 25px; border-radius:999px; font-weight:1000; letter-spacing:.03em; cursor:pointer; transition:transform .12s,filter .12s,box-shadow .12s; }
.menu-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.menu-btn:active { transform:translateY(3px); }
.menu-btn.primary { color:#2d2614; background:#ffce45; box-shadow:0 7px 0 #c89410,0 12px 24px #84550040; }
.menu-btn.primary:active { box-shadow:0 3px 0 #c89410,0 7px 15px #84550030; }
.menu-btn.secondary { color:#fff; background:#246b88; box-shadow:0 7px 0 #164558,0 12px 24px #16455840; }
.menu-btn.secondary:active { box-shadow:0 3px 0 #164558; }
.menu-btn.ghost { color:#dbeaf2; background:#ffffff10; border:1px solid #ffffff2c; box-shadow:none; }
.menu-btn.compact { min-height:46px; padding:9px 28px; }
.title-note { margin:16px 0 0; font-size:12px; font-weight:700; color:#2c6076aa; }
.title-art-wrap { height:95%; display:flex; justify-content:center; align-items:flex-end; pointer-events:none; }
#titleArt { display:block; width:min(95%,580px); height:96%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 18px 18px #18434b45); user-select:none; -webkit-user-drag:none; }
#titleArt.missing { display:none; }

/* Settings */
.settings-screen { position:absolute; inset:0; z-index:40; display:none; place-items:center; padding:20px; background:#07111bd9; backdrop-filter:blur(10px); }
.settings-screen.show { display:grid; }
.settings-card { width:min(650px,94vw); max-height:92%; overflow:auto; padding:clamp(20px,3vw,34px); border-radius:26px; color:#f5f8fc; background:linear-gradient(165deg,#17263af5,#0d1829f7); border:1px solid #ffffff24; box-shadow:0 24px 70px #000a; }
.settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.settings-eyebrow { color:#7bdcff; font-size:11px; font-weight:1000; letter-spacing:.2em; }
.settings-card h2 { margin:4px 0 0; font-size:clamp(24px,3vw,36px); }
.icon-btn { flex:0 0 auto; width:42px; height:42px; border-radius:50%; color:#fff; background:#ffffff12; font-size:27px; cursor:pointer; }
.controller-status { margin:20px 0 9px; padding:11px 14px; border-radius:12px; background:#07111a99; border:1px solid #ffffff16; color:#aeeaff; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.settings-help { margin:0 0 16px; color:#cbd8e5; font-size:14px; line-height:1.65; }
.binding-list { display:grid; gap:9px; }
.binding-row { display:grid; grid-template-columns:1fr minmax(180px,235px); align-items:center; gap:18px; padding:12px 14px; border-radius:15px; background:#ffffff08; border:1px solid #ffffff10; }
.binding-row strong { display:block; font-size:16px; }
.binding-row small { display:block; margin-top:3px; color:#94a7ba; font-size:12px; }
.binding-btn { min-height:45px; padding:8px 13px; border-radius:12px; cursor:pointer; color:#fff; background:#275d78; border:1px solid #68c9f25c; font-size:13px; font-weight:900; }
.binding-btn.listening { color:#312408; background:#ffcf45; border-color:#fff1a4; animation:pulseBinding .9s infinite alternate; }
@keyframes pulseBinding { to { filter:brightness(1.18); transform:scale(1.02); } }
.binding-hint { min-height:24px; margin:15px 2px 5px; color:#9eb5c9; font-size:13px; }
.settings-actions { margin-top:14px; display:flex; justify-content:space-between; gap:12px; }
.settings-actions .menu-btn { flex:1; }

/* End message */
.overlay { position:absolute; inset:0; z-index:25; display:grid; place-items:center; padding:24px; background:linear-gradient(#0c183255,#071222cc); opacity:0; visibility:hidden; transition:.2s; }
.overlay.show { opacity:1; visibility:visible; }
.card { width:min(560px,92vw); padding:28px; text-align:center; border-radius:24px; background:#111827e8; border:1px solid #ffffff2c; box-shadow:0 20px 60px #0008; }
.eyebrow { font-size:12px; font-weight:900; letter-spacing:.18em; opacity:.65; }
.card h1 { margin:.3em 0 .25em; font-size:clamp(28px,4vw,54px); }
.card p { line-height:1.65; color:#e8eef8; }
.end-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
.end-buttons .menu-btn { min-width:150px; }

/* Touch controls */
#touchControls { display:none; position:absolute; z-index:12; inset:0; pointer-events:none; touch-action:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.touch-left,.touch-right { position:absolute; bottom:calc(16px + var(--safe-b)); display:flex; gap:12px; align-items:flex-end; }
.touch-left { left:18px; }
.touch-right { right:18px; }
.touch { pointer-events:auto; touch-action:none; width:68px; height:68px; border-radius:50%; background:#1018279c; color:#fff; border:2px solid #ffffff55; font-weight:900; user-select:none; -webkit-user-select:none; backdrop-filter:blur(5px); box-shadow:0 5px 14px #0005; }
.touch.jump { width:82px; height:82px; background:#d93b45b5; }
.touch.attack { width:72px; height:72px; background:#f08b2dbd; font-size:13px; }
.touch.small { width:60px; height:60px; font-size:12px; }
.touch.pressed { transform:scale(.93); background:#ffffff44; }

@media (hover:none), (pointer:coarse) {
  #gameShell.game-running #touchControls { display:block; }
}
@media (max-width:760px), (max-height:560px) {
  .title-layout { grid-template-columns:1fr 1fr; padding:18px 24px; }
  .game-title { font-size:clamp(38px,8vw,68px); }
  .title-lead { margin:13px 0 12px; font-size:13px; }
  .title-note { display:none; }
  .menu-btn { min-height:44px; padding:9px 20px; }
  .binding-row { grid-template-columns:1fr minmax(150px,210px); padding:9px 11px; }
  .settings-help { font-size:12px; }
  .pill { padding:5px 10px; font-size:12px; }
  .touch { width:58px; height:58px; }
  .touch.jump { width:70px; height:70px; }
  .touch.attack { width:62px; height:62px; }
}
@media (max-width:560px) and (orientation:portrait) {
  .title-layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; text-align:center; padding:24px; }
  .title-copy { z-index:2; padding:0; }
  .title-buttons { margin-inline:auto; }
  .title-art-wrap { position:absolute; inset:30% 0 0; opacity:.35; }
  #titleArt { height:100%; }
  .binding-row { grid-template-columns:1fr; gap:8px; text-align:left; }
  .settings-actions { flex-direction:column-reverse; }
}