:root {
  --bg: #0b0418;
  --ink: #f6f0ff;
  --muted: #b9a8d8;
  --glass: rgba(22, 8, 44, 0.55);
  --line: rgba(220, 180, 255, 0.22);
  --acid: #c6ff3d;
  --pink: #ff4fd8;
  --cyan: #46f7ff;
  --grad: linear-gradient(100deg, #ff4fd8, #ffd54a 35%, #46f7ff 70%, #a46bff);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ── labels over pedestals ── */
.label { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 8px 14px 9px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: opacity .3s, transform .3s, border-color .3s;
  max-width: 220px; transform: translateY(-10px); }
.label b { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 12.5px; line-height: 1.25; letter-spacing: .01em; }
.label .rank { font-size: 10px; letter-spacing: .2em; color: var(--muted); }
.label .price { font-weight: 700; font-size: 13px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.label.active { border-color: rgba(255, 213, 74, .7); box-shadow: 0 0 30px rgba(255, 79, 216, .35); }
.label:hover { transform: translateY(-14px) scale(1.04); }

/* ── intro ── */
#intro { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; padding: 24px;
  background: radial-gradient(ellipse at center, rgba(11,4,24,.25), rgba(11,4,24,.85) 70%); transition: opacity 1.2s ease, visibility 1.2s; }
#intro.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-inner { text-align: center; max-width: 640px; }
.kicker { letter-spacing: .4em; text-transform: uppercase; font-size: 11px; color: var(--muted); margin: 0 0 18px; }
#intro h1 { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: clamp(54px, 13vw, 140px); line-height: .85; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .18em; letter-spacing: -.03em; }
#intro h1 span { background: var(--grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flow 8s linear infinite; filter: drop-shadow(0 0 24px rgba(255, 79, 216, .35)); }
#intro h1 .dim { -webkit-text-stroke: 2px rgba(255,255,255,.85); background: none; color: transparent; animation: pulse 3s ease-in-out infinite; }
@keyframes flow { to { background-position: 300% 0; } }
@keyframes pulse { 50% { opacity: .45; filter: blur(1px) drop-shadow(0 0 30px #46f7ff); } }
.sub { font-size: 17px; line-height: 1.5; color: #e4d8ff; margin: 26px auto 30px; max-width: 460px; }
#bar { width: 240px; height: 3px; margin: 0 auto; background: rgba(255,255,255,.12); border-radius: 9px; overflow: hidden; }
#bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .4s; }
#loadtxt { font-size: 12px; color: var(--muted); margin: 10px 0 26px; letter-spacing: .05em; }
#enter { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  padding: 18px 46px; border-radius: 999px; border: 0; color: #12041f; background: var(--grad); background-size: 200% 100%;
  box-shadow: 0 0 40px rgba(255, 79, 216, .45), 0 0 90px rgba(70, 247, 255, .25); transition: transform .25s, opacity .3s, background-position .6s; }
#enter:hover:not(:disabled) { transform: scale(1.06); background-position: 100% 0; }
#enter:disabled { opacity: .35; cursor: wait; }
.tiny { font-size: 11px; color: var(--muted); margin-top: 18px; opacity: .8; }

/* ── HUD ── */
.hud-top, .hud-bottom, #hint { position: fixed; left: 0; right: 0; z-index: 10; opacity: 0; transition: opacity 1s .8s; pointer-events: none; }
.is-live .hud-top, .is-live .hud-bottom, .is-live #hint { opacity: 1; }
.is-live .hud-top > *, .is-live .hud-bottom > * { pointer-events: auto; }
.hud-top { top: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 15px; letter-spacing: .02em; }
.brand em { font-style: normal; font-weight: 400; }
.brand small { font-family: 'Space Grotesk'; font-weight: 700; font-size: 10px; letter-spacing: .25em; padding: 4px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--acid); }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grad); background-size: 300%; animation: flow 4s linear infinite; box-shadow: 0 0 16px var(--pink); }
.hud-actions { display: flex; gap: 10px; align-items: center; }
.btn-ghost { text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(255,255,255,.5); }
#sound { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); display: grid; place-items: center; backdrop-filter: blur(10px); }
.eq { display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; height: 4px; background: var(--ink); border-radius: 2px; }
#sound.on .eq i { animation: eq 1s ease-in-out infinite; background: var(--acid); }
#sound.on .eq i:nth-child(2) { animation-delay: .2s } #sound.on .eq i:nth-child(3) { animation-delay: .4s } #sound.on .eq i:nth-child(4) { animation-delay: .1s }
@keyframes eq { 50% { height: 14px; } }

#hint { top: 76px; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.is-focus #hint { opacity: 0; transition-delay: 0s; }

.hud-bottom { bottom: 0; padding: 0 0 max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: linear-gradient(to top, rgba(11,4,24,.75), transparent); }
.nav-row { display: flex; align-items: center; gap: 18px; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); font-size: 18px; backdrop-filter: blur(10px); transition: border-color .2s, transform .2s; }
.round:hover { border-color: var(--acid); transform: scale(1.08); }
#counter { font-family: 'Unbounded'; font-size: 13px; color: var(--muted); min-width: 80px; text-align: center; letter-spacing: .1em; }
#counter b { color: var(--ink); font-size: 20px; }
#chips { display: flex; gap: 8px; overflow-x: auto; max-width: 100vw; padding: 4px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
#chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; white-space: nowrap; scroll-snap-align: center;
  transition: border-color .3s, background .3s, transform .3s; max-width: 230px; }
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; }
.chip:hover { transform: translateY(-2px); }
.chip.active { border-color: transparent; background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--grad) border-box; border: 1px solid transparent; }

/* ── product panel ── */
#panel { position: fixed; z-index: 15; right: 28px; top: 50%; width: min(380px, 34vw); transform: translate(30px, -50%); opacity: 0; pointer-events: none;
  padding: 30px 28px 24px; border-radius: 26px; background: rgba(18, 6, 36, .62); border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.is-focus #panel { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
#p-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 20px; line-height: 1; }
#p-close:hover { border-color: var(--pink); }
#p-rank { margin: 0 0 10px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--acid); }
#p-name { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.15; margin: 0 0 10px; padding-right: 30px; }
#p-cat { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.p-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }
#p-price { font-family: 'Unbounded'; font-weight: 900; font-size: 34px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vat { font-size: 12px; color: var(--muted); }
.cta { display: flex; justify-content: center; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15px; color: #12041f;
  padding: 16px 20px; border-radius: 16px; background: var(--grad); background-size: 200% 100%; transition: background-position .6s, transform .2s;
  box-shadow: 0 10px 40px rgba(255, 79, 216, .35); }
.cta:hover { background-position: 100% 0; transform: translateY(-2px); }
.cta span { transition: transform .2s; } .cta:hover span { transform: translateX(4px); }
.drag-hint { text-align: center; font-size: 12px; color: var(--muted); margin: 16px 0 14px; letter-spacing: .08em; }
.drag-hint .hand { display: inline-block; animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.p-nav { display: flex; gap: 8px; }
.p-nav button { flex: 1; padding: 11px 8px; border-radius: 12px; border: 1px solid var(--line); background: transparent; font-size: 13px; }
.p-nav button:hover { border-color: rgba(255,255,255,.5); }

@media (max-width: 900px) {
  #panel { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; transform: translateY(40px); padding: 22px 20px 18px; border-radius: 22px; }
  .is-focus #panel { transform: translateY(0); }
  .is-focus .hud-bottom { opacity: 0; pointer-events: none; }
  .is-focus .hud-bottom > * { pointer-events: none; }
  #p-name { font-size: 19px; }
  #p-cat { margin-bottom: 14px; }
  #p-price { font-size: 26px; }
  .p-price-row { margin-bottom: 14px; }
  .drag-hint { margin: 10px 0 8px; }
}
@media (max-width: 560px) {
  .hud-top { padding: 14px 16px; }
  .brand { font-size: 13px; }
  .brand small, .btn-ghost { display: none; }
  .label { max-width: 160px; padding: 6px 10px; }
  .label b { font-size: 11px; }
  #hint { top: 64px; font-size: 10px; }
}

/* ───────── v2: tunnel, cart, intensity, variants, guide, toast, VR ───────── */
.in-tunnel .hud-top, .in-tunnel .hud-bottom, .in-tunnel #hint, .in-tunnel #labels, .in-tunnel #panel { opacity: 0 !important; pointer-events: none !important; transition-delay: 0s; }
.in-vr .hud-bottom, .in-vr #hint, .in-vr #panel { display: none; }

.cart { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; height: 42px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; }
.cart b { font-family: 'Unbounded'; font-size: 13px; min-width: 10px; }
.cart-total { color: var(--muted); }
.checkout { display: none; border: 0; border-radius: 99px; padding: 7px 14px; font-weight: 700; font-size: 12px; color: #12041f; background: var(--grad); background-size: 200% 100%; transition: background-position .5s; }
.checkout:hover { background-position: 100% 0; }
.cart.has { border-color: rgba(198, 255, 61, .55); }
.cart.has .checkout { display: inline-block; }
.cart.bump { animation: bump .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 30% { transform: scale(1.18); box-shadow: 0 0 40px rgba(255, 79, 216, .6); } }
.vr { font-family: 'Unbounded'; font-weight: 600; letter-spacing: .1em; cursor: pointer; }

.intensity { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  padding: 6px 14px; border-radius: 99px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.intensity input { -webkit-appearance: none; appearance: none; width: 160px; height: 4px; border-radius: 9px; background: var(--grad); outline: none; cursor: pointer; }
.intensity input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #ff4fd8, 0 0 4px #fff; }
.intensity input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #ff4fd8; }

#p-dim { margin: -12px 0 16px; font-size: 12px; letter-spacing: .08em; color: var(--cyan); }
#p-vars { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
#p-vars[hidden] { display: none; }
.var { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; font-size: 12.5px; transition: border-color .2s, background .2s; }
.var:hover { border-color: rgba(255,255,255,.5); }
.var.on { border-color: transparent; background: linear-gradient(rgba(30,10,50,.9), rgba(30,10,50,.9)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
#p-add { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
#p-add:disabled { opacity: .6; cursor: wait; }
.cta-2 { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--ink); text-decoration: none; padding: 10px; border-radius: 12px; border: 1px solid var(--line); }
.cta-2:hover { border-color: rgba(255,255,255,.5); }

.bubble { max-width: 230px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(255,255,255,.94); color: #1a0830; font-size: 13px; font-weight: 500; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 30px rgba(70, 247, 255, .35); opacity: 0; transform: translate(60px, -10px) scale(.9); transition: opacity .35s, transform .35s; pointer-events: none; }
.bubble.show { opacity: 1; transform: translate(60px, -20px) scale(1); }

#toast { position: fixed; z-index: 30; left: 50%; top: 84px; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; max-width: min(460px, 92vw);
  padding: 12px 18px; border-radius: 16px; background: rgba(18, 6, 36, .85); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 14px; text-align: center; transition: opacity .35s, transform .35s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
#toast a { color: var(--acid); }

@media (max-width: 900px) {
  .shop-link { display: none; }
}
@media (max-width: 560px) {
  .cart { padding-left: 10px; height: 38px; }
  .cart-total { display: none; }
  .intensity { font-size: 9px; padding: 5px 10px; gap: 6px; }
  .intensity input { width: 110px; }
  #sound { width: 38px; height: 38px; }
}
@media (max-width: 560px) {
  .bubble { max-width: 170px; font-size: 12px; transform: translate(-15%, -10px) scale(.9); }
  .bubble.show { transform: translate(-15%, -20px) scale(1); }
  #panel .drag-hint { display: none; }
  #p-vars { margin-bottom: 12px; }
  .var { padding: 6px 10px; font-size: 12px; }
  #p-dim { margin: -8px 0 12px; }
  .cta { padding: 13px 16px; }
  .cta-2 { margin-top: 8px; padding: 8px; }
  .p-nav { margin-top: 10px; }
  .p-nav button { padding: 9px 6px; font-size: 12px; }
}

/* ───────── narration caption ───────── */
#p-say { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 16px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
#p-say[hidden] { display: none; }
#p-say-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; }
#p-say-btn:hover { border-color: var(--acid); }
#p-say .wave { display: flex; gap: 2px; align-items: center; height: 12px; }
#p-say .wave i { width: 2px; height: 5px; border-radius: 2px; background: var(--ink); }
#p-say.playing .wave i { background: var(--acid); animation: eq .9s ease-in-out infinite; }
#p-say.playing .wave i:nth-child(2) { animation-delay: .15s } #p-say.playing .wave i:nth-child(3) { animation-delay: .3s }
#p-say-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: #d9ccf2; font-style: italic; max-height: 4.6em; overflow: hidden; transition: max-height .4s; }
#p-say.playing #p-say-text, #p-say:hover #p-say-text { max-height: 20em; }
@media (max-width: 560px) { #p-say { margin-bottom: 12px; padding: 8px 10px; } #p-say-text, #p-say.playing #p-say-text, #p-say:hover #p-say-text { font-size: 12px; max-height: 3em; } }

/* ───────── "click for more" prompt on the active product ───────── */
.label .tap { display: none; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #12041f; padding: 3px 9px; border-radius: 99px; background: var(--grad); background-size: 200% 100%; }
.label.active .tap { display: inline-block; animation: tapPulse 1.6s ease-in-out infinite, flow 6s linear infinite; }
.has-focused .label.active .tap { animation: flow 6s linear infinite; opacity: .85; }
@keyframes tapPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 79, 216, .55); } 50% { transform: scale(1.07); box-shadow: 0 0 0 8px rgba(255, 79, 216, 0); } }
.label .tap { white-space: nowrap; }
@media (max-width: 560px) { .label .tap { font-size: 9.5px; padding: 3px 7px; letter-spacing: .03em; } }

/* ───────── GAME MODE ───────── */
.btn-game { height: 42px; padding: 0 16px; border: 0; border-radius: 99px; font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .06em; color: #12041f;
  background: var(--grad); background-size: 200% 100%; animation: flow 6s linear infinite; box-shadow: 0 0 24px rgba(255, 79, 216, .45); cursor: pointer; }
.btn-game:hover { transform: scale(1.05); }
#game-hud { display: none; }
.in-game #game-hud { display: block; }
.in-game .hud-top, .in-game .hud-bottom, .in-game #hint, .in-game #labels, .in-game #panel { opacity: 0 !important; pointer-events: none !important; }
#game-hud > * { position: fixed; z-index: 12; }
.g-top { top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; gap: 14px; align-items: center; justify-content: space-between; pointer-events: none; }
.g-hp { display: flex; flex-direction: column; gap: 5px; width: min(280px, 42vw); }
.g-hp span, .g-count span, .g-score span, .g-boss span { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.g-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid var(--line); overflow: hidden; }
.g-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #46f7ff, #c6ff3d); transition: width .2s; }
.g-bar i.low { background: linear-gradient(90deg, #ff2a6a, #ff9a3d); animation: pulse 1s ease-in-out infinite; }
.g-count, .g-score { display: flex; flex-direction: column; align-items: center; font-family: 'Unbounded'; font-size: 13px; color: var(--muted); padding: 8px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.g-count b, .g-score b { font-size: 22px; color: var(--ink); }
.g-boss { top: 86px; left: 50%; transform: translateX(-50%); width: min(520px, 86vw); text-align: center; }
.g-boss span { display: block; margin-bottom: 6px; font-family: 'Unbounded'; font-size: 13px; letter-spacing: .12em; color: #ffd6f6; }
.g-boss .g-bar { height: 12px; } .g-boss .g-bar i { background: linear-gradient(90deg, #ff4fd8, #a46bff, #46f7ff); }
.g-arrow { top: 50%; left: 50%; font-size: 30px; color: var(--acid); text-shadow: 0 0 14px var(--acid); transition: opacity .3s; pointer-events: none; }
.g-target { top: 0; left: 0; margin: -46px 0 0 -90px; width: 180px; text-align: center; font-size: 11px; letter-spacing: .1em; color: var(--acid); text-shadow: 0 0 8px #000; transition: opacity .3s; pointer-events: none; }
.g-hint { bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; pointer-events: none; }
.g-exit { bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); font-size: 12px; }
.g-unlock, .g-reward { left: 50%; bottom: 70px; transform: translateX(-50%); width: min(440px, 92vw); padding: 18px 20px; border-radius: 22px; text-align: center;
  background: rgba(18, 6, 36, .82); border: 1px solid rgba(198, 255, 61, .5); backdrop-filter: blur(16px); box-shadow: 0 0 60px rgba(198, 255, 61, .25); animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
.g-reward { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-color: rgba(255, 79, 216, .7); box-shadow: 0 0 80px rgba(255, 79, 216, .4); }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) scale(.85); } }
.g-u-k { margin: 0 0 4px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--acid); }
.g-unlock h3, .g-reward h3 { margin: 0 0 4px; font-family: 'Unbounded'; font-size: 18px; }
.g-unlock p { margin: 0 0 12px; color: var(--muted); }
.g-u-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.g-u-btns .cta { padding: 11px 16px; border: 0; font-family: inherit; cursor: pointer; }
.g-u-btns .cta-2 { margin: 0; padding: 10px 14px; background: transparent; cursor: pointer; font-family: inherit; }
.g-code { margin: 12px auto 16px; padding: 12px 18px; font-family: 'Unbounded'; font-size: 24px; letter-spacing: .12em; border: 2px dashed var(--acid); border-radius: 14px; color: var(--acid); user-select: all; }
.g-reward .cta { border: 0; cursor: pointer; width: 100%; font-family: inherit; }
.g-dead { inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 79, 216, .25), rgba(11, 4, 24, .8)); }
.g-dead[hidden] { display: none; }
.g-dead h3 { font-family: 'Unbounded'; font-size: clamp(18px, 3vw, 28px); text-align: center; padding: 0 20px; }
.g-hurt { inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 45%, rgba(255, 30, 120, .55)); }
.g-hurt.on { animation: hurt .45s ease-out; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }
.g-cross { top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 0 10px #46f7ff; pointer-events: none; }
.g-pad, .g-btns { display: none; }
@media (pointer: coarse) {
  .g-pad { display: block; left: 22px; bottom: max(26px, env(safe-area-inset-bottom)); width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--line); touch-action: none; }
  .g-stick { position: absolute; inset: 0; display: grid; place-items: center; }
  .g-stick i { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 20px rgba(255,79,216,.5); }
  .g-btns { display: flex; gap: 14px; right: 22px; bottom: max(30px, env(safe-area-inset-bottom)); align-items: flex-end; }
  .g-btns button { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); font-size: 24px; touch-action: none; }
  .g-btns #g-fire { width: 84px; height: 84px; font-size: 32px; background: var(--grad); color: #12041f; border: 0; }
  .g-hint { bottom: auto; top: 120px; font-size: 10px; }
  .g-cross { display: none; }
}
@media (max-width: 560px) {
  .btn-game { height: 38px; padding: 0 12px; font-size: 11px; }
  .g-count b, .g-score b { font-size: 17px; }
  .g-score { display: none; }
  .g-exit { bottom: auto; top: 78px; left: 16px; }
}

/* ───────── legal notice (NpSG) ───────── */
.legal-badge { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: #d81b3f; box-shadow: 0 0 14px rgba(216, 27, 63, .55); white-space: nowrap; }
.g-unlock .legal-badge { margin: -6px 0 12px; }
.legal-box { display: flex; flex-direction: column; gap: 4px; margin: -6px 0 16px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: #ffd9e0;
  background: rgba(216, 27, 63, .16); border: 1px solid rgba(255, 70, 100, .65); font-size: 12px; line-height: 1.45; }
.legal-box[hidden] { display: none; }
.legal-box b { color: #fff; font-size: 12.5px; letter-spacing: .03em; }
.legal-box u { color: #fff; }
@media (max-width: 560px) { .legal-box span { display: none; } .legal-box { margin-bottom: 12px; } }
#panel { max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 900px) { #panel { max-height: 62vh; } }
.g-music { bottom: max(16px, env(safe-area-inset-bottom)); left: 150px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); font-size: 12px; }
.g-music.off { opacity: .7; }
@media (max-width: 560px) { .g-music { bottom: auto; top: 78px; left: 140px; } }

/* ───────── Game Mode button, centered & prominent ───────── */
.hud-top .btn-game { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); height: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 22px 10px 16px; border-radius: 18px; font-size: 15px; letter-spacing: .02em; text-align: left; pointer-events: auto;
  box-shadow: 0 0 30px rgba(255, 79, 216, .55), 0 0 70px rgba(70, 247, 255, .25); animation: flow 6s linear infinite, gamePulse 2.4s ease-in-out infinite; transition: transform .2s; }
.hud-top .btn-game:hover { transform: translateX(-50%) scale(1.06); }
.btn-game .g-ico { font-size: 26px; line-height: 1; }
.btn-game .g-txt { display: flex; flex-direction: column; line-height: 1.15; }
.btn-game .g-txt b { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 16px; letter-spacing: .04em; }
.btn-game .g-txt small { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
@keyframes gamePulse { 0%, 100% { box-shadow: 0 0 26px rgba(255, 79, 216, .5), 0 0 60px rgba(70, 247, 255, .2); } 50% { box-shadow: 0 0 42px rgba(255, 79, 216, .85), 0 0 110px rgba(70, 247, 255, .45); } }
.btn-game.callout { animation: flow 6s linear infinite, gameCall .9s ease-in-out infinite; }
@keyframes gameCall { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.12); box-shadow: 0 0 60px rgba(198, 255, 61, .9), 0 0 140px rgba(255, 79, 216, .6); } }
#hint { top: 92px; }
@media (max-width: 900px) {
  .hud-top .btn-game { top: 66px; padding: 8px 16px 8px 12px; }
  .btn-game .g-txt b { font-size: 14px; }
  #hint { top: 128px; }
}
@media (max-width: 560px) {
  .hud-top .btn-game { top: 60px; }
  .btn-game .g-txt small { font-size: 9px; }
  .btn-game .g-ico { font-size: 22px; }
  #hint { top: 118px; }
}
.in-game .hud-top .btn-game { display: none; }
.hud-top .btn-game { background: linear-gradient(100deg, #ff4fd8, #ffd54a 25%, #46f7ff 50%, #a46bff 75%, #ff4fd8); background-size: 400% 100%; }
@media (max-width: 560px) { .btn-game .g-txt small { white-space: nowrap; } }
#game-hud kbd { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font: 700 10px/1.5 'Space Grotesk', sans-serif; letter-spacing: .04em; border: 1px solid currentColor; opacity: .75; }
.g-code { display: block; width: 100%; cursor: copy; background: transparent; font-family: 'Unbounded'; }
.g-code:hover { background: rgba(198, 255, 61, .08); }
.g-r-copy { margin: -8px 0 14px; font-size: 11px; color: var(--muted); }
@media (pointer: coarse) { #game-hud kbd { display: none; } }