/* ============================================================
   Kellerdota — Home Page Styles
   Dark esports theme | Accent: #60b0ff | Font: Rajdhani/Inter
   ============================================================ */

/* ── Particles ── */
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* ── Penguin Icon (nav) ── */
.penguin-icon { font-size: 1.4rem; filter: drop-shadow(0 0 6px rgba(96,176,255,0.3)); transition: transform .3s; }

/* ── Hero Compact (Queue Section Header) ── */

.hero-compact h1 { font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 10px; text-transform: uppercase; color: var(--white); margin-bottom: 2px; }
.hero-compact .sub { font-size: 0.48rem; color: rgba(96,176,255,0.3); letter-spacing: 5px; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #252530; transition: all .3s; }
.pulse-dot.on { background: var(--accent); box-shadow: 0 0 10px rgba(96,176,255,0.6), 0 0 20px rgba(96,176,255,0.2); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }


/* ── Fullpage Layout ── */
html, body { margin: 0; overflow: hidden; height: 100%; }
.fp { position: fixed; inset: 0; top: 44px; z-index: 1; perspective: 1200px; }
.fp-page { position: absolute; inset: 0; height: 100%; width: 100%; overflow: hidden; opacity: 0; transform: perspective(1200px) translateY(80px) translateZ(-150px) scale(.92); transition: opacity .75s ease, transform .75s cubic-bezier(.23,1,.32,1); pointer-events: none; z-index: 0; transform-style: preserve-3d; will-change: transform, opacity; }
.fp-page.active { opacity: 1; transform: perspective(1200px) translateY(0) translateZ(0) scale(1); pointer-events: auto; z-index: 1; box-shadow: 0 0 80px rgba(0,0,0,0.3); }
.fp-page.exit-up { opacity: 0; transform: perspective(1200px) translateY(-60px) translateZ(-200px) scale(.88); filter: blur(2px) brightness(.85); }
.fp-page.exit-down { opacity: 0; transform: perspective(1200px) translateY(80px) translateZ(-150px) scale(.92); }
.fp-inner {
  max-width: 960px; margin: 0 auto;
  padding: 60px 24px 60px;
  height: 100%;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.fp-inner::-webkit-scrollbar { display: none; }
/* All pages: content starts flush under the header at the same top offset */
#page-0 .fp-inner,
#page-1 .fp-inner,
#page-2 .fp-inner { padding-top: 60px; padding-bottom: 60px; justify-content: flex-start; }
#page-1 .fp-inner { overflow: hidden; }
#page-0 .news-wrap { width: 100%; }
#page-0   /* hero-compact is only on queue/events */
#page-1 
#page-1 .fp-q-wrap { width: 100%; }
#page-2 .events-wrap { width: 100%; }

/* Custom Scrollbar Track */
.fp-scrollbar{display:none;}
.fp-thumb { width: 100%; border-radius: 3px; background: rgba(96,176,255,0.25); transition: height .3s, top .3s; position: absolute; }

/* Scroll Hint Arrow */





/* ── Side Nav: typography-forward chapter menu (Option B) ── */
.side-nav{
  position:fixed;left:42px;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:30px;
  padding:0;border:none;background:none;width:auto;
  animation:snEntrance .8s cubic-bezier(.2,.95,.3,1) both;
}
@keyframes snEntrance{
  0%{opacity:0;transform:translateY(-50%) translateX(-24px);}
  100%{opacity:1;transform:translateY(-50%) translateX(0);}
}

.sn-item{
  position:relative;display:flex;align-items:center;
  text-decoration:none;cursor:pointer;
  padding:0;
  transition:transform .45s cubic-bezier(.2,.9,.2,1);
}
.sn-label{
  font-family:'Rajdhani',sans-serif;
  font-size:1.05rem;font-weight:800;
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,0.18);
  transition:color .4s ease,letter-spacing .4s ease,text-shadow .4s ease;
  line-height:1;
  white-space:nowrap;
}
.sn-item:hover{transform:translateX(4px);}
.sn-item:hover .sn-label{
  color:rgba(255,255,255,0.62);
  letter-spacing:3.4px;
}
.sn-item.active{transform:translateX(8px);}
.sn-item.active .sn-label{
  color:var(--accent);
  letter-spacing:3.6px;
  text-shadow:0 0 18px rgba(96,176,255,0.55),0 0 36px rgba(96,176,255,0.25);
}
.sn-item .sn-label{display:inline;}
.side-nav::before,.side-nav::after{display:none;}@media (max-width:1240px){.side-nav{left:24px;}}@media (max-width:1080px){.side-nav{left:18px;gap:24px;} .sn-label{font-size:.9rem;}}@media (max-width:720px){.side-nav{display:none;}}


/* ── Section Headers ── */
.sh { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; }
.sh h2 { font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--muted); letter-spacing: 3px; text-transform: uppercase; margin: 0; white-space: nowrap; }
.sh::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(96,176,255,0.08), transparent); }
.sh a { font-size: 0.54rem; color: var(--muted); text-decoration: none; letter-spacing: 1px; text-transform: uppercase; transition: color .15s; white-space: nowrap; }
.sh a:hover { color: var(--accent); }


/* ── Cards (Base) ── */
.card { background: #0f0f1e; border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; overflow: hidden; transition: all .25s; position: relative; }
.card:hover { border-color: rgba(255,255,255,0.07); }


/* ── Grid Layouts ── */
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.q-grid > .card, .q-grid > #right-slot > .card { display: flex; flex-direction: column; }
.q-grid .q-body { flex: 1; }
#right-slot { display: contents; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stats-grid .sh { margin-top: 0; }
.stats-grid > div { display: flex; flex-direction: column; }
.stats-grid .card { flex: 1; }


/* ── Queue Card (Primary CTA) ── */
.q-card { border: 1px solid rgba(96,176,255,0.1); background: linear-gradient(165deg, #0e1020, #0a0e1e); position: relative; transition: border-color .5s, box-shadow .5s, background .5s; }
.q-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 10%, var(--accent), transparent 90%); opacity: .5; transition: opacity .5s; }
.q-card.active { border-color: rgba(96,176,255,0.2); box-shadow: 0 0 40px rgba(96,176,255,0.06), 0 8px 32px rgba(0,0,0,0.4); }
.q-card.active::before { opacity: 1; }

/* VIP Queue Title */
.q-vip .q-title { font-size: .7rem; }

/* Queue Header */
.q-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 10px; }
.q-title { font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--white); letter-spacing: 2px; text-transform: uppercase; }

/* Queue Badge */
.q-badge { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; font-weight: 700; padding: 2px 10px; border-radius: 4px; background: rgba(255,255,255,0.04); color: var(--muted); transition: all .3s cubic-bezier(.22,.68,0,1); font-variant-numeric: tabular-nums; }
.q-badge.has { background: rgba(96,176,255,0.1); color: var(--accent); }
.q-badge.full { background: rgba(106,170,48,0.12); color: var(--green); }
.q-badge.bump { animation: badgeBump .4s ease; }
@keyframes badgeBump { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Queue Progress Bar */
.q-bar-wrap { height: 3px; background: rgba(255,255,255,0.03); margin: 0 20px; border-radius: 2px; overflow: hidden; }
.q-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #80d0ff); transition: width .5s cubic-bezier(.22,.68,0,1); border-radius: 2px; box-shadow: 0 0 10px rgba(96,176,255,0.4); }
.q-fill.full { background: linear-gradient(90deg, var(--green), #80dd40); box-shadow: 0 0 12px rgba(106,170,48,0.5); }

/* Queue Body (Player List) */
.q-body { padding: 14px 20px; min-height: 44px; }
.q-players { display: flex; flex-wrap: wrap; gap: 6px; }
.q-p { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.04); border-radius: 6px; padding: 5px 12px; font-size: 0.62rem; transition: all .2s; animation: qPlayerIn .35s ease both; }
.q-p:hover { border-color: rgba(96,176,255,0.12); background: rgba(96,176,255,0.03); }
.q-p .n { color: var(--white); font-weight: 600; }
.q-p .r { color: var(--muted); font-size: 0.52rem; }
.q-empty { color: var(--muted); font-size: 0.62rem; font-style: italic; opacity: .5; }
@keyframes qPlayerIn { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }

/* Queue Footer */
.q-foot { padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.q-foot-text { font-size: 0.58rem; color: var(--muted); }

/* Queue Buttons */
.btn-q { border: none; font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; font-weight: 700; padding: 10px 36px; border-radius: 6px; cursor: pointer; letter-spacing: 1.5px; text-transform: uppercase; transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1), opacity .6s; will-change: transform; user-select: none; }
.btn-q:hover { transform: translateY(-2px); }
.btn-q:active { transition-duration: 34ms; transform: translateY(1px) scale(.97); }
.btn-q[disabled] { opacity: .5; pointer-events: none; transform: none; }
.btn-join { background: linear-gradient(135deg, var(--accent), #4898e0); color: #fff; box-shadow: 0 4px 16px rgba(96,176,255,0.2); }
.btn-join:hover { box-shadow: 0 6px 24px rgba(96,176,255,0.35); }
.btn-leave { background: rgba(224,64,64,0.08); color: var(--red); border: 1px solid rgba(224,64,64,0.12); }
.btn-leave:hover { background: rgba(224,64,64,0.12); }
/* Small low-key "Casten" button — sits to the LEFT of the big Beitreten */
#q-action { display: inline-flex; align-items: center; gap: 10px; }
.q-cast-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.q-cast-btn:hover { background: rgba(96,176,255,0.06); border-color: rgba(96,176,255,0.25); color: var(--accent); }
.q-cast-btn svg { color: #9146ff; }
.q-cast-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55);
  font-family: 'Georgia', serif; font-style: italic; font-size: .56rem;
  text-decoration: none; margin-left: 2px;
  font-weight: 700;
}
.q-cast-info:hover { background: rgba(96,176,255,0.15); color: var(--accent); }
.btn-cast-wait { background: rgba(96,176,255,0.1); color: var(--accent); border: 1px solid rgba(96,176,255,0.32); }
.btn-cast-wait:hover { background: rgba(96,176,255,0.18); border-color: rgba(96,176,255,0.55); }
.btn-q.cooldown { pointer-events: none; opacity: .5; transition: opacity .15s; }
.btn-wait { background: rgba(96,176,255,0.05) !important; color: var(--muted) !important; box-shadow: none !important; cursor: default !important; }

/* Admin Controls (in queue card) */
.q-admin { display: flex; gap: 6px; padding: 6px 18px; border-top: 1px solid rgba(255,255,255,0.04); }
.qa-btn { font-size: .44rem; padding: 4px 12px; border-radius: 4px; background: rgba(255,255,255,0.04); color: var(--muted); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: all .15s; }
.qa-btn:hover { background: rgba(255,80,80,0.08); color: #ff6b6b; border-color: rgba(255,80,80,0.15); }
.qa-go { background: rgba(96,176,255,0.06); color: var(--accent); border-color: rgba(96,176,255,0.1); }
.qa-go:hover { background: rgba(96,176,255,0.12); border-color: rgba(96,176,255,0.2); color: var(--accent); }


/* ── Prefs Summary Line ── */
.qf-prefs-line { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 8px 18px; border-top: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background .15s; flex-wrap: wrap; }
.qf-prefs-line:hover { background: rgba(255,255,255,0.015); }
.qf-prefs-line.open { background: rgba(96,176,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.04); }
.qfp-item { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.qfp-label { font-size: .44rem; color: rgba(255,255,255,0.3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.qfp-val { font-size: .48rem; color: var(--accent); font-weight: 600; opacity: .7; }
.qf-prefs-line:hover .qfp-val { opacity: 1; }
.qfp-sep { color: rgba(255,255,255,0.1); font-size: .4rem; margin: 0 2px; }
.qfp-icon { color: var(--accent); flex-shrink: 0; opacity: .5; margin-right: 2px; }
.qf-prefs-line:hover .qfp-icon { opacity: .8; }
.qfp-chevron { color: var(--muted); flex-shrink: 0; margin-left: auto; opacity: .3; transition: transform .2s; }
.qf-prefs-line:hover .qfp-chevron { opacity: .6; }
.qf-prefs-line.open .qfp-chevron { transform: rotate(180deg); opacity: .6; }


/* ── Prefs Panel (Expandable Settings) ── */
.qf-panel { display: grid; grid-template-columns: 3fr 2fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); position: relative; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.qf-panel.open { max-height: 420px; opacity: 1; overflow: visible; transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease .05s; }
.qf-prefs-line .qfp-chevron { transition: transform .25s ease; }
.qf-prefs-line.open .qfp-chevron { transform: rotate(180deg); }
.qf-opts { display: flex; flex-direction: column; gap: 0; padding: 0; }
.qf-desc { padding: 16px 20px; border-left: 1px solid rgba(255,255,255,0.04); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.qf-desc-title { display: none; }
.qf-desc-box { opacity: 0; transition: opacity .2s; font-size: .48rem; color: rgba(255,255,255,0.4); line-height: 1.8; }
.qf-desc-box.visible { opacity: 1; }
.qf-desc-box strong { color: var(--accent); font-weight: 600; font-size: .52rem; }

.qf-row { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.qf-row:last-child { border-bottom: none; }
.qf-label { font-size: .44rem; color: rgba(255,255,255,0.3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; min-width: 58px; padding-top: 2px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.qf-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.qf-chip { padding: 5px 14px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: var(--muted); font-size: .48rem; font-weight: 500; cursor: pointer; transition: all .12s; white-space: nowrap; line-height: 1.3; }
.qf-chip:hover { border-color: rgba(96,176,255,0.2); color: var(--text); background: rgba(96,176,255,0.04); }
.qf-chip.active { background: rgba(96,176,255,0.1); border-color: rgba(96,176,255,0.25); color: var(--accent); font-weight: 600; }

.qf-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); font-size: .38rem; font-weight: 700; cursor: pointer; line-height: 1; user-select: none; }
.qf-tip:hover { background: rgba(96,176,255,0.12); color: var(--accent); }
.qf-tiptext { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1a1a30; border: 1px solid rgba(96,176,255,0.15); border-radius: 6px; padding: 8px 12px; font-size: .46rem; font-weight: 400; color: var(--text); min-width: 200px; max-width: 280px; line-height: 1.5; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10; text-align: left; letter-spacing: 0; }
.qf-tiptext::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(96,176,255,0.15); }
.qf-tip:hover .qf-tiptext, .qf-tip.show .qf-tiptext { display: block; }@media (max-width: 680px){
  .qf-panel.open { grid-template-columns: 1fr; }
  .qf-desc { border-left: none; border-top: 1px solid rgba(255,255,255,0.04); }
  .qf-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .qf-label { min-width: auto; }
}


/* ── Active Games / Lobby Cards ── */
.lg-card { border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; margin-bottom: 6px; background: linear-gradient(165deg, #0d0d1a, #0a0a16); }
.lg-card:last-child { margin-bottom: 0; }

.lg-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; user-select: none; }
.lg-head:hover { background: rgba(96,176,255,0.04); }
.lg-chevron { margin-left: 4px; color: var(--muted); transition: transform .2s ease; display: inline-flex; }
.lg-card.lg-collapsed .lg-chevron { transform: rotate(-90deg); }
.lg-card.lg-collapsed .lg-body { display: none; }
.lg-live-cast {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px; margin-left: 2px;
  border-radius: 999px;
  background: rgba(96,176,255,0.1);
  color: var(--accent);
  border: 1px solid rgba(96,176,255,0.32);
  font-family: 'Rajdhani', sans-serif; font-size: .48rem; font-weight: 700;
  letter-spacing: .4px; text-transform: none;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
  max-width: 220px;
}
.lg-live-cast:hover { background: rgba(96,176,255,0.2); border-color: rgba(96,176,255,0.55); }
.lg-cast-tw { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #9146ff; color: #fff; flex-shrink: 0; }
.lg-cast-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
.lg-cast-ava { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(15,15,30,0.85); margin-left: -6px; object-fit: cover; background: #14142a; color: var(--accent); display: inline-block; }
.lg-cast-stack .lg-cast-ava:first-child { margin-left: 2px; }
.lg-cast-ph { display: inline-flex; align-items: center; justify-content: center; font-size: .4rem; font-weight: 700; }
.lg-cast-more { margin-left: 3px; font-size: .4rem; font-weight: 800; color: var(--accent); letter-spacing: .3px; }
.lg-cast-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; font-weight: 700; }
.lg-card.lg-has-cast { border-color: rgba(96,176,255,0.3); }

/* Balance strip above teams */
.lobby-balance { display: flex; align-items: center; gap: 18px; padding: 10px 14px; margin: 0 0 10px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); }
.lobby-balance.bal-good { background: rgba(106,255,138,0.05); border-color: rgba(106,255,138,0.2); }
.lobby-balance.bal-ok   { background: rgba(255,180,40,0.05); border-color: rgba(255,180,40,0.18); }
.lobby-balance.bal-off  { background: rgba(224,64,64,0.05);  border-color: rgba(224,64,64,0.2); }
.lb-bal-main { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 68px; }
.lb-bal-val { font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 900; line-height: 1; color: var(--accent); }
.bal-good .lb-bal-val { color: #6aff8a; }
.bal-ok .lb-bal-val { color: #ffb428; }
.bal-off .lb-bal-val { color: #ff8080; }
.lb-bal-lbl { font-family: 'Rajdhani', sans-serif; font-size: .44rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.lb-bal-details { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.lb-bal-d { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lb-bal-d-lbl { font-family: 'Rajdhani', sans-serif; font-size: .4rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.lb-bal-d-val { font-family: 'Rajdhani', sans-serif; font-size: .75rem; font-weight: 800; color: rgba(255,255,255,0.88); letter-spacing: .5px; font-variant-numeric: tabular-nums; }

/* Twitch badge next to player name (queue card + lobby roster) */
.q-twitch, .lt-twitch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 3px;
  background: #9146ff;
  color: #fff;
  text-decoration: none;
  margin: 0 3px;
  transition: background .15s ease, transform .12s ease;
  flex-shrink: 0;
}
.q-twitch:hover, .lt-twitch:hover {
  background: #a057ff;
  transform: translateY(-1px);
}
.lg-body { padding: 0 14px 12px; }
#page-1 .lg-body { padding: 0; }
/* Collapsed preview line */
.lg-preview { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; font-size: .48rem; color: var(--muted); flex-wrap: wrap; }
.lg-card:not(.lg-collapsed) .lg-preview { display: none; }
.lg-prev-players { color: rgba(255,255,255,0.55); flex: 1; min-width: 0; line-height: 1.5; word-break: break-word; }
.lg-prev-time { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,0.35); font-variant-numeric: tabular-nums; }
.lg-prev-score { font-family: 'Rajdhani', sans-serif; font-weight: 800; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-size: .54rem; }
.lg-prev-rad { color: #60b0ff; }
.lg-prev-dire { color: #c9943a; }
.lg-prev-dash { color: rgba(255,255,255,0.3); }
/* Player KDA badge (expanded live view) */
.lt-kda { font-family: 'Rajdhani', sans-serif; font-size: .42rem; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: .4px; font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 6px; }
.lt-kda b { color: rgba(255,255,255,0.85); font-weight: 800; }
/* Score line above teams when live */
.lobby-live-score { display: flex; justify-content: center; align-items: center; gap: 12px; font-family: 'Rajdhani', sans-serif; font-weight: 800; letter-spacing: 1px; padding: 6px 0 10px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.lobby-live-score .lls-rad { color: #60b0ff; }
.lobby-live-score .lls-dire { color: #c9943a; }
.lobby-live-score .lls-time { color: rgba(255,255,255,0.5); font-size: .58rem; letter-spacing: 1.2px; }
.lobby-live-score .lls-dash { color: rgba(255,255,255,0.25); }
.lg-name { font-family: 'Rajdhani', sans-serif; font-size: .58rem; font-weight: 700; color: var(--white); white-space: nowrap; letter-spacing: .5px; }
.lg-mode { font-family: 'Rajdhani', sans-serif; font-size: .42rem; font-weight: 700; color: var(--accent); padding: 2px 8px; background: rgba(96,176,255,0.1); border-radius: 4px; letter-spacing: .8px; text-transform: uppercase; }
.lg-status { font-family: 'Rajdhani', sans-serif; font-size: .42rem; font-weight: 700; margin-left: auto; white-space: nowrap; padding: 3px 10px; border-radius: 20px; letter-spacing: .8px; text-transform: uppercase; }
.ls-wait { background: rgba(255,255,255,0.04); color: var(--muted); }
.ls-active { color: var(--accent); font-weight: 600; font-size: .48rem; background: rgba(96,176,255,0.12); }
.ls-draft { color: var(--accent); background: rgba(96,176,255,0.08); }

/* Lobby Teams Grid */
.lobby-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.04); }
.lobby-team { padding: 10px 12px; display: flex; flex-direction: column; gap: 0; }
.lt-t1 { background: transparent; border-right: 1px solid rgba(255,255,255,0.04); }
.lt-t2 { background: transparent; }
.lt-label { font-family: 'Rajdhani', sans-serif; font-size: .4rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.lt-t1 .lt-label { color: var(--accent); opacity: .85; }
.lt-t2 .lt-label { color: rgba(255,255,255,0.5); opacity: 1; }
.lt-roster { display: flex; flex-direction: column; gap: 3px; }
.lt-player { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.lt-pname { font-size: .52rem; color: var(--text); transition: color .15s; }
.lt-me .lt-pname { color: var(--accent); font-weight: 600; }
.lt-p { font-size: .52rem; color: var(--text); padding: 1px 0; }
.lobby-players-list { padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 3px 10px; border-top: 1px solid rgba(255,255,255,0.04); }

/* Lobby Hero Images (next to player names) */
.lt-hero-img { width: 24px; height: 24px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.lt-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-hero-name { font-size: .42rem; color: var(--accent); font-weight: 600; white-space: nowrap; }
.lt-hero-badge { padding: 1px 6px; border-radius: 3px; background: rgba(96,176,255,0.08); color: var(--accent); font-size: .42rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(96,176,255,0.1); }

/* Lobby Bans */
.lobby-bans { padding: 5px 12px 6px; font-size: .44rem; color: rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.03); letter-spacing: .3px; }

/* Lobby My Team Banner */
.lg-myteam { padding: 8px 14px; background: rgba(96,176,255,0.04); border-top: 1px solid rgba(96,176,255,0.06); border-bottom: 1px solid rgba(96,176,255,0.06); font-size: .5rem; color: var(--accent); text-align: center; }
.lg-myteam strong { font-weight: 700; font-size: .56rem; }

/* Lobby Actions */
.lg-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.04); }
.lg-btn { font-size: .44rem; padding: 4px 14px; border-radius: 4px; background: rgba(255,255,255,0.04); color: var(--muted); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: all .15s; white-space: nowrap; }
.lg-btn:hover { background: rgba(96,176,255,0.08); color: var(--accent); border-color: rgba(96,176,255,0.15); }
.lg-btn-close { color: rgba(255,100,100,0.5); border-color: rgba(255,100,100,0.1); }
.lg-btn-close:hover { background: rgba(255,80,80,0.08); color: #ff6b6b; border-color: rgba(255,80,80,0.15); }
.lobby-spectate { font-size: .44rem; padding: 4px 14px; border-radius: 4px; text-decoration: none; background: rgba(96,176,255,0.06); color: var(--accent); border: 1px solid rgba(96,176,255,0.08); transition: all .15s; white-space: nowrap; display: inline-flex; align-items: center; }
.lobby-spectate:hover { background: rgba(96,176,255,0.12); border-color: rgba(96,176,255,0.2); color: var(--accent); }

.no-lobby { padding: 20px; text-align: center; font-size: 0.6rem; color: var(--muted); font-style: italic; opacity: .4; }


/* ── Profile Card ── */
.pf { padding: 0; display: flex; align-items: stretch; overflow: hidden; background: linear-gradient(135deg, #0d0d1c 0%, #10102a 100%); }
.pf-main { display: flex; align-items: center; gap: 18px; padding: 18px 24px; flex: 1; min-width: 0; }
.pf-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(96,176,255,0.1); background: var(--bg); flex-shrink: 0; object-fit: cover; }
.pf-avatar-ph { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(96,176,255,0.1); background: rgba(96,176,255,0.06); display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.pf-info { flex: 1; min-width: 0; }
.pf-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.pf-name { font-family: 'Rajdhani', sans-serif; font-size: .92rem; font-weight: 700; color: var(--white); letter-spacing: .5px; text-decoration: none; transition: color .15s; }
.pf-name:hover { color: var(--accent); }
.pf-rank { font-family: 'Rajdhani', sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: .5px; color: var(--accent); background: rgba(96,176,255,0.05); border: 1px solid rgba(96,176,255,0.08); padding: 2px 9px; border-radius: 4px; }
.pf-vip { font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700; color: var(--accent); letter-spacing: 1px; padding: 2px 7px; border: 1px solid rgba(96,176,255,0.12); border-radius: 3px; }
.pf-elo { font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700; color: #ffb428; letter-spacing: 1px; padding: 2px 7px; border: 1px solid rgba(255,180,40,0.15); border-radius: 3px; background: rgba(255,180,40,0.06); }
.pf-dc-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 5px; border-radius: 4px; background: rgba(88,101,242,0.1); color: #7c8aff; font-size: .42rem; font-weight: 600; letter-spacing: .3px; flex-shrink: 0; border: 1px solid rgba(88,101,242,0.12); }
.pf-dc-badge svg { flex-shrink: 0; opacity: .8; }
.pf-tw-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 5px; border-radius: 4px; background: rgba(145,70,255,0.12); color: #c9a4ff; font-size: .42rem; font-weight: 600; letter-spacing: .3px; flex-shrink: 0; border: 1px solid rgba(145,70,255,0.15); }
.pf-tw-badge svg { flex-shrink: 0; }
.pf-tw-badge.pf-tw-pending { background: rgba(255,180,40,0.08); color: #ffb428; border-color: rgba(255,180,40,0.18); }
.pf-tw-apply { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.38); font-size: .42rem; font-weight: 600; letter-spacing: .3px; flex-shrink: 0; border: 1px dashed rgba(255,255,255,0.12); text-decoration: none; transition: all .15s; }
.pf-tw-apply:hover { background: rgba(145,70,255,0.08); color: #c9a4ff; border-color: rgba(145,70,255,0.3); }
.pf-tw-apply svg { flex-shrink: 0; color: #9146ff; }

/* Cast-Apply modal */
.cast-apply-bg { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cast-apply-box { position: relative; background: #12122a; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 26px 28px 20px; max-width: 440px; width: 100%; box-shadow: 0 28px 56px rgba(0,0,0,0.5); }
.cast-apply-x { position: absolute; top: 10px; right: 14px; background: none; border: none; color: rgba(255,255,255,0.35); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px 8px; }
.cast-apply-x:hover { color: #fff; }
.cast-apply-title { font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: .9rem; color: #f0f0f8; letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase; }
.cast-apply-text { font-size: .6rem; color: rgba(255,255,255,0.55); line-height: 1.55; margin: 0 0 12px; }
.cast-apply-note { font-size: .54rem; color: #ffb428; padding: 7px 10px; background: rgba(255,180,40,0.08); border: 1px solid rgba(255,180,40,0.22); border-radius: 6px; margin-bottom: 10px; }
.cast-apply-lbl { display: block; font-family: 'Rajdhani', sans-serif; font-size: .48rem; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 4px; }
.cast-apply-input { width: 100%; padding: 9px 11px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #f0f0f8; font-size: .64rem; font-family: 'Rajdhani', sans-serif; }
.cast-apply-input:focus { outline: none; border-color: var(--accent); background: rgba(96,176,255,0.04); }
.cast-apply-err { color: #ff8080; font-size: .54rem; margin-top: 6px; min-height: .8rem; }
.cast-apply-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.cast-apply-cancel, .cast-apply-submit { padding: 8px 16px; border-radius: 6px; font-family: 'Rajdhani', sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); transition: all .15s; }
.cast-apply-cancel { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.55); }
.cast-apply-cancel:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cast-apply-submit { background: rgba(96,176,255,0.15); color: var(--accent); border-color: rgba(96,176,255,0.35); }
.cast-apply-submit:hover { background: rgba(96,176,255,0.25); border-color: rgba(96,176,255,0.6); }

/* Profile Most Played Heroes */
.pf-heroes { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.pf-hero-icon { width: 28px; height: 28px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(96,176,255,0.1); background: rgba(0,0,0,0.3); }
.pf-hero-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-hero-tag { padding: 2px 8px; border-radius: 4px; background: rgba(96,176,255,0.06); border: 1px solid rgba(96,176,255,0.1); color: var(--accent); font-size: .44rem; font-weight: 500; cursor: default; transition: border-color .15s; }
.pf-hero-tag:hover { border-color: rgba(96,176,255,0.25); }


/* ── Leaderboard ── */
.lb-card { border-color: rgba(96,176,255,0.06); }
.lb-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(96,176,255,0.15), transparent); }

.lb-row { display: grid; grid-template-columns: 28px 1fr 80px 44px 56px 48px; align-items: center; padding: 9px 20px; border-bottom: 1px solid rgba(255,255,255,0.025); font-size: 0.62rem; transition: all .15s; cursor: pointer; }
.lb-row:hover { background: rgba(96,176,255,0.015); }
.lb-head { font-family: 'Rajdhani', sans-serif; font-size: 0.58rem; font-weight: 700; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; cursor: default; border-bottom: 1px solid rgba(255,255,255,0.04); padding: 10px 20px; }
.lb-head:hover { background: transparent; }
.lb-rank { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--muted); font-size: 0.68rem; }
.lb-rank.g { color: #d4a840; text-shadow: 0 0 8px rgba(212,168,64,0.3); }
.lb-rank.s { color: #7878a0; }
.lb-rank.b { color: #a07050; }
.lb-name { font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-wr { font-family: 'Rajdhani', sans-serif; font-weight: 700; text-align: right; }
.lb-dim { color: var(--muted); text-align: right; }


/* ── Match History ── */
.match { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,0.025); transition: background .15s; }
.match:hover { background: rgba(96,176,255,0.015); }
.match:last-child { border-bottom: none; }
.match-side { width: 3px; height: 28px; border-radius: 2px; flex-shrink: 0; }
.match-side.rad { background: var(--green); box-shadow: 0 0 6px rgba(106,170,48,0.3); }
.match-side.dire { background: var(--red); box-shadow: 0 0 6px rgba(224,64,64,0.3); }
.match-side.pend { background: var(--muted); opacity: .3; }
.match-info { flex: 1; min-width: 0; }
.match-players { font-size: 0.62rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-detail { font-size: 0.5rem; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; align-items: center; opacity: .5; }
.match-result { font-family: 'Rajdhani', sans-serif; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; letter-spacing: .5px; }
.match-link { font-size: 0.5rem; color: var(--muted); text-decoration: none; opacity: .3; transition: all .15s; flex-shrink: 0; }
.match-link:hover { opacity: 1; color: var(--accent); }


/* ── Steam / Auth Modal ── */
.modal-bg { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); align-items: center; justify-content: center; }
.modal-box { background: #12122a; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 24px 28px; max-width: 400px; width: 90%; animation: modalIn .25s ease; }
@keyframes modalIn { from { transform: scale(0.95) translateY(12px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.modal-title { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 4px; letter-spacing: 1px; }
.modal-sub { font-size: .58rem; color: var(--muted); margin-bottom: 16px; }
.modal-or { text-align: center; font-size: .55rem; color: var(--muted); margin: 12px 0; letter-spacing: 2px; text-transform: uppercase; }
.modal-opt { padding: 14px; border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; margin-bottom: 8px; transition: border-color .2s; }
.modal-opt:hover { border-color: rgba(96,176,255,0.12); }
.modal-opt-title { font-family: 'Rajdhani', sans-serif; font-size: .75rem; font-weight: 700; color: var(--white); margin-bottom: 3px; letter-spacing: .5px; }
.modal-opt-desc { font-size: .56rem; color: var(--muted); margin-bottom: 8px; }
.modal-input { width: 100%; background: var(--bg); border: 1px solid rgba(255,255,255,0.06); color: var(--white); padding: 7px 11px; border-radius: 5px; font-size: .62rem; font-family: inherit; transition: border-color .2s; }
.modal-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.modal-btn { border: none; font-family: 'Rajdhani', sans-serif; font-size: .68rem; font-weight: 700; padding: 7px 16px; border-radius: 5px; cursor: pointer; transition: all .2s; text-transform: uppercase; letter-spacing: 1px; }
.modal-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; transition: color .15s; }
.modal-close:hover { color: var(--white); }
#reg-status { font-size: .58rem; margin-top: 6px; }


/* ── Ready Check Overlay ── */






@keyframes rcPulse { 0%, 100% { box-shadow: 0 4px 24px rgba(106,170,48,0.3); } 50% { box-shadow: 0 4px 32px rgba(106,176,48,0.5); } }







/* ── Team Assignment Popup ── */
.ta-your-team { font-size: .7rem; color: var(--accent); text-align: center; margin-bottom: 12px; padding: 10px; background: rgba(96,176,255,0.06); border-radius: 8px; border: 1px solid rgba(96,176,255,0.12); }
.ta-your-team strong { font-size: .8rem; }
.ta-player { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: .52rem; color: var(--text); }
.ta-player.ta-me { color: var(--accent); font-weight: 600; }
.ta-pos { font-size: .42rem; color: var(--muted); }
.ta-info { display: flex; justify-content: center; gap: 12px; padding: 8px 0 4px; font-size: .46rem; color: var(--muted); }
.ta-invite-hint { text-align: center; font-size: .5rem; color: var(--accent); margin: 10px 0 0; padding: 8px 10px; background: rgba(96,176,255,0.05); border: 1px solid rgba(96,176,255,0.12); border-radius: 6px; letter-spacing: .3px; }


/* ── Draft Phase Overlay ── */
.draft-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.draft-box { background: #12122a; border: 1px solid rgba(96,176,255,0.15); border-radius: 14px; padding: 28px 32px; max-width: 480px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.draft-pick-box { max-width: 520px; }
.draft-title { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; color: var(--white); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; }
.draft-timer { font-family: 'Rajdhani', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.draft-desc { font-size: .6rem; color: var(--text); margin-bottom: 12px; line-height: 1.5; }
.draft-counts { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; font-size: .58rem; }
.dc-auto { color: var(--accent); }
.dc-draft { color: var(--green); }
.draft-btns { display: flex; gap: 10px; justify-content: center; }
.draft-btn { padding: 10px 24px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text); font-size: .6rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.draft-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.draft-btn.active { background: rgba(96,176,255,0.15); border-color: var(--accent); color: var(--accent); }
.draft-btn-accent { border-color: rgba(93,190,122,0.3); }
.draft-btn-accent.active { background: rgba(93,190,122,0.15); border-color: var(--green); color: var(--green); }
/* .draft-spectator removed — non-participants see status text only */
.draft-candidates { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.draft-cand { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: var(--text); font-size: .58rem; cursor: pointer; transition: all .15s; }
.draft-cand:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.draft-cand.active { background: rgba(96,176,255,0.12); border-color: var(--accent); color: var(--accent); }
/* .cand-votes removed — captain vote is anonymous */
.draft-teams-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; text-align: left; }
.dtm-team { padding: 8px 10px; background: rgba(255,255,255,0.02); border-radius: 6px; border: 1px solid rgba(255,255,255,0.04); position: relative; transition: box-shadow .2s, transform .2s; }
.dtm-team.dtm-t1 { border-color: rgba(96,176,255,0.25); background: rgba(96,176,255,0.04); }
.dtm-team.dtm-t2 { border-color: rgba(96,176,255,0.1); background: rgba(96,176,255,0.015); }
.dtm-label { font-size: .48rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 4px; }
.dtm-t1 .dtm-label { color: #60b0ff; }
.dtm-t2 .dtm-label { color: rgba(255,255,255,0.55); }
/* Own team highlight — stronger border + glow, with a small "DEIN TEAM" badge */
.dtm-team.is-me.dtm-t1 { box-shadow: 0 0 0 2px #60b0ff inset, 0 8px 24px -8px rgba(96,176,255,0.45); background: rgba(96,176,255,0.1); }
.dtm-team.is-me.dtm-t2 { box-shadow: 0 0 0 2px rgba(96,176,255,0.55) inset, 0 8px 24px -8px rgba(96,176,255,0.25); background: rgba(96,176,255,0.08); }
.dtm-team.is-me { transform: translateY(-1px); }
.dtm-team.is-me::before { content: 'DEIN TEAM'; position: absolute; top: -7px; right: 8px; font-size: .38rem; font-weight: 700; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 10px; background: #0a0a14; color: #fff; }
.dtm-names { font-size: .52rem; color: var(--text); line-height: 1.5; }
.draft-pool { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.draft-pool-btn { padding: 8px 16px; border-radius: 6px; border: 1px solid rgba(96,176,255,0.2); background: rgba(96,176,255,0.06); color: var(--accent); font-size: .58rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.draft-pool-btn:hover { background: rgba(96,176,255,0.15); border-color: var(--accent); transform: translateY(-1px); }
.draft-dismiss { margin-top: 14px; padding: 8px 32px; border-radius: 6px; border: 1px solid rgba(96,176,255,0.2); background: rgba(96,176,255,0.08); color: var(--accent); font-size: .52rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.draft-dismiss:hover { background: rgba(96,176,255,0.15); border-color: rgba(96,176,255,0.3); }


/* ── Draft Vote ── */
.dv-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.dv-team { padding: 12px 20px; }
.dv-team h3 { font-family: 'Rajdhani', sans-serif; font-size: .65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.dv-team.t1 h3 { color: var(--accent); }
.dv-team.t2 h3 { color: #b8a0ff; }
.dv-hero { font-size: .62rem; color: var(--white); padding: 2px 0; }
.dv-btns { display: flex; gap: 8px; padding: 12px 20px; justify-content: center; }
.dv-btn { border: none; font-family: 'Rajdhani', sans-serif; font-size: .72rem; font-weight: 700; padding: 9px 28px; border-radius: 6px; cursor: pointer; transition: all .2s; letter-spacing: 1px; text-transform: uppercase; }
.dv-btn:hover { transform: translateY(-1px); }
.dv-btn.dv-t1 { background: rgba(96,176,255,0.15); color: var(--accent); border: 1px solid rgba(96,176,255,0.2); }
.dv-btn.dv-t2 { background: rgba(140,130,255,0.12); color: #b8a0ff; border: 1px solid rgba(140,130,255,0.2); }
.dv-btn.voted { opacity: .4; cursor: default; transform: none; }
.dv-btn.my-vote { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
/* .dv-counts removed — voting is anonymous */
.dv-closed { text-align: center; padding: 8px 20px; font-size: .58rem; color: var(--muted); font-style: italic; }
#draft-lb-section .lb-row { grid-template-columns: 28px 1fr 56px 56px 56px; }


/* ── Discord Link Banner ── */
.dl-banner { margin-bottom: 14px; }
.dl-inner { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: linear-gradient(135deg, #1a1a3a, #1e1e40); border: 1px solid rgba(88,101,242,0.25); border-radius: 10px; }
.dl-icon { font-size: 1.2rem; flex-shrink: 0; }
.dl-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dl-text strong { font-size: .62rem; color: var(--white); }
.dl-text span { font-size: .5rem; color: var(--muted); line-height: 1.4; }
.dl-btn { padding: 7px 18px; border-radius: 6px; background: #5865f2; color: #fff; font-size: .55rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s; }
.dl-btn:hover { background: #4752c4; }@media (max-width: 680px){ .dl-inner { flex-direction: column; text-align: center; gap: 8px; } }

/* Cast queue banner (user waits as caster) */
.cast-queue-banner { margin: 0 0 20px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(135deg, rgba(96,176,255,0.08), rgba(96,176,255,0.02)); border: 1px solid rgba(96,176,255,0.22); border-radius: 10px; }
.cqb-tw { width: 22px; height: 22px; border-radius: 50%; background: #9146ff; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cqb-text { flex: 1; font-family: 'Rajdhani', sans-serif; font-size: .58rem; color: rgba(255,255,255,0.75); letter-spacing: .3px; line-height: 1.45; }
.cqb-text strong { color: #fff; margin-right: 4px; }
.cqb-leave { padding: 6px 12px; background: rgba(96,176,255,0.1); color: var(--accent); border: 1px solid rgba(96,176,255,0.28); border-radius: 6px; font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; transition: all .15s; white-space: nowrap; }
.cqb-leave:hover { background: rgba(96,176,255,0.18); border-color: rgba(96,176,255,0.5); }

/* Cast waiting strip on queue card */
.q-cast-strip { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 10px 14px 18px; background: rgba(96,176,255,0.04); border: 1px solid rgba(96,176,255,0.18); border-radius: 8px; flex-wrap: wrap; }
.q-cast-label { display: inline-flex; align-items: center; gap: 6px; font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .6px; color: rgba(255,255,255,0.78); }
.q-cast-label svg { color: #9146ff; }
.q-cast-avas { display: inline-flex; align-items: center; margin-left: auto; }
.q-cast-ava { display: inline-block; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(96,176,255,0.35); background: rgba(96,176,255,0.08); margin-left: -5px; transition: transform .15s ease, border-color .15s ease; }
.q-cast-ava:first-child { margin-left: 0; }
.q-cast-ava:hover { transform: translateY(-1px) scale(1.08); border-color: rgba(96,176,255,0.7); z-index: 2; position: relative; }
.q-cast-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-cast-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--accent); font-size: .56rem; }
.q-cast-more { font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700; color: var(--accent); letter-spacing: .3px; margin-left: 6px; }


/* ── MVM (Most Valuable Moment) ── */
.mvm-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mvm-label-row .mvm-label { margin-bottom: 0; }
.mvm-votemode-btn { background: none; border: 1px solid rgba(96,176,255,0.15); color: var(--accent); font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700; padding: 3px 10px; border-radius: 4px; cursor: pointer; letter-spacing: .5px; text-transform: uppercase; transition: all .2s; }
.mvm-votemode-btn:hover { background: rgba(96,176,255,0.06); border-color: rgba(96,176,255,0.3); }
.mvm-help { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); color: rgba(90,90,120,0.6); font-size: .45rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .15s; position: relative; margin-left: 6px; }
.mvm-help:hover { border-color: var(--accent); color: var(--accent); }
.mvm-tooltip { display: none; position: absolute; top: 22px; left: 0; width: 240px; background: #12122a; border: 1px solid rgba(96,176,255,0.1); border-radius: 8px; padding: 12px 14px; font-size: .52rem; color: var(--muted); line-height: 1.6; z-index: 10; box-shadow: 0 4px 20px rgba(0,0,0,0.4); font-weight: 400; letter-spacing: 0; text-transform: none; }
.mvm-tooltip.show { display: block; }
.mvm-tooltip strong { color: var(--white); }
.mvm-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; overflow: hidden; }
.mvm-left { padding: 14px; }
.mvm-divider { background: rgba(255,255,255,0.03); }
.mvm-right { padding: 14px; }
.mvm-label { font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

/* MVM Winner */
.potm-winner-empty { text-align: center; color: var(--muted); font-size: .58rem; font-style: italic; padding: 20px 0; }
.potm-winner-thumb { position: relative; cursor: pointer; overflow: hidden; border-radius: 6px; margin-bottom: 8px; }
.potm-winner-thumb img { width: 100%; display: block; transition: transform .3s; }
.potm-winner-thumb:hover img { transform: scale(1.03); }
.potm-winner-thumb.is-video::after { content: '\25B6'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .65rem; padding-left: 2px; opacity: .8; transition: all .2s; }
.potm-winner-thumb.is-video:hover::after { opacity: 1; background: rgba(96,176,255,0.4); border-color: rgba(96,176,255,0.5); }
.potm-winner-title { font-family: 'Rajdhani', sans-serif; font-size: .68rem; font-weight: 700; color: var(--white); letter-spacing: .3px; }
.potm-winner-meta { font-size: .5rem; color: var(--muted); margin-top: 2px; }
.potm-winner-badge { font-family: 'Rajdhani', sans-serif; font-size: .48rem; font-weight: 700; color: #d4a840; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px; }
.potm-runners { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.potm-runner { display: flex; align-items: center; gap: 6px; font-size: .56rem; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: all .15s; }
.potm-runner:hover { color: var(--white); background: rgba(255,255,255,0.02); }
.potm-runner-rank { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--muted); width: 14px; font-size: .6rem; }
.potm-runner-title { flex: 1; color: var(--white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* MVM Submissions */
.potm-sub { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.03); transition: background .15s; cursor: pointer; }
.potm-sub:first-child { border-top: none; }
.potm-sub:hover { background: rgba(255,255,255,0.01); }
.potm-sub-pending { opacity: .7; border-left: 2px solid var(--accent); padding-left: 6px; }
.potm-sub-thumb { width: 48px; height: 28px; border-radius: 4px; background: #000; overflow: hidden; flex-shrink: 0; cursor: pointer; position: relative; }
.potm-sub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.potm-sub-thumb::after { content: '\25B6'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .6rem; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity .2s; }
.potm-sub-thumb:hover::after { opacity: 1; }
.potm-sub-info { flex: 1; min-width: 0; }
.potm-sub-title { font-size: .58rem; font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.potm-sub-meta { font-size: .5rem; color: var(--muted); margin-top: 1px; }
.potm-sub-votes { display: flex; gap: 4px; flex-shrink: 0; }
.potm-vote-btn { background: none; border: 1px solid rgba(255,255,255,0.05); color: var(--muted); font-size: .6rem; width: 24px; height: 24px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.potm-vote-btn:hover { border-color: rgba(96,176,255,0.2); color: var(--white); }
.potm-vote-btn.voted-up { background: rgba(106,170,48,0.12); border-color: rgba(106,170,48,0.2); color: var(--green); }
.potm-vote-btn.voted-down { background: rgba(224,64,64,0.08); border-color: rgba(224,64,64,0.15); color: var(--red); }
.potm-empty { padding: 16px 0; text-align: center; font-size: .55rem; color: var(--muted); font-style: italic; }

/* MVM Submit Form */
.potm-submit-btn { background: none; border: 1px solid rgba(255,255,255,0.04); color: rgba(90,90,120,0.5); font-family: 'Rajdhani', sans-serif; font-size: .5rem; font-weight: 700; padding: 4px 10px; border-radius: 4px; cursor: pointer; letter-spacing: .5px; text-transform: uppercase; transition: all .2s; width: 100%; }
.potm-submit-btn:hover { border-color: rgba(96,176,255,0.15); color: var(--accent); }
#potm-submit-form { display: flex; flex-direction: column; gap: 6px; }
.potm-input { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); color: var(--white); font-size: .62rem; padding: 7px 12px; border-radius: 5px; font-family: inherit; transition: border-color .2s; }
.potm-input:focus { outline: none; border-color: var(--accent); }
.potm-send-btn { background: linear-gradient(135deg, var(--accent), #4898e0); color: #fff; border: none; font-family: 'Rajdhani', sans-serif; font-size: .6rem; font-weight: 700; padding: 7px 18px; border-radius: 5px; cursor: pointer; letter-spacing: .5px; text-transform: uppercase; transition: all .2s; align-self: flex-start; }
.potm-send-btn:hover { transform: translateY(-1px); }
.potm-status { font-size: .55rem; min-height: 16px; }

/* Video Popup */
.potm-popup { position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,0.9); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; animation: fadeIn .2s ease; }
.potm-popup-inner { width: 92%; max-width: 960px; position: relative; }
.potm-popup-inner iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.potm-popup-close { position: absolute; top: -36px; right: 0; background: none; border: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; transition: color .15s; }
.potm-popup-close:hover { color: var(--white); }


/* ── Voting Mode Lightbox ── */
.vm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.vm-box { position: relative; background: #0e0e1e; border: 1px solid rgba(255,255,255,0.04); border-radius: 14px; padding: 28px; max-width: 740px; width: 90vw; max-height: 90vh; display: flex; flex-direction: column; gap: 14px; }
.vm-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; transition: color .2s; z-index: 2; }
.vm-close:hover { color: var(--white); }
.vm-counter { font-family: 'Rajdhani', sans-serif; font-size: .55rem; font-weight: 700; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }
.vm-title { font-family: 'Rajdhani', sans-serif; font-size: .85rem; font-weight: 700; color: var(--white); }
.vm-meta { font-size: .55rem; color: var(--muted); }
.vm-content { border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 16/9; position: relative; }
.vm-content iframe, .vm-content img { width: 100%; height: 100%; border: none; object-fit: contain; }
.vm-actions { display: flex; align-items: center; justify-content: center; gap: 16px; }
.vm-btn { font-size: 1.1rem; width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.vm-btn.vm-up { border-color: rgba(106,170,48,0.2); }
.vm-btn.vm-up:hover { background: rgba(106,170,48,0.15); border-color: rgba(106,170,48,0.4); transform: scale(1.1); }
.vm-btn.vm-up.voted { background: rgba(106,170,48,0.25); border-color: var(--green); box-shadow: 0 0 12px rgba(106,170,48,0.2); }
.vm-btn.vm-down { border-color: rgba(224,64,64,0.15); }
.vm-btn.vm-down:hover { background: rgba(224,64,64,0.1); border-color: rgba(224,64,64,0.3); transform: scale(1.1); }
.vm-btn.vm-down.voted { background: rgba(224,64,64,0.2); border-color: var(--red); box-shadow: 0 0 12px rgba(224,64,64,0.15); }
.vm-btn.vm-skip { border-radius: 8px; width: auto; height: auto; padding: 10px 24px; font-family: 'Rajdhani', sans-serif; font-size: .6rem; font-weight: 700; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.vm-btn.vm-skip:hover { color: var(--white); border-color: rgba(255,255,255,0.15); }
.vm-nav { display: flex; justify-content: space-between; }
.vm-nav-btn { background: none; border: none; color: var(--muted); font-family: 'Rajdhani', sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; padding: 6px 12px; transition: color .2s; }
.vm-nav-btn:hover { color: var(--white); }


/* ── Report Modal ── */









/* Report Link (fixed bottom-left) */
.report-link { position: fixed; bottom: 42px; left: 16px; font-size: .48rem; color: var(--muted); cursor: pointer; padding: 8px 14px; border-radius: 8px; background: rgba(10,10,20,0.75); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(8px); transition: all .2s; z-index: 51; letter-spacing: .3px; text-decoration: none; display: inline-flex; align-items: center; }
.report-link:hover { color: var(--accent); border-color: rgba(96,176,255,0.15); background: rgba(96,176,255,0.04); }


/* ── Footer ── */
footer { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.025); padding: 20px; text-align: center; font-size: 0.48rem; color: #14142a; margin-top: 50px; letter-spacing: 1px; }
footer a { color: #20203a; text-decoration: none; transition: color .15s; }
footer a:hover { color: var(--accent); }


/* ── Animations ── */
.fi { opacity: 0; transform: translateY(10px); animation: fadeIn .45s ease forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
.fp-page .fi { opacity: 1; transform: none; animation: none; }@media (prefers-reduced-motion: reduce){ *:not(.fp-page) { animation-duration: .01ms !important; transition-duration: .01ms !important; } }


/* ── Responsive ── */
@media (max-width: 680px) {
  .q-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr; }
  .hero h1 { letter-spacing: 4px; }
  .hero .sub { letter-spacing: 2px; font-size: .55rem; }
  .q-header { padding: 14px 16px 8px; }
  .q-body { padding: 12px 16px; }
  .q-foot { padding: 10px 16px; }
  .lb-row { grid-template-columns: 24px 1fr 60px 40px 50px 44px !important; font-size: .6rem !important; padding: 7px 12px !important; }
  .pf-main { padding: 12px 14px; gap: 10px; }
  .pf-name { font-size: .78rem; }
  .match { padding: 8px 16px; }
  .mvm-grid { grid-template-columns: 1fr; }
  .mvm-divider { display: none; }
  .mvm-left, .mvm-right { padding: 12px; }
}@media (max-width: 400px){
  .q-title { font-size: .7rem; }
  .btn-q { padding: 8px 20px; font-size: .62rem; }
}

/* ── Report Modal ── */
.rp-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.rp-box{background:#10102a;border:1px solid rgba(96,176,255,0.1);border-radius:14px;padding:0;max-width:460px;width:92%;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.rp-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:.9rem;cursor:pointer;z-index:1;padding:4px;transition:color .12s;}
.rp-close:hover{color:var(--white);}
.rp-tabs-row{display:flex;border-bottom:1px solid var(--border);padding:0;}
.rp-tab-btn{flex:1;text-align:center;padding:12px 0;font-size:.48rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .12s;text-transform:uppercase;letter-spacing:.5px;}
.rp-tab-btn:hover{color:var(--text);}
.rp-tab-btn.active{color:var(--accent);border-color:var(--accent);}
.rp-form{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;}
.rp-field{display:flex;flex-direction:column;gap:4px;}
.rp-field-label{font-size:.4rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;}
.rp-input{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--white);font-size:.5rem;outline:none;font-family:inherit;transition:border-color .15s;}
.rp-input:focus{border-color:rgba(96,176,255,0.3);}

select.rp-input { background: #0a0a18; color: var(--white); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
select.rp-input option { background: #0a0a18; color: var(--white); }

.rp-textarea{height:100px;resize:vertical;line-height:1.5;}
.rp-char-count{font-size:.36rem;color:rgba(255,255,255,0.15);text-align:right;}
.rp-submit{padding:10px 24px;border-radius:6px;background:rgba(96,176,255,0.1);border:1px solid rgba(96,176,255,0.15);color:var(--accent);font-size:.5rem;font-weight:600;cursor:pointer;transition:all .15s;align-self:flex-start;letter-spacing:.3px;}
.rp-submit:hover{background:rgba(96,176,255,0.2);border-color:rgba(96,176,255,0.25);}
.rp-submit:disabled{opacity:.5;cursor:not-allowed;}
.rp-status{font-size:.46rem;min-height:16px;}
.rp-empty{padding:20px;font-size:.48rem;color:var(--muted);text-align:center;}

/* Report History */
#rp-history-tab{max-height:360px;overflow-y:auto;}
.rph-item{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,0.03);}
.rph-item:last-child{border-bottom:none;}
.rph-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.rph-cat{font-size:.4rem;padding:2px 8px;border-radius:3px;background:rgba(255,255,255,0.04);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.rph-status{font-size:.38rem;padding:2px 7px;border-radius:3px;font-weight:600;}
.rph-open{background:rgba(255,180,40,0.08);color:#ffb428;}
.rph-resolved{background:rgba(96,176,255,0.08);color:var(--accent);}
.rph-dismissed{background:rgba(255,255,255,0.04);color:var(--muted);}
.rph-time{font-size:.36rem;color:rgba(255,255,255,0.15);margin-left:auto;}
.rph-desc{font-size:.46rem;color:var(--text);line-height:1.5;}
.rph-note{font-size:.44rem;color:var(--accent);margin-top:4px;padding:6px 10px;background:rgba(96,176,255,0.04);border-radius:4px;border-left:2px solid rgba(96,176,255,0.2);}

/* Ticket thread styles */
.rph-clickable{cursor:pointer;transition:background .12s;}
.rph-clickable:hover{background:rgba(96,176,255,0.03);}
.rph-progress{background:rgba(96,176,255,0.08);color:var(--accent);}
.rph-replies{font-size:.38rem;color:var(--muted);padding:2px 7px;border-radius:3px;background:rgba(255,255,255,0.03);}
.tkt-detail{padding:0;}
.tkt-back{padding:12px 20px;font-size:.44rem;color:var(--accent);cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.03);transition:background .12s;}
.tkt-back:hover{background:rgba(96,176,255,0.03);}
.tkt-header{display:flex;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,0.03);flex-wrap:wrap;}
.tkt-thread{padding:12px 20px;display:flex;flex-direction:column;gap:10px;max-height:280px;overflow-y:auto;}
.tkt-msg{padding:10px 14px;border-radius:8px;max-width:88%;}
.tkt-msg-user{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);align-self:flex-start;}
.tkt-msg-staff{background:rgba(96,176,255,0.06);border:1px solid rgba(96,176,255,0.1);align-self:flex-end;}
.tkt-msg-author{font-size:.4rem;font-weight:600;color:var(--muted);margin-bottom:4px;}
.tkt-msg-staff .tkt-msg-author{color:var(--accent);}
.tkt-staff-badge{font-size:.34rem;padding:1px 6px;border-radius:3px;background:rgba(96,176,255,0.1);color:var(--accent);font-weight:700;letter-spacing:.3px;vertical-align:middle;}
.tkt-msg-text{font-size:.46rem;color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.tkt-msg-time{font-size:.34rem;color:rgba(255,255,255,0.12);margin-top:4px;}
.tkt-reply-box{padding:12px 20px;border-top:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:8px;}
.tkt-reply-box .rp-textarea{height:70px;}

/* Border glow animation for active game cards */
@keyframes borderGlow {
  0%, 100% { border-color: rgba(96,176,255,0.08); }
  50% { border-color: rgba(96,176,255,0.2); }
}
.lg-card { animation: borderGlow 3s ease-in-out infinite; }

/* Queue card glow when players are in queue */
@keyframes queuePulse {
  0%, 100% { box-shadow: 0 -2px 8px rgba(96,176,255,0.05); border-top-color: rgba(96,176,255,0.08); }
  50% { box-shadow: 0 -2px 12px rgba(96,176,255,0.15); border-top-color: rgba(96,176,255,0.25); }
}
.q-main.q-has-players { border-top: 2px solid rgba(96,176,255,0.08); animation: queuePulse 3s ease-in-out infinite; }

/* Profile card gradient border on hover */
.pf { border: 1px solid var(--border); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.pf:hover { border-color: rgba(96,176,255,0.2); box-shadow: 0 0 16px rgba(96,176,255,0.06); }

/* Queue Ban Notice */
.q-ban-notice{display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(224,64,64,0.06);border:1px solid rgba(224,64,64,0.12);border-radius:6px;width:100%;}
.q-ban-icon{font-size:.46rem;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.5px;}
.q-ban-time{font-size:.44rem;color:rgba(224,64,64,0.6);}

/* Ticket Success */
.tkt-success{display:flex;flex-direction:column;align-items:center;padding:32px 24px;text-align:center;}
.tkt-success-icon{width:48px;height:48px;border-radius:50%;background:rgba(96,176,255,0.1);border:2px solid rgba(96,176,255,0.2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--accent);margin-bottom:14px;}
.tkt-success-title{font-family:'Rajdhani',sans-serif;font-size:.7rem;font-weight:700;color:var(--white);letter-spacing:1px;margin-bottom:6px;}
.tkt-success-text{font-size:.48rem;color:var(--muted);line-height:1.6;max-width:280px;}


/* ── Behaviour Points ── */
.vp-good { color: #5dbe7a; }
.vp-warn { color: #e0a030; }
.vp-low { color: #e07030; }
.vp-bad { color: #e05555; }

.pf-vp-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pf-vp-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; max-width: 120px; }
.pf-vp-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.pf-vp-fill.vp-good { background: #5dbe7a; }
.pf-vp-fill.vp-warn { background: #e0a030; }
.pf-vp-fill.vp-low { background: #e07030; }
.pf-vp-fill.vp-bad { background: #e05555; }
.pf-vp-text { font-size: .42rem; font-weight: 600; }

/* Modal BP */
.pmod-vp-wrap { display: flex; align-items: center; gap: 10px; }
.pmod-vp-bar { flex: 1; height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; max-width: 180px; }
.pmod-vp-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.pmod-vp-fill.vp-good { background: #5dbe7a; }
.pmod-vp-fill.vp-warn { background: #e0a030; }
.pmod-vp-fill.vp-low { background: #e07030; }
.pmod-vp-fill.vp-bad { background: #e05555; }
.pmod-vp-text { font-size: .48rem; font-weight: 600; }


/* ── Community Stats Row ── */
.community-stats{display:flex;justify-content:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.cs-item{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 24px;text-align:center;flex:1;min-width:120px;max-width:200px;transition:border-color .2s;}
.cs-item:hover{border-color:rgba(96,176,255,0.12);}
.cs-val{font-family:'Rajdhani',sans-serif;font-size:1.1rem;font-weight:700;color:var(--white);letter-spacing:1px;}
.cs-val.cs-hero{font-size:.78rem;color:var(--accent);}
.cs-lbl{font-size:.46rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px;}

/* ── Match Hero Tags ── */
.match-heroes{display:flex;gap:3px;flex-wrap:wrap;margin:3px 0;}
.match-hero-tag{font-size:.44rem;color:var(--muted);background:rgba(255,255,255,0.03);padding:1px 5px;border-radius:3px;white-space:nowrap;}

/* ── Additional Mobile Improvements ── */
@media (max-width: 680px) {
  /* Queue card overflow fix */
  .q-card{max-width:100%;overflow-x:hidden;}
  .qf-chips{flex-wrap:wrap;gap:4px;}
  .qf-chip{padding:5px 10px;font-size:.56rem;}
  .qf-row{gap:6px;}
  .fp-q-wrap{padding:0 8px;}
  /* Stats table horizontal scroll */
  .lb-card{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .lb-row{min-width:400px;}
  /* Community stats */
  .community-stats{gap:6px;padding:0 8px;}
  .cs-item{padding:10px 14px;min-width:80px;}
  .cs-val{font-size:.88rem;}
  /* Match cards */
  .match{flex-wrap:wrap;gap:6px;}
  .match-heroes{display:none;}
  .match-link{font-size:.5rem;}
  /* Hero compact */
  .hero-compact h1{font-size:1.2rem;letter-spacing:6px;}
  .hero-compact .hero-penguin{font-size:1.4rem;}
  /* Side nav hide on mobile */
  .fp-scrollbar{display:none;}
  /* Report modal */
  .rp-box{max-width:95%;width:95%;}
}@media (max-width: 400px){
  .community-stats{flex-direction:column;align-items:stretch;}
  .cs-item{max-width:none;}
  .lb-row{min-width:360px;}
  .fp-inner{padding:0 4px;}
}

/* ── Landing page (logged-out visitors) ── */















/* Landing (logged out) — legacy block kept for .lc-hint/.lc-desc only; layout rules live below */
.lc-desc{font-size:.54rem;color:rgba(255,255,255,0.35);line-height:1.8;margin-bottom:24px;letter-spacing:.2px;}
.lc-hint{font-size:.46rem;color:rgba(96,176,255,0.4);}

/* Online Panel */
.op-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-family: 'Rajdhani', sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.op-count { font-size: .5rem; background: rgba(96,176,255,0.08); color: var(--accent); padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.op-tabs { display: flex; border-bottom: 1px solid var(--border); }
.op-tab { flex: 1; text-align: center; padding: 8px 0; font-size: .44rem; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all .12s; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.op-tab:hover { color: var(--text); }
.op-tab.active { color: var(--accent); border-color: var(--accent); }
.op-body { max-height: 280px; overflow-y: auto; }
.op-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.02); transition: background .1s; }
.op-item:hover { background: rgba(255,255,255,0.02); }
.op-item:last-child { border-bottom: none; }
.op-dot { width: 6px; height: 6px; border-radius: 50%; background: #5dbe7a; flex-shrink: 0; box-shadow: 0 0 6px rgba(93,190,122,0.5); }
.op-name { flex: 1; font-size: .5rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-badge { font-size: .36rem; background: rgba(96,176,255,0.1); color: var(--accent); padding: 2px 7px; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.op-star { color: #ffb428; font-size: .5rem; }
.op-in-q .op-name { color: var(--accent); font-weight: 600; }
.op-friend .op-name { color: #fff; }
.op-empty { padding: 20px; text-align: center; font-size: .46rem; color: var(--muted); }

/* Queue friend highlight */
.q-p-friend { background: rgba(255,180,40,0.05) !important; border-left: 2px solid #ffb428; padding-left: 6px !important; }
.q-star { color: #ffb428; margin-right: 4px; }

/* Profile modal friend button */
.pm-friend-btn { padding: 6px 14px; border-radius: 5px; font-size: .46rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: rgba(96,176,255,0.08); color: var(--accent); transition: all .15s; font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.pm-friend-btn:hover { background: rgba(96,176,255,0.15); }
.pm-friend-btn.is-friend { background: rgba(224,64,64,0.06); color: var(--red); border-color: rgba(224,64,64,0.15); }
.pm-friend-btn.is-friend:hover { background: rgba(224,64,64,0.12); }


/* Online Sidebar (fixed right) */
.os-wrap{position:fixed;top:80px;right:0;bottom:110px;width:220px;background:#0d0d1a;border:1px solid var(--border);border-right:none;border-radius:10px 0 0 10px;z-index:40;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.23,1,.32,1);box-shadow:-8px 0 24px rgba(0,0,0,0.4);}
.os-wrap.os-collapsed{transform:translateX(100%);}
.os-toggle{position:absolute;left:-44px;top:50%;transform:translateY(-50%);width:44px;height:auto;min-height:120px;background:linear-gradient(180deg,#12122a,#0a0a14);border:1px solid rgba(96,176,255,0.2);border-right:none;border-radius:10px 0 0 10px;color:var(--accent);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 0;transition:all .15s;box-shadow:-4px 0 16px rgba(96,176,255,0.12);}
.os-toggle:hover{color:var(--accent);}
.os-toggle .os-icon-close{display:none;}
.os-wrap:not(.os-collapsed) .os-toggle .os-icon-open{display:none;}
.os-wrap:not(.os-collapsed) .os-toggle .os-icon-close{display:block;}
.os-dot{width:7px;height:7px;border-radius:50%;background:#5dbe7a;box-shadow:0 0 6px rgba(93,190,122,0.6),0 0 12px rgba(93,190,122,0.3);display:none;}
.os-wrap.os-collapsed .os-dot{display:block;}
.os-count-mini{font-size:.44rem;color:var(--accent);font-weight:700;display:block;font-family:'Rajdhani',sans-serif;}
.os-wrap.os-collapsed .os-count-mini{display:block;}
.os-body{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.os-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);font-family:'Rajdhani',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}
.os-wrap .op-tabs{border-bottom:1px solid var(--border);}
.os-wrap .op-body{flex:1;overflow-y:auto;max-height:none;}

/* Shift main content when sidebar is open on wide screens */
@media (min-width: 1400px) {
  .os-wrap:not(.os-collapsed) ~ footer,
  body:has(.os-wrap:not(.os-collapsed)) .fp {
    /* fp is fixed so padding doesn't help — use margin via media query on .fp-inner */
  }
}

/* Mobile: hide toggle button (sidebar still works but overlays) */
@media (max-width: 1400px) {
  .os-wrap{display:none !important;}
}

.os-toggle:hover{border-color:rgba(96,176,255,0.4);background:linear-gradient(180deg,#12122a,#0d0d1e);box-shadow:-4px 0 16px rgba(96,176,255,0.15);}
.os-toggle .os-icon-open,.os-toggle .os-icon-close{opacity:.8;}
.os-toggle:hover .os-icon-open,.os-toggle:hover .os-icon-close{opacity:1;}
@keyframes osPulse{0%,100%{opacity:1}50%{opacity:.5}}
.os-wrap.os-collapsed .os-dot{animation:osPulse 2s ease-in-out infinite;}

.os-label{font-family:'Rajdhani',sans-serif;font-size:.44rem;font-weight:700;color:var(--accent);writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);letter-spacing:2px;}
.os-wrap .os-toggle .os-dot{display:block !important;width:8px;height:8px;border-radius:50%;background:#5dbe7a;box-shadow:0 0 8px rgba(93,190,122,0.6),0 0 16px rgba(93,190,122,0.3);}
.os-wrap:not(.os-collapsed) .os-toggle .os-dot{background:var(--accent);box-shadow:0 0 8px rgba(96,176,255,0.6);}

/* ── News page ─────────────────────────────────────────── */
.news-wrap{max-width:960px;margin:0 auto;padding:0;width:100%;box-sizing:border-box;}
.news-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px 0;gap:16px;}
.news-title{font-family:'Rajdhani',sans-serif;font-size:2rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text);margin:0;}
.news-admin-btn{background:var(--accent);color:#0a0a14;border:none;border-radius:6px;padding:8px 14px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;cursor:pointer;}
.news-admin-btn:hover{filter:brightness(1.15);}
.news-list{display:flex;flex-direction:column;gap:22px;}
.news-item{background:linear-gradient(180deg,rgba(22,26,38,0.92),rgba(14,16,24,0.92));border:1px solid rgba(96,176,255,0.10);border-radius:14px;position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .4s ease;}
.news-item:hover{border-color:rgba(96,176,255,0.30);transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,0,0,0.45);}
.news-item.pinned{border-color:rgba(96,176,255,0.55);box-shadow:0 0 0 1px rgba(96,176,255,0.18) inset,0 8px 30px rgba(96,176,255,0.10);}
.news-item.pinned::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#60b0ff,#3b7dd8);box-shadow:0 0 16px rgba(96,176,255,0.6);z-index:2;}
.news-banner{width:100%;max-height:160px;aspect-ratio:21/9;object-fit:cover;border-radius:8px 8px 0 0;display:block;}
.news-item.pinned .news-banner{max-height:120px;}
.news-banner-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(14,16,24,0.95) 100%);}
.news-body{padding:20px 24px 22px;position:relative;}
.news-pin{display:inline-flex;align-items:center;gap:4px;font-size:.5rem;font-family:'Rajdhani',sans-serif;font-weight:800;color:#0a0a14;text-transform:uppercase;letter-spacing:1.2px;background:linear-gradient(90deg,#9ec8ff,#60b0ff);padding:3px 10px;border-radius:4px;margin-bottom:10px;}
.news-pin-star{color:#0a0a14;font-size:.6rem;line-height:1;}
.news-item-title{font-family:'Rajdhani',sans-serif;font-size:1.45rem;font-weight:800;color:#f0f4ff;margin:0 0 6px 0;letter-spacing:.5px;line-height:1.2;}
.news-meta{display:flex;align-items:center;gap:8px;font-size:.55rem;color:var(--muted);margin-bottom:14px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;}
.news-meta .news-author{color:var(--accent);}
.news-meta .news-dot{opacity:.5;}
.news-excerpt{font-size:.7rem;color:#c2c8d6;line-height:1.6;margin-bottom:14px;}
.news-content{font-size:.7rem;color:var(--text);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .35s ease;}
.news-item.expanded .news-content{max-height:6000px;}
.news-toggle{margin-top:6px;background:none;border:1px solid rgba(96,176,255,0.25);color:var(--accent);font-family:'Rajdhani',sans-serif;font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:6px 14px;border-radius:6px;cursor:pointer;transition:all .15s;}
.news-toggle:hover{background:rgba(96,176,255,0.10);border-color:rgba(96,176,255,0.5);}
.news-empty{text-align:center;padding:60px 20px;color:var(--muted);font-size:.7rem;}

/* Markdown rendered content (shared) */
.md-content .md-h1,.md-content .md-h2,.md-content .md-h3{font-family:'Rajdhani',sans-serif;font-weight:800;color:#f0f4ff;margin:18px 0 10px;letter-spacing:.6px;line-height:1.2;}
.md-content .md-h1{font-size:1.25rem;}
.md-content .md-h2{font-size:1.0rem;}
.md-content .md-h3{font-size:.85rem;}
.md-content .md-p{margin:0 0 12px;line-height:1.75;color:var(--text);}
.md-content .md-code{background:#0a0c14;border:1px solid rgba(96,176,255,0.10);border-radius:8px;padding:14px 16px;overflow-x:auto;font-family:'Consolas','Monaco',monospace;font-size:.62rem;margin:14px 0;color:#a8c8ff;line-height:1.55;}
.md-content .md-inline-code{background:rgba(96,176,255,0.10);color:#9ec8ff;padding:1px 6px;border-radius:4px;font-family:'Consolas','Monaco',monospace;font-size:.92em;}
.md-content .md-link{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(96,176,255,0.3);transition:all .15s;}
.md-content .md-link:hover{border-color:var(--accent);}
.md-content .md-img{max-width:100%;border-radius:10px;margin:14px 0;display:block;border:1px solid rgba(255,255,255,0.06);}
.md-content .md-embed{aspect-ratio:16/9;width:100%;margin:14px 0;border-radius:10px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,0.06);}
.md-content .md-embed iframe{width:100%;height:100%;border:none;display:block;}
.md-content .md-quote{border-left:3px solid var(--accent);padding:6px 0 6px 16px;margin:14px 0;color:#c2c8d6;font-style:italic;background:rgba(96,176,255,0.04);border-radius:0 6px 6px 0;}
.md-content .md-hr{border:none;border-top:1px solid rgba(255,255,255,0.08);margin:22px 0;}
.md-content .md-ul,.md-content .md-ol{padding-left:24px;margin:10px 0;}
.md-content .md-ul li,.md-content .md-ol li{margin:5px 0;line-height:1.65;}
.md-content strong{color:#f0f4ff;}
.md-content video{max-width:100%;border-radius:10px;display:block;margin:14px 0;}

/* ── Events page ───────────────────────────────────────── */
.events-wrap{max-width:1100px;margin:0 auto;padding:0;width:100%;box-sizing:border-box;}
.events-title{font-family:'Rajdhani',sans-serif;font-size:2rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text);margin:0 0 20px 0;}
.events-section-title{font-family:'Rajdhani',sans-serif;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin:18px 0 10px 0;}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.event-card{display:block;background:rgba(20,24,36,0.7);border:1px solid rgba(96,176,255,0.12);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s;}
.event-card:hover{border-color:rgba(96,176,255,0.45);transform:translateY(-2px);}
.event-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.event-status{font-size:.5rem;font-family:'Rajdhani',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:4px;background:rgba(96,176,255,0.12);color:var(--accent);border:1px solid rgba(96,176,255,0.3);}
.event-status-active{background:rgba(93,190,122,0.12);color:#5dbe7a;border-color:rgba(93,190,122,0.3);}
.event-status-check_in{background:rgba(255,200,80,0.12);color:#ffc850;border-color:rgba(255,200,80,0.3);}
.event-status-draft{background:rgba(150,150,160,0.12);color:var(--muted);border-color:rgba(150,150,160,0.3);}
.event-teams{font-size:.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.event-title{font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;color:var(--text);margin:4px 0 6px 0;}
.event-desc{font-size:.62rem;color:var(--muted);line-height:1.4;}
.events-empty{text-align:center;padding:60px 20px;color:var(--muted);font-size:.7rem;}@media (max-width:640px){.events-grid{grid-template-columns:1fr;}.news-title,.events-title{font-size:1.5rem;}}


/* Hide legacy online sidebar (replaced by nav friends dropdown) */
#online-sidebar { display: none !important; }


/* ═══ Editor.js rendered content ═══ */
.news-content .ejs-h1,.news-content .ejs-h2,.news-content .ejs-h3{font-family:'Rajdhani',sans-serif;font-weight:700;color:var(--white);margin:18px 0 10px;letter-spacing:.5px;}
.news-content .ejs-h1{font-size:1.15rem;}
.news-content .ejs-h2{font-size:.9rem;}
.news-content .ejs-h3{font-size:.75rem;}
.news-content .ejs-p{margin:0 0 12px;line-height:1.75;color:var(--text);font-size:.54rem;}
.news-content .ejs-list{margin:8px 0;padding-left:24px;color:var(--text);}
.news-content .ejs-list li{margin:4px 0;line-height:1.6;}
.news-content .ejs-quote{border-left:3px solid var(--accent);padding:8px 0 8px 16px;margin:14px 0;color:var(--muted);font-style:italic;}
.news-content .ejs-quote cite{display:block;margin-top:6px;font-size:.44rem;color:rgba(255,255,255,0.3);font-style:normal;}
.news-content .ejs-code{background:#0a0a14;border:1px solid rgba(255,255,255,0.05);border-radius:6px;padding:14px 16px;margin:14px 0;overflow-x:auto;color:#a8c8ff;font-size:.48rem;font-family:'Consolas','Monaco',monospace;}
.news-content .ejs-hr{border:none;border-top:1px solid var(--border);margin:24px 0;}
.news-content .ejs-image{margin:16px 0;}
.news-content .ejs-image img{max-width:100%;width:100%;border-radius:8px;display:block;}
.news-content .ejs-image figcaption{font-size:.42rem;color:var(--muted);text-align:center;margin-top:8px;font-style:italic;}
.news-content .ejs-embed{margin:16px 0;border-radius:8px;overflow:hidden;background:#000;}
.news-content .ejs-embed iframe{width:100%;aspect-ratio:16/9;border:none;display:block;}
.news-content .ejs-embed-caption{padding:6px 10px;font-size:.42rem;color:var(--muted);background:rgba(255,255,255,0.02);}


/* ═══ News Draft Indicator ═══ */
.news-item.draft{opacity:.65;border-style:dashed !important;}
.news-item.draft::after{content:'ENTWURF';position:absolute;top:10px;right:10px;background:rgba(255,180,40,0.15);color:#ffb428;font-size:.36rem;font-weight:700;padding:3px 9px;border-radius:3px;letter-spacing:1px;z-index:2;}
.news-item{position:relative;}


/* Lobby card clickable + new action buttons */
.lg-clickable{cursor:pointer;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.lg-clickable:hover{transform:translateY(-1px);border-color:rgba(96,176,255,0.25);box-shadow:0 12px 32px -14px rgba(96,176,255,0.35);}
.lg-btn-voice{align-items:center;gap:6px;background:rgba(88,101,242,0.08) !important;border:1px solid rgba(88,101,242,0.3) !important;color:#dde3ff !important;text-decoration:none;}
.lg-btn-voice:hover{background:rgba(88,101,242,0.18) !important;border-color:rgba(88,101,242,0.5) !important;}
.lg-btn-voice svg{flex-shrink:0;}
.lg-btn-voice-rad{background:rgba(106,224,106,0.08) !important;border-color:rgba(106,224,106,0.3) !important;color:#d5f4d5 !important;}
.lg-btn-voice-rad:hover{background:rgba(106,224,106,0.18) !important;border-color:rgba(106,224,106,0.5) !important;}
.lg-btn-voice-dire{background:rgba(201,148,58,0.1) !important;border-color:rgba(201,148,58,0.32) !important;color:#ffe0b3 !important;}
.lg-btn-voice-dire:hover{background:rgba(201,148,58,0.2) !important;border-color:rgba(201,148,58,0.55) !important;}
.lg-btn-details{background:rgba(96,176,255,0.08) !important;border:1px solid rgba(96,176,255,0.3) !important;color:var(--accent) !important;text-decoration:none;}
.lg-btn-details:hover{background:rgba(96,176,255,0.18) !important;border-color:rgba(96,176,255,0.5) !important;}

.queue-title{font-family:'Rajdhani',sans-serif;font-size:2rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text);margin:0 0 20px 0;}@media (max-width:640px){.queue-title{font-size:1.5rem;}}


/* ── Queue match history widget ─────────────────────── */
.q-history{
  margin-top:18px;margin-bottom:48px;
  padding:16px 20px;
  display:flex;flex-direction:column;
  overflow:hidden;
  max-height:260px;
}
.qh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.qh-title{font-family:'Rajdhani',sans-serif;font-size:.6rem;font-weight:800;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.qh-all{font-family:'Rajdhani',sans-serif;font-size:.5rem;font-weight:700;color:var(--accent);text-decoration:none;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:6px;background:rgba(96,176,255,0.06);border:1px solid rgba(96,176,255,0.18);transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
.qh-all:hover{background:rgba(96,176,255,0.14);border-color:rgba(96,176,255,0.4);}
.qh-all-arr{transition:transform .2s;}
.qh-all:hover .qh-all-arr{transform:translateX(3px);}
.qh-list{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow:hidden;}
.qh-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,0.015);border:1px solid var(--border);border-radius:8px;transition:all .2s;flex-shrink:0;}
.qh-row:hover{background:rgba(96,176,255,0.04);border-color:rgba(96,176,255,0.18);}
.qh-result{font-family:'Rajdhani',sans-serif;font-size:.5rem;font-weight:800;padding:4px 9px;border-radius:4px;letter-spacing:.8px;text-transform:uppercase;flex-shrink:0;min-width:52px;text-align:center;}
.qh-result.win{background:rgba(106,224,106,0.12);color:#7ae07a;border:1px solid rgba(106,224,106,0.25);}
.qh-result.loss{background:rgba(224,64,64,0.1);color:#ff8080;border:1px solid rgba(224,64,64,0.22);}
.qh-result.neutral{background:rgba(255,255,255,0.04);color:var(--muted);border:1px solid var(--border);}
.qh-mode{font-family:'Rajdhani',sans-serif;font-size:.48rem;font-weight:700;color:var(--accent);letter-spacing:.8px;text-transform:uppercase;flex-shrink:0;}
.qh-dur{font-family:'Rajdhani',sans-serif;font-size:.48rem;color:var(--muted);flex-shrink:0;}
.qh-ago{font-family:'Rajdhani',sans-serif;font-size:.46rem;color:rgba(255,255,255,0.25);margin-left:auto;flex-shrink:0;}
.qh-empty{font-family:'Rajdhani',sans-serif;font-size:.48rem;color:var(--muted);text-align:center;padding:12px;letter-spacing:.5px;}


/* Match history toggle */
.qh-actions{display:flex;align-items:center;gap:10px;}
.qh-toggle{display:flex;gap:0;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:6px;padding:2px;}
.qh-tog-btn{font-family:'Rajdhani',sans-serif;font-size:.44rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);background:transparent;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .2s;}
.qh-tog-btn:hover{color:var(--text);}
.qh-tog-btn.active{background:rgba(96,176,255,0.12);color:var(--accent);}

.qh-result.rad{background:rgba(96,255,150,0.08);color:#6aff8a;border:1px solid rgba(96,255,150,0.22);}
.qh-result.dire{background:rgba(224,150,50,0.1);color:#e8a050;border:1px solid rgba(224,150,50,0.25);}
.qh-me-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(96,176,255,0.6);flex-shrink:0;}
.qh-row.has-me{border-color:rgba(96,176,255,0.15);background:rgba(96,176,255,0.025);}



/* ── Professional Queue Page Design ── */
#page-1 .fp-inner{max-width:1040px;padding-top:56px;padding-bottom:60px;}
#page-1 .queue-title{
  font-family:'Rajdhani',sans-serif;
  font-size:1.85rem;font-weight:800;
  letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,0.94);
  margin:0 0 22px 0;line-height:1;
}

#page-1 .q-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:stretch;}

/* Both cards — shared base */
#page-1 .q-main,
#page-1 #lobbies-slot{
  background:rgba(255,255,255,0.018);
  border:1px solid rgba(255,255,255,0.055);
  border-radius:14px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .3s ease;
}
#page-1 .q-main:hover,
#page-1 #lobbies-slot:hover{border-color:rgba(255,255,255,0.08);}

/* Queue card — slightly warmer tone + inset highlight */
#page-1 .q-main{
  background:linear-gradient(180deg,rgba(96,176,255,0.025) 0%,rgba(255,255,255,0.012) 40%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
#page-1 .q-main.q-has-players{
  border-color:rgba(96,176,255,0.22);
  background:linear-gradient(180deg,rgba(96,176,255,0.05) 0%,rgba(255,255,255,0.015) 50%);
}

/* Header — eyebrow + big number */
#page-1 .q-header{
  padding:20px 24px 14px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  border-bottom:none;
}
#page-1 .q-main .q-header{padding-bottom:8px;}
#page-1 .q-title{
  font-family:'Rajdhani',sans-serif;
  font-size:.58rem;font-weight:700;
  letter-spacing:2.6px;text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  line-height:1;padding-top:6px;
}
#page-1 .q-main .q-title{color:var(--accent);}

#page-1 .q-badge{
  font-family:'Rajdhani',sans-serif;
  font-size:1.6rem;font-weight:800;
  background:transparent;color:rgba(255,255,255,0.92);
  padding:0;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
  line-height:.85;
}
#page-1 .q-badge.has{color:var(--accent);}
#page-1 .q-badge.full{color:#6aff8a;}
#page-1 .q-badge::after{
  content:'';display:inline-block;width:0;
}

/* Progress bar */
#page-1 .q-bar-wrap{
  height:2px;background:rgba(255,255,255,0.05);
  margin:4px 24px 0;border-radius:2px;overflow:hidden;
}
#page-1 .q-fill{
  height:100%;
  background:linear-gradient(90deg,rgba(96,176,255,0.8),var(--accent));
  transition:width .5s cubic-bezier(.2,.9,.3,1);
}

/* Body — player list / lobby list */
#page-1 .q-body{padding:16px 24px 8px;min-height:120px;flex:1;}
#page-1 .q-empty,
#page-1 .no-lobby{
  font-family:'Rajdhani',sans-serif;
  font-size:.56rem;font-weight:500;
  color:rgba(255,255,255,0.22);
  letter-spacing:.8px;text-transform:uppercase;
  padding:24px 0;text-align:center;
}

/* Player chips — cleaner, denser */
#page-1 .q-players{display:flex;flex-direction:column;gap:7px;}
#page-1 .q-p{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:8px;
  transition:all .25s ease;
}
#page-1 .q-p:hover{border-color:rgba(96,176,255,0.18);background:rgba(96,176,255,0.03);}
#page-1 .q-p .n{
  font-family:'Rajdhani',sans-serif;
  font-size:.68rem;font-weight:700;
  color:rgba(255,255,255,0.88);flex:1;
  letter-spacing:.3px;
}
#page-1 .q-p .r{
  font-family:'Rajdhani',sans-serif;
  font-size:.48rem;font-weight:600;
  color:rgba(255,255,255,0.35);
  letter-spacing:.4px;text-transform:uppercase;
}
#page-1 .q-p-friend{border-color:rgba(255,200,80,0.2);background:rgba(255,200,80,0.03);}
#page-1 .q-p .q-star{color:#ffb428;font-size:.56rem;}

/* Prefs summary strip */
#page-1 .qf-prefs-line{
  padding:10px 24px;border-top:1px solid rgba(255,255,255,0.04);
  font-family:'Rajdhani',sans-serif;font-size:.5rem;
  color:rgba(255,255,255,0.35);
  letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:color .2s;
}
#page-1 .qf-prefs-line:hover{color:rgba(255,255,255,0.6);}

/* Footer — CTA dominant */
#page-1 .q-foot{
  padding:14px 24px 18px;
  border-top:1px solid rgba(255,255,255,0.04);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;
}
#page-1 .q-foot-text{
  font-family:'Rajdhani',sans-serif;font-size:.5rem;
  color:rgba(255,255,255,0.32);letter-spacing:.6px;text-transform:uppercase;
}
#page-1 .btn-q{
  padding:13px 38px;font-size:.72rem;font-weight:800;
  letter-spacing:2px;border-radius:8px;
}
#page-1 .btn-join{
  background:var(--accent);color:#0a0a14;
  box-shadow:none;
}
#page-1 .btn-join:hover{
  background:#78c0ff;transform:translateY(-1px);box-shadow:none;
}
#page-1 .btn-leave{
  background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.7);
  border:1px solid rgba(255,255,255,0.08);
}
#page-1 .btn-leave:hover{background:rgba(224,64,64,0.08);color:#ff8080;border-color:rgba(224,64,64,0.25);}

/* Lobbies slot */
#page-1 #lobbies-slot #ll{padding:16px 24px 20px;min-height:120px;flex:1;}
#page-1 .lg-card{
  background:rgba(255,255,255,0.015);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:10px;
  transition:all .25s ease;
}
#page-1 .lg-card:last-child{margin-bottom:0;}
#page-1 .lg-clickable{cursor:pointer;}
#page-1 .lg-clickable:hover{border-color:rgba(96,176,255,0.22);background:rgba(96,176,255,0.03);transform:none;box-shadow:none;}
#page-1 .lg-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
#page-1 .lg-name{font-family:'Rajdhani',sans-serif;font-size:.58rem;font-weight:700;color:rgba(255,255,255,0.7);letter-spacing:1.2px;text-transform:uppercase;}
#page-1 .lg-mode{font-family:'Rajdhani',sans-serif;font-size:.46rem;font-weight:600;color:var(--accent);padding:2px 8px;background:rgba(96,176,255,0.08);border-radius:4px;letter-spacing:.5px;text-transform:uppercase;}
#page-1 .lg-status{font-family:'Rajdhani',sans-serif;font-size:.42rem;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:1px;text-transform:uppercase;margin-left:auto;}
#page-1 .lg-status.ls-active{background:rgba(96,176,255,0.12);color:var(--accent);}
#page-1 .lg-status.ls-wait{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.5);}

/* Match history — dense tabular */
#page-1 .q-history{
  margin-top:18px;margin-bottom:140px;
  padding:0;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:rgba(255,255,255,0.015);
  border:1px solid rgba(255,255,255,0.055);
  border-radius:14px;
  max-height:calc(100vh - 540px);
  min-height:0;
}
@media (max-height:760px){
  #page-1 .q-history{display:none !important;}
}
#page-1 .qh-head{
  padding:10px 18px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  margin-bottom:0;
}
#page-1 .qh-title{
  font-family:'Rajdhani',sans-serif;
  font-size:.58rem;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}
#page-1 .qh-actions{display:flex;align-items:center;gap:10px;}
#page-1 .qh-toggle{
  display:flex;gap:0;padding:2px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:6px;
}
#page-1 .qh-tog-btn{
  font-family:'Rajdhani',sans-serif;
  font-size:.44rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  background:transparent;border:none;padding:5px 12px;border-radius:4px;
  cursor:pointer;transition:all .2s ease;
}
#page-1 .qh-tog-btn:hover{color:rgba(255,255,255,0.8);}
#page-1 .qh-tog-btn.active{background:rgba(96,176,255,0.12);color:var(--accent);}
#page-1 .qh-all{
  font-family:'Rajdhani',sans-serif;
  font-size:.44rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:rgba(255,255,255,0.45);text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:4px;
  transition:all .2s;
}
#page-1 .qh-all:hover{color:var(--accent);background:rgba(96,176,255,0.06);}
#page-1 .qh-all-arr{transition:transform .2s;}
#page-1 .qh-all:hover .qh-all-arr{transform:translateX(3px);}

#page-1 .qh-list{
  padding:4px 10px 8px;display:flex;flex-direction:column;gap:0;
  overflow:hidden;flex:1;min-height:0;
}
#page-1 .qh-row{
  display:grid;
  grid-template-columns:56px 1fr auto auto auto auto;
  align-items:center;gap:12px;
  padding:5px 10px;
  background:transparent;border:none;border-radius:6px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  transition:background .2s;
  flex-shrink:0;
}
#page-1 .qh-row:last-child{border-bottom:none;}
#page-1 .qh-row:hover{background:rgba(255,255,255,0.02);}
#page-1 .qh-row.has-me{background:rgba(96,176,255,0.025);}
#page-1 .qh-row.has-me:hover{background:rgba(96,176,255,0.05);}
#page-1 .qh-result{
  font-family:'Rajdhani',sans-serif;
  font-size:.48rem;font-weight:800;
  padding:4px 0;border-radius:4px;border:none !important;
  letter-spacing:.8px;text-transform:uppercase;
  min-width:0;width:100%;text-align:center;
  background:transparent !important;
}
#page-1 .qh-result.rad{color:#6aff8a;}
#page-1 .qh-result.dire{color:#e8a050;}
#page-1 .qh-result.win{color:#6aff8a;}
#page-1 .qh-result.loss{color:#ff8080;}
#page-1 .qh-result.neutral{color:rgba(255,255,255,0.3);}
#page-1 .qh-me-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 2px rgba(10,10,20,0.9);
  justify-self:start;
}
#page-1 .qh-mode{
  font-family:'Rajdhani',sans-serif;
  font-size:.5rem;font-weight:700;
  color:rgba(255,255,255,0.85);letter-spacing:.4px;
}
#page-1 .qh-dur{
  font-family:'Rajdhani',sans-serif;
  font-size:.48rem;font-weight:500;
  color:rgba(255,255,255,0.4);
  font-variant-numeric:tabular-nums;
  margin-left:auto;
}
#page-1 .qh-ago{
  font-family:'Rajdhani',sans-serif;
  font-size:.44rem;font-weight:500;
  color:rgba(255,255,255,0.25);
  font-variant-numeric:tabular-nums;min-width:32px;text-align:right;
}
#page-1 .qh-empty{
  font-family:'Rajdhani',sans-serif;font-size:.5rem;
  color:rgba(255,255,255,0.22);text-align:center;padding:20px;
  letter-spacing:.5px;text-transform:uppercase;
}@media (max-width:900px){
  #page-1 .q-grid{grid-template-columns:1fr;}
  #page-1 .q-badge{font-size:1.3rem;}
}


/* ── UX v2 — avatars, empty states, microinteractions ── */

/* Queue player chips with avatar */
#page-1 .q-p{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;gap:12px;
  padding:10px 12px;
}
#page-1 .q-ava{
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,0.04);
  overflow:hidden;flex-shrink:0;
  position:relative;
  border:1px solid rgba(255,255,255,0.06);
}
#page-1 .q-ava img{width:100%;height:100%;object-fit:cover;display:block;}
#page-1 .q-ava-empty{
  display:flex;align-items:center;justify-content:center;
  font-family:'Rajdhani',sans-serif;font-size:.7rem;font-weight:800;
  color:rgba(255,255,255,0.35);
}
#page-1 .q-p-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
#page-1 .q-p .n{font-size:.66rem;font-weight:700;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#page-1 .q-p .r{font-size:.42rem;font-weight:600;line-height:1;}

/* Tier color accents on left border */
#page-1 .q-p.t1{border-left:2px solid #9a6a42;}
#page-1 .q-p.t2{border-left:2px solid #b0b0b0;}
#page-1 .q-p.t3{border-left:2px solid #c78a3e;}
#page-1 .q-p.t4{border-left:2px solid #d0aa5e;}
#page-1 .q-p.t5{border-left:2px solid #60aa60;}
#page-1 .q-p.t6{border-left:2px solid #5fb0d8;}
#page-1 .q-p.t7{border-left:2px solid #c878e8;}
#page-1 .q-p.t8{border-left:2px solid #ffb428;}

/* Empty state refined */
#page-1 .q-empty-wrap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:30px 0;
}
#page-1 .q-empty-icon{
  width:36px;height:36px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,0.12);
  position:relative;
}
#page-1 .q-empty-icon::before{
  content:'';position:absolute;inset:8px;border-radius:50%;
  background:rgba(255,255,255,0.04);
  animation:qEmptyPulse 2.5s ease-in-out infinite;
}
@keyframes qEmptyPulse{
  0%,100%{opacity:.3;transform:scale(.9);}
  50%{opacity:.6;transform:scale(1.05);}
}
#page-1 .q-empty{
  font-family:'Rajdhani',sans-serif;font-size:.54rem;
  color:rgba(255,255,255,0.28);letter-spacing:1.2px;text-transform:uppercase;
}

/* Button: tighter micro-motion */
#page-1 .btn-q{transition:background .25s ease,transform .15s ease,color .2s;}
#page-1 .btn-q:hover{transform:translateY(-1px);}
#page-1 .btn-q:active{transform:translateY(0);}

/* Match history: fit exactly 5 rows without cutoff — use flex, no max-height */
#page-1 .q-history{min-height:0;}
#page-1 .qh-list{padding:8px 12px 12px;gap:2px;overflow:hidden;}
#page-1 .qh-row{padding:9px 12px;}

/* ── News list refinements ── */
#page-0 .news-list{gap:16px;}
.news-item{
  background:rgba(255,255,255,0.018) !important;
  border:1px solid rgba(255,255,255,0.055) !important;
  border-radius:14px !important;
}
.news-item:hover{
  border-color:rgba(96,176,255,0.18) !important;
  transform:translateY(-2px) !important;
}
.news-item-title{
  font-family:'Rajdhani',sans-serif;
  font-size:1.15rem !important;font-weight:800 !important;
  letter-spacing:.2px !important;
  color:rgba(255,255,255,0.94) !important;
  line-height:1.2 !important;
}
.news-meta{
  font-family:'Rajdhani',sans-serif;
  font-size:.48rem !important;
  color:rgba(255,255,255,0.32) !important;
  letter-spacing:.5px;text-transform:uppercase;
}
.news-author{color:var(--accent) !important;}
.news-excerpt{
  color:rgba(255,255,255,0.55) !important;
  font-size:.62rem !important;
  line-height:1.55 !important;
}
.news-pin{
  font-family:'Rajdhani',sans-serif;
  font-size:.46rem !important;
  color:#ffb428 !important;
  letter-spacing:1.2px;text-transform:uppercase;
}

/* ── Events refinements ── */
.events-title{
  font-size:1.85rem !important;
  letter-spacing:3px !important;
  color:rgba(255,255,255,0.94) !important;
}

/* ── News title matching queue-title ── */
.news-title{
  font-size:1.85rem !important;
  letter-spacing:3px !important;
  color:rgba(255,255,255,0.94) !important;
}

/* ── Ticket button polish ── */
.report-link{
  align-items:center;gap:6px;
  bottom:42px !important;left:18px !important;
  padding:9px 14px !important;
  background:rgba(10,10,20,0.85) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:10px !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:.52rem !important;font-weight:700 !important;
  letter-spacing:1.4px !important;text-transform:uppercase !important;
  color:rgba(255,255,255,0.55) !important;
  backdrop-filter:blur(12px) !important;
  transition:all .25s ease !important;
}
.report-link:hover{
  color:var(--accent) !important;
  border-color:rgba(96,176,255,0.35) !important;
  background:rgba(96,176,255,0.08) !important;
  transform:translateY(-1px);
}

/* ── Lobbies empty state polish ── */
#page-1 .no-lobby::before{
  content:'';display:block;
  width:24px;height:24px;margin:0 auto 10px;
  border:1.5px solid rgba(255,255,255,0.08);border-radius:4px;
  position:relative;
}


/* Events empty state */
.events-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 24px;text-align:center;gap:14px;
  max-width:420px;margin:60px auto 0;
}
.ees-icon{
  width:56px;height:56px;border-radius:14px;
  background:rgba(255,255,255,0.025);
  border:1px dashed rgba(255,255,255,0.12);
  position:relative;
  margin-bottom:4px;
}
.ees-icon::before{
  content:'';position:absolute;inset:14px;border-radius:6px;
  background:rgba(255,255,255,0.04);
}
.ees-icon.beta{
  background:rgba(255,180,40,0.06);
  border-color:rgba(255,180,40,0.25);
}
.ees-icon.beta::before{background:rgba(255,180,40,0.15);}
.ees-title{
  font-family:'Rajdhani',sans-serif;
  font-size:.82rem;font-weight:800;
  color:rgba(255,255,255,0.78);
  letter-spacing:2px;text-transform:uppercase;
  line-height:1;
}
.ees-sub{
  font-family:'Rajdhani',sans-serif;
  font-size:.58rem;font-weight:500;
  color:rgba(255,255,255,0.4);
  line-height:1.55;letter-spacing:.3px;
  max-width:320px;
}


/* Admin controls in queue card — page-1 layout */
#page-1 .q-admin{
  display:flex;gap:6px;padding:10px 24px;
  border-top:1px solid rgba(255,255,255,0.04);
  background:rgba(255,180,40,0.03);
}
#page-1 .qa-btn{
  font-family:'Rajdhani',sans-serif;font-size:.48rem;font-weight:700;
  padding:6px 14px;border-radius:6px;
  background:rgba(255,255,255,0.04);color:rgba(255,180,40,0.85);
  border:1px solid rgba(255,180,40,0.2);cursor:pointer;
  letter-spacing:.8px;text-transform:uppercase;transition:all .2s;
}
#page-1 .qa-btn:hover{background:rgba(255,180,40,0.12);border-color:rgba(255,180,40,0.45);color:#ffb428;}
#page-1 .qa-btn.qa-go{background:rgba(96,255,150,0.06);color:#6aff8a;border-color:rgba(96,255,150,0.25);}
#page-1 .qa-btn.qa-go:hover{background:rgba(96,255,150,0.14);border-color:rgba(96,255,150,0.45);}


/* Hide match history while prefs panel is open (prevents footer overlap) */
.qf-panel.open ~ * #queue-history,
#qcard:has(.qf-panel.open) ~ #queue-history,
body:has(.qf-panel.open) #queue-history{
  opacity:0;pointer-events:none;max-height:0;margin:0;border:none;overflow:hidden;
  transition:opacity .2s ease,max-height .3s cubic-bezier(.4,0,.2,1),margin .3s ease;
}
#queue-history{transition:opacity .2s ease,max-height .3s cubic-bezier(.4,0,.2,1),margin .3s ease;}


/* Admin label pill */
#page-1 .q-admin{position:relative;align-items:center;}
#page-1 .qa-label{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Rajdhani',sans-serif;font-size:.44rem;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;
  color:#ffb428;padding:4px 10px;border-radius:5px;
  background:rgba(255,180,40,0.1);border:1px solid rgba(255,180,40,0.3);
  margin-right:4px;
}
#page-1 .qa-label svg{opacity:.9;}


/* ── Landing page (non-logged-in) ── */
#page-1 body:has(#landing-cta) .q-grid,
#page-1:has(#landing-cta) .queue-title{display:none !important;}
#page-1 .fp-inner:has(#landing-cta){justify-content:center;padding-top:0;padding-bottom:0;}
.landing-cta{
  position:relative;
  max-width:940px;margin:0 auto;padding:20px 0;
  display:flex;flex-direction:column;gap:34px;
  animation:lcFadeIn .9s cubic-bezier(.2,.9,.3,1) both;
}
.landing-cta::before{
  content:'';position:absolute;
  top:-120px;left:-120px;width:520px;height:520px;
  background:radial-gradient(circle at center,rgba(96,176,255,0.09),rgba(96,176,255,0) 65%);
  pointer-events:none;z-index:-1;filter:blur(8px);
}
.landing-cta::after{
  content:'';position:absolute;
  bottom:-160px;right:-140px;width:480px;height:480px;
  background:radial-gradient(circle at center,rgba(88,101,242,0.07),rgba(88,101,242,0) 65%);
  pointer-events:none;z-index:-1;filter:blur(8px);
}
@keyframes lcFadeIn{
  0%{opacity:0;transform:translateY(18px);}
  100%{opacity:1;transform:translateY(0);}
}
.lc-hero{text-align:left;display:flex;flex-direction:column;gap:14px;}
.lc-eyebrow{
  font-family:'Rajdhani',sans-serif;font-size:.56rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);
  opacity:.85;
}
.lc-title{
  font-family:'Rajdhani',sans-serif;font-size:2.6rem;font-weight:800;
  color:#d0d0e0;
  letter-spacing:3px;text-transform:uppercase;
  line-height:1.02;margin:0;
}
.lc-title .lc-accent{display:block;color:var(--accent);}
.lc-accent{color:var(--accent);}
.lc-tagline{
  font-family:'Rajdhani',sans-serif;font-size:.85rem;font-weight:400;
  color:rgba(255,255,255,0.55);line-height:1.5;letter-spacing:.2px;
  max-width:560px;margin:0;
}

.lc-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  text-align:left;
}
.lc-feat{
  position:relative;
  display:flex;flex-direction:column;gap:10px;
  padding:22px 20px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.008));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  transition:all .25s ease;
  overflow:hidden;
}
.lc-feat::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(96,176,255,0.07),transparent 50%);
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.lc-feat:hover{border-color:rgba(96,176,255,0.22);transform:translateY(-2px);}
.lc-feat:hover::after{opacity:1;}
.lc-feat-num{
  font-family:'Rajdhani',sans-serif;font-size:.5rem;font-weight:800;
  color:rgba(96,176,255,0.7);letter-spacing:2px;line-height:1;
  text-transform:uppercase;
  display:inline-flex;align-items:center;
}
.lc-feat-num::before{
  content:'';display:inline-block;
  width:22px;height:1px;background:rgba(96,176,255,0.4);
  margin-right:10px;
}
.lc-feat-text{display:flex;flex-direction:column;gap:6px;}
.lc-feat-text strong{
  font-family:'Rajdhani',sans-serif;font-size:.82rem;font-weight:700;
  color:rgba(255,255,255,0.92);letter-spacing:.3px;line-height:1.2;
}
.lc-feat-text span{
  font-family:'Rajdhani',sans-serif;font-size:.6rem;font-weight:500;
  color:rgba(255,255,255,0.5);line-height:1.55;letter-spacing:.2px;
}
@media (max-width:820px){
  .lc-features{grid-template-columns:1fr;}
}

.lc-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.lc-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:10px;text-decoration:none;
  font-family:'Rajdhani',sans-serif;font-size:.7rem;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;
  transition:all .25s ease;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.88);
}
.lc-btn:hover{transform:translateY(-1px);}
.lc-btn-steam{
  background:linear-gradient(135deg,#1b2838 0%,#2a3f5f 100%);
  border-color:rgba(100,160,220,0.25);color:#c7d5e0;
}
.lc-btn-steam:hover{
  background:linear-gradient(135deg,#243040 0%,#324866 100%);
  border-color:rgba(100,160,220,0.5);color:#fff;
}
.lc-btn-dc{
  background:linear-gradient(135deg,#5865f2 0%,#4752c4 100%);
  border-color:rgba(88,101,242,0.45);color:#fff;
}
.lc-btn-dc:hover{
  background:linear-gradient(135deg,#6872f5 0%,#525dd4 100%);
  border-color:rgba(88,101,242,0.7);
}

.lc-roadmap{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:-18px;
}
.lc-roadmap-label{
  font-family:'Rajdhani',sans-serif;font-size:.5rem;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(255,255,255,0.38);margin-right:6px;
}
.lc-chip{
  display:inline-flex;align-items:center;
  padding:5px 12px;border-radius:999px;
  font-family:'Rajdhani',sans-serif;font-size:.54rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  background:rgba(96,176,255,0.05);
  border:1px dashed rgba(96,176,255,0.25);
  color:rgba(96,176,255,0.78);
}
/* === Testimonial magazine column === */
.ad{
  position:relative;
  margin:10px 0 0;padding:12px 16px 8px;
  background:linear-gradient(180deg,rgba(255,255,255,0.018),rgba(255,255,255,0.005));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  animation:lcFadeIn 1.2s cubic-bezier(.2,.9,.3,1) .35s both;
  color:#d8d8e0;
}
.ad::before{
  content:'';position:absolute;top:0;left:16px;right:16px;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  border-radius:0 0 2px 2px;opacity:.6;
}

.ad-kicker{
  font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:.42rem;letter-spacing:2.8px;text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  margin-bottom:2px;
}

.ad-title{
  font-family:'Georgia','Times New Roman',serif;
  font-size:.78rem;font-weight:700;line-height:1.2;
  color:#f0f0f8;margin:0 0 10px;letter-spacing:.2px;
}

.ad-items{display:flex;flex-direction:column;}
.ad-item{
  display:flex;gap:12px;align-items:center;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.05);
}
.ad-item:first-child{border-top:0;padding-top:2px;}
.ad-item:last-child{padding-bottom:2px;}

.ad-ava{
  flex-shrink:0;display:block;
  width:38px;height:38px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  text-decoration:none;
}
.ad-ava img{display:block;width:100%;height:100%;object-fit:cover;}
.ad-ava-icon{
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
  background:rgba(96,176,255,0.05);
}
.ad-ava-icon svg{width:24px;height:24px;}
.ad-body{flex:1;min-width:0;}

.ad-quote{
  font-family:'Georgia','Times New Roman',serif;font-style:italic;
  font-size:.66rem;line-height:1.45;color:#e8e8f2;
  margin:0 0 4px;
  position:relative;padding-left:10px;
}
.ad-quote::before{
  content:'';position:absolute;left:0;top:3px;bottom:3px;width:2px;
  background:var(--accent);opacity:.4;border-radius:2px;
}

.ad-attr{
  font-family:'Rajdhani',sans-serif;font-size:.42rem;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,0.5);padding-left:10px;
}
.ad-attr a{color:#f0f0f8;text-decoration:none;}
.ad-attr a:hover{color:var(--accent);}
.ad-attr span{color:rgba(255,255,255,0.35);}

.ad-audio{
  display:inline-flex;align-items:center;gap:5px;
  margin:6px 0 0 10px;
  font-family:'Rajdhani',sans-serif;font-size:.4rem;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;
  color:var(--accent);
  background:rgba(96,176,255,0.07);
  border:1px solid rgba(96,176,255,0.25);
  border-radius:999px;padding:5px 12px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ad-audio:hover{background:rgba(96,176,255,0.14);border-color:rgba(96,176,255,0.45);color:#8cc0ff;}
.ad-audio:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ad-audio[data-playing="1"]{color:#8cc0ff;background:rgba(96,176,255,0.18);}
.ad-audio[data-playing="1"] .ad-audio-label-play{display:inline;}

.ad-footer{
  margin-top:10px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.05);
  font-family:'Rajdhani',sans-serif;font-size:.4rem;font-weight:500;
  color:rgba(255,255,255,0.3);letter-spacing:1.2px;text-align:center;
}
.lc-queue{
  margin-top:14px;padding:12px 18px;
  background:rgba(255,255,255,0.015);border:1px solid rgba(255,255,255,0.04);
  border-radius:8px;
  font-family:'Rajdhani',sans-serif;font-size:.56rem;color:var(--accent);
  letter-spacing:1px;text-transform:uppercase;text-align:center;
}
.lc-queue:empty{display:none;}

@media (max-width:640px){
  .lc-title{font-size:1.7rem;letter-spacing:2px;white-space:normal;}
  .lc-tagline{font-size:.72rem;}
  .lc-btn{padding:12px 20px;font-size:.62rem;}
}


/* Landing live stats strip */
.lc-stats{
  display:flex;gap:16px;margin:0;padding:0;
}
.lc-stat{
  flex:1;padding:14px 18px;
  background:rgba(255,255,255,0.018);
  border:1px solid rgba(255,255,255,0.055);
  border-radius:12px;
  display:flex;flex-direction:column;gap:4px;
  transition:border-color .25s;
}
.lc-stat:hover{border-color:rgba(96,176,255,0.2);}
.lc-stat-val{
  font-family:'Rajdhani',sans-serif;font-size:1.4rem;font-weight:800;
  color:var(--accent);letter-spacing:-.5px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.lc-stat-lbl{
  font-family:'Rajdhani',sans-serif;font-size:.48rem;font-weight:600;
  color:rgba(255,255,255,0.35);
  letter-spacing:1.4px;text-transform:uppercase;
}


/* Lobby team empty state */
.lobby-team .lt-roster:empty::after{
  content:'Warte auf Spieler';display:block;
  padding:10px 0;text-align:center;
  color:rgba(255,255,255,0.22);
  font-family:'Rajdhani',sans-serif;font-size:.46rem;
  letter-spacing:.8px;text-transform:uppercase;
}
.lobby-team{min-height:78px;}
/* Force actions wrap even with my earlier overrides */
#page-1 .lg-actions{flex-wrap:wrap;}


/* ── Ready Check Overlay (premium) ── */
.rc-overlay{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(10,10,20,0.85) 0%,rgba(0,0,0,0.95) 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:rcFadeIn .3s ease-out;
}
@keyframes rcFadeIn{from{opacity:0;}to{opacity:1;}}

.rc-box{
  background:linear-gradient(165deg,#151524 0%,#0d0d18 100%);
  border:1px solid rgba(96,176,255,0.2);
  border-radius:20px;padding:36px 48px 32px;
  min-width:380px;max-width:440px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  box-shadow:
    0 0 0 1px rgba(96,176,255,0.05) inset,
    0 24px 80px -24px rgba(96,176,255,0.25),
    0 2px 0 rgba(255,255,255,0.04) inset;
  animation:rcBoxIn .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes rcBoxIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

.rc-eyebrow{
  font-family:'Rajdhani',sans-serif;font-size:.6rem;font-weight:700;
  color:var(--accent);letter-spacing:4px;text-transform:uppercase;
  opacity:.85;
}

.rc-ring-wrap{
  position:relative;width:180px;height:180px;
  display:flex;align-items:center;justify-content:center;
}
.rc-ring{position:absolute;inset:0;}
.rc-ring-fill{
  filter:drop-shadow(0 0 10px rgba(96,176,255,0.55));
  transition:stroke-dashoffset .15s linear,stroke .3s ease;
}
.rc-ring-inner{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  position:relative;z-index:1;
}
.rc-sec{
  font-family:'Rajdhani',sans-serif;font-size:3.4rem;font-weight:800;
  color:rgba(255,255,255,0.95);letter-spacing:-2px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.rc-sec-unit{
  font-family:'Rajdhani',sans-serif;font-size:.46rem;font-weight:700;
  color:rgba(255,255,255,0.3);letter-spacing:3px;text-transform:uppercase;
}

.rc-overlay.rc-urgent .rc-ring-fill{
  stroke:#ff6b6b;
  filter:drop-shadow(0 0 14px rgba(255,107,107,0.6));
}
.rc-overlay.rc-urgent .rc-sec{
  color:#ff8080;
  animation:rcPulse .9s ease-in-out infinite;
}
@keyframes rcPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.06);}
}

.rc-count-row{
  display:flex;align-items:baseline;gap:4px;
  font-family:'Rajdhani',sans-serif;
}
.rc-count-num{
  font-size:1.8rem;font-weight:800;color:var(--accent);
  letter-spacing:-1px;font-variant-numeric:tabular-nums;
  transition:color .3s ease;
}
.rc-count-sep{
  font-size:1.4rem;color:rgba(255,255,255,0.2);margin:0 2px;
}
.rc-count-total{
  font-size:1.4rem;font-weight:600;color:rgba(255,255,255,0.4);
  font-variant-numeric:tabular-nums;
}
.rc-count-lbl{
  font-size:.5rem;font-weight:700;
  color:rgba(255,255,255,0.35);letter-spacing:2px;
  text-transform:uppercase;margin-left:8px;
}

.rc-bar{
  width:100%;height:3px;background:rgba(255,255,255,0.05);
  border-radius:2px;overflow:hidden;
}
.rc-bar-fill{
  height:100%;
  background:linear-gradient(90deg,rgba(96,176,255,0.6),var(--accent));
  box-shadow:0 0 8px rgba(96,176,255,0.5);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

.rc-btn{
  padding:14px 48px;border-radius:10px;border:none;
  background:linear-gradient(135deg,var(--accent) 0%,#4898e0 100%);
  color:#0a0a14;font-family:'Rajdhani',sans-serif;
  font-size:.82rem;font-weight:800;letter-spacing:3px;
  text-transform:uppercase;cursor:pointer;
  transition:transform .15s ease,box-shadow .25s ease,opacity .2s ease;
  box-shadow:0 8px 28px -8px rgba(96,176,255,0.5);
  min-width:200px;
}
.rc-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 12px 36px -8px rgba(96,176,255,0.7);
}
.rc-btn:active:not(:disabled){transform:translateY(0);transition-duration:50ms;}
.rc-btn:disabled,.rc-btn.rc-btn-done{
  cursor:default;opacity:.5;
  background:linear-gradient(135deg,#6aff8a 0%,#5dbe7a 100%);
  color:#0a0a14;box-shadow:none;
}

.rc-hint{
  font-family:'Rajdhani',sans-serif;font-size:.5rem;
  color:rgba(255,255,255,0.3);letter-spacing:1.5px;text-transform:uppercase;
  margin-top:-6px;
}

@media (max-width:500px){
  .rc-box{min-width:auto;width:92%;padding:28px 24px 24px;}
  .rc-ring-wrap{width:150px;height:150px;}
  .rc-ring{width:150px;height:150px;}
  .rc-sec{font-size:2.8rem;}
}


/* 2-column compact queue chips so all 10 fit without scrolling */
#page-1 .q-body{padding:10px 16px 6px;min-height:220px;display:flex;flex-direction:column;}
#page-1 .q-players{display:grid !important;grid-template-columns:1fr 1fr;gap:5px 8px;}
#page-1 .q-p{
  grid-template-columns:24px 1fr auto !important;
  gap:8px !important;
  padding:5px 9px !important;
  min-width:0;
}
#page-1 .q-ava{width:24px;height:24px;border-radius:6px;}
#page-1 .q-p .n{font-size:.56rem;overflow:hidden;text-overflow:ellipsis;}
#page-1 .q-p .r{font-size:.36rem;}
@media (max-width:680px){
  #page-1 .q-players{grid-template-columns:1fr;}
}


/* Lobby card actions — uniform accent CI (matches RC overlay) */
.lg-actions{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid rgba(255,255,255,0.04);}
.lg-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Rajdhani',sans-serif;font-size:.46rem !important;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  padding:7px 12px !important;border-radius:6px !important;
  background:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.65) !important;
  cursor:pointer;transition:all .2s ease;text-decoration:none;
}
.lg-btn:hover{
  background:rgba(96,176,255,0.08) !important;
  border-color:rgba(96,176,255,0.3) !important;
  color:var(--accent) !important;
}
.lg-btn svg{flex-shrink:0;opacity:.7;}
.lg-btn:hover svg{opacity:1;}
/* Voice variants — neutral + accent on hover (kill green/gold) */
.lg-btn-voice,.lg-btn-voice-rad,.lg-btn-voice-dire{
  background:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.65) !important;
}
.lg-btn-voice:hover,.lg-btn-voice-rad:hover,.lg-btn-voice-dire:hover{
  background:rgba(96,176,255,0.08) !important;
  border-color:rgba(96,176,255,0.3) !important;
  color:var(--accent) !important;
}
.lg-btn-details{
  background:rgba(96,176,255,0.06) !important;
  border-color:rgba(96,176,255,0.2) !important;
  color:var(--accent) !important;
}
.lg-btn-details:hover{
  background:rgba(96,176,255,0.14) !important;
  border-color:rgba(96,176,255,0.4) !important;
}

/* Admin row — clearly separated from normal user actions */
.lg-admin-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:8px 14px;
  background:rgba(255,180,40,0.025);
  border-top:1px solid rgba(255,180,40,0.12);
}
.lg-admin-label{
  font-family:'Rajdhani',sans-serif;font-size:.42rem;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;
  color:#ffb428;
  padding:4px 9px;border-radius:5px;
  background:rgba(255,180,40,0.08);border:1px solid rgba(255,180,40,0.22);
  margin-right:4px;
}
.lg-admin-btn{
  background:rgba(255,180,40,0.04) !important;
  border-color:rgba(255,180,40,0.18) !important;
  color:rgba(255,180,40,0.85) !important;
}
.lg-admin-btn:hover{
  background:rgba(255,180,40,0.12) !important;
  border-color:rgba(255,180,40,0.4) !important;
  color:#ffb428 !important;
}
.lg-admin-btn.lg-btn-close{
  background:rgba(224,64,64,0.04) !important;
  border-color:rgba(224,64,64,0.18) !important;
  color:rgba(255,128,128,0.8) !important;
}
.lg-admin-btn.lg-btn-close:hover{
  background:rgba(224,64,64,0.12) !important;
  border-color:rgba(224,64,64,0.45) !important;
  color:#ff8080 !important;
}



/* Stable queue body — empty/1-player/10-player all same height */
#page-1 .q-empty-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
#page-1 .q-players{flex:1;align-content:start;}


/* Empty slot placeholders — just a muted dashed circle, no text */
#page-1 .q-p.q-p-empty{
  background:transparent !important;
  border:none !important;
  border-left:none !important;
  opacity:.35;
  pointer-events:none;
  cursor:default;
  padding:5px 10px !important;
  justify-content:flex-start;
}
#page-1 .q-p.q-p-empty .q-ava.q-ava-ph{
  background:transparent;
  border:1.5px dashed rgba(255,255,255,0.12);
}


/* Queue chip prefs line + clickable */
#page-1 .q-p.q-p-click{cursor:pointer;}
#page-1 .q-p.q-p-click:hover{background:rgba(96,176,255,0.04);}
#page-1 .q-prefs{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;}
#page-1 .qpf-pill{
  display:inline-block;
  font-family:'Rajdhani',sans-serif;
  font-size:.42rem;font-weight:700;letter-spacing:.6px;
  padding:2px 6px;border-radius:3px;
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.55);
  text-transform:uppercase;
  white-space:nowrap;
}
#page-1 .qpf-pos{background:rgba(96,176,255,0.1);color:rgba(150,200,255,0.95);}
#page-1 .qpf-pos.qpf-any{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.4);}
#page-1 .qpf-mode{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.78);}
#page-1 .qpf-cap{background:rgba(96,176,255,0.12);color:rgba(150,210,255,0.95);}
#page-1 .qpf-team{background:rgba(180,130,255,0.1);color:rgba(200,170,255,0.9);}
#page-1 .qpf-team-auto{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.5);}


/* Player chip refined: name + rank inline, prefs below */
#page-1 .q-p-row1{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;min-width:0;}
#page-1 .q-p-row1 .n{font-size:.62rem;font-weight:700;color:rgba(255,255,255,0.92);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0;}
#page-1 .q-p-row1 .r{font-size:.42rem;font-weight:600;color:rgba(255,255,255,0.4);letter-spacing:.6px;text-transform:uppercase;flex-shrink:0;white-space:nowrap;}
#page-1 .q-p-row1 .q-star{flex-shrink:0;}



/* Avatar slightly bigger for balance */
#page-1 .q-ava{width:30px !important;height:30px !important;border-radius:7px !important;}
#page-1 .q-p{
  grid-template-columns:30px 1fr !important;
  gap:10px !important;
  padding:7px 11px !important;
  align-items:center !important;
}


/* Lobby team stats — auto-balance preview */
.lt-stats{
  display:flex;gap:10px;margin:6px 0 10px;padding:6px 8px;
  background:rgba(255,255,255,0.02);
  border-radius:5px;
}
.lt-stat{display:flex;flex-direction:column;gap:1px;flex:1;}
.lt-stat-lbl{
  font-family:'Rajdhani',sans-serif;font-size:.35rem;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,0.3);
}
.lt-stat-val{
  font-family:'Rajdhani',sans-serif;font-size:.6rem;font-weight:800;
  color:rgba(255,255,255,0.78);
  font-variant-numeric:tabular-nums;
}


/* Lobby card actions: Details left, Voice right */
.lg-actions{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.lg-actions-left,.lg-actions-right{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}

/* Reinvite info block — separate from action row */
.lg-reinvite-info{
  margin:0;padding:10px 14px;
  background:rgba(96,176,255,0.04);
  border-top:1px solid rgba(96,176,255,0.1);
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex;flex-direction:column;gap:4px;
}
.lg-rin-row{display:flex;align-items:baseline;gap:8px;}
.lg-rin-lbl{
  font-family:'Rajdhani',sans-serif;font-size:.4rem;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,0.35);
  min-width:62px;
}
.lg-rin-val{
  font-family:'Rajdhani',sans-serif;font-size:.6rem;font-weight:700;
  color:rgba(255,255,255,0.92);letter-spacing:.3px;
}
.lg-rin-mono{font-family:'Consolas',monospace;font-size:.62rem;color:var(--accent);letter-spacing:1px;}
.lg-rin-copy{background:none;border:none;padding:0;cursor:pointer;font:inherit;text-align:left;border-bottom:1px dashed rgba(255,255,255,0.15);transition:border-color .15s ease, color .15s ease;}
.lg-rin-copy:hover{border-bottom-color:rgba(96,176,255,0.5);}
.lg-rin-copy.lg-rin-copied{color:#6aff8a !important;border-bottom-color:rgba(106,255,138,0.5);}
.lg-rin-hint{margin-top:6px;font-family:'Rajdhani',sans-serif;font-size:.5rem;font-weight:600;color:rgba(255,255,255,0.4);letter-spacing:.4px;}
.lg-rin-hint a{color:var(--accent);text-decoration:none;font-weight:700;letter-spacing:.6px;border-bottom:1px solid rgba(96,176,255,0.35);padding-bottom:1px;transition:all .2s;cursor:pointer;}
.lg-rin-hint a:hover{color:#88c4ff;border-bottom-color:rgba(96,176,255,0.8);}


/* Symmetric lobby actions: Details + Voice same width */
#page-1 .lg-actions{padding:12px 16px;}
#page-1 .lg-actions-left,#page-1 .lg-actions-right{flex:1;}
#page-1 .lg-actions-right{justify-content:flex-end;}
#page-1 .lg-actions .lg-btn{
  font-size:.52rem !important;
  padding:9px 18px !important;
  min-width:110px;
  justify-content:center;
}
#page-1 .lg-actions-right .lg-btn{flex:1;max-width:180px;}
#page-1 .lg-actions-left .lg-btn{flex:1;max-width:180px;}