/* StrikeLine Arena 3D v5.1.5 — UI Polish R5
   Precision pass for landing header + online room setup. No gameplay styling changes. */

:root{
  --r5-bg:#090a0c;
  --r5-surface:#111316;
  --r5-surface-hi:#171a1e;
  --r5-line:#2a2e34;
  --r5-line-hi:#3a4048;
  --r5-text:#f3f2ef;
  --r5-text-2:#c7cbd0;
  --r5-muted:#8a9098;
  --r5-dim:#646b74;
  --r5-accent:#ff5d3f;
  --r5-accent-hi:#ff826b;
  --r5-accent-soft:rgba(255,93,63,.095);
  --r5-good:#6fc89b;
  --r5-warn:#d6af62;
  --r5-bad:#dd747c;
}

/* Typography: body/control face stays neutral; condensed face is reserved for hero display. */
#menu{
  font-family:"Segoe UI Variable","Segoe UI",Aptos,system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important;
  font-feature-settings:"kern" 1,"liga" 1;
  font-kerning:normal;
}
#menu button,#menu input,#menu select,#menu output{font-family:inherit!important}
#menu .sl-hero h1,#menu .sl-terminal-head h2,#menu .sl-showcase-copy b{
  font-family:Bahnschrift,"Segoe UI Variable Display","Arial Narrow",sans-serif!important;
}

/* --------------------------------------------------------------------------
   HEADER — logo/status now read as one intentional game shell, not debug chrome.
   -------------------------------------------------------------------------- */
#menu .sl-nav{
  height:70px!important;
  padding:0 clamp(28px,3.8vw,72px)!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  background:linear-gradient(180deg,rgba(10,11,13,.96),rgba(9,10,12,.91))!important;
  backdrop-filter:blur(20px) saturate(112%)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.14)!important;
}
#menu .sl-brand{
  min-height:44px!important;
  gap:13px!important;
  text-decoration:none!important;
}
#menu .sl-brand-mark{
  width:36px!important;height:36px!important;
  border:1px solid #383d45!important;
  border-radius:7px!important;
  background:linear-gradient(145deg,#20242a,#111317 72%)!important;
  color:#f5f4f1!important;
  font-size:10px!important;font-weight:800!important;letter-spacing:-.04em!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 7px 18px rgba(0,0,0,.24)!important;
}
#menu .sl-brand-mark:before{
  content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.035);border-radius:4px;pointer-events:none;
}
#menu .sl-brand-mark:after{
  right:-1px!important;bottom:-1px!important;width:12px!important;height:2px!important;
  border:0!important;background:var(--r5-accent)!important;
}
#menu .sl-brand-copy{
  display:flex!important;align-items:baseline!important;gap:10px!important;line-height:1!important;
}
#menu .sl-brand-copy b{
  color:#f1f0ed!important;
  font-family:"Segoe UI Variable Display","Segoe UI",Aptos,sans-serif!important;
  font-size:14px!important;font-weight:720!important;letter-spacing:.065em!important;
}
#menu .sl-brand-copy small{
  display:inline-flex!important;align-items:center!important;height:17px!important;margin:0!important;padding-left:10px!important;
  border-left:1px solid #30343a!important;color:#747a82!important;
  font-size:8px!important;font-weight:650!important;letter-spacing:.12em!important;
}

#menu .sl-nav-right{gap:8px!important}
#menu .sl-live-pill{
  min-width:0!important;height:38px!important;margin:0!important;padding:0 13px!important;
  gap:9px!important;border:1px solid #262a30!important;border-radius:8px!important;
  background:#111316!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
#menu .sl-live-pill>span{
  width:7px!important;height:7px!important;margin:0!important;border:0!important;
  background:#6f757d!important;box-shadow:0 0 0 3px rgba(111,117,125,.08)!important;
}
#menu .sl-live-pill>span.online{background:var(--r5-good)!important;box-shadow:0 0 0 3px rgba(111,200,155,.10)!important}
#menu .sl-live-pill>span.waiting{background:var(--r5-warn)!important;box-shadow:0 0 0 3px rgba(214,175,98,.10)!important}
#menu .sl-live-pill>span.error{background:var(--r5-bad)!important;box-shadow:0 0 0 3px rgba(221,116,124,.10)!important}
#menu .sl-live-pill b{
  color:#b9bec5!important;font-size:10px!important;font-weight:620!important;letter-spacing:.015em!important;
  text-transform:capitalize!important;white-space:nowrap!important;
}
#menu .sl-nav-right #profile{
  height:38px!important;min-width:84px!important;padding:0 12px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #262a30!important;border-radius:8px!important;
  background:#111316!important;color:#878d95!important;
  font-size:10px!important;font-weight:600!important;letter-spacing:.01em!important;font-style:normal!important;
}

/* Keep version metadata subordinate in the hero. */
#menu .sl-kicker{font-size:9px!important;letter-spacing:.11em!important}
#menu .sl-kicker b{display:none!important}
#menu .sl-title-subline span{font-size:9px!important;letter-spacing:.14em!important}

/* --------------------------------------------------------------------------
   DEPLOY RAIL — improve type scale and component consistency.
   -------------------------------------------------------------------------- */
#menu .sl-terminal{
  padding:clamp(34px,5vh,54px) clamp(30px,2.7vw,44px) 30px!important;
  scrollbar-width:thin;
  scrollbar-color:#333840 transparent;
}
#menu .sl-terminal::-webkit-scrollbar{width:7px}
#menu .sl-terminal::-webkit-scrollbar-track{background:transparent}
#menu .sl-terminal::-webkit-scrollbar-thumb{background:#333840;border:2px solid transparent;background-clip:padding-box;border-radius:10px}
#menu .sl-terminal-head{margin-bottom:22px!important;padding-bottom:20px!important}
#menu .sl-terminal-head>div>p.sl-terminal-eyebrow{
  margin-bottom:7px!important;color:var(--r5-accent-hi)!important;font-size:8px!important;font-weight:700!important;letter-spacing:.12em!important;
}
#menu .sl-terminal-head h2{font-size:31px!important;font-weight:650!important;letter-spacing:-.025em!important}

#menu .play-path-switch{margin-bottom:24px!important}
#menu .play-path{
  min-height:54px!important;height:54px!important;padding:0 14px 12px!important;gap:10px!important;
}
#menu .play-path span b{font-size:11px!important;font-weight:640!important;letter-spacing:.01em!important}
#menu .play-path i{width:7px!important;height:7px!important;margin-right:0!important}

#menu .sl-terminal-fields{gap:15px 12px!important}
#menu .sl-terminal-fields label,#menu .sl-online-panel label{
  color:#7d848d!important;font-size:9px!important;font-weight:650!important;letter-spacing:.055em!important;text-transform:uppercase!important;
}
#menu .sl-terminal-fields select,#menu .sl-terminal input:not([type=range]){
  height:48px!important;min-height:48px!important;margin-top:7px!important;padding:0 38px 0 13px!important;
  border:1px solid var(--r5-line)!important;border-radius:7px!important;
  background-color:#14171b!important;color:#e6e6e4!important;
  font-size:11px!important;font-weight:570!important;letter-spacing:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
#menu .sl-terminal-fields select:hover,#menu .sl-terminal input:not([type=range]):hover{border-color:#3a4048!important;background-color:#171b20!important}
#menu .sl-terminal-fields select:focus-visible,#menu .sl-terminal input:not([type=range]):focus-visible{
  border-color:rgba(255,93,63,.58)!important;box-shadow:0 0 0 3px rgba(255,93,63,.11)!important;
}
#menu .sl-bots{margin-top:19px!important;font-size:9px!important;letter-spacing:.055em!important}
#menu .sl-bots output{font-size:10px!important}

/* --------------------------------------------------------------------------
   ONLINE ROOM SETUP — rebuilt as three clear groups: identity, room, status.
   -------------------------------------------------------------------------- */
#menu .phase2-online-panel{
  grid-template-columns:1fr!important;gap:14px!important;
  margin:20px 0 0!important;padding:20px 0 0!important;
  border:0!important;border-top:1px solid rgba(255,255,255,.07)!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
#menu .phase2-online-panel>*{min-width:0!important;max-width:none!important}
#menu .sl-online-identity{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important;align-items:start!important;
}
#menu .sl-field-head{
  min-height:16px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
  color:#858b93!important;font-size:9px!important;font-weight:650!important;letter-spacing:.055em!important;text-transform:uppercase!important;
}
#menu .sl-field-head>em{
  color:#555c65!important;font-size:7px!important;font-weight:600!important;font-style:normal!important;letter-spacing:.055em!important;text-transform:uppercase!important;
}
#menu .sl-online-panel .field-hint,#menu .required-mark{display:none!important}
#menu .sl-online-panel input,#menu .sl-online-panel select{
  width:100%!important;height:46px!important;min-height:46px!important;margin-top:6px!important;padding:0 13px!important;
  border:1px solid var(--r5-line)!important;border-radius:7px!important;background:#14171b!important;
  color:#e6e6e4!important;font-size:11px!important;font-weight:570!important;letter-spacing:0!important;text-transform:none!important;text-align:left!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
#menu .sl-online-panel select{padding-right:36px!important}
#menu #roomCodeInput{
  text-transform:uppercase!important;text-align:left!important;letter-spacing:.10em!important;font-weight:650!important;font-variant-numeric:tabular-nums!important;
}
#menu .room-access-v452{
  display:grid!important;grid-template-columns:minmax(0,1fr) 112px 104px!important;gap:8px!important;align-items:end!important;
}
#menu .room-access-v452 label{min-width:0!important}
#menu .room-access-v452 button{
  width:100%!important;height:46px!important;min-height:46px!important;margin:0!important;padding:0 12px!important;
  border-radius:7px!important;font-size:10px!important;font-weight:650!important;letter-spacing:0!important;text-transform:none!important;
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
#menu .room-access-v452 #createRoomBtn{
  border:1px solid rgba(255,93,63,.48)!important;
  background:linear-gradient(180deg,rgba(255,93,63,.13),rgba(255,93,63,.075))!important;
  color:#ffd8cf!important;
}
#menu .room-access-v452 #createRoomBtn:hover:not(:disabled){border-color:rgba(255,126,99,.72)!important;background:rgba(255,93,63,.15)!important;color:#fff!important}
#menu .room-access-v452 #joinRoomBtn{
  border:1px solid #343940!important;background:#1a1d21!important;color:#d4d7da!important;
}
#menu .room-access-v452 #joinRoomBtn:hover:not(:disabled){border-color:#474d55!important;background:#20242a!important;color:#fff!important}
#menu .room-access-v452 button:disabled{opacity:.46!important;filter:none!important;cursor:not-allowed!important}

#menu .sl-online-status-grid{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(150px,.72fr)!important;gap:8px!important;
}
#menu .phase2-online-panel>.lan-status-row{grid-column:auto!important}
#menu .lan-status-row,#menu .pre-match-network-v452{
  min-height:42px!important;margin:0!important;padding:8px 11px!important;
  border:1px solid #262a30!important;border-radius:7px!important;background:#121417!important;
  color:#8c929a!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.014)!important;
}
#menu .lan-status-row{display:flex!important;align-items:center!important;gap:9px!important;overflow:hidden!important}
#menu .lan-status-row #lanDot{
  width:7px!important;height:7px!important;flex:0 0 7px!important;border-radius:50%!important;box-shadow:none!important;background:#737982!important;
}
#menu .lan-status-row #lanDot.online{background:var(--r5-good)!important}
#menu .lan-status-row #lanDot.waiting{background:var(--r5-warn)!important}
#menu .lan-status-row #lanDot.offline{background:#737982!important}
#menu .lan-status-row #lanDot.error{background:var(--r5-bad)!important}
#menu .lan-status-row b{
  min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  color:#aeb3b9!important;font-size:9px!important;font-weight:600!important;letter-spacing:.01em!important;text-transform:capitalize!important;
}
#menu .pre-match-network-v452{
  grid-column:auto!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:5px 8px!important;overflow:hidden!important;
}
#menu .pre-match-network-v452 b{
  grid-row:1/3!important;color:#707780!important;font-size:8px!important;font-weight:650!important;letter-spacing:.055em!important;text-transform:uppercase!important;
}
#menu .pre-match-network-v452 span{
  min-width:0!important;color:#8c929a!important;font-size:9px!important;line-height:1.25!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#menu .pre-match-network-v452.good{border-color:rgba(111,200,155,.25)!important}
#menu .pre-match-network-v452.fair{border-color:rgba(214,175,98,.26)!important}
#menu .pre-match-network-v452.poor{border-color:rgba(221,116,124,.30)!important}

/* Bottom action row: disabled online state is intentionally neutral, never muddy/brown. */
#menu .sl-terminal-actions{grid-template-columns:minmax(0,1fr) 116px!important;gap:9px!important;margin-top:20px!important}
#menu .sl-terminal-actions #deploy,#menu .sl-terminal-actions #settingsBtn{
  height:50px!important;min-height:50px!important;border-radius:7px!important;font-size:11px!important;font-weight:680!important;letter-spacing:.01em!important;text-transform:none!important;
}
#menu .sl-terminal-actions #deploy:not(:disabled){
  border:1px solid #ff765f!important;background:linear-gradient(180deg,#ff6a4d,#f65337)!important;color:#fff!important;
  box-shadow:0 12px 28px rgba(255,70,40,.14),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#menu .sl-terminal-actions #deploy:disabled{
  opacity:1!important;border:1px solid #30343a!important;background:#1b1e22!important;color:#6f757d!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;cursor:not-allowed!important;
}
#menu .sl-terminal-actions #settingsBtn{border:1px solid #30343a!important;background:#171a1e!important;color:#b0b4ba!important}
#menu .sl-terminal-actions #settingsBtn:hover{border-color:#434950!important;background:#1d2126!important;color:#fff!important}

/* Laptop widths: maintain readable room controls rather than crushing buttons. */
@media(max-width:1220px){
  #menu .sl-nav{padding-inline:30px!important}
  #menu .room-access-v452{grid-template-columns:minmax(0,1fr) 104px 96px!important}
}

/* Portrait/tablet rail is narrower, so room actions stack cleanly. */
@media(max-width:860px) and (orientation:portrait){
  #menu .sl-online-identity{grid-template-columns:1fr!important}
  #menu .room-access-v452{grid-template-columns:1fr 1fr!important}
  #menu .room-access-v452 label{grid-column:1/-1!important}
  #menu .sl-online-status-grid{grid-template-columns:1fr!important}
}

@media(max-width:680px){
  #menu .sl-nav{height:58px!important;padding:0 14px!important}
  #menu .sl-brand{gap:9px!important}
  #menu .sl-brand-mark{width:32px!important;height:32px!important}
  #menu .sl-brand-copy b{font-size:12px!important}
  #menu .sl-brand-copy small{display:none!important}
  #menu .sl-live-pill{height:36px!important;padding:0 10px!important}
  #menu .sl-live-pill b{font-size:9px!important}
  #menu .sl-nav-right #profile{display:none!important}
  #menu .sl-terminal-fields label,#menu .sl-online-panel label{font-size:8px!important}
}

/* Real touch landscape: preserve 40px+ targets but simplify status density. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:620px){
  #menu .sl-nav{height:48px!important;padding:0 12px!important}
  #menu .sl-brand-mark{width:30px!important;height:30px!important}
  #menu .sl-brand-copy b{font-size:11px!important}
  #menu .sl-brand-copy small{display:none!important}
  #menu .sl-live-pill{height:40px!important;border:0!important;background:transparent!important;padding:0 8px!important}
  #menu .sl-live-pill b{font-size:8px!important}
  #menu .sl-nav-right #profile{display:none!important}
  #menu .sl-terminal{padding:10px 12px 10px!important}
  #menu .sl-terminal-fields{gap:6px 7px!important}
  #menu .sl-terminal-fields label,#menu .sl-online-panel label,#menu .sl-field-head{font-size:7px!important}
  #menu .sl-terminal-fields select,#menu .sl-online-panel input,#menu .sl-online-panel select{height:40px!important;min-height:40px!important;margin-top:3px!important;font-size:9px!important}
  #menu .phase2-online-panel{gap:6px!important;margin-top:7px!important;padding-top:7px!important}
  #menu .sl-online-identity{grid-template-columns:1fr 1fr!important;gap:6px!important}
  #menu .sl-field-head>em{display:none!important}
  #menu .room-access-v452{grid-template-columns:minmax(118px,1fr) 98px 90px!important;gap:5px!important}
  #menu .room-access-v452 button{height:40px!important;min-height:40px!important;font-size:8px!important}
  #menu .sl-online-status-grid{display:none!important}
  #menu .sl-terminal-actions{margin-top:7px!important;grid-template-columns:1fr 96px!important;gap:6px!important}
  #menu .sl-terminal-actions #deploy,#menu .sl-terminal-actions #settingsBtn{height:40px!important;min-height:40px!important;font-size:9px!important}
}