:root {
  --cyan: #38f6ff;
  --pink: #ff2fb9;
  --violet: #7b5cff;
  --amber: #ffb52e;
  --ink: #05010f;
  --ink-2: #0b0618;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  scrollbar-width: none;
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: #eaf6ff;
  font-family: ui-sans-serif, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  user-select: none;
  overscroll-behavior: none;
}

body::-webkit-scrollbar { display: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ── 覆蓋層 ─────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 30; scrollbar-width: none;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 6, 40, .55), rgba(3, 0, 10, .92) 70%);
  backdrop-filter: blur(6px);
  opacity: 1; transition: opacity .45s ease;
  padding: max(16px, env(safe-area-inset-top)) 16px;
  overflow-y: auto;
}
.overlay.hidden { opacity: 0; pointer-events: none; }
.hidden { display: none !important; }

#intro::before {
  content: '';
  position: absolute; inset: -2%;
  background: url('../assets/hero.png') center 32% / cover no-repeat;
  opacity: .55;
  filter: saturate(1.15) contrast(1.05);
  animation: heroDrift 26s ease-in-out infinite alternate;
  z-index: -2;
}
#intro::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(10, 2, 22, .2), rgba(3, 0, 10, .9) 68%),
    linear-gradient(180deg, rgba(4, 1, 12, .55) 0%, rgba(4, 1, 12, .35) 40%, rgba(4, 1, 12, .95) 100%);
  z-index: -1;
}
@keyframes heroDrift {
  from { transform: scale(1.02) translateY(0); }
  to { transform: scale(1.09) translateY(-10px); }
}
.overlay { isolation: isolate; }

.intro-inner {
  width: min(920px, 100%);
  text-align: center;
  padding: 8px;
}

.kicker {
  font-size: 11px; letter-spacing: .55em; color: #79f7ff;
  text-transform: uppercase; opacity: .85; margin-bottom: 18px;
  text-shadow: 0 0 18px rgba(56, 246, 255, .8);
}

.logo {
  margin: 0;
  font-size: clamp(38px, 8.6vw, 104px);
  line-height: .92;
  letter-spacing: .06em;
  font-weight: 900;
  font-family: ui-sans-serif, "Avenir Next", "PingFang TC", system-ui, sans-serif;
}
.logo-cyber {
  color: #d9fbff;
  text-shadow:
    0 0 6px #38f6ff, 0 0 26px rgba(56, 246, 255, .55),
    0 0 64px rgba(56, 246, 255, .25);
}
.logo-penguin {
  margin-left: .14em;
  background: linear-gradient(180deg, #ffd1f2 0%, #ff2fb9 45%, #7b5cff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 47, 185, .55));
}
.logo-sub {
  margin-top: 14px; font-size: clamp(12px, 1.9vw, 17px);
  letter-spacing: .72em; color: #9fe9ff; opacity: .9; padding-left: .72em;
}

.tagline {
  margin: 22px auto 26px; max-width: 34em;
  font-size: clamp(12px, 1.55vw, 15px); line-height: 1.9;
  color: #a9c4d8;
}

.cta {
  appearance: none; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 800; letter-spacing: .3em;
  font-size: clamp(13px, 1.6vw, 16px);
  color: #04121a;
  padding: 16px 44px 16px 48px;
  background: linear-gradient(100deg, #6ffcff, #38f6ff 40%, #b46bff 100%);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 0 34px rgba(56, 246, 255, .5), 0 0 90px rgba(124, 92, 255, .25);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 46px rgba(56,246,255,.7), 0 0 120px rgba(124,92,255,.35); }
.cta:active { transform: translateY(0) scale(.985); }
.cta.small { padding: 13px 34px 13px 38px; font-size: 13px; }

.controls-grid {
  margin: 30px auto 0; max-width: 640px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 9px 18px; font-size: 12px; color: #93aec3; text-align: left;
}
.controls-grid div { display: flex; align-items: center; gap: 6px; }
kbd {
  display: inline-block; min-width: 22px; padding: 3px 7px;
  border-radius: 5px; border: 1px solid rgba(120, 240, 255, .28);
  background: rgba(12, 30, 48, .8); color: #cdf6ff;
  font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .4);
}
.controls-grid span { opacity: .8; }

.hint { margin-top: 26px; font-size: 11px; color: #5f7a90; letter-spacing: .06em; }

/* ── HUD ────────────────────────────────── */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }

.hud-top {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 18px; right: 18px;
  display: flex; align-items: flex-start; gap: 26px;
}
.hud-label { font-size: 9px; letter-spacing: .34em; color: #5ee7ff; opacity: .8; }
.hud-value {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: clamp(24px, 3.4vw, 40px); font-weight: 800; line-height: 1.05;
  color: #ecfeff;
  text-shadow: 0 0 16px rgba(56, 246, 255, .55), 0 0 40px rgba(56, 246, 255, .22);
  font-variant-numeric: tabular-nums;
}
.hud-value.small { font-size: clamp(18px, 2.4vw, 28px); color: #ffd7f5;
  text-shadow: 0 0 16px rgba(255, 47, 185, .6); }

.hud-right { margin-left: auto; text-align: right; display: flex; gap: 22px; }
.hud-stat { font-family: ui-monospace, monospace; font-size: 20px; font-weight: 700; color: #d7f7ff; }
.hud-stat em { display: block; font-style: normal; font-size: 8px; letter-spacing: .3em; color: #6ea9c4; margin-top: 2px; }

#trick-feed {
  position: absolute; left: 18px; top: 104px;
  display: flex; flex-direction: column; gap: 5px;
  font-family: ui-monospace, monospace; font-size: 11px; color: #8ff8ff;
}
#trick-feed div {
  padding: 3px 9px;
  background: linear-gradient(90deg, rgba(10, 40, 60, .72), rgba(10, 40, 60, 0));
  border-left: 2px solid var(--cyan);
  animation: feedIn .28s ease both;
}
@keyframes feedIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.trick-pop {
  position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%) scale(.9);
  font-size: clamp(22px, 4.4vw, 46px); font-weight: 900; letter-spacing: .12em;
  color: #fff; opacity: 0; white-space: nowrap;
  text-shadow: 0 0 12px #38f6ff, 0 0 34px rgba(255, 47, 185, .75), 0 0 70px rgba(255, 47, 185, .35);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2, 1.6, .4, 1);
}
.trick-pop.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#combo-bar {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
  width: min(320px, 60vw); height: 3px; background: rgba(255, 255, 255, .08);
  overflow: hidden; border-radius: 2px;
}
#combo-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #38f6ff, #ff2fb9);
  box-shadow: 0 0 12px rgba(255, 47, 185, .8);
  transition: width .12s linear;
}

.hud-bottom { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; }
.grind {
  display: inline-block; padding: 5px 20px; font-family: ui-monospace, monospace;
  font-size: 12px; letter-spacing: .5em; color: #1a0b00;
  background: linear-gradient(90deg, #ffd34a, #ff8a00);
  box-shadow: 0 0 26px rgba(255, 170, 0, .8);
  animation: pulse .5s infinite alternate;
}
@keyframes pulse { from { opacity: .72; } to { opacity: 1; } }

.icon-btn {
  pointer-events: auto; position: absolute; right: 18px; bottom: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(120, 240, 255, .35); background: rgba(6, 22, 36, .65);
  color: #bff3ff; font-size: 12px; font-family: ui-monospace, monospace; cursor: pointer;
  backdrop-filter: blur(6px);
}
.icon-btn:hover { border-color: var(--cyan); color: #fff; }

/* ── 面板 ───────────────────────────────── */
.panel {
  width: min(440px, 100%);
  background: linear-gradient(165deg, rgba(16, 8, 34, .94), rgba(6, 3, 16, .96));
  border: 1px solid rgba(120, 240, 255, .18);
  box-shadow: 0 0 60px rgba(56, 246, 255, .12), inset 0 0 60px rgba(124, 92, 255, .06);
  padding: 28px 26px 24px;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  text-align: center;
}
.panel h2 {
  margin: 0 0 20px; font-size: 22px; letter-spacing: .42em; font-weight: 800;
  color: #e9fdff; text-shadow: 0 0 22px rgba(56, 246, 255, .5); padding-left: .42em;
}
.settings { display: grid; gap: 14px; margin-bottom: 24px; }
.row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #a9c4d8; }
.toggle {
  border: 1px solid rgba(120, 240, 255, .3); background: transparent; color: #7fb9cc;
  padding: 5px 16px; border-radius: 999px; font-size: 11px; letter-spacing: .2em; cursor: pointer;
  font-family: inherit;
}
.toggle.on { background: rgba(56, 246, 255, .14); color: #bffaff; border-color: var(--cyan); }
.seg { display: flex; gap: 4px; }
.seg button {
  border: 1px solid rgba(120, 240, 255, .2); background: transparent; color: #7fb9cc;
  padding: 5px 12px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.seg button.active { background: rgba(56, 246, 255, .16); color: #d8fbff; border-color: var(--cyan); }
.ghost {
  margin-top: 12px; width: 100%; padding: 11px; background: transparent; cursor: pointer;
  border: 1px solid rgba(120, 240, 255, .2); color: #8fb6c9; font-family: inherit;
  font-size: 12px; letter-spacing: .28em;
}
.ghost:hover { color: #dff8ff; border-color: rgba(120, 240, 255, .5); }

.bail-title {
  color: #ff5c8a !important; letter-spacing: .5em !important;
  text-shadow: 0 0 26px rgba(255, 60, 120, .6) !important;
}
.bail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 26px; }
.bail-stats div {
  padding: 12px 10px; background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(120, 240, 255, .1);
}
.bail-stats em { display: block; font-style: normal; font-size: 10px; letter-spacing: .2em; color: #7d9aae; margin-bottom: 6px; }
.bail-stats b {
  font-family: ui-monospace, monospace; font-size: 19px; color: #eafcff;
  text-shadow: 0 0 14px rgba(56, 246, 255, .4);
}

/* ── 觸控 ───────────────────────────────── */
#touch { position: fixed; inset: 0; z-index: 22; pointer-events: none; }
.touch-left, .touch-right {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom));
  display: grid; gap: 10px;
}
.touch-left { left: 18px; grid-template-columns: repeat(2, 62px); }
.touch-right { right: 18px; grid-template-columns: repeat(3, 62px); grid-auto-rows: 54px; }
.tbtn {
  pointer-events: auto; border-radius: 14px;
  border: 1px solid rgba(120, 240, 255, .3);
  background: rgba(8, 24, 40, .55); color: #cdf4ff;
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700;
  backdrop-filter: blur(8px); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  height: 62px; touch-action: none;
}
.tbtn:active { background: rgba(56, 246, 255, .25); color: #fff; }
.tbtn.trick { font-size: 10px; letter-spacing: .08em; }
.tbtn.jump { grid-column: span 3; height: 46px; border-color: rgba(255, 47, 185, .5);
  color: #ffd7f5; background: rgba(48, 8, 36, .55); }

/* ── 裝飾 ───────────────────────────────── */
#vignette {
  position: fixed; inset: 0; z-index: 15; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, .55) 100%);
  mix-blend-mode: multiply;
}
#scanlines {
  position: fixed; inset: 0; z-index: 16; pointer-events: none; opacity: .16;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}

#loading {
  position: fixed; inset: 0; z-index: 40; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .5em; color: #38f6ff;
  transition: opacity .5s ease;
}
#loading.done { opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
  .controls-grid { display: none; }
  .hud-top { gap: 14px; }
  #trick-feed { top: 86px; font-size: 10px; }
  .hint { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  #touch { display: none !important; }
}

.apk {
  display: inline-block; margin-top: 14px; padding: 9px 22px;
  font-size: 11px; letter-spacing: .24em; color: #9fe9ff; text-decoration: none;
  border: 1px solid rgba(120, 240, 255, .3);
  background: rgba(10, 30, 48, .5);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.apk:hover { color: #fff; border-color: var(--cyan); background: rgba(56, 246, 255, .16); }