/* --- NEURALRUN DESIGN SYSTEM v7.1 (Merged Stable) --- */
:root {
    /* Backgrounds */
    --bg-charcoal-deep: #050505;
    --bg-charcoal-light: #141418;
    --bg-purple-ambient: rgba(111, 92, 255, 0.25);
    
    /* Surfaces */
    --surface-card: #121216;
    --surface-modal: #18181f;
    --surface-table-header: #1e1e24;
    --surface-table-row: #0f0f12;
    --surface-table-row-alt: #16161b;
    
    /* Accents */
    --accent-success: #00ff41; /* Matrix Green */
    --accent-creation: #7a5cff; /* Electric Violet */
    --accent-error: #ff0055;    /* Glitch Red */
    --accent-gold: #ffd700;     /* Difficulty High */
    
    /* Teams */
    --team-cyan: #00f3ff;
    --team-red: #ff003c; /* Neon Red */
    
    /* Text */
    --text-main: #e0e0e0;
    --text-dim: #858595;
    
    /* Typography */
    --font-ui: 'Fira Code', monospace;
    --font-body: 'Roboto Mono', monospace;
}

html, body {
    /* Define the look */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
        radial-gradient(circle at 15% 50%, rgba(122, 92, 255, 0.15), 11%, transparent 34%),
        radial-gradient(circle at 85% 30%, rgba(0, 243, 255, 0.1), 11%, transparent 34%),
        linear-gradient(135deg, #050505 0%, #0a0a0e 100%);

    /* Define the movement - Separated to prevent shorthand overrides.
       Grain layer keeps its intrinsic tile size (auto) so it dithers, not stretches. */
    background-size: auto, 200% 200%, 200% 200%, 200% 200% !important;
    background-attachment: fixed !important;
    animation: gradientMove 15s ease infinite !important;
    
    color: var(--text-main);
    font-family: var(--font-body);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}
#neural-run-app {
    width: 100%;
    position: relative;
    padding: 20px 0;
    box-sizing: border-box;
    /* Restored Height Stability */
    min-height: 100vh; 
    overflow-wrap: break-word;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- OVERDRIVE MODE (Non-destructive) --- */
body.overdrive { 
    --accent-success: #00f3ff; 
    /* Use background-image instead of background shorthand to preserve size/animation */
    background-image: linear-gradient(135deg, #1a0005 0%, #050002 100%) !important;
}

/* Layout */
.game-wrapper {
    width: 100%;
    max-width: 800px; 
    margin: 0 auto;
    position: relative;
    z-index: 10;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Surfaces */
.screen {
    background: rgba(24, 24, 31, 0.95);
    backdrop-filter: blur(10px);
    /* Promote to a stable GPU layer — backdrop-filter blur over the animated
       page gradient produced sub-pixel repaint "sparkles" (stray green/gold/
       red pixels sampled from the glowing accent elements). A fixed compositing
       layer removes the per-frame resample noise. */
    transform: translateZ(0);
    backface-visibility: hidden;
    border: 1px solid rgba(122, 92, 255, 0.2);
    border-radius: 6px;
    padding: 2.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    
    /* Robust Hiding */
    display: none !important; 
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    flex-direction: column;
    
    /* Stability */
    width: 100%;
    box-sizing: border-box;
    min-height: 600px; 
    height: auto;
}
}
.screen, .game-wrapper, #neural-run-app {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.screen.active { display: flex !important; opacity: 1; transform: translateY(0); }

/* Game Screen Specific - Top Alignment to prevent jump */
#screen-game { 
    justify-content: flex-start; 
}

/* Typography */
#neural-run-app h1 {
    font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: -1px;
    text-align: center; color: var(--text-main); margin-bottom: 0.5rem; font-size: 2.5rem;
    text-shadow: 0 0 20px rgba(122, 92, 255, 0.3);
}
#neural-run-app h1 span { color: var(--accent-creation); }

.subtitle {
    text-align: center; color: var(--text-dim); font-size: 0.9rem;
    margin-bottom: 2.5rem; font-family: var(--font-ui); letter-spacing: 1px; text-transform: uppercase;
}

/* Host Terminal - FLEXIBLE HEIGHT RESTORED */
.host-terminal {
    background: #000;
    border-left: 3px solid var(--accent-creation);
    padding: 1.5rem; 
    margin-bottom: 2rem;
    font-family: var(--font-ui); 
    color: E0E0E0; 
    font-size: 1.25rem;
    
    /* Expands with content, no scrollbar */
    min-height: 120px; 
    height: auto; 
    overflow: visible; 
    
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center; 
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    
    white-space: pre-wrap; 
    word-wrap: break-word;
    text-align: center;
    line-height: 1.6;
}
.host-terminal::before {
    content: "SYSTEM_HOST::V7.1";
    position: absolute; top: -10px; right: 10px;
    background: var(--surface-modal); padding: 0 8px; font-size: 0.7rem; color: var(--text-dim); border: 1px solid #333;
}
.typing-cursor::after { content: '_'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Timer Bar */
.timer-container {
    width: 100%; height: 6px; background: #2a2a33; margin-bottom: 1rem;
    border-radius: 3px; overflow: hidden; position: relative;
    /* No inset shadow — its dark inner ring rendered as a "black line" under
       the bar (most visible against the light theme's page backdrop). */
}
.timer-bar {
    height: 100%;
    width: 100%;
    background-color: var(--accent-success);
    /* Round the bar to the container's radius. A square fill inside a
       border-radius + overflow:hidden box leaks a 1px green corner pixel on
       subpixel rounding — inheriting the radius clips it cleanly. */
    border-radius: inherit;
    /* FIX: Changed from '1s' to '0.1s' to match the new Javascript Tick Rate */
    transition: width 0.1s linear, background-color 0.5s ease;
}

/* Inputs */
.setup-grid { display: grid; gap: 1.5rem; width: 100%; }

.nr-duel-banner,
.nr-duel-builder {
  border: 1px solid rgba(255, 157, 0, 0.45);
  border-left: 3px solid #ff9d00;
  background: rgba(255, 157, 0, 0.055);
  border-radius: 4px;
}

.nr-duel-banner { padding: 0.85rem 1rem; margin-bottom: 1rem; }
.nr-your-duels { border: 1px solid rgba(0,243,255,0.25); padding: 1rem; }
.nr-your-duels-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--accent-cyan); font: 700 1rem var(--font-ui); text-align: left;
}
.nr-your-duels-head:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; }
.nr-your-duels-title-wrap { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.nr-your-duels-count { color: var(--text-dim); font-size: 0.78rem; font-weight: 400; }
.nr-your-duels-chevron { color: var(--accent-cyan); transition: transform 0.18s ease; }
.nr-your-duels:not(.nr-collapsed) .nr-your-duels-chevron { transform: rotate(90deg); }
.nr-your-duels.nr-collapsed .nr-your-duels-list { display: none; }
.nr-your-duels h2 { margin: 0; color: var(--accent-cyan); font-size: 1rem; }
.nr-your-duels-limit { color: var(--text-dim); font-size: 0.7rem; }
.nr-your-duels-list { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.nr-your-duel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0.7rem; align-items: center; padding: 0.65rem; background: rgba(255,255,255,0.025); }
.nr-your-duel-name { overflow-wrap: anywhere; }
.nr-your-duel-pill { min-width: 2rem; padding: 0.2rem 0.35rem; text-align: center; border: 1px solid #444; font: 700 0.68rem var(--font-ui); }
.nr-your-duel-w { color: var(--accent-success); border-color: var(--accent-success); }
.nr-your-duel-l { color: var(--accent-error); border-color: var(--accent-error); }
.nr-your-duel-d { color: #ff9d00; border-color: #ff9d00; }
.nr-your-duel-open { color: var(--accent-cyan); }
.nr-your-duel-expired { color: var(--text-dim); }
.nr-your-duel-scores { white-space: nowrap; font-family: var(--font-ui); }
.nr-your-duel-actions a,
.nr-your-duel-actions button { border: 0; background: none; color: var(--accent-cyan); cursor: pointer; font: inherit; text-decoration: underline; }
.nr-your-duel-actions a:focus-visible,
.nr-your-duel-actions button:focus-visible,
.nr-duel-rematch:focus-visible,
.nr-duel-modal-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; }
.nr-duels-empty { color: var(--text-dim); margin: 0; font-size: 0.8rem; }
.nr-duel-builder { padding: 1rem; }
.nr-duel-builder-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.nr-duel-builder h2 { margin: 0.2rem 0 0; color: #ff9d00; font-size: 1.15rem; }
.nr-duel-slot-count { color: #ff9d00; font-family: var(--font-ui); }
.nr-duel-asuser { margin: 0.6rem 0 0.9rem; color: var(--text-dim); font-size: 0.82rem; }
.nr-duel-asuser strong { color: var(--accent-cyan); }
.nr-duel-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.85rem; }
.nr-duel-tool {
  padding: 6px 12px; font: 700 0.72rem var(--font-ui); letter-spacing: 0.5px;
  border: 1px solid #ff9d00; background: rgba(255, 157, 0, 0.1); color: #ff9d00;
  cursor: pointer; border-radius: 2px;
}
.nr-duel-tool:hover { background: rgba(255, 157, 0, 0.2); }
.nr-duel-tool:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.nr-duel-slots { display: grid; gap: 0.65rem; }
.nr-duel-slot { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 7rem 2.5rem; gap: 0.6rem; align-items: center; }
.nr-duel-slot-number { color: #858595; font-family: var(--font-ui); font-size: 0.75rem; }
.nr-duel-slot input,
.nr-duel-slot select { min-width: 0; padding: 10px; background: #121216; border: 1px solid #333; color: #fff; }
.nr-duel-remove { min-height: 40px; border: 1px solid #55333d; background: #1a1014; color: #ff6b8a; cursor: pointer; }
.nr-duel-add-slot {
  margin-top: 0.8rem;
  width: 100%;
  padding: 14px;
  min-height: 48px;
  border: 1px dashed rgba(255, 157, 0, 0.55);
  background: rgba(255, 157, 0, 0.06);
  color: #ff9d00;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.nr-duel-add-slot:hover:not(:disabled) {
  background: rgba(255, 157, 0, 0.14);
  box-shadow: 0 0 12px rgba(255, 157, 0, 0.25);
}
.nr-duel-add-slot:disabled { opacity: 0.4; cursor: not-allowed; }
.nr-duel-help { margin: 0.7rem 0 0; color: #858595; font-size: 0.78rem; }
/* System manual swaps content per mode: the duel manual shows only in duel
   chrome; the Infinite Local manual hides there (its powerups/protocols/team
   sections don't apply to duels). */
.nr-duel-manual { display: none; }
body.nr-duel-chrome .nr-duel-manual { display: block; }
body.nr-duel-chrome .nr-manual-local { display: none; }
.nr-duel-invite-row { margin-top: 1rem; }
.nr-duel-invite-btn { width: 100%; padding: 14px; min-height: 48px; }
/* Modal connection-picker (searchable, multi-select). */
.nr-duel-invite-modal-content { text-align: left; max-width: 460px; }
.nr-duel-invite-search {
  width: 100%; box-sizing: border-box; padding: 10px; margin: 0.75rem 0;
  background: #121216; border: 1px solid #333; color: #fff; font-size: 0.9rem;
}
.nr-duel-invite-modal-list { display: grid; gap: 0.3rem; max-height: 50vh; overflow-y: auto; margin-bottom: 1rem; }
.nr-duel-invite-option { display: grid; grid-template-columns: auto 2rem minmax(0,1fr); gap: 0.55rem; align-items: center; padding: 0.45rem; cursor: pointer; border-radius: 3px; }
.nr-duel-invite-option:has(input:checked) { background: rgba(0,243,255,0.1); }
.nr-duel-invite-option:hover { background: rgba(122,92,255,0.08); }
.nr-duel-invite-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: #24242c; color: var(--accent-cyan); font-family: var(--font-ui); }
.nr-duel-invite-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nr-duel-invite-empty { margin: 0.5rem 0; color: var(--text-dim); font-size: 0.82rem; text-align: center; }
/* The invite button belongs to the host's BUILD screen only. In accept mode
   the builder is reused for PYOT topic entry, so hide it there. */
.nr-duel-accept-mode .nr-duel-invite-row { display: none; }
.nr-duel-mode-chooser { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.nr-duel-mode-chooser button { padding: 0.65rem 0.8rem; border: 1px solid #ff9d00; background: rgba(255,157,0,0.08); color: var(--text-main); cursor: pointer; }
.nr-duel-mode-chooser button:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.nr-duel-pyot-builder .nr-duel-slot select:disabled { opacity: 0.65; cursor: not-allowed; }
.nr-duel-accept-mode.nr-duel-pyot-builder .nr-duel-slot .topic-input { pointer-events: auto; opacity: 1; }
.nr-duel-topic-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.8rem 0; }
.nr-duel-topic-lists > div { padding: 0.7rem; background: rgba(255,255,255,0.025); }
.nr-duel-topic-lists p { margin: 0.35rem 0 0; color: var(--text-dim); overflow-wrap: anywhere; }
.nr-duel-build-mode #players-container,
.nr-duel-build-mode .mode-selector,
.nr-duel-build-mode #master-topic-container,
.nr-duel-build-mode #random-reroll-container,
.nr-duel-build-mode #team-toggle-wrapper,
.nr-duel-build-mode #nr-tip-box { display: none !important; }
.nr-duel-build-mode #player-count,
.nr-duel-build-mode #topics-count { pointer-events: none; opacity: 0.45; }
.nr-duel-accept-mode .mode-selector,
.nr-duel-accept-mode #master-topic-container,
.nr-duel-accept-mode #random-reroll-container,
.nr-duel-accept-mode #team-toggle-wrapper,
.nr-duel-accept-mode #nr-tip-box { display: none !important; }
.nr-duel-accept-mode #player-count,
.nr-duel-accept-mode #topics-count,
.nr-duel-accept-mode .topic-input,
.nr-duel-accept-mode .difficulty-select { pointer-events: none; opacity: 0.6; }
.nr-duel-builder button:focus-visible,
.nr-duel-builder input:focus-visible,
.nr-duel-builder select:focus-visible { outline: 2px solid #ff9d00; outline-offset: 2px; }
.nr-duel-share-content { position: relative; text-align: center; }
.nr-duel-share-copy { color: var(--text-dim); margin: 1rem 0; }
.nr-duel-share-content input { width: 100%; box-sizing: border-box; padding: 10px; background: #121216; border: 1px solid #333; color: #fff; text-align: center; }
.nr-duel-share-content .btn-main { margin-top: 1rem; }
.nr-duel-modal-close { background: none; }
.nr-duel-verdict { margin: 1rem 0; text-align: left; border: 1px solid #333; padding: 1rem; }
.nr-duel-verdict-banner { text-align: center; font-family: var(--font-ui); font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem; }
.nr-duel-verdict-win { color: var(--accent-success); }
.nr-duel-verdict-loss { color: var(--accent-error); }
.nr-duel-verdict-draw { color: #ff9d00; }
.nr-duel-totals { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-ui); margin-bottom: 0.8rem; }
.nr-duel-ladder { display: grid; gap: 0.4rem; }
.nr-duel-ladder-row { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 2rem 2rem 2rem; gap: 0.5rem; align-items: center; padding: 0.55rem; background: rgba(255,255,255,0.025); }
.nr-duel-ladder-topic { overflow-wrap: anywhere; }
.nr-duel-ladder-difficulty { color: #ff9d00; font-size: 0.75rem; }
.nr-duel-ladder-mark { text-align: center; }
.nr-duel-challenged { color: #ff9d00; text-align: center; }
.nr-duel-verdict-note { color: var(--text-dim); font-size: 0.78rem; }
.nr-duel-rematch { display: block; margin-top: 1rem; text-align: center; text-decoration: none; }

@media (max-width: 560px) {
  /* One row per slot on mobile: topic + difficulty + delete. The slot
     number column is dropped (the number lives in the topic placeholder). */
  .nr-duel-slot { grid-template-columns: minmax(0, 1fr) 5.2rem 2.4rem; gap: 0.35rem; }
  .nr-duel-slot-number { display: none; }
  .nr-duel-slot select { padding: 10px 4px; font-size: 0.8rem; }
  .nr-duel-ladder-row { grid-template-columns: minmax(0, 1fr) 4.5rem 1.5rem 1.5rem 1.5rem; font-size: 0.78rem; }
  .nr-duel-totals { flex-direction: column; }
  .nr-duel-topic-lists { grid-template-columns: 1fr; }
  .nr-your-duel-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .nr-your-duel-actions { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .nr-duel-builder *,
  .nr-your-duels *,
  .nr-duel-verdict *,
  .nr-duel-share-content * { animation: none !important; transition: none !important; }
}
.input-label {
    display: block; color: var(--accent-creation); font-family: var(--font-ui);
    font-size: 0.75rem; margin-bottom: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
#neural-run-app input[type="text"], #neural-run-app input[type="password"], #neural-run-app select {
    width: 100%; background: var(--surface-card); border: 1px solid #333; color: #fff;
    padding: 14px; border-radius: 2px; font-family: var(--font-body); font-size: 0.95rem;
    box-sizing: border-box; transition: 0.2s border-color;
}
#neural-run-app input:focus, #neural-run-app select:focus { border-color: var(--accent-creation); outline: none; }
select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Topic Input Group (V7.0 Feature) */
.topic-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.topic-input { flex-grow: 1; }
/* Force specific width for difficulty selector to align nicely */
#neural-run-app select.difficulty-select { 
    width: 90px !important; 
    text-align: center;
    padding: 14px 5px; /* Adjust padding for small width */
}

/* Checkbox & Mode Selector */
.checkbox-wrapper { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.checkbox-wrapper input { display: none; }
.checkmark { width: 20px; height: 20px; background: var(--surface-card); border: 1px solid #333; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.checkbox-wrapper input:checked + .checkmark { background: var(--accent-creation); border-color: var(--accent-creation); }
.checkmark::after { content: '✔'; color: #000; font-size: 14px; display: none; }
.checkbox-wrapper input:checked + .checkmark::after { display: block; }

.mode-selector { display: flex; gap: 1rem; width: 100%; }
.mode-option { flex: 1; position: relative; }
.mode-option input { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.mode-card { background: var(--surface-card); border: 1px solid #333; padding: 1rem; text-align: center; cursor: pointer; transition: 0.3s; height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.mode-option input:checked + .mode-card { border-color: var(--accent-creation); background: rgba(122, 92, 255, 0.05); }
.mode-title { font-family: var(--font-ui); font-weight: bold; color: var(--text-main); display: block; margin-bottom: 0.5rem; }
.mode-desc { font-size: 0.75rem; color: var(--text-dim); }

/* Players Container */
#players-container { margin-top: 2rem; display: grid; gap: 1rem; width: 100%; }
@media(min-width: 600px) { #players-container { grid-template-columns: 1fr 1fr; } }
.player-section { border: 1px solid #222; padding: 1rem; background: rgba(255,255,255,0.02); display: none; box-sizing: border-box; }
.player-section.visible { display: block; }

/* HUD */
.hud { display: grid; gap: 1rem; margin-bottom: 2rem; position: relative; width: 100%; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.score-box { background: var(--surface-card); padding: 0.8rem; border-top: 2px solid transparent; text-align: center; position: relative; transition: 0.3s; }
.score-box.active { background: #1e1e24; border-top-color: currentColor; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transform: translateY(-5px); }
.score-val { font-family: var(--font-ui); font-size: 1.5rem; font-weight: 600; display: block; }
.p-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-wins { font-size: 0.6rem; color: var(--accent-success); display: block; margin-top: 4px; }
.team-tag { font-size: 0.6rem; font-weight: bold; padding: 2px 4px; border-radius: 2px; margin-bottom: 4px; display: inline-block; }

/* Team-mode HUD — two team panels replace per-player chips when team mode is on.
   Friends asked for this: when you're playing FOR a team, the team total is
   the headline. Per-player identity is preserved as a small roster line. */
.team-box { padding: 1.2rem 1rem; }
.team-label {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 2px;
    margin-bottom: 0.5rem;
    display: inline-block;
    letter-spacing: 1.5px;
}
.team-box .score-val { font-size: 2.4rem; line-height: 1.1; }
.team-roster {
    color: var(--text-dim);
    font-size: 0.62rem;
    margin-top: 8px;
    line-height: 1.4;
    word-break: break-word;
}
.team-player {
    display: inline-block;
    padding: 1px 4px;
    transition: 0.2s;
    border-radius: 2px;
}
.team-player.active {
    color: var(--text-main);
    background: rgba(255,255,255,0.08);
    font-weight: 600;
}

/* Active team box — brighter border + softer glow so the team whose turn
   it is reads at a glance from across a phone screen. Pairs with the
   YOUR TURN chip injected into the active player's name via pseudo. */
.score-box.team-box.active {
    box-shadow: 0 0 0 1px currentColor inset, 0 8px 24px rgba(0,0,0,0.45);
    transform: none; /* override the solo-mode translateY lift */
}
/* YOUR TURN chip — pinned above the active player/team box. Background
   pulls the player or team color from --nr-player-color (set on each box
   in buildHUD), text overrides to #000 for contrast on bright colors.
   Falls back to brand purple when the custom property isn't set. */
.score-box.active::before {
    content: 'YOUR TURN';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nr-player-color, var(--accent-creation));
    color: #000;
    font-family: var(--font-ui);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    border-radius: 2px;
    box-shadow: 0 0 8px var(--nr-player-color, rgba(122,92,255,0.5));
    white-space: nowrap;
}

/* Tracker & Buttons */
.round-tracker { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-bottom: 2rem; }
.round-bit { width: 6px; height: 6px; background: #333; border-radius: 1px; transition: 0.3s; }
.round-bit.active { background: #fff; box-shadow: 0 0 8px #fff; }
.round-bit.win { background: var(--accent-success); box-shadow: 0 0 8px var(--accent-success); }
.round-bit.loss { background: var(--accent-error); box-shadow: 0 0 8px var(--accent-error); }
/* Sudden Death: purple wins (brand accent) to visually distinguish from
   regular-round wins. Losses stay red (same color as regular). One bit per
   active SD player; total set in buildTracker(). */
.round-bit.round-bit-sd.win {
    background: var(--accent-creation);
    box-shadow: 0 0 8px var(--accent-creation);
}
.round-bit.round-bit-sd.loss {
    background: var(--accent-error);
    box-shadow: 0 0 8px var(--accent-error);
}

/* Source citation — Wikipedia-verified authority treatment. Mirrors the
   NeuralRun Quizzes 'Verified by Wikipedia' badge styling. Appears after the
   answer locks in (revealing the source post-answer keeps the correct
   option from being telegraphed pre-answer). */
.nr-source-cite {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0.7rem auto 0;
    padding: 6px 12px;
    background: rgba(0, 255, 65, 0.06);
    border: 1px solid rgba(0, 255, 65, 0.25);
    border-left: 3px solid var(--accent-success);
    border-radius: 2px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--text-main);
    letter-spacing: 0.3px;
    text-align: left;
    word-break: break-word;
}
.nr-source-cite::before {
    content: '✓ VERIFIED BY WIKIPEDIA';
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent-success);
    letter-spacing: 1.2px;
    padding-right: 8px;
    border-right: 1px solid rgba(0, 255, 65, 0.25);
    white-space: nowrap;
}
.nr-source-cite-text {
    color: var(--text-dim);
    font-size: 0.7rem;
}
/* Non-Wikipedia citations (community guides, reviews, fan sites) keep the
   layout but swap the badge text — the Wikipedia trust claim must never
   appear over a source that isn't Wikipedia. */
.nr-source-cite-web::before {
    content: '✓ SOURCE';
}
@media (max-width: 767px) {
    .nr-source-cite {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 5px 10px;
        font-size: 0.66rem;
    }
    .nr-source-cite::before {
        border-right: none;
        padding-right: 0;
        font-size: 0.55rem;
    }
}

.btn-main { background: linear-gradient(-45deg, var(--accent-creation), #9d4eff, #6f5cff, var(--accent-creation)); background-size: 300% 300%; animation: gradientWave 4s ease infinite; color: #fff; border: none; padding: 16px; width: 100%; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; margin-top: 1.5rem; transition: transform 0.2s, box-shadow 0.2s; border-radius: 2px; position: relative; z-index: 1; }
@keyframes gradientWave { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 5px 25px rgba(122, 92, 255, 0.5); }
.btn-main:active { transform: scale(0.98); }
.btn-secondary { background: transparent; border: 1px solid #333; color: var(--text-dim); }
.btn-secondary:hover { border-color: var(--text-main); color: var(--text-main); }

/* Powerups — bumped to a substantial size so they actually get used.
   Friend feedback: the old 8x12 / 0.7rem chips were invisible at the
   bottom of the screen. Now larger padding, bigger font, brighter
   active state. Mobile uses tighter overrides further down. */
.powerup-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* Own zone between the eyebrow and the timer bar so powerups are fully
       visible every round (previously buried at the bottom of the card).
       Fade-in (opacity 0 -> 1) is applied inline in renderQuestion. */
    margin: 10px 0 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
}
/* Collapse completely when powerups are disabled (empty bar) so it never
   leaves a gap between the eyebrow and the timer. */
.powerup-bar:empty { display: none; padding: 0; margin: 0; border: 0; }
/* Positioning context for the band challenge tooltip. */
.powerup-bar { position: relative; }

/* Band challenge button (Option B): always present in the band, grayed until
   the question is answered wrong/timeout, then armed. */
.btn-challenge-band {
    background: rgba(255, 0, 85, 0.06);
    border: 1px solid rgba(255, 0, 85, 0.35);
    color: var(--accent-error);
    padding: 12px 20px;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn-challenge-band.locked { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-challenge-band.armed { opacity: 1; box-shadow: 0 0 14px rgba(255, 0, 85, 0.28); }
.btn-challenge-band.armed:hover { background: var(--accent-error); color: #fff; }

.nr-band-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 260px;
    background: #16161c;
    border: 1px solid var(--accent-error);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    line-height: 1.4;
    text-align: center;
    padding: 7px 12px;
    border-radius: 5px;
    z-index: 30;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    animation: nrBandTipIn 0.16s ease;
}
@keyframes nrBandTipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.btn-powerup {
    background: rgba(0,0,0,0.3);
    border: 1px solid #444;
    color: var(--text-dim);
    padding: 12px 20px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 130px;
    justify-content: center;
}
.btn-powerup.available {
    border-color: var(--accent-creation);
    color: var(--text-main);
    background: rgba(122, 92, 255, 0.12);
    box-shadow: 0 0 12px rgba(122, 92, 255, 0.2);
}
.btn-powerup:hover.available {
    background: rgba(122, 92, 255, 0.22);
    box-shadow: 0 0 16px rgba(122, 92, 255, 0.35);
    transform: translateY(-1px);
}
.btn-powerup:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-powerup.used { text-decoration: line-through; border-color: #222; color: #444; }

/* Questions & Options */
.question-meta { font-family: var(--font-ui); font-size: 0.7rem; color: var(--accent-creation); text-transform: uppercase; margin-bottom: 1rem; display: block; }
.q-text { font-size: 1.25rem; line-height: 1.6; margin-bottom: 2rem; color: #fff; min-height: 3.2em; }

.options-grid { display: grid; gap: 12px; width: 100%; }
.opt-btn {
    background: var(--surface-card); border: 1px solid #333; padding: 18px; text-align: left;
    color: var(--text-main); font-family: var(--font-body); font-size: 1rem; cursor: pointer;
    transition: all 0.2s; position: relative; opacity: 1;
    word-wrap: break-word; word-break: break-word; white-space: normal; box-sizing: border-box; max-width: 100%;
    display: flex; align-items: center; gap: 12px;
}
/* A/B/C/D answer-key badge — inherits the option's state color via the
   .correct / .wrong / .missed rules below. */
.opt-letter {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid var(--accent-creation); border-radius: 4px;
    font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; line-height: 1;
    color: var(--accent-creation); background: rgba(122, 92, 255, 0.08);
}
.opt-text { flex: 1; min-width: 0; }
.opt-btn:hover:not(:disabled) { border-color: var(--accent-creation); background: #1a1a22; }
.opt-btn.correct { border-color: var(--accent-success); color: var(--accent-success); background: rgba(0, 255, 65, 0.05); }
.opt-btn.correct .opt-letter { border-color: var(--accent-success); color: var(--accent-success); background: rgba(0, 255, 65, 0.08); }
.opt-btn.wrong { border-color: var(--accent-error); color: var(--accent-error); background: rgba(255, 0, 85, 0.05); }
.opt-btn.wrong .opt-letter { border-color: var(--accent-error); color: var(--accent-error); background: rgba(255, 0, 85, 0.08); }
.opt-btn.eliminated { opacity: 0.2; pointer-events: none; border-color: transparent; }
.opt-btn:disabled { cursor: default; }

.result-feedback { text-align: center; font-family: var(--font-ui); font-weight: bold; font-size: 1rem; margin: 1rem 0; height: 1.5rem; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px currentColor; opacity: 0; transition: opacity 0.2s; }
.result-feedback.show { opacity: 1; }

#next-btn-container { margin-top: 1rem; height: 60px; }
.auto-next-bar { width: 0%; height: 2px; background: var(--accent-creation); transition: width 1s linear; margin-top: 5px; }
.auto-next-label { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; margin-top: 5px; }

/* Summary & Winner */
.summary-container { background: var(--surface-card); border-radius: 8px; border: 1px solid #333; overflow: hidden; max-height: 350px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin-bottom: 2rem; width: 100%; }
.summary-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-family: var(--font-ui); text-align: left; }
.summary-table thead { background: var(--surface-table-header); position: sticky; top: 0; z-index: 2; }
.summary-table th { padding: 14px 16px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #333; }
.summary-table tbody tr { background: var(--surface-table-row); transition: background 0.2s; border-bottom: 1px solid #222; }
.summary-table tbody tr:nth-child(even) { background: var(--surface-table-row-alt); }
.summary-table tbody tr:hover { background: rgba(122, 92, 255, 0.1); }
.summary-table td { padding: 12px 16px; color: var(--text-main); }
.summary-points { color: var(--accent-success); font-weight: bold; font-family: var(--font-ui); }
.summary-total { color: var(--accent-creation); font-weight: bold; font-family: var(--font-ui); }

.status-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; display: inline-block; }
.status-success { background: rgba(0, 255, 65, 0.15); color: var(--accent-success); }
.status-failure { background: rgba(255, 0, 85, 0.15); color: var(--accent-error); }

.winner-display-large { display: block; margin-top: 1rem; margin-bottom: 1rem; font-family: var(--font-ui); font-size: 4rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: -2px; line-height: 1; text-shadow: 0 0 30px var(--accent-creation), 0 0 60px var(--accent-creation); animation: glowPulse 2s infinite alternate; padding: 1rem 0; }
@keyframes glowPulse { from { text-shadow: 0 0 20px var(--accent-creation); } to { text-shadow: 0 0 50px var(--accent-creation), 0 0 10px #fff; } }

.pause-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(14, 14, 17, 0.8); backdrop-filter: blur(8px); z-index: 50; display: none; align-items: center; justify-content: center; flex-direction: column; }
.pause-overlay.active { display: flex; }
.pause-text { font-family: var(--font-ui); font-size: 2rem; color: var(--text-main); text-transform: uppercase; letter-spacing: 5px; margin-bottom: 1rem; animation: blink 2s infinite; }

/* Modal overlay sits ABOVE the nav (bar z:900, drawer z:1000) so the
   close button isn't clipped by the sticky header. Bigger content panel
   to cut scrolling on desktop. */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 1500; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal-content { background: var(--surface-modal); border: 1px solid var(--accent-creation); width: 95%; max-width: 900px; max-height: 92vh; overflow-y: auto; padding: 2rem; border-radius: 4px; box-shadow: 0 0 30px rgba(122, 92, 255, 0.2); box-sizing: border-box; position: relative; }
/* Header: title left, close right, both inline (no more absolute-positioned
   close getting hidden under the nav bar). */
.modal-header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); font-size: 1.5rem; margin-bottom: 1rem; color: var(--accent-creation); gap: 1rem; }
.modal-body { font-size: 0.9rem; line-height: 1.6; color: #ccc; }
/* Right-aligned, subtle circular close — floats top-right of any modal
   (modal-content is position:relative). Consistent across every trivia modal. */
.modal-close {
    position: absolute; top: 0.85rem; right: 0.85rem;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.35rem; color: var(--text-dim);
    /* line-height:0 + flex centering = the × glyph centers optically; the
       glyph's baseline box otherwise drifts it down-right inside the circle. */
    line-height: 0; padding: 0; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%; transition: 0.15s; user-select: none;
}
.modal-close:hover { color: #fff; background: var(--accent-error); border-color: var(--accent-error); }


    .nr-manual-container {
        font-family: 'Courier New', Courier, monospace;
        color: #e0e0e0;
        background: #0a0a0f;
        padding: 10px;
        line-height: 1.6;
    }

    .nr-manual-header {
        border-bottom: 2px solid #333;
        padding-bottom: 15px;
        margin-bottom: 20px;
        text-align: center;
    }

    .nr-manual-title {
        color: #00f3ff;
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0;
    }

    .nr-manual-subtitle {
        color: #666;
        font-size: 0.8rem;
    }

    .nr-section {
        margin-bottom: 25px;
        background: rgba(255, 255, 255, 0.03);
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #222;
    }

    .nr-section-title {
        color: #ff9d00;
        font-size: 1.1rem;
        margin-top: 0;
        border-left: 3px solid #ff9d00;
        padding-left: 10px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* SCORING GRID */
    .nr-scoring-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 10px;
        text-align: center;
    }

    .nr-score-card {
        background: #15151a;
        padding: 10px;
        border: 1px solid #333;
        border-radius: 4px;
    }

    .nr-score-val { font-size: 1.4rem; font-weight: bold; display: block; }
    .nr-score-lbl { font-size: 0.7rem; text-transform: uppercase; color: #888; }

    /* POWERUPS */
    .nr-powerup-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .nr-powerup-item {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 12px;
        border-bottom: 1px solid #222;
        padding-bottom: 8px;
    }

    .nr-icon-box {
        width: 40px;
        height: 40px;
        background: #1a1a20;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        border: 1px solid #444;
        color: #fff;
        flex-shrink: 0;
    }

    .nr-p-title { color: #fff; font-weight: bold; font-size: 0.9rem; }
    .nr-p-desc { color: #999; font-size: 0.8rem; margin: 0; }

    /* MODES */
    .nr-mode-tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: bold;
        margin-right: 5px;
    }

    /* SUDDEN DEATH */
    .nr-alert-box {
        border: 1px solid #ff0055;
        background: rgba(255, 0, 85, 0.05);
        color: #ffadb6;
        padding: 10px;
        font-size: 0.85rem;
        margin-top: 5px;
    }

    /* COLORS */
    .c-green { color: #00ff41; }
    .c-yellow { color: #ffff00; }
    .c-red { color: #ff0055; }
    .c-cyan { color: #00f3ff; }

/* ---  UI ADDITIONS --- */

/* Fix: Group alignment for inputs and dropdowns */
.topic-group { 
    display: flex !important; 
    gap: 10px !important; 
    margin-bottom: 10px !important; 
    width: 100% !important;
    align-items: center !important;
}

/* Force the text input to share space and NOT take 100% width */
#neural-run-app .topic-group .topic-input { 
    flex: 1 1 auto !important; 
    width: 60% !important; 
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

/* Specific width for difficulty selector */
#neural-run-app .topic-group select.difficulty-select { 
    flex: 0 0 100px !important;
    width: 100px !important; 
    text-align: center !important;
    padding: 12px 5px !important; 
    margin-bottom: 0 !important;
}

/* Label for player names - ensures it is visible */
.name-label-small {
    display: block !important; 
    font-family: var(--font-ui) !important; 
    font-size: 0.7rem !important; 
    color: var(--accent-creation) !important; 
    margin-bottom: 6px !important; 
    text-transform: uppercase !important; 
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
}

/* Mobile responsive layout */
@media (max-width: 480px) {
    .topic-group {
        flex-direction: row !important;
        gap: 5px !important;
    }
    #neural-run-app .topic-group select.difficulty-select { 
        width: 80px !important; 
        flex: 0 0 80px !important;
    }
}
/* Mobile */
@media (max-width: 600px) {
    #neural-run-app { padding: 0; }
    .game-wrapper { padding: 0 5px; }
    .screen { padding: 10px; }
    .host-terminal { font-size: 0.8rem; padding: 0.5rem; min-height: 80px; }
    h1 { font-size: 1.5rem; margin-bottom: 0.2rem; }
    .subtitle { margin-bottom: 1rem; }
    .score-val { font-size: 1.1rem; }
    .opt-btn { padding: 12px; font-size: 0.85rem; }
    .btn-main { padding: 12px; font-size: 0.85rem; }
    .winner-display-large { font-size: 2rem; }
    .mode-selector { flex-direction: column; gap: 0.5rem; }
    .checkbox-wrapper { font-size: 0.75rem; }
    input[type="text"], input[type="password"], select { font-size: 16px; }
}

/* --- V7.31 CONTROLS PATCH --- */
.game-controls {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important; /* Right aligned on desktop */
    /* Extra bottom margin: the YOUR TURN chip pokes ~26px above the HUD via
       top:-10px positioning, so the old 15px gap left the chip touching the
       pause/terminate row. ~32px keeps ~5px clear between chip top and the
       buttons above. */
    margin-bottom: 32px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 20 !important;
}

.btn-control {
    background: #1e1e24 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    padding: 10px 20px !important; /* Slightly bigger */
    font-family: 'Fira Code', monospace !important;
    font-size: 0.85rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important; /* CAPS LOCK FORCED */
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: 0.2s all !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Quit/Terminate Button Red Style */
.btn-control.quit {
    border-color: #ff0055 !important;
    color: #ffadb6 !important;
    background: rgba(255, 0, 85, 0.1) !important;
}
.btn-control.quit:hover {
    background: rgba(255, 0, 85, 0.3) !important;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.4) !important;
}

/* Pause Button Cyan Style */
.btn-control.pause {
    border-color: #00f3ff !important;
    color: #00f3ff !important;
}
.btn-control.pause:hover {
    background: rgba(0, 243, 255, 0.15) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.4) !important;
}

/* HIDE OLD PAUSE BUTTON if it still exists in cached CSS */
.btn-pause {
    position: static !important;
    top: auto !important;
    right: auto !important;
}

/* MOBILE ADJUSTMENT */
@media (max-width: 600px) {
    .game-controls {
        justify-content: space-between !important;
    }
    .btn-control {
        flex: 1 !important; /* Equal width on mobile */
        text-align: center !important;
        font-size: 0.8rem !important;
    }
}

/* --- V7.32 ERROR MESSAGE STYLE --- */
#init-error-msg {
    color: #ff0055; /* Neon Red */
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
    display: none; /* Hidden by default */
    animation: blinkError 0.5s 2;
}

@keyframes blinkError {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Highlight empty inputs when error triggers */
.input-error {
    border-color: #ff0055 !important;
    box-shadow: 0 0 5px rgba(255, 0, 85, 0.5);
}

/* --- V7.36 FIX: Powerup Notification Spacing --- */
.result-feedback {
    height: auto !important;       /* Allow height to grow */
    min-height: 1.5rem !important; /* Keep original min-height */
    margin-bottom: 20px !important; /* Add space below it */
    line-height: 1.4 !important;
    overflow: visible !important;
}

/* Ensure notification text has space */
.powerup-announce {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    display: block !important;
    position: relative !important;
    z-index: 5 !important;
}

/* (Powerup bar now lives between the eyebrow and the timer bar — the old
   bottom-position collision override is no longer needed.) */

.opt-btn.missed {
    border: 2px solid #ff0055 !important; /* Red Border */
    color: #ff0055 !important;
    background: rgba(255, 0, 85, 0.1) !important;
    opacity: 1 !important;
}
.opt-btn.missed .opt-letter { border-color: #ff0055; color: #ff0055; background: rgba(255, 0, 85, 0.12); }

/* --- NEW SCOREBOARD STRUCTURE --- */
.round-block {
    margin-bottom: 2rem;
    border: 1px solid rgba(255,255,255,0.1);
}

.round-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--text-main); /* Uses your existing variable */
}

/* Adjusting the Player column to hold the topic underneath */
.col-player {
    text-align: left;
}

.p-name {
    font-size: 1rem;
    font-weight: bold;
}

.p-topic {
    font-size: 0.8rem;
    color: #888; /* Dimmed color for topic */
    margin-top: 2px;
}

/* Final scoreboard: Quiz Forge-inspired per-question archive */
#nr-round-detail {
    width: 100%;
    text-align: left;
}

/* Round review accordion — collapsed by default so long games don't expand
   the final screen's height. The header row toggles the body. */
.nr-round-detail-top { cursor: pointer; user-select: none; }
.nr-round-detail-heading { display: flex; align-items: center; gap: 0.55rem; }
.nr-detail-chevron { color: var(--accent-creation); font-size: 0.85rem; line-height: 1; }
.nr-round-detail-top:hover .nr-detail-chevron { color: var(--text-main); }
.nr-detail-body.collapsed { display: none; }

.nr-round-detail-section {
    width: 100%;
    margin: 0 0 2rem;
}

.nr-round-detail-top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(122, 92, 255, 0.3);
}

.nr-round-detail-kicker,
.nr-detail-eyebrow,
.nr-detail-player {
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nr-round-detail-kicker {
    color: var(--accent-creation);
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
}

#neural-run-app .nr-round-detail-top h2 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.nr-copy-json {
    flex: 0 0 auto;
    border: 1px solid var(--accent-creation);
    border-radius: 3px;
    padding: 0.65rem 0.85rem;
    background: rgba(122, 92, 255, 0.08);
    color: var(--text-main);
    font: 700 0.7rem var(--font-ui);
    letter-spacing: 1px;
    cursor: pointer;
}

.nr-copy-json:hover,
.nr-copy-json:focus-visible {
    background: rgba(122, 92, 255, 0.2);
    box-shadow: 0 0 14px rgba(122, 92, 255, 0.2);
}

.nr-copy-json.copied { border-color: var(--accent-success); color: var(--accent-success); }
.nr-copy-json.copy-failed { border-color: var(--accent-error); color: var(--accent-error); }

.nr-detail-cycle {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nr-detail-cycle-title {
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    font: 700 0.78rem var(--font-ui);
    letter-spacing: 2px;
}

.nr-detail-card {
    margin: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(122, 92, 255, 0.16);
    border-radius: 4px;
    background: var(--surface-modal);
}

.nr-detail-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

.nr-detail-eyebrow { color: var(--text-dim); font-size: 0.67rem; line-height: 1.5; }
.nr-detail-player { color: var(--team-cyan); font-size: 0.65rem; margin-top: 0.25rem; }

.nr-detail-outcome {
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    font: 700 0.67rem var(--font-ui);
    letter-spacing: 0.5px;
}

.nr-detail-outcome.success { color: var(--accent-success); background: rgba(0, 255, 65, 0.06); }
.nr-detail-outcome.failure { color: var(--accent-error); background: rgba(255, 0, 85, 0.06); }

.nr-detail-question {
    margin-bottom: 0.75rem;
    color: var(--text-main);
    font: 600 0.9rem/1.55 var(--font-body);
}

.nr-detail-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nr-detail-option {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.45rem;
    padding: 0.48rem 0.6rem;
    border-left: 3px solid transparent;
    color: var(--text-dim);
    font: 0.78rem/1.45 var(--font-body);
}

.nr-detail-option b { color: inherit; font-family: var(--font-ui); }
.nr-detail-option span {
    color: inherit;
    font: 700 0.6rem var(--font-ui);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.nr-detail-option.correct {
    border-left-color: var(--accent-success);
    background: rgba(0, 255, 65, 0.06);
    color: var(--text-main);
}

.nr-detail-option.wrong {
    border-left-color: var(--accent-error);
    background: rgba(255, 0, 85, 0.06);
    color: #ff9ab9;
}

.nr-detail-timeout {
    display: inline-block;
    margin-top: 0.65rem;
    border: 1px solid rgba(255, 157, 0, 0.45);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    color: #ff9d00;
    font: 700 0.65rem var(--font-ui);
    letter-spacing: 1px;
}

@media (max-width: 600px) {
    .nr-round-detail-top { align-items: flex-start; }
    .nr-detail-card { margin: 0.5rem; padding: 0.75rem; }
    .nr-detail-card-head { flex-direction: column; }
    .nr-detail-option { grid-template-columns: 1.25rem minmax(0, 1fr); }
    .nr-detail-option span { grid-column: 2; }
}

 .difficulty-select {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        background-color: #121216 !important;
        color: #fff !important;
        border: 1px solid #333 !important;
        appearance: menulist !important;
        -webkit-appearance: menulist !important;
        height: auto !important;
        min-height: 40px !important;
        z-index: 10 !important;
    }

/* === GAMEPLAY COMPACT — desktop fit-in-viewport during rounds === */
/* Scoped to #screen-game so setup and Final Verdict keep their original layout */
/* Wrapped in min-width:481px so existing mobile @media rules below 480px are preserved */
@media (min-width: 481px) {
    #screen-game .host-terminal {
        min-height: 70px;
        padding: 1rem 1.2rem;
        margin-bottom: 1rem;
        font-size: 1rem;
    }
    #screen-game .hud { margin-bottom: 1rem; }
    #screen-game .score-box { padding: 0.5rem; }
    #screen-game .score-val { font-size: 1.25rem; }
    /* Team panels keep a larger total than per-player chips on mobile,
       since there are only two boxes and they're the headline scoreboard. */
    #screen-game .team-box { padding: 0.8rem 0.6rem; }
    #screen-game .team-box .score-val { font-size: 1.8rem; }
    #screen-game .team-label { font-size: 0.6rem; }
    #screen-game .round-tracker { margin-bottom: 0.75rem; }
    #screen-game .question-meta { margin-bottom: 0.5rem; }
    #screen-game .q-text {
        font-size: 1.05rem;
        line-height: 1.4;
        min-height: 2.4em;
        margin-bottom: 1rem;
    }
    #screen-game .options-grid { gap: 8px; }
    #screen-game .opt-btn {
        padding: 12px 14px;
        font-size: 0.9rem;
    }
    #screen-game .powerup-bar { margin: 6px 0 10px; padding: 8px 10px; gap: 8px; }
    /* Mobile: trim the substantial-size buttons back down so they don't
       overwhelm the one-viewport gameplay target, but stay big enough to
       actually get noticed (the old sizes were the unnoticed-button bug). */
    #screen-game .btn-powerup {
        padding: 10px 14px;
        font-size: 0.78rem;
        min-width: 110px;
    }
    #screen-game .nr-challenge-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
        letter-spacing: 1px;
    }
    #screen-game #next-btn-container {
        height: 50px;
        margin-top: 0.5rem;
    }
}
    .topic-group { display: flex !important; gap: 10px !important; align-items: center !important; }

/* === CHALLENGE AI === */

.nr-challenge-bar {
  text-align: center;
  margin-top: 0.9rem;
}

/* Challenge AI button — bumped to a substantial size + glow so players
   actually notice it. Friend feedback: previous 6x14 / 0.78rem button
   was invisible in the bottom action stack. Order in the post-answer
   stack: Source -> Challenge -> Powerups -> Next. */
.nr-challenge-btn {
  background: rgba(255, 0, 85, 0.08);
  border: 1.5px solid var(--accent-error);
  color: var(--accent-error);
  padding: 12px 28px;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(255, 0, 85, 0.2);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.nr-challenge-btn:hover {
  background: var(--accent-error);
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 0, 85, 0.55);
  transform: translateY(-1px);
}

.nr-challenge-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.nr-challenge-modal-card {
  background: var(--bg-card, #111);
  border: 1px solid var(--accent-error);
  max-width: 480px;
  width: 100%;
  padding: 1.4rem;
  font-family: var(--font-ui);
  color: var(--text-main);
  box-shadow: 0 0 24px rgba(255, 60, 60, 0.25);
}

.nr-challenge-modal-header {
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--accent-error);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.nr-challenge-modal-subhead {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}

.nr-challenge-modal-chips {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.nr-challenge-chip {
  background: transparent;
  border: 1px solid #444;
  color: var(--text-main);
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.nr-challenge-chip:hover {
  border-color: var(--accent-error);
  background: rgba(255, 60, 60, 0.06);
}

.nr-challenge-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nr-challenge-modal-footer {
  text-align: right;
}

.nr-challenge-cancel {
  background: transparent;
  border: 1px solid #333;
  color: var(--text-dim);
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  cursor: pointer;
}

.nr-challenge-cancel:hover {
  color: var(--text-main);
  border-color: #666;
}

.nr-challenge-modal-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #222;
  font-size: 0.82rem;
  line-height: 1.5;
}

.nr-challenge-verdict-win {
  border-left: 3px solid var(--accent-success);
  padding-left: 12px;
}

.nr-challenge-verdict-loss {
  border-left: 3px solid #c89000;
  padding-left: 12px;
}

.nr-challenge-verdict-inconclusive {
  border-left: 3px solid var(--text-dim);
  padding-left: 12px;
}

.nr-challenge-spinner {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.nr-challenge-citation {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--accent-creation, #6cf);
  font-size: 0.72rem;
  word-break: break-all;
}

.nr-challenge-overruled-link {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.7rem;
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
}

.nr-challenge-continue-row {
  margin-top: 1.2rem;
  text-align: center;
}

.nr-challenge-continue {
  background: transparent;
  border: 1px solid var(--text-main);
  color: var(--text-main);
  padding: 9px 28px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nr-challenge-continue:hover {
  background: var(--text-main);
  color: var(--bg-charcoal-deep, #050505);
}