:root {
  --ink: #fff8ec;
  --dim: rgba(255, 248, 236, 0.72);
  --panel: rgba(28, 22, 52, 0.92);
  --panel-edge: rgba(255, 220, 160, 0.35);
  --gold: #ffd060;
  --cyan: #7ff0ff;
  --red: #ff6a6a;
  --u: min(1vw, 1vh);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #151338; color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui input, #ui details, #ui summary, .modal, #title, #zone, .tbtn { pointer-events: auto; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.ico { width: 1.2em; height: 1.2em; vertical-align: -0.22em; fill: currentColor; color: inherit; }
.ico.big { width: 1.4em; height: 1.4em; color: #ff5d4f; }
button { font: inherit; color: inherit; border: none; cursor: pointer; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh; text-align: center; }
#loading { background: radial-gradient(circle at 50% 40%, #3a2d6a, #151338 70%); z-index: 50; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.logo { font-weight: 900; letter-spacing: 0.06em; font-size: clamp(30px, 7.5vw, 76px); text-shadow: 0 4px 0 #2a1a4a, 0 0 30px rgba(255, 180, 90, 0.55); display: flex; align-items: center; gap: 0.3em; line-height: 1.1; }
.logo.small { font-size: clamp(22px, 5vw, 40px); }
.subtitle { font-size: clamp(13px, 2.4vw, 20px); color: var(--dim); text-shadow: 0 2px 6px #000a; }
#title { cursor: pointer; padding: 16px; background: linear-gradient(to bottom, rgba(20, 16, 50, 0.0) 40%, rgba(20, 16, 50, 0.55)); }
#title .logo { margin-top: -6vh; }
.tap { margin-top: 18vh; font-size: clamp(18px, 3.4vw, 28px); font-weight: 800; padding: 0.5em 1.3em; border-radius: 99px; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.4); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); background: rgba(255, 220, 140, 0.25); } }
.bestline { font-size: 14px; color: var(--dim); min-height: 1em; }

#corner { position: absolute; top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l)); display: flex; gap: 10px; z-index: 20; }
.round { width: 48px; height: 48px; border-radius: 50%; background: rgba(20, 16, 40, 0.65); border: 2px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; font-size: 22px; }
.pill { height: 48px; padding: 0 16px; border-radius: 24px; background: rgba(20, 16, 40, 0.65); border: 2px solid rgba(255, 255, 255, 0.35); font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.round:active, .pill:active { transform: scale(0.94); }

/* ---------------- HUD ---------------- */
#hud { position: absolute; inset: 0; }
#vitals { position: absolute; top: calc(66px + var(--safe-t)); left: calc(12px + var(--safe-l)); display: flex; flex-direction: column; gap: 6px; }
#hp { display: flex; gap: 3px; font-size: 22px; filter: drop-shadow(0 2px 2px #0008); }
#hp .ico { color: #ff6a7a; } #hp .ico.empty { color: rgba(255, 255, 255, 0.25); }
#hp.hurt { animation: shakeX 0.3s; }
@keyframes shakeX { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#scrap { display: flex; align-items: center; gap: 6px; font-size: 18px; color: var(--gold); filter: drop-shadow(0 2px 2px #0008); }
#scrap .bar { width: 110px; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden; }
#scrap .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb030, #fff0a0); transition: width 0.1s; }
#scrap b { font-size: 15px; min-width: 2ch; }
#scrap.full .bar { box-shadow: 0 0 10px var(--gold); }
#scrap.pulse { animation: glow 0.25s; }
@keyframes glow { 50% { transform: scale(1.12); } }
#objective { position: absolute; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; text-shadow: 0 2px 4px #000c; white-space: nowrap; }
#islandName { font-size: 13px; color: var(--dim); }
#goal { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
#foe { position: absolute; top: calc(10px + var(--safe-t)); right: calc(12px + var(--safe-r)); width: 128px; text-align: center; filter: drop-shadow(0 2px 3px #000a); }
.foeName { font-size: 13px; font-weight: 800; margin-bottom: 2px; }
#foeDiagram { width: 100px; height: 100px; }
#foeDiagram .body { fill: rgba(40, 40, 70, 0.8); stroke: rgba(255, 255, 255, 0.4); stroke-width: 2; }
#foeDiagram .seg { fill: none; stroke: #f5efe2; stroke-width: 9; stroke-linecap: round; transition: stroke 0.15s; }
#foeDiagram .seg.front { stroke: #9aa0c8; }
#foeDiagram .seg.gone { stroke: rgba(255, 255, 255, 0.12); stroke-dasharray: 2 6; }
#foeDiagram .core { fill: #6a5a40; transition: fill 0.2s; }
#foeDiagram .core.open { fill: #ffd060; }
#foeDiagram .core.sealed { fill: #9a8ad8; }
#foeDiagram .orbit { fill: #c9b8ff; }
#foeDiagram .orbit.gone { fill: none; }
#foeDiagram .stag { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 340; stroke-dashoffset: 340; transform: rotate(-90deg); }
.corebar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; margin: 2px 8px 0; border: 1px solid rgba(255, 255, 255, 0.3); }
.corebar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff9030, #ffe070); }
#keys { position: absolute; bottom: calc(12px + var(--safe-b)); left: 50%; transform: translateX(-50%); display: flex; gap: 14px; font-size: 14px; opacity: 0.85; text-shadow: 0 1px 3px #000; }
#keys span { display: flex; align-items: center; gap: 4px; }
kbd { background: rgba(255, 255, 255, 0.92); color: #2a2440; border-radius: 5px; padding: 1px 6px; font-weight: 800; font-family: inherit; box-shadow: 0 2px 0 #0006; }
#card { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 3px 8px #000c; animation: card 2.6s ease forwards; }
#card small { display: block; font-size: 15px; color: var(--dim); letter-spacing: 0.2em; }
#card b { font-size: clamp(26px, 5vw, 44px); }
@keyframes card { 0% { opacity: 0; transform: translate(-50%, 10px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------------- touch ---------------- */
#touch { position: absolute; inset: 0; }
#zone { position: absolute; left: 0; bottom: 0; width: 50%; height: 78%; }
#stick { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 0.1s; }
#stick.on { opacity: 1; }
#stick .base, #stick .knob { position: absolute; left: 0; top: 0; border-radius: 50%; }
#stick .base { width: 130px; height: 130px; margin: -65px 0 0 -65px; border: 3px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); }
#stick .knob { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgba(255, 255, 255, 0.55); }
.tbtn { position: absolute; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 16, 40, 0.5); border: 3px solid rgba(255, 255, 255, 0.5); color: #fff; font-size: 30px; touch-action: none; }
.tbtn.down { transform: scale(0.92); background: rgba(255, 255, 255, 0.35); }
.tbtn.fire { width: 96px; height: 96px; right: calc(22px + var(--safe-r)); bottom: calc(26px + var(--safe-b)); border-color: #9ff6ff; font-size: 40px; }
.tbtn.parry { width: 78px; height: 78px; right: calc(132px + var(--safe-r)); bottom: calc(92px + var(--safe-b)); border-color: #ffe08a; }
.tbtn.dodge { width: 72px; height: 72px; right: calc(34px + var(--safe-r)); bottom: calc(138px + var(--safe-b)); }
.tbtn.magnet { width: 66px; height: 66px; right: calc(138px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); border-color: #ff8a7a; }
.tbtn.pulse { animation: tpulse 0.5s ease-in-out infinite alternate; }
@keyframes tpulse { to { box-shadow: 0 0 0 10px rgba(255, 240, 160, 0.35); border-color: #fff4a0; } }

/* teaching glyph near Pip */
#teach { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); }
#teach .glyph { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; background: rgba(20, 16, 40, 0.8); border: 2px solid #fff4a0; font-size: 22px; font-weight: 900; animation: bob 0.4s ease-in-out infinite alternate; white-space: nowrap; }
@keyframes bob { to { transform: translateY(-6px); } }

#flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

/* ---------------- modals ---------------- */
.modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 6, 20, 0.55); z-index: 30; padding: calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b)); }
.panel { background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 18px; padding: 18px 20px; width: min(420px, 94vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 60px #0009; }
.panel.wide { width: min(560px, 96vw); }
.panel h2 { margin: 0 0 12px; font-size: 22px; }
.choice { display: block; width: 100%; text-align: left; padding: 14px 16px; margin: 10px 0; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.2); }
.choice b { display: block; font-size: 20px; }
.choice span { font-size: 14px; color: var(--dim); }
.choice.sel { border-color: var(--gold); background: rgba(255, 208, 96, 0.15); }
.rows { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; }
.seg2 { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.seg2 button { min-width: 52px; min-height: 40px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.2); font-size: 14px; }
.seg2 button.sel { border-color: var(--gold); background: rgba(255, 208, 96, 0.2); }
.seg2 button:disabled { opacity: 0.3; }
input[type=range] { width: 52%; accent-color: var(--gold); height: 30px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); font-size: 20px; }
.stepper b { min-width: 3ch; text-align: center; }
.help { margin-top: 10px; font-size: 14px; }
.help summary { cursor: pointer; padding: 8px 0; font-weight: 800; }
.help table { width: 100%; border-collapse: collapse; }
.help td { padding: 4px 6px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.actions button { min-height: 46px; padding: 0 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.25); font-weight: 800; font-size: 15px; }
.actions button.primary { background: linear-gradient(#ffcf6a, #f2a43a); color: #2a1a10; border-color: #ffe8a8; }
#rStats { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 14px 4px; font-size: 16px; }
#rStats b { text-align: right; }
#rTitle { text-align: center; }
#rSub { text-align: center; }

@media (max-width: 640px), (max-height: 480px) {
  #foe { width: 96px; } #foeDiagram { width: 74px; height: 74px; } .foeName { font-size: 11px; }
  #objective { top: calc(14px + var(--safe-t)); max-width: 48vw; } #goal { font-size: 14px; } #islandName { font-size: 11px; }
  #vitals { top: calc(64px + var(--safe-t)); }
  #scrap .bar { width: 80px; }
}
@media (max-height: 480px) {
  #objective { top: calc(10px + var(--safe-t)); left: auto; right: calc(120px + var(--safe-r)); transform: none; align-items: flex-end; }
  .tbtn.fire { width: 84px; height: 84px; } .tbtn.parry { width: 70px; height: 70px; right: calc(118px + var(--safe-r)); bottom: calc(70px + var(--safe-b)); }
  .tbtn.dodge { width: 64px; height: 64px; bottom: calc(118px + var(--safe-b)); } .tbtn.magnet { width: 60px; height: 60px; right: calc(124px + var(--safe-r)); bottom: calc(6px + var(--safe-b)); }
}