[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #0b0d12; color: #e8ebf5; font: 15px/1.5 "Noto Sans Thai", "Leelawadee UI", "Segoe UI", Tahoma, sans-serif; overflow: hidden; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.panel { position: fixed; background: rgba(12, 15, 24, .86); border: 1px solid #2a3150; border-radius: 14px; backdrop-filter: blur(8px); }
#setup { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); padding: 26px 28px; }
#setup h1 { margin: 0 0 8px; font-size: 26px; }
#setup p { color: #a8afcb; margin: 0 0 16px; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
button { font: inherit; font-weight: 600; color: #fff; background: linear-gradient(90deg, #7c5cff, #5b7cff); border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.fallback { color: #8a91ad; font-size: 13px; }
.status { min-height: 1.5em; color: #9ad1ff; margin-top: 14px !important; white-space: pre-line; }
.status.error { color: #ff8a8a; }
.hud { top: 12px; left: 12px; right: 12px; padding: 8px 14px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.hud select { font: inherit; background: #151a2c; color: inherit; border: 1px solid #2a3150; border-radius: 8px; padding: 4px 8px; max-width: 280px; }
.hud .hint { color: #8a91ad; margin-left: auto; }
#stats { color: #9ad1ff; font-variant-numeric: tabular-nums; }
button.small { padding: 5px 14px; font-size: 13px; }
button.ghost { background: transparent; border: 1px solid #3a4268; }
a { color: #ffb54a; }
.muted { color: #8a91ad; }
.center { text-align: center; }
.row.end { justify-content: flex-end; margin-top: 16px; }
#setup .steps { color: #c8cde0; margin: 0 0 12px; padding-left: 22px; }
#setup .steps li { margin-bottom: 6px; }

/* Online screens (web/lobby.js): full-screen, SF lobby look */
#screens { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(ellipse at 30% 0%, #26324a 0%, transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px), linear-gradient(160deg, #141a26, #0a0d14 70%); }
.screen.overlay { background: rgba(6, 8, 14, .82); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.screen h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: .5px; color: #ffb54a; text-transform: uppercase; }
.screen h2 small { color: #8a91ad; font-weight: 400; text-transform: none; }
.screen input, .screen select, dialog input, dialog select { font: inherit; background: #0d121c; color: inherit; border: 1px solid #34405e; border-radius: 4px; padding: 5px 8px; min-width: 0; }
.screen input:focus, .screen select:focus, dialog input:focus, dialog select:focus { outline: 1px solid #ffb54a; }
.screen button, dialog button, #esc-menu button { border-radius: 4px; background: linear-gradient(#f0a03a, #c86f12); color: #1a0f00; text-shadow: none; }
.screen button.ghost, dialog button.ghost, #esc-menu button.ghost { background: #1b2233; color: #e8ebf5; border: 1px solid #3a4668; }
.screen button.big, #esc-menu button.big { padding: 12px 28px; font-size: 17px; }
.screen button.start { background: linear-gradient(#66d16a, #2f9a3a); color: #04160a; }
.screen button.on { background: linear-gradient(#66d16a, #2f9a3a); color: #04160a; }
.box { background: rgba(16, 21, 33, .92); border: 1px solid #2c3854; border-top: 2px solid #ffb54a; border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
.box-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.box-head h2 { margin: 0 auto 0 0; }
.box-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; }
.topbar { display: flex; gap: 16px; align-items: center; padding: 10px 20px; background: linear-gradient(#1d2637, #121824); border-bottom: 2px solid #ffb54a; }
.topbar .brand { font-size: 20px; font-weight: 800; letter-spacing: 1px; margin-right: auto; }
.topbar .brand small { color: #ffb54a; font-size: 14px; letter-spacing: 0; margin-left: 6px; }
.topbar .me { color: #c8cde0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.form-grid label { display: grid; gap: 3px; font-size: 13px; color: #a8afcb; }
.form-grid label.wide { grid-column: 1 / -1; }
.field { display: grid; gap: 4px; color: #a8afcb; font-size: 14px; }
.error-text { color: #ff8a7a; min-height: 1.5em; margin: 0; white-space: pre-line; }

/* Login */
#screen-login { align-items: center; justify-content: center; }
.login-box { width: min(380px, calc(100% - 32px)); display: grid; gap: 14px; padding: 28px; background: rgba(16, 21, 33, .94); border: 1px solid #2c3854; border-top: 3px solid #ffb54a; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.login-box .logo { text-align: center; line-height: 1; margin-bottom: 6px; }
.login-box .logo span { display: block; font-size: 22px; letter-spacing: 8px; color: #c8cde0; }
.login-box .logo b { display: block; font-size: 52px; letter-spacing: 6px; color: #ffb54a; font-style: italic; }
.login-box .logo small { letter-spacing: 6px; color: #8a91ad; }
.login-box input { font-size: 18px; padding: 8px 10px; }
.login-box p { margin: 0; font-size: 13px; }

/* Lobby */
.lobby-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 260px; grid-template-rows: 1fr 230px; gap: 12px; padding: 12px 20px 20px; }
.rooms-box { grid-row: 1; grid-column: 1; }
.online-box { grid-row: 1 / 3; grid-column: 2; }
.lobby-chat { grid-row: 2; grid-column: 1; }
.table-wrap { flex: 1; overflow: auto; background: #0b0f18; border: 1px solid #222b40; }
table.rooms { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rooms th { position: sticky; top: 0; background: #1b2335; color: #a8afcb; font-weight: 600; text-align: left; padding: 6px 10px; }
table.rooms td { padding: 6px 10px; border-bottom: 1px solid #1a2132; white-space: nowrap; }
table.rooms td:first-child, table.rooms th:first-child { width: 56px; text-align: center; }
table.rooms tr { cursor: pointer; }
table.rooms tbody tr:hover { background: #18213a; }
table.rooms tr.sel { background: #3a2a10; outline: 1px solid #ffb54a; }
table.rooms tr.full td { color: #6c7390; }
.state-waiting { color: #7fe08a; }
.state-playing { color: #ffb54a; }
.state-results { color: #9ad1ff; }
ul.online { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; font-size: 14px; }
ul.online li { padding: 4px 6px; border-bottom: 1px solid #1a2132; display: flex; justify-content: space-between; gap: 8px; }
ul.online li.me b { color: #ffb54a; }
ul.online li span { color: #8a91ad; font-size: 12px; }
.chat-log { flex: 1; overflow-y: auto; background: #0b0f18; border: 1px solid #222b40; padding: 6px 8px; font-size: 14px; min-height: 60px; }
.chat-log p { margin: 0 0 2px; overflow-wrap: anywhere; }
.chat-log .name { font-weight: 700; color: #ffd38a; }
.chat-log .name.red, #game-chat-log .name.red { color: #ff7a6b; }
.chat-log .name.blue, #game-chat-log .name.blue { color: #6ba8ff; }
.chat-log .system, #game-chat-log .system { color: #9ad1ff; font-style: italic; }
.chat-log .team-tag, #game-chat-log .team-tag { color: #7fe08a; }
.chat-form { display: flex; gap: 8px; margin-top: 6px; }
.chat-form input { flex: 1; }

/* Room */
.room-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; grid-template-rows: 1fr auto; gap: 12px; padding: 12px 20px 16px; }
.teams { grid-row: 1; grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.team-col { display: flex; flex-direction: column; min-height: 0; background: rgba(16, 21, 33, .92); border: 1px solid #2c3854; border-radius: 4px; padding: 10px; }
.team-col.red { border-top: 3px solid #d8463a; }
.team-col.blue { border-top: 3px solid #3f7fe0; }
.team-col.red h2 { color: #ff7a6b; }
.team-col.blue h2 { color: #6ba8ff; }
ol.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(8, 1fr); gap: 5px; flex: 1; min-height: 0; }
ol.slots li { display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #0d121c; border: 1px solid #222b40; border-radius: 3px; min-height: 30px; font-size: 14px; }
.team-col.red ol.slots li.taken { background: linear-gradient(90deg, rgba(216,70,58,.28), #0d121c 70%); }
.team-col.blue ol.slots li.taken { background: linear-gradient(90deg, rgba(63,127,224,.28), #0d121c 70%); }
ol.slots li.me { outline: 1px solid #ffb54a; }
ol.slots li.empty { color: #4c5470; }
ol.slots li.closed { color: #3a4058; background: repeating-linear-gradient(45deg, #0b0f18 0 6px, #0f1420 6px 12px); }
ol.slots .crown { color: #ffd34a; width: 18px; text-align: center; }
ol.slots .pname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.slots .status { margin-left: auto; font-size: 12px; padding: 1px 8px; border-radius: 3px; background: #1b2233; color: #8a91ad; }
ol.slots .status.ready { background: #2f9a3a; color: #04160a; font-weight: 700; }
ol.slots .status.host { background: #c86f12; color: #1a0f00; font-weight: 700; }
ol.slots .status.ingame { background: #3f7fe0; color: #fff; }
ol.slots .ping { width: 56px; text-align: right; font-size: 12px; color: #8a91ad; }
.side { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.room-chat { grid-row: 2; grid-column: 1; height: 170px; }
.room-actions { grid-row: 2; grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: end; }
.room-actions p { grid-column: 1 / -1; margin: 0; font-size: 13px; min-height: 1.5em; }
.room-actions #room-ready, .room-actions #room-start { grid-column: 1 / -1; }
#loadout label { grid-column: 1 / -1; grid-template-columns: 90px 1fr; align-items: center; }

/* Loading + results */
#screen-loading { align-items: center; justify-content: center; }
.loading-box { width: min(480px, calc(100% - 32px)); text-align: center; }
.loading-box h2 { font-size: 22px; text-transform: none; }
.loading-box .bar { height: 6px; background: #1b2233; border-radius: 3px; overflow: hidden; }
.loading-box .bar i { display: block; height: 100%; width: 40%; background: #ffb54a; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.results-box { width: min(760px, calc(100% - 32px)); text-align: center; padding: 24px; background: rgba(16, 21, 33, .95); border: 1px solid #2c3854; border-top: 3px solid #ffb54a; border-radius: 6px; }
.results-box h1 { margin: 0; font-size: 36px; letter-spacing: 1px; }
.results-score { font-size: 44px; font-weight: 800; display: flex; gap: 18px; justify-content: center; }
.results-box .mvp { font-size: 18px; color: #ffd34a; margin: 4px 0 14px; }
.results-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.results-teams h3 { margin: 0 0 4px; }
.results-teams table { width: 100%; border-collapse: collapse; font-size: 14px; }
.results-teams th, .results-teams td { padding: 3px 6px; text-align: right; border-bottom: 1px solid #1a2132; }
.results-teams th:first-child, .results-teams td:first-child { text-align: left; }
.results-teams tr.mvp td { color: #ffd34a; }
.results-teams tr.me td:first-child { text-decoration: underline; }
#toast { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 30; padding: 8px 18px; background: #5a1a14; border: 1px solid #ff7a6b; border-radius: 4px; color: #ffe0da; }
#toast.info { background: #14305a; border-color: #6ba8ff; color: #dbe8ff; }

/* Dialogs, Esc menu */
dialog { background: #121826; color: #e8ebf5; border: 1px solid #2c3854; border-top: 3px solid #ffb54a; border-radius: 6px; padding: 18px 20px; width: min(460px, calc(100% - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { margin: 0 0 12px; font-size: 18px; color: #ffb54a; }
dialog .small-note { font-size: 12px; margin: 10px 0 0; }
#esc-menu { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); }
#esc-menu .menu-box { display: grid; gap: 12px; width: 300px; padding: 22px; background: #121826; border: 1px solid #2c3854; border-top: 3px solid #ffb54a; border-radius: 6px; text-align: center; }
#esc-menu h2 { margin: 0; color: #ffb54a; }
#esc-menu p { margin: 0; font-size: 12px; }

/* In-game HUD (click-through overlay) */
#game-hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; font-variant-numeric: tabular-nums; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  background: linear-gradient(#7cff7c, #7cff7c) center top / 2px 7px no-repeat, linear-gradient(#7cff7c, #7cff7c) center bottom / 2px 7px no-repeat,
  linear-gradient(#7cff7c, #7cff7c) left center / 7px 2px no-repeat, linear-gradient(#7cff7c, #7cff7c) right center / 7px 2px no-repeat; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0;
  background: linear-gradient(#fff, #fff) center top / 2px 8px no-repeat, linear-gradient(#fff, #fff) center bottom / 2px 8px no-repeat,
  linear-gradient(#fff, #fff) left center / 8px 2px no-repeat, linear-gradient(#fff, #fff) right center / 8px 2px no-repeat; }
#hitmarker.head { filter: drop-shadow(0 0 2px #f33) sepia(1) saturate(8) hue-rotate(-50deg); }
#hitmarker.on { animation: fade .3s ease-out; }
#damage-flash { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 160px 40px rgba(220, 20, 20, .75); }
#damage-flash.on { animation: fade .45s ease-out; }
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }
#scope { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0 34vmin, #000 34.3vmin),
  linear-gradient(#000, #000) center / 100% 1px no-repeat, linear-gradient(#000, #000) center / 1px 100% no-repeat; }
#vitals, #ammo { position: absolute; bottom: 22px; padding: 8px 16px; background: rgba(12, 15, 24, .7); border-radius: 10px; display: flex; gap: 10px; align-items: baseline; }
#vitals { left: 22px; }
#vitals .label { color: #8a91ad; font-size: 13px; }
#vitals b, #ammo b { font-size: 30px; line-height: 1; }
#vitals.low b { color: #ff6b6b; }
#ammo { right: 22px; }
#ammo #weapon-name { color: #a8afcb; font-size: 13px; margin-right: 6px; }
#ammo .sep { color: #59607c; }
#ammo.empty b { color: #ff6b6b; }
#ammo.reloading b { color: #ffd38a; }
#weapon-slots { position: absolute; right: 22px; bottom: 78px; display: grid; gap: 3px; justify-items: end; font-size: 13px; }
#weapon-slots .slot { padding: 2px 10px; background: rgba(12, 15, 24, .55); border-radius: 6px; color: #8a91ad; }
#weapon-slots .slot.current { color: #ffd38a; background: rgba(12, 15, 24, .8); }
#weapon-slots .slot.empty { opacity: .45; }
#hud-toast { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 4px 14px; background: rgba(12, 15, 24, .8); border-radius: 8px; opacity: 0; }
#hud-toast.on { animation: fade 1.6s ease-in; }
#cook { position: absolute; left: 50%; top: calc(50% + 28px); width: 80px; height: 5px; transform: translateX(-50%); background: rgba(12, 15, 24, .7); border-radius: 3px;
  background-image: linear-gradient(#ff8a4a, #ff8a4a); background-size: var(--cook, 0%) 100%; background-repeat: no-repeat; }
/* Armour panel, flashbang whiteout, smoke veil (web/hud.js armor / blind / smokeVeil) */
#armor { position: absolute; left: 22px; bottom: 78px; display: flex; gap: 6px; font-size: 12px; }
#armor .armor-part { padding: 2px 8px; background: rgba(12, 15, 24, .55); border-radius: 6px; display: flex; gap: 5px; align-items: baseline; }
#armor .armor-label { color: #8a91ad; }
#armor .armor-pct { color: #b9e0ff; }
#flash-white { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 5; }
#smoke-veil { position: absolute; inset: 0; background: #b8b8b8; opacity: 0; transition: opacity .25s linear; }
#match-bar { position: absolute; top: 112px; left: 50%; transform: translateX(-50%); padding: 4px 16px; background: rgba(12, 15, 24, .7); border-radius: 10px; display: flex; gap: 16px; align-items: center; }
#match-bar b { font-size: 22px; }
.red { color: #ff7a6b; }
.blue { color: #6ba8ff; }
#killfeed { position: absolute; top: 112px; right: 22px; display: grid; gap: 4px; justify-items: end; font-size: 13px; }
#killfeed .kill { padding: 3px 10px; background: rgba(12, 15, 24, .7); border-radius: 8px; }
#killfeed .kill.mine { outline: 1px solid #ffd38a; }
#scoreboard { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 24px; padding: 18px 22px; background: rgba(12, 15, 24, .9); border: 1px solid #2a3150; border-radius: 14px; }
#scoreboard h3 { margin: 0 0 8px; }
#scoreboard .team.red h3 { color: #ff7a6b; }
#scoreboard .team.blue h3 { color: #6ba8ff; }
#scoreboard table { border-collapse: collapse; min-width: 260px; font-size: 13px; }
#scoreboard th, #scoreboard td { padding: 3px 8px; text-align: right; }
#scoreboard th:first-child, #scoreboard td:first-child { text-align: left; }
#scoreboard tr.me td { color: #ffd38a; }
#death, #banner { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 14px 28px; background: rgba(40, 8, 8, .75); border-radius: 14px; }
#banner { top: 168px; transform: translateX(-50%); background: rgba(12, 15, 24, .85); border: 1px solid #ffb54a; }
#death h2, #banner h2 { margin: 0 0 4px; }
#death p, #banner p { margin: 0; color: #c8cde0; }
#game-chat { position: absolute; left: 22px; bottom: 112px; width: min(460px, 45vw); display: grid; gap: 4px; font-size: 14px; } /* above #armor (bottom 78px) */
#game-chat-log p { margin: 0 0 2px; padding: 1px 8px; background: rgba(12, 15, 24, .55); border-radius: 4px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; text-shadow: 0 1px 2px #000; }
#game-chat-log .name { font-weight: 700; color: #ffd38a; }
#game-chat-form { display: flex; gap: 6px; align-items: center; pointer-events: auto; background: rgba(12, 15, 24, .85); border: 1px solid #ffb54a; border-radius: 4px; padding: 4px 8px; }
#game-chat-scope { color: #ffb54a; font-weight: 700; white-space: nowrap; }
#game-chat-input { flex: 1; font: inherit; background: transparent; color: inherit; border: 0; outline: 0; }

/* Platform: accounts, server status, version notes, rank icons, profile / leaderboard, kick, character picker */
.login-box { width: min(420px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; }
.login-form { display: grid; gap: 10px; }
.login-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.screen .login-tabs .tab { background: #1b2233; color: #a8afcb; border: 1px solid #3a4668; padding: 7px 4px; font-size: 14px; }
.screen .login-tabs .tab.on { background: linear-gradient(#f0a03a, #c86f12); color: #1a0f00; border-color: #f0a03a; }
.login-hint { min-height: 1.5em; }
.login-resume { display: grid; gap: 8px; text-align: center; }
.server-status { display: grid; gap: 6px; padding: 10px; background: #0b0f18; border: 1px solid #222b40; border-radius: 4px; font-size: 13px; }
.server-status .row { gap: 10px; flex-wrap: wrap; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: #59607c; vertical-align: baseline; }
.status-dot.checking { background: #ffb54a; animation: fade 1s ease-in-out infinite alternate; }
.status-dot.offline { background: #ff6b5a; }
.status-dot.online.good { background: #66d16a; }
.status-dot.online.fair { background: #e8d24a; }
.status-dot.online.poor { background: #ff9a4a; }
.data-version { font-size: 12px; }
.version-note, .version-banner { margin: 0; white-space: pre-line; font-size: 13px; padding: 6px 8px; border-radius: 4px; border: 1px solid #3a4668; }
.version-note.ok { color: #7fe08a; border-color: #2f6a3a; }
.version-note.warn { color: #ffd38a; border-color: #8a6a2a; background: rgba(90, 64, 10, .35); }
.version-note.error { color: #ffb0a4; border-color: #a0382c; background: rgba(90, 20, 14, .45); }
.version-banner { margin: 8px 20px 0; }
.rank-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; image-rendering: pixelated; flex: none; }
.rank-icon.big { width: 64px; height: 64px; margin: 0; image-rendering: auto; }
.rank-icon.guest, .rank-icon.bot { opacity: .45; filter: grayscale(1); }
.rank-icon.missing { visibility: hidden; }
ul.online li.member { cursor: pointer; }
ul.online li.member:hover b { text-decoration: underline; }
ol.slots .kick { padding: 1px 8px; font-size: 12px; }
ol.slots li.bot .pname { font-style: italic; }
.character-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.character-acc label.acc { display: grid; gap: 2px; font-size: 12px; color: #a8afcb; }
.results-xp { font-size: 18px; color: #9ad1ff; margin: 10px 0 0; }
.results-xp.promoted { color: #ffd34a; font-weight: 700; }
dialog.profile-dialog, dialog.leaderboard-dialog { width: min(720px, calc(100% - 32px)); }
.profile-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.profile-rank { flex: 1; display: grid; gap: 4px; }
.profile-rank b { font-size: 18px; color: #ffd38a; }
.xp-bar { height: 10px; background: #1b2233; border: 1px solid #2c3854; border-radius: 5px; overflow: hidden; }
.xp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c86f12, #ffd34a); }
.profile-rank p { margin: 0; font-size: 13px; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 0 0 12px; }
.profile-stats div { background: #0b0f18; border: 1px solid #222b40; border-radius: 4px; padding: 4px 8px; }
.profile-stats dt { font-size: 12px; color: #8a91ad; }
.profile-stats dd { margin: 0; font-size: 17px; font-weight: 700; }
dialog h3 { margin: 0 0 6px; font-size: 14px; color: #a8afcb; }
.profile-recent-wrap, .leaderboard-wrap { max-height: 320px; }
table.profile-recent, table.leaderboard { width: 100%; border-collapse: collapse; font-size: 13px; }
table.profile-recent th, table.leaderboard th { position: sticky; top: 0; background: #1b2335; color: #a8afcb; text-align: left; padding: 4px 6px; }
table.profile-recent td, table.leaderboard td { padding: 3px 6px; border-bottom: 1px solid #1a2132; white-space: nowrap; }
table.profile-recent tr.result-win td:nth-child(4) { color: #7fe08a; }
table.profile-recent tr.result-loss td:nth-child(4) { color: #ff7a6b; }
table.leaderboard tbody tr { cursor: pointer; }
table.leaderboard tbody tr:hover { background: #18213a; }
table.leaderboard tr.me td { color: #ffd38a; }
.results-teams td .rank-icon, #scoreboard td .rank-icon { margin-right: 4px; }
.form-grid .character-acc { grid-column: 1 / -1; }
.side > .box { flex-shrink: 0; } /* the side column scrolls instead of squeezing its boxes */

/* ==== SF interface skin (src/ui/sf-skin.js) ==================================================
   Art comes from the player's install as --sf-* custom properties on <html> (blob: URLs).
   html.sf-skin = lobby atlases loaded, html.sf-hud = HUD digits loaded, html.has-sf-<x> = that
   one asset loaded. Without them every rule below is inert and the plain look above stays. */
html.sf-skin { --sf-accent: #d4ec62; --sf-text: #e6e6d6; --sf-dim: #9a9a86; --sf-line: #000; --sf-font: Tahoma, "Leelawadee UI", "Noto Sans Thai", sans-serif; }
html.sf-skin .screen, html.sf-skin dialog, html.sf-skin #esc-menu, html.sf-skin #toast { font-family: var(--sf-font); font-size: 13px; }
html.sf-skin .screen { background: #050605 var(--sf-bg, linear-gradient(160deg, #141a1a, #070908 70%)) center / cover no-repeat; }
html.sf-skin #screen-login { background: #000 var(--sf-login-bg, var(--sf-bg, none)) center / cover no-repeat; align-items: flex-end; padding-right: max(16px, 5vw); }
@media (max-width: 900px) { html.sf-skin #screen-login { align-items: center; padding-right: 0; } }
html.sf-skin .screen.overlay { background: rgba(0, 0, 0, .78); }
/* Panels: SF's bg_gray_1 fill with a black line frame (page*.txt *IMAGE + *LINEFRAME). */
html.sf-skin .box, html.sf-skin .team-col, html.sf-skin .login-box, html.sf-skin .results-box, html.sf-skin dialog,
html.sf-skin #esc-menu .menu-box, html.sf-skin .loading-box, html.sf-skin .topbar {
  background: #24261f var(--sf-panel) center / 100% 100%; border: 1px solid var(--sf-line); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 230, .07), 0 2px 10px rgba(0, 0, 0, .5); }
html.sf-skin .box, html.sf-skin .team-col { padding: 0 8px 8px; }
html.sf-skin .screen h2, html.sf-skin dialog h2, html.sf-skin #esc-menu h2 { margin: 0 -8px 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: var(--sf-text); text-transform: none; background: #3a3c30 var(--sf-panel-brown) center / 100% 100%; border-bottom: 1px solid var(--sf-line); text-shadow: 0 1px 0 #000; }
html.sf-skin .box-head { margin: 0 -8px 6px; padding: 0 8px 0 0; background: #3a3c30 var(--sf-panel-brown) center / 100% 100%; border-bottom: 1px solid var(--sf-line); }
html.sf-skin .box-head h2 { margin: 0 auto 0 0; border: 0; background: none; }
html.sf-skin dialog h2, html.sf-skin #esc-menu h2 { margin: -18px -20px 12px; }
html.sf-skin .screen h2 small, html.sf-skin .muted { color: var(--sf-dim); }
html.sf-skin .topbar { border-width: 0 0 1px; padding: 4px 14px; }
html.sf-skin.has-sf-sf-mark #screen-lobby .topbar .brand { min-height: 50px; padding-left: 200px; background: var(--sf-sf-mark) left center / 190px auto no-repeat; font-size: 0; display: flex; align-items: center; }
html.sf-skin.has-sf-sf-mark #screen-lobby .topbar .brand small { font-size: 15px; margin: 0; }
html.sf-skin .topbar .brand small { color: var(--sf-accent); }
html.sf-skin .topbar .me { color: var(--sf-text); }
/* Text buttons: SF's 3-state frame (btn_128x32: normal / over / down), 9-sliced. */
html.sf-skin .screen button, html.sf-skin dialog button, html.sf-skin #esc-menu button {
  border-style: solid; border-width: 6px; border-color: transparent; border-radius: 0; padding: 1px 10px; min-height: 30px;
  border-image: var(--sf-btn-n) 6 fill / 6px stretch; background: none; color: var(--sf-text); font-weight: 700; text-shadow: 0 1px 0 #000; }
html.sf-skin .screen button:hover:not(:disabled), html.sf-skin dialog button:hover:not(:disabled), html.sf-skin #esc-menu button:hover { border-image-source: var(--sf-btn-h, var(--sf-btn-n)); color: #fff; }
html.sf-skin .screen button:active:not(:disabled), html.sf-skin dialog button:active:not(:disabled), html.sf-skin #esc-menu button:active,
html.sf-skin .screen button.on, html.sf-skin .screen .tab.on { border-image-source: var(--sf-btn-p, var(--sf-btn-n)); color: var(--sf-accent); }
html.sf-skin .screen button:disabled, html.sf-skin dialog button:disabled { filter: grayscale(1) brightness(.7); opacity: .7; }
html.sf-skin .screen button.big, html.sf-skin #esc-menu button.big { font-size: 15px; padding: 4px 22px; }
html.sf-skin .screen button.start, html.sf-skin .screen button.on { color: var(--sf-accent); }
/* Icon buttons (page2/page3.txt): icon frame with the Thai label drawn on its empty right part. */
html.sf-skin .screen button.sf-icon, html.sf-skin #room-start, html.sf-skin #room-ready, html.sf-skin #lobby-create, html.sf-skin #lobby-quick,
html.sf-skin #lobby-join, html.sf-skin #lobby-refresh { border-width: 6px 6px 6px 30px; padding: 0 8px 0 4px; min-height: 41px; text-align: left; }
html.sf-skin.has-sf-icon-start-n #room-start { border-image: var(--sf-icon-start-n) 6 6 6 30 fill / 6px 6px 6px 30px stretch; }
html.sf-skin.has-sf-icon-start-n #room-start:hover:not(:disabled) { border-image-source: var(--sf-icon-start-h); }
html.sf-skin.has-sf-icon-start-n #room-start:active:not(:disabled) { border-image-source: var(--sf-icon-start-p); }
html.sf-skin.has-sf-icon-ready-n #room-ready { border-image: var(--sf-icon-ready-n) 6 6 6 30 fill / 6px 6px 6px 30px stretch; }
html.sf-skin.has-sf-icon-ready-n #room-ready:hover:not(:disabled) { border-image-source: var(--sf-icon-ready-h); }
html.sf-skin.has-sf-icon-ready-n #room-ready:active:not(:disabled), html.sf-skin.has-sf-icon-ready-n #room-ready.on { border-image-source: var(--sf-icon-ready-p); }
html.sf-skin.has-sf-icon-create-n #lobby-create { border-image: var(--sf-icon-create-n) 6 6 6 30 fill / 6px 6px 6px 30px stretch; }
html.sf-skin.has-sf-icon-create-n #lobby-create:hover { border-image-source: var(--sf-icon-create-h); }
html.sf-skin.has-sf-icon-create-n #lobby-create:active { border-image-source: var(--sf-icon-create-p); }
html.sf-skin.has-sf-icon-quick-n #lobby-quick { border-image: var(--sf-icon-quick-n) 6 6 6 30 fill / 6px 6px 6px 30px stretch; }
html.sf-skin.has-sf-icon-quick-n #lobby-quick:hover { border-image-source: var(--sf-icon-quick-h); }
html.sf-skin.has-sf-icon-quick-n #lobby-quick:active { border-image-source: var(--sf-icon-quick-p); }
html.sf-skin.has-sf-icon-join-n #lobby-join { border-image: var(--sf-icon-join-n) 6 6 6 30 fill / 6px 6px 6px 30px stretch; }
html.sf-skin.has-sf-icon-join-n #lobby-join:hover:not(:disabled) { border-image-source: var(--sf-icon-join-h); }
html.sf-skin.has-sf-icon-join-n #lobby-join:active:not(:disabled) { border-image-source: var(--sf-icon-join-p); }
html.sf-skin.has-sf-icon-refresh-n #lobby-refresh { border-image: var(--sf-icon-refresh-n) 6 6 6 30 fill / 6px 6px 6px 30px stretch; }
html.sf-skin.has-sf-icon-refresh-n #lobby-refresh:hover { border-image-source: var(--sf-icon-refresh-h); }
html.sf-skin.has-sf-icon-refresh-n #lobby-refresh:active { border-image-source: var(--sf-icon-refresh-p); }
/* SF's square exit buttons (out_1 / exit_1): icon only, the Thai label becomes the tooltip. */
html.sf-skin.has-sf-icon-out-n #room-leave, html.sf-skin.has-sf-icon-exit-n #lobby-logout { width: 59px; height: 56px; min-height: 0; padding: 0; border: 0; border-image: none;
  font-size: 0; color: transparent; text-shadow: none; background: var(--sf-icon-out-n) center / 100% 100% no-repeat; justify-self: end; }
html.sf-skin.has-sf-icon-out-n #room-leave:hover { background-image: var(--sf-icon-out-h); }
html.sf-skin.has-sf-icon-out-n #room-leave:active { background-image: var(--sf-icon-out-p); }
html.sf-skin.has-sf-icon-exit-n #lobby-logout { width: 47px; height: 45px; background-image: var(--sf-icon-exit-n); }
html.sf-skin.has-sf-icon-exit-n #lobby-logout:hover { background-image: var(--sf-icon-exit-h); }
html.sf-skin.has-sf-icon-exit-n #lobby-logout:active { background-image: var(--sf-icon-exit-p); }
/* Edit boxes and selects: black field, dark olive line (page*.txt *EDIT). */
html.sf-skin .screen input, html.sf-skin .screen select, html.sf-skin dialog input, html.sf-skin dialog select {
  background: #050505; color: #fff; border: 1px solid #4b4d3c; border-radius: 0; padding: 3px 6px; font-family: var(--sf-font); }
html.sf-skin .screen input:focus, html.sf-skin .screen select:focus, html.sf-skin dialog input:focus, html.sf-skin dialog select:focus { outline: 1px solid var(--sf-accent); }
html.sf-skin .form-grid label, html.sf-skin .field { color: var(--sf-dim); }
/* Lists (room list, online list, chat): black wells, SF list_selected_1 highlight. */
html.sf-skin .table-wrap, html.sf-skin .chat-log, html.sf-skin ul.online { background: rgba(0, 0, 0, .72); border: 1px solid var(--sf-line); }
html.sf-skin table.rooms th, html.sf-skin table.profile-recent th, html.sf-skin table.leaderboard th { background: #2e3026 var(--sf-panel-brown) center / 100% 100%; color: var(--sf-text); font-weight: 700; border-bottom: 1px solid var(--sf-line); }
html.sf-skin table.rooms td { border-bottom: 1px solid #1d1e18; color: var(--sf-text); }
html.sf-skin table.rooms tbody tr:hover, html.sf-skin table.leaderboard tbody tr:hover { background: rgba(212, 236, 98, .08); }
html.sf-skin table.rooms tr.sel { background: #3b3f1a var(--sf-list-selected) center / 100% 100%; outline: 0; }
html.sf-skin table.rooms tr.sel td { color: #fff; }
html.sf-skin .state-waiting { color: var(--sf-accent); }
html.sf-skin .chat-log .name { color: #ffd76a; }
html.sf-skin ul.online li { border-bottom-color: #1d1e18; }
/* Login: SF start-up splash behind an SF panel with the SF ONLINE mark. */
html.sf-skin .login-box { border-top: 1px solid var(--sf-line); background-color: rgba(30, 31, 25, .9); }
html.sf-skin.has-sf-sf-online .login-box .logo { height: 71px; background: var(--sf-sf-online) center / contain no-repeat; }
html.sf-skin.has-sf-sf-online .login-box .logo > * { visibility: hidden; }
html.sf-skin .server-status { background: rgba(0, 0, 0, .6); border-color: var(--sf-line); border-radius: 0; }
html.sf-skin .screen .login-tabs .tab { border-image: var(--sf-tab-n) 5 fill / 5px stretch; border-style: solid; border-width: 5px; color: var(--sf-dim); }
html.sf-skin .screen .login-tabs .tab.on { border-image-source: var(--sf-tab-h, var(--sf-tab-n)); color: var(--sf-accent); background: none; }
/* Room: team columns with the force marks (blue = Delta Force, red = Spetsnaz) and SF slots. */
html.sf-skin .team-col.red, html.sf-skin .team-col.blue { border-top: 1px solid var(--sf-line); }
html.sf-skin .team-col h2 { display: flex; align-items: center; gap: 8px; min-height: 26px; }
html.sf-skin.has-sf-mark-red .team-col.red h2::before, html.sf-skin.has-sf-mark-blue .team-col.blue h2::before { content: ""; width: 34px; height: 32px; flex: none; background: var(--sf-mark-red) center / contain no-repeat; }
html.sf-skin.has-sf-mark-blue .team-col.blue h2::before { background-image: var(--sf-mark-blue); }
html.sf-skin .team-col.red h2 { color: #ff8a70; box-shadow: inset 0 -2px 0 #b8322a; }
html.sf-skin .team-col.blue h2 { color: #7fb4ff; box-shadow: inset 0 -2px 0 #2f62c8; }
html.sf-skin ol.slots li { background: rgba(0, 0, 0, .6); border: 1px solid #000; border-radius: 0; color: var(--sf-text); }
html.sf-skin .team-col.red ol.slots li.taken { background: linear-gradient(90deg, rgba(184, 50, 42, .42), rgba(0, 0, 0, .6) 75%); }
html.sf-skin .team-col.blue ol.slots li.taken { background: linear-gradient(90deg, rgba(47, 98, 200, .42), rgba(0, 0, 0, .6) 75%); }
html.sf-skin ol.slots li.me { outline: 1px solid var(--sf-accent); }
html.sf-skin ol.slots li.closed { background: repeating-linear-gradient(45deg, #070707 0 6px, #11120e 6px 12px); }
html.sf-skin ol.slots .status { background: none; border-radius: 0; color: var(--sf-dim); font-weight: 700; }
html.sf-skin.has-sf-state-ready ol.slots .status.ready, html.sf-skin.has-sf-state-play ol.slots .status.ingame { width: 53px; height: 24px; padding: 0; font-size: 0; color: transparent; background: var(--sf-state-ready) center / contain no-repeat; }
html.sf-skin.has-sf-state-play ol.slots .status.ingame { background-image: var(--sf-state-play); }
html.sf-skin ol.slots .status.host { color: #ffd76a; background: none; }
html.sf-skin.has-sf-captain ol.slots .crown { font-size: 0; width: 17px; height: 26px; background: var(--sf-captain) center / contain no-repeat; }
html.sf-skin.has-sf-captain ol.slots .crown:empty { background: none; }
/* Room map picture in SF's map frame (page3.txt map_bottom_1). */
html.sf-skin #screen-room .settings-box::before { content: ""; display: block; height: 118px; margin: 0 -8px 8px; border-bottom: 1px solid #000;
  background: var(--sf-room-map, none) center / auto 100% no-repeat, #0a0b08 var(--sf-map-frame, none) center / 100% 100%; }
/* Loading: the map's SF loading picture, mission text and SF's loading bar. */
html.sf-skin #screen-loading { justify-content: flex-end; background: #000 var(--sf-loading-map, var(--sf-bg, none)) center / contain no-repeat; }
html.sf-skin .loading-box { width: min(760px, calc(100% - 32px)); margin-bottom: 4vh; padding: 10px 16px 12px; background-color: rgba(0, 0, 0, .78); }
html.sf-skin .loading-box h2 { margin: 0 0 4px; background: none; border: 0; font-size: 16px; }
html.sf-skin .loading-box .sf-mission { margin: 6px 0 8px; color: #ffe08a; font-size: 14px; text-shadow: 0 1px 2px #000; }
html.sf-skin .loading-box .bar { height: 8px; border-radius: 0; background: #111; border: 1px solid #000; }
html.sf-skin.has-sf-loading-bar .loading-box .bar i { background: var(--sf-loading-bar) center / 100% 100%; }
/* Results: SF YOU WIN / YOU LOSE / DRAW art over the score. */
html.sf-skin .results-box { border-top: 1px solid var(--sf-line); }
html.sf-skin #screen-results[data-outcome] .results-box::before { content: ""; display: block; height: 96px; margin: -6px auto 4px; background: center / contain no-repeat; }
html.sf-skin.has-sf-win #screen-results[data-outcome="win"] .results-box::before { background-image: var(--sf-win); }
html.sf-skin.has-sf-lose #screen-results[data-outcome="lose"] .results-box::before { background-image: var(--sf-lose); }
html.sf-skin.has-sf-draw #screen-results[data-outcome="draw"] .results-box::before { background-image: var(--sf-draw); }
html.sf-skin .results-teams th, html.sf-skin .results-teams td { border-bottom-color: #1d1e18; }
/* Dialogs / toast / Esc menu. */
html.sf-skin dialog { border-top: 1px solid var(--sf-line); color: var(--sf-text); }
html.sf-skin #toast { border-radius: 0; background: rgba(60, 14, 10, .92); border-color: #000; }
html.sf-skin #toast.info { background: rgba(20, 22, 16, .92); color: var(--sf-text); }
/* BGM control (src/ui/sf-audio.js) on the menu screens: SF's sound on/off button + slider. */
#sf-music { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) scale(.8); transform-origin: bottom center; z-index: 11; display: flex; align-items: center; gap: 6px; pointer-events: auto; padding: 1px 8px; background: rgba(0, 0, 0, .7); border: 1px solid #000; }
#sf-music .sf-music-toggle { width: 28px; height: 25px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: #333 center / contain no-repeat; font-size: 0; }
#sf-music .sf-music-toggle::before { content: "♪"; font-size: 15px; color: #ddd; }
html.has-sf-icon-sound-n #sf-music .sf-music-toggle { background-image: var(--sf-icon-sound-n); }
html.has-sf-icon-sound-n #sf-music .sf-music-toggle::before { content: none; }
html.has-sf-icon-sound-h #sf-music.off .sf-music-toggle { background-image: var(--sf-icon-sound-h); }
#sf-music.off input { opacity: .4; }
#sf-music input { width: 90px; accent-color: #d4ec62; }

/* ---- In-game HUD (SF layout) ---- */
/* SF digit sprites (Inf\0-9.tga 32x32; the timer uses the 16x32 DS-Digital set). */
html.sf-hud #game-hud i.d, html.sf-hud #game-hud i.sd { display: inline-block; font-style: normal; color: transparent; font-size: 0; vertical-align: bottom; background: center / auto 100% no-repeat; }
html.sf-hud #game-hud i.d { width: 21px; height: 32px; background-size: 32px 32px; }
html.sf-hud #game-hud i.sd { width: 11px; height: 22px; }
html.sf-hud #game-hud i.d0 { background-image: var(--sf-d0); } html.sf-hud #game-hud i.d1 { background-image: var(--sf-d1); }
html.sf-hud #game-hud i.d2 { background-image: var(--sf-d2); } html.sf-hud #game-hud i.d3 { background-image: var(--sf-d3); }
html.sf-hud #game-hud i.d4 { background-image: var(--sf-d4); } html.sf-hud #game-hud i.d5 { background-image: var(--sf-d5); }
html.sf-hud #game-hud i.d6 { background-image: var(--sf-d6); } html.sf-hud #game-hud i.d7 { background-image: var(--sf-d7); }
html.sf-hud #game-hud i.d8 { background-image: var(--sf-d8); } html.sf-hud #game-hud i.d9 { background-image: var(--sf-d9); }
html.sf-hud #game-hud i.dslash { background-image: var(--sf-dslash); }
html.sf-hud #game-hud i.sd0 { background-image: var(--sf-sd0); } html.sf-hud #game-hud i.sd1 { background-image: var(--sf-sd1); }
html.sf-hud #game-hud i.sd2 { background-image: var(--sf-sd2); } html.sf-hud #game-hud i.sd3 { background-image: var(--sf-sd3); }
html.sf-hud #game-hud i.sd4 { background-image: var(--sf-sd4); } html.sf-hud #game-hud i.sd5 { background-image: var(--sf-sd5); }
html.sf-hud #game-hud i.sd6 { background-image: var(--sf-sd6); } html.sf-hud #game-hud i.sd7 { background-image: var(--sf-sd7); }
html.sf-hud #game-hud i.sd8 { background-image: var(--sf-sd8); } html.sf-hud #game-hud i.sd9 { background-image: var(--sf-sd9); }
html.sf-hud #game-hud i.sdcolon { background-image: var(--sf-sdcolon); }
html.sf-hud #game-hud i.dt { font-style: normal; }
/* HP bottom-left, ammo bottom-right: dark SF plates, white digit sprites. */
html.sf-hud #vitals, html.sf-hud #ammo { bottom: 14px; padding: 4px 12px; border-radius: 0; background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .62)); border: 1px solid rgba(0, 0, 0, .7); align-items: center; font-family: Tahoma, sans-serif; }
html.sf-hud #vitals { left: 14px; }
html.sf-hud #vitals .label { color: #e8f0c8; font-weight: 700; font-size: 15px; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
html.sf-hud #vitals.low i.d { filter: sepia(1) saturate(9) hue-rotate(-50deg); }
html.sf-hud #ammo { right: 14px; }
html.sf-hud #ammo .sep { display: none; }
html.sf-hud #ammo #reserve::before { content: ""; display: inline-block; width: 18px; height: 32px; vertical-align: bottom; background: var(--sf-dslash, none) center / 32px 32px no-repeat; }
html.sf-hud #ammo #reserve:empty::before { content: none; }
html.sf-hud #ammo #reserve i.d { width: 15px; height: 22px; background-size: 22px 22px; }
html.sf-hud #ammo.empty i.d { filter: sepia(1) saturate(9) hue-rotate(-50deg); }
html.sf-hud #ammo.reloading i { opacity: .5; }
html.sf-hud #ammo.sf-art { padding-top: 92px; min-width: 190px; justify-content: flex-end; background: var(--sf-weapon) right 4px top 0 / 184px 92px no-repeat, linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .62)); }
html.sf-hud #ammo.sf-art #weapon-name { display: none; }
html.sf-hud #weapon-slots { bottom: 150px; right: 14px; }
html.sf-hud #weapon-slots .slot { border-radius: 0; background: rgba(0, 0, 0, .5); }
/* Crosshair: crosshair.kst rows 1-4 (inner gap 7-10 px, 6-8 px bars, RGB 125/255/255, alpha 200). */
html.sf-hud #crosshair { --ch: rgba(125, 255, 255, .78);
  background: linear-gradient(var(--ch), var(--ch)) center top / 2px 7px no-repeat, linear-gradient(var(--ch), var(--ch)) center bottom / 2px 7px no-repeat,
  linear-gradient(var(--ch), var(--ch)) left center / 7px 2px no-repeat, linear-gradient(var(--ch), var(--ch)) right center / 7px 2px no-repeat; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8)); }
/* Hit marker: Inf\Hit\Hit_Body.tga / Hit_Head.tga. */
html.has-sf-hit-body #hitmarker { width: 40px; height: 40px; transform: translate(-50%, -50%); background: var(--sf-hit-body) center / contain no-repeat; filter: none; }
html.has-sf-hit-head #hitmarker.head { background-image: var(--sf-hit-head); filter: none; }
/* Kill feed (SF DeathNote): killer, weapon silhouette (Weapon.kst kill_image), mark, victim. */
html.sf-hud #killfeed { top: 84px; right: 14px; gap: 2px; font-family: Tahoma, sans-serif; font-size: 12px; font-weight: 700; }
html.sf-hud #killfeed .kill { display: flex; align-items: center; gap: 4px; padding: 0 8px; min-height: 30px; border-radius: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55) 20%); text-shadow: 0 1px 1px #000; }
html.sf-hud #killfeed .kill.mine { outline: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(70, 64, 10, .7) 20%); }
#killfeed .kf-weapon.icon { display: inline-block; width: 64px; height: 30px; font-size: 0; color: transparent; background: var(--sf-kill-icon) center / contain no-repeat; }
#killfeed .kf-mark { display: none; }
html.has-sf-feed-head #killfeed .kf-mark.head, html.has-sf-feed-knife #killfeed .kf-mark.knife, html.has-sf-feed-grenade #killfeed .kf-mark.grenade { display: inline-block; width: 26px; height: 26px; background: var(--sf-feed-head) center / contain no-repeat; }
html.has-sf-feed-knife #killfeed .kf-mark.knife { background-image: var(--sf-feed-knife); }
html.has-sf-feed-grenade #killfeed .kf-mark.grenade { background-image: var(--sf-feed-grenade); }
#killfeed .kf-name { white-space: nowrap; }
/* Centre kill effect (Inf\killeffect icon + text, KillImage.txt fade in / out). */
#kill-effect { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); display: grid; justify-items: center; opacity: 0; pointer-events: none; }
#kill-effect.on { animation: sf-kill 1.8s ease-out; }
#kill-effect .ke-icon { width: 120px; height: 120px; background: center / contain no-repeat; }
#kill-effect .ke-text { width: 250px; height: 50px; background: center / contain no-repeat; }
@keyframes sf-kill { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
#kill-effect[data-kind="headshot"] .ke-icon { background-image: var(--sf-ke-headshot-icon); } #kill-effect[data-kind="headshot"] .ke-text { background-image: var(--sf-ke-headshot-text); }
#kill-effect[data-kind="knife"] .ke-icon { background-image: var(--sf-ke-knife-icon); } #kill-effect[data-kind="knife"] .ke-text { background-image: var(--sf-ke-knife-text); }
#kill-effect[data-kind="grenade"] .ke-icon { background-image: var(--sf-ke-grenade-icon); } #kill-effect[data-kind="grenade"] .ke-text { background-image: var(--sf-ke-grenade-text); }
#kill-effect[data-kind="kill"] .ke-icon { background-image: var(--sf-ke-kill-icon); } #kill-effect[data-kind="kill"] .ke-text { background-image: var(--sf-ke-kill-text); }
#kill-effect[data-kind="multi"] .ke-icon { width: 300px; background-image: var(--sf-ke-multi-icon); } #kill-effect[data-kind="multi"] .ke-text { background-image: var(--sf-ke-multi-text); }
#kill-effect[data-kind="specialforce"] .ke-icon { width: 300px; background-image: var(--sf-ke-specialforce-icon); } #kill-effect[data-kind="specialforce"] .ke-text { background-image: var(--sf-ke-specialforce-text); }
/* Radar (top-left, src/ui/minimap.js). */
#minimap { position: absolute; left: 14px; top: 14px; width: 168px; height: 168px; background: rgba(0, 0, 0, .5); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(212, 236, 98, .25), 0 0 0 1px rgba(255, 255, 230, .08); border-radius: 50%; }
/* Top info (Modes' #match-bar): SF's ui_bg_topinformation red / blue brush strip. */
html.has-sf-topinfo #match-bar { top: 6px; min-width: 420px; height: 52px; padding: 0 70px; justify-content: space-between; border-radius: 0; background: var(--sf-topinfo) center / 100% 100% no-repeat; font-family: Tahoma, sans-serif; font-weight: 700; text-shadow: 0 1px 2px #000; }
html.has-sf-topinfo #match-bar b { font-size: 26px; color: #fff; }
/* Scoreboard (Tab): Inf\tab\base\team_tab.tga, header baked into the art, red half over blue. */
html.has-sf-tab #scoreboard { width: 575px; height: 517px; padding: 34px 0 0; gap: 0; flex-direction: column; border: 0; border-radius: 0; background: var(--sf-tab) 0 0 / 575px 517px no-repeat; font-family: Tahoma, sans-serif; }
html.has-sf-tab #scoreboard .team { height: 240px; position: relative; overflow: hidden; }
html.has-sf-tab #scoreboard h3 { position: absolute; right: 10px; bottom: 4px; margin: 0; font-size: 12px; opacity: .85; }
html.has-sf-tab #scoreboard table { width: 575px; min-width: 0; table-layout: fixed; font-size: 12px; font-weight: 700; }
html.has-sf-tab #scoreboard tr:first-child { visibility: collapse; } /* header is baked into the art; the row still sizes the columns */
html.has-sf-tab #scoreboard th:nth-child(1) { width: 236px; } html.has-sf-tab #scoreboard th:nth-child(2) { width: 82px; } html.has-sf-tab #scoreboard th:nth-child(3) { width: 76px; }
html.has-sf-tab #scoreboard th:nth-child(4) { width: 86px; } html.has-sf-tab #scoreboard th:nth-child(5) { width: 95px; }
html.has-sf-tab #scoreboard td { padding: 3px 0; text-align: center; color: #eee; text-shadow: 0 1px 1px #000; border-bottom: 1px solid rgba(0, 0, 0, .35); }
html.has-sf-tab #scoreboard td:nth-child(1) { width: 236px; text-align: left; padding-left: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.has-sf-tab #scoreboard td:nth-child(2) { width: 82px; } html.has-sf-tab #scoreboard td:nth-child(3) { width: 76px; }
html.has-sf-tab #scoreboard td:nth-child(4) { width: 86px; } html.has-sf-tab #scoreboard td:nth-child(5) { width: 95px; }
html.has-sf-tab #scoreboard tr.me td { color: #ffe14a; }
html.has-sf-tab #scoreboard tr.dead td { color: #8a8a8a; }
/* Death / banners: SF dark plates. */
html.sf-hud #death, html.sf-hud #banner { border-radius: 0; border: 1px solid #000; font-family: Tahoma, sans-serif; background: rgba(0, 0, 0, .7); }
html.sf-hud #banner { border-top: 2px solid #d4ec62; }

/* ==== Shop (web/shop.js) ======================================================================
   SF lobby\PageWPShop.txt / PageCharShop.txt / PageItemShop.txt: left = title, SP + BUY, preview
   (3D), stats, prices; right = shop tabs, type tabs, search / sort, item grid on SF's 203x144
   item_bottom_1 frames, pager, SP bar, exit. Art = --sf-shop-* (src/ui/sf-catalog.js SHOP_SPRITES,
   html.has-sf-shop-*); without it the plain look below stays. */
.sp-balance { color: #ffd38a; font-weight: 700; }
.shop-page { flex: 1; min-height: 0; display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 12px; padding: 12px 20px 16px; }
.shop-left, .shop-right { min-height: 0; overflow: hidden; }
.shop-wallet { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.shop-sp { margin: 0; justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-sp b { color: #adef10; }
.shop-detail { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.shop-preview-title { margin: 0; font-size: 12px; color: #a8afcb; }
.shop-preview { position: relative; flex: none; height: 200px; background: radial-gradient(ellipse at 50% 60%, #2a3346, #07090d 75%); border: 1px solid #222b40; }
.shop-preview-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.shop-preview-canvas:active { cursor: grabbing; }
.shop-preview p { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; text-align: center; font-size: 12px; pointer-events: none; }
.shop-name { margin: 6px 0 0; font-size: 16px; color: #fff; overflow-wrap: anywhere; }
.shop-variant { margin: 0 0 4px; font-size: 12px; }
.shop-stats { display: grid; gap: 4px; margin: 4px 0 6px; }
.shop-stat { display: grid; grid-template-columns: 72px 171px minmax(0, 1fr); gap: 5px; align-items: center; font-size: 12px; }
.shop-bar { position: relative; height: 11px; overflow: hidden; background: #0b0f18; border: 1px solid #2c3854; box-sizing: border-box; }
.shop-bar i { position: absolute; top: 0; bottom: 0; left: 0; background: #ffb54a; }
.shop-bar.red i { background: linear-gradient(#ff7b62, #b32b1b); }
.shop-bar.orange i { background: linear-gradient(#ffb070, #b5602a); }
.shop-bar.blue i { background: linear-gradient(#6cc8ff, #1d6fb8); }
.shop-bar.green i { background: linear-gradient(#7af07a, #1f9a2a); }
.shop-bar.lime i { background: linear-gradient(#e4ffb0, #8fbf3a); }
.shop-stat-value { text-align: right; color: #c8cde0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-prices { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 2px; }
.shop-prices th { text-align: left; font-weight: 400; color: #a8afcb; padding: 1px 6px; }
.shop-prices td { text-align: right; color: #ffd38a; font-weight: 700; padding: 1px 6px; }
.shop-prices tr:nth-child(odd) { background: rgba(255, 255, 255, .04); }
.shop-owned { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #7fe08a; }
.shop-owned:empty { display: none; }
.shop-info { margin: 4px 0 0; font-size: 12px; }
.shop-right { display: flex; flex-direction: column; gap: 6px; }
.shop-tabs, .shop-subtabs { display: flex; flex-wrap: wrap; gap: 2px; }
.screen .shop-tabs .tab, .screen .shop-subtabs .tab { min-width: 100px; padding: 4px 10px; border-radius: 0; background: #1b2233; color: #a8afcb; border: 1px solid #3a4668; font-size: 13px; }
.screen .shop-subtabs .tab { min-width: 0; padding: 3px 12px; font-size: 12px; }
.screen .shop-tabs .tab.on, .screen .shop-subtabs .tab.on { background: linear-gradient(#f0a03a, #c86f12); color: #1a0f00; border-color: #f0a03a; }
.shop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.shop-tools label { display: flex; align-items: center; gap: 6px; }
.shop-tools input[type="search"] { width: 220px; }
.shop-tools #shop-count { margin-left: auto; }
.shop-grid-wrap { position: relative; flex: 1; min-height: 150px; }
.shop-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, 203px); grid-auto-rows: 144px; gap: 6px; justify-content: center; align-content: start; overflow: hidden; }
.shop-empty { position: absolute; left: 0; right: 0; top: 35%; margin: 0; }
.shop-card { position: relative; display: grid; grid-template-rows: 24px minmax(0, 1fr) 26px; background: #121826; border: 1px solid #2c3854; cursor: pointer; overflow: hidden; outline: 0; }
.shop-card:hover, .shop-card:focus-visible { border-color: #6a7aa8; }
.shop-card.sel { border-color: #ffb54a; box-shadow: inset 0 0 0 1px #ffb54a; }
.shop-card-name { padding: 3px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, .05); }
.shop-card-pic { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.shop-card-pic img { max-width: 186px; max-height: 92px; object-fit: contain; }
.shop-card-pic.kind-character img, .shop-card-pic.kind-accessory img { height: 88px; }
.shop-card-pic.kind-accessory img { opacity: .55; }
.shop-card-part { position: absolute; left: 6px; bottom: 2px; padding: 0 5px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .65); }
.shop-card-alt { color: #4c5470; font-size: 12px; }
.shop-card-badges { position: absolute; top: 27px; right: 4px; display: flex; gap: 2px; }
.shop-ico { font-style: normal; font-size: 10px; font-weight: 800; line-height: 15px; padding: 0 4px; color: #fff; background: #b8322a; }
.shop-ico.hot { background: #d86a12; }
.shop-ico.sale { background: #2f8a4a; }
.shop-card-foot { display: flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 12px; white-space: nowrap; min-width: 0; }
.shop-card-price { color: #ffd38a; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.shop-card-own { margin-left: auto; color: #7fe08a; font-size: 11px; }
.screen .shop-card-act { margin-left: 4px; padding: 0 8px; min-height: 0; font-size: 11px; line-height: 18px; }
.shop-card.owned .shop-card-price { color: #8a91ad; font-weight: 400; }
.shop-foot { display: flex; align-items: center; gap: 8px; }
.screen .shop-page-btn { width: 30px; padding: 2px 0; }
.shop-page-no { min-width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
.shop-foot-sp { margin-left: auto; }
.shop-foot-sp b { color: #adef10; }
.shop-equipped { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.shop-slot { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 3px 6px 4px; background: #0b0f18; border: 1px solid #222b40; font-size: 12px; }
.shop-slot-label { align-self: flex-start; color: #8a91ad; font-size: 11px; white-space: nowrap; }
.shop-slot-pic { display: flex; align-items: center; justify-content: center; height: 52px; }
.shop-slot-pic img { max-height: 52px; max-width: 100%; object-fit: contain; }
.shop-slot b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-slot small { min-height: 1.3em; font-size: 11px; }
.shop-slot.char.red { border-color: #6a2a24; }
.shop-slot.char.blue { border-color: #24406a; }
dialog.shop-buy-dialog { width: min(440px, calc(100% - 32px)); }
.shop-buy-item { display: flex; align-items: center; gap: 12px; }
.shop-buy-item img { max-width: 160px; max-height: 80px; object-fit: contain; background: rgba(0, 0, 0, .35); }
.shop-buy-item p { margin: 2px 0 0; font-size: 12px; }
.shop-buy-options { display: grid; gap: 4px; margin: 12px 0 8px; padding: 6px 10px 8px; border: 1px solid #2c3854; }
.shop-buy-options legend { padding: 0 4px; font-size: 12px; color: #a8afcb; }
.shop-buy-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 3px 6px; cursor: pointer; }
.shop-buy-option:has(input:checked) { background: rgba(255, 181, 74, .14); outline: 1px solid rgba(255, 181, 74, .5); }
.shop-buy-option:has(input:disabled) { opacity: .5; cursor: default; }
.shop-buy-option b { color: #ffd38a; }
.shop-buy-balance { margin: 0; font-size: 13px; }
#shop-buy-after.short { color: #ff7a6b; }
.shop-buy-guest { margin: 12px 0 4px; padding: 8px 10px; background: rgba(255, 181, 74, .1); border: 1px solid rgba(255, 181, 74, .4); }
.shop-buy-guest p { margin: 0 0 8px; }
@media (max-width: 900px) {
  .shop-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 8px; }
  .shop-left { max-height: 38vh; }
  .shop-equipped { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* SF art. */
html.sf-skin .shop-left, html.sf-skin .shop-right { padding: 0 8px 8px; }
html.sf-skin #shop-heading::before { content: ""; display: none; height: 13px; margin-right: 10px; vertical-align: -1px; background: left center / auto 13px no-repeat; }
html.has-sf-shop-title-weapon #shop-heading[data-art="title-weapon"]::before { display: inline-block; width: 87px; background-image: var(--sf-shop-title-weapon); }
html.has-sf-shop-title-character #shop-heading[data-art="title-character"]::before { display: inline-block; width: 107px; background-image: var(--sf-shop-title-character); }
html.has-sf-shop-title-item #shop-heading[data-art="title-item"]::before { display: inline-block; width: 66px; background-image: var(--sf-shop-title-item); }
html.sf-skin .shop-sp b, html.sf-skin .shop-foot-sp b { color: rgb(173, 239, 16); } /* PageWPShop "SP :" FONTCOLOR */
html.has-sf-shop-title-preview .shop-preview-title { height: 13px; margin: 2px 0 3px; font-size: 0; background: var(--sf-shop-title-preview) left center / auto 13px no-repeat; }
html.sf-skin .shop-preview { border: 1px solid #000; background: radial-gradient(ellipse at 50% 60%, #3a3c30, #0a0b08 75%); }
html.sf-skin .shop-name { color: #fff; font-size: 15px; }
html.sf-skin .shop-stat-label { color: var(--sf-dim); }
html.sf-skin .shop-prices tr:nth-child(odd) { background: rgba(0, 0, 0, .3); }
html.sf-skin .shop-owned { color: var(--sf-accent); }
/* BUY: shop_buy_1 (cart icon, label at FIXTEXPOS 40 13). */
html.sf-skin.has-sf-shop-buy-0 #shop-buy { width: 73px; height: 41px; min-height: 0; padding: 0 0 0 30px; border: 0; border-image: none; text-align: left;
  background: var(--sf-shop-buy-0) center / 100% 100% no-repeat; }
html.sf-skin.has-sf-shop-buy-1 #shop-buy:hover:not(:disabled) { background-image: var(--sf-shop-buy-1); }
html.sf-skin.has-sf-shop-buy-2 #shop-buy:active:not(:disabled) { background-image: var(--sf-shop-buy-2); }
/* Tabs: SF's tab_100x27 frame (PageWPShop TABCTRL) with the Thai label; part tabs = SF sprites. */
html.sf-skin #screen-shop .shop-tabs .tab, html.sf-skin #screen-shop .shop-subtabs .tab { min-width: 100px; height: 28px; min-height: 0; padding: 0 8px; border-style: solid; border-width: 5px;
  border-image: var(--sf-tab-n, var(--sf-btn-n)) 5 fill / 5px stretch; background: none; color: var(--sf-dim); font-size: 12px; line-height: 1; }
html.sf-skin #screen-shop .shop-subtabs .tab { min-width: 72px; }
html.sf-skin #screen-shop .shop-tabs .tab:hover, html.sf-skin #screen-shop .shop-subtabs .tab:hover { color: #fff; }
html.sf-skin #screen-shop .shop-tabs .tab.on, html.sf-skin #screen-shop .shop-subtabs .tab.on { border-image-source: var(--sf-tab-h, var(--sf-btn-p, var(--sf-btn-n))); color: var(--sf-accent); }
html.has-sf-shop-sub-head-0 #screen-shop .shop-sub.art-sub-head, html.has-sf-shop-sub-face-0 #screen-shop .shop-sub.art-sub-face,
html.has-sf-shop-sub-chest-0 #screen-shop .shop-sub.art-sub-chest, html.has-sf-shop-sub-leg-0 #screen-shop .shop-sub.art-sub-leg,
html.has-sf-shop-sub-gear-0 #screen-shop .shop-sub.art-sub-gear { min-width: 0; width: 57px; height: 28px; padding: 0; border: 0; border-image: none; font-size: 0; color: transparent; text-shadow: none;
  background: var(--shop-sub-n) center / 100% 100% no-repeat; }
html.has-sf-shop-sub-head-0 #screen-shop .shop-sub.art-sub-head:is(.on, :hover), html.has-sf-shop-sub-face-0 #screen-shop .shop-sub.art-sub-face:is(.on, :hover),
html.has-sf-shop-sub-chest-0 #screen-shop .shop-sub.art-sub-chest:is(.on, :hover), html.has-sf-shop-sub-leg-0 #screen-shop .shop-sub.art-sub-leg:is(.on, :hover),
html.has-sf-shop-sub-gear-0 #screen-shop .shop-sub.art-sub-gear:is(.on, :hover) { border-image: none; background-image: var(--shop-sub-on); }
html.sf-skin .shop-sub.art.on { outline: 1px solid var(--sf-accent); outline-offset: -1px; }
.shop-sub.art-sub-head { --shop-sub-n: var(--sf-shop-sub-head-1); --shop-sub-on: var(--sf-shop-sub-head-0); }
.shop-sub.art-sub-face { --shop-sub-n: var(--sf-shop-sub-face-1); --shop-sub-on: var(--sf-shop-sub-face-0); }
.shop-sub.art-sub-chest { --shop-sub-n: var(--sf-shop-sub-chest-1); --shop-sub-on: var(--sf-shop-sub-chest-0); }
.shop-sub.art-sub-leg { --shop-sub-n: var(--sf-shop-sub-leg-1); --shop-sub-on: var(--sf-shop-sub-leg-0); }
.shop-sub.art-sub-gear { --shop-sub-n: var(--sf-shop-sub-gear-1); --shop-sub-on: var(--sf-shop-sub-gear-0); }
html.sf-skin .shop-tools { color: var(--sf-dim); }
/* Item cards: item_bottom_1 (normal / over / selected), name on its header band. */
html.sf-skin .shop-card { background: #1a1b16; border: 1px solid #000; }
html.has-sf-shop-card-0 .shop-card { border: 0; box-shadow: none; background: var(--sf-shop-card-0) center / 100% 100% no-repeat; }
html.has-sf-shop-card-1 .shop-card:hover, html.has-sf-shop-card-1 .shop-card:focus-visible { background-image: var(--sf-shop-card-1); }
html.has-sf-shop-card-2 .shop-card.sel { background-image: var(--sf-shop-card-2); }
html.sf-skin .shop-card-name { background: none; color: var(--sf-text); text-shadow: 0 1px 0 #000; }
html.sf-skin .shop-card.sel .shop-card-name { color: var(--sf-accent); }
html.sf-skin .shop-card-price { color: #ffe08a; }
html.sf-skin .shop-card-own { color: var(--sf-accent); }
html.sf-skin .screen .shop-card-act { min-height: 0; padding: 0 6px; border-width: 3px; border-image-width: 3px; font-size: 11px; line-height: 14px; }
html.has-sf-shop-ico-new .shop-ico.new, html.has-sf-shop-ico-hot .shop-ico.hot, html.has-sf-shop-ico-sale .shop-ico.sale { width: 30px; height: 15px; padding: 0; font-size: 0; background: var(--sf-shop-ico-new) center / 100% 100% no-repeat; }
html.has-sf-shop-ico-hot .shop-ico.hot { background-image: var(--sf-shop-ico-hot); }
html.has-sf-shop-ico-sale .shop-ico.sale { background-image: var(--sf-shop-ico-sale); }
/* Stat bars: value_bottom (empty 10-segment bar) filled with damage_bar / durability_bar /
   blue_bar / green_bar / sp_bar clipped to the value (171x11, page PageWPShop preview). */
html.has-sf-shop-bar-back .shop-bar { width: 171px; border: 0; background: var(--sf-shop-bar-back) 0 0 / 171px 11px no-repeat; }
html.has-sf-shop-bar-back .shop-bar i { background: 0 0 / 171px 11px no-repeat; }
html.has-sf-shop-bar-red .shop-bar.red i { background-image: var(--sf-shop-bar-red); }
html.has-sf-shop-bar-orange .shop-bar.orange i { background-image: var(--sf-shop-bar-orange); }
html.has-sf-shop-bar-blue .shop-bar.blue i { background-image: var(--sf-shop-bar-blue); }
html.has-sf-shop-bar-green .shop-bar.green i { background-image: var(--sf-shop-bar-green); }
html.has-sf-shop-bar-lime .shop-bar.lime i { background-image: var(--sf-shop-bar-lime); }
/* Pager: m_left_1 / m_right_1 arrows; exit: SF's out_1 square button (icon only). */
html.sf-skin.has-sf-shop-page-prev-0 #screen-shop .shop-page-btn { width: 20px; height: 25px; min-height: 0; padding: 0; border: 0; border-image: none; font-size: 0; color: transparent;
  background: var(--sf-shop-page-prev-0) center / 100% 100% no-repeat; }
html.sf-skin.has-sf-shop-page-prev-0 #screen-shop .shop-page-btn.prev:hover:not(:disabled) { background-image: var(--sf-shop-page-prev-1); }
html.sf-skin.has-sf-shop-page-prev-0 #screen-shop .shop-page-btn.prev:active:not(:disabled) { background-image: var(--sf-shop-page-prev-2); }
html.sf-skin.has-sf-shop-page-prev-0 #screen-shop .shop-page-btn.next { background-image: var(--sf-shop-page-next-0); }
html.sf-skin.has-sf-shop-page-prev-0 #screen-shop .shop-page-btn.next:hover:not(:disabled) { background-image: var(--sf-shop-page-next-1); }
html.sf-skin.has-sf-shop-page-prev-0 #screen-shop .shop-page-btn.next:active:not(:disabled) { background-image: var(--sf-shop-page-next-2); }
html.sf-skin .shop-foot { margin: 0 -8px -8px; padding: 4px 8px; background: #2e3026 var(--sf-panel) center / 100% 100%; border-top: 1px solid #000; }
html.sf-skin.has-sf-icon-out-n #shop-close { width: 59px; height: 56px; min-height: 0; padding: 0; border: 0; border-image: none; font-size: 0; color: transparent; text-shadow: none;
  background: var(--sf-icon-out-n) center / 100% 100% no-repeat; }
html.sf-skin.has-sf-icon-out-n #shop-close:hover { background-image: var(--sf-icon-out-h); }
html.sf-skin.has-sf-icon-out-n #shop-close:active { background-image: var(--sf-icon-out-p); }
html.sf-skin .shop-slot { background: rgba(0, 0, 0, .6); border: 1px solid #000; }
html.sf-skin .shop-slot-label { color: var(--sf-dim); }
html.sf-skin .shop-buy-options { border-color: #000; background: rgba(0, 0, 0, .35); }
html.sf-skin .shop-buy-option:has(input:checked) { background: rgba(212, 236, 98, .12); outline-color: rgba(212, 236, 98, .5); }
/* Lobby / room entry buttons: SF's LobbyMainBtn_ArmsShop icon in front of the label. */
html.has-sf-shop-lobby-shop-0 .screen button.shop-open::before { content: ""; display: inline-block; width: 40px; height: 24px; margin: -4px 6px -6px -4px; vertical-align: middle;
  background: var(--sf-shop-lobby-shop-0) center / 100% 100% no-repeat; }
html.has-sf-shop-lobby-shop-1 .screen button.shop-open:hover::before { background-image: var(--sf-shop-lobby-shop-1); }
html.has-sf-shop-lobby-shop-2 .screen button.shop-open:active::before { background-image: var(--sf-shop-lobby-shop-2); }

/* Modes: bomb mission HUD (web/hud.js bomb(), web/bomb-ui.js) and room bot settings */
#bomb-hud { position: absolute; inset: 0; }
#bomb-status { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 3px 14px; background: rgba(12, 15, 24, .7); border-radius: 8px; font-size: 14px; white-space: nowrap; }
#bomb-status .icon { width: 22px; height: 22px; background: var(--sf-bomb-icon, none) center / contain no-repeat; display: none; }
#bomb-status.planted .icon { display: inline-block; }
#bomb-status.planted { color: #ff7a6b; font-weight: 700; }
#bomb-status .secs { font-size: 20px; min-width: 2ch; text-align: right; }
#bomb-flash { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font-size: 26px; font-weight: 700; color: #ffd38a; text-shadow: 0 2px 6px #000; white-space: nowrap; }
#bomb-hint { position: absolute; top: calc(50% + 48px); left: 50%; transform: translateX(-50%); padding: 3px 12px; background: rgba(12, 15, 24, .7); border-radius: 6px; font-size: 14px; color: #ffd38a; }
#bomb-progress { position: absolute; top: calc(50% + 46px); left: 50%; transform: translateX(-50%); width: 260px; display: grid; gap: 4px; text-align: center; font-size: 13px; text-shadow: 0 1px 2px #000; }
#bomb-progress .track { height: 10px; background: rgba(12, 15, 24, .8); border: 1px solid #ffb54a; border-radius: 3px; overflow: hidden; }
#bomb-progress .fill { height: 100%; width: var(--progress, 0%); background: linear-gradient(#ffcf7a, #e0841c); }
#site-markers { position: absolute; inset: 0; overflow: hidden; }
.site-marker { position: absolute; left: 0; top: 0; display: grid; justify-items: center; margin: -14px 0 0 -60px; width: 120px; text-align: center; font-size: 11px; text-shadow: 0 1px 2px #000; color: #c8cde0; }
.site-marker .letter { width: 24px; height: 24px; line-height: 24px; text-align: center; border: 2px solid #ffb54a; border-radius: 50%; background: rgba(12, 15, 24, .6); color: #ffd38a; font-size: 14px; }
.site-marker.planted .letter { border-color: #ff5b4a; color: #ff7a6b; background: var(--sf-bomb-icon, rgba(60, 8, 8, .7)) center / 80% no-repeat, rgba(60, 8, 8, .7); }
.site-marker.edge { opacity: .75; }
.site-marker.edge .name { display: none; }
.form-grid label.check { grid-template-columns: 1fr auto; align-items: center; }
#hud:not([hidden]) ~ #game-hud #minimap { top: 104px; } /* offline practice top bar */

/* Modes: shooting range (web/range-ui.js) and one-click practice buttons */
.practice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
#range-hud { position: absolute; inset: 0; }
#range-panel { position: absolute; top: 210px; left: 22px; width: 300px; padding: 8px 12px; background: rgba(12, 15, 24, .72); border: 1px solid #2a3150; border-radius: 8px; font-size: 12px; text-shadow: 0 1px 2px #000; }
#range-panel h3 { margin: 0 0 6px; font-size: 14px; color: #ffd38a; }
#range-panel table { width: 100%; border-collapse: collapse; }
#range-panel th, #range-panel td { padding: 1px 4px; text-align: right; font-weight: 400; }
#range-panel .range-stats th { text-align: left; color: #a8afcb; }
#range-panel .range-weapons { margin-top: 6px; border-top: 1px solid #2a3150; }
#range-panel .range-weapons tr:first-child th { color: #a8afcb; }
#range-panel .range-weapons td:first-child, #range-panel .range-weapons th:first-child { text-align: left; }
#range-panel .range-keys { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 2px; color: #c8cde0; }
#range-panel .range-keys .on { color: #8fe08f; }
#range-panel .range-targets { margin: 2px 0 0; font-size: 11px; }
#range-distance { position: absolute; top: calc(50% + 22px); left: 50%; transform: translateX(-50%); font-size: 12px; color: #c8cde0; text-shadow: 0 1px 2px #000; }
#range-distance.target { color: #ff9b7a; }
#dmg-floats { position: absolute; inset: 0; overflow: hidden; }
.dmg-float { position: absolute; left: 0; top: 0; display: flex; gap: 4px; align-items: baseline; white-space: nowrap; font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; margin-left: -20px; }
.dmg-float b { font-size: 22px; color: #ffe08a; }
.dmg-float.head b { color: #ff5b4a; font-size: 26px; }
.dmg-float.kill b::after { content: " ✕"; font-size: 14px; }
.dmg-float .armor { color: #8fc7ff; font-size: 11px; }
#weapon-menu { position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 94vw); max-height: 84vh; overflow-y: auto; pointer-events: auto; padding: 12px 16px; background: rgba(12, 15, 24, .94); border: 1px solid #ffb54a; border-radius: 8px; }
#weapon-menu .menu-head { display: flex; align-items: baseline; gap: 14px; }
#weapon-menu h2 { margin: 0 0 8px; font-size: 18px; color: #ffd38a; }
#weapon-menu .menu-search { flex: 0 1 240px; font: inherit; padding: 3px 8px; }
#weapon-menu .menu-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
#weapon-menu .menu-tabs .tab { padding: 3px 10px; font-size: 12px; opacity: .75; }
#weapon-menu .menu-tabs .tab.on { opacity: 1; outline: 2px solid #ffd38a; }
#weapon-menu .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 8px; }
#weapon-menu .menu-more { margin-top: 8px; }
#weapon-menu .weapon-pick { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 3px; padding: 3px 6px; font-size: 12px; text-align: left; }
#weapon-menu .weapon-pick .pic { width: 76px; height: 28px; flex: none; background: center / contain no-repeat; }
#weapon-menu .weapon-pick.current { outline: 2px solid #ffd38a; }
html.sf-skin #weapon-menu, html.sf-skin #range-panel { font-family: var(--sf-font); background: rgba(36, 38, 31, .92) var(--sf-panel) center / 100% 100%; border: 1px solid var(--sf-line); border-radius: 0; }
html.sf-skin #weapon-menu h2, html.sf-skin #weapon-menu h3, html.sf-skin #range-panel h3 { color: var(--sf-accent); }

/* Fidelity: SF hit direction (Inf\up.JPG ... 8 red arcs on black, screen-blended), damage vignette, low-health veil, radio menu / lines / icon over the sender */
#damage-flash { box-shadow: inset 0 0 180px 60px rgba(200, 10, 10, .85); }
#damage-flash.on { animation: sf-hitflash .6s ease-out; }
@keyframes sf-hitflash { from { opacity: var(--hit, .8); } to { opacity: 0; } }
#low-hp-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 220px 30px rgba(170, 0, 0, .7); transition: opacity .4s; }
#low-hp-veil.on { opacity: 1; animation: sf-lowhp 1.1s ease-in-out infinite alternate; }
@keyframes sf-lowhp { from { opacity: .45; } to { opacity: 1; } }
#hit-dirs { position: absolute; inset: 0; pointer-events: none; }
.hit-dir { position: absolute; left: 50%; top: 50%; width: min(42vh, 360px); height: min(42vh, 360px); opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)); border-radius: 50%; border-top: 7px solid rgba(230, 20, 20, .85); filter: blur(1px); }
.hit-dir.sf-art { transform: translate(-50%, -50%); border: 0; border-radius: 0; filter: none; background: var(--sf-hit-dir) center / contain no-repeat; }
.hit-dir.on { animation: sf-hitdir 1.4s ease-out; }
@keyframes sf-hitdir { 0% { opacity: 1; } 55% { opacity: .85; } 100% { opacity: 0; } }
#radio-menu { position: absolute; left: 22px; top: 42%; min-width: 230px; padding: 6px 12px 8px; background: rgba(12, 15, 24, .78); border: 1px solid #ffd38a; color: #f2f2e8; font-size: 14px; pointer-events: none; text-shadow: 0 1px 2px #000; }
#radio-menu h4 { margin: 0 0 4px; color: #ffd38a; font-size: 14px; }
#radio-menu ol { list-style: none; margin: 0; padding: 0; }
#radio-menu li { padding: 1px 0; }
#radio-menu p { margin: 6px 0 0; font-size: 12px; color: #c8cde0; }
html.sf-skin #radio-menu { font-family: var(--sf-font); background: rgba(36, 38, 31, .9) var(--sf-panel) center / 100% 100%; border-color: var(--sf-line); }
html.sf-skin #radio-menu h4 { color: var(--sf-accent); }
#game-chat-log p.radio { color: #ffe680; }
#game-chat-log .radio-tag { color: #ffe14a; font-weight: 700; }
#game-chat-log .radio-icon { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: center / contain no-repeat; }
.radio-over { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; background: center / contain no-repeat; pointer-events: none; }
.radio-over:not([style*="background-image"]) { background: #ffe14a; border-radius: 4px; width: 10px; height: 16px; }
/* Fidelity: radar with SF's rendered map under it (src/ui/minimap-gl.js): SF's rectangle with a thin dark frame (Shader_Map_Minimap.fx "None Ping" line: black, alpha .3) */
#minimap.gl { border-radius: 0; background: transparent; border: 2px solid rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px rgba(253, 253, 96, .25); }

/* ==== SF page layout (src/ui/sf-layout.js) ====================================================
   Lobby / room / shop on SF's own 1024x768 page rects read at runtime (lobby\PageCommon.txt,
   Page2 = lobby, Page3 = room, PageWPShop / PageCharShop / PageItemShop / PageWeapon = shop tabs):
   the section is a 1024x768 stage on SF's default_bottom, scaled uniformly to the window
   (--sf-stage-scale) and letterboxed. .sf-at = absolute box (--lx/--ly/--lw/--lh, relative to the
   nearest placed ancestor), .sf-size = SF button size, .sf-row = button row starting at SF's
   first button, .sf-flat = wrapper dissolved. Only with html.sf-skin.sf-layout (art + page files
   + window >= 768x576) on a section with data-sf-page; otherwise the responsive layout stays. */
html.sf-skin.sf-layout #screens:has(> .screen[data-sf-page]:not([hidden])) { background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), #000 var(--sf-bg, none) center / cover no-repeat; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] { inset: auto; left: 50%; top: 50%; width: 1024px; height: 768px; display: block; overflow: visible;
  transform: translate(-50%, -50%) scale(var(--sf-stage-scale, 1)); background: #000 var(--sf-bg, none) 0 0 / 1024px 768px no-repeat; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-flat { display: contents; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--lgap); padding: var(--lpadtop) 4px 0 var(--lpad); overflow: visible; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-row > :where(button) { height: var(--lrowh); min-height: 0; min-width: var(--lroww); flex: none; padding: 0 6px; font-size: 12px; white-space: nowrap; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-size { min-width: var(--lw); height: var(--lh); min-height: 0; flex: none; box-sizing: border-box; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-at { position: absolute; left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); min-width: 0; min-height: 0; max-height: none; margin: 0; box-sizing: border-box; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-panel { background: #24261f var(--sf-panel) center / 100% 100%; border: 1px solid #000; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 230, .07); }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-bare { background: none; border: 0; box-shadow: none; padding: 0; }
/* Boxes holding placed children draw their frame as an inset outline: a border would shift the children by 1 px. */
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-at:has(.sf-at):not(.sf-bare) { border: 0; outline: 1px solid #000; outline-offset: -1px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .sf-strip { padding: 0 8px; line-height: calc(var(--lh) - 2px); font-size: 12px; color: var(--sf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .chat-box.sf-at { padding: 3px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .chat-box.sf-at > h2 { display: none; } /* SF's chat window has no title */
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .chat-form { margin-top: 3px; }
/* Lobby (PageCommon top menu + Page2). */
html.sf-skin.sf-layout #screens > #screen-lobby[data-sf-page] .topbar .brand.sf-at { display: flex; align-items: center; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] #lobby-version.sf-at { z-index: 3; font-size: 12px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .box-head h2.sf-at { padding: 0 10px; line-height: 24px; font-size: 12px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .table-wrap.sf-at { border: 1px solid #000; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] #lobby-create { order: -1; } /* SF: make room, then quick join */
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .box-foot.sf-at { flex-flow: row nowrap; justify-content: flex-end; align-items: stretch; gap: 4px; pointer-events: none; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .box-foot.sf-at > * { pointer-events: auto; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .box-foot.sf-at > button { height: auto; min-height: 0; padding: 0 4px; font-size: 11px; white-space: nowrap; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .box-foot > .sf-at { text-align: right; font-size: 11px; color: var(--sf-dim); }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .online-box.sf-at { padding: 0 6px 6px; }
/* Room (Page3). */
html.sf-skin.sf-layout #screens > #screen-room[data-sf-page] .topbar .brand.sf-at { font-size: 12px; letter-spacing: 0; font-weight: 700; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .team-col.sf-at { padding: 0 6px 6px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .team-col ol.slots { gap: 3px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .team-col ol.slots li { min-height: 0; font-size: 12px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .side.sf-at { display: flex; flex-direction: column; gap: 3px; overflow: visible; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .side > .character-box { order: -1; flex: none; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .side > .loadout-box { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .settings-box.sf-at { display: block; padding: 0; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .settings-box.sf-at::before { position: absolute; left: var(--lmx); top: var(--lmy); width: var(--lmw); height: var(--lmh); margin: 0; border: 0; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .settings-box h2.sf-at { padding: 0 4px; line-height: 21px; background: none; border: 0; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] #room-settings.sf-at { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px 6px; align-content: start; overflow-y: auto; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] #room-settings label { gap: 0; font-size: 11px; line-height: 13px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] #room-settings :is(select, input:not([type="checkbox"])) { height: 20px; padding: 0 3px; font-size: 12px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .room-actions :is(#room-ready, #room-start) { order: -1; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] #room-hint.sf-at { padding: 4px 6px; font-size: 12px; color: var(--sf-text); background: rgba(0, 0, 0, .55); border: 1px solid #000; overflow: hidden; }
/* Shop (PageCommon top menu = shop tabs, PageWPShop / PageCharShop / PageItemShop / PageWeapon). */
html.sf-skin.sf-layout #screens > .screen[data-sf-page] :is(.shop-left, .shop-right).sf-at { overflow: visible; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .shop-right.sf-at { padding: 4px; gap: 4px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .shop-heading.sf-at { padding: 0 10px; line-height: 24px; font-size: 12px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .shop-sp.sf-at { text-align: center; background: rgba(0, 0, 0, .5); border: 1px solid #000; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] #shop-detail.sf-at { padding: 4px 8px; overflow-y: auto; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .shop-tools.sf-at { flex-wrap: nowrap; gap: 4px 10px; padding: 0 8px; overflow: hidden; font-size: 12px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .shop-tools input[type="search"] { width: 180px; padding: 1px 6px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .shop-tools select { padding: 1px 4px; }
html.sf-skin.sf-layout #screens > .screen[data-sf-page] .shop-foot.sf-at { padding: 0 8px; }

/* ==== Social (web/social.js): friends / messenger panel, whisper window, notifications, clan pages,
   clan mark maker, gift / redeem dialogs. SF art = --sf-social-* (src/ui/sf-catalog.js
   SOCIAL_SPRITES); every rule with art is gated on its html.has-sf-social-* class. */
.badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 8px; background: #d8463a; color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-weight: 700; vertical-align: 1px; text-shadow: none; }
.social-panel { position: fixed; top: 64px; right: 12px; bottom: 56px; width: min(390px, calc(100% - 24px)); z-index: 20; gap: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); font-size: 14px; }
.social-head { display: flex; align-items: center; gap: 6px; }
.social-tabs { display: flex; gap: 4px; flex: 1; }
.social-tab { position: relative; }
.social-page { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.social-guest { margin: 0; }
.social-panel button, .social-chat button, .social-toast button { border-radius: 4px; background: linear-gradient(#f0a03a, #c86f12); color: #1a0f00; padding: 4px 12px; font-size: 13px; }
.social-panel button.ghost, .social-chat button.ghost, .social-toast button.ghost { background: #1b2233; color: #e8ebf5; border: 1px solid #3a4668; }
.social-panel .tab.on { background: linear-gradient(#66d16a, #2f9a3a); color: #04160a; }
.social-panel input, .social-chat input { font: inherit; background: #0d121c; color: inherit; border: 1px solid #34405e; border-radius: 4px; padding: 4px 8px; min-width: 0; }
.social-add { display: flex; gap: 6px; align-items: center; }
.social-add input { flex: 1; }
.social-sub { margin: 4px 0 0; font-size: 13px; color: #ffb54a; }
.social-sub-row { justify-content: space-between; }
.social-hint { font-size: 12px; margin: 4px 0 0; }
.social-request { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(255, 181, 74, .08); border: 1px solid rgba(255, 181, 74, .3); font-size: 13px; }
.social-request > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.social-small-list h4 { margin: 6px 0 2px; font-size: 12px; color: #a8afcb; }
.social-more summary { cursor: pointer; color: #a8afcb; font-size: 13px; }
.social-more > * + * { margin-top: 6px; }
.friend-list { list-style: none; margin: 0; padding: 0; }
.friend-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 5px 6px; border-bottom: 1px solid #1a2132; }
.friend-who { display: flex; align-items: center; gap: 2px; min-width: 0; white-space: nowrap; overflow: hidden; }
.friend-who .status-dot { margin-right: 4px; flex: none; }
.friend .status-dot.online { background: #66d16a; }
.friend-name { overflow: hidden; text-overflow: ellipsis; }
.friend.offline .friend-name { color: #6c7390; }
.friend-where { grid-column: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-actions { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; max-width: 190px; }
.friend-actions button { padding: 2px 8px; font-size: 12px; }
/* Clan tag before player names: SF clan mark + [clan name]. */
.clan-tag { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; color: #9ad1ff; font-size: .88em; font-weight: 700; white-space: nowrap; vertical-align: -2px; }
.clan-tag .clan-name::before { content: "["; }
.clan-tag .clan-name::after { content: "]"; }
.clan-mark { width: 20px; height: 20px; flex: none; object-fit: contain; }
.clan-mark.missing { display: none; }
.clan-mark.big { width: 56px; height: 56px; }
.clan-mark.huge { width: 96px; height: 96px; }
ol.slots .clan-tag { flex: none; }
ul.online li .clan-tag { color: #9ad1ff; font-size: 12px; }
/* Clan tab of the panel. */
.clan-card { display: flex; gap: 10px; align-items: center; padding: 6px; background: rgba(0, 0, 0, .3); border: 1px solid #222b40; }
.clan-card-info { display: grid; gap: 2px; min-width: 0; }
.clan-card-name { font-size: 18px; color: #ffd38a; }
.clan-notice { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #e8ebf5; }
.clan-create-box { display: grid; gap: 4px; justify-items: start; }
.clan-create-box p { margin: 0; font-size: 12px; }
.clan-list { list-style: none; margin: 0; padding: 0; }
.clan-row { display: grid; grid-template-columns: 24px 20px minmax(0, 1fr); gap: 0 6px; align-items: center; padding: 3px 4px; border-bottom: 1px solid #1a2132; cursor: pointer; font-size: 13px; }
.clan-row:hover { background: rgba(255, 255, 255, .05); }
.clan-row > .muted { grid-column: 3; font-size: 12px; }
.clan-place { color: #ffb54a; text-align: right; }
/* Mailbox. */
.mail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mail-list li { padding: 6px 8px; background: rgba(0, 0, 0, .3); border: 1px solid #222b40; }
.mail-list li.unread { border-color: rgba(255, 181, 74, .6); }
.mail-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mail-item { margin: 2px 0 0; color: #ffd38a; font-size: 13px; }
.mail-text { margin: 2px 0 0; font-style: italic; overflow-wrap: anywhere; }
.mail-list .row.end { margin-top: 4px; gap: 6px; }
.redeem-result { margin: 0; min-height: 1.2em; font-size: 13px; overflow-wrap: anywhere; }
/* Whisper window (GameText 387 "สนทนากับเพื่อน"). */
.social-chat { position: fixed; right: 414px; bottom: 56px; width: min(340px, calc(100% - 24px)); height: 300px; z-index: 21; gap: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); font-size: 14px; }
.social-panel[hidden] ~ .social-chat { right: 12px; }
.social-chat-head { display: flex; align-items: center; gap: 6px; }
.social-chat-head b { flex: 1; color: #e7a6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-chat-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.social-chat-tabs .chat-tab { padding: 1px 8px; font-size: 12px; }
.social-chat-tabs .chat-tab.on { outline: 1px solid #e7a6ff; }
.social-chat-tabs .chat-tab.unread::after { content: " ●"; color: #ff7a6b; }
.social-chat .chat-form { display: flex; gap: 6px; }
.social-chat .chat-form input { flex: 1; }
.chat-log p.mine .name { color: #9ad1ff; }
.chat-log p.whisper, #game-chat-log p.whisper { color: #f0c8ff; }
.chat-log .whisper-tag { color: #e7a6ff; font-weight: 700; }
.chat-log p.clan, #game-chat-log p.clan { color: #c8ffd0; }
.chat-log .clan-chat-tag { color: #7fe08a; font-weight: 700; }
/* Notifications: room invites (join button), friend requests, clan invites, gifts. */
.social-toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 31; display: grid; gap: 6px; width: min(480px, calc(100% - 24px)); pointer-events: none; }
.social-toast { pointer-events: auto; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 34px 10px 12px; background: rgba(16, 21, 33, .97); border: 1px solid #3a4668; border-left: 4px solid #6ba8ff; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font-size: 14px; }
.social-toast.invite { border-left-color: #66d16a; }
.social-toast p { margin: 0; flex: 1 1 220px; }
.social-toast .row.end { margin: 0; gap: 6px; }
.social-toast .clan-mark { width: 40px; height: 40px; }
.social-toast-x { position: absolute; top: 4px; right: 4px; padding: 0 6px !important; }
/* Profile actions, clan page dialog. */
.profile-social { gap: 6px; margin-top: 10px; }
.clan-dialog { width: min(780px, calc(100% - 32px)); max-height: calc(100% - 32px); }
.clan-page { display: grid; gap: 8px; }
.clan-page h3 { margin: 6px 0 0; font-size: 14px; color: #ffb54a; }
.clan-head { display: flex; gap: 14px; align-items: center; }
.clan-head h2 { margin: 0; font-size: 24px; }
.clan-head p { margin: 2px 0 0; font-size: 13px; }
.clan-section { display: grid; gap: 6px; }
.clan-notice-box { grid-template-columns: 1fr auto; align-items: start; padding: 6px 8px; background: rgba(0, 0, 0, .3); border: 1px solid #222b40; }
.clan-notice-box h3 { grid-column: 1 / -1; margin: 0; }
.clan-stats { grid-template-columns: repeat(4, 1fr); }
table.clan-members, table.clan-history { width: 100%; border-collapse: collapse; font-size: 13px; }
table.clan-members th, table.clan-members td, table.clan-history th, table.clan-history td { padding: 3px 6px; border-bottom: 1px solid #1a2132; text-align: left; white-space: nowrap; }
table.clan-members th, table.clan-history th { color: #a8afcb; font-weight: 600; }
table.clan-members tr.online td:nth-child(3) { color: #7fe08a; }
table.clan-members tr.role-master td:first-child { color: #ffd34a; }
table.clan-members tr.role-officer td:first-child { color: #9ad1ff; }
.clan-members-wrap { max-height: 260px; overflow: auto; }
.clan-member-actions { display: flex; gap: 4px; justify-content: flex-end; }
.clan-member-actions button { padding: 1px 8px; font-size: 12px; }
table.clan-history tr.result-win td:nth-child(3) { color: #7fe08a; }
table.clan-history tr.result-loss td:nth-child(3) { color: #ff7a6b; }
.clan-foot { justify-content: flex-end; }
/* Clan creation: SF clan mark maker (bg + frame + symbol) or premade marks. */
.clan-create-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100% - 32px); }
.clan-mark-maker { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; margin: 10px 0; }
.clan-mark-preview { display: grid; justify-items: center; align-content: start; gap: 4px; }
.clan-mark-preview canvas { width: 128px; height: 128px; border: 1px solid #000; background: repeating-conic-gradient(#20242c 0% 25%, #2a2f39 0% 50%) 0 0 / 16px 16px; }
.clan-mark-modes { display: flex; gap: 4px; margin-bottom: 8px; }
.clan-mark-modes .tab.on { outline: 2px solid #ffb54a; }
.mark-strip { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 6px; }
.mark-strip-label { font-size: 13px; color: #a8afcb; }
.mark-strip-list { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
dialog .mark-thumb { flex: none; width: 50px; height: 50px; min-height: 0; padding: 2px; border-radius: 0; border: 1px solid #2c3854; background: #0b0f18; color: #8a91ad; font-size: 16px; }
dialog .mark-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
dialog .mark-thumb.on { outline: 2px solid #ffb54a; outline-offset: -2px; }
.mark-grid { display: grid; grid-template-columns: repeat(auto-fill, 54px); gap: 4px; max-height: 236px; overflow: auto; }
.mark-pages { justify-content: center; gap: 10px; margin-top: 6px; }
.gift-dialog textarea { font: inherit; background: #0d121c; color: inherit; border: 1px solid #34405e; border-radius: 4px; padding: 5px 8px; resize: vertical; }
#gift-after.short { color: #ff7a6b; }
/* SF skin: panel buttons with SF's frame like the lobby screens. */
html.sf-skin .social-panel, html.sf-skin .social-chat, html.sf-skin .social-toast { font-family: var(--sf-font); font-size: 13px; color: var(--sf-text); }
html.sf-skin .social-panel button, html.sf-skin .social-chat button, html.sf-skin .social-toast button {
  border-style: solid; border-width: 6px; border-color: transparent; border-radius: 0; padding: 0 8px; min-height: 26px;
  border-image: var(--sf-btn-n) 6 fill / 6px stretch; background: none; color: var(--sf-text); font-weight: 700; text-shadow: 0 1px 0 #000; }
html.sf-skin .social-panel button:hover:not(:disabled), html.sf-skin .social-chat button:hover:not(:disabled), html.sf-skin .social-toast button:hover { border-image-source: var(--sf-btn-h, var(--sf-btn-n)); color: #fff; }
html.sf-skin .social-panel .tab.on, html.sf-skin .social-panel button:active:not(:disabled), html.sf-skin .social-toast button:active { border-image-source: var(--sf-btn-p, var(--sf-btn-n)); color: var(--sf-accent); }
html.sf-skin .social-panel input, html.sf-skin .social-chat input, html.sf-skin .gift-dialog textarea { background: #050505; color: #fff; border: 1px solid #4b4d3c; border-radius: 0; font-family: var(--sf-font); }
html.sf-skin .social-toast { border-radius: 0; background: rgba(30, 31, 25, .96); border-color: #000; border-left-color: var(--sf-accent); }
html.sf-skin .friend-list li, html.sf-skin .clan-row, html.sf-skin table.clan-members td, html.sf-skin table.clan-history td { border-bottom-color: #1d1e18; }
html.sf-skin .friend-list, html.sf-skin .mail-list li, html.sf-skin .clan-card, html.sf-skin .clan-notice-box { background: rgba(0, 0, 0, .55); border: 1px solid #000; }
html.sf-skin .social-sub, html.sf-skin .clan-page h3 { color: var(--sf-accent); }
html.sf-skin .clan-tag { color: #d4ec62; }
html.sf-skin .clan-card-name { color: #ffd76a; }
html.sf-skin .clan-mark-modes .tab.on, html.sf-skin dialog .mark-thumb.on { outline-color: var(--sf-accent); }
/* Messenger / Clan buttons: SF's btn_messenger (Page2 / Page3 bottom-right) and clan_web_page. */
html.has-sf-social-messenger-0 button.messenger-btn.messenger-btn, html.has-sf-social-clan-button-0 button.clan-btn.clan-btn { position: relative; width: 56px; height: 52px; min-height: 0; padding: 0; border: 0; border-image: none;
  font-size: 0; color: transparent; text-shadow: none; background: var(--sf-social-messenger-0) center / 100% 100% no-repeat; flex: none; }
html.has-sf-social-messenger-0 button.messenger-btn.messenger-btn:hover { background-image: var(--sf-social-messenger-1, var(--sf-social-messenger-0)); }
html.has-sf-social-messenger-0 button.messenger-btn.messenger-btn:active { background-image: var(--sf-social-messenger-2, var(--sf-social-messenger-0)); }
html.has-sf-social-clan-button-0 button.clan-btn.clan-btn { background-image: var(--sf-social-clan-button-0); }
html.has-sf-social-clan-button-0 button.clan-btn.clan-btn:hover { background-image: var(--sf-social-clan-button-1, var(--sf-social-clan-button-0)); }
html.has-sf-social-clan-button-0 button.clan-btn.clan-btn:active { background-image: var(--sf-social-clan-button-2, var(--sf-social-clan-button-0)); }
html.has-sf-social-messenger-0 .messenger-btn .badge, html.has-sf-social-clan-button-0 .clan-btn .badge { position: absolute; top: -4px; right: -4px; margin: 0; font-size: 11px; }
/* Panel tabs: "เพื่อน" (friend_on) and "Clan" (servertab_clan) sprites; frame 0 = selected. */
html.has-sf-social-friend-tab-0 .social-tab[data-tab="friends"], html.has-sf-social-clan-tab-0 .social-tab[data-tab="clan"] { width: 65px; height: 32px; min-height: 0; padding: 0; border: 0; border-image: none;
  font-size: 0; color: transparent; text-shadow: none; position: relative; background: var(--sf-social-friend-tab-1, var(--sf-social-friend-tab-0)) center / 100% 100% no-repeat; }
html.has-sf-social-friend-tab-0 .social-tab[data-tab="friends"].on { background-image: var(--sf-social-friend-tab-0); }
html.has-sf-social-clan-tab-0 .social-tab[data-tab="clan"] { width: 56px; height: 28px; background-image: var(--sf-social-clan-tab-1, var(--sf-social-clan-tab-0)); }
html.has-sf-social-clan-tab-0 .social-tab[data-tab="clan"].on { background-image: var(--sf-social-clan-tab-0); }
html.has-sf-social-friend-tab-0 .social-tab .badge { position: absolute; top: -5px; right: -5px; margin: 0; }
/* "+ เพื่อน" / "- เพื่อน" / "เชิญ" / Gift: baked-in labels. */
html.has-sf-social-add-friend-0 .social-add-btn, html.has-sf-social-add-friend-0 .add-friend-btn { width: 79px; height: 35px; min-height: 0; padding: 0; border: 0 !important; border-image: none !important;
  font-size: 0; color: transparent !important; text-shadow: none; background: var(--sf-social-add-friend-0) center / 100% 100% no-repeat !important; flex: none; }
html.has-sf-social-add-friend-1 .social-add-btn:hover, html.has-sf-social-add-friend-1 .add-friend-btn:hover { background-image: var(--sf-social-add-friend-1) !important; }
html.has-sf-social-add-friend-2 .social-add-btn:active, html.has-sf-social-add-friend-2 .add-friend-btn:active { background-image: var(--sf-social-add-friend-2) !important; }
html.has-sf-social-delete-friend-0 .delete-friend-btn { width: 59px; height: 26px; min-height: 0; padding: 0; border: 0 !important; border-image: none !important; font-size: 0 !important; color: transparent !important;
  text-shadow: none; background: var(--sf-social-delete-friend-0) center / 100% 100% no-repeat !important; }
html.has-sf-social-delete-friend-1 .delete-friend-btn:hover { background-image: var(--sf-social-delete-friend-1) !important; }
html.has-sf-social-invite-0 .invite-btn { width: 58px; height: 33px; min-height: 0; padding: 0; border: 0 !important; border-image: none !important; font-size: 0 !important; color: transparent !important;
  text-shadow: none; background: var(--sf-social-invite-0) center / 100% 100% no-repeat !important; }
html.has-sf-social-invite-1 .invite-btn:hover { background-image: var(--sf-social-invite-1) !important; }
html.has-sf-social-invite-2 .invite-btn:active { background-image: var(--sf-social-invite-2) !important; }
/* Clan headings drawn with SF's tab art: "Clan Ranking", "ข้อมูลสมาชิก". */
html.has-sf-social-tab-ranking-0 .clan-ranking-title, html.has-sf-social-tab-members-0 .tab-members-title {
  width: 123px; height: 32px; margin: 4px 0 0; font-size: 0; color: transparent; background: var(--sf-social-tab-ranking-0) left center / 100% 100% no-repeat; }
html.has-sf-social-tab-members-0 .tab-members-title { background-image: var(--sf-social-tab-members-0); }
html.has-sf-social-gift-0 #shop-gift { width: 46px; height: 25px; min-height: 0; padding: 0; border: 0; border-image: none; font-size: 0; color: transparent; text-shadow: none;
  background: var(--sf-social-gift-0) center / 100% 100% no-repeat; align-self: center; }
html.has-sf-social-gift-1 #shop-gift:hover:not(:disabled) { background-image: var(--sf-social-gift-1); }
html.has-sf-social-gift-2 #shop-gift:active:not(:disabled) { background-image: var(--sf-social-gift-2); }
/* Clan page buttons: Create Clan / ข้อมูลแคลน tabs (4 frames), ออกแคลน / ยุบแคลน / แก้ไข (3 frames). */
html.has-sf-social-tab-create-0 .create-clan-btn { width: 95px; height: 32px; min-height: 0; padding: 0; border: 0 !important; border-image: none !important; font-size: 0 !important; color: transparent !important;
  text-shadow: none; background: var(--sf-social-tab-create-0) center / 100% 100% no-repeat !important; }
html.has-sf-social-tab-create-2 .create-clan-btn:hover { background-image: var(--sf-social-tab-create-2) !important; }
html.has-sf-social-tab-clan-info-0 .tab-clan-info { width: 123px; height: 32px; min-height: 0; padding: 0; border: 0 !important; border-image: none !important; font-size: 0 !important; color: transparent !important;
  text-shadow: none; background: var(--sf-social-tab-clan-info-0) center / 100% 100% no-repeat !important; }
html.has-sf-social-tab-clan-info-2 .tab-clan-info:hover { background-image: var(--sf-social-tab-clan-info-2) !important; }
html.has-sf-social-clan-leave-0 .clan-leave-btn, html.has-sf-social-clan-disband-0 .clan-disband-btn, html.has-sf-social-clan-edit-0 .clan-edit-btn { width: 72px; height: 24px; min-height: 0; padding: 0;
  border: 0 !important; border-image: none !important; font-size: 0 !important; color: transparent !important; text-shadow: none; background: var(--sf-social-clan-leave-0) center / 100% 100% no-repeat !important; }
html.has-sf-social-clan-leave-2 .clan-leave-btn:hover { background-image: var(--sf-social-clan-leave-2) !important; }
html.has-sf-social-clan-disband-0 .clan-disband-btn { background-image: var(--sf-social-clan-disband-0) !important; }
html.has-sf-social-clan-disband-2 .clan-disband-btn:hover { background-image: var(--sf-social-clan-disband-2) !important; }
html.has-sf-social-clan-edit-0 .clan-edit-btn { background-image: var(--sf-social-clan-edit-0) !important; }
html.has-sf-social-clan-edit-2 .clan-edit-btn:hover { background-image: var(--sf-social-clan-edit-2) !important; }
html.has-sf-social-clan-mark-bg .clan-card > .clan-mark.missing, html.has-sf-social-clan-mark-bg .clan-head > .clan-mark.missing { display: block; background: var(--sf-social-clan-mark-bg) center / 100% 100% no-repeat; }

/* ===== Modes2: zombie HUD, spectator bar, replay viewer (web/zombie-ui.js, spectate.js, replay-ui.js) ===== */
#zombie-veil { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 45%, rgba(110, 0, 0, .55) 100%); background-image: var(--zombie-filter, none), radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 45%, rgba(110, 0, 0, .55) 100%); background-size: 100% 100%; mix-blend-mode: multiply; opacity: .85; }
#zombie-hud { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none; text-align: center; font-family: Tahoma, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#zombie-hud .zh-counts { display: inline-flex; gap: 18px; padding: 4px 14px; background: rgba(0, 0, 0, .6); border: 1px solid #000; }
#zombie-hud .zh-counts span { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; }
#zombie-hud .zh-counts .human { color: #9fd2ff; }
#zombie-hud .zh-counts .zombie { color: #ff6b5e; }
#zombie-hud .zh-counts i { width: 24px; height: 24px; background: center / contain no-repeat; }
#zombie-hud .zh-counts .human i { background-image: var(--zh-human, none); }
#zombie-hud .zh-counts .zombie i { background-image: var(--zh-zombie, none); }
#zombie-hud .zh-line { margin-top: 6px; font-size: 15px; color: #d4ec62; }
#zombie-hud .zh-flash { margin-top: 8px; font-size: 20px; font-weight: 700; color: #ff8a7a; }
.spectate-bar { position: fixed; left: 50%; bottom: 116px; transform: translateX(-50%); z-index: 7; padding: 6px 16px; background: rgba(0, 0, 0, .7); border: 1px solid #000; border-top: 2px solid #d4ec62; color: #fff; font: 15px Tahoma, sans-serif; text-align: center; pointer-events: none; }
.spectate-bar b.red { color: #ff7b6b; }
.spectate-bar b.blue { color: #7fb8ff; }
.spectate-bar small { display: block; margin-top: 2px; font-size: 12px; color: #bbb; }
.replay-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(10, 12, 18, .88); border: 1px solid #000; border-top: 2px solid #d4ec62; color: #fff; font: 13px Tahoma, sans-serif; }
.replay-bar .replay-title { font-weight: 700; white-space: nowrap; }
.replay-bar .replay-seek { flex: 1; min-width: 120px; }
.replay-bar .replay-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.replay-bar .replay-hint { font-size: 11px; white-space: nowrap; }
.replay-dialog { min-width: min(760px, 92vw); }
.replay-dialog .replay-list { max-height: 60vh; overflow: auto; }
.replay-dialog .replay-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.replay-dialog .replay-table th, .replay-dialog .replay-table td { padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: left; }
#results-replay { margin-top: 8px; }