:root{
  --bg:#0b0b0b; --txt:#f6f6f6; --muted:#c8c8c8;
  --panel: rgba(255,255,255,.06); --stroke: rgba(255,255,255,.18);
  --orange:#ff7a18; --orange-strong:#ff8c32; --good:#40d39b;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--txt); background:var(--bg); overflow-x:hidden;
}
.container{ width:min(1300px,94vw); margin-inline:auto }

/* ---- Background ---- */
.bg-mesh{
  position:fixed; inset:-12vmax; z-index:-3;
  background:
    radial-gradient(40vmax 40vmax at 15% 15%, rgba(255,122,24,.18), transparent 60%),
    radial-gradient(50vmax 50vmax at 85% 25%, rgba(255,122,24,.08), transparent 60%),
    radial-gradient(55vmax 55vmax at 50% 90%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #0b0b0b 0%, #0a0a0a 100%);
  animation: mesh 22s ease-in-out infinite alternate;
  filter:saturate(1.05);
}
@keyframes mesh{ 0%{transform:translateY(0)} 100%{transform:translateY(-1.5vh)} }
.grid-overlay{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/44px 44px;
  mask-image: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.9), transparent 80%);
}
.orbs{ position:fixed; inset:0; z-index:-1; pointer-events:none }
.orb{ position:absolute; border-radius:50%; filter:blur(28px);
  background:radial-gradient(closest-side, rgba(255,122,24,.22), transparent 70%) }
.o1{ width:28vmax;height:28vmax; top:4%; left:-6% }
.o2{ width:22vmax;height:22vmax; bottom:-10%; right:-6% }
.o3{ width:20vmax;height:20vmax; top:58%; left:60% }

/* ---- Glass ---- */
.glass{
  background:var(--panel); border:1px solid var(--stroke);
  border-radius:22px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow)
}

/* ---- Header ---- */
.header{ display:flex; align-items:center; justify-content:space-between; padding:24px 0 }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--txt) }
.logo{ height:80px }
.nav{ display:flex; gap:.75rem; flex-wrap:wrap }
.nav a{ color:var(--txt); text-decoration:none; opacity:.9; padding:.6rem .9rem; border-radius:10px; transition:.25s }
.nav a:hover{ background: rgba(255,255,255,.08); opacity:1 }
.nav .active{ background: linear-gradient(135deg, rgba(255,122,24,.22), rgba(255,122,24,.10)); border:1px solid rgba(255,122,24,.45) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.06); color:var(--txt); font-weight:800; transition:.2s }
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(255,122,24,.22) }
.btn.primary{ background:linear-gradient(135deg, #ff7a18, #ff9538); border-color:#ff9a3f; color:#0a0a0a }
.btn.outline{ background:transparent }
.btn.small{ padding:.5rem .8rem; font-weight:700 }

/* ---- Title ---- */
.page-head{ margin-top:.4rem }
h1{ font-size: clamp(28px, 4vw, 44px); margin:.2rem 0 .3rem }
.accent{ color:var(--orange-strong); text-shadow:0 0 18px rgba(255,122,24,.35) }
.muted{ color:var(--muted) }

/* ---- Party bar ---- */
.party{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; margin:1rem 0; gap:.8rem; margin-inline: auto; }
.party-left{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap }
.avatars{ display:flex; gap:.5rem; align-items:center }
.avatar{ width:38px;height:38px;border-radius:12px;border:1px solid var(--stroke); background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; font-weight:800 }
.avatar.me{ background:radial-gradient(circle at 30% 30%, rgba(255,122,24,.35), rgba(255,122,24,.10)); }
.avatar.add{ cursor:pointer; }
.party-right{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.select{ display:grid; gap:.25rem }
.select.inline{ align-items:center; grid-auto-flow:column; gap:.45rem }
.select select{ background:transparent; color:var(--txt); border:1px solid var(--stroke); border-radius:10px; padding:.45rem .6rem; font-weight:700 }
.badge{ padding:.35rem .6rem; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.08); font-weight:800 }
.badge.ping{ border-color:rgba(64,211,155,.35); }

/* ---- Layout (no overlap; collapses cleanly) ---- */
.layout{
  display:grid;
  grid-template-columns: 220px minmax(420px,1fr) 480px;  /* Rail | Modes | Details */
  gap:1rem; align-items:start;
}

/* At medium widths, narrow details & modes to avoid overlap */
@media (max-width: 1240px){
  .layout{ grid-template-columns: 200px minmax(360px,1fr) 420px; }
}

/* At ≤1060px, stack Details below Modes (2 rows, no overlap) */
@media (max-width: 1060px){
  .layout{
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "rail modes"
      "rail details";
  }
  .rail{ grid-area: rail }
  .modes{ grid-area: modes }
  .details{ grid-area: details }
}

/* At ≤880px, stack everything vertical */
@media (max-width: 880px){
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "rail"
      "modes"
      "details";
  }
}

/* ---- Rail ---- */
.rail{ padding:.6rem; position:sticky; top:14px; }
.rail-tab{ width:100%; padding:.7rem .8rem; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.06);
  color:var(--txt); font-weight:800; cursor:pointer; margin:.25rem 0; transition:.2s }
.rail-tab:hover{ transform:translateY(-2px) }
.rail-tab.active{ background:linear-gradient(135deg, rgba(255,122,24,.30), rgba(255,122,24,.12)); border-color:rgba(255,122,24,.55) }

/* ---- Modes ---- */


.modes {
    padding: .8rem;
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
}
.modes::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

.mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: .8rem;
}

@media (max-width: 640px) {
    .mode-grid {
        grid-template-columns: 1fr;
    }
}

.mode-card{
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.05);
    cursor: pointer;
    transition: .2s;
    position: relative;
    overflow: hidden;
    min-height: 120px;
}

.mode-card .icon{
    font-size: 28px;
    margin-bottom: .3rem;
}

.mode-card h3{
    margin: .1rem 0 .2rem;
}

.mode-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(255,122,24,.22);
}

.mode-card.active{
    outline: 2px solid var(--orange);
    box-shadow: 0 0 0 6px rgba(255,122,24,.15) inset;
}

/* ---- Details ---- */
.details{ padding:1rem; position:sticky; top:14px; }
/* --- Cleaner details header (title + description stacked) --- */
.details .header{
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: .25rem;                 /* space between crumb, title, desc */
  margin-bottom: .6rem;        /* a bit more breathing room below */
}

.crumb{
  order: -1;                   /* always on top line */
  color: var(--muted);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
  margin: 0;
}

#modeTitle{
  display: block;              /* force its own line */
  margin: .1rem 0 0;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

#modeDesc{
  display: block;              /* force its own line under the title */
  margin: .1rem 0 0;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.35;
  font-size: clamp(14px, 1.8vw, 18px);
  max-width: 52ch;             /* prevent super-long lines */
}

/* optional: a subtle divider under the header block */
.details .header::after{
  content: "";
  height: 1px;
  background: var(--stroke);
  border-radius: 999px;
  margin-top: .35rem;
}
.details h2{ margin:.1rem 0 .2rem }
.controls{ display:grid; gap:.6rem; min-width:260px }
/* show/hide helpers */
.hidden { display: none !important; }

/* Sleek, on-brand range styling with dynamic filled track */
.control input[type="range"]{
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,122,24,.9) 0%, rgba(255,122,24,.9) 0%, rgba(255,255,255,.18) 0%);
  outline: none;
  transition: filter .2s ease;
}
.control input[type="range"]:hover{ filter: brightness(1.05); }

/* WebKit thumb */
.control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #111;
  border: 2px solid #ff9333;
  box-shadow: 0 0 0 5px rgba(255,147,51,.18);
  transition: transform .15s ease;
}
.control input[type="range"]::-webkit-slider-thumb:active{ transform: scale(1.05) }

/* Firefox */
.control input[type="range"]::-moz-range-track{
  height: 8px; border-radius: 999px; background: transparent;
}
.control input[type="range"]::-moz-range-progress{
  height: 8px; border-radius: 999px; background: rgba(255,122,24,.9);
}
.control input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background:#111; border:2px solid #ff9333;
  box-shadow: 0 0 0 4px rgba(255,147,51,.18);
}
.chips{ display:flex; gap:.5rem; flex-wrap:wrap }
.chips .chip{
  padding:.45rem .8rem; border-radius:999px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.06); color:var(--txt); font-weight:800; cursor:pointer; transition:.2s
}
.chips .chip.active{ background:linear-gradient(135deg, rgba(255,122,24,.35), rgba(255,122,24,.15)); border-color:rgba(255,122,24,.55); color:#fff }

.row{ display:grid; grid-template-columns: 1fr 1fr; gap:.6rem }
@media (max-width: 420px){ .row{ grid-template-columns: 1fr } }
.control{ display:grid; gap:.25rem }
.control input[type="range"]{ width:100% }
.value{ color:#fff; font-weight:800 }
.toggles{ display:flex; gap:.8rem; flex-wrap:wrap }
.toggle{ display:inline-flex; gap:.45rem; align-items:center; font-weight:700; cursor:pointer }
.toggle input{ display:none }
.toggle span{ width:42px; height:26px; border-radius:999px; position:relative; background:rgba(255,255,255,.12); border:1px solid var(--stroke); transition:.2s }
.toggle span::after{ content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; left:3px; top:2.5px; transition:.2s }
.toggle input:checked + span{ background:linear-gradient(135deg, #ff7a18, #ff9538); border-color:#ff9538 }
.toggle input:checked + span::after{ transform:translateX(16px) }

.cta-row{ display:flex; gap:.6rem; align-items:center; margin-top:.2rem; flex-wrap:wrap }
.qdot{ width:8px; height:8px; border-radius:50%; background:#0a0a0a; box-shadow:0 0 0 4px rgba(0,0,0,.12) inset }
.btn.primary:hover .qdot{ background:#fff }

/* ---- Modal ---- */
.modal, .modal * {
  color: var(--txt);
}

.code-input {
  margin-bottom: 1.2rem;   /* was ~.8rem, give it more breathing room */
}

.card .row {
  margin-bottom: 1rem;     /* adds space under the button row */
}

/* Headings inside cards */
.card h4 {
  color: var(--txt);
  margin: 0 0 .6rem;
  font-size: 1.05rem;
}

/* Helper text */
.card p, .tiny {
  color: var(--muted);
  margin: 0 0 .8rem;
  line-height: 1.4;
}

/* Spacing tweaks */
.modal-body {
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
}

.private-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 860px) {
  .private-grid { grid-template-columns: 1fr; }
}

.card {
  padding: 1rem 1.2rem 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}
.modal{ width:min(820px,92vw); border:none; padding:0; border-radius:22px }
.modal::backdrop{ background:rgba(0,0,0,.55) }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--stroke) }
.icon-btn{ background:transparent; border:1px solid var(--stroke); border-radius:10px; color:var(--txt); padding:.4rem .6rem; cursor:pointer }
.modal-body{ padding:1rem }
.private-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem }
.card{ padding:.8rem; border-radius:16px; border:1px solid var(--stroke); background:rgba(255,255,255,.05) }
.code{ font-size:28px; letter-spacing:.18em; background:rgba(255,255,255,.06); border:1px solid var(--stroke); border-radius:12px; padding:.6rem; display:inline-block; margin:.4rem 0 }
.code-input{ width:100%; padding:.6rem .7rem; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.06); color:#fff; font-weight:800 }
@media (max-width: 700px){ .private-grid{ grid-template-columns:1fr } }

/* ---- Queue overlay ---- */

/* Queue overlay – totally inert until .show */
.queue{
  position: fixed;
  inset: 0;                    /* cover the viewport only when shown */
  display: none;               /* not in layout */
  place-items: center;         /* center the card */
  pointer-events: none;        /* don't intercept clicks */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 1000;
}

/* robust “hidden” fallback if the element has [hidden] */
.queue[hidden]{ display: none !important; }

/* When we decide to display it */
.queue.show{
  display: grid;               /* enters layout */
  pointer-events: auto;        /* can be clicked */
  opacity: 1;
  transform: none;
}

.queue .card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1rem 1.1rem;
  width: min(480px, 92vw);
}
.spinner{ width:24px; height:24px; border:3px solid rgba(255,255,255,.25); border-top-color:#ff9333; border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---- Toast ---- */
.toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%, 14px); opacity:0; transition:.3s ease; padding:.6rem 1rem; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.08); z-index:50 }
.toast.show{ opacity:1; transform:translate(-50%, 0) }

/* Locked switches (for Competitive) */
.toggle.locked{
  opacity:.85;
  cursor:not-allowed;
  position:relative;
}
.toggle.locked::after{
  content:"🔒";
  font-size:.95rem;
  margin-left:.4rem;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.25));
}
.toggle.locked input{ pointer-events:none }
.toggle.locked span{
  border-color: rgba(255,255,255,.25);
}

/* Disabled selects look clearly locked */
.select select:disabled{
  opacity:.65;
  cursor:not-allowed;
  border-color: rgba(255,255,255,.22);
}

/* Hide helper */
.hidden{ display:none !important; }

/* Ensure the Modes grid sits above the sticky Details column */
/* Keep stacking clean and deterministic */
.layout{ position: relative; isolation:isolate; }

/* Make the Modes grid sit above the Details column */
.modes{
  position: relative;
  z-index: 10;          /* higher than details */
  pointer-events: auto; /* ensure grid receives clicks */
}

/* Details stays below the modes grid unless you're interacting inside it */
.details{
  position: sticky;     /* keep your sticky behavior */
  top: 14px;
  z-index: 1;           /* lower than .modes so it can't block cards */
  max-width: 100%;      /* never spill past its grid column */
}

/* Cards are explicitly clickable; lift a bit on hover */
.mode-card{
  position: relative;
  z-index: 0;
  cursor: pointer;
}
.mode-card:hover{ z-index: 11; } /* hover state always wins if overlap occurs */

/* Belt & suspenders: make sure no stray child overlay inside details catches clicks */
.details::before,
.details::after{
  pointer-events: none;
}

/* If you added any header divider earlier, keep it non-interactive too */
.details .header::after{ pointer-events: none; }

/* --- Fix: right-column card not clickable -------------------------------- */

/* The sticky Details pane's empty gutter should not capture clicks */
.details{
  pointer-events: none;     /* let clicks pass through invisible areas */
  z-index: 1;               /* keeps it below the modes grid visually */
}

/* Re-enable interaction for the actual content inside the details column */
.details > *{
  pointer-events: auto;     /* sliders, chips, buttons etc. still work */
}

/* Keep the modes grid safely above, just in case */
.modes{
  position: relative;
  z-index: 10;              /* cards win the hit-test over the gutter */
}

/* Cards are explicitly interactive */
.mode-card{
  position: relative;
  pointer-events: auto;
  cursor: pointer;
}
.mode-card:hover{ z-index: 11; }  /* hover safely on top if edges touch */

/* -- FINAL override: keep queue as a centered popup -- */
/* --- Queue overlay popup (compact) --- */
.queue {
  display: none;                 /* hidden until JS toggles .show */
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  z-index: 1000;

  /* Compact size */
  width: min(360px, 90vw);
  max-height: 220px;

  display: grid;
  gap: .5rem;
  place-items: center;
  padding: .8rem 1rem;
  border-radius: 14px;
  text-align: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.queue.show {
  display: grid;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.queue h3 {
  margin: .2rem 0;
  font-size: 1.05rem;
}

.queue p {
  margin: 0 0 .4rem;
  font-size: .85rem;
  color: var(--muted);
}

.queue button {
  margin-top: .3rem;
}

/* Mobile: still bottom sheet but compact */
@media (max-width:640px){
  .queue {
    top: auto; bottom: 12px;
    left: 12px; right: 12px;
    transform: none scale(.96);
    width: auto; max-height: none;
    border-radius: 16px;
  }
  .queue.show { transform: none scale(1); }
}