/* ==========================================================================
   Codenames — Neon Ops skin (dark only), styled after the lobby reference.
   Loaded after styles.css. Glassy dark panels, cyan = blue team,
   red = red team, green primary actions, glowing pill buttons.
   Class names and markup are unchanged. Selectors use html[data-theme]
   so they win over the existing dark rules without !important.
   ========================================================================== */

html[data-theme]{
  color-scheme:dark;
  --md-primary:#4cff6a;--md-on-primary:#03150a;
  --md-primary-container:#0c3a1a;--md-on-primary-container:#d6ffdf;
  --md-secondary-container:#0f2b38;--md-on-secondary-container:#d4f6ff;
  --md-surface:#070d16;--md-on-surface:#e8f4ff;--md-on-surface-variant:#8aa6bd;
  --md-surface-lowest:#050a12;--md-surface-low:#0a1420;--md-surface-container:#0d1a28;
  --md-surface-high:#132333;--md-surface-highest:#1a2e42;
  --md-outline:#2b4a63;--md-outline-variant:#1a3347;
  --md-inverse-surface:#e8f4ff;--md-inverse-on-surface:#0a1420;
  --red:#ff3b5c;--on-red:#16000a;--red-container:#3a0c18;--on-red-container:#ffd6df;
  --blue:#2fe0ff;--on-blue:#001420;--blue-container:#0a2b3a;--on-blue-container:#d2f6ff;
  --card-neutral:#14263a;--on-card-neutral:#dbe9f5;
  --card-assassin:#05070a;--on-card-assassin:#e8edf2;
  --cyan:#2fe0ff;--lime:#4cff6a;
  --glow-cyan:0 0 0 1px #2fe0ff88,0 0 18px #2fe0ff44;
  --glow-red:0 0 0 1px #ff3b5ccc,0 0 20px #ff3b5c44;
  --glow-blue:0 0 0 1px #2fe0ffcc,0 0 20px #2fe0ff44;
  --e1:0 2px 10px #0008;--e2:0 6px 22px #000a;--e3:0 10px 34px #000b;
  font-family:Vazir,Tahoma,Arial,sans-serif;
  background:var(--md-surface);
}

/* ---------- Background: deep navy with a faint world-map glow ---------- */
html[data-theme] body{
  background:
    radial-gradient(1000px 520px at 50% -10%,#14405a66,transparent 65%),
    radial-gradient(800px 500px at 50% 110%,#0b2a3a55,transparent 70%),
    var(--md-surface);
  color:var(--md-on-surface);
}

/* ---------- Header ---------- */
html[data-theme] .site-header{
  background:linear-gradient(180deg,#0b1826f2,#0a1420e6);
  border-bottom:1px solid #2fe0ff26;
  box-shadow:0 6px 20px #0008;
  backdrop-filter:blur(8px);
}
html[data-theme] .brand-word{color:#f2fbff;letter-spacing:.1em;text-shadow:0 0 12px #2fe0ff55}
html[data-theme] .brand-sub{color:var(--cyan);opacity:.8}
html[data-theme] .room-code{color:var(--cyan);border:1px solid #2fe0ff77;box-shadow:var(--glow-cyan);background:#06121c;border-radius:999px}

/* ---------- Buttons: pill shapes, glowing outlines ---------- */
html[data-theme] .btn{
  border-radius:999px;border:1px solid #7fa6bf55;background:linear-gradient(180deg,#14243a,#0c1828);
  color:#e8f4ff;letter-spacing:.03em;transition:box-shadow .2s,border-color .2s,transform .15s;
}
html[data-theme] .btn:hover:not(:disabled){border-color:var(--cyan);box-shadow:var(--glow-cyan);transform:translateY(-1px)}
html[data-theme] .btn-primary{
  background:linear-gradient(180deg,#5dff7a,#1fc94a);color:#03150a;border:1px solid #b8ffc6;
  font-weight:700;box-shadow:0 0 0 1px #4cff6a66,0 0 26px #4cff6a55;
}
html[data-theme] .btn-primary:hover:not(:disabled){box-shadow:0 0 0 1px #4cff6a,0 0 34px #4cff6a77}
html[data-theme] .btn-ghost{background:transparent;border-color:#2b4a63;color:var(--md-on-surface)}
html[data-theme] .text-btn,html[data-theme] .language,html[data-theme] .theme-toggle{
  border:1px solid #2b4a63;background:#0c1828cc;color:var(--md-on-surface);border-radius:999px
}
html[data-theme] .text-btn:hover,html[data-theme] .language:hover,html[data-theme] .theme-toggle:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan)}
html[data-theme] .key-btn{border-radius:999px;border:1px solid #ff3b5ccc;color:#ffc2cc;background:#1a0810;box-shadow:var(--glow-red)}

/* ---------- Inputs ---------- */
html[data-theme] .input{background:#050b14;border:1px solid #2b4a63;color:var(--md-on-surface);border-radius:999px;padding-inline:16px}
html[data-theme] .input:focus{outline:0;border-color:var(--cyan);box-shadow:var(--glow-cyan)}
html[data-theme] .field-label{color:var(--md-on-surface-variant);letter-spacing:.05em}

/* ---------- Phase pill / timer / eyebrow ---------- */
html[data-theme] .phase-pill{
  border:1px solid #2fe0ff99;background:#06141e;color:var(--cyan);border-radius:999px;box-shadow:var(--glow-cyan);letter-spacing:.06em
}
html[data-theme] .phase-pill.red{border-color:#ff3b5ccc;color:var(--red);box-shadow:var(--glow-red)}
html[data-theme] .phase-pill.blue{border-color:#2fe0ffcc;color:var(--blue);box-shadow:var(--glow-blue)}
html[data-theme] .timer{font-variant-numeric:tabular-nums;color:#bff6ff;text-shadow:0 0 14px #2fe0ff88}
html[data-theme] .eyebrow{color:var(--cyan);letter-spacing:.14em}
html[data-theme] .board-header h1{text-shadow:0 0 18px #2fe0ff44}

/* ---------- Team panels: glass with glowing team border ---------- */
html[data-theme] .team-panel{
  background:linear-gradient(180deg,#0c1a2aee,#081220ee);border:1px solid #2fe0ff55;
  border-radius:16px;box-shadow:var(--e2),inset 0 0 26px #2fe0ff0d;
}
html[data-theme] .team-panel.red{border-color:#ff3b5c88;box-shadow:var(--e2),inset 0 0 26px #ff3b5c12}
html[data-theme] .team-panel.blue{border-color:#2fe0ff88;box-shadow:var(--e2),inset 0 0 26px #2fe0ff12}
html[data-theme] .team-panel.team-active.red{border-color:var(--red);box-shadow:var(--glow-red),var(--e2)}
html[data-theme] .team-panel.team-active.blue{border-color:var(--blue);box-shadow:var(--glow-blue),var(--e2)}
html[data-theme] .team-top{background:linear-gradient(90deg,#1a0a12,#2a0c18,#1a0a12);color:#ffd0d8;letter-spacing:.12em;border-bottom:1px solid #ff3b5c55}
html[data-theme] .team-panel.blue .team-top{background:linear-gradient(90deg,#071a28,#0b2b40,#071a28);color:#c8f5ff;border-bottom:1px solid #2fe0ff55}
html[data-theme] .team-score{text-shadow:0 0 12px currentColor}
html[data-theme] .avatar{border:1px solid #2fe0ff66;box-shadow:0 0 10px #2fe0ff33}
html[data-theme] .team-panel.red .avatar{border-color:#ff3b5c88;box-shadow:0 0 10px #ff3b5c33}
html[data-theme] .mission-note{color:var(--md-on-surface-variant);border:1px dashed #2b4a63;border-radius:12px;background:#08111c}

/* ---------- Board & cards ---------- */
html[data-theme] .board{
  background:
    radial-gradient(600px 300px at 50% 0%,#2fe0ff10,transparent 70%),
    linear-gradient(180deg,#0a1624ee,#060c14ee);
  border:1px solid #2fe0ff44;border-radius:20px;box-shadow:var(--e3),inset 0 0 40px #2fe0ff0d;padding:16px;gap:12px;
}
html[data-theme] .word-card{
  border:1px solid #2fe0ff2a;border-radius:12px;
  background:linear-gradient(180deg,#132438cc,#0b1521cc);
  color:#dbe9f5;box-shadow:inset 0 1px 0 #ffffff0d,0 4px 14px #0007;
}
html[data-theme] .word-card:hover:not(:disabled):not(.revealed){border-color:#2fe0ff99;box-shadow:var(--glow-cyan),0 10px 22px #000a;transform:translateY(-3px)}
html[data-theme] .word-card.revealed{transform:none}
html[data-theme] .word-card[data-color=red]{
  background:linear-gradient(180deg,#3d0c1c,#220610);border-color:#ff3b5c;color:#ffd6df;box-shadow:var(--glow-red),inset 0 0 26px #ff3b5c2a;
}
html[data-theme] .word-card[data-color=blue]{
  background:linear-gradient(180deg,#0b2c42,#071a28);border-color:#2fe0ff;color:#d2f6ff;box-shadow:var(--glow-blue),inset 0 0 26px #2fe0ff2a;
}
html[data-theme] .word-card[data-color=neutral]{
  background:linear-gradient(180deg,#1b2d40,#101b29);border-color:#2b4a63;color:#9fb8cc;box-shadow:inset 0 0 18px #0008;
}
html[data-theme] .word-card[data-color=assassin]{
  background:radial-gradient(circle at 50% 40%,#2a0a10,#050507);border-color:#ff2e4f;color:#ffd0d8;box-shadow:0 0 28px #ff2e4f66,inset 0 0 30px #ff2e4f33;
}
html[data-theme] .word-card.selected{
  background:linear-gradient(180deg,#0c3a1a,#06200e);border-color:var(--md-primary);color:var(--md-on-primary-container);
  outline:2px solid #4cff6a66;outline-offset:3px;box-shadow:0 0 22px #4cff6a55;
}
html[data-theme] .card-index{color:#4d6a84}
html[data-theme] .card-icon{background:#0a1522;border:1px solid #2fe0ff44;color:var(--cyan)}
html[data-theme] .card-icon.pick{background:#06200e;border-color:var(--md-primary);color:var(--md-primary)}
html[data-theme] .card-cell.is-selected::before{border-color:var(--tc);box-shadow:0 0 18px var(--tc)}
html[data-theme] .card-cell.t-red{--tc:#ff3b5c}
html[data-theme] .card-cell.t-blue{--tc:#2fe0ff}
html[data-theme] .pick-by{background:var(--md-primary);color:#03150a;border-radius:999px;box-shadow:0 0 12px #4cff6a88}

/* ---------- Turn / lobby / spectators ---------- */
html[data-theme] .turn-panel,html[data-theme] .lobby-center,html[data-theme] .lobby-preview{
  background:linear-gradient(180deg,#0b1826e6,#070f1ae6);border:1px solid #2fe0ff33;border-radius:18px;box-shadow:var(--e2);backdrop-filter:blur(6px)
}
html[data-theme] .clue-chip{background:#0a1a26;border:1px solid #2fe0ff66;color:var(--cyan);border-radius:999px}
html[data-theme] .spectators{color:var(--md-on-surface-variant)}
html[data-theme] .connection{color:var(--lime)}
html[data-theme] .live-dot{background:var(--lime);box-shadow:0 0 10px var(--lime)}
html[data-theme] .connection.offline{color:var(--red)}
html[data-theme] .connection.offline .live-dot{background:var(--red);box-shadow:0 0 10px var(--red)}

/* ---------- Activity / log ---------- */
html[data-theme] .activity-panel{background:linear-gradient(180deg,#0b1826ee,#070d17ee);border:1px solid #2fe0ff33;border-radius:18px;box-shadow:var(--e2)}
html[data-theme] .activity-tab{color:var(--md-on-surface-variant);border-radius:999px}
html[data-theme] .activity-tab.active{color:var(--cyan);background:#0b2330;box-shadow:inset 0 0 0 1px #2fe0ff66}
html[data-theme] .log-entry.red{border-inline-start-color:var(--red)}
html[data-theme] .log-entry.blue{border-inline-start-color:var(--blue)}

/* ---------- Winner banner ---------- */
html[data-theme] .winner-banner{border-radius:18px;border:1px solid #2fe0ff77;background:linear-gradient(90deg,#071a28,#0b2b40,#071a28);box-shadow:var(--glow-cyan)}
html[data-theme] .winner-banner.red{border-color:#ff3b5ccc;background:linear-gradient(90deg,#1a0710,#3d0c1c,#1a0710);box-shadow:var(--glow-red)}
html[data-theme] .winner-banner h2{text-shadow:0 0 16px currentColor}

/* ---------- Dialogs ---------- */
html[data-theme] dialog{
  background:linear-gradient(180deg,#0c1828,#070d16);color:var(--md-on-surface);
  border:1px solid #2fe0ff55;border-radius:20px;box-shadow:0 30px 80px #000c,var(--glow-cyan)
}
html[data-theme] dialog::backdrop{background:#02060acc;backdrop-filter:blur(4px)}
html[data-theme] .close-btn{color:var(--md-on-surface-variant);border:1px solid #2b4a63;border-radius:50%}
html[data-theme] .color-guide .red{background:#3d0c1c;border:1px solid #ff3b5c;color:#ffd6df}
html[data-theme] .color-guide .blue{background:#0b2c42;border:1px solid #2fe0ff;color:#d2f6ff}
html[data-theme] .color-guide .black{background:#05070a;border:1px solid #ff2e4f;color:#ffd0d8}

/* ---------- Scrollbars & focus ---------- */
html[data-theme] ::-webkit-scrollbar{width:8px;height:8px}
html[data-theme] ::-webkit-scrollbar-thumb{background:#2fe0ff33;border-radius:8px}
html[data-theme] ::-webkit-scrollbar-track{background:transparent}
html[data-theme] :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- Decorative HUD layer (from index.html, pointer-events off) ---------- */
html[data-theme] .hud-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
html[data-theme] #app{position:relative;z-index:1}
html[data-theme] .hud-map{
  position:absolute;inset:0;opacity:.35;
  background:
    radial-gradient(ellipse 14% 18% at 22% 38%,#1e4a66aa 0,transparent 70%),
    radial-gradient(ellipse 12% 16% at 48% 30%,#1e4a66aa 0,transparent 70%),
    radial-gradient(ellipse 10% 14% at 76% 42%,#1e4a66aa 0,transparent 70%),
    radial-gradient(ellipse 16% 22% at 60% 70%,#1e4a6688 0,transparent 70%);
  filter:blur(2px);
}
html[data-theme] .hud-stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff9,transparent),
    radial-gradient(1px 1px at 37% 8%,#fff8,transparent),
    radial-gradient(1.5px 1.5px at 62% 14%,#2fe0ffcc,transparent),
    radial-gradient(1px 1px at 84% 22%,#fff7,transparent),
    radial-gradient(1px 1px at 27% 56%,#fff5,transparent),
    radial-gradient(1.5px 1.5px at 91% 62%,#2fe0ffaa,transparent);
}
html[data-theme] .hud-scan{
  position:absolute;inset:0;opacity:.5;
  background:linear-gradient(180deg,transparent 0,#2fe0ff08 50%,transparent 100%);
  background-size:100% 6px;
}
html[data-theme] .hud-code{
  position:absolute;font:10px/1.5 ui-monospace,Consolas,monospace;color:#2fe0ff;opacity:.28;letter-spacing:.04em;direction:ltr;white-space:nowrap
}
html[data-theme] .hud-code-tl{top:88px;left:24px}
html[data-theme] .hud-code-tr{top:88px;right:24px;text-align:right}
html[data-theme] .hud-code-bl{bottom:18px;left:24px}

/* ---------- Lobby layout to match reference: Blue left, Red right, glass center ---------- */
@media (min-width:851px){
  html[data-theme] .game-layout .team-blue-column{grid-column:1;grid-row:1}
  html[data-theme] .game-layout .game-center{grid-column:2;grid-row:1}
  html[data-theme] .game-layout .team-red-column{grid-column:3;grid-row:1}
}

/* Team cards: glass panels with cyan (blue) / red neon borders */
html[data-theme] .team-panel{
  background:linear-gradient(180deg,#0c2131e6,#071420e6);
  border:1.5px solid #2fd6ff;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 1px #2fd6ff22,0 0 22px -6px #2fd6ff99,inset 0 0 22px #2fd6ff14;
}
html[data-theme] .team-panel.red{
  border-color:#ff3b5c;
  box-shadow:0 0 0 1px #ff3b5c22,0 0 22px -6px #ff3b5ccc,inset 0 0 22px #ff3b5c14;
}
html[data-theme] .team-panel .team-top{
  background:transparent!important;color:#eaf7ff;
  margin:10px 12px 4px;padding:8px 10px;border-radius:14px;
  border:1.5px solid #2fd6ff88;text-align:center;
}
html[data-theme] .team-panel.red .team-top{border-color:#ff3b5c99}
html[data-theme] .team-panel .team-top h2{color:#eaf7ff;text-transform:uppercase;letter-spacing:.04em}
html[data-theme] .team-panel .team-top p{color:#9fc6d8}
html[data-theme] .team-panel .team-score{color:#2fd6ff}
html[data-theme] .team-panel.red .team-score{color:#ff5c75}
html[data-theme] .team-panel .role-label{color:#eaf7ff;text-transform:uppercase;letter-spacing:.06em}

/* Join buttons: green pill as in reference */
html[data-theme] .join-role{
  background:linear-gradient(180deg,#4ee34a,#1f9a2c);
  border:1px solid #9dff8a;color:#f4fff2;border-radius:999px;
  height:40px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 0 16px #4ee34a66,inset 0 1px 0 #ffffff40;
}
html[data-theme] .join-role:hover{box-shadow:0 0 22px #4ee34aaa,inset 0 1px 0 #ffffff55}
html[data-theme] .team-panel.red .join-role{color:#f4fff2}

/* Center glass panel and green START button */
html[data-theme] .game-center{
  background:linear-gradient(180deg,#0c2131e0,#061019e0);
  border:1px solid #2fd6ff44;border-radius:22px;padding:18px;
  box-shadow:0 0 30px -10px #2fd6ff55,inset 0 0 40px #2fd6ff0d;
}
html[data-theme] .game-center [data-action="start"]{
  width:100%;height:56px;border-radius:999px;font-size:18px;font-weight:900;letter-spacing:.06em;
  background:linear-gradient(180deg,#5cf25a,#1d9a2e);color:#f4fff2;
  border:1px solid #b6ff9e;box-shadow:0 0 26px #4ee34a88,inset 0 1px 0 #ffffff55;
}
html[data-theme] .game-center [data-action="start"]:disabled{opacity:.45;box-shadow:none}

/* ---------- Turn banner + floating confirm bar (neon-fx.js) ---------- */
#neon-turn{position:fixed;top:14px;left:50%;transform:translate(-50%,-140%);z-index:90;display:flex;align-items:center;gap:12px;padding:10px 22px;border-radius:999px;background:rgba(7,13,22,.92);border:1px solid #2fe0ff;box-shadow:0 0 22px rgba(47,224,255,.45),inset 0 0 14px rgba(47,224,255,.12);color:#e8fbff;pointer-events:none;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s;opacity:0;white-space:nowrap}
#neon-turn.show{transform:translate(-50%,0);opacity:1}
#neon-turn.red{border-color:#ff3b5c;box-shadow:0 0 22px rgba(255,59,92,.5),inset 0 0 14px rgba(255,59,92,.14)}
#neon-turn.mine{padding:14px 30px;animation:neonTurnPulse 1.1s ease-in-out infinite}
#neon-turn .neon-turn-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7fd8e8;padding:3px 10px;border:1px solid currentColor;border-radius:999px}
#neon-turn strong{font-size:clamp(15px,2vw,20px);font-weight:800;text-shadow:0 0 10px currentColor}
#neon-turn.mine strong{font-size:clamp(18px,2.6vw,26px)}
#neon-turn.red .neon-turn-kicker,#neon-turn.red strong{color:#ffb3c0}
@keyframes neonTurnPulse{0%,100%{box-shadow:0 0 18px rgba(47,224,255,.45)}50%{box-shadow:0 0 36px rgba(47,224,255,.9)}}
#neon-confirm-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:80;display:none;gap:10px;flex-wrap:wrap;justify-content:center;padding:8px;border-radius:18px;background:rgba(7,13,22,.9);border:1px solid rgba(47,224,255,.5);box-shadow:0 0 24px rgba(47,224,255,.3);backdrop-filter:blur(8px)}
body.neon-bar-on #neon-confirm-bar{display:flex;animation:neonBarIn .35s ease both}
@keyframes neonBarIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
.neon-confirm{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;background:linear-gradient(180deg,#4dff9a,#14c96a);color:#04210f;font:inherit;font-weight:800;box-shadow:0 0 18px rgba(77,255,154,.55)}
.neon-confirm:hover{filter:brightness(1.08)}
.neon-confirm:active{transform:scale(.97)}
.neon-confirm-label{font-size:13px;letter-spacing:.04em}
.neon-confirm-word{font-size:14px;padding:3px 10px;border-radius:999px;background:rgba(4,33,15,.18);text-transform:uppercase}
@media (max-width:600px){#neon-turn{padding:8px 14px}#neon-confirm-bar{bottom:10px;left:10px;right:10px;transform:none}body.neon-bar-on #neon-confirm-bar{animation:none}}
@media (prefers-reduced-motion:reduce){#neon-turn,#neon-turn.mine{animation:none}}

#neon-logout{position:fixed;bottom:12px;inset-inline-start:12px;z-index:50;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(47,224,255,.4);background:rgba(9,20,34,.85);color:#cfeffa;font:inherit;font-size:13px;cursor:pointer}
#neon-logout:hover{border-color:#2fe0ff}