* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0a0812;
  font-family: 'Bahnschrift', 'Segoe UI', 'Consolas', 'Lucida Console', monospace;
  color: #d8f4ff;
  user-select: none;
  -webkit-user-select: none;
}

#app { position: fixed; inset: 0; }
#app canvas { display: block; width: 100%; height: 100%; }
#versus-divider { display: none; position: fixed; z-index: 9; background: rgba(255,255,255,.72); box-shadow: 0 0 10px rgba(90,220,255,.65); pointer-events: none; }
#battle-hud { display: none; position: fixed; z-index: 12; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5px 14px; background: rgba(10,14,26,.68); border: 1px solid rgba(255,170,60,.55); border-radius: 8px; color: #ffe0b0; letter-spacing: .1em; font-size: clamp(10px, 1.2vmin, 15px); pointer-events: none; }
.battle-mode #battle-hud { display: flex; flex-direction: column; gap: 4px; }
body.battle-mode:not(.multi-local) #battle-hud { top: 2vh; transform: translateX(-50%); }
.battle-bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
#battle-time { font-weight: 800; font-size: 1.35em; color: #ffd9a0; }
#battle-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 16px; font-size: .82em; letter-spacing: .02em; }
.roster-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; }
.roster-row b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.roster-row span { opacity: .8; font-size: .92em; }
.roster-row i { font-style: normal; font-size: .85em; letter-spacing: .06em; opacity: .9; }
.roster-row.alive { color: #cfe6ff; }
.roster-row.out { color: #ff8a8a; opacity: .72; }
.roster-row.winner { color: #ffd24a; font-weight: 700; }
.roster-row.me { text-shadow: 0 0 8px rgba(255,255,255,.35); }
#battle-overlay { position: fixed; inset: 0; display: none; z-index: 14; pointer-events: none; }
.battle-mode #battle-overlay { display: block; }
.battle-banner { position: absolute; transform: translate(-50%, -50%); font: 900 clamp(20px, 4.2vmin, 46px)/1 'Arial Black', 'Segoe UI', sans-serif; letter-spacing: .08em; text-shadow: 3px 3px 0 rgba(0,0,0,.8), 0 0 24px rgba(0,0,0,.6); white-space: nowrap; }
.battle-banner.win { color: #6dff8a; }
.battle-banner.lose { color: #ff6d6d; }
.battle-mode #hud > .panel.tl,
.battle-mode #hud > .panel.tc,
.battle-mode #hud > .tr { display: none; }
#versus-hud { display: none; position: fixed; inset: 0; z-index: 12; pointer-events: none; color: #eaf8ff; }
.versus-mode #hud > .panel, .versus-mode #hud > .tr { display: none; }
.versus-mode #versus-hud { display: block; }
.versus-mode #versus-divider { display: block; }
.v-card { position: absolute; min-width: 170px; padding: 8px 12px; background: rgba(10,14,26,.78); border: 1px solid rgba(90,220,255,.6); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); font-size: clamp(10px, 1.2vmin, 16px); line-height: 1.45; }
#v-p1 { top: 2vh; left: 2vw; }
#v-p2 { bottom: 2vh; right: 2vw; border-color: rgba(51,170,255,.75); }
.v-speed { font-size: clamp(18px, 2.8vmin, 34px); font-weight: 800; }
.v-bar { height: 7px; margin: 3px 0; background: rgba(20,28,44,.9); }
.v-bar > div { height: 100%; transform-origin: left; background: linear-gradient(90deg, #37e88a, #b9ff5e); }
.versus-options { display: none; margin: 1vmin auto; gap: 1vmin; align-items: center; justify-content: center; flex-wrap: wrap; color: #6fbcd8; font-size: 11px; letter-spacing: .08em; }
.versus-options.visible { display: flex; }
.versus-options select { margin-left: 6px; padding: 6px; color: #eaf8ff; background: #111a2b; border: 1px solid rgba(90,220,255,.6); }
.mode-row, .split-choice { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.btn.mode { padding: .65em 1em; font-size: clamp(10px, 1.2vmin, 15px); }
.btn.mode.active { background: rgba(90,220,255,.32); border-color: #6dd8ff; }
.p2-controls { width: 100%; text-align: center; font-size: 9px; color: #8aa; }
.p2-ready-row { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; color: #ffb84d; font-size: 11px; }
.p2-ready-row.ready { color: #4aff88; }
#versus-hud.vertical #v-p1 { top: 2vh; left: 2vw; }
#versus-hud.vertical #v-p2 { top: 2vh; bottom: auto; right: 2vw; }
.versus-horizontal #versus-divider { left: 0; right: 0; top: 50%; height: 3px; }
.versus-vertical #versus-divider { top: 0; bottom: 0; left: 50%; width: 3px; }

#dmg-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 18vmin rgba(255,30,50,.0);
  transition: box-shadow .3s;
  z-index: 5;
}
#dmg-vignette.flash {
  animation: dmgf .45s ease-out;
}
@keyframes dmgf {
  0% { box-shadow: inset 0 0 22vmin rgba(255,30,60,.55); }
  100% { box-shadow: inset 0 0 18vmin rgba(255,30,50,0); }
}

#hud {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10;
}

.panel {
  position: absolute;
  background: linear-gradient(160deg, rgba(10,14,26,.82), rgba(10,14,26,.62));
  border: 1px solid rgba(90,220,255,.35);
  clip-path: polygon(0 0, calc(100% - 1.4vmin) 0, 100% 1.4vmin, 100% 100%, 1.4vmin 100%, 0 calc(100% - 1.4vmin));
  padding: 1.2vmin 1.6vmin;
}
.panel.tl { top: 2vh; left: 2vw; }
.panel.tc { top: 2vh; left: 50%; transform: translateX(-50%); display: flex; gap: 2.4vmin; }
.panel.bl { bottom: 2.5vh; left: 2vw; min-width: 26vmin; }

#item-slot, #ability-slot {
  display: none;
  align-items: center;
  gap: 1.2vmin;
  background: rgba(20,28,44,.85);
  border: 1px solid rgba(90,220,255,.4);
  padding: .8vmin 1.2vmin;
  margin-bottom: 1vmin;
  clip-path: polygon(0 0, calc(100% - 1vmin) 0, 100% 1vmin, 100% 100%, 0 100%);
}
#item-slot.visible, #ability-slot.visible { display: flex; }
#ability-slot { border-color: rgba(214,109,255,.55); }
#ability-slot.empty { opacity: .42; }
#ability-slot.active { box-shadow: 0 0 14px rgba(214,109,255,.5); }
#item-slot.rolling { border-color: rgba(255,220,74,.9); box-shadow: 0 0 14px rgba(255,220,74,.35); }
#item-icon { font-size: clamp(18px, 3vmin, 34px); line-height: 1; filter: drop-shadow(0 0 6px rgba(255,255,255,.4)); }
.item-text { display: flex; flex-direction: column; line-height: 1.15; }
#item-name { font-size: clamp(10px, 1.4vmin, 17px); font-weight: 700; letter-spacing: .1em; color: #fff; }
.item-hint { font-size: clamp(8px, 1vmin, 12px); color: #6fbcd8; letter-spacing: .18em; }
.panel.br { bottom: 2.5vh; right: 2vw; min-width: 28vmin; }

.lbl {
  font-size: clamp(9px, 1.05vmin, 14px);
  letter-spacing: .18em;
  color: #6fbcd8;
}
.lbl.mini { font-size: clamp(8px, .95vmin, 13px); width: 4.5em; }

.big { font-size: clamp(20px, 3.4vmin, 44px); font-weight: 900; color: #fff; text-shadow: 0 0 12px rgba(90,220,255,.7); }
.mid { font-size: clamp(15px, 2.2vmin, 30px); font-weight: 700; color: #ffd24a; text-shadow: 0 0 10px rgba(255,210,74,.5); }
.huge { font-size: clamp(28px, 4.6vmin, 60px); font-weight: 900; color: #fff; text-shadow: 0 0 14px rgba(90,220,255,.8); }
.kmh { font-size: clamp(9px, 1.1vmin, 14px); color: #6fbcd8; margin-left: .5em; }
.mono { font-variant-numeric: tabular-nums; font-size: clamp(11px, 1.5vmin, 19px); font-weight: 700; }
.accent { color: #4affc8; }

.pos-row, .lap-row { display: flex; align-items: baseline; gap: 1vmin; }
.time-row { display: flex; flex-direction: column; align-items: center; gap: .2vmin; }

.bar {
  width: 100%;
  height: 1.5vmin;
  min-height: 10px;
  background: rgba(20,28,44,.85);
  border: 1px solid rgba(90,220,255,.25);
  overflow: hidden;
  margin-top: .5vmin;
}
.bar > div {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transition: transform .12s linear;
}
.bar.hp > div { background: linear-gradient(90deg, #37e88a, #b9ff5e); }
.bar.hp > div.low { background: linear-gradient(90deg, #ff4460, #ff9944); }
.bar.spd > div { background: linear-gradient(90deg, #38b6ff, #7df0ff); }
.bar.boost { flex: 1; }
.bar.boost > div { background: linear-gradient(90deg, #ff9a3d, #ffe45e); }
.bar.heat > div { background: linear-gradient(90deg, #ffb84d, #ff5533); }
.bar.heat > div.hot { background: linear-gradient(90deg, #ff3322, #ff00cc); }

.gauge-row { display: flex; align-items: center; gap: 1vmin; margin-top: .7vmin; }
.speed { display: flex; align-items: baseline; justify-content: flex-end; }

.shield { color: #38b6ff; font-size: clamp(13px, 1.9vmin, 24px); margin-left: auto; text-shadow: 0 0 8px rgba(56,182,255,.8); }

.tr { position: absolute; top: 2vh; right: 2vw; text-align: right; }
#minimap {
  background: rgba(10,14,26,.72);
  border: 1px solid rgba(90,220,255,.35);
  clip-path: polygon(0 0, calc(100% - 1.4vmin) 0, 100% 1.4vmin, 100% 100%, 0 100%, 0 1.4vmin);
}
#cam-name {
  margin-top: .6vmin;
  font-size: clamp(10px, 1.2vmin, 16px);
  letter-spacing: .2em;
  color: #ff66dd;
  opacity: 0;
  transition: opacity .4s;
  text-shadow: 0 0 10px rgba(255,102,221,.8);
}

#msg {
  position: absolute;
  top: 13vh; left: 50%;
  transform: translateX(-50%);
  font-size: clamp(15px, 2.4vmin, 32px);
  font-weight: 700;
  letter-spacing: .14em;
  text-shadow: 0 0 16px currentColor;
  opacity: 0;
  transition: opacity .25s;
  white-space: nowrap;
}

#wrong-way {
  display: none;
  position: absolute;
  top: 22vh; left: 50%;
  transform: translateX(-50%);
  font-size: clamp(18px, 3vmin, 40px);
  font-weight: 900;
  color: #ff4460;
  letter-spacing: .2em;
  text-shadow: 0 0 18px rgba(255,68,96,.9);
}

#countdown {
  position: absolute;
  top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(64px, 14vmin, 190px);
  font-weight: 900;
  text-shadow: 0 0 40px currentColor;
}

.screen {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(6,8,16,.78);
  backdrop-filter: blur(4px);
  z-index: 20;
}
.screen.visible { display: flex; }

.title-box, .box {
  text-align: center;
  padding: 4vmin 6vmin;
  border: 1px solid rgba(90,220,255,.4);
  background: linear-gradient(160deg, rgba(12,16,30,.92), rgba(12,16,30,.75));
  clip-path: polygon(2vmin 0, 100% 0, 100% calc(100% - 2vmin), calc(100% - 2vmin) 100%, 0 100%, 0 2vmin);
  max-width: 92vw;
  max-height: 92vh;
  overflow: auto;
}

h1 {
  font-size: clamp(42px, 9vmin, 120px);
  font-weight: 900;
  color: #fff;
  letter-spacing: .06em;
  text-shadow: 0 0 30px rgba(90,220,255,.9);
}
h1 span { color: #ff4488; text-shadow: 0 0 30px rgba(255,68,136,.9); }
h2 { font-size: clamp(22px, 3.6vmin, 44px); color: #5adcff; letter-spacing: .2em; margin-bottom: 2vmin; }
.tagline { margin: 1.2vmin 0 1.5vmin; letter-spacing: .3em; color: #8fb8cf; font-size: clamp(10px, 1.5vmin, 18px); }
.select-label { color: #5adcff; letter-spacing: .28em; font-size: clamp(9px, 1.2vmin, 15px); margin-bottom: 1vmin; }
.mech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13vmin, 1fr));
  gap: .8vmin;
  max-width: 78vmin;
  max-height: 22vmin;
  overflow-y: auto;
  margin: 0 auto 2vmin;
  padding: .4vmin;
  pointer-events: auto;
}
.mech-card {
  font-family: inherit;
  background: rgba(16,24,40,.65);
  border: 1px solid rgba(90,220,255,.28);
  color: #d8f4ff;
  padding: 1vmin .8vmin;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  display: flex; flex-direction: column; gap: .4vmin;
  clip-path: polygon(.8vmin 0, 100% 0, 100% calc(100% - .8vmin), calc(100% - .8vmin) 100%, 0 100%, 0 .8vmin);
}
.mech-card:hover { background: rgba(90,220,255,.18); border-color: rgba(90,220,255,.55); }
.mech-card.selected { background: linear-gradient(180deg, rgba(255,210,74,.35), rgba(255,140,40,.25)); border-color: #ffd24a; color: #fff; box-shadow: 0 0 16px rgba(255,210,74,.45); }
.mech-card .m-name { font-size: clamp(10px, 1.4vmin, 16px); font-weight: 700; letter-spacing: .08em; }
.mech-card .m-stat { font-size: clamp(8px, 1.05vmin, 12px); color: #6fbcd8; font-weight: 400; }
.mech-card.selected .m-stat { color: rgba(255,255,255,.85); }
.foot { margin-top: 3vmin; color: #58707f; font-size: clamp(9px, 1.2vmin, 14px); letter-spacing: .08em; }

.btn {
  font-family: inherit;
  font-size: clamp(14px, 1.9vmin, 24px);
  font-weight: 700;
  letter-spacing: .18em;
  color: #04121a;
  background: linear-gradient(180deg, #5adcff, #29a8cc);
  border: none;
  padding: 1.4vmin 4vmin;
  cursor: pointer;
  clip-path: polygon(1vmin 0, 100% 0, calc(100% - 1vmin) 100%, 0 100%);
  transition: filter .15s, transform .1s;
}
.btn.main { font-size: clamp(18px, 2.8vmin, 36px); padding: 2vmin 6vmin; }
.btn:hover { filter: brightness(1.2); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: #5adcff; border: 1px solid rgba(90,220,255,.5); clip-path: none; }

.row { display: flex; gap: 2vmin; justify-content: center; margin-top: 3vmin; flex-wrap: wrap; }

.controls-hint {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .8vmin 2.4vmin;
  margin-top: 3vmin;
  color: #7fa8bd;
  font-size: clamp(10px, 1.4vmin, 17px);
  text-align: left;
}
.controls-hint.wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.controls-hint b { color: #ffd24a; }

#results-table {
  margin: 0 auto;
  border-collapse: collapse;
  font-size: clamp(11px, 1.7vmin, 22px);
  min-width: min(70vw, 720px);
}
#results-table td, #results-table th {
  padding: .8vmin 2.4vmin;
  border-bottom: 1px solid rgba(90,220,255,.18);
  text-align: left;
}
#results-table tr.me td { color: #ffd24a; font-weight: 700; text-shadow: 0 0 8px rgba(255,210,74,.4); }
#results-table td:first-child { color: #6fbcd8; }

#touch { display: none; position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#touch.visible { display: block; }
.t-zone {
  position: absolute;
  left: 0; bottom: 0;
  width: 52%; height: 55%;
  pointer-events: auto;
  background: radial-gradient(ellipse at bottom left, rgba(90,220,255,.09), transparent 65%);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 4vmin; color: rgba(160,230,255,.5);
  font-size: 26px;
  letter-spacing: .2em;
  touch-action: none;
}
.t-cluster {
  position: absolute;
  right: 4vmin; bottom: 4vmin;
  width: 52vmin; height: 52vmin;
  max-width: 280px; max-height: 280px;
  pointer-events: none;
}
.t-cluster .t-btn { position: absolute; pointer-events: auto; }
.t-top    { top: 0; left: 50%; transform: translateX(-50%); }
.t-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.t-left   { top: 50%; left: 0; transform: translateY(-50%); }
.t-right  { top: 50%; right: 0; transform: translateY(-50%); }
.t-ability { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16vmin; height: 16vmin; }
.t-btn {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .08em;
  color: #eaf8ff;
  background: rgba(16,24,40,.66);
  border: 2px solid rgba(90,220,255,.55);
  border-radius: 50%;
  width: 19vmin; height: 19vmin;
  max-width: 104px; max-height: 104px;
  font-size: clamp(11px, 1.8vmin, 16px);
  touch-action: none;
  box-shadow: 0 0 12px rgba(90,220,255,.15);
}
.t-btn.on { background: rgba(90,220,255,.45); box-shadow: 0 0 22px rgba(90,220,255,.5); }
#t-boost { border-color: rgba(255,170,60,.7); color: #ffe0b0; }
#t-boost.on { background: rgba(255,170,60,.4); box-shadow: 0 0 22px rgba(255,170,60,.5); }
#t-fire { border-color: rgba(255,90,120,.7); color: #ffd2da; }
#t-fire.on { background: rgba(255,90,120,.4); }
#t-special { border-color: rgba(180,120,255,.7); color: #e6d4ff; }
#t-special.on { background: rgba(180,120,255,.4); }
#t-ability { border-color: rgba(255,210,74,.8); color: #fff0a0; }
#t-ability.on { background: rgba(255,210,74,.42); }
.t-brake {
  position: absolute;
  right: calc(4vmin + 56vmin); bottom: 6vmin;
  width: 15vmin; height: 15vmin;
  max-width: 84px; max-height: 84px;
  pointer-events: auto;
  border-radius: 18px;
}
.t-pause {
  position: absolute;
  top: 2vmin; left: 50%;
  transform: translateX(-50%);
  width: 12vmin; height: 9vmin;
  max-width: 64px; max-height: 46px;
  pointer-events: auto;
  font-family: inherit;
  font-size: 16px;
  color: #d8f4ff;
  background: rgba(16,24,40,.6);
  border: 1px solid rgba(90,220,255,.5);
  border-radius: 10px;
  touch-action: none;
}
.battle-mode .t-pause { left: auto; right: 2vmin; transform: none; }

#rotate-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 100;
  background: #0a0812;
  align-items: center; justify-content: center;
  text-align: center;
}
body.is-touch.portrait #rotate-overlay { display: flex; }
.rotate-msg { color: #5adcff; letter-spacing: .25em; }
.rotate-icon { font-size: 64px; margin-bottom: 16px; animation: rot 1.6s ease-in-out infinite; }
.rotate-msg .small { color: #58707f; font-size: 12px; margin-top: 12px; letter-spacing: .1em; }
@keyframes rot {
  0%, 20% { transform: rotate(0); }
  60%, 100% { transform: rotate(90deg); }
}

@media (max-aspect-ratio: 4/5) {
  .panel.tc { display: none; }
}

/* Menú jerárquico y HUD multijugador local */
#title {
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: linear-gradient(90deg, rgba(7, 8, 18, .34), rgba(7, 8, 18, .12) 52%, rgba(7, 8, 18, .38)), url('../assets/mech-karts-title-screen.png') center / cover no-repeat;
}
.title-mode #hud, .title-mode #battle-hud, .title-mode #local-hud, .title-mode #status-panel { display: none !important; }
.menu-panel { width: min(760px, 94vw); max-height: 94vh; overflow: auto; scrollbar-width: thin; scrollbar-color: #5adcff #111b2b; text-align: center; padding: clamp(14px, 3vmin, 34px); border: 1px solid rgba(90,220,255,.48); background: linear-gradient(160deg, rgba(8,12,24,.95), rgba(12,16,32,.82)); box-shadow: 0 18px 70px rgba(0,0,0,.55), inset 0 0 45px rgba(90,220,255,.05); }
.menu-panel::-webkit-scrollbar { width: 8px; }
.menu-panel::-webkit-scrollbar-track { background: #111b2b; }
.menu-panel::-webkit-scrollbar-thumb { background: #3aa6c8; border-radius: 8px; }
.menu-panel header h1 { font-size: clamp(34px, 7vmin, 78px); margin: 0; }
.menu-panel header h2 { margin: .3em 0 .7em; }
.menu-tagline { color: #88aeca; letter-spacing: .2em; font-size: clamp(9px, 1.4vmin, 14px); margin: .5em 0 1.4em; }
.main-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-list, .settings-list { display: grid; gap: 10px; max-width: 620px; margin: 0 auto 14px; }
.menu-btn { min-height: 46px; font: 800 clamp(12px, 1.8vmin, 19px)/1.1 inherit; letter-spacing: .12em; color: #eaf9ff; background: linear-gradient(180deg, rgba(30,52,78,.96), rgba(14,29,48,.96)); border: 1px solid rgba(90,220,255,.5); padding: 11px 16px; cursor: pointer; transition: transform .1s, filter .12s, border-color .12s; }
.menu-btn:hover, .menu-btn:focus-visible { filter: brightness(1.22); border-color: #ffd24a; outline: 2px solid rgba(255,210,74,.42); outline-offset: 2px; }
.menu-btn:active { transform: scale(.98); }
.menu-btn.primary { background: linear-gradient(180deg, #ffbf42, #d87224); color: #171019; border-color: #ffe49a; }
.menu-btn.ghost { margin-top: 12px; background: transparent; color: #7adfff; }
.menu-btn.compact { min-width: 130px; min-height: 40px; padding: 8px 12px; }
.menu-btn.ready, .menu-btn.active { background: linear-gradient(180deg, #49d69a, #17856b); border-color: #8effd2; }
.menu-btn:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .45; }
.menu-copy, .coming-soon, .control-map { color: #c8e8f5; font-size: clamp(14px, 2vmin, 20px); line-height: 1.5; padding: 20px; }
.info-copy { text-align: left; }
.info-copy a { color: #8fe7ff; }
.coming-soon { color: #ffd24a; font-size: clamp(25px, 5vmin, 50px); font-weight: 900; letter-spacing: .16em; }
.player-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.player-setup { display: grid; gap: 8px; padding: 12px; text-align: left; background: rgba(20,31,50,.78); border: 1px solid rgba(90,220,255,.28); }
.player-setup.is-ready { border-color: #49d69a; box-shadow: inset 0 0 20px rgba(73,214,154,.08); }
.player-setup h3 { color: #ffd24a; letter-spacing: .12em; }
.player-setup label, .prepare-settings label, .control-device { display: grid; gap: 5px; color: #79bfd9; font-size: 12px; letter-spacing: .08em; }
.player-setup select, .prepare-settings select, .settings-list select, .control-device select { width: 100%; min-height: 42px; color: #eaf9ff; background: #111b2b; border: 1px solid #477894; padding: 7px; }
.device-state { color: #65e8ae; font-size: 11px; }
.device-state.bad, .validation-error { color: #ff7185; }
.validation-error, .menu-notice { margin: 10px 0; font-weight: 700; }
.menu-notice { color: #65e8ae; }
.prepare-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.prepare-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.setting-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, .65fr) 42px; gap: 10px; align-items: center; text-align: left; color: #d8eff8; padding: 7px 10px; background: rgba(20,31,50,.6); }
.setting-row select { grid-column: 2 / 4; }
.setting-row input[type="range"] { width: 100%; accent-color: #5adcff; }
.control-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.control-device { max-width: 520px; margin: auto; }
#local-hud { position: fixed; inset: 0; display: none; z-index: 13; pointer-events: none; }
.multi-local #local-hud { display: block; }
.multi-local #hud > .panel, .multi-local #hud > .tr { display: none; }
.local-card { position: fixed; min-width: 145px; padding: 7px 10px; color: #eaf9ff; background: rgba(7,13,24,.78); border: 1px solid var(--player-color, #5adcff); font-size: clamp(9px, 1.25vmin, 14px); box-shadow: 0 0 14px rgba(0,0,0,.45); }
.local-card b { color: var(--player-color, #5adcff); }
.local-card .local-bar { height: 5px; margin-top: 5px; background: rgba(255,255,255,.14); overflow: hidden; }
.local-card .local-bar span { display: block; height: 100%; background: #49d69a; transform-origin: left; }
.local-card .local-item { margin-top: 4px; font-weight: 700; letter-spacing: .04em; }
.local-card .local-hearts { margin-top: 3px; color: #ff6d8a; letter-spacing: 2px; font-size: .95em; }
#status-panel { display: none; position: fixed; z-index: 12; color: #dff6ff; background: radial-gradient(circle at center, rgba(35,55,80,.94), rgba(7,12,23,.96)); border: 1px solid rgba(90,220,255,.5); align-items: center; justify-content: center; text-align: center; pointer-events: none; }
#status-panel.visible { display: flex; }
.status-inner { display: grid; gap: 7px; padding: 15px; }
.status-inner strong { color: #ffd24a; font-size: 1.4em; }
.status-map { width: min(180px, 70%); height: auto; margin: auto; opacity: .9; }
.status-standings { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: .82em; text-align: left; }
@media (max-width: 600px) {
  .main-menu, .player-grid { grid-template-columns: 1fr; }
  .menu-panel { max-height: calc(100vh - 12px); padding: 12px; }
  .menu-panel header h1 { font-size: 30px; }
  .menu-panel header h2 { font-size: 16px; }
  .menu-btn { min-height: 44px; padding: 8px 10px; }
  .prepare-actions { grid-template-columns: 1fr; }
  .setting-row { grid-template-columns: 1fr minmax(110px, .8fr) 36px; }
}

@media (max-width: 600px) {
  #title .menu-panel header h1 { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Tratamiento comic compartido con Furia GP: rotulación fuerte y cajas de carrera. */
:root {
  --comic-orange: #ff9f1c;
  --comic-cyan: #22d3ee;
  --comic-ink: #111622;
  --comic-panel: rgba(13, 16, 24, .9);
}

#title {
  background: linear-gradient(180deg, rgba(8, 10, 17, .18), rgba(8, 10, 17, .7));
}

.menu-panel {
  width: min(790px, 94vw);
  padding: clamp(18px, 3.5vmin, 38px);
  border: 0;
  border-left: 6px solid var(--comic-orange);
  border-top: 2px solid var(--comic-cyan);
  background: var(--comic-panel);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .32), 0 22px 55px rgba(0, 0, 0, .58);
}

.menu-panel header h1 {
  font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-style: italic;
  letter-spacing: -.05em;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .65), 0 0 24px rgba(90, 220, 255, .5);
}
.menu-panel header h1 span { color: var(--comic-orange); text-shadow: 0 4px 0 rgba(0, 0, 0, .65); }
.menu-panel header h2 {
  color: var(--comic-orange);
  font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-style: italic;
  letter-spacing: .12em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .6);
}
.menu-tagline { color: #d4e6f2; font-weight: 800; text-shadow: 0 2px 0 #000; }

.menu-btn {
  min-height: 48px;
  border: 0;
  border-left: 5px solid var(--comic-cyan);
  border-radius: 0;
  padding: 11px 18px;
  font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-style: italic;
  letter-spacing: .08em;
  color: #f4f7ff;
  background: #27304a;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
.menu-btn:hover, .menu-btn:focus-visible { filter: brightness(1.18); border-color: var(--comic-orange); outline: 0; transform: translateY(-1px); }
.menu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.menu-btn.primary {
  color: #171207;
  background: linear-gradient(100deg, var(--comic-orange), #ffbe55);
  border-left-color: #ffe8a9;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.menu-btn.ghost { border: 2px solid #46536f; background: transparent; color: #d4e6f2; }
.menu-btn.ready, .menu-btn.active { background: linear-gradient(100deg, #9dff00, #55d66d); color: #101610; border-left-color: #dfff9a; }

.player-setup, .setting-row {
  border: 0;
  border-left: 4px solid var(--comic-cyan);
  border-radius: 0;
  background: rgba(39, 48, 74, .88);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
.player-setup.is-ready { border-left-color: #9dff00; }

/* Portada tipo portal: tarjeta editorial/comic con la paleta real de Mech Karts. */
#title {
  background: linear-gradient(180deg, rgba(18, 14, 20, .12), rgba(18, 14, 20, .72));
}

#title .menu-panel {
  position: relative;
  width: min(820px, 92vw);
  padding: clamp(22px, 4vmin, 42px);
  border: 5px solid #8deaff;
  border-left-width: 9px;
  background: rgba(17, 18, 23, .9);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .55), 0 24px 60px rgba(0, 0, 0, .56);
}
#title .menu-panel::before {
  content: 'KART RACER';
  position: absolute;
  top: 12px;
  left: 20px;
  padding: 7px 15px 6px;
  color: #09101e;
  background: #ff4f9a;
  border: 3px solid #09101e;
  font: 900 12px/1 'Arial Black', 'Segoe UI', sans-serif;
  letter-spacing: .12em;
  transform: skew(-8deg);
}
#title .menu-panel::after {
  content: '03';
  position: absolute;
  top: 12px;
  right: 18px;
  padding: 7px 11px 6px;
  color: #09101e;
  background: #8deaff;
  border: 3px solid #09101e;
  font: 900 13px/1 'Arial Black', 'Segoe UI', sans-serif;
  transform: skew(-8deg);
}
#title .menu-panel header h1 {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 8px 18px 5px;
  color: #09101e;
  background: #eaf8ff;
  border: 3px solid #09101e;
  font: 900 clamp(34px, 6vmin, 68px)/.95 'Arial Black', 'Segoe UI', sans-serif;
  font-style: italic;
  letter-spacing: -.03em;
  text-shadow: 3px 3px 0 rgba(141, 234, 255, .35);
  transform: skew(-5deg);
}
#title .menu-panel header h1 span {
  color: #ff4f9a;
  text-shadow: 3px 3px 0 #09101e;
}
#title .menu-panel header h2 { display: none; }
#title .menu-tagline {
  margin: 4px auto 18px;
  color: #c8eeff;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(12px, 1.55vmin, 16px);
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 2px 2px 0 #000;
}
#title .main-menu { gap: 12px; }
#title .menu-btn {
  min-height: 50px;
  border: 3px solid #171820;
  border-left-width: 6px;
  border-radius: 0;
  color: #eaf8ff;
  background: #202a42;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  font: 900 clamp(13px, 1.8vmin, 19px)/1 'Arial Black', 'Segoe UI', sans-serif;
  font-style: italic;
  letter-spacing: .08em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}
#title .menu-btn:hover, #title .menu-btn:focus-visible {
  color: #09101e;
  background: #8deaff;
  border-color: #09101e;
  filter: none;
  transform: translate(-1px, -1px);
  outline: 0;
  text-shadow: none;
}
#title .menu-btn.primary {
  position: relative;
  color: #171820;
  background: #ff4f9a;
  border-color: #09101e;
  text-shadow: none;
}
#title .menu-btn.primary::after {
  content: '→';
  margin-left: .7em;
  font-size: 1.15em;
}
#title .menu-btn.ghost { border-color: #8deaff; }
#title .menu-btn.ready, #title .menu-btn.active { color: #09101e; background: #8deaff; border-color: #09101e; }

body.is-touch #touch .t-zone {
  left: 4vmin; bottom: 8vmin; width: 30vmin; height: 30vmin; min-width: 150px; min-height: 150px;
  max-width: 220px; max-height: 220px; padding: 0; border: 3px solid rgba(141,234,255,.55); border-radius: 50%;
  background: radial-gradient(circle, rgba(90,220,255,.18), rgba(8,16,30,.28) 62%, rgba(8,16,30,.08) 68%);
  align-items: center; justify-content: center; box-shadow: inset 0 0 0 5vmin rgba(90,220,255,.08), 0 0 20px rgba(90,220,255,.18);
}
body.is-touch #touch .t-zone span { display: none; }
body.is-touch #touch .t-zone i { position: absolute; left: 50%; top: 50%; width: 11vmin; height: 11vmin; min-width: 58px; min-height: 58px; max-width: 82px; max-height: 82px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #b9f3ff, #5ac7e8 58%, #2c7188); border: 3px solid rgba(220,250,255,.85); box-shadow: 0 0 16px rgba(90,220,255,.55), inset 0 2px 6px rgba(255,255,255,.35); pointer-events: none; }
body.is-touch #touch .t-cluster { top: 50%; right: 3vmin; bottom: auto; transform: translateY(-50%); width: 52vmin; height: 52vmin; max-width: 380px; max-height: 380px; }
body.is-touch #touch .t-cluster .t-btn { width: 16vmin; height: 16vmin; min-width: 80px; min-height: 80px; max-width: 118px; max-height: 118px; font-size: clamp(11px, 2vmin, 16px); color: rgba(234,248,255,.96); background: rgba(16,24,40,.32); border: 3px solid rgba(141,234,255,.68); box-shadow: 0 0 18px rgba(90,220,255,.18), inset 0 0 18px rgba(141,234,255,.08); }
body.is-touch #touch .t-cluster .t-top { top: 0; left: 50%; transform: translateX(-50%); }
body.is-touch #touch .t-cluster .t-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
body.is-touch #touch .t-cluster .t-ability { top: 50%; left: 50%; width: 16vmin; height: 16vmin; transform: translate(-50%, -50%); }
body.is-touch #touch .t-cluster .t-left { top: 50%; left: 0; transform: translateY(-50%); }
body.is-touch #touch .t-cluster .t-right { top: 50%; right: 0; transform: translateY(-50%); }
body.is-touch #touch .t-brake { right: 58vmin; bottom: 8vmin; width: 15vmin; height: 10vmin; font-size: clamp(10px, 2vmin, 15px); background: rgba(16,24,40,.32); }
body.is-touch #hud .panel.bl { top: 8vmin; bottom: auto; left: 50%; transform: translateX(-50%); min-width: 0; width: auto; display: flex; gap: .8vmin; padding: .7vmin; }
body.is-touch #hud .panel.bl #item-slot, body.is-touch #hud .panel.bl #ability-slot { margin: 0; padding: .55vmin .8vmin; gap: .6vmin; }
body.is-touch #hud .panel.bl #item-icon, body.is-touch #hud .panel.bl #ability-icon { font-size: clamp(14px, 2.4vmin, 24px); }
body.is-touch #hud .panel.bl #item-name, body.is-touch #hud .panel.bl .item-hint, body.is-touch #hud .panel.bl #ability-name, body.is-touch #hud .panel.bl #ability-hint { font-size: clamp(7px, 1vmin, 11px); letter-spacing: .06em; }
body.is-touch #hud .panel.bl .bar-row, body.is-touch #hud .panel.bl .bar { display: none; }
body.is-touch #hud .tr { top: 2vmin; right: 2vmin; }
body.is-touch #minimap { width: clamp(100px, 18vw, 155px); height: auto; }

/* Ventana de videojuego: en apaisado compacto no hay panel desplazable. */
@media (orientation: landscape) and (max-height: 520px) {
  #title { padding: 6px; }
  #title .menu-panel {
    width: 96vw;
    height: calc(100dvh - 12px);
    max-height: none;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
  }
  #title .menu-panel header { flex: 0 0 auto; }
  #title .menu-panel header h1 { margin: 0 0 5px; font-size: clamp(28px, 7vh, 42px); }
  #title .menu-content { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; }
  #title .menu-tagline { flex: 0 0 auto; margin: 2px auto 8px; font-size: clamp(9px, 2.1vh, 13px); }
  #title .main-menu { min-height: 0; flex: 1 1 auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  #title .menu-btn { min-height: 0; height: auto; padding: 6px 5px; font-size: clamp(10px, 1.9vh, 15px); letter-spacing: .04em; }

  #title .menu-panel:not(:has(.main-menu)) .menu-content { overflow: hidden; }
  #title .menu-panel:not(:has(.main-menu)) .menu-list { min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
  #title .menu-panel:not(:has(.main-menu)) .menu-list .menu-btn { min-height: 0; }
  #title .menu-panel .player-grid { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #title .menu-panel .player-setup { min-height: 0; gap: 4px; padding: 7px; }
  #title .menu-panel .player-setup h3 { margin: 0; font-size: 13px; }
  #title .menu-panel .player-setup label { gap: 2px; font-size: 9px; }
  #title .menu-panel .player-setup select,
  #title .menu-panel .prepare-settings select,
  #title .menu-panel .settings-list select,
  #title .menu-panel .control-device select { min-height: 30px; padding: 4px 6px; font-size: 11px; }
  #title .menu-panel .device-state { font-size: 9px; }
  #title .menu-panel .prepare-settings { min-height: 0; gap: 6px; margin: 6px 0; }
  #title .menu-panel .prepare-actions { gap: 6px; margin-top: 6px; }
  #title .menu-panel .prepare-actions .menu-btn.ghost { margin-top: 0; }
  #title .menu-panel .settings-list { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; max-width: none; }
  #title .menu-panel .setting-row { min-height: 0; grid-template-columns: minmax(92px, 1fr) minmax(70px, .8fr) 24px; gap: 5px; padding: 5px 7px; font-size: 10px; }
  #title .menu-panel .setting-row select { min-height: 28px; }
  #title .menu-panel .control-tabs { gap: 5px; margin-bottom: 6px; }
  #title .menu-panel .control-map { min-height: 0; overflow: hidden; padding: 6px 8px; font-size: 10px; }
  #title .menu-panel .keyrow { padding: 4px 0; }
  #title .menu-panel .menu-copy,
  #title .menu-panel .coming-soon { min-height: 0; overflow: hidden; padding: 8px; font-size: clamp(11px, 2.2vh, 15px); }
  #title .menu-panel > .menu-btn.ghost { flex: 0 0 auto; min-height: 30px; margin-top: 6px; padding: 5px 8px; }
}

/* Escritorio bajo: conserva la portada en dos columnas y elimina el pequeño
   desborde de opciones que antes obligaba a usar la rueda. */
@media (orientation: landscape) and (min-height: 521px) and (max-height: 760px) {
  #title .menu-panel { max-height: calc(100dvh - 20px); padding: 16px 26px; }
  #title .menu-panel .menu-btn { min-height: 44px; padding-block: 8px; }
  #title .menu-panel .settings-list { gap: 6px; }
  #title .menu-panel .setting-row { padding-block: 5px; }
  #title .menu-panel .prepare-actions .menu-btn.ghost { margin-top: 0; }
  #title .menu-panel > .menu-btn.ghost { margin-top: 6px; }
}