/* components.css — extracted verbatim from flappy_war.blade.php <style> block.
   Loaded LAST (after responsive.css) to preserve the original cascade order. */
  /* Overlay visibility — controlled by JS adding/removing .is-visible */
  /* Never mix Tailwind hidden with inline display styles */
  .overlay { display: none; }
  .overlay.is-visible { display: flex; }

  /* ══ SOC PANEL — Unknown Security Conference Style ══════════════════════ */
  #soc-panel {
    width: 282px; flex-shrink: 0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 4px),
      linear-gradient(rgba(0,229,255,0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,229,255,0.028) 1px, transparent 1px),
      rgba(2, 4, 14, 0.99);
    background-size: auto, 32px 32px, 32px 32px, auto;
    border-left: 1px solid rgba(0,229,255,0.28);
    box-shadow: -6px 0 32px rgba(0,100,255,0.12), inset 1px 0 0 rgba(0,229,255,0.06);
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
  }
  #soc-panel.hidden { display: none; }

  /* Brand header */
  .soc-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px 9px;
    border-bottom: 1px solid rgba(0,229,255,0.16);
    background: linear-gradient(135deg, rgba(0,229,255,0.07) 0%, transparent 65%);
    flex-shrink: 0;
  }
  .soc-brand-logo {
    width: 34px; height: 34px; object-fit: contain;
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(0,229,255,0.85)) drop-shadow(0 0 4px rgba(0,229,255,0.50));
    flex-shrink: 0;
  }
  .soc-brand-info { flex: 1; min-width: 0; }
  .soc-brand-name {
    display: block;
    font-family: var(--font-tech);
    font-size: 10px; letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(0,229,255,0.75);
    text-transform: uppercase;
  }
  .soc-brand-sub {
    display: block;
    font-family: var(--font-ui);
    font-size: 7.5px; letter-spacing: 1.5px;
    color: rgba(0,229,255,0.42);
    margin-top: 2px; text-transform: uppercase;
  }
  .soc-status-indicator { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .soc-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff, 0 0 18px rgba(0,229,255,0.55);
    animation: nodePulse 2s ease-in-out infinite;
  }
  .soc-status-text {
    font-family: var(--font-ui); font-size: 7px; letter-spacing: 1.5px;
    color: rgba(0,229,255,0.50); text-transform: uppercase;
  }

  /* Energy section */
  .soc-energy-section {
    padding: 8px 14px 9px;
    border-bottom: 1px solid rgba(0,229,255,0.10);
    flex-shrink: 0;
  }
  .soc-energy-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
  }
  .soc-energy-icon {
    flex-shrink: 0; color: #00e5ff;
    filter: drop-shadow(0 0 4px rgba(0,229,255,0.70));
  }
  .soc-energy-label {
    font-family: var(--font-display);
    font-size: 11px; letter-spacing: 3px;
    color: rgba(200,220,240,0.45); flex: 1;
  }
  .soc-energy-val-display {
    font-family: var(--font-tech); font-size: 13px;
    color: #00e5ff; text-shadow: 0 0 12px rgba(0,229,255,0.85);
  }
  .soc-energy-bar-track {
    width: 100%; height: 7px;
    background: rgba(0,229,255,0.06);
    border: 1px solid rgba(0,229,255,0.20);
    overflow: hidden;
  }
  #soc-energy-fill {
    height: 100%;
    background: linear-gradient(90deg, #0055cc, #0094e0, #00e5ff);
    box-shadow: 0 0 12px rgba(0,229,255,0.75), inset 0 0 8px rgba(255,255,255,0.18);
    transition: width 0.2s; width: 100%;
  }

  /* Energy bar — HUD (inside #hud-blue-section, separate element) */
  .energy-track {
    width: 100%; height: 5px;
    background: rgba(0,229,255,0.08);
    border: 1px solid rgba(0,229,255,0.18);
    overflow: hidden; margin-bottom: 2px;
  }
  #hud-energy-fill {
    height: 100%;
    background: linear-gradient(90deg, #0055cc, #00e5ff);
    box-shadow: 0 0 8px rgba(0,229,255,0.65);
    transition: width 0.2s; border-radius: 0;
  }

  /* Actions section header */
  .soc-section-header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px 5px;
    border-bottom: 1px solid rgba(0,229,255,0.08);
    flex-shrink: 0;
  }
  .soc-section-label {
    font-family: var(--font-display); font-size: 10px; letter-spacing: 3px;
    color: rgba(0,229,255,0.50); white-space: nowrap; flex-shrink: 0;
  }
  .soc-section-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(0,229,255,0.22), transparent);
  }

  /* Actions container */
  .soc-actions {
    padding: 7px 10px 7px;
    display: flex; flex-direction: column; gap: 4px;
    border-bottom: 1px solid rgba(0,229,255,0.08);
    flex-shrink: 0;
  }

  /* Action buttons — Unknown Security Conference button style */
  .soc-action-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 10px;
    font-family: var(--font-display);
    font-size: 13px; letter-spacing: 2px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.32);
    cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.16s;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    text-align: left;
  }
  .soc-action-btn.soc-btn-ready { color: rgba(200,220,240,0.88); }
  .soc-action-btn.soc-btn-ready:hover {
    background: rgba(0,229,255,0.05);
    border-color: currentColor;
    box-shadow: 0 0 16px rgba(0,0,0,0.4), inset 0 0 14px rgba(0,229,255,0.04);
    transform: translateX(2px);
    letter-spacing: 2.5px;
  }
  .soc-action-btn.soc-btn-cooldown { opacity: 0.28; pointer-events: none; }

  /* Cooldown fill overlay */
  .soc-cd-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.48);
    transition: height 0.1s linear; pointer-events: none;
  }

  /* Key badge — Orbitron font */
  .soc-key-badge {
    font-family: var(--font-tech); font-size: 9px;
    padding: 2px 6px;
    border: 1px solid currentColor;
    background: rgba(0,0,0,0.45);
    flex-shrink: 0; opacity: 0.80;
  }

  /* Button SVG icon */
  .soc-btn-icon {
    width: 13px; height: 13px;
    fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0; opacity: 0.75;
  }
  .soc-btn-label { flex: 1; text-align: left; }
  .soc-cd-val {
    font-size: 7px; font-family: var(--font-hud);
    opacity: 0.45; min-width: 20px; text-align: right; flex-shrink: 0;
  }

  /* ── SVG icon system ──────────────────────────────────────────────────────── */
  .icon {
    display: inline-block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    flex-shrink: 0;
    overflow: visible;
  }
  /* Card icons: override font-size approach for SVGs */
  .card-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    margin-bottom: 14px;
  }
  .card-icon .icon { width: 40px; height: 40px; }
  /* Difficulty dot — replaces emoji circles */
  .diff-dot {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: var(--c);
    box-shadow: 0 0 10px var(--c);
  }
  /* Button icon+text alignment */
  .btn-primary, .btn-secondary, .btn-back {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }
  .btn-primary .icon   { width: 13px; height: 13px; }
  .btn-secondary .icon { width: 12px; height: 12px; }
  .btn-back .icon      { width: 12px; height: 12px; }

  /* SOC log */
  .soc-log {
    flex: 1; overflow-y: hidden;
    padding: 8px 12px;
    display: flex; flex-direction: column-reverse;
    gap: 2px;
    background: rgba(0, 6, 18, 0.55);
    border-top: 1px solid rgba(0,148,224,0.10);
  }
  .log-line {
    font-family: var(--font-ui);
    font-size: 9px; letter-spacing: 0.5px;
    line-height: 1.8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .log-sys   { color: rgba(0,148,224,0.60); }
  .log-blue  { color: rgba(77,200,255,0.92); }
  .log-red   { color: rgba(255,90,90,0.85); }
  .log-alert { color: rgba(255,210,0,0.95); }

  /* ── Result screen — mode-separated ─────────────────────────────────────── */
  .result-mode-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 14px;
    font-family: var(--font-display); font-size: 9px; letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid currentColor;
    margin-bottom: 14px;
    clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  }
  .result-mode-badge.mode-classic {
    color: rgba(0,229,255,0.70);
    background: rgba(0,229,255,0.06);
    border-color: rgba(0,229,255,0.30);
  }
  .result-mode-badge.mode-mission {
    color: rgba(255,100,40,0.80);
    background: rgba(255,60,0,0.06);
    border-color: rgba(255,80,20,0.30);
  }
  .result-mode-badge.mode-pvp {
    color: rgba(180,120,255,0.70);
    background: rgba(140,60,255,0.06);
    border-color: rgba(140,80,255,0.28);
  }
  .result-sub {
    font-family: var(--font-display); font-size: 15px; letter-spacing: 4px;
    color: rgba(77,200,255,0.42); margin-bottom: 0;
  }
  .result-stats {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin-bottom: 8px; width: 100%;
  }
  .result-stat-row {
    font-family: var(--font-hud); font-size: 9px; letter-spacing: 2px;
    color: rgba(200,220,240,0.50); line-height: 2.2;
  }
  .result-stat-hs {
    font-family: var(--font-hud); font-size: 9px; letter-spacing: 2px;
    margin-top: 4px; line-height: 2;
  }

  /* ── Local War — desktop only ────────────────────────────────────────────── */
  .pvp-mobile-notice {
    display: none;
    position: absolute; inset: 0;
    background: rgba(2,4,14,0.90);
    border: 1px solid rgba(255,180,0,0.28);
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    text-align: center; padding: 10px;
    clip-path: polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  }
  .pvp-notice-icon { color: rgba(255,180,0,0.70); }
  .pvp-notice-title {
    font-family: var(--font-display); font-size: 10px; letter-spacing: 2px;
    color: rgba(255,180,0,0.90); text-transform: uppercase; margin-top: 2px;
  }
  .pvp-notice-sub {
    font-family: var(--font-ui); font-size: 7.5px; letter-spacing: 0.8px;
    color: rgba(255,180,0,0.45); line-height: 1.7;
  }
  body.is-mobile #btn-local-pvp { cursor: not-allowed; opacity: 0.60; }
  body.is-mobile #btn-local-pvp .pvp-mobile-notice { display: flex; }
  body.is-mobile #btn-local-pvp .card-badge,
  body.is-mobile #btn-local-pvp .card-icon,
  body.is-mobile #btn-local-pvp .card-title,
  body.is-mobile #btn-local-pvp .card-desc { visibility: hidden; }

  /* ── Leaderboard title link ──────────────────────────────────────────────── */
  .lb-title-link {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 14px;
    font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 3px;
    color: rgba(0,229,255,0.82);
    background: none; border: none; border-bottom: 1px solid rgba(0,229,255,0.42);
    padding: 4px 0; cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .lb-title-link:hover { color: #00e5ff; border-color: rgba(0,229,255,0.8); }

  /* ── Classic Mode name entry ─────────────────────────────────────────────── */
  .classic-name-header {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 6px;
  }
  .classic-name-owl {
    width: 72px; height: 72px; image-rendering: pixelated; flex-shrink: 0;
    filter: drop-shadow(0 0 18px rgba(0,229,255,0.60)) drop-shadow(0 0 6px rgba(0,229,255,0.30));
    animation: owlFloat 2.5s ease-in-out infinite;
  }
  .classic-name-conference {
    font-family: var(--font-ui); font-size: 8px; letter-spacing: 2.5px;
    color: rgba(0,229,255,0.40); text-transform: uppercase; margin-bottom: 3px;
  }
  .classic-name-title {
    font-family: var(--font-tech); font-size: 22px; letter-spacing: 4px;
    color: #ffffff; text-shadow: 0 0 20px rgba(0,229,255,0.50);
    margin: 0;
  }
  .classic-name-subtitle {
    font-family: var(--font-display); font-size: 10px; letter-spacing: 3px;
    color: rgba(0,229,255,0.45); margin-top: 3px;
  }
  .classic-name-flavors {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
    margin: 8px 0 14px;
    font-family: var(--font-display); font-size: 10px; letter-spacing: 2px;
    color: rgba(200,220,240,0.30);
  }
  .classic-name-section-label {
    font-family: var(--font-display); font-size: 8.5px; letter-spacing: 4px;
    color: rgba(0,229,255,0.38); text-transform: uppercase;
    margin-bottom: 8px; margin-top: 2px;
  }
  .classic-name-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; max-width: 380px;
  }
  .classic-input-row {
    display: flex; align-items: center; width: 100%;
    border: 1px solid rgba(0,229,255,0.35);
    background: rgba(0,229,255,0.04);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition: border-color 0.2s;
  }
  .classic-input-row:focus-within { border-color: rgba(0,229,255,0.70); }
  .classic-input-prefix {
    padding: 11px 10px 11px 16px;
    font-family: var(--font-hud); font-size: 11px; letter-spacing: 1px;
    color: rgba(0,229,255,0.55); flex-shrink: 0;
    border-right: 1px solid rgba(0,229,255,0.18);
  }
  .classic-name-input {
    flex: 1; padding: 11px 14px;
    background: transparent; border: none; outline: none;
    font-family: var(--font-tech);
    font-size: 16px; /* 16px minimum prevents iOS Safari auto-zoom */
    letter-spacing: 3px;
    color: #ffffff; caret-color: #00e5ff;
    text-transform: uppercase;
  }
  .classic-name-input::placeholder { color: rgba(0,229,255,0.18); letter-spacing: 2px; }
  .classic-name-hint {
    font-family: var(--font-ui); font-size: 8px; letter-spacing: 1.5px;
    color: rgba(200,220,240,0.25); text-align: center;
  }
  .classic-name-error {
    display: none; align-items: center; gap: 7px;
    font-family: var(--font-display); font-size: 9px; letter-spacing: 2.5px;
    color: #ff5500; text-shadow: 0 0 12px rgba(255,85,0,0.55);
    animation: glitchFlicker 0.4s ease;
  }
  .classic-name-error.is-visible { display: flex; }
  /* disable btn-start-classic when input is empty */
  #btn-start-classic:disabled {
    opacity: 0.35; cursor: not-allowed; pointer-events: none;
  }

  /* ── Leaderboard screen ──────────────────────────────────────────────────── */
  .lb-brand-row {
    display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
  }
  .lb-brand-logo {
    width: 42px; height: 42px; object-fit: contain; flex-shrink: 0;
    filter: brightness(1.1) drop-shadow(0 0 12px rgba(0,229,255,0.80));
  }
  .lb-brand-conf {
    font-family: var(--font-ui); font-size: 7.5px; letter-spacing: 2.5px;
    color: rgba(0,229,255,0.38); text-transform: uppercase; margin-bottom: 3px;
  }
  .lb-brand-title {
    font-family: var(--font-tech); font-size: 18px; letter-spacing: 3px;
    color: #ffffff; text-shadow: 0 0 16px rgba(0,229,255,0.45);
    margin: 0;
  }

  /* ── Leaderboard table ───────────────────────────────────────────────────── */
  .lb-table {
    width: 100%; max-width: 520px; margin: 12px auto 0;
    display: flex; flex-direction: column; gap: 2px;
    max-height: 320px; overflow-y: auto;
  }
  .lb-header, .lb-row {
    display: grid;
    grid-template-columns: 40px 1fr 80px 72px;
    align-items: center; gap: 8px;
    padding: 8px 14px;
    font-family: var(--font-hud); font-size: 9px; letter-spacing: 1.5px;
  }
  .lb-header {
    color: rgba(0,229,255,0.38);
    border-bottom: 1px solid rgba(0,229,255,0.14);
    text-transform: uppercase; font-size: 7.5px; letter-spacing: 2px;
  }
  .lb-row {
    background: rgba(0,229,255,0.025);
    border: 1px solid rgba(0,229,255,0.08);
    color: rgba(200,220,240,0.65);
    transition: background 0.15s;
  }
  .lb-row:hover { background: rgba(0,229,255,0.06); }
  .lb-row.lb-mine {
    background: rgba(0,229,255,0.10);
    border-color: rgba(0,229,255,0.38);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(0,229,255,0.10);
  }
  .lb-rank { font-family: var(--font-tech); font-size: 12px; text-align: center; }
  .lb-rank.gold   { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.70); }
  .lb-rank.silver { color: #c8d0d8; text-shadow: 0 0 8px rgba(200,208,216,0.50); }
  .lb-rank.bronze { color: #cd7f32; text-shadow: 0 0 8px rgba(205,127,50,0.50); }
  .lb-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-tech); font-size: 10px; letter-spacing: 1px; }
  .lb-score { font-family: var(--font-tech); font-size: 12px; color: #00e5ff; text-align: right; text-shadow: 0 0 8px rgba(0,229,255,0.50); }
  .lb-time  { font-family: var(--font-ui); font-size: 8px; color: rgba(200,220,240,0.35); text-align: right; }
  .lb-empty {
    font-family: var(--font-display); font-size: 10px; letter-spacing: 3px;
    color: rgba(200,220,240,0.22); text-align: center; padding: 36px 0;
  }
  .lb-footer-stats {
    margin-top: 10px; text-align: center;
    font-family: var(--font-ui); font-size: 8px; letter-spacing: 2px;
    color: rgba(0,229,255,0.25);
  }

  /* ── Mission Cyber leaderboard — orange/red accent ───────────────────────── */
  .lb-mission .lb-header { color: rgba(255,120,40,0.45); border-bottom-color: rgba(255,100,20,0.18); }
  .lb-mission .lb-row    { background: rgba(255,80,20,0.025); border-color: rgba(255,80,20,0.08); }
  .lb-mission .lb-row:hover { background: rgba(255,80,20,0.07); }
  .lb-mission .lb-row.lb-mine { background: rgba(255,80,20,0.12); border-color: rgba(255,100,40,0.45); box-shadow: 0 0 14px rgba(255,80,20,0.12); }
  .lb-mission .lb-score  { color: #ff7733; text-shadow: 0 0 8px rgba(255,100,40,0.55); }
  .lb-mission .lb-brand-conf { color: rgba(255,120,40,0.45); }
  .lb-mission .lb-brand-title { text-shadow: 0 0 16px rgba(255,100,40,0.40); }
  .lb-mission .lb-empty  { color: rgba(220,180,160,0.22); }
  .lb-mission .lb-footer-stats { color: rgba(255,120,40,0.28); }
  /* extra column for mission leaderboard: # / OPERADOR / SCORE / NIVEL / TIEMPO */
  .lb-mission .lb-header,
  .lb-mission .lb-row { grid-template-columns: 40px 1fr 70px 46px 66px; }
  .lb-diff {
    font-family: var(--font-ui); font-size: 7.5px; letter-spacing: 1px;
    color: rgba(200,180,160,0.40); text-align: center; text-transform: uppercase;
  }

  /* ── Nickname screen background ─────────────────────────────────────────── */
  #screen-nickname {
    background:
      linear-gradient(rgba(0,229,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,229,255,0.035) 1px, transparent 1px),
      radial-gradient(ellipse 110% 75% at 50% 110%, rgba(0,35,80,0.80) 0%, var(--void) 62%),
      var(--abyss);
    background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
    gap: 0;
  }
  #screen-nickname::before,
  #screen-nickname::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    border-color: var(--cyber-bright);
    border-style: solid;
    animation: bracketPulse 3.5s ease-in-out infinite both;
    pointer-events: none;
  }
  #screen-nickname::before { top: 16px; left: 16px; border-width: 2px 0 0 2px; animation-delay: 0.25s; }
  #screen-nickname::after  { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; animation-delay: 1.75s; }

  /* ── Session Nickname screen — SOC terminal authentication ───────────────── */
  .nick-auth-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: 520px;
    padding: 7px 18px;
    border: 1px solid rgba(0,229,255,0.18);
    background: rgba(0,229,255,0.04);
    clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
    margin-bottom: 12px;
    flex-shrink: 0;
  }
  .nick-auth-badge {
    display: flex; align-items: center; gap: 8px;
    /* Rajdhani: heavy weight, readable at small sizes, tactical/military feel */
    font-family: var(--font-ui); font-weight: 600;
    font-size: 11px; letter-spacing: 2px;
    color: rgba(0,229,255,0.78);
  }
  .nick-auth-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: #44ff88;
    box-shadow: 0 0 8px #44ff88, 0 0 14px rgba(68,255,136,0.50);
    animation: nodePulse 1.8s ease-in-out infinite;
  }
  .nick-auth-version {
    font-family: var(--font-ui); font-size: 10px; letter-spacing: 2px;
    color: rgba(0,229,255,0.38); font-weight: 600;
  }
  .nick-identity-block {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    margin-bottom: 10px; flex-shrink: 0;
  }
  .nick-mascara {
    width: 80px; height: 80px; object-fit: contain;
    filter: brightness(1.1)
            drop-shadow(0 0 22px rgba(0,229,255,0.90))
            drop-shadow(0 0 8px rgba(0,229,255,0.50));
    animation: owlFloat 3s ease-in-out infinite;
    margin-bottom: 4px;
  }
  .nick-conference-name {
    /* Rajdhani 600 — much more legible than Bebas Neue at small sizes */
    font-family: var(--font-ui); font-weight: 600;
    font-size: 12px; letter-spacing: 3px;
    color: rgba(0,229,255,0.62);
    text-transform: uppercase;
  }
  .nick-app-title {
    font-family: var(--font-tech);
    font-size: clamp(26px, 4.5vw, 38px);
    letter-spacing: clamp(6px, 1.2vw, 10px);
    color: #ffffff; line-height: 1;
    text-shadow: 0 0 32px rgba(0,229,255,0.60), 0 0 70px rgba(0,229,255,0.15);
  }
  .nick-app-sub {
    font-family: var(--font-ui); font-weight: 600;
    font-size: 11px; letter-spacing: 3px;
    color: rgba(0,229,255,0.42);
    text-transform: uppercase;
  }
  .nick-diag-block {
    width: 100%; max-width: 480px;
    background: rgba(0,5,12,0.72);
    border: 1px solid rgba(0,229,255,0.12);
    border-left: 2px solid rgba(0,229,255,0.28);
    padding: 9px 18px;
    margin: 4px 0 12px;
    flex-shrink: 0;
  }
  .nick-diag-line {
    font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    letter-spacing: 1px; line-height: 2.0; margin: 0;
  }
  .nick-diag-line.ok   { color: rgba(68,255,136,0.78); }
  .nick-diag-line.warn { color: rgba(255,190,0,0.92); animation: levelFlash 2.4s step-start infinite; }
  .nick-access-form {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; max-width: 480px; flex-shrink: 0;
  }
  .nick-access-label {
    /* Rajdhani 700 — sharp, tactical section divider */
    font-family: var(--font-ui); font-weight: 700;
    font-size: 10px; letter-spacing: 4px;
    color: rgba(0,229,255,0.55); margin-bottom: 3px;
    text-transform: uppercase;
  }
  .nick-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; max-width: 420px;
  }
  .nick-input-row {
    display: flex; align-items: center; width: 100%;
    border: 1px solid rgba(0,229,255,0.42);
    background: rgba(0,229,255,0.04);
    clip-path: polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
    transition: border-color 0.22s, box-shadow 0.22s;
  }
  .nick-input-row:focus-within {
    border-color: rgba(0,229,255,0.82);
    box-shadow: 0 0 16px rgba(0,229,255,0.12), inset 0 0 10px rgba(0,229,255,0.04);
  }
  .nick-prefix {
    padding: 13px 12px 13px 18px;
    /* Rajdhani 700 replaces Press Start 2P — same tactical feel, far more legible */
    font-family: var(--font-ui); font-weight: 700;
    font-size: 13px; letter-spacing: 1px;
    color: rgba(0,229,255,0.72); flex-shrink: 0;
    border-right: 1px solid rgba(0,229,255,0.20);
    white-space: nowrap;
  }
  .nick-input {
    flex: 1; padding: 13px 16px;
    background: transparent; border: none; outline: none;
    font-family: var(--font-tech);
    /* 16px minimum prevents iOS Safari auto-zoom on input focus */
    font-size: 16px; letter-spacing: 3px;
    color: #ffffff; caret-color: #00e5ff;
    text-transform: uppercase;
  }
  .nick-input::placeholder { color: rgba(0,229,255,0.22); letter-spacing: 2px; }
  .nick-hint {
    font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px;
    color: rgba(200,220,240,0.48); text-align: center; font-weight: 400;
  }
  .nick-error {
    display: none; align-items: center; gap: 7px;
    /* Rajdhani 600 for error messages — readable at smaller sizes */
    font-family: var(--font-ui); font-weight: 600;
    font-size: 11px; letter-spacing: 2px;
    color: #ff5500; text-shadow: 0 0 12px rgba(255,85,0,0.55);
  }
  .nick-error.is-visible { display: flex; }
  #btn-nick-confirm:disabled { opacity: 0.32; cursor: not-allowed; pointer-events: none; }
  .nick-logos {
    display: flex; align-items: center; gap: 20px; margin-top: 14px; opacity: 0.62;
    flex-shrink: 0;
  }
  .nick-logos img { height: 36px; object-fit: contain; }

  /* ── Online screens — bold + high-contrast text (was hard to read) ───────── */
  #screen-online-lobby p,
  #screen-online-result p,
  #screen-online-lobby .lb-brand-conf,
  #screen-online-result .lb-brand-conf,
  #screen-online-lobby .lb-brand-title,
  #screen-online-result .lb-brand-title { font-weight: 700 !important; }
  /* Subtitle / instructions: brighter so they read clearly */
  #screen-online-lobby p              { color: rgba(225,235,255,0.88) !important; }
  #online-status                      { font-weight: 700 !important; }
  #online-result-winner               { font-weight: 700 !important; }
  /* Conference sub-labels and titles — lift the dim violet to readable */
  #screen-online-lobby .lb-brand-conf,
  #screen-online-result .lb-brand-conf { color: rgba(190,170,255,0.95) !important; }
  #screen-online-lobby .lb-brand-title,
  #screen-online-result .lb-brand-title { color: #ffffff !important; }
  /* "— O —" divider + room-code label */
  #online-choice > div                { color: rgba(210,225,250,0.7) !important; font-weight: 700 !important; }
  #online-code-block > div            { color: rgba(0,229,255,0.85) !important; font-weight: 700 !important; }
  /* Lobby input prefix / value + buttons more legible */
  #screen-online-lobby .nick-prefix   { color: rgba(0,229,255,0.9) !important; }
  /* Scoreboard rows: heavier + brighter so names/scores pop */
  #screen-online-result .lb-row span  { font-weight: 700 !important; }
  #screen-online-result .lb-name      { color: rgba(235,242,255,0.95) !important; }

  /* ── Global sound toggle (#btn-sound) ─────────────────────────────────────
     Fixed top-right, above every screen. Two SVGs inside; `.muted` swaps which
     one shows and recolors the chip red. */
  .sound-toggle {
    position: fixed; top: 12px; right: 12px; z-index: 9000;
    width: 42px; height: 42px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; cursor: pointer;
    color: #00e5ff;
    background: rgba(4,14,26,0.72);
    border: 1px solid rgba(0,229,255,0.35);
    box-shadow: 0 0 12px rgba(0,229,255,0.18);
    transition: transform .12s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .sound-toggle:hover { transform: scale(1.06); box-shadow: 0 0 16px rgba(0,229,255,0.4); }
  .sound-toggle:active { transform: scale(0.94); }
  .sound-toggle .snd-off { display: none; }
  .sound-toggle.muted {
    color: #ff5a5a;
    border-color: rgba(255,90,90,0.4);
    box-shadow: 0 0 12px rgba(255,90,90,0.18);
  }
  .sound-toggle.muted .snd-on  { display: none; }
  .sound-toggle.muted .snd-off { display: block; }