@font-face {
  font-family: 'VertronPixel';
  src: url('/game/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }

* { scrollbar-width: thin; scrollbar-color: #76b3e3 #f2f2f2; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #f2f2f2; }
*::-webkit-scrollbar-thumb { background: #76b3e3; border: 2px solid #f2f2f2; border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: #5a8fc9; }
*::-webkit-scrollbar-corner { background: #f2f2f2; }

#menuScreen, #gameScreen, #menuScreen *, #gameScreen * {
  scrollbar-color: #76b3e3 #1a1c1e;
}
#menuScreen::-webkit-scrollbar-track, #gameScreen::-webkit-scrollbar-track,
#menuScreen *::-webkit-scrollbar-track, #gameScreen *::-webkit-scrollbar-track { background: #1a1c1e; }
#menuScreen::-webkit-scrollbar-thumb, #gameScreen::-webkit-scrollbar-thumb,
#menuScreen *::-webkit-scrollbar-thumb, #gameScreen *::-webkit-scrollbar-thumb { border-color: #1a1c1e; }
#menuScreen::-webkit-scrollbar-corner, #gameScreen::-webkit-scrollbar-corner,
#menuScreen *::-webkit-scrollbar-corner, #gameScreen *::-webkit-scrollbar-corner { background: #1a1c1e; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #2e3031;
  color: #2e3031;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
  user-select: none;
}

.hidden { display: none !important; }

a { text-decoration: none; color: #5151d9; }

input {
  background: #fff;
  color: #2e3031;
  border: 1px solid #dcdcdc;
  border-radius: 1px;
  padding: 8px 10px;
  font-size: 13px;
  width: 100%;
  margin-bottom: 8px;
  outline: none;
}
input:focus { border-color: #ccc; box-shadow: 0 0 3px 1px #ddd; }

.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

label { display: block; margin: 6px 0; font-size: 13px; color: rgba(0,0,0,0.6); }

h3 { font-size: 16px; color: #2e3031; margin: 10px 0 6px; }
.menuHeader { text-align: center; font-size: 16px; margin: 0 0 10px; }
.menuHeaderTabbed { margin: 0 0 10px; }
.menuHeaderTabbed2 { margin: 12px 0 4px; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 4px 6px; text-align: left; }

.serverRespMsg {
  font-size: 12px; color: rgba(0,0,0,0.45); margin-top: 4px; min-height: 0;
  transition: all 0.15s;
}
.serverRespMsg.hasMessage {
  background: #eef4fb; border-left: 3px solid #3fa9ff; color: #2e3031;
  padding: 6px 10px; border-radius: 2px;
  margin-top: 10px; margin-bottom: 10px;
}

/* ---- menu screen ---- */

#menuScreen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
}

#startMenuWrapper {
  width: min(900px, 94vw);
  padding: 24px 0;
}

#mainTitleText {
  width: 100%;
  color: #fff;
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 800;
  text-align: center;
  letter-spacing: 4px;
  margin-bottom: 18px;
  text-shadow:
    0 1px 0 #4a4d4f, 0 2px 0 #4a4d4f, 0 3px 0 #4a4d4f,
    0 4px 0 #202223, 0 5px 8px rgba(0,0,0,0.4);
}

#startMenu, #messageWrap {
  width: 48%;
  padding: 20px;
  background-color: #fff;
  box-shadow: inset 0 -5px #e0e0e0;
  border-radius: 1px;
  box-sizing: border-box;
  vertical-align: top;
  display: inline-block;
}
#startMenu { float: left; }
#messageWrap { float: right; font-size: 13px; color: rgba(0,0,0,0.55); }

@media (max-width: 700px) {
  #startMenu, #messageWrap {
    width: 100%; float: none; display: block; margin-bottom: 12px;
  }
}

.bigMenuButton, #playBtn, .accordionBtn {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 41px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background: #76b3e3;
  border: 0;
  border-radius: 1px;
  box-shadow: inset 0 -3px #6fa9d6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.bigMenuButton:hover, #playBtn:hover, .accordionBtn:hover,
.bigMenuButton:active, #playBtn:active, .accordionBtn:active {
  background: #6fa9d6;
  box-shadow: none;
  position: relative;
  top: 1px;
}

.smallMenuButton {
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  color: #fff;
  background: #76b3e3;
  border: 0;
  border-radius: 1px;
  box-shadow: inset 0 -3px #6fa9d6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  margin-bottom: 8px;
}
.smallMenuButton:hover, .smallMenuButton:active { background: #6fa9d6; box-shadow: none; }

.switchLoginBtn { display: block; width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; }
.orDivider { display: flex; align-items: center; text-align: center; margin: 10px 0; color: rgba(0,0,0,0.35); font-size: 10px; }
.orDivider::before, .orDivider::after { content: ''; flex: 1; border-bottom: 1px solid #e2e2e2; }
.orDivider span { padding: 0 8px; }

.accordion { max-height: 0; overflow: hidden; transition: max-height 0.2s; }
.accordion.open { max-height: 420px; overflow-y: auto; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin: 6px 0; }

.gridItem {
  position: relative;
  padding: 6px 6px 6px 10px;
  border: 1px solid #e2e2e2;
  border-left: 4px solid #76b3e3;
  border-radius: 1px;
  background: #f7f9fc;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  color: #2e3031;
}
.gridItem:hover { background: #eef3fa; }
.gridItem.selected { border-left-color: #d9a13c; background: #fff4e0; }

ul.tab { width: 100%; list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; }
ul.tab li { display: table-cell; flex: 1; min-width: fit-content; }
.tablinks {
  cursor: pointer;
  display: block;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 6px;
  font-size: 11px;
  background: #f2f2f2;
  color: #2e3031;
  transition: background 0.2s;
}

.pageCard {
  width: min(920px, 94vw);
  margin: 0 auto;
  padding: 24px 0;
}
.pageCard .card {
  background: #fff;
  padding: 20px;
  box-shadow: inset 0 -5px #e0e0e0;
  border-radius: 1px;
}
.tablinks:hover { background: #e6e6e6; }
.tablinks.active { background: #d9d9d9; }
.tabcontent { display: none; padding-top: 10px; }

.hatSelectItem, .cosmeticItem {
  display: inline-block;
  font-size: 12px;
  padding: 5px;
  margin: 2px;
  cursor: pointer;
  border-radius: 1px;
  background: #f2f2f2;
}
.hatSelectItem:hover, .cosmeticItem:hover { background: #e6e6e6; }
.cosmeticItem.selected { background: #fff6e6; border-color: #d9a13c; }
.cosmeticItem.selected .cosmeticItemName::after { content: ' \2713'; color: #b9821f; }
.cosmeticItem.locked { opacity: 0.55; cursor: default; background: #f2f2f2; }
.cosmeticRow {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 8px;
}
.cosmeticItem {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 104px; min-height: 88px; vertical-align: top; text-align: center;
  box-sizing: border-box; border: 2px solid transparent; border-radius: 3px;
  padding: 8px 8px;
}
.cosmetic-icon { display: block; margin-bottom: 5px; background: rgba(0,0,0,0.04); border-radius: 3px; }
.cosmeticItemName {
  font-size: 11px; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.donatePreset { width: auto; min-height: 0; padding: 6px 12px; }

.pixelRadio {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  padding: 0;
  border: 2px solid #76b3e3;
  background: #fff;
  margin: 0 auto 6px;
  display: block;
  cursor: pointer;
  position: relative;
  border-radius: 0;
}
.pixelRadio:checked { background: #fff; }
.pixelRadio:checked::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px; right: 3px; bottom: 3px;
  background: #76b3e3;
}
.pixelRadio:hover { border-color: #5a8fc9; }
.lockBadge { font-size: 10px; }
.cosmeticsHint { font-size: 11px; color: rgba(0,0,0,0.5); margin: 0 0 10px; }

.cosmeticIcon {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  image-rendering: pixelated;
}

#leaderboardAcc table { max-height: 220px; overflow-y: auto; }

.settingsSection { margin-bottom: 12px; }
.settingsSection h4 { margin: 0 0 6px; font-size: 10px; color: #5a8fc9; letter-spacing: 0.5px; }
.settingRow {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0; font-size: 12px; color: #2e3031;
}
.settingRow input[type="checkbox"] { width: auto; margin: 0; }
.settingRow .fixedKey {
  font-size: 9px; color: #888; background: #f2f2f2; padding: 4px 8px; border-radius: 1px;
}
.keybindRow {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0; font-size: 12px; color: #2e3031;
}
.keybindKeyBtn {
  min-width: 64px; text-align: center; padding: 4px 8px; font-size: 9px;
}
.keybindKeyBtn.listening { background: #d9a13c; }

/* ---- game screen ---- */

#gameScreen { position: fixed; inset: 0; overflow: hidden; }

#orientationLock { display: none; }
@media (max-width: 900px) and (orientation: portrait) {
  #orientationLock {
    display: flex; position: fixed; inset: 0; z-index: 2000;
    background: #14161c; color: #fff;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20px; gap: 10px;
    font-family: 'VertronPixel', monospace;
  }
  #orientationLock svg { animation: orientationLockSpin 1.6s ease-in-out infinite; }
  #orientationLock p { margin: 0; font-size: 13px; letter-spacing: 0.5px; }
  #orientationLock .orientationLockSub { font-size: 10px; color: rgba(255,255,255,0.5); }
}
@keyframes orientationLockSpin {
  0%, 20% { transform: rotate(0deg); }
  50%, 70% { transform: rotate(-90deg); }
  100% { transform: rotate(-90deg); }
}
#cvs {
  position: absolute; inset: 0; background: #1a1c1e; display: block;
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMCcgaGVpZ2h0PScyMCc+CjxnIHN0cm9rZT0nYmxhY2snIHN0cm9rZS13aWR0aD0nMycgZmlsbD0nbm9uZSc+CjxjaXJjbGUgY3g9JzEwJyBjeT0nMTAnIHI9JzYnLz4KPHBhdGggZD0nTTEwIDBWNU0xMCAxNVYyME0wIDEwSDVNMTUgMTBIMjAnLz4KPC9nPgo8ZyBzdHJva2U9J3doaXRlJyBzdHJva2Utd2lkdGg9JzEuNScgZmlsbD0nbm9uZSc+CjxjaXJjbGUgY3g9JzEwJyBjeT0nMTAnIHI9JzYnLz4KPHBhdGggZD0nTTEwIDBWNU0xMCAxNVYyME0wIDEwSDVNMTUgMTBIMjAnLz4KPC9nPgo8L3N2Zz4K") 10 10, crosshair;
}

.gameDevStat { background: rgba(0,0,0,0.1); padding: 10px; margin-bottom: 10px; color: #fff; }

#statContainer2 { position: absolute; top: 10px; left: 10px; pointer-events: none; }
#map { width: 200px; height: 200px; background: rgba(0,0,0,0.2); }
#mapc { display: block; }

#teamProgress {
  width: 200px; background: rgba(0,0,0,0.2); margin-top: 10px;
  border-collapse: separate; border-spacing: 10px 5px;
}
#blueText { color: #5151d9; font-size: 13px; white-space: nowrap; }
#redText { color: #d95151; font-size: 13px; white-space: nowrap; }
#progressC { width: 100%; height: 12px; }
#progressbar { background: rgba(0,0,0,0.1); height: 12px; }
#blueProgress { width: 0; height: 12px; background: #5151d9; }
#redProgress { width: 0; height: 12px; background: #d95151; }

#gameModeText { font-size: 14px; padding: 10px; width: 200px; color: #ffd100; }

#conStatContainer { position: absolute; top: 10px; left: 220px; text-align: center; pointer-events: none; }

#statContainer3 { position: absolute; top: 10px; right: 10px; text-align: right; pointer-events: none; }
#status { padding: 10px; background: rgba(0,0,0,0.1); color: rgba(255,255,255,0.7); font-size: 14px; }
#status .title { font-size: 20px; color: #fff; }
#topKills { margin-top: 6px; }
.topKillRow { display: flex; justify-content: flex-end; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.85); line-height: 1.6; }
.topKillRow .tkName { color: rgba(255,255,255,0.85); }
.topKillRow .tkCount { color: #ffd166; font-weight: 600; min-width: 14px; text-align: right; }
#score { padding: 10px; background: rgba(0,0,0,0.1); color: rgba(255,255,255,0.7); font-size: 16px; margin-top: 10px; }
#score .title { color: #fff; }
#scoreValue { color: #fff; }

#killFeed { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 13px; color: #ffd166; font-weight: 600; pointer-events: none; }
#killFeed div { margin-bottom: 2px; text-shadow: 0 0 4px rgba(0,0,0,0.7); }

#actionBar {
  position: absolute; bottom: 84px; right: 10px; pointer-events: none;
  display: flex; gap: 8px; align-items: flex-end;
}
.actionContainer {
  position: relative; width: 26px; height: 26px;
  background: rgba(0,0,0,0.2); border-radius: 2px;
}
.actionContainerActive {
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.45);
}
.actionContainer canvas { position: absolute; inset: 0; }
.actionCooldown { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(255,255,255,0.35); }
.actionLabel {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  font-size: 7px; color: #fff; white-space: nowrap;
}

#statContainer { position: absolute; bottom: 15px; right: 10px; display: flex; gap: 10px; pointer-events: none; }
#health, #ammo { background: rgba(0,0,0,0.1); padding: 10px; text-align: center; color: rgba(255,255,255,0.7); font-size: 16px; }
#healthValue, #ammoValue { color: #fff; font-size: 18px; }

.chatbox { position: absolute; bottom: 15px; left: 10px; }
.chatbox .chat-list { list-style: none; width: 260px; max-height: 150px; overflow: hidden; margin: 0 0 6px; padding: 6px; color: rgba(255,255,255,0.75); font-size: 13px; }
.chatbox .chat-list li { margin: 2px 0; text-shadow: 0 0 3px #000; }
.chatbox .chat-list li.me { color: #fff; }
.chatbox .chat-list li.team { color: #5151d9; }
.chatbox .chat-input { width: 190px; padding: 8px; color: #fff; border: none; font-size: 13px; background: rgba(0,0,0,0.2); }
#chatType { display: inline-block; font-size: 13px; margin-left: 5px; background: rgba(0,0,0,0.2); padding: 8px; color: #fff; cursor: pointer; }

#scoreboardOverlay, #roundOverOverlay {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.75); border-radius: 4px; padding: 20px; min-width: 440px; color: #fff;
}
#scoreboardOverlay th, #roundOverTable th { color: rgba(255,255,255,0.6); text-transform: uppercase; font-size: 10px; }
#scoreboardOverlay td, #roundOverTable td { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); }

#roundOverTitle { text-align: center; margin-top: 0; color: #ffd100; }
#roundOverTimer { text-align: center; margin-top: 10px; color: rgba(255,255,255,0.6); font-size: 12px; }

#escMenuBtn {
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
  display: none; cursor: pointer; background: rgba(0,0,0,0.1); color: #fff; border: 0; padding: 8px 12px; font-size: 12px;
}

#musicControl {
  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.25); border-radius: 3px; padding: 6px 10px;
}
#musicMuteBtn {
  cursor: pointer; background: none; border: 0; color: #fff; padding: 0; margin: 0;
  height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
#musicMuteBtn.muted { color: rgba(255,255,255,0.4); }
#musicControl input[type="range"] { width: 70px; height: 14px; margin: 0; vertical-align: middle; }

#fullscreenPrompt {
  display: none; position: fixed; top: 10px; right: 10px; z-index: 1500;
  background: #76b3e3; color: #14161c; border: 0; border-radius: 2px;
  padding: 8px 12px; font-family: 'VertronPixel', monospace; font-size: 9px;
  cursor: pointer;
}
#fullscreenPrompt:hover { background: #5a8fc9; }

#touchControls { position: absolute; inset: 0; pointer-events: none; z-index: 900; }
.joystick {
  position: absolute; bottom: 26px; width: 116px; height: 116px;
  border-radius: 50%; box-sizing: border-box;
  background: rgba(20,22,28,0.45); border: 2px solid rgba(118,179,227,0.55);
  pointer-events: auto; touch-action: none;
}
#moveStick { left: 26px; }
#aimStick { right: 26px; }
.joystickKnob {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(118,179,227,0.85); top: 34px; left: 34px;
  pointer-events: none;
}

/* ---- touch mode: clear space for the joysticks, cut HUD clutter, bigger tap targets ---- */
#gameScreen.touchActive #statContainer2 { transform: scale(0.65); transform-origin: top left; }
#gameScreen.touchActive #pingText,
#gameScreen.touchActive #fpsText { display: none; }
#gameScreen.touchActive .chatbox { bottom: 150px; }
#gameScreen.touchActive #statContainer { bottom: 150px; }
#gameScreen.touchActive #actionBar { bottom: 226px; }
#gameScreen.touchActive #escMenuBtn {
  padding: 14px 20px; font-size: 11px;
}
#gameScreen.touchActive #musicControl { bottom: auto; top: 10px; left: 50%; }

#loadingWrapper {
  position: fixed; inset: 0; z-index: 999;
  background-color: #2e3031;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s;
}
#loadingWrapper.fade { opacity: 0; pointer-events: none; }
.cs-loader-inner { text-align: center; color: #fff; }
#loadText { font-size: 20px; margin-bottom: 8px; }
.cs-loader-inner label { font-size: 22px; padding: 5px; display: inline-block; opacity: 0; }

@keyframes vertronLoad {
  0% { opacity: 0; transform: translateX(-40px); }
  33% { opacity: 1; transform: translateX(0); }
  66% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(40px); }
}
.cs-loader-inner label:nth-child(2) { animation: vertronLoad 1.8s 200ms infinite ease-in-out; }
.cs-loader-inner label:nth-child(3) { animation: vertronLoad 1.8s 300ms infinite ease-in-out; }
.cs-loader-inner label:nth-child(4) { animation: vertronLoad 1.8s 400ms infinite ease-in-out; }

/* ---- big kill / round announce ---- */

#bigAnnounce {
  position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
#bigAnnounceTitle {
  font-size: 42px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  animation: bigAnnouncePop 1.8s ease-out;
}
#bigAnnounceSub {
  font-size: 18px; color: #ffd100; margin-top: 4px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  animation: bigAnnouncePop 1.8s ease-out;
}
@keyframes bigAnnouncePop {
  0% { opacity: 0; transform: scale(1.4); }
  15% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- pixel font (Press Start 2P, OFL) on headers / buttons / HUD ---- */

#mainTitleText, h3, .menuHeader, .menuHeaderTabbed, .menuHeaderTabbed2,
.bigMenuButton, #playBtn, .accordionBtn, .smallMenuButton, .tablinks,
#health, #ammo, #status, #score, #gameModeText, #blueText, #redText,
#actionBar, #killFeed, #bigAnnounceTitle, #bigAnnounceSub, #loadText,
#chatType, #roundOverTitle, #escMenuBtn {
  font-family: 'VertronPixel', monospace;
  letter-spacing: 0.5px;
}

#mainTitleText { font-size: clamp(18px, 3.2vw, 34px); line-height: 1.6; letter-spacing: 1px; }
h3 { font-size: 11px; line-height: 1.8; }
.menuHeader { font-size: 12px; line-height: 1.8; }
.menuHeaderTabbed, .menuHeaderTabbed2 { font-size: 11px; line-height: 1.8; }
.bigMenuButton, #playBtn, .accordionBtn { font-size: 10px; line-height: 41px; white-space: nowrap; }
.smallMenuButton { font-size: 9px; line-height: 1.6; }
.tablinks { font-size: 9px; }
#health, #ammo, #status, #score { font-size: 10px; line-height: 1.8; }
#healthValue, #ammoValue, #scoreValue, #status .title { font-family: 'VertronPixel', monospace; font-size: 13px; }
#gameModeText { font-size: 11px; line-height: 1.6; }
#blueText, #redText { font-size: 11px; }
#actionBar { font-size: 11px; }
#killFeed { font-size: 10px; }
#killFeed div { line-height: 1.8; }
#bigAnnounceTitle { font-size: 22px; line-height: 1.6; }
#bigAnnounceSub { font-size: 11px; }
#loadText { font-size: 13px; line-height: 1.8; }
#chatType { font-size: 10px; }
#roundOverTitle { font-size: 16px; line-height: 1.8; }
#escMenuBtn { font-size: 9px; }

.cs-loader-inner label { font-family: 'VertronPixel', monospace; }

.gridItemName { font-family: 'VertronPixel', monospace; font-size: 9px; margin-bottom: 4px; letter-spacing: 0.5px; }

#globalToast {
  position: fixed; top: 20px; left: 50%; z-index: 1000;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10, 14, 24, 0.94);
  border-left: 4px solid #d95151;
  border-radius: 3px;
  padding: 10px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  color: #fff;
  font-family: 'VertronPixel', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#globalToast.show { opacity: 1; transform: translate(-50%, 0); }
#globalToast .toastIcon {
  color: #ff8a65;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  line-height: 1;
  animation: toastIconPulse 0.9s ease-in-out infinite;
}
#globalToast .toastText { display: flex; align-items: center; }

@keyframes toastIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

#switchFooter {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VertronPixel', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.45);
  z-index: 500;
  pointer-events: none;
}
#switchFooter a {
  color: #76b3e3;
  text-decoration: none;
  pointer-events: auto;
}
#switchFooter a:hover { text-decoration: underline; }