/* =========================================
   OMEGA 100 — FULL STYLESHEET v4
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Comic+Neue:wght@400;700&display=swap');

:root {
  --neon-green:  #00ff88;
  --neon-purple: #bf00ff;
  --hot-pink:    #ff006e;
  --gold:        #ffd700;
  --electric:    #00aaff;
  --dark-bg:     #06000f;
  --panel-bg:    #0e0020;
  --silver:      #c0c0c0;
  --bronze:      #cd7f32;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background-color: var(--dark-bg); color:#fff; font-family:'Comic Neue','Comic Sans MS',cursive; overflow-x:hidden; min-height:100vh; }
::-webkit-scrollbar { width:8px; background:#000; }
::-webkit-scrollbar-thumb { background:var(--neon-green); border-radius:4px; }

/* ── CRT ── */
.crt-overlay { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9998; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px); animation:crtFlicker .12s infinite; }
@keyframes crtFlicker { 0%{opacity:.97}33%{opacity:1}66%{opacity:.95}100%{opacity:.99} }
#particle-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9997; }

/* ── Audio Toggle ── */
#audio-toggle { position:fixed; bottom:14px; right:14px; z-index:9999; background:var(--panel-bg); border:2px solid var(--neon-green); color:var(--neon-green); font-family:'Press Start 2P',monospace; font-size:7px; padding:8px 11px; border-radius:6px; cursor:pointer; transition:all .2s; animation:audioGlow 2s ease-in-out infinite; line-height:1.5; }
#audio-toggle:hover { background:var(--neon-green); color:#000; transform:scale(1.05); }
@keyframes audioGlow { 0%,100%{box-shadow:0 0 6px var(--neon-green)}50%{box-shadow:0 0 20px var(--neon-green),0 0 45px var(--neon-green)} }

/* truth-medal removed */

/* =========================================
   HEADER
   ========================================= */
.header-section { background:linear-gradient(135deg,#1a0a00 0%,#3d1c00 25%,#1a0030 70%,#06000f 100%); border-bottom:4px solid var(--gold); position:relative; overflow:hidden; }
.money-rain-strip { background:linear-gradient(90deg,var(--neon-green),#00cc66,var(--neon-green)); overflow:hidden; height:34px; display:flex; align-items:center; }
.money-marquee { display:flex; gap:10px; animation:marqueeScroll 8s linear infinite; white-space:nowrap; font-size:18px; flex-shrink:0; }
@keyframes marqueeScroll { 0%{transform:translateX(0)}100%{transform:translateX(-50%)} }
.money-icon-pulse { display:inline-block; animation:moneyPulse .7s ease-in-out infinite alternate; }
@keyframes moneyPulse { 0%{transform:scale(1) rotate(-5deg)}100%{transform:scale(1.3) rotate(5deg)} }

.header-logo-title-row { display:flex; flex-direction:column; align-items:center; padding:10px 14px 6px; gap:6px; }
@media(min-width:700px){ .header-logo-title-row { flex-direction:row; justify-content:center; align-items:center; gap:18px; } }
.omega-logo-svg { width:min(160px,40vw); height:auto; filter:drop-shadow(0 0 18px rgba(255,215,0,.65)); flex-shrink:0; }
.omega-char     { animation:omegaPulse 2.2s ease-in-out infinite; }
@keyframes omegaPulse { 0%,100%{opacity:1;filter:brightness(1) drop-shadow(0 0 8px #ffd700)}50%{opacity:.92;filter:brightness(1.35) drop-shadow(0 0 22px #fff8a0)} }
.omega-100-text { animation:hundredGlow 1.8s ease-in-out infinite alternate; }
@keyframes hundredGlow { 0%{opacity:.9}100%{opacity:1;filter:drop-shadow(0 0 5px #fff)} }
.holy-ring { transform-origin:160px 145px; }
.r1{animation:ring1 4s ease-in-out infinite}.r2{animation:ring2 4s ease-in-out infinite .5s}.r3{animation:ring3 6s linear infinite}
@keyframes ring1{0%,100%{r:130;opacity:.25}50%{r:138;opacity:.08}}
@keyframes ring2{0%,100%{r:114;opacity:.15}50%{r:121;opacity:.05}}
@keyframes ring3{0%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
.whale-fin-left  { animation:finLeft  2.5s ease-in-out infinite alternate; transform-origin:35px 145px; }
.whale-fin-right { animation:finRight 2.5s ease-in-out infinite alternate; transform-origin:285px 145px; }
@keyframes finLeft  {0%{transform:rotate(-4deg) translateY(0)}100%{transform:rotate(4deg) translateY(-8px)}}
@keyframes finRight {0%{transform:rotate(4deg) translateY(0)}100%{transform:rotate(-4deg) translateY(-8px)}}
.pixel-noise rect { animation:pixelFlash .5s ease-in-out infinite alternate; }
.pixel-noise rect:nth-child(odd){animation-delay:.1s}.pixel-noise rect:nth-child(even){animation-delay:.3s}
@keyframes pixelFlash{0%{opacity:.6}100%{opacity:0}}

.header-text-block { text-align:center; }
.main-title {
  font-family:Impact,'Arial Black',sans-serif; font-weight:900;
  color:var(--gold); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  text-align:center;
}
.title-line-sub {
  font-size:clamp(12px,1.9vw,20px);
  color:rgba(255,215,0,.7); letter-spacing:2px;
  text-shadow:1px 1px 0 #6b3000;
}
.title-line-big {
  font-size:clamp(28px,5.5vw,60px); line-height:1;
  color:var(--gold); letter-spacing:1px;
  text-shadow:3px 3px 0 #8b4500, 0 0 30px rgba(255,215,0,.6);
  animation:titleShake .35s ease-in-out infinite alternate;
}
@keyframes titleShake{0%{transform:translateX(-2px) rotate(-.25deg)}100%{transform:translateX(2px) rotate(.25deg)}}
.omega-tagline { font-family:'Press Start 2P',monospace; font-size:clamp(5.5px,1.2vw,9px); color:var(--gold); text-shadow:0 0 10px rgba(255,215,0,.7); line-height:1.7; margin-top:5px; padding:0 4px; }

/* ── Eternal Pledge ── */
.eternal-pledge {
  background:linear-gradient(135deg,rgba(255,215,0,.04) 0%,rgba(0,0,0,0) 50%,rgba(255,215,0,.04) 100%);
  border-top:1px solid rgba(255,215,0,.18); border-bottom:1px solid rgba(255,215,0,.12);
  padding:20px 16px; margin-top:20px;
}
.eternal-pledge-inner {
  max-width:760px; margin:0 auto;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;
}
.ep-icon {
  font-size:46px; color:rgba(255,215,0,.35);
  text-shadow:0 0 20px rgba(255,215,0,.25);
  font-family:serif; flex-shrink:0; line-height:1;
  animation:epIconPulse 3s ease-in-out infinite alternate;
}
@keyframes epIconPulse{ 0%{opacity:.25;transform:scale(.95)}100%{opacity:.55;transform:scale(1.05)} }
.ep-content { flex:1; min-width:240px; }
.ep-title {
  font-family:Impact,'Arial Black',sans-serif; font-size:clamp(15px,2.4vw,22px);
  color:var(--gold); text-transform:uppercase; letter-spacing:1px;
  text-shadow:0 0 16px rgba(255,215,0,.35); margin-bottom:6px;
}
.ep-body {
  font-family:'Comic Neue',cursive; font-size:clamp(11px,1.6vw,13.5px);
  color:rgba(255,255,255,.5); line-height:1.7;
}
.ep-body em { color:rgba(255,215,0,.65); font-style:italic; }
.ep-body strong { color:rgba(255,255,255,.8); }

/* ── Goals Grid (3 cards) ── */
.goals-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  max-width:860px; margin:10px auto 0; padding:0 12px;
}
/* Mobile: 1 column compact list */
@media(max-width:560px){ .goals-grid { grid-template-columns:1fr; gap:5px; } }

.goal-card {
  border-radius:12px; padding:10px 9px 10px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-align:center; position:relative; overflow:hidden;
  transition:transform .22s, box-shadow .22s; cursor:default;
}
/* Mobile: slightly tighter but sub text stays visible */
@media(max-width:560px){
  .goal-card { padding:9px 10px 9px; gap:3px; }
  .gc-emoji  { font-size:24px; }
  .gc-step   { display:none; }
  .goal-card:hover { transform:none; }
}
.goal-card:hover { transform:translateY(-3px) scale(1.02); }

/* Lambo — red tint */
.gc-lambo {
  background:linear-gradient(160deg,rgba(160,0,0,.22),rgba(80,0,0,.3));
  border:1.5px solid rgba(255,70,70,.3);
}
.gc-lambo:hover { box-shadow:0 0 24px rgba(255,60,60,.18); }

/* Mansion — purple tint */
.gc-mansion {
  background:linear-gradient(160deg,rgba(100,0,180,.2),rgba(55,0,110,.3));
  border:1.5px solid rgba(180,70,255,.3);
}
.gc-mansion:hover { box-shadow:0 0 24px rgba(170,60,255,.18); }

/* Kids — green tint (distinct, glowing) */
.gc-kids {
  background:linear-gradient(160deg,rgba(0,140,70,.2),rgba(0,70,35,.3));
  border:1.5px solid rgba(0,255,136,.35);
  box-shadow:0 0 18px rgba(0,255,136,.07);
}
.gc-kids:hover { box-shadow:0 0 30px rgba(0,255,136,.22); }

.gc-step  { font-family:'Press Start 2P',monospace; font-size:5.5px; color:rgba(255,255,255,.3); letter-spacing:1px; }
.gc-emoji { font-size:26px; line-height:1; }
.gc-title {
  font-family:Impact,'Arial Black',sans-serif; font-size:clamp(11px,1.7vw,15px);
  color:#fff; text-transform:uppercase; line-height:1.15;
}
.gc-kids .gc-title { color:var(--neon-green); text-shadow:0 0 8px rgba(0,255,136,.3); }
.gc-sub { font-size:clamp(8px,1.2vw,10px); color:rgba(255,255,255,.48); line-height:1.45; }
.gc-kids .gc-sub { color:rgba(0,255,136,.6); }
.gc-tag {
  font-family:'Press Start 2P',monospace; font-size:6px;
  padding:2px 7px; border-radius:20px; margin-top:1px;
}
.mine-tag { background:var(--hot-pink); color:#fff; }
.real-tag { background:var(--neon-green); color:#000; animation:freeBadgePulse 1.5s ease-in-out infinite alternate; }

/* ── Pledge Bar (Broke filter + Twitter) ── */
.pledge-bar {
  max-width:860px; margin:8px auto 12px; padding:0 12px;
  display:flex; flex-direction:column; gap:6px;
}
.broke-filter {
  background:rgba(255,40,40,.08); border:1px solid rgba(255,50,50,.22);
  border-radius:8px; padding:8px 14px; text-align:center;
  font-family:Impact,'Arial Black',sans-serif; font-size:clamp(10px,1.6vw,13px);
  color:rgba(255,100,100,.85); text-transform:uppercase; letter-spacing:.5px;
  animation:brokeFilterPulse 3s ease-in-out infinite alternate;
}
@keyframes brokeFilterPulse {
  0%  { border-color:rgba(255,50,50,.18); }
  100%{ border-color:rgba(255,50,50,.4); box-shadow:0 0 14px rgba(255,40,40,.12); }
}

.twitter-pledge {
  background:rgba(0,0,0,.45); border:1.5px solid rgba(255,255,255,.12);
  border-radius:14px; padding:13px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  justify-content:space-between; transition:border-color .25s;
}
.twitter-pledge:hover { border-color:rgba(255,255,255,.28); }
.tp-text { font-size:clamp(9.5px,1.45vw,12px); color:rgba(255,255,255,.62); line-height:1.6; flex:1; min-width:180px; }
.tp-bold  { color:#fff; font-weight:700; }
.tp-promise { display:block; margin-top:4px; font-size:10px; color:rgba(0,255,136,.65); font-style:italic; }

.twitter-btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px;
  background:#000;
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:12px; color:#fff; font-family:Impact,'Arial Black',sans-serif;
  font-size:clamp(12px,1.8vw,15px); text-decoration:none;
  text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; flex-shrink:0;
  transition:background .18s, border-color .2s, transform .15s, box-shadow .18s;
  position:relative; overflow:hidden;
}
/* Subtle white shimmer on the button */
.twitter-btn::before {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transition:left .4s ease;
}
.twitter-btn:hover::before { left:160%; }
.twitter-btn:hover {
  background:#0d0d0d;
  border-color:rgba(255,255,255,.55);
  transform:scale(1.05);
  box-shadow:0 6px 26px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1);
}
.twitter-x-icon { width:18px; height:18px; flex-shrink:0; }

/* ── Sub-header ── */
.sub-header { background:var(--neon-green); padding:11px 20px; text-align:center; }
.sub-header-text { font-family:Impact,'Arial Black',sans-serif; font-size:clamp(11px,2.2vw,18px); color:#000; font-weight:900; text-transform:uppercase; }

/* =========================================
   CERTIFICATE — LANDSCAPE FULL-WIDTH SECTION
   ========================================= */
.cert-section { max-width:1440px; margin:0 auto; padding:8px 12px 0; }

/* ── WHALE SECTION (single column, no sidebar) ── */
.hall-layout { max-width:1440px; margin:0 auto; padding:8px 12px; }

/* ═════════════════════════════════════════
   LED SCOREBOARD — FULL-WIDTH HORIZONTAL
   ═════════════════════════════════════════ */
/* ═════════════════════════════════════════
   LED BOARD — cute & absurd scoreboard
   ═════════════════════════════════════════ */
.led-board {
  background:linear-gradient(135deg, #0a0a1a 0%, #0d1117 50%, #0a0a1a 100%);
  border-top:3px solid rgba(0,255,68,.5); border-bottom:3px solid rgba(0,255,68,.5);
  border-left:none; border-right:none;
  overflow:hidden; position:relative;
  box-shadow:0 0 40px rgba(0,255,68,.08), inset 0 0 80px rgba(0,20,0,.3);
  font-family:'Press Start 2P',monospace;
}
.led-board::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:8;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 6px);
}

/* ── Ticker ── */
.led-ticker {
  background:rgba(0,255,68,.04); border-bottom:1px solid rgba(0,255,68,.12);
  overflow:hidden; height:22px; display:flex; align-items:center;
}
.led-ticker-inner {
  white-space:nowrap; font-size:6px; color:#00ff44; opacity:.8;
  animation:ledTick 35s linear infinite; padding-left:100%;
}
@keyframes ledTick{ 0%{transform:translateX(0)}100%{transform:translateX(-100%)} }

/* ── Horizontal body ── */
.led-body {
  display:flex; align-items:stretch;
  max-width:1440px; margin:0 auto; gap:0;
}

/* Col: Title — compact left side */
.led-col-title {
  padding:14px 18px; display:flex; align-items:center; gap:10px;
  flex-shrink:0; border-right:1px solid rgba(0,255,68,.08);
  min-width:120px;
}
.led-title-emoji {
  font-size:28px; animation:titleBounce 2s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(0,255,68,.3));
}
@keyframes titleBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.led-title-text { display:flex; flex-direction:column; gap:2px; }
.led-board-title {
  font-size:clamp(8px,1vw,11px); color:#00ff44; letter-spacing:1.5px;
  text-shadow:0 0 12px #00ff44; line-height:1.8; text-transform:uppercase; font-weight:900;
}
.led-board-sub {
  font-size:5px; color:rgba(0,255,68,.3); letter-spacing:.8px;
  line-height:1.5; text-transform:uppercase;
}

/* Col: Stats — two cards side by side */
.led-col-stats {
  display:flex; align-items:center; gap:0; flex:1; min-width:0;
  padding:10px 12px;
}
.led-stat-card {
  display:flex; align-items:center; gap:8px;
  flex:1; min-width:0;
  padding:8px 12px;
  border-radius:8px;
  position:relative;
}
.led-stat-card.green {
  background:rgba(0,255,68,.04); border:1px solid rgba(0,255,68,.12);
}
.led-stat-card.red {
  background:rgba(255,60,60,.04); border:1px solid rgba(255,60,60,.12);
}
.led-stat-icon {
  font-size:22px; flex-shrink:0;
  animation:statIconWiggle 3s ease-in-out infinite;
}
@keyframes statIconWiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
.led-stat-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.led-stat-label {
  font-size:5px; letter-spacing:.7px; text-transform:uppercase;
  color:rgba(0,255,68,.5); line-height:1.6;
}
.led-stat-card.red .led-stat-label { color:rgba(255,80,80,.5); }
.led-stat-sublabel {
  font-size:4.5px; opacity:.5; font-style:italic; letter-spacing:.3px;
}
.led-stat-value {
  font-family:Impact,'Arial Black',sans-serif; letter-spacing:1.5px; line-height:1;
  font-size:clamp(18px,2.5vw,28px); color:#00ff44;
  text-shadow:0 0 14px #00ff44, 0 0 30px rgba(0,255,68,.25);
}
.led-stat-value.red {
  color:#ff5555;
  text-shadow:0 0 14px #ff4444, 0 0 28px rgba(255,60,60,.25);
}
.led-stat-vs {
  flex-shrink:0; font-size:16px; padding:0 6px;
  animation:vsBounce 1.5s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 6px rgba(255,200,0,.3));
}
@keyframes vsBounce { 0%{transform:scale(.85)} 100%{transform:scale(1.15)} }

/* Col: Progress — right side */
.led-col-progress {
  padding:10px 16px; display:flex; flex-direction:column; justify-content:center; gap:4px;
  min-width:160px; flex-shrink:0; border-left:1px solid rgba(0,255,68,.08);
}
.led-progress-header {
  display:flex; align-items:center; gap:6px;
}
.led-progress-emoji {
  font-size:14px; animation:milkShake 1.5s ease-in-out infinite;
}
@keyframes milkShake { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-10deg)} 60%{transform:rotate(10deg)} }
.led-progress-title {
  font-size:5.5px; color:rgba(0,255,68,.45); letter-spacing:.8px; text-transform:uppercase;
}
.led-progress-track {
  background:rgba(0,255,68,.06); border:1px solid rgba(0,255,68,.14);
  border-radius:10px; height:14px; overflow:hidden; position:relative;
}
.led-progress-fill {
  height:100%;
  background:linear-gradient(90deg, #00cc44, #44ff88, #00ff44);
  background-size:200% 100%;
  animation:progressShine 2s linear infinite;
  border-radius:10px;
  display:flex; align-items:center; justify-content:flex-end;
  min-width:30px; max-width:100%;
  box-shadow:0 0 12px rgba(0,255,68,.5), inset 0 1px 0 rgba(255,255,255,.15);
}
@keyframes progressShine { 0%{background-position:200% 0} 100%{background-position:0 0} }
.led-progress-pct {
  font-size:6px; color:#003300; font-weight:900; padding-right:5px;
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.led-progress-text {
  font-size:5px; color:rgba(0,255,68,.3); letter-spacing:.5px;
}
.led-progress-complete {
  font-size:6px; color:#ffd700; text-align:center;
  animation:completeBlink .8s ease-in-out infinite alternate;
}
@keyframes completeBlink { 0%{opacity:.5} 100%{opacity:1;text-shadow:0 0 8px #ffd700;} }
.led-progress-mood {
  font-size:5px; color:rgba(0,255,68,.25); font-style:italic;
}

/* ── Footer strip ── */
.led-footer-strip {
  background:rgba(0,255,68,.03); border-top:1px solid rgba(0,255,68,.06);
  padding:6px 16px; text-align:center;
  font-size:5px; color:rgba(0,255,68,.22); letter-spacing:1.5px; text-transform:uppercase;
  animation:ledFooterBlink 3s ease-in-out infinite alternate;
}
@keyframes ledFooterBlink{ 0%{opacity:.3}100%{opacity:.7} }

/* ── MOBILE: stack vertically ── */
@media(max-width:640px){
  .led-body { flex-direction:column; }
  .led-col-title {
    padding:10px 14px; gap:8px;
    border-right:none; border-bottom:1px solid rgba(0,255,68,.08);
  }
  .led-title-emoji { font-size:20px; }
  .led-board-title { font-size:8px; }
  .led-board-sub { display:none; }
  .led-col-stats {
    flex-direction:column; padding:8px 10px; gap:6px;
  }
  .led-stat-card { padding:6px 10px; gap:6px; }
  .led-stat-icon { font-size:18px; }
  .led-stat-value { font-size:clamp(16px,5vw,22px); }
  .led-stat-vs { padding:0; font-size:14px; transform:rotate(90deg); }
  .led-col-progress {
    border-left:none; border-top:1px solid rgba(0,255,68,.08);
    padding:8px 14px; min-width:0;
  }
}

/* ── suppress old helper classes ── */
.counter-arrow, .counter-block, .counter-block.red-border,
.progress-bar-wrap, .vvip-title-block { display:none; }
@keyframes arrowBounce{0%{transform:translateY(0)}100%{transform:translateY(5px)}}

/* =========================================
   OMEGA PLEDGE — FULL-WIDTH COLORFUL BOARD
   ========================================= */
.pledge-section { margin:0; padding:0; }

/* ── header strip ── */
.pledge-header-strip {
  background:linear-gradient(90deg,#ff006e,#bf00ff,#00aaff,#00ff88);
  background-size:300% 100%;
  animation:pledgeRainbow 4s linear infinite;
  padding:3px 0;
}
@keyframes pledgeRainbow{ 0%{background-position:0% 50%}100%{background-position:300% 50%} }
.pledge-header-inner {
  background:#0a0010; border-top:1px solid rgba(255,255,255,.06);
  padding:10px 20px 8px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.pledge-title-block { display:flex; flex-direction:column; gap:3px; }
.pledge-main-title {
  font-family:'Press Start 2P',monospace;
  font-size:clamp(8px,1.1vw,11px);
  background:linear-gradient(90deg,#ff006e,#bf00ff,#00aaff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:1px;
}
.pledge-sub-title {
  font-family:'Comic Neue',cursive; font-size:clamp(9px,1.1vw,11px);
  color:rgba(255,255,255,.38); line-height:1.5;
}
.pledge-broke-badge {
  font-family:Impact,sans-serif; font-size:clamp(9px,1.2vw,12px);
  background:#ff006e; color:#fff;
  padding:5px 14px; border-radius:99px; letter-spacing:1px;
  text-transform:uppercase; white-space:nowrap;
  animation:brokeFlash 1.2s ease-in-out infinite alternate;
  box-shadow:0 0 16px rgba(255,0,110,.4);
}
@keyframes brokeFlash{ 0%{box-shadow:0 0 10px rgba(255,0,110,.3)}100%{box-shadow:0 0 26px rgba(255,0,110,.7)} }

/* ── 4-column milestone grid ── */
.pledge-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.06);
}
@media(max-width:768px){ .pledge-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .pledge-grid { grid-template-columns:1fr; } }

.pledge-card {
  padding:16px 14px 12px;
  display:flex; flex-direction:column; gap:6px;
  border-right:1px solid rgba(255,255,255,.05);
  position:relative; overflow:hidden;
  transition:filter .2s;
}
.pledge-card:last-child { border-right:none; }
.pledge-card:hover { filter:brightness(1.08); }

/* card colour variants */
.pcard-green {
  background:linear-gradient(160deg,#001a0d 0%,#002a12 60%,#001a0d 100%);
  border-bottom:3px solid #00ff88;
}
.pcard-blue {
  background:linear-gradient(160deg,#00101a 0%,#001a2a 60%,#00101a 100%);
  border-bottom:3px solid #00aaff;
}
.pcard-gold {
  background:linear-gradient(160deg,#1a1200 0%,#2a1c00 60%,#1a1200 100%);
  border-bottom:3px solid #ffd700;
}
.pcard-pink {
  background:linear-gradient(160deg,#1a0010 0%,#2a001a 60%,#1a0010 100%);
  border-bottom:3px solid #ff006e;
}

/* watermark number */
.pledge-card::before {
  content:attr(data-num);
  position:absolute; bottom:-10px; right:6px;
  font-family:Impact,sans-serif; font-size:80px; line-height:1;
  font-weight:900; pointer-events:none; user-select:none;
  opacity:.04; color:#fff;
}

.pcard-icon { font-size:26px; line-height:1; }

.pcard-amount {
  font-family:Impact,'Arial Black',sans-serif;
  font-size:clamp(16px,2.2vw,22px); letter-spacing:.5px; line-height:1;
}
.pcard-green .pcard-amount  { color:#00ff88; text-shadow:0 0 14px rgba(0,255,136,.4); }
.pcard-blue  .pcard-amount  { color:#00aaff; text-shadow:0 0 14px rgba(0,170,255,.4); }
.pcard-gold  .pcard-amount  { color:#ffd700; text-shadow:0 0 14px rgba(255,215,0,.4);  }
.pcard-pink  .pcard-amount  { color:#ff3399; text-shadow:0 0 14px rgba(255,0,110,.4); }

.pcard-tag {
  display:inline-block;
  font-family:'Press Start 2P',monospace; font-size:5px; letter-spacing:.4px;
  padding:2px 8px; border-radius:99px; border:1px solid;
  margin-bottom:2px; align-self:flex-start;
}
.pcard-green .pcard-tag { color:#00ff88; border-color:rgba(0,255,136,.3); background:rgba(0,255,136,.07); }
.pcard-blue  .pcard-tag { color:#00aaff; border-color:rgba(0,170,255,.3); background:rgba(0,170,255,.07); }
.pcard-gold  .pcard-tag { color:#ffd700; border-color:rgba(255,215,0,.3);  background:rgba(255,215,0,.07);  }
.pcard-pink  .pcard-tag { color:#ff3399; border-color:rgba(255,0,110,.3);  background:rgba(255,0,110,.07);  }

.pcard-text {
  font-family:'Comic Neue',cursive;
  font-size:clamp(9.5px,1.1vw,11.5px); color:rgba(255,255,255,.58);
  line-height:1.65; flex:1;
}
.pcard-text strong { color:rgba(255,255,255,.9); }
.pcard-text em     { color:rgba(255,255,255,.32); }

.pcard-stat {
  font-family:'Press Start 2P',monospace; font-size:5px;
  line-height:1.9; letter-spacing:.3px; opacity:.45;
  margin-top:2px;
}
.pcard-green .pcard-stat { color:#00ff88; }
.pcard-blue  .pcard-stat { color:#00aaff; }
.pcard-gold  .pcard-stat { color:#ffd700;  }
.pcard-pink  .pcard-stat { color:#ff3399; }

/* ── sig footer ── */
.pledge-sig-bar {
  background:#0a0010;
  border-top:1px solid rgba(255,255,255,.06);
  padding:8px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pledge-sig-item { display:flex; flex-direction:column; gap:2px; }
.pledge-sig-name {
  font-family:'Comic Neue',cursive; font-style:italic;
  font-size:clamp(9px,1.1vw,12px); color:rgba(255,255,255,.45);
  border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:1px;
}
.pledge-sig-role {
  font-family:'Press Start 2P',monospace;
  font-size:4.5px; color:rgba(255,255,255,.18); letter-spacing:.4px;
}
.pledge-stamp {
  font-family:Impact,sans-serif;
  font-size:clamp(11px,1.6vw,15px); letter-spacing:3px;
  color:#00ff88; border:2px solid #00ff88;
  padding:4px 14px;
  text-shadow:0 0 10px rgba(0,255,136,.5);
  box-shadow:0 0 14px rgba(0,255,136,.18);
  animation:pledgeStamp 4.5s ease-in-out infinite;
}
@keyframes pledgeStamp{
  0%,35%,100%{ opacity:0; transform:scale(.65) rotate(-5deg); }
  45%{ opacity:1; transform:scale(1.06) rotate(-5deg); }
  50%,90%{ opacity:.92; transform:scale(1) rotate(-5deg); }
}

/* ── legacy ── */
.approved-stamp-area { text-align:center; }
.approved-stamp { display:inline-block; border:3px solid #8b0000; color:#8b0000; font-family:Impact,sans-serif; font-size:clamp(13px,1.5vw,18px); font-weight:900; padding:3px 10px; letter-spacing:3px; animation:stampAppear 4s ease-in-out infinite; }
@keyframes stampAppear{ 0%,30%,100%{opacity:0;transform:rotate(-12deg) scale(.5)}40%{opacity:1;transform:rotate(-12deg) scale(1.12)}45%,90%{opacity:.85;transform:rotate(-12deg) scale(1)} }

/* =========================================
   WHALE SECTION — CENTER
   ========================================= */
.hall-center { display:flex; flex-direction:column; gap:8px; min-width:0; width:100%; }
.whale-announcement { font-family:Impact,'Arial Black',sans-serif; font-size:clamp(11px,1.7vw,15px); color:var(--neon-green); animation:annPulse 1.1s ease-in-out infinite alternate; text-transform:uppercase; }
.whale-announcement.right-side { text-align:right; color:#ffcc00; }
@keyframes annPulse{0%{opacity:.7}100%{opacity:1}}

/* ─────────────────────────────────────────
   WHALE GRID — silver(1fr) | GOLD(1.7fr) | bronze(0.9fr)
   align-items:stretch → 모든 카드 같은 높이, 빈공간 없음
   ───────────────────────────────────────── */
.whale-grid { display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch; }
@media(min-width:500px){ .whale-grid { grid-template-columns:1fr 1.7fr 0.9fr; align-items:stretch; } }

/* ═════════════════════════════════════════
   BASE CARD SHELL
   ═════════════════════════════════════════ */
.whale-card {
  position:relative; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; cursor:pointer;
  transition:transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s;
  will-change:transform;
}
.whale-card:hover { transform:translateY(-8px) scale(1.015); }

/* Holographic foil sweep — all cards */
.card-holo {
  position:absolute; inset:0; pointer-events:none; z-index:5; border-radius:18px;
  background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.055) 50%,transparent 62%);
  background-size:200% 100%;
  animation:holoSweep 5s ease-in-out infinite;
}
@keyframes holoSweep{ 0%{background-position:-100% 0}55%{background-position:200% 0}100%{background-position:-100% 0} }

/* Card header strip */
.card-head {
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px 7px;
}

/* Rank pill */
.rank-pill {
  display:flex; align-items:center; gap:5px; flex-shrink:0;
  border-radius:99px; padding:3px 10px 3px 3px;
}
.rank-pill-num {
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:Impact,sans-serif; font-size:12px; font-weight:900;
}
.rank-pill-text { font-family:'Press Start 2P',monospace; font-size:5.5px; letter-spacing:.5px; }

/* Tier label (right side of header) */
.tier-badge {
  font-family:'Press Start 2P',monospace; font-size:6px; letter-spacing:.8px;
  padding:3px 7px; border-radius:4px; opacity:1;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}

/* Address (center) */
.card-addr-top {
  font-family:'Press Start 2P',monospace; font-size:6px;
  color:rgba(255,255,255,.65); line-height:1.6; flex:1; text-align:center; padding:0 6px;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}

/* Divider line */
.card-divider {
  height:1px; margin:0 14px;
  position:relative; z-index:3;
}

/* Visual focal area */
.card-visual {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 12px 8px; gap:8px;
}

/* Seal (coin) */
.card-seal-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.card-seal-icon {
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
}
.seal-ring-a, .seal-ring-b {
  position:absolute; border-radius:50%; border:1px solid transparent;
  pointer-events:none;
}
@keyframes sealSpin  { 100%{ transform:rotate(360deg); } }
@keyframes sealSpin2 { 100%{ transform:rotate(-360deg); } }

/* Card text area */
.card-content {
  position:relative; z-index:2;
  text-align:center; padding:0 12px 10px; flex:1;
}
.c-label {
  display:block; font-family:'Press Start 2P',monospace; font-size:7px;
  color:rgba(255,255,255,.75); letter-spacing:.8px; margin-bottom:4px;
  text-shadow:0 1px 5px rgba(0,0,0,.95);
}
.c-price {
  display:block; font-family:Impact,'Arial Black',sans-serif; letter-spacing:.5px;
}
.c-usdt {
  display:block; font-family:'Press Start 2P',monospace; font-size:6.5px;
  color:rgba(255,255,255,.7); margin-top:3px;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.c-name {
  display:block; font-family:Impact,'Arial Black',sans-serif; margin-top:10px; line-height:1.2;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.c-desc {
  font-size:10.5px; color:rgba(255,255,255,.82); margin-top:6px; line-height:1.6; padding:0 2px;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}

/* Footer CTA */
.card-foot {
  position:relative; z-index:2; padding:0 10px 12px;
}
.c-btn {
  width:100%; border:none; border-radius:10px;
  font-family:Impact,'Arial Black',sans-serif; text-transform:uppercase;
  cursor:pointer; transition:transform .18s, box-shadow .18s, filter .18s;
  display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.2;
}
.c-btn small { font-family:'Press Start 2P',monospace; font-size:6px; opacity:.9; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.c-btn:active { transform:scale(.97) !important; }

/* ═════════════════════════════════════════
   #1 GOLD — THE OMEGA THRONE
   블랙+브라이트골드 / 회전 줄무늬 오라 / 강렬 외부 글로우
   ═════════════════════════════════════════ */
.whale-card.gold {
  background: radial-gradient(ellipse at 50% -10%, #241200 0%, #0d0700 50%, #050300 100%);
  border: 2px solid rgba(255,195,40,.55);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    inset 0 0 80px rgba(255,120,0,.08),
    0 0 55px rgba(255,165,0,.22),
    0 0 110px rgba(255,120,0,.1),
    0 40px 100px rgba(0,0,0,.95);
}
/* Pulsing gold glow via opacity on a GPU layer — no box-shadow repaint */
.whale-card.gold::before {
  content:'Ω';
  position:absolute; bottom:-50px; right:-20px;
  font-family:Impact,sans-serif; font-size:240px; line-height:1;
  color:rgba(255,215,0,.04); pointer-events:none; z-index:0; user-select:none;
}
/* Animated glow ring uses opacity change (cheap GPU) not box-shadow animation */
.whale-card.gold .gold-glow-ring {
  position:absolute; inset:-3px; border-radius:20px; pointer-events:none; z-index:0;
  background:transparent;
  box-shadow:0 0 25px rgba(255,165,0,.12),0 0 50px rgba(255,120,0,.06);
  animation:goldGlowPulse 3.5s ease-in-out infinite;
  will-change:opacity;
}
@keyframes goldGlowPulse{ 0%,100%{opacity:.5} 50%{opacity:.8} }
/* Moving diagonal gold stripe texture */
.whale-card.gold::after {
  content:'';
  position:absolute; inset:0; border-radius:16px;
  background: repeating-linear-gradient(
    -52deg,
    transparent 0px, transparent 22px,
    rgba(255,210,0,.028) 22px, rgba(255,210,0,.028) 44px
  );
  pointer-events:none; z-index:0;
  animation: goldStripe 5s linear infinite;
}
@keyframes goldStripe { from{background-position:0 0} to{background-position:88px 88px} }
.whale-card.gold:hover {
  transform: translateY(-14px) scale(1.018);
  box-shadow:
    0 0 0 2px rgba(255,210,0,.7),
    inset 0 0 100px rgba(255,150,0,.14),
    0 0 110px rgba(255,185,0,.55),
    0 0 220px rgba(255,130,0,.22),
    0 55px 130px rgba(0,0,0,1);
}
.whale-card.gold .card-holo {
  background:linear-gradient(108deg,transparent 34%,rgba(255,235,100,.12) 50%,transparent 66%);
  background-size:200% 100%;
  animation:holoSweepGold 3s ease-in-out infinite;
}
@keyframes holoSweepGold{ 0%{background-position:-100% 0}55%{background-position:220% 0}100%{background-position:-100% 0} }

.whale-card.gold .card-head {
  background: linear-gradient(90deg,rgba(255,165,0,.12),rgba(255,200,60,.04),rgba(255,165,0,.1));
  padding: 11px 14px 9px;
}
.whale-card.gold .card-divider {
  background: linear-gradient(90deg,transparent 0%,rgba(255,215,0,.6) 30%,rgba(255,200,0,.8) 50%,rgba(255,215,0,.6) 70%,transparent 100%);
  height: 2px; margin: 0 10px;
}
.whale-card.gold .rank-pill { background:rgba(255,215,0,.14); border:1.5px solid rgba(255,215,0,.38); }
.whale-card.gold .rank-pill-num {
  background: linear-gradient(135deg,#996600,#ffd700,#aa7700);
  color:#1a0800; font-size:15px; width:28px; height:28px;
}
.whale-card.gold .rank-pill-text { color:rgba(255,230,80,.9); font-size:6px; }
.whale-card.gold .tier-badge {
  color:#ffd700; background:rgba(255,215,0,.15);
  border:1px solid rgba(255,215,0,.28); font-size:7px;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
/* Gold seal */
.whale-card.gold .card-seal-wrap { filter:drop-shadow(0 0 12px rgba(255,160,0,.35)); }
.whale-card.gold .card-seal-icon {
  width:96px; height:96px; font-size:46px;
  background: radial-gradient(circle at 32% 28%, #fff8b0, #ffcc00, #996600, #4a2e00);
  box-shadow:
    0 0 0 4px rgba(255,215,0,.25),
    0 0 20px rgba(255,160,0,.3),
    inset 0 3px 14px rgba(255,255,180,.3);
}
.whale-card.gold .seal-ring-a {
  inset:-13px;
  border: 2px solid transparent;
  border-top-color:rgba(255,215,0,.8); border-right-color:rgba(255,215,0,.2);
  animation:sealSpin 2.2s linear infinite;
}
.whale-card.gold .seal-ring-b {
  inset:-25px;
  border: 1.5px solid transparent;
  border-top-color:rgba(255,215,0,.35); border-left-color:rgba(255,215,0,.1);
  animation:sealSpin2 5.5s linear infinite;
}
.gold-crown-seal {
  position:absolute; top:-30px; font-size:22px;
  filter:drop-shadow(0 0 4px rgba(255,215,0,.5));
  animation:crownTilt 2.5s ease-in-out infinite;
}
@keyframes crownTilt{ 0%,100%{transform:rotate(-7deg) scale(1)}50%{transform:rotate(7deg) scale(1.12)} }

.whale-card.gold .c-price {
  font-size:clamp(26px,3.6vw,36px); color:#ffd700;
  text-shadow:0 0 10px rgba(255,210,0,.5), 0 2px 8px rgba(0,0,0,1);
}
.whale-card.gold .c-name {
  font-size:clamp(11px,1.6vw,15px); color:#ffd700;
  text-shadow:0 0 14px rgba(255,190,0,.5), 0 1px 6px rgba(0,0,0,.95);
}
.whale-card.gold .c-label { color:rgba(255,235,80,.88); text-shadow:0 0 6px rgba(255,160,0,.4), 0 1px 5px rgba(0,0,0,.95); }
.whale-card.gold .c-desc { color:rgba(255,230,160,.88); text-shadow:0 1px 5px rgba(0,0,0,.95); }

.whale-card.gold .c-btn {
  padding:14px 10px; font-size:clamp(11px,1.8vw,15px);
  background: linear-gradient(135deg,#7a4400,#cc8800,#ffd700,#ffaa00,#996600);
  color:#1a0800; letter-spacing:.7px;
  box-shadow:0 6px 28px rgba(210,140,0,.5),inset 0 1px 0 rgba(255,255,160,.55),inset 0 -1px 0 rgba(0,0,0,.25);
  position:relative; overflow:hidden;
}
.whale-card.gold .c-btn::before {
  content:'';
  position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:btnShimmerGold 2.8s ease-in-out infinite;
}
@keyframes btnShimmerGold{ 0%{left:-120%} 45%,100%{left:200%} }
.whale-card.gold .c-btn:hover {
  filter:brightness(1.15); transform:scale(1.04);
  box-shadow:0 14px 45px rgba(230,160,0,.7),inset 0 1px 0 rgba(255,255,160,.55);
}

/* ═════════════════════════════════════════
   #2 SILVER → ELECTRIC CYAN "THE SILVER SHARK"
   딥네이비블랙 + 일렉트릭 시안 / 서킷보드 도트 / 스캔라인
   ═════════════════════════════════════════ */
.whale-card.silver {
  background: radial-gradient(ellipse at 50% -10%, #001620 0%, #000d18 55%, #000508 100%);
  border: 2px solid rgba(0,220,255,.38);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    inset 0 0 70px rgba(0,180,255,.06),
    0 0 45px rgba(0,210,255,.18),
    0 25px 70px rgba(0,0,0,.85);
}
/* Circuit-board dot grid */
.whale-card.silver::after {
  content:'';
  position:absolute; inset:0; border-radius:16px;
  background-image:
    radial-gradient(circle, rgba(0,220,255,.22) 1px, transparent 1px);
  background-size:18px 18px;
  pointer-events:none; z-index:0;
  animation:circuitPulse 3.5s ease-in-out infinite alternate;
}
@keyframes circuitPulse{ 0%{opacity:.35}100%{opacity:.7} }
/* Scanning horizontal line — transform only (GPU-accelerated, no layout reflow) */
.whale-card.silver::before {
  content:'';
  position:absolute; left:0; right:0; height:2px; top:0;
  background:linear-gradient(90deg,transparent,rgba(0,220,255,.6),rgba(0,220,255,.9),rgba(0,220,255,.6),transparent);
  pointer-events:none; z-index:1; border-radius:2px;
  will-change:transform,opacity;
  animation:scanLine 3s ease-in-out infinite;
}
@keyframes scanLine{
  0%  { transform:translateY(0);    opacity:0; }
  5%  { opacity:1; }
  90% { opacity:1; }
  100%{ transform:translateY(700px); opacity:0; }
}
.whale-card.silver:hover {
  transform: translateY(-12px) scale(1.016);
  box-shadow:
    0 0 0 2px rgba(0,230,255,.65),
    inset 0 0 80px rgba(0,200,255,.1),
    0 0 80px rgba(0,220,255,.4),
    0 0 160px rgba(0,180,255,.16),
    0 45px 110px rgba(0,0,0,.95);
}
.whale-card.silver .card-holo {
  background:linear-gradient(108deg,transparent 34%,rgba(0,240,255,.1) 50%,transparent 66%);
  background-size:200% 100%;
  animation:holoSweepCyan 3.5s ease-in-out infinite;
}
@keyframes holoSweepCyan{ 0%{background-position:-100% 0}55%{background-position:220% 0}100%{background-position:-100% 0} }

.whale-card.silver .card-head {
  background: linear-gradient(90deg,rgba(0,200,255,.1),rgba(0,220,255,.04),rgba(0,200,255,.08));
  padding: 10px 14px 8px;
}
.whale-card.silver .card-divider {
  background: linear-gradient(90deg,transparent,rgba(0,220,255,.55),rgba(0,240,255,.7),rgba(0,220,255,.55),transparent);
  height: 2px; margin: 0 10px;
}
.whale-card.silver .rank-pill { background:rgba(0,220,255,.1); border:1.5px solid rgba(0,220,255,.35); }
.whale-card.silver .rank-pill-num {
  background: linear-gradient(135deg,#005570,#00b8d4,#006688);
  color:#e0ffff; font-size:14px; width:27px; height:27px;
}
.whale-card.silver .rank-pill-text { color:rgba(0,230,255,.85); font-size:6px; }
.whale-card.silver .tier-badge {
  color:#00e5ff; background:rgba(0,220,255,.12);
  border:1px solid rgba(0,220,255,.25); font-size:7px;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.whale-card.silver .card-seal-wrap { filter:drop-shadow(0 0 10px rgba(0,200,255,.3)); }
.whale-card.silver .card-seal-icon {
  width:82px; height:82px; font-size:38px;
  background: radial-gradient(circle at 32% 28%, #c0f8ff, #00aacc, #003355);
  box-shadow:
    0 0 0 3px rgba(0,220,255,.22),
    0 0 16px rgba(0,200,255,.3),
    inset 0 3px 10px rgba(180,255,255,.25);
}
.whale-card.silver .seal-ring-a {
  inset:-11px;
  border: 2px solid transparent;
  border-top-color:rgba(0,230,255,.75); border-right-color:rgba(0,230,255,.18);
  animation:sealSpin 3s linear infinite;
}
.whale-card.silver .c-price {
  font-size:clamp(22px,3.2vw,30px); color:#00e5ff;
  text-shadow:0 0 8px rgba(0,210,255,.4), 0 2px 8px rgba(0,0,0,1);
}
.whale-card.silver .c-name {
  font-size:clamp(10px,1.5vw,14px); color:#00e8ff;
  text-shadow:0 0 10px rgba(0,200,255,.45), 0 1px 6px rgba(0,0,0,.95);
}
.whale-card.silver .c-label { color:rgba(100,240,255,.9); text-shadow:0 0 6px rgba(0,180,255,.35), 0 1px 5px rgba(0,0,0,.95); }
.whale-card.silver .c-desc { color:rgba(190,245,255,.88); text-shadow:0 1px 5px rgba(0,0,0,.95); }

.whale-card.silver .c-btn {
  padding:13px 9px; font-size:clamp(11px,1.7vw,14px);
  background: linear-gradient(135deg,#003344,#006688,#00aacc,#007799,#003355);
  color:#ccf8ff; letter-spacing:.6px;
  box-shadow:0 5px 24px rgba(0,170,220,.4),inset 0 1px 0 rgba(180,255,255,.2);
  position:relative; overflow:hidden;
}
.whale-card.silver .c-btn::before {
  content:'';
  position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,240,255,.3),transparent);
  animation:btnShimmerCyan 3.5s ease-in-out infinite;
}
@keyframes btnShimmerCyan{ 0%{left:-120%} 50%,100%{left:200%} }
.whale-card.silver .c-btn:hover {
  filter:brightness(1.2); transform:scale(1.04);
  box-shadow:0 12px 40px rgba(0,200,255,.6),inset 0 1px 0 rgba(180,255,255,.2);
}

/* ═════════════════════════════════════════
   #3 BRONZE → HOT MAGENTA "THE BRONZE CLOWN"
   딥퍼플블랙 + 핫마젠타 네온 / 글리치 vibe / 클라운 티어
   ═════════════════════════════════════════ */
.whale-card.bronze {
  background: radial-gradient(ellipse at 50% -10%, #150010 0%, #0a000e 55%, #040008 100%);
  border: 2px solid rgba(255,0,180,.38);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    inset 0 0 70px rgba(200,0,180,.06),
    0 0 40px rgba(255,0,200,.16),
    0 22px 60px rgba(0,0,0,.8);
}
/* Subtle noise grid */
.whale-card.bronze::after {
  content:'';
  position:absolute; inset:0; border-radius:16px;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(255,0,180,.012) 3px, rgba(255,0,180,.012) 4px
  );
  pointer-events:none; z-index:0;
  animation:magentaScanline 2s linear infinite;
}
@keyframes magentaScanline{ from{background-position:0 0} to{background-position:0 20px} }
/* Large 3 watermark */
.whale-card.bronze::before {
  content:'3';
  position:absolute; bottom:-30px; right:-10px;
  font-family:Impact,sans-serif; font-size:190px; line-height:1;
  color:rgba(255,0,180,.045); pointer-events:none; z-index:0; user-select:none;
}
.whale-card.bronze:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow:
    0 0 0 2px rgba(255,0,200,.6),
    inset 0 0 80px rgba(200,0,160,.1),
    0 0 70px rgba(255,0,200,.35),
    0 0 140px rgba(180,0,160,.14),
    0 40px 100px rgba(0,0,0,.9);
}
.whale-card.bronze .card-holo {
  background:linear-gradient(108deg,transparent 34%,rgba(255,0,200,.08) 50%,transparent 66%);
  background-size:200% 100%;
  animation:holoSweepMag 4s ease-in-out infinite;
}
@keyframes holoSweepMag{ 0%{background-position:-100% 0}55%{background-position:220% 0}100%{background-position:-100% 0} }

.whale-card.bronze .card-head {
  background: linear-gradient(90deg,rgba(220,0,180,.1),rgba(255,0,200,.04),rgba(200,0,160,.08));
  padding: 10px 14px 8px;
}
.whale-card.bronze .card-divider {
  background: linear-gradient(90deg,transparent,rgba(255,0,180,.5),rgba(255,0,210,.65),rgba(255,0,180,.5),transparent);
  height: 2px; margin: 0 10px;
}
.whale-card.bronze .rank-pill { background:rgba(255,0,180,.1); border:1.5px solid rgba(255,0,180,.32); }
.whale-card.bronze .rank-pill-num {
  background: linear-gradient(135deg,#660040,#cc0099,#880055);
  color:#ffe0f8; font-size:14px; width:26px; height:26px;
}
.whale-card.bronze .rank-pill-text { color:rgba(255,80,220,.85); font-size:6px; }
.whale-card.bronze .tier-badge {
  color:#ff00cc; background:rgba(255,0,180,.12);
  border:1px solid rgba(255,0,180,.22); font-size:7px;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.whale-card.bronze .card-seal-wrap { filter:drop-shadow(0 0 10px rgba(255,0,180,.3)); }
.whale-card.bronze .card-seal-icon {
  width:74px; height:74px; font-size:34px;
  background: radial-gradient(circle at 32% 28%, #ffc0f0, #cc00aa, #500040);
  box-shadow:
    0 0 0 3px rgba(255,0,180,.22),
    0 0 16px rgba(255,0,180,.3),
    inset 0 3px 10px rgba(255,180,255,.25);
}
.whale-card.bronze .seal-ring-a {
  inset:-10px;
  border: 2px solid transparent;
  border-top-color:rgba(255,0,200,.7); border-right-color:rgba(255,0,200,.15);
  animation:sealSpin 4s linear infinite;
}
.whale-card.bronze .c-price {
  font-size:clamp(20px,2.8vw,26px); color:#ff33cc;
  text-shadow:0 0 8px rgba(255,0,200,.45), 0 2px 8px rgba(0,0,0,1);
}
.whale-card.bronze .c-name {
  font-size:clamp(9px,1.4vw,13px); color:#ff66dd;
  text-shadow:0 0 10px rgba(255,0,180,.45), 0 1px 6px rgba(0,0,0,.95);
}
.whale-card.bronze .c-label { color:rgba(255,150,230,.9); text-shadow:0 0 6px rgba(255,0,180,.35), 0 1px 5px rgba(0,0,0,.95); }
.whale-card.bronze .c-desc { color:rgba(255,200,245,.88); text-shadow:0 1px 5px rgba(0,0,0,.95); }

.whale-card.bronze .c-btn {
  padding:12px 9px; font-size:clamp(11px,1.7vw,14px);
  background: linear-gradient(135deg,#440022,#990066,#cc0099,#aa0077,#550033);
  color:#ffd0f8; letter-spacing:.6px;
  box-shadow:0 5px 22px rgba(180,0,140,.4),inset 0 1px 0 rgba(255,180,255,.2);
  position:relative; overflow:hidden;
}
.whale-card.bronze .c-btn::before {
  content:'';
  position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,100,255,.3),transparent);
  animation:btnShimmerMag 4s ease-in-out infinite;
}
@keyframes btnShimmerMag{ 0%{left:-120%} 50%,100%{left:200%} }
.whale-card.bronze .c-btn:hover {
  filter:brightness(1.2); transform:scale(1.04);
  box-shadow:0 12px 38px rgba(220,0,180,.6),inset 0 1px 0 rgba(255,180,255,.2);
}

/* Whale confirmed state */
.whale-card.whale-confirmed { cursor:default; }
.whale-card.whale-confirmed:hover { transform:translateY(-4px) scale(1.01); }
.whale-card.whale-pending { cursor:default; }

.whale-notice { text-align:center; font-size:10px; color:rgba(255,255,255,.35); font-style:italic; padding:3px 0; }

/* =========================================
   TOP 100 — FULL-WIDTH SECTION
   ========================================= */
.top100-full-section { padding:18px 10px 28px; max-width:1500px; margin:0 auto; }
.top100-section-header { text-align:center; margin-bottom:18px; }
.top100-section-badge { display:inline-block; background:var(--gold); color:#000; font-family:'Press Start 2P',monospace; font-size:8px; padding:4px 12px; border-radius:4px; margin-bottom:10px; }
.top100-section-title { font-family:Impact,'Arial Black',sans-serif; font-size:clamp(19px,3.8vw,34px); color:var(--hot-pink); text-shadow:0 0 16px var(--hot-pink); text-transform:uppercase; line-height:1.15; margin-bottom:5px; }
.top100-section-sub { font-family:'Comic Neue',cursive; font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.5; }

.top100-big-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
}
@media(min-width:480px){.top100-big-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:620px){.top100-big-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:820px){.top100-big-grid{grid-template-columns:repeat(7,1fr)}}
@media(min-width:1060px){.top100-big-grid{grid-template-columns:repeat(9,1fr)}}
@media(min-width:1300px){.top100-big-grid{grid-template-columns:repeat(10,1fr)}}

/* ── Spot Card ── */
.spot-card {
  border-radius:10px; padding:8px 4px 9px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; transition:transform .18s,box-shadow .18s;
  min-height:148px; position:relative; overflow:hidden;
}
.spot-card:hover { transform:translateY(-4px) scale(1.05); }
.spot-card.paid { background:linear-gradient(160deg,rgba(0,80,30,.6),rgba(0,40,15,.8)); border:1.5px solid rgba(0,255,136,.5); box-shadow:0 0 10px rgba(0,255,136,.15); cursor:default; }
.spot-card.paid:hover { box-shadow:0 0 22px rgba(0,255,136,.4); transform:translateY(-2px) scale(1.02); }
.spot-card.pending { background:linear-gradient(160deg,rgba(80,60,0,.4),rgba(50,35,0,.6)); border:1.5px solid rgba(255,204,0,.35); box-shadow:0 0 8px rgba(255,204,0,.1); cursor:default; }
.spot-card.pending:hover { box-shadow:0 0 16px rgba(255,204,0,.25); transform:translateY(-2px) scale(1.02); }
.spot-card.available { background:rgba(255,255,255,.04); border:1.5px dashed rgba(255,255,255,.18); }
.spot-card.available:hover { border-color:rgba(0,255,136,.5); box-shadow:0 0 14px rgba(0,255,136,.2); }

/* ── Spot number badge — premium & cute ── */
.spot-num { display:none; }
.spot-rank-badge {
  position:absolute; top:4px; left:4px; z-index:5;
  display:flex; align-items:center; gap:1px;
  padding:3px 8px 3px 6px;
  border-radius:20px;
  font-family:'Press Start 2P',monospace;
  font-size:7px; line-height:1;
  letter-spacing:.3px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, filter .25s;
}
.spot-card:hover .spot-rank-badge {
  transform:scale(1.12) rotate(2deg);
  filter:brightness(1.15);
}

/* Confirmed — holographic emerald glow */
.spot-rank-badge.badge-confirmed {
  background:linear-gradient(135deg, #00e676 0%, #00bfa5 40%, #64ffda 100%);
  color:#003d29;
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:
    0 2px 8px rgba(0,230,118,.45),
    0 0 12px rgba(0,230,118,.2),
    inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.spot-card:hover .spot-rank-badge.badge-confirmed {
  box-shadow:
    0 3px 14px rgba(0,230,118,.6),
    0 0 20px rgba(0,230,118,.3),
    inset 0 1px 0 rgba(255,255,255,.5);
}

/* Pending — warm amber glow */
.spot-rank-badge.badge-pending {
  background:linear-gradient(135deg, #ffab00 0%, #ff6d00 40%, #ffd740 100%);
  color:#3e2700;
  border:1.5px solid rgba(255,255,255,.3);
  box-shadow:
    0 2px 8px rgba(255,171,0,.4),
    0 0 10px rgba(255,171,0,.15),
    inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.2);
  animation:pendingBadgePulse 2s ease-in-out infinite alternate;
}
@keyframes pendingBadgePulse {
  0%  { box-shadow:0 2px 8px rgba(255,171,0,.3), 0 0 8px rgba(255,171,0,.1), inset 0 1px 0 rgba(255,255,255,.3); }
  100%{ box-shadow:0 3px 12px rgba(255,171,0,.55), 0 0 16px rgba(255,171,0,.25), inset 0 1px 0 rgba(255,255,255,.4); }
}

/* Empty — frosted glass */
.spot-rank-badge.badge-empty {
  background:linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%);
  color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.spot-card:hover .spot-rank-badge.badge-empty {
  background:linear-gradient(135deg, rgba(100,255,218,.15) 0%, rgba(0,230,118,.08) 100%);
  color:rgba(100,255,218,.7);
  border-color:rgba(100,255,218,.25);
  box-shadow:0 2px 8px rgba(0,230,118,.2), inset 0 1px 0 rgba(255,255,255,.12);
}

.srb-hash {
  font-size:5.5px; opacity:.55; margin-right:1px;
}
.srb-num {
  font-weight:900; font-size:7.5px;
}

/* ── Spot 카드 네모 아바타 ── */
.spot-av-wrap {
  width: 56px; height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  font-size: 22px;
}
.spot-av-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
/* 이미지 있는 경우 — 클릭 가능 */
.spot-av-wrap:has(.spot-av-img) {
  cursor: zoom-in;
  border: 2px solid rgba(0,255,136,.45);
  box-shadow: 0 0 8px rgba(0,255,136,.15);
  transition: border-color .2s, box-shadow .2s;
}
.spot-av-wrap:has(.spot-av-img):hover {
  border-color: rgba(0,255,136,.8);
  box-shadow: 0 0 16px rgba(0,255,136,.3);
}
/* 확대 아이콘 오버레이 */
.spot-av-zoom {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; opacity: 0;
  transition: opacity .18s;
  border-radius: 6px;
}
.spot-av-wrap:hover .spot-av-zoom { opacity: 1; }

/* 빈 / pending / placeholder 상태 */
.spot-av-placeholder {
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.5);
}
.spot-av-pending {
  background: rgba(255,204,0,.08);
  border: 2px dashed rgba(255,204,0,.3);
  color: rgba(255,204,0,.6);
}
.spot-av-empty {
  background: rgba(255,255,255,.04);
  border: 2px dashed rgba(255,255,255,.12);
  color: rgba(255,255,255,.2);
  font-size: 26px;
  animation: emptyPulse 2s ease-in-out infinite;
}
@keyframes emptyPulse{0%,100%{box-shadow:0 0 0 rgba(0,255,136,0);border-color:rgba(255,255,255,.12)}50%{box-shadow:0 0 10px rgba(0,255,136,.25);border-color:rgba(0,255,136,.4)}}

/* ── 아바타 라이트박스 ── */
.av-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  animation: avLbFadeIn .2s ease;
}
.av-lightbox.hidden { display: none; }
@keyframes avLbFadeIn { from { opacity:0 } to { opacity:1 } }
.av-lightbox-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(600px, 88vw);
}
.av-lightbox-close {
  position: absolute; top: -16px; right: -16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  z-index: 1;
}
.av-lightbox-close:hover { background: rgba(255,80,80,.4); }
.av-lightbox-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid rgba(0,255,136,.4);
  box-shadow: 0 0 60px rgba(0,255,136,.25), 0 20px 60px rgba(0,0,0,.6);
  display: block;
  image-rendering: auto;
}
.av-lightbox-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px; color: rgba(0,255,136,.85);
  letter-spacing: 1.5px; text-align: center;
}

.spot-username { font-family:'Press Start 2P',monospace; font-size:6.5px; color:var(--neon-green); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; padding:0 2px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.spot-title    { font-family:'Comic Neue',cursive; font-size:8.5px; font-weight:700; color:rgba(255,255,255,.75); text-align:center; line-height:1.3; padding:0 2px; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.spot-card.paid .spot-title { color:rgba(0,255,136,.9); }
.spot-message  { font-family:'Comic Neue',cursive; font-size:7px; color:rgba(255,255,255,.65); text-align:center; line-height:1.3; padding:0 2px; font-style:italic; word-break:break-word; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.spot-card.paid .spot-message { color:rgba(0,255,136,.65); }

/* Price display */
.spot-price {
  font-family:Impact,'Arial Black',sans-serif; font-size:12px;
  color:var(--gold); text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.spot-card.paid .spot-price { color:var(--neon-green); text-shadow:0 1px 4px rgba(0,0,0,.8); }
.spot-card.pending .spot-price { color:rgba(255,204,0,.85); text-shadow:0 1px 4px rgba(0,0,0,.8); }
.spot-card.pending .spot-title { color:rgba(255,204,0,.7); }
.spot-card.available:hover .spot-price { color:var(--gold); text-shadow:0 0 6px rgba(255,215,0,.5), 0 1px 4px rgba(0,0,0,.8); }

.spot-badge { font-family:'Press Start 2P',monospace; font-size:6px; padding:3px 6px; border-radius:3px; text-align:center; line-height:1.4; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.badge-paid { background:var(--neon-green); color:#000; }
.badge-free { background:rgba(255,255,255,.08); color:rgba(255,255,255,.45); animation:freeBadgePulse 2s ease-in-out infinite alternate; }
@keyframes freeBadgePulse{0%{background:rgba(255,255,255,.08)}100%{background:rgba(0,255,136,.15);color:rgba(0,255,136,.8)}}
.spot-reserve-btn { margin-top:1px; padding:5px 8px; border:none; border-radius:5px; background:linear-gradient(90deg,var(--neon-green),#00cc66); color:#000; font-family:'Press Start 2P',monospace; font-size:6px; cursor:pointer; transition:transform .15s,box-shadow .15s; font-weight:700; }
.spot-reserve-btn:hover { transform:scale(1.08); box-shadow:0 0 10px var(--neon-green); }

/* =========================================
   MODAL
   ========================================= */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:10000; display:flex; align-items:center; justify-content:center; padding:10px; backdrop-filter:blur(6px); }
.modal-overlay.hidden { display:none; }
.modal-box { background:linear-gradient(150deg,#fff8dc,#fffef0); border:2px solid #8b0000; border-radius:12px; max-width:460px; width:100%; overflow:hidden; color:#2c1a00; animation:modalPop .28s cubic-bezier(.175,.885,.32,1.275); position:relative; max-height:calc(100vh - 20px); display:flex; flex-direction:column; }
@keyframes modalPop{0%{transform:scale(.35) rotate(-6deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.modal-header-bar { background:linear-gradient(90deg,#8b0000,#cc0000,#8b0000); padding:8px 12px; display:flex; align-items:center; justify-content:center; gap:6px; animation:headerBarShake .18s ease-in-out infinite alternate; flex-shrink:0; }
@keyframes headerBarShake{0%{transform:translateX(-1.5px)}100%{transform:translateX(1.5px)}}
.modal-header-text { font-family:Impact,'Arial Black',sans-serif; font-size:clamp(11px,2.2vw,15px); color:#fff; text-transform:uppercase; text-align:center; text-shadow:2px 2px 0 rgba(0,0,0,.5); }
.modal-body-inner { padding:12px 14px; overflow-y:auto; }
.scam-stamp { display:inline-block; border:2px solid #8b0000; color:#8b0000; font-family:Impact,sans-serif; font-size:11px; font-weight:900; padding:2px 8px; transform:rotate(-4deg); letter-spacing:2px; opacity:.85; }
.modal-whale-title { font-family:Impact,'Arial Black',sans-serif; font-size:15px; color:#5c3317; margin-bottom:5px; line-height:1.2; }
.modal-transaction-text { font-size:11.5px; line-height:1.55; color:#3a2000; margin-bottom:5px; }
.modal-transaction-text strong { color:#8b0000; }
.modal-subtext { font-size:10.5px; color:#666; font-style:italic; line-height:1.45; margin-bottom:6px; }
.modal-warning-box { background:#fff3cd; border:1px solid #ffc107; border-radius:6px; padding:5px 10px; font-size:10px; color:#856404; font-weight:700; }
.modal-buttons { display:flex; gap:8px; padding:8px 14px 12px; align-items:center; flex-shrink:0; }
.yes-btn { flex:1; padding:9px 10px; background:#22c55e; color:#fff; border:none; border-radius:7px; font-family:Impact,'Arial Black',sans-serif; font-size:14px; cursor:pointer; text-transform:uppercase; transition:background .2s,transform .15s; }
.yes-btn:hover { background:#16a34a; transform:scale(1.03); }
.no-btn { padding:7px 10px; background:#ef4444; color:#fff; border:none; border-radius:7px; font-family:'Press Start 2P',monospace; font-size:7px; cursor:pointer; white-space:nowrap; }
.no-btn:hover { background:#dc2626; }

/* ── Step 1 Cute Buttons ── */
.s1-btns {
  display:flex; flex-direction:column; gap:8px;
  padding:10px 14px 14px; flex-shrink:0;
}
.s1-yes {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:12px 16px;
  background:linear-gradient(135deg,#f472b6,#fb923c);
  border:none; border-radius:12px; cursor:pointer;
  transition:transform .15s, box-shadow .2s;
  text-align:left; position:relative; overflow:hidden;
}
.s1-yes::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent);
  pointer-events:none;
}
.s1-yes:hover { transform:scale(1.02); box-shadow:0 4px 20px rgba(244,114,182,.4); }
.s1-yes:active { transform:scale(.98); }
.s1-yes-emoji { font-size:28px; flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.s1-yes-text {
  font-family:Impact,'Arial Black',sans-serif; font-size:16px;
  color:#fff; text-transform:uppercase; line-height:1.1;
  text-shadow:1px 1px 0 rgba(0,0,0,.2);
}
.s1-yes-sub {
  position:absolute; right:14px; bottom:6px;
  font-family:'Comic Neue',sans-serif; font-size:9px;
  color:rgba(255,255,255,.65); font-style:italic;
}
.s1-no {
  width:100%; padding:9px 14px;
  background:transparent; border:1.5px solid rgba(0,0,0,.12);
  border-radius:10px; cursor:pointer;
  font-family:'Comic Neue',sans-serif; font-size:12px;
  color:#888; font-weight:700;
  transition:background .15s, color .15s, border-color .15s;
}
.s1-no:hover { background:rgba(0,0,0,.04); color:#555; border-color:rgba(0,0,0,.2); }

@media(max-width:480px) {
  .modal-overlay { padding:6px; }
  .modal-box { max-height:calc(100vh - 12px); border-radius:10px; }
  .modal-header-bar { padding:7px 10px; }
  .modal-header-text { font-size:clamp(10px,2vw,13px); }
  .modal-body-inner { padding:10px 12px; }
  .scam-stamp { font-size:10px; padding:2px 7px; }
  .modal-whale-title { font-size:13px; }
  .modal-transaction-text { font-size:11px; }
  .modal-subtext { font-size:10px; }
  .modal-warning-box { font-size:9px; padding:4px 8px; }
  .s1-btns { padding:8px 12px 12px; gap:6px; }
  .s1-yes { padding:10px 14px; border-radius:10px; }
  .s1-yes-emoji { font-size:24px; }
  .s1-yes-text { font-size:14px; }
  .s1-no { padding:8px 12px; font-size:11px; }
  .modal-buttons { padding:6px 10px 8px; }
  .step2-body { padding:8px 10px 2px; }

  /* step2 금액 헤더 */
  .s2-top-row { padding:8px 10px; gap:8px; }
  .s2-amount-label { font-size:8px; }
  .s2-amount-val { font-size:18px !important; }
  .s2-amount-sub { font-size:8px; }
  .s2-avatar-hint { font-size:8px !important; }
  .avatar-preview-circle { width:42px !important; height:42px !important; font-size:18px !important; }

  /* 지갑 주소 */
  .waddr-section { gap:5px; margin-bottom:6px; }
  .waddr-title { font-size:6px; gap:4px; }
  .waddr-title-icon { font-size:10px; }
  .waddr-card-header { padding:5px 8px; }
  .waddr-net-emoji { font-size:10px; }
  .waddr-net-name { font-size:5.5px; }
  .waddr-addr { font-size:8.5px; padding:5px 8px; margin:0 6px; line-height:1.5; }
  .waddr-copy-btn { padding:6px 8px; font-size:9px; }

  /* 폼 필드 */
  .step2-form { gap:6px; }
  .step2-field { gap:2px; }
  .step2-label { font-size:6px; }
  .step2-input { padding:7px 9px; font-size:14px; }
  .step2-input.txid { font-size:10px; }
  .s2-divider { margin:4px 0; }
  .s2-confirm-label { padding:6px 8px; font-size:9px; margin-top:4px; gap:6px; }
  .s2-confirm-cb { width:12px; height:12px; }

  /* PIN 설명 축소 */
  .pin-strength { margin-top:2px; }
}

/* ══════════════════════════════════════════
   MODAL STEP 2 — DARK THEME OVERRIDE
   ══════════════════════════════════════════ */
#modal-step-2 {
  background: #0e0c1a;
  color: #fff;
  overflow: hidden;
}
#modal-step-2.hidden {
  display: none !important;
}
#modal-step-2:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Step 2 wrapper inherits dark bg */
.step2-body { padding: 12px 14px 4px; overflow-y: auto; flex: 1; min-height: 0; }

.step2-header {
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  color: #fff; text-align: center; margin-bottom: 6px; letter-spacing: .5px;
}
.step2-amount-row {
  text-align: center; font-size: 11px; color: rgba(255,255,255,.45);
  margin-bottom: 14px; font-family: 'Comic Neue', sans-serif;
}
.step2-amount-row strong { color: #ffd700; font-size: 14px; font-family: 'Press Start 2P', monospace; }

/* ── Wallet Address Section ── */
.waddr-section { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }

.waddr-title {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Press Start 2P',monospace; font-size:7px;
  color:#f9a8d4; letter-spacing:.5px; margin-bottom:2px;
}
.waddr-title-icon { font-size:12px; animation:waddrBounce .9s ease-in-out infinite alternate; }
.waddr-title-icon:last-child { animation-delay:.45s; }
@keyframes waddrBounce { from{transform:translateY(0)} to{transform:translateY(-3px)} }

/* 카드 */
.waddr-card {
  border-radius:10px; overflow:hidden;
  border:1.5px solid; transition:transform .15s, box-shadow .2s;
}
.waddr-card:hover { transform:translateY(-1px); }
.waddr-card.eth { border-color:rgba(196,181,253,.45); box-shadow:0 2px 12px rgba(196,181,253,.08); }
.waddr-card.trx { border-color:rgba(249,168,212,.45); box-shadow:0 2px 12px rgba(249,168,212,.08); }

.waddr-card-header {
  display:flex; align-items:center; gap:6px; padding:6px 10px;
}
.eth-header { background:linear-gradient(90deg,rgba(196,181,253,.18),rgba(196,181,253,.04)); }
.trx-header { background:linear-gradient(90deg,rgba(249,168,212,.18),rgba(249,168,212,.04)); }
.waddr-net-emoji { font-size:12px; }
.waddr-net-name {
  font-family:'Press Start 2P',monospace; font-size:6.5px; font-weight:700; flex:1;
}
.eth-header .waddr-net-name { color:#c4b5fd; }
.trx-header .waddr-net-name { color:#f9a8d4; }

.waddr-addr {
  font-family:'Share Tech Mono',monospace;
  font-size:9.5px; color:#e2e8f0;
  word-break:break-all; line-height:1.6; letter-spacing:.2px;
  padding:7px 10px; margin:0 8px 0;
  background:rgba(0,0,0,.28);
  border-radius:6px; border:1px solid rgba(255,255,255,.07);
  user-select:all; cursor:text;
}

.waddr-copy-btn {
  display:block; width:100%; margin-top:6px; padding:7px 10px;
  font-size:10px; font-weight:800; cursor:pointer;
  border:none; border-top:1px solid;
  font-family:'Comic Neue',sans-serif; letter-spacing:.3px;
  transition:background .15s, transform .1s;
}
.waddr-copy-btn:hover { transform:scale(1.01); }
.eth-copy { background:rgba(196,181,253,.12); border-color:rgba(196,181,253,.2); color:#c4b5fd; }
.eth-copy:hover { background:rgba(196,181,253,.22); }
.trx-copy { background:rgba(249,168,212,.12); border-color:rgba(249,168,212,.2); color:#f9a8d4; }
.trx-copy:hover { background:rgba(249,168,212,.22); }
.waddr-copy-btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }

/* ── Form fields ── */
.step2-form { display: flex; flex-direction: column; gap: 8px; }
.step2-field { display: flex; flex-direction: column; gap: 3px; }

.step2-label {
  font-family: 'Press Start 2P', monospace; font-size: 6.5px;
  color: rgba(255,255,255,.45); letter-spacing: .4px;
}
.step2-label .req { color: #ff4466; margin-left: 2px; }
.step2-label .hint {
  font-size: 5.5px; color: rgba(255,255,255,.2);
  font-weight: normal; margin-left: 4px; font-family: 'Comic Neue', sans-serif;
}

.step2-input {
  width: 100%; padding: 8px 11px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; color: #fff; font-size: 12px;
  font-family: 'Comic Neue', sans-serif; outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.step2-input::placeholder { color: rgba(255,255,255,.18); }
.step2-input:focus {
  border-color: var(--neon-green); background: rgba(0,255,136,.025);
  box-shadow: 0 0 0 3px rgba(0,255,136,.07);
}
.step2-input.txid { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .4px; }

/* ── Which network did you send on? ── */
.step2-net-pick { display: flex; gap: 8px; }
.net-pick-btn {
  flex: 1; padding: 9px 8px; border-radius: 7px; cursor: pointer;
  font-family: 'Press Start 2P', monospace; font-size: 6.5px;
  text-align: center; transition: .15s; border: 1px solid;
}
.net-pick-btn.eth { background: rgba(98,126,234,.06); border-color: rgba(98,126,234,.2); color: #818cf8; }
.net-pick-btn.eth.picked,
.net-pick-btn.eth:hover { background: rgba(98,126,234,.22); border-color: #818cf8; }
.net-pick-btn.trx { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.2); color: #f87171; }
.net-pick-btn.trx.picked,
.net-pick-btn.trx:hover { background: rgba(239,68,68,.2); border-color: #f87171; }

/* ── Error ── */
.step2-error {
  background: rgba(255,51,102,.1); border: 1px solid rgba(255,51,102,.35);
  border-radius: 6px; padding: 8px 12px; font-size: 11px; color: #ff4477;
}
.step2-error.hidden { display: none; }

/* ── Avatar Upload ── */
.step2-avatar-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  padding: 10px 12px; background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1); border-radius: 8px;
}
.avatar-preview-circle {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 2px dashed rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; overflow: hidden;
  transition: border-color .2s, background .2s; position: relative;
}
.avatar-preview-circle:hover { border-color: rgba(0,255,255,.4); background: rgba(0,255,255,.04); }
.avatar-preview-circle img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.avatar-preview-circle .avatar-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  font-size: 18px; border-radius: 50%;
}
.avatar-preview-circle:hover .avatar-overlay { display: flex; }
.avatar-upload-info { flex: 1; }
.avatar-upload-title { font-size: 12px; font-weight: 700; color: #e2e8f0; margin-bottom: 3px; }
.avatar-upload-sub { font-size: 10px; color: rgba(255,255,255,.4); line-height: 1.5; }
.avatar-upload-btn {
  margin-top: 8px; padding: 5px 12px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
  color: #ccc; font-size: 11px; cursor: pointer; transition: .15s;
}
.avatar-upload-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.avatar-remove-btn {
  padding: 4px 10px; background: rgba(255,51,51,.1);
  border: 1px solid rgba(255,51,51,.25); border-radius: 6px;
  color: #f87171; font-size: 10px; cursor: pointer; margin-left: 4px;
}
#avatar-file-input { display: none; }

/* ── Step 2 button row ── */
#modal-step-2 .modal-buttons { background: #0e0c1a; border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }

/* ── Success overlay ── */
.success-overlay { position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:10001; display:flex; align-items:center; justify-content:center; padding:20px; }
.success-overlay.hidden { display:none; }
.success-box { background:var(--panel-bg); border:4px solid var(--neon-green); border-radius:16px; padding:28px 24px; text-align:center; max-width:420px; width:100%; box-shadow:0 0 40px var(--neon-green),0 0 80px rgba(0,255,136,.25); animation:successPop .4s cubic-bezier(.175,.885,.32,1.275); }
@keyframes successPop{0%{transform:scale(.3) rotate(10deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.success-title { font-family:Impact,'Arial Black',sans-serif; font-size:clamp(26px,5vw,40px); color:var(--gold); text-shadow:0 0 20px var(--gold); animation:titleShake .22s ease-in-out infinite alternate; margin-bottom:10px; }
.success-msg   { font-size:14px; color:var(--neon-green); margin-bottom:8px; line-height:1.5; }
.success-receipt { font-family:'Press Start 2P',monospace; font-size:8px; color:rgba(255,255,255,.4); margin-bottom:18px; }
.success-close-btn { padding:11px 24px; background:var(--neon-green); color:#000; border:none; border-radius:8px; font-family:Impact,'Arial Black',sans-serif; font-size:16px; cursor:pointer; text-transform:uppercase; transition:transform .15s,box-shadow .15s; }
.success-close-btn:hover { transform:scale(1.05); box-shadow:0 0 20px var(--neon-green); }

/* ── Glitch ── */
.glitch { position:relative; display:inline-block; }
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; }
.glitch::before { color:#ff006e; animation:glitch1 2.8s infinite; clip-path:polygon(0 0,100% 0,100% 35%,0 35%); }
.glitch::after  { color:#00aaff; animation:glitch2 2.8s infinite; clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%); }
@keyframes glitch1{0%,88%,100%{transform:translate(0)}90%{transform:translate(-4px,1px)}93%{transform:translate(4px,-1px)}96%{transform:translate(-2px,0)}}
@keyframes glitch2{0%,83%,100%{transform:translate(0)}85%{transform:translate(4px,-1px)}88%{transform:translate(-4px,1px)}91%{transform:translate(2px,0)}}

/* ── Footer ── */
.site-footer { text-align:center; padding:18px; font-family:'Press Start 2P',monospace; font-size:7px; color:rgba(255,255,255,.18); border-top:1px solid rgba(255,255,255,.07); margin-top:16px; line-height:2; }

/* ── Edit My Card Button ── */
.edit-card-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.35); font-family: 'Press Start 2P', monospace;
  font-size: 8px; padding: 8px 16px; border-radius: 6px;
  cursor: pointer; transition: .2s; letter-spacing: 1px;
}
.edit-card-btn:hover { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }

/* 승인된 카드만 클릭 커서, pending은 default */
.spot-card.paid { cursor: pointer; }
.spot-card.pending { cursor: default; }
.whale-card.whale-confirmed { cursor: pointer; }
.whale-card.whale-pending { cursor: default; }

/* ══════════════════════════════════════════
   EDIT MODAL (em-*)
   ══════════════════════════════════════════ */
.em-box {
  background: #12101f;
  border: 1px solid rgba(0,255,136,.25);
  border-radius: 14px;
  width: 100%; max-width: 440px;
  color: #fff;
  overflow: hidden;
  animation: modalPop .28s cubic-bezier(.175,.885,.32,1.275);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
.em-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(0,255,136,.12), rgba(0,255,136,.04));
  border-bottom: 1px solid rgba(0,255,136,.15);
  flex-shrink: 0;
}
.em-header-icon { font-size: 16px; }
.em-header-title {
  flex: 1; font-family: 'Press Start 2P', monospace;
  font-size: 10px; color: #00ff88; letter-spacing: 1px;
}
.em-close-btn {
  background: none; border: none; color: rgba(255,255,255,.35);
  font-size: 14px; cursor: pointer; padding: 2px 6px;
  border-radius: 4px; transition: color .15s, background .15s;
  line-height: 1;
}
.em-close-btn:hover { color: #fff; background: rgba(255,255,255,.08); }

.em-body {
  padding: 18px 18px 6px;
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.em-body.hidden { display: none; }

.em-desc {
  font-size: 11px; color: rgba(255,255,255,.5);
  line-height: 1.6; margin: 0;
}
.em-verified-notice {
  padding: 8px 12px;
  background: rgba(0,255,136,.07);
  border: 1px solid rgba(0,255,136,.2);
  border-radius: 7px;
  font-size: 11px; color: rgba(0,255,136,.85);
}
.em-field { display: flex; flex-direction: column; gap: 5px; }
.em-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px; color: rgba(255,255,255,.4);
  letter-spacing: .5px;
}
.em-req { color: #ff4466; margin-left: 2px; }
.em-label-hint { color: rgba(255,255,255,.25); font-size: 5.5px; font-family: 'Comic Neue', sans-serif; font-weight: normal; margin-left: 4px; }
.em-slot-hint {
  font-size: 9px; color: rgba(0,255,136,.6);
  margin-top: 3px; letter-spacing: .3px;
}
.em-slot-hint.hidden { display: none; }
.em-input[readonly] {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
.em-input {
  width: 100%; padding: 9px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; color: #fff;
  font-size: 13px; font-family: 'Comic Neue', sans-serif;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.em-input::placeholder { color: rgba(255,255,255,.2); }
.em-input:focus {
  border-color: rgba(0,255,136,.5);
  box-shadow: 0 0 0 3px rgba(0,255,136,.08);
}
.em-error {
  padding: 8px 11px;
  background: rgba(255,51,102,.1);
  border: 1px solid rgba(255,51,102,.3);
  border-radius: 6px;
  font-size: 11px; color: #ff4477;
}
.em-error.hidden { display: none; }

/* 아바타 행 */
.em-avatar-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 10px;
}
.em-avatar-circle {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.07);
  border: 2px dashed rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; cursor: pointer; overflow: hidden;
  transition: border-color .2s; position: relative;
}
.em-avatar-circle:hover { border-color: rgba(0,255,136,.4); }
.em-avatar-overlay {
  display: none; position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  align-items: center; justify-content: center;
  font-size: 18px; border-radius: 50%;
}
.em-avatar-circle:hover .em-avatar-overlay { display: flex; }
.em-avatar-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.em-avatar-title {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8);
}
.em-avatar-sub { font-size: 10px; color: rgba(255,255,255,.35); }
.em-avatar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.em-avatar-btn {
  padding: 5px 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px; color: rgba(255,255,255,.7);
  font-size: 10px; cursor: pointer;
  transition: background .15s, color .15s;
}
.em-avatar-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.em-avatar-remove { color: rgba(255,100,100,.7); border-color: rgba(255,100,100,.2); }
.em-avatar-remove:hover { background: rgba(255,100,100,.12); color: #ff6666; }

/* 버튼 영역 */
.em-btns {
  display: flex; gap: 10px;
  padding: 12px 0 6px;
  flex-shrink: 0;
}
.em-btn-primary {
  flex: 1; padding: 11px 14px;
  background: linear-gradient(135deg, #00cc6a, #00ff88);
  color: #0a1a12; border: none; border-radius: 8px;
  font-family: 'Press Start 2P', monospace; font-size: 9px;
  cursor: pointer; transition: opacity .15s, transform .1s;
  letter-spacing: .5px;
}
.em-btn-primary:hover { opacity: .88; transform: scale(1.02); }
.em-btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.em-btn-cancel {
  padding: 11px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; color: rgba(255,255,255,.45);
  font-size: 11px; cursor: pointer;
  transition: background .15s, color .15s;
}
.em-btn-cancel:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }

.em-done-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px; color: #00ff88; margin-bottom: 8px;
}

@media (max-width: 480px) {
  .em-box { border-radius: 10px; }
  .em-body { padding: 14px 14px 4px; }
  .em-avatar-row { gap: 10px; padding: 10px; }
  .em-avatar-circle { width: 48px; height: 48px; font-size: 20px; }
}

/* ── Modal Step 2 Renewed ── */
.s2-top-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.s2-amount-block { flex: 1; }
.s2-amount-label { font-size: 9px; color: rgba(255,255,255,.4); letter-spacing: 1px; margin-bottom: 2px; }
.s2-amount-val { font-size: clamp(18px,4vw,26px); font-weight: 900; color: var(--gold, #ffd700); line-height: 1; }
.s2-amount-sub { font-size: 9px; color: rgba(255,255,255,.35); margin-top: 2px; }
.s2-avatar-block {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-align: center;
}
.s2-avatar-hint { font-size: 9px; color: rgba(255,255,255,.4); line-height: 1.3; }

/* TXID input wrap */
.txid-input-wrap { position: relative; }
.txid-badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 7px; border-radius: 4px; pointer-events: none;
}
.txid-badge.valid  { background: rgba(0,255,136,.15); color: #00ff88; }
.txid-badge.valid.trc { background: rgba(0,229,255,.15); color: #00e5ff; }
.txid-badge.invalid { background: rgba(255,68,68,.15); color: #ff6464; }
.txid-hint { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 5px; line-height: 1.5; transition: color .2s; }

/* PIN strength */
.pin-strength { height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.pin-strength-fill { height: 100%; border-radius: 3px; transition: width .3s, background .3s; }

/* Divider */
.s2-divider { height: 1px; background: rgba(255,255,255,.06); margin: 6px 0; }

/* Confirm checkbox */
.s2-confirm-label {
  display: flex; align-items: flex-start; gap: 8px;
  cursor: pointer; font-size: 10px; color: rgba(255,255,255,.55);
  line-height: 1.5; margin-top: 6px;
  padding: 8px 10px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; background: rgba(255,255,255,.02); transition: border-color .15s;
}
.s2-confirm-label:hover { border-color: rgba(0,255,136,.2); }
.s2-confirm-cb {
  margin-top: 1px; width: 14px; height: 14px; flex-shrink: 0;
  accent-color: var(--neon-green, #00ff88); cursor: pointer;
}

/* s2 field row */
.s2-field-row { display: flex; gap: 10px; }

/* PIN 안내 텍스트 축소 */
#modal-step-2 .step2-field > div[style*="font-size:10px"] { font-size: 9px !important; }

/* step-2 modal-buttons 고정 */
#modal-step-2 ~ .modal-buttons,
#modal-step-2 .modal-buttons { flex-shrink: 0; }

@media (max-width: 520px) {
  .s2-top-row { flex-direction: row; }
  .s2-avatar-block { flex-direction: row; align-items: center; gap: 8px; }
  .s2-amount-val { font-size: 18px; }
}

/* ── 모바일 input 자동 확대 방지 (iOS Safari) ──
   font-size < 16px 이면 iOS가 자동 줌인 → 16px 강제 */
@media (max-width: 768px) {
  .step2-input,
  .em-input,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════
   CELEBRATION SYSTEM
   ═══════════════════════════════════════════ */

/* ── Screen Shake ── */
@keyframes shakeHeavy {
  0%,100%{transform:translate(0)}
  10%{transform:translate(-8px,6px) rotate(-1deg)}
  20%{transform:translate(6px,-8px) rotate(1deg)}
  30%{transform:translate(-10px,4px)}
  40%{transform:translate(8px,-6px) rotate(-0.5deg)}
  50%{transform:translate(-6px,8px) rotate(0.5deg)}
  60%{transform:translate(10px,-4px)}
  70%{transform:translate(-4px,10px) rotate(-1deg)}
  80%{transform:translate(6px,-8px) rotate(1deg)}
  90%{transform:translate(-8px,4px)}
}
@keyframes shakeLight {
  0%,100%{transform:translate(0)}
  20%{transform:translate(-3px,2px)}
  40%{transform:translate(3px,-2px)}
  60%{transform:translate(-2px,3px)}
  80%{transform:translate(2px,-3px)}
}
body.celeb-shake-heavy { animation:shakeHeavy 0.5s ease-in-out 4; }
body.celeb-shake-light { animation:shakeLight 0.4s ease-in-out 3; }

/* ── Top Banner ── */
.celeb-banner {
  position:fixed; top:0; left:0; right:0; z-index:99999;
  display:flex; align-items:center; gap:12px;
  padding:12px 20px;
  font-family:'Press Start 2P',monospace;
  color:#fff;
  animation:bannerSlideIn .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 6px 30px rgba(0,0,0,.6);
  overflow:hidden;
}
.celeb-banner.hidden { display:none; }
@keyframes bannerSlideIn { 0%{transform:translateY(-100%);opacity:0} 100%{transform:translateY(0);opacity:1} }

.celeb-banner-gold {
  background:linear-gradient(90deg, #8B6914, #DAA520, #FFD700, #DAA520, #8B6914);
  background-size:300% 100%;
  animation:bannerSlideIn .5s cubic-bezier(.34,1.56,.64,1), goldShimmer 3s linear infinite;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
@keyframes goldShimmer { 0%{background-position:0 0} 100%{background-position:300% 0} }
.celeb-banner-silver {
  background:linear-gradient(90deg, #4A6670, #708090, #B0C4DE, #708090, #4A6670);
  background-size:300% 100%;
  animation:bannerSlideIn .5s cubic-bezier(.34,1.56,.64,1), goldShimmer 4s linear infinite;
}
.celeb-banner-bronze {
  background:linear-gradient(90deg, #8B2252, #C71585, #FF69B4, #C71585, #8B2252);
  background-size:300% 100%;
  animation:bannerSlideIn .5s cubic-bezier(.34,1.56,.64,1), goldShimmer 4s linear infinite;
}
.celeb-banner-regular {
  background:linear-gradient(90deg, #004D33, #006644, #00FF88, #006644, #004D33);
  background-size:300% 100%;
  animation:bannerSlideIn .5s cubic-bezier(.34,1.56,.64,1), goldShimmer 5s linear infinite;
}

.celeb-b-av {
  width:44px; height:44px; border-radius:10px; object-fit:cover;
  border:2px solid rgba(255,255,255,.6); flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.celeb-b-av-emoji { font-size:32px; flex-shrink:0; }
.celeb-b-info { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.celeb-b-name {
  font-size:clamp(9px,1.5vw,13px); font-weight:900;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.celeb-b-price {
  font-size:clamp(7px,1.1vw,10px); opacity:.85;
}
.celeb-b-roast {
  font-family:'Comic Neue',cursive; font-style:italic;
  font-size:clamp(8px,1.2vw,11px); opacity:.75; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.celeb-b-close {
  flex-shrink:0; font-size:16px; opacity:.5; cursor:pointer;
  padding:6px 10px; border-radius:6px; align-self:flex-start;
}
.celeb-b-close:hover { opacity:1; background:rgba(255,255,255,.15); }

/* ── Card Glow (in-page celebration highlight) ── */
.celeb-glow {
  position:relative; z-index:10;
  animation:celebGlowPulse 2s ease-in-out infinite alternate !important;
  transform:scale(1.03) !important;
}
.celeb-glow-gold {
  box-shadow:0 0 30px rgba(255,215,0,.6), 0 0 60px rgba(255,215,0,.25), inset 0 0 15px rgba(255,215,0,.1) !important;
  border-color:#FFD700 !important;
}
.celeb-glow-silver {
  box-shadow:0 0 25px rgba(176,196,222,.5), 0 0 50px rgba(176,196,222,.2), inset 0 0 12px rgba(176,196,222,.08) !important;
  border-color:#B0C4DE !important;
}
.celeb-glow-bronze {
  box-shadow:0 0 25px rgba(255,105,180,.5), 0 0 50px rgba(255,105,180,.2), inset 0 0 12px rgba(255,105,180,.08) !important;
  border-color:#FF69B4 !important;
}
.celeb-glow-regular {
  box-shadow:0 0 20px rgba(0,255,136,.5), 0 0 40px rgba(0,255,136,.18), inset 0 0 10px rgba(0,255,136,.06) !important;
  border-color:#00FF88 !important;
}
@keyframes celebGlowPulse {
  0%  { filter:brightness(1); }
  100%{ filter:brightness(1.2); }
}

@media(max-width:480px){
  .celeb-banner { padding:8px 10px; gap:6px; font-size:7px; }
  .celeb-b-av { width:22px; height:22px; }
}