:root{
  --text:#f4fbff;
  --muted:#aeb6c7;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.18);
  --card:rgba(8,11,19,.76);
  --card-strong:rgba(9,13,22,.9);
  --accent:#8cff75;
  --accent-2:#61c8ff;
  --accent-3:#b87fff;
  --danger:#ff6888;
  --shadow:0 18px 48px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#05070d;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif}
body{letter-spacing:.005em}
#app{display:block;width:100%;height:100%;cursor:crosshair}
#hud{position:fixed;inset:0;pointer-events:none;transform-origin:top left}
.stack-col{display:flex;flex-direction:column}
.gap-sm{gap:12px}
.align-end{align-items:flex-end}
.card{
  background:linear-gradient(180deg, rgba(15,20,34,.88), rgba(7,10,18,.82));
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(14px);
}
.compact{padding:12px 14px}
.top-left{position:absolute;left:18px;top:18px;max-width:min(380px,calc(100vw - 36px))}
.top-center{position:absolute;left:50%;top:18px;transform:translateX(-50%)}
.top-right{position:absolute;right:18px;top:18px}
.bottom-left{position:absolute;left:18px;bottom:18px;max-width:min(480px,calc(100vw - 36px))}
.bottom-right{position:absolute;right:18px;bottom:18px}
.intro-card{padding:16px 18px}
.quick-actions-card{max-width:430px}
.help-card{padding:14px 16px}
.match-card{min-width:170px;text-align:right}

.top-gap{margin-top:10px}
.smaller{font-size:1rem}
.minimap-card{padding:14px 16px;min-width:272px;max-width:272px;background:linear-gradient(180deg, rgba(8,15,29,.94), rgba(5,9,18,.92))}
.minimap-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px}
.layout-mini{font-size:.74rem;line-height:1.35;color:var(--accent-2);max-width:90px;text-align:right}
.compact-copy{margin-top:0;max-width:150px}
#minimap{width:240px;height:240px;border-radius:50%;border:1px solid rgba(162,228,255,.22);background:radial-gradient(circle at 50% 45%, rgba(20,44,79,.96), rgba(5,9,18,.99));display:block;box-shadow:0 0 0 4px rgba(255,255,255,.04), 0 18px 42px rgba(0,0,0,.34), inset 0 0 32px rgba(99,201,255,.09)}

.stance-card{min-width:270px;text-align:center;padding:12px 16px}
.eyebrow{font-size:.74rem;letter-spacing:.2em;font-weight:900;color:var(--accent-2);opacity:.96;text-transform:uppercase}
.status{margin-top:7px;font-size:1.08rem;font-weight:800;line-height:1.32}
.subtle,.controller-line,.help-line{margin-top:6px;color:var(--muted);font-size:.88rem;line-height:1.42}
.subtle-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.subtle-dot{opacity:.5}
.accent-subtle{color:#d8e8ff}
.section-title{font-size:.72rem;letter-spacing:.18em;color:var(--muted);font-weight:900;text-transform:uppercase;margin-bottom:10px}
.quick-actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.quick-actions-grid span,.menu-chip-grid span,.binding-item{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:9px 11px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
  font-size:.84rem;
}
.quick-actions-grid b{font-weight:900;color:#fff}
.score-label{font-size:.7rem;letter-spacing:.18em;color:var(--muted);font-weight:900;text-transform:uppercase}
.score-value{font-size:2rem;font-weight:900;line-height:1.02;margin:2px 0 12px}
.score-mini{font-size:1.15rem;font-weight:800;margin-top:2px}
.stance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.boost-shell{margin-top:8px;height:10px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.boost-bar{height:100%;width:100%;background:linear-gradient(90deg,#6effde,#9cff77 55%,#dfff73);box-shadow:0 0 18px rgba(124,255,188,.28)}
.static-note{border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:12px 14px;margin-top:14px}
.hud-button,button{
  font:inherit;border:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg, rgba(124,255,143,.22), rgba(97,200,255,.18));
  color:var(--text);padding:11px 16px;border-radius:999px;cursor:pointer;pointer-events:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}
.hud-button{padding:10px 14px;background:linear-gradient(180deg, rgba(21,29,49,.94), rgba(10,14,24,.92));border-color:rgba(255,255,255,.12)}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
.ammo-card{width:264px;padding:12px 14px;background:linear-gradient(180deg, rgba(10,12,20,.92), rgba(6,7,13,.9))}
.ammo-top{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:8px;align-items:end}
.ammo-big{font-size:2.5rem;font-weight:900;line-height:1}
.ammo-small{font-size:1.25rem;font-weight:800;margin-top:2px}
.ammo-bar-shell{margin-top:10px;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ammo-bar{height:100%;width:100%;background:linear-gradient(90deg,var(--accent),#d4ff73)}
#crosshair{position:fixed;left:50%;top:50%;width:34px;height:34px;margin-left:-17px;margin-top:-17px;pointer-events:none;opacity:.95;z-index:8}
#crosshair span{position:absolute;background:rgba(255,255,255,.95);box-shadow:0 0 10px rgba(255,255,255,.28)}
#crosshair .h{height:2px;width:9px;top:16px}
#crosshair .h1{left:0}
#crosshair .h2{right:0}
#crosshair .v{width:2px;height:9px;left:16px}
#crosshair .v1{top:0}
#crosshair .v2{bottom:0}
#crosshair .dot{width:4px;height:4px;border-radius:50%;left:15px;top:15px}
#crosshair.hidden{display:none}

.scoreboard{position:fixed;left:50%;top:92px;transform:translateX(-50%);pointer-events:none;z-index:11}
.scoreboard.hidden{display:none}
.scoreboard-inner{min-width:min(480px,86vw);max-width:82vw;padding:14px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(12,18,30,.92), rgba(6,9,16,.9));backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.28)}
.scoreboard-title{font-size:.74rem;letter-spacing:.18em;color:var(--accent-2);font-weight:900;margin-bottom:6px;text-align:center;text-transform:uppercase}
.scoreboard-stats{text-align:center;font-size:1rem;font-weight:800}

.scope-overlay{position:fixed;inset:0;pointer-events:none;display:none;z-index:12}
.scope-overlay.active{display:block}
.scope-black{position:absolute;background:rgba(0,0,0,.94)}
.scope-black.black-top{left:0;right:0;top:0;height:17%}
.scope-black.black-bottom{left:0;right:0;bottom:0;height:17%}
.scope-black.black-left{left:0;top:0;bottom:0;width:26%}
.scope-black.black-right{right:0;top:0;bottom:0;width:26%}
.scope-ring{position:absolute;left:50%;top:50%;width:min(54vw,54vh);height:min(54vw,54vh);transform:translate(-50%,-50%);border:3px solid rgba(0,0,0,.98);border-radius:50%;box-shadow:0 0 0 9999px rgba(0,0,0,.9), inset 0 0 28px rgba(0,0,0,.45)}
.scope-reticle{position:absolute;left:50%;top:50%;width:88px;height:88px;transform:translate(-50%,-50%)}
.scope-reticle .ret-h,.scope-reticle .ret-v,.scope-reticle .ret-dot{position:absolute;background:rgba(255,255,255,.96);box-shadow:0 0 10px rgba(255,255,255,.34)}
.scope-reticle .ret-h{left:50%;top:50%;width:68px;height:2px;transform:translate(-50%,-50%)}
.scope-reticle .ret-v{left:50%;top:50%;width:2px;height:68px;transform:translate(-50%,-50%)}
.scope-reticle .ret-dot{left:50%;top:50%;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%)}

.overlay{position:fixed;inset:0;display:grid;place-items:start center;background:rgba(4,6,11,.68);backdrop-filter:blur(8px);z-index:20;padding:24px;overflow-y:auto}
.overlay.hidden{display:none}
.panel{width:min(92vw,560px);padding:28px 30px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(12,18,30,.95), rgba(6,9,16,.94));box-shadow:0 24px 70px rgba(0,0,0,.42);text-align:center}
.panel h1{margin:0 0 10px;font-size:2rem}
.panel p{margin:8px 0;color:var(--muted);line-height:1.5}
.loading-tip{font-size:.9rem}

.menu-overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,4,9,.72);backdrop-filter:blur(12px);z-index:30;padding:24px}
.menu-overlay.hidden{display:none}
.menu-shell{position:relative;width:min(1100px,96vw);max-height:min(92vh,940px);overflow:hidden;padding:18px;border-radius:28px;background:linear-gradient(180deg, rgba(11,15,26,.96), rgba(7,10,18,.95));display:flex;flex-direction:column;gap:14px}
.menu-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:10px 10px 0}
.menu-header h2{margin:8px 0 2px;font-size:1.9rem;line-height:1.05}
.menu-close{background:linear-gradient(180deg, rgba(21,29,49,.95), rgba(9,13,22,.94));padding:10px 14px}
.menu-tabs{display:flex;gap:8px;padding:0 10px;flex-wrap:wrap}
.menu-tab{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:14px;min-width:108px}
.menu-tab.active{background:linear-gradient(180deg, rgba(124,255,143,.22), rgba(97,200,255,.15));border-color:rgba(140,255,117,.26)}
.menu-body{overflow:auto;padding:0 10px 2px}
.menu-panel{display:none}
.menu-panel.active{display:block}
.menu-grid{display:grid;gap:14px}
.menu-grid.two-col{grid-template-columns:1.05fr 1fr}
.menu-grid.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.menu-card-block{padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02))}
.menu-copy{font-size:1.03rem;font-weight:700;margin-bottom:8px}
.menu-chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.binding-list{display:grid;gap:8px;margin-top:8px}
.binding-list.compact-list .binding-item{font-size:.8rem;padding:8px 10px}
.binding-item{justify-content:space-between}
.binding-item strong{font-weight:900;color:#fff}
.binding-item button{padding:7px 11px;border-radius:12px;font-size:.8rem}
.segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.segmented button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:9px 10px;border-radius:12px}
.segmented button.active{background:linear-gradient(180deg, rgba(124,255,143,.22), rgba(97,200,255,.15));border-color:rgba(140,255,117,.26)}
.setting-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:12px 0 8px;font-size:.92rem}
.setting-row label{font-weight:700}
.setting-value{color:var(--muted);font-weight:800}
input[type="range"]{width:100%;accent-color:#8cff75}
.toggle-row{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);margin-top:10px}
.toggle-row input{width:18px;height:18px}
.button-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.button-row.tight{justify-content:flex-start;margin-top:14px}
.menu-footer{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:0 10px 6px}
.menu-footer .subtle{margin:0;max-width:560px}

.menu-confirm-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:28px;
  background:rgba(3,6,12,.74);
  backdrop-filter:blur(10px);
  z-index:6;
  border-radius:28px;
}
.menu-confirm-overlay.hidden{display:none}
.menu-confirm-card{
  width:min(460px,100%);
  padding:22px 22px 20px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(13,18,31,.98), rgba(8,11,20,.96));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(137,231,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.menu-confirm-card h3{margin:8px 0 10px;font-size:1.45rem;line-height:1.08}
.menu-confirm-card .subtle{margin:0 0 16px;max-width:none}
.menu-confirm-card .button-row{justify-content:flex-end}
button.danger{
  background:linear-gradient(180deg, rgba(255,117,117,.24), rgba(194,47,47,.24));
  border-color:rgba(255,122,122,.28);
  color:#fff4f4;
}
button.danger:hover{
  background:linear-gradient(180deg, rgba(255,132,132,.34), rgba(210,56,56,.3));
}

@media (max-width:1200px){
  .menu-grid.three-col,.menu-grid.two-col{grid-template-columns:1fr}
  .top-center{top:92px}
}
@media (max-width:900px){
  .top-left{max-width:calc(100vw - 36px)}
  .scoreboard{top:146px}
  .quick-actions-grid,.menu-chip-grid{grid-template-columns:1fr}
  .menu-shell{padding:14px}
}
@media (max-width:760px){
  .minimap-card{min-width:228px;max-width:228px}
  #minimap{width:196px;height:196px}
  .top-right{top:auto;bottom:194px}
  .bottom-left{max-width:calc(100vw - 36px)}
  .ammo-card{width:220px}
  .menu-header{flex-direction:column}
  .menu-footer{flex-direction:column;align-items:flex-start}
  .segmented{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.minimap-card, .match-card, .stance-card, .ammo-card, .intro-card, .menu-shell { box-shadow: 0 18px 48px rgba(0,0,0,0.32), 0 0 0 1px rgba(137,231,255,0.08), 0 0 24px rgba(100,180,255,0.06); }


.player-vitals-panel{margin-top:8px;display:grid;gap:6px}
.player-vitals-row{display:flex;align-items:center;justify-content:center;gap:8px}
.dots-label{font-size:.64rem;letter-spacing:.18em;font-weight:800;color:var(--muted);min-width:22px;text-align:right}
.dots-strip{display:flex;gap:6px;justify-content:center;align-items:center;min-height:18px}
.dot-pill{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.08)}
.dot-pill.active-health{background:linear-gradient(180deg,#afff9d,#7cf667);box-shadow:none}
.dot-pill.active-shield{background:linear-gradient(180deg,#9be9ff,#57a9ff);box-shadow:none}
.shield-strip .dot-pill{width:11px;height:11px}


.hidden-ui{display:none !important}
#mpCard .subtle{margin-top:4px}
#mpCard .button-row{justify-content:flex-end}


.matchmaking-shell{max-width:1080px;width:min(1080px,calc(100vw - 36px))}
.matchmaking-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
.matchmaking-label{display:block;margin:10px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c8ffbb}
.matchmaking-input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(152,255,126,.18);
  background:rgba(6,12,20,.84);
  color:#f4fff0;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.matchmaking-input:focus{border-color:rgba(152,255,126,.4);box-shadow:0 0 0 3px rgba(152,255,126,.12)}
.button-row.wrap{flex-wrap:wrap}
.matchmaking-room-title{font-size:20px;font-weight:800;letter-spacing:.02em;margin-top:4px}
.lobby-player-list,.public-room-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.lobby-player-list{
  max-height:none;
  overflow:visible;
}
.public-room-list{
  max-height:320px;
  overflow:auto;
}
.lobby-name-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.lobby-name-list.empty{
  color:rgba(233,255,226,.72);
}
.lobby-name-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(9,16,27,.46);
  border:1px solid rgba(152,255,126,.12);
}
.lobby-name-value{
  font-weight:700;
  color:#eef8ff;
}
.lobby-name-badges{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.lobby-player-list.empty,.public-room-list.empty{
  border:1px dashed rgba(152,255,126,.16);
  border-radius:14px;
  padding:14px;
  color:rgba(233,255,226,.72);
  background:rgba(9,16,27,.42);
}
.lobby-player-row,.public-room-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(8,15,27,.74);
  border:1px solid rgba(152,255,126,.12);
  box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.lobby-player-main,.public-room-main{display:flex;flex-direction:column;gap:4px}
.lobby-player-name,.public-room-name{font-weight:800;letter-spacing:.01em}
.lobby-player-meta,.public-room-meta{font-size:12px;color:rgba(225,255,217,.72)}
.room-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f3fff0;
  background:rgba(152,255,126,.14);
  border:1px solid rgba(152,255,126,.18);
}
.room-tag.private{background:rgba(112,154,255,.14);border-color:rgba(112,154,255,.18)}
.room-tag.live{background:rgba(255,131,163,.14);border-color:rgba(255,131,163,.2)}
.public-room-row button{flex:0 0 auto}
#mmStatusLine{margin-top:10px}
@media (max-width: 900px){
  .matchmaking-grid{grid-template-columns:1fr}
  .matchmaking-shell{width:min(100vw - 20px,1080px)}
}

/* ===== accessibility helpers ===== */
.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===== final minimap + HUD cluster ===== */
#hud{
  position:fixed;
  inset:0;
  pointer-events:none;
  transform-origin:top left;
  z-index:12;
}

/* hide older HUD experiments that are no longer used */
.overlay-status-card,
.overlay-vitals-card,
.overlay-radar-card,
.overlay-combat-card,
#streakBanner,
.streak-banner{
  display:none !important;
}

.match-timer-top{
  position:absolute;
  top:clamp(10px,1.5vw,22px);
  left:50%;
  transform:translateX(-50%);
  min-width:clamp(116px,16vw,168px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:10px 14px 12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(8,16,32,.84), rgba(5,10,20,.66));
  border:1px solid rgba(143,215,255,.20);
  box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:6;
}

.match-timer-top-label{
  font-size:clamp(.44rem,.58vmax,.62rem);
  line-height:1;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8fd7ff;
  opacity:.95;
}

.match-timer-top-value{
  font-size:clamp(1.18rem,1.7vmax,1.58rem);
  line-height:1;
  font-weight:900;
  letter-spacing:.06em;
  color:#f6fbff;
  text-shadow:0 0 12px rgba(120,208,255,.18);
}

.minimap-hud-cluster{
  --cluster-size:clamp(146px,18vmin,214px);
  --stack-width:clamp(84px,10.5vmin,118px);
  --cluster-pad-x:clamp(10px,1.1vmin,16px);
  --cluster-pad-y:clamp(10px,1.1vmin,16px);
  position:absolute;
  right:clamp(8px,1.1vw,18px);
  bottom:clamp(8px,1.1vw,18px);
  width:calc(var(--cluster-size) + var(--stack-width) + (var(--cluster-pad-x) * 2) + 18px);
  height:calc(var(--cluster-size) + (var(--cluster-pad-y) * 2) + 28px);
  border-radius:26px;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:4;
}

.minimap-hud-core{
  position:absolute;
  left:var(--cluster-pad-x);
  top:var(--cluster-pad-y);
  width:var(--cluster-size);
  height:var(--cluster-size);
  overflow:visible;
}

.minimap-shell{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(20,44,79,.96), rgba(5,9,18,.99));
}

#minimap{
  width:100% !important;
  height:100% !important;
  display:block;
  border-radius:50%;
  background:transparent;
}

.radar-arc,
.radar-arc-fill{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  --pct:0;
  box-sizing:border-box;
}

.radar-arc-ammo-track,
.radar-arc-ammo-fill{
  display:none;
}

.radar-boost-ring{
  position:absolute;
  inset:-5px;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}

.radar-boost-svg{
  width:100%;
  height:100%;
  overflow:visible;
  display:block;
}

.radar-boost-track,
.radar-boost-fill{
  fill:none;
  transform-origin:130px 130px;
  transform:rotate(90deg);
  vector-effect:non-scaling-stroke;
}

.radar-boost-track{
  stroke-linecap:round;
}

.radar-boost-track{
  stroke:rgba(129, 205, 255, 0.26);
  stroke-width:12;
}

.radar-boost-fill{
  stroke:rgba(140, 223, 255, 0.98);
  stroke-width:12;
  stroke-linecap:butt;
  stroke-dasharray:0 100;
  filter:drop-shadow(0 0 8px rgba(98,188,255,.22));
}

.cluster-rightstack{
  position:absolute;
  top:var(--cluster-pad-y);
  right:var(--cluster-pad-x);
  bottom:calc(var(--cluster-pad-y) + 8px);
  width:var(--stack-width);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:clamp(7px,.85vmin,12px);
  text-align:left;
  z-index:5;
}

.cluster-corner{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:4px;
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
  text-align:left;
}

.cluster-boost{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
}

.cluster-corner-label{
  font-size:clamp(.42rem,.5vmax,.58rem);
  line-height:1.05;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8fd7ff;
  opacity:.96;
  white-space:nowrap;
}

.cluster-stat-line,
.cluster-boost-line{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  width:100%;
}

.cluster-ammo-line{
  align-items:baseline;
  gap:4px;
}

.cluster-stat-value{
  font-size:clamp(.9rem,1.08vmax,1.08rem);
  line-height:1;
  font-weight:800;
}

.cluster-ammo-mag{
  font-size:clamp(1.15rem,1.65vmax,1.52rem);
  line-height:.9;
  font-weight:900;
}

.cluster-ammo-reserve{
  font-size:clamp(.86rem,1.02vmax,1rem);
  line-height:1;
  font-weight:800;
}

.cluster-ammo-divider{
  width:1px;
  height:12px;
  margin:0 2px;
  background:rgba(255,255,255,.20);
}

.cluster-kills-value{
  font-size:clamp(.98rem,1.18vmax,1.18rem);
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  color:#f6fbff;
  text-shadow:0 0 10px rgba(120,208,255,.18);
}

.cluster-icon{
  width:20px;
  height:20px;
  display:inline-block;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  flex:0 0 auto;
}

.grenade-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11.6 3.2h2.8l1.1 1.2-1.7 1.5-2.2-2.7Z' fill='%23c8d4e5'/%3E%3Cpath d='M8.5 5.6c3.6 0 6.2 2.7 6.2 6.1 0 3.7-2.9 6.2-6.6 6.2s-6.3-2.7-6.3-6.1c0-3.7 2.9-6.2 6.7-6.2Z' fill='%23ffffff'/%3E%3Cpath d='M6.7 7.2c-.8.3-1.7 1.4-1.7 2.8' fill='none' stroke='%23070a12' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.cluster-boost-track{
  width:min(100%,72px);
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(143,215,255,.08);
  overflow:hidden;
}

.cluster-boost-fill{
  width:100%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #7ae4ff 0%, #58baff 52%, #2f8fff 100%);
  box-shadow:0 0 12px rgba(88,186,255,.24);
}

.cluster-boost-value{
  min-width:2.8em;
  font-size:clamp(.76rem,.9vmax,.9rem);
  line-height:1;
  font-weight:800;
}

.dots-strip{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:6px;
  min-height:24px;
  line-height:1;
}

.dot-pill{
  flex:0 0 auto;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  opacity:.24;
}

#playerHealthDots .dot-pill{
  width:22px;
  height:22px;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17.2c-.3 0-.7-.1-.9-.3C3.7 12.4 2.2 10.5 2.2 7.9 2.2 5.1 4.2 3 6.8 3c1.4 0 2.6.6 3.2 1.6.6-1 1.8-1.6 3.2-1.6 2.6 0 4.6 2.1 4.6 4.9 0 2.6-1.5 4.5-6.9 9-.2.2-.6.3-.9.3Z' fill='%2388ff79'/%3E%3Cpath d='M10 15.8C5.1 11.7 3.6 10 3.6 7.9 3.6 5.9 4.9 4.4 6.8 4.4c1.3 0 2.4.8 2.8 2.1h.8c.4-1.3 1.5-2.1 2.8-2.1 1.9 0 3.2 1.5 3.2 3.5 0 2.1-1.5 3.8-6.4 7.9Z' fill='%2355d94d'/%3E%3Cpath d='M7.2 6.1c-.9 0-1.7.7-1.7 1.7' fill='none' stroke='%23ecffe8' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  filter:grayscale(.12) brightness(.78);
}

#playerHealthDots .dot-pill.active-health{
  opacity:1;
  filter:drop-shadow(0 0 8px rgba(124,246,103,.22));
  box-shadow:none !important;
  background-color:transparent !important;
}

#playerShieldDots{
  gap:6px;
}

#playerShieldDots .dot-pill{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.24;
  transform:translateY(-.01em);
  text-shadow:none;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6c4 0 7.6 1.3 7.6 1.3v7c0 5.1-3.1 9.1-7.6 10.9C7.5 20 4.4 16 4.4 10.9v-7S8 2.6 12 2.6Z' fill='%239ce8ff'/%3E%3Cpath d='M12 5.3c2.6 0 4.9.8 5.8 1.1v4.3c0 3.8-2.2 6.8-5.8 8.4-3.6-1.6-5.8-4.6-5.8-8.4V6.4c.9-.3 3.2-1.1 5.8-1.1Z' fill='%2361c9ff'/%3E%3Cpath d='M9.1 7.9c-.9.2-1.7.5-2.3.7v2.1' fill='none' stroke='%23ebfbff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  filter:grayscale(.08) brightness(.82);
}

#playerShieldDots .dot-pill.active-shield{
  opacity:1;
  text-shadow:none;
  box-shadow:none !important;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6c4 0 7.6 1.3 7.6 1.3v7c0 5.1-3.1 9.1-7.6 10.9C7.5 20 4.4 16 4.4 10.9v-7S8 2.6 12 2.6Z' fill='%239ce8ff'/%3E%3Cpath d='M12 5.3c2.6 0 4.9.8 5.8 1.1v4.3c0 3.8-2.2 6.8-5.8 8.4-3.6-1.6-5.8-4.6-5.8-8.4V6.4c.9-.3 3.2-1.1 5.8-1.1Z' fill='%2361c9ff'/%3E%3Cpath d='M9.1 7.9c-.9.2-1.7.5-2.3.7v2.1' fill='none' stroke='%23ebfbff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  filter:drop-shadow(0 0 8px rgba(88,190,255,.24));
}

.cluster-altitude{
  position:absolute;
  left:calc(var(--cluster-pad-x) + (var(--cluster-size) * 0.455));
  bottom:calc(var(--cluster-size) * -0.14);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-shadow:0 1px 8px rgba(0,0,0,.34);
}

.cluster-alt-label{
  font-size:clamp(.42rem,.5vmax,.58rem);
  line-height:1;
  letter-spacing:.18em;
  color:#8fd7ff;
}

.cluster-alt-value{
  font-size:clamp(.88rem,1.1vmax,1.08rem);
  line-height:1;
  font-weight:900;
}

@media (max-width:900px), (max-height:620px){
  .minimap-hud-cluster{
    --cluster-size:clamp(126px,17vmin,182px);
    --stack-width:clamp(72px,9.5vmin,98px);
  }

  .cluster-rightstack{
    gap:clamp(6px,.75vmin,10px);
  }

  .cluster-icon{
    width:18px;
    height:18px;
  }

  .cluster-boost-track{
    width:min(100%,62px);
    height:7px;
  }

  .cluster-stat-value{
    font-size:clamp(.82rem,.98vmax,.96rem);
  }

  .cluster-ammo-mag{
    font-size:clamp(1.02rem,1.42vmax,1.28rem);
  }

  .cluster-ammo-reserve{
    font-size:clamp(.78rem,.92vmax,.88rem);
  }

  .dots-strip{
    gap:5px;
    min-height:22px;
  }

  #playerHealthDots .dot-pill{
    width:20px;
    height:20px;
  }

  #playerShieldDots .dot-pill{
    min-width:1.12em;
    height:1.12em;
    font-size:clamp(17px,1.8vmin,20px);
  }

  .cluster-altitude{
    bottom:calc(var(--cluster-size) * -0.12);
  }
}

@media (max-width:640px), (max-height:460px){
  .minimap-hud-cluster{
    --cluster-size:clamp(106px,16.5vmin,148px);
    --stack-width:clamp(62px,8.8vmin,84px);
    --cluster-pad-x:8px;
    --cluster-pad-y:8px;
    width:calc(var(--cluster-size) + var(--stack-width) + (var(--cluster-pad-x) * 2) + 12px);
    height:calc(var(--cluster-size) + (var(--cluster-pad-y) * 2) + 22px);
    border-radius:20px;
  }

  .cluster-corner-label,
  .cluster-alt-label{
    font-size:clamp(.36rem,.46vmax,.48rem);
  }

  .cluster-rightstack{
    gap:clamp(5px,.65vmin,8px);
  }

  .cluster-icon{
    width:14px;
    height:14px;
  }

  .cluster-boost-track{
    width:min(100%,54px);
    height:6px;
  }

  .cluster-boost-value{
    min-width:2.5em;
    font-size:clamp(.58rem,.72vmax,.72rem);
  }

  .cluster-stat-value,
  .cluster-ammo-reserve{
    font-size:clamp(.62rem,.76vmax,.78rem);
  }

  .cluster-ammo-mag{
    font-size:clamp(.82rem,1.06vmax,1rem);
  }

  .dots-strip{
    gap:4px;
    min-height:12px;
  }

  #playerHealthDots .dot-pill{
    width:12px;
    height:12px;
  }

  #playerShieldDots .dot-pill{
    min-width:1em;
    height:1em;
    font-size:12px;
  }

  .cluster-altitude{
    bottom:calc(var(--cluster-size) * -0.10);
    gap:6px;
  }

  .cluster-alt-value{
    font-size:clamp(.74rem,.92vmax,.86rem);
  }
}

@media (orientation:portrait) and (max-width:560px){
  .minimap-hud-cluster{
    --cluster-size:clamp(112px,19vw,154px);
    --stack-width:clamp(64px,9vw,88px);
  }
}

.title-screen-header h2{
  font-size:clamp(28px,3.2vw,40px);
}
.title-grid{
  grid-template-columns:1.1fr 1fr;
  gap:16px;
}
.identity-card-block,
.playlist-card-block,
.lobby-card-block,
.leaderboard-card-block{
  min-height:100%;
}
.identity-row .matchmaking-input{
  flex:1 1 240px;
}
.playlist-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.playlist-button{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-height:124px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(157,223,255,.18);
  background:linear-gradient(180deg, rgba(18,29,58,.88), rgba(10,15,30,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.22);
}
.playlist-button.ranked{
  border-color:rgba(255,195,103,.24);
  background:linear-gradient(180deg, rgba(46,31,20,.92), rgba(21,15,10,.88));
}
.playlist-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
}
.playlist-copy{
  font-size:13px;
  line-height:1.45;
  color:#d7eeff;
  text-align:left;
}
.section-heading-row{
  align-items:center;
}
.section-heading-row .section-title.no-margin{
  margin:0;
}
.wrap-end{
  justify-content:flex-end;
}
.leaderboard-list{
  display:grid;
  gap:12px;
}
.leaderboard-scroll{
  max-height:min(56vh,640px);
  overflow:auto;
  padding-right:6px;
  align-content:start;
}
.leaderboard-scroll::-webkit-scrollbar{width:10px}
.leaderboard-scroll::-webkit-scrollbar-thumb{background:rgba(127,208,255,.22);border-radius:999px}
.leaderboard-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
.leaderboard-section{
  display:grid;
  gap:8px;
}
.leaderboard-heading{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9fdbff;
}
.leaderboard-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(157,223,255,.12);
  background:rgba(8,14,29,.52);
}
.leaderboard-row strong{
  color:#f5fbff;
  font-size:12px;
}
.public-room-meta,
.lobby-player-meta{
  color:#b7d7f2;
}
@media (max-width: 860px){
  .title-grid,
  .matchmaking-grid,
  .playlist-grid{
    grid-template-columns:1fr;
  }
}
.space-between{justify-content:space-between;}

/* Home / title screen flow refresh */
.home-shell{
  max-width:1180px;
  width:min(1180px,calc(100vw - 28px));
}
.home-topbar{
  align-items:flex-start;
  gap:18px;
}
.home-screen{
  display:grid;
  gap:18px;
  animation:menuScreenFade .28s ease;
}
.home-screen.hidden{display:none !important}
@keyframes menuScreenFade{
  from{opacity:0;transform:translateY(8px) scale(.988)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.home-screen-intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.home-screen-intro.split{
  align-items:center;
}
.home-screen-title{
  margin:6px 0 0;
  font-size:clamp(24px,3vw,36px);
  line-height:1.05;
}
.home-grid{
  display:grid;
  gap:16px;
}
.auth-grid,
.settings-grid,
.play-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.leaderboard-columns{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.settings-grid-expanded{
  grid-template-columns:1.05fr .95fr;
}
.account-actions-panel{grid-column:1 / -1}
.home-actions-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.home-tile{
  display:grid;
  align-content:start;
  gap:8px;
  min-height:156px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(157,223,255,.18);
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(6,10,22,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 38px rgba(0,0,0,.28);
  text-align:left;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.home-tile:hover{
  transform:translateY(-1px);
  border-color:rgba(157,223,255,.34);
}
.tile-eyebrow{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9fdbff;
}
.home-tile.ranked{
  border-color:rgba(255,195,103,.28);
  background:linear-gradient(180deg, rgba(48,31,17,.95), rgba(17,12,8,.9));
}
.home-tile.private{
  border-color:rgba(171,150,255,.22);
  background:linear-gradient(180deg, rgba(26,22,52,.92), rgba(10,9,23,.9));
}
.home-tile.leaderboard{
  border-color:rgba(117,255,193,.22);
}
.home-tile.settings{
  border-color:rgba(208,208,255,.18);
}
.home-tile.quickplay{
  border-color:rgba(117,234,255,.26);
  background:linear-gradient(180deg, rgba(14,31,58,.94), rgba(7,17,35,.9));
}


.mode-only-grid{grid-template-columns:1fr}
.lobby-screen-shell{position:relative}
.lobby-grid-clean{grid-template-columns:1fr;align-items:start}
.lobby-card-primary,
.lobby-side-card{
  border-width:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 30px rgba(0,0,0,.22);
}
.lobby-screen-shell.mode-quickplay .lobby-card-primary,
.lobby-screen-shell.mode-quickplay .lobby-side-card{border-color:rgba(117,234,255,.18)}
.lobby-screen-shell.mode-ranked .lobby-card-primary,
.lobby-screen-shell.mode-ranked .lobby-side-card{border-color:rgba(255,195,103,.2)}
.lobby-screen-shell.mode-private .lobby-card-primary,
.lobby-screen-shell.mode-private .lobby-side-card{border-color:rgba(181,154,255,.22)}
.lobby-hero-card{position:relative;overflow:hidden}
.lobby-hero-card::after{
  content:'';
  position:absolute;
  inset:auto -12% -45% auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0));
  pointer-events:none;
}
.lobby-side-card{display:grid;gap:14px}
.lobby-main-actions > *{flex:1 1 220px}
.lobby-steps-list{display:grid;gap:10px}
.lobby-step-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:rgba(8,16,31,.54)}
.lobby-step-row span{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:rgba(117,234,255,.12);border:1px solid rgba(117,234,255,.18);font-weight:900;color:#e8fbff}
.lobby-screen-shell.mode-ranked .lobby-step-row span{background:rgba(255,195,103,.12);border-color:rgba(255,195,103,.18);color:#ffe3ba}
.lobby-screen-shell.mode-private .lobby-step-row span{background:rgba(181,154,255,.12);border-color:rgba(181,154,255,.18);color:#eee2ff}
.matchmaking-room-title{font-size:clamp(20px,2.4vw,28px);font-weight:900;line-height:1.08;margin-top:4px}
.public-room-row,
.lobby-player-row,
.mode-action-card,
.current-lobby-card,
.public-rooms-section,
.lobby-side-card{transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.public-room-row:hover,
.lobby-player-row:hover,
.mode-action-card:hover,
.current-lobby-card:hover,
.public-rooms-section:hover,
.lobby-side-card:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 32px rgba(0,0,0,.24)}
.play-screen-shell{position:relative}
.play-screen-topbar{margin-bottom:2px}
.play-grid-clean{align-items:start}
.playlist-hero-card{
  display:grid;
  gap:14px;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid rgba(117,234,255,.24);
  background:linear-gradient(180deg, rgba(12,25,47,.96), rgba(7,13,27,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 40px rgba(0,0,0,.24);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.playlist-hero-card.quickplay{border-color:rgba(117,234,255,.28);background:linear-gradient(180deg, rgba(12,35,66,.96), rgba(8,15,31,.92));}
.playlist-hero-card.ranked{border-color:rgba(255,195,103,.28);background:linear-gradient(180deg, rgba(54,34,17,.96), rgba(19,13,8,.92));}
.playlist-hero-card.private{border-color:rgba(181,154,255,.3);background:linear-gradient(180deg, rgba(31,22,62,.96), rgba(11,10,24,.92));}
.playlist-hero-main{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.playlist-mode-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(117,234,255,.26);
  background:rgba(117,234,255,.12);
  color:#def8ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.playlist-mode-pill.quickplay{border-color:rgba(117,234,255,.26);background:rgba(117,234,255,.12);color:#def8ff}
.playlist-mode-pill.ranked{border-color:rgba(255,195,103,.28);background:rgba(255,195,103,.12);color:#ffe0b2}
.playlist-mode-pill.private{border-color:rgba(181,154,255,.3);background:rgba(181,154,255,.12);color:#e8dcff}
.playlist-hero-title{margin:0 0 6px;font-size:clamp(22px,2.5vw,30px);line-height:1.08}
.playlist-hero-copy{margin:0;max-width:760px;color:rgba(240,249,255,.86);line-height:1.5}
.playlist-rule-line{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(3,8,18,.34);
  color:rgba(240,249,255,.76);
  font-size:13px;
  letter-spacing:.04em;
}
.mode-action-card,
.current-lobby-card,
.public-rooms-section{
  border-width:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 30px rgba(0,0,0,.22);
}
.play-screen-shell.mode-quickplay .mode-action-card,
.play-screen-shell.mode-quickplay .current-lobby-card,
.play-screen-shell.mode-quickplay .public-rooms-section{border-color:rgba(117,234,255,.18)}
.play-screen-shell.mode-ranked .mode-action-card,
.play-screen-shell.mode-ranked .current-lobby-card,
.play-screen-shell.mode-ranked .public-rooms-section{border-color:rgba(255,195,103,.2)}
.play-screen-shell.mode-private .mode-action-card,
.play-screen-shell.mode-private .current-lobby-card{border-color:rgba(181,154,255,.22)}
.play-screen-shell .current-lobby-card,
.play-screen-shell .lobby-player-row,
.play-screen-shell .lobby-player-list,
.play-screen-shell .lobby-main-actions,
.play-screen-shell #mmStartMatchBtn,
.play-screen-shell #mmLeaveRoomBtn{transition:none !important;will-change:auto;transform:none !important}
.play-screen-shell .current-lobby-card:hover,
.play-screen-shell .lobby-player-row:hover{transform:none !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 30px rgba(0,0,0,.22) !important}
.mode-copy-box{margin-top:10px;line-height:1.5}
.mode-action-wrap.hidden{display:none !important}
.mode-main-actions > *{flex:1 1 220px}
.mode-primary-btn{
  min-height:54px;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
}
.btn-quickplay-solid{background:linear-gradient(180deg, rgba(78,194,255,.34), rgba(18,86,176,.3));border-color:rgba(117,234,255,.34)}
.btn-ranked-solid{background:linear-gradient(180deg, rgba(255,201,115,.34), rgba(154,90,18,.3));border-color:rgba(255,195,103,.34)}
.btn-private-solid{background:linear-gradient(180deg, rgba(190,155,255,.3), rgba(82,58,160,.28));border-color:rgba(190,155,255,.32)}
.btn-secondary-soft{background:linear-gradient(180deg, rgba(215,229,255,.18), rgba(77,95,129,.18));border-color:rgba(215,229,255,.22)}
.private-help-copy{line-height:1.5}
.public-room-heading-row{align-items:flex-start}
.public-room-row.quickplay{border-color:rgba(117,234,255,.16);background:linear-gradient(180deg, rgba(10,24,43,.84), rgba(7,14,28,.8))}
.public-room-row.ranked{border-color:rgba(255,195,103,.16);background:linear-gradient(180deg, rgba(43,25,12,.82), rgba(20,13,8,.8))}
.public-room-row button[disabled]{opacity:.55;cursor:not-allowed}
.btn-login,
.btn-create,
.btn-guest,
.btn-settings,
.btn-danger-solid,
.leaderboard-tab,
.leaderboard-refresh-btn{
  font-weight:800;
}
.btn-login{
  background:linear-gradient(180deg, rgba(111,201,255,.24), rgba(36,95,155,.22));
  border-color:rgba(120,210,255,.34);
}
.btn-create{
  background:linear-gradient(180deg, rgba(124,255,143,.24), rgba(44,130,68,.22));
  border-color:rgba(140,255,117,.28);
}
.btn-guest{
  background:linear-gradient(180deg, rgba(190,155,255,.22), rgba(82,58,160,.22));
  border-color:rgba(190,155,255,.28);
}
.btn-settings{
  background:linear-gradient(180deg, rgba(209,225,255,.2), rgba(79,101,140,.2));
  border-color:rgba(209,225,255,.26);
}
.btn-danger-solid{
  background:linear-gradient(180deg, rgba(255,117,117,.32), rgba(194,47,47,.26));
  border-color:rgba(255,122,122,.34);
}
.leaderboard-switcher{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.leaderboard-tab{
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(157,223,255,.18);
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(7,12,24,.88));
}
.leaderboard-tab.ranked{border-color:rgba(255,195,103,.28);background:linear-gradient(180deg, rgba(48,31,17,.94), rgba(17,12,8,.9));}
.leaderboard-tab.quickplay{border-color:rgba(117,234,255,.28);background:linear-gradient(180deg, rgba(14,31,58,.94), rgba(7,17,35,.9));}
.leaderboard-tab.winners{border-color:rgba(117,255,193,.25);background:linear-gradient(180deg, rgba(13,37,28,.92), rgba(8,19,15,.88));}
.leaderboard-tab.active{
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 16px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.leaderboard-refresh-btn{
  min-height:52px;
  background:linear-gradient(180deg, rgba(209,225,255,.2), rgba(79,101,140,.2));
  border-color:rgba(209,225,255,.26);
}
.leaderboard-page.hidden{display:none !important}
.leaderboard-page{display:grid;gap:14px}
.leaderboard-page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gameplay-settings-panel .button-row > *{flex:1 1 240px}
#fieldMenu{z-index:45}
.home-tile .playlist-title{
  font-size:22px;
}
.hub-top-actions{
  justify-content:flex-end;
}
.play-flow-card,
.settings-panel,
.leaderboard-panel,
.auth-card{
  min-height:100%;
}
.settings-summary-card{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(157,223,255,.12);
  background:rgba(10,18,35,.62);
  color:#f5fbff;
}
.mode-chip-row button{
  flex:1 1 180px;
}
.danger-modal-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(3,6,12,.76);
  backdrop-filter:blur(10px);
  border-radius:28px;
  z-index:5;
}
.danger-modal-overlay.hidden{display:none}
.danger-card{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,114,114,.22);
  background:linear-gradient(180deg, rgba(43,12,16,.92), rgba(23,8,10,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.danger{border-color:rgba(255,114,114,.26)}
.danger-card-modal{
  width:min(460px,100%);
  padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.44);
}
.matchmaking-shell .setting-row.compact{
  padding:12px 14px;
}
#mmDeleteAccountBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media (max-width: 980px){
  .home-actions-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 860px){
  .auth-grid,
  .settings-grid,
  .play-grid,
  .leaderboard-columns,
  .home-actions-grid,
  .lobby-grid-clean{
    grid-template-columns:1fr;
  }
  .playlist-hero-main{
    flex-direction:column;
    align-items:flex-start;
  }
  .home-screen-intro,
  .home-screen-intro.split{
    flex-direction:column;
    align-items:flex-start;
  }
  .hub-top-actions{
    width:100%;
    justify-content:flex-start;
  }
}
@media (max-width: 620px){
  .home-shell{
    width:min(100vw - 14px,1180px);
    padding:18px;
  }
  .home-tile{
    min-height:136px;
    padding:16px;
  }
  .home-screen-title{
    font-size:clamp(20px,8vw,30px);
  }
  .matchmaking-shell .button-row{
    width:100%;
  }
  .matchmaking-shell .button-row.wrap > *{
    flex:1 1 100%;
  }
  .identity-row .matchmaking-input{
    flex:1 1 100%;
  }
}

@media (max-width: 680px){
  .match-timer-top{
    top:10px;
    min-width:108px;
    padding:8px 12px 10px;
    border-radius:16px;
  }
  .match-timer-top-value{
    font-size:1.06rem;
  }
}


/* Compact auth flow */
.compact-home-topbar{
  align-items:center;
  margin-bottom:4px;
}
.compact-home-title h2{
  margin:6px 0 0;
  font-size:clamp(28px,4vw,44px);
  line-height:1.02;
}
.auth-screen-compact{
  max-width:920px;
  width:100%;
  margin:0 auto;
  gap:14px;
}
.auth-hero-card{
  display:grid;
  gap:6px;
  padding:14px 18px 4px;
}
.auth-grid-compact{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.compact-auth-card{
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:24px;
  min-height:0;
}
.compact-auth-card .matchmaking-input{
  min-width:0;
}
.compact-auth-card .identity-row{
  align-items:stretch;
}
.compact-auth-card .identity-row button,
.auth-split-actions button,
.auth-main-action{
  min-height:52px;
}
.auth-main-action{
  width:100%;
  margin-top:6px;
}
.compact-status-line{
  margin-top:2px;
  min-height:20px;
}
.remember-login-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:2px;
  font-size:0.95rem;
  color:rgba(240,245,255,0.92);
  cursor:pointer;
  user-select:none;
}
.remember-login-row input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#7bf4ff;
  cursor:pointer;
}
.auth-split-actions > *{
  flex:1 1 0;
}
.home-shell{
  overflow:auto;
  scrollbar-gutter:stable;
}
@media (max-width: 900px){
  .auth-grid-compact{
    grid-template-columns:1fr;
  }
}
@media (max-width: 620px){
  .menu-overlay{
    padding:8px;
  }
  .home-shell{
    width:calc(100vw - 8px);
    max-height:calc(100vh - 8px);
    border-radius:22px;
    padding:14px;
  }
  .compact-home-topbar{
    gap:10px;
  }
  .compact-home-title h2{
    font-size:clamp(24px,8vw,34px);
  }
  .auth-hero-card{
    padding:4px 2px 0;
  }
  .compact-auth-card{
    padding:14px;
    border-radius:20px;
  }
  .compact-auth-card .identity-row{
    grid-template-columns:1fr;
  }
  .compact-auth-card .identity-row button,
  .auth-split-actions button,
  .auth-main-action,
  .menu-close{
    width:100%;
  }
  .auth-split-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}
@media (max-width: 420px){
  .compact-home-title h2{
    font-size:24px;
  }
  .auth-hero-card .subtle{
    font-size:14px;
  }
}
@media (max-height: 760px){
  .home-shell{
    max-height:calc(100vh - 12px);
  }
  .auth-hero-card{
    padding-bottom:0;
  }
}


.auth-only-topbar{
  justify-content:center;
}
.compact-home-title{
  width:100%;
  text-align:center;
}
.compact-home-title .eyebrow,
.compact-home-title h2{
  text-align:center;
}
.auth-hero-card-minimal{
  padding:6px 6px 0;
  text-align:center;
}
.single-column-auth{
  grid-template-columns:minmax(0,560px);
  justify-content:center;
}
.account-auth-card{
  width:min(100%,560px);
  margin:0 auto;
}
.auth-primary-actions{
  margin-top:6px;
}
.guest-under-actions{
  width:100%;
}
.home-tile[disabled],
.mode-chip-row button[disabled]{
  opacity:0.52;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none;
  filter:saturate(0.7);
}
.home-tile[disabled] .playlist-copy::after{
  content:' Account required';
  font-weight:700;
  color:#b8e3ff;
}
@media (max-width: 620px){
  .auth-hero-card-minimal{
    padding:2px 0 0;
  }
  .single-column-auth{
    grid-template-columns:1fr;
  }
  .account-auth-card{
    width:100%;
  }
}

@media (max-width: 860px){
  .leaderboard-switcher,
  .settings-grid-expanded{
    grid-template-columns:1fr;
  }
}
@media (max-width: 620px){
  .leaderboard-switcher{
    grid-template-columns:1fr;
  }
  .leaderboard-scroll{
    max-height:48vh;
  }
}

#mmQuickPlayBtn,
#mmPlayQuickBtn{background:linear-gradient(180deg, rgba(111,201,255,.24), rgba(36,95,155,.22));border-color:rgba(120,210,255,.34)}
#mmRankedBtn,
#mmPlayRankedBtn{background:linear-gradient(180deg, rgba(255,195,103,.26), rgba(146,85,24,.22));border-color:rgba(255,195,103,.34)}
#mmPrivateMenuBtn,
#mmHostPrivateBtn,
#mmJoinPrivateBtn{background:linear-gradient(180deg, rgba(190,155,255,.22), rgba(82,58,160,.22));border-color:rgba(190,155,255,.28)}
#mmOpenLeaderboardBtn{background:linear-gradient(180deg, rgba(117,255,193,.2), rgba(38,120,87,.22));border-color:rgba(117,255,193,.28)}
#mmOpenSettingsBtn,
#mmBackToHubFromSettingsBtn,
#mmBackToHubFromLeaderboardBtn,
#mmBackToHubFromPlayBtn,
#mmRefreshBtn,
#mmLeaderboardRefreshBtn,
#mmHubLogoutBtn{background:linear-gradient(180deg, rgba(209,225,255,.2), rgba(79,101,140,.2));border-color:rgba(209,225,255,.26)}
#mmStartMatchBtn{background:linear-gradient(180deg, rgba(124,255,143,.24), rgba(44,130,68,.22));border-color:rgba(140,255,117,.28)}


/* v49 match flow / profile / polish */
.tile-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:26px;line-height:1;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);margin-bottom:8px}
.home-tile{position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.home-tile::after{content:"";position:absolute;inset:auto -12% -38% auto;width:120px;height:120px;border-radius:999px;background:radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);opacity:.25;pointer-events:none}
.home-tile:hover,.home-tile:focus-visible{transform:translateY(-3px) scale(1.01);box-shadow:0 20px 38px rgba(0,0,0,.28)}
.home-tile.quickplay:hover,.home-tile.quickplay:focus-visible{border-color:rgba(117,234,255,.45);box-shadow:0 20px 40px rgba(27,102,158,.25)}
.home-tile.ranked:hover,.home-tile.ranked:focus-visible{border-color:rgba(255,195,103,.48);box-shadow:0 20px 40px rgba(170,100,18,.22)}
.home-tile.private:hover,.home-tile.private:focus-visible{border-color:rgba(186,132,255,.42);box-shadow:0 20px 40px rgba(107,58,170,.22)}
.home-screen,.playlist-hero-card,.menu-card-block{animation:fadeSlideIn .26s ease}
.public-room-row,.lobby-player-row,.current-lobby-card,.lobby-player-list,.lobby-main-actions{animation:none !important}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lobby-waiting-state{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#d8f6ff;font-weight:700;font-size:13px}
.waiting-dots{display:inline-flex;gap:6px;align-items:center}.waiting-dots span{width:7px;height:7px;border-radius:999px;background:var(--accent-2);opacity:.22;animation:waitingPulse 1s infinite ease-in-out}.waiting-dots span:nth-child(2){animation-delay:.14s}.waiting-dots span:nth-child(3){animation-delay:.28s}
@keyframes waitingPulse{0%,100%{opacity:.22;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.profile-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.profile-stat{min-height:88px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.profile-stat span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b7c8d8}.profile-stat strong{font-size:28px;line-height:1;color:#f6fbff}
#streakBanner{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:45;min-width:260px;max-width:min(86vw,520px);padding:16px 24px;border-radius:22px;text-align:center;border:1px solid rgba(126,214,255,.28);background:linear-gradient(180deg, rgba(11,24,42,.62), rgba(5,12,24,.32));backdrop-filter:blur(14px);box-shadow:0 22px 50px rgba(0,0,0,.28);pointer-events:none;transition:opacity .18s ease, transform .18s ease}
#streakBanner.hidden{opacity:0;transform:translateX(-50%) translateY(-10px)}
#streakEyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#93d8ff}#streakText{margin-top:6px;font-size:clamp(24px,3vw,38px);font-weight:900;letter-spacing:.03em;color:#fff}
.match-results-panel{width:min(94vw,980px)!important;max-width:980px;text-align:left;padding:28px 28px 24px!important;margin:20px auto;background:linear-gradient(180deg, rgba(12,18,30,.97), rgba(4,7,14,.97));border:1px solid rgba(140,190,255,.18);box-shadow:0 28px 80px rgba(0,0,0,.48)}.result-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(122,199,255,.18);background:rgba(58,106,173,.18);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#d9f0ff;margin-bottom:10px}
.overlay-standings{margin-top:18px;display:grid;gap:12px;max-height:none;overflow:visible;padding-right:0}.overlay-standings.empty{display:block;color:#b8c4d4}.overlay-results-shell{display:grid;gap:14px}.overlay-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.85fr);gap:12px;align-items:stretch}.overlay-hero-main,.overlay-summary-card,.overlay-grid{border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03))}.overlay-hero-main{padding:16px 18px}.overlay-hero-kicker{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#9cc7ff;margin-bottom:8px}.overlay-hero-winner{font-size:clamp(30px,5vw,52px);line-height:.95;font-weight:1000;color:#fff;text-transform:uppercase}.overlay-hero-reason{margin-top:10px;color:#bcd0e5;line-height:1.5}.overlay-summary-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.overlay-summary-card{padding:12px 10px;display:grid;gap:6px;align-content:center;text-align:center}.overlay-summary-card span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#90adc8}.overlay-summary-card strong{font-size:24px;line-height:1;color:#fff}.overlay-grid{overflow:hidden}.overlay-grid-head,.overlay-standing-row{display:grid;grid-template-columns:56px minmax(0,1.6fr) repeat(3,minmax(62px,.5fr));gap:10px;align-items:center}.overlay-grid-head{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#8fb2d1}.overlay-grid-body{display:grid;gap:8px;padding:10px}.overlay-standing-row{padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025))}.overlay-standing-row.winner{border-color:rgba(255,208,102,.35);box-shadow:inset 0 0 0 1px rgba(255,208,102,.09)}.overlay-standing-row.you{border-color:rgba(103,193,255,.4);background:linear-gradient(180deg, rgba(72,124,189,.22), rgba(22,38,62,.3))}.overlay-standing-place{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:900;font-size:16px;color:#fff}.overlay-standing-player{min-width:0}.overlay-standing-name{font-weight:900;font-size:16px;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.overlay-you-chip{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:0 10px;border-radius:999px;background:rgba(92,197,255,.18);border:1px solid rgba(92,197,255,.28);font-size:11px;font-weight:900;letter-spacing:.1em;color:#cff3ff}.overlay-standing-meta{font-size:11px;color:#a9b8c7;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}.overlay-standing-stat{display:grid;gap:4px;justify-items:center;text-align:center}.overlay-standing-stat span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#8aa7c1;font-weight:800}.overlay-standing-stat strong{font-size:18px;color:#ecf7ff;line-height:1}.overlay-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:18px}.overlay-actions button{min-width:180px}.overlay-actions #restartBtn{background:linear-gradient(180deg, #7cf6ff, #34b8ff);color:#062a3d;border:none}.overlay-actions #nextMatchBtn{background:linear-gradient(180deg, #ffe08c, #ffb640);color:#3a2200;border:none}.overlay-actions #backToMenuBtn{background:linear-gradient(180deg, #ff8f8f, #ff5f5f);color:#fff;border:none}
.scoreboard-inner{max-width:min(92vw,960px)}.scoreboard-players{display:grid;gap:8px;margin-top:14px;max-height:none;overflow:visible}.scoreboard-player-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,84px);gap:10px;align-items:center;padding:10px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(6,13,24,.78)}.scoreboard-player-row.header{background:rgba(255,255,255,.06);text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:#cfe8ff}.scoreboard-player-name{font-weight:800;color:#fff}.scoreboard-player-tag{font-size:11px;color:#aebed0;text-transform:uppercase;letter-spacing:.09em}.scoreboard-player-stat{text-align:right;font-weight:800;color:#dff2ff}.scoreboard-player-row.you{border-color:rgba(126,214,255,.34);box-shadow:inset 0 0 0 1px rgba(126,214,255,.12)}
@media (max-width: 900px){.profile-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.scoreboard-player-row{grid-template-columns:minmax(0,1fr) repeat(4,64px);font-size:13px}.overlay-hero{grid-template-columns:1fr}.overlay-summary-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.overlay-grid-head,.overlay-standing-row{grid-template-columns:58px minmax(0,1.4fr) repeat(3,76px)}}
@media (max-width: 640px){.tile-icon{width:48px;height:48px;font-size:22px}.profile-stats-grid{grid-template-columns:1fr 1fr}.overlay-actions button{flex:1 1 100%}.scoreboard-player-row{grid-template-columns:minmax(0,1fr) 56px 56px 56px 56px;padding:10px 12px}.scoreboard-player-name{font-size:13px}.match-results-panel{padding:22px 18px 18px!important}.overlay-summary-cards{grid-template-columns:1fr 1fr 1fr}.overlay-grid-head{display:none}.overlay-grid-body{padding:8px 0 0}.overlay-standing-row{grid-template-columns:46px minmax(0,1fr) repeat(3,54px);gap:8px;padding:12px 10px}.overlay-standing-place{width:38px;height:38px;font-size:16px;border-radius:12px}.overlay-standing-name{font-size:15px}.overlay-standing-meta{font-size:11px}.overlay-standing-stat strong{font-size:17px}}

.lobby-hero-card .playlist-rule-line{display:none!important}


.lobby-player-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lobby-role-chip-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lobby-role-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#f7fbff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.lobby-role-chip.host{background:rgba(255,195,103,.14);border-color:rgba(255,195,103,.3);color:#ffe8bf}
.lobby-role-chip.you{background:rgba(117,234,255,.14);border-color:rgba(117,234,255,.3);color:#dff9ff}
.lobby-role-chip.slot{background:rgba(181,154,255,.12);border-color:rgba(181,154,255,.24);color:#efe6ff}
#mmLeaveRoomBtn,
button[data-action='leave-room'],
.leave-lobby-btn{background:linear-gradient(180deg, rgba(255,117,117,.24), rgba(194,47,47,.24));border-color:rgba(255,122,122,.28);color:#fff4f4}
#mmLeaveRoomBtn:hover,
button[data-action='leave-room']:hover,
.leave-lobby-btn:hover{background:linear-gradient(180deg, rgba(255,132,132,.34), rgba(210,56,56,.3))}


.signup-auth-card{max-width:560px;margin-inline:auto}
.btn-google-signup{
  width:100%;
  margin-top:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,24,36,.88), rgba(8,12,18,.92));
  color:#a8bacb;
  opacity:.72;
  cursor:not-allowed;
}
.btn-google-signup:disabled{filter:saturate(.7)}
.lobby-name-summary{
  margin-top:8px;
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  line-height:1.35;
}


/* Full-page menu scrolling */
.menu-overlay{
  place-items:start center;
  overflow-y:auto;
}
.menu-shell{
  max-height:none;
  overflow:visible;
  margin:24px auto;
}
.menu-body,
.home-shell,
.leaderboard-scroll{
  max-height:none;
  overflow:visible;
  scrollbar-gutter:auto;
}
.leaderboard-scroll{
  padding-right:0;
}
@media (max-width: 620px){
  .menu-shell,
  .home-shell{
    max-height:none;
  }
}
@media (max-height: 760px){
  .home-shell{
    max-height:none;
  }
}

.death-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.28) 0%, rgba(255,140,140,0.18) 28%, rgba(255,64,64,0.12) 46%, rgba(255,0,0,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,0,0,0.08));
  transition: opacity 90ms linear;
}

.death-flash.active {
  opacity: 0.85;
}

.profile-select {
  min-width: 180px;
}


/* v59 progression / achievements expansion */
.xp-showcase-panel{grid-column:1 / -1}
.xp-showcase-shell{display:grid;gap:14px}
.xp-showcase-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.xp-showcase-title{margin:6px 0 0;font-size:clamp(22px,2.4vw,32px);line-height:1.05;color:#f7fbff}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;min-width:120px;min-height:56px;padding:0 18px;border-radius:18px;border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 28px rgba(0,0,0,.22)}
.rank-badge.bronze{background:linear-gradient(180deg, rgba(129,88,43,.95), rgba(64,40,16,.92));color:#ffe1bd}
.rank-badge.silver{background:linear-gradient(180deg, rgba(105,123,151,.95), rgba(45,58,79,.92));color:#edf5ff}
.rank-badge.gold{background:linear-gradient(180deg, rgba(164,132,52,.95), rgba(82,58,15,.92));color:#fff0b4}
.rank-badge.platinum{background:linear-gradient(180deg, rgba(76,140,154,.95), rgba(24,63,79,.92));color:#d8fbff}
.rank-badge.diamond{background:linear-gradient(180deg, rgba(117,118,214,.96), rgba(46,37,104,.94));color:#eef0ff}
.xp-progress-shell{display:grid;gap:10px}
.xp-progress-track{position:relative;height:18px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.26)}
.xp-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, #7ef1ff, #66b7ff 52%, #ab8cff 100%);box-shadow:0 0 18px rgba(102,183,255,.32)}
.xp-progress-meta{font-size:13px;color:#d7e9f7;font-weight:700}
.xp-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.xp-mini-card{min-height:96px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));display:grid;gap:10px;align-content:center}
.xp-mini-card span{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#9cc3e7}
.xp-mini-card strong{font-size:30px;line-height:1;color:#fff}
.xp-daily-summary{padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg, rgba(95,165,255,.14), rgba(62,92,161,.08));color:#ecf6ff;font-weight:700}
.achievements-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.achievement-card{padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));display:grid;gap:10px;position:relative;overflow:hidden}
.achievement-card.unlocked{border-color:rgba(255,214,116,.34);background:linear-gradient(180deg, rgba(118,92,22,.22), rgba(43,27,7,.18));box-shadow:inset 0 0 0 1px rgba(255,214,116,.08)}
.achievement-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.achievement-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}.achievement-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1)}
.achievement-name{font-size:15px;font-weight:900;color:#fff}.achievement-desc{margin-top:3px;font-size:12px;color:#b7c7d6;line-height:1.45}
.achievement-points{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#ffe5a3}
.achievement-progress{display:grid;gap:8px}.achievement-progress-track{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.achievement-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, #83f8ff, #66b8ff)}
.achievement-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#dce9f6}.achievement-status{font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#88f0b0}.achievement-status.locked{color:#b6c7d7}
.reward-track{display:grid;gap:12px}
.reward-track-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02))}
.reward-track-row.current{border-color:rgba(117,234,255,.32);background:linear-gradient(180deg, rgba(49,117,173,.22), rgba(18,36,66,.2))}.reward-track-row.complete{border-color:rgba(123,233,167,.28)}
.reward-track-step{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:14px;font-weight:900;color:#fff}
.reward-track-copy strong{display:block;font-size:15px;color:#fff}.reward-track-copy span{display:block;margin-top:4px;font-size:12px;color:#b8cadd;line-height:1.4}
.reward-track-value{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#9ed8ff}
.rank-ladder{display:grid;gap:10px}
.rank-ladder-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.rank-ladder-row.active{border-color:rgba(255,214,116,.34);box-shadow:inset 0 0 0 1px rgba(255,214,116,.12)}
.rank-ladder-row strong{font-size:15px;color:#fff}.rank-ladder-row span{font-size:12px;color:#b7c9dc}
.rank-ladder-range{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#dcedff}
.leaderboard-switcher{display:flex;flex-wrap:wrap;gap:10px}
.leaderboard-tab.xp{border-color:rgba(117,234,255,.22)}
.leaderboard-tab.achievements{border-color:rgba(255,214,116,.24)}
.leaderboard-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.leaderboard-row-main{display:grid;gap:4px;min-width:0}.leaderboard-row-title{font-weight:800;color:#fff}.leaderboard-row-meta{font-size:12px;color:#9fb3c8;line-height:1.35}
.leaderboard-row strong{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;text-align:right}
@media (max-width: 900px){.xp-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.achievements-grid{grid-template-columns:1fr}}
@media (max-width: 640px){.xp-showcase-top{align-items:stretch}.rank-badge{width:100%}.xp-mini-grid{grid-template-columns:1fr 1fr}.reward-track-row{grid-template-columns:auto 1fr}.reward-track-value{grid-column:1 / -1}.leaderboard-row strong{justify-content:flex-start;text-align:left}}


.killfeed{position:fixed;top:92px;right:18px;z-index:28;display:grid;gap:8px;max-width:min(420px,38vw);pointer-events:none}
.killfeed-entry{padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(13,20,35,.86), rgba(10,14,25,.72));box-shadow:0 16px 36px rgba(0,0,0,.28);display:grid;gap:4px;animation:killfeed-slide-in .18s ease-out}
.killfeed-entry.revenge{border-color:rgba(255,146,146,.35)}
.killfeed-entry.multi{border-color:rgba(255,210,116,.35)}
.killfeed-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#9fc8ff}
.killfeed-line{font-size:14px;font-weight:800;color:#fff;line-height:1.35}
.killfeed-entry.fade-out{opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease}
@keyframes killfeed-slide-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width: 900px){.killfeed{left:14px;right:14px;max-width:none;top:88px}}
@media (max-width: 900px){
.overlay-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.overlay-progress-card{border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));padding:16px;display:grid;gap:12px}
.overlay-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.overlay-progress-head strong{font-size:16px;color:#fff}
.overlay-progress-head span{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#9ac8ff}
.overlay-reward-list,.overlay-challenge-list{display:grid;gap:8px}
.overlay-reward-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05)}
.overlay-reward-row span{font-size:12px;color:#d7e7f7}
.overlay-reward-row strong{font-size:13px;color:#fff}
.overlay-reward-total{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#ffe39d}
.overlay-challenge-row{display:grid;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05)}
.overlay-challenge-row.complete{border-color:rgba(112,241,166,.28)}
.overlay-challenge-row strong{display:block;font-size:14px;color:#fff}
.overlay-challenge-row span{font-size:12px;color:#bdd1e3}
.overlay-challenge-track{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.overlay-challenge-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, #8ef6ff, #6f98ff)}
}

@media (max-width: 900px){
  .overlay-progress-grid{grid-template-columns:1fr}
}

/* enhanced daily challenges */
.daily-challenges-panel{
  grid-column:1 / -1;
}
.daily-challenges-panel .subtle{
  max-width:760px;
}
.daily-challenges-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  align-items:stretch;
}
.daily-challenges-summary-card{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:18px 20px;
  border-radius:24px;
  border:1px solid rgba(126,214,255,.12);
  background:
    radial-gradient(circle at top right, rgba(89,164,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(13,21,38,.96), rgba(7,12,23,.92));
  box-shadow:0 18px 40px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
}
.daily-challenges-summary-main{
  min-width:0;
  display:grid;
  gap:8px;
}
.daily-challenges-summary-main strong{
  display:block;
  font-size:clamp(22px,2.5vw,32px);
  line-height:1.08;
  color:#f7fbff;
}
.daily-challenges-summary-main span{
  display:block;
  font-size:14px;
  line-height:1.5;
  color:#a9c3de;
}
.daily-challenges-summary-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
}
.daily-challenges-summary-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  color:#eef8ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.daily-claim-btn{
  appearance:none;
  border:none;
  border-radius:999px;
  min-height:46px;
  padding:0 18px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#06273b;
  background:linear-gradient(180deg,#8df7ff,#41bfff);
  box-shadow:0 10px 26px rgba(65,191,255,.24);
  cursor:pointer;
  white-space:nowrap;
}
.daily-claim-btn.claimed,
.daily-claim-btn:disabled{
  cursor:default;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
  color:#b8cadc;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.08);
}
.daily-challenge-card{
  --daily-accent:#73ebff;
  --daily-accent-soft:rgba(115,235,255,.18);
  --daily-track-fill:linear-gradient(90deg, #8ef6ff, #6f98ff);
  min-width:0;
  min-height:0;
  position:relative;
  display:grid;
  gap:14px;
  align-content:start;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    rgba(7,12,24,.96);
  box-shadow:0 18px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  isolation:isolate;
}
.daily-challenge-card::after{
  content:'';
  position:absolute;
  inset:auto -22px -26px auto;
  width:88px;
  height:88px;
  border-radius:999px;
  background:radial-gradient(circle, var(--daily-accent-soft), transparent 68%);
  opacity:.9;
  pointer-events:none;
}
.daily-challenge-card.teal{
  --daily-accent:#76ecff;
  --daily-accent-soft:rgba(118,236,255,.22);
  --daily-track-fill:linear-gradient(90deg, #88f8ff, #59c8ff);
}
.daily-challenge-card.violet{
  --daily-accent:#b78cff;
  --daily-accent-soft:rgba(183,140,255,.2);
  --daily-track-fill:linear-gradient(90deg, #d1b2ff, #8c7aff);
}
.daily-challenge-card.gold{
  --daily-accent:#ffd26a;
  --daily-accent-soft:rgba(255,210,106,.22);
  --daily-track-fill:linear-gradient(90deg, #ffe8a3, #ffb84d);
}
.daily-challenge-card.complete{
  border-color:rgba(122,242,171,.24);
  box-shadow:0 18px 34px rgba(0,0,0,.22), inset 0 0 0 1px rgba(122,242,171,.08);
}
.daily-challenge-glow{
  position:absolute;
  inset:-20% auto auto -16%;
  width:140px;
  height:140px;
  border-radius:999px;
  background:radial-gradient(circle, var(--daily-accent-soft), transparent 72%);
  pointer-events:none;
  z-index:0;
}
.daily-challenge-head,
.daily-challenge-progress{
  position:relative;
  z-index:1;
}
.daily-challenge-head{
  display:grid;
  gap:14px;
}
.daily-challenge-title-wrap{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}
.daily-challenge-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:26px;
  line-height:1;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.daily-challenge-copy{
  min-width:0;
  display:grid;
  gap:7px;
}
.daily-challenge-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--daily-accent);
}
.daily-challenge-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
}
.daily-challenge-title{
  font-size:22px;
  line-height:1.05;
  font-weight:900;
  color:#f7fbff;
  overflow-wrap:anywhere;
}
.daily-challenge-points{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  color:#f5fbff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.daily-challenge-desc{
  font-size:13px;
  line-height:1.5;
  color:#bdd1e3;
}
.daily-challenge-state{
  align-self:start;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(122,242,171,.24);
  background:rgba(122,242,171,.12);
  color:#d9ffea;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.daily-challenge-state.pending{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:#d9e7f4;
}
.daily-challenge-progress{
  display:grid;
  gap:10px;
  margin-top:auto;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
.daily-challenge-track{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.24);
}
.daily-challenge-fill{
  height:100%;
  border-radius:999px;
  background:var(--daily-track-fill);
  box-shadow:0 0 16px var(--daily-accent-soft);
}
.daily-challenge-meta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.daily-challenge-meta span{
  min-width:0;
  font-size:12px;
  line-height:1.4;
  color:#d6e6f6;
}
.daily-challenge-meta span:last-child{
  text-align:right;
  font-weight:800;
  color:#f3fbff;
}
@media (max-width: 900px){
  .daily-challenges-summary-actions{
    justify-content:flex-start;
  }
}
@media (max-width: 720px){
  .daily-challenges-summary-card{
    grid-template-columns:1fr;
    justify-items:start;
  }
}
@media (max-width: 640px){
  .daily-challenge-title{
    font-size:20px;
  }
  .daily-challenge-title-row,
  .daily-challenge-meta{
    grid-template-columns:1fr;
  }
  .daily-challenge-meta span:last-child{
    text-align:left;
  }
  .daily-claim-btn,
  .daily-challenges-summary-pill{
    width:100%;
    justify-content:center;
  }
}
.killstreak-hud{display:none!important}
.overlay-grid{overflow:visible}
.overlay-grid-body{overflow:visible}
.overlay-progress-grid.compact .overlay-progress-card{padding:14px}
.overlay-progress-grid.compact .overlay-reward-row,.overlay-progress-grid.compact .overlay-challenge-row{padding:7px 10px}
.daily-claim-btn{appearance:none;border:none;border-radius:999px;padding:12px 18px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#06273b;background:linear-gradient(180deg,#8df7ff,#41bfff);box-shadow:0 10px 26px rgba(65,191,255,.24);cursor:pointer;white-space:nowrap}
.daily-claim-btn.claimed,.daily-claim-btn:disabled{cursor:default;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));color:#b8cadc;box-shadow:none;border:1px solid rgba(255,255,255,.08)}
.daily-challenge-state{align-self:start}
@media (max-width: 640px){
  .overlay{padding:14px}
  .match-results-panel{width:min(96vw,980px)!important;padding:20px 16px 18px!important}
  }