:root {
  --bg: #05010d;
  --pink: #ff3d8f;
  --cyan: #38e6ff;
  --purple: #b96bff;
  --yellow: #ffe94a;
  --green: #2dff8f;
  --text: #eaf6ff;
  --line: rgba(120, 210, 255, .22);
  --radius: 14px;
  --radius-lg: 22px;
  color-scheme: dark;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Bahnschrift", "Century Gothic", "Segoe UI", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* ================= background fx ================= */
.bgfx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -20%, #1a0b3a 0%, transparent 60%),
    radial-gradient(60% 50% at 85% 10%, rgba(255,61,143,.14), transparent 60%),
    radial-gradient(50% 40% at 10% 20%, rgba(56,230,255,.12), transparent 55%),
    linear-gradient(180deg, #07010f, #020008);
}

.grid {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -8%;
  height: 62%;
  background:
    repeating-linear-gradient(90deg, rgba(120,210,255,.13) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(120,210,255,.13) 0 1px, transparent 1px 52px);
  transform: perspective(460px) rotateX(62deg);
  transform-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%, #000);
  mask-image: linear-gradient(180deg, transparent, #000 32%, #000);
  opacity: .85;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}
.glow-a { width: 340px; height: 340px; left: -120px; top: -90px; background: #ff3d8f; }
.glow-b { width: 300px; height: 300px; right: -110px; top: 18%; background: #38e6ff; }
.glow-c { width: 280px; height: 280px; left: 28%; bottom: -130px; background: #b96bff; }

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px);
  opacity: .45;
}
.scanlines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  top: -140px;
  background: linear-gradient(180deg, transparent, rgba(120,220,255,.07), transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { to { transform: translateY(calc(100vh + 140px)); } }

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55));
}

/* ================= app layout ================= */
#app {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(env(safe-area-inset-top, 10px), 10px) 14px max(env(safe-area-inset-bottom, 10px), 10px);
  gap: 10px;
}

/* ================= top bar ================= */
.topbar { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: baseline; gap: 9px; letter-spacing: .1em; }
.logo .l1 {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px rgba(56,230,255,.9), 0 0 22px rgba(56,230,255,.5), 0 2px 0 rgba(0,0,0,.5);
}
.logo .l2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: .4em;
  text-shadow: 0 0 8px rgba(255,61,143,.8), 0 0 20px rgba(255,61,143,.4);
}
.logo-line { flex: 1; height: 1px; margin-left: 14px; background: linear-gradient(90deg, rgba(120,210,255,.5), transparent); }

/* ================= HUD ================= */
#hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(30,10,60,.66), rgba(12,4,28,.74));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,61,143,.06);
}
#modeLabel {
  font-weight: 900;
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .24em;
  text-shadow: 0 0 8px rgba(56,230,255,.8);
}
#statWrap {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  font-size: 18px;
  padding: 4px 11px;
  border: 1px solid rgba(120,210,255,.18);
  border-radius: 999px;
  background: rgba(8,2,20,.5);
  transition: border-color .2s ease, box-shadow .2s ease;
}
#statIcon {
  font-size: 15px;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255,233,74,.8);
}
#statValue {
  font-weight: 900;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 6px rgba(56,230,255,.7);
}
#scoreWrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#scoreCount {
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,61,143,.8), 0 0 26px rgba(255,61,143,.4);
}
.statLabel { font-size: 9px; opacity: .6; font-weight: 800; letter-spacing: .3em; }
#statWrap.low-time {
  border-color: rgba(255,80,80,.6);
  box-shadow: 0 0 14px rgba(255,60,60,.35);
}
#statWrap.low-time #statValue {
  color: #ff5d6c;
  text-shadow: 0 0 8px rgba(255,93,108,.9);
}

/* ================= board ================= */
#boardWrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.board-frame {
  position: relative;
  display: inline-block;
  padding: 8px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,61,143,.55), rgba(56,230,255,.55), rgba(185,107,255,.55));
  box-shadow: 0 0 18px rgba(56,230,255,.22), 0 0 44px rgba(255,61,143,.16), 0 24px 60px rgba(0,0,0,.55);
}

#board {
  --n: 8;
  position: relative;
  width: min(86vw, 460px, calc(70vh * 0.76));
  aspect-ratio: 8 / 10;
  background:
    linear-gradient(180deg, rgba(120,210,255,.05), transparent 30%),
    repeating-linear-gradient(0deg, rgba(120,210,255,.05) 0 1px, transparent 1px calc(100% / 10)),
    repeating-linear-gradient(90deg, rgba(120,210,255,.05) 0 1px, transparent 1px calc(100% / 8)),
    linear-gradient(170deg, #0e0324, #070112);
  border-radius: 18px;
  padding: 6px;
  box-shadow: inset 0 0 0 1px rgba(120,210,255,.12), inset 0 0 42px rgba(56,230,255,.07);
}

#fxLayer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.corners { position: absolute; inset: 5px; z-index: 4; pointer-events: none; }
.corners i {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--cyan);
  filter: drop-shadow(0 0 6px rgba(56,230,255,.9));
}
.corners i:nth-child(1) { left: 0; top: 0; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.corners i:nth-child(2) { right: 0; top: 0; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.corners i:nth-child(3) { left: 0; bottom: 0; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.corners i:nth-child(4) { right: 0; bottom: 0; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.cell {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s cubic-bezier(.34,1.4,.64,1);
  will-change: transform;
  touch-action: none;
}

.candy {
  width: 94%;
  height: 94%;
  position: relative;
  cursor: pointer;
  transition: transform .12s ease;
}
.candy.selected {
  filter: drop-shadow(0 0 6px rgba(56,230,255,.9)) drop-shadow(0 0 16px rgba(56,230,255,.5));
  animation: selectBounce .5s cubic-bezier(.34,1.56,.64,1) infinite;
}
.candy.selected::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 34%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 10px rgba(56,230,255,.9), inset 0 0 8px rgba(56,230,255,.5);
}
.candy.popping { animation: pop .16s ease forwards; }
.candy.spawning { animation: spawnIn .34s cubic-bezier(.34,1.56,.64,1); }
.candy.shake { animation: shake .18s ease; }

@keyframes selectBounce {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.22); }
}
@keyframes pop {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  40% { transform: scale(1.35); opacity: 1; filter: brightness(1.8); }
  100% { transform: scale(0); opacity: 0; filter: brightness(2.4); }
}
@keyframes spawnIn {
  0% { transform: scale(.3); opacity: 0; }
  55% { transform: scale(1.22); opacity: 1; }
  75% { transform: scale(.9); }
  90% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-14%); }
  75% { transform: translateX(14%); }
}

/* ================= neon gems ================= */
.gem {
  position: absolute;
  inset: 2%;
}

.gem-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  transform: scale(var(--icon-scale, 0.6));
  transform-origin: center;
}
.gem-ico i { position: absolute; display: block; animation: gemFloat 3.6s ease-in-out infinite; }
.gem-ico .ico-facet { animation-delay: .12s; }
.gem-ico .ico-spark { animation-delay: .24s; }
@keyframes gemFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4%); }
}

.gem-ico .ico-body { inset: 1px; }
.gem-ico .ico-facet {
  inset: 3px;
  background: radial-gradient(130% 100% at 30% 16%, rgba(255,255,255,.9), rgba(255,255,255,.14) 38%, transparent 55%);
}
.gem-ico .ico-spark {
  left: 50%;
  top: 33%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,.4) 55%, rgba(255,255,255,0) 72%);
  box-shadow: 0 0 8px rgba(255,255,255,.9);
  opacity: .95;
}

.g0 .ico-body {
  clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 20% 100%, 0% 40%);
  background: linear-gradient(165deg, #ffd0e4, #ff2d7a 55%, #8f1250);
  filter: drop-shadow(0 0 4px #ff3d8f) drop-shadow(0 0 12px rgba(255,61,143,.55));
}
.g1 .ico-body {
  clip-path: polygon(28% 0%, 72% 0%, 100% 50%, 72% 100%, 28% 100%, 0% 50%);
  background: linear-gradient(165deg, #ffe6c2, #ff8a2a 55%, #a84508);
  filter: drop-shadow(0 0 4px #ffa53d) drop-shadow(0 0 12px rgba(255,165,61,.55));
}
.g2 .ico-body {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(165deg, #fffbe0, #ffd23a 55%, #c78f00);
  filter: drop-shadow(0 0 4px #ffe94a) drop-shadow(0 0 12px rgba(255,233,74,.55));
}
.g3 .ico-body {
  clip-path: polygon(50% 0%, 100% 55%, 50% 100%, 0% 55%);
  background: linear-gradient(165deg, #d0ffe6, #23e879 55%, #0a7a44);
  filter: drop-shadow(0 0 4px #2dff8f) drop-shadow(0 0 12px rgba(45,255,143,.55));
}
.g4 .ico-body {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(165deg, #d2f8ff, #22d8ff 55%, #0a5e8a);
  filter: drop-shadow(0 0 4px #38e6ff) drop-shadow(0 0 12px rgba(56,230,255,.55));
}
.g5 .ico-body {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(165deg, #ecd7ff, #a34dff 55%, #5a1a8a);
  filter: drop-shadow(0 0 4px #b96bff) drop-shadow(0 0 12px rgba(185,107,255,.55));
}

/* ================= special candies ================= */
.special-stripeH .gem-ico, .special-stripeV .gem-ico,
.special-wrapped .gem-ico, .special-bomb .gem-ico { display: none; }

.c0.special-stripeH .gem, .c0.special-stripeV .gem, .c0.special-wrapped .gem { --gem-c: #ff3d8f; }
.c1.special-stripeH .gem, .c1.special-stripeV .gem, .c1.special-wrapped .gem { --gem-c: #ffa53d; }
.c2.special-stripeH .gem, .c2.special-stripeV .gem, .c2.special-wrapped .gem { --gem-c: #ffe94a; }
.c3.special-stripeH .gem, .c3.special-stripeV .gem, .c3.special-wrapped .gem { --gem-c: #2dff8f; }
.c4.special-stripeH .gem, .c4.special-stripeV .gem, .c4.special-wrapped .gem { --gem-c: #38e6ff; }
.c5.special-stripeH .gem, .c5.special-stripeV .gem, .c5.special-wrapped .gem { --gem-c: #b96bff; }

.special-stripeH .gem, .special-stripeV .gem {
  inset: 3%;
  border-radius: 24%;
  background:
    radial-gradient(150% 120% at 50% 120%, rgba(0,0,0,.3), transparent 55%),
    linear-gradient(160deg, var(--gem-c), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 0 10px var(--gem-c), 0 0 22px var(--gem-c), inset 0 0 8px rgba(255,255,255,.35);
}
.special-stripeH .gem::after, .special-stripeV .gem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 15%, rgba(255,255,255,.6) 15% 30%, rgba(255,255,255,0) 30% 45%);
}
.special-stripeV .gem::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 15%, rgba(255,255,255,.6) 15% 30%, rgba(255,255,255,0) 30% 45%);
}

.special-wrapped .gem {
  inset: 3%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.6), var(--gem-c) 55%, rgba(0,0,0,.25));
  border: 2px solid rgba(255,255,255,.75);
  animation: wrapPulse 1.5s ease-in-out infinite;
}
@keyframes wrapPulse {
  0%, 100% { box-shadow: 0 0 6px var(--gem-c), 0 0 14px var(--gem-c), 0 0 0 3px rgba(255,255,255,.25), 0 0 0 6px rgba(255,255,255,.05); }
  50% { box-shadow: 0 0 12px var(--gem-c), 0 0 30px var(--gem-c), 0 0 0 5px rgba(255,255,255,.28), 0 0 0 10px rgba(255,255,255,.08); }
}

.special-bomb .gem {
  inset: 5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff3d8f, #ffe94a, #2dff8f, #38e6ff, #b96bff, #ff3d8f);
  box-shadow: 0 0 12px rgba(255,255,255,.8), 0 0 26px rgba(185,107,255,.7), 0 0 44px rgba(255,61,143,.5);
  animation: bombSpin 2.4s linear infinite;
}
.special-bomb .gem::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.4) 45%, transparent 70%);
}
@keyframes bombSpin { to { transform: rotate(360deg); } }

/* ================= fx text / blast ================= */
.combo-pop {
  position: absolute;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 0 8px rgba(56,230,255,.9), 0 0 20px rgba(56,230,255,.5), 0 2px 0 rgba(0,0,0,.4);
  animation: comboFloat .5s ease forwards;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes comboFloat {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { transform: translateY(-6px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-42px) scale(1); opacity: 0; }
}

.blast {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff, rgba(255,255,255,0) 55%),
    radial-gradient(circle, rgba(255,61,143,.9) 0 30%, rgba(56,230,255,.6) 50%, rgba(185,107,255,.2) 62%, transparent 70%);
  animation: blastAnim .26s ease forwards;
  pointer-events: none;
}
@keyframes blastAnim {
  0% { transform: scale(.15); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ================= overlays & cards ================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: radial-gradient(80% 60% at 50% 20%, rgba(40,12,80,.5), rgba(4,1,10,.92));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.overlay.open { display: flex; }

#modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: radial-gradient(70% 50% at 50% 30%, rgba(40,12,80,.45), rgba(4,1,10,.9));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#modal.open { display: flex; }

.modal-card {
  position: relative;
  background: linear-gradient(180deg, rgba(26,9,54,.9), rgba(9,2,22,.94));
  border: 1px solid rgba(120,210,255,.3);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 24px rgba(56,230,255,.16), 0 0 60px rgba(255,61,143,.12), 0 30px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  animation: cardIn .4s cubic-bezier(.34,1.4,.64,1);
}
@keyframes cardIn {
  0% { transform: scale(.85) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
  filter: drop-shadow(0 0 6px var(--cyan));
}

.neon-title {
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 0 4px rgba(255,255,255,.8), 0 0 14px rgba(56,230,255,.9), 0 0 30px rgba(56,230,255,.5), 0 0 60px rgba(56,230,255,.3);
  animation: flicker 4.2s infinite;
}
.neon-title span {
  color: var(--pink);
  text-shadow: 0 0 6px rgba(255,255,255,.6), 0 0 18px rgba(255,61,143,.9), 0 0 40px rgba(255,61,143,.55);
}
@keyframes flicker {
  0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
  20%, 22%, 55% { opacity: .55; }
}

.card-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 12px;
  border: 1px solid rgba(255,233,74,.5);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255,233,74,.8);
  box-shadow: inset 0 0 8px rgba(255,233,74,.15), 0 0 12px rgba(255,233,74,.25);
}

.card-sub {
  font-size: 13px;
  letter-spacing: .05em;
  opacity: .78;
  line-height: 1.55;
  margin: 0 0 22px;
  color: #cfd8ff;
}

.mode-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  text-align: left;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, rgba(34,12,70,.7), rgba(12,3,28,.85));
  border: 1px solid rgba(120,210,255,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  overflow: hidden;
}
.mode-btn:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 16px rgba(56,230,255,.35), 0 8px 22px rgba(0,0,0,.4);
}
.mode-btn:active { transform: translateY(0) scale(.99); }
.mode-btn:last-child { margin-bottom: 0; }
.mode-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--pink), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.mode-btn:hover::after { transform: scaleX(1); }
.mode-btn .btn-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,61,143,.6);
}
.mode-btn span { font-size: 12px; opacity: .72; line-height: 1.5; letter-spacing: .03em; }
.mode-btn .btn-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 14px;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.mode-btn:hover .btn-arrow { opacity: 1; transform: translateY(-50%) translateX(3px); }

.card-footer {
  margin-top: 22px;
  font-size: 9px;
  letter-spacing: .42em;
  color: rgba(140,180,255,.5);
  text-shadow: 0 0 6px rgba(56,230,255,.35);
  animation: blink 1.6s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

.modal-card h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .1em;
  background: linear-gradient(180deg, #fff, #b9c6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(56,230,255,.5));
}
.modal-card p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .03em;
  white-space: pre-line;
  color: #cfd8ff;
  opacity: .9;
}
.modal-card button {
  border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .12em;
  padding: 13px 34px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.25), 0 0 18px rgba(255,61,143,.5), 0 8px 20px rgba(0,0,0,.4);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.modal-card button:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.25), 0 0 26px rgba(255,61,143,.7), 0 10px 26px rgba(0,0,0,.45);
}
.modal-card button:active { transform: translateY(0) scale(.98); }

@media (max-width: 360px) {
  .logo .l1 { font-size: 22px; }
  .neon-title { font-size: 28px; }
}