/*
 * 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) but left empty; the
 * engine renders the selected class's player model into its screen rectangle
 * (client/src/ui/class_preview.c) underneath the page. */
#classPreviewCanvas {
  background: transparent;
}

/* The dimming layer behind the menu is #instructionHolder (50% black in
 * main.css). Krunker's preview canvas sits above it; ours is rendered by the
 * engine underneath the page, so while the preview is visible the holder's
 * own background is swapped for a spread box-shadow cast by a transparent box
 * placed exactly over #classPreviewCanvas (menu_ui.c keeps it in sync with
 * the preview rectangle). Every pixel outside the box stays rgba(0,0,0,0.5). */
#instructionHolder.kn-hole {
  background-color: transparent;
  overflow: hidden;
}
#knPreviewHole {
  display: none;
  position: absolute;
  pointer-events: none;
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.5);
}
#instructionHolder.kn-hole #knPreviewHole {
  display: block;
}
/* #instructionsFadeBG (#222, opacity 1 -> 0 while the menu comes up) lies below
 * the holder, so it would cover the preview's dimmed backdrop with undimmed #222
 * and leave a lighter box until the fade ends. It gets the same hole; the hole
 * box paints #222 already dimmed by the holder's 50% (#111), and the element's
 * opacity fades both together. The engine paints a cut-out box's background
 * on the same device pixels as its shadow's hole (paint.c cutout_rect). */
#instructionsFadeBG.kn-hole {
  background-color: transparent;
  overflow: hidden;
}
#knFadeHole {
  display: none;
  position: absolute;
  pointer-events: none;
  background-color: #111;
  box-shadow: 0 0 0 4000px #222;
}
#instructionsFadeBG.kn-hole #knFadeHole {
  display: block;
}

/* 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%;
}

/* 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;
}

/* 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;
}

/* 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). */
#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;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 404px; /* six rows: the tabs and the buttons stay in view, the grid scrolls */
  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: 120px;
  height: 60px;
}
img.knOmProp {
  width: auto;
  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);
}
#menuWindow.dark div.knOmName {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#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: 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;
}