/* Extracted from dessert/index.html block 1 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #05080f; --panel: #0d1520; --panel2: #111d2c;
  --border: rgba(255,255,255,.07); --accent: #e8720c; --accent2: #ffb347;
  --text: #edf1f7; --muted: #5a7090;
}
body {
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(232,114,12,.06), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 10%, rgba(255,179,71,.04), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(100,180,255,.03), transparent 60%),
    linear-gradient(180deg, #05080f 0%, #070b14 60%, #05080f 100%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text); font-family: 'Exo 2', sans-serif;
  min-height: 100vh; position: relative;
}
/* Subtle animated ambient particles on wizard (cinematic continuity) */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,179,71,.35), transparent 50%),
    radial-gradient(1px 1px at 78% 32%, rgba(255,179,71,.22), transparent 50%),
    radial-gradient(2px 2px at 32% 72%, rgba(255,179,71,.2),  transparent 50%),
    radial-gradient(1px 1px at 85% 78%, rgba(232,114,12,.25), transparent 50%),
    radial-gradient(1px 1px at 45% 88%, rgba(255,179,71,.18), transparent 50%),
    radial-gradient(1px 1px at 60% 12%, rgba(255,179,71,.2),  transparent 50%);
  animation: ambientDrift 40s linear infinite;
  opacity:.6;
}
/* Faint horizon line at bottom — like desert horizon */
body::after{
  content:''; position:fixed; left:0; right:0; bottom:0; height:14vh; pointer-events:none; z-index:0;
  background: linear-gradient(180deg, transparent, rgba(232,114,12,.04) 60%, rgba(232,114,12,.08));
}
@keyframes ambientDrift{
  0%{ transform: translate(0,0); }
  100%{ transform: translate(-60px,-40px); }
}
/* Ensure main layout is above ambient */
header, .team-bar, .wiz-bar, .page, .wiz-nav { position: relative; z-index: 1; }
.cine-chrome, .cine-center { z-index: 999; }

header {
  padding: 16px 28px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(232,114,12,.07), transparent);
}
.logo { font-family: 'Orbitron', monospace; font-weight: 900; font-size: 1rem; color: var(--accent2); }
.logo span { color: var(--muted); font-size: .7rem; display: block; letter-spacing: 3px; }
.back-link { color: var(--muted); font-size: .78rem; text-decoration: none; border: 1px solid var(--border); padding: 5px 12px; border-radius: 6px; }
.back-link:hover { color: var(--accent2); border-color: rgba(232,114,12,.3); }

.page { display: grid; grid-template-columns: 340px 1fr; min-height: calc(100vh - 61px); }

/* ── SIDEBAR ── */
.sidebar {
  border-right: 1px solid var(--border); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; max-height: calc(100vh - 61px);
}
.sec-title {
  font-family: 'Orbitron', monospace; font-size: .62rem; letter-spacing: 3px;
  color: var(--accent); text-transform: uppercase; margin-bottom: 5px;
}
.input-row { display: flex; gap: 6px; }
.input-row input {
  flex: 1; background: var(--panel2); border: 1px solid var(--border);
  color: var(--text); padding: 7px 9px; border-radius: 7px;
  font-family: 'Exo 2', sans-serif; font-size: .83rem;
}
.input-row input:focus { outline: none; border-color: rgba(232,114,12,.4); }
.btn-add { background: rgba(232,114,12,.15); border: 1px solid rgba(232,114,12,.3); color: var(--accent2); padding: 7px 11px; border-radius: 7px; cursor: pointer; }
.btn-add:hover { background: rgba(232,114,12,.28); }
.player-count { font-family: 'Orbitron', monospace; font-size: .67rem; color: var(--muted); text-align: center; }
.player-count b { color: var(--accent2); font-size: .9rem; }

.player-list { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; max-height: 45vh; }
.player-chip {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 8px; display: flex; flex-direction: column; gap: 2px;
  cursor: grab; font-size: .82rem; user-select: none;
}
.player-chip:hover { border-color: rgba(232,114,12,.25); }
.player-chip.dragging { opacity: .3; }
.player-chip.is-sub { border-style: dashed; }
.chip-row1 { display: flex; align-items: center; gap: 6px; }
.chip-row2 { display: flex; align-items: center; gap: 6px; }
.chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-sub-badge {
  font-size: .58rem; font-family: 'Orbitron', monospace;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(255,255,255,.07); border: 1px solid var(--border);
  color: var(--muted); flex-shrink: 0;
}
.role-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rd-hosp     { background: #ff69b4; }
.rd-oil      { background: #ffb347; }
.rd-bomb     { background: #ff4444; }
.rd-silo     { background: #ff6666; }
.rd-arsenal  { background: #ffd700; }
.rd-merc     { background: #c084ff; }
.rd-blue     { background: #1e90ff; }
.rd-green    { background: #39ff14; }
.rd-flex     { background: #5a7090; }

.role-sel {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font-size: .68rem; padding: 2px 4px; border-radius: 5px; cursor: pointer; max-width: 56px;
}
.chip-power {
  flex: 3; background: var(--panel); border: 1px solid var(--border);
  color: var(--accent2); padding: 2px 4px; border-radius: 5px; font-size: .68rem;
  font-family: 'Orbitron', monospace; text-align: right; min-width: 0;
}
.chip-power::placeholder { color: var(--muted); font-family: 'Exo 2', sans-serif; font-size: .62rem; }
.chip-power:focus { outline: none; border-color: rgba(232,114,12,.4); }
.sub-chk { accent-color: var(--accent); cursor: pointer; width: 13px; height: 13px; }
.btn-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .82rem; }
.btn-x:hover { color: #ff5555; }

.tactic-btn {
  width: 100%; background: var(--panel2); border: 1px solid var(--border);
  color: var(--text); padding: 10px 12px; border-radius: 8px;
  text-align: left; cursor: pointer; font-family: 'Exo 2', sans-serif;
  font-size: .83rem; transition: all .2s;
}
.tactic-btn:hover { border-color: rgba(232,114,12,.3); }
.tactic-btn.tactive { border-color: var(--accent); background: rgba(232,114,12,.1); }
.tactic-btn.tactive strong { color: var(--accent2); }
.btn-row { display: flex; gap: 6px; }
.btn { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border); cursor: pointer; font-family: 'Orbitron', monospace; font-size: .6rem; letter-spacing: .8px; text-transform: uppercase; background: rgba(255,255,255,.04); color: var(--muted); transition: all .15s; }
.btn:hover { color: var(--text); }
.btn-auto { background: rgba(232,114,12,.12); border-color: rgba(232,114,12,.3); color: var(--accent2); flex: 1; }
.btn-auto:hover { background: rgba(232,114,12,.22); }

.legend { display: flex; flex-direction: column; gap: 4px; }
.leg-row { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--muted); }
.leg-row b { color: var(--text); }

/* ── CONTENT ── */
.content { display: flex; flex-direction: column; overflow-y: auto; }

/* TOP ROW: Roles + How To */
.top-row {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 16px 16px 0;
}
.roles-panel {
  flex-shrink: 0; width: 160px; padding: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}

/* MAP */
.map-wrap { padding: 12px 12px 0; }
.map-container {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
  background: url('https://desert.server1606.com/desert-map-v3.jpg') center/cover;
  aspect-ratio: 1491/1055; width: 1400px; max-width: 100%; margin: 0 auto;
}
.map-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.36); pointer-events: none; z-index: 1; }
/* Building sprites — above the dark overlay (z 1), below safe zones (z 3) and pins (z 5) */
.b-sprite {
  display: none !important;
}
.b-sprite.late-capture { opacity: .55; }
.safe-zone { position: absolute; z-index: 3; width: 10.5%; height: 20%; top: 37%; pointer-events: none; border-radius: 3px; }
.sz-left  { left: 3%;  border: 2px solid rgba(80,140,255,.7); background: rgba(80,140,255,.1); }
.sz-right { right: 3%; border: 2px solid rgba(255,80,80,.7);  background: rgba(255,80,80,.1); }
.sz-label { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-size: .44rem; font-family: 'Orbitron', monospace; white-space: nowrap; }
.sz-left .sz-label { color: #88aaff; } .sz-right .sz-label { color: #ff8888; }

.building {
  position: absolute; z-index: 5; transform: translate(-50%,-50%);
  width: 168px; height: 132px; cursor: pointer;
  --slot-out: 20px; --slot-shift: 0px;
}
.b-node {
  width: 42px; height: 42px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  border: 2px solid transparent; transition: all .15s; position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
  backdrop-filter: blur(1px);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.b-node.drop-over { transform: translate(-50%,-50%) scale(1.2); filter: brightness(1.5); }
.b-label { display: none; }
.b-players { position:absolute;inset:0;pointer-events:none; }
.b-tag {
  font-size: .62rem; font-weight:600; padding: 1px 5px; border-radius: 999px;
  background: rgba(5,8,15,.78); border: 1px solid rgba(255,255,255,.15);
  color: rgba(240,246,252,.96); cursor: pointer; max-width: 85px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 7px rgba(0,0,0,.28);
  backdrop-filter: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.b-tag-slot {
  position:absolute;display:inline-flex;align-items:center;gap:4px;justify-content:flex-start;
  pointer-events:auto;max-width:120px;min-width:56px;
}
.map-slot-code {
  flex:0 0 auto; min-width: 16px; height: 16px; padding: 0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:rgba(255,179,71,.18);color:#ffcf85;
  font-family:'Orbitron',monospace;font-size:.5rem;font-weight:700;line-height:1;
}
.map-slot-name { min-width:0;overflow:hidden;text-overflow:ellipsis; }
.slot-n{left:calc(50% + var(--slot-shift,0px));top:calc(6px - var(--slot-out,0px));transform:translate(-50%,0)}
.slot-s{left:calc(50% + var(--slot-shift,0px));bottom:calc(6px - var(--slot-out,0px) - 54px);transform:translate(-50%,0)}
.slot-e{right:calc(5px - var(--slot-out,0px));top:calc(50% + var(--slot-shift,0px));transform:translate(0,-50%)}
.slot-w{left:calc(5px - var(--slot-out,0px));top:calc(50% + var(--slot-shift,0px));transform:translate(0,-50%)}
.slot-ne{right:calc(7px - var(--slot-out,0px));top:calc(19px - var(--slot-out,0px))}
.slot-se{right:calc(7px - var(--slot-out,0px));bottom:calc(19px - var(--slot-out,0px))}
.slot-sw{left:calc(7px - var(--slot-out,0px));bottom:calc(19px - var(--slot-out,0px))}
.slot-nw{left:calc(7px - var(--slot-out,0px));top:calc(19px - var(--slot-out,0px))}
.b-tag.is-sub-tag { border-style: dashed; color: var(--muted); }
.b-tag:hover {
  background: rgba(24,30,42,.92); border-color: rgba(255,179,71,.35);
  color: #f5f7fb;
}
.b-tag:hover::after {
  content: 'x'; margin-left: 2px; color: #ff8f8f; font-size: .42rem;
}
.b-slots {
  position:absolute;left:50%;top:calc(50% + var(--b-label-y, 34px) + 14px);transform:translateX(-50%);
  font-size: .54rem; color: rgba(255,255,255,.35); font-family: 'Orbitron', monospace;
}
.b-lock { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font-size: .4rem; background: rgba(255,120,0,.45); border: 1px solid rgba(255,120,0,.6); color: #ffaa55; padding: 0 3px; border-radius: 3px; font-family: 'Orbitron', monospace; white-space: nowrap; }
.b-kk { position: absolute; left: 50%; top: calc(50% + var(--b-label-y, 24px) + 38px); transform: translateX(-50%); font-size: .55rem; font-weight:700; background: rgba(0,0,0,.85); border: 1px solid rgba(160,255,207,.55); color: #a8ffcf; padding: 1px 6px; border-radius: 999px; font-family: 'Orbitron', monospace; white-space: nowrap; letter-spacing:.3px; z-index:6; }

/* ─────────────────────────────────────────────────────────────────
   PER-BUILDING OFFSETS — TUNE HERE
   Jedes Gebäude hat 9 Zeilen: KK + 8 Slots (N,S,E,W,NE,NW,SE,SW).
   • KK/N/S: höhere Zahl = weiter runter
   • E/W:    höhere Zahl = weiter außen (nach rechts/links)
   • NE/NW/SE/SW: erste Zahl = horizontal außen, zweite = vertikal
   Alle Werte in Pixeln.
   ───────────────────────────────────────────────────────────────── */

/* ── SILO (Mitte, großes Gebäude) ── */
.building[data-bid="silo"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 92px); }
.building[data-bid="silo"] .slot-n  { top: -20px; }
.building[data-bid="silo"] .slot-s  { bottom: -48px; }
.building[data-bid="silo"] .slot-e  { right: -30px; }
.building[data-bid="silo"] .slot-w  { left: -30px; }
.building[data-bid="silo"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="silo"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="silo"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="silo"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── INFO CENTER ── */
.building[data-bid="info"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="info"] .slot-n  { top: -14px; }
.building[data-bid="info"] .slot-s  { bottom: -60px; }
.building[data-bid="info"] .slot-e  { right: -15px; }
.building[data-bid="info"] .slot-w  { left: -15px; }
.building[data-bid="info"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="info"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="info"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="info"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── ARSENAL ── */
.building[data-bid="arsenal"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="arsenal"] .slot-n  { top: -14px; }
.building[data-bid="arsenal"] .slot-s  { bottom: -60px; }
.building[data-bid="arsenal"] .slot-e  { right: -15px; }
.building[data-bid="arsenal"] .slot-w  { left: -15px; }
.building[data-bid="arsenal"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="arsenal"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="arsenal"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="arsenal"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── FIELD HOSPITAL 1 ── */
.building[data-bid="hosp1"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="hosp1"] .slot-n  { top: -14px; }
.building[data-bid="hosp1"] .slot-s  { bottom: -60px; }
.building[data-bid="hosp1"] .slot-e  { right: -15px; }
.building[data-bid="hosp1"] .slot-w  { left: -15px; }
.building[data-bid="hosp1"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="hosp1"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="hosp1"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="hosp1"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── FIELD HOSPITAL 2 ── */
.building[data-bid="hosp2"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="hosp2"] .slot-n  { top: -14px; }
.building[data-bid="hosp2"] .slot-s  { bottom: -60px; }
.building[data-bid="hosp2"] .slot-e  { right: -15px; }
.building[data-bid="hosp2"] .slot-w  { left: -15px; }
.building[data-bid="hosp2"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="hosp2"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="hosp2"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="hosp2"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── FIELD HOSPITAL 3 ── */
.building[data-bid="hosp3"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="hosp3"] .slot-n  { top: -14px; }
.building[data-bid="hosp3"] .slot-s  { bottom: -60px; }
.building[data-bid="hosp3"] .slot-e  { right: -15px; }
.building[data-bid="hosp3"] .slot-w  { left: -15px; }
.building[data-bid="hosp3"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="hosp3"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="hosp3"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="hosp3"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── FIELD HOSPITAL 4 ── */
.building[data-bid="hosp4"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="hosp4"] .slot-n  { top: -14px; }
.building[data-bid="hosp4"] .slot-s  { bottom: -60px; }
.building[data-bid="hosp4"] .slot-e  { right: -15px; }
.building[data-bid="hosp4"] .slot-w  { left: -15px; }
.building[data-bid="hosp4"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="hosp4"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="hosp4"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="hosp4"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── OIL REFINERY 1 ── */
.building[data-bid="oil1"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="oil1"] .slot-n  { top: -14px; }
.building[data-bid="oil1"] .slot-s  { bottom: -60px; }
.building[data-bid="oil1"] .slot-e  { right: -15px; }
.building[data-bid="oil1"] .slot-w  { left: -15px; }
.building[data-bid="oil1"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="oil1"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="oil1"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="oil1"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── OIL REFINERY 2 ── */
.building[data-bid="oil2"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="oil2"] .slot-n  { top: -14px; }
.building[data-bid="oil2"] .slot-s  { bottom: -60px; }
.building[data-bid="oil2"] .slot-e  { right: -15px; }
.building[data-bid="oil2"] .slot-w  { left: -15px; }
.building[data-bid="oil2"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="oil2"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="oil2"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="oil2"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── MERCENARY FACTORY ── */
.building[data-bid="merc"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="merc"] .slot-n  { top: -14px; }
.building[data-bid="merc"] .slot-s  { bottom: -60px; }
.building[data-bid="merc"] .slot-e  { right: -15px; }
.building[data-bid="merc"] .slot-w  { left: -15px; }
.building[data-bid="merc"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="merc"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="merc"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="merc"] .slot-sw { bottom: -1px; left:  -13px; }

/* ── SCIENCE HUB ── */
.building[data-bid="science"] .b-kk    { top: calc(50% + var(--b-label-y, 24px) + 38px); }
.building[data-bid="science"] .slot-n  { top: -14px; }
.building[data-bid="science"] .slot-s  { bottom: -60px; }
.building[data-bid="science"] .slot-e  { right: -15px; }
.building[data-bid="science"] .slot-w  { left: -15px; }
.building[data-bid="science"] .slot-ne { top: -1px;  right: -13px; }
.building[data-bid="science"] .slot-nw { top: -1px;  left:  -13px; }
.building[data-bid="science"] .slot-se { bottom: -1px; right: -13px; }
.building[data-bid="science"] .slot-sw { bottom: -1px; left:  -13px; }
/* ───────────────────────────────────────────────────────────────── */
.b-late-badge { position: absolute; top: -6px; left: -10px; font-size: .5rem; line-height: 1; }
.building.late-capture { opacity: .55; }
.drag-hint { position: absolute; inset: 0; z-index: 8; border-radius: 10px; border: 2px dashed rgba(232,114,12,.45); background: rgba(232,114,12,.04); display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', monospace; font-size: .72rem; color: rgba(232,114,12,.5); opacity: 0; pointer-events: none; transition: opacity .18s; }
.dragging-active .drag-hint { opacity: 1; }

/* ── PLAN ── */
.plan-area { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

/* Assignment grid */
.assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 7px; }
.ac { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; border-left: 3px solid transparent; }
.ac-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.ac-name { font-family: 'Orbitron', monospace; font-size: .6rem; }
.ac-player { display: flex; flex-direction:column; gap: 4px; font-size: .79rem; padding: 5px 0; border-top:1px solid rgba(255,255,255,.05); }
.ac-player:first-of-type{border-top:0}
.ac-player-main{display:flex;align-items:center;flex-wrap:wrap;row-gap:2px;gap:5px;width:100%}
.ac-player-main .ac-pname{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ac-player .sub-mark { font-size: .6rem; color: var(--muted); font-family: 'Orbitron', monospace; }
.ac-reg { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; flex-shrink: 0; font-size: .55rem; font-family: 'Orbitron', monospace; color: var(--muted); letter-spacing: .4px; cursor: pointer; white-space: nowrap; }
.ac-reg input[type="checkbox"] { cursor: pointer; }
.ac-lc-toggle {
  margin-left: auto; background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 999px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .55rem; line-height: 1; color: var(--muted); transition: all .15s; flex: 0 0 auto;
}
.ac-lc-toggle:hover { border-color: rgba(0,212,255,.4); color: #a0efff; }
.ac-lc-toggle.active { background: rgba(0,212,255,.16); border-color: rgba(0,212,255,.5); color: #a0efff; }
.slot-pill{font-size:.55rem;padding:1px 5px;border-radius:4px;background:rgba(255,179,71,.12);color:#ffcf85;font-family:'Orbitron',monospace;line-height:1.2}
.slot-picker-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(3,6,12,.72);
}
.slot-picker{
  width:min(360px,100%);border-radius:12px;
  background:#0b121e;border:1px solid rgba(255,179,71,.28);
  box-shadow:0 18px 60px rgba(0,0,0,.72);
  padding:16px;color:#e7edf7;
}
.slot-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.slot-picker-kicker{
  font-family:'Orbitron',monospace;font-size:.58rem;letter-spacing:1px;
  text-transform:uppercase;color:#ffb347;margin-bottom:4px;
}
.slot-picker-title{font-size:1rem;font-weight:700;color:#f5f7fb}
.slot-picker-close{
  width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#cbd5e1;cursor:pointer;
}
.slot-picker-sub{font-size:.78rem;color:var(--muted);margin:10px 0 14px}
.slot-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot-picker-btn{
  min-height:48px;border-radius:10px;border:1px solid rgba(255,179,71,.26);
  background:rgba(255,179,71,.08);color:#ffcf85;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:'Orbitron',monospace;font-size:.82rem;letter-spacing:1px;
}
.slot-picker-btn small{
  font-family:'Exo 2',sans-serif;font-size:.58rem;letter-spacing:0;color:rgba(255,255,255,.42);
}
.slot-picker-btn.occupied{background:rgba(90,112,144,.12);border-color:rgba(160,174,192,.20);color:#cbd5e1}
.slot-picker-btn:hover{background:rgba(255,179,71,.16);border-color:rgba(255,179,71,.45)}
.ac-slots{display:flex;flex-wrap:wrap;gap:3px;padding-left:12px}
.ac-slot{
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:var(--muted);border-radius:4px;padding:2px 5px;font-size:.55rem;
  font-family:'Orbitron',monospace;cursor:pointer;
}
.ac-slot:hover,.ac-slot.active{border-color:rgba(255,179,71,.45);color:#ffcf85;background:rgba(255,179,71,.09)}

/* Phase plan */
.phases { display: flex; flex-direction: column; gap: 9px; }
.phase-block { border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
.ph { padding: 12px 18px; display: flex; align-items: center; gap: 10px; font-family: 'Orbitron', monospace; font-size: .78rem; }
.ph-title { font-size: .82rem; }
.ph-sub { font-size: .68rem; color: var(--muted); font-weight: 400; margin-top: 3px; letter-spacing: .5px; }
.pb { padding: 14px 18px; background: rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 8px; }
.pg { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 16px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-left: 4px solid var(--border); }
.pg-building { font-family: 'Orbitron', monospace; font-size: .8rem; color: var(--accent2); margin-bottom: 4px; }
.pg-players { font-size: .95rem; color: var(--text); display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin-bottom: 4px; }
.pg-player { white-space: nowrap; display:inline-flex;align-items:center;gap:4px; }
.pg-players .sub { color: var(--muted); font-style: italic; }
.pg-task { font-size: .82rem; color: var(--muted); }
.pr { display: flex; gap: 8px; align-items: flex-start; font-size: .81rem; line-height: 1.5; }
.pr-name { font-weight: 700; color: var(--accent2); min-width: 100px; font-size: .79rem; flex-shrink: 0; }
.pr-name.is-sub { color: var(--muted); font-weight: 400; font-style: italic; }
.pr-task { color: var(--muted); }
.pr-task strong { color: var(--text); }
.pr-task em { color: var(--muted); font-style: italic; }
.p-note { font-size: .85rem; color: var(--muted); padding: 10px 14px; background: rgba(255,255,255,.03); border-radius: 6px; border-left: 3px solid var(--accent); margin-top: 6px; text-align: center; }
.p-warn { font-size: .85rem; color: #ffaa44; padding: 10px 14px; background: rgba(255,160,0,.05); border-radius: 6px; border-left: 3px solid #ffaa44; margin-top: 4px; text-align: center; }

/* Group divider */
.grp-label { font-family: 'Orbitron', monospace; font-size: .6rem; letter-spacing: 2px; color: var(--muted); padding: 4px 0 2px; border-top: 1px solid var(--border); margin-top: 4px; }

.empty-plan { color: var(--muted); font-size: .82rem; padding: 12px; text-align: center; font-style: italic; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* ── MOBILE RESPONSIVE ── */
@media(max-width:720px){
  header { padding: 10px 14px; gap: 8px; }
  .logo { font-size: .85rem; }
  .logo span { font-size: .62rem; letter-spacing: 2px; }
  .back-link { font-size: .72rem; padding: 4px 9px; }

  /* Stack sidebar + content vertically */
  .page { grid-template-columns: 1fr; }

  /* Sidebar: full width, no fixed height */
  .sidebar {
    max-height: none;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px;
  }

  /* Player list: limit height so page stays scrollable */
  .player-list { max-height: 160px; overflow-y: auto; }

  .top-row { flex-direction: column; margin: 12px 12px 0; }
  .roles-panel { width: 100%; }

  /* Map: use full width, smaller max height on narrow screens */
  .map-wrap { padding: 12px 12px 0; }
  .map-container { max-height: none; aspect-ratio: 1491/1055; width: 100%; }

  /* Make building nodes slightly smaller so they fit */
  .building { width: 104px; height: 86px; --slot-out: 14px; }
  .b-node { width: 28px; height: 28px; font-size: .78rem; }
  .b-label { font-size: .38rem; max-width: 52px; top: calc(50% + var(--b-label-y, 24px)); }
  .b-tag { font-size: .4rem; max-width: 42px; padding: 1px 3px; }
  .b-tag-slot { max-width: 44px; min-width: 28px; gap: 2px; }
  .map-slot-code { min-width: 12px; height: 12px; padding: 0 2px; font-size: .32rem; }
  .slot-n{top:calc(5px - var(--slot-out,0px))}
  .slot-s{bottom:calc(5px - var(--slot-out,0px))}
  .slot-e{right:calc(3px - var(--slot-out,0px))}
  .slot-w{left:calc(3px - var(--slot-out,0px))}
  .slot-ne{right:calc(4px - var(--slot-out,0px));top:calc(16px - var(--slot-out,0px))}
  .slot-se{right:calc(4px - var(--slot-out,0px));bottom:calc(16px - var(--slot-out,0px))}
  .slot-sw{left:calc(4px - var(--slot-out,0px));bottom:calc(16px - var(--slot-out,0px))}
  .slot-nw{left:calc(4px - var(--slot-out,0px));top:calc(16px - var(--slot-out,0px))}
  .b-slots { font-size: .42rem; top: calc(50% + var(--b-label-y, 24px) + 14px); }

  /* Flex Squad on-map overlay: shrink further so it doesn't crowd the map */
  .flex-box { padding: 4px 6px; gap: 2px; }
  .flex-box-title { font-size: .4rem; letter-spacing: 1px; }
  .flex-box-count { font-size: .46rem; }
  .flex-box-list { gap: 3px; min-height: 16px; }

  /* Plan area */
  .plan-area { padding: 12px; gap: 12px; }
  .assign-grid { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 6px; }

  /* Phase plan rows */
  .pr { font-size: .77rem; }
  .pr-name { min-width: 80px; font-size: .73rem; }

  /* Visit badge + lang btn in header: wrap nicely */
  .visit-badge { font-size: .62rem; padding: 2px 9px; }
  .lang-toggle-btn { font-size: .68rem; padding: 4px 9px; }
}

/* ── VISITOR COUNTER ── */
.visit-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--muted);padding:3px 12px;border-radius:14px;
  font-size:.68rem;letter-spacing:1px;white-space:nowrap;
}
.visit-badge .vc-num{
  color:#ffb347;font-family:'Orbitron',monospace;font-size:.75rem;font-weight:700;
  min-width:2ch;display:inline-block;
}
.visit-badge .vc-dot{
  width:5px;height:5px;border-radius:50%;background:#39ff14;
  display:inline-block;animation:vcPulse 2s ease-in-out infinite;flex-shrink:0;
}
@keyframes vcPulse{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:1;transform:scale(1.4);}}
/* ── LANG ── */
.lang-de,.lang-fr{display:none !important;}
[data-lang="de"] .lang-en{display:none !important;}
[data-lang="de"] .lang-fr{display:none !important;}
[data-lang="de"] span.lang-de{display:inline !important;}
[data-lang="de"] p.lang-de{display:block !important;}
[data-lang="de"] div.lang-de{display:block !important;}
[data-lang="de"] li.lang-de{display:list-item !important;}
[data-lang="fr"] .lang-en{display:none !important;}
[data-lang="fr"] .lang-de{display:none !important;}
[data-lang="fr"] span.lang-fr{display:inline !important;}
[data-lang="fr"] p.lang-fr{display:block !important;}
[data-lang="fr"] div.lang-fr{display:block !important;}
[data-lang="fr"] li.lang-fr{display:list-item !important;}
.lang-toggle-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#5a7090;padding:5px 11px;border-radius:6px;font-size:.74rem;
  cursor:pointer;font-family:'Exo 2',sans-serif;
  transition:all .2s;white-space:nowrap;line-height:1;
}
.lang-toggle-btn:hover{border-color:#e8720c;color:#ffb347;}

/* ── PHASE MAP TOGGLE ── */
.map-phase-toggle {
  display: flex; gap: 4px; margin-bottom: 8px; align-items: center;
  justify-content: center; position: relative;
}
.map-phase-btn {
  font-family: 'Orbitron', monospace; font-size: .62rem; letter-spacing: 1px;
  padding: 5px 14px; border-radius: 6px; border: 1px solid var(--border);
  background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer;
  transition: all .2s;
}
.map-phase-btn:hover { background: rgba(232,114,12,.1); }
.map-phase-btn.active { background: rgba(232,114,12,.15); border-color: rgba(232,114,12,.4); color: var(--accent2); }
.btn-png { font-size: .6rem; padding: 4px 10px; position: absolute; right: 0; }

/* ── SIDE SWITCH (Start LINKS / RECHTS) ── */
.side-switch-toggle {
  display: flex; gap: 6px; margin-bottom: 8px; align-items: center;
  justify-content: center; flex-wrap: wrap;
}
.side-switch-btn {
  font-family: 'Orbitron', monospace; font-size: .62rem; letter-spacing: 1px;
  padding: 6px 16px; border-radius: 6px; border: 1px solid var(--border);
  background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer;
  transition: all .2s;
}
.side-switch-btn:hover { background: rgba(80,140,255,.1); }
.side-switch-btn.active { background: rgba(80,140,255,.15); border-color: rgba(80,140,255,.5); color: #88aaff; }
.btn-copy-side { font-size: .6rem; padding: 6px 14px; }
.map-container.side-l .sz-left,
.map-container.side-r .sz-right {
  box-shadow: 0 0 18px 4px rgba(80,140,255,.5);
  border-color: rgba(80,140,255,.9);
  background: rgba(80,140,255,.18);
}
.phase2-glow .b-node {
  box-shadow: 0 0 12px 3px rgba(255,136,68,.5), 0 2px 8px rgba(0,0,0,.6) !important;
  border-color: rgba(255,136,68,.8) !important;
}
.phase2-arrow {
  position: absolute; z-index: 4; pointer-events: none;
}
.phase2-arrow line {
  stroke: rgba(0,200,255,.6); stroke-width: 2; stroke-dasharray: 6 3;
}
.phase2-arrow polygon {
  fill: rgba(0,200,255,.8);
}
.phase2-remaining .b-tag { opacity: .55; }
/* Phase-2 auto-suggested moves (⚙) vs. explicit assignments */
.b-tag-auto { border-style: dashed; opacity: .85; }
.ph2-auto-mark { color: #ffcf85; margin-right: 2px; font-size: .85em; }
.phase2-legend {
  position: absolute; left: 8px; bottom: 8px; z-index: 6;
  font-size: .5rem; color: rgba(255,255,255,.55);
  background: rgba(5,8,15,.6); padding: 2px 8px; border-radius: 6px;
  font-family: 'Exo 2', sans-serif; letter-spacing: .3px; pointer-events: none;
}

/* ── FLEX SQUAD BOX (Step 3) — on-map overlay, free desert area left of Nuclear Silo ── */
.flex-box {
  position: absolute; z-index: 4;
  left: 25%; top: 45%; width: 20%; max-width: 200px;
  margin: 0; padding: 4px 6px;
  background: rgba(10,14,22,.72); border: 1px dashed rgba(255,215,0,.35); border-radius: 6px;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .18s, background .18s;
}
.flex-box.drop-over { border-color: rgba(255,215,0,.55); background: rgba(255,215,0,.1); }
.flex-box-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.flex-box-title { font-family: 'Orbitron', monospace; font-size: .5rem; letter-spacing: 1.5px; color: #ffd700; text-transform: uppercase; }
.flex-box-count { font-size: .58rem; color: var(--muted); }
.flex-box-sub { display: none; }
.flex-box-list { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; }

/* ── KK POWER SWAP HINTS (Step 3, under map) ── */
.kk-hints { margin: 10px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.kk-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,179,71,.08); border: 1px solid rgba(255,179,71,.25);
  font-size: .74rem; color: #ffd9a8;
}
.kk-hint-text { flex: 1; line-height: 1.4; }
.kk-hint-btn {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(255,179,71,.5);
  background: rgba(255,179,71,.16); color: #ffd9a8; cursor: pointer;
  font-family: 'Orbitron', monospace; font-size: .6rem; letter-spacing: 1px;
}
.kk-hint-btn:hover { background: rgba(255,179,71,.28); }

/* ── ALLIANCE LOGIN ── */
.ds-login-section{border-bottom:1px solid var(--border);padding-bottom:12px;}
.ds-login-form{display:flex;flex-direction:column;gap:5px;margin-top:4px;}
.ds-login-input{background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:6px 9px;border-radius:7px;font-family:'Exo 2',sans-serif;font-size:.8rem;width:100%;}
.ds-login-input:focus{outline:none;border-color:rgba(232,114,12,.4);}
.ds-login-btn{background:rgba(232,114,12,.15);border:1px solid rgba(232,114,12,.3);color:var(--accent2);padding:7px;border-radius:7px;cursor:pointer;font-size:.7rem;font-family:'Orbitron',monospace;letter-spacing:1px;transition:background .15s;}
.ds-login-btn:hover{background:rgba(232,114,12,.28);}
.ds-user-bar{display:flex;align-items:center;gap:7px;margin-top:2px;}
.ds-user-name{flex:1;font-size:.78rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ds-logout-btn{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);padding:3px 9px;border-radius:5px;cursor:pointer;font-size:.62rem;flex-shrink:0;transition:all .15s;}
.ds-logout-btn:hover{border-color:rgba(255,100,100,.35);color:#ff8888;}
.ds-member-list{display:flex;flex-direction:column;gap:1px;max-height:190px;overflow-y:auto;margin-top:6px;}
.ds-member-list::-webkit-scrollbar{width:3px;}
.ds-member-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px;}
.ds-member-item{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:all .12s;user-select:none;}
.ds-member-item:hover:not(.ds-added){background:rgba(232,114,12,.09);border-color:rgba(232,114,12,.2);}
.ds-member-item.ds-added{opacity:.38;cursor:default;}
.ds-member-icon{font-size:.7rem;color:var(--muted);flex-shrink:0;width:12px;}
.ds-member-name{flex:1;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ds-member-sub{display:flex;align-items:center;gap:3px;font-size:.62rem;color:var(--muted);cursor:pointer;white-space:nowrap;margin-left:auto;flex-shrink:0;transition:color .15s;}
.ds-member-sub:hover{color:var(--accent2);}
.ds-member-sub input{cursor:pointer;accent-color:rgba(232,114,12,.7);}
.ds-member-pwr{font-family:'Orbitron',monospace;font-size:.52rem;color:var(--muted);flex-shrink:0;}
.ds-import-all{width:100%;margin-top:6px;background:rgba(60,180,100,.1);border:1px solid rgba(60,180,100,.3);color:#4dc870;padding:6px;border-radius:7px;cursor:pointer;font-size:.65rem;font-family:'Orbitron',monospace;letter-spacing:1px;transition:background .15s;}
.ds-import-all:hover{background:rgba(60,180,100,.22);}
.ds-login-err{font-size:.7rem;color:#ff8888;margin-top:4px;display:none;}
.ds-register-link{
  display:block;text-align:center;margin-top:8px;
  padding:6px 10px;border-radius:7px;
  border:1px solid rgba(100,180,255,.28);background:rgba(100,180,255,.04);
  color:rgba(140,200,255,.8);font-family:'Orbitron',monospace;font-size:.62rem;
  letter-spacing:1.5px;text-decoration:none;transition:all .16s;
}
.ds-register-link:hover{border-color:rgba(100,180,255,.5);background:rgba(100,180,255,.1);color:#c0e8ff}
/* Auth tabs (sidebar + cinematic) */
.ds-auth-tabs,.ps-auth-tabs{display:flex;gap:4px;margin-bottom:8px;}
.ds-auth-tab,.ps-auth-tab{
  flex:1;padding:5px 8px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-family:'Orbitron',monospace;
  font-size:.6rem;letter-spacing:1px;cursor:pointer;transition:all .15s;
}
.ds-auth-tab.is-active,.ps-auth-tab.is-active{
  border-color:rgba(232,114,12,.55);background:rgba(232,114,12,.12);color:var(--accent2);
}
.ds-auth-tab:hover:not(.is-active),.ps-auth-tab:hover:not(.is-active){
  border-color:rgba(232,114,12,.3);color:var(--text);
}
/* Alliance dropdown field */
.ds-alliance-field,.ps-alliance-field{margin-top:4px;}
.ds-alliance-field select,.ps-alliance-field select{
  width:100%;background:var(--panel2);border:1px solid var(--border);
  color:var(--text);padding:6px 9px;border-radius:6px;
  font-family:'Exo 2',sans-serif;font-size:.76rem;cursor:pointer;outline:none;
}
.ds-alliance-field select:focus,.ps-alliance-field select:focus{border-color:rgba(232,114,12,.4);}
.ds-alliance-hint,.ps-alliance-hint{
  font-size:.62rem;color:var(--muted);margin-top:4px;text-align:center;
  font-style:italic;letter-spacing:.5px;
}
/* Cinematic alliance dropdown */
.ps-alliance-field select{
  background:rgba(10,10,18,.7);border-color:rgba(232,114,12,.3);
  color:var(--text);padding:7px 10px;border-radius:7px;font-size:.78rem;
}
.ps-alliance-field select:focus{border-color:rgba(232,114,12,.6);}
.ds-members-loading{font-size:.72rem;color:var(--muted);padding:5px 8px;}
.ds-member-search{width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:5px 9px;border-radius:6px;font-family:'Exo 2',sans-serif;font-size:.76rem;margin-top:6px;outline:none;}
.ds-member-search:focus{border-color:rgba(232,114,12,.4);}
.ds-member-search::placeholder{color:var(--muted);}
/* ── COLLAPSIBLE ALLIANCE SECTION ── */
.ds-login-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:4px 0;user-select:none;border-bottom:1px solid transparent;transition:border-color .15s;}
.ds-login-toggle:hover{border-bottom-color:rgba(232,114,12,.2);}
.ds-login-toggle-arrow{font-size:.7rem;color:var(--muted);transition:transform .2s;flex-shrink:0;}
.ds-login-toggle.open .ds-login-toggle-arrow{transform:rotate(90deg);}
.ds-login-body{overflow:hidden;transition:max-height .25s ease,opacity .2s ease;max-height:0;opacity:0;}
.ds-login-body.open{max-height:600px;opacity:1;}

/* ── TEAM SWITCHER (CINEMATIC) ── */
.team-bar{
  display:flex;align-items:stretch;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(8,12,20,.98),rgba(6,10,16,.92));
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:200;
  box-shadow:0 2px 24px rgba(0,0,0,.4);
}
.team-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:13px 16px;cursor:pointer;border:none;background:transparent;
  color:var(--muted);font-family:'Orbitron',monospace;transition:all .22s ease;
  border-bottom:3px solid transparent;margin-bottom:-1px;position:relative;overflow:hidden;
}
.team-tab::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none;
  background:radial-gradient(circle at 50% 100%, currentColor, transparent 70%);
  mix-blend-mode:screen;
}
.team-tab:hover{background:rgba(255,255,255,.03);color:var(--text);}
.team-tab:hover::before{opacity:.08}
.team-tab.active-a{color:#ffb347;border-bottom-color:#ffb347;background:linear-gradient(180deg,rgba(255,179,71,.02),rgba(255,179,71,.12));}
.team-tab.active-a::before{opacity:.18}
.team-tab.active-b{color:#64b4ff;border-bottom-color:#64b4ff;background:linear-gradient(180deg,rgba(100,180,255,.02),rgba(100,180,255,.12));}
.team-tab.active-b::before{opacity:.18}
.team-tab-label{font-size:.78rem;letter-spacing:3px;font-weight:700;text-shadow:0 0 14px currentColor;position:relative;z-index:1;}
.team-tab:not(.active-a):not(.active-b) .team-tab-label{text-shadow:none;}
.team-tab-time{font-size:.6rem;color:inherit;opacity:.7;letter-spacing:1px;position:relative;z-index:1;}
.team-tab-count{
  font-size:.58rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:2px 9px;margin-top:2px;font-family:'Exo 2',sans-serif;
  letter-spacing:.5px;position:relative;z-index:1;
}
.team-tab.active-a .team-tab-count{background:rgba(255,179,71,.15);border-color:rgba(255,179,71,.35);color:#ffd6a1}
.team-tab.active-b .team-tab-count{background:rgba(100,180,255,.15);border-color:rgba(100,180,255,.35);color:#a9d6ff}
.team-divider{width:1px;background:var(--border);flex-shrink:0;}

/* ═══ GLOBAL CINEMATIC AMBIENCE ══════════════════════════════
   A persistent dunes + particles + radar layer behind all steps,
   so every wizard step feels like the landing page. */
.desert-ambient{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  opacity:1;transition:opacity .8s ease;
}
.desert-ambient .da-dunes{
  position:absolute;bottom:0;left:-10%;right:-10%;height:42%;opacity:.4;
}
.desert-ambient .da-dunes svg{width:100%;height:100%;display:block}
.desert-ambient .da-dunes path.d1{fill:url(#duneGradGlobal1)}
.desert-ambient .da-dunes path.d2{fill:rgba(232,114,12,.06)}
.desert-ambient .da-particles{position:absolute;inset:0;overflow:hidden}
.desert-ambient .da-particles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(255,179,71,.32);
  animation:sandFloat linear infinite;
}
.desert-ambient .da-radar{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  width:min(780px,85vw);height:min(780px,85vw);
  border:1px solid rgba(232,114,12,.08);border-radius:50%;
  animation:radarPulse 6s ease-in-out infinite;opacity:.55;
}
.desert-ambient .da-radar::before,
.desert-ambient .da-radar::after{
  content:'';position:absolute;inset:10%;border-radius:50%;
  border:1px solid rgba(232,114,12,.05);
}
.desert-ambient .da-radar::after{inset:28%;border-color:rgba(232,114,12,.04)}
/* Hide global ambient while the intro or team-select is visible
   (they have their own local dunes/radar). */
body.intro-visible .desert-ambient,
body.ts-visible .desert-ambient{opacity:0}

/* ═══ CINEMATIC MODE: hide chrome on wizard ════════════════════
   The wizard (wiz-1/2/3) now looks like the landing page —
   hide the standard header, team-bar and wiz-bar, replace with
   floating cinematic controls. */
body.wiz-1 header,
body.wiz-2 header,
body.wiz-3 header,
body.wiz-4 header{display:none !important}
body.wiz-1 .team-bar,
body.wiz-2 .team-bar,
body.wiz-3 .team-bar,
body.wiz-4 .team-bar{display:none !important}
body.wiz-1 .wiz-bar,
body.wiz-2 .wiz-bar,
body.wiz-3 .wiz-bar,
body.wiz-4 .wiz-bar{display:none !important}
/* Hide while in intro / team-select flows too */
body.intro-visible .cine-chrome,
body.ts-visible .cine-chrome{display:none !important}
/* Give the page room for floating pills */
body.wiz-1 .page,
body.wiz-2 .page,
body.wiz-3 .page,
body.wiz-4 .page{min-height:100vh;padding-top:82px}
body.wiz-1 .content,
body.wiz-2 .content,
body.wiz-3 .content,
body.wiz-4 .content{padding-top:4px}
/* Cinematic sidebar styling on wizard (glass morphism + desert glow) */
body.wiz-2 aside.sidebar{
  background:linear-gradient(180deg,rgba(8,12,20,.65),rgba(8,12,20,.45));
  backdrop-filter:blur(14px);
  border-right:1px solid rgba(232,114,12,.18);
  box-shadow:2px 0 30px rgba(0,0,0,.3);
}
body.wiz-2 aside.sidebar .sec-title{text-shadow:0 0 10px rgba(232,114,12,.22)}
body.wiz-2 aside.sidebar .player-chip{
  background:rgba(17,29,44,.72);backdrop-filter:blur(6px);
  transition:border-color .2s,transform .15s,box-shadow .2s;
}
body.wiz-2 aside.sidebar .player-chip:hover{
  border-color:rgba(232,114,12,.4);transform:translateX(2px);
  box-shadow:0 4px 14px rgba(232,114,12,.14);
}
body.wiz-2 aside.sidebar .tactic-btn{
  transition:all .2s;
}
body.wiz-2 aside.sidebar .tactic-btn:hover{
  box-shadow:0 0 18px rgba(232,114,12,.22);
}
body.wiz-2 aside.sidebar .btn-auto{
  background:linear-gradient(135deg,rgba(232,114,12,.28),rgba(255,179,71,.15)) !important;
  border:1.5px solid var(--accent) !important;color:var(--accent2) !important;
  font-weight:700;letter-spacing:1px;transition:all .2s;
}
body.wiz-2 aside.sidebar .btn-auto:hover{
  transform:scale(1.02);box-shadow:0 0 22px rgba(232,114,12,.35);
}

/* ─── Floating cinematic chrome ─── */
.cine-chrome{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:16px 22px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;pointer-events:none;
  animation:ccFadeDown .6s ease forwards;
}
.cine-chrome > *{pointer-events:auto}
@keyframes ccFadeDown{
  from{opacity:0;transform:translateY(-10px)}
  to  {opacity:1;transform:none}
}

.cine-left,.cine-right{display:flex;align-items:center;gap:8px}
.cine-pill{
  background:rgba(8,12,20,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);border-radius:22px;
  padding:7px 14px;color:var(--muted);cursor:pointer;
  font-family:'Orbitron',monospace;font-size:.62rem;letter-spacing:2.5px;
  display:flex;align-items:center;gap:6px;transition:all .18s;
  text-decoration:none;
}
.cine-pill:hover{color:var(--text);border-color:rgba(232,114,12,.35);
  box-shadow:0 0 18px rgba(232,114,12,.15)}

/* Step indicator in center */
.cine-center{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:199;
  display:flex;align-items:center;gap:0;
  background:rgba(8,12,20,.75);backdrop-filter:blur(12px);
  border:1px solid rgba(232,114,12,.2);border-radius:26px;
  padding:6px 10px;box-shadow:0 4px 28px rgba(0,0,0,.4),0 0 32px rgba(232,114,12,.08);
  animation:ccFadeDown .6s .1s backwards;
}
body.intro-visible .cine-center,
body.ts-visible .cine-center{display:none !important}
.cc-dot{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);border:1.5px solid var(--border);
  color:var(--muted);font-family:'Orbitron',monospace;font-size:.72rem;font-weight:700;
  transition:all .2s;
}
.cc-dot:hover{color:var(--text);border-color:rgba(255,255,255,.22)}
.cc-dot.done{
  background:rgba(60,180,100,.15);border-color:rgba(60,180,100,.5);color:#4dc870;
}
.cc-dot.active{
  background:rgba(232,114,12,.22);border-color:var(--accent);color:var(--accent2);
  box-shadow:0 0 0 3px rgba(232,114,12,.18),0 0 18px rgba(232,114,12,.3);
}
.cc-bar{width:22px;height:2px;background:var(--border);margin:0 4px;transition:background .3s}
.cc-bar.done{background:rgba(60,180,100,.5)}
.cc-bar.active{background:rgba(232,114,12,.45)}
.cc-label{
  padding:0 12px 0 10px;font-family:'Orbitron',monospace;font-size:.6rem;
  letter-spacing:2px;color:var(--accent2);white-space:nowrap;
  text-shadow:0 0 10px rgba(255,179,71,.3);
}

/* Cinematic team switch pill (top-right corner) */
.cine-team{
  display:flex;align-items:center;background:rgba(8,12,20,.72);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);
  border-radius:22px;padding:4px;gap:2px;
}
.cine-team-btn{
  background:transparent;border:none;padding:6px 14px;border-radius:18px;
  color:var(--muted);cursor:pointer;
  font-family:'Orbitron',monospace;font-size:.62rem;letter-spacing:2px;font-weight:700;
  display:flex;align-items:center;gap:5px;transition:all .18s;
}
.cine-team-btn:hover{color:var(--text)}
.cine-team-btn.active-a{
  background:linear-gradient(135deg,rgba(255,179,71,.18),rgba(255,179,71,.08));
  color:#ffb347;text-shadow:0 0 10px rgba(255,179,71,.4);
  box-shadow:0 0 14px rgba(255,179,71,.18);
}
.cine-team-btn.active-b{
  background:linear-gradient(135deg,rgba(100,180,255,.18),rgba(100,180,255,.08));
  color:#64b4ff;text-shadow:0 0 10px rgba(100,180,255,.4);
  box-shadow:0 0 14px rgba(100,180,255,.18);
}
.cine-team-count{font-size:.52rem;opacity:.75;letter-spacing:1px}

@media(max-width:720px){
  .cine-chrome{padding:10px 12px;gap:8px}
  .cine-pill{padding:6px 10px;font-size:.54rem;letter-spacing:1.5px}
  .cine-center{top:66px;padding:4px 8px}
  .cc-dot{width:26px;height:26px;font-size:.66rem}
  .cc-bar{width:14px}
  .cc-label{padding:0 8px;font-size:.52rem;letter-spacing:1px}
  .cine-team-btn{padding:5px 10px;font-size:.54rem;letter-spacing:1.5px}
  body.wiz-1 .page,
  body.wiz-2 .page,
  body.wiz-3 .page{padding-top:112px}
}

/* ─── Entrance animations on step content ─── */
@keyframes cineFadeUp{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}
body.wiz-1 .step-hero.wiz-s1,
body.wiz-2 .step-hero.wiz-s2,
body.wiz-3 .step-hero.wiz-s3,
body.wiz-4 .step-hero.wiz-s4{animation:cineFadeUp .55s .05s both}
body.wiz-1 .ps-stage,
body.wiz-2 .ra-stage,
body.wiz-3 .map-wrap,
body.wiz-3 .wiz-strip,
body.wiz-3 .flex-box,
body.wiz-3 .plan-area,
body.wiz-4 .ex-stage{animation:cineFadeUp .6s .2s both}

/* ─── Cinematic wiz-nav (bottom bar) ─── */
body.wiz-1 .wiz-nav,
body.wiz-2 .wiz-nav,
body.wiz-3 .wiz-nav{
  background:linear-gradient(180deg,rgba(5,8,15,.4) 0%,rgba(5,8,15,.92) 50%,rgba(5,8,15,.98) 100%);
  backdrop-filter:blur(14px);border-top:1px solid rgba(232,114,12,.18);
  box-shadow:0 -4px 30px rgba(0,0,0,.5);
}
body.wiz-1 .wiz-btn-next,
body.wiz-2 .wiz-btn-next,
body.wiz-3 .wiz-btn-next{
  border:2px solid var(--accent);
  background:linear-gradient(135deg,rgba(232,114,12,.3),rgba(255,179,71,.18));
  color:var(--accent2);font-weight:700;letter-spacing:3px;
  box-shadow:0 0 22px rgba(232,114,12,.2);position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .3s,background .3s;
}
body.wiz-1 .wiz-btn-next::after,
body.wiz-2 .wiz-btn-next::after,
body.wiz-3 .wiz-btn-next::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18),transparent 70%);
  transform:translateX(-120%);transition:transform .7s;
}
body.wiz-1 .wiz-btn-next:hover,
body.wiz-2 .wiz-btn-next:hover,
body.wiz-3 .wiz-btn-next:hover{
  transform:scale(1.04);box-shadow:0 0 36px rgba(232,114,12,.4);
  background:linear-gradient(135deg,rgba(232,114,12,.45),rgba(255,179,71,.28));
}
body.wiz-1 .wiz-btn-next:hover::after,
body.wiz-2 .wiz-btn-next:hover::after,
body.wiz-3 .wiz-btn-next:hover::after{transform:translateX(120%)}

/* ─── Cinematic content panels (glass morphism for wizard) ─── */
body.wiz-3 .wiz-strip{
  background:linear-gradient(135deg,rgba(13,21,32,.72),rgba(17,29,44,.52)) !important;
  backdrop-filter:blur(10px);
  border:1px solid rgba(232,114,12,.22) !important;
  box-shadow:0 6px 28px rgba(0,0,0,.3);
}
body.wiz-3 .map-container{
  box-shadow:0 0 60px rgba(232,114,12,.15),0 12px 40px rgba(0,0,0,.5);
  border:1px solid rgba(232,114,12,.25);
}
body.wiz-3 .b-node{
  box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 12px rgba(232,114,12,.15);
}
body.wiz-3 .plan-area .ac,
body.wiz-3 .plan-area .pg,
body.wiz-3 .plan-area > div{
  transition:all .25s;
}

/* ═══ DESERT INTRO (CINEMATIC HERO) ═══════════════════════ */
.desert-intro{
  position:fixed;inset:0;z-index:500;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(232,114,12,.12), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(255,179,71,.06), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(100,180,255,.04), transparent 60%),
    var(--bg);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:24px;text-align:center;overflow:hidden;
  transition:opacity .8s ease,transform .8s ease,filter .8s ease;
}
body.intro-visible .desert-intro{display:flex}
.desert-intro.hiding{
  opacity:0;transform:scale(1.08);filter:blur(8px);pointer-events:none;
}

/* Animated sand-dune backdrop */
.di-dunes{
  position:absolute;bottom:0;left:-10%;right:-10%;height:45%;pointer-events:none;
  opacity:.5;
}
.di-dunes svg{width:100%;height:100%;display:block}
.di-dunes path{
  fill:url(#duneGrad);
}

/* Floating particles (sand) */
.di-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.di-particles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(255,179,71,.4);
  animation:sandFloat linear infinite;
}
@keyframes sandFloat{
  0%{transform:translateY(100vh) translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-10vh) translateX(60px);opacity:0}
}

/* Radar-sweep circle behind title */
.di-radar{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(680px,85vw);height:min(680px,85vw);pointer-events:none;
  border:1px solid rgba(232,114,12,.12);border-radius:50%;
  animation:radarPulse 4s ease-in-out infinite;
}
.di-radar::before,.di-radar::after{
  content:'';position:absolute;inset:8%;border-radius:50%;
  border:1px solid rgba(232,114,12,.08);
}
.di-radar::after{inset:22%;border-color:rgba(232,114,12,.06)}
@keyframes radarPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,114,12,.05)}
  50%{box-shadow:0 0 80px 10px rgba(232,114,12,.08)}
}

.di-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}

.di-badge{
  font-family:'Orbitron',monospace;font-size:.6rem;letter-spacing:8px;
  color:var(--accent);margin-bottom:24px;opacity:0;
  padding:6px 16px;border:1px solid rgba(232,114,12,.3);border-radius:20px;
  background:rgba(232,114,12,.05);
  animation:diFadeIn .8s .1s forwards;
}
.di-title{
  font-family:'Orbitron',monospace;font-size:clamp(2.4rem,8vw,5rem);
  font-weight:900;letter-spacing:6px;color:var(--accent2);
  margin-bottom:8px;opacity:0;line-height:1;
  text-shadow:0 0 40px rgba(232,114,12,.4),0 4px 16px rgba(0,0,0,.8);
  animation:diSlideDown 1s .2s forwards;
}
.di-title .w2{
  display:inline-block;color:var(--text);
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,#ffb347 0%,#e8720c 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.di-subtitle{
  font-size:clamp(.95rem,2.2vw,1.25rem);color:var(--text);opacity:0;
  margin-bottom:6px;letter-spacing:3px;font-weight:300;
  animation:diFadeIn .8s .55s forwards;
}
.di-tagline{
  font-size:clamp(.85rem,1.6vw,1.02rem);color:var(--muted);opacity:0;
  margin:14px 0 34px;max-width:560px;line-height:1.7;
  animation:diFadeIn .8s .85s forwards;
}
.di-tagline strong{color:var(--accent2);font-weight:600}

.di-teams{
  display:flex;gap:14px;margin-bottom:30px;opacity:0;flex-wrap:wrap;justify-content:center;
  animation:diFadeIn .8s 1.05s forwards;
}
.di-team-btn{
  background:var(--panel2);border:2px solid var(--border);
  color:var(--muted);padding:12px 28px;border-radius:10px;
  font-family:'Orbitron',monospace;font-size:.78rem;letter-spacing:3px;
  cursor:pointer;transition:all .25s;display:flex;flex-direction:column;gap:3px;
  align-items:center;min-width:140px;
}
.di-team-btn small{
  font-size:.55rem;letter-spacing:1.5px;opacity:.7;font-weight:400;
}
.di-team-btn:hover{transform:translateY(-2px)}
.di-team-btn.sel-a{
  border-color:#ffb347;color:#ffb347;background:rgba(255,179,71,.1);
  box-shadow:0 0 30px rgba(255,179,71,.15);
}
.di-team-btn.sel-b{
  border-color:#64b4ff;color:#64b4ff;background:rgba(100,180,255,.1);
  box-shadow:0 0 30px rgba(100,180,255,.15);
}

.di-cta{
  padding:18px 52px;border-radius:12px;border:2px solid var(--accent);
  background:linear-gradient(135deg,rgba(232,114,12,.25),rgba(255,179,71,.15));
  color:var(--accent2);font-family:'Orbitron',monospace;font-size:.92rem;
  letter-spacing:5px;font-weight:700;text-transform:uppercase;cursor:pointer;
  opacity:0;transition:transform .2s,box-shadow .3s,background .3s;
  animation:diFadeIn .8s 1.3s forwards,diPulse 2.5s 2.2s infinite;
  position:relative;overflow:hidden;
}
.di-cta::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18),transparent 70%);
  transform:translateX(-120%);transition:transform .7s;
}
.di-cta:hover{
  transform:scale(1.05);box-shadow:0 0 50px rgba(232,114,12,.45);
  background:linear-gradient(135deg,rgba(232,114,12,.4),rgba(255,179,71,.25));
}
.di-cta:hover::after{transform:translateX(120%)}
.di-cta:active{transform:scale(.97)}

.di-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  font-size:.65rem;color:var(--muted);opacity:0;letter-spacing:3px;
  font-family:'Orbitron',monospace;
  animation:diFadeIn .8s 1.6s forwards,hintBlink 2.5s 2.4s infinite;
}
.di-skip{
  position:absolute;top:18px;right:18px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--muted);padding:7px 14px;border-radius:7px;
  font-size:.65rem;cursor:pointer;opacity:0;
  font-family:'Orbitron',monospace;letter-spacing:2px;
  animation:diFadeIn .8s 1.6s forwards;
  transition:all .15s;z-index:5;
}
.di-skip:hover{color:var(--text);border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}

.di-lang-tr{position:absolute;top:18px;left:18px;opacity:0;animation:diFadeIn .8s 1.6s forwards;z-index:5}

@keyframes diFadeIn{to{opacity:1}}
@keyframes diSlideDown{
  from{opacity:0;transform:translateY(-24px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes diPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,114,12,.5)}
  50%{box-shadow:0 0 0 20px rgba(232,114,12,0)}
}
@keyframes hintBlink{0%,100%{opacity:.3}50%{opacity:1}}

/* When intro is visible, hide app shell so only intro shows */
body.intro-visible{overflow:hidden}
body.intro-visible .team-bar,
body.intro-visible .wiz-bar,
body.intro-visible .page,
body.intro-visible .wiz-nav{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.2,.9,.3,1) .2s,transform .9s cubic-bezier(.2,.9,.3,1) .2s;
  pointer-events:none;
}
body:not(.intro-visible) .team-bar,
body:not(.intro-visible) .wiz-bar,
body:not(.intro-visible) .page,
body:not(.intro-visible) .wiz-nav{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
body.intro-visible header{opacity:0;pointer-events:none;transition:opacity .4s}

@media(max-width:720px){
  .di-title{letter-spacing:3px}
  .di-badge{font-size:.55rem;letter-spacing:5px;padding:5px 12px}
  .di-subtitle{letter-spacing:2px}
  .di-team-btn{padding:10px 20px;min-width:120px;font-size:.7rem}
  .di-cta{padding:15px 34px;font-size:.78rem;letter-spacing:3px}
  .di-skip{top:12px;right:12px;padding:5px 10px;font-size:.58rem}
  .di-hint{bottom:18px;font-size:.58rem}
}

/* ═══ TEAM SELECT SCREEN ═════════════════════════════════ */
.desert-team-select{
  position:fixed;inset:0;z-index:480;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,179,71,.08), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(100,180,255,.08), transparent 60%),
    var(--bg);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:30px 24px;text-align:center;overflow:auto;
  transition:opacity .5s ease,transform .5s ease;
}
body.ts-visible .desert-team-select{display:flex;animation:tsFadeIn .5s ease forwards}
.desert-team-select.hiding{opacity:0;transform:translateY(-14px);pointer-events:none}
@keyframes tsFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Hide app shell when intro OR team-select is visible */
body.intro-visible header,
body.ts-visible header{opacity:0;pointer-events:none;transition:opacity .4s}
body.ts-visible{overflow:hidden}
body.ts-visible .team-bar,
body.ts-visible .wiz-bar,
body.ts-visible .page,
body.ts-visible .wiz-nav{
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .5s,transform .5s;
}

.ts-badge{
  font-family:'Orbitron',monospace;font-size:.62rem;letter-spacing:5px;
  color:var(--muted);margin:0 auto 14px;
  padding:5px 14px;border:1px solid var(--border);border-radius:16px;
  display:inline-block;text-align:center;
}
.ts-title{
  font-family:'Orbitron',monospace;font-size:clamp(1.4rem,4.5vw,2.3rem);
  font-weight:900;letter-spacing:3px;color:var(--text);
  margin:0 auto 10px;line-height:1.15;text-align:center;width:100%;
}
.ts-sub{
  font-size:clamp(.88rem,1.8vw,1.05rem);color:var(--muted);
  margin:0 auto 38px;max-width:540px;line-height:1.6;text-align:center;
}
.ts-sub strong{color:var(--accent2)}

.ts-cards{
  display:grid;grid-template-columns:repeat(2,minmax(240px,300px));gap:22px;
  margin:0 auto 34px;max-width:680px;width:100%;
  justify-content:center;  /* keep columns centered inside the grid container */
}
.ts-card{
  background:var(--panel);border:2px solid var(--border);border-radius:14px;
  padding:26px 20px;cursor:pointer;transition:all .3s cubic-bezier(.3,.8,.4,1.2);
  display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;
  overflow:hidden;
}
.ts-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(135deg, transparent 40%, currentColor 120%);
  pointer-events:none;
}
.ts-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.ts-card-label{font-family:'Orbitron',monospace;font-size:1.8rem;font-weight:900;letter-spacing:3px}
.ts-card-name{font-family:'Orbitron',monospace;font-size:.75rem;letter-spacing:3px;color:var(--muted)}
.ts-card-stats{
  display:flex;gap:12px;margin-top:6px;flex-wrap:wrap;justify-content:center;
  font-size:.72rem;color:var(--muted);
}
.ts-card-stat{
  padding:4px 10px;background:rgba(255,255,255,.04);border-radius:12px;
  border:1px solid var(--border);
}
.ts-card-stat b{color:var(--text);font-family:'Orbitron',monospace;font-size:.78rem}
.ts-card-empty{font-size:.75rem;color:var(--muted);font-style:italic;padding:4px 8px}
.ts-card-check{
  position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
  background:rgba(60,180,100,.2);border:2px solid rgba(60,180,100,.5);
  display:flex;align-items:center;justify-content:center;color:#4dc870;font-size:.8rem;
  opacity:0;transform:scale(.5);transition:all .2s;
}

/* Team A card */
.ts-card-a{color:#ffb347}
.ts-card-a .ts-card-label{color:#ffb347;text-shadow:0 0 20px rgba(255,179,71,.4)}
.ts-card-a.selected{
  border-color:#ffb347;background:rgba(255,179,71,.08);
  box-shadow:0 0 40px rgba(255,179,71,.25);transform:translateY(-2px);
}
.ts-card-a.selected::before{opacity:.08}
.ts-card-a.selected .ts-card-check{opacity:1;transform:scale(1)}

/* Team B card */
.ts-card-b{color:#64b4ff}
.ts-card-b .ts-card-label{color:#64b4ff;text-shadow:0 0 20px rgba(100,180,255,.4)}
.ts-card-b.selected{
  border-color:#64b4ff;background:rgba(100,180,255,.08);
  box-shadow:0 0 40px rgba(100,180,255,.25);transform:translateY(-2px);
}
.ts-card-b.selected::before{opacity:.08}
.ts-card-b.selected .ts-card-check{opacity:1;transform:scale(1)}

.ts-help{
  font-size:.75rem;color:var(--muted);margin:0 auto 26px;max-width:500px;line-height:1.6;
  background:rgba(255,255,255,.03);padding:12px 18px;border-radius:8px;
  border:1px solid rgba(232,114,12,.25);border-top:2px solid var(--accent);
  text-align:center;
}
.ts-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;margin:0 auto}
.ts-back{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--muted);padding:14px 22px;border-radius:9px;
  font-family:'Orbitron',monospace;font-size:.72rem;letter-spacing:2px;cursor:pointer;
  transition:all .15s;
}
.ts-back:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.ts-continue{
  padding:15px 36px;border-radius:9px;border:2px solid var(--accent);
  background:linear-gradient(135deg,rgba(232,114,12,.25),rgba(255,179,71,.15));
  color:var(--accent2);font-family:'Orbitron',monospace;font-size:.82rem;
  letter-spacing:3px;font-weight:700;cursor:pointer;transition:all .2s;
}
.ts-continue:hover{transform:scale(1.03);box-shadow:0 0 30px rgba(232,114,12,.35)}

@media(max-width:720px){
  .ts-cards{grid-template-columns:1fr;gap:14px;max-width:340px}
  .ts-card{padding:20px 16px}
  .ts-card-label{font-size:1.5rem}
  .ts-title{letter-spacing:2px}
}

/* ═══ STEP HERO BANNERS (shown at top of each step content) ═══ */
.step-hero{
  margin:18px 16px 0;padding:20px 26px;border-radius:12px;
  background:linear-gradient(135deg,rgba(232,114,12,.08),rgba(255,179,71,.04));
  border:1px solid rgba(232,114,12,.2);
  display:flex;align-items:center;gap:18px;
}
.step-hero-num{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-size:1.6rem;font-weight:900;
  background:linear-gradient(135deg,rgba(232,114,12,.3),rgba(255,179,71,.15));
  border:2px solid var(--accent);color:var(--accent2);
  box-shadow:0 0 24px rgba(232,114,12,.25);
}
.step-hero-text{flex:1;min-width:0}
.step-hero-title{
  font-family:'Orbitron',monospace;font-size:1.05rem;letter-spacing:3px;
  color:var(--accent2);margin-bottom:4px;
}
.step-hero-desc{font-size:.82rem;color:var(--muted);line-height:1.5}
.step-hero-desc strong{color:var(--text)}

@media(max-width:720px){
  .step-hero{margin:12px;padding:14px 16px;gap:12px}
  .step-hero-num{width:44px;height:44px;font-size:1.2rem;border-radius:11px}
  .step-hero-title{font-size:.85rem;letter-spacing:2px}
  .step-hero-desc{font-size:.72rem}
}

/* ═══ WIZARD STEPS ══════════════════════════════════════ */
.wiz-bar{
  display:flex;align-items:center;gap:0;padding:16px 28px;
  background:linear-gradient(180deg,rgba(232,114,12,.04),transparent);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:150;
  background-color:rgba(5,8,15,.95);backdrop-filter:blur(8px);
}
.wiz-steps{display:flex;align-items:center;gap:0;flex:1;justify-content:center;max-width:720px;margin:0 auto}
.wiz-step{display:flex;align-items:center;gap:10px;cursor:pointer;flex:1;position:relative;padding:4px 0}
.wiz-step-num{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:2px solid var(--border);
  color:var(--muted);font-family:'Orbitron',monospace;font-size:.8rem;font-weight:700;
  transition:all .2s;
}
.wiz-step-label{
  font-family:'Orbitron',monospace;font-size:.62rem;letter-spacing:1.5px;
  color:var(--muted);line-height:1.2;transition:color .2s;
}
.wiz-step-label small{font-size:.55rem;color:var(--muted);opacity:.7;display:block;font-weight:400;letter-spacing:1px;margin-top:2px}
.wiz-step-line{flex:1;height:2px;background:var(--border);margin:0 6px;transition:background .3s}
.wiz-step.wiz-done .wiz-step-num{background:rgba(60,180,100,.15);border-color:rgba(60,180,100,.5);color:#4dc870}
.wiz-step.wiz-done .wiz-step-line,
.wiz-step.wiz-active .wiz-step-line{background:rgba(232,114,12,.4)}
.wiz-step.wiz-active .wiz-step-num{background:rgba(232,114,12,.2);border-color:var(--accent);color:var(--accent2);box-shadow:0 0 0 4px rgba(232,114,12,.1)}
.wiz-step.wiz-active .wiz-step-label{color:var(--accent2)}
.wiz-step:last-child .wiz-step-line{display:none}

/* Show/hide by step — body gets wiz-1/wiz-2/wiz-3/wiz-4 */
body:not(.wiz-1) .wiz-s1{display:none !important}
body:not(.wiz-2) .wiz-s2{display:none !important}
body:not(.wiz-3) .wiz-s3{display:none !important}
body:not(.wiz-4) .wiz-s4{display:none !important}
body:not(.wiz-3):not(.wiz-4) .wiz-s34{display:none !important}
body.wiz-3 .wiz-s12{display:none !important}
body.wiz-4 .wiz-s12{display:none !important}
body.wiz-1 .wiz-s23{display:none !important}
body.wiz-4 .wiz-s23{display:none !important}

/* Layout tweaks per step */
body.wiz-3 .page{grid-template-columns:1fr !important}
body.wiz-3 aside.sidebar{display:none !important}
body.wiz-4 .page{grid-template-columns:1fr !important}
body.wiz-4 aside.sidebar{display:none !important}
/* Step 1: cinematic picker takes the whole stage — hide sidebar */
body.wiz-1 .page{grid-template-columns:1fr !important}
body.wiz-1 aside.sidebar{display:none !important}
/* Step 2: centered role assignment — hide sidebar too */
body.wiz-2 .page{grid-template-columns:1fr !important}
body.wiz-2 aside.sidebar{display:none !important}
body.wiz-1 .content,
body.wiz-2 .content,
body.wiz-4 .content{padding-bottom:80px}
body.wiz-3 .content{padding-bottom:80px}
body.wiz-1 .sidebar{max-height:none !important}
/* Center the cinematic stages on wide screens */
body.wiz-1 .ps-stage,
body.wiz-2 .ra-stage,
body.wiz-4 .ex-stage{max-width:1040px;margin-left:auto;margin-right:auto}
body.wiz-1 .step-hero,
body.wiz-2 .step-hero,
body.wiz-4 .step-hero{max-width:1040px;margin-left:auto;margin-right:auto}

/* Step 1 welcome card */
.wiz-welcome{
  margin:20px 16px 0;padding:22px 28px;
  background:linear-gradient(135deg,rgba(232,114,12,.06),rgba(255,179,71,.03));
  border:1px solid rgba(232,114,12,.2);border-radius:12px;
}
.wiz-welcome h2{font-family:'Orbitron',monospace;font-size:1rem;color:var(--accent2);letter-spacing:2px;margin-bottom:8px}
.wiz-welcome p{font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:6px}
.wiz-welcome .hint-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.wiz-welcome .hint-grid > div{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;border-left:3px solid var(--accent)}
.wiz-welcome .hint-grid .h-title{font-family:'Orbitron',monospace;font-size:.6rem;color:var(--accent2);letter-spacing:1px;margin-bottom:4px}
.wiz-welcome .hint-grid .h-desc{font-size:.76rem;color:var(--muted);line-height:1.5}

/* ═══ CINEMATIC PLAYER PICKER (Step 1 main content) ═════════ */
.ps-stage{
  margin:18px 16px 0;padding:26px 22px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232,114,12,.08), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(255,179,71,.05), transparent 55%),
    linear-gradient(135deg,rgba(13,21,32,.8),rgba(17,29,44,.6));
  border:1px solid rgba(232,114,12,.22);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.ps-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:18px;
}
.ps-head-title{
  font-family:'Orbitron',monospace;font-size:.88rem;letter-spacing:3px;
  color:var(--accent2);display:flex;align-items:center;gap:10px;
  text-shadow:0 0 12px rgba(255,179,71,.3);
}
.ps-head-count{
  font-family:'Orbitron',monospace;font-size:.72rem;letter-spacing:2px;
  color:var(--muted);padding:5px 13px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
}
.ps-head-count b{color:var(--accent2);font-size:.85rem}

/* Method cards (Login / Manual) – mirror the team-select cards */
.ps-methods{
  display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:14px;
  margin-bottom:20px;
}
.ps-method{
  background:var(--panel);border:2px solid var(--border);border-radius:12px;
  padding:18px 16px;cursor:pointer;transition:all .25s cubic-bezier(.3,.8,.4,1.2);
  display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;
}
.ps-method::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(135deg,transparent 40%,currentColor 120%);
  pointer-events:none;
}
.ps-method:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.ps-method-icon{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
}
.ps-method-body{flex:1;min-width:0;position:relative;z-index:1}
.ps-method-label{
  font-family:'Orbitron',monospace;font-size:.78rem;letter-spacing:2.5px;
  color:var(--text);margin-bottom:3px;
}
.ps-method-hint{font-size:.7rem;color:var(--muted);line-height:1.4}

.ps-method-login{color:var(--accent2)}
.ps-method-login .ps-method-icon{color:var(--accent2)}
.ps-method-login.active{
  border-color:var(--accent);background:rgba(232,114,12,.08);
  box-shadow:0 0 32px rgba(232,114,12,.2);
}
.ps-method-login.active::before{opacity:.06}
.ps-method-login.active .ps-method-label{color:var(--accent2);text-shadow:0 0 12px rgba(255,179,71,.4)}

.ps-method-manual{color:#64b4ff}
.ps-method-manual .ps-method-icon{color:#64b4ff}
.ps-method-manual.active{
  border-color:#64b4ff;background:rgba(100,180,255,.08);
  box-shadow:0 0 32px rgba(100,180,255,.18);
}
.ps-method-manual.active::before{opacity:.06}
.ps-method-manual.active .ps-method-label{color:#a9d6ff;text-shadow:0 0 12px rgba(100,180,255,.4)}

.ps-method-roster{color:#4ade80}
.ps-method-roster .ps-method-icon{color:#4ade80}
.ps-method-roster.active{
  border-color:#4ade80;background:rgba(74,222,128,.08);
  box-shadow:0 0 32px rgba(74,222,128,.16);
}
.ps-method-roster.active::before{opacity:.06}
.ps-method-roster.active .ps-method-label{color:#9ef5b8;text-shadow:0 0 12px rgba(74,222,128,.35)}

/* Method panels */
.ps-panel{display:none;animation:psFadeIn .3s ease}
.ps-panel.active{display:block}
@keyframes psFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Login panel */
.ps-login-box{
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.ps-login-box input{
  flex:1;min-width:140px;background:rgba(5,8,15,.6);border:1px solid var(--border);
  color:var(--text);padding:9px 12px;border-radius:8px;
  font-family:'Exo 2',sans-serif;font-size:.86rem;outline:none;transition:border-color .15s;
}
.ps-login-box input:focus{border-color:rgba(232,114,12,.4)}
.ps-login-box button{
  padding:10px 20px;border-radius:8px;border:1px solid var(--accent);
  background:linear-gradient(135deg,rgba(232,114,12,.28),rgba(255,179,71,.15));
  color:var(--accent2);font-family:'Orbitron',monospace;font-size:.72rem;
  letter-spacing:2px;font-weight:700;cursor:pointer;transition:all .18s;
}
.ps-login-box button:hover{transform:scale(1.03);box-shadow:0 0 22px rgba(232,114,12,.3)}
.ps-login-err{color:#ff8888;font-size:.75rem;margin-top:8px;display:none}
.ps-login-err.show{display:block}
.ps-roster-scan-box{
  background:rgba(255,179,71,.04);border:1px solid rgba(255,179,71,.18);
  border-radius:10px;padding:12px;margin-bottom:10px;
}
.ps-roster-scan-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ps-roster-scan-row input{
  flex:1;min-width:120px;background:rgba(5,8,15,.6);border:1px solid var(--border);
  color:var(--text);border-radius:7px;padding:8px 10px;font-family:'Exo 2',sans-serif;
}
.ps-roster-scan-row input:focus{outline:none;border-color:rgba(255,179,71,.4)}
.ps-roster-scan-row button{
  border:1px solid rgba(255,179,71,.35);background:rgba(255,179,71,.1);
  color:#ffcf85;border-radius:7px;padding:8px 14px;font-family:'Orbitron',monospace;
  font-size:.62rem;letter-spacing:1px;cursor:pointer;
}
.ps-roster-scan-row button:hover{background:rgba(255,179,71,.18)}
.ps-roster-scan-hint{font-size:.74rem;color:var(--muted);margin-top:8px;line-height:1.4}
.ps-roster-import-box{
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.ps-roster-import-box select{
  flex:1;min-width:240px;background:rgba(5,8,15,.6);border:1px solid var(--border);
  color:var(--text);padding:9px 12px;border-radius:8px;
  font-family:'Exo 2',sans-serif;font-size:.86rem;outline:none;
}
.ps-roster-import-box button{
  padding:10px 20px;border-radius:8px;border:1px solid rgba(74,222,128,.45);
  background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(255,179,71,.08));
  color:#9ef5b8;font-family:'Orbitron',monospace;font-size:.72rem;
  letter-spacing:2px;font-weight:700;cursor:pointer;transition:all .18s;
}
.ps-roster-import-box button:hover{transform:scale(1.03);box-shadow:0 0 22px rgba(74,222,128,.18)}
.ps-roster-import-status{font-size:.75rem;color:var(--muted);margin-top:8px}
.ps-roster-import-status.ok{color:#4ade80}
.ps-roster-import-status.err{color:#ff8888}
.ps-register-row{margin-top:10px;text-align:center}
.ps-register-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:8px;
  border:1px solid rgba(100,180,255,.3);
  background:rgba(100,180,255,.05);
  color:rgba(140,200,255,.85);
  font-family:'Orbitron',monospace;font-size:.68rem;letter-spacing:2px;
  cursor:pointer;text-decoration:none;transition:all .18s;
}
.ps-register-link:hover{
  border-color:rgba(100,180,255,.55);
  background:rgba(100,180,255,.12);
  color:#c0e8ff;
  box-shadow:0 0 18px rgba(80,160,255,.2);
  transform:scale(1.02);
}

/* Logged-in toolbar */
.ps-logged{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  padding:10px 14px;background:rgba(60,180,100,.06);border:1px solid rgba(60,180,100,.22);
  border-radius:10px;
}
.ps-logged-user{flex:1;font-family:'Orbitron',monospace;font-size:.78rem;letter-spacing:2px;color:#a8e8c0}
.ps-logged-btn{
  padding:6px 14px;border-radius:7px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--muted);
  font-family:'Orbitron',monospace;font-size:.62rem;letter-spacing:2px;cursor:pointer;
  transition:all .15s;
}
.ps-logged-btn:hover{color:var(--text);border-color:rgba(255,255,255,.22)}
.ps-logged-btn.ps-add-all{
  color:var(--accent2);border-color:rgba(232,114,12,.3);background:rgba(232,114,12,.1);
}
.ps-logged-btn.ps-add-all:hover{background:rgba(232,114,12,.2);box-shadow:0 0 16px rgba(232,114,12,.25)}

/* Search */
.ps-search{
  width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);
  padding:9px 14px;border-radius:8px;font-family:'Exo 2',sans-serif;font-size:.84rem;
  outline:none;margin-bottom:12px;transition:border-color .15s;
}
.ps-search:focus{border-color:rgba(232,114,12,.4)}
.ps-search::placeholder{color:var(--muted)}

/* Member grid – cards like team-select but smaller */
.ps-member-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;
  max-height:420px;overflow-y:auto;padding:2px;
}
.ps-member-grid::-webkit-scrollbar{width:5px}
.ps-member-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.ps-mc{
  background:var(--panel2);border:1.5px solid var(--border);border-radius:10px;
  padding:10px 12px;cursor:pointer;transition:all .2s cubic-bezier(.3,.8,.4,1.2);
  display:flex;align-items:center;gap:8px;position:relative;overflow:hidden;
}
.ps-mc::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:linear-gradient(135deg,transparent 40%,rgba(255,179,71,.5) 140%);
  pointer-events:none;
}
.ps-mc:hover:not(.ps-mc-added):not(.ps-mc-other){
  transform:translateY(-2px);border-color:rgba(232,114,12,.4);
  box-shadow:0 6px 18px rgba(232,114,12,.15);
}
.ps-mc:hover:not(.ps-mc-added):not(.ps-mc-other)::before{opacity:.12}
.ps-mc-plus{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(232,114,12,.12);border:1px solid rgba(232,114,12,.3);
  color:var(--accent2);font-size:.8rem;font-weight:700;transition:all .2s;
}
.ps-mc:hover:not(.ps-mc-added):not(.ps-mc-other) .ps-mc-plus{
  background:rgba(232,114,12,.3);transform:rotate(90deg);
}
.ps-mc-body{flex:1;min-width:0;position:relative;z-index:1}
.ps-mc-name{
  font-size:.82rem;color:var(--text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ps-mc-pwr{
  font-family:'Orbitron',monospace;font-size:.58rem;letter-spacing:1px;
  color:var(--muted);margin-top:2px;
}
.ps-mc-added{
  border-color:rgba(60,180,100,.4);background:rgba(60,180,100,.06);cursor:default;
}
.ps-mc-added .ps-mc-plus{
  background:rgba(60,180,100,.2);border-color:rgba(60,180,100,.5);color:#4dc870;
}
.ps-mc-added .ps-mc-name{color:#a8e8c0}
.ps-mc-other{opacity:.45;cursor:not-allowed;border-style:dashed}
.ps-mc-other .ps-mc-plus{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--muted)}
.ps-members-empty{
  grid-column:1/-1;text-align:center;font-size:.8rem;color:var(--muted);
  padding:30px 12px;font-style:italic;
}

/* Manual entry panel */
.ps-manual-box{
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:16px 18px;
}
.ps-manual-row{display:flex;gap:10px;flex-wrap:wrap}
.ps-manual-row input{
  flex:1;min-width:180px;background:rgba(5,8,15,.6);border:1px solid var(--border);
  color:var(--text);padding:11px 14px;border-radius:8px;
  font-family:'Exo 2',sans-serif;font-size:.95rem;outline:none;transition:border-color .15s;
}
.ps-manual-row input:focus{border-color:rgba(100,180,255,.5)}
.ps-manual-row button{
  padding:11px 22px;border-radius:8px;border:1px solid rgba(100,180,255,.4);
  background:linear-gradient(135deg,rgba(100,180,255,.22),rgba(100,180,255,.1));
  color:#a9d6ff;font-family:'Orbitron',monospace;font-size:.78rem;
  letter-spacing:2px;font-weight:700;cursor:pointer;transition:all .18s;
  display:flex;align-items:center;gap:6px;
}
.ps-manual-row button:hover{transform:scale(1.03);box-shadow:0 0 22px rgba(100,180,255,.3)}
.ps-manual-hint{
  font-size:.72rem;color:var(--muted);margin-top:10px;line-height:1.5;
}
.ps-manual-hint strong{color:#a9d6ff}

/* Current roster */
.ps-roster{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.ps-roster-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:12px;
}
.ps-roster-title{
  font-family:'Orbitron',monospace;font-size:.72rem;letter-spacing:2.5px;
  color:var(--accent);text-transform:uppercase;
}
.ps-roster-stats{
  font-family:'Orbitron',monospace;font-size:.66rem;letter-spacing:1.5px;
  color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;
}
.ps-roster-stats b{color:var(--accent2)}
.ps-roster-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
}
.ps-rc{
  background:var(--panel2);border:1.5px solid var(--border);border-radius:9px;
  padding:8px 10px;display:flex;align-items:center;gap:7px;
  transition:all .18s;position:relative;overflow:hidden;
}
.ps-rc::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);
}
.ps-rc.is-sub::before{background:#64b4ff}
.ps-rc:hover{border-color:rgba(232,114,12,.3);transform:translateX(2px)}
.ps-rc-name{
  flex:1;min-width:0;font-size:.82rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ps-rc-sub{
  display:flex;align-items:center;gap:2px;font-size:.62rem;color:var(--muted);cursor:pointer;
  flex-shrink:0;transition:color .15s;font-family:'Orbitron',monospace;letter-spacing:.5px;
}
.ps-rc-sub:hover{color:var(--accent2);}
.ps-rc-sub input{cursor:pointer;accent-color:rgba(100,180,255,.7);width:14px;height:14px;}
.ps-rc-badge{
  font-family:'Orbitron',monospace;font-size:.52rem;letter-spacing:1px;
  padding:2px 5px;border-radius:3px;background:rgba(100,180,255,.12);
  color:#a9d6ff;border:1px solid rgba(100,180,255,.25);
}
.ps-rc-rm{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.82rem;
  color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--border);
  transition:all .15s;line-height:1;
}
.ps-rc-rm:hover{color:#ff7777;border-color:rgba(255,60,60,.35);background:rgba(255,60,60,.12)}
.ps-roster-empty{
  grid-column:1/-1;text-align:center;font-size:.82rem;color:var(--muted);
  padding:22px 12px;font-style:italic;
  background:rgba(255,255,255,.02);border:1px dashed var(--border);border-radius:9px;
}

@media(max-width:720px){
  .ps-stage{margin:12px;padding:18px 14px}
  .ps-methods{grid-template-columns:1fr;gap:10px}
  .ps-method{padding:14px 12px}
  .ps-member-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-height:320px}
  .ps-roster-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* Step 2 intro banner */
.wiz-s2-intro{
  margin:16px 16px 0;padding:14px 18px;
  background:rgba(255,179,71,.04);border:1px solid rgba(255,179,71,.18);border-radius:10px;
  font-size:.82rem;color:var(--muted);line-height:1.6;
}
.wiz-s2-intro strong{color:var(--accent2)}

/* Step 3 compact player strip */
.wiz-strip{
  margin:16px 16px 0;padding:10px 14px;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  display:flex;flex-direction:column;gap:8px;
}
.wiz-strip-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.wiz-strip-title{font-family:'Orbitron',monospace;font-size:.62rem;letter-spacing:2px;color:var(--accent);text-transform:uppercase}
.wiz-strip-count{font-size:.7rem;color:var(--muted)}
.wiz-strip-list{display:flex;flex-wrap:wrap;gap:6px;min-height:28px}
.wiz-strip-chip{
  background:var(--panel2);border:1px solid var(--border);border-radius:6px;
  padding:4px 9px;display:flex;align-items:center;gap:6px;
  cursor:grab;font-size:.76rem;user-select:none;transition:border-color .15s;
}
.wiz-strip-chip:hover{border-color:rgba(232,114,12,.3)}
.wiz-strip-chip.is-sub{border-style:dashed;color:var(--muted)}
.wiz-strip-chip.dragging{opacity:.3}
.wiz-strip-empty{font-size:.76rem;color:var(--muted);font-style:italic;padding:4px 0}

/* Fixed Back/Next bar at bottom */
.wiz-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:180;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px;background:rgba(5,8,15,.95);backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
}
.wiz-btn{
  padding:11px 22px;border-radius:8px;border:1px solid var(--border);
  cursor:pointer;font-family:'Orbitron',monospace;font-size:.72rem;letter-spacing:2px;
  text-transform:uppercase;transition:all .18s;
}
.wiz-btn-back{background:rgba(255,255,255,.04);color:var(--muted)}
.wiz-btn-back:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.wiz-btn-next{
  background:linear-gradient(135deg,rgba(232,114,12,.25),rgba(255,179,71,.15));
  border-color:var(--accent);color:var(--accent2);
  min-width:160px;
}
.wiz-btn-next:hover{background:linear-gradient(135deg,rgba(232,114,12,.38),rgba(255,179,71,.22))}
.wiz-btn:disabled{opacity:.4;cursor:not-allowed}
.wiz-nav-info{flex:1;text-align:center;font-size:.75rem;color:var(--muted)}
.wiz-nav-info strong{color:var(--accent2)}

@media(max-width:720px){
  .wiz-bar{padding:10px 14px}
  .wiz-step-label{font-size:.52rem;letter-spacing:1px}
  .wiz-step-label small{display:none}
  .wiz-step-num{width:26px;height:26px;font-size:.7rem}
  .wiz-step-line{margin:0 4px}
  .wiz-welcome{margin:12px;padding:16px 18px}
  .wiz-s2-intro{margin:12px;padding:12px 14px;font-size:.76rem}
  .wiz-strip{margin:12px;padding:8px 10px}
  .wiz-nav{padding:10px 14px;gap:8px}
  .wiz-nav-info{display:none}
  .wiz-btn{padding:9px 14px;font-size:.65rem;letter-spacing:1px}
  .wiz-btn-next{min-width:120px}
}

/* ═══ STEP 2 · CINEMATIC ROLE-ASSIGNMENT STAGE ═════════════ */
.ra-stage{
  margin:18px 16px 0;padding:26px 22px 28px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232,114,12,.08), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(255,179,71,.05), transparent 55%),
    linear-gradient(135deg,rgba(13,21,32,.8),rgba(17,29,44,.6));
  border:1px solid rgba(232,114,12,.22);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.ra-back-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ra-back-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:22px;cursor:pointer;
  background:rgba(8,12,20,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);color:var(--muted);
  font-family:'Orbitron',monospace;font-size:.66rem;letter-spacing:2.5px;
  transition:all .18s;
}
.ra-back-btn:hover{color:var(--accent2);border-color:rgba(232,114,12,.4);box-shadow:0 0 18px rgba(232,114,12,.18)}
.ra-head-count{
  font-family:'Orbitron',monospace;font-size:.72rem;letter-spacing:2px;
  color:var(--muted);padding:5px 13px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
}
.ra-head-count b{color:var(--accent2);font-size:.85rem}

.ra-sec-title{
  font-family:'Orbitron',monospace;font-size:.72rem;letter-spacing:3px;
  color:var(--accent2);text-shadow:0 0 10px rgba(255,179,71,.3);
  margin:18px 0 10px;display:flex;align-items:center;gap:8px;
}
.ra-sec-title::before{content:'';height:1px;width:28px;background:linear-gradient(90deg,var(--accent),transparent)}

/* Role cards grid */
.ra-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;
}
.ra-card{
  background:linear-gradient(135deg,rgba(17,29,44,.8),rgba(12,20,32,.6));
  border:1px solid var(--border);border-radius:10px;padding:12px 13px;
  display:flex;flex-direction:column;gap:9px;
  transition:border-color .18s,transform .15s,box-shadow .18s;
  position:relative;
}
.ra-card:hover{border-color:rgba(232,114,12,.4);transform:translateY(-1px);box-shadow:0 6px 22px rgba(232,114,12,.12)}
.ra-card.is-sub{border-style:dashed;opacity:.78}
.ra-card-head{display:flex;align-items:center;gap:8px}
.ra-card-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}
.ra-card-name{
  flex:1;min-width:0;font-family:'Orbitron',monospace;font-size:.82rem;
  color:var(--text);letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ra-card-sub-chk{
  display:flex;align-items:center;gap:4px;cursor:pointer;
  font-family:'Orbitron',monospace;font-size:.55rem;letter-spacing:1.5px;
  color:var(--muted);padding:3px 7px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);transition:all .15s;
}
.ra-card-sub-chk:hover{color:var(--text)}
.ra-card-sub-chk input{margin:0;accent-color:var(--accent)}
.ra-card.is-sub .ra-card-sub-chk{color:var(--accent2);border-color:rgba(232,114,12,.3)}
.ra-card-row{display:flex;gap:7px}
.ra-card-row select, .ra-card-row input{
  background:rgba(5,8,15,.6);border:1px solid var(--border);border-radius:7px;
  color:var(--text);font-size:.76rem;padding:6px 8px;
}
.ra-card-row select{flex:2;min-width:0}
.ra-card-row input{flex:1;min-width:0}
.ra-card-row select:focus, .ra-card-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,114,12,.15)}

/* Tactic cards */
.ra-tactics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  margin-top:6px;
}
.ra-tactic{
  background:linear-gradient(135deg,rgba(17,29,44,.8),rgba(12,20,32,.6));
  border:2px solid var(--border);border-radius:11px;padding:14px 14px;
  cursor:pointer;text-align:left;color:var(--text);
  transition:all .22s cubic-bezier(.3,.8,.4,1.2);position:relative;overflow:hidden;
}
.ra-tactic::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:linear-gradient(135deg,transparent 40%,rgba(232,114,12,.14) 120%);
}
.ra-tactic:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ra-tactic:hover::before{opacity:1}
.ra-tactic.tactive{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(232,114,12,.22),0 0 22px rgba(232,114,12,.2);
  background:linear-gradient(135deg,rgba(232,114,12,.14),rgba(17,29,44,.6));
}
.ra-tactic-title{
  font-family:'Orbitron',monospace;font-size:.82rem;letter-spacing:2px;
  color:var(--accent2);margin-bottom:4px;display:flex;align-items:center;gap:8px;
}
.ra-tactic-desc{font-size:.7rem;color:var(--muted);line-height:1.5}

/* Auto-Assign CTA */
.ra-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ra-cta-btn{
  flex:1;min-width:220px;
  padding:14px 22px;border-radius:12px;cursor:pointer;
  font-family:'Orbitron',monospace;font-size:.84rem;letter-spacing:3px;font-weight:800;
  border:2px solid var(--accent);
  background:linear-gradient(135deg,rgba(232,114,12,.32),rgba(255,179,71,.18));
  color:var(--accent2);
  box-shadow:0 0 22px rgba(232,114,12,.2);
  transition:all .2s;position:relative;overflow:hidden;
}
.ra-cta-btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18),transparent 70%);
  transform:translateX(-120%);transition:transform .8s;
}
.ra-cta-btn:hover{transform:scale(1.02);box-shadow:0 0 36px rgba(232,114,12,.4)}
.ra-cta-btn:hover::after{transform:translateX(120%)}
.ra-cta-btn.ra-cta-success{
  border-color:rgba(80,220,140,.75);
  background:linear-gradient(135deg,rgba(40,200,110,.45),rgba(80,230,150,.25));
  color:#c8ffdd;
  box-shadow:0 0 36px rgba(80,220,140,.45);
  animation:raCtaPulse .9s ease;
}
.ra-cta-btn.ra-cta-success-warn{
  border-color:rgba(255,180,60,.85);
  background:linear-gradient(135deg,rgba(255,170,40,.38),rgba(255,200,80,.22));
  color:#ffe8b0;
  box-shadow:0 0 32px rgba(255,180,60,.4);
  animation:raCtaPulse .9s ease;
}
@keyframes raCtaPulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.04)}
  100%{transform:scale(1)}
}

/* Auto-Assign confirmation toast */
.aa-toast{
  position:fixed;left:50%;top:18%;transform:translate(-50%,-20px);
  z-index:420;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;gap:14px;
  padding:16px 24px;min-width:280px;max-width:min(480px,calc(100vw - 32px));
  width:max-content;
  border-radius:14px;border:1.5px solid rgba(80,220,140,.5);
  background:linear-gradient(135deg,rgba(10,20,15,.95),rgba(18,34,26,.9));
  backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 36px rgba(80,220,140,.28);
  opacity:0;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.25,1);
  font-family:'Orbitron',monospace;
}
.aa-toast.is-warn{
  border-color:rgba(255,180,60,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 36px rgba(255,180,60,.28);
}
.aa-toast.show{opacity:1;transform:translate(-50%,0)}
.aa-toast-icon{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 38px;
  font-size:1.1rem;font-weight:800;
  background:rgba(80,220,140,.18);color:#9cffc8;
  border:1.5px solid rgba(80,220,140,.55);
  animation:aaToastTick .5s ease;
}
.aa-toast.is-warn .aa-toast-icon{
  background:rgba(255,180,60,.18);color:#ffd482;border-color:rgba(255,180,60,.6);
}
.aa-toast-msg{font-size:.78rem;letter-spacing:1.5px;color:#e8f5ed;line-height:1.4}
.aa-toast.is-warn .aa-toast-msg{color:#fff1d6}
@keyframes aaToastTick{
  0%{transform:scale(0);opacity:0}
  55%{transform:scale(1.25);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* Toasts with a clickable action (e.g. stale-state hint) opt back into pointer events */
.aa-toast.has-action{pointer-events:auto}
.aa-toast-actions{display:flex;gap:8px;margin-top:8px}
.aa-toast-btn{
  padding:5px 12px;border-radius:6px;border:1px solid rgba(255,180,60,.5);
  background:rgba(255,180,60,.14);color:#ffd482;cursor:pointer;
  font-family:'Orbitron',monospace;font-size:.6rem;letter-spacing:1px;
}
.aa-toast-btn:hover{background:rgba(255,180,60,.24)}
.aa-toast-close{
  padding:5px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;font-size:.7rem;
}
.aa-toast-close:hover{color:#fff}
.ra-cta-reset{
  padding:14px 18px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--muted);
  font-family:'Orbitron',monospace;font-size:.72rem;letter-spacing:2px;
  transition:all .18s;
}
.ra-cta-reset:hover{color:#ff7777;border-color:rgba(255,60,60,.25)}

.ra-empty{
  text-align:center;padding:40px 20px;font-size:.86rem;color:var(--muted);
  background:rgba(255,255,255,.02);border:1px dashed var(--border);border-radius:10px;
}

/* Role-legend (compact strip inside ra-stage) */
.ra-legend{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 12px;
  padding:10px 12px;background:rgba(255,255,255,.02);border:1px solid var(--border);
  border-radius:8px;font-size:.7rem;color:var(--muted);
}
.ra-legend .leg-row{display:flex;align-items:center;gap:5px}

/* ═══ STEP 4 · CINEMATIC EXPORT STAGE ═════════════════════ */
.ex-stage{
  margin:18px 16px 0;padding:26px 22px 28px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232,114,12,.08), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(255,179,71,.05), transparent 55%),
    linear-gradient(135deg,rgba(13,21,32,.8),rgba(17,29,44,.6));
  border:1px solid rgba(232,114,12,.22);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:4px}
.ex-card{
  background:linear-gradient(135deg,rgba(17,29,44,.78),rgba(12,20,32,.55));
  border:1px solid rgba(232,114,12,.16);border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s,transform .18s,box-shadow .25s;
}
.ex-card:hover{border-color:rgba(232,114,12,.4);transform:translateY(-2px);box-shadow:0 10px 32px rgba(232,114,12,.15)}
.ex-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ex-card-title{
  font-family:'Orbitron',monospace;font-size:.78rem;letter-spacing:2.5px;
  color:var(--accent2);display:flex;align-items:center;gap:8px;
}
.ex-card-sub{font-size:.68rem;color:var(--muted);letter-spacing:.5px}

.ex-phase-preview{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,#0a1320,#101f30);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-size:.76rem;letter-spacing:3px;color:var(--muted);
  text-align:center;
}
.ex-phase-preview .ex-phase-num{
  position:absolute;top:8px;left:10px;
  font-family:'Orbitron',monospace;font-size:.56rem;letter-spacing:2px;
  color:var(--accent2);padding:3px 8px;border-radius:10px;
  background:rgba(232,114,12,.15);border:1px solid rgba(232,114,12,.3);
}
.ex-phase-preview .ex-phase-hint{max-width:75%;line-height:1.5}
.ex-phase-preview .ex-phase-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;pointer-events:none;transition:opacity .25s ease;
}
.ex-phase-preview.has-img .ex-phase-placeholder{opacity:0}
.ex-phase-img{
  display:block;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease;
}
.ex-phase-preview.has-img .ex-phase-img{display:block !important;opacity:1}
.ex-phase-preview.has-img{cursor:zoom-in}
.ex-phase-preview.has-img::after{
  content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,179,71,.25);
}
.export-zoom-overlay{
  position:fixed;inset:0;z-index:100000;
  background:rgba(3,6,12,.88);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
.export-zoom-stage{
  max-width:96vw;max-height:92vh;overflow:auto;
  border:1px solid rgba(255,179,71,.35);border-radius:10px;
  background:#05080f;box-shadow:0 22px 80px rgba(0,0,0,.8);
}
.export-zoom-stage img{
  display:block;width:auto;height:auto;max-width:none;max-height:none;
}
.export-zoom-close{
  position:fixed;top:14px;right:14px;z-index:100001;
  width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,16,28,.92);color:#f5f7fb;
  cursor:pointer;font-family:'Orbitron',monospace;font-size:1rem;
}

.ex-btn-row{display:flex;gap:8px;flex-wrap:wrap}
.ex-btn{
  flex:1;min-width:120px;
  padding:10px 14px;border-radius:9px;cursor:pointer;
  font-family:'Orbitron',monospace;font-size:.7rem;letter-spacing:2px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--muted);
  transition:all .18s;display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.ex-btn:hover{color:var(--accent2);border-color:rgba(232,114,12,.4);box-shadow:0 0 16px rgba(232,114,12,.18)}
.ex-btn.is-primary{
  background:linear-gradient(135deg,rgba(232,114,12,.25),rgba(255,179,71,.14));
  border-color:var(--accent);color:var(--accent2);font-weight:700;
}
.ex-btn.is-primary:hover{transform:scale(1.02);box-shadow:0 0 22px rgba(232,114,12,.3)}
.ex-btn.copied{color:#4dc870;border-color:rgba(60,180,100,.5)}

.ex-text-preview{
  background:rgba(5,8,15,.55);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;line-height:1.55;color:var(--muted);
  max-height:220px;overflow:auto;white-space:pre-wrap;
}
.ex-text-preview::-webkit-scrollbar{width:6px}
.ex-text-preview::-webkit-scrollbar-thumb{background:rgba(232,114,12,.3);border-radius:3px}

.ex-phase-card{
  background:linear-gradient(135deg,rgba(17,29,44,.78),rgba(12,20,32,.55));
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;
}
.ex-phase-card.p1{border-left:3px solid #ffb347}
.ex-phase-card.p2{border-left:3px solid #ff6666}
.ex-phase-card.p3{border-left:3px solid #7fff50}

@media(max-width:720px){
  .ra-stage{margin:12px;padding:18px 14px}
  .ex-stage{margin:12px;padding:18px 14px}
  .ra-cards{grid-template-columns:1fr}
  .ex-grid{grid-template-columns:1fr}
  .ra-cta-btn{font-size:.74rem;letter-spacing:2px}
}

/* ═══ FLOATING HELP BUBBLE + PANEL ═════════════════════════ */
.help-bubble{
  position:fixed;bottom:92px;right:22px;z-index:250;
  width:50px;height:50px;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,rgba(232,114,12,.25),rgba(255,179,71,.14));
  backdrop-filter:blur(10px);
  border:1.5px solid rgba(232,114,12,.45);
  color:var(--accent2);font-family:'Orbitron',monospace;
  box-shadow:0 6px 22px rgba(0,0,0,.4),0 0 18px rgba(232,114,12,.18);
  display:flex;align-items:center;justify-content:center;
  transition:all .22s;animation:ccFadeDown .6s .2s backwards;
}
.help-bubble:hover{
  transform:scale(1.08);
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 28px rgba(232,114,12,.35);
}
.help-bubble-q{
  font-size:1.4rem;font-weight:700;line-height:1;
  text-shadow:0 0 12px rgba(255,179,71,.5);
}
.help-bubble-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(232,114,12,.3);
  animation:helpPulse 2.4s ease-in-out infinite;pointer-events:none;
}
@keyframes helpPulse{
  0%,100%{opacity:.2;transform:scale(1)}
  50%{opacity:.55;transform:scale(1.18)}
}
body.intro-visible .help-bubble,
body.ts-visible .help-bubble{display:none !important}

.help-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(5,8,15,.78);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:24px;
  animation:helpFade .25s ease;
}
.help-overlay.open{display:flex}
@keyframes helpFade{from{opacity:0}to{opacity:1}}
.help-panel{
  position:relative;max-width:720px;width:100%;max-height:82vh;overflow:auto;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232,114,12,.1), transparent 55%),
    linear-gradient(135deg,rgba(13,21,32,.96),rgba(17,29,44,.9));
  border:1px solid rgba(232,114,12,.3);border-radius:16px;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 42px rgba(232,114,12,.14);
  animation:helpZoom .3s cubic-bezier(.3,.8,.4,1.2) both;
}
@keyframes helpZoom{
  from{opacity:0;transform:scale(.94) translateY(14px)}
  to  {opacity:1;transform:scale(1) translateY(0)}
}
.help-panel-head{
  padding:18px 22px 14px;
  border-bottom:1px solid rgba(232,114,12,.18);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(13,21,32,.92),rgba(13,21,32,.78));
  border-radius:16px 16px 0 0;z-index:2;
}
.help-panel-title{
  font-family:'Orbitron',monospace;font-size:.8rem;letter-spacing:2.5px;
  color:var(--accent2);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  text-shadow:0 0 10px rgba(255,179,71,.3);
}
.help-panel-badge{
  font-size:.62rem;letter-spacing:2px;padding:3px 10px;border-radius:12px;
  background:rgba(232,114,12,.18);border:1px solid rgba(232,114,12,.35);
  color:var(--accent2);
}
.help-panel-close{
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--muted);font-size:1rem;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.help-panel-close:hover{color:#ff7777;border-color:rgba(255,60,60,.3);transform:rotate(90deg)}
.help-panel-body{padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.help-panel-body .hp-block{
  background:rgba(5,8,15,.45);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:9px;padding:13px 15px;
}
.help-panel-body .hp-block p{
  font-size:.86rem;color:var(--muted);line-height:1.7;margin:0;
}
.help-panel-body .hp-block strong{color:var(--text)}
.help-panel-body .hp-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;
}
.help-panel-body .hp-list .hp-mini{
  background:rgba(5,8,15,.4);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
}
.help-panel-body .hp-list .hp-mini-title{
  font-family:'Orbitron',monospace;font-size:.62rem;letter-spacing:2px;
  color:var(--accent2);margin-bottom:6px;
}
.help-panel-body .hp-list .hp-mini p{
  font-size:.76rem;color:var(--muted);line-height:1.55;margin:0;
}
.help-panel-foot{
  padding:12px 22px 16px;border-top:1px solid rgba(232,114,12,.12);
  font-size:.74rem;color:var(--muted);line-height:1.5;
}
@media(max-width:720px){
  .help-bubble{bottom:82px;right:14px;width:44px;height:44px}
  .help-bubble-q{font-size:1.2rem}
  .help-panel{max-height:88vh}
  .help-panel-head{padding:14px 16px 10px}
  .help-panel-body{padding:14px 16px}
  .help-panel-foot{padding:10px 16px 14px}
}

/* Extracted from dessert/index.html block 2 */
@page{size:A4;margin:12mm 18mm}body{background:#0a0e14;color:#d2dae6;font-family:Segoe UI,Helvetica,Arial,sans-serif;margin:0;padding:24px 32px;-webkit-print-color-adjust:exact;print-color-adjust:exact}';
  html+='.sep{border:none;border-top:1px solid #e8720c;margin:10px 0}.line{padding:1px 0;white-space:pre-wrap;word-break:break-word}