/* The menu, dressed like a 2000s arena shooter (Quake 3 era) in the vibe/vibe colours:
   pure black, a burning banner and a glossy emblem in 3D (render/logo.js), one centred column of big
   condensed words, dark olive at rest and lime when chosen. Sub-screens float over the dimmed emblem.
   No panels, no glows, no glass. */
#menu {
  --q-ink: #ecebdf; --q-dim: #8d9a4a; --q-mute: #5f6b1c; --q-rest: #7c8f00; --q-hi: #dff902;
  --q-item: "Black Ops One", Impact, sans-serif;
  --q-head: "Russo One", Impact, sans-serif;
  --q-body: Tahoma, Verdana, "Segoe UI", sans-serif;
  --q-out: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  font-family: var(--q-body); color: var(--q-ink);
  /* a chunky lime arrow pointer, old-school */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32'%3E%3Cpath d='M3 2 L3 25 L9 19.5 L13.2 29 L17.6 27 L13.4 17.8 L21.5 17.8 Z' fill='%23dff902' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M5.4 7 L5.4 19' stroke='%23f6ffc0' stroke-width='1.4'/%3E%3C/svg%3E") 3 2, default;
}
#menu * { clip-path: none; }
#menu button, #menu .vb, #menu .mode, #menu input { cursor: inherit; }

/* ───── backdrop: black, the 3D scene on top of it ───── */
/* near-black with the vibe/vibe lime bleeding in: a haze from below, a dim halo up top, a fine dot screen */
#menu .mn-shade { background:
  radial-gradient(ellipse 60% 45% at 50% 108%, rgba(223,249,2,.20), rgba(223,249,2,0) 70%),
  radial-gradient(ellipse 70% 40% at 50% -8%, rgba(150,175,0,.16), rgba(150,175,0,0) 70%),
  radial-gradient(ellipse 120% 90% at 50% 50%, #0b0e03 0%, #050602 60%, #000 100%); }
#menu .mn-shade::before { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(rgba(223,249,2,.22) 1px, transparent 1.4px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 55%, transparent 25%, #000 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 55%, transparent 25%, #000 100%); }
#menu .mn-shade::after { content: none; }
#menu.has-art .mn-shade { background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), var(--art) center/cover; }
#menu.overlay .mn-shade { background: rgba(0,0,0,.86); }
/* ───── key art: one picture per screen, cross-fading, slowly drifting; darkened where the words sit ───── */
#menu .mn-bgs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#menu .mn-bg { position: absolute; inset: -2%; background: center/cover no-repeat; opacity: 0; transform: scale(1.06);
  transition: opacity .7s ease, transform 14s ease-out; }
#menu .mn-bg.on { opacity: 1; transform: scale(1); }
/* home: dark in the middle behind the list, clear at the edges where the characters stand */
#menu .mn-bgs::after { content: ""; position: absolute; inset: 0; transition: background .5s;
  background: radial-gradient(ellipse 34% 50% at 50% 62%, rgba(0,0,0,.72), rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,.6) 100%); }
/* sub-screens carry text and grids: the picture goes further back */
#menu:not([data-page="home"]) .mn-bgs::after { background: radial-gradient(ellipse 75% 70% at 50% 52%, rgba(0,0,0,.82), rgba(0,0,0,.55) 100%); }
#menu.overlay .mn-bgs { display: none; }
@media (prefers-reduced-motion: reduce) { #menu .mn-bg { transition: opacity .2s; transform: none; } }
#hm-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
#menu.logo3d #hm-3d { display: block; }
#menu.overlay #hm-3d { display: none; }

/* ───── top right: wallet and character on dark plates with a lime edge ───── */
#menu .mn-top { top: 18px; left: 24px; right: 24px; justify-content: flex-end; z-index: 3; }
#menu .mn-right { gap: 12px; align-items: stretch; }
#menu .mn-chip, #menu .acc-btn { min-height: 58px; padding: 7px 20px 7px 12px; gap: 12px; color: var(--q-ink); border: 0; border-left: 3px solid var(--q-hi);
  background: linear-gradient(180deg, rgba(34,38,16,.92), rgba(8,9,4,.94)); box-shadow: inset 0 1px 0 rgba(223,249,2,.25);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
#menu .mn-chip:hover, #menu .acc-btn:hover { background: linear-gradient(180deg, rgba(64,72,18,.95), rgba(14,16,6,.95)); }
#menu .mn-chip img { width: 44px; height: 44px; border: 0; background: #111; }
#menu .acc-btn svg.acc-ic { width: 30px; height: 30px; color: var(--q-hi); }
#menu .mn-chip b, #menu .acc-btn b, #menu .acc-btn:not(.on) b { font: 21px/1.05 var(--q-item); letter-spacing: .06em; text-transform: uppercase; color: var(--q-hi); text-shadow: 2px 2px 0 #000; }
#menu .mn-chip:hover b, #menu .acc-btn:hover b { color: #f6ffc0; }
#menu .mn-chip i, #menu .acc-btn em { font: 12px var(--q-body); letter-spacing: .02em; text-transform: none; color: #a7a894; }
#menu .acc-dot { box-shadow: none; }
#menu .acc-menu { background: #000; border: 1px solid #2c3300; box-shadow: none; }
#menu .acc-menu button { background: none; font: 16px var(--q-item); letter-spacing: .06em; color: var(--q-rest); text-shadow: var(--q-out); }
#menu .acc-menu button:hover { background: none; color: var(--q-hi); }
#menu .acc-mrow { font: 11px var(--q-body); text-transform: none; letter-spacing: 0; }

/* ───── main screen: the banner is drawn in 3D above; the words sit over the emblem ───── */
#menu .mn-home { display: none; position: absolute; inset: 0; z-index: 1; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 40vh; }
#menu[data-page="home"] .mn-home { display: flex; }
#menu[data-page="home"] .mn-pages, #menu[data-page="home"] .q3-arrow { display: none; }
.hm-logo { position: absolute; top: 5vh; left: 0; right: 0; display: flex; justify-content: center; }
#menu.logo3d .hm-swing { display: none; }
.hm-swing { display: flex; flex-direction: column; align-items: center; }
.hm-swing b { font: clamp(64px, 10vw, 140px)/0.9 var(--q-head); color: var(--q-hi); text-shadow: 0 3px 0 #6f7d00, 5px 8px 0 #000; }
.hm-swing b.lime { font-size: clamp(22px, 3vw, 40px); letter-spacing: 1.2em; margin-right: -1.2em; }
.hm-list { display: flex; flex-direction: column; align-items: center; }
.hm-list button { background: none; border: 0; padding: 0 30px; font: clamp(30px, 5.6vh, 52px)/1.16 var(--q-item); text-transform: uppercase; letter-spacing: .05em;
  color: var(--q-rest); text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
/* the chosen line lights up and throbs, nothing else moves */
.hm-list button.sel { color: var(--q-hi); animation: qthrob .7s ease-in-out infinite alternate; }
@keyframes qthrob { from { color: var(--q-hi); } to { color: #f3ffa8; } }

/* ───── sub-screens: centred, no frames, over the dim emblem ───── */
#menu .mn-pages { z-index: 1; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 120px)); max-width: none; padding: 0; }
#menu .mn-pages::before, #menu .mn-pages::after { content: none; }
#menu .mn-page { gap: 14px; animation: none; }
#menu .mn-page[data-page="character"] { max-width: none; }
#menu .mn-page h2 { align-self: center; margin: 0 0 8px; font: 46px/1 var(--q-head); letter-spacing: .06em; text-transform: uppercase; color: var(--q-ink);
  text-shadow: 0 3px 0 #55554c, 4px 6px 0 #000; }
#menu .mn-sub { margin: 0; align-self: center; text-align: center; font: 13px var(--q-body); color: #8b8a7c; text-shadow: 1px 1px 0 #000; }
#menu .set-head { justify-content: center; position: relative; }
#menu .set-head .mn-back { position: absolute; right: 0; }

/* words, not boxes */
#menu .btn { background: none; padding: 2px 10px; font: 26px var(--q-item); letter-spacing: .08em; text-transform: uppercase; color: var(--q-rest); text-shadow: var(--q-out); }
#menu .btn:hover { background: none; color: var(--q-hi); }
#menu .btn .hint { font: 11px var(--q-body); letter-spacing: 0; text-transform: none; color: #8b8a7c; text-shadow: none; }
#menu .btn kbd, #menu kbd { font: 10px var(--q-body); border-radius: 0; background: #000; border-color: #3a4200; color: var(--q-dim); }
#menu .mn-actions { justify-content: center; }
#menu #btn-quick, #menu #btn-practice { display: none; }   /* FIGHT does it */

/* map shots: thin frames, the chosen one lime */
#menu .modes { gap: 18px; grid-template-columns: repeat(3, 1fr); }
#menu .mode { height: 200px; border: 2px solid #26291c; box-shadow: 0 0 0 1px #000; }
#menu .modes.small .mode { height: 130px; }
#menu .mode::after { box-shadow: none; }
#menu .mode:hover { border-color: #6b7a10; }
#menu .mode.on { border-color: var(--q-hi); }
#menu .mode::before { background: linear-gradient(0deg, rgba(0,0,0,.94) 6%, rgba(0,0,0,.2) 55%, transparent); }
#menu .mode .mi em { font: bold 11px var(--q-body); letter-spacing: .1em; color: var(--q-dim); }
#menu .mode .mi b { font: 30px/1 var(--q-item); letter-spacing: .07em; text-transform: uppercase; text-shadow: var(--q-out); color: var(--q-rest); }
#menu .mode.on .mi b, #menu .mode.on .mi em { color: var(--q-hi); }
#menu .mode .mi span { font: 12px var(--q-body); color: #9a998b; }

/* setup, the old way: the label right-aligned at the centre line in olive, the value left of it in white */
#menu .rows, #menu .tab { gap: 0; }
#menu .setrow { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; background: none; padding: 3px 0; min-height: 40px; }
#menu .setrow:hover { background: none; }
#menu .setrow > span { line-height: 1.05; gap: 1px; align-items: flex-end; text-align: right; font: 22px var(--q-item); letter-spacing: .08em; text-transform: uppercase; color: var(--q-rest); text-shadow: var(--q-out); }
#menu .setrow:hover > span { color: var(--q-hi); }
#menu .setrow > span small { font: 11px/1.2 var(--q-body); letter-spacing: 0; text-transform: none; color: #77766a; text-shadow: none; }
#menu .setrow > span small em { color: var(--q-hi); }
#menu .setrow > :last-child { justify-self: start; }
#menu .seg { background: none; padding: 0; gap: 4px; }
#menu .seg button { padding: 0 8px; font: 22px var(--q-item); letter-spacing: .06em; text-transform: uppercase; color: #6d6c60; text-shadow: var(--q-out); }
#menu .seg button:hover { color: var(--q-ink); }
#menu .seg button.on { background: none; color: var(--q-ink); }
#menu .seg#xh-style button svg { width: 26px; height: 26px; }
#menu .seg#xh-style button { color: #6d6c60; }
#menu .seg#xh-style button.on { color: var(--q-hi); }
/* slider: a dark groove and a small lime knob */
#menu .slide input[type=range] { -webkit-appearance: none; appearance: none; width: 200px; height: 18px; background: none; }
#menu .slide input[type=range]::-webkit-slider-runnable-track { height: 4px; background: #262a14; border: 1px solid #000; }
#menu .slide input[type=range]::-moz-range-track { height: 4px; background: #262a14; border: 1px solid #000; }
#menu .slide input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 18px; margin-top: -8px; background: var(--q-hi); border: 1px solid #000; }
#menu .slide input[type=range]::-moz-range-thumb { width: 10px; height: 18px; border-radius: 0; background: var(--q-hi); border: 1px solid #000; }
#menu .slide b { font: 20px var(--q-item); letter-spacing: .05em; color: var(--q-ink); text-shadow: var(--q-out); text-align: left; }
#menu .num, #menu .field input { background: #000; border: 0; border-bottom: 2px solid #3a4200; box-shadow: none; color: var(--q-ink); font: 20px var(--q-item); letter-spacing: .06em; border-radius: 0; }
#menu .field input:focus { border-bottom-color: var(--q-hi); outline: none; }
#menu .field { flex-direction: row; align-items: center; gap: 14px; max-width: none; }
#menu .field span { font: 22px var(--q-item); letter-spacing: .08em; text-transform: uppercase; color: var(--q-rest); text-shadow: var(--q-out); }
#menu .field input { flex: 1; padding: 4px 6px; min-width: 0; }
#menu .swatches button { width: 22px; height: 22px; border: 1px solid #000; box-shadow: none; }
#menu .swatches button.on { outline: 2px solid var(--q-ink); outline-offset: 1px; }
#menu .xh-preview { height: 90px; background: #000; border: 1px solid #26291c; box-shadow: none; }
#menu .tabs { justify-content: center; gap: 14px; margin-bottom: 8px; }
#menu .tabs button { background: none; border: 0; padding: 0 10px; font: 28px var(--q-item); letter-spacing: .08em; text-transform: uppercase; color: #6d6c60; text-shadow: var(--q-out); }
#menu .tabs button:hover { color: var(--q-rest); }
#menu .tabs button.on { color: var(--q-hi); background: none; }
#menu .tab { max-height: 50vh; scrollbar-width: thin; scrollbar-color: #3a4200 #000; }
#menu .binds { gap: 0 30px; margin-top: 10px; }
#menu .bind { background: none; padding: 1px 0; font: 19px var(--q-item); letter-spacing: .07em; text-transform: uppercase; color: var(--q-rest); text-shadow: var(--q-out); }
#menu .bind button { min-width: 96px; background: none; border: 0; padding: 0 6px; font: 19px var(--q-item); letter-spacing: .05em; color: var(--q-ink); text-shadow: var(--q-out); text-align: left; }
#menu .bind button:hover { color: var(--q-hi); }
#menu .bind button.wait { background: var(--q-hi); color: #000; text-shadow: none; }
#menu .bind.reset button { color: #6d6c60; }

/* player model: a wall of portraits on the left, the model standing on the right */
.ch-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: stretch; }
.ch-right { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 420px; }
#char3d { position: absolute; inset: 0 0 76px; width: 100%; height: calc(100% - 76px); }
#ch-model { align-self: center; font: 30px var(--q-item); letter-spacing: .08em; text-transform: uppercase; color: var(--q-ink); text-shadow: var(--q-out); }
#menu .vibers { grid-template-columns: repeat(6, 1fr); gap: 8px; max-height: none; overflow: visible; align-content: center; padding: 0; }
#menu .vb { background: none; padding: 0; gap: 0; border: 0; box-shadow: none; clip-path: none; }
#menu .vb img { background: #111; clip-path: none; box-shadow: 0 0 0 2px transparent; filter: brightness(.82) saturate(.95); transition: filter .1s; }
#menu .vb:hover img { filter: none; }
#menu .vb.on img { filter: none; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--q-hi); }
#menu .vb span { display: none; }
#menu .vb.locked img { filter: grayscale(1) brightness(.35); }
#menu .vb[data-lock]:not([data-lock=""])::after { font: 14px var(--q-item) !important; letter-spacing: .06em; top: auto; bottom: 4px; right: 4px; padding: 0 4px; background: #000; color: var(--q-rest); }
#menu .vb.locked::before { content: none; }

/* leaderboard and store, from account.js: plain black tables, olive rules */
#menu .acc-table, #menu .acc-empty, #menu .acc-bal, #menu .acc-pcard { background: rgba(0,0,0,.72); border: 1px solid #26291c; box-shadow: none; }
#menu .acc-tr { font: 13px var(--q-body); border-top-color: #1a1d10; }
#menu .acc-tr.th { background: #0c0e05; font: 15px var(--q-item); letter-spacing: .08em; color: var(--q-rest); }
#menu .acc-tr.th > span { color: var(--q-rest); }
#menu .acc-tr .pl b { font-weight: bold; }
#menu .acc-tr.me, #menu .acc-tr.pin { background: rgba(223,249,2,.1); box-shadow: inset 3px 0 0 var(--q-hi); border-top: 0; }
#menu .acc-season b { font: 22px var(--q-item); letter-spacing: .06em; text-shadow: var(--q-out); }
#menu .acc-season span, #menu .acc-note, #menu .acc-empty { font-family: var(--q-body); }
#menu .acc-buy { border-radius: 0; font-family: var(--q-item); letter-spacing: .06em; }

/* ───── BACK and FIGHT: arrow-shaped plates pointing the way they go ───── */
#menu .q3-arrow { position: absolute; bottom: 46px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; height: 60px; min-width: 190px; padding: 0 34px;
  border: 0; font: 28px var(--q-item); letter-spacing: .08em; text-transform: uppercase; color: var(--q-ink); text-shadow: 2px 2px 0 #000;
  background: linear-gradient(180deg, #2f3514 0%, #14170a 55%, #070803 100%); transition: background .12s, color .12s, transform .12s; }
#menu .q3-arrow.back { left: 44px; padding-left: 46px; clip-path: polygon(26px 0, 100% 0, 100% 100%, 26px 100%, 0 50%);
  box-shadow: inset -4px 0 0 var(--q-hi); }
#menu .q3-arrow.fight { right: 44px; display: none; padding-right: 50px; color: #000; text-shadow: none; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
  background: linear-gradient(180deg, #f1ff6a 0%, #dff902 50%, #a9bd00 100%); }
#menu .q3-arrow.back::before { content: ""; border: 9px solid transparent; border-right: 13px solid var(--q-hi); border-left: 0; }
#menu[data-page="play"] .q3-arrow.fight, #menu[data-page="practice"] .q3-arrow.fight { display: flex; }
#menu .q3-arrow.back:hover { color: var(--q-hi); background: linear-gradient(180deg, #46501a 0%, #1d2109 55%, #0a0b04 100%); transform: translateX(-4px); }
#menu .q3-arrow.fight:hover { background: linear-gradient(180deg, #fbffc0 0%, #ecff4a 50%, #c2d900 100%); transform: translateX(4px); }
#menu.overlay .q3-arrow { display: none !important; }

/* the copyright line, spaced out along the bottom */
#menu .mn-foot { z-index: 1; left: 0; right: 0; bottom: 14px; justify-content: center; gap: 28px; font: 15px var(--q-item); letter-spacing: .22em; text-transform: uppercase; color: #4f5a0e; text-shadow: 1px 1px 0 #000; }
#menu .mn-foot .ver { font: 15px var(--q-item); letter-spacing: .22em; }
#menu .mn-back { font: 20px var(--q-item); }

/* the in-match pause menu, the same family */
#paused { background: rgba(0,0,0,.72); backdrop-filter: none; }
#paused .pz { align-items: center; gap: 0; padding: 20px 60px; background: none; border: 0; box-shadow: none; }
#paused .pz-title { font: 46px "Russo One", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #ecebdf; text-shadow: 0 3px 0 #55554c, 4px 6px 0 #000; margin-bottom: 14px; }
#paused .pz-b { background: none; box-shadow: none; text-align: center; font: 42px/1.2 "Black Ops One", Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #7c8f00;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; padding: 0 20px; }
#paused .pz-b:hover { background: none; padding-left: 20px; color: #dff902; }
#paused .pz-b.danger:hover { background: none; color: #ff5a4a; }

@media (max-width: 1100px) {
  #menu .mn-pages { width: calc(100vw - 60px); }
  #menu .q3-arrow { bottom: 40px; height: 50px; min-width: 120px; font-size: 24px; }
  .ch-wrap { grid-template-columns: 1fr 240px; }
  #menu .vibers { grid-template-columns: repeat(5, 1fr); }
}
#menu .slide .num { width: 70px; flex: none; }
#menu .set-fine { margin-top: 12px; font-size: 11px; color: #5d6626; }
#menu.overlay .mn-top { display: none; }