* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --ink: #151d2e;
  --ink-soft: #1d2941;
  --bg: #0a1020;
  --panel: #121c2d;
  --panel-2: #17243a;
  --line: #26344e;
  --text: #eef4ff;
  --muted: #93a3bd;
  --dim: #64748f;
  --green: #7ed957;
  --green-d: #43a13a;
  --blue: #4cc7f4;
  --blue-d: #1f86b8;
  --orange: #ffb02e;
  --orange-d: #bb7315;
  --red: #f2555a;
  --red-d: #a92f3e;
  --accent: #ffcf5c;
  --mint: #8df0cf;
  --font: "Courier New", ui-monospace, "SFMono-Regular", monospace;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #0a1020;
  color: var(--text);
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
}

body {
  position: fixed;
  inset: 0;
  touch-action: none;
  overscroll-behavior: none;
  background:
    radial-gradient(90% 55% at 50% -5%, rgba(76, 199, 244, .10), transparent 70%),
    radial-gradient(120% 70% at 50% 110%, #14243c 0%, #0a1020 62%);
}

body::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 16px 16px;
  z-index: 1;
}

#game {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
  image-rendering: pixelated;
}

button {
  font-family: inherit;
  color: inherit;
}

/* ---------------- HUD ---------------- */

#hud {
  position: absolute;
  inset: 0 0 auto;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s, transform .2s;
  z-index: 5;
}

body.playing #hud {
  opacity: 1;
  transform: none;
}

.hudtop {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lvlbadge {
  flex: 0 0 auto;
  min-width: 46px;
  height: 44px;
  padding: 0 5px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #7ed957, #4aa93c);
  box-shadow: 0 4px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #10230c;
}

.lvlbadge b {
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

.lvlbadge small {
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: .75;
}

.hudmid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.timer {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink), 0 0 10px rgba(0, 0, 0, .6);
}

.xp {
  height: 12px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: #0d1524;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .5);
  overflow: hidden;
}

#xpfill {
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, #ffd76e, #e09a1d);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45);
  transition: width .14s linear;
}

.hudbtn {
  pointer-events: auto;
  flex: 0 0 auto;
  width: 46px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #36b4e6, #1c7fae);
  color: #062334;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .35);
}

.hudbtn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .3);
}

.hudmeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 18px;
}

.kills {
  flex: 0 0 auto;
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c6d4e8;
  text-shadow: 0 1px 0 var(--ink);
}

.kills b {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-right: 3px;
  padding: 1px 5px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #22334f;
}

.waves {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 6px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #2f5522;
  color: #ddffb4;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--ink);
}

.waves[hidden] { display: none; }

.partnerbar {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  font-size: 9px;
  color: #d4e2f4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 var(--ink);
}

.partnerbar[hidden] { display: none; }

.partnerbar b { color: var(--mint); font-weight: 900; }

.hpbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
}

.hpicon {
  font-size: 12px;
  color: var(--red);
  text-shadow: 0 2px 0 var(--ink);
}

.hp {
  flex: 1;
  height: 12px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: #0d1524;
  overflow: hidden;
}

#hpfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #ff7a7a, #d93648);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
  transition: width .14s ease-out;
}

#hpnum {
  flex: 0 0 34px;
  text-align: right;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #eaf2ff;
  text-shadow: 0 2px 0 var(--ink);
}

/* ---------------- Screens ---------------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.screen.show {
  opacity: 1;
  pointer-events: auto;
}

.screen.center {
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 26px);
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 207, 92, .07), transparent 55%),
    rgba(7, 12, 22, .94);
  overflow-y: auto;
  touch-action: pan-y;
}

/* ---------------- Menu ---------------- */

.menu {
  justify-content: flex-start;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background:
    radial-gradient(90% 52% at 50% 0%, rgba(76, 199, 244, .10), transparent 62%),
    radial-gradient(100% 60% at 50% 100%, rgba(28, 52, 80, .5), transparent 70%),
    linear-gradient(180deg, rgba(8, 13, 24, .55), rgba(6, 10, 18, .95));
  overflow-y: auto;
  touch-action: pan-y;
  z-index: 12;
}

.menu > * {
  width: min(430px, 100%);
  margin: 0 auto;
  flex: 0 0 auto;
}

.menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.wordmark {
  font-size: clamp(24px, 7.6vw, 32px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: #ffffff;
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    3px 3px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink),
    0 7px 0 rgba(0, 0, 0, .45);
}

.wordmark span {
  color: var(--accent);
}

.menu-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.mini-btn {
  width: 30px;
  height: 28px;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(180deg, #ffc85c, #d98c1c);
  color: #33200a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .45);
}

.mini-btn.off {
  background: linear-gradient(180deg, #3a4a63, #26344a);
  color: #8698b3;
  box-shadow: 0 3px 0 var(--ink);
}

.menu-name {
  font-size: 10px;
  font-weight: 800;
  color: #dfe9f8;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 var(--ink);
}

.menu-tag {
  font-size: 7px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #7d8faa;
  font-weight: 700;
}

.showcase {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(180deg, #1a2a44, #0c1424);
  box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .06);
}

#menucanvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.showcase-tags {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.tag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #dbe8f8;
  padding: 4px 7px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #23344f;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-accent {
  color: #3c2a08;
  background: linear-gradient(180deg, #ffd570, #f0aa27);
  border-color: var(--ink);
}

.menustats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.menustats > div {
  padding: 9px 11px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #1e2f4a, #121d30);
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .07);
}

.menustats small {
  font-size: 7px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8fa2bd;
  font-weight: 700;
}

.menustats b {
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

/* ---------------- Buttons ---------------- */

.btn {
  border: 3px solid var(--ink);
  border-radius: 7px;
  min-width: 190px;
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #082532;
  background: linear-gradient(180deg, #5fd2fb, #2aa7db);
  cursor: pointer;
  box-shadow:
    0 5px 0 var(--ink),
    inset 0 3px 0 rgba(255, 255, 255, .42),
    inset 0 -4px 0 rgba(0, 0, 0, .18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .06s, filter .12s;
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .35);
}

.btn.primary {
  color: #143005;
  background: linear-gradient(180deg, #9ceb70, #5cb944);
  box-shadow:
    0 5px 0 var(--ink),
    inset 0 3px 0 rgba(255, 255, 255, .5),
    inset 0 -4px 0 rgba(0, 0, 0, .18);
}

.btn:disabled { opacity: .45; pointer-events: none; }

.btn.wide { width: 100%; }

.play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 11px 20px 10px;
  letter-spacing: 2.4px;
  font-size: 17px;
}

.play small {
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(20, 48, 5, .7);
}

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 9px;
  padding: 10px 11px;
  text-align: left;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: linear-gradient(180deg, #21334f, #152137);
  box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: transform .06s, filter .12s;
}

.tile:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.tile i {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(180deg, #ffd166, #e8a12a);
  color: #3a2708;
  font-size: 15px;
  font-style: normal;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}

.tile b {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile small {
  font-size: 8px;
  color: #93a6c2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maps-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.maps-label {
  font-size: 7px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #6f84a3;
  font-weight: 800;
  padding-left: 2px;
}

.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #1d2e47, #132036);
  color: #93a6c2;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .06s;
}

.chip b {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #dce8f8;
  white-space: nowrap;
  text-transform: uppercase;
}

.chip small {
  display: block;
  font-size: 7px;
  margin-top: 2px;
  white-space: nowrap;
  color: #7c90ad;
}

.chip.on {
  background: linear-gradient(180deg, #ffd166, #e9a02a);
  border-color: var(--ink);
}

.chip.on b { color: #3a2708; }
.chip.on small { color: rgba(58, 39, 8, .72); }

.menu-hint {
  text-align: center;
  font-size: 9px;
  line-height: 1.6;
  color: #7e93b1;
  padding: 0 8px;
}

/* ---------------- Panels ---------------- */

.panel {
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(52, 76, 110, .3), transparent 70%),
    var(--panel);
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
  z-index: 20;
}

.phead {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 3px solid var(--ink);
  background: linear-gradient(180deg, #1d2d46, #142034);
  flex: 0 0 auto;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}

.phead-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.phead h2 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 var(--ink);
}

.phead-text span {
  font-size: 7px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8095b3;
  font-weight: 700;
}

.back {
  width: 38px;
  height: 36px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #ffc45c, #dc8c19);
  color: #352106;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .45);
}

.back:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.pbody {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 26px);
  display: flex;
  flex-direction: column;
  gap: 11px;
  touch-action: pan-y;
}

.preview {
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(180deg, #1c2c45, #0e1828);
  padding: 4px;
  box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .05);
}

#preview {
  width: 150px;
  height: 160px;
  image-rendering: pixelated;
}

.tabs {
  display: flex;
  gap: 5px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  padding: 4px;
  background: #0e1828;
}

.tabs button {
  flex: 1;
  border: 2px solid transparent;
  border-radius: 4px;
  background: none;
  color: #879bb8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 3px;
  cursor: pointer;
}

.tabs button.on {
  background: linear-gradient(180deg, #ffd166, #e9a02a);
  border-color: var(--ink);
  color: #3a2708;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}

.gearlist {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.gear {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: linear-gradient(180deg, #1e2f49, #142034);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .06s;
}

.gear:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--ink);
}

.gear.sel {
  background: linear-gradient(180deg, #2b5a3c, #1c3f2a);
  box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px rgba(126, 217, 87, .45);
}

.gicon {
  flex: 0 0 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(180deg, #ffd166, #e5a02c);
  font-size: 16px;
  font-weight: 900;
  color: #3a2708;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}

.gtext { flex: 1; min-width: 0; }

.gtext b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gtext small {
  display: block;
  font-size: 9px;
  color: #93a6c2;
  margin-top: 2px;
  line-height: 1.4;
}

.gcheck {
  color: var(--green);
  font-size: 15px;
  font-weight: 900;
  opacity: 0;
  text-shadow: 0 2px 0 var(--ink);
}

.gear.sel .gcheck { opacity: 1; }

.swatches {
  display: flex;
  gap: 3px;
}

.swatch {
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  border-radius: 2px;
}

/* ---------------- Settings ---------------- */

.settings { gap: 11px; }

.setgroup {
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #1c2b43, #111c2e);
  box-shadow: 0 4px 0 var(--ink);
  overflow: hidden;
}

.setgroup-title {
  padding: 8px 12px;
  font-size: 7px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8da1bf;
  font-weight: 800;
  border-bottom: 2px solid var(--ink);
  background: rgba(255, 255, 255, .03);
}

.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 2px solid rgba(21, 29, 46, .8);
}

.setrow:last-child { border-bottom: none; }

.setrow b {
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.setrow small {
  display: block;
  font-size: 9px;
  color: #93a6c2;
  margin-top: 2px;
}

.switch {
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: #24344e;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35);
}

.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #7f90ab;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3);
  transition: transform .14s, background .14s;
}

.switch.on {
  background: #2c6535;
}

.switch.on::after {
  transform: translateX(20px);
  background: #a7ef70;
}

.pillbtn {
  border: 3px solid var(--ink);
  border-radius: 5px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #5fd2fb, #2aa7db);
  color: #082532;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .4);
}

.pillbtn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.note {
  font-size: 10px;
  line-height: 1.65;
  color: #90a4c1;
}

/* ---------------- Top ---------------- */

.toplist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toprow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #1e2f49, #131f33);
  font-size: 12px;
  box-shadow: 0 3px 0 var(--ink);
}

.toprow .rank {
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #ffd166;
  color: #3a2708;
  font-weight: 900;
  font-size: 10px;
}

.toprow .nm {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.toprow .sc {
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.toprow.me {
  background: linear-gradient(180deg, #2b5a3c, #1c3f2a);
  box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px rgba(126, 217, 87, .35);
}

/* ---------------- Online ---------------- */

.callout {
  padding: 11px 12px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: linear-gradient(180deg, #1d4a3e, #123229);
  box-shadow: 0 4px 0 var(--ink);
  margin-bottom: 3px;
}

.callout b {
  font-size: 11px;
  color: #a9f5dc;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.callout p {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.6;
  color: #b3d5ca;
}

#duelsetup {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#duelsetup[hidden] { display: none; }

.joinrow {
  display: flex;
  gap: 7px;
}

.joinrow input {
  flex: 1;
  min-width: 0;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: #0e1828;
  color: var(--accent);
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 4px;
  text-align: center;
  padding: 10px 6px;
  text-transform: uppercase;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35);
}

.joinrow input::placeholder { color: #52658a; letter-spacing: 3px; }

.joinrow .btn {
  min-width: 92px;
  flex: 0 0 auto;
  font-size: 10px;
  padding: 10px 12px;
}

#duelroom {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#duelroom[hidden] { display: none; }

.roomcode {
  font-size: 8px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #93a6c2;
  text-align: center;
}

.roomcode b {
  display: block;
  margin-top: 4px;
  font-size: 30px;
  letter-spacing: 8px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 var(--ink);
}

.duelplayers {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 2px 0;
}

.plrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  font-size: 11px;
  background: linear-gradient(180deg, #1e2f49, #131f33);
  box-shadow: 0 3px 0 var(--ink);
}

.plrow .dot {
  width: 8px;
  height: 8px;
  border: 2px solid var(--ink);
  background: #64748f;
}

.plrow.playing .dot {
  background: var(--green);
}

.plrow.done .dot { background: var(--orange); }

.plrow .pname { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.plrow .pscore { font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.plrow .you { color: #8a9fbd; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }

/* ---------------- Level cards ---------------- */

.eyebrow {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 900;
  text-shadow: 0 2px 0 var(--ink);
}

.eyebrow.danger { color: var(--red); }

.big {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: center;
  text-shadow: 0 3px 0 var(--ink);
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(410px, 100%);
  margin-top: 4px;
}

.card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: linear-gradient(180deg, #233652, #16243a);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .07);
  animation: rise .2s ease-out both;
  transition: transform .06s, filter .12s;
}

.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }

.card:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.card .ico {
  flex: 0 0 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(180deg, #ffd166, #e29d24);
  color: #3a2708;
  font-size: 17px;
  font-weight: 900;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
}

.card .ctext {
  flex: 1;
  min-width: 0;
  display: block;
}

.card h3 {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
}

.card p {
  font-size: 9px;
  color: #a4b7d3;
  margin-top: 2px;
  line-height: 1.45;
}

.card .lvl {
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7f93b2;
  margin-top: 3px;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- Result ---------------- */

.scorebig {
  font-size: 62px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow:
    4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink),
    4px 4px 0 var(--ink), -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink),
    0 8px 0 rgba(0, 0, 0, .45);
}

.scorecap {
  font-size: 7px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #93a6c2;
  margin-top: 2px;
}

.stats {
  display: flex;
  gap: 7px;
  margin: 12px 0 4px;
}

.stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 86px;
  padding: 8px 9px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #20314c, #131f33);
  box-shadow: 0 3px 0 var(--ink);
}

.stats span {
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.stats small {
  font-size: 7px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #93a6c2;
}

.bestline {
  font-size: 10px;
  color: #93a6c2;
  margin-top: 4px;
}

.bestline b { color: var(--text); }

.duelline {
  font-size: 10px;
  line-height: 1.55;
  padding: 8px 11px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #1d4a3e, #123229);
  color: #bff3e2;
  max-width: 340px;
  text-align: center;
}

.duelline[hidden] { display: none; }

#gameover .btn, #pausescreen .btn { width: min(300px, 100%); }

/* ---------------- Toast ---------------- */

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 26px);
  transform: translate(-50%, 16px);
  padding: 9px 16px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(180deg, #243550, #16243a);
  box-shadow: 0 4px 0 var(--ink);
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.link {
  align-self: center;
  border: none;
  background: none;
  color: #8ea2c0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 8px;
  cursor: pointer;
}

.link:active { color: var(--text); }

.link.danger { color: var(--red); }

/* ---------------- Splash ---------------- */

.splash {
  --map-accent: #8fd36a;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 60% at 50% 40%, rgba(76, 199, 244, .08), transparent 70%),
    #070c16;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

.splash.show {
  opacity: 1;
  pointer-events: auto;
}

.splash[hidden] { display: none; }

.splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, transparent 0%, rgba(7, 12, 22, .6) 45%, rgba(7, 12, 22, .92) 100%);
  pointer-events: none;
}

.splash-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 207, 92, .08), transparent);
  height: 40%;
  animation: scan 2.2s linear infinite;
  pointer-events: none;
}

@keyframes scan {
  from { transform: translateY(-100%); }
  to { transform: translateY(280%); }
}

.splash-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(420px, 100%);
  text-align: center;
}

#splashhero {
  width: 200px;
  height: 230px;
  image-rendering: pixelated;
}

.splash-kicker {
  font-size: 7px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #7f93b0;
  font-weight: 800;
}

.splash-title {
  font-size: clamp(30px, 10vw, 44px);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--map-accent);
  margin-top: -6px;
  text-shadow:
    4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink),
    4px 4px 0 var(--ink), -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink),
    0 9px 0 rgba(0, 0, 0, .5);
}

.splash-mod {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e6eefc;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, .07);
  border-radius: 4px;
}

.splash-bar {
  margin-top: 14px;
  width: min(260px, 76%);
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: #0d1524;
  box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(0, 0, 0, .5);
  overflow: hidden;
}

.splash-bar i {
  display: block;
  height: 100%;
  width: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 10px),
    linear-gradient(180deg, #ffd76e, #e09a1d);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45);
  transition: width .08s linear;
}

.splash-tip {
  margin-top: 10px;
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #71849f;
}

@media (max-height: 700px) {
  .menu { gap: 9px; }
  .showcase { max-height: 138px; overflow: hidden; }
  #menucanvas { margin-top: -16px; }
  .wordmark { font-size: 25px; }
  .scorebig { font-size: 52px; }
  .card { padding: 9px 10px; }
  .card .ico { flex-basis: 36px; height: 36px; font-size: 15px; }
  #splashhero { width: 156px; height: 180px; }
}

/* ------------------------------------------------------------------ */
/*  Flat minimal pass: solid fills, thin ink outlines, no noise         */
/* ------------------------------------------------------------------ */

:root {
  --ink: #101418;
  --ink-soft: #171d24;
  --bg: #080c11;
  --panel: #0e141b;
  --panel-2: #151c24;
  --line: #232c37;
  --text: #f2f6fb;
  --muted: #8e9cae;
  --dim: #657383;
  --green: #8bd94d;
  --green-d: #64ad35;
  --blue: #38bdf8;
  --blue-d: #148fc4;
  --orange: #f5a52e;
  --orange-d: #bd7612;
  --red: #ef4e5a;
  --red-d: #b62f3d;
  --accent: #ffcf5c;
  --mint: #8df0cf;
}

body {
  background: var(--bg);
}

body::after { display: none; }

.menu,
.panel,
.screen.center {
  background: var(--bg);
}

.screen.center {
  background: rgba(7, 10, 14, .97);
}

.wordmark {
  font-weight: 800;
  letter-spacing: -.03em;
  text-shadow: none;
}

.menu-tag,
.maps-label,
.menu-hint,
.note,
.roomcode,
.scorecap {
  color: var(--dim);
}

.menu-name { color: var(--text); text-shadow: none; }

/* Flat surfaces */
.showcase,
.preview {
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #111821;
  box-shadow: none;
}

.menustats > div,
.tile,
.chip,
.gear,
.setgroup,
.card,
.toprow,
.plrow,
.callout,
.duelline,
.stats > div,
.toast {
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--panel-2);
  box-shadow: none;
}

.phead {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  box-shadow: none;
}

.phead h2 { text-shadow: none; }
.pbody { background: var(--panel); }

.tabs {
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #0a1016;
}

.tabs button.on,
.chip.on,
.tag-accent {
  background: var(--orange);
  border-color: var(--ink);
  color: #241704;
  box-shadow: none;
}

.gear.sel,
.toprow.me {
  background: #1d3324;
  box-shadow: inset 0 0 0 1px rgba(139, 217, 77, .35);
}

/* The reference kit: one flat fill, a thin ink outline, a hard small base. */
.btn,
.mini-btn,
.back,
.tile,
.chip,
.gear,
.card,
.hudbtn,
.pillbtn,
.lvlbadge {
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: 0 3px 0 var(--ink);
  text-shadow: none;
}

.btn {
  background: var(--blue);
  color: #06202d;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.btn.primary {
  background: var(--green);
  color: #112707;
}

.btn:active,
.mini-btn:active,
.back:active,
.tile:active,
.chip:active,
.gear:active,
.card:active,
.hudbtn:active,
.pillbtn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.mini-btn,
.back,
.tile i,
.gicon,
.card .ico,
.toprow .rank {
  background: var(--orange);
  color: #241704;
  box-shadow: none;
}

.mini-btn.off {
  background: #2b3541;
  color: #8794a4;
}

.tile {
  background: #131a22;
  border-color: var(--line);
  box-shadow: 0 3px 0 #05080b;
}

.tile i {
  border: 2px solid var(--ink);
  border-radius: 4px;
}

.chip {
  background: #121920;
  border-color: var(--line);
  box-shadow: none;
}

.chip.on { border-color: var(--ink); }

.switch {
  border: 2px solid var(--ink);
  background: #26303b;
  box-shadow: none;
}

.switch::after { box-shadow: none; }

.switch.on { background: #356b2c; }
.switch.on::after { background: var(--green); }

.pillbtn {
  background: var(--blue);
  color: #06202d;
}

.joinrow input {
  border: 2px solid var(--line);
  background: #0a1016;
  box-shadow: none;
}

.gear,
.card,
.toprow,
.plrow,
.stats > div {
  background: #131a22;
  border-color: var(--line);
  box-shadow: none;
}

.setgroup {
  background: #111821;
  border-color: var(--line);
  box-shadow: none;
}

.setrow { border-bottom-color: var(--line); }

.callout {
  background: #112019;
  border-color: var(--line);
}

.callout b { color: var(--mint); }
.callout p { color: #a8c2b8; }

.duelline {
  background: #112019;
  border-color: var(--line);
  color: #bff3e2;
}

.toast {
  border-color: var(--line);
  background: #161e27;
}

.scorebig {
  text-shadow: 0 4px 0 #05080c;
}

.splash-title {
  text-shadow: 0 4px 0 var(--ink);
}

.splash {
  background: #05080c;
}

.splash::before {
  background: linear-gradient(180deg, transparent 35%, rgba(5, 8, 12, .92) 100%);
}

.splash-scan { display: none; }

/* Quieter HUD */
#hud {
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 68%);
}

.lvlbadge {
  min-width: 38px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(8, 12, 17, .7);
  color: var(--text);
  box-shadow: none;
}

.lvlbadge b {
  font-size: 16px;
  text-shadow: none;
}

.lvlbadge small {
  color: #aeb9c7;
  opacity: 1;
}

.timer {
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: none;
  opacity: .92;
}

.xp,
.hp {
  height: 8px;
  border: none;
  border-radius: 3px;
  background: rgba(7, 11, 16, .62);
  box-shadow: none;
}

#xpfill,
#hpfill {
  box-shadow: none;
}

#xpfill { background: var(--accent); }
#hpfill { background: var(--red); }

.hpbar { gap: 6px; margin-top: 5px; }
.hpicon { font-size: 10px; text-shadow: none; }

#hpnum {
  flex-basis: 30px;
  font-size: 10px;
  text-shadow: none;
  opacity: .8;
}

.hudbtn {
  width: 38px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(8, 12, 17, .7);
  color: var(--text);
  box-shadow: none;
}

.kills {
  color: #b9c4d2;
  text-shadow: none;
}

.kills b {
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
}

.partnerbar {
  color: #c3cedb;
  text-shadow: none;
}

/* Second joystick: aim and fire with the right thumb. */
.aimstick {
  position: absolute;
  right: calc(env(safe-area-inset-right) + 22px);
  bottom: calc(env(safe-area-inset-bottom) + 34px);
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(8, 12, 17, .34);
  display: none;
  place-items: center;
  touch-action: none;
  z-index: 6;
  transition: border-color .12s, background .12s;
}

body.playing.manual .aimstick { display: grid; }

.aimstick.active {
  border-color: rgba(255, 207, 92, .85);
  background: rgba(255, 207, 92, .08);
}

.aim-knob {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  pointer-events: none;
}

.aimstick.active .aim-knob { background: var(--accent); }

.aim-label {
  position: absolute;
  bottom: 9px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
}

/* Launch sting. */
.studio {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: #050505;
  opacity: 0;
  transition: opacity .42s ease;
  pointer-events: auto;
}

.studio.show { opacity: 1; }
.studio[hidden] { display: none; }

.studio-inner {
  text-align: center;
  animation: studioIn .85s ease-out both;
}

.studio-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: #8c8c8c;
}

.studio-name {
  margin-top: 12px;
  font-size: clamp(34px, 11vw, 62px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: .08em;
  color: #f2c23c;
}

.studio-rule {
  width: 64px;
  height: 2px;
  margin: 20px auto 10px;
  background: #f2c23c;
  opacity: .65;
}

.studio-sub {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .65em;
  text-transform: uppercase;
  color: #b99a3a;
}

@keyframes studioIn {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: none; }
}