@font-face {
  font-family: "Soldat Interface";
  src: url("/assets/client/play-regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Soldat Interface", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #101010;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: none;
}

#game:focus { outline: none; }

.config-panel[hidden] {
  display: none;
}

.config-panel {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 50%;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 16px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #17191b;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.72);
  color: #f5f3e8;
}

.config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.config-header h1 {
  margin: 0;
  color: #fff5b1;
  font-size: 18px;
  font-weight: 400;
}

.config-close {
  width: 30px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.config-fields {
  display: grid;
  gap: 10px;
}

.config-fields label {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 10px;
  color: #c8c8c0;
  font-size: 13px;
}

select,
input,
button {
  min-width: 0;
  height: 32px;
  border: 1px solid #555;
  border-radius: 2px;
  background: #282b2e;
  color: #fff;
  font: inherit;
}

select,
input {
  width: 100%;
  padding: 0 8px;
}

button {
  padding: 0 10px;
  cursor: pointer;
}

button:hover,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  border-color: #d9cb72;
  outline: none;
}

.connection-status {
  margin: 14px 0 0;
  border-top: 1px solid #3d4043;
  padding-top: 10px;
  color: #b9b9b2;
  font-size: 12px;
}

.connection-status div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 5px 0;
}

.connection-status dt,
.connection-status dd {
  margin: 0;
}

.connection-status dd {
  color: #f5f3e8;
  text-align: right;
}

.config-hint {
  margin: 12px 0 0;
  color: #858780;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 430px) {
  .config-fields label {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Global and current-match scores share the game's compact interface styling. */
.leaderboard-preview-card { margin-top: 24px; padding-top: 18px; border-top: 1px solid #3d4346; }
.leaderboard-meta { color: #a8b4ba; font-size: 12px; line-height: 1.5; }
.leaderboard-preview-button { display: block; width: 100%; height: auto; padding: 12px; text-align: left; background: #1d272d; }
[data-leaderboard-preview] { display: block; font-size: 13px; line-height: 1.6; }
.leaderboard-preview-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding: 4px 0; }
.leaderboard-preview-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #f7f0cb; }
.leaderboard-preview-row > span { color: #9fb5c0; }
.leaderboard-more { display: block; margin-top: 9px; color: #e9da83; font-size: 11px; }
.leaderboard-hud { position: fixed; z-index: 10; right: 16px; bottom: 16px; padding: 6px 10px; color: #c4cdb1; font-size: 11px; background: #111a12b8; border-radius: 6px; pointer-events: none; }
.leaderboard-hud .leaderboard-meta { display: block; font-size: 10px; margin-top: 5px; }
.leaderboard-hud[hidden], #gameLoading[hidden], .match-scoreboard[hidden] { display: none; }
.score-dialog, .match-scoreboard { color: #f5f3e8; border: 1px solid #61717b; padding: 24px; background: #141d23; box-shadow: 0 20px 70px #000b; width: min(900px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
.score-dialog::backdrop { background: #04090cc7; }
.score-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.score-header h2 { color: #fff4a8; margin: 4px 0; font-size: 23px; font-weight: 400; }
.score-header > span { color: #a8b4ba; font-size: 12px; }
.leaderboard-tools { display: flex; align-items: end; gap: 12px; margin: 20px 0; }
.leaderboard-tools label { display: grid; gap: 6px; font-size: 12px; color: #a8b4ba; }
.leaderboard-tools label:first-child { flex: 1; }
.score-table-scroll { overflow: auto; max-height: 50dvh; }
.score-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.score-table th { position: sticky; top: 0; background: #24313a; color: #b3c3cb; font-weight: 400; }
.score-table th, .score-table td { padding: 12px 10px; text-align: right; border-bottom: 1px solid #33414a; }
.score-table th:first-child, .score-table td:first-child, #leaderboardDialog .score-table th:nth-child(2), #leaderboardDialog .score-table td:nth-child(2) { text-align: left; }
.score-table th[aria-sort] { color: #fff4a8; }
.scoreboard-self { background: #35433c; color: #fff4a8; }
.leaderboard-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; font-size: 12px; }
button:disabled { opacity: .4; cursor: default; }
.match-scoreboard { position: fixed; z-index: 25; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.match-scoreboard { width: min(1160px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 12px; color: var(--menu-text); background: radial-gradient(ellipse at 60% 0, #30372b55, transparent 60%), #1c221b; }
.match-scoreboard .match-standing { padding: 20px; background: #111a12; border-radius: 12px; }
.match-scoreboard .score-header { margin-bottom: 12px; }
.match-scoreboard .leaderboard-meta, #matchTeams { color: var(--menu-muted); font-size: 11px; line-height: 1.6; }
.match-scoreboard .score-table th { background: #1c281a; color: #939e7e; font-size: 10px; }
.match-scoreboard .score-table td { font-size: 12px; }
.match-scoreboard .score-table th, .match-scoreboard .score-table td { border-color: #303c29; }
.match-scoreboard .scoreboard-self { background: #303c29; color: #e1cb88; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 600px) { .leaderboard-hud { bottom: 8px; right: 8px; padding: 6px; font-size: 10px; } .leaderboard-hud .leaderboard-more { font-size: 9px; } .score-dialog, .match-scoreboard { padding: 14px; } .leaderboard-tools { flex-wrap: wrap; } .score-table th, .score-table td { padding: 9px 7px; } }

/* Lobby hierarchy uses dark room surfaces and an unboxed leaderboard. */
:root { --menu-text: #e0e0cf; --menu-muted: #9a9e89; --menu-border: #44483a; --menu-red: #c43d2e; --menu-accent: #cecc8a; }
[hidden] { display: none !important; }
button, input, select { border-radius: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #e0ce88; outline-offset: 3px; }
.lobby { position: fixed; inset: 0; z-index: 30; overflow: auto; padding: 24px 30px; color: var(--menu-text); background: radial-gradient(ellipse at 60% 0, #30372b55, transparent 60%), #1c221b; }
.menu-shell { max-width: 1160px; margin: 0 auto; }
.masthead { position: relative; overflow: hidden; padding: 18px 28px; border-radius: 12px; background: linear-gradient(90deg, #161b17 2%, #161b1799 43%, transparent 75%), url('/menu-battlefield.svg') center right / cover; }
.masthead::after { position: absolute; content: ''; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #00000012 0 1px, transparent 1px 3px); box-shadow: inset 0 0 60px #080b0866; }

.masthead h1 { margin: 18px 0 0; line-height: 1; position: relative; z-index: 1; }
.masthead h1 img { display: block; width: 390px; height: auto; max-width: 80%; filter: drop-shadow(0 4px 2px #0007); }

.menu-bar { min-height: 50px; display: flex; align-items: center; gap: 18px; padding: 0 4px; }
.server-population { font-size: 11px; color: #b7bba2; }
.server-population::before, .live-label::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #9fa968; margin-right: 7px; box-shadow: 0 0 7px #b3c58155; }
.account-controls { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#signedInAs { font-size: 11px; color: #c3c5ae; }
.account-controls button { height: 30px; padding: 0 12px; font-size: 11px; border: 0; border-radius: 6px; background: #30392b; }

#loginStatus { color: #e0ae79; font-size: 11px; margin: 5px 0 0; }
#loginStatus:empty { display: none; }
.login-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; flex-shrink: 0; padding: 9px 15px; font-size: 11px; letter-spacing: .04em; text-decoration: none; }
.primary, .lobby .login-button { background: linear-gradient(#a73c2b, #7d291f); color: #fff1d8; border: 1px solid #c0593d; box-shadow: inset 0 1px #e98d5344, 0 2px 0 #0b0e09; }
.primary:hover, .lobby .login-button:hover { background: linear-gradient(#c34b33, #943224); }
.login-button span { color: #ffc09d; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, 1fr); gap: 32px; padding: 8px 0 0; align-items: start; }
.game-panel { min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 12px; margin-bottom: 8px; }
.panel-heading h2 { margin: 0; color: #eaecdc; font-size: 18px; font-weight: 400; }

.icon-button { width: 30px; height: 30px; padding: 0; font-size: 22px; background: transparent; border: 0; border-radius: 6px; color: #aebd9a; }
.room-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 14px 0 20px; }
.room-filters button { height: 30px; font-size: 11px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #a5b297; }
.room-filters button[aria-pressed=true] { color: #e3e9cc; background: #2d3a27; }


.room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }









.room-empty { display: grid; align-content: center; min-height: 132px; padding: 24px; color: #a4ad90; font-size: 12px; text-align: center; line-height: 1.7; }
.room-empty strong { display: block; margin-bottom: 6px; color: #d0d3b5; font-weight: 400; }
.room-pagination { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; color: #93a083; font-size: 10px; }
.room-pagination div { display: flex; gap: 5px; }
.room-pagination button { width: 30px; height: 28px; background: #263021; border: 0; border-radius: 6px; color: #d1d6b5; }
#roomBrowserStatus { color: #dab07d; padding: 0 14px; font-size: 11px; }
#roomBrowserStatus:empty { display: none; }
.create-room-callout { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.create-room-callout button { height: 38px; padding: 0 16px; font-size: 12px; background: #2b3824; border: 0; border-radius: 7px; color: #dce4c5; white-space: nowrap; }
.field-manual { padding: 22px 4px 4px; }
.eyebrow { color: #a6ad8a; font-size: 9px; letter-spacing: .17em; margin: 0 0 6px; }
.field-manual p { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: #8f9a7e; font-size: 10px; margin: 9px 0 0; }
.field-manual p span { margin-left: 6px; white-space: nowrap; }
kbd { font: inherit; color: #c4cdb1; display: inline-block; padding: 4px 6px; border-radius: 4px; background: #30392a; }
.live-label { color: #b1b991; font-size: 9px; letter-spacing: .12em; }
.ranking-subhead { display: flex; justify-content: space-between; padding: 14px 0 20px; font-size: 9px; letter-spacing: .06em; color: #9ca78c; }
.lobby-score-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.lobby-score-table th { color: #939e7e; font-size: 9px; font-weight: 400; letter-spacing: .06em; height: 25px; }
.lobby-score-table td { height: 34px; font-size: 13px; }
.lobby-score-table th, .lobby-score-table td { text-align: right; padding: 0 8px; }
.lobby-score-table th:first-child, .lobby-score-table td:first-child { width: 34px; text-align: center; color: #949e7c; font-size: 10px; }
.lobby-score-table th:nth-child(2), .lobby-score-table td:nth-child(2) { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-score-table th:nth-child(3) { width: 55px; }
.lobby-score-table th:last-child { width: 75px; }
.lobby-score-table td:nth-child(3) { color: #97a383; font-size: 11px; }
.lobby-score-table td:last-child { color: #d2d5a6; }
.lobby-score-table .ranked-player:first-child td { color: #e1cb88; }
.lobby-score-table .vacant-rank td:nth-child(2) { color: #7b886e; font-size: 11px; }
.lobby-score-table .vacant-rank td:last-child { color: #5f6e54; }
#lobbyLeaderboardStatus { margin: 16px 8px 8px; font-size: 10px; color: #a0aa8b; }
.show-more { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 8px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: #d5dfb7; font-size: 12px; }
.show-more:disabled { opacity: .55; }

.create-dialog { width: min(510px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow: auto; padding: 28px; color: var(--menu-text); border: 0; border-radius: 14px; background: #222d1f; box-shadow: 0 20px 100px #0009; }
.create-dialog::backdrop { background: #080e08cc; backdrop-filter: blur(3px); }
.create-dialog h2 { color: #e6dfb1; font-size: 23px; }
.create-dialog .score-header { margin-bottom: 22px; }
.create-dialog .score-header button { width: 32px; height: 32px; font-size: 22px; background: #35412e; border: 0; border-radius: 6px; }
.create-room { display: grid; gap: 12px; }
.create-room > label:not(.check) { display: grid; grid-template-columns: 85px 1fr; align-items: center; gap: 8px; color: #c5cbb0; font-size: 12px; }
.create-room input, .create-room select, .private-name-form input { border: 0; border-radius: 6px; background: #141e11; color: #e6e8d5; }
.check { display: flex; align-items: center; gap: 8px; color: #b0bc9c; font-size: 12px; }
.check input { width: 16px; height: 16px; accent-color: #899750; }
.compact-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.compact-fields label { display: grid; gap: 5px; font-size: 11px; color: #b0bc9c; }
.create-room > .primary { height: 39px; margin-top: 6px; }
.room-help { color: #a7b193; font-size: 12px; line-height: 1.5; margin: 0; }
.lobby-error { color: #f1ab80; font-size: 12px; margin: 0; }
.lobby a, .create-dialog a { color: #d5d2a1; }
.lobby-card { width: min(510px, 100%); margin: 10vh auto 30px; padding: 30px; border-radius: 12px; background: #151e13; box-shadow: 0 20px 70px #0004; }
.entry-logo { display: block; width: 240px; max-width: 90%; margin: 0 0 30px; }
.lobby-card h1 { color: #e2dfb1; font-size: 27px; font-weight: 400; }
.login-detail { font-size: 13px; color: #adbb98; line-height: 1.6; }
.private-name-form { display: grid; gap: 12px; margin: 24px 0; }
.room-share { display: flex; gap: 8px; margin: 8px 0 18px; }
.room-share input { flex: 1; min-width: 0; }
.room-share button { white-space: nowrap; }
#leaveRoom { width: 100%; margin-top: 10px; }
@media(min-width: 1500px) { .lobby { padding-top: 5vh; } .masthead { height: 240px; } .masthead h1 img { width: 450px; } }
@media(max-width: 960px) { .lobby { padding: 16px; } .lobby-grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 12px; padding: 12px; }   .create-room-callout { flex-wrap: wrap; }    }
@media(max-width: 720px) { .lobby { padding: 10px; } .lobby-grid { grid-template-columns: 1fr; } .masthead { height: 188px; padding: 16px 20px; background-position: 65% center; } .masthead h1 img { width: 330px; }    .menu-bar { gap: 12px; flex-wrap: wrap; padding-right: 10px; } .menu-selected { min-height: 43px; padding: 0 12px; font-size: 11px; } .server-population { font-size: 10px; } .account-controls:has(#signOutForm:not([hidden])) { padding: 0 10px 8px; }  .login-button { font-size: 10px; padding: 9px 10px; gap: 9px; }      }
@media(max-width: 420px) { .lobby { padding: 6px; } .lobby-grid { padding: 8px; } .masthead h1 img { max-width: 100%; }     .compact-fields { grid-template-columns: repeat(2, 1fr); } .create-room-callout button { width: 100%; } }
@media(min-width: 721px) and (max-height: 800px) {
  .lobby { padding-top: 12px; padding-bottom: 12px; }
  .masthead { height: 142px; padding-top: 13px; }
  .masthead h1 { margin-top: 9px; }
  .masthead h1 img { width: 320px; }

  .menu-bar { min-height: 41px; }

  .lobby-grid { padding-top: 12px; padding-bottom: 12px; }

  .ranking-subhead { padding-top: 10px; padding-bottom: 10px; }
  .lobby-score-table td { height: 29px; }

}

.masthead { display: grid; align-content: center; height: 180px; }
.masthead h1 { margin: 0; }
.game-description { position: relative; z-index: 1; margin: 12px 0 0; font-size: 13px; color: #d0d3bc; }

.lobby-notice { padding: 10px 20px; border-bottom: 1px solid var(--menu-border); }
.lobby-leaderboard { padding-bottom: 12px; }
.sign-in-dialog p { color: #c2caae; font-size: 13px; line-height: 1.6; }
.auth-privacy { margin: 16px 0; padding: 14px 16px; border: 1px solid #526346; border-left: 3px solid #b5d98c; border-radius: 8px; background: #25311f; color: #c2caae; font-size: 13px; line-height: 1.6; }
.auth-privacy strong { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.35; }
.auth-privacy-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; opacity: 0.6; }
.auth-privacy span { display: block; }
.sign-in-dialog .x-auth-button { margin-top: 20px; }
#signInPrivateRoom { width: 100%; height: 38px; margin-top: 12px; color: #d2d8b9; background: #303c27; border: 0; border-radius: 7px; font-size: 12px; }
#signInStatus:empty { display: none; }
@media(min-width: 721px) and (max-height: 800px) { .masthead { height: 142px; } }
@media(max-width: 720px) { .masthead { height: 156px; } }

/* Official logo: https://about.x.com/en/who-we-are/brand-toolkit */
.create-dialog .x-auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid #dadce0;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  font: 700 15px/20px "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
  box-shadow: none;
}
.x-auth-button img { display: block; width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.create-dialog .x-auth-button:hover { background: #e6e6e6; border-color: #d0d0d0; }
.create-dialog .x-auth-button:active { background: #d9d9d9; }
.create-dialog .x-auth-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.room-column { min-width: 0; }
#roomBrowser { padding: 20px; background: #111a12; border-radius: 12px; }
.lobby-leaderboard { padding: 20px 4px 0; }
.icon-button:hover, .room-filters button:hover, .show-more:hover:not(:disabled) { background: #303c29; }
.create-room-callout button:hover { background: #3b4b30; }
.create-room > .primary { border: 0; border-radius: 7px; background: #b2c57c; color: #19230e; box-shadow: none; }
.create-room > .primary:hover { background: #c5d893; }
@media(max-width: 960px) { .lobby-grid { gap: 24px; padding: 8px 0 0; } #roomBrowser { padding: 16px; } .lobby-leaderboard { padding-top: 16px; } }
@media(max-width: 720px) { .lobby-grid { gap: 24px; } .lobby-leaderboard { padding: 0 16px 16px; } .field-manual { padding: 18px 8px 0; } .menu-bar { padding: 0 6px; } }

.room-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 6px 10px;
  height: auto;
  min-height: 108px;
  padding: 15px;
  border: 0;
  border-radius: 8px;
  background: #202b1e;
  color: #e3e4ce;
  text-align: left;
}
.room-card strong { grid-column: 1 / -1; font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.room-map { grid-column: 1 / -1; font-size: 10px; color: #9ba68b; overflow-wrap: anywhere; }
.room-card .room-count { align-self: end; margin-top: 10px; font-size: 11px; color: #c3cfaa; font-variant-numeric: tabular-nums; }
.room-count small { display: block; margin-top: 4px; font-size: 10px; color: #9ba68b; }
.room-join { align-self: end; color: #d0e3a3; font-size: 11px; opacity: 0; transition: opacity 120ms; }
.room-card:hover:not(:disabled), .room-card:focus-visible { background: #2d3c26; }
.room-card:hover .room-join, .room-card:focus-visible .room-join, .room-card:disabled .room-join { opacity: 1; }
.room-card:disabled { opacity: .55; }
.room-empty { grid-column: 1 / -1; }
@media(hover: none) { .room-join { opacity: 1; } }
@media(prefers-reduced-motion: reduce) { .room-join { transition: none; } }
.allowed-weapons { margin: 4px 0; padding: 12px; border: 0; border-radius: 8px; background: #152011; }
.allowed-weapons legend { padding: 0 4px; color: #e3e8d2; font-size: 13px; }
#allowedWeaponChoices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
#allowedWeaponChoices label { display: flex; align-items: center; gap: 7px; color: #c9d3b7; font-size: 12px; }
#allowedWeaponChoices input { width: 15px; height: 15px; margin: 0; accent-color: #b2c57c; }
.weapon-unavailable { opacity: .4; }
.weapon-hud { position: fixed; z-index: 10; top: 12px; left: 10px; width: 88px; color: #e0e7d0; }
#weaponHudList { display: grid; gap: 1px; }
#weaponHudList button { display: flex; align-items: center; gap: 4px; width: 88px; height: 25px; padding: 0 4px; border: 0; border-radius: 5px; background: transparent; color: #e0e7d0; opacity: .6; transition: opacity 120ms; }
#weaponHudList button[aria-pressed=true] { background: #ffffff14; opacity: 1; }
#weaponHudList button:hover, #weaponHudList button:focus-visible { opacity: 1; }
#weaponHudList button:focus-visible { outline: 1px solid #d5dfb6; outline-offset: 1px; }
#weaponHudList img { width: 46px; height: 23px; object-fit: contain; filter: drop-shadow(0 1px 2px #000b); }
#weaponHudList kbd { min-width: 24px; padding: 0; border: 0; background: transparent; text-align: right; font: 8px monospace; text-shadow: 0 1px 3px #000; }
#weaponHudHint { margin: 6px 0 0; font-size: 8px; line-height: 1.6; color: #c3ccb5; text-shadow: 0 1px 3px #000; opacity: .65; }
.weapon-preview { position: fixed; z-index: 12; left: 50%; top: 18%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; width: 210px; padding: 16px 20px; border: 1px solid #d5dfb61a; border-radius: 8px; background: #141a16c7; color: #edf0e4; pointer-events: none; }
.weapon-preview[hidden] { display: none; }
.weapon-preview img { width: 150px; height: 70px; object-fit: contain; }
.weapon-preview span { font-size: 13px; letter-spacing: .02em; }
@media(max-width: 600px) { .weapon-hud { left: 4px; top: 6px; } }
@media(prefers-reduced-motion: reduce) { #weaponHudList button { transition: none; } }