:root{
  --bg:#05080d;
  --ink:#e9f3ff;
  --muted:#9bb0c8;

  --stroke:rgba(100,170,255,0.35);
  --stroke2:rgba(100,170,255,0.22);

  --green:#37e26e;
  --greenGlow: rgba(55,226,110,0.30);

  /* 🔧 Slightly stronger blue glow base */
  --blueGlow: rgba(80,160,255,0.28);

  --red:#ff4545;
  --redGlow: rgba(255,69,69,0.24);
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  background: radial-gradient(1200px 700px at 50% 0%, #0b1a2b 0%, var(--bg) 55%, #000 100%);
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.hidden{ display:none !important; }

/* ✅ HOME SCREEN */
.home{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 26px 16px;
  gap: 22px;
  text-align:center;
}

.homeLogo{
  width: min(340px, 78vw);
  height:auto;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.55));
  user-select:none;
  -webkit-user-drag:none;
}

.startBtn{
  width: min(360px, 86vw);
  padding: 18px 18px;
  border-radius: 999px;
  border: 2px solid rgba(55,226,110,0.85);
  background: linear-gradient(135deg, #39ff82 0%, #15a94b 100%);
  color: #06200f;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 18px;
  box-shadow:
    0 0 22px var(--greenGlow),
    0 14px 34px rgba(0,0,0,0.45);
  cursor:pointer;
}
.startBtn:active{ transform: translateY(1px); }

/* ✅ GAME UI */
.game{ height:100%; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 10px;
  gap: 12px;
}

.pill {
    border: 2px solid rgba(110, 198, 255, 0.85);
    color: #bfe9ff;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    background: rgba(5, 20, 35, 0.55);
    box-shadow: 0 0 14px rgba(94, 183, 255, 0.35);
}

.score{
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(70,160,255,0.20);
}

.iconBtn{
  width: 54px;
  height: 44px;
  border-radius: 16px;
  border: 2px solid var(--stroke);
  background: rgba(6,10,16,0.55);
  color: #ffb23f;
  font-size: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 22px rgba(70,160,255,0.10);
}

.wrap{
  height: calc(100% - 70px);
  display:flex;
  flex-direction:column;
  gap: 14px;
  padding: 0 14px 14px;
}

.playArea{
  position: relative;
  flex: 1;
  min-height: 360px;
  border-radius: 18px;
  border: 2px solid var(--stroke2);
  background: rgba(3,5,9,0.35);
  box-shadow:
    inset 0 0 0 1px rgba(80,160,255,0.06),
    0 0 40px rgba(20,90,150,0.10);
  overflow:hidden;
}

/* Panel (setup UI) */
.panel{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding-bottom: 6px;
}

.panelTitle{
  text-align:center;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.06em;
}

.btnRow{
  display:flex;
  gap: 12px;
}

.btn{
  flex:1;
    border: 2px solid rgba(110, 198, 255, 0.85);
    color: #bfe9ff;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.08em;
    font-size: 1.0rem;
    background: rgba(5, 20, 35, 0.55);
    box-shadow: 0 0 14px rgba(94, 183, 255, 0.35);
}

.btn.secondary{
  border-color: rgba(140,170,200,0.20);
  opacity: 0.70;
}

.btn.primary{
  border-color: rgba(90,170,255,0.75);
  box-shadow: 0 0 26px rgba(90,170,255,0.25);
}

.btn.selected{
  border-color: rgba(55,226,110,0.9);
  box-shadow: 0 0 22px rgba(55,226,110,0.30), 0 0 52px rgba(55,226,110,0.12);
}

/* ✅ When game starts: hide panel + give play area more room */
body.mode-game .panel{ display:none; }
body.mode-game .wrap{ gap: 10px; }
body.mode-game .playArea{ min-height: 440px; }

/* ✅ Circles (stay visible) */
.circle{
  position:absolute;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;

  border: 4px solid rgba(74,168,255,0.92);

/* ===============================
   WRONG TAP FLASH (1.5s feedback)
   =============================== */
.circle.wrong-flash {
  background-color: #ff4d4d !important; /* red/orange */
  box-shadow: 0 0 18px rgba(255, 77, 77, 0.9);
  transform: scale(1.12);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

  /* 🔧 Slightly more “lit” fill so the halo reads on AMOLED */
  background: radial-gradient(circle at 35% 30%, rgba(20,40,70,0.55), rgba(0,0,0,0.45));

  /* ✅ RESTORED: stronger neon halo (tight + wide) + inner shimmer */
  box-shadow:
    inset 0 0 0 1px rgba(180,220,255,0.10),
    0 0 12px rgba(80,160,255,0.55),
    0 0 34px var(--blueGlow);

  color: rgba(233,243,255,0.98);
  font-weight: 1000;

  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* ✅ Nice tactile tap feedback (only when not correct/wrong) */
.circle:active{
  transform: scale(1.03);
  box-shadow:
    inset 0 0 0 1px rgba(180,220,255,0.12),
    0 0 16px rgba(80,160,255,0.70),
    0 0 44px rgba(80,160,255,0.32);
}

/* ✅ Hide NUMBER only (circle remains tappable) */
.circle.noNumber{
  color: transparent;
  text-shadow: none;
}

/* ✅ GREEN reward glow (same vibe as selected buttons) */
.circle.correct{
  border-color: rgba(55,226,110,0.95);
  box-shadow:
    0 0 22px rgba(55,226,110,0.30),
    0 0 52px rgba(55,226,110,0.12);
  transform: scale(1.03);
}

/* ✅ RED feedback glow for wrong tap */
.circle.wrong{
  border-color: rgba(255,69,69,0.95);
  box-shadow:
    0 0 18px rgba(255,69,69,0.22),
    0 0 44px rgba(255,69,69,0.10);
  transform: scale(1.03);
}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 50;
}
.overlay.hidden{ display:none; }

.card{
  width:min(520px, 96vw);
  border-radius: 22px;
  border: 2px solid var(--stroke);
  background: rgba(7,10,16,0.92);
  box-shadow: 0 0 46px rgba(70,160,255,0.18);
  padding: 18px;
}
.cardTitle{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cardText{
  color: var(--muted);
  font-weight: 650;
  margin-bottom: 14px;
}
.cardButtons{
  display:flex;
  gap: 12px;
}


/* ✅ SUCCESS TICK (round complete) */
.successTick{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index: 5;
}

.tickMark{
  width: min(220px, 44vw);
  height: min(220px, 44vw);
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: min(140px, 30vw);
  font-weight: 1000;
  color: rgba(6, 28, 12, 0.95);

  border: 3px solid rgba(55,226,110,0.95);
  background: radial-gradient(circle at 35% 30%, rgba(80,255,160,0.95), rgba(15,120,60,0.95));

  box-shadow:
    0 0 26px rgba(55,226,110,0.35),
    0 0 60px rgba(55,226,110,0.18),
    0 22px 60px rgba(0,0,0,0.55);

  transform: scale(0.35);
  opacity: 0;
  animation: tickPop 1000ms ease forwards;
}

@keyframes tickPop{
  0%   { transform: scale(0.35); opacity: 0; filter: blur(0.4px); }
  30%  { transform: scale(1.08); opacity: 1; filter: blur(0px); }
  70%  { transform: scale(1.00); opacity: 1; }
  100% { transform: scale(0.96); opacity: 0; }
}





/* Center the two mode pills side-by-side (only inside Pick Mode) */
#panel .btnCol {
  display: flex;
  justify-content: center;
  gap: 14px;
}

#panel .btnCol { flex-wrap: wrap; }

.circle.ghost-wrong{
  border-color: rgba(255,200,0,0.95);
  box-shadow:
    0 0 14px rgba(255,200,0,0.35),
    0 0 34px rgba(255,200,0,0.18);
  background: radial-gradient(
    circle at 35% 30%,
    rgba(255,210,120,0.35),
    rgba(0,0,0,0.45)
  );
}


/* ===============================
   STUDY COUNTDOWN (MEDIUM / HARD)
   =============================== */
.study-countdown {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 48px;
  font-weight: 800;
  color: #ff3b3b;
  text-shadow: 0 0 12px rgba(255, 59, 59, 0.8);
  z-index: 50;
  pointer-events: none;
  user-select: none;
}

/* 📱 MOBILE FONT TUNING ONLY */
@media (max-width: 480px) {

  /* Top-left pill: MONKEY MEMORY */
  .pill {
    font-size: 0.78rem;   /* smaller on mobile */
    letter-spacing: 0.07em;
  }

  /* Top-right score number */
  .score {
    font-size: 12px;
  }
}