/* NEOPAC — mobile-first game interface */
:root {
  --void: #03040b;
  --panel: rgba(5, 9, 22, 0.82);
  --panel-strong: rgba(3, 7, 18, 0.94);
  --cyan: #38f0ff;
  --cyan-soft: #aafaff;
  --magenta: #ff4fd8;
  --gold: #ffd21e;
  --mist: rgba(224, 238, 255, 0.82);
  --mist-dim: rgba(201, 220, 246, 0.52);
  --hair: rgba(116, 211, 255, 0.30);
  --pad: max(14px, env(safe-area-inset-left));
  --pad-r: max(14px, env(safe-area-inset-right));
  --pad-t: max(10px, env(safe-area-inset-top));
  --pad-b: max(14px, env(safe-area-inset-bottom));
  --ui: "Avenir Next", "Helvetica Neue", "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; width: 100%; height: 100%; min-height: 100%;
  background: var(--void); color: #edf7ff; font-family: var(--ui);
  overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
@supports (height: 100dvh) { html, body { height: 100dvh; } }
button, canvas { touch-action: none; }
button { -webkit-appearance: none; appearance: none; }

#stage {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  background: var(--void);
  filter: saturate(1.04) contrast(1.015);
}
body[data-quality="1"] #stage { filter: saturate(1.08) contrast(1.025); }
body[data-quality="2"] #stage { filter: saturate(1.12) contrast(1.035) brightness(1.01); }

.scene-fx {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 46%, rgba(0,0,8,.18) 74%, rgba(0,0,8,.50) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
  mix-blend-mode: normal;
}

/* HUD */
#hud {
  position: fixed; z-index: 10;
  inset: var(--pad-t) var(--pad-r) auto var(--pad);
  pointer-events: none;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .32s ease, transform .32s ease;
}
#hud.is-live { opacity: 1; transform: none; }
.hud-strip {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  gap: 12px; min-height: 78px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(120, 220, 255, .22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(4,9,23,.90), rgba(3,6,16,.76));
  box-shadow: 0 8px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035), 0 0 24px rgba(56,240,255,.08);
  backdrop-filter: blur(13px) saturate(1.2);
  -webkit-backdrop-filter: blur(13px) saturate(1.2);
  overflow: hidden;
}
.hud-strip::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,240,255,.8), transparent);
  box-shadow: 0 0 10px rgba(56,240,255,.52);
}
.readout { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.readout--stage { align-items: center; }
.readout--best { align-items: flex-end; text-align: right; }
.readout-key {
  font-size: 10px; letter-spacing: .15em; color: var(--mist-dim); font-weight: 700;
}
.readout-val {
  font-size: clamp(25px, 7vw, 36px); font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; color: #fff;
  text-shadow: 0 0 12px rgba(56,240,255,.36);
}
.readout-val--mid { color: var(--cyan); text-shadow: 0 0 16px rgba(56,240,255,.48); }
.readout-val--dim { color: var(--mist); font-size: clamp(16px, 4.2vw, 21px); text-shadow: none; }
.lives { display: flex; gap: 6px; margin-top: 7px; min-height: 14px; }
.life {
  width: 13px; height: 13px; border-radius: 50%;
  background: conic-gradient(from -28deg, var(--gold) 0 305deg, transparent 305deg);
  filter: drop-shadow(0 0 5px rgba(255,210,30,.72));
}
.stage-meta {
  display: flex; align-items: center; gap: 7px; min-height: 18px; margin-top: 6px;
  color: var(--mist-dim); font-size: 9px; letter-spacing: .08em;
}
.stage-meta b { color: var(--mist); font-size: 10px; font-variant-numeric: tabular-nums; }
.fruit-slot {
  width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--mist-dim);
  opacity: .32; transition: opacity .2s, box-shadow .2s, transform .2s;
}
.fruit-slot.is-active {
  background: var(--fruit, #ff2f4f); border-color: transparent; opacity: 1;
  transform: scale(1.25); box-shadow: 0 0 10px var(--fruit, #ff2f4f);
}
.toast {
  margin: 10px 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em;
  color: var(--gold); opacity: 0; text-shadow: 0 0 12px rgba(255,210,30,.7);
}
.toast.is-on { animation: toast 1.7s ease forwards; }
@keyframes toast {
  0% { opacity: 0; transform: translateY(5px) scale(.97); }
  14% { opacity: 1; transform: none; }
  76% { opacity: 1; } 100% { opacity: 0; }
}

/* Controls */
.pad {
  position: fixed; z-index: 12; left: var(--pad); bottom: var(--pad-b);
  width: 148px; height: 148px; display: none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.22));
}
@media (pointer: coarse) { .pad { display: block; } }
.pad-btn {
  position: absolute; width: 54px; height: 54px; padding: 0;
  border: 1px solid rgba(112,208,255,.36); border-radius: 17px;
  background: linear-gradient(180deg, rgba(17,31,59,.78), rgba(6,15,34,.74));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 6px 18px rgba(0,0,0,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .07s ease, background .07s ease, border-color .07s ease, box-shadow .07s ease;
}
.pad-btn::before {
  content: ""; position: absolute; inset: 7px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.025); pointer-events: none;
}
.pad-btn::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border: 7px solid transparent; filter: drop-shadow(0 0 4px rgba(56,240,255,.4));
}
.pad-up { left: 47px; top: 0; }
.pad-down { left: 47px; bottom: 0; }
.pad-left { left: 0; top: 47px; }
.pad-right { right: 0; top: 47px; }
.pad-up::after { border-bottom-color: var(--cyan); margin-top: 18px; }
.pad-down::after { border-top-color: var(--cyan); margin-bottom: 18px; }
.pad-left::after { border-right-color: var(--cyan); margin-left: 18px; }
.pad-right::after { border-left-color: var(--cyan); margin-right: 18px; }
.pad-btn.is-down {
  transform: scale(.93); border-color: rgba(56,240,255,.70);
  background: linear-gradient(180deg, rgba(24,97,122,.72), rgba(7,38,57,.82));
  box-shadow: inset 0 0 18px rgba(56,240,255,.14), 0 0 20px rgba(56,240,255,.16);
}
.pad-hub {
  position: absolute; left: 58px; top: 58px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(120,200,255,.16); background: rgba(4,11,25,.38);
  box-shadow: inset 0 0 12px rgba(0,0,0,.3);
}
.cluster {
  position: fixed; right: var(--pad-r); bottom: var(--pad-b); z-index: 12;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.cluster-row { display: flex; gap: 8px; }
.chip, .icon-btn {
  border: 1px solid rgba(112,208,255,.34);
  background: linear-gradient(180deg, rgba(13,27,52,.82), rgba(5,14,32,.79));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #eff8ff;
}
.chip {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-width: 122px; min-height: 42px; padding: 8px 13px; border-radius: 999px;
  font-family: inherit; font-size: 12px;
}
.chip:active, .icon-btn:active { transform: scale(.95); border-color: rgba(56,240,255,.65); }
.chip-key { color: var(--mist-dim); font-size: 10px; letter-spacing: .1em; }
.chip-val { font-weight: 800; color: var(--cyan); white-space: nowrap; }
.icon-btn {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; padding: 0;
}
.icon-btn svg { width: 22px; height: 22px; fill: #e7f3ff; stroke: none; }
.icon-btn svg .wave { fill: none; stroke: #e7f3ff; stroke-width: 1.8; stroke-linecap: round; }
.icon-btn svg .slash { fill: none; stroke: var(--magenta); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.icon-btn.is-off svg .wave { opacity: .18; }
.icon-btn.is-off svg .slash { opacity: 1; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* overlays */
.overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: calc(var(--pad-t) + 38px) 22px calc(var(--pad-b) + 24px);
  background: radial-gradient(100% 72% at 50% 42%, rgba(7,12,28,.75), rgba(2,3,10,.965));
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.overlay.is-on { opacity: 1; pointer-events: auto; }
.overlay.is-soft { background: none; pointer-events: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.screen { display: none; text-align: center; max-width: 500px; width: 100%; }
.screen.is-on { display: block; }
.kicker { margin: 0 0 14px; font-size: 11px; letter-spacing: .22em; color: var(--mist-dim); }
.logo {
  margin: 0; font-size: clamp(52px, 17vw, 108px); font-weight: 950; letter-spacing: .055em; line-height: .92;
  display: flex; justify-content: center; color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 18px var(--cyan), 0 0 42px rgba(56,240,255,.68), 0 0 78px rgba(56,240,255,.32);
}
.logo span { animation: flick 6s infinite; }
.logo span:nth-child(3) { animation-delay: 1.4s; }
.logo span:nth-child(5) { animation-delay: 3.1s; color: var(--gold); text-shadow: 0 0 5px #fff, 0 0 18px var(--gold), 0 0 42px rgba(255,210,30,.62); }
@keyframes flick { 0%,96%,100%{opacity:1} 97%{opacity:.34} 98.5%{opacity:1} }
.tagline { margin: 18px auto 25px; max-width: 30em; font-size: 14px; line-height: 1.8; color: var(--mist); }
.cta {
  display: inline-block; min-width: 190px; min-height: 50px; padding: 14px 36px; border-radius: 999px;
  border: 1px solid var(--cyan); background: linear-gradient(180deg, rgba(56,240,255,.22), rgba(56,240,255,.07));
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .05em;
  box-shadow: 0 0 24px rgba(56,240,255,.25), inset 0 0 20px rgba(56,240,255,.13);
  transition: transform .1s ease, box-shadow .16s ease;
}
.cta:active { transform: scale(.97); box-shadow: 0 0 34px rgba(56,240,255,.46); }
.ghost-btn {
  display: block; margin: 14px auto 0; padding: 10px 20px; background: none; border: 0;
  color: var(--mist); font-family: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(198,218,255,.28);
}
.keys {
  margin: 28px auto 0; padding: 17px 16px 0; border-top: 1px solid var(--hair);
  display: grid; gap: 9px; max-width: 390px; font-size: 11px; color: var(--mist-dim); text-align: left;
}
.keys div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; }
.keys dt { color: var(--mist); font-weight: 750; } .keys dd { margin: 0; line-height: 1.55; }
.head { margin: 0 0 22px; font-size: clamp(24px,7vw,34px); font-weight: 850; letter-spacing: .04em; text-shadow: 0 0 20px rgba(56,240,255,.48); }
.head--over { color: #ffd7e6; text-shadow: 0 0 22px rgba(255,79,216,.58); }
.result {
  margin: 0 auto 26px; max-width: 320px; display: grid; gap: 1px; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--hair);
}
.result-row { display:flex; justify-content:space-between; align-items:baseline; padding:12px 14px; background:rgba(4,7,17,.94); font-size:13px; color:var(--mist); }
.result-row b { font-size:22px; font-weight:850; color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(56,240,255,.4); }
.screen--flash { pointer-events:none; }
.flash-sub { margin:0 0 7px; font-size:13px; letter-spacing:.2em; color:var(--mist); }
.flash-main { margin:0; font-size:clamp(40px,13vw,76px); font-weight:950; letter-spacing:.13em; color:var(--gold); text-shadow:0 0 7px #fff,0 0 24px var(--gold),0 0 58px rgba(255,210,30,.48); animation:pop .42s cubic-bezier(.2,1.3,.4,1); }
.flash-main--win { color:var(--cyan); text-shadow:0 0 7px #fff,0 0 24px var(--cyan),0 0 58px rgba(56,240,255,.46); }
@keyframes pop { from{transform:scale(.72);opacity:0} to{transform:none;opacity:1} }

/* boot */
.boot { position:fixed; inset:0; z-index:40; display:none; place-items:center; background:var(--void); text-align:center; }
.boot.is-on { display:grid; }
.boot-msg { color:var(--mist); font-size:13px; letter-spacing:.12em; }
.boot-msg h2 { color:#fff; font-size:18px; margin:0 0 10px; }
.boot-msg p { margin:0; line-height:1.8; }
.boot-dot { width:34px; height:34px; margin:0 auto 18px; border-radius:50%; background:conic-gradient(from -28deg,var(--gold) 0 305deg,transparent 305deg); animation:chomp .9s linear infinite; }
@keyframes chomp { to{transform:rotate(360deg)} }

/* phones */
@media (max-width: 390px) and (orientation: portrait) {
  .hud-strip { min-height: 72px; padding: 9px 10px 10px; border-radius: 14px; }
  .readout-val { font-size: 27px; }
  .readout-val--dim { font-size: 17px; }
  .pad { width: 138px; height: 138px; }
  .pad-btn { width: 50px; height: 50px; border-radius: 15px; }
  .pad-up { left: 44px; } .pad-down { left: 44px; }
  .pad-left { top: 44px; } .pad-right { top: 44px; }
  .pad-hub { left:55px; top:55px; width:28px; height:28px; }
  .chip { min-width: 114px; min-height: 40px; padding: 7px 11px; }
  .icon-btn { width: 44px; height: 44px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --pad-b: max(8px, env(safe-area-inset-bottom)); --pad-t: max(7px, env(safe-area-inset-top)); }
  .hud-strip { min-height: 58px; padding: 6px 10px 7px; border-radius: 13px; }
  .readout-val { font-size: 21px; }
  .readout-val--dim { font-size: 15px; }
  .lives { margin-top: 4px; } .life { width: 10px; height: 10px; }
  .stage-meta { margin-top: 3px; }
  .pad { width: 124px; height: 124px; }
  .pad-btn { width: 46px; height: 46px; border-radius: 14px; }
  .pad-up,.pad-down { left:39px; } .pad-left,.pad-right { top:39px; }
  .pad-hub { left:49px; top:49px; width:26px; height:26px; }
  .chip { min-width: 108px; min-height: 36px; padding:6px 10px; }
  .icon-btn { width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce) { .logo span,.flash-main,.toast.is-on,.boot-dot { animation:none; } }