/* StrikeLine Arena 3D v5.2.0 — Interaction & Motion Polish R8
   Focus: honest cinematic art treatment, professional interaction reactions,
   simplified landing chrome, and a rebuilt Settings control. */

:root{
  --sl-ease-out:cubic-bezier(.22,.8,.2,1);
  --sl-ease-snap:cubic-bezier(.2,.9,.2,1);
  --sl-motion-fast:120ms;
  --sl-motion:190ms;
  --sl-motion-slow:280ms;
  --sl-focus:rgba(255,105,57,.38);
}

#menu,
#settings,
#careerPanel,
#loadoutPanel,
#roomLobby,
#pause,
#end{
  font-family:"Manrope","Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif!important;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 1!important;
}
#menu .sl-terminal-head h2,
#settings h2,#settings h3,
#careerPanel h2,#loadoutPanel h2,#roomLobby h2,#pause h2,#end h2{
  font-family:"Rajdhani","Barlow Condensed",Bahnschrift,"Arial Narrow",sans-serif!important;
}

/* Accessible motion policy: high quality by default, calm for users who request it. */
@media (prefers-reduced-motion:reduce){
  #menu *,#settings *,#careerPanel *,#loadoutPanel *,#roomLobby *,#pause *,#end *{
    transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;
  }
}

@media (min-width:861px) and (pointer:fine){
  /* The art is deliberately softened so it reads as mood/key art, not fake gameplay footage. */
  #menu:before{
    inset:-5px!important;
    filter:blur(2.6px) saturate(.78) contrast(.92) brightness(.90)!important;
    transform:scale(1.012)!important;
    transform-origin:center!important;
  }
  #menu:after{
    z-index:2!important;
    background:
      linear-gradient(180deg,rgba(3,5,7,.06) 0%,transparent 16%,transparent 76%,rgba(4,6,8,.34) 91%,rgba(4,6,8,.98) 100%),
      radial-gradient(ellipse at 89% 88%,rgba(5,7,9,.93) 0 8%,rgba(5,7,9,.62) 12%,transparent 22%),
      linear-gradient(90deg,rgba(0,0,0,.03),transparent 57%,rgba(0,0,0,.08))!important;
  }

  /* Remove non-functional reference slogans/footer copy baked into the key art. */
  #menu .v52-art-cleanup{position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important;overflow:hidden!important}
  #menu .v52-art-cleanup:before{
    content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:8.2vh!important;
    background:linear-gradient(180deg,rgba(5,7,9,0),rgba(5,7,9,.90) 42%,#050709 76%)!important;
    backdrop-filter:blur(3px)!important;
  }
  #menu .v52-art-cleanup:after{
    content:""!important;position:absolute!important;right:0!important;bottom:5.8vh!important;width:26vw!important;height:13vh!important;
    background:radial-gradient(ellipse at 78% 63%,rgba(5,7,9,.98) 0 29%,rgba(5,7,9,.78) 50%,transparent 74%)!important;
    filter:blur(3px)!important;
  }

  /* Header: only useful state + level + settings. Credits/profile are intentionally gone. */
  #menu .r7-header-console{padding-right:0!important;gap:0!important}
  #menu .r7-credit,#menu .r7-avatar{display:none!important}
  #menu .r7-level{width:116px!important;padding:0 24px!important;border-right:1px solid rgba(255,255,255,.13)!important}
  #menu .r7-net{min-width:132px!important;padding-right:24px!important}
  #menu .r7-net b,#menu .r7-level b{font-size:clamp(10px,.78vw,12px)!important;font-weight:750!important;letter-spacing:.025em!important}
  #menu .r7-net span{font-size:clamp(7px,.55vw,9px)!important;letter-spacing:.06em!important}

  /* Rebuilt Settings button: actual SVG, actual header child, no CSS mask/fixed-position hack. */
  #menu #settingsBtn.v52-header-settings{
    position:relative!important;inset:auto!important;top:auto!important;right:auto!important;z-index:auto!important;
    flex:0 0 42px!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
    margin-left:22px!important;padding:0!important;display:grid!important;place-items:center!important;
    border:1px solid rgba(255,255,255,.13)!important;border-radius:50%!important;
    background:linear-gradient(180deg,rgba(30,34,39,.92),rgba(17,20,24,.96))!important;color:#d5d9dd!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.2)!important;
    overflow:hidden!important;cursor:pointer!important;
    transition:transform var(--sl-motion-fast) var(--sl-ease-snap),border-color var(--sl-motion) var(--sl-ease-out),background var(--sl-motion) var(--sl-ease-out),box-shadow var(--sl-motion) var(--sl-ease-out),color var(--sl-motion) var(--sl-ease-out)!important;
  }
  #menu #settingsBtn.v52-header-settings:before{display:none!important}
  #menu #settingsBtn.v52-header-settings svg{width:19px!important;height:19px!important;display:block!important;pointer-events:none!important;transition:transform 340ms var(--sl-ease-out)!important}
  #menu #settingsBtn.v52-header-settings:hover{
    transform:translateY(-1px)!important;border-color:rgba(255,118,70,.55)!important;color:#fff!important;
    background:linear-gradient(180deg,rgba(42,42,42,.96),rgba(23,22,22,.98))!important;
    box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 3px rgba(255,100,47,.055),inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
  #menu #settingsBtn.v52-header-settings:hover svg{transform:rotate(22deg)!important}
  #menu #settingsBtn.v52-header-settings:active{transform:translateY(0) scale(.94)!important}
  #menu #settingsBtn.v52-header-settings:focus-visible{outline:0!important;box-shadow:0 0 0 3px var(--sl-focus),0 10px 24px rgba(0,0,0,.3)!important}

  /* Interaction system — quiet at rest, responsive under pointer. */
  #menu button,#menu select,#menu input,
  #settings button,#settings select,#settings input,
  #careerPanel button,#loadoutPanel button,#roomLobby button,#pause button,#end button{
    transition:transform var(--sl-motion-fast) var(--sl-ease-snap),border-color var(--sl-motion) var(--sl-ease-out),background-color var(--sl-motion) var(--sl-ease-out),color var(--sl-motion) var(--sl-ease-out),box-shadow var(--sl-motion) var(--sl-ease-out),filter var(--sl-motion) var(--sl-ease-out),opacity var(--sl-motion) var(--sl-ease-out)!important;
  }
  #menu button:focus-visible,#menu select:focus-visible,#menu input:focus-visible,
  #settings button:focus-visible,#settings select:focus-visible,#settings input:focus-visible,
  #careerPanel button:focus-visible,#loadoutPanel button:focus-visible,#roomLobby button:focus-visible,#pause button:focus-visible,#end button:focus-visible{
    outline:0!important;box-shadow:0 0 0 3px var(--sl-focus)!important;
  }

  #menu .play-path:hover:not(.active){transform:translateY(-1px)!important;border-color:#494f57!important;background:linear-gradient(180deg,#171b20,#11151a)!important;color:#c4c8cc!important}
  #menu .play-path:active{transform:translateY(0) scale(.986)!important}
  #menu .play-path.active{transition-duration:210ms!important}
  #menu .play-path.active:after{content:""!important;display:block!important;position:absolute!important;left:16%!important;right:16%!important;bottom:-1px!important;height:2px!important;background:var(--r7-orange)!important;box-shadow:0 0 12px rgba(255,100,47,.35)!important;animation:v52-tab-in 240ms var(--sl-ease-out)!important}

  #menu .sl-terminal-fields select:hover,#menu .sl-online-panel input:hover,#menu .sl-online-panel select:hover{border-color:#4c535c!important;background-color:#181d22!important}
  #menu .sl-terminal-fields select:focus,#menu .sl-online-panel input:focus,#menu .sl-online-panel select:focus{border-color:rgba(255,108,61,.72)!important;box-shadow:0 0 0 3px rgba(255,100,47,.075),inset 0 1px 0 rgba(255,255,255,.03)!important}

  #menu .r7-bot-grid button{position:relative!important;overflow:hidden!important}
  #menu .r7-bot-grid button:hover:not(.active){transform:translateY(-1px)!important;border-color:#555d66!important;background:linear-gradient(180deg,#1d2228,#15191e)!important;color:#fff!important}
  #menu .r7-bot-grid button:active{transform:scale(.97)!important}
  #menu .r7-bot-grid button.active{animation:v52-choice-pop 220ms var(--sl-ease-snap)!important}

  #menu .sl-terminal-actions #deploy{overflow:hidden!important;isolation:isolate!important;transition:transform var(--sl-motion-fast) var(--sl-ease-snap),filter var(--sl-motion) var(--sl-ease-out),box-shadow var(--sl-motion) var(--sl-ease-out)!important}
  #menu .sl-terminal-actions #deploy:before{position:relative!important;z-index:2!important}
  #menu .sl-terminal-actions #deploy:not(:disabled):hover{transform:translateY(-2px)!important;filter:brightness(1.055) saturate(1.04)!important;box-shadow:0 14px 34px rgba(255,78,33,.30),inset 0 1px 0 rgba(255,255,255,.34)!important}
  #menu .sl-terminal-actions #deploy:not(:disabled):active{transform:translateY(0) scale(.992)!important;box-shadow:0 6px 18px rgba(255,78,33,.23),inset 0 2px 8px rgba(86,20,4,.14)!important}
  #menu .sl-terminal-actions #deploy .v52-sheen{position:absolute!important;z-index:1!important;top:-35%!important;bottom:-35%!important;left:-30%!important;width:22%!important;transform:skewX(-24deg)!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)!important;opacity:0!important;pointer-events:none!important}
  #menu .sl-terminal-actions #deploy:hover .v52-sheen{opacity:1!important;animation:v52-sheen 620ms var(--sl-ease-out)!important}

  #menu .sl-mini-action{transition:border-color var(--sl-motion) var(--sl-ease-out),background var(--sl-motion) var(--sl-ease-out),box-shadow var(--sl-motion) var(--sl-ease-out),transform var(--sl-motion-fast) var(--sl-ease-snap)!important}
  #menu .sl-mini-action:hover{transform:translateY(-2px)!important;border-color:rgba(255,111,66,.38)!important;background:rgba(255,255,255,.025)!important;box-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.028)!important}
  #menu .sl-mini-action:active{transform:translateY(0) scale(.993)!important}

  /* Pointer-reactive highlight is subtle enough not to feel like a web gimmick. */
  #menu .v52-reactive,#settings .v52-reactive,#careerPanel .v52-reactive,#loadoutPanel .v52-reactive,#roomLobby .v52-reactive{
    --mx:50%;--my:50%;position:relative!important;isolation:isolate!important;
  }
  #menu .v52-reactive:before,#settings .v52-reactive:before,#careerPanel .v52-reactive:before,#loadoutPanel .v52-reactive:before,#roomLobby .v52-reactive:before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
    background:radial-gradient(160px circle at var(--mx) var(--my),rgba(255,117,70,.10),transparent 62%);
    transition:opacity var(--sl-motion) var(--sl-ease-out);
  }
  #menu .v52-reactive:hover:before,#settings .v52-reactive:hover:before,#careerPanel .v52-reactive:hover:before,#loadoutPanel .v52-reactive:hover:before,#roomLobby .v52-reactive:hover:before{opacity:1}

  /* Modal presentation feels native to the same product instead of popping abruptly. */
  #settings.active .settings-shell,#careerPanel.active>*,#loadoutPanel.active>*,#roomLobby.active>*,#pause.active>*,#end.active>*{animation:v52-panel-enter var(--sl-motion-slow) var(--sl-ease-out) both!important}
  #settings .settings-tabs-v44 button:hover,#settings .settings-control-card:hover,#settings .binding-row:hover{transform:translateX(2px)!important}
  #settings .settings-tabs-v44 button:active,#settings button:active,#careerPanel button:active,#loadoutPanel button:active,#roomLobby button:active,#pause button:active,#end button:active{transform:scale(.985)!important}
}

@keyframes v52-panel-enter{from{opacity:0;transform:translateY(10px) scale(.993)}to{opacity:1;transform:none}}
@keyframes v52-tab-in{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes v52-choice-pop{0%{transform:scale(.96)}72%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes v52-sheen{0%{left:-30%}100%{left:118%}}

/* Touch keeps the existing R7 responsive composition; hover-only motion stays desktop/fine-pointer. */
@media (max-width:860px),(pointer:coarse){
  #menu,#settings,#careerPanel,#loadoutPanel,#roomLobby,#pause,#end{font-family:"Manrope","Inter","Segoe UI",system-ui,sans-serif!important}
}