/* StrikeLine Arena 3D v5.1.6 — Desktop Landing R6
   Focus: true one-viewport PC landing, refined brand mark, typography and header status cluster.
   Gameplay, networking, maps and modal behavior are untouched. */

:root{
  --r6-accent:#ff5d3f;
  --r6-accent-hi:#ff8a73;
  --r6-ink:#f4f3ef;
  --r6-ui:#c6c9ce;
  --r6-muted:#777e87;
  --r6-dim:#515760;
  --r6-line:rgba(255,255,255,.085);
  --r6-line-hi:rgba(255,255,255,.14);
  --r6-surface:#111317;
  --r6-surface-2:#171a1f;
}

/* Font roles: Inter for information and controls, Barlow Condensed for display only. */
#menu{
  font-family:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif!important;
  font-kerning:normal!important;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 1!important;
}
#menu button,#menu select,#menu input,#menu output{font-family:inherit!important}
#menu .sl-hero h1,#menu .sl-showcase-copy b,#menu .sl-terminal-head h2{
  font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow","Segoe UI",sans-serif!important;
}

/* ----- Header / brand ----- */
#menu .sl-nav{
  height:68px!important;
  padding:0 clamp(30px,4vw,76px)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  background:linear-gradient(180deg,rgba(8,9,11,.985),rgba(8,9,11,.94))!important;
  backdrop-filter:blur(20px) saturate(115%)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.18)!important;
}
#menu .sl-brand{
  min-height:46px!important;gap:13px!important;text-decoration:none!important;
  display:flex!important;align-items:center!important;
}
#menu .sl-brand-mark{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:48px!important;height:34px!important;flex:0 0 48px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;color:transparent!important;font-size:0!important;overflow:visible!important;
}
#menu .sl-brand-mark:before,#menu .sl-brand-mark:after{display:none!important}
#menu .sl-brand-mark img{display:block!important;width:48px!important;height:auto!important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.32))!important}
#menu .sl-brand-copy{
  display:grid!important;grid-template-columns:auto!important;grid-template-rows:auto auto!important;gap:2px!important;
  align-items:start!important;line-height:1!important;
  padding-left:13px!important;border-left:1px solid rgba(255,255,255,.11)!important;
}
#menu .sl-brand-copy b{
  color:#f2f1ed!important;font-family:"Inter","Segoe UI Variable Display","Segoe UI",sans-serif!important;
  font-size:13px!important;font-weight:700!important;letter-spacing:.105em!important;line-height:1!important;
}
#menu .sl-brand-copy small{
  display:block!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;
  color:#6f757d!important;font-size:7px!important;font-weight:650!important;letter-spacing:.22em!important;line-height:1.2!important;
}

/* One coherent top-right console instead of two floating web-style pills. */
#menu .sl-nav-right{
  height:44px!important;display:flex!important;align-items:center!important;gap:0!important;margin-left:auto!important;padding:3px 4px 3px 5px!important;
  border:1px solid #262a30!important;border-radius:10px!important;
  background:linear-gradient(180deg,rgba(22,25,30,.92),rgba(15,17,21,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.18)!important;
}
#menu .sl-live-pill{
  width:auto!important;min-width:126px!important;height:36px!important;margin:0!important;padding:0 16px 0 11px!important;
  display:grid!important;grid-template-columns:9px minmax(0,1fr)!important;grid-template-rows:1fr 1fr!important;
  column-gap:10px!important;row-gap:0!important;align-items:center!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
#menu .sl-live-pill>span{
  grid-column:1!important;grid-row:1/3!important;align-self:center!important;
  width:7px!important;height:7px!important;margin:0!important;border:0!important;border-radius:50%!important;
  background:#737982!important;box-shadow:0 0 0 3px rgba(115,121,130,.08)!important;
}
#menu .sl-live-pill>span.online{background:#69c793!important;box-shadow:0 0 0 3px rgba(105,199,147,.105)!important}
#menu .sl-live-pill>span.waiting{background:#d3aa59!important;box-shadow:0 0 0 3px rgba(211,170,89,.10)!important}
#menu .sl-live-pill>span.error{background:#dc737b!important;box-shadow:0 0 0 3px rgba(220,115,123,.10)!important}
#menu .sl-live-pill small{
  grid-column:2!important;grid-row:1!important;display:block!important;align-self:end!important;margin:0 0 1px!important;
  color:#565d66!important;font-size:6px!important;font-weight:700!important;letter-spacing:.14em!important;line-height:1!important;text-transform:uppercase!important;
}
#menu .sl-live-pill b{
  grid-column:2!important;grid-row:2!important;align-self:start!important;margin:1px 0 0!important;
  color:#c3c7cc!important;font-size:9px!important;font-weight:650!important;letter-spacing:.035em!important;line-height:1!important;
  text-transform:uppercase!important;white-space:nowrap!important;
}
#menu .sl-nav-right #profile{
  position:relative!important;height:36px!important;min-width:111px!important;margin:0!important;padding:0 13px 0 39px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  border:0!important;border-left:1px solid rgba(255,255,255,.085)!important;border-radius:0!important;background:transparent!important;
  color:#989ea6!important;font-size:9px!important;font-weight:600!important;letter-spacing:.025em!important;font-style:normal!important;white-space:nowrap!important;
}
#menu .sl-nav-right #profile:before{
  content:""!important;position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;
  width:20px!important;height:20px!important;border:1px solid #454b53!important;border-radius:50%!important;
  background:
    radial-gradient(circle at 50% 35%,#8c929a 0 2.7px,transparent 3px),
    radial-gradient(ellipse at 50% 82%,#8c929a 0 5.2px,transparent 5.6px)!important;
  opacity:.82!important;
}

/* ----- Landing height correction -----
   R5 changed the header from 64px to 70px but R4 still allocated page height using 64px.
   That mismatch caused the small PC scrollbar visible in the user's screenshot. */
@media (min-width:861px) and (pointer:fine){
  #menu{overflow:hidden!important}
  #menu .sl-page{
    height:calc(100dvh - 68px)!important;min-height:0!important;overflow:hidden!important;scrollbar-width:none!important;
  }
  #menu .sl-page::-webkit-scrollbar{display:none!important}
  #menu .sl-hero{
    height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important;
  }
  #menu .sl-hero-copy{
    height:100%!important;min-height:0!important;overflow:hidden!important;
    padding-top:clamp(30px,4.8vh,50px)!important;padding-bottom:14px!important;
  }
  #menu .sl-terminal{
    height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important;scrollbar-width:none!important;
    padding-top:clamp(25px,3.8vh,38px)!important;padding-bottom:18px!important;
  }
  #menu .sl-terminal::-webkit-scrollbar{display:none!important}

  /* Compress only vertical whitespace, not interaction target size. */
  #menu .sl-showcase{margin-top:clamp(14px,2.6vh,28px)!important}
  #menu .sl-showcase-main{min-height:clamp(166px,24vh,215px)!important;padding-top:7px!important;padding-bottom:13px!important}
  #menu .sl-showcase-weapon{height:clamp(145px,21vh,195px)!important}
  #menu .sl-showcase-stats{padding-top:11px!important}
  #menu .sl-showcase-actions{margin-top:15px!important}
  #menu .sl-session-strip{min-height:48px!important;margin-top:clamp(14px,2.2vh,24px)!important}

  #menu .sl-terminal-head{margin-bottom:16px!important;padding-bottom:14px!important}
  #menu .play-path-switch{margin-bottom:17px!important}
  #menu .sl-terminal-fields{gap:10px 12px!important}
  #menu .sl-terminal-fields select{height:45px!important;min-height:45px!important;margin-top:5px!important}
  #menu .sl-bots{margin-top:13px!important}
  #menu .sl-terminal-actions{margin-top:14px!important}
}

/* Extra insurance for common laptop/browser viewport heights. */
@media (min-width:861px) and (pointer:fine) and (max-height:760px){
  #menu .sl-nav{height:62px!important}
  #menu .sl-page{height:calc(100dvh - 62px)!important}
  #menu .sl-hero-copy{padding-top:24px!important;padding-bottom:10px!important}
  #menu .sl-hero h1{font-size:clamp(64px,6.3vw,104px)!important}
  #menu .sl-title-subline{margin-top:13px!important}
  #menu .sl-showcase{margin-top:10px!important}
  #menu .sl-showcase-main{min-height:150px!important;padding:4px 0 8px!important}
  #menu .sl-showcase-weapon{height:136px!important}
  #menu .sl-showcase-copy p{display:none!important}
  #menu .sl-showcase-stats{padding-top:7px!important}
  #menu .sl-showcase-actions{margin-top:10px!important}
  #menu .sl-session-strip{min-height:42px!important;margin-top:10px!important}
  #menu .sl-terminal{padding-top:20px!important;padding-bottom:12px!important}
  #menu .sl-terminal-head{margin-bottom:12px!important;padding-bottom:10px!important}
  #menu .sl-terminal-head h2{font-size:28px!important}
  #menu .play-path-switch{margin-bottom:12px!important}
  #menu .play-path{height:48px!important;min-height:48px!important;padding-bottom:9px!important}
  #menu .sl-terminal-fields{gap:7px 10px!important}
  #menu .sl-terminal-fields select{height:42px!important;min-height:42px!important;margin-top:4px!important}
  #menu .sl-bots{margin-top:9px!important}
  #menu .sl-terminal-actions{margin-top:10px!important}
}

/* Online mode remains one-view on desktop too. Keep all operations, remove verbose low-value density. */
@media (min-width:861px) and (pointer:fine){
  body[data-play-path="online"] #menu .phase2-online-panel{
    gap:9px!important;margin-top:11px!important;padding-top:11px!important;
  }
  body[data-play-path="online"] #menu .sl-online-panel input,
  body[data-play-path="online"] #menu .sl-online-panel select,
  body[data-play-path="online"] #menu .room-access-v452 button{
    height:42px!important;min-height:42px!important;margin-top:4px!important;
  }
  body[data-play-path="online"] #menu .sl-field-head{min-height:13px!important;font-size:8px!important}
  body[data-play-path="online"] #menu .sl-field-head>em{font-size:6.5px!important}
  body[data-play-path="online"] #menu .lan-status-row,
  body[data-play-path="online"] #menu .pre-match-network-v452{min-height:37px!important;padding:6px 10px!important}
  body[data-play-path="online"] #menu .sl-terminal-actions{margin-top:10px!important}
}

/* Display refinements: less 'AI dashboard', stronger game typography. */
#menu .sl-hero h1{
  font-weight:600!important;letter-spacing:-.045em!important;line-height:.79!important;
  text-rendering:geometricPrecision!important;
}
#menu .sl-showcase-copy b{font-weight:600!important;letter-spacing:-.018em!important}
#menu .sl-terminal-head h2{font-weight:600!important;letter-spacing:-.012em!important}
#menu .sl-kicker,#menu .sl-title-subline span,#menu .sl-showcase-top,#menu .sl-showcase-stats span,#menu .sl-session-strip small{
  font-family:"Inter","Segoe UI Variable Text","Segoe UI",sans-serif!important;
}
#menu .sl-mini-action,#menu .sl-terminal-fields select,#menu .sl-terminal-actions button,#menu .play-path span b{
  font-weight:600!important;letter-spacing:0!important;
}

/* Small desktop widths: keep the logo/status console proportionate. */
@media (min-width:861px) and (max-width:1180px){
  #menu .sl-nav{padding-inline:26px!important}
  #menu .sl-brand-mark{width:42px!important;flex-basis:42px!important}
  #menu .sl-brand-mark img{width:42px!important}
  #menu .sl-live-pill{min-width:112px!important;padding-right:11px!important}
  #menu .sl-nav-right #profile{min-width:100px!important;padding-right:10px!important}
}

/* Touch/mobile keeps its existing responsive layout; use the new logo/type without forcing desktop no-scroll rules. */
@media (max-width:860px), (pointer:coarse){
  #menu .sl-brand-mark{width:38px!important;height:28px!important;flex-basis:38px!important}
  #menu .sl-brand-mark img{width:38px!important}
  #menu .sl-brand-copy{padding-left:9px!important;gap:1px!important}
  #menu .sl-brand-copy b{font-size:11px!important}
  #menu .sl-brand-copy small{font-size:6px!important}
}