/* Kabooom interface system. Loaded after legacy screen styles.
   Menu coordinates remain 800 × 600; gameplay and sprite rendering are untouched. */
:root {
  --kb-bg: #0b1420;
  --kb-panel: #121f2e;
  --kb-raised: #1a2b3c;
  --kb-line: #304356;
  --kb-text: #edf4fa;
  --kb-muted: #9aafc1;
  --kb-cyan: #78dce8;
  --kb-orange: #ffae55;
  --kb-font: 'Trebuchet MS', 'Segoe UI', sans-serif;
}
body, .stage.kbui { font-family: var(--kb-font); }
.screen.menu { background: var(--kb-bg); }
.stage.kbui .kb-nebula {
  background: radial-gradient(ellipse at 80% 0, #19364a 0, transparent 62%), #0b1420;
}
.stage.kbui .hdpanel.frame, .stage.kbui .hdpanel.frame.navy,
.stage.kbui .hdpanel.frame.big, .stage.kbui .hdpanel.tile,
.stage.kbui .hd-scard, .stage.kbui .hdpanel.box {
  background: var(--kb-panel); border: 1px solid var(--kb-line);
  border-radius: 9px; box-shadow: 0 3px 10px #0003;
}
.stage.kbui .hdpanel.inset, .stage.kbui .hdpanel.inset.black,
.stage.kbui .hdpanel.groove { background: #0b1622; border-color: #283a4c; box-shadow: none; border-radius: 6px; }
.stage.kbui .hdpanel.title, .stage.kbui .hdpanel.title.teal,
.stage.kbui .hdpanel.title.kbtail, .stage.kbui .hdpanel.title.shoptab,
.stage.kbui .hd-awning { background: #1a2b3c; border-bottom: 1px solid var(--kb-line); box-shadow: none; }
.stage.kbui .hd-title { font-family: var(--kb-font); color: var(--kb-muted); text-shadow: none; font-size: 11px; letter-spacing: 1.1px; }
.stage.kbui .txt, .stage.kbui .hd-lbl, .stage.kbui .statv,
.stage.kbui .price, .stage.kbui .shopcard .txt.cur { text-shadow: none; }
.stage.kbui .kb-brand b { font-family: var(--kb-font); font-size: 22px; letter-spacing: -.7px; text-shadow: none; }
.stage.kbui .kb-brand .kb-logo { width: 32px; height: 32px; filter: none; }
.stage.kbui .kb-brand b span { color: var(--kb-cyan); text-shadow: none; }
.stage.kbui .hdbtn.thick, .stage.kbui .hdbtn.thin, .stage.kbui .hdbtn.round {
  border: 1px solid #3a5065; border-radius: 7px; background: #1a2b3c; box-shadow: inset 0 1px #ffffff08;
  transition: background .12s, border-color .12s;
}
.stage.kbui .hdbtn.round { border-radius: 50%; }
.stage.kbui .hdbtn .hd-lbl { font-family: var(--kb-font); font-weight: 700; letter-spacing: .015em; text-transform: none; color: #e2edf6; text-shadow: none; }
.stage.kbui .hdbtn:hover:not(:disabled) { background: #263d50; border-color: var(--kb-cyan); box-shadow: none; }
.stage.kbui .hdbtn .hd-pill::after { display: none; }
.stage.kbui .hdbtn:active:not(:disabled) { background: #112231; }
.stage.kbui .hdbtn.sel { background: #1e414c; border-color: #78dce8; box-shadow: none; }
.stage.kbui .hdbtn.sel .hd-lbl { color: #a5f2f7; text-shadow: none; }
.stage.kbui .hdbtn.gold, .stage.kbui .hdbtn.kbgo:not(:disabled) { background: #ffae55; border-color: #ffc482; box-shadow: inset 0 1px #ffe1b5; }
.stage.kbui .hdbtn.gold:hover:not(:disabled), .stage.kbui .hdbtn.kbgo:hover:not(:disabled) { background: #ffc078; box-shadow: none; }
.stage.kbui .hdbtn.gold .hd-lbl, .stage.kbui .hdbtn.kbgo:not(:disabled) .hd-lbl { color: #2f200d; text-shadow: none; }
.stage.kbui .hdbtn:disabled { opacity: .42; filter: none; box-shadow: none; }
.stage.kbui .hdbtn .hd-ico { width: 1.35em; height: 1.35em; --ico: #78dce8; --ico-hi: #d6f7fa; }
.stage.kbui .hdtile { background: #1a2b3c; box-shadow: inset 0 0 0 1px #3a5065; }
.stage.kbui .hdtile:hover { background: #263d50; box-shadow: inset 0 0 0 1px var(--kb-cyan); }
.stage.kbui .hdtile.sel { background: #734d27; box-shadow: inset 0 0 0 2px var(--kb-orange); }
.stage.kbui .hdpanel.card { background: #24394a; border-color: #4c6578; box-shadow: none; }
.stage.kbui .hdpanel.pill { background: #304b60; box-shadow: none; }
.stage.kbui .hdpanel.inset.orange { border: 1px solid #4c6578; box-shadow: none; }
.stage.kbui .hdpanel.tube { background: #304b60; border-color: #5d7c91; box-shadow: none; }
.stage.kbui .hd-scard, .stage.kbui .shopcard.sel .hd-scard { background: var(--kb-panel); }
.stage.kbui .shopcard:hover:not(.sel) .hd-scard { box-shadow: none; border-color: var(--kb-cyan); }
.stage.kbui .shopcard.sel .hd-awning { background: #654523; border-color: var(--kb-orange); }
.stage.kbui .shopcard.sel::after { border-color: var(--kb-orange); box-shadow: none; }
.stage.kbui .shopcard.sel .hd-price { background: #2a251e; }
.stage.kbui .kb-brand.big .kb-logo { filter: none; }
/* Cards and dialogs share the same material as the menus, including floating windows. */
.stage .kb-card, .stage .kb-card.kb-float, #config .stage .kb-card {
  background: #121f2e; border-color: #3c5367; border-radius: 12px;
  box-shadow: 0 16px 48px #0009; backdrop-filter: none;
}
.stage .kb-card .kb-head { background: #1a2b3c; border-bottom-color: #304356; box-shadow: none; }
.stage .kb-card .kb-head h3 { font-family: var(--kb-font); text-shadow: none; letter-spacing: .2px; color: #edf4fa; }
.stage .kb-card .kb-logo { filter: none; }
.stage .kb-card .kb-desc { color: #aebfcd; line-height: 1.5; }
.stage .kb-card input:not([type=checkbox]), .stage .kb-card select { background: #0c1723; border-color: #3c5367; box-shadow: none; }
.stage .kb-go, .stage .kb-card .kb-go { background: #ffae55; border: 1px solid #ffc482; border-radius: 7px; color: #2f200d; text-shadow: none; box-shadow: none; font-family: var(--kb-font); }
.stage .kb-go:hover:not(:disabled), .stage .kb-card .kb-go:hover:not(:disabled) { background: #ffc078; box-shadow: none; }
.stage .kb-card .kb-pill, .stage .kb-card .kb-tile, .stage .kb-tool { background: #1a2b3c; border-color: #3a5065; box-shadow: none; text-shadow: none; }
.stage .kb-card .kb-pill.on, .stage .kb-card .kb-tile.on { background: #1e414c; border-color: #78dce8; box-shadow: none; color: #c9f6fa; }
.stage .kb-card .kb-list { background: #0c1723; box-shadow: none; border-color: #304356; }
.stage .kb-card .kb-link { color: #9ce2ea; }
.stage .kb-card .kb-x { background: #24394a; border-color: #4c6578; box-shadow: none; }
.stage .kb-card .kb-x:hover { background: #36516a; }
.stage .kb-card .kb-rrow.me { background: #1e414c; box-shadow: none; }
.stage .kb-card .kb-count { background: #284658; box-shadow: none; color: #bcf2f7; }
/* Clear keyboard focus, including formerly mouse-only room selection. */
.stage button:focus-visible, .stage [role=button]:focus-visible, #login button:focus-visible {
  outline: 2px solid #a5f2f7; outline-offset: 3px;
}
.stage input:focus-visible, .stage .kb-card input:focus-visible { outline: 2px solid #78dce8; outline-offset: 1px; }
.stage.kbui input.say { background: #0b1622; border: 1px solid #3c5367; border-radius: 6px; padding: 0 10px; font-family: var(--kb-font); }
.stage.kbui input.say::placeholder { color: #9aafc1; }
.stage.kbui .cplayer { border-radius: 5px; padding: 6px; gap: 8px; }
.stage.kbui .scroll { scrollbar-width: thin; scrollbar-color: #4b6579 transparent; }
.stage.kbui .scroll::-webkit-scrollbar { display: block; width: 5px; }
.stage.kbui .scroll::-webkit-scrollbar-thumb { background: #4b6579; border-radius: 3px; }
/* Lobby composition. Deliberately not a reskin of the six-slot legacy layout. */
#lobby-stage::after { content: ''; position: absolute; left: 24px; right: 24px; top: 72px; height: 1px; background: #304356; pointer-events: none; }
#lobby-stage .kb-rooms-heading { font: 700 21px/1.1 var(--kb-font); color: #edf4fa; height: 27px; }
#lobby-stage .kb-room-count { font-size: 11px; color: #9aafc1; }
#lobby-stage .kb-online-heading .hd-title { color: #b8cbd9; font-size: 11px; }
#lobby-stage .kb-profile { background: #142535; }
#lobby-stage .kb-rooms-empty { position: absolute; left: 24px; top: 162px; width: 542px; height: 222px; box-sizing: border-box; padding: 40px 28px; border: 1px dashed #40566a; border-radius: 10px; background: #101e2b; }
#lobby-stage .kb-empty-kicker { position: static; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: #78dce8; }
#lobby-stage .kb-rooms-empty h2 { margin: 12px 0 7px; font: 700 24px/1.1 var(--kb-font); letter-spacing: -.6px; color: #edf4fa; }
#lobby-stage .kb-rooms-empty p { max-width: 380px; margin: 0 0 20px; font-size: 12px; line-height: 1.5; color: #aebfcd; }
#lobby-stage .kb-rooms-empty button { padding: 8px 16px; font-size: 12px; min-height: 34px; cursor: pointer; }
#lobby-stage .kb-room-card { position: absolute; width: 264px; height: 68px; padding: 12px; box-sizing: border-box; border: 1px solid #3a5065; border-radius: 8px; background: #152534; }
#lobby-stage .kb-room-card:hover { background: #1b3042; border-color: #78dce8; }
#lobby-stage .kb-room-card.sel { background: #203b47; border-color: #78dce8; }
#lobby-stage .kb-room-card > div { position: static; display: flex; align-items: center; gap: 6px; }
#lobby-stage .kb-room-top { margin-bottom: 9px; }
#lobby-stage .kb-room-number { font-size: 10px; color: #9aafc1; flex: none; }
#lobby-stage .kb-room-name { min-width: 0; flex: 1; font-size: 13px; color: #edf4fa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lobby-stage .kb-room-top .hd-ico { width: 13px; height: 13px; }
#lobby-stage .kb-room-capacity { font-size: 11px; color: #cad8e2; }
#lobby-stage .kb-room-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aebfcd; font-size: 10px; }
#lobby-stage .kb-room-state { font-size: 9px; padding: 2px 6px; border-radius: 4px; background: #293d4d; color: #c3d7e3; }
#lobby-stage .kb-room-state.waiting { color: #b7edce; background: #203f36; }
#lobby-stage .kb-room-state.full { color: #e7c49b; background: #453725; }
/* Login remains compact enough for smaller screens, with one unmistakable play action. */
#login { box-sizing: border-box; font-family: var(--kb-font); background: radial-gradient(ellipse at 70% 20%, #203d50, transparent 70%), #0b1420; }
#login .panel { background: #121f2e; border: 1px solid #3c5367; box-shadow: 0 18px 70px #0006; backdrop-filter: none; border-radius: 14px; padding: 20px 26px; }
#login .logo { width: 102px; height: 102px; filter: none; margin-bottom: 16px; }
#login .play-now { background: #ffae55; border: 1px solid #ffc482; box-shadow: none; text-shadow: none; color: #2f200d; font-family: var(--kb-font); border-radius: 8px; font-size: 19px; height: 48px; }
#login .play-now:hover { background: #ffc078; color: #2f200d; box-shadow: none; }
#login .play-now .tri { border-left-color: #2f200d; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
#login .guest-note { color: #aebfcd; margin: 7px 0 18px; }
#login .or { color: #9aafc1; font-size: 11px; }
#login input:not([type=checkbox]) { background: #0b1622; border-color: #3c5367; min-height: 40px; }
#login #login-btn, #login #reg-btn { background: #243d50; border: 1px solid #526e83; color: #edf4fa; box-shadow: none; text-shadow: none; border-radius: 7px; font: 700 14px var(--kb-font); width: 100%; }
#login #login-btn:hover, #login #reg-btn:hover { background: #304e64; box-shadow: none; }
#login .bar { flex-direction: row; align-items: center; gap: 12px; }
#login #show-register, #login #show-login { white-space: nowrap; color: #9ce2ea; font-size: 12px; }
#hud { background: #121f2ef2; border-color: #3c5367; box-shadow: 0 6px 24px #0006; font-family: var(--kb-font); }
#battle-chat { background: #121f2ef2; border-color: #526e83; box-shadow: 0 6px 24px #0006; border-radius: 7px; font-family: var(--kb-font); }
@media (max-height: 650px) {
  #login { align-items: flex-start; padding: 16px; }
  #login .logo { width: 70px; height: 70px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage.kbui .hdbtn { transition: none; }
}

/* Approved arena lobby. Everything below is scoped to the lobby, not the 800x600 game. */
@font-face { font-family: 'KB Arena'; src: url('lobby-assets/luckiest.woff2') format('woff2'); font-display: swap; }
#lobby.screen { overflow: auto; background: linear-gradient(#213d5733, #142940dd), url('lobby-assets/miramo.jpg') center / cover; }
#lobby-stage.arena-lobby {
  position: relative; inset: auto; left: auto; top: auto; transform: none; width: calc(100% - 56px); max-width: 1384px;
  height: auto; min-height: 100dvh; margin: 0 auto; padding-bottom: 24px; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); grid-template-rows: auto auto minmax(320px, 1fr);
  gap: 16px; background: none; color: #e8f2fa; font: 13px/1.4 'Trebuchet MS', sans-serif; overflow: visible;
}
#lobby-stage.arena-lobby::after { display: none; }
#lobby-stage.arena-lobby [hidden] { display: none !important; }
#lobby-stage.arena-lobby :is(h1,h2,p) { margin: 0; text-shadow: none; }
#lobby-stage.arena-lobby .arena-briefing h2 { color: #193049; }
#lobby-stage.arena-lobby :is(h1,h2,.arena-brand) { font-family: 'KB Arena', 'Arial Black', sans-serif; font-weight: 400; }
#lobby-stage.arena-lobby :is(.arena-top,.arena-profile,.arena-account,.arena-chat,.arena-chat-head,.arena-chat-form,.arena-browser,.arena-section-head,.arena-filters,.arena-pagination,.arena-briefing,.arena-briefing-copy,.arena-map-preview,.kb-room-grid,.kb-rooms-empty,.kb-room-card,.list,.cplayer,.arena-chat-log,.arena-button) {
  position: static; box-sizing: border-box; min-width: 0;
}
#lobby-stage.arena-lobby .arena-button {
  min-height: 44px; border: 1px solid #7893a9; border-radius: 6px; padding: 9px 13px; cursor: pointer;
  background: #294860; color: #f2f7fc; font: 700 12px/1.3 'Trebuchet MS', sans-serif; box-shadow: 0 2px 0 #10273e;
}
#lobby-stage.arena-lobby .arena-button:hover:not(:disabled) { background: #3a5b76; }
#lobby-stage.arena-lobby .arena-button.sel { background: #247db2; color: white; }
#lobby-stage.arena-lobby .arena-button:disabled { opacity: .5; cursor: not-allowed; }
#lobby-stage.arena-lobby .arena-top { grid-column: 1/-1; display: flex; align-items: center; gap: 22px; min-height: 72px; }
#lobby-stage.arena-lobby .arena-brand { display: flex; align-items: center; gap: 8px; color: #ffd653; font-size: 30px; white-space: nowrap; text-shadow: 3px 3px #15263c; }
#lobby-stage.arena-lobby .arena-brand svg { width: 48px; height: 48px; flex: none; }
#lobby-stage.arena-lobby nav { display: flex; gap: 5px; }
#lobby-stage.arena-lobby nav .arena-button { border: 0; box-shadow: none; background: none; padding: 9px 10px; }
#lobby-stage.arena-lobby nav .sel { background: #26455f; box-shadow: inset 0 -3px #ffd653; color: #ffd653; }
#lobby-stage.arena-lobby .arena-profile { margin-left: auto; display: flex; gap: 10px; align-items: center; }
#lobby-stage.arena-lobby .arena-account { max-width: 380px; min-width: 0; overflow-wrap: anywhere; }
#lobby-stage.arena-lobby .arena-account strong { display: block; color: #f4f8ff; font-size: 20px; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
#lobby-stage.arena-lobby .arena-account-strip .rankicon { position: static; width: auto; height: 38px; image-rendering: pixelated; flex: none; }
#lobby-stage.arena-lobby .arena-keep { color: #ffd653; border-color: #b7a35b; background: #334a54; }
#lobby-stage.arena-lobby .arena-scene { grid-column: 1; grid-row: 2; position: relative; display: flex; flex-direction: column; min-height: min-content; overflow: hidden; border: 3px solid #304762; border-radius: 14px; background: #193049; box-shadow: 0 6px #10223a; }
#lobby-stage.arena-lobby .arena-scene-visual { position: relative; min-height: 310px; flex: 1; min-width: 0; }
#lobby-stage.arena-lobby .arena-account-strip { padding: 8px; box-sizing: border-box; flex: none; border-top: 1px solid #68859e; background: #193449; }
#lobby-stage.arena-lobby .arena-account-strip .arena-account { display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,.85fr); align-items: center; gap: 6px 12px; max-width: none; padding: 10px 12px; border: 1px solid #63839a; border-left: 3px solid #ffd06c; border-radius: 8px; background: linear-gradient(110deg,#294b63,#152d43 70%); box-shadow: inset 0 1px #ffffff20; }
#lobby-stage.arena-lobby .arena-account-top { display: contents; }
#lobby-stage.arena-lobby .arena-account-identity { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; min-width: 0; }
#lobby-stage.arena-lobby .arena-account-name { min-width: 0; }
#lobby-stage.arena-lobby .arena-account-name > span { display: block; color: #c3d9e9; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
#lobby-stage.arena-lobby .arena-account-name > span:empty { display: none; }
#lobby-stage.arena-lobby .arena-account-standing { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; color: #edf5ff; font-size: 14px; line-height: 1.5; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#lobby-stage.arena-lobby .arena-account-standing > span:first-child { color: #8de0ff; }
#lobby-stage.arena-lobby .arena-account-currencies { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 0; margin: 0; padding: 5px 8px; border: 1px solid #b58e485e; border-radius: 5px; background: #b58e4817; }
#lobby-stage.arena-lobby .arena-account-currencies > span { min-width: 0; font-size: 15px; line-height: 1.4; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#lobby-stage.arena-lobby .arena-account-currencies > .gold { color: #ffd06c; text-align: right; }
#lobby-stage.arena-lobby .arena-account-currencies > .cash, #shop-stage > .cash { display: none !important; }
#lobby-stage.arena-lobby canvas.arena-scene-canvas { display: block; position: absolute; inset: 0; left: 0; top: 0; transform: none; width: 100%; height: 100%; pointer-events: none; image-rendering: auto; }
#lobby-stage.arena-lobby .arena-scene-status { position: absolute; bottom: 18px; left: 14px; right: 14px; color: white; font-size: 14px; }
#lobby-stage.arena-lobby .arena-scene-label { position: absolute; top: 10px; left: 12px; padding: 4px 8px; background: #10273ec9; border-radius: 5px; color: white; text-shadow: 2px 2px #243b56; pointer-events: none; }
#lobby-stage.arena-lobby .arena-scene-label small { font-size: 8px; letter-spacing: 1px; }
#lobby-stage.arena-lobby .arena-scene-label h2 { font-size: 18px; }

#lobby-stage.arena-lobby .arena-chat { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; padding: 16px 18px; background: #193449ee; border: 2px solid #6b879e; border-radius: 12px; }
#lobby-stage.arena-lobby .arena-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#lobby-stage.arena-lobby .arena-chat h2 { font-size: 20px; color: #e5f2fc; }
#lobby-stage.arena-lobby .arena-online { position: relative; }
#lobby-stage.arena-lobby summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 11px; text-decoration: underline; }
#lobby-stage.arena-lobby .arena-online .list { position: absolute; z-index: 3; right: 0; top: 44px; width: 220px; max-height: 240px; overflow: auto; background: #122d43; border: 1px solid #7893a9; border-radius: 6px; padding: 8px; }
#lobby-stage.arena-lobby .cplayer { display: flex; align-items: center; }
#lobby-stage.arena-lobby .cplayer img { position: static; flex: none; }
#lobby-stage.arena-lobby .arena-chat-log { flex: 1; min-height: 180px; max-height: 500px; overflow: auto; padding: 10px 0; font-size: 13px; line-height: 24px; color: #e2edf8; overflow-wrap: anywhere; }
#lobby-stage.arena-lobby .arena-chat-log .nick { color: #ffd653; font-weight: bold; }
#lobby-stage.arena-lobby .arena-chat-form { display: flex; gap: 8px; margin-top: 8px; }
#lobby-stage.arena-lobby .arena-chat-form button { flex: none; white-space: nowrap; }
#lobby-stage.arena-lobby input.say { position: static; width: 100% !important; min-width: 0; height: 44px !important; line-height: normal !important; box-sizing: border-box; color: white; background: #112b40; font-size: 12px; }
#lobby-stage.arena-lobby .arena-browser { grid-column: 2; grid-row: 2/span 2; display: flex; flex-direction: column; border: 3px solid #304762; border-radius: 14px; background: #edf5fc; color: #193049; box-shadow: 0 6px #10223a; overflow: hidden; }
#lobby-stage.arena-lobby .arena-section-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 23px 0; }
#lobby-stage.arena-lobby .kb-rooms-heading { color: #193049; font: 400 30px/1.2 'KB Arena', sans-serif; height: auto; }
#lobby-stage.arena-lobby .arena-create { background: #ffd653; color: #26384a; box-shadow: 0 3px #9e7634; border-color: #96743b; }
#lobby-stage.arena-lobby .arena-create:hover:not(:disabled) { background: #ffe28b; }
#lobby-stage.arena-lobby .arena-filters { display: flex; gap: 6px; padding: 12px 23px; flex-wrap: wrap; }
#lobby-stage.arena-lobby .arena-filters .arena-button { background: #dce8f1; color: #344e62; border-color: #b0c4d4; box-shadow: none; }
#lobby-stage.arena-lobby .arena-filters .sel { background: #247db2; color: white; }
#lobby-stage.arena-lobby .arena-filters .arena-button:last-child { margin-left: auto; }
#lobby-stage.arena-lobby .kb-room-grid { flex: 1; padding: 0 23px; overflow: auto; }
#lobby-stage.arena-lobby .kb-room-card { width: 100%; height: auto; min-height: 72px; padding: 12px; margin-bottom: 8px; border: 1px solid #bdcdd9; border-radius: 7px; background: #fff; box-shadow: 0 2px #c3d1dd; cursor: pointer; }
#lobby-stage.arena-lobby .kb-room-card:hover { background: #e6f5ff; border-color: #2783b4; }
#lobby-stage.arena-lobby .kb-room-card.sel { background: #d4edfc; border: 2px solid #2783b4; padding: 11px; }
#lobby-stage.arena-lobby .kb-room-name { color: #193049; font-size: 14px; }
#lobby-stage.arena-lobby :is(.kb-room-number,.kb-room-meta,.kb-room-capacity) { color: #536b80; font-size: 11px; }
#lobby-stage.arena-lobby .kb-room-state.waiting { color: #24543d; background: #d7eee6; }
#lobby-stage.arena-lobby .kb-room-state.playing { color: #714222; background: #fae2ce; }
#lobby-stage.arena-lobby .kb-room-state.full { color: #5c4b20; background: #efe5c9; }
#lobby-stage.arena-lobby .kb-rooms-empty { width: 100%; height: auto; padding: 40px 22px; background: none; border-color: #a3bbc9; }
#lobby-stage.arena-lobby .kb-rooms-empty h2 { color: #193049; }
#lobby-stage.arena-lobby .kb-rooms-empty p { color: #536b80; }
#lobby-stage.arena-lobby .kb-empty-kicker { color: #2478a7; }
#lobby-stage.arena-lobby .arena-pagination { display: flex; align-items: center; gap: 6px; padding: 8px 23px; }
#lobby-stage.arena-lobby .kb-room-count { margin-right: auto; color: #536b80; }
#lobby-stage.arena-lobby .arena-briefing { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; gap: 14px; padding: 18px 23px; align-items: center; border-top: 2px solid #b3c8d9; background: #d7e8f3; }
#lobby-stage.arena-lobby .arena-map-preview { min-height: 80px; display: grid; place-items: center; text-align: center; font-size: 11px; }
#lobby-stage.arena-lobby .arena-map-preview img { position: static; max-width: 100%; height: auto; image-rendering: pixelated; }
#lobby-stage.arena-lobby .arena-briefing h2 { font-size: 19px; overflow-wrap: anywhere; }
#lobby-stage.arena-lobby .arena-briefing :is(small,p) { font-size: 11px; color: #536b80; }
#lobby-stage.arena-lobby .arena-join { background: #ff9347; color: #26384a; border-color: #9f6039; font: 400 19px/1.3 'KB Arena', sans-serif; min-height: 52px; }
#lobby-stage.arena-lobby .arena-join:hover:not(:disabled) { background: #ffb572; }
#lobby-stage.arena-lobby > .dim { position: fixed; inset: 0; z-index: 5; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 70px 12px 24px; box-sizing: border-box; }
#lobby-stage.arena-lobby > .dim > .kb-card { position: relative; inset: auto !important; width: min(100%, 360px) !important; flex: none; }
#lobby-stage.arena-lobby > .dim .kb-card :is(input,button) { min-height: 44px; }
#lobby-stage.arena-lobby > .dim .kb-x { min-width: 44px; }
@media (min-width: 851px) {
  /* Auto grid height must account for the scene/account minimum, rather than paint it over chat. */
  #lobby-stage.arena-lobby .arena-scene-visual { min-height: clamp(240px,calc(100dvh - 580px),310px); }
  #lobby-stage.arena-lobby .arena-chat-log { min-height: 0; }
  #lobby-stage.arena-lobby .arena-browser { min-height: 0; }
}
@media (max-width: 1150px) {
  #lobby-stage.arena-lobby .arena-top { gap: 12px; flex-wrap: wrap; padding: 12px 0; }
  #lobby-stage.arena-lobby .arena-brand { font-size: 29px; }
  #lobby-stage.arena-lobby .arena-briefing { grid-template-columns: 80px minmax(0,1fr); }
  #lobby-stage.arena-lobby .arena-join { grid-column: 2; }
}
@media (max-width: 850px) {
  #lobby-stage.arena-lobby { width: calc(100% - 22px); grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; padding-bottom: 18px; }
  #lobby-stage.arena-lobby .arena-scene-visual { min-height: clamp(240px,50dvh,280px); }
  #lobby-stage.arena-lobby .arena-top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  #lobby-stage.arena-lobby .arena-settings { grid-column: 2; grid-row: 1; }
  #lobby-stage.arena-lobby .arena-profile { grid-column: 1/-1; grid-row: 2; margin: 0; flex-wrap: wrap; }
  #lobby-stage.arena-lobby .arena-keep { margin-left: auto; }
  #lobby-stage.arena-lobby nav { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  #lobby-stage.arena-lobby nav .arena-button { background: #24435dc9; border: 1px solid #52708b; }
  #lobby-stage.arena-lobby .arena-scene-label { top: 8px; left: 10px; }
  #lobby-stage.arena-lobby .arena-scene-label h2 { font-size: 16px; }
  #lobby-stage.arena-lobby .arena-chat { grid-column: 1; grid-row: 3; min-height: 300px; padding: 14px; }
  #lobby-stage.arena-lobby .arena-chat-log { height: 180px; max-height: 240px; flex: auto; }
  #lobby-stage.arena-lobby .arena-browser { grid-column: 1; grid-row: 4; min-height: 440px; }
  #lobby-stage.arena-lobby :is(.arena-section-head,.arena-filters,.arena-pagination,.arena-briefing) { padding-left: 12px; padding-right: 12px; }
  #lobby-stage.arena-lobby .kb-room-grid { padding: 0 12px; }
  #lobby-stage.arena-lobby .kb-rooms-heading { font-size: 25px; }
  #lobby-stage.arena-lobby .arena-button { padding: 9px 10px; }
  #lobby-stage.arena-lobby .arena-account { flex: 1; }
  #lobby-stage.arena-lobby .arena-briefing { grid-template-columns: 73px minmax(0,1fr); }
}

/* Persistent right-panel mounts. The existing shop renderers keep their native art sizes, not a shrunken 800px stage. */
#lobby-stage.arena-lobby .arena-top { flex-wrap: wrap; padding: 12px 0; gap: 14px 22px; }
#lobby-stage.arena-lobby .arena-profile { flex-wrap: wrap; }
#lobby-stage.arena-lobby .arena-tab-view { grid-column: 2; grid-row: 2 / span 2; min-width: 0; min-height: 0; max-height: max(640px,calc(100dvh - 112px)); overflow: auto; border: 3px solid #304762; border-radius: 14px; background: #edf5fc; color: #193049; box-shadow: 0 6px #10223a; box-sizing: border-box; }
#lobby-stage.arena-lobby .arena-tab-view .kb-card { position: relative; inset: auto !important; width: 100% !important; margin: 0; box-sizing: border-box; }
#lobby-stage.arena-lobby .arena-tab-view .kb-head { cursor: default; touch-action: auto; }
#lobby-stage.arena-lobby .arena-tab-view .kb-rank { height: auto; max-height: none; min-height: 320px; }
#lobby-stage.arena-lobby .arena-tab-view :is(.kb-rrow,.kb-brow) { min-height: 44px; font-size: 14px; }
#lobby-stage.arena-lobby .arena-tab-view .kb-brow .who :is(b,small) { font-size: 14px; }
#lobby-stage.arena-lobby .arena-tab-view .kb-tools { flex-wrap: wrap; }
#lobby-stage.arena-lobby .arena-tab-view .kb-tool { min-height: 44px; font-size: 14px; }
#lobby-stage.arena-lobby .arena-tab-view .kb-x { min-height: 44px; min-width: 44px; }
#lobby-stage.arena-lobby .arena-shop :is(.arena-shop-tabs,.arena-shop-actions,.arena-shop-pagination) { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
#lobby-stage.arena-lobby .arena-shop :is(.arena-shop-actions,.arena-shop-pagination) { justify-content: center; align-items: center; }
#lobby-stage.arena-lobby .arena-shop-page { font-size: 14px; color: #435e73; text-align: center; }
#lobby-stage.arena-lobby .arena-shop h2 { font-size: 26px; color: #193049; }
#lobby-stage.arena-lobby .arena-shop-cards { display: grid; grid-template-columns: repeat(auto-fit, 160px); gap: 12px; justify-content: center; padding: 12px; width: 100%; max-width: 700px; margin: 0 auto; box-sizing: border-box; }
#lobby-stage.arena-lobby .arena-shop-cards .shopcard { position: relative; left: auto !important; top: auto !important; }
#lobby-stage.arena-lobby .arena-shop-cards .shopcard > :is(.price,.cur) { height: 16px; font: 700 12px/16px Arial,sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.2px; white-space: nowrap; overflow: visible; text-overflow: clip; text-align: right; }
#lobby-stage.arena-lobby .arena-shop-cards .shopcard > .price { left: 8px !important; width: 100px !important; }
#lobby-stage.arena-lobby .arena-shop-cards .shopcard > .cur { left: 112px !important; width: 40px !important; }
#lobby-stage.arena-lobby .arena-shop-cards .shopcard > :is(.cashp,.cur.cash,.cur.only) { top: 106px !important; }
#lobby-stage.arena-lobby .arena-shop-cards .shopcard > :is(.goldp,.cur.gold,.cur.only:last-child) { top: 122px !important; }
#lobby-stage.arena-lobby .arena-shop-cards .shopcard > .cur.only { left: 8px !important; width: 144px !important; }
#lobby-stage.arena-lobby .arena-shop.arena-show-inventory { display: flex; flex-direction: column; }
#lobby-stage.arena-lobby .arena-shop .arena-owned { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; margin: 0; padding: 0; color: #193449; }
#lobby-stage.arena-lobby .arena-inventory-view > .arena-page-count { align-self: flex-start; margin: 12px 16px 4px; }
#lobby-stage.arena-lobby .arena-owned-help, #lobby-stage.arena-lobby .arena-owned-status { font-size: 14px; line-height: 1.5; margin: 8px 16px; }
#lobby-stage.arena-lobby .arena-owned-status { min-height: 20px; font-weight: 600; }
#lobby-stage.arena-lobby .arena-owned-scroll { flex: 1; min-height: 180px; max-height: 560px; overflow: auto; overscroll-behavior: contain; margin: 8px 16px; padding: 4px; box-sizing: border-box; scrollbar-gutter: stable; border: 1px solid #b1c3d0; border-radius: 8px; background: #f4f8fc; }
#lobby-stage.arena-lobby .arena-owned-scroll h3 { margin: 8px 4px; font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: .5px; }
#lobby-stage.arena-lobby .arena-shop .arena-inventory { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 8px; }
#lobby-stage.arena-lobby .arena-owned-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; padding: 6px; border: 1px solid #b1c3d0; border-radius: 8px; background: white; }
#lobby-stage.arena-lobby .arena-owned-item.sel { border-color: #986314; box-shadow: inset 0 0 0 2px #efbe59; background: #fff7df; }
#lobby-stage.arena-lobby .arena-owned-select { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #193449; text-align: left; cursor: pointer; font: inherit; }
#lobby-stage.arena-lobby .arena-owned-art { display: grid; place-items: center; flex: 0 0 48px; height: 40px; border-radius: 6px; background: #e4eef7; }
#lobby-stage.arena-lobby .arena-owned-art canvas { display: block; position: static; transform: none; width: 48px; height: 40px; image-rendering: pixelated; }
#lobby-stage.arena-lobby .arena-owned-art .art { position: static; max-width: 48px; max-height: 40px; image-rendering: pixelated; }
#lobby-stage.arena-lobby .arena-owned-copy { flex: 1; min-width: 0; }
#lobby-stage.arena-lobby .arena-owned-copy b { display: block; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
#lobby-stage.arena-lobby .arena-owned-copy small { display: block; font-size: 12px; line-height: 1.5; }
#lobby-stage.arena-lobby .arena-owned-state { flex: none; font-size: 12px; line-height: 1.5; padding: 2px 5px; border-radius: 4px; background: #e4edf3; }
#lobby-stage.arena-lobby .is-equipped .arena-owned-state { color: #20583c; background: #d5efde; font-weight: 800; }
#lobby-stage.arena-lobby .arena-owned-item .arena-owned-toggle { margin-left: auto; min-height: 44px; padding: 6px 12px; font-size: 13px; }
#lobby-stage.arena-lobby .arena-owned-item .arena-owned-toggle.arena-equip { color: white; background: #1a7188; border-color: #4ba2b7; box-shadow: 0 3px #105268; }
#lobby-stage.arena-lobby .arena-owned-item .arena-owned-toggle.arena-unequip { color: #352b15; background: #efbd58; border-color: #c88e24; box-shadow: 0 3px #997024; }
#lobby-stage.arena-lobby .arena-owned-item .arena-owned-toggle:disabled { opacity: .55; cursor: not-allowed; }
#lobby-stage.arena-lobby .arena-owned-actions { display: flex; justify-content: center; padding: 8px 16px 20px; }
#lobby-stage.arena-lobby .arena-owned-empty { padding: 12px; font-size: 14px; }
#lobby-stage.arena-lobby .arena-owned :is(button,.arena-owned-scroll):focus-visible { outline: 3px solid #137e9a; outline-offset: 2px; }

#lobby-stage.arena-lobby .arena-scene-visual:has(.arena-try-preview:not([hidden])) .arena-scene-label { position: relative; inset: auto; width: fit-content; max-width: calc(100% - 24px); margin: 10px 12px 0; box-sizing: border-box; }
#lobby-stage.arena-lobby .arena-try-preview { position: relative; inset: auto; padding: 20px 12px 12px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
#lobby-stage.arena-lobby .arena-try-avatar { display: grid; place-items: center; border: 1px solid #8eabc2; border-radius: 12px; padding: 8px; background: #18344ad9; cursor: pointer; }
#lobby-stage.arena-lobby .arena-try-avatar:disabled { opacity: 1; cursor: default; }
#lobby-stage.arena-lobby .arena-try-preview canvas.preview { position: static; inset: auto; display: block; transform: scaleX(-1); width: 256px; height: 256px; image-rendering: pixelated; }
#lobby-stage.arena-lobby .arena-try-preview p { padding: 2px 8px; border-radius: 4px; background: #10273ed9; color: white; font-size: 13px; }
#lobby-stage.arena-lobby .arena-shop-dialogs > .dim { position: fixed; inset: 0; z-index: 6; display: flex; justify-content: center; align-items: flex-start; overflow: auto; padding: 70px 12px 24px; box-sizing: border-box; }
#lobby-stage.arena-lobby .arena-shop-dialogs > .dim > .kb-card { position: relative; inset: auto !important; width: min(100%,360px) !important; flex: none; }
#lobby-stage.arena-lobby .arena-shop-dialogs :is(button,input) { min-height: 44px; }

/* Hosted social pages share the arena surface; floating buddies/whispers retain the legacy kit. */
#lobby-stage.arena-lobby .arena-tab-view.arena-social { display: flex; flex-direction: column; }
#lobby-stage.arena-lobby .arena-social .arena-page { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
#lobby-stage.arena-lobby .arena-page h2 { margin: 0; color: #193049; font-size: 28px; }
#lobby-stage.arena-lobby .arena-page-intro { color: #435e73; font-size: 14px; line-height: 1.5; margin: 12px 16px 16px; }
#lobby-stage.arena-lobby .arena-page-count, #lobby-stage.arena-lobby .arena-page .kb-count { flex: none; padding: 5px 10px; border: 1px solid #a9c4d3; border-radius: 8px; color: #234b5c; background: #dcecf5; font: 700 13px/1.5 system-ui,sans-serif; box-shadow: none; white-space: nowrap; }
#lobby-stage.arena-lobby .arena-social .arena-page .kb-list { flex: 1; height: auto; min-height: 240px; max-height: none; overflow: auto; margin: 0 16px 16px; padding: 8px; box-sizing: border-box; border: 1px solid #b1c3d0; border-radius: 10px; color: #193449; background: #f8fbff; box-shadow: none; }
#lobby-stage.arena-lobby .arena-page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px 20px; }
#lobby-stage.arena-lobby .arena-page-actions .arena-button { flex: 1 1 100px; }
#lobby-stage.arena-lobby .arena-social :is(.kb-brow,.kb-rrow) { box-sizing: border-box; }
#lobby-stage.arena-lobby .arena-social .kb-brow { padding: 10px 12px; min-height: 56px; border: 1px solid #d1dee8; background: white; }
#lobby-stage.arena-lobby .arena-social .kb-brow.off { opacity: 1; }
#lobby-stage.arena-lobby .arena-social .kb-brow .who b { color: #193449; font-size: 15px; }
#lobby-stage.arena-lobby .arena-social .kb-brow .who small { color: #526c80; font-size: 13px; }
#lobby-stage.arena-lobby .arena-social .kb-brow .dot { background: #2a8b63; box-shadow: none; }
#lobby-stage.arena-lobby .arena-social .kb-brow.off .dot { background: #647587; }
#lobby-stage.arena-lobby .arena-social .kb-brow.sel { border-color: #b27d21; background: #fff3d9; box-shadow: none; }
#lobby-stage.arena-lobby .arena-social .kb-empty { color: #526c80; font-size: 14px; line-height: 1.5; padding: 28px 16px; }
#lobby-stage.arena-lobby .arena-social .kb-rhead { margin: 0 24px 8px; color: #435e73; font-size: 12px; }
#lobby-stage.arena-lobby .arena-social .kb-rrow { height: auto; min-height: 48px; padding: 8px 10px; border-bottom: 1px solid #d1dee8; }
#lobby-stage.arena-lobby .arena-social .kb-rrow:nth-child(odd) { background: #eaf2f8; }
#lobby-stage.arena-lobby .arena-social .kb-rrow .c1 { color: #526c80; }
#lobby-stage.arena-lobby .arena-social .kb-rrow .c2 { color: #193449; }
#lobby-stage.arena-lobby .arena-social .kb-rrow .c3 { color: #246579; }
#lobby-stage.arena-lobby .arena-social .kb-rrow.top .c1 { color: #95550e; text-shadow: none; }
#lobby-stage.arena-lobby .arena-social .kb-rrow.t1 .c2 { color: #583b10; }
#lobby-stage.arena-lobby .arena-social .kb-rrow.me { background: #d8eef4; box-shadow: inset 3px 0 #237a93; }
#lobby-stage.arena-lobby .arena-social :is(button,.kb-brow):focus-visible { outline: 3px solid #137e9a; outline-offset: 2px; }
@media (max-width: 850px) {
  #lobby-stage.arena-lobby .arena-tab-view { grid-column: 1; grid-row: 4; min-height: 440px; }
  #lobby-stage.arena-lobby .arena-social .arena-page .kb-list { max-height: 560px; }
  #lobby-stage.arena-lobby .arena-owned-scroll { max-height: min(480px,calc(100vh - 360px)); }
  #lobby-stage.arena-lobby .arena-profile { width: 100%; }
  #lobby-stage.arena-lobby .arena-profile .arena-account { flex: 1; min-width: 200px; }
  #lobby-stage.arena-lobby .arena-shop-cards { gap: 4px; padding: 2px; }
  #lobby-stage.arena-lobby .arena-shop-page { flex-basis: 100%; order: 1; }
  #lobby-stage.arena-lobby .arena-shop h2 { font-size: 23px; }
}

/* Arena menu overlays only. Do not scale readable controls with the game stage. */
#config { background: #0d1d34c9; }
#config-stage.stage { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; display: flex; align-items: center; justify-content: center; font-family: var(--kb-font); }
#config-stage.stage .kb-settings {
  position: absolute; left: auto; top: auto; width: min(460px,calc(100% - 32px)); max-height: calc(100dvh - 32px);
  margin: 0; padding: 0 22px 22px; overflow: auto; overscroll-behavior: contain; box-sizing: border-box;
  color: #193449; background: #edf4fc; border: 3px solid #304762; border-radius: 16px;
  box-shadow: 0 8px #10223a,0 22px 70px #0007; scrollbar-width: thin; scrollbar-color: #7898b4 #e0eaf5;
}
#config-stage .kb-settings .kb-head { position: sticky; top: 0; z-index: 1; margin: 0 -22px 18px; padding: 12px 16px; gap: 12px; background: linear-gradient(125deg,#325678,#203b57); border-bottom: 4px solid #ffd653; box-shadow: 0 2px #b16e1e; }
#config-stage .kb-settings .kb-logo { width: 38px; height: 38px; }
#config-stage .kb-settings .kb-head h3 { font: 30px/1.15 'KB Arena',var(--kb-font); color: #fff4bf; letter-spacing: .5px; text-shadow: 0 2px #10223a; }
#config-stage .kb-settings .kb-x { width: 44px; height: 44px; border: 2px solid #7898b4; border-radius: 10px; background: #17324d; color: #fff; font: 700 18px var(--kb-font); }
#config-stage .kb-settings .kb-sec { margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #b8cde0; color: #294e70; font: 19px/1.2 'KB Arena',var(--kb-font); letter-spacing: .7px; }
#config-stage .kb-settings .kb-row { gap: 12px; min-width: 0; }
#config-stage .kb-settings .kb-lbl { min-width: 0; color: #24435f; font: 700 14px/1.4 var(--kb-font); letter-spacing: 0; overflow-wrap: anywhere; }
#config-stage .kb-settings .kb-row > .kb-lbl { max-width: 48%; }
#config-stage .kb-settings .kb-pills { flex: none; gap: 6px; padding: 4px; border: 1px solid #b8cde0; border-radius: 12px; background: #d8e5f2; box-shadow: inset 0 2px #b8cde066; }
#config-stage .kb-settings .kb-pill { height: auto; min-height: 44px; padding: 8px 12px; border: 2px solid #476c8c; border-radius: 8px; background: linear-gradient(#426e95,#305573); color: #fff; font: 700 14px/1.2 var(--kb-font); box-shadow: 0 3px #193b57; }
#config-stage .kb-settings .kb-pill.on { background: linear-gradient(#ffe47a,#ffc343); border-color: #b47c21; color: #25344a; box-shadow: 0 3px #9a6719,inset 0 1px #fff8ce; }
#config-stage .kb-settings .kb-pill:hover:not(:disabled):not(.on), #config-stage .kb-settings .kb-x:hover { background: #386f98; color: #fff; }
#config-stage .kb-settings .kb-slide { min-height: 44px; }
#config-stage .kb-settings .kb-slide .kb-lbl { width: 60px; }
#config-stage .kb-settings input.kb-range { min-width: 0; height: 44px; flex: 1; accent-color: #c66a16; background: transparent; box-shadow: none; }
#config-stage .kb-settings .kb-val { width: 46px; color: #24435f; font: 800 14px/1.4 var(--kb-font); font-variant-numeric: tabular-nums; }
#config-stage .kb-settings .kb-actions { flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #b8cde0; }
#config-stage .kb-settings .kb-go { flex: 1; min-height: 44px; height: auto; padding: 10px 20px; border: 2px solid #b47c21; border-radius: 10px; background: linear-gradient(#ffe47a,#ffc343); color: #25344a; font: 800 16px/1.2 var(--kb-font); box-shadow: 0 4px #9a6719,inset 0 1px #fff8ce; }
#config-stage .kb-settings .kb-go:hover { background: #ffe58b; }
#config-stage .kb-settings .kb-link { min-height: 44px; padding: 10px 14px; border: 2px solid #b8794c; border-radius: 10px; background: #fff0e3; color: #843e1d; font: 700 14px/1.2 var(--kb-font); text-decoration: none; box-shadow: 0 3px #c99b79; }
#config-stage .kb-settings .kb-link:hover { background: #ffe0c6; color: #6b3015; }
#config-stage .kb-settings :is(button,input):focus-visible { outline: 3px solid #167496; outline-offset: 3px; }
#config-stage .kb-settings button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
#config-stage .kb-settings button:active:not(:disabled) { box-shadow: none; }

/* Retained legacy game-menu hooks: presentation only, never revealed by CSS. */
#battle-menu { top: 50%; width: min(420px,calc(100% - 32px)); min-width: 0; max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: auto; gap: 14px; padding: 20px; border: 3px solid #304762; border-radius: 16px; background: #edf4fc; color: #193449; box-shadow: 0 8px #10223a,0 22px 70px #0008; font-family: var(--kb-font); }
#battle-menu h2 { margin: -20px -20px 4px; padding: 18px 20px; background: linear-gradient(125deg,#325678,#203b57); color: #fff4bf; border-bottom: 4px solid #ffd653; font: 30px/1.15 'KB Arena',var(--kb-font); }
#battle-menu button { min-height: 44px; padding: 10px 16px; border: 2px solid #476c8c; border-radius: 10px; background: linear-gradient(#426e95,#305573); color: #fff; font: 700 15px/1.3 var(--kb-font); box-shadow: 0 3px #193b57; }
#battle-menu #menu-resume { background: linear-gradient(#ffe47a,#ffc343); border-color: #b47c21; color: #25344a; box-shadow: 0 4px #9a6719; }
#battle-menu #menu-leave { background: #fff0e3; border-color: #b8794c; color: #843e1d; box-shadow: 0 3px #c99b79; }
#battle-menu button:hover:not(:disabled) { filter: brightness(1.08); }
#battle-menu button:active:not(:disabled) { box-shadow: none; }
#battle-menu button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
#battle-menu button:focus-visible { outline: 3px solid #167496; outline-offset: 3px; }
#battle-menu .keys { margin: 4px 0 0; padding: 12px; border-radius: 8px; background: #dce8f4; color: #36536e; font: 13px/1.6 var(--kb-font); }

/* ---- Lobby rooms panel in the same dark glass as the chat and account panels (Claude, 2026-10-22) ---- */
#lobby-stage.arena-lobby { --glass-bg: linear-gradient(180deg, rgba(30,52,74,.94), rgba(16,32,50,.94)); --glass-edge: #3f6482; --glass-text: #e8f2fb; --glass-dim: #9fb7cb; --glass-tile: #1d3348; --glass-tile-edge: #35546e; }
#lobby-stage.arena-lobby .arena-browser { background: var(--glass-bg); border-color: var(--glass-edge); color: var(--glass-text); box-shadow: 0 6px 0 #0c1a29, inset 0 1px #ffffff18; }
#lobby-stage.arena-lobby .arena-browser :is(h1,h2), #lobby-stage.arena-lobby .arena-browser .kb-rooms-heading { color: #ffd653; text-shadow: 2px 2px #0c1a29; }
#lobby-stage.arena-lobby .arena-filters .arena-button, #lobby-stage.arena-lobby .arena-browser .arena-button:not(.arena-create):not(.arena-join) { background: var(--glass-tile); color: var(--glass-text); border-color: var(--glass-tile-edge); box-shadow: none; }
#lobby-stage.arena-lobby .arena-filters :is(.arena-button.sel, [aria-pressed="true"]) { background: #2b5b7c; box-shadow: inset 0 -3px #ffd653; color: #ffd653; }
#lobby-stage.arena-lobby .kb-room-card { background: var(--glass-tile); border-color: var(--glass-tile-edge); color: var(--glass-text); }
#lobby-stage.arena-lobby .kb-room-card:hover { background: #24425c; border-color: #ffd653; }
#lobby-stage.arena-lobby .kb-room-card.sel { background: #2b5274; border-color: #ffd653; }
#lobby-stage.arena-lobby .kb-room-card * { color: inherit; }
#lobby-stage.arena-lobby .kb-rooms-empty { min-height: 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--glass-edge); background: radial-gradient(ellipse at 50% 0%, rgba(255,174,85,.12), transparent 70%); }
#lobby-stage.arena-lobby .kb-rooms-empty * { color: var(--glass-dim); }
#lobby-stage.arena-lobby .kb-rooms-empty h2 { color: #ffd653; font-size: 34px; }
#lobby-stage.arena-lobby .kb-rooms-empty button { display: none; }          /* one Create button: the yellow one up top */
#lobby-stage.arena-lobby .arena-briefing { background: rgba(10,22,36,.6); border-top-color: var(--glass-edge); color: var(--glass-text); }
#lobby-stage.arena-lobby .arena-briefing * { color: var(--glass-dim); }
#lobby-stage.arena-lobby .arena-briefing :is(h2,h3) { color: var(--glass-text); }
#lobby-stage.arena-lobby .arena-join:disabled { background: transparent; border: 1px dashed #4a6a85; color: #6d8aa3; box-shadow: none; opacity: 1; }
#lobby-stage.arena-lobby nav :is(a,button) { background: rgba(12,26,41,.7); color: #e8f2fb; border-radius: 8px; }
/* room cards: map picture on the left (136x84 art shown at 96x59), LIVE tag on matches in progress */
#lobby-stage.arena-lobby .kb-room-card { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; }
#lobby-stage.arena-lobby .kb-room-card.sel { padding: 7px 11px 7px 7px; }
#lobby-stage.arena-lobby .kb-room-card > .kb-room-thumb { position: relative; flex: none; display: block; width: 96px; height: 59px; border-radius: 6px; overflow: hidden; border: 1px solid #ffffff2a; box-shadow: 0 2px 6px #0008; background: #0c1a29; }
#lobby-stage.arena-lobby .kb-room-thumb img { position: static !important; display: block; width: 100%; height: 100%; object-fit: cover; }
#lobby-stage.arena-lobby .kb-room-card > .kb-room-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
#lobby-stage.arena-lobby .kb-room-info > div { display: flex; align-items: center; gap: 6px; }
#lobby-stage.arena-lobby .kb-room-live { position: absolute; left: 4px; top: 4px; padding: 1px 6px 1px 14px; border-radius: 4px; background: #c8302bdd; color: #fff !important; font: 800 9px/14px var(--kb-font); letter-spacing: 1px; }
#lobby-stage.arena-lobby .kb-room-live::before { content: ''; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: kb-live 1.2s ease-in-out infinite; }
@keyframes kb-live { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #lobby-stage.arena-lobby .kb-room-live::before { animation: none; } }
#lobby-stage.arena-lobby .kb-room-card.is-playing .kb-room-thumb img { filter: saturate(1.15); }
#lobby-stage.arena-lobby .kb-room-state.playing { color: #ffd9c9; background: #7a2a22; }
#lobby-stage.arena-lobby .kb-room-state.waiting { color: #c9f3dd; background: #1f5a40; }
#lobby-stage.arena-lobby .kb-room-state.full { color: #f3e3b5; background: #5c4a1f; }

/* lobby chat: the messages sit in their own inset box inside the panel */
#lobby-stage.arena-lobby .arena-chat-log { margin-top: 10px; padding: 10px 12px; border: 1px solid #0b1826; border-radius: 9px; background: #0d1d2ccc; box-shadow: inset 0 2px 8px #000a, 0 1px #ffffff14; }
#lobby-stage.arena-lobby .arena-chat-form { margin-top: 10px; }

/* Avatar shop try-on: float over the scene like the lobby character instead of stacking under the label, so the
   panel keeps the same height on every tab (Claude, 2026-10-22) */
#lobby-stage.arena-lobby .arena-scene-visual:has(.arena-try-preview:not([hidden])) .arena-scene-label { position: absolute; top: 10px; left: 12px; margin: 0; z-index: 2; }
#lobby-stage.arena-lobby .arena-try-preview { position: absolute; inset: 0; padding: 40px 12px 12px; gap: 8px; }
#lobby-stage.arena-lobby .arena-try-avatar { padding: 4px; }
#lobby-stage.arena-lobby .arena-try-preview canvas.preview { width: 190px; height: 190px; }
@media (max-width: 1000px) { #lobby-stage.arena-lobby .arena-try-preview canvas.preview { width: 150px; height: 150px; } }
/* try-on box starts below the map label (no overlap); Clear try-on now lives with Try / Buy */
#lobby-stage.arena-lobby .arena-try-preview { padding: 74px 12px 14px; justify-content: flex-start; }
#lobby-stage.arena-lobby .arena-try-preview canvas.preview { width: 180px; height: 180px; }
@media (max-width: 1000px) { #lobby-stage.arena-lobby .arena-try-preview canvas.preview { width: 150px; height: 150px; } }
/* lobby dialogs (Create room, Go to, passwords…): centred on screen over a dimmed lobby; drag by the header */
#lobby-stage.arena-lobby > .dim { align-items: center; padding: 24px 12px; background: rgba(6,14,24,.6); backdrop-filter: blur(2px); }
#lobby-stage.arena-lobby > .dim > .kb-card { margin: auto; box-shadow: 0 18px 50px #000b, 0 0 0 1px #ffffff14; }
#lobby-stage.arena-lobby > .dim .kb-head { cursor: grab; touch-action: none; }
#lobby-stage.arena-lobby > .dim .kb-head:active { cursor: grabbing; }

/* Settings in the same dark card as Create room / Keep (Claude, 2026-10-22) */
#config { background: rgba(6,14,24,.6); backdrop-filter: blur(2px); }
#config-stage.stage .kb-settings { width: min(380px,calc(100% - 32px)); padding: 0 18px 18px; color: #edf4fa; background: #121f2e; border: 1px solid #3c5367; border-radius: 12px; box-shadow: 0 18px 50px #000b, 0 0 0 1px #ffffff14; scrollbar-color: #3c5367 #121f2e; }
#config-stage .kb-settings .kb-head { margin: 0 -18px 6px; padding: 10px 12px 10px 14px; background: #1a2b3c; border-bottom: 1px solid #304356; }
#config-stage .kb-settings .kb-logo { width: 28px; height: 28px; }
#config-stage .kb-settings .kb-head h3 { font: 700 18px/1.2 var(--kb-font); color: #edf4fa; letter-spacing: .2px; text-shadow: none; }
#config-stage .kb-settings .kb-x { width: 36px; height: 36px; border: 1px solid #3c5367; border-radius: 8px; background: #1a2b3c; color: #edf4fa; font-size: 15px; }
#config-stage .kb-settings .kb-sec { margin: 14px 0 6px; padding-bottom: 5px; border-bottom: 1px solid #2a3f53; color: #78dce8; font: 800 12px/1.2 var(--kb-font); letter-spacing: 1.2px; text-transform: uppercase; }
#config-stage .kb-settings .kb-lbl, #config-stage .kb-settings .kb-val { color: #dbe7f1; font-weight: 700; font-size: 13px; }
#config-stage .kb-settings .kb-pills { gap: 4px; padding: 3px; border: 1px solid #304356; border-radius: 9px; background: #0c1723; box-shadow: none; }
#config-stage .kb-settings .kb-pill { min-height: 36px; padding: 6px 12px; border: 1px solid #3a5065; border-radius: 7px; background: #1a2b3c; color: #dbe7f1; font: 700 13px var(--kb-font); box-shadow: none; }
#config-stage .kb-settings .kb-pill.on { background: #1e414c; border-color: #78dce8; color: #c9f6fa; box-shadow: none; }
#config-stage .kb-settings .kb-pill:hover:not(:disabled):not(.on), #config-stage .kb-settings .kb-x:hover { background: #24425c; color: #fff; }
#config-stage .kb-settings .kb-slide { min-height: 38px; }
#config-stage .kb-settings input.kb-range { height: 38px; accent-color: #ffae55; }
#config-stage .kb-settings .kb-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid #2a3f53; }
#config-stage .kb-settings .kb-go { min-height: 42px; border: 1px solid #ffc482; border-radius: 7px; background: #ffae55; color: #2f200d; box-shadow: none; font-weight: 700; }
#config-stage .kb-settings .kb-go:hover { background: #ffc078; }
#config-stage .kb-settings .kb-link { min-height: 42px; border: 1px solid #8a3a33; border-radius: 7px; background: transparent; color: #ff9c8f; text-decoration: none; }
#config-stage .kb-settings .kb-link:hover { background: #3a1a1c; color: #ffb8ad; }
#config-stage .kb-settings :is(button,input):focus-visible { outline: 2px solid #78dce8; outline-offset: 2px; }
/* one size for all menus: the roomier Settings size */
#lobby-stage.arena-lobby > .dim > .kb-card { width: min(100%, 440px) !important; font-size: 15px; }
#lobby-stage.arena-lobby > .dim .kb-head h3 { font-size: 20px; }
#lobby-stage.arena-lobby > .dim .kb-card label { font-size: 14px; }
#lobby-stage.arena-lobby > .dim .kb-card input:not([type=checkbox]) { font-size: 15px; }
#lobby-stage.arena-lobby > .dim .kb-card .kb-desc { font-size: 14px; }
#config-stage.stage .kb-settings { width: min(440px,calc(100% - 32px)); padding: 0 20px 20px; }
#config-stage .kb-settings .kb-head { margin: 0 -20px 6px; }
#config-stage .kb-settings .kb-head h3 { font-size: 20px; }
#config-stage .kb-settings .kb-lbl, #config-stage .kb-settings .kb-val { font-size: 14px; }
#config-stage .kb-settings .kb-sec { font-size: 13px; }
#config-stage .kb-settings .kb-pill { min-height: 44px; padding: 8px 14px; font-size: 14px; }
#config-stage .kb-settings .kb-slide { min-height: 44px; }
#config-stage .kb-settings .kb-go, #config-stage .kb-settings .kb-link { min-height: 44px; }
#room .arena-room > .dim > .kb-card { width: min(100%, 440px) !important; }

/* All menus: the original Settings colours (blue header + yellow underline and title, navy/yellow pills, yellow OK,
   orange sliders) on a dark body. Applies to Settings and the lobby/room dialogs (Create room, Keep, Go to…). */
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) {
  background: #142536; border: 3px solid #304762; border-radius: 16px; color: #e6f0f8;
  box-shadow: 0 8px #0b1724, 0 22px 70px #000a; }
:is(#lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) { padding: 0 20px 20px; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-head {
  margin: 0 -20px 14px; padding: 12px 16px; gap: 12px; background: linear-gradient(125deg,#325678,#203b57); border-bottom: 4px solid #ffd653; border-radius: 13px 13px 0 0; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-head h3 {
  font: 26px/1.15 'KB Arena',var(--kb-font); color: #fff4bf; letter-spacing: .5px; text-shadow: 0 2px #10223a; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-logo { width: 34px; height: 34px; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-x {
  width: 40px; height: 40px; border: 2px solid #7898b4; border-radius: 10px; background: #17324d; color: #fff; font: 700 17px var(--kb-font); }
#config-stage .kb-settings .kb-sec { margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #2c445c; color: #ffd653; font: 18px/1.2 'KB Arena',var(--kb-font); letter-spacing: .7px; text-transform: none; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) :is(.kb-lbl, .kb-val, label) { color: #dce8f2; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-pills {
  gap: 6px; padding: 4px; border: 1px solid #2c445c; border-radius: 12px; background: #0d1b29; box-shadow: none; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) :is(.kb-pill, .kb-tile) {
  border: 2px solid #476c8c; border-radius: 8px; background: linear-gradient(#426e95,#305573); color: #fff; box-shadow: 0 3px #1c3550; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) :is(.kb-pill, .kb-tile) small { color: #c8dcec; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) :is(.kb-pill.on, .kb-tile.on) {
  background: linear-gradient(#ffe47a,#ffc343); border-color: #b47c21; color: #25344a; box-shadow: 0 3px #9a6719, inset 0 1px #fff8ce; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) :is(.kb-pill.on, .kb-tile.on) :is(small, svg) { color: #4a3a12; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) :is(.kb-pill, .kb-tile):hover:not(:disabled):not(.on) { background: #386f98; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) input:not([type=checkbox]):not([type=range]) {
  background: #0d1b29; border: 2px solid #33506b; border-radius: 9px; color: #f0f6fb; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) input:not([type=checkbox]):not([type=range]):focus { border-color: #ffd653; outline: none; }
#config-stage .kb-settings input.kb-range { accent-color: #c66a16; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-desc { color: #c3d4e2; background: #0d1b29; border-left-color: #ffae55; }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-go {
  min-height: 44px; padding: 10px 22px; border: 2px solid #b47c21; border-radius: 10px; background: linear-gradient(#ffe47a,#ffc343); color: #25344a; box-shadow: 0 3px #9a6719; font: 800 15px var(--kb-font); }
:is(#config-stage .kb-settings, #lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-go:hover:not(:disabled) { background: #ffe58b; }
#config-stage .kb-settings .kb-actions { border-top-color: #2c445c; }
#config-stage .kb-settings .kb-link { border: 2px solid #b8794c; border-radius: 10px; background: #3a2418; color: #ffd0b0; }
#config-stage .kb-settings .kb-link:hover { background: #4d2e1d; color: #ffe2cc; }
:is(#lobby-stage.arena-lobby > .dim > .kb-card, #room .arena-room > .dim > .kb-card) .kb-link { color: #ffd653; }

/* Avatar shop try-on (user, 2026-10-22): bigger box, centred lower in the scene, and the character about twice as
   large. The 128px preview is drawn at 3x and the box crops its empty margins. */
#lobby-stage.arena-lobby .arena-try-preview { padding: 64px 12px 12px; justify-content: center; }
#lobby-stage.arena-lobby .arena-try-avatar { width: min(250px, calc(100% - 24px)); height: min(220px, calc(100% - 8px)); padding: 0; overflow: hidden; display: grid; place-items: center; }
#lobby-stage.arena-lobby .arena-try-preview canvas.preview { width: 384px; height: 384px; flex: none; }
@media (max-width: 1000px) {
  #lobby-stage.arena-lobby .arena-try-avatar { width: min(200px, calc(100% - 24px)); height: min(170px, calc(100% - 8px)); }
  #lobby-stage.arena-lobby .arena-try-preview canvas.preview { width: 320px; height: 320px; }
}
/* centre the character itself in the box: it sits around (70,61) of the 128px preview, mirrored -> (58,61);
   at 3x that is (174,183), at 2.5x (145,153) */
#lobby-stage.arena-lobby .arena-try-avatar { position: relative; display: block; }
#lobby-stage.arena-lobby .arena-try-preview canvas.preview { position: absolute !important; left: calc(50% - 174px) !important; top: calc(50% - 183px) !important; }
@media (max-width: 1000px) { #lobby-stage.arena-lobby .arena-try-preview canvas.preview { left: calc(50% - 145px) !important; top: calc(50% - 153px) !important; } }
/* (replaces the cropped 3x version: it cut off EX backgrounds) The whole 128px preview, uncropped, at a sharp 2x,
   on the right of the scene so it can use the full height beside the map label. */
#lobby-stage.arena-lobby .arena-try-preview { padding: 10px 14px; align-items: flex-end; justify-content: center; }
#lobby-stage.arena-lobby .arena-try-avatar { position: relative; display: block; width: auto; height: auto; padding: 0; overflow: hidden; border-radius: 12px; }
#lobby-stage.arena-lobby .arena-try-preview canvas.preview { position: static !important; left: auto !important; top: auto !important; display: block; width: 256px; height: 256px; }
@media (max-width: 1000px) {
  #lobby-stage.arena-lobby .arena-try-preview { align-items: center; padding: 58px 10px 8px; }
  #lobby-stage.arena-lobby .arena-try-avatar { width: auto; height: auto; }
  #lobby-stage.arena-lobby .arena-try-preview canvas.preview { width: 192px; height: 192px; left: auto !important; top: auto !important; }
}
/* try-on box centred; the map label steps aside on the shop tab (a small TRY-ON tag sits on the box instead) */
#lobby-stage.arena-lobby .arena-try-preview { align-items: center; padding: 10px 14px; }
#lobby-stage.arena-lobby .arena-scene-visual:has(.arena-try-preview:not([hidden])) .arena-scene-label { display: none; }
#lobby-stage.arena-lobby .arena-try-avatar { overflow: visible; }
#lobby-stage.arena-lobby .arena-try-avatar::before { content: 'Click to reset'; white-space: nowrap; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 1; padding: 1px 8px; border-radius: 6px; background: #ffd653; color: #26384a; font: 800 10px/14px var(--kb-font); letter-spacing: .3px; box-shadow: 0 2px #0008; }
#lobby-stage.arena-lobby .arena-try-avatar canvas.preview { border-radius: 11px; }
@media (max-width: 1000px) { #lobby-stage.arena-lobby .arena-try-preview { padding: 14px 10px 8px; } }
/* no map label on the art panel, on any tab (user, 2026-10-22) */
#lobby-stage.arena-lobby .arena-scene-label { display: none !important; }
#lobby-stage.arena-lobby .arena-brand { cursor: pointer; }
#lobby-stage.arena-lobby .arena-brand:hover span { filter: brightness(1.15); }
#lobby-stage.arena-lobby .arena-owned-state.wrong-gender { color: #ff9c8f; background: #3a1a1c; }

/* Admin CP · Look up */
.adminwin .alookup { margin-top: 8px; }
.adminwin .adim { margin: 6px 0; color: #8ea4b6; font-size: 12px; }
.adminwin .ahead { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 8px; }
.adminwin .ahead b { font: 18px 'KB Arena', var(--kb-font); color: #ffd653; }
.adminwin .ahead span { font-size: 11px; color: #78dce8; }
.adminwin .akvs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.adminwin .akv { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; border-radius: 5px; background: #0d1b29; font-size: 12px; }
.adminwin .akv span { color: #8ea4b6; } .adminwin .akv b { color: #e8f2fb; text-align: right; overflow-wrap: anywhere; }
.adminwin h4 { margin: 10px 0 4px; font-size: 12px; color: #78dce8; letter-spacing: .5px; }
.adminwin .aitems { max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.adminwin .aitem { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; background: #0d1b29; font-size: 12px; }
.adminwin .aitem img { position: static !important; }
.adminwin .aitem small { color: #8ea4b6; } .adminwin .aitem em { font-style: normal; color: #ffd653; font-size: 11px; }
.adminwin .aitem.worn { box-shadow: inset 2px 0 #ffd653; }

/* ---- Admin CP in the menu style (Settings colours on a dark body): blue header + yellow underline, yellow/navy
   pills, dark sections; one scrolling page and the server log at the bottom (user, 2026-10-22) ---- */
.stage .kb-card.adminwin { padding: 0 16px 14px; background: #142536; border: 3px solid #304762; border-radius: 16px; color: #e6f0f8; box-shadow: 0 8px #0b1724, 0 22px 70px #000a; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 40px)); }
.stage .kb-card.adminwin .kb-head { margin: 0 -16px 12px; padding: 10px 14px; gap: 10px; background: linear-gradient(125deg,#325678,#203b57); border-bottom: 4px solid #ffd653; border-radius: 13px 13px 0 0; }
.stage .kb-card.adminwin .kb-head h3 { font: 22px/1.15 'KB Arena', var(--kb-font); color: #fff4bf; text-shadow: 0 2px #10223a; margin: 0; }
.stage .kb-card.adminwin .kb-head button.kb-x { width: 34px; height: 34px; border: 2px solid #7898b4; border-radius: 9px; background: #17324d; color: #fff; font: 700 15px var(--kb-font); }
.stage .kb-card.adminwin .awho { margin: 0 0 10px; }
.stage .kb-card.adminwin .aform { height: 36px; padding: 6px 12px; border: 2px solid #33506b; border-radius: 9px; background: #0d1b29; color: #f0f6fb; font: 14px var(--kb-font); box-shadow: none; }
.stage .kb-card.adminwin .aform:focus { border-color: #ffd653; box-shadow: none; }
.stage .kb-card.adminwin .atabs { display: flex; gap: 6px; margin: 0 0 10px; padding: 4px; border: 1px solid #2c445c; border-radius: 12px; background: #0d1b29; }
.stage .kb-card.adminwin .atabs button { flex: 1; margin: 0; height: 34px; padding: 0; border: 2px solid #476c8c; border-radius: 8px; background: linear-gradient(#426e95,#305573); color: #fff; font: 700 14px var(--kb-font); box-shadow: 0 2px #1c3550; }
.stage .kb-card.adminwin .atabs button.on { background: linear-gradient(#ffe47a,#ffc343); border-color: #b47c21; color: #25344a; box-shadow: 0 2px #9a6719, inset 0 1px #fff8ce; }
.stage .kb-card.adminwin .apage { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #3c5367 #0d1b29; }
.stage .kb-card.adminwin .asec { margin: 0 0 10px; padding: 10px 12px 12px; background: #0f2131; border: 1px solid #2c445c; border-radius: 12px; }
.stage .kb-card.adminwin h3 { margin: 0 0 8px; font: 15px 'KB Arena', var(--kb-font); color: #ffd653; letter-spacing: .4px; text-transform: none; }
.stage .kb-card.adminwin .agrid { gap: 6px; }
.stage .kb-card.adminwin .arow { gap: 6px; align-items: center; }
.stage .kb-card.adminwin .arow + .arow { margin-top: 6px; }
.stage .kb-card.adminwin .apage button:not(.kb-x):not(.artbtn):not(.hdbtn) { margin: 0; min-height: 34px; padding: 6px 12px; border: 2px solid #476c8c; border-radius: 8px; background: linear-gradient(#426e95,#305573); color: #fff; font: 700 13px var(--kb-font); box-shadow: 0 2px #1c3550; text-shadow: none; }
.stage .kb-card.adminwin .apage button:not(.kb-x):not(.artbtn):not(.hdbtn):hover, .stage .kb-card.adminwin .atabs button:not(.on):hover { background: #386f98; }
.stage .kb-card.adminwin .apage button.warn:not(.kb-x):not(.artbtn):not(.hdbtn) { border-color: #8a3a33; background: linear-gradient(#7a2b25,#5a1d19); color: #ffd6cf; box-shadow: 0 2px #3a1210; }
.stage .kb-card.adminwin .apage button.warn:not(.kb-x):not(.artbtn):not(.hdbtn):hover { background: #8e342c; }
.stage .kb-card.adminwin .alookup + * , .stage .kb-card.adminwin .asec .agrid + .alookup { margin-top: 8px; }
.stage .kb-card.adminwin .akv { padding: 5px 8px; font-size: 13px; }
.stage .kb-card.adminwin .aitem { padding: 5px 8px; font-size: 13px; }
.stage .kb-card.adminwin .aitems { max-height: 200px; }
.stage .kb-card.adminwin .acheck { color: #dce8f2; font: 13px var(--kb-font); }
.stage .kb-card.adminwin .adminlog { position: static; height: 70px; flex: none; margin-top: 4px; padding: 6px 10px; border: 1px solid #2c445c; border-radius: 10px; background: #0b1622; color: #ffd08a; font: 12px/1.45 ui-monospace, Menlo, monospace; }
.stage .kb-card.adminwin .adminlog:empty { display: none; }
/* Admin CP opens as a lobby dialog (not in the scaled buddy stage): its own width, normal-height controls */
#lobby-stage.arena-lobby > .dim > .kb-card.adminwin { width: min(100%, 520px) !important; }
#lobby-stage.arena-lobby > .dim .kb-card.adminwin :is(input, button):not(.kb-x) { min-height: 34px; }
/* Admin CP item rows: Take off / Remove */
.adminwin .aitem { grid-template-columns: 22px 1fr auto auto auto; }
.adminwin .aiact { display: flex; gap: 4px; }
#lobby-stage.arena-lobby > .dim .kb-card.adminwin .apage .aitem button.mini:not(.kb-x) { position: static !important; min-height: 24px; height: 24px; padding: 0 8px; font-size: 11px; border-width: 1px; box-shadow: none; }
/* masked fields that aren't logins (room passwords, the Rename check): text inputs drawn as dots, so browsers don't
   offer to save them as a login (user, 2026-10-23) */
input.kb-secret { -webkit-text-security: disc; text-security: disc; }
/* yes / no questions in the Settings look (kbConfirm) */
#config-stage .kb-settings.kb-ask { width: min(420px, calc(100% - 32px)); }
#config-stage .kb-ask .kb-ask-text { margin: 4px 2px 0; color: #e6f0f8; font: 600 15px/1.5 var(--kb-font); }