* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #fbfaf6; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; user-select: none; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.dim { opacity: .55; font-weight: 400; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 700px at 50% 25%, #ffffff 0%, #eef0e4 80%); z-index: 30; color: #55503f; }
.screen.trans { background: rgba(84, 90, 66, .35); backdrop-filter: blur(3px); pointer-events: none; }
.menu-card { width: 380px; max-width: 92vw; text-align: center; padding: 36px 32px; background: #ffffff; border: 2px solid #e3e2d2; border-radius: 22px; box-shadow: 0 18px 60px rgba(110, 116, 84, .22); }
.menu-card.wide { width: 460px; }
.logo { font-size: 52px; letter-spacing: 1px; font-weight: 800; color: #5f5a42; margin-bottom: 24px; }
.logo .hat { color: #7a5a3a; }
.logo.small { font-size: 30px; margin-bottom: 0; }
body.playing { cursor: none; }
input { width: 100%; padding: 13px 14px; margin-bottom: 12px; border-radius: 12px; border: 2px solid #e3e2d2; background: #fafaf4; color: #55503f; font-size: 16px; text-align: center; letter-spacing: 1px; outline: none; transition: border-color .15s; }
input::placeholder { color: #bcbca4; }
input:focus { border-color: #9dc383; }
#code-input { text-transform: uppercase; letter-spacing: 6px; font-weight: 700; }
.big-btn { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #aed494, #8dbb6f); color: #2e4423; font-size: 16px; font-weight: 800; letter-spacing: 2px; cursor: pointer; transition: transform .08s, filter .15s; margin-bottom: 12px; box-shadow: 0 4px 0 #74a058; }
.big-btn:hover { filter: brightness(1.05); }
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #74a058; }
.big-btn.slim { width: auto; flex: 0 0 auto; padding: 14px 22px; margin: 0; }
.big-btn.alt { background: linear-gradient(180deg, #c9a97e, #a9855c); color: #3d2e1c; box-shadow: 0 4px 0 #8a6b47; margin-top: 12px; }
.big-btn.alt:active { box-shadow: 0 1px 0 #8a6b47; }
.small-btn { margin-top: 10px; padding: 8px 16px; border: 2px dashed #cfd2ba; border-radius: 10px; background: #fafbf4; color: #7c8a5c; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .12s; }
.small-btn:hover { border-color: #8dbb6f; }
.join-row { display: flex; gap: 10px; }
.join-row input { flex: 1; margin: 0; }
.text-btn { background: none; border: 0; color: #a3a58a; font-size: 13px; cursor: pointer; margin-top: 14px; text-decoration: underline; }
.error { color: #d8636f; font-size: 13px; min-height: 18px; margin-top: 10px; }
.howto { margin-top: 20px; font-size: 11px; line-height: 1.9; color: #adaf94; }
.howto b { color: #7c8a5c; }

#online-count { position: absolute; right: 22px; bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #7c8a5c; background: #ffffff; border: 2px solid #e3e6d2; border-radius: 11px; padding: 7px 14px; box-shadow: 0 3px 12px rgba(110,116,84,.15); }

/* ---------- lobby ---------- */
.lobby-label { font-size: 11px; letter-spacing: 2px; color: #a3a58a; margin-bottom: 8px; }
.lobby-code { font-size: 42px; font-weight: 800; letter-spacing: 12px; color: #7fae63; cursor: pointer; margin-bottom: 18px; text-shadow: 0 2px 0 #dcecd0; }
.lobby-players { display: flex; flex-direction: column; gap: 7px; }
.lobby-player { display: flex; align-items: center; gap: 10px; background: #f7f8f0; border: 2px solid #e3e6d2; border-radius: 11px; padding: 9px 14px; font-size: 15px; }
.lobby-player .swatch { width: 14px; height: 14px; border-radius: 4px; }
.lobby-player .host-tag { margin-left: auto; font-size: 10px; letter-spacing: 1px; color: #e8899e; font-weight: 800; }
.lobby-player .wtag { margin-left: auto; font-size: 11px; opacity: .55; }
/* ---------- mode / map pickers ---------- */
.mode-select { display: flex; gap: 7px; margin-bottom: 8px; }
.mode-btn { flex: 1; padding: 9px 4px; border-radius: 12px; background: #fdf6e8; border: 2px solid #ecdcc0; color: #5f5a42; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: border-color .12s, background .12s, transform .1s; }
.mode-btn:hover:not(:disabled) { border-color: #d9bd92; transform: translateY(-2px); }
.mode-btn.selected { border-color: #8dbb6f; background: #eef4e2; }
.mode-btn:disabled { cursor: default; opacity: .8; }
.mode-btn .m-ico { font-size: 21px; line-height: 1; }
.mode-btn .m-name { font-weight: 800; font-size: 11.5px; letter-spacing: 1px; }
.mode-btn .m-desc { font-size: 8.5px; opacity: .55; line-height: 1.3; }
.map-select { display: flex; gap: 7px; justify-content: center; margin-bottom: 4px; }
.map-btn { padding: 7px 16px; border-radius: 10px; background: #fdf6e8; border: 2px solid #ecdcc0; color: #5f5a42; font-size: 12px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: border-color .12s, background .12s; }
.map-btn:hover:not(:disabled) { border-color: #d9bd92; }
.map-btn.selected { border-color: #8dbb6f; background: #eef4e2; }
.map-btn:disabled { cursor: default; opacity: .8; }
#lobby { background: linear-gradient(rgba(250, 248, 238, .42), rgba(240, 238, 226, .55)); justify-content: flex-start; padding-left: 5vw; }
#menu { background: linear-gradient(rgba(252, 248, 238, .18), rgba(240, 235, 222, .34)); }
#menu .menu-card { background: rgba(255, 255, 255, .92); }
#lobby .menu-card { background: rgba(255, 253, 246, .93); }
@media (max-width: 900px) { #lobby { justify-content: center; padding-left: 0; } }

/* big "gamemode quirk" toggle (supply crates) */
.quirk-btn { display: block; width: 100%; margin: 2px 0 8px; padding: 11px 14px; border-radius: 12px; background: #fdf6e8; border: 2px dashed #d9bd92; color: #8a6b47; font-size: 13.5px; font-weight: 800; letter-spacing: 1.5px; cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
.quirk-btn:hover:not(:disabled) { transform: translateY(-1px); }
.quirk-btn.selected { border-style: solid; border-color: #d9a557; background: linear-gradient(180deg, #fbecd2, #f5ddb2); color: #6b4a2a; }
.quirk-btn:disabled { cursor: default; opacity: .85; }

/* game-over next-match settings */
.go-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 7px; }
.go-btn { padding: 6px 10px; border-radius: 9px; background: #fdf6e8; border: 2px solid #ecdcc0; color: #5f5a42; font-size: 11px; font-weight: 700; cursor: pointer; }
.go-btn.selected { border-color: #8dbb6f; background: #eef4e2; }
#go-settings { margin-bottom: 12px; }

/* small "grab the mouse" toast (replaces the old click-to-play screen) */
#lock-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 25; font-size: 14px; font-weight: 700; letter-spacing: 1px; color: #5a4a38; background: rgba(255, 252, 244, .92); border: 2px solid #e5d5b8; border-radius: 12px; padding: 9px 18px; box-shadow: 0 6px 24px rgba(122,96,60,.25); animation: pulse 1.6s infinite; pointer-events: none; }

/* RC bomb-car driving hint */
#rc-hint { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 25; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #fffcf4; background: rgba(60, 50, 38, .72); border-radius: 11px; padding: 8px 16px; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* objective banner (CTF) */
#objective-banner { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 800; letter-spacing: 1.5px; color: #fffcf4; background: rgba(90, 74, 56, .55); border-radius: 11px; padding: 7px 16px; text-shadow: 0 1px 3px rgba(0,0,0,.4); animation: pulse 1.6s infinite; }

/* respawn weapon picker */
#respawn-weapons { margin-top: 14px; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 14px; letter-spacing: 1px; }
.rw-hint { font-size: 11px; letter-spacing: 2px; opacity: .7; }
.rw-opt { padding: 5px 12px; border-radius: 9px; background: rgba(255, 252, 244, .25); border: 2px solid rgba(255, 252, 244, .3); font-size: 13px; font-weight: 700; }
.rw-opt b { opacity: .6; margin-right: 4px; font-size: 11px; }
.rw-opt.sel { background: rgba(141, 187, 111, .55); border-color: #cfe6bd; }

.ss-chip.team .ss-top { font-size: 17px; }

.weapon-select { display: flex; gap: 8px; margin: 4px 0 16px; }
.weapon-btn { flex: 1; padding: 10px 6px; border-radius: 12px; background: #f7f8f0; border: 2px solid #e3e6d2; color: #5f5a42; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s, background .12s; }
.weapon-btn:hover { border-color: #bcc9a0; }
.weapon-btn.selected { border-color: #8dbb6f; background: #ecf4e2; }
.weapon-btn .wname { font-weight: 800; font-size: 13px; letter-spacing: 1px; }
.weapon-btn .wdesc { font-size: 9.5px; opacity: .6; line-height: 1.4; }

/* ---------- chat ---------- */
#chat { position: fixed; left: 20px; bottom: 96px; width: 340px; z-index: 35; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#chat-log { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow: hidden; justify-content: flex-end; }
.chat-line { background: rgba(255, 252, 244, .88); border-radius: 9px; padding: 5px 11px; font-size: 13px; color: #5a4a38; width: fit-content; max-width: 100%; word-wrap: break-word; animation: chatin .15s ease-out; box-shadow: 0 1px 4px rgba(122,96,60,.15); }
.chat-line b { font-weight: 700; }
.chat-line.sys { color: #a98f6e; font-style: italic; background: rgba(253, 246, 232, .8); }
.chat-line.fading { opacity: 0; transition: opacity 1s; }
@keyframes chatin { from { transform: translateX(-16px); opacity: 0; } }
#chat-input { pointer-events: auto; width: 100%; margin: 0; padding: 9px 12px; font-size: 14px; text-align: left; border-radius: 10px; background: rgba(255, 252, 244, .96); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; color: #5a4a38; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ch-line { position: absolute; background: #fffef8; box-shadow: 0 0 0 1px rgba(90,74,56,.55); }
.ch-t, .ch-b { width: 2px; height: 8px; left: -1px; }
.ch-l, .ch-r { width: 8px; height: 2px; top: -1px; }
.ch-t { bottom: var(--gap, 5px); } .ch-b { top: var(--gap, 5px); }
.ch-l { right: var(--gap, 5px); } .ch-r { left: var(--gap, 5px); }
.ch-dot { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: #fffef8; box-shadow: 0 0 0 1px rgba(90,74,56,.55); }
#crosshair.ch-hidden { opacity: 0; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; opacity: 0; transform: rotate(45deg); transition: opacity .25s; }
#hitmarker::before, #hitmarker::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(90,74,56,.7); }
#hitmarker::before { width: 2px; height: 100%; left: 12px; }
#hitmarker::after { height: 2px; width: 100%; top: 12px; }
#hitmarker.kill::before, #hitmarker.kill::after { background: #ff6b6b; }
#hitmarker.show { opacity: 1; transition: none; }

/* damage direction wedge — points at whoever just shot you */
#dmg-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
#dmg-dir::before { content: ''; position: absolute; left: -13px; top: -102px; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 17px solid rgba(224, 90, 90, .85); filter: drop-shadow(0 0 3px rgba(120,20,20,.5)); }
#dmg-dir.show { opacity: 1; transition: none; }

#scope-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 30vh, rgba(20,16,10,.97) calc(30vh + 2px)); }
.scope-cross-h, .scope-cross-v { position: absolute; left: 50%; top: 50%; background: rgba(30,24,16,.85); }
.scope-cross-h { width: 60vh; height: 1.5px; transform: translate(-50%, -50%); }
.scope-cross-v { height: 60vh; width: 1.5px; transform: translate(-50%, -50%); }

#flash-white { position: absolute; inset: 0; background: #e9e9e4; opacity: 0; }
#damage-vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(216, 80, 80, .55) 100%); transition: opacity .35s; }

#hud-bottom-left { position: absolute; left: 26px; bottom: 24px; display: flex; align-items: center; gap: 12px; }
#hp-bar-wrap { display: flex; gap: 4px; padding: 4px; background: rgba(255, 252, 244, .55); border-radius: 9px; border: 2px solid rgba(122, 96, 60, .3); }
.hp-seg { width: 34px; height: 12px; border-radius: 4px; background: rgba(122, 96, 60, .18); transition: background .15s; }
.hp-seg.on { background: linear-gradient(180deg, #8fd49a, #6fbf7e); }
.hp-seg.on.mid { background: linear-gradient(180deg, #e6d276, #d4bd58); }
.hp-seg.on.low { background: linear-gradient(180deg, #e88a7a, #d4685c); }
#hp-num { font-size: 26px; font-weight: 800; color: #fffcf4; text-shadow: 0 1px 0 #8b6f4e, 0 2px 6px rgba(90,74,56,.5); }
#hud-bottom-right { position: absolute; right: 26px; bottom: 24px; text-align: right; }
#weapon-name { font-size: 13px; letter-spacing: 2px; color: #fffcf4; text-shadow: 0 1px 0 #8b6f4e; margin-bottom: 2px; }
#ammo { font-size: 34px; font-weight: 800; color: #fffcf4; text-shadow: 0 2px 0 #8b6f4e, 0 3px 8px rgba(90,74,56,.4); }
#ammo-res { font-size: 16px; opacity: .7; margin-left: 5px; }
#flash-count { font-size: 15px; color: #ffe9a8; text-shadow: 0 1px 0 #8b6f4e; margin-bottom: 4px; font-weight: 700; }
#reload-hint { font-size: 11px; letter-spacing: 3px; color: #fffcf4; text-shadow: 0 1px 0 #c9636f; animation: pulse 1s infinite; font-weight: 800; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- hotbar ---------- */
#hotbar-wrap { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#slot-name { font-size: 14px; font-weight: 800; letter-spacing: 2px; color: #fffcf4; text-shadow: 0 1px 0 #8b6f4e, 0 2px 8px rgba(90,74,56,.5); opacity: 0; transition: opacity .4s; min-height: 18px; }
#slot-name.show { opacity: 1; transition: none; }
#hotbar { display: flex; gap: 5px; }
.hb-slot { position: relative; width: 54px; height: 54px; border-radius: 9px; background: rgba(255, 252, 244, .55); border: 3px solid rgba(122, 96, 60, .35); display: flex; align-items: center; justify-content: center; flex-direction: column; transition: transform .08s, border-color .08s, background .08s; }
.hb-slot.sel { border-color: #fffcf4; background: rgba(255, 252, 244, .85); transform: translateY(-4px) scale(1.06); box-shadow: 0 4px 12px rgba(90,74,56,.3); }
.hb-slot.empty { opacity: .45; }
.hb-ico { font-size: 20px; line-height: 1; }
.hb-ico.txt { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #55503f; }
.hb-ammo { font-size: 10px; font-weight: 700; color: #7c8a5c; margin-top: 2px; }
.hb-key { position: absolute; top: 2px; left: 5px; font-size: 9px; font-weight: 700; color: rgba(85, 80, 63, .55); }

#fps { position: absolute; top: 24px; right: 70px; font-size: 12px; font-weight: 700; color: #fffcf4; text-shadow: 0 1px 0 #8b6f4e; background: rgba(255,252,244,.25); border-radius: 7px; padding: 3px 9px; }

#killfeed { position: absolute; top: 62px; right: 20px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.kf-entry { background: rgba(255, 252, 244, .9); border-radius: 9px; padding: 6px 12px; font-size: 13px; color: #5a4a38; animation: kfin .18s ease-out; box-shadow: 0 2px 6px rgba(122,96,60,.2); }
.kf-entry b { font-weight: 700; }
.kf-entry .kf-w { opacity: .5; font-size: 11px; margin: 0 7px; }
@keyframes kfin { from { transform: translateX(30px); opacity: 0; } }
#score-strip { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.ss-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255, 252, 244, .9); border-radius: 10px; padding: 6px 11px; box-shadow: 0 2px 6px rgba(122,96,60,.2); }
.ss-chip .ss-top { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: #5a4a38; }
.ss-chip .ss-name { font-size: 10px; font-weight: 700; opacity: .6; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-chip .swatch { width: 11px; height: 11px; border-radius: 3px; }
.ss-chip.me { outline: 2px solid #e8a0b4; }
.ss-hp { display: flex; gap: 2px; }
.ss-hp .pip { width: 12px; height: 5px; border-radius: 2px; background: rgba(122, 96, 60, .18); }
.ss-hp .pip.on { background: #6fbf7e; }
.ss-hp .pip.on.low { background: #d4685c; }
#center-msg.pop { animation: cpop .45s ease-out; }
@keyframes cpop {
  from { transform: translate(-50%, -50%) scale(1.75); opacity: .25; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#center-msg { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font-size: 74px; font-weight: 800; color: #fffcf4; text-shadow: 0 3px 0 #b0987a, 0 8px 24px rgba(90,74,56,.4); letter-spacing: 4px; }
#pickup-hint { position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%); font-size: 15px; color: #fffcf4; font-weight: 700; text-shadow: 0 1px 0 #8b6f4e, 0 2px 8px rgba(90,74,56,.4); }

#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255, 252, 244, .96); border: 2px solid #e5d5b8; border-radius: 16px; padding: 22px 30px; min-width: 380px; box-shadow: 0 14px 50px rgba(122,96,60,.3); }
#scoreboard h2 { font-size: 16px; letter-spacing: 3px; margin-bottom: 14px; color: #6b5844; }
#scoreboard table { width: 100%; border-collapse: collapse; font-size: 15px; }
#scoreboard th { font-size: 10px; letter-spacing: 2px; opacity: .5; text-align: left; padding: 4px 10px; text-transform: uppercase; }
#scoreboard td { padding: 7px 10px; border-top: 1px solid rgba(122,96,60,.12); }
#scoreboard .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
#ping-line { font-size: 11px; margin-top: 12px; }

.ctp-card { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: 3px; color: #fffcf4; line-height: 1.7; text-shadow: 0 2px 0 #8b6f4e, 0 8px 30px rgba(90,74,56,.5); }
.ctp-card .dim { font-size: 13px; letter-spacing: 2px; }
.big-timer { font-size: 64px; color: #ffd9a0; }
#killed-by { font-size: 26px; color: #ffb3b3; }
#final-scores { margin: 14px 0 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- settings ---------- */
#settings-gear { position: fixed; top: 16px; right: 16px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e3e2d2; background: #ffffff; color: #7c8a5c; font-size: 22px; cursor: pointer; box-shadow: 0 3px 10px rgba(110,116,84,.2); transition: transform .2s; }
#settings-gear:hover { transform: rotate(40deg); }
#settings-panel { position: fixed; top: 70px; right: 16px; z-index: 50; width: 300px; max-height: calc(100vh - 90px); overflow-y: auto; background: #ffffff; border: 2px solid #e3e2d2; border-radius: 16px; padding: 18px 20px; box-shadow: 0 14px 50px rgba(110,116,84,.28); color: #55503f; }
.set-sub-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #7c8a5c; margin: 16px 0 10px; padding: 8px 10px; border: 2px solid #e3e2d2; border-radius: 10px; background: #fafaf4; font-weight: 800; cursor: pointer; font-family: inherit; }
.set-sub-btn:hover { border-color: #b9cf9f; }
#binds-arrow { font-size: 13px; transition: transform .15s; }
#binds-arrow.open { transform: rotate(90deg); }
.bind-row { margin-bottom: 6px; }
.bind-row label { flex: 1 1 auto; }
.bind-btn { flex: 0 0 108px; padding: 5px 6px; border-radius: 8px; border: 2px solid #e3e2d2; background: #fafaf4; color: #7c8a5c; font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: pointer; font-family: inherit; }
.bind-btn:hover { border-color: #b9cf9f; }
.bind-btn.capturing { border-color: #e5a34c; background: #fdf3df; color: #b07a2a; animation: bindPulse 0.9s ease-in-out infinite; }
@keyframes bindPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 163, 76, .35); } 50% { box-shadow: 0 0 0 5px rgba(229, 163, 76, 0); } }
.bind-note { font-size: 10.5px; margin: 4px 0 10px; line-height: 1.5; }
#settings-panel.ingame { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 320px; }
#settings-panel.ingame .ingame-only { display: block !important; }
#settings-panel.ingame #resume-btn { margin-bottom: 16px; }
.text-btn.danger { color: #d8636f; }
#settings-panel h3 { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #7c8a5c; margin-bottom: 14px; }
.set-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.set-row label { flex: 0 0 88px; text-align: left; color: #85805f; }
.set-row input[type=range] { flex: 1; margin: 0; padding: 0; accent-color: #8dbb6f; }
.set-row span { flex: 0 0 36px; text-align: right; font-weight: 700; font-size: 12px; color: #7c8a5c; }
.gfx-btns { display: flex; gap: 4px; flex: 1; }
.gfx-btn { flex: 1; padding: 6px 2px; border-radius: 8px; border: 2px solid #e3e2d2; background: #fafaf4; color: #85805f; font-size: 10px; font-weight: 800; letter-spacing: 1px; cursor: pointer; }
.gfx-btn.sel { border-color: #8dbb6f; background: #ecf4e2; color: #4a6a38; }
.ready-btn { width: 100%; padding: 12px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #f5e3a0, #e6ce74); color: #5c4a1a; font-size: 15px; font-weight: 800; letter-spacing: 2px; cursor: pointer; box-shadow: 0 4px 0 #cdb45a; margin-bottom: 12px; transition: transform .08s; }
.ready-btn.is-ready { background: linear-gradient(180deg, #aed494, #8dbb6f); color: #2e4423; box-shadow: 0 4px 0 #74a058; }
.ready-btn:active { transform: translateY(3px); box-shadow: none; }
.big-btn:disabled { filter: grayscale(.55) brightness(1.05); cursor: not-allowed; transform: none; }
.lobby-player .ready-tag { margin-left: 8px; font-size: 11px; font-weight: 800; color: #74a058; }
.lobby-player .ready-tag.waiting { color: #c9b45c; }