@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Bebas+Neue&display=swap');

/* ═══════════════════════
   TOKENS
═══════════════════════ */
:root {
  --bg:      #000000;
  --bg1:     #0a0a0a;
  --bg2:     #111111;
  --bg3:     #1a1a1a;

  --fg:      #f5f5f5;
  --muted:   rgba(200,200,200,0.45);
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.15);

  --mint:    #00ffcc;
  --mint2:   #00ccaa;
  --mintg:   rgba(0,255,204,0.18);
  --mintb:   rgba(0,255,204,0.07);
  --coral:   #ff4d6d;
  --coralg:  rgba(255,77,109,0.18);
  --yellow:  #ffe600;
  --yellowg: rgba(255,230,0,0.18);
  --blue:    #5b8fff;
  --blueg:   rgba(91,143,255,0.18);

  --r4:  4px;
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --r24: 24px;
  --rFull: 999px;
}

/* ═══════════════════════
   RESET
═══════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none;color:inherit;}
svg{display:block;flex-shrink:0;}
p{margin:0;}

/* ═══════════════════════
   GRAIN
═══════════════════════ */
body::after{
  content:'';
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.03;
}

/* ═══════════════════════
   SCROLLBAR
═══════════════════════ */
::-webkit-scrollbar{width:2px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--mint);border-radius:99px;}

/* ═══════════════════════
   APP / SCREENS
═══════════════════════ */
#app{position:relative;width:100%;height:100dvh;overflow:hidden;}
.screen{
  position:absolute;inset:0;display:none;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  background:var(--bg);
}
.screen.active{display:block;}
.screen-inner{
  /* screens are position:absolute;inset:0 so they already fill viewport */
  /* individual screens set their own height/overflow/padding */
}

/* ═══════════════════════
   PRESS
═══════════════════════ */
.press{transition:transform .1s cubic-bezier(.34,1.56,.64,1),opacity .1s;}
.press:active{transform:scale(.91);opacity:.8;}

/* ═══════════════════════
   ▓▓▓ SPLASH ▓▓▓
═══════════════════════ */
#splash-screen{
  position:fixed;inset:0;z-index:100;
  background:#000;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow:hidden;
}

/* Scanline overlay */
#splash-screen::before{
  content:'';
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(
    180deg,
    transparent,transparent 2px,
    rgba(0,255,204,0.015) 2px,rgba(0,255,204,0.015) 4px
  );
}

/* Corner brackets */
.splash-corner{
  position:absolute;width:60px;height:60px;z-index:10;
}
.splash-corner.tl{top:24px;left:24px;
  border-top:1.5px solid var(--mint);border-left:1.5px solid var(--mint);}
.splash-corner.tr{top:24px;right:24px;
  border-top:1.5px solid var(--mint);border-right:1.5px solid var(--mint);}
.splash-corner.bl{bottom:80px;left:24px;
  border-bottom:1.5px solid var(--mint);border-left:1.5px solid var(--mint);}
.splash-corner.br{bottom:80px;right:24px;
  border-bottom:1.5px solid var(--mint);border-right:1.5px solid var(--mint);}

/* Glow blob */
#splash-screen .blob{
  position:absolute;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,204,0.10) 0%,transparent 65%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:blobPulse 4s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes blobPulse{
  from{transform:translate(-50%,-50%) scale(1);}
  to  {transform:translate(-50%,-50%) scale(1.3);}
}

/* Logo SVG draw */
.splash-logo-wrap{
  position:relative;z-index:10;
  width:120px;height:120px;
  display:flex;align-items:center;justify-content:center;
}
.splash-logo-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(0,255,204,0.25);
  animation:ringExpand 3s ease-in-out infinite;
}
.splash-logo-ring:nth-child(2){
  inset:-16px;border-color:rgba(0,255,204,0.12);
  animation-delay:.6s;
}
.splash-logo-ring:nth-child(3){
  inset:-32px;border-color:rgba(0,255,204,0.06);
  animation-delay:1.2s;
}
@keyframes ringExpand{
  0%,100%{transform:scale(1);opacity:.6;}
  50%{transform:scale(1.05);opacity:1;}
}
.splash-logo-hex{
  width:88px;height:88px;
  background:var(--bg1);
  border:1.5px solid var(--mint);
  border-radius:28px;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;overflow:visible;
  box-shadow:0 0 40px rgba(0,255,204,0.25),inset 0 0 20px rgba(0,255,204,0.05);
}
.splash-logo-hex .avatar-ring{display:none;}
.splash-logo-hex .avatar-fallback{
  font-family:'Bebas Neue',sans-serif;font-size:44px;letter-spacing:2px;
  color:var(--mint);text-shadow:0 0 22px var(--mint),0 0 44px rgba(0,255,204,.4);
}
.splash-logo-hex .avatar-img{width:84px;height:84px;border-radius:26px;object-fit:cover;}
.splash-logo-hex .avatar-badge{
  position:absolute;bottom:-6px;right:-6px;
  width:22px;height:22px;border-radius:50%;
  background:var(--mint);border:2px solid #000;
  display:flex;align-items:center;justify-content:center;
  color:#000;box-shadow:0 0 10px var(--mint);
}
.splash-logo-letter{
  font-family:'Bebas Neue',sans-serif;
  font-size:48px;letter-spacing:2px;
  color:var(--mint);
  text-shadow:0 0 20px var(--mint),0 0 40px rgba(0,255,204,0.5);
}

/* Avatar wrap (over logo after load) */
.avatar-wrap{
  width:88px;height:88px;border-radius:28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg1);
  border:1.5px solid var(--mint);
  box-shadow:0 0 40px rgba(0,255,204,0.25),inset 0 0 20px rgba(0,255,204,0.05);
  position:relative;overflow:hidden;
}
.avatar-ring{display:none;}
.avatar-badge{
  position:absolute;bottom:6px;right:6px;
  width:20px;height:20px;border-radius:50%;
  background:var(--mint);border:2px solid #000;
  display:flex;align-items:center;justify-content:center;
  color:#000;
  box-shadow:0 0 10px var(--mint);
}
.avatar-fallback{
  font-family:'Bebas Neue',sans-serif;
  font-size:42px;letter-spacing:2px;
  color:var(--mint);
  text-shadow:0 0 20px var(--mint);
}
.avatar-img{
  width:100%;height:100%;border-radius:26px;
  object-fit:cover;
}

/* Status tag */
.splash-status{
  position:absolute;top:28px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--mint);
  padding:6px 14px;border-radius:var(--rFull);
  border:1px solid rgba(0,255,204,0.25);
  background:rgba(0,255,204,0.05);
  white-space:nowrap;
}
.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 8px var(--mint);
  animation:statusBlink 1.2s ease-in-out infinite alternate;
}
@keyframes statusBlink{
  from{opacity:1;box-shadow:0 0 4px var(--mint);}
  to  {opacity:.5;box-shadow:0 0 14px var(--mint);}
}

/* Name & handle */
.splash-name-block{
  margin-top:28px;text-align:center;position:relative;z-index:10;
}
.splash-fullname{
  font-family:'Bebas Neue',sans-serif;
  font-size:52px;letter-spacing:3px;
  color:#fff;line-height:1;
  text-shadow:0 0 60px rgba(0,255,204,0.2);
}
.splash-username{
  margin-top:4px;font-size:12px;font-weight:500;
  color:var(--mint);letter-spacing:0.08em;
}

/* Sys line */
.splash-sys{
  margin-top:18px;position:relative;z-index:10;
  font-size:10.5px;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(0,255,204,0.5);
}

/* Progress */
.splash-progress{
  position:absolute;bottom:0;left:0;right:0;
  padding:0 28px calc(env(safe-area-inset-bottom,12px) + 20px);
  z-index:10;
}
.progress-bar-bg{
  height:2px;background:rgba(255,255,255,0.06);
  border-radius:99px;overflow:hidden;
}
.progress-bar-fill{
  height:100%;width:0;border-radius:99px;
  background:var(--mint);
  box-shadow:0 0 12px var(--mint),0 0 24px rgba(0,255,204,0.4);
  transition:width .07s linear;
  position:relative;
}
.progress-bar-fill::after{
  content:'';
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 8px var(--mint),0 0 20px rgba(0,255,204,0.8);
}
.progress-labels{
  display:flex;justify-content:space-between;
  margin-top:10px;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.22em;color:var(--muted);
}

/* Ping dot */
.ping-dot{position:relative;width:8px;height:8px;flex-shrink:0;}
.ping-outer{
  position:absolute;inset:0;border-radius:50%;
  background:var(--mint);opacity:.4;
  animation:ping 1.6s cubic-bezier(0,0,0.2,1) infinite;
}
.ping-inner{
  position:absolute;inset:2px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px var(--mint);
}
@keyframes ping{
  0%{transform:scale(1);opacity:.5;}
  100%{transform:scale(2.4);opacity:0;}
}
.dot-anim::after{
  content:'';
  animation:dots 1.4s steps(4,end) infinite;
}
@keyframes dots{
  0%{content:'';}33%{content:'.';}66%{content:'..';}100%{content:'...';}
}

/* ═══════════════════════
   ▓▓▓ HOME ▓▓▓
═══════════════════════ */
#screen-home .screen-inner{
  display:flex;flex-direction:column;
  padding:0 0 8px;
  height:100dvh;
  overflow:hidden;
}

/* --- Header bar --- */
.home-header{
  position:sticky;top:0;z-index:20;
  padding:9px 14px;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.home-logo-pill{
  display:flex;align-items:center;gap:10px;
}
.home-logo-sq{
  width:36px;height:36px;border-radius:10px;
  background:var(--bg2);
  border:1px solid rgba(0,255,204,0.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(0,255,204,0.2);
  overflow:hidden;
}
.home-logo-sq svg{display:block;}
.home-title{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:var(--fg);}
.home-subtitle{font-size:10.5px;color:var(--muted);margin-top:1px;}

.live-chip{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--rFull);
  background:rgba(0,255,204,0.07);
  border:1px solid rgba(0,255,204,0.25);
  font-size:11px;font-weight:700;
  color:var(--mint);letter-spacing:.04em;
}
.pulse-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 8px var(--mint);
  animation:pulseGlow 1.8s ease-in-out infinite alternate;
}
@keyframes pulseGlow{
  from{box-shadow:0 0 4px var(--mint);}
  to  {box-shadow:0 0 14px var(--mint),0 0 28px rgba(0,255,204,.4);}
}
.neon-green{color:var(--mint);}

/* --- Marquee --- */
.marquee-outer{
  overflow:hidden;
  border-bottom:1px solid var(--border);
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  flex-shrink:0;
}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 26s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}
.marquee-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;white-space:nowrap;
  font-size:10.5px;font-weight:600;color:var(--muted);
}
.mi-text{color:rgba(245,245,245,.75);}
.mi-sep{color:var(--mint);opacity:.35;font-size:9px;}

/* --- Hero block --- */
.home-hero{
  padding:10px 14px 0;
  flex-shrink:0;
}
.home-hero-eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:4px;
}
.home-hero-eyebrow span{
  display:inline-block;width:20px;height:1px;
  background:var(--mint);opacity:.6;
}
.home-greeting{
  font-family:'Bebas Neue',sans-serif;
  font-size:38px;letter-spacing:2px;line-height:.95;
  color:#fff;
  text-shadow:0 0 60px rgba(0,255,204,.1);
}
.home-greeting em{
  color:var(--mint);font-style:normal;
  text-shadow:0 0 30px rgba(0,255,204,.6);
}

.info-strip{
  margin-top:8px;
  padding:8px 12px;
  border-radius:var(--r12);
  background:var(--bg2);
  border:1px solid var(--border);
  display:flex;flex-direction:column;gap:2px;
}
.info-strip-title{font-size:12px;font-weight:700;color:var(--mint);}
.info-strip-sub  {font-size:11px;color:var(--muted);}
.info-strip-warn {font-size:11px;color:var(--yellow);}

/* --- Stat bento --- */
.stat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:7px;padding:8px 14px 0;
  flex-shrink:0;
}
.stat-cell{
  border-radius:var(--r12);
  padding:8px 8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  position:relative;overflow:hidden;
}
.stat-val{
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;letter-spacing:1px;line-height:1;
}
.stat-lbl{
  font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}

/* --- Action cards --- */
.action-wrap{
  display:flex;flex-direction:column;gap:7px;
  padding:8px 14px 0;
  flex-shrink:0;
}
.act-card{
  width:100%;border-radius:var(--r16);
  overflow:hidden;position:relative;
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;cursor:pointer;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
  background:var(--bg2);
  border:1px solid var(--border);
}
.act-card:active{transform:scale(.975);}
.act-card-shine{
  position:absolute;inset:0;pointer-events:none;
}
.act-card-icon{
  width:40px;height:40px;border-radius:var(--r12);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
}
.act-card-body{position:relative;z-index:2;flex:1;text-align:left;}
.act-card-title{font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:1px;}
.act-card-sub  {font-size:11px;color:var(--muted);}
.act-card-arr  {position:relative;z-index:2;flex-shrink:0;}

/* --- Footer notice --- */
.home-notice{
  margin:7px 14px 0;
  padding:7px 12px;border-radius:var(--r12);
  background:var(--bg2);border:1px solid var(--border);
  font-size:10.5px;line-height:1.5;text-align:center;
  flex-shrink:0;
}

/* ═══════════════════════
   SCREEN SHARED
═══════════════════════ */
.screen-pad{padding:12px 14px 12px;display:flex;flex-direction:column;height:100dvh;overflow:hidden;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-shrink:0;}
.back-btn{
  width:36px;height:36px;border-radius:var(--r12);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--border);
}
.mode-badge{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--rFull);
  background:var(--bg2);border:1px solid var(--border);
  font-size:11px;font-weight:700;letter-spacing:.04em;
}
.mode-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px var(--mint);
}
.input-label{
  display:block;margin-bottom:8px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
}

/* ═══════════════════════
   PROMO CARD
═══════════════════════ */
.promo-card{
  border-radius:var(--r16);padding:12px;
  background:var(--bg2);
  border:1px solid var(--border);
  position:relative;overflow:hidden;
  flex-shrink:0;
}
.promo-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--mint),transparent);
}
.promo-icon{
  width:40px;height:40px;border-radius:var(--r12);flex-shrink:0;
  background:rgba(0,255,204,.08);
  border:1px solid rgba(0,255,204,.2);
  display:flex;align-items:center;justify-content:center;
  color:var(--mint);
}
.promo-reg-btn{
  margin-top:10px;width:100%;height:42px;border-radius:var(--r12);
  background:var(--mint);color:#000;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 18px rgba(0,255,204,.3);
}
.promo-reg-btn::after{
  content:'';
  position:absolute;top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shimBtn 2.2s ease-in-out infinite;
}
@keyframes shimBtn{0%{left:-100%;}100%{left:160%;}}
.promo-warn{
  margin-top:8px;border-radius:var(--r8);
  background:rgba(255,77,109,.08);
  border:1px solid rgba(255,77,109,.2);
  padding:7px 10px;
  font-size:11px;line-height:1.45;
  color:rgba(255,130,130,.9);
}

/* ═══════════════════════
   UID DISPLAY
═══════════════════════ */
.uid-display{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;border-radius:var(--r12);
  background:var(--bg2);border:1.5px solid var(--border);
  min-height:48px;
  transition:border-color .2s,box-shadow .2s;
}
.uid-display.has-value{
  border-color:var(--mint);
  box-shadow:0 0 0 3px rgba(0,255,204,.12);
}
.uid-val{font-size:20px;font-weight:700;letter-spacing:.08em;flex:1;}
.uid-count{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.05em;}
.uid-cursor{
  display:inline-block;width:2px;height:20px;
  background:var(--mint);margin-left:2px;vertical-align:middle;
  animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}
.uid-display.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97);}
@keyframes shake{
  10%,90%{transform:translateX(-3px);}
  20%,80%{transform:translateX(6px);}
  30%,50%,70%{transform:translateX(-7px);}
  40%,60%{transform:translateX(7px);}
}

/* ═══════════════════════
   KEYPAD
═══════════════════════ */
.keypad{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px;margin-top:10px;
  flex:1;
}
.key-btn{
  height:100%;min-height:52px;max-height:68px;border-radius:var(--r12);
  background:var(--bg2);border:1px solid var(--border);
  font-size:20px;font-weight:700;color:var(--fg);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  transition:transform .09s cubic-bezier(.34,1.56,.64,1),background .15s;
}
.key-btn:active{transform:scale(.87);}
.key-muted{
  background:rgba(255,255,255,.03);color:var(--muted);
}
.key-primary{
  background:var(--mint);color:#000;border-color:transparent;
  font-weight:800;
  box-shadow:0 4px 20px rgba(0,255,204,.3);
}
.key-primary:active{box-shadow:none;}
.glow-primary{box-shadow:0 4px 20px rgba(0,255,204,.3);}

/* ═══════════════════════
   PROCESSING
═══════════════════════ */
.ring-loader{
  width:72px;height:72px;border-radius:50%;
  border:2px solid rgba(255,255,255,.07);
  border-top-color:var(--mint);
  animation:spin .8s linear infinite;
  box-shadow:0 0 24px rgba(0,255,204,.3);
}
@keyframes spin{to{transform:rotate(360deg);}}

.proc-step{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:var(--r16);
  background:var(--bg2);border:1px solid var(--border);
  font-size:13px;transition:all .3s ease;
}
.proc-step-num{
  width:28px;height:28px;border-radius:var(--r8);
  background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--muted);flex-shrink:0;
  transition:all .3s;
}
.proc-step-text{font-size:12.5px;color:var(--muted);transition:color .3s;}
.active-step{border-color:rgba(0,255,204,.2);}
.curr-step{background:rgba(0,255,204,.05);}
.curr-step .proc-step-num{background:var(--mint);color:#000;box-shadow:0 0 12px rgba(0,255,204,.4);}
.curr-step .proc-step-text{color:var(--fg);}
.done-step .proc-step-num{
  background:transparent;color:var(--mint);
  border:1.5px solid var(--mint);
  box-shadow:0 0 8px rgba(0,255,204,.3);
}

/* ═══════════════════════
   RESULT CARD
═══════════════════════ */
.fail-card{
  margin-top:10px;border-radius:var(--r16);
  background:var(--bg2);border:1px solid var(--border);
  overflow:hidden;position:relative;
  flex-shrink:0;
}
.fail-top-line{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--coral),rgba(255,77,109,0));
}
.fail-inner{
  padding:18px 18px 16px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.fail-icon-wrap{
  width:56px;height:56px;border-radius:var(--r16);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,77,109,.08);
  border:1px solid rgba(255,77,109,.2);
  color:var(--coral);
}
.glow-danger{box-shadow:0 0 18px rgba(255,77,109,.25);}

/* ═══════════════════════
   HERO / PRED CARD
═══════════════════════ */
.hero-card{
  border-radius:var(--r20);overflow:hidden;
  background:var(--bg2);border:1px solid var(--border);
  margin-top:16px;position:relative;
}
.hc-top-line{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--mint),rgba(0,255,204,0));
}
.hc-inner{padding:20px;position:relative;}
.hc-icon{
  width:44px;height:44px;border-radius:var(--r12);flex-shrink:0;
  background:rgba(0,255,204,.07);
  border:1px solid rgba(0,255,204,.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--mint);
}
.hc-tabs{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border);
}
.hc-tab{
  padding:12px;font-size:13px;font-weight:700;
  color:var(--muted);transition:all .2s;border-radius:0;
  letter-spacing:.02em;
}
.hc-tab:first-child{border-right:1px solid var(--border);}
.hc-tab.active-number  {color:var(--mint);background:rgba(0,255,204,.05);}
.hc-tab.active-bigsmall{color:var(--yellow);background:rgba(255,230,0,.05);}

/* Result box */
.result-box{
  margin-top:14px;border-radius:var(--r16);
  background:var(--bg2);border:1px solid var(--border);
}
.result-inner{padding:22px;text-align:center;}
.result-label{
  font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
}
.result-number{
  font-family:'Bebas Neue',sans-serif;
  font-size:88px;letter-spacing:2px;line-height:1;margin-top:8px;
  color:var(--mint);
  text-shadow:0 0 30px rgba(0,255,204,.5),0 0 80px rgba(0,255,204,.2);
}
.result-bigsmall{
  font-family:'Bebas Neue',sans-serif;
  font-size:60px;letter-spacing:3px;margin-top:10px;
  padding:10px 28px;border-radius:var(--r12);display:inline-block;
}
.result-bigsmall.big{
  color:var(--yellow);
  background:rgba(255,230,0,.06);
  border:1px solid rgba(255,230,0,.2);
  text-shadow:0 0 20px rgba(255,230,0,.4);
}
.result-bigsmall.small{
  color:var(--mint);
  background:rgba(0,255,204,.06);
  border:1px solid rgba(0,255,204,.2);
  text-shadow:0 0 20px rgba(0,255,204,.4);
}
.result-spinner{
  width:36px;height:36px;border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
  border-top-color:var(--mint);
  animation:spin .7s linear infinite;
  margin:14px auto;
}
.result-confirm{
  margin-top:12px;font-size:11px;font-weight:700;
  letter-spacing:.06em;
  color:var(--mint);
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--rFull);
  background:rgba(0,255,204,.06);
  border:1px solid rgba(0,255,204,.18);
}

/* ═══════════════════════
   BUTTONS
═══════════════════════ */
.btn-mint{
  width:100%;height:46px;border-radius:var(--r14,14px);
  background:var(--mint);color:#000;
  font-size:14px;font-weight:800;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 18px rgba(0,255,204,.3);
  flex-shrink:0;
}
.btn-mint::after{
  content:'';
  position:absolute;top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation:shimBtn 2.5s ease-in-out infinite;
}
.shimmer{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation:shimBtn 2.2s ease-in-out infinite;
  pointer-events:none;
}
.btn-ghost{
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:48px;border-radius:var(--r14,14px);
  background:var(--bg2);border:1px solid var(--border);
  font-size:13.5px;font-weight:700;
}

/* ═══════════════════════
   SUPPORT SHEET
═══════════════════════ */
#support-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:none;align-items:flex-end;justify-content:center;
}
#support-overlay.open{display:flex;}
.support-sheet{
  background:var(--bg1);
  border:1px solid var(--border2);
  border-bottom:none;
  border-radius:24px 24px 0 0;
  padding:10px 20px calc(env(safe-area-inset-bottom,14px) + 20px);
  width:100%;max-width:500px;
  animation:sheetUp .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sheetUp{
  from{transform:translateY(100%);opacity:0;}
  to  {transform:translateY(0);opacity:1;}
}
.support-handle{
  width:36px;height:3px;border-radius:99px;
  background:var(--border2);margin:0 auto 22px;
}

/* Slide-up anim */
.slide-up{animation:slideUp .4s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes slideUp{
  from{transform:translateY(24px);opacity:0;}
  to  {transform:translateY(0);opacity:1;}
}

/* top neon line */
.top-neon-line{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
  opacity:.4;
}

/* aurora bg (not used heavily but kept for JS compat) */
.aurora-bg{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ── PREDICTION IFRAME + OVERLAY (legacy block removed, see flex layout below) ── */

/* ── PREDICTION SCREEN — FLEX COLUMN LAYOUT ─────────── */
#screen-prediction{
  flex-direction:column;overflow:hidden;
}
/* When active, override block→flex */
#screen-prediction.active{display:flex;}

/* Topbar — static row, not absolute */
.pred-topbar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 14px;height:40px;box-sizing:border-box;
  background:#000;
  border-bottom:1px solid rgba(0,255,204,.12);
}

/* Compact pred-box — static row, not absolute */
.pred-box{
  flex-shrink:0;
  background:#030a07;
  border-bottom:1.5px solid rgba(0,255,204,.18);
  overflow:hidden;
  transition:max-height .3s cubic-bezier(.4,0,.2,1);
  max-height:420px;
}
.pred-box.collapsed{max-height:30px;}

/* Header row */
.pred-box-header{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;height:32px;box-sizing:border-box;
  cursor:pointer;user-select:none;
  border-bottom:1px solid rgba(0,255,204,.08);
}
.pred-home-btn{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
}
.pred-home-btn:active{background:rgba(0,255,204,.15);color:var(--mint);}
.pred-box-logo{
  display:flex;align-items:center;gap:4px;
  font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:2px;
  color:var(--mint);flex-shrink:0;
}
.pred-mini-chip{
  flex:1;text-align:center;
  font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:1.5px;
  color:var(--yellow);text-shadow:0 0 10px rgba(255,230,0,.35);
}
.pred-chevron{
  color:var(--muted);display:flex;align-items:center;flex-shrink:0;
  transition:transform .25s ease;
}
.pred-box.collapsed .pred-chevron{transform:rotate(180deg);}

/* Body */
.pred-box-body{padding:8px 12px 10px;}

/* Tabs */
.pred-tabs{
  display:flex;gap:5px;
  background:rgba(255,255,255,.04);border:1px solid var(--border1);
  border-radius:8px;padding:3px;margin-bottom:8px;
}
.pred-tab{
  flex:1;padding:5px 0;border-radius:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--muted);background:transparent;border:none;
  transition:background .14s,color .14s;
}
.pred-tab.active-number,.pred-tab.active-bigsmall{
  background:rgba(0,255,204,.13);color:var(--mint);
}

/* Period display row */
.pred-row{display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.pred-display-compact{
  flex:1;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.05);border:1px solid var(--border1);
  border-radius:8px;padding:6px 10px;height:36px;box-sizing:border-box;
}
.pred-display-label{
  font-size:9px;font-weight:800;color:var(--muted);
  letter-spacing:.1em;flex-shrink:0;
}
.pred-val-text{
  flex:1;font-family:'Bebas Neue',sans-serif;font-size:18px;
  letter-spacing:2px;color:var(--fg);line-height:1;
}
.pred-placeholder{
  font-family:'Space Grotesk',sans-serif;font-size:12px;
  font-weight:400;color:rgba(200,200,200,.25);letter-spacing:0;
}
.pred-submit-inline{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--mint);color:#000;
  display:flex;align-items:center;justify-content:center;
  border:none;box-shadow:0 0 14px rgba(0,255,204,.3);
}

/* Floating widget — tabs + period + keypad + result */
.pred-result-float{
  position:absolute;
  left:50%;top:45%;
  transform:translate(-50%,-50%);
  z-index:20;
  display:flex;flex-direction:column;align-items:stretch;gap:5px;
  background:rgba(0,10,6,.95);
  border:1.5px solid rgba(0,255,204,.45);
  border-radius:14px;padding:8px 10px 10px;
  box-shadow:0 0 40px rgba(0,255,204,.18),inset 0 0 24px rgba(0,255,204,.06);
  overflow:hidden;
  width:calc(100% - 48px);
  max-width:260px;
  zoom:0.75;
  pointer-events:all;
  touch-action:none;
  user-select:none;
  cursor:grab;
}
.pred-result-float:active{cursor:grabbing;}
.pred-result-float.dragging{cursor:grabbing;box-shadow:0 0 60px rgba(0,255,204,.3);}
.pred-size-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;margin-bottom:2px;cursor:default;
}
.pred-size-btn{
  width:22px;height:22px;border-radius:6px;
  background:rgba(0,255,204,.08);border:1px solid rgba(0,255,204,.2);
  color:var(--mint);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;font-weight:700;
}
.pred-size-btn:active{background:rgba(0,255,204,.2);}
.pred-size-label{
  font-size:9px;font-weight:700;color:rgba(0,255,204,.5);
  letter-spacing:.1em;text-align:center;flex:1;
}
.pred-result-float::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--mint),transparent);
}
.pred-editable{
  cursor:pointer;
  transition:opacity .15s;
}
.pred-editable:hover{opacity:.75;}
.pred-edit-input{
  font-family:'Bebas Neue',sans-serif;
  font-size:64px;letter-spacing:4px;line-height:1;
  color:var(--mint);
  background:transparent;border:none;
  border-bottom:2px solid var(--mint);
  width:70px;text-align:center;outline:none;
  text-shadow:0 0 28px rgba(0,255,204,.8);
}
.pred-result-tag{
  font-size:9px;font-weight:800;color:var(--mint);
  letter-spacing:.18em;text-transform:uppercase;
}
.pred-result-lock{
  font-size:9.5px;color:var(--mint);font-weight:700;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:99px;
  background:rgba(0,255,204,.08);border:1px solid rgba(0,255,204,.2);
}

/* Big number result */
.pred-result-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:48px;letter-spacing:3px;line-height:1;
  color:var(--mint);
  text-shadow:0 0 20px rgba(0,255,204,.8),0 0 40px rgba(0,255,204,.3);
}

/* Big/Small result */
.pred-result-bs{
  font-family:'Bebas Neue',sans-serif;
  font-size:32px;letter-spacing:3px;line-height:1;
  padding:3px 16px;border-radius:8px;display:inline-block;
}
.pred-result-big{
  color:var(--mint);
  background:rgba(0,255,204,.08);border:1px solid rgba(0,255,204,.3);
  text-shadow:0 0 22px rgba(0,255,204,.7);
}
.pred-result-small{
  color:var(--yellow);
  background:rgba(255,230,0,.08);border:1px solid rgba(255,230,0,.3);
  text-shadow:0 0 22px rgba(255,230,0,.7);
}

/* Tap-to-show display highlight */
.pred-display-tap{cursor:pointer;}
.pred-display-tap:active{border-color:var(--mint);box-shadow:0 0 0 2px rgba(0,255,204,.15);}
.pred-display-tap.kp-open{border-color:var(--mint);box-shadow:0 0 0 2px rgba(0,255,204,.12);}

/* Keypad wrap & dismiss bar */
.pred-keypad-wrap{padding-top:4px;}
.pred-keypad-dismiss{
  display:flex;justify-content:flex-end;margin-bottom:4px;
}
.pred-dismiss-btn{
  display:flex;align-items:center;gap:3px;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;
  color:var(--muted);padding:3px 8px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.pred-dismiss-btn:active{background:rgba(0,255,204,.1);color:var(--mint);}

/* 3-col phone keypad */
.pred-keypad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
}
.pkey{
  height:32px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid var(--border1);
  color:var(--fg);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.pkey:active{background:rgba(0,255,204,.15);transform:scale(.93);}
.pkey-muted{background:rgba(255,255,255,.03);color:var(--muted);}
.pkey-confirm{
  background:var(--mint);color:#000;font-size:13px;font-weight:800;
  box-shadow:0 0 12px rgba(0,255,204,.25);
}

/* iframe fills all remaining space below overlay */
.pred-iframe{
  flex:1;width:100%;border:none;display:block;min-height:0;
}