/* ============================================================
   PhishMind v5.0 — Anime / Toy Style UI
   Neon colours · bouncy animations · roaming mascot character
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Design Tokens ──────────────────────────────────── */
:root{
  --bg:#06091e;
  --surface:#0c1235;
  --card:#101840;
  --card-2:#141e4a;
  --border:rgba(130,170,255,0.15);
  --text:#eef3ff;
  --muted:#8aa0d0;
  --faint:#2e4070;

  /* Neon palette */
  --neon-blue:#4d9fff;
  --neon-purple:#b060ff;
  --neon-pink:#ff50c8;
  --neon-cyan:#00e5ff;
  --neon-green:#30ff90;
  --neon-yellow:#ffe530;
  --neon-orange:#ff8030;

  --accent:var(--neon-blue);
  --accent-dim:rgba(77,159,255,0.14);
  --accent-glow:rgba(77,159,255,0.35);
  --accent-2:var(--neon-green);
  --accent-2-dim:rgba(48,255,144,0.13);
  --purple:var(--neon-purple);
  --purple-dim:rgba(176,96,255,0.13);
  --cyan:var(--neon-cyan);
  --cyan-dim:rgba(0,229,255,0.12);
  --danger:#ff4d6e;
  --danger-dim:rgba(255,77,110,0.14);
  --warning:#ffb830;
  --warning-dim:rgba(255,184,48,0.14);
  --hard:var(--danger);
  --medium:var(--neon-blue);
  --easy:var(--neon-green);

  --radius:22px;
  --radius-sm:14px;
  --shadow-lg:0 24px 70px rgba(0,0,0,0.6);
  --shadow-md:0 14px 36px rgba(0,0,0,0.45);
}

/* ── Keyframes ──────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.4) translateY(20px)}60%{transform:scale(1.08)}80%{transform:scale(0.97)}100%{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes wiggle{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-8deg)}60%{transform:rotate(8deg)}}
@keyframes pulseGlow{0%,100%{filter:drop-shadow(0 0 8px var(--accent-glow))}50%{filter:drop-shadow(0 0 26px rgba(77,159,255,0.7)) drop-shadow(0 0 50px rgba(176,96,255,0.4))}}
@keyframes shimmerText{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breatheDot{0%,100%{box-shadow:0 0 8px var(--neon-blue)}50%{box-shadow:0 0 22px var(--neon-blue),0 0 40px var(--neon-purple)}}
@keyframes slideChoice{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes timerRing{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes resultIn{from{opacity:0;transform:translateY(18px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes scanLine{0%{transform:translateY(-100%);opacity:0}10%{opacity:0.5}90%{opacity:0.5}100%{transform:translateY(100vh);opacity:0}}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}100%{opacity:0;transform:translateY(100vh) rotate(720deg) scale(0.5)}}
@keyframes starPop{0%{opacity:0;transform:scale(0) translateY(0)}40%{opacity:1;transform:scale(1.2) translateY(-20px)}100%{opacity:0;transform:scale(0.8) translateY(-60px)}}
@keyframes mascotWalk{
  0%   {left:-120px;transform:scaleX(1)}
  45%  {left:calc(100vw - 120px);transform:scaleX(1)}
  50%  {left:calc(100vw - 120px);transform:scaleX(-1)}
  95%  {left:-120px;transform:scaleX(-1)}
  100% {left:-120px;transform:scaleX(1)}
}
@keyframes mascotBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes tailWag{0%,100%{transform:rotate(0deg) translateX(0)}50%{transform:rotate(20deg) translateX(3px)}}
@keyframes bubblePop{0%{opacity:0;transform:scale(0.5) translateY(8px)}70%{transform:scale(1.04) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes eyeBlink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(0.1)}}
@keyframes cardShine{0%{left:-80%}100%{left:140%}}

/* ── Base ───────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:
    radial-gradient(ellipse 90% 60% at 15% -15%,rgba(77,159,255,0.15) 0%,transparent 55%),
    radial-gradient(ellipse 70% 55% at 88% 110%,rgba(176,96,255,0.12) 0%,transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%,rgba(0,229,255,0.05) 0%,transparent 50%),
    var(--bg);
  color:var(--text);min-height:100vh;font-size:16px;line-height:1.65;overflow-x:hidden;
}

/* Ambient scan line */
body::before{
  content:'';position:fixed;inset:0;height:2px;pointer-events:none;z-index:0;
  background:linear-gradient(transparent 0%,rgba(77,159,255,0.05) 50%,transparent 100%);
  animation:scanLine 9s linear infinite;
}

#bg-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.7}

/* ── Confetti Container ────────────────────────────── */
#confetti-zone{position:fixed;inset:0;pointer-events:none;z-index:9900;overflow:hidden}
.conf-piece{
  position:absolute;top:-20px;
  width:10px;height:10px;border-radius:2px;
  animation:confettiFall 2.5s ease-in forwards;
}
.star-pop{
  position:fixed;pointer-events:none;z-index:9901;
  font-size:1.6rem;animation:starPop 0.9s ease-out forwards;
}

/* ── Mascot Character ──────────────────────────────── */
#mascot{
  position:fixed;bottom:0;z-index:8000;pointer-events:none;
  animation:mascotWalk 32s linear infinite;
  width:100px;
}
.mascot-inner{animation:mascotBounce 0.55s ease-in-out infinite}
.mascot-svg{display:block;filter:drop-shadow(0 4px 18px rgba(77,159,255,0.55))}

/* Tail animation */
.mascot-tail{transform-origin:18px 62px;animation:tailWag 0.8s ease-in-out infinite}

/* Speech bubble */
.mascot-bubble{
  position:absolute;bottom:105px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#1a3060,#0d1a40);
  border:2px solid var(--neon-cyan);border-radius:16px;
  padding:8px 14px;white-space:nowrap;
  font-size:0.78rem;font-weight:700;color:var(--neon-cyan);
  font-family:'Space Mono',monospace;letter-spacing:0.03em;
  box-shadow:0 4px 22px rgba(0,229,255,0.28);
  min-width:160px;text-align:center;
  opacity:0;transition:opacity 0.3s;
}
.mascot-bubble.show{opacity:1;animation:bubblePop 0.35s cubic-bezier(0.22,1,0.36,1) both}
.mascot-bubble::after{
  content:'';position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--neon-cyan);
}

/* ── Loading Overlay ───────────────────────────────── */
#loading-overlay{
  position:fixed;inset:0;z-index:9200;
  background:rgba(6,9,30,0.92);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
}
#loading-overlay.hidden{display:none}
.loading-card{
  background:linear-gradient(145deg,var(--card),var(--card-2));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:44px 56px;text-align:center;
  box-shadow:var(--shadow-lg),0 0 50px rgba(77,159,255,0.1);
  animation:bounceIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.loading-dots{display:flex;gap:10px;justify-content:center;margin:16px 0 12px}
.loading-dots span{
  width:13px;height:13px;border-radius:50%;
  animation:float 0.75s ease-in-out infinite;
}
.loading-dots span:nth-child(1){background:var(--neon-blue);animation-delay:0}
.loading-dots span:nth-child(2){background:var(--neon-purple);animation-delay:0.15s}
.loading-dots span:nth-child(3){background:var(--neon-cyan);animation-delay:0.3s}
.loading-text{font-family:'Space Mono',monospace;font-size:0.85rem;color:var(--muted);letter-spacing:0.06em}

/* ── Screen transitions ─────────────────────────────── */
.screen{display:none}
.screen.active{display:block;animation:fadeUp 0.42s cubic-bezier(0.22,1,0.36,1) both}
#app{position:relative;z-index:1;min-height:100vh;padding:24px 20px 80px}

/* ── Card ───────────────────────────────────────────── */
.card{
  max-width:980px;margin:0 auto;
  background:linear-gradient(145deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:38px 42px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg),0 0 70px rgba(77,159,255,0.04);
}
/* Top rainbow accent bar */
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3.5px;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple),var(--neon-pink),var(--neon-cyan),var(--neon-green));
  background-size:200% auto;animation:gradientFlow 4s linear infinite;
  border-radius:var(--radius) var(--radius) 0 0;
}
/* Card shimmer sweep on hover */
.card::after{
  content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.04) 50%,transparent 60%);
  transition:none;pointer-events:none;
}
.card:hover::after{animation:cardShine 0.7s ease forwards}

/* ── Welcome Screen ─────────────────────────────────── */
.welcome-inner{
  max-width:700px;margin:60px auto 0;text-align:center;
  animation:fadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
.logo-mark{
  display:inline-flex;margin-bottom:18px;
  animation:float 3.5s ease-in-out infinite,pulseGlow 3s ease-in-out infinite;
}
.logo-text{
  font-family:'Space Mono',monospace;
  font-size:clamp(2.8rem,7vw,4.5rem);
  font-weight:700;letter-spacing:-0.04em;line-height:1;margin-bottom:12px;
  background:linear-gradient(90deg,
    var(--neon-blue) 0%,var(--neon-purple) 25%,
    var(--neon-pink) 50%,var(--neon-cyan) 75%,var(--neon-blue) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmerText 4s linear infinite;
}
.welcome-tag{
  font-family:'Space Mono',monospace;font-size:0.8rem;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--neon-cyan);margin-bottom:14px;opacity:0.9;
}
.welcome-desc{color:var(--muted);font-size:1.04rem;line-height:1.78;max-width:600px;margin:0 auto 24px}

/* Level badges row */
.level-badges-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.lvl-badge{
  border-radius:12px;padding:7px 13px;font-size:0.77rem;
  font-weight:700;font-family:'Space Mono',monospace;
  text-align:center;line-height:1.4;
  transition:transform 0.2s,box-shadow 0.2s;cursor:default;
}
.lvl-badge:hover{transform:translateY(-4px) scale(1.06)}
.lvl-badge small{display:block;font-size:0.64rem;font-weight:400;opacity:0.75;margin-top:2px}
.lv1{background:rgba(48,255,144,0.12);color:var(--neon-green);border:1px solid rgba(48,255,144,0.25)}
.lv2{background:rgba(0,229,255,0.1);color:var(--neon-cyan);border:1px solid rgba(0,229,255,0.2)}
.lv3{background:rgba(77,159,255,0.12);color:var(--neon-blue);border:1px solid rgba(77,159,255,0.22)}
.lv4{background:rgba(255,184,48,0.1);color:var(--neon-yellow);border:1px solid rgba(255,184,48,0.22)}
.lv5{background:rgba(255,77,110,0.12);color:var(--danger);border:1px solid rgba(255,77,110,0.22)}

.welcome-pills{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.tag-pill{
  border-radius:999px;padding:6px 16px;font-size:0.82rem;font-weight:700;
  font-family:'Space Mono',monospace;
  transition:transform 0.2s,box-shadow 0.2s;cursor:default;
}
.tag-pill:hover{transform:translateY(-3px) scale(1.05)}
.tag-pill:nth-child(1){background:var(--accent-dim);color:var(--neon-blue);border:1px solid rgba(77,159,255,0.28);box-shadow:0 0 12px rgba(77,159,255,0.12)}
.tag-pill:nth-child(2){background:var(--purple-dim);color:var(--neon-purple);border:1px solid rgba(176,96,255,0.28);box-shadow:0 0 12px rgba(176,96,255,0.12)}
.tag-pill:nth-child(3){background:var(--cyan-dim);color:var(--neon-cyan);border:1px solid rgba(0,229,255,0.22);box-shadow:0 0 12px rgba(0,229,255,0.1)}
.tag-pill:nth-child(4){background:var(--accent-2-dim);color:var(--neon-green);border:1px solid rgba(48,255,144,0.22);box-shadow:0 0 12px rgba(48,255,144,0.1)}

/* ── Buttons ────────────────────────────────────────── */
button{border:none;border-radius:var(--radius-sm);padding:13px 20px;font-size:0.97rem;font-weight:700;font-family:'DM Sans',sans-serif;cursor:pointer;transition:transform 0.14s,box-shadow 0.18s}
button:active{transform:scale(0.95)!important}

.cta-btn{
  display:inline-flex;align-items:center;gap:10px;color:#fff;
  padding:16px 32px;border-radius:var(--radius-sm);font-size:1rem;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1a5fff,#8030ff,#ff30b0,#00b8ff,#1a5fff);
  background-size:300% auto;animation:gradientFlow 5s linear infinite;
  box-shadow:0 6px 30px rgba(77,159,255,0.38),0 2px 8px rgba(0,0,0,0.3);
}
.cta-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 42px rgba(77,159,255,0.55)}

.secondary-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.07);color:var(--text);border:1px solid var(--border)}
.secondary-btn:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px)}

/* ── Mode Select ────────────────────────────────────── */
.mode-card{margin-top:36px}
.card-header{margin-bottom:28px}
.card-header h2{
  font-family:'Space Mono',monospace;font-size:1.65rem;margin-bottom:8px;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.subtitle{color:var(--muted);font-size:0.97rem}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:10px}

.mode-btn{
  position:relative;color:var(--text);border-radius:var(--radius);
  min-height:240px;text-align:left;padding:24px;
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(145deg,var(--card-2),var(--card));
  border:2px solid var(--border);overflow:hidden;
  transition:transform 0.22s,border-color 0.22s,box-shadow 0.22s;
}
.mode-btn::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.3s;pointer-events:none;background:linear-gradient(135deg,rgba(77,159,255,0.1),transparent 60%)}
.mode-btn:hover{transform:translateY(-6px) scale(1.02)}
.mode-btn:hover::before{opacity:1}
.mode-btn[data-mode="it"]:hover   {border-color:rgba(255,77,110,0.5);box-shadow:0 18px 54px rgba(255,77,110,0.14),0 0 30px rgba(255,77,110,0.08)}
.mode-btn[data-mode="general"]:hover{border-color:rgba(77,159,255,0.5);box-shadow:0 18px 54px rgba(77,159,255,0.14),0 0 30px rgba(77,159,255,0.08)}
.mode-btn[data-mode="older"]:hover {border-color:rgba(48,255,144,0.5);box-shadow:0 18px 54px rgba(48,255,144,0.11),0 0 30px rgba(48,255,144,0.07)}

.mode-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.22s}
.mode-btn:hover .mode-icon{transform:scale(1.12) rotate(-5deg)}
.mode-icon--it {background:rgba(255,77,110,0.15);color:var(--danger);box-shadow:0 0 18px rgba(255,77,110,0.15)}
.mode-icon--gen{background:var(--accent-dim);color:var(--neon-blue);box-shadow:0 0 18px rgba(77,159,255,0.12)}
.mode-icon--old{background:var(--accent-2-dim);color:var(--neon-green);box-shadow:0 0 18px rgba(48,255,144,0.1)}

.mode-title{display:block;font-family:'Space Mono',monospace;font-size:0.96rem;font-weight:700;color:var(--text)}
.mode-stars{font-size:0.75rem;color:var(--neon-yellow);letter-spacing:2px}
.mode-text{display:block;font-size:0.86rem;color:var(--muted);line-height:1.6;flex:1}
.mode-level{display:inline-block;font-size:0.73rem;font-weight:700;font-family:'Space Mono',monospace;padding:4px 13px;border-radius:999px;align-self:flex-start}
.mode-level.hard  {background:rgba(255,77,110,0.14);color:var(--danger);border:1px solid rgba(255,77,110,0.28);box-shadow:0 0 10px rgba(255,77,110,0.12)}
.mode-level.medium{background:var(--accent-dim);color:var(--neon-blue);border:1px solid rgba(77,159,255,0.28);box-shadow:0 0 10px rgba(77,159,255,0.1)}
.mode-level.easy  {background:var(--accent-2-dim);color:var(--neon-green);border:1px solid rgba(48,255,144,0.28);box-shadow:0 0 10px rgba(48,255,144,0.08)}

.actions-row{margin-top:24px;display:flex;gap:12px;justify-content:flex-end}
.actions-row.centered{justify-content:center}

/* ── Game Topbar ─────────────────────────────────────── */
.game-topbar{
  max-width:1200px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,var(--card),var(--card-2));
  border:1px solid var(--border);border-radius:18px;padding:12px 22px;
  box-shadow:var(--shadow-md);
}
.topbar-left{display:flex;align-items:center;gap:14px}
.topbar-logo{
  font-family:'Space Mono',monospace;font-weight:700;font-size:1rem;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.topbar-badge{
  background:var(--accent-dim);color:var(--neon-blue);
  border-radius:999px;padding:3px 14px;font-size:0.79rem;font-weight:700;
  border:1px solid rgba(77,159,255,0.25);box-shadow:0 0 10px rgba(77,159,255,0.1);
}
.progress-wrap{display:flex;align-items:center;gap:12px}
.progress-steps{display:flex;gap:7px}
.progress-dot{
  width:12px;height:12px;border-radius:50%;
  background:rgba(77,159,255,0.1);border:2px solid rgba(77,159,255,0.2);
  transition:all 0.3s;
}
.progress-dot.done{background:var(--neon-green);border-color:var(--neon-green);box-shadow:0 0 10px rgba(48,255,144,0.55)}
.progress-dot.current{background:var(--neon-blue);border-color:var(--neon-blue);animation:breatheDot 1.5s ease-in-out infinite}
.level-label{font-family:'Space Mono',monospace;font-size:0.78rem;color:var(--muted)}

/* XP / score bar */
.xp-bar-outer{
  max-width:1200px;margin:0 auto 14px;
  display:flex;align-items:center;gap:12px;padding:0 4px;
}
.xp-bar-track{flex:1;height:7px;background:rgba(255,255,255,0.07);border-radius:999px;overflow:hidden}
.xp-bar-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple),var(--neon-pink));
  background-size:200% auto;animation:gradientFlow 3s linear infinite;
  transition:width 0.8s cubic-bezier(0.22,1,0.36,1);
}
.xp-label{font-family:'Space Mono',monospace;font-size:0.72rem;color:var(--neon-purple);white-space:nowrap}

/* ── Game Layout ─────────────────────────────────────── */
.game-layout{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
.scenario-card,.info-card{
  background:linear-gradient(145deg,var(--card),var(--card-2));
  border:1px solid var(--border);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow-md),0 0 50px rgba(77,159,255,0.04);
  position:relative;overflow:hidden;
}
.scenario-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple),var(--neon-pink));
  background-size:200% auto;animation:gradientFlow 3s linear infinite;
}

.scenario-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pill{
  display:inline-flex;align-items:center;background:var(--accent-dim);color:var(--neon-blue);
  padding:5px 16px;border-radius:999px;font-size:0.81rem;font-weight:700;
  font-family:'Space Mono',monospace;border:1px solid rgba(77,159,255,0.24);
  box-shadow:0 0 12px rgba(77,159,255,0.14);
}

/* Timer ring */
.timer-wrap{position:relative;width:54px;height:54px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.timer-svg{position:absolute;inset:0;width:100%;height:100%}
.timer-track{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:4}
.timer-fill{fill:none;stroke:var(--neon-green);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset 0.95s linear,stroke 0.4s ease}
.timer-num{font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;color:var(--neon-green);z-index:1;transition:color 0.4s}
.timer-wrap.urgent .timer-fill{animation:timerRing 0.6s ease-in-out infinite}
.timer-wrap.urgent .timer-num{animation:timerRing 0.6s ease-in-out infinite}

/* Level chip */
.level-chip{
  display:inline-flex;align-items:center;
  font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;
  color:var(--neon-purple);background:var(--purple-dim);
  border:1px solid rgba(176,96,255,0.24);border-radius:999px;
  padding:3px 12px;margin-bottom:12px;box-shadow:0 0 10px rgba(176,96,255,0.1);
}

#scenario-title{font-family:'Space Mono',monospace;font-size:1.22rem;color:var(--text);margin-bottom:16px;line-height:1.35}

#scenario-box{
  background:rgba(255,255,255,0.024);border:1px solid var(--border);
  border-left:3px solid var(--neon-blue);border-radius:var(--radius-sm);
  padding:20px 22px;line-height:1.82;color:#cddeff;white-space:pre-line;
  font-size:0.95rem;margin-bottom:24px;
  box-shadow:inset 0 0 30px rgba(77,159,255,0.025);
}

.question-heading{display:flex;align-items:center;gap:8px;font-size:0.9rem;color:var(--muted);margin-bottom:14px;font-weight:600}

#choices{display:grid;gap:10px}
.choice-btn{
  display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,0.035);color:var(--text);
  text-align:left;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 18px;font-size:0.93rem;font-weight:500;line-height:1.5;
  transition:background 0.18s,border-color 0.18s,transform 0.14s,box-shadow 0.18s;
  animation:slideChoice 0.3s ease both;
}
.choice-btn:nth-child(1){animation-delay:0.04s}
.choice-btn:nth-child(2){animation-delay:0.09s}
.choice-btn:nth-child(3){animation-delay:0.14s}
.choice-btn:nth-child(4){animation-delay:0.19s}
.choice-btn:hover{
  background:var(--accent-dim);border-color:rgba(77,159,255,0.45);
  transform:translateX(6px);
  box-shadow:-3px 0 0 var(--neon-blue),0 0 20px rgba(77,159,255,0.08);
}
.choice-label{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;background:var(--accent-dim);color:var(--neon-blue);
  border-radius:8px;font-family:'Space Mono',monospace;font-size:0.8rem;font-weight:700;
  flex-shrink:0;margin-top:1px;transition:background 0.18s,box-shadow 0.18s;
  border:1px solid rgba(77,159,255,0.22);
}
.choice-btn:hover .choice-label{background:rgba(77,159,255,0.28);box-shadow:0 0 10px rgba(77,159,255,0.3)}
.choice-text{flex:1}

/* ── Info Card ───────────────────────────────────────── */
.byte-mini-wrap{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.byte-mini-wrap span{font-family:'Space Mono',monospace;font-size:0.72rem;color:var(--neon-cyan);font-weight:700}
.info-card h3{font-family:'Space Mono',monospace;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--neon-cyan);margin-bottom:16px}
.info-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.info-list li{display:flex;align-items:center;gap:10px;font-size:0.89rem;color:var(--muted)}
.thinking-levels-box{background:rgba(255,255,255,0.024);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px;margin-bottom:16px}
.thinking-label{font-family:'Space Mono',monospace;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.09em;color:var(--faint);margin-bottom:11px}
.thinking-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.thinking-item{border-radius:10px;padding:8px 10px;font-size:0.78rem;font-weight:700;text-align:center;font-family:'Space Mono',monospace}
.t1{background:rgba(255,77,110,0.14);color:var(--danger);border:1px solid rgba(255,77,110,0.14)}
.t2{background:rgba(255,184,48,0.13);color:var(--warning);border:1px solid rgba(255,184,48,0.14)}
.t3{background:var(--accent-dim);color:var(--neon-blue);border:1px solid rgba(77,159,255,0.14)}
.t4{background:var(--accent-2-dim);color:var(--neon-green);border:1px solid rgba(48,255,144,0.14)}
.principle-guide{background:rgba(255,255,255,0.023);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px}
.principle-text{font-size:0.87rem;color:var(--muted);line-height:1.6;margin-top:8px}

/* ── Reflection Screen ─────────────────────────────── */
.reflection-card{margin-top:38px}
.reflection-text{
  color:#cddeff;line-height:1.78;margin:12px 0 20px;font-size:0.96rem;
  padding:20px 22px;
  background:rgba(255,255,255,0.025);border:1px solid var(--border);
  border-left:3px solid var(--neon-purple);border-radius:var(--radius-sm);
}
.reflection-fields{display:flex;flex-direction:column;gap:20px}
label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:0.9rem;color:#dce7ff;margin-bottom:9px}

select{
  width:100%;background:#080f26;color:var(--text);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 16px;font-size:0.95rem;font-family:'DM Sans',sans-serif;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238aa0d0' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;
  transition:border-color 0.2s,box-shadow 0.2s;
}
select:focus{outline:none;border-color:var(--neon-blue);box-shadow:0 0 0 2.5px var(--accent-dim)}

.confidence-row{display:flex;align-items:center;gap:14px}
.conf-label{font-size:0.79rem;color:var(--faint);white-space:nowrap}
input[type="range"]{
  flex:1;height:5px;-webkit-appearance:none;
  background:rgba(77,159,255,0.15);border-radius:999px;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));
  border:3px solid var(--card);cursor:pointer;
  box-shadow:0 0 12px rgba(77,159,255,0.45);
  transition:box-shadow 0.2s,transform 0.15s;
}
input[type="range"]::-webkit-slider-thumb:hover{box-shadow:0 0 20px rgba(77,159,255,0.7);transform:scale(1.15)}
.confidence-pips{display:flex;justify-content:space-between;padding:0 2px;margin-top:8px}
.pip{font-family:'Space Mono',monospace;font-size:0.73rem;color:var(--faint);transition:color 0.2s,transform 0.2s}
.active-pip{color:var(--neon-blue);font-weight:700;transform:scale(1.15)}

/* ── Result Badges ───────────────────────────────────── */
.result-badge{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;
  padding:7px 18px;border-radius:999px;font-weight:700;font-size:0.84rem;
  font-family:'Space Mono',monospace;animation:resultIn 0.35s ease both;
}
.result-badge.good{background:var(--accent-2-dim);color:var(--neon-green);border:1px solid rgba(48,255,144,0.24);box-shadow:0 0 16px rgba(48,255,144,0.14)}
.result-badge.bad {background:var(--danger-dim);color:var(--danger);border:1px solid rgba(255,77,110,0.24);box-shadow:0 0 16px rgba(255,77,110,0.14)}
.result-badge.neutral{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(255,184,48,0.24);box-shadow:0 0 16px rgba(255,184,48,0.1)}

/* ── Result Screen ───────────────────────────────────── */
.result-card{margin-top:28px}
.result-header{text-align:center;padding-bottom:28px;border-bottom:1px solid var(--border);margin-bottom:28px}
.result-shield{display:inline-flex;margin-bottom:18px;animation:pulseGlow 3s ease-in-out infinite}
.result-header h2{
  font-family:'Space Mono',monospace;font-size:1.65rem;margin-bottom:8px;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Report sections */
#final-report{line-height:1.85}
.report-section{
  background:rgba(255,255,255,0.023);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:22px 24px;margin-bottom:14px;
  animation:resultIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
  position:relative;overflow:hidden;
}
.report-section::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--neon-blue),var(--neon-purple));
  border-radius:0 0 0 var(--radius-sm);
}
.report-section h3{font-family:'Space Mono',monospace;font-size:0.81rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--neon-blue);margin-bottom:14px}
.report-section p{font-size:0.95rem;color:var(--muted);margin-bottom:7px}
.report-section p:last-child{margin-bottom:0}
.report-section strong{color:var(--text);font-weight:700}

/* Score hero */
.score-hero{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;gap:16px;padding:8px 0}
.score-item{text-align:center}
.score-big{
  display:block;font-family:'Space Mono',monospace;font-size:2.4rem;font-weight:700;line-height:1;margin-bottom:6px;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.score-desc{font-size:0.8rem;color:var(--muted)}

/* Thinking badge */
.thinking-badge{
  display:inline-block;padding:9px 24px;border-radius:999px;
  font-family:'Space Mono',monospace;font-weight:700;font-size:1.05rem;margin:6px 0 10px;
  animation:resultIn 0.4s ease both;
}
.thinking-Impulsive {background:rgba(255,77,110,0.17);color:var(--danger);border:1px solid rgba(255,77,110,0.28);box-shadow:0 0 18px rgba(255,77,110,0.12)}
.thinking-Reactive  {background:rgba(255,184,48,0.15);color:var(--warning);border:1px solid rgba(255,184,48,0.28);box-shadow:0 0 18px rgba(255,184,48,0.1)}
.thinking-Analytical{background:var(--accent-dim);color:var(--neon-blue);border:1px solid rgba(77,159,255,0.28);box-shadow:0 0 18px var(--accent-glow)}
.thinking-Critical  {background:var(--accent-2-dim);color:var(--neon-green);border:1px solid rgba(48,255,144,0.28);box-shadow:0 0 18px rgba(48,255,144,0.14)}

/* Vulnerability bars */
.vuln-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vuln-label{width:180px;font-size:0.87rem;color:var(--muted);flex-shrink:0}
.vuln-bar-wrap{flex:1;height:9px;background:rgba(255,255,255,0.07);border-radius:999px;overflow:hidden}
.vuln-bar{height:100%;border-radius:999px;transition:width 1.1s cubic-bezier(0.22,1,0.36,1);width:0}
.vuln-bar.high  {background:linear-gradient(90deg,#dc2626,#f87171);box-shadow:0 0 8px rgba(220,38,38,0.4)}
.vuln-bar.medium{background:linear-gradient(90deg,#d97706,#fbbf24);box-shadow:0 0 8px rgba(217,119,6,0.3)}
.vuln-bar.low   {background:linear-gradient(90deg,#16a34a,var(--neon-green));box-shadow:0 0 8px rgba(48,255,144,0.35)}
.vuln-tag{width:72px;text-align:right;font-family:'Space Mono',monospace;font-size:0.75rem;font-weight:700}
.vuln-tag.high  {color:var(--danger)}
.vuln-tag.medium{color:var(--warning)}
.vuln-tag.low   {color:var(--neon-green)}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:900px){
  .game-layout,.mode-grid{grid-template-columns:1fr}
  .card{padding:24px 20px}
  .welcome-inner{margin-top:44px}
  .result-card,.mode-card,.reflection-card{margin-top:20px}
}
@media(max-width:500px){
  #app{padding:14px 12px 50px}
  .logo-text{font-size:2.2rem}
  .score-hero{gap:12px}
  .score-big{font-size:1.8rem}
  .game-topbar{padding:10px 14px}
}