/*
 * KrunkNative overrides for the Krunker v7.1.4 menu.
 *
 * Loaded after Krunker's stylesheets (css/main.css & co., imported unchanged apart from
 * their URLs by tools/ui-import). Only the
 * deviations a different host forces live here; everything Krunker shows in
 * its loaded, logged-out menu stays visible and styled by main.css. Menu
 * open/closed is done with the same inline styles the game JS uses
 * (client/src/ui/menu_ui.c), not with CSS.
 */

/* The 3D scene is rendered behind the page (native engine composite / WebGL
 * canvas); Krunker's page itself is opaque black until its renderer canvas
 * covers it. */
html,
body {
  background: transparent !important;
  background-color: transparent !important;
}

/* Emscripten WebGL target (first body child); a transparent no-op in the
 * native client. Takes the place of Krunker's renderer canvas. */
#canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  outline: none;
}

/* The class preview: Krunker's three.js canvas, kept at its size and position
 * (#menuClassContainer / #classPreviewCanvas in main.css). Its bitmap is the
 * selected class's player model, rendered by client/src/ui/class_preview.c
 * (html_dom_canvas_gl), transparent around the model: the canvas is part of the
 * page's paint order like Krunker's, above #instructionHolder's shade. */
#classPreviewCanvas {
  background: transparent;
}

/* Things that literally cannot exist here: ad iframes and the captcha. */
#aHolder iframe,
#aMerger iframe,
#endAHolderL iframe,
#endAHolderR iframe,
#twoFAGholder iframe,
.grecaptcha-badge,
iframe[src*="captcha"] {
  display: none !important;
}

/* Menu closed: the page is a transparent HUD layer and must not swallow the
 * game's pointer (menu_ui.c toggles html.kn-menu-open). The end-screen results
 * free the pointer like the menu does (html.kn-end-open, menu_ui.c), so their
 * tabs stay clickable. */
html:not(.kn-menu-open):not(.kn-end-open) #uiBase,
html:not(.kn-menu-open):not(.kn-end-open) #uiBase * {
  pointer-events: none !important;
}

/* ?bg=1 standalone preview helper: paint a fake "3D scene" on the canvas so
 * the page's transparency is visible in a normal browser (?bg=<colour> paints
 * a flat colour instead, handy for screenshot comparisons). */
html.kn-preview-bg #canvas {
  background: radial-gradient(ellipse at 50% 40%, #6f8aa6 0%, #3c4a5c 55%, #1a2029 100%);
}

/* Desktop client chrome (client/src/ui/ui_client_settings.c).
 *
 * The Exit menu item: Krunker v7.1.4's #clientExit (public/index.html, hidden by
 * its main.css until a desktop client shows it with display:flex), drawn with
 * v3.1.1's own menu icon set: img/menu-icons/exit.png ships in the v3.1.1 site
 * next to the other menu icons (no -white variant, so it stays red on hover).
 * The native client shows it ("Exit Button" in the Client tab); the web build
 * keeps it hidden, as krunker.io does in a browser. */
#clientExit {
  display: none;
}
.iconExit {
  background-image: url(../img/menu-icons/exit.png);
}

/* The Settings window with the Client tab: seven tabs in one row, the
 * override the v3.1.1 desktop client injects (main/preload.js) when it pushes
 * its "Client" tab onto windows[0].tabs. Scoped to the client-tab layout so a
 * six-tab window keeps main.css's grid. */
#settingsTabLayout.knClientTabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  justify-content: space-around;
}
#settingsTabLayout.knClientTabs .settingTab {
  width: 100%;
}

/* The Servers window's krunk.io / krunker.io tabs (servers_ui.c, .srvTabs). main.css's .bigMenTab
 * sets a 45px line box under 15px / 10px padding; the old inline height:18px made the cell 18px of
 * content under that 45px line box, so the label sat at the bottom. The line box is now 18px and the
 * padding moves 1px down (16px / 9px), so the 43px tab keeps its height and the label's ink is
 * centred in it. Only .srvTabs: the games and ranked tabs keep main.css's and ranked-kn.css's own
 * line boxes and padding. */
.srvTabs .bigMenTab {
  padding-top: 16px;
  padding-bottom: 9px;
  line-height: 18px;
}

/* Settings selects whose options are this machine's devices (Sound > Audio/Mic
 * Input, Audio Output; Client > Audio Backend): a select is as wide as its widest
 * option, and real device names ("Monitor of ... Digital Stereo (IEC958)") make it
 * wider than the row beside the label, so the float drops under the label (Chrome
 * does the same). Krunker's captures only ever show "Unknown Device"; capped at
 * the slider column's width (.slidecontainer 250px + the 70px value box) so every
 * row stays on one line, the selected label is clipped like Chrome clips it. */
.settName > select.inputGrey2 {
  max-width: 320px;
}

/* KrunkNative addition: the interact progress bar (menu_ui.c's setup_dom creates
 * #interactProg > #interProgB, client/src/ui/ui_interact.c fills it; v7.1.4 draws its interact
 * progress on the overlay canvas). Krunker v3.1.1's main.css rules, unchanged. */
#interactProg {
  display: none;
  position: absolute;
  margin-right: -50%;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 175px;
  width: 400px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}
.interProg {
  height: 100%;
  background-color: #fff;
}

/* Settings > General preset boxes: v7's four .setSugBox2 (279px + 4px borders + 10px margin)
 * fill the row; KrunkNative adds a fifth, Beautiful (ui_settings.c sync_preset_boxes), so the
 * five share the same row width: 5 x (219 + 8 + 10) = 1185px, v7's 4 x (279 + 8 + 10) = 1188px. */
.setSugBox2 {
  width: 219px;
}
/* A phone (ui_settings.c sync_preset_boxes) has v10's four boxes and no Beautiful one: they keep
 * v7's 279px. */
.setSugBox2.knFour {
  width: 279px;
}

/* Settings > Quickplay presets (seek_prefs.c presets_html): one row of buttons above the section's folders,
 * shown with the section folded too. Each button writes its lists; the switches below then show them. */
.knSeekPresets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 0 10px 0;
}
.knSeekPresetsLbl {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  margin: 0 12px 8px 0;
}
.knSeekPreset {
  margin: 0 8px 8px 0;
  padding: 7px 14px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.knSeekPreset:hover {
  background-color: rgba(255, 255, 255, 0.22);
}

/* The Download window (showWindow(25), client/src/ui/download_ui.c): v7's header and
 * description, then KrunkNative's packages: the visitor's platform first (.knDlRec,
 * highlighted), every other platform below (.knDlRow), in the window's dark palette. */
.knDlRec {
  margin: 0 5px 15px 5px;
  padding: 12px 20px 10px 20px;
  border-radius: 6px;
  border: 3px solid #fbc02d;
  background-color: rgba(0, 0, 0, 0.4);
}
#menuWindow.dark div.knDlRecTag {
  color: #fbc02d;
  font-size: 15px;
  margin-bottom: 8px;
}
.knDlRecHead {
  display: flex;
  align-items: center;
}
.knDlIcon {
  width: 56px;
  height: 56px;
  margin-right: 16px;
  flex-shrink: 0;
}
.knDlMi {
  font-size: 56px;
  line-height: 56px;
}
.knDlRecName {
  font-size: 26px;
}
#menuWindow.dark div.knDlRecSub,
#menuWindow.dark div.knDlRecPkg {
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
}
#menuWindow.dark div.knDlRecPkg {
  margin-top: 10px;
}
.knDlBtns {
  margin-top: 10px;
}
a.knDlBtn {
  display: inline-block;
  padding: 6px 16px;
  margin: 0 8px 8px 0;
  border-radius: 4px;
  background-color: #2196f3;
  color: #fff;
  font-size: 19px;
  text-decoration: none;
}
a.knDlBtn:hover {
  background-color: #42a5f5;
  text-decoration: none;
}
a.knDlBtn.knDlAlt {
  background-color: rgba(255, 255, 255, 0.12);
  font-size: 17px;
}
a.knDlBtn.knDlAlt:hover {
  background-color: rgba(255, 255, 255, 0.22);
}
#menuWindow.dark div.knDlHow {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 21px;
}
#menuWindow.dark div.knDlNote {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  margin-top: 6px;
}
.knDlOther {
  margin: 0 5px;
}
#menuWindow.dark div.knDlOtherHed {
  color: rgba(255, 255, 255, 0.5);
  font-size: 17px;
  margin: 0 0 6px 4px;
}
.knDlRow {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 17px;
}
.knDlRow.knDlOdd {
  background-color: rgba(0, 0, 0, 0.25);
}
.knDlRow .knDlIcon {
  width: 26px;
  height: 26px;
  margin-right: 12px;
}
.knDlRow .knDlMi {
  font-size: 26px;
  line-height: 26px;
}
.knDlRowName {
  flex-grow: 1;
}
.knDlRowLinks {
  flex-shrink: 0;
  text-align: right;
}
a.knDlLink {
  color: #2196f3;
  margin-left: 12px;
  text-decoration: none;
}
.knDlRec a.knDlLink,
.knDlFoot a.knDlLink {
  margin-left: 0;
}
a.knDlLink:hover {
  text-decoration: underline;
}
#menuWindow.dark span.knDlHint {
  color: rgba(255, 255, 255, 0.45);
  font-size: 15px;
}
#menuWindow.dark div.knDlFoot {
  color: rgba(255, 255, 255, 0.45);
  font-size: 15px;
  text-align: center;
  margin-top: 12px;
}
/* Krunker Strike, its own app (download_ui.c strike_section): the Strike logo and gold on the
 * Strike purple (#5736b0, the app icon's background: tools/branding/strike_icons.py). */
.knDlStrike {
  margin: 15px 5px;
  padding: 10px 14px 8px 14px;
  border-radius: 6px;
  border: 3px solid #f9c80e;
  background-color: rgba(87, 54, 176, 0.35);
}
.knDlStrikeHead {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.knDlStrikeLogo {
  height: 52px;
  margin-right: 14px;
  flex-shrink: 0;
}
.knDlStrike div.knDlHow {
  margin-bottom: 6px;
}

/* KrunkNative Object Manager (F1, client/src/ui/object_manager_ui.c): tabs + search over a grid
 * of icons. Not a v7 window (id 54); #menuWindow gets its width inline (ui_window_meta).
 * The window is a flex column inside #menuWindow's max-height: the title, the tabs and the
 * buttons keep their height, .knOmMain gets the rest, and its panes (the grid, the Properties
 * list, the Tools list) scroll in it. So nothing is cut off on a short window or a big UI scale. */
html.kn-bare-window #menuWindow.dark {
  display: flex;
  flex-direction: column;
}
#menuWindow.dark div.knOm {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#menuWindow.dark div.knOmTitle,
#menuWindow.dark div.knOmTop,
#menuWindow.dark div.knOmFoot,
#menuWindow.dark div.knOmStatus,
#menuWindow.dark div.knOmPropsHead,
#menuWindow.dark div.knOmToolsTitle {
  flex: none;
}
/* the panes' scrollbars: v10's dark-panel bar (svelte.css .automatic-attributes-content) */
#menuWindow.dark div.knOmGrid::-webkit-scrollbar,
#menuWindow.dark div.knOmPropsList::-webkit-scrollbar,
#menuWindow.dark div.knOmToolsList::-webkit-scrollbar {
  width: 8px;
}
#menuWindow.dark div.knOmGrid::-webkit-scrollbar-track,
#menuWindow.dark div.knOmPropsList::-webkit-scrollbar-track,
#menuWindow.dark div.knOmToolsList::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#menuWindow.dark div.knOmGrid::-webkit-scrollbar-thumb,
#menuWindow.dark div.knOmPropsList::-webkit-scrollbar-thumb,
#menuWindow.dark div.knOmToolsList::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#menuWindow.dark div.knOmGrid::-webkit-scrollbar-thumb:hover,
#menuWindow.dark div.knOmPropsList::-webkit-scrollbar-thumb:hover,
#menuWindow.dark div.knOmToolsList::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
#menuWindow.dark div.knOmTop {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
#menuWindow.dark div.knOmTabs {
  margin: 0 !important;
  flex-grow: 1;
  width: auto;
}
input.knOmSearch {
  margin-left: 12px;
  width: 190px;
  height: 42px;
  font-size: 18px;
  padding: 0 10px;
  border: none;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.68);
  color: #fff;
}
#menuWindow.dark div.knOmStatus {
  min-height: 24px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
#menuWindow.dark div.knOmStatus.knOmErr {
  color: #eb5656;
}
#menuWindow.dark div.knOmGrid {
  display: grid;
  /* as many columns as fit (5 at the default window): the tiles wrap, never a horizontal scroll */
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 8px;
  max-height: 404px; /* four rows: the tabs and the buttons stay in view, the grid scrolls */
  flex: 0 1 auto; /* in #knOmBody's column: shorter on a short window */
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}
#menuWindow.dark div.knOmItem {
  position: relative;
  background-color: rgba(0, 0, 0, 0.35);
  border: 2px solid transparent;
  border-radius: 5px;
  padding: 8px 6px 6px;
  text-align: center;
  cursor: pointer;
}
#menuWindow.dark div.knOmItem:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
#menuWindow.dark div.knOmItem.knOmOwned {
  border-color: var(--yellow);
}
img.knOmIcon {
  width: 100%;
  max-width: 120px;
  height: auto;
}
img.knOmProp {
  width: auto;
  max-width: 100%;
  height: 60px;
}
#menuWindow.dark div.knOmGlyph {
  height: 60px;
  line-height: 60px;
}
#menuWindow.dark div.knOmGlyph span.material-icons {
  font-size: 46px;
  line-height: 60px;
  color: rgba(255, 255, 255, 0.85);
}
/* a name wraps onto as many lines as the tile needs: at spaces, and a word too long for the tile
 * breaks. v10's weapItem / killfeedItem use overflow-wrap: break-word too, with word-break: break-all
 * (every character a break point, so a name splits mid-word even when it fits): left out here. */
#menuWindow.dark div.knOmName {
  font-size: 14px;
  color: #fff;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
}
/* the search's hidden tiles, the empty line when a tab has tiles (om_filter, om_grid_html) */
#menuWindow.dark .knOmHid {
  display: none !important;
}
#menuWindow.dark div.knOmBadge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 10px;
  color: #000;
  background-color: var(--yellow);
  padding: 1px 4px;
  border-radius: 3px;
}
#menuWindow.dark div.knOmEmpty {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  padding: 40px 0;
  font-size: 18px;
}
#menuWindow.dark div.knOmFoot {
  display: flex;
  align-items: center;
  margin-top: 12px;
}
#menuWindow.dark div.knOmHint {
  flex-grow: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
}
#menuWindow.dark div.knOmBtns {
  display: flex;
  flex-shrink: 0;
}
#menuWindow.dark div.knOmBtn {
  margin-left: 8px;
}
#menuWindow.dark div.knOmTitle {
  text-transform: uppercase;
  font-size: 22px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.6);
}

/* Object Manager: the Tools pane right of the grid (the Tool Gun's tools, object_manager_ui.c) */
/* The row is as tall as the taller of the grid column and the whole Tools pane, so a tab or a search
 * with few tiles (kn-om-search: 3) still shows every tool and its hint instead of a one-tool slot.
 * When #menuWindow's max-height (main.css: 100% - 230px of #uiBase) leaves less, the row shrinks
 * (min-height: 0) and the stretched pane's list scrolls (kn-om-tools-short, ui_transitions om-tools). */
#menuWindow.dark div.knOmMain {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
#menuWindow.dark div#knOmBody {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
}
#menuWindow.dark div.knOmTools {
  display: flex; /* .knOmToolsIn takes the stretched height, its list the rest */
  flex-direction: column;
  width: 216px; /* 192px of rows beside the list's scrollbar: Release, Freeze and Drop on one line */
  flex-shrink: 0;
  margin-left: 12px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.35);
}
#menuWindow.dark div.knOmToolsIn {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 4px 6px 8px;
}
#menuWindow.dark div.knOmToolsList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}
#menuWindow.dark div.knOmToolsTitle {
  font-size: 16px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}
#menuWindow.dark div.knOmTool {
  display: flex;
  align-items: center;
  margin-bottom: 1px;
  padding: 1px 6px;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
}
#menuWindow.dark div.knOmTool:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
#menuWindow.dark div.knOmTool.knOmToolA {
  border-color: var(--yellow);
}
#menuWindow.dark div.knOmTool span.material-icons {
  font-size: 20px;
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.85);
}
#menuWindow.dark div.knOmTool span.knOmToolName {
  color: #fff; /* main.css * { color } would win on the span */
}
/* the Tool Gun / Physics Gun tiles: the weapons' own icons, the one in hand marked */
#menuWindow.dark div.knOmGuns {
  display: flex;
  margin-bottom: 6px;
}
#menuWindow.dark div.knOmGun {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 2px;
  padding: 3px 2px;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
#menuWindow.dark div.knOmGun:hover {
  background-color: rgba(255, 255, 255, 0.14);
}
#menuWindow.dark div.knOmGun.knOmToolA {
  border-color: var(--yellow);
}
#menuWindow.dark img.knOmGunIcon {
  width: 64px;
  height: 32px;
  object-fit: contain;
}
#menuWindow.dark span.knOmGunName {
  font-size: 12px;
  color: #fff;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}
#menuWindow.dark input.knOmSnapBox {
  width: 46px;
  margin-left: 4px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
  text-align: right;
}
#menuWindow.dark div.knOmOpt {
  display: flex;
  flex-wrap: wrap; /* long labels (de, ru): the buttons go to the next line, never past the pane */
  align-items: center;
  margin-top: 4px;
  font-size: 13px;
}
#menuWindow.dark span.knOmOptName {
  flex-grow: 1;
  color: rgba(255, 255, 255, 0.6);
}
#menuWindow.dark span.knOmOptBtn {
  margin-left: 2px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
#menuWindow.dark span.knOmOptBtn.knOmOptA {
  border-color: var(--yellow);
  color: var(--yellow);
}
#menuWindow.dark div.knOmToolHint {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
#menuWindow.dark div.knOmToolGun {
  margin-top: 6px;
  font-size: 12px;
  color: var(--yellow);
}
#menuWindow.dark div.knOmTools.knOmOff div.knOmTool {
  opacity: 0.45;
}
#menuWindow.dark div.knOmTools.knOmOff div.knOmToolGun {
  color: #eb5656;
}
/* Object Manager: the Properties panel in place of the grid (the Tool Gun's Properties tool,
 * object_manager_ui.c om_props_html): the object's map fields, grouped as the editor's inspector */
#menuWindow.dark div.knOmPropsHead {
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
}
#menuWindow.dark span.knOmPropsTitle {
  font-size: 20px;
  color: #fff;
  margin-right: 10px;
}
#menuWindow.dark span.knOmPropsSub {
  flex-grow: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
#menuWindow.dark div.knOmProps {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
}
#menuWindow.dark div.knOmPropsList {
  max-height: 370px; /* the status line + the head + this = the grid's height: the list scrolls */
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}
#menuWindow.dark div.knOmPropSec {
  margin: 8px 0 3px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--yellow);
}
#menuWindow.dark div.knOmProp {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 1px 6px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.3);
  margin-bottom: 2px;
  font-size: 14px;
}
#menuWindow.dark span.knOmPropName {
  width: 190px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.75);
}
#menuWindow.dark span.knOmPropVal {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
#menuWindow.dark input.knOmPropIn {
  width: 90px;
  height: 22px;
  margin-right: 6px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
}
#menuWindow.dark input.knOmPropIn.knOmPropVec {
  width: 72px;
}
#menuWindow.dark select.knOmPropSel {
  min-width: 160px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
}
#menuWindow.dark span.knOmPropRange {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
#menuWindow.dark span.knOmSwatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}
#menuWindow.dark div.knOmProp span.knOmOptBtn {
  margin: 0 4px 0 0;
  padding: 0 8px;
}
/* The Tool Gun's tool beside the ammo counter (made next to #ammoHolder while it is in hand) */
#knToolHud {
  display: none;
}
#knToolHud.knToolHudOn {
  display: inline-block; /* left of the ammo box: the weapon rack sits above it */
  vertical-align: middle;
  margin-right: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background-color: var(--div-black);
  font-size: 20px;
  color: var(--yellow);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Object Manager: many loadout weapons (extra slots) make a compact rack, six per column
 * (hud_ui.c sets knManyWeaps on #weapHolder past four slots). */
#weapHolder.knManyWeaps {
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  column-gap: 5px;
  row-gap: 3px;
}
#weapHolder.knManyWeaps .weapIcon {
  width: 72px;
  height: 36px;
}
#weapHolder.knManyWeaps .weapSkin {
  max-width: 80px;
  font-size: 9px;
}
#weapHolder.knManyWeaps .weapKey {
  font-size: 11px;
  padding: 1px 5px;
}

/* The Object Manager shows over the game, not over the pause menu: the menu around its window
 * (title, buttons, class box, side links) is hidden while it is up (ui_window_post sets the class). */
html.kn-bare-window #menuHolder,
html.kn-bare-window #infoHider,
html.kn-bare-window #aHider,
html.kn-bare-window #instructions {
  visibility: hidden;
}

/* The "Security Challenge" modal of official krunker.io games (client/src/ui/krunker_captcha_ui.c):
 * the live client's socket-captcha modal (game.deob.js showCaptcha): a dim full-screen holder, a
 * white 450 px box with a 9 px grey drop, "SECURITY CHALLENGE" 32 px uppercase, a grey 20 px line.
 * Centred with flex (no transform), above everything, scrolling when the window is too short.
 * Passive (the "cpt" proof of work): no input. */
.kn-captcha-holder {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483647; /* above v10's view stack (2147483646): a krunker.io sign-in's challenge shows over the login modal */
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}
.kn-captcha-holder.kn-captcha-passive,
.kn-captcha-holder.kn-captcha-passive * {
  pointer-events: none !important;
}
.kn-captcha-modal {
  background-color: white;
  color: black;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0px 9px 0px 0px #a6a6a6;
  width: 450px;
  max-width: calc(100% - 60px);
  max-height: calc(100% - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: all;
}
.kn-captcha-title {
  font-size: 32px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kn-captcha-text {
  color: rgba(0, 0, 0, 0.6);
  font-size: 20px;
  margin-bottom: 10px;
}
.kn-captcha-status {
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  margin-bottom: 4px;
}
.kn-captcha-widget {
  margin-bottom: 6px;
}
/* The challenge drawn in the game UI (native webview, krunker_captcha_ui.c webview_frame): the page's
 * widget on its transparent background, centred where the widget sits (the bitmap is its own size). */
.kn-captcha-webview {
  display: block;
  margin: 4px auto 6px;
}
.kn-captcha-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.kn-captcha-btn {
  display: inline-block;
  cursor: pointer;
  font-size: 18px;
  color: white;
  background-color: #2196f3;
  padding: 6px 16px;
  margin: 6px 4px 0 4px;
  border-radius: 4px;
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  pointer-events: all;
}
.kn-captcha-btn:hover {
  background-color: #42a5f5;
}
.kn-captcha-actions {
  margin-top: 8px;
}
.kn-captcha-cancel {
  background-color: #9e9e9e;
}

/* The Servers window's status line before the official krunker.io groups (servers_ui.c
 * append_krunker_status): empty when the lobbies are listed, else why there are none. Its
 * font and color are the group header's "online" grey, at the window's 20px. #menuWindow.dark div
 * sets every div white (main.css), hence the selectors' weight. */
#menuWindow.dark div.kioSep {
  margin: 24px 15px -8px 6px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}
#menuWindow.dark div.kioSepWhy {
  color: rgba(255, 255, 255, 0.6);
}
#menuWindow.dark div.kioSepWhy {
  margin-top: 4px;
  font-size: 16px;
}
#menuWindow.dark div.kioSepErr {
  color: #ff6b6b;
}

/* KrunkNative's password-reset steps (client/src/ui/account_ui.c reset_render) fill the Account
 * window with v7.1.4's guest-form markup: its Back / Send Code buttons are .accBtn, a rule of
 * v7's css/main.css (line 2658) the v10 page lacks. Without it they shrank to their text. */
.accBtn {
  margin-top: 10px;
  margin-bottom: 0 !important;
  width: 440px;
  height: 50px !important;
  line-height: 45px !important;
  font-size: 23px !important;
  margin-left: 10px;
  margin-right: 10px;
}

/* Confirm popups (genericPopup(..., "confPop"): ui_confirm's YES / NO (ui_dialog.c), the Kick / Ban
 * punish popup (hud_ui.c punishPopup) and the Ban confirm (banPlayer), the clan and client confirms).
 * main.css gives .confPop a 400px content box, 434px drawn with its padding and border, and no
 * limit: with UI scaling off it is wider than a phone viewport and clips on both sides. Its Kick /
 * Ban row (.takeActionTable, table-layout fixed, cells at 100% + padding + margin) lays out wider
 * than the card in this engine (the Ban button leaves the card on the right). Chromium lays v10's own
 * markup out inside the card: two 189.5px buttons, 7px apart, 7px from the edges (measured with v10's
 * main.css; the same numbers come out of the flex row below). The card keeps v10's 434px drawn width
 * and keeps 16px clear of each viewport edge when the viewport is narrower. */
.confPop {
  box-sizing: border-box;
  width: 434px;
  max-width: calc(100% - 32px);
  overflow-wrap: anywhere; /* a long alias with no space wraps inside the card */
}
.confPop #confirmBtn,
.confPop #declineBtn {
  box-sizing: border-box;
  width: 49%; /* 196px drawn on the 400px content box, as before; two of them fit a narrower card */
}
.confPop .takeActionTable {
  display: flex;
  box-sizing: border-box;
  gap: 7px;
  padding: 7px;
  width: 100%;
}
.confPop .takeActionTable > .takeActionBtn {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  width: auto;
  margin: 0; /* main.css's -6px top / 6px right margins are for table cells, which Chromium ignores */
}

/* K.P.D confirm popup (hud_votekick.c confirm_police: #genericPop.polConfPop holds the message div,
 * then the Call / Cancel buttons). The engine does not inherit line-height into the message, and
 * Krunker's default line box is tighter than its 20px text, so its descenders touch the next line. */
.polConfPop > div:first-child {
  line-height: 32px;
}

/* KrunkNative: the map's welMsg line in the menu (menu_ui.c #mapWelcome, shown only when the map has
 * one), above the Contact / Terms row of #mapInfoHolder; the same 16px white text as #mapInfo. */
#mapWelcome {
  color: #fff;
  font-size: 16px;
  max-width: 480px;
  margin: 0 0 8px;
  text-align: right;
}