* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: #0a0604;
  color: #f5e6d0;
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
}
#wrap {
  position: relative;
  width: 100%; height: 100%;
  display: block;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1a1008 0%, #050302 70%);
}
/* Fill viewport — backing store resized in JS (DPR-aware). No postage-stamp canvas. */
canvas#c {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  background: #000;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
#ui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
#hud { z-index: 3; }
#controlsHint { z-index: 3; }
#ui.interactive { pointer-events: auto; }

.panel {
  background: rgba(18, 10, 6, 0.9);
  border: 2px solid #c8843a;
  border-radius: 18px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 0 40px #c8642044, inset 0 0 60px #ffaa2211;
  max-width: 560px;
  position: relative;
  overflow: hidden;
}
.title-panel {
  padding: 0;
  max-width: 620px;
  width: min(620px, 92vw);
  border: 3px solid #e8b050;
}
.title-bg {
  position: absolute;
  inset: 0;
  background: url('../assets/generated/gold-space-bg-title-sm.jpg') center/cover no-repeat;
  opacity: 0.55;
  filter: saturate(1.1) brightness(0.85);
}
.title-content {
  position: relative;
  padding: 36px 40px 32px;
  background: linear-gradient(180deg, rgba(10,6,4,0.55) 0%, rgba(12,8,4,0.82) 100%);
}
h1 {
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  letter-spacing: 0.18em;
  font-weight: 900;
  background: linear-gradient(180deg, #ffe7a0 0%, #e8a838 45%, #b86820 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px #ffaa4066);
  margin-bottom: 6px;
}
.tagline {
  color: #d4a878;
  margin-bottom: 16px;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.hints {
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #dcc4a0;
  margin: 12px 0 22px;
  background: rgba(8, 5, 3, 0.72);
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #6a4528;
}
.hints kbd, kbd {
  display: inline-block;
  background: #2a1810;
  border: 1px solid #c8843a;
  border-radius: 4px;
  padding: 1px 7px;
  font-family: inherit;
  color: #ffd090;
  margin: 0 2px;
  font-size: 0.8em;
}
/* Riveted copper plate buttons — match hull/UI art, not pill clip-art */
button {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffe8c0;
  padding: 11px 22px;
  margin: 6px;
  border-radius: 5px;
  border: 1px solid #b07838;
  background-color: #1c120a;
  background-image:
    radial-gradient(circle at 7px 7px, #d0a060 1.15px, transparent 1.6px),
    radial-gradient(circle at calc(100% - 7px) 7px, #d0a060 1.15px, transparent 1.6px),
    radial-gradient(circle at 7px calc(100% - 7px), #d0a060 1.15px, transparent 1.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #d0a060 1.15px, transparent 1.6px),
    linear-gradient(180deg, rgba(255, 200, 120, 0.16), transparent 42%),
    linear-gradient(165deg, #3a2616 0%, #1a1008 52%, #0e0a06 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 140, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    inset 1px 0 0 rgba(255, 180, 100, 0.08),
    0 0 0 1px #5a3414,
    0 4px 0 #080604,
    0 0 16px rgba(255, 160, 60, 0.12);
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(255, 170, 60, 0.25);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.12s, border-color 0.12s, color 0.12s;
}
button.big {
  font-size: 1.28rem;
  padding: 15px 40px;
  letter-spacing: 0.2em;
  color: #1a0c04;
  border-color: #e8b060;
  background-image:
    radial-gradient(circle at 8px 8px, #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) 8px, #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at 8px calc(100% - 8px), #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #6a3a10 1.3px, transparent 1.8px),
    linear-gradient(180deg, #f0c070 0%, #d08030 45%, #a05818 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -3px 0 rgba(80, 40, 10, 0.45),
    0 0 0 1px #7a4010,
    0 5px 0 #3a1c08,
    0 0 28px rgba(255, 170, 60, 0.35);
  text-shadow: 0 1px 0 rgba(255, 230, 180, 0.35);
}
button.big.test-drive-btn {
  color: #e8fff8;
  border-color: #70c8b0;
  background-image:
    radial-gradient(circle at 8px 8px, #2a6055 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) 8px, #2a6055 1.3px, transparent 1.8px),
    radial-gradient(circle at 8px calc(100% - 8px), #2a6055 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #2a6055 1.3px, transparent 1.8px),
    linear-gradient(180deg, #3a8a78 0%, #1e5a4c 50%, #123830 100%);
  box-shadow:
    inset 0 1px 0 rgba(180, 255, 230, 0.35),
    inset 0 -3px 0 rgba(0, 30, 24, 0.5),
    0 0 0 1px #1a4038,
    0 5px 0 #0a1814,
    0 0 24px rgba(80, 220, 190, 0.28);
  text-shadow: 0 1px 0 #041810;
}
button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: #e8b070;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px #7a4820,
    0 6px 0 #080604,
    0 0 26px rgba(255, 180, 70, 0.28);
}
button.big:hover {
  border-color: #ffe090;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.65),
    inset 0 -3px 0 rgba(80, 40, 10, 0.4),
    0 0 0 1px #9a5820,
    0 7px 0 #3a1c08,
    0 0 36px rgba(255, 190, 80, 0.5);
}
button.big.test-drive-btn:hover {
  border-color: #a0efe0;
  box-shadow:
    inset 0 1px 0 rgba(200, 255, 240, 0.4),
    inset 0 -3px 0 rgba(0, 30, 24, 0.45),
    0 0 0 1px #2a6055,
    0 7px 0 #0a1814,
    0 0 32px rgba(100, 240, 210, 0.4);
}
button:active {
  transform: translateY(2px);
  filter: brightness(0.95);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 200, 120, 0.15),
    0 0 0 1px #5a3414,
    0 1px 0 #080604,
    0 0 10px rgba(255, 160, 60, 0.15);
}
button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.35);
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 120, 0.12),
    0 0 0 1px #3a2414,
    0 2px 0 #080604;
}

#hud {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: auto;
  padding: 0 8px 8px;
  display: none;
  justify-content: stretch;
  align-items: flex-end;
  pointer-events: none;
  font-size: 0.86rem;
  text-shadow: none;
  gap: 0;
  flex-wrap: nowrap;
  z-index: 3;
  overflow: visible;
}
#hud.show { display: flex; }
.hud-legacy-hidden { display: none !important; }
.cockpit-plate {
  position: relative;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  padding: 6px 12px 6px;
  background:
    linear-gradient(180deg, rgba(42, 26, 14, 0.94) 0%, rgba(14, 8, 4, 0.96) 55%, rgba(8, 5, 3, 0.98) 100%);
  border: 2px solid #a86830;
  border-radius: 14px 14px 8px 8px;
  box-shadow:
    0 -8px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 210, 120, 0.22),
    inset 0 -10px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px #5a3018;
  overflow: visible;
}
.cockpit-top {
  display: grid;
  grid-template-columns: auto minmax(160px, 1.2fr) auto;
  gap: 4px 12px;
  align-items: center;
}
.cockpit-top.cockpit-compact {
  /* kit gets real width; gauges/stats stay chips on the right */
  grid-template-columns: minmax(280px, 1.6fr) minmax(40px, 1fr) auto auto;
  gap: 4px 10px;
  align-items: start;
}
.cockpit-compact .kit-group { grid-column: 1; }
.cockpit-compact .cockpit-gauges { grid-column: 3; }
.cockpit-compact .economy { grid-column: 4; }
.cockpit-kit { display: none; }
.kit-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.kit-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kit-col .cockpit-tag { margin-bottom: 0; font-size: 0.55rem; letter-spacing: 0.12em; }
/* Visual dividers between super | weapons | equipment | single-use */
.kit-col.kit-weapons,
.kit-col.kit-equipment,
.kit-col.kit-hex {
  border-left: 1px solid #c8884066;
  padding-left: 8px;
}
.cockpit-edge {
  position: absolute;
  left: 10%; right: 10%; top: -2px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #e8b05088, transparent);
  pointer-events: none;
}
.cockpit-rivet {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd090, #a86830 55%, #3a1c08);
  box-shadow: inset 0 -1px 1px #0008, 0 0 0 1px #5a3018;
}
.cockpit-rivet.tl { top: 10px; left: 12px; }
.cockpit-rivet.tr { top: 10px; right: 12px; }
.cockpit-rivet.bl { bottom: 10px; left: 12px; }
.cockpit-rivet.br { bottom: 10px; right: 12px; }
.cockpit-left, .cockpit-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cockpit-tag {
  color: #b88858;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}
.cockpit-ko-val {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffe8c0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px #000a;
}
.cockpit-online-val {
  font-size: 0.72rem;
  color: #7eefe4;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.cockpit-gauges {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  width: 118px;
  max-width: 118px;
  padding: 4px 6px 5px;
  box-sizing: border-box;
  background: rgba(10, 6, 3, 0.72);
  border: 1px solid #5a3820;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 200, 120, 0.08);
}
.gauge {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 3px;
  align-items: center;
}
.gauge-lab {
  color: #c4a080;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.gauge[data-g="boost"] .gauge-lab { color: #ffb060; }
.gauge[data-g="super"] .gauge-lab { color: #ffe080; }
.gauge[data-g="shield"] .gauge-lab { color: #80c0ff; }
.gauge-bar {
  height: 4px;
  margin-top: 0;
  border-radius: 2px;
  background: #0c0805;
  border: 1px solid #5a3820;
  box-shadow: inset 0 1px 2px #000a;
}
/* Beat legacy .bar { height:10px } so cockpit meters stay skinny */
.cockpit-gauges .bar.gauge-bar {
  height: 4px;
  margin-top: 0;
  border-radius: 2px;
}
.cockpit-right .eco-row {
  flex-wrap: wrap;
  gap: 4px 8px;
}
.cockpit-plate .hud-loadout {
  max-width: 100%;
  margin-top: 2px;
}
.cockpit-plate .skill-icons {
  margin-top: 2px;
}
/* legacy class hooks still used by a few scripts */
.hud-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 0;
}
.hud-block.grow { flex: unset; min-width: 0; }
.hud-block .label {
  color: #b88858;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hud-block .val { font-size: 1.15rem; font-weight: 800; color: #ffe8c0; }
@media (max-width: 720px) {
  .cockpit-plate { border-radius: 12px; }
  .gauge { grid-template-columns: 34px 1fr; }
}
.bar {
  height: 10px;
  background: #1a1008;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid #5a3820;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  transition: width 0.08s linear;
}
#xpFill { background: linear-gradient(90deg, #e8a020, #ffe060); box-shadow: 0 0 8px #fa0; }
#boostFill { background: linear-gradient(90deg, #ff6020, #ffb040); box-shadow: 0 0 8px #f60; }
#shieldFill { background: linear-gradient(90deg, #4080ff, #80c0ff); }
#hullFill { background: linear-gradient(90deg, #c03020, #f08040); }

#upgradePanel {
  display: none;
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 104px;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(980px, 96vw);
  max-height: min(72vh, 640px);
  overflow: auto;
  background: rgba(8, 5, 3, 0.86);
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid #c8843a;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), 0 0 10px #c8642028;
  z-index: 40;
}
#upgradePanel.show { display: flex; }
#upgradePanel h2 {
  color: #ffe080;
  font-size: 0.95rem;
  text-shadow: 0 0 10px #fa0;
  letter-spacing: 0.06em;
  margin: 0;
  text-align: center;
}
.upgrade-hint { color: #c4a080; font-size: 0.72rem; margin: 0 0 2px; line-height: 1.35; text-align: center; }
.upgrade-queue-tag {
  color: #7eefe4;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}
.upgrades {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start; /* don't stretch short cards to match recipe-tall ones */
  width: 100%;
}
.upgrade-card {
  pointer-events: auto;
  cursor: pointer;
  width: min(300px, 30vw);
  min-width: 240px;
  flex: 1 1 0;
  max-width: 320px;
  height: auto;
  align-self: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(160deg, #2a1810, #120c08);
  border: 2px solid #c8843a;
  border-radius: 14px;
  padding: 14px 14px 16px;
  text-align: center;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  position: relative;
}
.upgrade-card .key {
  position: absolute;
  top: 8px; left: 10px;
  font-size: 0.75rem;
  color: #e8b050;
  border: 1px solid #8a5a30;
  border-radius: 4px;
  padding: 0 6px;
  background: #1a1008;
}
.upgrade-card:hover, .upgrade-card:focus, .upgrade-card.is-focused {
  transform: translateY(-4px);
  border-color: #ffe080;
  border-width: 3px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.4), 0 0 8px #ffaa4033;
  outline: none;
}
.upgrade-card .icon { font-size: 2.1rem; margin: 8px 0 6px; }
.upgrade-card .name { font-weight: 800; color: #fff4e0; margin-bottom: 4px; }
.upgrade-card .desc { font-size: 0.76rem; color: #c4a080; line-height: 1.35; }

#msg { display: none; }
#msg.show {
  display: block;
  position: relative;
  z-index: 120; /* above #upgradePanel (40) — finish owns the stack */
}
#msg h2 { font-size: 2.4rem; margin-bottom: 8px; }
#msg.win h2 { color: #ffe080; text-shadow: 0 0 24px #fa0; }
#msg.lose h2 { color: #ff8060; text-shadow: 0 0 24px #f40; }
.place-badge {
  display: inline-block;
  font-size: 2.1rem;
  font-weight: 900;
  margin: 8px 0;
  color: #ffd070;
}
.sub { color: #c4a080; margin-bottom: 16px; }

#controlsHint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: #a08060;
  background: rgba(8,5,3,0.65);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #4a3020;
  pointer-events: none;
  white-space: nowrap;
  max-width: 96vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pauseHint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  color: #ffe8c0;
  background: rgba(12, 8, 4, 0.92);
  border: 2px solid #c8843a;
  padding: 18px 28px;
  border-radius: 14px;
  display: none;
  pointer-events: auto;
  text-align: center;
  box-shadow: 0 0 30px #c8642044;
  z-index: 8;
}
#pauseHint.show { display: block; }
.pause-title { font-weight: 800; letter-spacing: 0.14em; margin-bottom: 10px; color: #ffe080; }
.pause-actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.pause-actions button { margin: 0; padding: 8px 14px; font-size: 0.78rem; }
.pause-keys { font-size: 0.78rem; color: #c4a080; font-weight: 600; letter-spacing: 0.04em; }

.hud-block .val.track-name {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #ffd090;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title-panel { max-width: 720px; width: min(720px, 94vw); }
.track-select { margin: 4px 0 14px; }
.track-label {
  color: #e8b050;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  font-weight: 700;
}
.track-keys kbd { margin-left: 4px; }
.track-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.track-card {
  pointer-events: auto;
  cursor: pointer;
  flex: 1;
  min-width: 150px;
  max-width: 210px;
  text-align: left;
  background: linear-gradient(160deg, rgba(42,24,16,0.95), rgba(12,8,4,0.92));
  border: 2px solid #8a5a30;
  border-radius: 12px;
  padding: 12px 12px 14px;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 0 14px #c8642022;
  position: relative;
}
.track-card .key {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 0.72rem;
  color: #e8b050;
  border: 1px solid #8a5a30;
  border-radius: 4px;
  padding: 0 6px;
  background: #1a1008;
}
.track-card .key { display: none; }
.track-card .tname {
  font-weight: 800;
  color: #fff4e0;
  font-size: 0.95rem;
  margin-bottom: 4px;
  padding-right: 0;
}
.track-card .tdesc {
  font-size: 0.72rem;
  color: #c4a080;
  line-height: 1.35;
}
.track-card .tmeta {
  margin-top: 8px;
  font-size: 0.68rem;
  color: #e8a838;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.track-card:hover, .track-card:focus {
  transform: translateY(-4px);
  border-color: #e8b050;
  box-shadow: 0 0 22px #ffaa4066;
  outline: none;
}
.track-cards .track-card:not(.selected) {
  opacity: 0.72;
  filter: saturate(0.85) brightness(0.92);
}
.track-card.selected {
  opacity: 1;
  filter: none;
  z-index: 2;
  transform: translateY(-4px) scale(1.04);
  border: 3px solid #ffe080;
  box-shadow:
    0 0 0 2px #c87020,
    0 0 36px #ffc040cc,
    0 0 70px #ff880066,
    inset 0 0 28px #ffaa4030;
  background: linear-gradient(160deg, rgba(90,52,18,0.99), rgba(36,20,8,0.98));
}
.track-card.selected .tname { color: #ffe080; text-shadow: 0 0 12px #ffaa4088; }
.track-card.selected .tmeta { color: #ffe8a0; }
#muteBadge {
  position: absolute;
  top: 12px;
  right: 160px;
  left: auto;
  background: #401808cc;
  border: 1px solid #c05030;
  color: #ffb090;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  pointer-events: auto;
  cursor: pointer;
  z-index: 6;
}
#muteBadge:hover { border-color: #ffe080; color: #ffe080; }
.copper-icon-btn {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0;
  line-height: 0;
  color: #ffe080;
  cursor: pointer;
  border: 1px solid #b07838;
  background-color: #1c120a;
  background-image:
    radial-gradient(circle at 5px 5px, #d0a060 0.9px, transparent 1.35px),
    radial-gradient(circle at calc(100% - 5px) 5px, #d0a060 0.9px, transparent 1.35px),
    radial-gradient(circle at 5px calc(100% - 5px), #d0a060 0.9px, transparent 1.35px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #d0a060 0.9px, transparent 1.35px),
    linear-gradient(180deg, rgba(255, 200, 120, 0.18), transparent 42%),
    linear-gradient(165deg, #3a2616 0%, #1a1008 52%, #0e0a06 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 140, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    0 0 0 1px #5a3414,
    0 3px 0 #080604,
    0 0 12px rgba(255, 160, 60, 0.14);
}
.copper-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.copper-icon-btn:hover, .copper-icon-btn:focus {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: #e8b070;
  color: #ffe8a0;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px #7a4820,
    0 4px 0 #080604,
    0 0 18px rgba(255, 180, 70, 0.35);
}
.copper-icon-btn:active {
  transform: translateY(1px);
  filter: brightness(0.95);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.55),
    0 0 0 1px #5a3414,
    0 1px 0 #080604;
}
.settings-gear {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 6;
  pointer-events: auto;
}
#settingsPanel {
  display: none;
  max-width: 420px;
  width: min(420px, 94vw);
  z-index: 100;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
}
#settingsPanel.show { display: block; }
.settings-body { margin: 12px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.settings-sec {
  background: rgba(8,5,3,0.55);
  border: 1px solid #8a5a30;
  border-radius: 10px;
  padding: 12px 14px;
}
.settings-h {
  color: #ffe080;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.settings-sec .vol-row { margin: 8px 0; }
.settings-sec button,
.settings-mute, #btnSettingsFs {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  box-sizing: border-box;
}
#muteBadge.unmuted {
  background: #183018cc;
  border-color: #50a050;
  color: #b0ffb0;
}
#muteBadge.hidden { display: none; }


/* ---- Credits + Garage meta ---- */
.credits-badge {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  padding: 6px 14px;
  background: rgba(8,5,3,0.78);
  border: 1px solid #c8843a;
  border-radius: 999px;
  color: #d4a878;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.credits-badge .scrap-inline { display: inline-flex; align-items: center; gap: 3px; }
.eco-ico, .title-ico {
  width: 18px; height: 18px;
  vertical-align: middle;
  image-rendering: auto;
  border-radius: 4px;
  box-shadow: 0 0 6px #c8642044;
}
.title-ico { width: 28px; height: 28px; margin-right: 6px; }
.credits-badge strong {
  color: #ffe080;
  font-size: 1.05rem;
  margin: 0 2px 0 6px;
}
.title-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  margin-top: 12px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.garage-hint { display: none; }
.controls-link {
  margin: 10px auto 0;
  display: inline-block;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: 1px solid #8a5a30;
  color: #e8b050;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  border-radius: 8px;
}
.controls-link:hover, .controls-link:focus {
  border-color: #ffe080;
  color: #ffe080;
  box-shadow: 0 0 16px #ffaa4066;
  outline: none;
}
#controlsPanel {
  display: none;
  max-width: 520px;
  width: min(520px, 94vw);
  z-index: 95;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 86vh;
  overflow: auto;
  text-align: left;
}
#controlsPanel.show { display: block; }
.controls-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}
.controls-sec {
  background: rgba(8,5,3,0.55);
  border: 1px solid #8a5a30;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: #c4a080;
  line-height: 1.55;
}
.controls-h {
  color: #ffe080;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  margin-bottom: 6px;
  text-transform: uppercase;
}
#controlsHint.hidden { display: none !important; }
@media (max-width: 560px) {
  .controls-grid { grid-template-columns: 1fr; }
}
#garagePanel {
  display: none;
  max-width: 620px;
  width: min(620px, 94vw);
  z-index: 9;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 86vh;
  overflow: hidden;
}
#garagePanel.show, #garagePanel.show-inline {
  display: block;
}
#garagePanel.show-inline {
  top: auto;
  bottom: 18px;
  transform: translate(-50%, 0);
  max-height: 40vh;
  padding: 16px 18px;
}
#garagePanel h2 {
  color: #ffe080;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.garage-sub {
  color: #c4a080;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.garage-sub strong { color: #ffe080; }
.garage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  text-align: left;
  min-height: 0;
  overflow: auto;
  max-height: min(52vh, 480px);
  padding-right: 4px;
}
.garage-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(160deg, #2a1810, #120c08);
  border: 1px solid #8a5a30;
  border-radius: 10px;
  padding: 8px 10px;
}
.garage-card.can-buy { border-color: #c8843a; }
.garage-card.maxed { opacity: 0.85; }
.garage-card.cant-buy { opacity: 0.9; }
.garage-card .icon { width: 56px; height: 56px; text-align: center; flex-shrink: 0; }
.garage-card .icon img { width: 56px; height: 56px; border-radius: 8px; display: block; box-shadow: 0 0 10px #c8642044; }
.garage-card .ginfo { flex: 1; min-width: 0; }
.garage-card .name { font-weight: 800; color: #fff4e0; font-size: 0.9rem; }
.garage-card .lvl { color: #e8a838; font-weight: 600; font-size: 0.78rem; }
.garage-card .desc { font-size: 0.72rem; color: #c4a080; }
/* Buy chip — same badge family as combo ONLINE, copper action theme */
.garage-card .gbuy {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 78px;
  max-width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #8a5a30;
  background: #1a120c88;
  color: #a08060;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  transition: border-color 0.12s, box-shadow 0.12s, color 0.12s, background 0.12s;
}
.garage-card .gbuy-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  justify-content: center;
  align-items: center;
}
.garage-card .gbuy-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0;
  font-weight: 700;
  color: #ffe080;
  font-variant-numeric: tabular-nums;
}
.garage-card .gbuy-chip b { font-size: 0.78rem; }
.garage-card .gbuy-ico {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: block;
}
.garage-card .gbuy-label {
  letter-spacing: 0.12em;
  font-size: 0.66rem;
}
.garage-card .gbuy.is-ready {
  border-color: #e8b050;
  color: #ffe080;
  background: #3a241088;
  box-shadow: 0 0 14px #ffaa4033;
}
.garage-card .gbuy.is-ready:hover {
  border-color: #ffe080;
  box-shadow: 0 0 18px #ffaa4066;
  background: #4a301888;
}
.garage-card .gbuy.is-locked {
  border-color: #8a5a30;
  color: #a08060;
  background: #140e0a88;
  cursor: default;
}
.garage-card .gbuy.is-locked .gbuy-chip { color: #c4a080; opacity: 0.75; }
.garage-card .gbuy.is-max {
  border-color: #6ec4b8;
  color: #7eefe4;
  background: #18301866;
  box-shadow: 0 0 10px #7eefe422;
  cursor: default;
  min-width: 64px;
  padding: 10px 14px;
}
.garage-card .gbuy:disabled {
  opacity: 1;
  transform: none;
}
.end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

/* ---- Garage overlay / backdrop (playtest7) ---- */
.garage-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 1, 0.55);
  z-index: 7;
  pointer-events: auto;
  cursor: pointer;
}
.garage-backdrop.show { display: block; }
#garagePanel {
  z-index: 9;
  pointer-events: auto;
}
#garagePanel .garage-x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; margin: 0; padding: 0;
  font-size: 1.25rem; line-height: 1; letter-spacing: 0;
  border-radius: 4px;
}
#garagePanel .garage-x:hover {
  transform: none;
  background: #3a2214;
  box-shadow: 0 0 12px #ffaa4066;
}
.warm-status {
  margin-top: 8px;
  font-size: 0.78rem;
  color: #e8a838;
  letter-spacing: 0.08em;
  min-height: 1.2em;
}
.warm-status.ready { color: #80c080; }
.warm-status.hidden { display: none; }
#ui.garage-modal #titlePanel {
  pointer-events: none;
}
/* End inline garage must NOT disable TITLE/RESTART */
#ui.garage-inline #msg {
  pointer-events: auto;
}
#garagePanel.show-inline {
  /* keep above canvas chrome but below is fine; ensure clicks work */
  pointer-events: auto;
}
#btnStart:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
  filter: grayscale(0.25);
}

/* playtest10 — skill icons (BG picker removed playtest12) */
.hud-block.hull { position: relative; min-width: 110px; }
.skill-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
  min-height: 18px;
}
.sk-icon {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: rgba(20, 12, 6, 0.75);
  border: 1px solid #8a5a30;
  border-radius: 6px;
  padding: 1px 5px;
  font-size: 0.78rem;
  line-height: 1.2;
  box-shadow: 0 0 8px #c8642022;
}
.sk-icon .sk-n {
  font-size: 0.65rem;
  color: #e8b050;
  font-weight: 700;
  margin-left: 2px;
}
.sk-icon[data-sk="dyn"] { border-color: #7eefe4; box-shadow: 0 0 10px #7eefe444; }
.sk-icon[data-sk="charge"] { border-color: #e8a838; }
.bg-select { margin: 2px 0 10px; }
.bg-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.bg-btn {
  pointer-events: auto;
  cursor: pointer;
  width: 42px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid #8a5a30;
  background: linear-gradient(160deg, rgba(42,24,16,0.95), rgba(12,8,4,0.92));
  color: #fff4e0;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  box-shadow: 0 0 12px #c8642022;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.bg-btn:hover, .bg-btn:focus {
  transform: translateY(-2px);
  border-color: #e8b050;
  outline: none;
}
.bg-btn.selected {
  border: 3px solid #ffe080;
  box-shadow: 0 0 0 2px #c87020, 0 0 28px #ffc040bb, inset 0 0 16px #ffaa4033;
  color: #ffe080;
  background: linear-gradient(160deg, #5a3418, #241408);
  transform: scale(1.06);
  font-weight: 900;
}

.bg-btn.auto {
  width: 48px;
  letter-spacing: 0;
  font-size: 1.1rem;
  color: #a8e8ff;
  border-color: #5080a0;
}
.bg-btn.auto.selected {
  border: 3px solid #9ef6ff;
  box-shadow: 0 0 0 2px #3080a0, 0 0 28px #60d0ffbb, inset 0 0 16px #40a0ff33;
  color: #dffcff;
  background: linear-gradient(160deg, #184060, #0a2030);
  transform: scale(1.06);
}
.sk-icon[data-sk="rail"] { border-color: #9ef6ff; }
.sk-icon[data-sk="slug"] { border-color: #ff8840; }
.sk-icon[data-sk="tractor"] { border-color: #c070ff; }
.sk-icon[data-sk="arc"] { border-color: #80e8ff; }
.sk-icon[data-sk="arcd"] { border-color: #6dce6a; }
.sk-icon[data-sk="tslug"] { border-color: #e8a838; }


/* ---- playtest12: economy HUD, combos, icons ---- */
.hud-block.economy { min-width: 150px; }
.eco-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.eco { display: inline-flex; align-items: center; gap: 3px; color: #ffe8c0; font-size: 0.78rem; font-weight: 700; }
.eco strong { color: #ffe080; }
.garage-tabs {
  display: flex; gap: 6px; justify-content: center; margin-bottom: 10px;
}
.gtab {
  flex: 1;
  margin: 0;
  padding: 8px 10px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  border-radius: 4px;
}
.gtab.active {
  color: #1a0c04;
  border-color: #e8b060;
  background-image:
    radial-gradient(circle at 6px 6px, #6a3a10 1px, transparent 1.4px),
    radial-gradient(circle at calc(100% - 6px) 6px, #6a3a10 1px, transparent 1.4px),
    radial-gradient(circle at 6px calc(100% - 6px), #6a3a10 1px, transparent 1.4px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #6a3a10 1px, transparent 1.4px),
    linear-gradient(180deg, #e8b050, #a06020);
  text-shadow: 0 1px 0 rgba(255,230,180,0.35);
}
.garage-combos.hidden, .hidden { display: none !important; }
.garage-combos { text-align: left; margin-bottom: 12px; }

#comboPanel {
  display: none;
  max-width: 640px;
  width: min(640px, 94vw);
  z-index: 96;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 86vh;
  overflow: auto;
}
#comboPanel.show { display: block; }
#comboPanel h2 {
  color: #ffe080;
  letter-spacing: 0.08em;
  display: flex; align-items: center; justify-content: center;
}
#scrapYardPanel {
  display: none;
  max-width: 640px;
  width: min(640px, 94vw);
  z-index: 96;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 86vh;
  overflow: auto;
}
#scrapYardPanel.show { display: block; }
#scrapYardPanel h2 {
  color: #ffe080;
  letter-spacing: 0.08em;
  display: flex; align-items: center; justify-content: center;
}
#scrapYardPanel .yard-bans {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center;
}
#scrapYardPanel .yard-ban-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #2a1810; border: 1px solid #8a5a30; border-radius: 6px;
  padding: 2px 6px; font-size: 0.78rem; color: #e8c090;
}
#scrapYardPanel .yard-ban-chip img { width: 22px; height: 22px; image-rendering: pixelated; }
#scrapYardPanel .yard-ban-chip button {
  margin: 0; padding: 0 4px; min-width: 0; font-size: 0.75rem;
  background: transparent; border: none; color: #e87050; cursor: pointer;
}
#scrapYardPanel .yard-picker {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
#scrapYardPanel .yard-pick {
  width: 40px; height: 40px; padding: 2px; margin: 0;
  border-radius: 6px; border: 1px solid #6a4528; background: #1a1008;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
#scrapYardPanel .yard-pick img { width: 32px; height: 32px; image-rendering: pixelated; }
#scrapYardPanel .yard-pick.banned { border-color: #c05030; box-shadow: 0 0 8px #ff553044; }
#scrapYardPanel .yard-pick.equipped { opacity: 0.35; cursor: not-allowed; }
#scrapYardPanel .yard-pick:hover:not(.equipped) { border-color: #e8b050; }
#scrapYardPanel .yard-set-label {
  font-size: 0.72rem; letter-spacing: 0.06em; color: #a08060; margin-top: 6px;
}

.combo-list, .garage-combos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  text-align: left;
  min-height: 0;
  overflow: auto;
  max-height: min(52vh, 480px);
  padding-right: 4px;
}
.combo-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: linear-gradient(160deg, #2a1810, #120c08);
  border: 1px solid #8a5a30;
  border-radius: 10px;
  padding: 12px;
  overflow: visible;
  flex: 0 0 auto; /* parent .combo-list is a column flex — overflow:hidden used to zero min-size and squash rows */
  min-height: min-content;
  height: auto;
}
.combo-card.owned {
  border-color: #7eefe4;
  box-shadow: 0 0 14px #7eefe422;
}
.combo-card.locked { opacity: 1; }
.combo-card.locked .cstate {
  opacity: 0.85;
  filter: none;
}
.combo-card .cico {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}
.combo-card .cico img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  display: block;
  box-shadow: 0 0 12px #c8642044;
}
.combo-card .cinfo { min-width: 0; overflow: visible; }
.combo-card .cname { font-weight: 800; color: #fff4e0; font-size: 0.92rem; line-height: 1.2; }
.combo-card .creq {
  font-size: 0.72rem; color: #e8a838; margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
}
.combo-card .creq > span.creq-plus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.combo-card .creq-part {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
  max-width: 92px;
}
.combo-card .creq-part > span {
  font-size: 0.68rem;
  line-height: 1.15;
  color: #e8a838;
  max-width: 92px;
}
.combo-card .creq img { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; display: block; box-shadow: 0 0 10px #c8642033; }
.combo-card .creq-plus { opacity: 0.45; padding: 0 4px; color: #c4a080; font-size: 1.1rem; align-self: center; }
.combo-card .ceff { font-size: 0.74rem; color: #c4a080; margin-top: 6px; line-height: 1.35; }
.combo-card .cstate {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid #8a5a30; color: #a08060;
  align-self: center;
  white-space: nowrap;
  background: #140e0a88;
}
.combo-card.owned .cstate {
  border-color: #7eefe4; color: #7eefe4; background: #18301888;
  box-shadow: 0 0 10px #7eefe422;
}
.upgrade-card .icon img {
  width: 58px; height: 58px; border-radius: 8px;
  margin: 4px auto; display: block;
  box-shadow: 0 0 6px #c8642028;
}
.sk-icon img {
  width: 14px; height: 14px; border-radius: 3px; vertical-align: middle;
}
.bg-select, .bg-picker { display: none !important; }

/* ---- playtest13: timing HUD + leaderboards + Shock Plate ---- */
.hud-block.timing { min-width: 72px; }
.hud-block.timing.wide { min-width: 150px; }
.hud-block .val.mono, .mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
.lap-times { display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; font-size: 0.85rem; }
.lap-times .sep { color: #8a5a30; opacity: 0.7; }
.splits {
  margin-top: 2px;
  font-size: 0.62rem;
  color: #c4a080;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-icon[data-sk="shock"], .sk-icon[data-sk="secho"] {
  border-color: #7eefe4;
  box-shadow: 0 0 10px #e8a06044;
}
#lbPanel {
  display: none;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  width: min(520px, 92vw);
  max-height: min(78vh, 640px);
  overflow: auto;
  padding: 18px 18px 14px;
  text-align: center;
}
#lbPanel.show { display: block; }
#lbPanel h2 {
  margin: 0 0 6px;
  color: #ffe080;
  letter-spacing: 0.08em;
}
.lb-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}
.lb-tab {
  flex: 1;
  margin: 0 2px;
  padding: 7px 8px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  border-radius: 4px;
}
.lb-tab.active {
  border-color: #ffe080;
  color: #ffe080;
  box-shadow: 0 0 14px #ffaa4044;
}
.lb-body { text-align: left; margin-bottom: 12px; }
.lb-sec { margin-bottom: 12px; }
.lb-h {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #e8a838;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.lb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid #5a3820;
  border-radius: 8px;
  margin-bottom: 4px;
  background: rgba(20, 12, 6, 0.55);
}
.lb-r { color: #ffe080; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-main { color: #fff4e0; font-weight: 700; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.86rem; }
.lb-track { color: #c4a080; font-size: 0.72rem; text-align: right; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-empty { color: #a08060; font-size: 0.82rem; padding: 10px; text-align: center; }

.lb-btn-wrap { position: relative; display: inline-flex; align-items: center; }
.lb-streak-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(160deg, #3a2010, #1a1008);
  border: 1px solid #ffe080;
  color: #ffe080;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 0 10px #ffaa4044;
  pointer-events: none;
}
.lb-streak-badge.hidden { display: none; }
.prog-hero { text-align: center; }
.prog-headline {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 4px 0 6px;
}
.prog-headline.prog-up { color: #7dffb0; text-shadow: 0 0 16px #40ff8844; }
.prog-headline.prog-down { color: #ff8a7a; text-shadow: 0 0 16px #ff604044; }
.prog-headline.prog-hold { color: #ffe080; }
.prog-sub { color: #c4a080; font-size: 0.82rem; margin-bottom: 4px; }
.prog-was { color: #a08060; font-weight: 500; font-size: 0.8rem; }
.prog-delta { font-weight: 800; margin-left: 4px; }
.prog-delta.prog-up { color: #7dffb0; }
.prog-delta.prog-down { color: #ff8a7a; }
.prog-row .lb-main { font-size: 0.82rem; }
.prog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}
.prog-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 5px 7px 4px;
  border-radius: 8px;
  border: 1px solid #5a3820;
  background: rgba(20, 12, 6, 0.55);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #fff4e0;
}
.prog-chip small {
  font-weight: 600;
  font-size: 0.62rem;
  color: #c4a080;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.prog-chip.win { border-color: #3a8058; color: #7dffb0; background: rgba(20, 40, 28, 0.65); }
.prog-chip.loss { border-color: #804038; color: #ff8a7a; background: rgba(40, 16, 12, 0.65); }
.form-line {
  margin: 2px 0 6px;
  color: #ffe080;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 0.88rem;
}
.form-line.hidden { display: none; }

.end-lb { margin: 8px 0 4px; }
.end-lb.hidden { display: none; }
.end-lb button {
  pointer-events: auto;
  cursor: pointer;
  background: linear-gradient(160deg, #2a1810, #120c08);
  border: 2px solid #8a5a30;
  color: #ffe080;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.bg-select, .bg-picker, .bg-btn { display: none !important; }

/* Difficulty select (playtest15) */
.diff-select { margin: 0 0 14px; }
.diff-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.diff-card {
  pointer-events: auto;
  cursor: pointer;
  flex: 1;
  min-width: 110px;
  max-width: 150px;
  text-align: left;
  background: linear-gradient(160deg, rgba(42,24,16,0.95), rgba(12,8,4,0.92));
  border: 2px solid #8a5a30;
  border-radius: 12px;
  padding: 10px 10px 12px;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 0 14px #c8642022;
  position: relative;
}
.diff-card .dname {
  font-weight: 800;
  color: #fff4e0;
  font-size: 0.9rem;
  margin-bottom: 3px;
  padding-right: 18px;
}
.diff-card .ddesc {
  font-size: 0.68rem;
  color: #c4a080;
  line-height: 1.3;
}
.diff-card .dkey {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.68rem;
  color: #e8b050;
  border: 1px solid #8a5a30;
  border-radius: 4px;
  padding: 0 5px;
  background: #1a1008;
}
.diff-card:hover, .diff-card:focus {
  transform: translateY(-3px);
  border-color: #e8b050;
  box-shadow: 0 0 20px #ffaa4066;
  outline: none;
}
.diff-cards .diff-card:not(.selected) {
  opacity: 0.72;
  filter: saturate(0.85) brightness(0.92);
}
.diff-card.selected {
  opacity: 1;
  filter: none;
  z-index: 2;
  transform: translateY(-3px) scale(1.05);
  border: 3px solid #ffe080;
  box-shadow:
    0 0 0 2px #c87020,
    0 0 34px #ffc040cc,
    0 0 64px #ff880066,
    inset 0 0 24px #ffaa4030;
  background: linear-gradient(160deg, rgba(90,52,18,0.99), rgba(36,20,8,0.98));
}
.diff-card.selected .dname { color: #ffe080; text-shadow: 0 0 10px #ffaa4088; }
.diff-card[data-diff="easy"].selected {
  border-color: #8ef08a;
  box-shadow: 0 0 0 2px #2a8040, 0 0 34px #40c860cc, 0 0 60px #40c86066, inset 0 0 22px #40c86033;
}
.diff-card[data-diff="hard"].selected {
  border-color: #ffb070;
  box-shadow: 0 0 0 2px #a05020, 0 0 34px #e08040cc, 0 0 60px #e0804066, inset 0 0 22px #e0804033;
}
.diff-card[data-diff="brutal"].selected {
  border-color: #ff7090;
  box-shadow: 0 0 0 2px #a02040, 0 0 38px #e04070cc, 0 0 70px #e0407066, inset 0 0 24px #e0407033;
}
#hudDiff {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #e8a838;
  text-transform: uppercase;
}

/* Fullscreen-friendly title / overlays */
.title-panel {
  max-height: min(96vh, 920px);
  overflow: auto;
}
#wrap:fullscreen, #wrap:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #050302;
}

.hints-slim {
  padding: 8px 14px;
  margin: 0 0 12px;
}
.hints-slim div {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #d0a878;
}


/* ---- playtest41: match mode + Super bar ---- */
.mode-select { margin: 0 0 12px; }
.mode-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mode-card {
  pointer-events: auto;
  cursor: pointer;
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  text-align: left;
  background: linear-gradient(160deg, rgba(48,28,12,0.95), rgba(14,8,4,0.92));
  border: 2px solid #a07030;
  border-radius: 12px;
  padding: 10px 12px 12px;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 0 14px #c8642022;
  position: relative;
}
.mode-card .dname {
  font-weight: 800;
  color: #fff4e0;
  font-size: 0.95rem;
  margin-bottom: 4px;
  padding-right: 18px;
  letter-spacing: 0.06em;
}
.mode-card .ddesc {
  font-size: 0.7rem;
  color: #c4a080;
  line-height: 1.35;
}
.mode-card .dkey {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.65rem;
  color: #e8b050;
  font-weight: 700;
}
.mode-card:hover, .mode-card:focus {
  transform: translateY(-2px);
  border-color: #e8a838;
}
.mode-cards .mode-card:not(.selected) {
  opacity: 0.72;
  filter: saturate(0.85) brightness(0.92);
}
.mode-card.selected {
  opacity: 1;
  filter: none;
  z-index: 2;
  transform: translateY(-3px) scale(1.04);
  border: 3px solid #ffe080;
  box-shadow:
    0 0 0 2px #c87020,
    0 0 34px #ffc040cc,
    0 0 64px #ff880066,
    inset 0 0 24px #ffaa4030;
  background: linear-gradient(160deg, rgba(90,52,18,0.99), rgba(36,20,8,0.98));
}
.mode-card.selected .dname { color: #ffe080; text-shadow: 0 0 10px #ffaa4088; }

/* Win rule select (Solo + Multiplayer) */
.rule-select { margin: 0 0 12px; }
.rule-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.rule-card {
  pointer-events: auto;
  cursor: pointer;
  flex: 1;
  min-width: 120px;
  max-width: 200px;
  text-align: left;
  background: linear-gradient(160deg, rgba(48,28,12,0.95), rgba(14,8,4,0.92));
  border: 2px solid #a07030;
  border-radius: 12px;
  padding: 10px 12px 12px;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 0 14px #c8642022;
  position: relative;
}
.rule-card .dname {
  font-weight: 800;
  color: #fff4e0;
  font-size: 0.88rem;
  margin-bottom: 4px;
  padding-right: 18px;
  letter-spacing: 0.06em;
}
.rule-card .ddesc {
  font-size: 0.68rem;
  color: #c4a080;
  line-height: 1.35;
}
.rule-card .dkey {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 0.65rem;
  color: #e8b050;
  font-weight: 700;
}
.rule-card:hover, .rule-card:focus {
  transform: translateY(-2px);
  border-color: #e8a838;
  outline: none;
}
.rule-cards .rule-card:not(.selected) {
  opacity: 0.72;
  filter: saturate(0.85) brightness(0.92);
}
.rule-card.selected {
  opacity: 1;
  filter: none;
  z-index: 2;
  transform: translateY(-3px) scale(1.04);
  border: 3px solid #ffe080;
  box-shadow:
    0 0 0 2px #c87020,
    0 0 34px #ffc040cc,
    0 0 64px #ff880066,
    inset 0 0 24px #ffaa4030;
  background: linear-gradient(160deg, rgba(90,52,18,0.99), rgba(36,20,8,0.98));
}
.rule-card.selected .dname { color: #ffe080; text-shadow: 0 0 10px #ffaa4088; }
.rule-card[data-rule="timed5"].selected,
.rule-card[data-rule="timed15"].selected {
  border-color: #80d0ff;
  box-shadow: 0 0 0 2px #2060a0, 0 0 34px #40a0e0cc, 0 0 60px #40a0e066, inset 0 0 22px #40a0e033;
}
.bar-up {
  display: flex;
  align-items: flex-end;
  height: 14px;
}
.bar-up > i {
  width: 100% !important;
  height: 0%;
  transition: height 0.08s linear;
}
#superFill {
  background: linear-gradient(90deg, #e09020, #ffe080);
  box-shadow: 0 0 10px #ffb040;
  height: 100%;
  width: 0%;
  transition: width 0.08s linear;
}
#hudSuper.super-ready .gauge-lab,
#hudSuper.super-ready .label { color: #ffe080; text-shadow: 0 0 8px #fa06; }
#hudSuper.super-flash {
  animation: superPulse 0.35s ease-in-out 2;
}
#hudSuper.super-ready .gauge-bar {
  border-color: #e8b050;
  box-shadow: inset 0 1px 3px #000a, 0 0 8px #ffb04044;
}
@keyframes superPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.55); }
}
.track-card .tmeta { color: #e8b050; }

/* playtest45 — weapon recipes / backpack loadout / merge cues */
.cockpit-plate .hud-loadout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  max-width: none;
}
.hud-loadout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  max-width: none;
}
.lo-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(20, 12, 8, 0.88);
  border: 2px solid #c88840;
  border-radius: 8px;
  padding: 3px;
  font-size: 0;
  color: #ffe8c0;
  box-shadow: inset 0 1px 0 #ffc08033;
}
.lo-slot img { width: 26px; height: 26px; border-radius: 4px; display: block; }
.cockpit-compact .lo-slot { padding: 2px; border-radius: 6px; }
.cockpit-compact .hud-loadout,
.cockpit-compact .skill-icons {
  gap: 5px;
  flex-wrap: wrap;
  max-width: min(52vw, 560px);
}
.lo-slot.lo-merge {
  border-color: #7eefe4;
  color: #9ff4ea;
  box-shadow: 0 0 12px #7eefe466, inset 0 1px 0 #7eefe433;
}
.lo-slot.lo-empty,
.sk-icon.sk-empty {
  opacity: 0.35;
  cursor: default;
  border-style: dashed;
  border-color: #8a5040;
  box-shadow: none;
  background: rgba(20, 12, 8, 0.45);
  pointer-events: none;
}
.lo-slot b { display: none; }
.cockpit-plate .skill-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  min-height: 44px;
}
.skill-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  min-height: 44px;
}
.sk-icon {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  min-height: 40px;
  background: rgba(20, 12, 6, 0.88);
  border: 2px solid #8a5a30;
  border-radius: 8px;
  padding: 3px;
  font-size: 0.62rem;
  line-height: 1.1;
  box-shadow: 0 0 8px #c8642022;
}
.sk-icon img {
  width: 30px !important;
  height: 30px !important;
  display: block;
  border-radius: 4px;
}
.sk-icon .sk-n {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.7rem;
  color: #1a0c04;
  background: #e8b050;
  border-radius: 8px;
  padding: 1px 5px;
  font-weight: 800;
  margin: 0;
  box-shadow: 0 1px 2px #0008;
}
.sk-icon .sk-lab {
  color: #c4a080;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.sk-icon.sk-merge {
  border-color: #7eefe4;
  box-shadow: 0 0 12px #7eefe466;
}
.sk-icon.sk-merge .sk-lab { color: #7eefe4; }
.sk-icon.sk-almost {
  border-style: dashed;
  border-color: #e8a838;
  opacity: 1;
  background: rgba(40, 24, 8, 0.75);
}
.sk-icon.sk-almost .sk-lab { color: #ffe080; }
.sk-icon.sk-wep { border-color: #9ef6ff; }
.sk-icon.sk-wep .sk-lab { color: #9ef6ff; }
.sk-icon.sk-buff { border-color: #c070ff; }
.sk-icon.sk-buff .sk-lab { color: #e0b0ff; }
.sk-icon.sk-hex { border-color: #ff8060; }
.sk-icon.sk-hex .sk-lab { color: #ffb090; }
.sk-icon.sk-curse { border-color: #ff4060; background: rgba(40, 8, 12, 0.85); }
.sk-icon.sk-curse .sk-lab { color: #ff8090; }
.sk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 4px;
  font-size: 0.62rem;
  color: #a88868;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.sk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sk-legend .leg {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid #8a5a30;
  background: #1a1008;
  box-sizing: border-box;
}
.sk-legend .leg-own { border-color: #8a5a30; }
.sk-legend .leg-need { border-color: #e8a838; border-style: dashed; }
.sk-legend .leg-merge { border-color: #7eefe4; }
.sk-legend .leg-buff { border-color: #c070ff; }
.upgrade-card .recipe-line {
  font-size: 0.62rem;
  color: #a0c8c0;
  margin-top: 4px;
  line-height: 1.3;
}
.upgrade-card .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-width: 100%;
}
.upgrade-card .recipe-icons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.upgrade-card .recipe-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 10px;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(10, 8, 6, 0.45);
  border: 1px solid transparent;
}
.upgrade-card .recipe-row.ready {
  border-color: #7eefe4;
  background: rgba(20, 40, 38, 0.55);
  box-shadow: 0 0 6px #7eefe422;
}
.upgrade-card .recipe-op {
  color: #8a7060;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 2px;
}
.upgrade-card .recipe-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid #6a4a30;
  background: rgba(18, 12, 8, 0.85);
  opacity: 0.92;
}
.upgrade-card .recipe-chip img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  display: block;
}
.upgrade-card .recipe-chip.have {
  opacity: 1;
  border-color: #e8a838;
  box-shadow: 0 0 4px #e8a83844;
}
.upgrade-card .recipe-chip.need {
  opacity: 0.45;
  border-style: dashed;
  border-color: #6a5040;
  filter: saturate(0.7);
}
.upgrade-card .recipe-chip.gain {
  opacity: 1;
  border-color: #7eefe4;
  box-shadow: 0 0 6px #7eefe466;
  animation: recipeGainPulse 1.1s ease-in-out infinite;
  position: relative;
}
.upgrade-card .recipe-chip.gain::after {
  content: '✓';
  position: absolute;
  right: -3px;
  bottom: -4px;
  font-size: 0.7rem;
  color: #7eefe4;
  text-shadow: 0 0 3px #000;
  line-height: 1;
  font-weight: 900;
}
.upgrade-card .recipe-chip.result {
  opacity: 0.85;
  border-color: #a07050;
}
.upgrade-card .recipe-row.ready .recipe-chip.result {
  opacity: 1;
  border-color: #7eefe4;
  box-shadow: 0 0 7px #7eefe455;
  transform: scale(1.08);
}
.upgrade-card .merge-ready-chip {
  display: inline-block;
  margin: 2px 0 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #7eefe4;
  background: rgba(20, 50, 46, 0.7);
  border: 1px solid #7eefe488;
  border-radius: 4px;
  padding: 3px 6px;
  white-space: nowrap;
}
@keyframes recipeGainPulse {
  0%, 100% { box-shadow: 0 0 4px #7eefe444; }
  50% { box-shadow: 0 0 8px #e8a83866; }
}
.upgrade-card .merge-hint {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #7eefe4;
  letter-spacing: 0.04em;
}
.upgrade-card.will-merge {
  border-color: #7eefe4;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 8px #7eefe433;
}
.combo-card.recipe-card.almost {
  border-color: #e8a838;
  box-shadow: 0 0 12px #e8a83844;
}
.combo-card.recipe-card.almost .cstate { color: #ffe080; }
.garage-card .recipe-line {
  font-size: 0.65rem;
  color: #90b8b0;
  margin-top: 2px;
}


/* Always-on build/version corner badge */
#buildBadge {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 90;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(232, 238, 248, 0.72);
  background: rgba(6, 8, 14, 0.55);
  border: 1px solid rgba(126, 239, 228, 0.28);
  border-radius: 8px;
  padding: 4px 8px;
  text-shadow: 0 1px 2px #000;
  user-select: none;
}
#buildBadge .bv {
  color: #7eefe4;
  font-weight: 700;
}
#buildBadge .bc {
  color: rgba(180, 190, 210, 0.65);
  margin-left: 6px;
}


/* Pause menu: title/quit + volume sliders */
.pause-actions button { margin: 3px; font-size: 0.75rem; padding: 8px 14px; }
.pause-actions button.quit {
  background: linear-gradient(160deg, #3a1414, #1a0808);
  border-color: #d05050;
  color: #ffd0c0;
}
.pause-actions button.quit:hover { border-color: #ff7060; }
.pause-volumes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
  width: 220px;
}
.vol-row {
  display: grid;
  grid-template-columns: 52px 1fr 30px;
  align-items: center;
  gap: 8px;
  color: #d8c0a0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.vol-row input[type="range"] {
  width: 100%;
  accent-color: #e8a838;
  cursor: pointer;
}
.vol-val { text-align: right; color: #7eefe4; font-variant-numeric: tabular-nums; }

#quitConfirm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 6, 0.6);
  pointer-events: auto;
}
#quitConfirm.show { display: flex; }
.qc-box {
  background: linear-gradient(160deg, #241410, #120a08);
  border: 2px solid #d05050;
  border-radius: 16px;
  padding: 22px 26px;
  text-align: center;
  box-shadow: 0 0 40px #00000088;
}
.qc-title { color: #ffd0c0; font-size: 1.15rem; letter-spacing: 0.05em; margin-bottom: 6px; }
.qc-sub { color: #c4a080; font-size: 0.82rem; margin-bottom: 16px; }
.qc-actions { display: flex; gap: 12px; justify-content: center; }
.qc-actions button {
  padding: 8px 18px;
  border-radius: 10px;
  border: 2px solid #c8843a;
  background: linear-gradient(160deg, #2a1810, #120c08);
  color: #fff4e0;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.qc-actions button.danger { border-color: #d05050; background: linear-gradient(160deg, #3a1414, #1a0808); color: #ffd0c0; }
.qc-actions button:hover { filter: brightness(1.15); }

/* ---- Hangar hull roster tab (playtest47) ---- */
.garage-hull-tag {
  font-size: 0.74rem;
  color: #9fb8ff;
  margin: -6px 0 10px;
  text-align: left;
}
.garage-hull-tag.hidden { display: none !important; }
.garage-hulls.hidden { display: none !important; }
.garage-hulls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  text-align: left;
  min-height: 0;
  overflow: auto;
  max-height: min(52vh, 480px);
  padding-right: 4px;
}
.hulls-head {
  font-size: 0.76rem;
  color: #c4a080;
  line-height: 1.4;
  margin-bottom: 2px;
}
.hulls-head strong { color: #ffe080; }
.hull-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: linear-gradient(160deg, #2a1810, #120c08);
  border: 1px solid #8a5a30;
  border-radius: 10px;
  padding: 10px 12px;
}
.hull-card.owned { border-color: #7eefe4; }
.hull-card.equipped {
  border: 3px solid #ffe080;
  box-shadow: 0 0 0 2px #c87020, 0 0 28px #ffc040aa, inset 0 0 18px #ffaa4028;
  background: linear-gradient(160deg, #4a2c12, #1a1008);
}
.hull-card.equipped .hname { color: #ffe080; text-shadow: 0 0 8px #ffaa4066; }
.hull-card.locked { opacity: 0.82; }
.hswatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.18) inset, 0 0 10px rgba(0, 0, 0, 0.5);
}
.hull-card .hinfo { min-width: 0; overflow: hidden; }
.hull-card .hname { font-weight: 800; color: #fff4e0; font-size: 0.9rem; }
.hull-card .hrole {
  font-size: 0.64rem; color: #e8a838; text-transform: uppercase;
  letter-spacing: 0.08em; margin-left: 6px; font-weight: 600;
}
.hull-card .hdesc { font-size: 0.72rem; color: #c4a080; margin-top: 2px; }
.hull-card .hsuper { font-size: 0.68rem; color: #9fb8ff; margin-top: 2px; }
.hull-card .hstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  margin-top: 6px;
}
.hull-card .hstat {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.62rem; color: #c4a080; letter-spacing: 0.04em;
}
.hull-card .hstat b { color: #ffe8c0; font-variant-numeric: tabular-nums; margin-left: auto; }
.hull-card .hbar {
  flex: 1; height: 5px; border-radius: 3px;
  background: #2a1c1288; border: 1px solid #5a3a2088; overflow: hidden; min-width: 28px;
}
.hull-card .hbar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #c07040, #ffe080);
  border-radius: 2px;
}
.hull-card .hstate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.hbadge {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid #ffe080; color: #ffe080;
  background: #3a241088; white-space: nowrap;
}
.hull-card .hequip {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #7eefe4;
  color: #7eefe4;
  background: #18301866;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
  transition: box-shadow 0.12s, background 0.12s;
}
.hull-card .hequip:hover { box-shadow: 0 0 14px #7eefe444; background: #1e3a1e88; }
.hull-card .hunlock {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  min-width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #8a5a30;
  background: #1a120c88;
  color: #a08060;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  transition: border-color 0.12s, box-shadow 0.12s, color 0.12s, background 0.12s;
}
.hull-card .hunlock.is-ready {
  border-color: #e8b050; color: #ffe080; background: #3a241088;
  box-shadow: 0 0 14px #ffaa4033;
}
.hull-card .hunlock.is-ready:hover { border-color: #ffe080; box-shadow: 0 0 18px #ffaa4066; background: #4a301888; }
.hull-card .hunlock.is-locked { border-color: #8a5a30; color: #a08060; background: #140e0a88; cursor: default; }
.hull-card .hunlock.is-locked .gbuy-chip { color: #c4a080; opacity: 0.75; }
.hull-card .hunlock:disabled { opacity: 1; }
.hull-card .gbuy-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  justify-content: center;
  align-items: center;
}
.hull-card .gbuy-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0;
  font-weight: 700;
  color: #ffe080;
  font-variant-numeric: tabular-nums;
}
.hull-card .gbuy-chip b { font-size: 0.78rem; }
.hull-card .gbuy-ico { width: 18px; height: 18px; border-radius: 4px; display: block; }
.hull-card .gbuy-label { letter-spacing: 0.12em; font-size: 0.66rem; }

/* Balancing readout: left, under canvas kill board (not over time/KO). */
#combatReadout {
  position: absolute;
  top: 128px; /* below ~6-row standings at y=18+i*17 */
  left: 14px;
  right: auto;
  bottom: auto;
  z-index: 5;
  min-width: 190px;
  max-width: min(260px, 32vw);
  padding: 9px 11px;
  border: 1px solid #7eefe466;
  border-radius: 8px;
  background: #08161acc;
  color: #bfeee8;
  font: 700 0.7rem/1.45 ui-monospace, monospace;
  letter-spacing: .04em;
  pointer-events: none;
  text-align: left;
  box-shadow: 0 8px 24px #0008;
}
#combatReadout b { color: #ffe080; }
#combatReadout .cr-title { color: #7eefe4; font-size: .68rem; letter-spacing: .12em; margin-bottom: 3px; }
#combatReadout .cr-detail { color: #9fb8ff; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hull-icon { width: 54px; height: 54px; flex-shrink: 0; }
.hull-icon .hicon { width: 54px; height: 54px; display: block; object-fit: contain; filter: drop-shadow(0 0 6px #7eefe455); }

/* Test Drive banner: top center — cockpit HUD owns the bottom */
#testDriveHud {
  display: none;
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 14px;
  color: #ffe080;
  background: rgba(18, 10, 6, 0.92);
  border: 1px solid #c8843a;
  border-radius: 8px;
  font-size: 12px;
  pointer-events: auto;
  max-width: min(640px, calc(100vw - 300px));
  box-shadow: 0 0 18px #000a;
}
#testDriveHud.show { display: flex; }
#testDriveHud strong { letter-spacing: 0.12em; }
#testDriveHud button {
  margin: 0; padding: 5px 10px; font-size: 0.68rem; letter-spacing: 0.1em;
}



.hidden-fs { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
#feedbackDock {
  position: absolute;
  top: 10px;
  right: 52px;
  left: auto;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.fb-btn.recording {
  color: #ffd0a8;
  border-color: #e07040;
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 140, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px #6a2010,
    0 0 18px #ff503088;
  animation: fbPulse 1s ease-in-out infinite;
}
.fb-btn.recording .mic-capsule {
  fill: #ff5a3a;
  stroke: #ffd0a8;
}
@keyframes fbPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}
.fb-toast {
  max-width: 220px;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: #7eefe4;
  background: rgba(6, 10, 14, 0.85);
  border: 1px solid #7eefe455;
  border-radius: 6px;
  padding: 4px 8px;
  display: none;
}
.fb-toast.show { display: inline-block; }
#muteBadge { right: 160px; left: auto; }
.settings-note {
  font-size: 0.72rem;
  color: #c4a080;
  line-height: 1.4;
  margin: 0 0 10px;
}
.settings-note code { color: #7eefe4; font-size: 0.68rem; }
.vibe-sec {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.vibe-sec .settings-h { margin-bottom: 0; }
.vibe-sec .settings-note { margin: 0 0 2px; }
.webhook-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin: 2px 0 0;
}
.webhook-field span {
  color: #d8c0a0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
}
.webhook-field input[type="url"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #120c08;
  border: 1px solid #8a5a30;
  color: #ffe8c0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.72rem;
  font-family: inherit;
}
.webhook-field input[type="url"]:focus {
  outline: none;
  border-color: #e8b070;
  box-shadow: 0 0 0 1px #c8843a66;
}
.vibe-sec > button {
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* ---- Dist / player mode: hide Grok/dev tools + admin audio ---- */
html.dev-tools-off #feedbackDock,
html.dev-tools-off .vibe-sec,
html.dev-tools-off #btnTestDrive,
html.dev-tools-off .dev-hotkey,
html.dev-tools-off #testDriveHud,
html.dev-tools-off #combatReadout,
html.dev-tools-off #muteBadge,
html.dev-tools-off #playerPreviewSec,
html.release-build #feedbackDock,
html.release-build .vibe-sec,
html.release-build #btnTestDrive,
html.release-build .dev-hotkey,
html.release-build #testDriveHud,
html.release-build #combatReadout,
html.release-build #muteBadge,
html.release-build #playerPreviewSec {
  display: none !important;
}
#settingsPanel > #btnSettingsClose {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  box-sizing: border-box;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #f5e6d0;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  user-select: none;
}
.toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #c8843a;
  cursor: pointer;
}
.player-preview-sec .settings-note { margin: 8px 0 0; }

/* Solo + Multiplayer primary title buttons + name modal */
button.big.solo-btn {
  color: #ffe8c0;
  border-color: #c8843a;
  letter-spacing: 0.22em;
  font-size: 1.35rem;
  padding: 16px 44px;
  background-image:
    radial-gradient(circle at 8px 8px, #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) 8px, #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at 8px calc(100% - 8px), #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #6a3a10 1.3px, transparent 1.8px),
    linear-gradient(180deg, #3a2414 0%, #24160e 55%, #1a1008 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 120, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px #6a3a18,
    0 6px 0 #120a06,
    0 0 28px rgba(200, 120, 40, 0.28);
  flex: 1 1 220px;
  margin-bottom: 6px;
}
button.big.solo-btn:hover {
  border-color: #ffe080;
  color: #fff4e0;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 140, 0.28),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px #9a5820,
    0 8px 0 #120a06,
    0 0 36px rgba(255, 180, 70, 0.4);
}
button.big.play-now-btn {
  color: #1a0c04;
  border-color: #ffe080;
  letter-spacing: 0.18em;
  font-size: 1.35rem;
  padding: 16px 36px;
  background-image:
    radial-gradient(circle at 8px 8px, #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) 8px, #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at 8px calc(100% - 8px), #6a3a10 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #6a3a10 1.3px, transparent 1.8px),
    linear-gradient(180deg, #ffe090 0%, #f0a838 42%, #c86818 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.7),
    inset 0 -3px 0 rgba(80, 40, 10, 0.4),
    0 0 0 1px #9a5820,
    0 6px 0 #3a1c08,
    0 0 40px rgba(255, 190, 80, 0.55);
  flex: 1 1 220px;
  margin-bottom: 6px;
}
button.big.play-now-btn:hover {
  border-color: #fff0c0;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 230, 0.8),
    inset 0 -3px 0 rgba(80, 40, 10, 0.35),
    0 0 0 1px #b07028,
    0 8px 0 #3a1c08,
    0 0 48px rgba(255, 200, 90, 0.7);
}
#upgradePanel.pause-combat {
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, 96vw);
  background: rgba(8, 5, 3, 0.92);
  box-shadow: 0 0 48px #c8642088, 0 0 0 9999px rgba(4, 2, 1, 0.45);
  z-index: 55;
}
.name-modal {
  display: none;
  z-index: 96;
  max-width: 420px;
  width: min(420px, 92vw);
}
.name-modal.show { display: block; }
.name-modal input {
  width: min(280px, 80%);
  margin: 12px auto 18px;
  display: block;
  padding: 12px 14px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: #ffe8c0;
  background: rgba(10, 6, 4, 0.85);
  border: 2px solid #c8843a;
  border-radius: 10px;
  outline: none;
}
.name-modal input:focus {
  border-color: #ffe080;
  box-shadow: 0 0 18px #ffaa4066;
}
.name-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}


/* Online rematch: discourage manual restart */
#btnRestart.waiting,
#btnRestart:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
#hudOnline .val {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #9fe8ff;
  max-width: 14rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Online arena rule chips (name modal) */
.online-rule-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.rule-chip {
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid #8a6030;
  background: rgba(20, 12, 6, 0.85);
  color: #c4a080;
}
.rule-chip:hover, .rule-chip:focus {
  border-color: #ffe080;
  color: #ffe8c0;
}
.rule-chip.selected {
  border-color: #ffe080;
  color: #1a1008;
  background: linear-gradient(180deg, #ffe080, #c8843a);
  box-shadow: 0 0 16px #ffaa4066;
}

/* Level-up PASS — copper ban seal (no trash can) + in-game tip */
.upgrade-card { position: relative; }
.upgrade-card .upgrade-pass {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px 0 6px;
  border-radius: 7px;
  border: 1px solid #8a5a30;
  background:
    linear-gradient(180deg, #3a2414 0%, #1a1008 100%);
  color: #e8b080;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 120, 0.18),
    0 2px 6px rgba(0,0,0,0.4),
    0 0 0 1px #3a1c08;
  font-family: inherit;
  letter-spacing: 0.08em;
}
.upgrade-card .upgrade-pass .pass-mark {
  display: inline-flex;
  color: #ff9060;
  filter: drop-shadow(0 0 4px #f408);
}
.upgrade-card .upgrade-pass .pass-word {
  font-size: 0.58rem;
  font-weight: 900;
  color: #ffe0c0;
  letter-spacing: 0.12em;
}
.upgrade-card .upgrade-pass:hover,
.upgrade-card .upgrade-pass:focus {
  border-color: #ffe080;
  color: #ffe8c0;
  background: linear-gradient(180deg, #5a3018 0%, #2a1408 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 140, 0.28),
    0 0 12px #ff804044,
    0 0 0 1px #8a4020;
  outline: none;
}
.upgrade-card .upgrade-pass:hover .pass-mark,
.upgrade-card .upgrade-pass:focus .pass-mark { color: #ffe080; }
.upgrade-card .upgrade-pass svg { display: block; pointer-events: none; }
.upgrade-card .upgrade-pass-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(220px, 70vw);
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid #c8843a;
  background:
    linear-gradient(165deg, rgba(42, 24, 12, 0.97), rgba(12, 8, 4, 0.98));
  box-shadow:
    0 8px 22px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255, 200, 120, 0.16),
    0 0 18px #c8642033;
  text-align: left;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  pointer-events: none;
  z-index: 20;
}
.upgrade-card .upgrade-pass-tip::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #2a180c;
  border-top: 2px solid #c8843a;
  border-left: 2px solid #c8843a;
  transform: rotate(45deg);
}
.upgrade-card .upgrade-pass:hover .upgrade-pass-tip,
.upgrade-card .upgrade-pass:focus .upgrade-pass-tip,
.upgrade-card .upgrade-pass:focus-within .upgrade-pass-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.upgrade-card .upgrade-pass-tip .upt-h {
  display: block;
  color: #ffe080;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
  text-shadow: 0 0 10px #fa06;
}
.upgrade-card .upgrade-pass-tip .upt-b {
  display: block;
  color: #d4b090;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Level-up card kinds */
.upgrade-card .kind-tag {
  position: absolute;
  top: 8px;
  left: 36px; /* key still left; PASS chip is top-right */
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  line-height: 1.2;
}
.upgrade-card.kind-weapon {
  background: linear-gradient(165deg, #3a2210 0%, #1a1008 55%, #120a06 100%);
  border-color: #e09040;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 24px rgba(224, 120, 40, 0.12);
}
.upgrade-card.kind-weapon .kind-tag {
  color: #ffe0a0;
  background: #402010;
  border-color: #c87030;
}
.upgrade-card.kind-weapon:hover, .upgrade-card.kind-weapon:focus, .upgrade-card.kind-weapon.is-focused {
  border-color: #ffc060;
  box-shadow: 0 8px 16px rgba(0,0,0,0.45), 0 0 12px #ff902033;
}
.upgrade-card.kind-upgrade {
  background: linear-gradient(165deg, #2a2810 0%, #16140a 55%, #100e08 100%);
  border-color: #c0a040;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 24px rgba(200, 180, 60, 0.12);
}
.upgrade-card.kind-upgrade .kind-tag {
  color: #ffe8a0;
  background: #383010;
  border-color: #b09030;
}
.upgrade-card.kind-upgrade:hover, .upgrade-card.kind-upgrade:focus, .upgrade-card.kind-upgrade.is-focused {
  border-color: #ffe080;
  box-shadow: 0 8px 16px rgba(0,0,0,0.45), 0 0 12px #e0c04033;
}
.upgrade-card.kind-ship {
  background: linear-gradient(165deg, #142830 0%, #0c1418 55%, #080e12 100%);
  border-color: #4aa0a8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 24px rgba(60, 180, 190, 0.1);
}
.upgrade-card.kind-ship .kind-tag {
  color: #b8f0f4;
  background: #103038;
  border-color: #3a8890;
}
.upgrade-card.kind-ship:hover, .upgrade-card.kind-ship:focus, .upgrade-card.kind-ship.is-focused {
  border-color: #70d8e0;
  box-shadow: 0 8px 16px rgba(0,0,0,0.45), 0 0 12px #40c0c833;
}
.upgrade-card.kind-hex {
  background: linear-gradient(165deg, #2a1838 0%, #140c1c 55%, #0c0812 100%);
  border-color: #9060c8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 24px rgba(160, 80, 220, 0.14);
}
.upgrade-card.kind-hex .kind-tag {
  color: #e8d0ff;
  background: #281840;
  border-color: #8050b0;
}
.upgrade-card.kind-hex:hover, .upgrade-card.kind-hex:focus, .upgrade-card.kind-hex.is-focused {
  border-color: #c090ff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.45), 0 0 12px #a060ff33;
}





/* ---- Selection demos (0.68.17) ---- */
.upgrade-card.is-focused .icon,
.upgrade-card:hover .icon {
  animation: upIconBounce 0.55s ease-in-out infinite alternate;
}
.upgrade-card.is-focused::after,
.upgrade-card:hover::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 224, 128, 0.14) 48%, transparent 72%);
  background-size: 220% 100%;
  animation: upGlowSweep 1.1s ease-in-out infinite;
}
.upgrade-card.kind-weapon.is-focused::after,
.upgrade-card.kind-weapon:hover::after {
  background: linear-gradient(110deg, transparent 20%, rgba(255, 160, 64, 0.18) 48%, transparent 72%);
  background-size: 220% 100%;
}
.upgrade-card.kind-upgrade.is-focused::after,
.upgrade-card.kind-upgrade:hover::after {
  background: linear-gradient(110deg, transparent 20%, rgba(255, 220, 96, 0.16) 48%, transparent 72%);
  background-size: 220% 100%;
}
.upgrade-card.kind-ship.is-focused::after,
.upgrade-card.kind-ship:hover::after {
  background: linear-gradient(110deg, transparent 20%, rgba(80, 220, 230, 0.16) 48%, transparent 72%);
  background-size: 220% 100%;
}
.upgrade-card.kind-hex.is-focused::after,
.upgrade-card.kind-hex:hover::after {
  background: linear-gradient(110deg, transparent 20%, rgba(180, 120, 255, 0.18) 48%, transparent 72%);
  background-size: 220% 100%;
}
.upgrade-preview {
  margin-top: 8px;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.upgrade-card.is-focused .upgrade-preview,
.upgrade-card:hover .upgrade-preview {
  opacity: 1;
}
.up-feel {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: #ffe080;
  text-shadow: 0 0 8px #ffaa4066;
}
.up-feel-weapon {
  color: #ffc070;
  animation: upSparks 0.7s steps(3, end) infinite;
}
.up-feel-upgrade {
  color: #ffe080;
  animation: upSparks 0.7s steps(3, end) infinite;
}
.up-feel-ship {
  color: #7eefe4;
  display: inline-block;
  animation: upShieldPulse 1s ease-in-out infinite;
}
.up-feel-hex {
  color: #d0a0ff;
  display: inline-block;
  animation: upHexFlash 0.85s ease-in-out infinite;
}
@keyframes upIconBounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-5px) scale(1.08); }
}
@keyframes upGlowSweep {
  0% { background-position: 120% 0; opacity: 0.35; }
  50% { opacity: 0.85; }
  100% { background-position: -40% 0; opacity: 0.35; }
}
@keyframes upSparks {
  0% { opacity: 0.45; letter-spacing: 0.12em; }
  50% { opacity: 1; letter-spacing: 0.28em; text-shadow: 0 0 12px #ff9020aa; }
  100% { opacity: 0.55; letter-spacing: 0.16em; }
}
@keyframes upShieldPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.55; text-shadow: 0 0 4px #40c0c844; }
  50% { transform: scale(1.2); opacity: 1; text-shadow: 0 0 14px #70e8f0aa; }
}
@keyframes upHexFlash {
  0%, 100% { transform: rotate(0deg) scale(0.95); opacity: 0.5; filter: brightness(0.9); }
  40% { transform: rotate(12deg) scale(1.18); opacity: 1; filter: brightness(1.35); text-shadow: 0 0 14px #a060ffcc; }
  70% { transform: rotate(-8deg) scale(1.05); opacity: 0.85; }
}

.track-card.sel-flash,
.diff-card.sel-flash,
.mode-card.sel-flash,
.rule-card.sel-flash {
  animation: selFlashPulse 0.32s ease-out;
}
@keyframes selFlashPulse {
  0% { box-shadow: 0 0 0 0 #ffe08000, 0 0 0 #ffaa4000; transform: scale(1); }
  40% { box-shadow: 0 0 0 3px #ffe080aa, 0 0 18px #ffaa4088; transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 #ffe08000, 0 0 0 #ffaa4000; transform: scale(1); }
}

.glossary-card {
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.codex-pane .glossary-card:not(.is-active) {
  opacity: 0.55;
}
.glossary-card.is-active,
.glossary-card:hover {
  opacity: 1 !important;
  border-color: #e8b050;
  box-shadow: 0 0 0 1px #e8b05055, inset 0 0 28px rgba(200,100,40,0.12);
  transform: translateY(-1px);
}
.glossary-card:focus {
  outline: none;
}
.glossary-card.is-active:focus {
  border-color: #ffe080;
}

/* ---- Codex / Glossary (0.67.8) ---- */
.title-links {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.title-links .controls-link { margin-top: 0; }
#codexPanel, #glossaryPanel {
  display: none;
  max-width: 640px;
  width: min(640px, 94vw);
  z-index: 95;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 86vh;
  overflow: auto;
  text-align: left;
  pointer-events: auto;
}
#codexPanel.show, #glossaryPanel.show { display: block; }
#codexPanel .garage-x, #glossaryPanel .garage-x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; margin: 0; padding: 0;
  font-size: 1.25rem; line-height: 1; letter-spacing: 0;
  border-radius: 4px;
}
#codexPanel .garage-x:hover, #glossaryPanel .garage-x:hover {
  transform: none;
  background: #3a2214;
  box-shadow: 0 0 12px #ffaa4066;
}
.codex-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 14px;
  flex-wrap: wrap;
}
.codex-tab {
  background: rgba(8,5,3,0.65);
  border: 1px solid #8a5a30;
  color: #c4a080;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.codex-tab:hover, .codex-tab:focus {
  border-color: #ffe080;
  color: #ffe080;
  outline: none;
}
.codex-tab.active {
  border-color: #e8a838;
  color: #ffe080;
  background: linear-gradient(165deg, #2a1810 0%, #140c08 100%);
  box-shadow: 0 0 14px #ffaa4033;
}
.codex-pane.hidden { display: none !important; }
.glossary-list {
  max-height: min(56vh, 520px);
  overflow: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.glossary-card {
  background: rgba(8,5,3,0.55);
  border: 1px solid #8a5a30;
  border-radius: 12px;
  padding: 12px 14px 14px;
  box-shadow: inset 0 0 24px rgba(200,100,40,0.06);
}
.glossary-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.glossary-card-head h3 {
  margin: 0;
  color: #ffe080;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.codex-ico {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.glossary-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #8a5a30;
  color: #c4a080;
  background: #1a1008;
}
.glossary-tag.well { color: #d0a0ff; border-color: #8050b0; background: #180c22; }
.glossary-tag.ice { color: #b8f0ff; border-color: #4aa0c0; background: #0c1820; }
.glossary-tag.flux { color: #ffb070; border-color: #c06030; background: #201008; }
.glossary-tag.nebula { color: #e0b0ff; border-color: #9060c8; background: #160c20; }
.glossary-tag.rim, .glossary-tag.rocks { color: #e0c090; border-color: #8a5a30; }
.glossary-tag.threat { color: #ff9070; border-color: #c05030; background: #201008; }
.glossary-tag.hazard { color: #c070ff; border-color: #8050b0; background: #160c20; }
.glossary-tagline {
  color: #c4a080;
  font-size: 0.8rem;
  margin: 4px 0 8px;
  line-height: 1.4;
}
.glossary-bullets {
  margin: 0 0 8px;
  padding-left: 1.1rem;
  color: #d8c0a0;
  font-size: 0.78rem;
  line-height: 1.5;
}
.glossary-bullets li { margin-bottom: 3px; }
.glossary-tip {
  color: #e8b050;
  font-size: 0.75rem;
  margin: 0 0 10px;
  line-height: 1.4;
}
.glossary-demo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 140px;
  border-radius: 8px;
  border: 1px solid #6a4020;
  background: #0a0706;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.55);
}
.glossary-card-static .glossary-tip { margin-bottom: 0; }
.dyn-block { margin-bottom: 8px; }
.dyn-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dyn-label.hard { color: #ff8060; }
.dyn-label.soft { color: #80c0a0; }
@media (max-width: 560px) {
  .glossary-demo { height: 120px; }
}

.zoom-row .vol-zoom { flex: 1; accent-color: #e8a838; }

.end-scoreboard {
  margin: 6px 0 12px;
  text-align: left;
  width: min(560px, 92vw);
  max-height: min(42vh, 320px);
  overflow: auto;
  border: 1px solid #6a4020;
  border-radius: 10px;
  background: rgba(10, 6, 4, 0.72);
  padding: 8px 10px 10px;
}
.end-scoreboard.hidden { display: none; }
.end-scoreboard .sb-h {
  color: #ffe080;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  margin-bottom: 6px;
}
.end-scoreboard .sb-cols,
.end-scoreboard .sb-row {
  display: grid;
  grid-template-columns: 52px minmax(90px, 1.4fr) 52px 64px minmax(90px, 1.2fr);
  gap: 6px;
  align-items: center;
  font-size: 0.74rem;
}
.end-scoreboard .sb-cols {
  color: #a08060;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 2px 4px;
  border-bottom: 1px solid #4a3020;
  margin-bottom: 4px;
}
.end-scoreboard .sb-row {
  padding: 5px 2px;
  border-radius: 6px;
  color: #fff4e0;
  font-variant-numeric: tabular-nums;
}
.end-scoreboard .sb-row:nth-child(odd) { background: rgba(255, 180, 80, 0.04); }
.end-scoreboard .sb-row.me {
  background: rgba(126, 239, 228, 0.12);
  outline: 1px solid rgba(126, 239, 228, 0.35);
}
.end-scoreboard .sb-row.first .sb-place { color: #ffe080; text-shadow: 0 0 8px #fa0; }
.end-scoreboard .sb-place { font-weight: 800; color: #e8a838; }
.end-scoreboard .sb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.end-scoreboard .sb-name small {
  display: block;
  color: #a08060;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}
.end-scoreboard .sb-ko { color: #7eefe4; font-weight: 700; }
.end-scoreboard .sb-dmg { color: #ffb060; font-weight: 700; }
.end-scoreboard .sb-stat { color: #c4a080; font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#msg.show { max-width: min(640px, 96vw); }

/* Level-up stack rank — copper chevrons under the icon */
.upgrade-card .stack-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: -2px 0 6px;
}
.upgrade-card .stack-rank .sr-label {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #ffe080;
  text-shadow: 0 0 10px #fa06;
  line-height: 1;
}
.upgrade-card .stack-rank .sr-pips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.upgrade-card .stack-rank .sr-chev {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #4a3020;
  opacity: 0.55;
  filter: drop-shadow(0 1px 0 #1a1008);
}
.upgrade-card .stack-rank .sr-chev.have {
  border-bottom-color: #c8843a;
  opacity: 0.95;
}
.upgrade-card .stack-rank .sr-chev.next {
  border-bottom-color: #ffe080;
  opacity: 1;
  transform: translateY(-1px) scale(1.15);
  filter: drop-shadow(0 0 4px #ffb04088);
}
.upgrade-card.kind-weapon .stack-rank .sr-label { color: #7eefe4; text-shadow: 0 0 8px #7eefe466; }
.upgrade-card.kind-weapon .stack-rank .sr-chev.next { border-bottom-color: #7eefe4; filter: drop-shadow(0 0 4px #7eefe488); }
.upgrade-card.kind-upgrade .stack-rank .sr-label { color: #ffe080; text-shadow: 0 0 8px #ffe08066; }
.upgrade-card.kind-upgrade .stack-rank .sr-chev.next { border-bottom-color: #ffe080; filter: drop-shadow(0 0 4px #ffe08088); }

/* Title: section headers removed — tighten card stacks */
.title-content .track-label { display: none !important; }
.title-content .tagline { display: none !important; }
.track-select, .mode-select, .diff-select, .rule-select { margin-top: 8px; }
.match-setup-body .mode-select,
.match-setup-body .track-select,
.match-setup-body .diff-select,
.match-setup-body .rule-select { margin-top: 0; margin-bottom: 8px; }

/* Compact HUD: no legend / no need-piece placeholders */
.sk-legend, .sk-icon .sk-lab { display: none !important; }
.cockpit-plate .skill-icons { min-height: 0; gap: 6px; }
.skill-icons { min-height: 0; gap: 6px; }
.cockpit-plate { padding: 10px 14px 10px; gap: 6px; }

/* Optional live stats panel (Settings → Show stats panel) */
#runStatsPanel {
  position: absolute;
  left: 14px;
  top: 268px; /* under combat readout (now at 128px) */
  right: auto;
  bottom: auto;
  z-index: 4;
  min-width: 200px;
  max-width: min(280px, 34vw);
  padding: 10px 12px;
  border: 1px solid #a8683088;
  border-radius: 10px;
  background: rgba(12, 8, 4, 0.88);
  color: #e8d0b0;
  font: 700 0.72rem/1.45 ui-monospace, monospace;
  letter-spacing: 0.04em;
  pointer-events: none;
  text-align: left;
  box-shadow: 0 8px 24px #0008;
}
#runStatsPanel.hidden { display: none !important; }
#runStatsPanel b { color: #ffe080; }
#runStatsPanel .rsp-title {
  color: #e8b050;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}
#runStatsPanel .rsp-form { color: #7eefe4; margin-top: 4px; }
#runStatsPanel .rsp-detail {
  color: #a88868;
  font-size: 0.62rem;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#msgForm, .form-line { display: none !important; }
.settings-body .toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  color: #e8d0b0;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.settings-body .toggle-row input { width: 16px; height: 16px; accent-color: #e8a838; }


/* First-to-N KO counter — top middle, clear of combat readout / vibe dock */
#koMidCounter {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  font: 800 1.05rem/1.2 ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: #ffe080;
  text-shadow: 0 0 10px #fa06, 0 2px 4px #000c;
  background: rgba(10, 6, 4, 0.62);
  border: 1px solid #a8683088;
  border-radius: 10px;
  padding: 6px 14px;
}
#koMidCounter.hidden { display: none; }

/* Combat readout: slightly translucent so ships under it stay readable */
#combatReadout {
  opacity: 0.78;
  max-width: min(220px, 26vw);
  background: #08161ab8;
}

/* Version badge: bottom-right above cockpit — left side is TIME/KO + weapons */
#buildBadge {
  left: auto;
  right: 14px;
  bottom: 118px;
  z-index: 8;
}
#hud:not(.show) ~ #buildBadge,
body:has(#hud:not(.show)) #buildBadge {
  bottom: 8px;
  right: 14px;
  left: auto;
}

/* Scoreboard build line */
.end-scoreboard {
  width: min(620px, 94vw);
  max-height: min(48vh, 380px);
}
.end-scoreboard .sb-cols,
.end-scoreboard .sb-row {
  grid-template-columns: 52px minmax(160px, 2fr) 56px 70px;
}
.end-scoreboard .sb-name small.sb-cfg {
  display: block;
  color: #7eefe4;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  white-space: normal;
  line-height: 1.25;
  margin-top: 2px;
}
.end-scoreboard .sb-name small.sb-hi {
  display: block;
  color: #a08060;
  font-weight: 600;
  font-size: 0.58rem;
  margin-top: 1px;
}

/* Offered upgrade chip beats locked/need — always readable as "you're getting this" */
.upgrade-card .recipe-chip.gain {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none;
  border-color: #7eefe4;
  box-shadow: 0 0 8px #7eefe488;
}
.upgrade-card .recipe-chip.result.locked-chip,
.upgrade-card .recipe-chip.result.need {
  opacity: 0.34;
  filter: grayscale(0.65);
  transform: none;
  box-shadow: none;
  border-color: #4a3830;
}
.upgrade-card .recipe-result-name {
  color: #a09080;
}
.upgrade-card .recipe-row.ready .recipe-result-name {
  color: #7eefe4;
}

/* Unowned recipe chips — clearly not selectable */
.upgrade-card .recipe-chip.locked-chip,
.upgrade-card .recipe-chip.need {
  opacity: 0.38;
  filter: grayscale(0.55);
  pointer-events: none;
  box-shadow: none;
  border-color: #4a3830;
}
.upgrade-card .recipe-result-name {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #7eefe4;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.combo-card.locked {
  opacity: 1;
  filter: none;
  pointer-events: none;
}
.garage-card.cant-buy .gbuy.is-locked {
  opacity: 0.55;
  filter: grayscale(0.4);
}


/* Compact HUD cockpit — weapons+equipment need room for full loadouts */
.cockpit-compact .skill-icons,
.cockpit-compact .hud-loadout {
  min-height: 36px;
  align-content: flex-start;
}
.cockpit-compact .sk-icon {
  width: 44px;
  min-height: 44px;
  padding: 3px;
  border-radius: 7px;
}
.cockpit-compact .sk-icon img { width: 34px !important; height: 34px !important; }
.cockpit-compact .lo-slot img { width: 30px; height: 30px; }
.kit-col.kit-weapons,
.kit-col.kit-equipment {
  min-width: 120px;
  flex: 1 1 auto;
}

/* Weapons: 5-wide (1–2 rows); Equipment: 5-wide × 2 rows (10 blanks); scroll beyond */
.kit-col.kit-weapons .hud-loadout,
.kit-col.kit-equipment .skill-icons,
.cockpit-compact .kit-col.kit-weapons .hud-loadout,
.cockpit-compact .kit-col.kit-equipment .skill-icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 5px;
  align-content: start;
  max-width: calc(5 * 44px + 4 * 5px);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #c88840 #1a1008;
}
.kit-col.kit-weapons .hud-loadout,
.cockpit-compact .kit-col.kit-weapons .hud-loadout {
  max-height: calc(2 * 44px + 5px + 4px); /* up to 2 rows for 5 slots */
}
.kit-col.kit-equipment .skill-icons,
.cockpit-compact .kit-col.kit-equipment .skill-icons {
  max-height: calc(2 * 44px + 5px + 4px); /* exactly 2 rows for 10 blanks */
}
.kit-col.kit-weapons,
.kit-col.kit-equipment {
  min-width: calc(5 * 40px + 4 * 5px);
  flex: 0 1 auto;
  max-width: calc(5 * 48px + 4 * 6px + 8px);
}
.cockpit-compact .kit-col.kit-weapons .hud-loadout .lo-slot,
.cockpit-compact .kit-col.kit-equipment .skill-icons .sk-icon {
  width: 44px;
  min-height: 44px;
  justify-self: stretch;
}
/* Single-use: fixed 5-col grid matching slot size */
.kit-col.kit-hex .hud-hex-tray,
.cockpit-compact .kit-col.kit-hex .hud-hex-tray {
  display: grid;
  grid-template-columns: repeat(5, 44px);
  gap: 5px;
  max-width: calc(5 * 44px + 4 * 5px);
  align-content: start;
}


.cockpit-plate { padding: 6px 12px 6px; gap: 0; }
.cockpit-compact .economy .cockpit-tag { display: none; }
.cockpit-compact .eco-row { gap: 2px 6px; }
.cockpit-compact .eco-ico { width: 14px; height: 14px; }
.cockpit-compact .eco strong { font-size: 0.72rem; }
.cockpit-rivet.tl, .cockpit-rivet.tr { top: 6px; }
.cockpit-rivet.bl, .cockpit-rivet.br { bottom: 6px; }
.cockpit-compact .skill-icons .sk-icon img,
.cockpit-compact .skill-icons img { width: 34px !important; height: 34px !important; }
@media (max-width: 720px) {
  .cockpit-top.cockpit-compact {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
  }
  .cockpit-compact .kit-group { grid-column: 1; grid-row: 1; }
  .cockpit-compact .economy { grid-column: 2; grid-row: 1; }
  .cockpit-compact .cockpit-gauges {
    grid-column: 2;
    grid-row: 2;
    width: 110px;
    max-width: 110px;
    justify-self: end;
  }
}


/* Unified close X — top-right, same size on every overlay panel */
#comboPanel .garage-x,
#scrapYardPanel .garage-x,
#lbPanel .garage-x,
#settingsPanel .garage-x,
#controlsPanel .garage-x,
#shipPickModal .garage-x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; margin: 0; padding: 0;
  font-size: 1.25rem; line-height: 1; letter-spacing: 0;
  border-radius: 4px;
}
#comboPanel .garage-x:hover,
#scrapYardPanel .garage-x:hover,
#lbPanel .garage-x:hover,
#settingsPanel .garage-x:hover,
#controlsPanel .garage-x:hover,
#shipPickModal .garage-x:hover {
  transform: none;
  background: #3a2214;
  box-shadow: 0 0 12px #ffaa4066;
}


/* Dieselpunk copper scrollbars — all UI scroll surfaces */
html {
  color-scheme: dark;
}
#ui,
#ui *,
.panel,
.title-panel,
#garagePanel,
#comboPanel,
#scrapYardPanel,
#lbPanel,
#settingsPanel,
#controlsPanel,
#codexPanel,
#glossaryPanel,
#upgradePanel,
.garage-list,
.garage-hulls,
.garage-combos,
.combo-list,
.glossary-list,
.end-scoreboard,
.ship-pick-modal,
.ship-pick-list,
.upgrade-grid {
  scrollbar-width: thin;
  scrollbar-color: #c8843a #1a1008;
}
#ui::-webkit-scrollbar,
#ui *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#ui::-webkit-scrollbar-track,
#ui *::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #120c08, #1a1008);
  border-left: 1px solid #6a4528;
  border-radius: 8px;
}
#ui::-webkit-scrollbar-thumb,
#ui *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e8b050, #a06020);
  border: 1px solid #ffe080;
  border-radius: 8px;
  box-shadow: inset 0 0 6px #ffaa4066;
}
#ui::-webkit-scrollbar-thumb:hover,
#ui *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe080, #c8843a);
}
#ui::-webkit-scrollbar-corner,
#ui *::-webkit-scrollbar-corner {
  background: #1a1008;
}

/* Match-entry ship pick (3 random owned + garage default) */
.ship-pick-modal {
  display: none;
  max-width: 560px;
  width: min(560px, 94vw);
  z-index: 96;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 86vh;
  overflow: auto;
  text-align: center;
  pointer-events: auto;
}
.ship-pick-modal.show { display: block; }
#shipPickBackdrop.show { z-index: 95; }
.ship-pick-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 16px;
  text-align: left;
}
.ship-pick-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: linear-gradient(160deg, #2a1810, #120c08);
  border: 1px solid #8a5a30;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ship-pick-card:hover {
  border-color: #e8a838;
  box-shadow: 0 0 14px #ffaa4033;
}
.ship-pick-card.selected {
  border: 3px solid #ffe080;
  box-shadow: 0 0 0 2px #c87020, 0 0 28px #ffc040aa, inset 0 0 18px #ffaa4028;
  background: linear-gradient(160deg, #4a2c12, #1a1008);
}
.ship-pick-card .sp-ico {
  width: 48px; height: 48px; border-radius: 10px;
  display: block; box-shadow: 0 0 10px #c8642044;
}
.ship-pick-card .sp-name { font-weight: 800; color: #fff4e0; font-size: 0.95rem; }
.ship-pick-card.selected .sp-name { color: #ffe080; text-shadow: 0 0 8px #ffaa4066; }
.ship-pick-card .sp-role {
  font-size: 0.64rem; color: #e8a838; text-transform: uppercase;
  letter-spacing: 0.08em; margin-left: 6px; font-weight: 600;
}
.ship-pick-card .sp-desc { font-size: 0.72rem; color: #c4a080; margin-top: 2px; }
.ship-pick-card .sp-badge {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  color: #80c080; border: 1px solid #408040; border-radius: 6px;
  padding: 4px 8px; white-space: nowrap;
}
.ship-pick-card.selected .sp-badge {
  color: #ffe080; border-color: #c8843a; background: #3a2214;
}


/* ===== Phone / landscape-only play (0.68.26) ===== */
html.phone-mode, html.phone-mode body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  background: #07060a;
  width: 100%;
  height: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0;
  overflow: hidden;
}
html.phone-mode #wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  margin: 0;
}
html.phone-mode canvas#c {
  touch-action: none;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
html.phone-mode #ui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#rotateGate {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  background: rgba(6, 5, 10, 0.94);
  pointer-events: auto;
}
.rotate-gate-card {
  text-align: center;
  padding: 22px 18px;
  border: 2px solid #a86830aa;
  border-radius: 14px;
  background: linear-gradient(160deg, #1a1008ee, #0c0806ee);
  box-shadow: 0 12px 40px #000a;
  max-width: min(88vw, 320px);
}
.rotate-gate-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 8px;
  color: #ffc060;
  animation: rotateGateSpin 2.4s linear infinite;
}
@keyframes rotateGateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotate-gate-title {
  font: 800 0.95rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: #ffe8c0;
}
.rotate-gate-sub {
  margin-top: 6px;
  font: 600 0.72rem/1.35 ui-sans-serif, system-ui, sans-serif;
  color: #c9a070;
}
@media (orientation: portrait) and (max-width: 920px) {
  html.phone-mode #rotateGate { display: flex; }
  html.phone-mode #touchPad { display: none !important; }
}

#touchPad {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 max(8px, env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  gap: 6px;
}
#touchPad.hidden { display: none !important; }
html.phone-mode #touchPad:not(.hidden) { display: flex; }
@media (orientation: portrait) and (max-width: 920px) {
  html.phone-mode #touchPad:not(.hidden) { display: none !important; }
}

.touch-zone {
  pointer-events: auto;
  width: 92px;
  height: 92px;
  position: relative;
  touch-action: none;
  flex: 0 0 auto;
  opacity: 0.88;
}
.touch-stick-base {
  position: absolute;
  left: 50%; top: 50%;
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgba(20, 12, 8, 0.35);
  border: 1.5px solid #a8683070;
  box-shadow: inset 0 0 12px #0007;
}
.touch-stick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd090, #a86830 60%, #3a1c08);
  border: 1.5px solid #ffe080aa;
  box-shadow: 0 2px 8px #0008;
  will-change: transform;
}
.touch-btns {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 42px 50px 42px;
  grid-template-rows: 42px 50px;
  gap: 6px;
  align-items: end;
  justify-items: center;
  margin: 0 2px 0 0;
  opacity: 0.92;
}
.touch-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid #c88840;
  background: rgba(24, 14, 8, 0.72);
  color: #ffe8c0;
  font: 800 0.48rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 2px 8px #0008, inset 0 1px 0 #ffc08033;
  padding: 0;
}
.touch-btn:active, .touch-btn.held {
  filter: brightness(1.28);
  border-color: #ffe080;
  transform: scale(0.95);
}
.touch-boost { grid-column: 1; grid-row: 1; border-color: #ffb060; color: #ffb060; }
.touch-super { grid-column: 2; grid-row: 1; border-color: #ffe080; color: #ffe080; }
.touch-nuke  { grid-column: 3; grid-row: 1; border-color: #ff6020; color: #ff9060; font-size: 0.42rem; }
.touch-fire {
  grid-column: 2; grid-row: 2;
  width: 50px; height: 50px;
  border-color: #7eefe4;
  color: #9ff4ea;
  font-size: 0.55rem;
}


/* Super as weapon-style icon left of WEAPONS — gray→color charge (not a bar) */
.kit-col.kit-super {
  flex: 0 0 auto;
  min-width: 0;
  padding-left: 10px; /* clear TL rivet so SUPER / WEAPONS labels don't collide */
}
.kit-col.kit-weapons {
  padding-left: 2px;
}
.kit-col.kit-weapons .cockpit-tag,
.kit-col.kit-super .cockpit-tag {
  padding-left: 2px;
}
.hud-super-slot {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 2px;
  border-radius: 6px;
  cursor: default;
  background: rgba(20, 12, 8, 0.88);
  border: 2px solid #c88840;
  box-shadow: inset 0 1px 0 #ffc08033;
}
.hud-super-slot .super-ico-stack {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
}
.hud-super-slot .super-ico {
  position: absolute;
  inset: 0;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: block;
  pointer-events: none;
}
.hud-super-slot .super-ico-gray {
  filter: grayscale(1) brightness(0.72);
  opacity: 0.92;
}
.hud-super-slot .super-ico-color {
  /* charge reveal bottom→top via --super-p (0–100) */
  clip-path: inset(calc(100% - (var(--super-p, 0) * 1%)) 0 0 0);
  filter: none;
}
.hud-super-slot .super-keyhint {
  position: absolute;
  right: -2px;
  bottom: -2px;
  font-size: 0.55rem;
  font-weight: 800;
  color: #ffe8c0;
  background: #3a2010ee;
  border: 1px solid #c88840;
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.hud-super-slot.super-ready {
  border-color: #ffe080;
  box-shadow:
    0 0 0 1px #c87020,
    0 0 14px #ffb04088,
    inset 0 1px 0 #ffc08055;
}
.hud-super-slot.super-ready .super-ico-color {
  filter: drop-shadow(0 0 4px #ffe080aa);
}
.hud-super-slot.super-flash {
  animation: superPulse 0.35s ease-in-out 2;
}
.cockpit-compact .hud-super-slot {
  width: 44px;
  min-height: 44px;
}
html.phone-mode .kit-col.kit-super { padding-left: 0; }
html.phone-mode .hud-super-slot {
  width: 32px;
  min-height: 32px;
  padding: 2px;
}
html.phone-mode .hud-super-slot .super-ico-stack,
html.phone-mode .hud-super-slot .super-ico {
  width: 24px;
  height: 24px;
}
html.phone-mode .hud-super-slot .super-keyhint { display: none; }
/* Old bar gauge removed from layout; kill leftover phone ring rules harmlessly */
html.phone-mode .gauge.gauge-ring[data-g="super"] { display: none !important; }

/* Desktop rings unused; phone turns boost/super into fill circles */
.gauge-glyph { display: none; }

html.phone-mode .cockpit-plate {
  padding: 2px 8px calc(2px + env(safe-area-inset-bottom));
  border-radius: 8px 8px 0 0;
  max-height: 34px;
  background: rgba(14, 8, 4, 0.72);
}
html.phone-mode .cockpit-rivet,
html.phone-mode .cockpit-edge { display: none; }
html.phone-mode .cockpit-tag { display: none !important; }
html.phone-mode .cockpit-compact .economy { display: none !important; }
html.phone-mode .cockpit-top.cockpit-compact {
  grid-template-columns: auto auto;
  gap: 4px 10px;
  align-items: center;
  justify-content: space-between;
}
html.phone-mode .kit-group { gap: 4px !important; min-width: 0; flex: 1 1 auto; max-width: 58vw; }
html.phone-mode .cockpit-compact .hud-loadout,
html.phone-mode .cockpit-compact .skill-icons {
  flex-wrap: wrap !important;
  max-width: 100%;
  gap: 3px !important;
}
html.phone-mode .cockpit-compact .lo-slot img { width: 24px; height: 24px; }
html.phone-mode .cockpit-compact .sk-icon { width: 32px; min-height: 32px; }
html.phone-mode .cockpit-compact .sk-icon img { width: 24px !important; height: 24px !important; }
html.phone-mode .cockpit-gauges {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
html.phone-mode .cockpit-top.cockpit-compact .cockpit-gauges {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
}
/* Circular boost / super */
html.phone-mode .gauge.gauge-ring {
  display: block;
  width: 28px;
  height: 28px;
  grid-template-columns: unset;
  gap: 0;
  position: relative;
}
html.phone-mode .gauge.gauge-ring .gauge-meta { display: none; }
html.phone-mode .gauge.gauge-ring .gauge-bar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #a8683088;
  background:
    radial-gradient(circle at center, #120a06 0 57%, transparent 58%),
    conic-gradient(#ffb060 calc(var(--p, 0) * 1%), #2a1810 0);
  box-shadow: inset 0 0 6px #0008, 0 1px 4px #0006;
  overflow: visible;
}
html.phone-mode .gauge.gauge-ring[data-g="super"] .gauge-bar {
  background:
    radial-gradient(circle at center, #120a06 0 57%, transparent 58%),
    conic-gradient(#ffe080 calc(var(--p, 0) * 1%), #2a1810 0);
}
html.phone-mode .gauge.gauge-ring.super-ready .gauge-bar {
  box-shadow: 0 0 10px #ffe08088, inset 0 0 6px #0008;
  border-color: #ffe080;
}
html.phone-mode .gauge.gauge-ring .gauge-bar > i {
  display: none !important;
}
html.phone-mode .gauge.gauge-ring .gauge-glyph {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  font: 800 0.55rem/1 ui-sans-serif, system-ui, sans-serif;
  color: #ffe8c0;
  letter-spacing: 0;
  pointer-events: none;
}
html.phone-mode .gauge.gauge-ring[data-g="boost"] .gauge-glyph { color: #ffb060; }
html.phone-mode .gauge.gauge-ring[data-g="super"] .gauge-glyph { color: #ffe080; }

/* Shield stays a slim pill so rings stay the focus */
html.phone-mode .gauge[data-g="shield"] {
  display: grid;
  grid-template-columns: 0 1fr;
  width: 48px;
  gap: 0;
}
html.phone-mode .gauge[data-g="shield"] .gauge-lab { display: none; }
html.phone-mode .gauge[data-g="shield"] .gauge-bar { height: 4px; border-radius: 2px; }

html.phone-mode .cockpit-compact .lo-slot img,
html.phone-mode .cockpit-compact .sk-icon img { width: 22px !important; height: 22px !important; }
html.phone-mode .cockpit-compact .sk-icon,
html.phone-mode .cockpit-compact .lo-slot {
  width: 28px; min-height: 28px; padding: 1px;
  border-width: 1px;
}
html.phone-mode #combatReadout { display: none !important; }
html.phone-mode #buildBadge { display: none !important; }
html.phone-mode #feedbackDock { display: none !important; }
html.phone-mode #muteBadge {
  top: calc(4px + env(safe-area-inset-top));
  right: calc(4px + env(safe-area-inset-right));
  transform: scale(0.7);
  transform-origin: top right;
  opacity: 0.75;
}
html.phone-mode #runStatsPanel {
  top: calc(4px + env(safe-area-inset-top));
  left: calc(4px + env(safe-area-inset-left));
  max-width: min(160px, 26vw);
  font-size: 0.5rem;
  padding: 3px 5px;
  line-height: 1.2;
}
html.phone-mode #koMidCounter {
  top: calc(4px + env(safe-area-inset-top));
  font-size: 0.68rem;
  padding: 2px 7px;
  border-width: 1px;
}
html.phone-mode #standingsBoard,
html.phone-mode .standings-board,
html.phone-mode #standings {
  font-size: 0.55rem !important;
  max-width: min(150px, 24vw);
  padding: 3px 5px !important;
  line-height: 1.15;
  opacity: 0.85;
}
html.phone-mode .title-panel,
html.phone-mode #titlePanel {
  max-height: 100dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom));
}
html.phone-mode .title-content h1 { font-size: clamp(1.3rem, 4.5vw, 1.9rem); }
html.phone-mode .track-cards,
html.phone-mode .mode-cards,
html.phone-mode .diff-cards,
html.phone-mode .rule-cards {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
html.phone-mode .match-setup {
  width: 100%;
  margin: 6px 0 8px;
}
html.phone-mode .match-setup-toggle {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  gap: 8px;
}
html.phone-mode .ms-chevron {
  font-size: 1rem;
  min-width: 1.1em;
}
html.phone-mode .ms-chip {
  font-size: 0.72rem;
  padding: 5px 9px;
  min-height: 28px;
}
html.phone-mode .match-setup-body {
  gap: 8px;
  padding: 8px 4px 4px;
}
html.phone-mode .match-setup-body .mode-select,
html.phone-mode .match-setup-body .track-select,
html.phone-mode .match-setup-body .diff-select,
html.phone-mode .match-setup-body .rule-select {
  margin: 0 0 6px;
}
html.phone-mode .title-more {
  width: 100%;
  margin: 8px 0 6px;
}
html.phone-mode .title-more-toggle {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  gap: 6px;
}
html.phone-mode .tm-hint {
  font-size: 0.62rem;
}
html.phone-mode .title-more-grid {
  gap: 8px;
}
html.phone-mode .title-more-grid button {
  min-height: 40px;
  padding: 8px 12px;
}
html.phone-mode .upgrade-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-height: 70dvh;
  overflow: auto;
  gap: 6px;
}

@media (orientation: landscape) and (max-height: 430px) {
  html.phone-mode #touchPad {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
  html.phone-mode .touch-zone { width: 78px; height: 78px; }
  html.phone-mode .touch-stick-base { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  html.phone-mode .touch-stick-knob { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  html.phone-mode .touch-btns {
    grid-template-columns: 36px 44px 36px;
    grid-template-rows: 36px 44px;
    gap: 5px;
  }
  html.phone-mode .touch-btn { width: 36px; height: 36px; font-size: 0.4rem; }
  html.phone-mode .touch-fire { width: 44px; height: 44px; }
  html.phone-mode .cockpit-plate { max-height: 30px; padding: 1px 6px; }
  html.phone-mode .gauge.gauge-ring,
  html.phone-mode .gauge.gauge-ring .gauge-bar { width: 24px; height: 24px; }
}

/* 0.68.27 — lift touch controls above cockpit / home indicator */
html.phone-mode #touchPad:not(.hidden) {
  padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}
@media (orientation: landscape) and (max-height: 430px) {
  html.phone-mode #touchPad:not(.hidden) {
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }
}


/* ===== Rarity borders (selectable upgrades) 0.68.31 ===== */
.upgrade-card .rarity-tag {
  position: absolute;
  top: 8px;
  right: 10px;
  font: 800 0.58rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #666;
  background: #1a1410;
  color: #c8c0b8;
  z-index: 2;
}
.upgrade-card.rarity-common {
  border-color: #8a9098;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 0 18px rgba(140,144,150,0.08);
}
.upgrade-card.rarity-common .rarity-tag {
  color: #d0d4d8;
  border-color: #6a7078;
  background: #22262a;
}
.upgrade-card.rarity-uncommon {
  border-color: #3dd68c;
  box-shadow: 0 4px 12px rgba(0,0,0,0.38), 0 0 10px #3dd68c22, inset 0 0 20px rgba(61,214,140,0.08);
}
.upgrade-card.rarity-uncommon .rarity-tag {
  color: #b8ffe0;
  border-color: #2aaa6a;
  background: #0e2818;
}
.upgrade-card.rarity-rare {
  border-color: #4da3ff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.38), 0 0 12px #4da3ff28, inset 0 0 20px rgba(77,163,255,0.10);
}
.upgrade-card.rarity-rare .rarity-tag {
  color: #c8e4ff;
  border-color: #2a70c8;
  background: #0e1c30;
}
.upgrade-card.rarity-epic {
  border-color: #b464ff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 14px #b464ff33, inset 0 0 22px rgba(180,100,255,0.12);
}
.upgrade-card.rarity-epic .rarity-tag {
  color: #ecd8ff;
  border-color: #8a40d0;
  background: #1c1030;
}
.upgrade-card.rarity-legendary {
  border-color: #ffb020;
  border-width: 3px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 0 18px #ffb02044, inset 0 0 24px rgba(255,176,32,0.14);
}
.upgrade-card.rarity-legendary .rarity-tag {
  color: #ffe8b0;
  border-color: #d09010;
  background: #2a1c08;
  text-shadow: 0 0 8px #ffb02066;
}
.upgrade-card.rarity-common:hover,
.upgrade-card.rarity-common:focus,
.upgrade-card.rarity-common.is-focused { border-color: #c0c4c8; }
.upgrade-card.rarity-uncommon:hover,
.upgrade-card.rarity-uncommon:focus,
.upgrade-card.rarity-uncommon.is-focused { border-color: #6ff0b0; }
.upgrade-card.rarity-rare:hover,
.upgrade-card.rarity-rare:focus,
.upgrade-card.rarity-rare.is-focused { border-color: #80c0ff; }
.upgrade-card.rarity-epic:hover,
.upgrade-card.rarity-epic:focus,
.upgrade-card.rarity-epic.is-focused { border-color: #d090ff; }
.upgrade-card.rarity-legendary:hover,
.upgrade-card.rarity-legendary:focus,
.upgrade-card.rarity-legendary.is-focused {
  border-color: #ffd060;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5), 0 0 22px #ffb02055, inset 0 0 24px rgba(255,176,32,0.18);
}

/* Schematics / combo rows: legendary accent on fused combo icons */
.combo-row .combo-icon,
.schematic-card .combo-main-icon,
#comboPanel .combo-icon {
  border: 2px solid #ffb02088;
  border-radius: 10px;
  box-shadow: 0 0 10px #ffb02033;
}


/* ===== Combo schematic visibility (0.68.39) ===== */
.combo-card .cico {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 64px;
  height: 64px;
  overflow: visible;
}
.combo-card .cico img,
.combo-card .creq-part img,
.schematic-card .combo-main-icon,
.schematic-card .combo-icon {
  display: block !important;
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}
.combo-card .cico img,
.schematic-card .combo-main-icon {
  width: 56px;
  height: 56px;
}
.combo-card .cinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}
.combo-card .creq {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.combo-card .creq-part {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 1 !important;
  filter: none !important;
  min-width: 56px;
  max-width: 96px;
}
.combo-card .creq-part span {
  font-size: 0.68rem;
  line-height: 1.15;
  color: #d8c4a8;
  text-align: center;
  opacity: 1;
}
.combo-card .creq-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding-bottom: 14px;
  font-size: 1.1rem;
  color: #c8a070;
  opacity: 1;
}
.combo-card .cstate {
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}
.combo-list, .garage-combos {
  max-height: min(58vh, 560px);
}
.combo-list > .combo-card,
.garage-combos > .combo-card {
  flex: 0 0 auto;
  min-height: min-content;
}
#comboBackdrop.show {
  z-index: 95;
}
#ui.combo-open #titlePanel {
  pointer-events: none;
}

/* ===== Match setup accordion (0.68.37) ===== */
.match-setup {
  width: 100%;
  max-width: 640px;
  margin: 4px auto 12px;
  border: 2px solid #c87028;
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(48, 28, 14, 0.96), rgba(14, 8, 4, 0.94)),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(200, 100, 40, 0.04) 11px, rgba(200, 100, 40, 0.04) 12px);
  box-shadow:
    0 0 0 1px #3a2010,
    0 0 22px #c8642033,
    inset 0 1px 0 #e8a05033;
  overflow: hidden;
}
.match-setup.is-open {
  box-shadow:
    0 0 0 1px #5a3018,
    0 0 28px #ffaa4044,
    inset 0 1px 0 #ffe08022;
}
.match-setup-toggle {
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  min-height: 44px;
  padding: 10px 12px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(70, 40, 18, 0.55), rgba(20, 12, 6, 0.2));
  color: #ffe8c0;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.match-setup-toggle:hover,
.match-setup-toggle:focus-visible {
  outline: none;
  background: linear-gradient(180deg, rgba(90, 52, 22, 0.7), rgba(28, 16, 8, 0.35));
  box-shadow: inset 0 0 0 1px #e8b05066;
}
.match-setup-toggle:active {
  transform: translateY(1px);
}
.ms-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #e8b050;
  text-shadow: 0 0 8px #ffaa4033;
}
.ms-summary {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ms-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #a86830;
  background: linear-gradient(160deg, rgba(56, 32, 14, 0.95), rgba(18, 10, 4, 0.92));
  color: #ffe080;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 10px #ffaa4028, inset 0 0 10px #ffaa4014;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-setup.is-open .ms-chip {
  border-color: #e8b050;
  box-shadow: 0 0 14px #ffc04055, inset 0 0 12px #ffaa4022;
}
.ms-chevron {
  flex: 0 0 auto;
  color: #e8b050;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.9;
}
.match-setup-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 10px 12px;
  border-top: 1px solid #8a5a3088;
}
.match-setup-body[hidden],
.match-setup-body.collapsed[hidden] {
  display: none !important;
}
.match-setup-body .mode-cards,
.match-setup-body .track-cards,
.match-setup-body .diff-cards,
.match-setup-body .rule-cards {
  gap: 7px;
}
.match-setup-body .mode-card,
.match-setup-body .track-card,
.match-setup-body .diff-card,
.match-setup-body .rule-card {
  padding: 9px 10px 11px;
}
.match-setup-toggle.sel-flash,
.ms-chip.sel-flash {
  animation: selFlashPulse 0.32s ease-out;
}


/* ===== Mode cards inside Match Setup + MORE drawer (0.68.38) ===== */
.match-setup-body .mode-select {
  width: 100%;
  margin: 0 0 8px;
}
.match-setup-body .mode-cards {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.match-setup-body .mode-card {
  min-width: 140px;
  max-width: none;
  flex: 1 1 160px;
  padding: 9px 10px 11px;
}
.match-setup-body .mode-card .dname { font-size: 0.9rem; }
.match-setup-body .mode-card .ddesc { font-size: 0.68rem; }

.title-more {
  width: 100%;
  max-width: 640px;
  margin: 10px auto 4px;
  border: 1px solid #8a5a3088;
  border-radius: 10px;
  background:
    linear-gradient(165deg, rgba(36, 22, 12, 0.88), rgba(12, 8, 4, 0.86)),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(200, 100, 40, 0.025) 11px, rgba(200, 100, 40, 0.025) 12px);
  box-shadow:
    0 0 0 1px #2a1810,
    0 0 12px #c8642018,
    inset 0 1px 0 #e8a05018;
  overflow: hidden;
}
.title-more.is-open {
  border-color: #a8683088;
  box-shadow:
    0 0 0 1px #3a2010,
    0 0 16px #ffaa4028,
    inset 0 1px 0 #ffe08014;
}
.title-more-toggle {
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  min-height: 38px;
  padding: 8px 12px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(52, 30, 14, 0.4), rgba(16, 10, 5, 0.15));
  color: #d8b888;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.title-more-toggle:hover,
.title-more-toggle:focus-visible {
  outline: none;
  background: linear-gradient(180deg, rgba(70, 40, 18, 0.55), rgba(22, 12, 6, 0.28));
  box-shadow: inset 0 0 0 1px #c8884066;
  color: #ffe8c0;
}
.title-more-toggle:active { transform: translateY(1px); }
.tm-label {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #c89858;
  text-shadow: 0 0 6px #ffaa4022;
}
.title-more.is-open .tm-label { color: #e8b050; }
.tm-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #a88860;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-chevron {
  flex: 0 0 auto;
  color: #c89858;
  font-size: 0.88rem;
  line-height: 1;
  opacity: 0.85;
}
.title-more-body {
  display: block;
  padding: 4px 10px 12px;
  border-top: 1px solid #8a5a3055;
}
.title-more-body[hidden],
.title-more-body.collapsed[hidden] {
  display: none !important;
}
.title-more-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
}
.title-more-grid > button,
.title-more-grid .lb-btn-wrap {
  flex: 0 1 auto;
}
.title-more-grid .controls-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.title-more-grid button.big.test-drive-btn {
  margin: 0;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.78rem;
}
.title-more-toggle.sel-flash {
  animation: selFlashPulse 0.32s ease-out;
}

/* ===== Combo schematic icon alignment (0.68.44) ===== */
/* Result .cico was vertically centered against tall .cinfo (title+icons+effect),
   so Feedback Dynamo sat lower than Osmium Drain / Echo Plate ingredient icons.
   Align card to start; offset result icon past .cname so icon tops line up. */
.combo-card {
  align-items: start;
}
.combo-card .cico {
  align-self: start;
  margin-top: calc(0.92rem * 1.2 + 6px);
  width: 56px;
  height: 56px;
}
.combo-card .cico img,
.combo-card .creq-part img,
.combo-card .creq img,
.schematic-card .combo-main-icon,
.schematic-card .combo-icon {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  display: block !important;
}
.combo-card .creq {
  align-items: flex-start;
}
.combo-card .creq-plus {
  align-self: flex-start;
  height: 56px;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.combo-card .cstate {
  align-self: center;
}

/* ===== Wide garage density (0.68.45) =====
   Big screens: multi-col hulls / schematics / upgrades so more fit without scroll.
   Compact single-column + scrollbar stays the default for narrow / mobile. */
@media (min-width: 1080px) and (min-height: 640px) {
  #garagePanel {
    max-width: min(1040px, 92vw);
    width: min(1040px, 92vw);
  }
  #comboPanel {
    max-width: min(1040px, 92vw);
    width: min(1040px, 92vw);
  }
  #scrapYardPanel {
    max-width: min(1040px, 92vw);
    width: min(1040px, 92vw);
  }
  .garage-list,
  .garage-hulls,
  .combo-list,
  .garage-combos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    max-height: min(68vh, 640px);
    align-content: start;
  }
  #garagePanel.show-inline .garage-list,
  #garagePanel.show-inline .garage-hulls,
  #garagePanel.show-inline .garage-combos {
    max-height: min(34vh, 320px);
  }
  .garage-hulls .hulls-head {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1400px) and (min-height: 780px) {
  #garagePanel {
    max-width: min(1280px, 94vw);
    width: min(1280px, 94vw);
  }
  #comboPanel {
    max-width: min(1280px, 94vw);
    width: min(1280px, 94vw);
  }
  #scrapYardPanel {
    max-width: min(1280px, 94vw);
    width: min(1280px, 94vw);
  }
  .garage-list,
  .garage-hulls,
  .combo-list,
  .garage-combos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: min(72vh, 760px);
    gap: 10px 14px;
  }
  #garagePanel.show-inline .garage-list,
  #garagePanel.show-inline .garage-hulls,
  #garagePanel.show-inline .garage-combos {
    max-height: min(36vh, 360px);
  }
}

/* Very tall windows: raise list ceiling so 2–3 cols often fit everything */
@media (min-width: 1080px) and (min-height: 900px) {
  .garage-list,
  .garage-hulls,
  .combo-list,
  .garage-combos {
    max-height: min(78vh, 860px);
  }
}


/* Single-use hex tray — drag to reorder; left = E/Q active; exactly 5 slots */
.kit-col.kit-hex { min-width: 120px; flex: 0 1 auto; }
.hud-hex-tray {
  display: grid;
  grid-template-columns: repeat(5, 44px);
  gap: 5px;
  min-height: 36px;
  align-content: flex-start;
  max-width: calc(5 * 44px + 4 * 5px);
}
.hex-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 3px;
  border-radius: 7px;
  background: rgba(20, 12, 8, 0.88);
  border: 2px solid #ff8060;
  box-shadow: inset 0 1px 0 #ffb09033;
  cursor: grab;
  position: relative;
  user-select: none;
}
.hex-slot img { width: 34px !important; height: 34px !important; border-radius: 4px; display: block; pointer-events: none; }
.hex-slot.hex-active {
  border-color: #ffe080;
  box-shadow: 0 0 12px #ff806088, inset 0 1px 0 #ffe08044;
}
.hex-slot.hex-armed {
  border-color: #ff80c0;
  box-shadow: 0 0 14px #ff80c099;
}
.hex-slot.hex-empty {
  opacity: 0.35;
  cursor: default;
  border-style: dashed;
  border-color: #8a5040;
  min-width: 44px;
}
.hex-slot.hex-drag-over { outline: 2px solid #ffe080; outline-offset: 1px; }
.hex-slot .hex-key {
  position: absolute; bottom: -1px; right: 1px;
  font-size: 0.45rem; letter-spacing: 0.04em; color: #ffe080; font-weight: 700;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.cockpit-compact .hud-hex-tray { gap: 5px; max-width: calc(5 * 44px + 4 * 5px); }
@media (max-width: 720px) {
  .kit-col.kit-hex { min-width: 96px; }
}
html.phone-mode .cockpit-compact .hud-hex-tray { gap: 4px; }