:root { --ink: #1a30c0; --red: #d02030; --paper: #f6f3e6; --scope-mask: var(--paper); --scope-ring: var(--ink); --scope-cross: var(--ink); --scope-dot: var(--red); --scope-ring-glow: rgba(26,48,192,.12); }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); font-family: 'Patrick Hand', 'Caveat', 'Comic Sans MS', 'Marker Felt', 'Segoe Print', cursive; }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; color: var(--ink); user-select: none; overflow: hidden;
  --grapple-unavailable-color: var(--mat-danger, var(--red));
  --grapple-ready-color: color-mix(in srgb, #23c96b 72%, var(--mat-accent, var(--ink)) 28%);
}
.hud-tl, .hud-tr, .hud-bl, .hud-br, .crosshair, .hitmarker, .dmg-ind, .message, .killfeed { mix-blend-mode: multiply; }
#hud.nogame .hud-tl, #hud.nogame .hud-tr, #hud.nogame .hud-bl, #hud.nogame .hud-br, #hud.nogame .crosshair, #hud.nogame .grapple-corners, #hud.nogame .killfeed { display: none; }
.hud-tl { position: absolute; left: 9%; top: 3%; font-size: 30px; transform: rotate(-1.5deg); }
.hud-tr { position: absolute; right: 4%; top: 3%; text-align: right; font-size: 30px; transform: rotate(1deg); }
.hud-bl { position: absolute; left: 9%; bottom: 5%; }
.hud-br { position: absolute; right: 4%; bottom: 5%; text-align: right; }
.ammo b { font-size: 58px; } .ammo span { font-size: 28px; opacity: .8; } .reloading { font-size: 22px !important; color: var(--red); }
.tally { display: flex; flex-wrap: wrap; width: 240px; gap: 3px; margin-top: -8px; align-items: flex-end; }
.tally i { display: block; width: 4px; height: 20px; background: var(--ink); transform: rotate(4deg); border-radius: 2px; opacity: .9; }
.tally i:nth-child(5n) { width: 4px; margin-right: 10px; transform: rotate(-8deg); }
.health { margin-bottom: 8px; font-size: 26px; display: flex; align-items: center; gap: 10px; }
.bar { width: 210px; height: 16px; border: 2.5px solid var(--ink); border-radius: 6px 8px 5px 7px / 8px 5px 7px 6px; overflow: hidden; transform: rotate(-1deg); }
.fill { height: 100%; width: 100%; background: repeating-linear-gradient(-55deg, var(--ink) 0 2.5px, transparent 2.5px 6px); transition: width .15s; }
.low .bar { border-color: var(--red); } .low .fill { background: repeating-linear-gradient(-55deg, var(--red) 0 2.5px, transparent 2.5px 6px); }
.crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --s: 8px; --crosshair-color: var(--grapple-unavailable-color); filter: drop-shadow(0 0 1px rgba(255,255,255,.9)); }
.crosshair i { position: absolute; background: var(--crosshair-color); border-radius: 2px; transition: top .06s, left .06s, transform .06s, background-color .12s ease; }
#hud.grapple-ready .crosshair:not(.katana) { --crosshair-color: var(--grapple-ready-color); }
#hud.grapple-unavailable .crosshair:not(.katana) { --crosshair-color: var(--grapple-unavailable-color); }
.ch-t { width: 2px; height: 8px; left: -1px; top: -8px; }
.ch-b { width: 2px; height: 8px; left: -1px; top: 0; }
.ch-l { width: 8px; height: 2px; top: -1px; left: -8px; }
.ch-r { width: 8px; height: 2px; top: -1px; left: 0; }
.ch-dot { display: none; width: 2px; height: 2px; left: -1px; top: -1px; border-radius: 50%; }
.crosshair.katana i { background: var(--ink); } .crosshair.katana .ch-t, .crosshair.katana .ch-b { height: 16px; }
.crosshair.katana .ch-l, .crosshair.katana .ch-r { display: none; }
.grapple-corners {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px;
  color: var(--rk-auto-text, #f7f7f4);
  opacity: .28;
  transform: scale(1.22);
  transition: transform .13s ease-out, opacity .13s ease-out, color .08s linear;
  pointer-events: none;
}
.grapple-corners i {
  position: absolute;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border-color: currentColor;
  border-style: solid;
  border-width: 0;
}
.grapple-corners .gc-tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.grapple-corners .gc-tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.grapple-corners .gc-bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.grapple-corners .gc-br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.grapple-corners.ready {
  opacity: 1;
  transform: scale(.78);
}
.grapple-corners.attached { transform: scale(.72); }
#hud.crosshair-hidden .grapple-corners,
#hud.grapple-disabled .grapple-corners { display: none !important; }
.hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; }
.hitmarker i { position: absolute; width: 3.5px; height: 36px; background: #e8801a; left: -1.75px; top: -18px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(250,248,238,.85); }
.hitmarker i:first-child { transform: rotate(45deg); } .hitmarker i:last-child { transform: rotate(-45deg); }
.hitmarker.show { animation: hm .24s ease-out; }
.hitmarker.crit i { background: var(--red); width: 4.5px; height: 44px; top: -22px; left: -2.25px; }
.hitmarker.kill i { background: var(--red); width: 5px; height: 50px; top: -25px; left: -2.5px; }
@keyframes hm { 0% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1); } }
.message { position: absolute; left: 0; right: 0; top: 24%; text-align: center; }
.msg-main { font-size: 88px; color: var(--ink); transform: rotate(-2deg); opacity: 0; letter-spacing: 3px; line-height: 1; }
.msg-main.show { animation: scribble .55s ease-out forwards; }
@keyframes scribble { 0% { opacity: 0; transform: rotate(-7deg) scale(1.7); filter: blur(3px); } 55% { opacity: 1; transform: rotate(-1deg) scale(.95); filter: blur(0); } 100% { opacity: 1; transform: rotate(-2deg) scale(1); } }
.msg-sub { font-size: 32px; opacity: .85; }
.killfeed { position: absolute; right: 4%; top: 28%; text-align: right; font-size: 27px; }
.killfeed div { animation: kf 1.7s ease-out forwards; } .killfeed .pts { color: var(--red); }
@keyframes kf { 0% { opacity: 0; transform: translateX(30px) rotate(3deg); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
.dmg-ind { position: absolute; left: 50%; top: 50%; }
.dmg-ind i { position: absolute; left: -16px; top: -140px; width: 32px; height: 22px; transform-origin: 16px 140px; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .9; animation: di 1s linear forwards; }
@keyframes di { to { opacity: 0; } }
.screen { position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: center; pointer-events: auto; cursor: pointer; background: rgba(246, 243, 230, .55); overflow-y: auto; }
.screen.show { display: flex; }
.death-fade { position: absolute; inset: 0; display: none; opacity: 0; background: #000; pointer-events: none; z-index: 10000; will-change: opacity; }
.panel { text-align: center; max-width: 980px; margin: auto; padding: 26px 48px; background: rgba(250, 248, 238, .93); box-shadow: 6px 6px 0 rgba(26, 48, 192, .15); border: 3px solid var(--ink); border-radius: 12px 18px 10px 16px / 16px 10px 18px 12px; transform: rotate(-.6deg); }
.panel h1 { font-size: 92px; margin: 0; letter-spacing: 3px; line-height: 1; }
.panel h2 { font-size: 36px; margin: 4px 0 14px; font-weight: normal; }
.panel .cols { display: flex; gap: 46px; justify-content: center; text-align: left; font-size: 22px; line-height: 1.35; }
.panel .cols b { color: var(--red); } .colhead { font-size: 26px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.panel .go { font-size: 34px; margin-top: 18px; animation: blink 1.2s infinite; } @keyframes blink { 50% { opacity: .35; } }
.panel .stats { font-size: 30px; line-height: 1.4; } .panel .stats b { color: var(--red); }
.panel .tip { font-size: 21px; opacity: .8; margin-top: 8px; }
.panel .pause-mode-box { display:block; width:min(100%, 760px); margin:0 auto 18px; text-align:left; cursor:default; pointer-events:none; }
.panel .pause-mode-box.pause-mode-card { min-height:0; padding:16px 18px 14px; font:inherit; appearance:none; -webkit-appearance:none; transform:none; }
.panel .pause-mode-box.pause-mode-card:hover { transform:none; }
.panel .pause-mode-kicker { font-size: 14px; letter-spacing: 1.8px; font-weight: 700; opacity: .72; text-transform: uppercase; }
.panel .pause-mode-title { display: block; font-size: 26px; line-height: .94; font-weight: 800; margin-top: 6px; }
.panel .pause-mode-start { display: inline-block; font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 1px; color: var(--red); margin-top: 11px; text-transform: uppercase; }
.panel .pause-mode-desc { display: block; font-size: 16px; line-height: 1.22; margin-top: 9px; opacity: .78; white-space: normal; }
.weapon { font-size: 36px; } .hint { font-size: 20px; opacity: .8; max-width: 620px; margin-left: auto; line-height: 1.1; }
.combo { font-size: 26px; color: var(--red); min-height: 30px; }
.timer { font-size: 24px; color: var(--red); }
@media (max-width: 900px) { .panel h1 { font-size: 56px; } .panel .cols { flex-direction: column; gap: 10px; font-size: 18px; } .msg-main { font-size: 56px; } .panel .pause-mode-box.pause-mode-card { padding: 12px 14px; } .panel .pause-mode-title { font-size: 25px; } .panel .pause-mode-start { font-size: 13px; } .panel .pause-mode-desc { font-size: 17px; } }
/* v2 additions */
.crosshair.ads { opacity: 0; }
.slots { display: none !important; }
.slot { display: flex; gap: 8px; align-items: baseline; opacity: .55; transform: rotate(1deg); }
.slot.active { opacity: 1; font-size: 24px; border-bottom: 2px solid var(--ink); }
.slot.empty { color: var(--red); }
.slot .num { font-size: 15px; opacity: .8; border: 1.5px solid var(--ink); border-radius: 4px 6px 4px 5px; padding: 0 4px; }
.slot .sammo { font-size: 16px; opacity: .8; min-width: 54px; text-align: right; }
.modifier { font-size: 22px; color: var(--red); min-height: 26px; }
.bossbar { position: absolute; left: 50%; top: 6%; width: 420px; margin-left: -210px; text-align: center; font-size: 26px; display: none; }
.bossbar.show { display: block; mix-blend-mode: multiply; }
.bar.big { width: 420px; height: 20px; margin-top: 4px; }
.fill.red { background: repeating-linear-gradient(-55deg, var(--red) 0 3px, transparent 3px 7px); }
.tip { position: absolute; left: 0; right: 0; top: 14px; bottom: auto; text-align: center; font-size: 26px; color: var(--ink); opacity: 0; transition: opacity .4s; mix-blend-mode: multiply; }
.tip.show { opacity: .9; }
.tip b { color: var(--red); }
#hud.nogame .tip, #hud.nogame .bossbar { display: none; }
.settings { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 21px; margin-top: 12px; border-top: 2px solid var(--ink); padding-top: 10px; }
.settings label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.settings input[type=range] { width: 220px; accent-color: #1a30c0; }
.settings input[type=checkbox] { width: 17px; height: 17px; accent-color: #1a30c0; }
.settings b { color: var(--red); min-width: 56px; text-align: left; }
.settings .k { opacity: .6; font-size: 17px; }
.beststat { font-size: 22px; opacity: .8; margin-top: 4px; }
/* sniper / DMR scope */
.scope {
  --rk-square-scope-size: min(58vh, 58vw);
  position: absolute; inset: 0; opacity: 0; transition: opacity .1s; pointer-events: none;
}
.scope.on { opacity: 1; }
.scope .mask { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(8,12,18,0) 0 30vh, rgba(8,12,18,.9) 30.6vh 100%); }
.scope .mask-edge { display: none; position: absolute; background: rgba(8,12,18,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scope .ring { position: absolute; left: 50%; top: 50%; width: 60.5vh; height: 60.5vh; margin: -30.25vh; border: 3.5px solid var(--scope-ring); border-radius: 50%; box-shadow: inset 0 0 0 7px var(--scope-ring-glow); }
.scope .cx { position: absolute; left: 50%; top: 50%; width: 60vh; height: 2.5px; margin: -1px -30vh; background: repeating-linear-gradient(90deg, var(--scope-cross) 0 14px, transparent 14px 17px); }
.scope .cy { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 60vh; margin: -30vh -1px; background: repeating-linear-gradient(180deg, var(--scope-cross) 0 14px, transparent 14px 17px); }
.scope .dot { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; background: var(--scope-dot); border-radius: 50%; }
.scope.round-soft .mask {
  background: rgba(8,12,18,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 29.8vh, #000 30.55vh 100%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 29.8vh, #000 30.55vh 100%);
}
.scope.square .mask { display: none; }
.scope.square .mask-edge { display: block; }
.scope.square .sq-top { left: 0; right: 0; top: 0; height: calc(50% - var(--rk-square-scope-size) / 2); }
.scope.square .sq-bottom { left: 0; right: 0; bottom: 0; height: calc(50% - var(--rk-square-scope-size) / 2); }
.scope.square .sq-left { left: 0; top: calc(50% - var(--rk-square-scope-size) / 2); width: calc(50% - var(--rk-square-scope-size) / 2); height: var(--rk-square-scope-size); }
.scope.square .sq-right { right: 0; top: calc(50% - var(--rk-square-scope-size) / 2); width: calc(50% - var(--rk-square-scope-size) / 2); height: var(--rk-square-scope-size); }
.scope.square .ring {
  width: var(--rk-square-scope-size);
  height: var(--rk-square-scope-size);
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  border-width: 3px;
  box-shadow: inset 0 0 0 5px var(--scope-ring-glow), 0 0 0 1px rgba(255,255,255,.08);
}
.scope.square .cx {
  width: calc(var(--rk-square-scope-size) - 10px);
  margin: 0;
  transform: translate(-50%, -50%);
}
.scope.square .cy {
  height: calc(var(--rk-square-scope-size) - 10px);
  margin: 0;
  transform: translate(-50%, -50%);
}
/* focus-slash target marker */
.focus-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .1s; }
.focus-mark.on { opacity: 1; animation: fm .5s ease-in-out infinite alternate; }
.focus-mark i { position: absolute; width: 20px; height: 20px; border: 3px solid var(--red); }
.focus-mark i:nth-child(1) { left: -30px; top: -30px; border-right: 0; border-bottom: 0; }
.focus-mark i:nth-child(2) { left: 10px; top: -30px; border-left: 0; border-bottom: 0; }
.focus-mark i:nth-child(3) { left: -30px; top: 10px; border-right: 0; border-top: 0; }
.focus-mark i:nth-child(4) { left: 10px; top: 10px; border-left: 0; border-top: 0; }
@keyframes fm { from { transform: scale(1); } to { transform: scale(1.18); } }
#hud.nogame .scope, #hud.nogame .focus-mark { display: none; }
/* katana focus gauge */
.focus-meter { position: absolute; left: 4.5%; top: 50%; transform: translateY(-50%) rotate(-1.5deg); opacity: 0; transition: opacity .25s; text-align: center; mix-blend-mode: multiply; }
.focus-meter.on { opacity: 1; }
.fm-label { font-size: 17px; letter-spacing: 2px; color: var(--ink); opacity: .8; margin-bottom: 4px; }
.fm-tube { position: relative; width: 26px; height: 168px; border: 3px solid var(--ink); border-radius: 8px 11px 7px 10px / 11px 7px 10px 8px; overflow: hidden; }
.fm-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: repeating-linear-gradient(-52deg, var(--ink) 0 3px, transparent 3px 7px); transition: height .18s; }
.fm-tube i { position: absolute; left: 50%; bottom: 100%; width: 16px; height: 22px; margin-left: -8px; background: var(--red); opacity: 0; clip-path: polygon(50% 0, 78% 42%, 66% 38%, 82% 78%, 50% 100%, 18% 78%, 34% 38%, 22% 42%); }
.focus-meter.ready .fm-tube { border-color: var(--red); box-shadow: 0 0 0 3px rgba(208,32,48,.18); }
.focus-meter.ready .fm-fill { background: repeating-linear-gradient(-52deg, var(--red) 0 3px, transparent 3px 7px); }
.focus-meter.ready .fm-tube i { opacity: 1; animation: flame .42s ease-in-out infinite alternate; }
.focus-meter.ready .fm-f2 { margin-left: -18px; height: 16px; animation-delay: .14s; }
.focus-meter.ready .fm-f3 { margin-left: 3px; height: 18px; animation-delay: .27s; }
@keyframes flame { from { transform: translateY(4px) scaleY(.78) rotate(-5deg); } to { transform: translateY(-3px) scaleY(1.15) rotate(6deg); } }
.fm-ready { font-size: 15px; color: var(--red); letter-spacing: 1px; margin-top: 5px; opacity: 0; }
.focus-meter.ready .fm-ready { opacity: 1; animation: blink 1s infinite; }
#hud.nogame .focus-meter { display: none; }
/* map picker */
.mapsel { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--ink); flex-wrap: wrap; }
.mapsel > span { font-size: 20px; opacity: .75; }
.mapbtn { font: inherit; font-size: 20px; color: var(--ink); background: transparent; border: 2.5px solid var(--ink); border-radius: 7px 10px 6px 9px / 10px 6px 9px 7px; padding: 4px 12px; cursor: pointer; opacity: .55; display: flex; flex-direction: column; align-items: center; line-height: 1.1; transform: rotate(-.6deg); }
.mapbtn i { font-style: normal; font-size: 14px; opacity: .75; }
.mapbtn:hover { opacity: .85; }
.mapbtn.on { opacity: 1; color: var(--paper); background: var(--ink); }

/* grenades */
.nades { display: inline-flex; gap: 3px; margin-left: 12px; vertical-align: middle; }
.nades i { width: 13px; height: 15px; border: 2.5px solid var(--ink); border-radius: 50% 50% 45% 45%; display: inline-block; position: relative; top: -2px; }
.nades i::after { content: ''; position: absolute; left: 3px; top: -6px; width: 3px; height: 5px; background: var(--red); }
/* lobby + modes */
.modes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0 4px; }
.modebtn { font: inherit; font-size: 21px; color: var(--ink); background: transparent; border: 2.5px solid var(--ink); border-radius: 7px 10px 6px 9px / 10px 6px 9px 7px; padding: 6px 14px; cursor: pointer; opacity: .6; display: flex; flex-direction: column; align-items: center; line-height: 1.1; transform: rotate(-.5deg); min-width: 130px; }
.modebtn i { font-style: normal; font-size: 14px; opacity: .8; }
.modebtn:hover { opacity: .9; } .modebtn.on { opacity: 1; color: var(--paper); background: var(--ink); }
.lobby { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 8px; }
.lobby .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.lobby input[type=text] { font: inherit; font-size: 24px; width: 130px; text-align: center; letter-spacing: 4px; text-transform: uppercase; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 6px 9px 6px 8px; background: transparent; padding: 3px 6px; }
.lobby button, .bigbtn { font: inherit; font-size: 21px; color: var(--paper); background: var(--ink); border: 2.5px solid var(--ink); border-radius: 7px 10px 6px 9px / 10px 6px 9px 7px; padding: 5px 16px; cursor: pointer; transform: rotate(-.6deg); }
.lobby button.alt { color: var(--ink); background: transparent; }
.lobby button:disabled { opacity: .4; cursor: default; }
.code { font-size: 44px; letter-spacing: 8px; color: var(--red); border: 3px dashed var(--red); padding: 2px 18px; border-radius: 10px; }
.plist { display: flex; flex-direction: column; gap: 3px; min-width: 300px; font-size: 22px; }
.plist div { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1.5px solid rgba(26,48,192,.25); padding: 2px 8px; }
.plist .t0 { color: var(--ink); } .plist .t1 { color: var(--red); } .plist .host::after { content: ' (host)'; opacity: .6; font-size: 16px; }
.status { font-size: 19px; color: var(--red); min-height: 24px; }
.scoreboard { display: flex; flex-direction: column; gap: 4px; font-size: 24px; min-width: 360px; }
.scoreboard div { display: flex; justify-content: space-between; gap: 20px; padding: 2px 10px; border-bottom: 1.5px solid rgba(26,48,192,.25); }
.scoreboard .me { background: rgba(26,48,192,.08); }
.hud-tr .teamscore { font-size: 26px; } .hud-tr .teamscore b { color: var(--red); }
.checkpoints { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; font-size: 19px; }
.checkpoints button { font: inherit; font-size: 19px; color: var(--ink); background: transparent; border: 2px solid var(--ink); border-radius: 6px 8px 5px 7px; padding: 3px 12px; cursor: pointer; }
.checkpoints button:hover { background: var(--ink); color: var(--paper); }
.namebox { font: inherit; font-size: 20px; width: 150px; color: var(--ink); border: 2px solid var(--ink); border-radius: 6px 8px 5px 7px; background: transparent; padding: 2px 8px; }
#hud.pad .kbonly, #hud:not(.pad) .padonly { display: none; }
.tpon { display: none; } #hud.trackpad .tpon { display: block; } #hud.trackpad .tpoff { display: none; }

/* ---- HAKROS RENDERKILL main logo ---- */
.brand-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .035em;
  margin: 0 0 4px !important;
  line-height: .8 !important;
  text-transform: uppercase;
  font-family: "Arial Black", "Segoe UI Black", Impact, sans-serif;
  transform: none;
  filter: drop-shadow(.025em .035em 0 rgba(0,0,0,.24));
}
.brand-logo .brand-hakros {
  display: block;
  margin-left: .18em;
  font-size: .34em;
  line-height: 1;
  letter-spacing: .42em;
  font-weight: 900;
  color: var(--ink);
}
.brand-logo .brand-renderkill {
  display: block;
  position: relative;
  isolation: isolate;
  padding: .10em .24em .12em .27em;
  font-size: .78em;
  line-height: .82;
  letter-spacing: .055em;
  font-weight: 1000;
  color: var(--paper);
  background:
    linear-gradient(116deg, transparent 0 17%, rgba(255,255,255,.11) 17.5% 19%, transparent 19.5% 58%, rgba(255,255,255,.09) 58.5% 60%, transparent 60.5%),
    var(--ink);
  border-left: 0;
  border-top: .025em solid color-mix(in srgb, var(--ink) 76%, #fff);
  border-bottom: .025em solid color-mix(in srgb, var(--ink) 76%, #000);
  clip-path: polygon(2.4% 0, 100% 0, 96.8% 100%, 0 100%);
  text-shadow: .018em .022em 0 rgba(0,0,0,.24);
  box-shadow: .025em .035em 0 rgba(0,0,0,.20);
}
.brand-logo .brand-renderkill::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 9%;
  right: 5%;
  top: 48%;
  height: .045em;
  background: currentColor;
  opacity: .14;
  transform: skewX(-24deg);
  pointer-events: none;
}
.brand-logo .brand-renderkill::after { content: none; }
html[data-visual-style="bunker"] .brand-logo .brand-hakros { color: #d7dacb; }
html[data-visual-style="bunker"] .brand-logo .brand-renderkill {
  color: #11140f;
  background:
    linear-gradient(116deg, transparent 0 17%, rgba(17,20,15,.10) 17.5% 19%, transparent 19.5% 58%, rgba(17,20,15,.08) 58.5% 60%, transparent 60.5%),
    #d7dacb;
  border-left-color: #d84834;
  border-top-color: #eef0e8;
  border-bottom-color: #6e7468;
  box-shadow: .025em .035em 0 rgba(0,0,0,.30);
  text-shadow: none;
}
html[data-visual-style="papercraft"] .brand-logo .brand-renderkill {
  background: #b64f3b;
  border-left-color: #6e2f25;
  color: #fff8e8;
  box-shadow: .025em .035em 0 #d1b996, .045em .055em 0 rgba(74,51,34,.18);
}
html[data-visual-style="papercraft"] .brand-logo .brand-hakros { color: #493426; }
@media (max-width: 900px) {
  .brand-logo .brand-renderkill { font-size: .72em; }
}

/* ---- main menu, online panel, scoreboard overlay ---- */
.mainbtns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 14px 0 8px;
}
.mainbtns button {
  box-sizing: border-box;
  width: min(490px, 92vw);
  min-width: 0;
  max-width: 490px;
  margin: 0;
  font: inherit;
  font-size: 30px;
  color: var(--paper);
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 9px 13px 8px 12px / 12px 8px 11px 9px;
  padding: 10px 24px 9px;
  cursor: pointer;
  transform: none;
  line-height: 1.05;
}
.mainbtns button i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 14px;
  opacity: .8;
  letter-spacing: 1px;
}
.mainbtns button:hover:not(:disabled) { filter: brightness(1.15); transform: scale(1.02); }
.mainbtns button:disabled { opacity: .45; cursor: default; }
.mainbtns button.start { font-size: 30px; padding: 10px 24px 9px; border-width: 3px; box-shadow: none; }
.mainbtns button.start i { font-size: 14px; margin-top: 3px; }
.mainbtns button.start:hover:not(:disabled) { transform: scale(1.02); }
.online { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 6px; }
.online .sub { font-size: 19px; opacity: .75; }
.online .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.online .row.split { gap: 26px; }
.online button { font: inherit; font-size: 22px; color: var(--paper); background: var(--ink); border: 2.5px solid var(--ink); border-radius: 7px 10px 6px 9px / 10px 6px 9px 7px; padding: 6px 18px; cursor: pointer; }
.online button.alt { color: var(--ink); background: transparent; }
.online button.big { font-size: 26px; padding: 8px 26px; transform: rotate(-.6deg); }
.online button:disabled { opacity: .4; cursor: default; }
.online button:hover:not(:disabled) { filter: brightness(1.15); }
.online input[type=text] { font: inherit; font-size: 26px; width: 150px; text-align: center; letter-spacing: 5px; text-transform: uppercase; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 6px 9px 6px 8px; background: transparent; padding: 3px 6px; }
.online input.namebox { letter-spacing: 0; text-transform: none; font-size: 22px; width: 180px; }
.online .radio { display: flex; gap: 14px; font-size: 19px; }
.online .radio label { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.online .status { min-height: 26px; font-size: 20px; color: var(--red); }
.online .hint { font-size: 17px; opacity: .7; max-width: 520px; text-align: center; }
.online .code { font-size: 52px; letter-spacing: 10px; }
.online .plist { min-width: 340px; }
.online .plist .host span:first-child::after { content: ' · host'; opacity: .6; font-size: 16px; }
.online .plist .me { background: rgba(26,48,192,.08); }
.board { position: absolute; left: 50%; top: 18%; transform: translateX(-50%) rotate(-.5deg); background: rgba(250,247,238,.94); border: 3px solid var(--ink); border-radius: 12px 16px 10px 14px / 14px 10px 16px 12px; padding: 12px 22px; min-width: 380px; font-size: 24px; color: var(--ink); z-index: 5; }
.board h3 { margin: 0 0 6px; font-size: 30px; text-align: center; letter-spacing: 2px; }
.board div { display: flex; justify-content: space-between; gap: 24px; padding: 2px 8px; border-bottom: 1.5px solid rgba(26,48,192,.25); }
.board div.me { background: rgba(26,48,192,.1); }
.board .foot { font-size: 16px; opacity: .7; justify-content: center; border: 0; margin-top: 6px; }
.feed { color: var(--red); }

/* live mini leaderboard in the corner during online play */
.pvpscore { font-size: 20px; line-height: 1.2; text-align: right; }
.pvpscore .row { display: flex; justify-content: flex-end; gap: 10px; }
.pvpscore .row b { min-width: 28px; text-align: right; }
.pvpscore .row.me { color: var(--red); }
.pvpscore .row .rank { opacity: .6; }
.pvpscore .target { font-size: 15px; opacity: .65; margin-top: 2px; }

/* grapple breath: a sliver under the crosshair, only while it is not full */
.gstam { position: absolute; left: 50%; top: 50%; width: 64px; height: 5px; margin-left: -32px; margin-top: 26px; border: 1.5px solid var(--ink); border-radius: 3px; opacity: .8; mix-blend-mode: multiply; }
.gstam i { display: block; height: 100%; background: var(--ink); }
.gstam.low { border-color: var(--red); } .gstam.low i { background: var(--red); }

/* public lobby list on the online panel */
.lobbylist { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; max-width: 560px; margin-top: 4px; padding-top: 8px; border-top: 1.5px dashed rgba(26,48,192,.35); }
.lobbylist .rows { display: flex; flex-direction: column; gap: 4px; width: 100%; max-height: 200px; overflow-y: auto; padding-right: 4px; }
.lobbyrow { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 12px; align-items: center; font-size: 19px; padding: 3px 8px; border-bottom: 1.5px solid rgba(26,48,192,.2); }
.lobbyrow .code { font-size: 22px; letter-spacing: 3px; padding: 0 8px; border-width: 2px; }
.lobbyrow button { font-size: 18px; padding: 3px 12px; }
.lobbyrow .full { color: var(--red); font-size: 18px; letter-spacing: 1px; border: 2px dashed var(--red); border-radius: 6px; padding: 0 8px; }

/* the code box on the main menu */

/* Offline fallback: the original deployment fetched Patrick Hand/Caveat from Google Fonts. */
html, body {
  font-family: "Comic Sans MS", "Segoe Print", "Marker Felt", cursive;
}

/* Quake MAP importer */
.quakeimport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 14px}.quakeimport button{min-width:220px}.quakeimport button i{display:block;font-size:.72em;opacity:.72;font-style:normal;margin-top:3px}.quakeinfo{font-size:.82em;opacity:.72;max-width:540px;word-break:break-word}.quakeimport button:disabled{opacity:.45;cursor:not-allowed}


/* ================================================================
   QUAKE MAP LOADING OVERLAY
   ================================================================ */
html.quake-loading,
html.quake-loading body {
  cursor: wait !important;
}

.quake-load-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(20, 24, 38, .64);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  user-select: none;
  touch-action: none;
}

.quake-load-overlay.show {
  display: flex;
}

.quake-load-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(680px, calc(100vw - 48px));
  min-height: 250px;
  overflow: hidden;
  padding: 30px 34px 26px;
  color: var(--ink);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.94) 0,
      rgba(255,255,255,.94) 31px,
      rgba(88,139,226,.19) 32px,
      rgba(255,255,255,.94) 33px
    ),
    #faf7ee;
  border: 4px solid var(--ink);
  border-radius: 14px 19px 13px 17px / 18px 13px 19px 14px;
  box-shadow: 10px 12px 0 rgba(0,0,0,.25);
  transform: rotate(-.35deg);
}

.quake-load-dialog::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(220,49,54,.35);
}

.quake-load-dialog h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  text-align: center;
  font: inherit;
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--ink);
  transform: rotate(.4deg);
}

.quake-load-stage {
  position: relative;
  z-index: 1;
  min-height: 32px;
  margin: 12px 0 12px;
  text-align: center;
  font-size: clamp(21px, 2.5vw, 29px);
  color: var(--red);
}

.quake-load-bar {
  position: relative;
  z-index: 1;
  height: 28px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 8px 12px 7px 10px / 10px 7px 12px 8px;
  background: rgba(255,255,255,.65);
  transform: rotate(.15deg);
}

.quake-load-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background:
    repeating-linear-gradient(
      120deg,
      var(--ink) 0 9px,
      rgba(26,48,192,.78) 9px 16px
    );
  transition: width .22s ease-out;
}

.quake-load-shine {
  position: absolute;
  top: -10px;
  bottom: -10px;
  width: 80px;
  opacity: 0;
  background: rgba(255,255,255,.42);
  transform: translateX(-130px) skewX(-18deg);
  pointer-events: none;
}

.quake-load-overlay.busy .quake-load-shine {
  opacity: 1;
  animation: quakeLoadSweep 1.05s linear infinite;
}

@keyframes quakeLoadSweep {
  from { transform: translateX(-130px) skewX(-18deg); }
  to   { transform: translateX(760px) skewX(-18deg); }
}

.quake-load-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  gap: 18px;
  margin-top: 11px;
  font-size: 17px;
}

.quake-load-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .8;
}

.quake-load-percent {
  flex: 0 0 auto;
  min-width: 58px;
  text-align: right;
  font-size: 23px;
  color: var(--red);
}

.quake-load-note {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  text-align: center;
  font-size: 16px;
  opacity: .62;
}

.quake-load-scribble {
  position: absolute;
  z-index: 0;
  width: 64px;
  height: 64px;
  border: 3px solid rgba(220,49,54,.45);
  border-radius: 50% 45% 54% 42%;
  pointer-events: none;
}

.quake-load-scribble-a {
  right: -22px;
  top: 28px;
  transform: rotate(22deg);
}

.quake-load-scribble-b {
  left: -26px;
  bottom: 14px;
  width: 52px;
  height: 52px;
  border-color: rgba(26,48,192,.32);
  transform: rotate(-18deg);
}

.quake-load-overlay.error .quake-load-dialog {
  border-color: var(--red);
}

.quake-load-overlay.error .quake-load-fill {
  background: var(--red);
}


/* WebXR / VR main-menu option */
.mainbtns .vrbtn {
  border-color: var(--ink);
  background: var(--ink);
}
.mainbtns .vrbtn:disabled {
  opacity: .48;
  cursor: not-allowed;
}
.mainbtns .vrbtn i {
  max-width: 260px;
}


/* FPS counter */
#fpsCounter,
#versionCounter,
#visualStyleCounter {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 99999;
  pointer-events: none;
  user-select: none;
  padding: 3px 7px 2px;
  color: var(--ink);
  background: rgba(247, 243, 229, .72);
  border: 2px solid rgba(31, 36, 53, .75);
  border-radius: 7px 9px 6px 8px / 8px 6px 9px 7px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .12);
  font: inherit;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: .5px;
  transform: rotate(-.5deg);
  opacity: .9;
}
html.rk-fps-off #fpsCounter { display: none !important; }
html.rk-fps-large #fpsCounter {
  transform: rotate(-.5deg) scale(2);
  transform-origin: top left;
}

/* Visual-style change notice: exactly the FPS badge skin, centered at the top. */
#visualStyleCounter {
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(-.5deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;
  white-space: nowrap;
}
#visualStyleCounter.show {
  opacity: .9;
  visibility: visible;
}

/* Release version badge: update window.RENDERKILL_VERSION in index.html on every ZIP delivery.
   It intentionally reuses the exact FPS counter skin; only its position/visibility differ. */
#versionCounter {
  left: auto;
  right: 12px;
  display: none;
}
html.rk-main-menu-version #versionCounter { display: block; }

/* ================================================================
   PREDEFINED MAP SELECTOR
   ================================================================ */
.mapsel.mapsel-single {
  border-top: 0;
  margin-top: 10px;
  padding-top: 0;
}
.mapselectbtn {
  min-width: 330px;
  max-width: min(620px, 92vw);
  font: inherit;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
  background: rgba(246,243,230,.74);
  border: 3px solid var(--ink);
  border-radius: 9px 13px 8px 12px / 12px 8px 11px 9px;
  padding: 9px 24px 8px;
  cursor: pointer;
  transform: rotate(.25deg);
}
.mapselectbtn i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 15px;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapselectbtn:hover:not(:disabled) { transform: rotate(.25deg) scale(1.025); }
.mapselectbtn:disabled { opacity: .45; cursor: default; }

html.map-dialog-open { overflow: hidden; }
.map-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(21,24,34,.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: default;
}
.map-dialog {
  position: relative;
  width: min(920px, calc(100vw - 44px));
  max-height: min(760px, calc(100vh - 44px));
  overflow: auto;
  box-sizing: border-box;
  padding: 24px 28px 20px 44px;
  color: var(--ink);
  background:
    repeating-linear-gradient(to bottom,
      rgba(248,245,233,.98) 0,
      rgba(248,245,233,.98) 31px,
      rgba(90,138,220,.18) 32px,
      rgba(248,245,233,.98) 33px),
    var(--paper);
  border: 4px solid var(--ink);
  border-radius: 14px 19px 13px 17px / 18px 13px 19px 14px;
  box-shadow: 10px 12px 0 rgba(0,0,0,.24);
  transform: rotate(-.15deg);
}
.map-dialog::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(215,45,55,.33);
}
.map-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.map-dialog-head h2 { margin: 0; font-size: clamp(36px,5vw,56px); line-height: .95; }
.map-dialog-head p { margin: 8px 0 0; font-size: 18px; opacity: .65; }
.map-dialog-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0 0 5px;
  font: inherit;
  font-size: 36px;
  line-height: 1;
  color: var(--red);
  background: transparent;
  border: 3px solid var(--red);
  border-radius: 50% 45% 52% 47%;
  cursor: pointer;
}
.map-dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.map-dialog-card {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  padding: 16px 18px 14px 56px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: rgba(255,255,255,.48);
  border: 3px solid var(--ink);
  border-radius: 8px 12px 7px 10px / 11px 7px 12px 8px;
  cursor: pointer;
  transform: rotate(-.18deg);
}
.map-dialog-card:nth-child(even) { transform: rotate(.22deg); }
.map-dialog-card:hover { background: rgba(255,255,255,.84); transform: scale(1.015); }
.map-dialog-card.selected { color: var(--paper); background: var(--ink); }
.map-dialog-card strong { display: block; font-size: 25px; line-height: 1; }
.map-dialog-card i { display: block; margin-top: 8px; font-style: normal; font-size: 16px; opacity: .75; }
.map-dialog-card em { display: inline-block; margin-top: 11px; font-style: normal; font-size: 13px; letter-spacing: 1px; color: var(--red); }
.map-dialog-card.selected em { color: var(--paper); opacity: .72; }
.map-card-number {
  position: absolute;
  left: 13px;
  top: 13px;
  font-size: 27px;
  opacity: .28;
}
.map-dialog-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.map-dialog-actions button {
  font: inherit;
  font-size: 20px;
  color: var(--ink);
  background: transparent;
  border: 2.5px solid var(--ink);
  border-radius: 7px 10px 6px 9px;
  padding: 6px 20px;
  cursor: pointer;
}
.map-dialog--preview {
  width: min(1240px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 28px));
}
.map-dialog-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .78fr);
  gap: 14px;
  height: min(535px, calc(100vh - 245px));
  min-height: 390px;
  align-items: stretch;
}
/* The panel is painted like an unselected .map-dialog-card. These are the
   hand-drawn defaults; the live theme skin is copied onto it at runtime
   (see syncPreviewSkin in hakros-renderkill-map-dialog.js) so every visual style matches. */
.map-preview-panel {
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: rgba(255,255,255,.48);
  border: 3px solid var(--ink);
  border-radius: 8px 12px 7px 10px / 11px 7px 12px 8px;
}
.map-preview-skin-probe {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 220px !important;
  height: 90px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
}
.map-preview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 10px 12px 8px;
  /* The head shares the panel skin (copied from an unselected map card),
     so it only needs a subtle separator drawn with the inherited colour. */
  background: transparent;
  border-bottom: 2px solid color-mix(in srgb, currentColor 34%, transparent);
}
.map-preview-head strong { display:block; font-size: 17px; line-height: 1; }
.map-preview-head small { display:block; margin-top: 4px; font-size: 12px; opacity: .66; }
.map-preview-name { font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.map-preview-stage {
  position: relative;
  flex: 1 1 auto;
  width: calc(100% - 24px);
  min-height: 0;
  margin: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 35%, #8090a0 65%);
  border: 2px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 6px 8px 5px 7px;
}
.map-preview-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.map-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: .72;
  pointer-events: none;
}
.map-dialog-grid.map-dialog-grid-compact {
  gap: 10px;
}
.map-dialog-list-scroll {
  grid-template-columns: 1fr !important;
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 7px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, var(--ink)) var(--scrollbar-track, transparent);
}
.map-dialog-list-scroll::-webkit-scrollbar { width: 10px; }
.map-dialog-list-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track, transparent); }
.map-dialog-list-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, var(--ink));
  border: 2px solid var(--scrollbar-track, transparent);
  border-radius: 999px;
}
.map-dialog-grid.map-dialog-grid-compact .map-dialog-card {
  display: block;
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  padding: 10px 14px 10px 50px;
}
.map-dialog-grid.map-dialog-grid-compact .map-dialog-card strong {
  font-size: 22px;
  line-height: 1.05;
}
.map-dialog-grid.map-dialog-grid-compact .map-dialog-card i {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.map-dialog-actions.map-dialog-actions-split {
  justify-content: space-between;
  gap: 12px;
}
.map-dialog-actions.map-dialog-actions-split button:last-child {
  min-width: 178px;
}
@media (max-width: 980px) {
  .map-dialog--preview { width: min(960px, calc(100vw - 24px)); }
  .map-dialog-main-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr);
    height: min(500px, calc(100vh - 235px));
  }
}
@media (max-width: 760px) {
  .map-dialog-main-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .map-preview-panel { flex: 0 0 auto; }
  .map-preview-stage { aspect-ratio: 16 / 9; flex: none; }
  .map-dialog-list-scroll { max-height: 310px; }
  .map-preview-head { flex-direction: column; align-items: flex-start; }
  .map-dialog-actions.map-dialog-actions-split { flex-direction: column; }
  .map-dialog-actions.map-dialog-actions-split button { width: 100%; }
}
@media (max-width: 720px) {
  .map-dialog-grid { grid-template-columns: 1fr; }
  .map-dialog { padding-left: 38px; }
}


/* ================================================================
   CLEAN MAIN MENU ACTIONS
   ================================================================ */
.menu-action-stack {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 10px 0 8px !important;
}

.menu-action-stack .menu-action-btn {
  box-sizing: border-box;
  width: min(490px, 92vw);
  min-width: 0;
  max-width: 490px;
  margin: 0;
  padding: 9px 24px 8px;
  font-size: 26px;
  text-align: center;
  transform: none;
}

.menu-action-stack .menu-action-btn:hover:not(:disabled) {
  transform: scale(1.02);
}

.menu-action-stack .menu-action-btn i {
  margin-top: 3px;
  font-size: 14px;
}

/* Old Quake-import block is intentionally no longer used. */
.quakeimport,
.quakeinfo {
  display: none !important;
}

/* ================================================================
   SETTINGS: SINGLE ROW WITH VERTICAL SEPARATORS
   ================================================================ */
.settings {
  flex-direction: row !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0 !important;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 4px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 17px !important;
  scrollbar-width: thin;
}

.settings label {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 13px;
  gap: 6px !important;
}

.settings label + label {
  border-left: 2px solid rgba(26,48,192,.55);
}

.settings input[type=range] {
  width: 145px !important;
}

.settings .k {
  font-size: 13px !important;
}

/* ================================================================
   HELP DIALOG
   ================================================================ */
html.help-dialog-open {
  overflow: hidden;
}

.help-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 125000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(21,24,34,.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.help-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(1040px, calc(100vw - 42px));
  max-height: min(820px, calc(100vh - 42px));
  overflow: auto;
  padding: 24px 30px 22px 46px;
  color: var(--ink);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(248,245,233,.98) 0,
      rgba(248,245,233,.98) 31px,
      rgba(90,138,220,.18) 32px,
      rgba(248,245,233,.98) 33px
    ),
    var(--paper);
  border: 4px solid var(--ink);
  border-radius: 14px 19px 13px 17px / 18px 13px 19px 14px;
  box-shadow: 10px 12px 0 rgba(0,0,0,.24);
  transform: rotate(-.1deg);
}

.help-dialog::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(215,45,55,.33);
}

.help-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.help-dialog-head h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 58px);
  line-height: .95;
}

.help-dialog-head p {
  margin: 7px 0 0;
  font-size: 18px;
  opacity: .62;
}

.help-dialog-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(248,245,233,.9);
  font: inherit;
  font-size: 32px;
  line-height: 34px;
  cursor: pointer;
}

.help-dialog-content {
  position: relative;
  z-index: 1;
}

.help-dialog-content .cols {
  display: flex;
  gap: 42px;
  justify-content: center;
  text-align: left;
  font-size: 20px;
  line-height: 1.35;
}

.help-dialog-content .cols > div {
  flex: 1 1 0;
  min-width: 0;
}

.help-dialog-content .cols b {
  color: var(--red);
}

.help-dialog-content .colhead {
  font-size: 26px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 6px;
}

.help-dialog-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.help-dialog-actions button {
  min-width: 160px;
  font: inherit;
  font-size: 20px;
  color: var(--ink);
  background: rgba(248,245,233,.92);
  border: 3px solid var(--ink);
  border-radius: 8px 11px 7px 10px;
  padding: 7px 20px;
  cursor: pointer;
}

@media (max-width: 800px) {
  .help-dialog-content .cols {
    flex-direction: column;
    gap: 18px;
    font-size: 17px;
  }

  .settings {
    justify-content: flex-start;
  }
}


/* Original / file-based weapon sound selector */
.settings .sfx-setting {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.settings #setSfx {
  appearance: auto;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: rgba(248,245,233,.9);
  border: 2px solid rgba(26,48,192,.65);
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
}


/* ================================================================
   SETTINGS - TWO ROW LAYOUT
   ================================================================ */
.settings {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
  overflow: visible !important;
  padding: 10px 4px 2px;
}

.settings .settings-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
}

.settings .settings-row label {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 14px;
}

.settings .settings-row label + label {
  border-left: 2px solid rgba(26,48,192,.55);
}

.settings .settings-row-secondary {
  min-height: 30px;
}

@media (max-width: 820px) {
  .settings .settings-row {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
}


/* ==================================================================
   GLOBAL VISUAL STYLES - PHASE 1
   ================================================================== */
.settings #setVisual {
  appearance: auto;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: rgba(248,245,233,.9);
  border: 2px solid currentColor;
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
}

html[data-visual-style] body,
html[data-visual-style] #hud,
html[data-visual-style] .panel,
html[data-visual-style] .board,
html[data-visual-style] .map-dialog,
html[data-visual-style] .help-dialog,
html[data-visual-style] .quake-load-dialog {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, filter .18s ease;
}

/* ---------------- TERMINAL GREEN ---------------- */
html[data-visual-style="terminal"] {
  --ink: #53ff78;
  --red: #baff5f;
  --paper: #020904;
}
html[data-visual-style="terminal"] body {
  background: #010503;
  font-family: "Lucida Console", "Courier New", monospace;
}
html[data-visual-style="terminal"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150000;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(83,255,120,.035) 0,
      rgba(83,255,120,.035) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.40) 100%);
  mix-blend-mode: screen;
}
html[data-visual-style="terminal"] #hud,
html[data-visual-style="terminal"] .hud-tl,
html[data-visual-style="terminal"] .hud-tr,
html[data-visual-style="terminal"] .hud-bl,
html[data-visual-style="terminal"] .hud-br,
html[data-visual-style="terminal"] .crosshair,
html[data-visual-style="terminal"] .message,
html[data-visual-style="terminal"] .killfeed,
html[data-visual-style="terminal"] .tip,
html[data-visual-style="terminal"] .bossbar {
  mix-blend-mode: normal !important;
  text-shadow: 0 0 7px rgba(83,255,120,.70);
}
html[data-visual-style="terminal"] .screen {
  background: rgba(0,8,2,.82);
}
html[data-visual-style="terminal"] .panel,
html[data-visual-style="terminal"] .board,
html[data-visual-style="terminal"] .map-dialog,
html[data-visual-style="terminal"] .help-dialog,
html[data-visual-style="terminal"] .quake-load-dialog {
  color: #53ff78;
  background: rgba(1,12,4,.96) !important;
  border-color: #53ff78 !important;
  border-radius: 2px !important;
  box-shadow: 0 0 24px rgba(83,255,120,.28), inset 0 0 28px rgba(83,255,120,.05) !important;
  transform: none !important;
}
html[data-visual-style="terminal"] .panel::before,
html[data-visual-style="terminal"] .map-dialog::before,
html[data-visual-style="terminal"] .help-dialog::before,
html[data-visual-style="terminal"] .quake-load-dialog::before {
  background: #53ff78 !important;
  opacity: .18;
}
html[data-visual-style="terminal"] button,
html[data-visual-style="terminal"] input,
html[data-visual-style="terminal"] select {
  font-family: inherit !important;
  color: #53ff78 !important;
  background: #010b04 !important;
  border-color: #53ff78 !important;
  border-radius: 1px !important;
  box-shadow: 0 0 8px rgba(83,255,120,.16);
}
html[data-visual-style="terminal"] button:hover:not(:disabled) {
  color: #001904 !important;
  background: #53ff78 !important;
  filter: none !important;
}
html[data-visual-style="terminal"] .fill,
html[data-visual-style="terminal"] .gstam i {
  background: #53ff78 !important;
}
html[data-visual-style="terminal"] .quake-load-fill {
  background: repeating-linear-gradient(90deg,#53ff78 0 10px,#163f21 10px 14px) !important;
}
html[data-visual-style="terminal"] #fpsCounter,
html[data-visual-style="terminal"] #versionCounter {
  color: #53ff78;
  background: #010804;
  border-color: #53ff78;
  border-radius: 1px;
  box-shadow: 0 0 9px rgba(83,255,120,.35);
  font-family: "Lucida Console","Courier New",monospace;
}

/* ---------------- TRON NEON ---------------- */
html[data-visual-style="tron"] {
  --ink: #00eaff;
  --red: #ff2aa8;
  --paper: #030518;
}
html[data-visual-style="tron"] body {
  background: #01020a;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}
html[data-visual-style="tron"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(rgba(0,234,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,234,255,.055) 1px, transparent 1px);
  background-size: 38px 38px;
}
html[data-visual-style="tron"] .screen {
  background: rgba(1,2,10,.78);
}
html[data-visual-style="tron"] #hud {
  text-shadow: 0 0 8px rgba(0,234,255,.65);
}
html[data-visual-style="tron"] .hud-tl,
html[data-visual-style="tron"] .hud-tr,
html[data-visual-style="tron"] .hud-bl,
html[data-visual-style="tron"] .hud-br,
html[data-visual-style="tron"] .crosshair,
html[data-visual-style="tron"] .message,
html[data-visual-style="tron"] .killfeed,
html[data-visual-style="tron"] .tip {
  mix-blend-mode: normal !important;
}
html[data-visual-style="tron"] .panel,
html[data-visual-style="tron"] .board,
html[data-visual-style="tron"] .map-dialog,
html[data-visual-style="tron"] .help-dialog,
html[data-visual-style="tron"] .quake-load-dialog {
  color: #00eaff;
  background:
    linear-gradient(135deg, rgba(4,9,30,.97), rgba(2,3,15,.97)) !important;
  border: 2px solid #00eaff !important;
  border-radius: 2px 16px 2px 16px !important;
  box-shadow: 0 0 20px rgba(0,234,255,.28), inset 0 0 24px rgba(0,234,255,.05) !important;
  transform: none !important;
}
html[data-visual-style="tron"] button,
html[data-visual-style="tron"] input,
html[data-visual-style="tron"] select {
  color: #00eaff !important;
  background: rgba(1,5,20,.96) !important;
  border-color: #00eaff !important;
  border-radius: 2px 10px 2px 10px !important;
  box-shadow: 0 0 10px rgba(0,234,255,.18);
}
html[data-visual-style="tron"] button:nth-child(even),
html[data-visual-style="tron"] .low,
html[data-visual-style="tron"] .pts,
html[data-visual-style="tron"] .timer {
  --ink: #ff2aa8;
}
html[data-visual-style="tron"] button:hover:not(:disabled) {
  color: #020414 !important;
  background: #00eaff !important;
  box-shadow: 0 0 18px rgba(0,234,255,.75);
  filter: none !important;
}
html[data-visual-style="tron"] .quake-load-fill {
  background: linear-gradient(90deg,#00eaff,#5c35ff,#ff2aa8) !important;
  box-shadow: 0 0 18px #00eaff;
}
html[data-visual-style="tron"] #fpsCounter,
html[data-visual-style="tron"] #versionCounter {
  color: #00eaff;
  background: rgba(1,4,18,.88);
  border-color: #00eaff;
  box-shadow: 0 0 12px rgba(0,234,255,.42);
  font-family: "Trebuchet MS","Segoe UI",sans-serif;
}

/* ---------------- FLAT COLORS ---------------- */
html[data-visual-style="flat"] {
  --ink: #172033;
  --red: #eb3349;
  --paper: #f2f5f8;
}
html[data-visual-style="flat"] body {
  background: #e7eef7;
  font-family: Arial, "Segoe UI", sans-serif;
}
html[data-visual-style="flat"] .screen {
  background: rgba(229,237,246,.74);
}
html[data-visual-style="flat"] .panel,
html[data-visual-style="flat"] .board,
html[data-visual-style="flat"] .map-dialog,
html[data-visual-style="flat"] .help-dialog,
html[data-visual-style="flat"] .quake-load-dialog {
  color: #172033;
  background: rgba(255,255,255,.97) !important;
  border: 2px solid #172033 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(23,32,51,.13) !important;
  transform: none !important;
}
html[data-visual-style="flat"] .panel::before,
html[data-visual-style="flat"] .map-dialog::before,
html[data-visual-style="flat"] .help-dialog::before,
html[data-visual-style="flat"] .quake-load-dialog::before {
  display: none !important;
}
html[data-visual-style="flat"] button,
html[data-visual-style="flat"] input,
html[data-visual-style="flat"] select {
  font-family: inherit !important;
  border-radius: 7px !important;
  transform: none !important;
  box-shadow: none !important;
}
html[data-visual-style="flat"] button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
}
html[data-visual-style="flat"] .hud-tl,
html[data-visual-style="flat"] .hud-tr,
html[data-visual-style="flat"] .hud-bl,
html[data-visual-style="flat"] .hud-br,
html[data-visual-style="flat"] .crosshair,
html[data-visual-style="flat"] .message,
html[data-visual-style="flat"] .killfeed,
html[data-visual-style="flat"] .tip {
  mix-blend-mode: normal !important;
}
html[data-visual-style="flat"] .fill {
  background: var(--ink) !important;
}
html[data-visual-style="flat"] .quake-load-fill {
  background: linear-gradient(90deg,#2875f0,#eb3349) !important;
}
html[data-visual-style="flat"] #fpsCounter,
html[data-visual-style="flat"] #versionCounter {
  font-family: Arial,"Segoe UI",sans-serif;
  background: rgba(255,255,255,.90);
  border: 1px solid #172033;
  border-radius: 6px;
  transform: none;
}

/* ---------------- BLUEPRINT ---------------- */
html[data-visual-style="blueprint"] {
  --ink: #bff6ff;
  --red: #ffffff;
  --paper: #071c3b;
}
html[data-visual-style="blueprint"] body {
  background-color: #061a35;
  background-image:
    linear-gradient(rgba(159,231,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,231,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(159,231,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,231,255,.035) 1px, transparent 1px);
  background-size: 64px 64px,64px 64px,16px 16px,16px 16px;
  font-family: "Lucida Console","Courier New",monospace;
}
html[data-visual-style="blueprint"] .screen {
  background: rgba(5,24,53,.76);
}
html[data-visual-style="blueprint"] #hud {
  text-shadow: 0 0 5px rgba(191,246,255,.28);
}
html[data-visual-style="blueprint"] .hud-tl,
html[data-visual-style="blueprint"] .hud-tr,
html[data-visual-style="blueprint"] .hud-bl,
html[data-visual-style="blueprint"] .hud-br,
html[data-visual-style="blueprint"] .crosshair,
html[data-visual-style="blueprint"] .message,
html[data-visual-style="blueprint"] .killfeed,
html[data-visual-style="blueprint"] .tip {
  mix-blend-mode: normal !important;
}
html[data-visual-style="blueprint"] .panel,
html[data-visual-style="blueprint"] .board,
html[data-visual-style="blueprint"] .map-dialog,
html[data-visual-style="blueprint"] .help-dialog,
html[data-visual-style="blueprint"] .quake-load-dialog {
  color: #bff6ff;
  background:
    linear-gradient(rgba(159,231,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,231,255,.055) 1px, transparent 1px),
    rgba(6,28,60,.97) !important;
  background-size: 18px 18px !important;
  border: 2px solid #bff6ff !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(191,246,255,.18), 0 0 18px rgba(100,220,255,.18) !important;
  transform: none !important;
}
html[data-visual-style="blueprint"] button,
html[data-visual-style="blueprint"] input,
html[data-visual-style="blueprint"] select {
  font-family: inherit !important;
  color: #bff6ff !important;
  background: rgba(4,21,47,.95) !important;
  border-color: #bff6ff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-visual-style="blueprint"] button:hover:not(:disabled) {
  color: #061a35 !important;
  background: #bff6ff !important;
  filter: none !important;
}
html[data-visual-style="blueprint"] .quake-load-fill {
  background:
    repeating-linear-gradient(
      135deg,
      #bff6ff 0 7px,
      #3ca8cf 7px 11px
    ) !important;
}
html[data-visual-style="blueprint"] #fpsCounter,
html[data-visual-style="blueprint"] #versionCounter {
  color: #bff6ff;
  background: rgba(4,21,47,.88);
  border-color: #bff6ff;
  border-radius: 0;
  box-shadow: none;
  font-family: "Lucida Console","Courier New",monospace;
}


/* Non-hand functional color accents. HAND-DRAWN PEN is intentionally untouched. */
html[data-visual-style="terminal"] .low,
html[data-visual-style="terminal"] .danger,
html[data-visual-style="terminal"] .killfeed b,
html[data-visual-style="terminal"] .bossbar b {
  color: #ff4728 !important;
  text-shadow: 0 0 7px rgba(255,71,40,.58);
}
html[data-visual-style="terminal"] .pts,
html[data-visual-style="terminal"] .timer,
html[data-visual-style="terminal"] .map-card-number { color: #ffc84a !important; }

html[data-visual-style="tron"] .low,
html[data-visual-style="tron"] .danger,
html[data-visual-style="tron"] .killfeed b {
  color: #ff168f !important;
  text-shadow: 0 0 9px rgba(255,22,143,.72);
}
html[data-visual-style="tron"] .pts,
html[data-visual-style="tron"] .timer,
html[data-visual-style="tron"] .map-card-number {
  color: #ffe13a !important;
  text-shadow: 0 0 8px rgba(255,225,58,.50);
}
html[data-visual-style="tron"] .selected {
  color: #a86cff !important;
  border-color: #a86cff !important;
}

html[data-visual-style="flat"] .low,
html[data-visual-style="flat"] .danger,
html[data-visual-style="flat"] .killfeed b { color: #ef233c !important; }
html[data-visual-style="flat"] .pts,
html[data-visual-style="flat"] .timer,
html[data-visual-style="flat"] .map-card-number { color: #e58b00 !important; }
html[data-visual-style="flat"] .selected {
  color: #6f2dbd !important;
  border-color: #6f2dbd !important;
}

html[data-visual-style="blueprint"] .low,
html[data-visual-style="blueprint"] .danger,
html[data-visual-style="blueprint"] .killfeed b {
  color: #ff6b35 !important;
  text-shadow: 0 0 6px rgba(255,107,53,.34);
}
html[data-visual-style="blueprint"] .pts,
html[data-visual-style="blueprint"] .timer,
html[data-visual-style="blueprint"] .map-card-number { color: #ffe36e !important; }
html[data-visual-style="blueprint"] .selected {
  color: #72ffbf !important;
  border-color: #72ffbf !important;
}


/* ==================================================================
   GLOBAL VISUAL STYLES - PHASE 2
   PAPercraft / Manga B&W / Brutalist Digital / Synthwave VHS
   ================================================================== */

/* ---------------- PAPERCRAFT ---------------- */
html[data-visual-style="papercraft"] {
  --ink: #3f3026;
  --red: #c94132;
  --paper: #d8c9ad;
}
html[data-visual-style="papercraft"] body {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.24), transparent 28%),
    repeating-linear-gradient(0deg, rgba(76,54,36,.025) 0 1px, transparent 1px 5px),
    #d6c6aa;
  font-family: Georgia, "Trebuchet MS", sans-serif;
}
html[data-visual-style="papercraft"] .screen {
  background: rgba(210,194,164,.72);
}
html[data-visual-style="papercraft"] .panel,
html[data-visual-style="papercraft"] .board,
html[data-visual-style="papercraft"] .map-dialog,
html[data-visual-style="papercraft"] .help-dialog,
html[data-visual-style="papercraft"] .quake-load-dialog {
  color: #3f3026;
  background:
    repeating-linear-gradient(0deg, rgba(90,62,38,.035) 0 1px, transparent 1px 6px),
    #e2d4ba !important;
  border: 3px solid #6c513a !important;
  border-radius: 2px !important;
  box-shadow:
    8px 10px 0 rgba(77,55,36,.20),
    inset 0 0 0 2px rgba(255,255,255,.18) !important;
  transform: rotate(-.15deg) !important;
}
html[data-visual-style="papercraft"] .panel::before,
html[data-visual-style="papercraft"] .map-dialog::before,
html[data-visual-style="papercraft"] .help-dialog::before,
html[data-visual-style="papercraft"] .quake-load-dialog::before {
  background: #c94132 !important;
  opacity: .20;
}
html[data-visual-style="papercraft"] button,
html[data-visual-style="papercraft"] input,
html[data-visual-style="papercraft"] select {
  color: #3f3026 !important;
  background: #eadfc9 !important;
  border: 2px solid #6c513a !important;
  border-radius: 1px !important;
  box-shadow: 3px 4px 0 rgba(77,55,36,.17) !important;
}
html[data-visual-style="papercraft"] button:hover:not(:disabled) {
  background: #f3e8cf !important;
  transform: translate(-1px,-1px) !important;
}
html[data-visual-style="papercraft"] .low,
html[data-visual-style="papercraft"] .danger,
html[data-visual-style="papercraft"] .killfeed b {
  color: #c94132 !important;
}
html[data-visual-style="papercraft"] .pts,
html[data-visual-style="papercraft"] .timer,
html[data-visual-style="papercraft"] .map-card-number {
  color: #b67822 !important;
}
html[data-visual-style="papercraft"] .selected {
  color: #466d45 !important;
  border-color: #466d45 !important;
}
html[data-visual-style="papercraft"] .quake-load-fill {
  background:
    repeating-linear-gradient(90deg,#557fa5 0 18px,#c94132 18px 36px,#d89b31 36px 54px,#648158 54px 72px) !important;
}
html[data-visual-style="papercraft"] #fpsCounter,
html[data-visual-style="papercraft"] #versionCounter {
  color: #3f3026;
  background: #e4d6bc;
  border-color: #6c513a;
  border-radius: 1px;
  box-shadow: 3px 4px 0 rgba(77,55,36,.16);
  font-family: Georgia, "Trebuchet MS", sans-serif;
}

/* ---------------- MANGA B/W ---------------- */
html[data-visual-style="manga"] {
  --ink: #111216;
  --red: #cf162d;
  --paper: #f6f2e7;
}
html[data-visual-style="manga"] body {
  background:
    radial-gradient(circle, rgba(0,0,0,.055) 0 1px, transparent 1.2px) 0 0/10px 10px,
    #f6f2e7;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
html[data-visual-style="manga"] .screen,
html[data-visual-style="manga"] .panel,
html[data-visual-style="manga"] .board,
html[data-visual-style="manga"] .map-dialog,
html[data-visual-style="manga"] .help-dialog,
html[data-visual-style="manga"] .quake-load-dialog,
html[data-visual-style="manga"] .options-dialog,
html[data-visual-style="manga"] .options-section,
html[data-visual-style="manga"] button,
html[data-visual-style="manga"] input,
html[data-visual-style="manga"] select,
html[data-visual-style="manga"] textarea {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
html[data-visual-style="manga"] .brand-logo,
html[data-visual-style="manga"] .panel h1,
html[data-visual-style="manga"] .panel h2,
html[data-visual-style="manga"] .map-dialog h2,
html[data-visual-style="manga"] .help-dialog-head h2,
html[data-visual-style="manga"] .options-dialog-head h2,
html[data-visual-style="manga"] .help-hub-button,
html[data-visual-style="manga"] .bigbtn,
html[data-visual-style="manga"] .online button.big,
html[data-visual-style="manga"] .modebtn,
html[data-visual-style="manga"] .mapbtn,
html[data-visual-style="manga"] .options-tab,
html[data-visual-style="manga"] .help-control-section h3,
html[data-visual-style="manga"] .map-dialog-card strong,
html[data-visual-style="manga"] .training-mode-title,
html[data-visual-style="manga"] .pause-mode-title,
html[data-visual-style="manga"] .msg-main,
html[data-visual-style="manga"] .scoreBig,
html[data-visual-style="manga"] .lobby h1,
html[data-visual-style="manga"] .online h1 {
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
  letter-spacing: .01em;
}
html[data-visual-style="manga"] .screen {
  background: rgba(246,242,231,.78);
}
html[data-visual-style="manga"] .panel,
html[data-visual-style="manga"] .board,
html[data-visual-style="manga"] .map-dialog,
html[data-visual-style="manga"] .help-dialog,
html[data-visual-style="manga"] .quake-load-dialog {
  color: #111216;
  background:
    radial-gradient(circle, rgba(0,0,0,.055) 0 1px, transparent 1.1px) 0 0/8px 8px,
    #fbf8ef !important;
  border: 4px solid #111216 !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 #111216 !important;
  transform: none !important;
}
html[data-visual-style="manga"] .panel::before,
html[data-visual-style="manga"] .map-dialog::before,
html[data-visual-style="manga"] .help-dialog::before,
html[data-visual-style="manga"] .quake-load-dialog::before {
  background: #cf162d !important;
  opacity: .65;
}
html[data-visual-style="manga"] button,
html[data-visual-style="manga"] input,
html[data-visual-style="manga"] select {
  color: #111216 !important;
  background: #fffdf6 !important;
  border: 3px solid #111216 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #111216 !important;
  text-transform: uppercase;
}
html[data-visual-style="manga"] button:hover:not(:disabled) {
  color: #fff !important;
  background: #111216 !important;
}
html[data-visual-style="manga"] .low,
html[data-visual-style="manga"] .danger,
html[data-visual-style="manga"] .killfeed b,
html[data-visual-style="manga"] .bossbar b {
  color: #cf162d !important;
}
html[data-visual-style="manga"] .pts,
html[data-visual-style="manga"] .timer {
  color: #111216 !important;
}
html[data-visual-style="manga"] .selected {
  color: #cf162d !important;
  border-color: #cf162d !important;
}
html[data-visual-style="manga"] .quake-load-fill {
  background:
    repeating-linear-gradient(135deg,#111216 0 8px,#f7f4ec 8px 14px,#cf162d 14px 20px) !important;
}
html[data-visual-style="manga"] #fpsCounter,
html[data-visual-style="manga"] #versionCounter {
  color: #111216;
  background: #fffdf6;
  border: 3px solid #111216;
  border-radius: 0;
  box-shadow: 3px 3px 0 #111216;
  font-family: Impact, "Arial Narrow", Arial, sans-serif;
}

/* ---------------- BRUTALIST DIGITAL ---------------- */
html[data-visual-style="brutalist"] {
  --ink: #ece9df;
  --red: #ff3128;
  --paper: #292b2d;
}
html[data-visual-style="brutalist"] body {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.04), transparent 20%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    #242628;
  font-family: Arial, Helvetica, sans-serif;
}
html[data-visual-style="brutalist"] .screen {
  background: rgba(31,33,35,.80);
}
html[data-visual-style="brutalist"] .panel,
html[data-visual-style="brutalist"] .board,
html[data-visual-style="brutalist"] .map-dialog,
html[data-visual-style="brutalist"] .help-dialog,
html[data-visual-style="brutalist"] .quake-load-dialog {
  color: #ece9df;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 40%),
    #36393b !important;
  border: 1px solid #9b9b96 !important;
  border-left: 8px solid #ff3128 !important;
  border-radius: 0 !important;
  box-shadow: 10px 10px 0 rgba(0,0,0,.48) !important;
  transform: none !important;
}
html[data-visual-style="brutalist"] .panel::before,
html[data-visual-style="brutalist"] .map-dialog::before,
html[data-visual-style="brutalist"] .help-dialog::before,
html[data-visual-style="brutalist"] .quake-load-dialog::before {
  background: #ff3128 !important;
  opacity: .82;
}
html[data-visual-style="brutalist"] button,
html[data-visual-style="brutalist"] input,
html[data-visual-style="brutalist"] select {
  color: #ece9df !important;
  background: #1f2122 !important;
  border: 1px solid #8f918d !important;
  border-left: 5px solid #ff3128 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
html[data-visual-style="brutalist"] button:hover:not(:disabled) {
  color: #1c1e1f !important;
  background: #ffcc30 !important;
  border-left-color: #ffcc30 !important;
}
html[data-visual-style="brutalist"] .low,
html[data-visual-style="brutalist"] .danger,
html[data-visual-style="brutalist"] .killfeed b {
  color: #ff3128 !important;
}
html[data-visual-style="brutalist"] .pts,
html[data-visual-style="brutalist"] .timer,
html[data-visual-style="brutalist"] .map-card-number {
  color: #ffcc30 !important;
}
html[data-visual-style="brutalist"] .selected {
  color: #b8d06d !important;
  border-color: #b8d06d !important;
}
html[data-visual-style="brutalist"] .quake-load-fill {
  background:
    repeating-linear-gradient(135deg,#ffcc30 0 13px,#171819 13px 26px) !important;
}
html[data-visual-style="brutalist"] #fpsCounter,
html[data-visual-style="brutalist"] #versionCounter {
  color: #ece9df;
  background: #1f2122;
  border: 1px solid #8f918d;
  border-left: 5px solid #ff3128;
  border-radius: 0;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
}

/* ---------------- SYNTHWAVE VHS ---------------- */
html[data-visual-style="synthwave"] {
  --ink: #28edff;
  --red: #ff177f;
  --paper: #170520;
}
html[data-visual-style="synthwave"] body {
  background:
    linear-gradient(to bottom, rgba(17,4,43,.96), rgba(74,8,83,.90) 58%, rgba(245,42,129,.22) 100%),
    #12051e;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}
html[data-visual-style="synthwave"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150000;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.024) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(40,237,255,.025), transparent 35%, rgba(255,23,127,.03));
  mix-blend-mode: screen;
}
html[data-visual-style="synthwave"] .screen {
  background: rgba(18,5,31,.76);
}
html[data-visual-style="synthwave"] #hud {
  text-shadow: 0 0 9px rgba(40,237,255,.48);
}
html[data-visual-style="synthwave"] .panel,
html[data-visual-style="synthwave"] .board,
html[data-visual-style="synthwave"] .map-dialog,
html[data-visual-style="synthwave"] .help-dialog,
html[data-visual-style="synthwave"] .quake-load-dialog {
  color: #28edff;
  background:
    linear-gradient(135deg, rgba(20,6,44,.97), rgba(55,7,65,.96)) !important;
  border: 2px solid #28edff !important;
  border-bottom: 4px solid #ff177f !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 18px rgba(40,237,255,.20),
    8px 8px 0 rgba(255,23,127,.16) !important;
  transform: none !important;
}
html[data-visual-style="synthwave"] .panel::before,
html[data-visual-style="synthwave"] .map-dialog::before,
html[data-visual-style="synthwave"] .help-dialog::before,
html[data-visual-style="synthwave"] .quake-load-dialog::before {
  background: #ff177f !important;
  opacity: .34;
}
html[data-visual-style="synthwave"] button,
html[data-visual-style="synthwave"] input,
html[data-visual-style="synthwave"] select {
  color: #28edff !important;
  background: #17051f !important;
  border: 2px solid #28edff !important;
  border-bottom-color: #ff177f !important;
  border-radius: 3px !important;
  box-shadow: 0 0 10px rgba(40,237,255,.14) !important;
}
html[data-visual-style="synthwave"] button:hover:not(:disabled) {
  color: #16051e !important;
  background: linear-gradient(90deg,#28edff,#ff59db) !important;
}
html[data-visual-style="synthwave"] .low,
html[data-visual-style="synthwave"] .danger,
html[data-visual-style="synthwave"] .killfeed b {
  color: #ff177f !important;
  text-shadow: 0 0 8px rgba(255,23,127,.65);
}
html[data-visual-style="synthwave"] .pts,
html[data-visual-style="synthwave"] .timer,
html[data-visual-style="synthwave"] .map-card-number {
  color: #ffb13b !important;
}
html[data-visual-style="synthwave"] .selected {
  color: #78ff9e !important;
  border-color: #78ff9e !important;
}
html[data-visual-style="synthwave"] .quake-load-fill {
  background: linear-gradient(90deg,#28edff,#784dff,#ff177f,#ff9f2f) !important;
  box-shadow: 0 0 14px rgba(255,23,127,.50);
}
html[data-visual-style="synthwave"] #fpsCounter,
html[data-visual-style="synthwave"] #versionCounter {
  color: #28edff;
  background: rgba(23,5,31,.90);
  border-color: #28edff;
  border-bottom-color: #ff177f;
  border-radius: 3px;
  box-shadow: 0 0 11px rgba(40,237,255,.32);
  font-family: "Trebuchet MS","Segoe UI",sans-serif;
}


/* ==================================================================
   OPTIONS DIALOG
   ================================================================== */
html.options-dialog-open {
  overflow: hidden;
}

.options-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 126000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(16,19,28,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.options-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(820px, calc(100vw - 42px));
  max-height: min(820px, calc(100vh - 42px));
  overflow: auto;
  padding: 24px 30px 24px;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 14px 19px 13px 17px / 18px 13px 19px 14px;
  box-shadow: 10px 12px 0 rgba(0,0,0,.24);
}

.options-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 3px solid currentColor;
}

.options-dialog-head h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 58px);
  line-height: .95;
}

.options-dialog-head p {
  margin: 7px 0 0;
  font-size: 17px;
  opacity: .62;
}

.options-dialog-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 3px solid currentColor;
  border-radius: 50%;
  font: inherit;
  font-size: 32px;
  line-height: 34px;
  cursor: pointer;
}

.options-dialog-head-tools {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-left: auto;
}
.options-dialog-language {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 260px;
  margin-top: 2px;
}
.options-dialog-language > span {
  display: flex;
  justify-content: flex-start;
}
.options-dialog-language strong {
  font-size: 12px;
  line-height: 1;
  letter-spacing: .6px;
}
.options-dialog-language select {
  width: 100%;
  min-width: 0;
  height: 38px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 2px solid currentColor;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}

.options-sections {
  margin-top: 22px;
}

.options-section {
  padding: 18px 20px 8px;
  border: 3px solid currentColor;
  border-radius: 9px 13px 8px 11px;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%);
}

.options-section h3 {
  margin: -34px 0 12px 2px;
  width: fit-content;
  padding: 0 10px;
  color: var(--red);
  background: var(--paper);
  font-size: 26px;
}

.options-toggle-row,
.options-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 67px;
  padding: 8px 4px;
  border-top: 2px solid color-mix(in srgb, currentColor 28%, transparent);
}

.options-toggle-row:first-of-type {
  border-top: 0;
}

.options-toggle-row > span:first-child,
.options-slider-row > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 230px;
}

.options-toggle-row strong,
.options-slider-row strong {
  font-size: 18px;
}

.options-toggle-row small,
.options-slider-row small {
  font-size: 12px;
  opacity: .60;
}

.options-toggle-row input[type="checkbox"] {
  width: 25px;
  height: 25px;
  accent-color: var(--red);
  cursor: pointer;
}

.options-slider-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(390px, 52vw);
}

.options-slider-control input[type="range"] {
  width: min(300px, 38vw);
  cursor: pointer;
  accent-color: var(--red);
}

.options-slider-control b {
  min-width: 58px;
  text-align: right;
  font-size: 17px;
}

.options-dialog-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.options-dialog-actions button {
  min-width: 180px;
  font: inherit;
  font-size: 22px;
  color: inherit;
  background: transparent;
  border: 3px solid currentColor;
  border-radius: 8px 11px 7px 10px;
  padding: 7px 20px;
  cursor: pointer;
}

/* Match the alternate global themes. */
html[data-visual-style="terminal"] .options-dialog,
html[data-visual-style="terminal"] .options-section {
  background: #010b04 !important;
  color: #53ff78;
  border-radius: 1px !important;
  box-shadow: 0 0 24px rgba(83,255,120,.24);
}
html[data-visual-style="terminal"] .options-section h3 {
  color: #ffc84a;
  background: #010b04;
}

html[data-visual-style="tron"] .options-dialog,
html[data-visual-style="tron"] .options-section {
  color: #00eaff;
  background: rgba(2,4,18,.97) !important;
  border-radius: 2px 14px 2px 14px !important;
  box-shadow: 0 0 24px rgba(0,234,255,.22);
}
html[data-visual-style="tron"] .options-section h3 {
  color: #ff2aa8;
  background: #020412;
}

html[data-visual-style="flat"] .options-dialog,
html[data-visual-style="flat"] .options-section {
  color: #172033;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(23,32,51,.14);
}
html[data-visual-style="flat"] .options-section h3 {
  color: #eb3349;
  background: #fff;
}

html[data-visual-style="blueprint"] .options-dialog,
html[data-visual-style="blueprint"] .options-section {
  color: #bff6ff;
  background:
    linear-gradient(rgba(159,231,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,231,255,.05) 1px, transparent 1px),
    #061c3c !important;
  background-size: 18px 18px !important;
  border-radius: 0 !important;
}
html[data-visual-style="blueprint"] .options-section h3 {
  color: #ffe36e;
  background: #061c3c;
}

html[data-visual-style="papercraft"] .options-dialog,
html[data-visual-style="papercraft"] .options-section {
  background: #e6d2aa !important;
  box-shadow: 8px 10px 0 rgba(77,52,31,.25);
}

html[data-visual-style="manga"] .options-dialog,
html[data-visual-style="manga"] .options-section {
  background: #fff !important;
  color: #111;
  border-radius: 0 !important;
}
html[data-visual-style="manga"] .options-section h3 {
  color: #c3172d;
  background: #fff;
}

html[data-visual-style="brutalist"] .options-dialog,
html[data-visual-style="brutalist"] .options-section {
  background: #2b2d2f !important;
  color: #f0eadf;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 #111;
}
html[data-visual-style="brutalist"] .options-section h3 {
  color: #ff3b30;
  background: #2b2d2f;
}

html[data-visual-style="synthwave"] .options-dialog,
html[data-visual-style="synthwave"] .options-section {
  background: #130629 !important;
  color: #6ffcff;
  border-color: #ff3bbd !important;
  box-shadow: 0 0 28px rgba(255,59,189,.30);
}
html[data-visual-style="synthwave"] .options-section h3 {
  color: #ffca58;
  background: #130629;
}

@media (max-width: 700px) {
  .options-toggle-row,
  .options-slider-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .options-slider-control {
    width: 100%;
    min-width: 0;
  }

  .options-slider-control input[type="range"] {
    width: 100%;
  }
}


/* Pause menu action buttons */
.menubtn .row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}


/* ==================================================================
   OPTIONS TABS + GAMEPLAY OVERLAYS
   ================================================================== */
.options-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 20px;
  padding-bottom: 8px;
  border-bottom: 3px solid currentColor;
}
.options-tab {
  min-width: 150px;
  padding: 7px 18px;
  font: inherit;
  font-size: 20px;
  color: inherit;
  background: transparent;
  border: 3px solid currentColor;
  border-bottom-width: 5px;
  cursor: pointer;
  opacity: .62;
}
.options-tab.active {
  opacity: 1;
  color: var(--red);
  transform: translateY(2px);
}
.options-tab-panel[hidden] { display: none !important; }
.options-tab-panel.active { display: block; }
.options-toggle-row.disabled { opacity: .38; }
.options-toggle-row input:disabled { cursor: not-allowed; }

#gameplayOverlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.enemy-healthbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  transform-origin: center bottom;
  will-change: transform;
  color: var(--ink);
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.18));
}
.enemy-healthbar-name {
  margin-bottom: 2px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
}
.enemy-healthbar-track {
  height: 8px;
  padding: 1px;
  border: 2px solid currentColor;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
}
.enemy-healthbar-track i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: var(--red);
}
.damage-number {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--paper), -1px -1px 0 var(--paper);
  will-change: transform, opacity;
}
.damage-number.crit {
  font-size: 30px;
  color: #ff3a32;
}
html[data-visual-style="terminal"] .enemy-healthbar-track i,
html[data-visual-style="terminal"] .damage-number { background: #ff4728; color: #ff9b49; }
html[data-visual-style="tron"] .enemy-healthbar-track i { background: #ff168f; box-shadow: 0 0 8px #ff168f; }
html[data-visual-style="tron"] .damage-number { color: #ffe13a; text-shadow: 0 0 8px #ff168f; }
html[data-visual-style="blueprint"] .enemy-healthbar-track i { background: #ff6b35; }
html[data-visual-style="blueprint"] .damage-number { color: #ffe36e; }
html[data-visual-style="manga"] .enemy-healthbar-track i { background: #c3172d; }
html[data-visual-style="brutalist"] .enemy-healthbar-track i { background: #ff3b30; }
html[data-visual-style="synthwave"] .enemy-healthbar-track i { background: #ff3bbd; box-shadow: 0 0 8px #ff3bbd; }


/* ==================================================================
   OPTIONS DIALOG COMPACT LAYOUT + THEMED SCROLLBARS
   ================================================================== */
.options-dialog {
  width: min(700px, calc(100vw - 34px));
  max-height: min(740px, calc(100vh - 34px));
  padding: 18px 22px 16px;
  overscroll-behavior: contain;
}

.options-dialog-head {
  gap: 12px;
  padding-bottom: 10px;
}

.options-dialog-head h2 {
  font-size: clamp(30px, 4.2vw, 46px);
}

.options-dialog-head p {
  margin-top: 4px;
  font-size: 14px;
}

.options-dialog-close {
  width: 38px;
  height: 38px;
  font-size: 28px;
  line-height: 28px;
}

.options-tabs {
  gap: 6px;
  margin: 12px 0 12px;
  padding-bottom: 6px;
  border-bottom-width: 2px;
}

.options-tab {
  min-width: 118px;
  padding: 5px 14px;
  font-size: 16px;
  border-width: 2px;
  border-bottom-width: 4px;
}

.options-tab.active {
  transform: translateY(1px);
}

.options-sections {
  margin-top: 0;
}

.options-section {
  padding: 12px 14px 5px;
  border-width: 2px;
}

.options-section h3 {
  margin: -24px 0 8px 0;
  padding: 0 8px;
  font-size: 20px;
}

.options-toggle-row,
.options-slider-row {
  gap: 14px;
  min-height: 48px;
  padding: 5px 2px;
  border-top-width: 1px;
}

.options-toggle-row > span:first-child,
.options-slider-row > span:first-child {
  gap: 1px;
  min-width: 190px;
}

.options-toggle-row strong,
.options-slider-row strong {
  font-size: 14px;
  line-height: 1.1;
}

.options-toggle-row small,
.options-slider-row small {
  font-size: 11px;
  line-height: 1.15;
}

.options-toggle-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.options-slider-control {
  gap: 8px;
  min-width: min(300px, 46vw);
}

.options-slider-control input[type="range"] {
  width: min(210px, 34vw);
}

.options-slider-control b {
  min-width: 46px;
  font-size: 14px;
}
.options-slider-row.dependency-row.disabled {
  opacity: .48;
}
.options-slider-row.dependency-row.disabled input[type="range"] {
  cursor: not-allowed;
}

.options-dialog-actions {
  margin-top: 14px;
}

.options-dialog-actions button {
  min-width: 148px;
  font-size: 18px;
  padding: 5px 16px;
  border-width: 2px;
}

@media (max-width: 700px) {
  .options-dialog-overlay {
    padding: 14px;
  }

  .options-dialog {
    width: min(100vw - 18px, 700px);
    max-height: min(100vh - 18px, 740px);
    padding: 14px 14px 12px;
  }

  .options-tab {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 10px;
  }

  .options-toggle-row > span:first-child,
  .options-slider-row > span:first-child {
    min-width: 0;
  }

  .options-slider-control {
    min-width: 0;
  }
}

html {
  --scrollbar-track: rgba(43, 63, 160, .14);
  --scrollbar-thumb: rgba(26, 48, 192, .52);
  --scrollbar-thumb-hover: rgba(26, 48, 192, .74);
  --scrollbar-corner: rgba(0, 0, 0, .04);
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html[data-visual-style="hand"] {
  --scrollbar-track: rgba(133, 156, 217, .18);
  --scrollbar-thumb: rgba(45, 83, 198, .58);
  --scrollbar-thumb-hover: rgba(36, 67, 167, .82);
  --scrollbar-corner: rgba(248, 245, 233, .92);
}

html[data-visual-style="terminal"] {
  --scrollbar-track: rgba(5, 24, 11, .96);
  --scrollbar-thumb: rgba(83, 255, 120, .56);
  --scrollbar-thumb-hover: rgba(117, 255, 148, .88);
  --scrollbar-corner: rgba(1, 11, 4, .98);
}

html[data-visual-style="tron"] {
  --scrollbar-track: rgba(4, 12, 30, .95);
  --scrollbar-thumb: rgba(0, 234, 255, .64);
  --scrollbar-thumb-hover: rgba(255, 42, 168, .86);
  --scrollbar-corner: rgba(2, 4, 18, .98);
}

html[data-visual-style="flat"] {
  --scrollbar-track: rgba(23, 32, 51, .10);
  --scrollbar-thumb: rgba(235, 51, 73, .42);
  --scrollbar-thumb-hover: rgba(235, 51, 73, .70);
  --scrollbar-corner: rgba(255, 255, 255, .96);
}

html[data-visual-style="blueprint"] {
  --scrollbar-track: rgba(6, 28, 60, .98);
  --scrollbar-thumb: rgba(159, 231, 255, .60);
  --scrollbar-thumb-hover: rgba(255, 227, 110, .88);
  --scrollbar-corner: rgba(6, 28, 60, .98);
}

html[data-visual-style="papercraft"] {
  --scrollbar-track: rgba(184, 148, 96, .22);
  --scrollbar-thumb: rgba(126, 87, 51, .54);
  --scrollbar-thumb-hover: rgba(96, 60, 32, .80);
  --scrollbar-corner: rgba(230, 210, 170, .96);
}

html[data-visual-style="manga"] {
  --scrollbar-track: rgba(0, 0, 0, .08);
  --scrollbar-thumb: rgba(0, 0, 0, .48);
  --scrollbar-thumb-hover: rgba(195, 23, 45, .82);
  --scrollbar-corner: rgba(255, 255, 255, .98);
}

html[data-visual-style="brutalist"] {
  --scrollbar-track: rgba(32, 33, 35, .98);
  --scrollbar-thumb: rgba(255, 59, 48, .64);
  --scrollbar-thumb-hover: rgba(255, 200, 92, .90);
  --scrollbar-corner: rgba(43, 45, 47, .98);
}

html[data-visual-style="synthwave"] {
  --scrollbar-track: rgba(19, 6, 41, .98);
  --scrollbar-thumb: rgba(255, 59, 189, .62);
  --scrollbar-thumb-hover: rgba(40, 237, 255, .92);
  --scrollbar-corner: rgba(19, 6, 41, .98);
}

body,
.help-dialog,
.options-dialog,
.settings,
.settings .settings-row,
.map-dialog,
.map-list,
#panel,
#screen {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body::-webkit-scrollbar,
.help-dialog::-webkit-scrollbar,
.options-dialog::-webkit-scrollbar,
.settings::-webkit-scrollbar,
.settings .settings-row::-webkit-scrollbar,
.map-dialog::-webkit-scrollbar,
.map-list::-webkit-scrollbar,
#panel::-webkit-scrollbar,
#screen::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body::-webkit-scrollbar-track,
.help-dialog::-webkit-scrollbar-track,
.options-dialog::-webkit-scrollbar-track,
.settings::-webkit-scrollbar-track,
.settings .settings-row::-webkit-scrollbar-track,
.map-dialog::-webkit-scrollbar-track,
.map-list::-webkit-scrollbar-track,
#panel::-webkit-scrollbar-track,
#screen::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

body::-webkit-scrollbar-thumb,
.help-dialog::-webkit-scrollbar-thumb,
.options-dialog::-webkit-scrollbar-thumb,
.settings::-webkit-scrollbar-thumb,
.settings .settings-row::-webkit-scrollbar-thumb,
.map-dialog::-webkit-scrollbar-thumb,
.map-list::-webkit-scrollbar-thumb,
#panel::-webkit-scrollbar-thumb,
#screen::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
}

body::-webkit-scrollbar-thumb:hover,
.help-dialog::-webkit-scrollbar-thumb:hover,
.options-dialog::-webkit-scrollbar-thumb:hover,
.settings::-webkit-scrollbar-thumb:hover,
.settings .settings-row::-webkit-scrollbar-thumb:hover,
.map-dialog::-webkit-scrollbar-thumb:hover,
.map-list::-webkit-scrollbar-thumb:hover,
#panel::-webkit-scrollbar-thumb:hover,
#screen::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

body::-webkit-scrollbar-corner,
.help-dialog::-webkit-scrollbar-corner,
.options-dialog::-webkit-scrollbar-corner,
.settings::-webkit-scrollbar-corner,
.settings .settings-row::-webkit-scrollbar-corner,
.map-dialog::-webkit-scrollbar-corner,
.map-list::-webkit-scrollbar-corner,
#panel::-webkit-scrollbar-corner,
#screen::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner);
}

html[data-visual-style="blueprint"] body::-webkit-scrollbar-thumb,
html[data-visual-style="manga"] body::-webkit-scrollbar-thumb,
html[data-visual-style="brutalist"] body::-webkit-scrollbar-thumb,
html[data-visual-style="blueprint"] .help-dialog::-webkit-scrollbar-thumb,
html[data-visual-style="manga"] .help-dialog::-webkit-scrollbar-thumb,
html[data-visual-style="brutalist"] .help-dialog::-webkit-scrollbar-thumb,
html[data-visual-style="blueprint"] .options-dialog::-webkit-scrollbar-thumb,
html[data-visual-style="manga"] .options-dialog::-webkit-scrollbar-thumb,
html[data-visual-style="brutalist"] .options-dialog::-webkit-scrollbar-thumb {
  border-radius: 2px;
}

/* Quake MAP door import confirmation */
.door-import-dialog { width: min(720px, calc(100vw - 44px)); }
.door-import-copy { margin: 20px 0 8px; font-size: 18px; line-height: 1.35; }
.door-import-copy p { margin: 0; }
.door-import-actions { gap: 12px; flex-wrap: wrap; }
.door-import-actions button { min-width: 170px; }

/* theme-specific sniper scope colors */
html[data-visual-style="hand"] {
  --scope-mask: #f6f3e6;
  --scope-ring: #1a30c0;
  --scope-cross: #1a30c0;
  --scope-dot: #d02030;
  --scope-ring-glow: rgba(26,48,192,.12);
}
html[data-visual-style="terminal"] {
  --scope-mask: #041108;
  --scope-ring: #54ff98;
  --scope-cross: #54ff98;
  --scope-dot: #ff5d4d;
  --scope-ring-glow: rgba(84,255,152,.22);
}
html[data-visual-style="tron"] {
  --scope-mask: #060c21;
  --scope-ring: #37f7ff;
  --scope-cross: #37f7ff;
  --scope-dot: #ff4bd2;
  --scope-ring-glow: rgba(55,247,255,.20);
}
html[data-visual-style="flat"] {
  --scope-mask: #dbe6f4;
  --scope-ring: #172033;
  --scope-cross: #172033;
  --scope-dot: #eb3349;
  --scope-ring-glow: rgba(23,32,51,.12);
}
html[data-visual-style="blueprint"] {
  --scope-mask: #082142;
  --scope-ring: #b6f3ff;
  --scope-cross: #b6f3ff;
  --scope-dot: #ffae42;
  --scope-ring-glow: rgba(182,243,255,.18);
}
html[data-visual-style="papercraft"] {
  --scope-mask: #d1bea0;
  --scope-ring: #43372c;
  --scope-cross: #43372c;
  --scope-dot: #d84934;
  --scope-ring-glow: rgba(67,55,44,.14);
}
html[data-visual-style="manga"] {
  --scope-mask: #ece7dd;
  --scope-ring: #101214;
  --scope-cross: #101214;
  --scope-dot: #d42238;
  --scope-ring-glow: rgba(16,18,20,.10);
}
html[data-visual-style="brutalist"] {
  --scope-mask: #27282a;
  --scope-ring: #f2eee5;
  --scope-cross: #f2eee5;
  --scope-dot: #ffb347;
  --scope-ring-glow: rgba(242,238,229,.16);
}
html[data-visual-style="synthwave"] {
  --scope-mask: #210a2c;
  --scope-ring: #6fe6ff;
  --scope-cross: #6fe6ff;
  --scope-dot: #ff4cc2;
  --scope-ring-glow: rgba(111,230,255,.18);
}

/* ================================================================
   MENU / OPTIONS REFINEMENTS - 2.10
   ================================================================ */
/* Main actions stay deliberately straight; the hand-drawn borders still
   provide the irregular paper-card look without tilting the controls. */
.mainbtns button,
.mainbtns button:nth-child(2),
.mainbtns button.start,
.mainbtns button.start + button,
.mainbtns .vrbtn {
  transform: none !important;
}
.mainbtns button:hover,
.mainbtns button.start:hover,
.mainbtns .vrbtn:hover:not(:disabled) {
  transform: scale(1.025) !important;
}

/* Only the visual selector remains in the main-menu footer. */
.settings.menu-settings-minimal {
  padding-top: 5px;
  padding-bottom: 0;
  overflow: visible;
}
.settings.menu-settings-minimal .settings-row {
  justify-content: center;
}
.settings.menu-settings-minimal label {
  border-left: 0 !important;
  padding: 0 8px;
}

/* More breathing room between category tabs and each section heading. */
.options-dialog .options-tabs {
  margin-bottom: 28px;
}
.options-dialog .options-sections {
  margin-top: 8px;
}
.options-dialog .options-section h3 {
  margin-bottom: 14px;
}

/* Select rows use the same hierarchy as toggles/sliders. */
.options-select-row[hidden] { display: none !important; }
.options-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 5px 2px;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.options-select-row > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 190px;
}
.options-select-row strong {
  font-size: 14px;
  line-height: 1.1;
}
.options-select-row small {
  font-size: 11px;
  line-height: 1.15;
  opacity: .60;
}
.options-select-row select {
  min-width: 150px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 2px solid currentColor;
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
}
.options-select-row.dependency-row.disabled { opacity: .48; }
.options-select-row select:disabled { cursor: not-allowed; }

.waves-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 4px 14px;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.waves-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 5px 10px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
}
.waves-status-pill.custom {
  color: var(--red);
  border-color: var(--red);
}
.waves-status-meta {
  font-size: 12px;
  opacity: .72;
}
.waves-enemy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding-top: 10px;
}
.wave-enemy-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
}
.wave-enemy-card > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wave-enemy-card strong {
  font-size: 14px;
}
.wave-enemy-card small {
  font-size: 11px;
  opacity: .62;
}
.wave-enemy-card .options-slider-control {
  min-width: 0;
  width: 100%;
}
.wave-boss-dependent.disabled {
  opacity: .48;
}
.wave-boss-dependent.disabled input,
.wave-boss-dependent.disabled select {
  cursor: not-allowed;
}
.waves-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 700px) {
  .options-select-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  .options-select-row select {
    width: 100%;
  }
}

/* ================================================================
   BUNDLED QUAKE MAP LIBRARY
   ================================================================ */
.quake-map-library-dialog {
  width: min(900px, calc(100vw - 44px));
  overflow: hidden;
}
.map-library-toolbar {
  margin: 4px 0 18px;
}
.map-library-external {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 18px 11px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: rgba(255,255,255,.46);
  border: 3px solid var(--red);
  border-radius: 8px 12px 7px 10px / 11px 7px 12px 8px;
  cursor: pointer;
}
.map-library-external:hover {
  background: rgba(255,255,255,.78);
  transform: scale(1.008);
}
.map-library-external strong {
  display: block;
  color: var(--red);
  font-size: 23px;
  line-height: 1.05;
}
.map-library-external span {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  opacity: .72;
}
.map-library-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  max-height: min(500px, calc(100vh - 290px));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 8px 8px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.map-library-list::-webkit-scrollbar { width: 12px; }
.map-library-list::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.map-library-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
}
.map-library-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.map-library-card { min-height: 108px; }
.map-library-empty {
  grid-column: 1 / -1;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  border: 2px dashed currentColor;
  opacity: .68;
}
.map-library-empty strong { font-size: 24px; }
.map-library-empty span { font-size: 16px; }
@media (max-width: 720px) {
  .map-library-list { grid-template-columns: 1fr; }
}

/* local MAP folder permission */
.map-library-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.map-library-folder,
.map-library-external {
  min-width: 0;
}
.map-library-folder {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 18px 11px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: rgba(255,255,255,.46);
  border: 3px solid var(--ink);
  border-radius: 10px 7px 12px 8px / 7px 12px 8px 11px;
  cursor: pointer;
}
.map-library-folder:hover {
  background: rgba(255,255,255,.78);
  transform: scale(1.008);
}
.map-library-folder:disabled {
  opacity: .45;
  cursor: wait;
  transform: none;
}
.map-library-folder strong {
  display: block;
  color: var(--ink);
  font-size: 23px;
  line-height: 1.05;
}
.map-library-folder span {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  opacity: .72;
}
.map-library-folder-status {
  grid-column: 1 / -1;
  margin-top: -2px;
  padding: 8px 10px;
  border-left: 4px solid var(--ink);
  font-size: 14px;
  line-height: 1.25;
  opacity: .78;
}
.map-library-folder-status[data-state="ok"] { border-left-color: var(--ink); opacity: .9; }
.map-library-folder-status[data-state="warn"] { border-left-color: var(--red); }
.map-library-folder-status[data-state="error"] { border-left-color: var(--red); color: var(--red); opacity: 1; }
@media (max-width: 720px) {
  .map-library-toolbar { grid-template-columns: 1fr; }
  .map-library-folder-status { grid-column: 1; }
}


/* ================================================================
   MATERIAL VISUAL STYLES — PHASE 1
   More realistic procedural-material themes. The 3D renderer provides
   material breakup; these rules carry the same identity through the UI.
   ================================================================ */
html[data-visual-style="industrial"] { --ink:#d8ddd9;--red:#d8482f;--paper:#1b1d1d;--mat-bg:#161818;--mat-panel:#2b2f30;--mat-edge:#778083;--mat-accent:#e2a928;--mat-danger:#df4932;--mat-text:#e2e4df; }
html[data-visual-style="concrete"] { --ink:#e0ded5;--red:#c74435;--paper:#4a4944;--mat-bg:#3e3d39;--mat-panel:#575650;--mat-edge:#8e8b83;--mat-accent:#c7a566;--mat-danger:#d34b3d;--mat-text:#f0ede4; }
html[data-visual-style="rusted"] { --ink:#e1c7a3;--red:#d7462a;--paper:#21160f;--mat-bg:#18100c;--mat-panel:#352319;--mat-edge:#855235;--mat-accent:#d47b26;--mat-danger:#e04427;--mat-text:#ead8bd; }
html[data-visual-style="military"] { --ink:#d9ddc4;--red:#c83b2e;--paper:#202518;--mat-bg:#171b12;--mat-panel:#303725;--mat-edge:#667050;--mat-accent:#c8ad55;--mat-danger:#d84b36;--mat-text:#e3e7d1; }
html[data-visual-style="scifi"] { --ink:#b8e8eb;--red:#f04a3d;--paper:#071014;--mat-bg:#050b0e;--mat-panel:#122027;--mat-edge:#37616d;--mat-accent:#50c7cf;--mat-danger:#ef5548;--mat-text:#d7edf0; }
html[data-visual-style="retro_scifi"] { --ink:#ded6bd;--red:#d7513a;--paper:#373226;--mat-bg:#27231c;--mat-panel:#514b3d;--mat-edge:#8a816c;--mat-accent:#d98733;--mat-danger:#d54c38;--mat-text:#eee5cc; }
html[data-visual-style="psx"] { --ink:#d2d1c9;--red:#d6443b;--paper:#151719;--mat-bg:#111315;--mat-panel:#282c2d;--mat-edge:#656d6e;--mat-accent:#c6a43c;--mat-danger:#dc4c42;--mat-text:#dedfd7; }
html[data-visual-style="pc90s"] { --ink:#d8e6e9;--red:#e14633;--paper:#171c20;--mat-bg:#11161a;--mat-panel:#26333a;--mat-edge:#607987;--mat-accent:#d7a12d;--mat-danger:#e34a35;--mat-text:#e2ecee; }

html[data-visual-style="industrial"] body,
html[data-visual-style="concrete"] body,
html[data-visual-style="rusted"] body,
html[data-visual-style="military"] body,
html[data-visual-style="scifi"] body,
html[data-visual-style="retro_scifi"] body,
html[data-visual-style="psx"] body,
html[data-visual-style="pc90s"] body {
  color:var(--mat-text);background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.045),transparent 24%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 5px),
    var(--mat-bg);
  font-family:"Segoe UI",Arial,sans-serif;
}
html[data-visual-style="industrial"] .screen,
html[data-visual-style="concrete"] .screen,
html[data-visual-style="rusted"] .screen,
html[data-visual-style="military"] .screen,
html[data-visual-style="scifi"] .screen,
html[data-visual-style="retro_scifi"] .screen,
html[data-visual-style="psx"] .screen,
html[data-visual-style="pc90s"] .screen { background:color-mix(in srgb,var(--mat-bg) 82%,transparent); }
html[data-visual-style="industrial"] .panel,html[data-visual-style="industrial"] .board,html[data-visual-style="industrial"] .map-dialog,html[data-visual-style="industrial"] .help-dialog,html[data-visual-style="industrial"] .quake-load-dialog,
html[data-visual-style="concrete"] .panel,html[data-visual-style="concrete"] .board,html[data-visual-style="concrete"] .map-dialog,html[data-visual-style="concrete"] .help-dialog,html[data-visual-style="concrete"] .quake-load-dialog,
html[data-visual-style="rusted"] .panel,html[data-visual-style="rusted"] .board,html[data-visual-style="rusted"] .map-dialog,html[data-visual-style="rusted"] .help-dialog,html[data-visual-style="rusted"] .quake-load-dialog,
html[data-visual-style="military"] .panel,html[data-visual-style="military"] .board,html[data-visual-style="military"] .map-dialog,html[data-visual-style="military"] .help-dialog,html[data-visual-style="military"] .quake-load-dialog,
html[data-visual-style="scifi"] .panel,html[data-visual-style="scifi"] .board,html[data-visual-style="scifi"] .map-dialog,html[data-visual-style="scifi"] .help-dialog,html[data-visual-style="scifi"] .quake-load-dialog,
html[data-visual-style="retro_scifi"] .panel,html[data-visual-style="retro_scifi"] .board,html[data-visual-style="retro_scifi"] .map-dialog,html[data-visual-style="retro_scifi"] .help-dialog,html[data-visual-style="retro_scifi"] .quake-load-dialog,
html[data-visual-style="psx"] .panel,html[data-visual-style="psx"] .board,html[data-visual-style="psx"] .map-dialog,html[data-visual-style="psx"] .help-dialog,html[data-visual-style="psx"] .quake-load-dialog,
html[data-visual-style="pc90s"] .panel,html[data-visual-style="pc90s"] .board,html[data-visual-style="pc90s"] .map-dialog,html[data-visual-style="pc90s"] .help-dialog,html[data-visual-style="pc90s"] .quake-load-dialog {
  color:var(--mat-text)!important;background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 38%),var(--mat-panel)!important;
  border:1px solid var(--mat-edge)!important;border-left:5px solid var(--mat-accent)!important;border-radius:2px!important;
  box-shadow:0 14px 30px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04)!important;transform:none!important;
}
html[data-visual-style="industrial"] button,html[data-visual-style="industrial"] input,html[data-visual-style="industrial"] select,
html[data-visual-style="concrete"] button,html[data-visual-style="concrete"] input,html[data-visual-style="concrete"] select,
html[data-visual-style="rusted"] button,html[data-visual-style="rusted"] input,html[data-visual-style="rusted"] select,
html[data-visual-style="military"] button,html[data-visual-style="military"] input,html[data-visual-style="military"] select,
html[data-visual-style="scifi"] button,html[data-visual-style="scifi"] input,html[data-visual-style="scifi"] select,
html[data-visual-style="retro_scifi"] button,html[data-visual-style="retro_scifi"] input,html[data-visual-style="retro_scifi"] select,
html[data-visual-style="psx"] button,html[data-visual-style="psx"] input,html[data-visual-style="psx"] select,
html[data-visual-style="pc90s"] button,html[data-visual-style="pc90s"] input,html[data-visual-style="pc90s"] select {
  color:var(--mat-text)!important;background:color-mix(in srgb,var(--mat-panel) 72%,#000)!important;border:1px solid var(--mat-edge)!important;border-radius:2px!important;box-shadow:none!important;
}
html[data-visual-style="industrial"] button:hover:not(:disabled),html[data-visual-style="concrete"] button:hover:not(:disabled),html[data-visual-style="rusted"] button:hover:not(:disabled),html[data-visual-style="military"] button:hover:not(:disabled),html[data-visual-style="scifi"] button:hover:not(:disabled),html[data-visual-style="retro_scifi"] button:hover:not(:disabled),html[data-visual-style="psx"] button:hover:not(:disabled),html[data-visual-style="pc90s"] button:hover:not(:disabled){background:var(--mat-accent)!important;color:#111!important;border-color:var(--mat-accent)!important;}
html[data-visual-style="industrial"] .low,html[data-visual-style="industrial"] .danger,html[data-visual-style="industrial"] .killfeed b,
html[data-visual-style="concrete"] .low,html[data-visual-style="concrete"] .danger,html[data-visual-style="concrete"] .killfeed b,
html[data-visual-style="rusted"] .low,html[data-visual-style="rusted"] .danger,html[data-visual-style="rusted"] .killfeed b,
html[data-visual-style="military"] .low,html[data-visual-style="military"] .danger,html[data-visual-style="military"] .killfeed b,
html[data-visual-style="scifi"] .low,html[data-visual-style="scifi"] .danger,html[data-visual-style="scifi"] .killfeed b,
html[data-visual-style="retro_scifi"] .low,html[data-visual-style="retro_scifi"] .danger,html[data-visual-style="retro_scifi"] .killfeed b,
html[data-visual-style="psx"] .low,html[data-visual-style="psx"] .danger,html[data-visual-style="psx"] .killfeed b,
html[data-visual-style="pc90s"] .low,html[data-visual-style="pc90s"] .danger,html[data-visual-style="pc90s"] .killfeed b {color:var(--mat-danger)!important;}
html[data-visual-style="industrial"] .pts,html[data-visual-style="industrial"] .timer,html[data-visual-style="industrial"] .map-card-number,
html[data-visual-style="concrete"] .pts,html[data-visual-style="concrete"] .timer,html[data-visual-style="concrete"] .map-card-number,
html[data-visual-style="rusted"] .pts,html[data-visual-style="rusted"] .timer,html[data-visual-style="rusted"] .map-card-number,
html[data-visual-style="military"] .pts,html[data-visual-style="military"] .timer,html[data-visual-style="military"] .map-card-number,
html[data-visual-style="scifi"] .pts,html[data-visual-style="scifi"] .timer,html[data-visual-style="scifi"] .map-card-number,
html[data-visual-style="retro_scifi"] .pts,html[data-visual-style="retro_scifi"] .timer,html[data-visual-style="retro_scifi"] .map-card-number,
html[data-visual-style="psx"] .pts,html[data-visual-style="psx"] .timer,html[data-visual-style="psx"] .map-card-number,
html[data-visual-style="pc90s"] .pts,html[data-visual-style="pc90s"] .timer,html[data-visual-style="pc90s"] .map-card-number {color:var(--mat-accent)!important;}
html[data-visual-style="industrial"] .selected,html[data-visual-style="concrete"] .selected,html[data-visual-style="rusted"] .selected,html[data-visual-style="military"] .selected,html[data-visual-style="scifi"] .selected,html[data-visual-style="retro_scifi"] .selected,html[data-visual-style="psx"] .selected,html[data-visual-style="pc90s"] .selected {border-color:var(--mat-accent)!important;color:var(--mat-accent)!important;}
html[data-visual-style="industrial"] .quake-load-fill,html[data-visual-style="concrete"] .quake-load-fill,html[data-visual-style="rusted"] .quake-load-fill,html[data-visual-style="military"] .quake-load-fill,html[data-visual-style="scifi"] .quake-load-fill,html[data-visual-style="retro_scifi"] .quake-load-fill,html[data-visual-style="psx"] .quake-load-fill,html[data-visual-style="pc90s"] .quake-load-fill {background:linear-gradient(90deg,var(--mat-accent),var(--mat-danger))!important;}
html[data-visual-style="industrial"] #fpsCounter,html[data-visual-style="industrial"] #versionCounter,html[data-visual-style="concrete"] #fpsCounter,html[data-visual-style="concrete"] #versionCounter,html[data-visual-style="rusted"] #fpsCounter,html[data-visual-style="rusted"] #versionCounter,html[data-visual-style="military"] #fpsCounter,html[data-visual-style="military"] #versionCounter,html[data-visual-style="scifi"] #fpsCounter,html[data-visual-style="scifi"] #versionCounter,html[data-visual-style="retro_scifi"] #fpsCounter,html[data-visual-style="retro_scifi"] #versionCounter,html[data-visual-style="psx"] #fpsCounter,html[data-visual-style="psx"] #versionCounter,html[data-visual-style="pc90s"] #fpsCounter,html[data-visual-style="pc90s"] #versionCounter {color:var(--mat-text);background:var(--mat-panel);border:1px solid var(--mat-edge);border-left:4px solid var(--mat-accent);border-radius:2px;box-shadow:none;}

/* Individual UI material cues */
html[data-visual-style="industrial"] .panel,html[data-visual-style="industrial"] .board { background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px)!important; }
html[data-visual-style="concrete"] .panel,html[data-visual-style="concrete"] .board { background-image:radial-gradient(circle at 20% 30%,rgba(0,0,0,.10) 0 1px,transparent 2px),radial-gradient(circle at 70% 66%,rgba(255,255,255,.045) 0 1px,transparent 2px)!important;background-size:17px 19px,23px 29px!important; }
html[data-visual-style="rusted"] .panel,html[data-visual-style="rusted"] .board { background-image:radial-gradient(ellipse at 18% 22%,rgba(176,71,20,.24),transparent 25%),radial-gradient(ellipse at 76% 70%,rgba(119,43,14,.23),transparent 23%)!important; }
html[data-visual-style="military"] .panel,html[data-visual-style="military"] .board { background-image:linear-gradient(135deg,rgba(190,171,83,.04) 25%,transparent 25% 75%,rgba(0,0,0,.05) 75%)!important;background-size:18px 18px!important; }
html[data-visual-style="scifi"] .panel,html[data-visual-style="scifi"] .board { box-shadow:0 0 0 1px rgba(80,199,207,.10),0 14px 30px rgba(0,0,0,.42)!important; }
html[data-visual-style="retro_scifi"] button,html[data-visual-style="retro_scifi"] input,html[data-visual-style="retro_scifi"] select { border-bottom:3px solid #b2632a!important; }
html[data-visual-style="psx"] body { image-rendering:pixelated; }
html[data-visual-style="psx"] .panel,html[data-visual-style="psx"] button,html[data-visual-style="psx"] select { border-radius:0!important; }
html[data-visual-style="pc90s"] .panel,html[data-visual-style="pc90s"] .board { background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px)!important; }


/* ================================================================
   MATERIAL VISUAL STYLES — PHASE 2
   ================================================================ */
html[data-visual-style="bunker"] { --ink:#d7dacb;--red:#d84834;--paper:#11140f;--mat-bg:#0d100c;--mat-panel:#252a22;--mat-edge:#596157;--mat-accent:#b49a45;--mat-danger:#df4b35;--mat-text:#dfe2d5; }
html[data-visual-style="lunar"] { --ink:#1f2b30;--red:#c93d31;--paper:#b7b9b6;--mat-bg:#aeb3b2;--mat-panel:#d5d8d4;--mat-edge:#6d797d;--mat-accent:#d87527;--mat-danger:#c53d32;--mat-text:#1c282d; }
html[data-visual-style="stone"] { --ink:#e2d0b3;--red:#cf4935;--paper:#30271d;--mat-bg:#241d16;--mat-panel:#44382b;--mat-edge:#78634c;--mat-accent:#b99b53;--mat-danger:#dd4b35;--mat-text:#eee0c7; }
html[data-visual-style="alien"] { --ink:#b9e9de;--red:#ff5362;--paper:#081312;--mat-bg:#050c0b;--mat-panel:#122220;--mat-edge:#35665e;--mat-accent:#43c7a7;--mat-danger:#ff5362;--mat-text:#d2eee7; }
html[data-visual-style="bunker"] body,html[data-visual-style="lunar"] body,html[data-visual-style="stone"] body,html[data-visual-style="alien"] body {color:var(--mat-text);background:radial-gradient(circle at 16% 18%,rgba(255,255,255,.045),transparent 26%),repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0 1px,transparent 1px 6px),var(--mat-bg);font-family:"Segoe UI",Arial,sans-serif;}
html[data-visual-style="bunker"] .screen,html[data-visual-style="lunar"] .screen,html[data-visual-style="stone"] .screen,html[data-visual-style="alien"] .screen {background:color-mix(in srgb,var(--mat-bg) 84%,transparent);}
html[data-visual-style="bunker"] .panel,html[data-visual-style="bunker"] .board,html[data-visual-style="bunker"] .map-dialog,html[data-visual-style="bunker"] .help-dialog,html[data-visual-style="bunker"] .quake-load-dialog,
html[data-visual-style="lunar"] .panel,html[data-visual-style="lunar"] .board,html[data-visual-style="lunar"] .map-dialog,html[data-visual-style="lunar"] .help-dialog,html[data-visual-style="lunar"] .quake-load-dialog,
html[data-visual-style="stone"] .panel,html[data-visual-style="stone"] .board,html[data-visual-style="stone"] .map-dialog,html[data-visual-style="stone"] .help-dialog,html[data-visual-style="stone"] .quake-load-dialog,
html[data-visual-style="alien"] .panel,html[data-visual-style="alien"] .board,html[data-visual-style="alien"] .map-dialog,html[data-visual-style="alien"] .help-dialog,html[data-visual-style="alien"] .quake-load-dialog {color:var(--mat-text)!important;background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 40%),var(--mat-panel)!important;border:1px solid var(--mat-edge)!important;border-left:5px solid var(--mat-accent)!important;border-radius:2px!important;box-shadow:0 14px 30px rgba(0,0,0,.32)!important;transform:none!important;}
html[data-visual-style="bunker"] button,html[data-visual-style="bunker"] input,html[data-visual-style="bunker"] select,html[data-visual-style="lunar"] button,html[data-visual-style="lunar"] input,html[data-visual-style="lunar"] select,html[data-visual-style="stone"] button,html[data-visual-style="stone"] input,html[data-visual-style="stone"] select,html[data-visual-style="alien"] button,html[data-visual-style="alien"] input,html[data-visual-style="alien"] select {color:var(--mat-text)!important;background:color-mix(in srgb,var(--mat-panel) 74%,#000)!important;border:1px solid var(--mat-edge)!important;border-radius:2px!important;box-shadow:none!important;}
html[data-visual-style="lunar"] button,html[data-visual-style="lunar"] input,html[data-visual-style="lunar"] select {background:#c6cbc9!important;color:#192429!important;}
html[data-visual-style="bunker"] button:hover:not(:disabled),html[data-visual-style="lunar"] button:hover:not(:disabled),html[data-visual-style="stone"] button:hover:not(:disabled),html[data-visual-style="alien"] button:hover:not(:disabled){background:var(--mat-accent)!important;color:#111!important;border-color:var(--mat-accent)!important;}
html[data-visual-style="bunker"] .low,html[data-visual-style="bunker"] .danger,html[data-visual-style="bunker"] .killfeed b,html[data-visual-style="lunar"] .low,html[data-visual-style="lunar"] .danger,html[data-visual-style="lunar"] .killfeed b,html[data-visual-style="stone"] .low,html[data-visual-style="stone"] .danger,html[data-visual-style="stone"] .killfeed b,html[data-visual-style="alien"] .low,html[data-visual-style="alien"] .danger,html[data-visual-style="alien"] .killfeed b {color:var(--mat-danger)!important;}
html[data-visual-style="bunker"] .pts,html[data-visual-style="bunker"] .timer,html[data-visual-style="bunker"] .map-card-number,html[data-visual-style="lunar"] .pts,html[data-visual-style="lunar"] .timer,html[data-visual-style="lunar"] .map-card-number,html[data-visual-style="stone"] .pts,html[data-visual-style="stone"] .timer,html[data-visual-style="stone"] .map-card-number,html[data-visual-style="alien"] .pts,html[data-visual-style="alien"] .timer,html[data-visual-style="alien"] .map-card-number {color:var(--mat-accent)!important;}
html[data-visual-style="bunker"] .selected,html[data-visual-style="lunar"] .selected,html[data-visual-style="stone"] .selected,html[data-visual-style="alien"] .selected {color:var(--mat-accent)!important;border-color:var(--mat-accent)!important;}
html[data-visual-style="bunker"] .quake-load-fill,html[data-visual-style="lunar"] .quake-load-fill,html[data-visual-style="stone"] .quake-load-fill,html[data-visual-style="alien"] .quake-load-fill {background:linear-gradient(90deg,var(--mat-accent),var(--mat-danger))!important;}
html[data-visual-style="bunker"] #fpsCounter,html[data-visual-style="bunker"] #versionCounter,html[data-visual-style="lunar"] #fpsCounter,html[data-visual-style="lunar"] #versionCounter,html[data-visual-style="stone"] #fpsCounter,html[data-visual-style="stone"] #versionCounter,html[data-visual-style="alien"] #fpsCounter,html[data-visual-style="alien"] #versionCounter {color:var(--mat-text);background:var(--mat-panel);border:1px solid var(--mat-edge);border-left:4px solid var(--mat-accent);border-radius:2px;box-shadow:none;}
html[data-visual-style="bunker"] .panel,html[data-visual-style="bunker"] .board {background-image:linear-gradient(90deg,transparent 49%,rgba(0,0,0,.14) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(0,0,0,.14) 50%,transparent 51%)!important;background-size:64px 64px!important;}
html[data-visual-style="lunar"] .panel,html[data-visual-style="lunar"] .board {background-image:linear-gradient(90deg,rgba(255,255,255,.12),transparent 18%,transparent 82%,rgba(0,0,0,.05))!important;}
html[data-visual-style="stone"] .panel,html[data-visual-style="stone"] .board {background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 2px,transparent 2px 28px)!important;}
html[data-visual-style="alien"] .panel,html[data-visual-style="alien"] .board {box-shadow:0 0 22px rgba(67,199,167,.10),0 14px 30px rgba(0,0,0,.44)!important;background-image:radial-gradient(ellipse at 20% 30%,rgba(67,199,167,.05),transparent 28%),radial-gradient(ellipse at 78% 68%,rgba(116,50,137,.08),transparent 26%)!important;}


/* ================================================================
   FULL-SCREEN BOOT / MAP PREPARATION OVERLAY
   Uses the same HAKROS RENDERKILL branding as the main menu. The
   backdrop is deliberately 100% opaque so the HUD/world can never
   flash before the menu is ready.
   ================================================================ */
html.quake-loading #hud,
html.quake-loading canvas#c {
  visibility: hidden !important;
}

#quakeLoadOverlay.quake-load-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding: 28px;
  opacity: 1;
  background: var(--paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#quakeLoadOverlay.quake-load-overlay.show {
  display: flex;
}

#quakeLoadOverlay .quake-load-dialog {
  width: min(760px, calc(100vw - 56px));
  min-height: 0;
  padding: 0 30px;
  overflow: visible;
  text-align: center;
  color: var(--ink);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

#quakeLoadOverlay .quake-load-dialog::before,
#quakeLoadOverlay .quake-load-scribble {
  display: none !important;
}

#quakeLoadOverlay .quake-load-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 34px;
}

#quakeLoadOverlay .quake-load-logo {
  font-size: clamp(76px, 9vw, 124px);
  margin: 0 !important;
}

#quakeLoadOverlay .quake-load-access-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#quakeLoadOverlay .quake-load-stage {
  min-height: 29px;
  margin: 0 0 13px;
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: .055em;
  color: var(--red);
  text-transform: uppercase;
}

#quakeLoadOverlay .quake-load-bar {
  height: 25px;
  background: color-mix(in srgb, var(--paper) 80%, var(--ink) 20%);
}

#quakeLoadOverlay .quake-load-meta {
  margin-top: 10px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .035em;
}

#quakeLoadOverlay .quake-load-detail {
  text-align: left;
  opacity: .72;
}

#quakeLoadOverlay .quake-load-note {
  margin-top: 13px;
  font-size: 15px;
  opacity: .56;
  text-transform: lowercase;
}

@media (max-width: 700px) {
  #quakeLoadOverlay.quake-load-overlay { padding: 20px; }
  #quakeLoadOverlay .quake-load-dialog { width: min(94vw, 760px); padding: 0 12px; }
  #quakeLoadOverlay .quake-load-logo { font-size: clamp(54px, 15vw, 86px); }
  #quakeLoadOverlay .quake-load-logo-wrap { margin-bottom: 26px; }
  #quakeLoadOverlay .quake-load-meta { font-size: 14px; }
}

/* WebGPU lighting options */
.options-lighting-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--ink-faint, rgba(0,0,0,.16));
}
.options-lighting-status > span { display: flex; flex-direction: column; gap: 3px; }
.options-lighting-status strong { font-size: .78rem; letter-spacing: .08em; }
.options-lighting-status small { opacity: .72; line-height: 1.25; }
.options-lighting-rebuild {
  width: 100%;
  margin-top: 10px;
  min-height: 38px;
  cursor: pointer;
}
.options-lighting-rebuild:disabled { opacity: .38; cursor: not-allowed; }


/* Options footer: close + restore defaults */
.options-dialog-actions { gap: 12px; flex-wrap: wrap; }
#optionsResetDefaults { opacity: .82; }
#optionsResetDefaults:hover { opacity: 1; }


/* ---- Training checkpoint dialog ---- */
.training-dialog {
  width: min(650px, calc(100vw - 44px));
}
.training-dialog .map-dialog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.training-dialog .map-dialog-card {
  min-height: 104px;
  padding-left: 18px;
  text-align: center;
}
.training-dialog .map-dialog-card strong {
  font-size: 28px;
}
.training-dialog .map-dialog-card i {
  font-size: 16px;
}
@media (max-width: 620px) {
  .training-dialog .map-dialog-grid { grid-template-columns: 1fr; }
}


/* multiplayer redesign */
.online.online-redesign {
  width: min(100%, 900px);
  gap: 16px;
  align-items: stretch;
  margin: 12px auto 0;
}
.online.online-redesign .mp-card {
  border: 2px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.10);
  border-radius: 10px 14px 9px 12px / 13px 10px 14px 11px;
  padding: 14px 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 5px 6px 0 rgba(0,0,0,.06);
}
.online.online-redesign .mp-card-title {
  font-size: 15px;
  letter-spacing: 1.8px;
  font-weight: 700;
  opacity: .78;
  margin-bottom: 10px;
}
.online.online-redesign .mp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.online.online-redesign .mp-player-card { width: 100%; }
.online.online-redesign .mp-player-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.online.online-redesign .mp-player-row label,
.online.online-redesign .mp-inline-label {
  font-size: 17px;
  opacity: .72;
}
.online.online-redesign input.namebox {
  width: 100%;
  max-width: 320px;
  justify-self: start;
}
.online.online-redesign .mp-quick-card,
.online.online-redesign .mp-host-card,
.online.online-redesign .mp-join-card,
.online.online-redesign .mp-browse-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.online.online-redesign .mp-quick-card button.big,
.online.online-redesign .mp-host-card > button,
.online.online-redesign .mp-join-card .mp-rejoin {
  align-self: flex-start;
}
.online.online-redesign .radio.radio-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 18px;
}
.online.online-redesign .radio.radio-stack label { line-height: 1.25; }
.online.online-redesign .mapsel {
  justify-content: flex-start;
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.16);
}
.online.online-redesign .mapsel > span { display: none; }
.online.online-redesign .mapbtn {
  min-width: 180px;
  align-items: flex-start;
  text-align: left;
  transform: none;
}
.online.online-redesign .mapbtn i { font-size: 13px; }
.online.online-redesign .mp-join-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.online.online-redesign .mp-join-row input[type=text] {
  width: 180px;
  text-align: center;
}
.online.online-redesign .mp-card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.online.online-redesign .mp-card-head-row .hint {
  text-align: left;
  max-width: none;
}
.online.online-redesign .lobbylist {
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.online.online-redesign .lobbylist .rows {
  max-height: 260px;
  padding-right: 6px;
}
.online.online-redesign .lobbyrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px 10px 8px 9px;
  background: rgba(255,255,255,.08);
}
.online.online-redesign .lobbyrow + .lobbyrow { margin-top: 6px; }
.online.online-redesign .lobbyrow-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.online.online-redesign .lobbyrow-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.online.online-redesign .lobbyrow-text strong {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.online.online-redesign .lobbyrow-text span {
  font-size: 15px;
  opacity: .76;
}
.online.online-redesign .lobbyrow .code {
  font-size: 20px;
  letter-spacing: 3px;
  padding: 4px 10px;
  border: 2px solid rgba(0,0,0,.18);
  border-radius: 8px;
  line-height: 1;
}
.online.online-redesign .lobbyrow button {
  flex: 0 0 auto;
  font-size: 18px;
  padding: 5px 14px;
}
.online.online-redesign .lobbyrow .full {
  flex: 0 0 auto;
  color: var(--red);
  border: 2px dashed var(--red);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 15px;
  letter-spacing: 1px;
}
.online.online-redesign .status {
  min-height: 24px;
  text-align: center;
  font-size: 18px;
}
.online.online-redesign .mp-bottom-row {
  justify-content: center;
}
@media (max-width: 760px) {
  .online.online-redesign .mp-grid { grid-template-columns: 1fr; }
  .online.online-redesign .mp-player-row { grid-template-columns: 1fr; }
  .online.online-redesign input.namebox,
  .online.online-redesign .mp-quick-card button.big,
  .online.online-redesign .mp-host-card > button,
  .online.online-redesign .mp-join-card .mp-rejoin { align-self: stretch; max-width: none; }
  .online.online-redesign .mp-join-row input[type=text] { width: 100%; }
  .online.online-redesign .lobbyrow { flex-direction: column; align-items: stretch; }
  .online.online-redesign .lobbyrow-main { align-items: flex-start; }
}

/* ================================================================
   MULTIPLAYER MENU + MODAL WORKFLOW - 2.35
   The multiplayer landing screen mirrors the main menu. Individual
   tasks move into focused dialogs instead of sharing one dense panel.
   ================================================================ */
.multiplayer-main-menu {
  margin-top: 18px;
}
.multiplayer-main-menu button.alt {
  color: var(--paper);
  background: var(--ink);
}
.multiplayer-menu-status {
  min-height: 24px;
  margin-top: 10px;
  text-align: center;
  font-size: 17px;
  color: var(--red);
}

.multiplayer-action-dialog {
  width: min(720px, calc(100vw - 44px));
}
.multiplayer-action-dialog-wide {
  width: min(1080px, calc(100vw - 44px));
  max-height: min(820px, calc(100vh - 44px));
}
.mp-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px 2px 10px;
}
.mp-field-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.7px;
  opacity: .72;
}
.mp-dialog-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: 10px 14px;
  font: inherit;
  font-size: 27px;
  color: var(--ink);
  background: rgba(255,255,255,.28);
  border: 3px solid var(--ink);
  border-radius: 8px 12px 7px 10px / 11px 7px 12px 8px;
  outline: none;
}
.mp-dialog-input:focus {
  background: rgba(255,255,255,.58);
  box-shadow: 4px 5px 0 rgba(0,0,0,.10);
}
.mp-dialog-input.mp-code-input {
  max-width: 300px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 7px;
  font-size: 34px;
}
.mp-dialog-input.mp-input-error {
  border-color: var(--red);
}
.mp-dialog-help,
.mp-dialog-message {
  min-height: 20px;
  font-size: 16px;
  opacity: .68;
}
.mp-dialog-message {
  color: var(--red);
  opacity: .9;
}
.mp-dialog-message.is-alert {
  min-height: auto;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  background: #b82020;
  color: #fff;
  opacity: 1;
  white-space: pre-line;
  line-height: 1.35;
  font-weight: 700;
}
.mp-option-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 15px;
  border-bottom: 1.5px dashed rgba(0,0,0,.20);
}
.mp-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 8px 11px 7px 10px;
  background: rgba(255,255,255,.18);
}
.mp-radio-row:hover {
  background: rgba(255,255,255,.40);
}
.mp-radio-row input {
  margin-top: 5px;
}
.mp-radio-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mp-radio-row strong {
  font-size: 20px;
}
.mp-radio-row i {
  font-style: normal;
  font-size: 15px;
  opacity: .68;
}
.mp-host-map {
  align-self: flex-start;
  width: min(490px, 100%);
  max-width: 490px;
  transform: none;
}
.multiplayer-action-dialog .mp-dialog-actions {
  gap: 10px;
  align-items: center;
}
.multiplayer-action-dialog .mp-dialog-actions button {
  min-width: 150px;
  padding: 8px 20px;
}
.multiplayer-action-dialog .mp-dialog-actions button:not(.alt) {
  color: var(--paper);
  background: var(--ink);
}

.mp-public-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 14px 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0,0,0,.18);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.mp-public-toolbar button,
.mp-public-row button {
  font: inherit;
  color: var(--paper);
  background: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 7px 10px 6px 9px;
  padding: 6px 16px;
  cursor: pointer;
}
.mp-public-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 290px;
  max-height: min(500px, 55vh);
  overflow-y: auto;
  padding: 4px 8px 4px 10px;
}
.mp-public-row {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border: 2px solid rgba(0,0,0,.16);
  border-radius: 9px 13px 8px 11px / 11px 8px 12px 9px;
  background: rgba(255,255,255,.22);
}
.mp-public-row:nth-child(even) {
  background: rgba(255,255,255,.32);
}
.mp-public-code {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 4px;
}
.mp-public-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mp-public-info strong {
  font-size: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-public-info span {
  margin-top: 2px;
  font-size: 15px;
  opacity: .70;
}
.mp-public-full {
  color: var(--red);
  border: 2px dashed var(--red);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 15px;
  letter-spacing: 1px;
}
.mp-public-empty {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .7px;
  opacity: .72;
}
.mp-public-empty span {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .multiplayer-action-dialog,
  .multiplayer-action-dialog-wide {
    width: calc(100vw - 28px);
  }
  .mp-public-row {
    grid-template-columns: 1fr auto;
  }
  .mp-public-code {
    grid-column: 1 / -1;
  }
  .multiplayer-action-dialog .mp-dialog-actions {
    flex-wrap: wrap;
  }
  .multiplayer-action-dialog .mp-dialog-actions button {
    flex: 1 1 160px;
  }
}


/* ==================================================================
   HUD ADAPTIVE CONTRAST
   Text colour is selected at runtime from the actual rendered pixels
   behind each HUD region. No outline/stroke is used.
   ================================================================== */
#hud .rk-auto-contrast {
  --rk-auto-text: #f7f7f4;
  color: var(--rk-auto-text) !important;
  text-shadow: none !important;
  filter: none !important;
}
#hud .rk-auto-contrast *,
#hud .rk-auto-contrast .pts {
  color: var(--rk-auto-text) !important;
  text-shadow: none !important;
}
#hud .rk-auto-contrast-light { --rk-auto-text: #f7f7f4; }
#hud .rk-auto-contrast-dark  { --rk-auto-text: #111418; }

/* Keep transient/menu status lines in their original theme styling. */
.status,
.multiplayer-menu-status,
.online .status {
  text-shadow: none !important;
  filter: none !important;
}

/* inline public-lobby search progress */
.mp-public-toolbar {
  display: grid;
  grid-template-columns: max-content minmax(220px, 1fr) max-content;
  align-items: center;
  gap: 18px;
}
.mp-public-progress-wrap {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) max-content;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mp-public-progress {
  position: relative;
  height: 17px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 7px 9px 6px 8px;
  background: color-mix(in srgb, var(--paper) 78%, var(--ink) 22%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.16);
}
.mp-public-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 58%, var(--ink) 42%));
  transition: width .16s linear;
}
.mp-public-progress-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 67%, rgba(255,255,255,.38) 68% 76%, transparent 77% 100%);
  opacity: .55;
}
.mp-public-progress-label {
  min-width: 112px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .7px;
  opacity: .76;
  white-space: nowrap;
}
.mp-public-toolbar button:disabled { opacity: .45; cursor: default; }
.mp-public-list {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.mp-public-list::-webkit-scrollbar { width: 12px; }
.mp-public-list::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.mp-public-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
}
.mp-public-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.mp-public-list::-webkit-scrollbar-corner { background: var(--scrollbar-corner); }
.mp-public-searching { min-height: 220px; }
@media (max-width: 760px) {
  .mp-public-toolbar { grid-template-columns: 1fr max-content; }
  .mp-public-toolbar > #mpPublicMeta { grid-column: 1 / -1; }
  .mp-public-progress-wrap { min-width: 0; }
  .mp-public-progress-label { min-width: 92px; font-size: 11px; }
}


/* 2.43 - HAND / FLAT main-menu button consistency
   These two legacy styles used outlined secondary actions while every newer
   theme renders the whole main action stack as one coherent button family. */
html[data-visual-style="hand"] .menu-action-stack .menu-action-btn,
html[data-visual-style="flat"] .menu-action-stack .menu-action-btn {
  color: var(--paper) !important;
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
html[data-visual-style="hand"] .menu-action-stack .menu-action-btn:hover:not(:disabled),
html[data-visual-style="flat"] .menu-action-stack .menu-action-btn:hover:not(:disabled) {
  color: var(--paper) !important;
  background: var(--ink) !important;
  filter: brightness(1.15);
}

/* ==================================================================
   OPTIONS FIXED FRAME + INNER GROUPBOX SCROLL - 2.44
   Keep the window at the GAMEPLAY-tab size for every category.
   Only the active options groupbox scrolls; header/tabs/footer stay fixed.
   ================================================================== */
.options-dialog {
  height: min(740px, calc(100vh - 34px));
  max-height: min(740px, calc(100vh - 34px));
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

.options-dialog-head,
.options-tabs,
.options-dialog-actions {
  flex: 0 0 auto;
}

.options-dialog .options-sections {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  margin-top: 8px;
  overflow: hidden;
}

.options-dialog .options-tab-panel {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.options-dialog .options-tab-panel.active {
  display: block;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  padding-right: 12px;
}

.options-dialog .options-tab-panel.active::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.options-dialog .options-tab-panel.active::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.options-dialog .options-tab-panel.active::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
}
.options-dialog .options-tab-panel.active::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
.options-dialog .options-tab-panel.active::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner);
}

html[data-visual-style="blueprint"] .options-dialog .options-tab-panel.active::-webkit-scrollbar-thumb,
html[data-visual-style="manga"] .options-dialog .options-tab-panel.active::-webkit-scrollbar-thumb,
html[data-visual-style="brutalist"] .options-dialog .options-tab-panel.active::-webkit-scrollbar-thumb {
  border-radius: 2px;
}

/* Keep the section title visible while its contents scroll. */
.options-dialog .options-tab-panel.active > h3 {
  position: sticky;
  top: 0;
  z-index: 2;
}

.options-dialog .options-dialog-actions {
  margin-top: 14px;
  padding-top: 0;
}

@media (max-width: 700px) {
  .options-dialog {
    height: min(740px, calc(100vh - 18px));
    max-height: min(740px, calc(100vh - 18px));
  }
}


/* ==================================================================
   OPTIONS GROUPBOX HEADER OUTSIDE + FIXED INNER SCROLL - 2.45
   ================================================================== */
.options-dialog {
  height: min(780px, calc(100vh - 24px));
  max-height: min(780px, calc(100vh - 24px));
}
.options-dialog .options-sections {
  margin-top: 12px;
}
.options-dialog .options-tab-panel,
.options-dialog .options-tab-panel.active {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  display: none;
}
.options-dialog .options-tab-panel.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.options-dialog .options-tab-panel > h3,
.options-dialog .options-tab-panel.active > h3 {
  position: static !important;
  flex: 0 0 auto;
  margin: 0 0 8px 8px !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 20px;
  line-height: 1.2;
  z-index: auto;
}
.options-dialog .options-groupbox-body {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  padding: 8px 14px 8px;
  border: 2px solid currentColor;
  border-radius: 9px 13px 8px 11px;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.options-dialog .options-groupbox-body::-webkit-scrollbar { width: 12px; height: 12px; }
.options-dialog .options-groupbox-body::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.options-dialog .options-groupbox-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
}
.options-dialog .options-groupbox-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.options-dialog .options-groupbox-body::-webkit-scrollbar-corner { background: var(--scrollbar-corner); }
html[data-visual-style="blueprint"] .options-dialog .options-groupbox-body::-webkit-scrollbar-thumb,
html[data-visual-style="manga"] .options-dialog .options-groupbox-body::-webkit-scrollbar-thumb,
html[data-visual-style="brutalist"] .options-dialog .options-groupbox-body::-webkit-scrollbar-thumb { border-radius: 2px; }
@media (max-width: 700px) {
  .options-dialog {
    height: min(780px, calc(100vh - 12px));
    max-height: min(780px, calc(100vh - 12px));
  }
}

/* ==================================================================
   CROSSHAIR OPTIONS + CUSTOMIZER - 2.46
   ================================================================== */
#hud.crosshair-hidden .crosshair { display: none !important; }

/* Keep the katana reticle behavior untouched; presets apply to gun reticles only. */
#hud[data-crosshair-style="dot"] .crosshair:not(.katana) .ch-t,
#hud[data-crosshair-style="dot"] .crosshair:not(.katana) .ch-b,
#hud[data-crosshair-style="dot"] .crosshair:not(.katana) .ch-l,
#hud[data-crosshair-style="dot"] .crosshair:not(.katana) .ch-r { display: none; }
#hud[data-crosshair-style="dot"] .crosshair:not(.katana) .ch-dot {
  display: block; width: 6px; height: 6px; left: -3px; top: -3px; border-radius: 50%;
}

#hud[data-crosshair-style="compact"] .crosshair:not(.katana) .ch-t,
#hud[data-crosshair-style="compact"] .crosshair:not(.katana) .ch-b {
  display: block; width: 2px; height: 14px; left: -1px; top: -7px; transform-origin: center;
}
#hud[data-crosshair-style="compact"] .crosshair:not(.katana) .ch-t { transform: rotate(45deg); }
#hud[data-crosshair-style="compact"] .crosshair:not(.katana) .ch-b { transform: rotate(-45deg); }
#hud[data-crosshair-style="compact"] .crosshair:not(.katana) .ch-l,
#hud[data-crosshair-style="compact"] .crosshair:not(.katana) .ch-r,
#hud[data-crosshair-style="compact"] .crosshair:not(.katana) .ch-dot { display: none; }

#hud[data-crosshair-style="cross"] .crosshair:not(.katana) { --s: 6px; }
#hud[data-crosshair-style="cross"] .crosshair:not(.katana) .ch-t { width: 2px; height: 7px; left: -1px; top: calc(-1 * var(--s) - 7px); }
#hud[data-crosshair-style="cross"] .crosshair:not(.katana) .ch-b { width: 2px; height: 7px; left: -1px; top: var(--s); }
#hud[data-crosshair-style="cross"] .crosshair:not(.katana) .ch-l { width: 7px; height: 2px; top: -1px; left: calc(-1 * var(--s) - 7px); }
#hud[data-crosshair-style="cross"] .crosshair:not(.katana) .ch-r { width: 7px; height: 2px; top: -1px; left: var(--s); }
#hud[data-crosshair-style="cross"] .crosshair:not(.katana) .ch-dot { display: none; }

#hud .crosshair:not(.katana)::before {
  content: "";
  display: none;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}
#hud[data-crosshair-style="ring"] .crosshair:not(.katana) .ch-t,
#hud[data-crosshair-style="ring"] .crosshair:not(.katana) .ch-b,
#hud[data-crosshair-style="ring"] .crosshair:not(.katana) .ch-l,
#hud[data-crosshair-style="ring"] .crosshair:not(.katana) .ch-r { display: none; }
#hud[data-crosshair-style="ring"] .crosshair:not(.katana)::before {
  display: block; width: 18px; height: 18px; left: -9px; top: -9px;
  border: 2px solid var(--crosshair-color); border-radius: 50%;
}
#hud[data-crosshair-style="ring"] .crosshair:not(.katana) .ch-dot {
  display: block; width: 2px; height: 2px; left: -1px; top: -1px;
}

#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-t,
#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-b,
#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-l,
#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-r {
  width: 5px; height: 5px; border-radius: 50%;
}
#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-t { left: -5px; top: -5px; }
#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-b { left: 1px; top: -5px; }
#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-l { left: -5px; top: 1px; }
#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-r { left: 1px; top: 1px; }
#hud[data-crosshair-style="points"] .crosshair:not(.katana) .ch-dot { display: none; }

.options-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 67px;
  padding: 8px 4px;
  border-top: 2px solid color-mix(in srgb, currentColor 28%, transparent);
}
.options-action-row > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 230px;
}
.options-action-row strong { font-size: 18px; }
.options-action-row small { font-size: 13px; opacity: .60; }
.options-action-row button {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 7px 13px;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 7px 10px 6px 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.options-action-row button:hover { filter: brightness(1.12); }

.crosshair-dialog-overlay { z-index: 128000; }
.crosshair-dialog { width: min(800px, calc(100vw - 44px)); }
.crosshair-dialog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crosshair-choice { min-height: 178px; }
.crosshair-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 86%, var(--ink) 14%);
}
.crosshair-preview-shape {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  color: var(--red);
}
.crosshair-preview-shape i { position: absolute; display: block; background: var(--red); border-radius: 2px; }
.crosshair-preview-shape .ch-t { width: 2px; height: 11px; left: -1px; top: -11px; }
.crosshair-preview-shape .ch-b { width: 2px; height: 11px; left: -1px; top: 0; }
.crosshair-preview-shape .ch-l { width: 11px; height: 2px; top: -1px; left: -11px; }
.crosshair-preview-shape .ch-r { width: 11px; height: 2px; top: -1px; left: 0; }
.crosshair-preview-shape .ch-dot { display: none; width: 2px; height: 2px; left: -1px; top: -1px; border-radius: 50%; }
.crosshair-preview[data-style="dot"] .ch-t,
.crosshair-preview[data-style="dot"] .ch-b,
.crosshair-preview[data-style="dot"] .ch-l,
.crosshair-preview[data-style="dot"] .ch-r { display: none; }
.crosshair-preview[data-style="dot"] .ch-dot { display:block; width: 7px; height: 7px; left: -3.5px; top: -3.5px; }
.crosshair-preview[data-style="compact"] .ch-t,
.crosshair-preview[data-style="compact"] .ch-b { width: 2px; height: 18px; left: -1px; top: -9px; transform-origin: center; display:block; }
.crosshair-preview[data-style="compact"] .ch-t { transform: rotate(45deg); }
.crosshair-preview[data-style="compact"] .ch-b { transform: rotate(-45deg); }
.crosshair-preview[data-style="compact"] .ch-l,
.crosshair-preview[data-style="compact"] .ch-r,
.crosshair-preview[data-style="compact"] .ch-dot { display: none; }
.crosshair-preview[data-style="cross"] .ch-t { width: 2px; height: 8px; left: -1px; top: -13px; }
.crosshair-preview[data-style="cross"] .ch-b { width: 2px; height: 8px; left: -1px; top: 5px; }
.crosshair-preview[data-style="cross"] .ch-l { width: 8px; height: 2px; top: -1px; left: -13px; }
.crosshair-preview[data-style="cross"] .ch-r { width: 8px; height: 2px; top: -1px; left: 5px; }
.crosshair-preview[data-style="cross"] .ch-dot { display: none; }
.crosshair-preview[data-style="ring"] .ch-t,
.crosshair-preview[data-style="ring"] .ch-b,
.crosshair-preview[data-style="ring"] .ch-l,
.crosshair-preview[data-style="ring"] .ch-r { display: none; }
.crosshair-preview[data-style="ring"] .crosshair-preview-shape::before {
  content: ""; position: absolute; width: 20px; height: 20px; left: -10px; top: -10px;
  box-sizing: border-box; border: 2px solid var(--red); border-radius: 50%;
}
.crosshair-preview[data-style="ring"] .ch-dot { display:block; }
.crosshair-preview[data-style="points"] .ch-t,
.crosshair-preview[data-style="points"] .ch-b,
.crosshair-preview[data-style="points"] .ch-l,
.crosshair-preview[data-style="points"] .ch-r { width: 6px; height: 6px; border-radius: 50%; }
.crosshair-preview[data-style="points"] .ch-t { left: -6px; top: -6px; }
.crosshair-preview[data-style="points"] .ch-b { left: 0; top: -6px; }
.crosshair-preview[data-style="points"] .ch-l { left: -6px; top: 0; }
.crosshair-preview[data-style="points"] .ch-r { left: 0; top: 0; }
.crosshair-preview[data-style="points"] .ch-dot { display: none; }

@media (max-width: 760px) {
  .crosshair-dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options-action-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .options-action-row button { width: 100%; }
}
@media (max-width: 500px) {
  .crosshair-dialog-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   OPTIONS VERTICAL SPACING TUNE - 2.47
   Keep the gap above the section title comparable to the footer gap.
   ================================================================== */
.options-dialog .options-tabs {
  margin-bottom: 6px !important;
}
.options-dialog .options-sections {
  margin-top: 4px !important;
}


/* Crosshair customize button integrated into SHOW CROSSHAIR row - 2.48 */
.options-toggle-row.crosshair-toggle-row {
  display: grid;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  grid-template-columns: minmax(230px, 1fr) auto 25px;
  align-items: center;
  gap: 14px;
}
.options-toggle-row.crosshair-toggle-row > span:first-child { min-width: 0; }
.crosshair-inline-customize {
  min-width: 132px;
  padding: 7px 13px;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 7px 10px 6px 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.crosshair-inline-customize:hover { filter: brightness(1.12); }
@media (max-width: 700px) {
  .options-toggle-row.crosshair-toggle-row {
    grid-template-columns: minmax(0, 1fr) auto 25px;
    gap: 10px;
  }
  .crosshair-inline-customize { min-width: 108px; padding-inline: 9px; font-size: 13px; }
}


/* DEBUG TAB + wider fixed options frame - 2.50 */
.options-dialog {
  width: min(980px, calc(100vw - 34px));
}
.options-dialog .options-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.options-dialog .options-tab {
  min-width: 0;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
@media (max-width: 760px) {
  .options-dialog {
    width: min(980px, calc(100vw - 18px));
  }
  .options-dialog .options-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* Main-menu footer: language selector + HELP / OPTIONS / MUSIC utilities. */
.panel { position: relative; }
.panel.main-menu-panel {
  box-sizing: border-box;
  min-width: min(780px, calc(100vw - 34px));
  max-width: min(980px, calc(100vw - 34px));
  padding-bottom: 84px;
}
.main-menu-slogan {
  height: 1.15em;
  min-height: 1.15em;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  line-height: 1.15;
  opacity: 1;
  transition: opacity .36s ease;
}
.main-menu-slogan.is-changing { opacity: 0; }
.main-menu-footer {
  position: absolute;
  left: 28px;
  right: 18px;
  bottom: 16px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  z-index: 4;
  pointer-events: none;
}
.main-menu-language-wrap,
.main-menu-utility-buttons { pointer-events: auto; }
.main-menu-language-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: auto;
}
.main-menu-language {
  box-sizing: border-box;
  width: 235px;
  height: 38px;
  padding: 0 32px 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .035em;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 62%, transparent);
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
}
.main-menu-language:hover,
.main-menu-language:focus { filter: brightness(1.08); }
.main-menu-language option {
  color: var(--ink);
  background: var(--paper);
}
.main-menu-utility-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
}
.menu-utility-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  padding: 0;
  margin: 0;
  font: 700 25px/1 "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 62%, transparent);
  border-radius: 5px;
  cursor: pointer;
  opacity: .88;
  transition: opacity .12s ease, transform .12s ease, filter .12s ease;
}
.menu-utility-toggle:hover { opacity: 1; transform: scale(1.04); }
.menu-help-toggle { font-family: Arial, Helvetica, sans-serif; font-size: 24px; }
.menu-gear-icon { width: 22px; height: 22px; display: grid; place-items: center; }
.menu-gear-icon svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.menu-music-toggle.is-off { opacity: .42; }
.menu-music-toggle.is-off::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
  border-radius: 2px;
}
html[data-visual-style="terminal"] .menu-utility-toggle,
html[data-visual-style="tron"] .menu-utility-toggle { box-shadow: 0 0 10px currentColor; }
@media (max-width: 900px) {
  .panel.main-menu-panel { padding-bottom: 76px; }
  .main-menu-footer { left: 14px; right: 14px; bottom: 12px; height: 34px; }
  .main-menu-language { width: 220px; max-width: 48vw; height: 34px; font-size: 11px; }
  .menu-utility-toggle { width: 34px; height: 34px; flex-basis: 34px; font-size: 22px; }
  .menu-gear-icon, .menu-gear-icon svg { width: 20px; height: 20px; }
  .main-menu-utility-buttons { gap: 8px; }
}
@media (max-width: 520px) {
  .main-menu-footer { gap: 8px; }
  .main-menu-language { width: min(54vw, 205px); padding-left: 7px; font-size: 10px; }
  .main-menu-utility-buttons { gap: 6px; }
}

/* ==================================================================
   GRAPHICS LIVE POV PREVIEW - 2.58
   Shows the actual game framebuffer while camera/weapon POV controls
   are adjusted, so OPTIONS never needs to be closed to compare them.
   ================================================================== */
.graphics-pov-preview {
  margin: 2px 0 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper) 92%);
  border-radius: 7px 9px 6px 8px;
}
.graphics-pov-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.graphics-pov-preview-head > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.graphics-pov-preview-head strong {
  font-size: 13px;
  line-height: 1.1;
}
.graphics-pov-preview-head small {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.15;
  opacity: .62;
}
.graphics-pov-preview-modes {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}
.graphics-pov-preview-modes button {
  min-width: 58px;
  padding: 4px 9px;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.graphics-pov-preview-modes button.active {
  color: var(--paper);
  background: var(--ink);
}
#graphicsPreviewCanvas {
  display: block;
  width: 100%;
  height: 176px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, currentColor 62%, transparent);
  background: #000;
  object-fit: cover;
}
html[data-visual-style="terminal"] #graphicsPreviewCanvas,
html[data-visual-style="tron"] #graphicsPreviewCanvas,
html[data-visual-style="blueprint"] #graphicsPreviewCanvas {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 48%, transparent);
}
@media (max-width: 700px) {
  #graphicsPreviewCanvas { height: 140px; }
  .graphics-pov-preview-head { align-items: flex-start; }
  .graphics-pov-preview-modes button { min-width: 50px; padding-inline: 7px; }
}

/* ==================================================================
   POV CONFIGURATOR DIALOG - 2.59
   Keep the main GRAPHICS tab compact and move the live camera/weapon
   preview into a larger dedicated dialog with a true 16:9 viewport.
   ================================================================== */
.options-pov-row {
  /* Match the compact hierarchy and separator used by the other GRAPHICS rows. */
  min-height: 48px;
  padding: 5px 2px;
  gap: 14px;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.options-pov-row > span:first-child {
  gap: 1px;
  min-width: 190px;
}
.options-pov-row strong {
  font-size: 14px;
  line-height: 1.1;
}
.options-pov-row small {
  font-size: 11px;
  line-height: 1.15;
  opacity: .60;
}

.pov-dialog-overlay {
  z-index: 129000;
  padding: 14px;
}
.pov-dialog {
  width: min(1120px, calc(100vw - 28px));
  height: min(900px, calc(100vh - 28px));
  max-height: min(900px, calc(100vh - 28px));
}
.pov-dialog .pov-dialog-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.pov-dialog .pov-dialog-content::-webkit-scrollbar { width: 12px; }
.pov-dialog .pov-dialog-content::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.pov-dialog .pov-dialog-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
}
.pov-dialog .pov-large-preview {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px;
}
.pov-dialog #graphicsPreviewCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(56vh, 610px);
}
.pov-dialog .pov-dialog-controls {
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 9px 13px 8px 11px;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%);
  padding: 4px 14px 6px;
}
.pov-dialog .pov-dialog-controls .options-select-row,
.pov-dialog .pov-dialog-controls .options-slider-row {
  min-height: 60px;
}
.pov-dialog .pov-dialog-actions {
  margin-top: 10px;
}
.pov-dialog .pov-dialog-actions button {
  min-width: 170px;
}
.pov-dialog .pov-weapon-row select {
  min-width: 250px;
}
@media (max-width: 760px) {
  .pov-dialog-overlay { padding: 7px; }
  .pov-dialog {
    width: calc(100vw - 14px);
    height: calc(100vh - 14px);
    max-height: calc(100vh - 14px);
  }
  .pov-dialog #graphicsPreviewCanvas { max-height: none; }
  .pov-dialog .pov-weapon-row select { min-width: 0; width: 100%; }
}

/* POV CONFIGURATOR - 2.60 */
.pov-dialog .options-slider-row.disabled {
  opacity: .48;
}
.pov-dialog .options-slider-row.disabled input[type="range"] {
  cursor: not-allowed;
}

/* 2.61 - POV/debug/checkpoint refinements */
.graphics-pov-preview-modes button:disabled,
.graphics-pov-preview-modes button.disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.options-reset-confirm-overlay {
  z-index: 131000;
}
.options-reset-confirm {
  width: min(620px, calc(100vw - 44px));
}
.options-reset-confirm-copy {
  margin: 18px 0 8px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 8px;
  line-height: 1.35;
}
.options-reset-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.training-checkpoint-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.training-delete-checkpoint {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .training-checkpoint-grid { grid-template-columns: 1fr; }
  .training-delete-checkpoint { grid-column: auto; }
}

/* ==================================================================
   2.62 - AIM reticle + POV style selector
   ================================================================== */
/* Gun ADS always uses a small dot. This intentionally overrides the normal
   crosshair preset and SHOW CROSSHAIR toggle; sniper scope is excluded in JS. */
#hud .crosshair.ads:not(.katana) {
  display: block !important;
  opacity: 1 !important;
}
#hud.crosshair-hidden .crosshair.ads:not(.katana) { display: block !important; }
#hud .crosshair.ads:not(.katana) .ch-t,
#hud .crosshair.ads:not(.katana) .ch-b,
#hud .crosshair.ads:not(.katana) .ch-l,
#hud .crosshair.ads:not(.katana) .ch-r { display: none !important; }
#hud .crosshair.ads:not(.katana) .ch-dot {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  left: -3px !important;
  top: -3px !important;
  border-radius: 50% !important;
}
#hud .crosshair.ads:not(.katana)::before { display: none !important; }

.pov-preview-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}
.pov-style-inline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
}
.pov-style-inline > span {
  white-space: nowrap;
  opacity: .72;
}
.pov-style-inline select {
  min-width: 190px;
  max-width: 260px;
  height: 30px;
  padding: 3px 28px 3px 8px;
  color: inherit;
  background: var(--paper);
  border: 1px solid currentColor;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 820px) {
  .graphics-pov-preview-head { flex-wrap: wrap; }
  .pov-preview-tools { width: 100%; justify-content: space-between; }
  .pov-style-inline { flex: 1 1 auto; }
  .pov-style-inline select { min-width: 0; width: 100%; }
}
/* Scoped sniper keeps its dedicated scope reticle instead of the ADS dot. */
#hud .crosshair.ads.scope-ads,
#hud.crosshair-hidden .crosshair.ads.scope-ads {
  display: none !important;
  opacity: 0 !important;
}

/* =========================
   HUD RESTRUCTURE — COMPACT PANEL LAYOUT
   Panels use fixed baked-looking 2D textures so HUD text no longer depends on
   the scene behind it. The top stats block is moved beside the status panel,
   while the minimap stays at the upper-right with a tighter frame.
   ========================= */
#hud {
  --rk-hud-text: #f4f7fb;
  --rk-hud-muted: rgba(244, 247, 251, 0.72);
  --rk-hud-accent: #d9e0e7;
  --rk-hud-border: rgba(205, 216, 228, 0.48);
  --rk-hud-shadow: rgba(0, 0, 0, 0.45);
  --rk-hud-surface:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 22%, rgba(0,0,0,0.10) 100%),
    var(--rk-hud-metal-default, var(--rk-hud-metal, none)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 3px, rgba(0,0,0,0.03) 3px 6px),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.12) 0 12%, transparent 13%),
    linear-gradient(180deg, #666d75 0%, #565d65 47%, #434951 100%);
  --rk-hud-minimap-surface:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 22%, rgba(0,0,0,0.12)),
    var(--rk-hud-metal-default, var(--rk-hud-metal, none)),
    linear-gradient(180deg, #5f666e, #464c54);
}
/* Declared on the root, never inside #hud: a value set on #hud would beat the
   one the opacity slider writes on <html> and the slider would do nothing. */
:root { --rk-hud-opacity: 0.50; }
#hud .hud-tl,
#hud .hud-tr,
#hud .hud-bl,
#hud .hud-br,
#hud .hud-minimap-panel {
  mix-blend-mode: normal !important;
  color: var(--rk-hud-text) !important;
}
/* The surface lives on ::before so the opacity slider fades the metal plate
   without ever touching the readouts drawn on top of it. */
#hud .hud-panel {
  position: absolute;
  color: var(--rk-hud-text);
  text-shadow: 0 1px 1px rgba(0,0,0,0.45);
  background: none;
  border: 0;
  border-radius: 12px;
  backdrop-filter: none;
}
#hud .hud-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: var(--rk-hud-surface);
  background-repeat: repeat;
  border: 1px solid var(--rk-hud-border);
  /* The last inset shadow is the scene tint: it bleeds the ambient colour of the
     map into the plate so the HUD sits in the same light as everything else. */
  box-shadow:
    0 10px 28px var(--rk-hud-shadow),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    inset 0 0 0 400px rgba(var(--rk-hud-scene-rgb, 255,255,255), var(--rk-hud-scene-tint, 0));
  filter: brightness(var(--rk-hud-scene-bright, 1));
  transition: filter .35s linear;
  opacity: var(--rk-hud-opacity, 0.50);
}
#hud .hud-panel > * {
  position: relative;
  z-index: 1;
}
#hud .hud-panel-title {
  font: 700 11px/1.1 system-ui, sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--rk-hud-muted);
  margin-bottom: 8px;
}
#hud .hud-panel-subtitle {
  font: 600 10px/1.2 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--rk-hud-muted);
  margin-top: 7px;
}
#hud .hud-inline-label,
#hud .hud-stat-label {
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rk-hud-muted);
}
/* ---------------------------------------------------------------
   Single bottom bar: status ticker on top, four readout segments
   underneath, all inside one metal plate.
   --------------------------------------------------------------- */
#hud .hud-bar {
  left: 18px;
  bottom: 16px;
  transform: none;
  /* Fixed plate: the readouts lay themselves out inside it instead of the
     other way round, so the bar never resizes while playing. */
  width: 750px;
  height: 150px;
  max-width: calc(100vw - 36px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#hud .hud-statusbar { flex: 0 0 auto; }
#hud .hud-bar-body { flex: 1 1 auto; min-height: 0; }
#hud .hud-statusbar {
  position: relative;
}
#hud .hud-statusbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(180deg, rgba(0,0,0,0.32) 0 50%, rgba(255,255,255,0.07) 50% 100%);
  opacity: var(--rk-hud-opacity, 0.50);
  pointer-events: none;
}
/* Row 1: match readouts. Row 2: reloading, modifiers and the score ticker. */
#hud .hud-status-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 13px;
}
#hud .hud-status-match {
  gap: 16px;
  padding-bottom: 3px;
}
#hud .hud-status-feed {
  min-height: 22px;
  padding-top: 2px;
}
#hud .hud-status-feed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0 50%, rgba(255,255,255,0.05) 50% 100%);
  opacity: var(--rk-hud-opacity, 0.50);
  pointer-events: none;
}
#hud .hud-status-pin {
  flex: 0 0 auto;
  display: none;
  padding: 2px 8px;
  border-radius: 4px;
  font: 800 11px/1.35 system-ui, sans-serif !important;
  letter-spacing: 1.6px;
  color: #fff !important;
  background: rgba(216, 60, 60, 0.85);
}
#hud .hud-status-pin.on {
  display: block;
  animation: rkPulse 0.9s ease-in-out infinite;
}
@keyframes rkPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* Absolutely positioned so incoming entries never widen the bar: the panel is
   sized by its readouts, not by whatever the ticker happens to be showing. */
#hud .hud-status-track {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  max-width: 62%;
  overflow: hidden;
  white-space: nowrap;
}
#hud .hud-status-item {
  font: 700 14px/1.2 system-ui, sans-serif;
  letter-spacing: .4px;
  color: var(--rk-hud-muted);
  animation: rkStatusIn .22s ease-out both, rkStatusOut .5s ease-in 1.9s both;
}
#hud .hud-status-item.score { color: var(--rk-hud-text); }
#hud .hud-status-item .pts {
  margin-left: 8px;
  font-size: 17px;
  color: #ffb45e;
}
@keyframes rkStatusIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rkStatusOut { to { opacity: 0; } }

#hud .hud-bar-body {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
#hud .hud-seg-ammo { margin-left: auto; }
#hud .hud-seg-weapon { flex: 0 1 auto; min-width: 0; }
#hud .hud-seg {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 13px 7px;
}
#hud .hud-seg + .hud-seg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35), transparent);
  box-shadow: 1px 0 0 rgba(255,255,255,0.06);
  opacity: var(--rk-hud-opacity, 0.50);
}
#hud .hud-seg-label {
  display: block;
  margin-bottom: 4px;
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--rk-hud-muted);
}
/* Wave timer, active modifier and combo now live in the top status bar, so the
   bar itself no longer grows a second row underneath the readouts. */
#hud .hud-status-note {
  flex: 0 0 auto;
  min-height: 0 !important;
  padding: 2px 7px;
  border-radius: 4px;
  font: 700 11px/1.35 system-ui, sans-serif !important;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--rk-hud-text) !important;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  transform: none;
}
#hud .hud-status-note:empty,
#hud .hud-status-note[hidden] { display: none; }
#hud .hud-status-note.modifier { color: var(--rk-hud-accent) !important; }
#hud .hud-status-note.combo { background: rgba(255,150,80,0.18); }

/* vitals */
#hud .hud-hp { display: flex; align-items: center; gap: 9px; }
#hud .hud-hp b { font: 800 26px/1 system-ui, sans-serif; min-width: 44px; text-align: right; }
#hud .hud-hp .bar {
  flex: 0 0 auto;
  width: 104px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.34);
  background: rgba(0,0,0,0.32);
  overflow: hidden;
  transform: none;
}
#hud .hud-hp .fill {
  display: block;
  height: 100%;
  /* setHealth drives --hp-hue: 126 (green) at full down to 4 (red) at empty. */
  background: linear-gradient(90deg, hsl(var(--hp-hue, 126), 74%, 62%), hsl(var(--hp-hue, 126), 68%, 46%));
  transition: background .25s linear, width .12s linear;
}
#hud.low .hud-hp .bar { border-color: rgba(255,110,110,0.66); }

/* ammo: big magazine count, reserve, grenades and the tally strokes,
   all reading like the original HUD but in the metal palette. */
#hud .hud-ammo { display: flex; align-items: baseline; gap: 7px; }
#hud .hud-ammo b { font: 800 30px/1 system-ui, sans-serif; }
#hud .hud-ammo #reserve { font: 700 16px/1 system-ui, sans-serif; color: var(--rk-hud-muted); }
#hud .nades {
  display: inline-flex;
  gap: 4px;
  margin-left: 9px;
  align-self: center;
}
#hud .nades i {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 11px;
  height: 13px;
  border: 2px solid var(--rk-hud-text);
  border-radius: 50% 50% 45% 45%;
  opacity: .22;
}
#hud .nades i::after {
  content: "";
  position: absolute;
  left: 2px;
  top: -5px;
  width: 3px;
  height: 5px;
  background: var(--rk-hud-muted);
}
#hud .nades i.on { opacity: 1; }
#hud .nades i.on::after { background: #e4574f; }
#hud .tally {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 200px;
  gap: 3px;
  margin-top: 6px;
  min-height: 15px;
  overflow: hidden;
}
#hud .tally i {
  display: block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--rk-hud-text);
  opacity: .82;
  transform: rotate(4deg);
}
#hud .tally i:nth-child(5n) { margin-right: 8px; transform: rotate(-8deg); }


/* match */
#hud .hud-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
#hud .hud-stat-label {
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--rk-hud-muted);
}
#hud .hud-stat b { font: 800 17px/1 system-ui, sans-serif; }
#hud .hud-stat small {
  font: 600 9px/1.1 system-ui, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--rk-hud-muted);
}
#hud .hud-status-match .pvpscore {
  min-height: 0;
  font: 700 14px/1.2 system-ui, sans-serif !important;
  letter-spacing: .6px;
  color: var(--rk-hud-text) !important;
  transform: none;
}
#hud .hud-status-match .pvpscore[hidden] { display: none; }

/* weapon */
#hud .hud-seg-weapon .weapon { font: 800 23px/1 system-ui, sans-serif; letter-spacing: .3px; }
#hud .hud-seg-weapon .hint {
  margin-top: 4px;
  max-width: 250px;
  font: 600 11px/1.3 system-ui, sans-serif;
  color: var(--rk-hud-muted);
}

#hud .hud-minimap-panel {
  right: 20px;
  top: 16px;
  width: 194px;
  padding: 7px;
  border-radius: 10px;
}
#hud .hud-minimap-panel::before { background: var(--rk-hud-minimap-surface); }

#hud .axe-charge {
  right: 20px;
  bottom: 24px;
  width: 194px;
  padding: 9px 10px 10px;
  border-radius: 12px;
  text-align: center;
  mix-blend-mode: normal !important;
  color: var(--rk-hud-text) !important;
}
#hud .axe-charge[hidden] { display: none !important; }
#hud .axe-charge::before {
  background: var(--rk-hud-minimap-surface);
  border-width: 2px;
  box-shadow:
    0 8px 22px var(--rk-hud-shadow),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(0,0,0,.12),
    inset 0 0 0 400px rgba(var(--rk-hud-scene-rgb, 255,255,255), var(--rk-hud-scene-tint, 0));
  opacity: max(.72, var(--rk-hud-opacity, .50));
}
#hud .axe-charge-name {
  margin-bottom: 6px;
  font: 900 10px/1.05 system-ui, sans-serif;
  letter-spacing: .85px;
  text-transform: uppercase;
  color: var(--rk-hud-text);
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
}
#hud .axe-charge-body {
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rk-hud-theme-panel, #2b3036) 72%, #000 28%);
  border: 1px solid color-mix(in srgb, var(--rk-hud-border) 85%, #fff 15%);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 8px rgba(0,0,0,.28);
}
#hud .axe-charge-track {
  position: relative;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(6,9,12,.84);
  border: 2px solid rgba(238,244,248,.72);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.42),
    inset 0 0 10px rgba(0,0,0,.72),
    0 0 0 1px rgba(0,0,0,.58);
}
#hud .axe-charge-fill {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  width: 0;
  max-width: calc(100% - 4px);
  border-radius: 999px;
  background: linear-gradient(to right,
    #235ee1 0%,
    #2da7f7 34%,
    #43d6ff 68%,
    #b8fbff 100%);
  box-shadow: inset 0 0 7px rgba(255,255,255,.24), 0 0 10px rgba(67,214,255,.16);
  transition: width .12s linear;
}
#hud .axe-charge-gloss {
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      transparent 0 32.8%, rgba(255,255,255,.38) 32.8% 33.5%, transparent 33.5% 66.1%,
      rgba(255,255,255,.38) 66.1% 66.8%, transparent 66.8% 100%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
#hud .axe-charge-readout {
  min-height: 15px;
  margin-top: 6px;
  font: 800 10px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
#hud .axe-charge.ready .axe-charge-body {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.40), 0 0 12px color-mix(in srgb, #43d6ff 70%, transparent);
}
#hud .axe-charge.ready .axe-charge-fill {
  background: linear-gradient(to right, #2aa6ff 0%, #47dbff 45%, #86f7ff 76%, #e7ffff 100%);
}
#hud .axe-charge.ready .axe-charge-readout {
  color: #dffcff;
}
html.rk-hud-off #hud .axe-charge { display: none !important; }
#hud.nogame .axe-charge { display: none !important; }

/* Vertical training-mode indicator. It shares the minimap material so it follows
   the active HUD/theme, while the saturated meter remains immediately readable. */
#hud .mode-indicator {
  left: 12px;
  top: 47px;
  width: 72px;
  min-height: 210px;
  padding: 8px 8px 9px;
  border-radius: 18px;
  text-align: center;
  mix-blend-mode: normal !important;
  color: var(--rk-hud-text) !important;
  transition: top .16s ease, opacity .16s ease, transform .16s ease;
}
#hud .mode-indicator[hidden] { display: none !important; }
#hud .mode-indicator::before {
  background: var(--rk-hud-minimap-surface);
  border-width: 2px;
  box-shadow:
    0 8px 22px var(--rk-hud-shadow),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(0,0,0,.12),
    inset 0 0 0 400px rgba(var(--rk-hud-scene-rgb, 255,255,255), var(--rk-hud-scene-tint, 0));
  opacity: max(.72, var(--rk-hud-opacity, .50));
}
#hud .mode-indicator-name {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  padding: 0 1px;
  font: 900 9px/1.05 system-ui, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--rk-hud-text);
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
}
#hud .mode-indicator-body {
  width: 44px;
  height: 148px;
  margin: 0 auto;
  padding: 5px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--rk-hud-theme-panel, #2b3036) 72%, #000 28%);
  border: 1px solid color-mix(in srgb, var(--rk-hud-border) 85%, #fff 15%);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 8px rgba(0,0,0,.28);
}
#hud .mode-indicator-tube {
  position: relative;
  width: 32px;
  height: 136px;
  margin: 0 auto;
  overflow: visible;
  border-radius: 16px;
  background: rgba(6,9,12,.84);
  border: 2px solid rgba(238,244,248,.72);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.42),
    inset 0 0 10px rgba(0,0,0,.72),
    0 0 0 1px rgba(0,0,0,.58);
}
#hud .mode-indicator-fill {
  position: absolute;
  z-index: 1;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 0;
  max-height: calc(100% - 4px);
  border-radius: 12px;
  background: linear-gradient(to top,
    #e62116 0% 18%,
    #ff7a09 18% 38%,
    #ffd31b 38% 60%,
    #8ed51a 60% 82%,
    #13ba45 82% 100%);
  box-shadow: inset 0 0 7px rgba(255,255,255,.20), 0 0 8px rgba(255,220,80,.10);
  transition: height .10s linear;
}
#hud .mode-indicator[data-tone="danger"] .mode-indicator-fill {
  background: linear-gradient(to top,
    #14b948 0% 18%,
    #83d31c 18% 38%,
    #ffd31b 38% 60%,
    #ff7a09 60% 82%,
    #e62116 82% 100%);
}
#hud .mode-indicator[data-tone="neutral"] .mode-indicator-fill {
  background: linear-gradient(to top,
    #2459c5 0% 20%,
    #2c91d4 20% 40%,
    #31c6d5 40% 60%,
    #75d76d 60% 80%,
    #e4df68 80% 100%);
}
#hud .mode-indicator-segments {
  position: absolute;
  z-index: 2;
  inset: 2px;
  border-radius: 12px;
  pointer-events: none;
  background: repeating-linear-gradient(to top,
    transparent 0,
    transparent calc(var(--mode-step) - 1px),
    rgba(5,8,10,.72) calc(var(--mode-step) - 1px),
    rgba(5,8,10,.72) var(--mode-step));
}
#hud .mode-indicator-threshold {
  position: absolute;
  z-index: 4;
  left: -5px;
  right: -5px;
  height: 2px;
  background: #f8fbff;
  box-shadow: 0 0 5px rgba(255,255,255,.75), 0 1px 1px rgba(0,0,0,.9);
}
#hud .mode-indicator-threshold::before,
#hud .mode-indicator-threshold::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
#hud .mode-indicator-threshold::before { left: -1px; border-left: 5px solid #f8fbff; }
#hud .mode-indicator-threshold::after { right: -1px; border-right: 5px solid #f8fbff; }
#hud .mode-indicator-cursor {
  position: absolute;
  z-index: 5;
  left: -7px;
  width: 42px;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,.9), 0 1px 1px rgba(0,0,0,.85);
  transition: bottom .10s linear;
}
#hud .mode-indicator-cursor::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 0;
  border-left: 6px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.85));
}
#hud .mode-indicator-readout {
  min-height: 25px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 1px 0;
  font: 800 9px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.15px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  overflow-wrap: anywhere;
}
#hud .mode-indicator.alert .mode-indicator-body {
  animation: rk-mode-alert .46s ease-in-out infinite alternate;
}
#hud .mode-indicator.complete .mode-indicator-body {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), 0 0 12px color-mix(in srgb, var(--rk-hud-accent) 65%, transparent);
}
@keyframes rk-mode-alert {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.22); transform: scale(1.025); }
}
html.rk-fps-off #hud .mode-indicator { top: 10px; }
html.rk-fps-large #hud .mode-indicator { top: 63px; }
#hud.nogame .mode-indicator { display: none !important; }

#hud #minimap {
  filter: brightness(var(--rk-hud-scene-bright, 1));
  transition: filter .35s linear;
}
#hud #minimap {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #14181c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(0,0,0,0.30);
}
#hud .slots,
#hud .killfeed { display: none !important; }

/* HUD option switches */
html.rk-minimap-off #hud .hud-minimap-panel { display: none !important; }
html.rk-hud-off #hud .hud-bar { display: none !important; }

#hud .board {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: min(70vw, 720px);
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--rk-hud-text);
  background: linear-gradient(180deg, rgba(30,36,42,0.96), rgba(20,24,28,0.94));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 28px rgba(0,0,0,0.45);
  font: 600 14px/1.35 system-ui, sans-serif;
}
#hud .killfeed {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 26px;
  transform: translateX(-50%);
  width: min(40vw, 520px);
  text-align: center;
  font-size: 27px;
  pointer-events: none;
}
#hud .killfeed div {
  animation: kf 1.7s ease-out forwards;
}
#hud .killfeed .pts {
  color: var(--red);
}
#hud.nogame .hud-bar,
#hud.nogame .hud-minimap-panel,
#hud.nogame .board {
  display: none;
}
@media (max-width: 820px) {
  #hud .hud-minimap-panel { width: 150px; }
  #hud .hud-bar { left: 12px; bottom: 12px; }
  #hud .hud-seg { padding: 6px 10px 7px; }
  #hud .hud-hp b { font-size: 24px; min-width: 44px; }
  #hud .hud-ammo b { font-size: 27px; }
  #hud .hud-seg-weapon .weapon { font-size: 21px; }
  #hud .hud-seg-weapon .hint { max-width: 180px; }
}

/* Themed HUD skins driven directly by the same palette as the main menu.
   Material themes use --mat-panel / --mat-text / --mat-edge / --mat-accent;
   the older graphic themes fall back to --paper / --ink / --red. The baked
   procedural tile is rebuilt only when the visual style changes. */
html[data-visual-style] #hud.theme-hud {
  --rk-hud-theme-panel: var(--mat-panel, var(--paper));
  --rk-hud-theme-text: var(--mat-text, var(--ink));
  --rk-hud-theme-edge: var(--mat-edge, var(--ink));
  --rk-hud-theme-accent: var(--mat-accent, var(--red));

  --rk-hud-text: var(--rk-hud-theme-text);
  --rk-hud-muted: color-mix(in srgb, var(--rk-hud-theme-text) 70%, transparent);
  --rk-hud-accent: var(--rk-hud-theme-accent);
  --rk-hud-border: color-mix(in srgb, var(--rk-hud-theme-edge) 60%, transparent);
  --rk-hud-shadow: color-mix(in srgb, var(--rk-hud-theme-panel) 30%, #000 70%);

  --rk-hud-surface:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 10%, transparent) 0%,
      transparent 26%,
      color-mix(in srgb, #000 14%, transparent) 100%),
    var(--rk-hud-metal-themed, var(--rk-hud-metal-default, none)),
    linear-gradient(180deg,
      color-mix(in srgb, var(--rk-hud-theme-panel) 92%, #fff 8%) 0%,
      var(--rk-hud-theme-panel) 52%,
      color-mix(in srgb, var(--rk-hud-theme-panel) 82%, #000 18%) 100%);

  --rk-hud-minimap-surface:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 8%, transparent) 0%,
      color-mix(in srgb, #000 12%, transparent) 100%),
    var(--rk-hud-metal-themed, var(--rk-hud-metal-default, none)),
    linear-gradient(180deg,
      color-mix(in srgb, var(--rk-hud-theme-panel) 94%, #fff 6%) 0%,
      color-mix(in srgb, var(--rk-hud-theme-panel) 84%, #000 16%) 100%);
}

/* Match the stronger UI identities of the main menu without replacing the
   shared palette above. These only add texture/edge character. */
html[data-visual-style="terminal"] #hud.theme-hud {
  --rk-hud-shadow: rgba(0,0,0,.70);
}
html[data-visual-style="terminal"] #hud.theme-hud .hud-panel {
  text-shadow: 0 0 6px color-mix(in srgb, var(--ink) 55%, transparent);
}
html[data-visual-style="tron"] #hud.theme-hud,
html[data-visual-style="synthwave"] #hud.theme-hud {
  --rk-hud-border: color-mix(in srgb, var(--ink) 72%, transparent);
}
html[data-visual-style="blueprint"] #hud.theme-hud {
  --rk-hud-surface:
    linear-gradient(rgba(191,246,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,246,255,.045) 1px, transparent 1px),
    var(--rk-hud-metal-themed, var(--rk-hud-metal-default, none)),
    linear-gradient(180deg,
      color-mix(in srgb, var(--rk-hud-theme-panel) 94%, #fff 6%),
      color-mix(in srgb, var(--rk-hud-theme-panel) 84%, #000 16%));
  background-size: 18px 18px, 18px 18px, auto, auto;
}
html[data-visual-style="manga"] #hud.theme-hud {
  --rk-hud-border: var(--ink);
  --rk-hud-shadow: rgba(0,0,0,.52);
}
html[data-visual-style="brutalist"] #hud.theme-hud {
  --rk-hud-border: color-mix(in srgb, var(--ink) 55%, transparent);
}


/* ---- Training mode selection ---- */
.training-mode-dialog {
  width: min(1040px, calc(100vw - 34px));
  /* Taller modal so three complete rows of training modes remain visible
     on normal desktop resolutions before the internal list scrolls. */
  max-height: min(860px, calc(100vh - 24px));
  overflow: hidden;
  padding: 20px 22px 16px 32px;
}
.training-mode-dialog::before {
  left: 18px;
}
.training-mode-dialog .map-dialog-head {
  gap: 14px;
  margin-bottom: 12px;
}
.training-mode-dialog .map-dialog-head h2 {
  font-size: clamp(30px, 4.2vw, 42px);
}
.training-mode-dialog .map-dialog-head p {
  margin-top: 6px;
  font-size: 14px;
}
.training-mode-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-left: auto;
}
/* Reuse the exact OPTIONS select styling instead of maintaining a second
   combo skin. Only the layout of the row is changed for this compact header. */
.training-mode-speed-picker.options-select-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-content: stretch;
  gap: 6px;
  min-width: 230px;
  min-height: 0;
  padding: 0;
  border-top: 0;
}
.training-mode-speed-picker.options-select-row > span:first-child {
  min-width: 0;
}
.training-mode-speed-picker.options-select-row select {
  width: 100%;
  min-width: 230px;
  min-height: 44px;
}
.training-mode-dialog .map-dialog-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
}
.training-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-height: min(720px, calc(100vh - 150px));
  overflow-x: hidden;
  overscroll-behavior: contain;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
}
.training-mode-grid::-webkit-scrollbar {
  width: 8px;
}
.training-mode-grid::-webkit-scrollbar-track {
  background: transparent;
}
.training-mode-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 999px;
}
.training-mode-grid::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, currentColor 60%, transparent);
}
.training-mode-card {
  min-height: 196px;
  padding: 16px 16px 14px;
  text-align: left;
}
.training-mode-card .training-mode-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 700;
  opacity: .55;
}
.training-mode-card strong {
  font-size: 26px;
  line-height: .94;
}
.training-mode-card i {
  min-height: 0;
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.14;
}
.training-mode-card em {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
}
.training-mode-card small {
  display: block;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.22;
  opacity: .78;
}
.training-mode-card.selected small,
.training-mode-card.selected i {
  opacity: .82;
}
@media (max-width: 980px) {
  .training-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .training-mode-dialog .map-dialog-head {
    flex-direction: column;
    align-items: stretch;
  }
  .training-mode-toolbar {
    width: 100%;
    align-items: flex-end;
  }
  .training-mode-speed-picker.options-select-row {
    min-width: 0;
    flex: 1 1 auto;
  }
  .training-mode-speed-picker.options-select-row select {
    min-width: 0;
  }
  .training-mode-grid { grid-template-columns: 1fr; }
  .training-mode-card { min-height: 0; }
  .training-mode-card i { min-height: 0; }
}

/* X-RAY visual style: menu/HUD palette matches the monochrome scan. */
html[data-visual-style="xray"] {
  --ink: #f3f3f3;
  --red: #ff1d1d;
  --paper: #050505;
  --mat-bg: #000000;
  --mat-panel: #0b0b0b;
  --mat-edge: #a8a8a8;
  --mat-accent: #ffffff;
  --mat-danger: #ff1d1d;
  --mat-text: #f5f5f5;
}
html[data-visual-style="xray"] body {
  color: var(--mat-text);
  background: #000;
  font-family: "Segoe UI", Arial, sans-serif;
}
html[data-visual-style="xray"] .screen {
  background: rgba(0,0,0,.86);
}
html[data-visual-style="xray"] .panel,
html[data-visual-style="xray"] .board,
html[data-visual-style="xray"] .map-dialog,
html[data-visual-style="xray"] .help-dialog,
html[data-visual-style="xray"] .quake-load-dialog {
  color: var(--mat-text) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), #080808 !important;
  border: 1px solid #8d8d8d !important;
  border-left: 5px solid #ffffff !important;
  border-radius: 2px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.72) !important;
  transform: none !important;
}
html[data-visual-style="xray"] button,
html[data-visual-style="xray"] input,
html[data-visual-style="xray"] select {
  color: #f5f5f5 !important;
  background: #0c0c0c !important;
  border: 1px solid #777 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
html[data-visual-style="xray"] button:hover:not(:disabled) {
  color: #000 !important;
  background: #fff !important;
  border-color: #fff !important;
}
html[data-visual-style="xray"] .low,
html[data-visual-style="xray"] .danger,
html[data-visual-style="xray"] .killfeed b,
html[data-visual-style="xray"] .pts {
  color: #ff1d1d !important;
}
html[data-visual-style="xray"] #fpsCounter,
html[data-visual-style="xray"] #versionCounter {
  color: #fff;
  background: #090909;
  border: 1px solid #777;
  border-left: 4px solid #fff;
}
#hud .nades .grenade-infinite {
  display: inline-block;
  min-width: 28px;
  font: 900 25px/1 system-ui, sans-serif;
  text-align: center;
  color: currentColor;
}

/* OPTIONS header language selector */
@media (max-width: 860px) {
  .options-dialog-head {
    align-items: stretch;
    flex-direction: column;
  }
  .options-dialog-head-tools {
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
  }
  .options-dialog-language {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
  }
}
@media (max-width: 560px) {
  .options-dialog-head-tools {
    flex-direction: column;
    align-items: stretch;
  }
  .options-dialog-language {
    max-width: none;
    width: 100%;
  }
  .options-dialog-close {
    align-self: flex-end;
  }
}

/* ---- HELP redesign: launcher + dedicated control dialogs ---- */
.help-hub-dialog {
  width: min(700px, calc(100vw - 42px));
  min-height: 620px;
  max-height: min(760px, calc(100vh - 42px));
  overflow: hidden;
  padding: 28px 40px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.help-hub-dialog::before { left: 0; }
.help-hub-close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 4;
}
.help-hub-logo {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 12px;
  padding-top: 4px;
}
.help-hub-logo .help-brand-logo {
  font-size: clamp(58px, 9vw, 88px);
  margin: 0 !important;
}
.help-hub-title {
  margin: 4px 0 28px;
  font-size: clamp(36px, 5vw, 46px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: .02em;
}
.help-hub-buttons {
  width: min(490px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.help-hub-button {
  width: 100%;
  min-height: 68px;
  padding: 10px 18px;
  font: inherit;
  font-size: 25px;
  color: var(--ink);
  background: rgba(248,245,233,.30);
  border: 1px solid color-mix(in srgb, var(--ink) 58%, transparent);
  border-left: 5px solid var(--red);
  border-radius: 0;
  cursor: pointer;
  text-align: center;
}
.help-hub-button:hover { filter: brightness(1.08); }

.help-controls-dialog {
  width: min(1240px, calc(100vw - 24px));
  max-height: min(780px, calc(100vh - 24px));
  overflow: auto;
  padding: 18px 22px 16px 34px;
}
.help-controls-dialog .help-dialog-head { margin-bottom: 10px; }
.help-controls-dialog .help-dialog-head h2 { font-size: clamp(34px, 4.8vw, 64px); }
.help-controls-dialog .help-dialog-head p { margin-top: 4px; font-size: 16px; }
.help-controls-content { padding: 0; }
.help-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.help-control-grid.help-control-grid-3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.help-control-section {
  min-width: 0;
  border: 2px solid color-mix(in srgb, var(--ink) 58%, transparent);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  padding: 11px 12px 10px;
}
.help-control-section h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 54%, transparent);
  color: var(--red);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
}
.help-control-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.help-control-row {
  display: grid;
  grid-template-columns: minmax(102px, .68fr) minmax(0, 1.55fr);
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.help-control-row:last-child { border-bottom: 0; }
.help-control-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 8px;
  color: var(--red);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 46%, transparent);
  border-radius: 2px;
  font: 800 13px/1.1 "Segoe UI", Arial, sans-serif;
  text-align: center;
  white-space: normal;
}
.help-control-row span {
  min-width: 0;
  font-size: 13px;
  line-height: 1.18;
}
.help-vr-note {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-left: 5px solid var(--red);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: 12px;
  line-height: 1.24;
  text-align: left;
  opacity: .82;
}

@media (max-width: 980px) {
  .help-control-grid.help-control-grid-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .help-hub-dialog { min-height: 0; padding: 24px 22px 28px; }
  .help-hub-logo .help-brand-logo { font-size: clamp(46px, 15vw, 68px); }
  .help-hub-title { margin-bottom: 22px; }
  .help-hub-button { font-size: 20px; min-height: 58px; }
  .help-controls-dialog { width: min(100vw - 14px, 1240px); max-height: calc(100vh - 14px); padding: 14px 14px 12px 18px; }
  .help-control-grid, .help-control-grid.help-control-grid-3col { grid-template-columns: 1fr; }
  .help-control-row { grid-template-columns: minmax(92px, .62fr) minmax(0, 1.5fr); gap: 9px; }
}

/* ================================================================
   THEME-AWARE MENU KEY TEXT
   Important menu labels/keys use a theme-specific accent instead of
   always inheriting the global danger red. Danger/error states keep --red.
   ================================================================ */
:root {
  --ui-key-text: #d02030;
}
html[data-visual-style="hand"]       { --ui-key-text: #d02030; }
html[data-visual-style="terminal"]   { --ui-key-text: #ffc84a; }
html[data-visual-style="tron"]       { --ui-key-text: #ff2aa8; }
html[data-visual-style="flat"]       { --ui-key-text: #5a32a3; }
html[data-visual-style="blueprint"]  { --ui-key-text: #ffe36e; }
html[data-visual-style="papercraft"] { --ui-key-text: #7a4a1d; }
html[data-visual-style="manga"]      { --ui-key-text: #111216; }
html[data-visual-style="brutalist"]  { --ui-key-text: #ffcc30; }
html[data-visual-style="synthwave"]  { --ui-key-text: #ffca58; }
html[data-visual-style="industrial"] { --ui-key-text: #e2a928; }
html[data-visual-style="concrete"]   { --ui-key-text: #f0c97b; }
html[data-visual-style="rusted"]     { --ui-key-text: #d47b26; }
html[data-visual-style="military"]   { --ui-key-text: #c8ad55; }
html[data-visual-style="scifi"]      { --ui-key-text: #50c7cf; }
html[data-visual-style="retro_scifi"]{ --ui-key-text: #d98733; }
html[data-visual-style="psx"]        { --ui-key-text: #c6a43c; }
html[data-visual-style="pc90s"]      { --ui-key-text: #d7a12d; }
html[data-visual-style="bunker"]     { --ui-key-text: #b49a45; }
html[data-visual-style="lunar"]      { --ui-key-text: #8b4a12; }
html[data-visual-style="stone"]      { --ui-key-text: #b99b53; }
html[data-visual-style="alien"]      { --ui-key-text: #43c7a7; }
html[data-visual-style="xray"]       { --ui-key-text: #ffffff; }

/* Key labels, selected tabs, mode starts and control-key caps. */
.options-section h3,
.options-dialog .options-tab.active,
.help-dialog-content .cols b,
.help-control-section h3,
.help-control-row kbd,
.map-dialog-card em,
.map-preview-name,
.panel .pause-mode-start,
.panel .cols b,
.panel .stats b,
.settings b,
.tip b,
.quake-load-stage,
.quake-load-percent,
.map-library-external strong {
  color: var(--ui-key-text) !important;
}

/* Decorative accents that belong to those key labels use the same colour. */
.help-hub-button,
.help-vr-note {
  border-left-color: var(--ui-key-text) !important;
}

/* The light themes need a darker key colour on pale surfaces. */
html[data-visual-style="flat"] .help-control-section h3,
html[data-visual-style="flat"] .help-control-row kbd,
html[data-visual-style="flat"] .options-section h3,
html[data-visual-style="flat"] .options-tab.active,
html[data-visual-style="papercraft"] .help-control-section h3,
html[data-visual-style="papercraft"] .help-control-row kbd,
html[data-visual-style="papercraft"] .options-section h3,
html[data-visual-style="papercraft"] .options-tab.active,
html[data-visual-style="manga"] .help-control-section h3,
html[data-visual-style="manga"] .help-control-row kbd,
html[data-visual-style="manga"] .options-section h3,
html[data-visual-style="manga"] .options-tab.active,
html[data-visual-style="lunar"] .help-control-section h3,
html[data-visual-style="lunar"] .help-control-row kbd,
html[data-visual-style="lunar"] .options-section h3,
html[data-visual-style="lunar"] .options-tab.active {
  text-shadow: none !important;
}

html[data-visual-style="manga"] .help-control-row span,
html[data-visual-style="manga"] .help-dialog-head p,
html[data-visual-style="manga"] .options-toggle-row small,
html[data-visual-style="manga"] .options-slider-row small,
html[data-visual-style="manga"] .options-select-row small,
html[data-visual-style="manga"] .map-dialog-card i,
html[data-visual-style="manga"] .pause-mode-desc,
html[data-visual-style="manga"] .pause-mode-kicker,
html[data-visual-style="manga"] .pause-mode-start,
html[data-visual-style="manga"] .help-vr-note,
html[data-visual-style="manga"] .online small,
html[data-visual-style="manga"] .sub,
html[data-visual-style="manga"] .small,
html[data-visual-style="manga"] p,
html[data-visual-style="manga"] li {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
html[data-visual-style="manga"] .help-control-row kbd {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}


/* F6 graphics-preset notice: text only, centered at the top of gameplay. */
#rkGraphicsModeToast {
  position: fixed;
  left: 50%;
  top: clamp(22px, 5.5vh, 58px);
  z-index: 2147483000;
  transform: translate(-50%, -8px);
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-align: center;
  font-family: inherit;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .055em;
  color: var(--ink, #111);
  text-shadow: 0 1px 0 var(--paper, #fff), 1px 0 0 var(--paper, #fff), 0 -1px 0 var(--paper, #fff), -1px 0 0 var(--paper, #fff);
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
}
#rkGraphicsModeToast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 4.27 - per-weapon HIP yaw control in the POV configurator */
.pov-dialog .pov-rotation-control {
  gap: 10px;
}
.pov-dialog .pov-rotation-control input[type="range"] {
  flex: 1 1 auto;
  min-width: 120px;
}


/* ================================================================
   GRAPPLE OPTIONS TAB - 4.38
   Dense four-column tuning layout so the complete grapple setup fits
   in the fixed options frame on normal desktop resolutions.
   ================================================================ */
.options-dialog .options-tabs {
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
}
.options-dialog .options-tab[hidden] { display: none !important; }
.options-dialog .grapple-options-body {
  padding: 8px 10px 9px;
}
.options-dialog .grapple-preset-row {
  min-height: 48px;
  margin-bottom: 7px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 7px;
}
.options-dialog .grapple-preset-row > span:first-child { min-width: 0; }
.options-dialog .grapple-preset-row select { min-width: 170px; }
.options-dialog .grapple-tuning-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 7px;
  align-items: stretch;
}
.options-dialog .grapple-tuning-grid .grapple-tuning-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 3px;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, currentColor 23%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 96%, var(--ink) 4%);
}
.options-dialog .grapple-tuning-grid .grapple-tuning-row > span:first-child {
  min-width: 0;
  gap: 1px;
}
.options-dialog .grapple-tuning-grid .grapple-tuning-row strong {
  font-size: 11px;
  line-height: 1.05;
  letter-spacing: .1px;
}
.options-dialog .grapple-tuning-grid .grapple-tuning-row small {
  display: none;
}
.options-dialog .grapple-tuning-grid .options-slider-control {
  width: 100%;
  min-width: 0;
  gap: 5px;
}
.options-dialog .grapple-tuning-grid .options-slider-control input[type="range"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.options-dialog .grapple-tuning-grid .options-slider-control b {
  flex: 0 0 auto;
  min-width: 42px;
  font-size: 11px;
}
.options-dialog .grapple-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.options-dialog .grapple-reset-row button { min-width: 210px; }
@media (max-width: 900px) {
  .options-dialog .grapple-tuning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .options-dialog .grapple-tuning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options-dialog .grapple-preset-row { align-items: flex-start; flex-direction: column; }
  .options-dialog .grapple-preset-row select { width: 100%; }
}


/* ================================================================
   MODES OPTIONS TAB - 4.41
   Per-training-mode starting loadout and kill-cadence editor.
   ================================================================ */
.options-dialog .modes-options-body {
  padding: 9px 11px 10px;
}
.options-dialog .modes-select-row {
  margin-bottom: 8px;
}
.options-dialog .modes-select-row select {
  min-width: 235px;
}
.options-dialog .modes-config-card {
  padding: 8px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 97%, var(--ink) 3%);
}
.options-dialog .modes-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.options-dialog .modes-config-head > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.options-dialog .modes-config-head small {
  opacity: .72;
  font-size: 11px;
}
.options-dialog .modes-config-tools {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.options-dialog .modes-config-tools button {
  min-width: 82px;
  padding: 6px 9px;
}
.options-dialog .modes-weapons-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px 7px;
}
.options-dialog .modes-weapon-choice {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper) 95%, var(--ink) 5%);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.05;
}
.options-dialog .modes-weapon-choice input {
  flex: 0 0 auto;
  margin: 0;
}
.options-dialog .modes-random-choice {
  border-style: dashed;
}
.options-dialog .modes-kills-row {
  margin-top: 8px;
}
.options-dialog .modes-kills-row[hidden] { display: none !important; }
.options-dialog .modes-export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.options-dialog .modes-export-row > span {
  display: flex;
  flex-direction: column;
}
.options-dialog .modes-export-row small { opacity: .72; }
.options-dialog .modes-export-row button { min-width: 150px; }
@media (max-width: 900px) {
  .options-dialog .modes-weapons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .options-dialog .modes-weapons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options-dialog .modes-config-head, .options-dialog .modes-export-row { align-items: stretch; flex-direction: column; }
  .options-dialog .modes-select-row select { min-width: 0; width: 100%; }
}

/* ================================================================
   NON-SELECTABLE APPLICATION UI - 4.44
   The game UI behaves like a native application: labels, menus, tabs,
   headings and buttons cannot be text-selected and never show a text caret.
   Editable fields explicitly opt back into text selection below.
   ================================================================ */
html,
body,
body * {
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}

/* Ordinary UI chrome should use the arrow instead of the browser I-beam. */
body,
body * {
  cursor: default;
}

/* Interactive controls keep an appropriate interaction cursor. */
button:not(:disabled),
a[href],
label:has(input:not(:disabled)),
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="range"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select) {
  cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
}

/* Genuine editable controls remain fully selectable/editable. */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  caret-color: auto;
  cursor: text;
}

/* Browser-native select boxes are interactive but their labels are not text. */
select,
option {
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}


/* OPTIONS tabs layout - 4.56
   Main tabs stay on the first row. Optional debug-driven tabs
   (GRAPPLE / MODES) render on a second row below when enabled. */
.options-dialog .options-tabs {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.options-dialog .options-tabs-main,
.options-dialog .options-tabs-debug {
  display: grid;
  gap: 6px;
}
.options-dialog .options-tabs-main {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.options-dialog .options-tabs-debug {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-self: stretch;
  width: 100%;
}
.options-dialog .options-tab {
  min-width: 0;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}
.options-dialog .options-tab[hidden] { display: none !important; }
@media (max-width: 760px) {
  .options-dialog .options-tabs-main,
  .options-dialog .options-tabs-debug {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .options-dialog .options-tabs-debug {
    width: 100%;
  }
}

/* Hide the optional second tab row when neither optional debug tab is enabled. */
.options-dialog .options-tabs-debug[hidden] { display: none !important; }

/* MAPS options tab - 4.74 */
.options-dialog .maps-options-body { padding: 9px 11px 10px; }
.options-dialog .maps-reset-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.options-dialog .maps-reset-row button { min-width: 150px; }
@media (max-width: 680px) {
  .options-dialog .maps-reset-row { flex-direction: column; }
  .options-dialog .maps-reset-row button { width: 100%; }
}

/* 4.90 - Keep the hand cursor across the complete clickable surface.
   The global native-app cursor rule applies cursor:default to descendants,
   so labels/text inside a button otherwise switch back to an arrow. */
button:not(:disabled),
button:not(:disabled) *,
[role="button"]:not([aria-disabled="true"]),
[role="button"]:not([aria-disabled="true"]) *,
.map-dialog-card,
.map-dialog-card * {
  cursor: pointer !important;
}

/* ---- Training melee selection ---- */
.training-melee-dialog {
  width: min(900px, calc(100vw - 28px));
  max-height: min(700px, calc(100vh - 24px));
  overflow: hidden;
}
.training-melee-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.training-melee-card {
  min-height: 0;
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.training-melee-card .training-melee-type {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .075em;
  opacity: .72;
}
.training-melee-card > strong {
  display: block;
  font-size: 26px;
  line-height: .96;
}
.training-melee-card > i {
  display: block;
  margin-top: 10px;
  min-height: 0;
  font-size: 14px;
  line-height: 1.24;
}
.training-melee-effects {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-size: 12px;
  line-height: 1.26;
  opacity: .9;
}
.training-melee-effects-title {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .065em;
}
.training-melee-effect {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 13%, transparent);
}
.training-melee-effect:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.training-melee-effect b {
  display: block;
  font-size: 10.5px;
  line-height: 1.22;
  letter-spacing: .05em;
  font-weight: 900;
}
.training-melee-effect em {
  display: block;
  min-width: 0;
  font-style: normal;
  font-size: 12.2px;
  line-height: 1.25;
}
.training-melee-effect em > span {
  display: block;
}
.training-melee-card:hover,
.training-melee-card:active,
.training-melee-card:focus,
.training-melee-card:focus-visible {
  transform: none !important;
  filter: none !important;
  background: transparent !important;
  color: inherit !important;
  border-color: currentColor !important;
  box-shadow: none !important;
}
.training-melee-card:hover .training-melee-type,
.training-melee-card:active .training-melee-type,
.training-melee-card:focus .training-melee-type,
.training-melee-card:focus-visible .training-melee-type,
.training-melee-card:hover > i,
.training-melee-card:active > i,
.training-melee-card:focus > i,
.training-melee-card:focus-visible > i,
.training-melee-card:hover .training-melee-effects,
.training-melee-card:active .training-melee-effects,
.training-melee-card:focus .training-melee-effects,
.training-melee-card:focus-visible .training-melee-effects,
.training-melee-card:hover .training-melee-effect em,
.training-melee-card:active .training-melee-effect em,
.training-melee-card:focus .training-melee-effect em,
.training-melee-card:focus-visible .training-melee-effect em {
  color: inherit !important;
  opacity: inherit !important;
}
@media (max-width: 720px) {
  .training-melee-grid { grid-template-columns: 1fr; }
  .training-melee-effect { grid-template-columns: 88px minmax(0, 1fr); }
}

/* ---- Custom cubemap skybox options ---- */
.options-action-row.disabled { opacity: .38; }
.options-info-row {
  display: flex;
  align-items: flex-start;
  min-height: 62px;
  padding: 9px 4px;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.options-info-row > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.options-info-row strong { font-size: 15px; }
.options-info-row small { font-size: 12px; line-height: 1.35; opacity: .62; }
.skybox-file-row small { overflow-wrap: anywhere; }

/* ---- Cubemap six-face preview ---- */
.skybox-preview-grid {
  min-height: 215px;
  padding: 14px 4px 4px;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.skybox-preview-grid:not(.has-faces) { display: block; }
.skybox-preview-face {
  margin: 0;
  min-width: 0;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
  overflow: hidden;
}
.skybox-preview-face img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: rgba(0,0,0,.08);
}
.skybox-preview-face figcaption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 6px 7px;
  text-align: center;
}
.skybox-preview-face figcaption strong {
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: .045em;
}
.skybox-preview-face figcaption small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.15;
  opacity: .62;
}
.skybox-palette-preview {
  display: none;
  height: 26px;
  margin: 8px 4px 14px;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.skybox-palette-preview.has-palette {
  display: flex;
}
.skybox-palette-preview > span {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}
.skybox-palette-preview > span + span {
  box-shadow: -1px 0 0 color-mix(in srgb, currentColor 18%, transparent);
}
@media (max-width: 820px) {
  .skybox-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skybox-palette-preview { height: 22px; }
}

/* ---- Material-aware reflection options ---- */
.reflections-options-body .reflections-section-label {
  min-height: 52px;
  margin-top: 4px;
}
.reflection-map-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 500px;
  max-width: 56%;
  min-width: 360px;
}
.reflection-map-controls select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.reflection-map-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.reflection-map-tool {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .reflection-map-controls {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .reflection-map-tools {
    grid-template-columns: 1fr;
  }
}
.options-slider-row.reflection-dependent.disabled,
.options-toggle-row.reflection-dependent.disabled {
  opacity: .38;
}
.options-slider-row.reflection-dependent.disabled input,
.options-toggle-row.reflection-dependent.disabled input {
  cursor: default;
}

/* 5.12 - Optional floating/draggable OPTIONS window (DEBUG). */
.options-dialog-overlay.options-window-mode {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}
.options-dialog-overlay.options-window-mode .options-dialog {
  pointer-events: auto;
}
.options-dialog-overlay.options-window-mode .options-dialog-head {
  cursor: move !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.options-dialog-overlay.options-window-mode .options-dialog-head button,
.options-dialog-overlay.options-window-mode .options-dialog-head input,
.options-dialog-overlay.options-window-mode .options-dialog-head select,
.options-dialog-overlay.options-window-mode .options-dialog-head textarea,
.options-dialog-overlay.options-window-mode .options-dialog-head label,
.options-dialog-overlay.options-window-mode .options-dialog-head a,
.options-dialog-overlay.options-window-mode .options-dialog-head button *,
.options-dialog-overlay.options-window-mode .options-dialog-head label * {
  cursor: pointer !important;
}
.options-dialog-overlay.options-window-mode .options-dialog-head select,
.options-dialog-overlay.options-window-mode .options-dialog-head input,
.options-dialog-overlay.options-window-mode .options-dialog-head textarea {
  cursor: default !important;
}
.options-dialog-overlay.options-window-mode .options-dialog.options-window-dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* 5.13 - Reflection presets, surface targeting and tools. */
.options-dialog .reflection-tools-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0 2px;
}
.options-dialog .reflection-tools-row button {
  min-width: 0;
  min-height: 34px;
  padding: 8px 10px;
}
@media (max-width: 860px) {
  .options-dialog .reflection-tools-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .options-dialog .reflection-tools-row { grid-template-columns: 1fr; }
}

/* 5.14 - Per-surface reflection controls (floor / ceiling / wall). */
.options-dialog .reflection-triple-row {
  display: grid;
  grid-template-columns: minmax(210px, .92fr) minmax(0, 1.85fr);
  gap: 16px;
  align-items: center;
  min-height: 68px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 13%, transparent);
}
.options-dialog .reflection-triple-label {
  min-width: 0;
}
.options-dialog .reflection-triple-label strong,
.options-dialog .reflection-triple-label small {
  display: block;
}
.options-dialog .reflection-triple-label small {
  margin-top: 3px;
  opacity: .64;
  line-height: 1.25;
}
.options-dialog .reflection-triple-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.options-dialog .reflection-surface-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name value"
    "slider slider";
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.options-dialog .reflection-surface-control em {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .055em;
  opacity: .74;
}
.options-dialog .reflection-surface-control b {
  grid-area: value;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.options-dialog .reflection-surface-control input[type="range"] {
  grid-area: slider;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.options-dialog .reflection-surface-control.disabled {
  opacity: .30;
}
.options-dialog .reflection-triple-row.disabled > .reflection-triple-label {
  opacity: .38;
}
@media (max-width: 900px) {
  .options-dialog .reflection-triple-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media (max-width: 650px) {
  .options-dialog .reflection-triple-controls {
    grid-template-columns: 1fr;
  }
}

/* 5.34 - Wide multiplayer lobby redesign. */
.panel.lobby-panel {
  width: min(1180px, calc(100vw - 44px));
  max-width: 1180px;
  padding: 22px 30px 24px;
  text-align: left;
}
.panel.lobby-panel .lobby-redesign { width: 100%; }
.panel.lobby-panel .lobby-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid color-mix(in srgb, currentColor 34%, transparent);
}
.panel.lobby-panel .lobby-brand-logo {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: .86;
  text-align: left;
}
.panel.lobby-panel .lobby-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}
.panel.lobby-panel .lobby-heading h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 800;
  line-height: .95;
}
.panel.lobby-panel .lobby-heading span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .68;
}
.panel.lobby-panel .lobby-online {
  width: 100%;
  margin: 0;
  gap: 14px;
  align-items: stretch;
}
.panel.lobby-panel .lobby-layout {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(500px, 1.35fr);
  gap: 18px;
  width: 100%;
  align-items: stretch;
}
.panel.lobby-panel .lobby-room-card,
.panel.lobby-panel .lobby-players-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.panel.lobby-panel .lobby-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  margin-bottom: 11px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}
.panel.lobby-panel .lobby-players-title b {
  font-size: 12px;
  font-weight: 700;
  opacity: .72;
}
.panel.lobby-panel .lobby-code-box {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label button" "code button";
  gap: 2px 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, currentColor 27%, transparent);
}
.panel.lobby-panel .lobby-code-box > span {
  grid-area: label;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .62;
}
.panel.lobby-panel .lobby-code-box > strong {
  grid-area: code;
  min-width: 0;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--red);
}
.panel.lobby-panel .lobby-code-box > button {
  grid-area: button;
  align-self: stretch;
  min-width: 112px;
  padding: 7px 12px;
  font-size: 15px;
}
.panel.lobby-panel .lobby-room-card .mapsel {
  width: 100%;
  margin: 0 0 12px;
}
.panel.lobby-panel .lobby-room-card .mapbtn {
  width: 100%;
  max-width: none;
}
.panel.lobby-panel .lobby-room-hint {
  max-width: none;
  margin: 0;
  text-align: left;
  line-height: 1.35;
}
.panel.lobby-panel .lobby-player-table {
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  overflow: hidden;
}
.panel.lobby-panel .lobby-player-head,
.panel.lobby-panel .lobby-player-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(100px, .55fr) minmax(150px, .72fr);
  align-items: center;
  gap: 12px;
}
.panel.lobby-panel .lobby-player-head {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  opacity: .72;
}
.panel.lobby-panel .lobby-player-list {
  min-height: 360px;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.panel.lobby-panel .lobby-player-row {
  min-height: 46px;
  padding: 5px 12px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.panel.lobby-panel .lobby-player-row:last-child { border-bottom: 0; }
.panel.lobby-panel .lobby-player-row.me {
  background: color-mix(in srgb, var(--red) 10%, transparent);
}
.panel.lobby-panel .lobby-player-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.panel.lobby-panel .lobby-player-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
}
.panel.lobby-panel .lobby-player-name i {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  opacity: .7;
}
.panel.lobby-panel .lobby-player-version {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  opacity: .82;
}
.panel.lobby-panel .lobby-ready-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: default;
}
.panel.lobby-panel .lobby-ready-cell:has(input:not(:disabled)) { cursor: pointer; }
.panel.lobby-panel .lobby-ready-cell input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 1;
}
.panel.lobby-panel .lobby-ready-cell span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}
.panel.lobby-panel .lobby-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-top: 2px;
}
.panel.lobby-panel .lobby-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel.lobby-panel .lobby-footer .status {
  min-width: 0;
  margin: 0;
  text-align: center;
}
.panel.lobby-panel .lobby-start-hint {
  max-width: 360px;
  margin: 0;
  text-align: right;
  line-height: 1.25;
}
@media (max-width: 920px) {
  .panel.lobby-panel { width: min(760px, calc(100vw - 24px)); padding: 18px; }
  .panel.lobby-panel .lobby-layout { grid-template-columns: 1fr; }
  .panel.lobby-panel .lobby-player-list { min-height: 220px; max-height: 300px; }
  .panel.lobby-panel .lobby-footer { grid-template-columns: 1fr; }
  .panel.lobby-panel .lobby-actions { justify-content: center; }
  .panel.lobby-panel .lobby-start-hint { max-width: none; text-align: center; }
}
@media (max-width: 620px) {
  .panel.lobby-panel .lobby-topbar { align-items: flex-start; }
  .panel.lobby-panel .lobby-heading h2 { font-size: 32px; }
  .panel.lobby-panel .lobby-player-head,
  .panel.lobby-panel .lobby-player-row { grid-template-columns: minmax(130px, 1fr) 72px 110px; gap: 7px; padding-left: 8px; padding-right: 8px; }
  .panel.lobby-panel .lobby-player-name strong { font-size: 15px; }
  .panel.lobby-panel .lobby-player-version { font-size: 13px; }
  .panel.lobby-panel .lobby-ready-cell span { font-size: 10px; }
}

/* 5.36 - Per-map flying decoration customization. */
.options-dialog .decorations-options-body { padding: 9px 11px 10px; }
.options-dialog .decoration-item-card {
  margin-top: 8px;
  padding: 0 8px 8px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  background: color-mix(in srgb, currentColor 3%, transparent);
}
.options-dialog .decoration-item-card[hidden] { display: none !important; }
.options-dialog .decoration-item-card.disabled .decoration-slider-row { opacity: .38; }
.options-dialog .decorations-empty {
  margin: 14px 2px;
  padding: 18px;
  border: 1px dashed color-mix(in srgb, currentColor 34%, transparent);
  text-align: center;
}
.options-dialog .decorations-empty strong,
.options-dialog .decorations-empty small { display: block; }
.options-dialog .decorations-empty small { margin-top: 4px; opacity: .62; }
.options-dialog .decorations-tools-row { flex-wrap: wrap; }


/* Shared game-menu skin hook. The main menu and pause menu use the same
   theme surface; layout-only differences remain local to each screen. */
.panel.rk-menu-surface {
  color: inherit;
}

/* SKYBOX STYLE -------------------------------------------------------------
   Runtime colours come from the active custom cubemap. Every foreground below
   is paired with a contrast-validated background computed by skybox.js. */
html[data-visual-style="skybox"] {
  --ink: var(--skybox-panel-text, #f7f7f4);
  --red: var(--skybox-danger, #ff665d);
  --paper: var(--skybox-bg, #20252a);
  --blue: var(--skybox-accent, #69b8da);
  --green: var(--skybox-accent, #69b8da);
  --orange: var(--skybox-accent, #69b8da);
  --ui-bg: var(--skybox-bg, #20252a);
  --ui-panel: var(--skybox-panel, #2a3036);
  --ui-border: var(--skybox-edge, #d8e0e6);
  --ui-text: var(--skybox-panel-text, #f7f7f4);
  --ui-accent: var(--skybox-accent, #69b8da);
  --ui-danger: var(--skybox-danger, #ff665d);
  --ui-key-text: var(--skybox-danger, #ff665d);
}
html[data-visual-style="skybox"] body,
html[data-visual-style="skybox"] .screen,
html[data-visual-style="skybox"] .overlay {
  background-color: var(--skybox-bg, #20252a) !important;
  color: var(--skybox-bg-text, #f7f7f4) !important;
}
/* All dialog/menu surfaces use the safe panel pair. */
html[data-visual-style="skybox"] .panel,
html[data-visual-style="skybox"] .board,
html[data-visual-style="skybox"] .modal,
html[data-visual-style="skybox"] .dialog-window,
html[data-visual-style="skybox"] .options-window,
html[data-visual-style="skybox"] .options-dialog,
html[data-visual-style="skybox"] .map-dialog,
html[data-visual-style="skybox"] .help-dialog,
html[data-visual-style="skybox"] .quake-load-dialog,
html[data-visual-style="skybox"] .groupbox,
html[data-visual-style="skybox"] .settings-group,
html[data-visual-style="skybox"] .pause-mode-card {
  background-color: var(--skybox-panel, #2a3036) !important;
  color: var(--skybox-panel-text, #f7f7f4) !important;
  border-color: var(--skybox-edge, #d8e0e6) !important;
}
/* Prevent old theme rules from leaving a low-contrast foreground behind. */
html[data-visual-style="skybox"] .panel h1,
html[data-visual-style="skybox"] .panel h2,
html[data-visual-style="skybox"] .panel h3,
html[data-visual-style="skybox"] .panel p,
html[data-visual-style="skybox"] .panel label,
html[data-visual-style="skybox"] .panel small,
html[data-visual-style="skybox"] .options-dialog h1,
html[data-visual-style="skybox"] .options-dialog h2,
html[data-visual-style="skybox"] .options-dialog h3,
html[data-visual-style="skybox"] .options-dialog label,
html[data-visual-style="skybox"] .options-dialog small,
html[data-visual-style="skybox"] .options-dialog p {
  color: var(--skybox-panel-text, #f7f7f4) !important;
}
/* Controls get their own independently contrast-checked pair. */
html[data-visual-style="skybox"] button,
html[data-visual-style="skybox"] select,
html[data-visual-style="skybox"] textarea,
html[data-visual-style="skybox"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-visual-style="skybox"] .main-menu-language,
html[data-visual-style="skybox"] .menu-utility-toggle,
html[data-visual-style="skybox"] .map-dialog-card {
  background: var(--skybox-control, #363d44) !important;
  color: var(--skybox-control-text, #f7f7f4) !important;
  border-color: var(--skybox-edge, #d8e0e6) !important;
  text-shadow: none !important;
}
html[data-visual-style="skybox"] select option,
html[data-visual-style="skybox"] .main-menu-language option {
  background: var(--skybox-control, #363d44) !important;
  color: var(--skybox-control-text, #f7f7f4) !important;
}
html[data-visual-style="skybox"] button:hover:not(:disabled),
html[data-visual-style="skybox"] button:focus-visible,
html[data-visual-style="skybox"] select:focus-visible,
html[data-visual-style="skybox"] input:focus-visible,
html[data-visual-style="skybox"] .selected,
html[data-visual-style="skybox"] .active,
html[data-visual-style="skybox"] .options-tab.active {
  background: var(--skybox-accent, #69b8da) !important;
  color: var(--skybox-accent-text, #101316) !important;
  border-color: var(--skybox-accent, #69b8da) !important;
  text-shadow: none !important;
}
html[data-visual-style="skybox"] a,
html[data-visual-style="skybox"] .link,
html[data-visual-style="skybox"] .accent {
  color: var(--skybox-accent, #69b8da) !important;
}
html[data-visual-style="skybox"] .danger,
html[data-visual-style="skybox"] .error,
html[data-visual-style="skybox"] .low,
html[data-visual-style="skybox"] .pause-mode-start,
html[data-visual-style="skybox"] .panel .cols b,
html[data-visual-style="skybox"] .panel .stats b {
  color: var(--skybox-danger, #ff665d) !important;
}
html[data-visual-style="skybox"] input[type="checkbox"],
html[data-visual-style="skybox"] input[type="radio"] {
  accent-color: var(--skybox-accent, #69b8da);
}


/* ========================================================================== 
   RENDERKILL 5.56 — UNIFIED MENU / DIALOG SURFACE SYSTEM
   --------------------------------------------------------------------------
   One visual language for MAIN MENU, PAUSE, OPTIONS, SELECT MAP, HELP,
   TRAINING dialogs, MULTIPLAYER landing/lobby/action dialogs and loading
   overlays. Runtime --rk-menu-* tokens are contrast-validated by
   hakros-renderkill-visual-styles.js for every visual style.
   ========================================================================== */
html {
  --rk-menu-bg: var(--mat-bg, var(--paper));
  --rk-menu-panel: var(--mat-panel, var(--paper));
  --rk-menu-edge: var(--mat-edge, var(--ink));
  --rk-menu-accent: var(--mat-accent, var(--red));
  --rk-menu-danger: var(--mat-danger, var(--red));
  --rk-menu-text: var(--mat-text, var(--ink));
  --rk-menu-bg-text: var(--rk-menu-text);
  --rk-menu-accent-text: var(--paper);
  --rk-menu-danger-text: #fff;
  --rk-menu-control: color-mix(in srgb, var(--rk-menu-panel) 86%, var(--rk-menu-bg) 14%);
  --rk-menu-control-hover: color-mix(in srgb, var(--rk-menu-panel) 72%, var(--rk-menu-accent) 28%);
}

/* The 3D scene remains visible and keeps orbiting while full-screen menus are
   open. The screen is a translucent veil, never an opaque replacement for the
   renderer. This also restores the presentation camera to the main/multiplayer
   menus because the existing game loop already runs B.idleCam() in those states. */
html[data-visual-style] .screen.show {
  background: color-mix(in srgb, var(--rk-menu-bg) 22%, transparent) !important;
  color: var(--rk-menu-bg-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modal backdrops share one translucent treatment so SELECT MAP, OPTIONS,
   multiplayer dialogs, HELP, POV/crosshair dialogs, etc. all sit over the same
   visible presentation/game scene. */
html[data-visual-style] .map-dialog-overlay,
html[data-visual-style] .options-dialog-overlay,
html[data-visual-style] .help-dialog-overlay,
html[data-visual-style] .quake-load-overlay {
  background: color-mix(in srgb, var(--rk-menu-bg) 36%, transparent) !important;
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
}

/* All top-level menu/dialog surfaces deliberately use the SAME complete
   background shorthand. Using background-color alone left old notebook/grid
   background-images alive (the SELECT MAP bug). */
html[data-visual-style] .screen .panel,
html[data-visual-style] .panel.rk-menu-surface,
html[data-visual-style] .map-dialog,
html[data-visual-style] .options-dialog,
html[data-visual-style] .help-dialog,
html[data-visual-style] .quake-load-dialog,
html[data-visual-style] .board {
  color: var(--rk-menu-text) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%), var(--rk-menu-panel) !important;
  border: 3px solid var(--rk-menu-edge) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.30) !important;
  text-shadow: none !important;
  transform: none !important;
}

/* Kill the legacy paper-margin / decorative pseudo-elements that made some
   dialogs visibly belong to another theme. */
html[data-visual-style] .map-dialog::before,
html[data-visual-style] .quake-load-dialog::before,
html[data-visual-style] .options-dialog::before,
html[data-visual-style] .help-dialog::before,
html[data-visual-style] .screen .panel::before {
  display: none !important;
  content: none !important;
}

/* Unified header hierarchy. No tab/section is allowed to inherit an obsolete
   dark/light colour from a previous theme rule. */
html[data-visual-style] .screen .panel > h1,
html[data-visual-style] .screen .panel > h2,
html[data-visual-style] .map-dialog-head h2,
html[data-visual-style] .map-dialog-head p,
html[data-visual-style] .options-dialog-head h2,
html[data-visual-style] .options-dialog-head p,
html[data-visual-style] .help-dialog-head h2,
html[data-visual-style] .help-dialog-head p,
html[data-visual-style] .options-tab-panel > h3,
html[data-visual-style] .options-section > h3,
html[data-visual-style] .options-section h3,
html[data-visual-style] .lobby-heading h2,
html[data-visual-style] .lobby-section-title,
html[data-visual-style] .mp-field-label {
  color: var(--rk-menu-text) !important;
  text-shadow: none !important;
}
html[data-visual-style] .options-section > h3,
html[data-visual-style] .options-section h3 {
  background: var(--rk-menu-panel) !important;
}
html[data-visual-style] .map-dialog-head h2,
html[data-visual-style] .options-dialog-head h2,
html[data-visual-style] .help-dialog-head h2 {
  font-size: clamp(30px, 4.2vw, 46px) !important;
  line-height: .95 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
html[data-visual-style] .options-tab-panel > h3,
html[data-visual-style] .options-section > h3 {
  font-weight: 700 !important;
  letter-spacing: .015em !important;
}

/* OPTIONS row headings: this fixes the black SKYBOX ZIP / STATUS / EXPORT...
   labels seen on a dark dynamic theme. */
html[data-visual-style] .options-toggle-row strong,
html[data-visual-style] .options-slider-row strong,
html[data-visual-style] .options-action-row strong,
html[data-visual-style] .options-dialog .options-toggle-row > span:first-child,
html[data-visual-style] .options-dialog .options-slider-row > span:first-child,
html[data-visual-style] .options-dialog .options-action-row > span:first-child,
html[data-visual-style] .options-dialog .mp-option-group strong,
html[data-visual-style] .options-dialog .options-lighting-status strong,
html[data-visual-style] .options-dialog .skybox-option-copy strong,
html[data-visual-style] .options-dialog legend {
  color: var(--rk-menu-text) !important;
  text-shadow: none !important;
}
html[data-visual-style] .options-toggle-row small,
html[data-visual-style] .options-slider-row small,
html[data-visual-style] .options-action-row small,
html[data-visual-style] .map-dialog-head p,
html[data-visual-style] .options-dialog-head p,
html[data-visual-style] .mp-dialog-help,
html[data-visual-style] .panel .lobby-room-hint,
html[data-visual-style] .screen .panel .hint,
html[data-visual-style] .map-dialog .hint,
html[data-visual-style] .options-dialog .hint,
html[data-visual-style] .help-dialog .hint {
  color: var(--rk-menu-text) !important;
}

/* Shared controls across menus, OPTIONS, SELECT MAP and multiplayer. */
html[data-visual-style] .screen .panel button,
html[data-visual-style] .screen .panel select,
html[data-visual-style] .screen .panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-visual-style] .map-dialog button,
html[data-visual-style] .map-dialog select,
html[data-visual-style] .map-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-visual-style] .options-dialog button,
html[data-visual-style] .options-dialog select,
html[data-visual-style] .options-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-visual-style] .help-dialog button,
html[data-visual-style] .main-menu-language,
html[data-visual-style] .menu-utility-toggle {
  color: var(--rk-menu-text) !important;
  background: var(--rk-menu-control) !important;
  border-color: var(--rk-menu-edge) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-visual-style] .screen .panel select option,
html[data-visual-style] .map-dialog select option,
html[data-visual-style] .options-dialog select option,
html[data-visual-style] .main-menu-language option {
  color: var(--rk-menu-text) !important;
  background: var(--rk-menu-panel) !important;
}

/* One selected/active state everywhere. Contrast is computed against the
   actual accent colour by JS, so bright orange/yellow/white accents get dark
   text automatically and dark accents get light text. */
html[data-visual-style] .options-tab.active,
html[data-visual-style] .map-dialog-card.selected,
html[data-visual-style] .map-dialog button.selected,
html[data-visual-style] .screen .panel button.on,
html[data-visual-style] .screen .panel button.active,
html[data-visual-style] .screen .panel button:hover:not(:disabled),
html[data-visual-style] .map-dialog button:hover:not(:disabled),
html[data-visual-style] .options-dialog button:hover:not(:disabled),
html[data-visual-style] .help-dialog button:hover:not(:disabled) {
  color: var(--rk-menu-accent-text) !important;
  background: var(--rk-menu-accent) !important;
  border-color: var(--rk-menu-accent) !important;
}

/* Inner cards/panels are variants of the same surface instead of unrelated
   skins. This includes lobby cards and every multiplayer action dialog. */
html[data-visual-style] .map-dialog-card,
html[data-visual-style] .map-preview-panel,
html[data-visual-style] .options-section,
html[data-visual-style] .options-groupbox-body,
html[data-visual-style] .pause-mode-card,
html[data-visual-style] .lobby-room-card,
html[data-visual-style] .lobby-players-card,
html[data-visual-style] .mp-radio-row,
html[data-visual-style] .mp-public-row,
html[data-visual-style] .mp-dialog-form,
html[data-visual-style] .decoration-item-card {
  color: var(--rk-menu-text) !important;
  background: var(--rk-menu-control) !important;
  border-color: color-mix(in srgb, var(--rk-menu-edge) 72%, transparent) !important;
  background-image: none !important;
  text-shadow: none !important;
}
html[data-visual-style] .mp-radio-row:hover,
html[data-visual-style] .mp-public-row:hover,
html[data-visual-style] .map-dialog-card:hover:not(.selected) {
  color: var(--rk-menu-text) !important;
  background: var(--rk-menu-control-hover) !important;
}

/* Multiplayer landing and lobby are normal menu surfaces, not separate skins. */
html[data-visual-style] .panel.multiplayer-menu-panel,
html[data-visual-style] .panel.lobby-panel {
  color: var(--rk-menu-text) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%), var(--rk-menu-panel) !important;
  border-color: var(--rk-menu-edge) !important;
}
html[data-visual-style] .multiplayer-main-menu button.alt,
html[data-visual-style] .multiplayer-action-dialog .mp-dialog-actions button:not(.alt),
html[data-visual-style] .mp-public-toolbar button,
html[data-visual-style] .mp-public-row button {
  color: var(--rk-menu-text) !important;
  background: var(--rk-menu-control) !important;
  border-color: var(--rk-menu-edge) !important;
}

/* Close buttons also belong to the same accent system; danger/message colours
   remain reserved for actual warnings/errors. */
html[data-visual-style] .map-dialog-close,
html[data-visual-style] .options-dialog-close,
html[data-visual-style] .help-dialog-close {
  color: var(--rk-menu-text) !important;
  background: var(--rk-menu-control) !important;
  border-color: var(--rk-menu-edge) !important;
}
html[data-visual-style] .mp-dialog-message,
html[data-visual-style] .screen .panel .danger,
html[data-visual-style] .screen .panel .error,
html[data-visual-style] .map-dialog .danger,
html[data-visual-style] .map-dialog .error,
html[data-visual-style] .options-dialog .danger,
html[data-visual-style] .options-dialog .error,
html[data-visual-style] .help-dialog .danger,
html[data-visual-style] .help-dialog .error {
  color: var(--rk-menu-danger) !important;
}
html[data-visual-style] .mp-dialog-message.is-alert {
  color: var(--rk-menu-danger-text) !important;
  background: var(--rk-menu-danger) !important;
  border-color: var(--rk-menu-danger) !important;
}

/* SKYBOX STYLE feeds the shared system directly from its contrast-safe dynamic
   palette. The shorthand backgrounds above prevent any legacy pattern from
   leaking through. */
html[data-visual-style="skybox"] {
  --rk-menu-bg: var(--skybox-bg, #20252a);
  --rk-menu-panel: var(--skybox-panel, #2a3036);
  --rk-menu-edge: var(--skybox-edge, #d8e0e6);
  --rk-menu-accent: var(--skybox-accent, #69b8da);
  --rk-menu-danger: var(--skybox-danger, #ff665d);
  --rk-menu-text: var(--skybox-panel-text, #f7f7f4);
  --rk-menu-bg-text: var(--skybox-bg-text, #f7f7f4);
  --rk-menu-accent-text: var(--skybox-accent-text, #101316);
  --rk-menu-danger-text: var(--skybox-danger-text, #101316);
}


/* ==========================================================================
   RENDERKILL 5.64 — startup/theme badges + bundled SKYBOX gallery
   ========================================================================== */
html[data-visual-style] #fpsCounter,
html[data-visual-style] #versionCounter,
html[data-visual-style] #visualStyleCounter {
  color: var(--rk-menu-text) !important;
  background: var(--rk-menu-control) !important;
  border: 2px solid var(--rk-menu-edge) !important;
  border-left: 4px solid var(--rk-menu-accent) !important;
  border-radius: 7px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  text-shadow: none !important;
  opacity: .94 !important;
}
html[data-visual-style] #visualStyleCounter {
  opacity: 0 !important;
  visibility: hidden !important;
}
html[data-visual-style] #visualStyleCounter.show {
  opacity: .94 !important;
  visibility: visible !important;
}

.skybox-source-buttons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.skybox-source-buttons > button { min-width: 122px; }

.skybox-gallery-overlay {
  z-index: 132000 !important;
  pointer-events: auto !important;
  background: color-mix(in srgb, var(--rk-menu-bg) 72%, rgba(0,0,0,.72)) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  overscroll-behavior: contain;
}
.skybox-gallery-overlay > .skybox-gallery-dialog { pointer-events: auto !important; }
html.skybox-gallery-open,
html.skybox-gallery-open body { overscroll-behavior: none; }
.skybox-gallery-dialog {
  width: min(1120px, calc(100vw - 44px));
  max-height: min(820px, calc(100vh - 24px));
}
.skybox-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-height: min(590px, 68vh);
  overflow: auto;
  margin: 0 0 16px;
  padding: 4px;
}
/* Gallery choices deliberately reuse the SELECT MAP card language: number at
   left, large title, secondary description and the same selected/hover skin. */
.skybox-gallery-card.map-dialog-card {
  min-height: 96px;
  padding: 16px 18px 14px 58px;
  color: var(--rk-menu-text) !important;
  background: var(--rk-menu-control) !important;
  border-color: var(--rk-menu-edge) !important;
  border-width: 2px !important;
  text-align: left !important;
}
.skybox-gallery-card.map-dialog-card .map-card-number {
  color: var(--rk-menu-accent) !important;
  opacity: .48;
}
.skybox-gallery-card.map-dialog-card strong {
  color: inherit !important;
  font-size: 23px;
  line-height: 1;
}
.skybox-gallery-card.map-dialog-card i {
  color: inherit !important;
  margin-top: 7px;
  font-size: 13px;
  opacity: .66;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skybox-gallery-card.map-dialog-card:hover:not(:disabled),
.skybox-gallery-card.map-dialog-card:focus-visible {
  color: var(--rk-menu-accent-text) !important;
  background: var(--rk-menu-accent) !important;
  border-color: var(--rk-menu-accent) !important;
}
.skybox-gallery-card.map-dialog-card:hover:not(:disabled) .map-card-number,
.skybox-gallery-card.map-dialog-card:focus-visible .map-card-number {
  color: var(--rk-menu-accent-text) !important;
}
.skybox-gallery-card.map-dialog-card:disabled { opacity: .48; cursor: wait; }

@media (max-width: 980px) {
  .skybox-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .skybox-source-buttons { width: 100%; }
  .skybox-source-buttons > button { flex: 1 1 0; min-width: 0; }
  .skybox-gallery-grid { grid-template-columns: 1fr; }
}


/* ========================================================================== 
   RENDERKILL 5.64 — hard-modal SKYBOX gallery
   ========================================================================== */
html[data-visual-style] body > .skybox-gallery-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, .86) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  isolation: isolate !important;
}
html[data-visual-style] body > .skybox-gallery-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .18);
  pointer-events: auto;
}
html.skybox-gallery-open body,
body.skybox-gallery-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
html.skybox-gallery-open .options-dialog-overlay {
  pointer-events: none !important;
  user-select: none !important;
}
html.skybox-gallery-open body > .skybox-gallery-overlay,
html.skybox-gallery-open body > .skybox-gallery-overlay * {
  pointer-events: auto;
}


/* 5.75 - Language-aware fixed-width OPTIONS tab labels. */
.options-dialog .options-tab {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.15;
}

/* 5.75 - Local flag language comboboxes. Native selects remain the source of
   truth for existing language code, but the visible control can render images. */
.rk-language-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.rk-language-combobox {
  position: relative;
  min-width: 0;
  font: inherit;
  color: inherit;
}
.rk-language-combobox--options { width: 100%; }
.rk-language-combobox--main { width: 235px; max-width: 100%; }
.rk-language-trigger {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .035em;
  color: var(--rk-menu-text, var(--ink, #171717));
  background: var(--rk-menu-control, color-mix(in srgb, var(--paper, #e9e1d3) 82%, transparent));
  border: 1.5px solid var(--rk-menu-edge, color-mix(in srgb, currentColor 62%, transparent));
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  text-align: left;
  box-shadow: none;
  text-shadow: none;
}
.rk-language-combobox--options .rk-language-trigger {
  font-size: 14px;
  border-width: 2px;
}
.rk-language-trigger:hover,
.rk-language-trigger:focus-visible { filter: brightness(1.08); }
.rk-language-flag {
  display: block;
  flex: 0 0 auto;
  width: 25px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.18);
  background: #fff;
}
.rk-language-selected-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rk-language-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
}
.rk-language-menu {
  position: fixed;
  z-index: 2147483647;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  color: var(--rk-menu-text, var(--ink, #171717));
  background: var(--rk-menu-panel, var(--paper, #e9e1d3));
  border: 1.5px solid var(--rk-menu-edge, color-mix(in srgb, currentColor 62%, transparent));
  border-radius: 5px;
  box-shadow: 0 12px 36px rgba(0,0,0,.32);
  font: inherit;
}
.rk-language-menu[hidden] { display: none !important; }
.rk-language-option {
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 0;
  border-radius: 3px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .015em;
  text-align: left;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  text-shadow: none;
}
.rk-language-option > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rk-language-option:hover,
.rk-language-option:focus-visible,
.rk-language-option.is-selected {
  color: var(--rk-menu-accent-text, var(--skybox-accent-text, #fff));
  background: var(--rk-menu-accent, var(--skybox-accent, color-mix(in srgb, currentColor 22%, transparent)));
}
html[data-visual-style="skybox"] .rk-language-trigger {
  color: var(--skybox-control-text, #f7f7f4) !important;
  background: var(--skybox-control, #363d44) !important;
  border-color: var(--skybox-edge, #d8e0e6) !important;
}
html[data-visual-style="skybox"] .rk-language-menu {
  color: var(--skybox-panel-text, #f7f7f4) !important;
  background: var(--skybox-panel, #252b30) !important;
  border-color: var(--skybox-edge, #d8e0e6) !important;
}
html[data-visual-style="skybox"] .rk-language-option:hover,
html[data-visual-style="skybox"] .rk-language-option:focus-visible,
html[data-visual-style="skybox"] .rk-language-option.is-selected {
  color: var(--skybox-accent-text, #101316) !important;
  background: var(--skybox-accent, #69b8da) !important;
}
@media (max-width: 760px) {
  .rk-language-combobox--main { width: 220px; max-width: 48vw; }
  .rk-language-combobox--main .rk-language-trigger { height: 34px; font-size: 11px; }
}
@media (max-width: 520px) {
  .rk-language-combobox--main { width: min(54vw, 205px); max-width: 54vw; }
  .rk-language-combobox--main .rk-language-trigger { padding-left: 7px; font-size: 10px; }
  .rk-language-flag { width: 22px; height: 14px; }
}
/* Keep dropdown rows neutral even in themes that globally skin every <button>. */
html[data-visual-style] .rk-language-menu .rk-language-option {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-visual-style] .rk-language-menu .rk-language-option:hover,
html[data-visual-style] .rk-language-menu .rk-language-option:focus-visible,
html[data-visual-style] .rk-language-menu .rk-language-option.is-selected {
  color: var(--rk-menu-accent-text, var(--skybox-accent-text, #fff)) !important;
  background: var(--rk-menu-accent, var(--skybox-accent, color-mix(in srgb, currentColor 22%, transparent))) !important;
  border: 0 !important;
}
html[data-visual-style="skybox"] .rk-language-menu .rk-language-option:hover,
html[data-visual-style="skybox"] .rk-language-menu .rk-language-option:focus-visible,
html[data-visual-style="skybox"] .rk-language-menu .rk-language-option.is-selected {
  color: var(--skybox-accent-text, #101316) !important;
  background: var(--skybox-accent, #69b8da) !important;
}