/* ============================================================
   NEET ARCADE — styles for the hub + Code Blue, Cell Defense, DNA Lab.
   Immersive dark clinical/lab theme. Loaded after the other game CSS.
   ============================================================ */
.na-overlay {
  position: fixed; inset: 0; z-index: 9000; overflow: hidden; color: #fff;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(124,99,255,0.20), transparent 60%),
    radial-gradient(100% 80% at 10% 110%, rgba(34,197,94,0.10), transparent 55%),
    linear-gradient(180deg, #0f1226 0%, #080a1a 100%);
  -webkit-tap-highlight-color: transparent;
}
.na-overlay.hidden { display: none; }
.na-particles { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
/* full-screen feedback flashes */
.na-overlay.na-fg::after, .na-overlay.na-fr::after { content: ''; position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.na-overlay.na-fg::after { animation: naFg .42s ease-out; }
.na-overlay.na-fr::after { animation: naFr .42s ease-out; }
@keyframes naFg { 0%{background:radial-gradient(circle,rgba(52,211,153,.28),transparent 60%)} 100%{background:transparent} }
@keyframes naFr { 0%{background:rgba(239,68,68,.22)} 100%{background:transparent} }
body.na-open { overflow: hidden; }

.na-screen { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 10; }
.na-screen.hidden { display: none; }
.na-overlay.critical .na-screen { animation: naCrit 1s infinite; }
@keyframes naCrit { 50% { box-shadow: inset 0 0 90px rgba(239,68,68,.25); } }

/* Top bars */
.na-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 14px)); }
.na-logo { font-size: 17px; } .na-logo b { font-weight: 800; }
.na-x { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
.na-x.sm { width: 34px; height: 34px; font-size: 15px; }
.na-x:hover { background: rgba(255,255,255,.14); }
.na-hud { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top, 12px)); }
.na-shift { margin-left: auto; font-size: 13px; font-weight: 700; color: #c7c2e8; letter-spacing: .04em; }
.na-shift b { color: #fff; font-size: 16px; }
.na-lives { display: flex; gap: 3px; font-size: 16px; }
.na-ring { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(#8b5cf6 100%, rgba(255,255,255,.14) 0); }
.na-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #0d1024; }
.na-ring span { position: relative; z-index: 1; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }

/* ── HUB ── */
.na-hub-body { flex: 1; overflow-y: auto; padding: 6px 20px 30px; max-width: 760px; margin: 0 auto; width: 100%; }
.na-h1 { font-family: 'Lora', Georgia, serif; font-size: clamp(28px,6vw,42px); font-weight: 700; margin: 6px 0 8px; line-height: 1.1; }
.na-h1 span { font-style: italic; background: linear-gradient(120deg,#c4b5fd,#34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.na-lead { color: #c7c2e8; font-size: 15px; line-height: 1.55; margin: 0 0 22px; max-width: 560px; }
.na-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; }
.na-game {
  --g: #7b63ff; position: relative; overflow: hidden; cursor: pointer; text-align: left; color: #fff; border-radius: 20px; padding: 18px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--g) 40%, #14122e), #14122e);
  border: 1px solid color-mix(in srgb, var(--g) 45%, transparent);
  box-shadow: 0 16px 34px -16px var(--g); transition: transform .14s, box-shadow .2s; min-height: 150px; display: flex; flex-direction: column;
}
.na-game:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -16px var(--g); }
.na-game-ico { font-size: 38px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); margin-bottom: 10px; }
.na-game b { font-family: 'Lora', Georgia, serif; font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.na-game span { font-size: 12.5px; color: rgba(255,255,255,.85); line-height: 1.45; }
.na-who { margin-top: 22px; font-size: 12.5px; line-height: 1.55; color: #b9b3dc; background: rgba(124,99,255,.10); border: 1px solid rgba(124,99,255,.22); border-radius: 12px; padding: 11px 14px; }
.na-who b { color: #e7e3ff; }

/* ── Shared question panel ── */
.na-qpanel { padding: 12px 18px max(18px, env(safe-area-inset-bottom, 18px)); max-width: 720px; margin: 0 auto; width: 100%; }
.na-topic { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c4b5fd; background: rgba(124,99,255,.16); border: 1px solid rgba(124,99,255,.4); padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }
.na-q { font-size: clamp(15px,2.6vw,19px); font-weight: 700; line-height: 1.32; margin-bottom: 12px; }
.na-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .na-choices { grid-template-columns: 1fr; } }
.na-choice {
  position: relative; display: flex; align-items: center; gap: 11px; cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border: 1.5px solid rgba(255,255,255,.16); border-radius: 14px; padding: 12px 13px; font-size: 14px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 4px 0 rgba(0,0,0,.28); transition: transform .08s, border-color .15s, background .15s, box-shadow .08s; min-height: 54px;
}
.na-choice:hover { transform: translateY(-2px); border-color: #7b63ff; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); }
.na-choice:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.na-key { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; background: rgba(124,99,255,.7); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.na-choice > span { flex: 1; }
.na-choice.done { pointer-events: none; }
.na-choice.correct { border-color: #34d399; background: linear-gradient(180deg, rgba(52,211,153,.32), rgba(52,211,153,.12)); box-shadow: 0 4px 0 rgba(16,120,90,.55); }
.na-choice.correct .na-key { background: #10b981; }
.na-choice.wrong { border-color: #fb7185; background: linear-gradient(180deg, rgba(251,113,133,.30), rgba(251,113,133,.1)); animation: naWrong .4s; }
.na-choice.wrong .na-key { background: #f43f5e; }
.na-choice.reveal { border-color: #34d399; background: linear-gradient(180deg, rgba(52,211,153,.22), rgba(52,211,153,.08)); }
.na-choice.reveal .na-key { background: #10b981; }
@keyframes naWrong { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ── CODE BLUE ── */
.cb-monitor { flex: 1; min-height: 0; margin: 0 16px 6px; border-radius: 18px; background: linear-gradient(180deg, rgba(10,30,24,0.85), rgba(6,12,20,0.92)); border: 1px solid rgba(52,211,153,0.22); padding: 12px; display: flex; flex-direction: column; box-shadow: inset 0 0 40px rgba(0,0,0,.4); }
.cb-monitor-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 13px; font-weight: 700; color: #6ee7b7; font-variant-numeric: tabular-nums; }
.cb-hr b { color: #fff; font-size: 18px; }
.cb-alarm { margin-left: auto; color: #ff6b6b; font-weight: 800; letter-spacing: .05em; opacity: 0; transition: opacity .2s; }
.na-overlay.critical .cb-alarm { animation: naBlink .9s steps(1) infinite; }
@keyframes naBlink { 50% { opacity: .25; } }
.cb-ecg { flex: 1; min-height: 120px; width: 100%; display: block; margin: 8px 0; }
.cb-stab { height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.cb-stab-bar { height: 100%; width: 42%; border-radius: 999px; transition: width .25s, background .25s; }
.cb-case { margin-top: 8px; font-size: 13px; color: #c7c2e8; font-weight: 600; }

/* ── CELL DEFENSE ── */
.cd-hpwrap { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.cd-hp { width: 120px; height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.cd-hp-bar { height: 100%; width: 100%; background: #22c55e; transition: width .2s, background .2s; }
.cd-field { flex: 1; min-height: 0; width: 100%; display: block; }

/* ── DNA LAB ── */
.dl-helix { flex: 1; min-height: 0; width: 100%; display: block; }

/* ── Results ── */
.na-results { align-items: center; justify-content: center; padding: 24px; }
.na-res-card { width: 100%; max-width: 400px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 28px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.5); animation: naRise .5s ease; }
@keyframes naRise { 0%{opacity:0; transform:translateY(18px) scale(.96)} 100%{opacity:1; transform:none} }
.na-res-emo { font-size: 46px; line-height: 1; }
.na-res-title { font-size: 19px; font-weight: 800; margin-top: 6px; }
.na-res-score { font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 66px; line-height: 1; margin: 4px 0; background: linear-gradient(120deg,#c4b5fd,#34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.na-res-best { font-size: 12.5px; color: #b9b3dc; margin-bottom: 20px; }
.na-res-btns { display: flex; flex-direction: column; gap: 10px; }
.na-btn { cursor: pointer; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 700; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); transition: background .15s, transform .1s; }
.na-btn:hover { background: rgba(255,255,255,.14); } .na-btn:active { transform: scale(.98); }
.na-btn-primary { background: linear-gradient(135deg,#16a34a,#22c55e); border: none; box-shadow: 0 12px 26px -10px rgba(34,197,94,.7); }
.na-btn-ghost { background: transparent; color: #b9b3dc; }

/* ── Launcher card on the galaxy home ── */
.na-launch {
  position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left; overflow: hidden;
  width: calc(100% - 40px); max-width: 1100px; margin: 0 auto 18px; padding: 16px 18px;
  border-radius: 20px; color: #fff; border: 1px solid rgba(34,197,94,.35);
  background: linear-gradient(120deg, #0e7a4f 0%, #16a34a 52%, #2dd4bf 100%);
  box-shadow: 0 18px 36px -16px rgba(16,163,74,.7); transition: transform .14s, box-shadow .2s;
}
.na-launch:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -16px rgba(16,163,74,.8); }
.na-launch-glow { position: absolute; top: -60%; right: -10%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.32), transparent 65%); pointer-events: none; animation: naGlow 4s ease-in-out infinite; }
@keyframes naGlow { 50% { transform: translateX(-30px) scale(1.1); opacity: .8; } }
.na-launch-ico { font-size: 32px; width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.na-launch-txt { flex: 1; min-width: 0; }
.na-launch-txt b { display: block; font-family: 'Lora', Georgia, serif; font-size: 20px; font-weight: 700; }
.na-launch-txt span { font-size: 12.5px; color: rgba(255,255,255,.9); }
.na-launch-cta { flex-shrink: 0; font-weight: 800; font-size: 13px; letter-spacing: .06em; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); padding: 9px 14px; border-radius: 999px; }
@media (max-width: 560px) { .na-launch-txt b { font-size: 17px; } .na-launch-cta { display: none; } }