/* LatinoKart — estilos del juego. Tokens de design-spec.md (add-latinokart-v1, D-LK-18), desde el mockup aprobado.
   Fuentes locales (D-LK-18): nada se pide a fonts.googleapis.com. */
@font-face{font-family:"Press Start 2P";src:url("../fonts/PressStart2P-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Baloo 2";src:url("../fonts/Baloo2-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{
  /* Color (OKLCH; hex de respaldo para navegadores viejos). Ver design-spec.md */
  --color-primary:#ffd23f;--color-primary:oklch(87.9% .162 91);
  --color-primary-hi:#ffe066;--color-primary-hi:oklch(91% .144 95);
  --color-primary-lo:#ffb703;--color-primary-lo:oklch(82.5% .171 80);
  --color-primary-edge:#b77a00;--color-primary-edge:oklch(62.7% .133 74);
  --color-on-primary:#3a2300;--color-on-primary:oklch(27.9% .059 73);
  --color-background:#0b1636;--color-background:oklch(21.2% .065 267);
  --color-surface:#0d1838;--color-surface:oklch(22% .064 267);
  --color-surface-2:#14275f;--color-surface-2:oklch(29.5% .103 266);
  --color-surface-3:#22408f;--color-surface-3:oklch(39.8% .136 265);
  --color-card:#2c4fa8;--color-card:oklch(45.4% .149 265);
  --color-border:#5b8cff;--color-border:oklch(66.2% .179 265);
  --color-border-inner:#2c4fa8;--color-border-inner:oklch(45.4% .149 265);
  --color-border-soft:#34509c;--color-border-soft:oklch(45.1% .128 266);
  --color-outline:#050b1f;
  --color-text-primary:#ffffff;
  --color-text-secondary:#cfe0ff;--color-text-secondary:oklch(90.4% .046 263);
  --color-text-tertiary:#b9cbf5;--color-text-tertiary:oklch(84.3% .062 267);
  --color-scrim:rgba(3,7,20,.6);
  --color-glass:rgba(9,17,44,.74);
  --color-insano:#ff4040;--color-insano:oklch(66% .227 26);
  --color-insano-text:#ff5a3d;--color-insano-text:oklch(68.5% .206 32);
  --color-brake-hi:#e03131;--color-brake-hi:oklch(59.3% .211 27);
  --color-brake-lo:#a61e1e;--color-brake-lo:oklch(47.1% .171 27);
  --color-semantic-success:#8ce99a;--color-semantic-success:oklch(85.6% .141 148);
  --color-semantic-error:#ff6b6b;--color-semantic-error:oklch(71.2% .181 23);
  --color-semantic-warning:#ffc078;--color-semantic-warning:oklch(85% .115 69);
  --color-primary-glint:#fff3b0;--color-primary-glint:oklch(95.4% .08 97);
  --color-card-hi:#3a5fc2;--color-card-hi:oklch(51.4% .161 266);
  --color-text-muted:#8fa6dc;--color-text-muted:oklch(72.3% .08 267);
  --color-glass-soft:rgba(9,17,44,.5);--color-glass-strong:rgba(9,17,44,.9);
  --color-hairline:rgba(168,196,255,.55);
  --color-brand-magenta:#d6247f;--color-brand-magenta:oklch(58.4% .219 356);
  --color-brand-sky:#5fb6ff;--color-brand-blue:#2f6fe0;--color-brand-blue:oklch(56.4% .185 261);--color-brand-blue-edge:#1d3f8f;
  --color-brake-rim:#ffd6d6;--color-brake-edge:#7a1414;
  --color-insano-soft:#ffb3b3;--color-insano-hi:#d42a2a;--color-insano-lo:#a8102e;--color-insano-rim:#ffd0c0;--color-insano-inner:#8a1020;
  --color-sky:#a9dcf2;
  --fx-water:rgba(140,210,255,.55);--fx-stink:rgba(120,210,40,.5);--fx-jacket-a:#1c2a4a;--fx-jacket-b:#22355e;
  --shadow-drop:0 6px 16px rgba(0,0,0,.35);--shadow-text:0 2px 6px #000;
  /* Tipografía */
  --px:'Press Start 2P',ui-monospace,monospace;--ui:'Baloo 2',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
  --text-hud-label:10px;--text-hud-value:26px;--text-hud-big:40px;--text-caption:12px;--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:22px;--text-title:16px;--text-hero:42px;--text-count:96px;
  /* Espacio, radios, movimiento */
  --space-half:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:999px;
  --duration-fast:100ms;--duration-base:200ms;--duration-slow:350ms;--duration-hud:1500ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);--ease-enter:cubic-bezier(0,0,.2,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);
  --target-min:44px;
  /* Marcas del minimapa y las placas de nombre (18.2) */
  --color-ink-mark:#111;--color-road-line:#d7e4ff;--color-glass-tag:rgba(9,17,44,.72);--a-white-85:rgba(255,255,255,.85);
  /* alias usados por el CSS anterior */
  --navy:var(--color-surface);--edge:var(--color-border);--y:var(--color-primary)
  /* Transparencias y negro/rosa sueltos que antes estaban a mano (18.2): una sola fuente de color */
  --a-black-35:rgba(0,0,0,.35);--a-blue-45:rgba(91,140,255,.45);--a-coral-16:rgba(255,92,92,.16);--a-coral-50:rgba(255,92,92,.5);--a-gold-12:rgba(255,210,63,.12);--a-gold-16:rgba(255,210,63,.16);--a-gold-40:rgba(255,210,63,.4);--a-gold-50:rgba(255,210,63,.5);--a-gold-55:rgba(255,210,63,.55);--a-gold-90:rgba(255,210,63,.9);--a-ink-0:rgba(6,12,32,0);--a-ink-25:rgba(6,12,32,.25);--a-ink-30:rgba(6,12,32,.3);--a-ink-50:rgba(6,12,32,.5);--a-ink-60:rgba(6,12,32,.6);--a-ink-70:rgba(6,12,32,.7);--a-ink-86:rgba(6,12,32,.86);--a-ink-90:rgba(6,12,32,.9);--a-ink-soft-25:rgba(9,17,44,.25);--a-navy-55:rgba(22,42,99,.55);--a-navy-60:rgba(22,42,99,.6);--a-navy-92:rgba(22,42,99,.92);--a-navy-94:rgba(22,42,99,.94);--a-navy-deep-80:rgba(13,24,56,.8);--a-pink-92:rgba(214,36,127,.92);--a-red-70:rgba(255,60,60,.7);--a-red-hot-45:rgba(255,40,40,.45);--a-sky-16:rgba(90,170,255,.16);--a-white-20:rgba(255,255,255,.2);--a-white-55:rgba(255,255,255,.55);--a-white-8:rgba(255,255,255,.08);--color-black:#000;--color-pink-rim:#ffb3d6}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--color-sky);color:var(--color-text-primary);font-family:var(--ui);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
#fx2d{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}
.screen{position:fixed;inset:0;display:none}
.screen.on{display:block}

/* HUD de carrera, como la imagen de referencia */
.hbox{position:absolute;background:linear-gradient(var(--color-surface-2),var(--color-background));border:3px solid var(--edge);box-shadow:0 0 0 2px var(--color-outline),inset 0 0 0 2px var(--color-border-inner),var(--shadow-drop);border-radius:12px;padding:var(--space-2) var(--space-4) var(--space-2);text-align:center}
.hl{font:10px var(--px);letter-spacing:1px;color:var(--color-text-secondary)}
.hv{font:26px/1.1 var(--px);margin-top:var(--space-2);color:var(--color-text-primary);text-shadow:3px 3px 0 var(--color-outline)}
.hv b{color:var(--y);font-weight:400;font-size:40px}
#lapbox{left:max(14px,env(safe-area-inset-left));top:12px}
#posbox{right:max(14px,env(safe-area-inset-right));top:12px}
#pill{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;gap:var(--space-1);background:var(--color-glass);border:2px solid var(--color-hairline);border-radius:var(--radius-full);padding:var(--space-1);z-index:5}
#pill button{font:800 15px var(--ui);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--a-white-8);white-space:nowrap}
#pill button:hover{background:var(--a-white-20)}
#standings{position:absolute;right:14px;top:118px;width:86px}
.srow{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;gap:var(--space-1);transition:transform var(--duration-slow) var(--ease-standard)}
.srow .sn{width:24px;height:30px;display:flex;align-items:center;justify-content:center;font:13px var(--px);background:var(--color-background);border:2px solid var(--edge);border-radius:6px}
.srow .sp{width:48px;height:46px;border-radius:8px;background:linear-gradient(var(--color-card-hi),var(--color-surface-2));border:2px solid var(--color-border);overflow:hidden}
.srow .sp img{width:100%;height:100%;display:block;object-fit:cover}
.srow.me .sn{background:var(--color-text-primary);color:var(--color-background);border-color:var(--color-text-primary)}
.srow.me .sp{border-color:var(--color-text-primary);box-shadow:0 0 0 2px var(--y)}
#slots{z-index:3;position:absolute;left:14px;bottom:14px;display:flex;gap:var(--space-2);padding:var(--space-2);background:linear-gradient(var(--color-surface-2),var(--color-background));border:3px solid var(--edge);border-radius:14px;box-shadow:0 0 0 2px var(--color-outline),inset 0 0 0 2px var(--color-border-inner)}
.slot{width:84px;height:84px;border-radius:10px;background:radial-gradient(circle at 50% 40%,var(--color-surface-3),var(--color-background));border:2px solid var(--color-border-inner);position:relative;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer}
.slot img{width:96%;height:96%;pointer-events:none}
.slot .n{position:absolute;right:4px;bottom:3px;font:12px var(--px);color:var(--y);text-shadow:2px 2px 0 var(--color-black)}
.slot.first{border-color:var(--y);box-shadow:0 0 12px var(--a-gold-55)}
.slot.empty::after{content:'';width:22px;height:22px;border:2px dashed var(--color-border-inner);border-radius:6px}
.slot.pop{animation:pop var(--duration-slow) var(--ease-pop)}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
#slot-hint{position:absolute;left:0;right:0;top:-24px;text-align:center;font:700 12px var(--ui);color:var(--color-text-primary);text-shadow:0 1px 3px var(--color-black)}
#mapbox{position:absolute;right:14px;bottom:14px;padding:var(--space-1);background:var(--color-glass-soft);border:2px solid var(--color-hairline);border-radius:14px}
#minimap{display:block;width:240px;height:180px}
#toast{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);font:22px var(--px);color:var(--color-text-primary);text-shadow:3px 3px 0 var(--color-background),-2px -2px 0 var(--color-background),2px -2px 0 var(--color-background),-2px 2px 0 var(--color-background);white-space:nowrap;pointer-events:none;opacity:0}
#aji-bar{position:absolute;left:50%;bottom:calc(14px + var(--sa-b,0px));transform:translateX(-50%);width:240px;padding:var(--space-1) var(--space-3);background:var(--color-glass-soft);border:2px solid var(--color-primary);border-radius:12px;font:10px var(--px);color:var(--color-text-primary);text-align:center;pointer-events:none}
#aji-bar[hidden]{display:none}
.aji-fill{height:8px;margin-top:var(--space-1);border-radius:4px;background:var(--color-hairline);overflow:hidden}
.aji-fill i{display:block;height:100%;width:var(--w,100%);background:linear-gradient(90deg,var(--color-brake-hi),var(--color-primary))}
body.reduced .aji-fill i{transition:none}
#toast.show{animation:toast var(--duration-hud) var(--ease-standard) forwards}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}
#count{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font:96px var(--px);color:var(--y);text-shadow:6px 6px 0 var(--color-background),-3px -3px 0 var(--color-background),3px -3px 0 var(--color-background),-3px 3px 0 var(--color-background);pointer-events:none;opacity:0}
#count.show{animation:cnt .8s ease forwards}
@keyframes cnt{0%{opacity:0;transform:translate(-50%,-50%) scale(2)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
.tz{position:absolute;top:96px;bottom:0;width:50%;touch-action:none;z-index:1}
#touchL{left:0}#touchR{right:0}
#steer-hint{position:absolute;left:0;right:0;bottom:150px;display:flex;justify-content:space-between;padding:0 16%;font:800 17px var(--ui);color:var(--color-text-primary);text-shadow:var(--shadow-text);opacity:0;transition:opacity var(--duration-slow) var(--ease-standard);pointer-events:none}
#steer-hint.show{opacity:.95}
.ov{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--duration-base) var(--ease-standard)}
#ov-water{background:radial-gradient(circle at 20% 30%,var(--fx-water) 0 9%,transparent 10%),radial-gradient(circle at 70% 60%,var(--fx-water) 0 12%,transparent 13%),radial-gradient(circle at 45% 82%,var(--fx-water) 0 8%,transparent 9%),radial-gradient(circle at 86% 22%,var(--fx-water) 0 7%,transparent 8%),var(--a-sky-16)}
#ov-stink{background:radial-gradient(circle,transparent 35%,var(--fx-stink) 100%)}
#ov-jacket{background:repeating-linear-gradient(90deg,var(--fx-jacket-a) 0 26px,var(--fx-jacket-b) 26px 52px);display:flex;align-items:center;justify-content:center}
#ov-jacket div{font:16px var(--px);color:var(--color-text-primary);text-shadow:2px 2px 0 var(--color-black);padding:var(--space-4);text-align:center;line-height:1.6}
.ov.on{opacity:1}
#ov-jacket.on{opacity:.94}

/* Menús */
#corner{position:fixed;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;justify-content:space-between;z-index:20;pointer-events:none}
#corner .chip{pointer-events:auto}
.chip{font:800 15px var(--ui);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:var(--color-glass);border:2px solid var(--color-hairline);color:var(--color-text-primary)}
.chip:hover{background:var(--a-navy-92)}
.chip.wide{width:100%;padding:var(--space-3) var(--space-4);border-radius:14px}
.chip.danger{border-color:var(--color-semantic-error);color:var(--color-brake-rim)}
.big{font:18px var(--px);padding:var(--space-4) var(--space-6);border-radius:16px;background:linear-gradient(var(--color-primary-hi),var(--color-primary-lo));color:var(--color-on-primary);border:3px solid var(--color-primary-glint);box-shadow:0 6px 0 var(--color-primary-edge),0 10px 24px var(--a-black-35);text-shadow:1px 1px 0 var(--color-primary-glint)}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--color-primary-edge)}
.big:disabled{filter:grayscale(.85) brightness(.85);cursor:not-allowed}
.panel-t{font:16px var(--px);color:var(--y);text-shadow:3px 3px 0 var(--color-outline);margin-bottom:var(--space-3);letter-spacing:1px}
#scr-menu{background:linear-gradient(90deg,var(--a-ink-86) 0%,var(--a-ink-50) 36%,var(--a-ink-0) 60%)}
.menu-left{position:absolute;left:5vw;top:50%;transform:translateY(-50%);width:min(520px,90vw)}
.brand{display:flex;align-items:center;gap:var(--space-4)}
.brand-logo{width:120px;height:120px;border-radius:22px;background:linear-gradient(var(--color-brand-sky),var(--color-brand-blue));padding:var(--space-half);box-shadow:0 6px 0 var(--color-brand-blue-edge)}
.brand-t{font:42px/1 var(--px);color:var(--color-text-primary);text-shadow:4px 4px 0 var(--color-brand-magenta),8px 8px 0 var(--color-background)}
.brand-t span{display:block}.brand-t .k{color:var(--y);margin-top:var(--space-2)}
.brand-s{font:700 15px var(--ui);color:var(--color-text-secondary);margin-top:var(--space-3)}
.who{margin:var(--space-5) 0 var(--space-3);font:600 14px var(--ui);color:var(--color-text-secondary)}.who b{color:var(--color-text-primary)}.who-src{opacity:.7}
.modes{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}
.mode{display:flex;gap:var(--space-3);align-items:center;text-align:left;padding:var(--space-3) var(--space-4);border-radius:16px;background:var(--a-navy-deep-80);border:3px solid var(--a-blue-45)}
.mode.on{border-color:var(--y);background:var(--a-navy-94)}
.mode-i{font-size:34px}.mode-t{font:800 20px var(--ui)}.mode-d{font:600 14px var(--ui);color:var(--color-text-secondary)}
.howto{margin-top:var(--space-4);font:600 13px var(--ui);color:var(--color-text-secondary);opacity:.9}
.sel-name{position:absolute;left:5vw;bottom:8vh;pointer-events:none}
#sel-name{font:32px var(--px);color:var(--color-text-primary);text-shadow:4px 4px 0 var(--color-background)}
#sel-tag{font:800 18px var(--ui);color:var(--color-text-primary);text-shadow:var(--shadow-text);margin-top:var(--space-2)}
.sel-panel{position:absolute;right:3vw;top:60px;bottom:24px;width:min(470px,92vw);padding:var(--space-4);overflow:auto;background:var(--color-glass);border:3px solid var(--edge);border-radius:20px;display:flex;flex-direction:column}
#sel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:var(--space-2);overflow:auto;flex:1;min-height:110px;padding:var(--space-half)}
.card{border-radius:var(--radius-lg);background:linear-gradient(var(--color-card),var(--color-surface-2));border:3px solid var(--color-border-soft);padding:var(--space-1) var(--space-1) var(--space-2);text-align:center}
.card img{width:100%;aspect-ratio:1;display:block}
.card .cn{font:800 15px var(--ui);line-height:1.1}.card .ct{font:600 12px var(--ui);color:var(--color-text-primary);opacity:.92}
.card.on{border-color:var(--y);box-shadow:0 0 0 2px var(--color-primary-glint),0 0 18px var(--a-gold-50)}
#btn-go{margin-top:var(--space-3)}
.lobby,.res{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:calc(100vh - 60px);overflow:auto;padding:var(--space-5);background:var(--color-glass-strong);border:3px solid var(--edge);border-radius:22px}
#lobby-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);margin:var(--space-3) 0}
.lp{border-radius:12px;background:var(--color-surface-2);border:2px dashed var(--color-border-soft);min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-1);font:700 13px var(--ui);color:var(--color-text-muted);text-align:center}
.lp.in{border-style:solid;border-color:var(--color-border);color:var(--color-text-primary);animation:pop var(--duration-slow) var(--ease-pop)}
.lp img{width:72px;height:72px}
.row{display:flex;gap:var(--space-2);align-items:center;justify-content:space-between;flex-wrap:wrap}
#scr-results .res{left:auto;right:3vw;transform:translateY(-50%)}
.rr{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:12px;margin-bottom:var(--space-1);background:var(--a-navy-60);border:2px solid transparent}
.rr.me{border-color:var(--y);background:var(--a-gold-16)}
.rr .rp{font:15px var(--px);width:46px;color:var(--y)}
.rr img{width:44px;height:44px;border-radius:8px;background:var(--color-surface-3)}
.rr .rn{flex:1;font:800 17px var(--ui)}.rr .rt{font:600 14px var(--ui);color:var(--color-text-secondary);text-align:right}
#res-save{margin:var(--space-3) 0;font:700 14px var(--ui);white-space:pre-line}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--color-scrim);z-index:40}
.modal.on{display:flex}
.mbox{width:min(360px,90vw);padding:var(--space-5);background:var(--color-surface);border:3px solid var(--edge);border-radius:20px;display:flex;flex-direction:column;gap:var(--space-3);text-align:center}
.mbox p{margin:0;font:600 15px var(--ui);color:var(--color-text-secondary)}
#loading{background:radial-gradient(circle at 50% 40%,var(--color-card),var(--color-background))}
#loading.on{display:flex;align-items:center;justify-content:center}
.ld-box{text-align:center}.ld-kart{font-size:80px}
.ld-t{font:14px var(--px);margin:var(--space-4) 0 var(--space-3)}
.ld-bar{width:240px;height:12px;border-radius:8px;background:var(--color-background);border:2px solid var(--edge);overflow:hidden}.ld-bar i{display:block;height:100%;width:30%;background:var(--y);animation:ld 1s infinite alternate}
@keyframes ld{to{transform:translateX(230%)}}

/* Celular */
@media (max-width:820px),(max-height:560px){
  .hbox{padding:var(--space-1) var(--space-2) var(--space-2)}.hv{font-size:18px}.hv b{font-size:26px}.hl{font-size:10px;letter-spacing:0}
  #pill button{font-size:13px;padding:var(--space-1) var(--space-2)}
  #standings{top:88px;width:66px}.srow{height:36px}.srow .sp{width:38px;height:36px}.srow .sn{width:20px;height:24px;font-size:10px}
  .slot{width:58px;height:58px}#minimap{width:150px;height:112px}#slot-hint{font-size:10px}
  .brand-t{font-size:28px}.brand-logo{width:64px;height:64px}
  .sel-panel{top:auto;height:54vh;left:3vw;right:3vw;width:auto}
  .sel-name{bottom:auto;top:64px}#sel-name{font-size:20px}
  #scr-results .res{right:50%;transform:translate(50%,-50%)}
  #count{font-size:64px}#toast{font-size:15px}
}

/* Controles táctiles: volante virtual (pulgar izquierdo) y freno (pulgar derecho) */
#stick{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid var(--a-white-55);background:var(--a-ink-soft-25);pointer-events:none;opacity:0;transition:opacity var(--duration-fast) var(--ease-standard);z-index:2}
#stick.on{opacity:1}
#stick-k{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--a-gold-90);box-shadow:0 0 0 3px var(--color-primary-glint)}
#btn-brake{display:none;position:absolute;right:104px;bottom:18px;width:100px;height:100px;border-radius:50%;z-index:3;font:14px var(--px);color:var(--color-text-primary);background:linear-gradient(var(--color-brake-hi),var(--color-brake-lo));border:4px solid var(--color-brake-rim);box-shadow:0 6px 0 var(--color-brake-edge),0 10px 20px var(--a-black-35);touch-action:none}
#btn-brake.on{transform:translateY(4px) scale(.96);box-shadow:0 2px 0 var(--color-brake-edge)}
body.movil #btn-brake{display:block}
body.movil #slots{left:auto;right:auto;left:14px;top:96px;bottom:auto;padding:var(--space-1);gap:var(--space-1)}
body.movil #slot-hint{top:auto;bottom:-22px;white-space:nowrap;font-size:11px;text-align:left}
body.movil #mapbox{right:auto;left:50%;transform:translateX(-50%);bottom:8px;padding:var(--space-1);pointer-events:none}
body.movil #minimap{width:120px;height:90px}
body.movil #standings{transform:scale(.85);transform-origin:top right}
/* Girar el celular */
#rotate{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);text-align:center;background:radial-gradient(circle at 50% 40%,var(--color-card),var(--color-background))}
#rotate.on{display:flex}
#rotate h2{margin:0;font:18px var(--px);color:var(--y)}#rotate p{margin:0;font:800 16px var(--ui)}
#rotate .phone{width:54px;height:88px;border:4px solid var(--y);border-radius:12px;animation:turn 1.6s ease-in-out infinite}
@keyframes turn{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

/* Dificultad (D-LK-13) */
.diffs{margin-top:var(--space-3)}
.dl{font:11px var(--px);color:var(--color-text-secondary);margin-bottom:var(--space-2)}
.drow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-1)}
.diff,.lvl{font:800 14px var(--ui);padding:var(--space-2) var(--space-1);border-radius:12px;background:var(--color-surface-2);border:2px solid var(--color-border-soft)}
.diff.on,.lvl.on{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary-glint)}
.diff.insano{border-color:var(--color-insano);color:var(--color-insano-soft)}
.diff.insano.on{background:linear-gradient(var(--color-insano-hi),var(--color-insano-lo));color:var(--color-text-primary);border-color:var(--color-insano-rim);box-shadow:0 0 14px var(--a-red-70)}
#diff-desc,#lvl-desc{font:600 13px/1.3 var(--ui);color:var(--color-text-secondary);margin-top:var(--space-2);min-height:34px}
body.insano .hbox,body.insano #slots{border-color:var(--color-insano);box-shadow:0 0 0 2px var(--color-outline),inset 0 0 0 2px var(--color-insano-inner),0 0 16px var(--a-red-hot-45)}
body.insano .hv b{color:var(--color-insano-text)}

/* Pantallas bajas (celular en horizontal, ventanas chicas): panel a la derecha y ¡A CORRER! siempre a la vista */
#btn-go{position:sticky;bottom:0}
@media (max-height:560px){
  .sel-panel{top:52px;bottom:8px;left:auto;right:2vw;width:min(470px,58vw);height:auto;padding:var(--space-3)}
  .sel-name{top:auto;bottom:6vh}
  /* corredores en una sola fila que se desliza: se ven nombre y cara, y el corte del último invita a deslizar */
  #sel-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76px;overflow-x:auto;overflow-y:hidden;flex:0 0 auto;min-height:0;scroll-snap-type:x proximity;padding-bottom:var(--space-1)}
  .card{scroll-snap-align:start;padding:var(--space-half) var(--space-half) var(--space-1)}
  .card img{aspect-ratio:auto;height:56px;object-fit:contain}   /* deja a la vista la fila de DIFICULTAD bajo el botón fijo */
  .card .ct{display:none}.card .cn{font-size:12px;line-height:1.05;min-height:2.1em;display:flex;align-items:center;justify-content:center}   /* nombres de 2 palabras en 2 líneas: "Gato naranjo" entero */
  .panel-t{margin-bottom:var(--space-2);font-size:12px}
  #lvl-desc,#diff-desc{display:none}
  .diffs{margin-top:var(--space-1)}.dl{margin-bottom:var(--space-1);font-size:10px}
  .diff,.lvl{padding:var(--space-1) var(--space-half);font-size:12px}
  #btn-go{margin-top:var(--space-2);padding:var(--space-3);font-size:14px}
  #mapbox{right:auto;left:50%;transform:translateX(-50%);bottom:8px;padding:var(--space-1)}
  #minimap{width:120px;height:90px}
  #slot-hint{display:none}
}

/* Accesibilidad (design-spec, puntaje): foco visible, objetivos táctiles de 44 px y menos movimiento */
:focus{outline:none}
/* foco = anillo BLANCO (lo elegido ya es amarillo: no se confunden) */
:focus-visible{outline:3px solid var(--color-text-primary);outline-offset:2px;border-radius:var(--radius-md)}
.card:focus-visible{outline-offset:-7px}
.chip,.diff,.lvl,#pill button,.mode,#btn-sound-c,#btn-back{min-height:var(--target-min)}
.big,.chip,.diff,.lvl,.mode,.card,.slot,#pill button{transition:transform var(--duration-fast) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.big:hover,.mode:hover,.card:hover,.diff:hover,.lvl:hover{transform:translateY(-1px)}
.srow{transition:transform var(--duration-slow) var(--ease-standard)}
@media (max-height:560px){.hl{font-size:10px;letter-spacing:0}.diff,.lvl{min-height:40px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  #toast.show{animation:fade-only var(--duration-hud) linear forwards!important}#count.show{animation:fade-only .8s linear forwards!important}
  @keyframes fade-only{0%,85%{opacity:1}100%{opacity:0}}
}
/* Texto sobre la escena 3D: siempre con su píldora de vidrio, no solo con sombra (contraste ≥ 9:1 sobre cualquier fondo) */
#slot-hint{width:max-content;max-width:100%;margin:0 auto;padding:var(--space-half) var(--space-2);border-radius:var(--radius-full);background:var(--color-glass);text-shadow:none}
body.movil #slot-hint{margin:0}
#steer-hint span{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-glass);text-shadow:none}
#res-save.ok{color:var(--color-semantic-success)}#res-save.warn{color:var(--color-semantic-warning)}

/* Juego real (no estaba en el mockup): avisos, versión visible, error y panel ?debug=1 */
.note{margin:var(--space-2) 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-glass);border:2px solid var(--color-semantic-warning);font:700 14px var(--ui);color:var(--color-semantic-warning)}
.note:empty{display:none}
#lobby-note{border-color:var(--color-hairline);color:var(--color-text-secondary)}
.ver{font:600 12px var(--ui);color:var(--color-text-muted);text-align:center;margin-top:var(--space-2)}
#oops{z-index:80}
#dbg{position:fixed;left:max(8px,env(safe-area-inset-left));bottom:8px;z-index:90;margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--color-glass-strong);color:var(--color-semantic-success);font:11px/1.35 ui-monospace,monospace;pointer-events:none;white-space:pre}
.lp .lp-n{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp.spect{opacity:.6}
/* HUD: el nombre de cada corredor del ranking lo leen los lectores de pantalla (la fila muestra la cara) */
.srow .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.srow.gone{opacity:.45}
/* Con el menú estándar de KitchHero Games, el ⏸ del SDK va en la píldora de arriba y reemplaza al ☰ propio (9.2) */
body.std-menu #btn-menu{display:none}
/* Zona segura del notch o de la isla (iPhone en horizontal, BUG-01): nada pegado a un costado queda debajo del notch.
   Va al final para ganar sobre las reglas de arriba. */
:root{--sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px)}
#standings{right:calc(14px + var(--sa-r))}
#mapbox{right:calc(14px + var(--sa-r));bottom:calc(14px + var(--sa-b))}
#slots{left:calc(14px + var(--sa-l));bottom:calc(14px + var(--sa-b))}
#btn-brake{right:calc(104px + var(--sa-r));bottom:calc(18px + var(--sa-b))}
.menu-left{left:max(5vw,calc(16px + var(--sa-l)))}
.sel-name{left:max(5vw,calc(16px + var(--sa-l)))}
.sel-panel{right:max(3vw,calc(12px + var(--sa-r)))}
#scr-results .res{right:max(3vw,calc(12px + var(--sa-r)))}
/* en pantallas chicas el resultado va centrado (right:50% + translate): el ancho deja libre el notch a ambos lados */
@media (max-width:820px),(max-height:560px){
  #scr-results .res{right:50%}
  .lobby,#scr-results .res{width:min(560px,calc(100vw - 2 * max(3vw,12px + var(--sa-l),12px + var(--sa-r))))}
}
#steer-hint{padding:0 max(16%,calc(16px + var(--sa-r))) 0 max(16%,calc(16px + var(--sa-l)))}
body.movil #slots{left:calc(14px + var(--sa-l))}
body.movil #mapbox{right:auto}
@media (max-width:820px),(max-height:560px){.sel-panel{left:max(3vw,calc(12px + var(--sa-l)));right:max(3vw,calc(12px + var(--sa-r)))}}
@media (max-height:560px){.sel-panel{left:auto;right:max(2vw,calc(12px + var(--sa-r)))}.sel-name{bottom:6vh}#mapbox{right:auto}}
/* Menú local en celular en horizontal (BUG-02): no cabía en 390 px de alto (título y ¡JUGAR! cortados). En dos columnas,
   bajo los botones de la esquina y con desplazamiento si aun así no cabe. */
@media (max-height:560px){
  #scr-menu{background:linear-gradient(90deg,var(--a-ink-90) 0%,var(--a-ink-70) 60%,var(--a-ink-25) 100%)}
  .menu-left{top:60px;bottom:8px;transform:none;overflow:auto;width:min(760px,calc(100vw - 2 * max(16px,12px + var(--sa-l),12px + var(--sa-r))));
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"brand modes" "who modes" "note play" "note howto";
    column-gap:var(--space-5);align-content:center;align-items:start}
  .menu-left>.brand{grid-area:brand}.menu-left>.who{grid-area:who;margin:var(--space-2) 0}.menu-left>#offline{grid-area:note}
  .menu-left>.modes{grid-area:modes;margin-bottom:0}.menu-left>#btn-play{grid-area:play;margin-top:var(--space-2)}
  .menu-left>.howto{grid-area:howto;margin-top:var(--space-2);font-size:12px}
  .mode{padding:var(--space-2) var(--space-3)}.mode-i{font-size:24px}.mode-t{font-size:17px}.mode-d{font-size:12px}
}
/* BUG-02: en pantallas bajas el resultado y la sala empiezan bajo los botones de la esquina (que se montaban sobre el panel)
   y las filas se compactan para que entren más puestos antes de desplazar */
@media (max-height:560px){
  .lobby,.res{top:calc(50% + 26px);max-height:calc(100vh - 68px);padding:var(--space-3)}
  .rr{padding:2px var(--space-2)}.rr img{width:34px;height:34px}.rr .rp{font-size:13px;width:38px}.rr .rn{font-size:15px}.rr .rt{font-size:12px}
}
/* BUG-02: en pantallas bajas los botones del resultado quedan fijos al pie del panel (Revancha siempre a la vista) */
@media (max-height:560px){
  #scr-results .res>.row{position:sticky;bottom:0;z-index:1;padding-top:var(--space-2);background:linear-gradient(transparent,var(--color-surface) 35%)}
  #btn-again{padding:var(--space-2) var(--space-4);font-size:14px}
}

/* Jugar con tus compas (req. 6.1, 6.3–6.6; mockup Iteración 5, D-LK-28) */
.grow{flex:1;min-width:0}
.tag{display:inline-block;padding:1px var(--space-2);border-radius:var(--radius-full);font:700 12px var(--ui);background:var(--a-gold-16);color:var(--y);border:1px solid var(--a-gold-40)}
.chip.y{background:var(--y);color:var(--color-on-primary);border-color:var(--color-primary-glint)}
.chip.no{border-color:var(--color-semantic-error);color:var(--color-brake-rim)}
.chip:disabled{opacity:.5;cursor:not-allowed}
#scr-pogo{background:linear-gradient(90deg,var(--a-ink-90) 0%,var(--a-ink-60) 55%,var(--a-ink-30))}
.pogo-left{position:absolute;left:max(5vw,calc(16px + var(--sa-l)));top:50%;transform:translateY(-50%);width:min(380px,40vw);display:flex;flex-direction:column;gap:var(--space-3)}
.pogo-t{margin:0 0 var(--space-1);font:24px/1.3 var(--px);color:var(--color-text-primary);text-shadow:3px 3px 0 var(--color-brand-magenta)}
.pogo-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;width:100%}
.pogo-btn small{font:700 13px var(--ui);opacity:.85}
.pogo-rooms{position:absolute;right:max(3vw,calc(12px + var(--sa-r)));top:64px;bottom:24px;width:min(440px,46vw);overflow:auto;padding:var(--space-4);background:var(--color-glass);border:3px solid var(--edge);border-radius:20px;display:flex;flex-direction:column;gap:var(--space-2)}
.rooms-sub{font:600 13px var(--ui);color:var(--color-text-secondary)}
#rooms-list{display:flex;flex-direction:column;gap:var(--space-2)}
.room{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:14px;background:var(--a-navy-60)}
.room b{font:800 16px var(--ui)}.room-i{font-size:24px}
#rooms-empty{display:flex;flex-direction:column;gap:var(--space-1);font:600 14px var(--ui);color:var(--color-text-secondary)}
#rooms-empty b{color:var(--color-text-primary);font:800 16px var(--ui)}
#rooms-empty[hidden]{display:none}
.mid-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,92vw);max-height:calc(100vh - 80px);overflow:auto;padding:var(--space-5);background:var(--color-glass-strong);border:3px solid var(--edge);border-radius:22px;display:flex;flex-direction:column;gap:var(--space-3);text-align:center}
.code-sub{font:600 14px var(--ui);color:var(--color-text-secondary)}
.code-in{width:100%;font:32px var(--px);letter-spacing:18px;text-align:center;text-transform:uppercase;color:var(--y);background:var(--color-background);border:3px solid var(--edge);border-radius:16px;padding:var(--space-3) 0 var(--space-3) 18px}
.code-in:focus{outline:none;border-color:var(--y)}
.code-in.bad{border-color:var(--color-semantic-error)}
.code-err{min-height:1.2em;font:700 14px var(--ui);color:var(--color-brake-rim)}
.wait-room{font:800 18px var(--ui)}
.wait-msg{font:600 15px var(--ui);color:var(--color-text-secondary)}
.dots{display:flex;gap:var(--space-2);justify-content:center}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--y);animation:dot 1s infinite alternate}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{to{opacity:.25;transform:translateY(-4px)}}
.mid-panel .row{justify-content:center}
.lob-h{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.lob-h .panel-t{margin:0}
#lobby-code{font:22px var(--px);color:var(--y);letter-spacing:4px}
.lp-d{font:600 11px var(--ui);color:var(--color-text-secondary)}
.lp.me{border-color:var(--y)}
.lp.bot{color:var(--color-text-muted)}
#lobby-reqs,#res-reqs{display:flex;flex-direction:column;gap:var(--space-2)}
.req{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:14px;background:var(--a-gold-12);border:2px solid var(--a-gold-50)}
.req b{font:800 15px var(--ui)}
.lob-f{margin-top:var(--space-2)}
.lob-f .big{flex:1}
.wait{flex:1;text-align:center;font:700 14px var(--ui);color:var(--color-text-secondary)}
.lock{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:14px;background:var(--a-navy-55);border:2px dashed var(--a-blue-45);font-size:20px}
.lock b{font:800 16px var(--ui)}#lock-who{font:600 13px var(--ui);color:var(--color-text-secondary)}
.lock[hidden]{display:none}
#req-toast{position:absolute;left:50%;top:calc(58px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2) var(--space-1) var(--space-3);border-radius:14px;background:var(--color-glass-strong);border:2px solid var(--y);box-shadow:0 6px 18px var(--a-black-35)}
#req-toast b{font:800 14px var(--ui);white-space:nowrap}
#req-toast[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.dots i{animation:none}}
@media (max-height:560px){
  .pogo-left{top:60px;transform:none;width:min(340px,40vw);gap:var(--space-2)}
  .pogo-t{font-size:16px}
  .pogo-rooms{top:56px;bottom:8px;padding:var(--space-3)}
  .mid-panel{padding:var(--space-3);gap:var(--space-2);top:calc(50% + 22px)}
  .code-in{font-size:24px;padding:var(--space-2) 0 var(--space-2) 18px}
  #lobby-list{margin:var(--space-2) 0}.lp{min-height:72px}.lp img{width:44px;height:40px}
}
@media (max-width:820px){.pogo-left{width:min(340px,44vw)}.pogo-rooms{width:min(440px,48vw)}}

/* Modo vista (6.6): sin controles de manejo; aviso fijo, quién se sigue, cámara y zoom */
body.watching #slots,body.watching #btn-brake,body.watching #touchL,body.watching #touchR,body.watching #steer-hint,body.watching #stick{display:none!important}
#watch-bar{position:absolute;left:50%;top:calc(56px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:5;padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);background:var(--a-pink-92);border:2px solid var(--color-pink-rim);font:800 15px var(--ui);white-space:nowrap}
#watch-who{position:absolute;left:calc(14px + var(--sa-l));bottom:calc(14px + var(--sa-b));z-index:5;padding:var(--space-1) var(--space-3);border-radius:12px;background:var(--color-glass-strong);border:2px solid var(--color-semantic-success);font:800 13px var(--ui)}
#watch-ctl{position:absolute;right:calc(14px + var(--sa-r));bottom:calc(14px + var(--sa-b));z-index:5;display:flex;gap:var(--space-2);align-items:center;padding:var(--space-1);border-radius:16px;background:var(--color-glass-strong);border:2px solid var(--a-blue-45)}
#watch-ctl .seg{display:flex;border-radius:12px;overflow:hidden;border:2px solid var(--a-blue-45)}
#watch-ctl .seg button{font:800 13px var(--ui);padding:var(--space-2) var(--space-3);background:var(--color-surface-2);color:var(--color-text-primary);min-height:var(--target-min)}
#watch-ctl .seg button.on{background:var(--y);color:var(--color-on-primary)}
#watch-ctl .zoom{display:flex;gap:var(--space-1)}
#watch-ctl .zoom button{width:var(--target-min);height:var(--target-min);border-radius:10px;border:2px solid var(--a-blue-45);background:var(--color-surface-2);color:var(--color-text-primary);font:800 20px var(--ui)}
#watch-ctl .zoom[hidden]{display:none}
#watch-bar[hidden],#watch-who[hidden],#watch-ctl[hidden]{display:none}
.srow.pick{cursor:pointer;pointer-events:auto}
.srow.follow .sp{box-shadow:0 0 0 3px var(--color-semantic-success)}
@media (max-height:560px){#watch-bar{font-size:13px;top:calc(50px + env(safe-area-inset-top,0px))}#watch-ctl .seg button{padding:var(--space-1) var(--space-2);font-size:12px}}

/* BUG-06: el resultado avisa que la sala se cerró */
.closed{padding:var(--space-2) var(--space-3);border-radius:12px;background:var(--a-coral-16);border:2px solid var(--a-coral-50);font:800 14px var(--ui);color:var(--color-brake-rim)}
.closed[hidden]{display:none}
/* BUG-07: celular en pantallas bajas (iPhone 15 en Safari con la barra de pestañas: 852 × 283). El minimapa quedaba
   encima del propio kart y el freno ocupaba un tercio del alto. --k = alto / 393 entre 0,7 y 1 (device.js). Decisión 1A:
   el minimapa va arriba, a la derecha de la píldora, sin chocar con POSICIÓN; lo que salía en esa franja (aviso del modo
   vista, solicitudes, avisos de ítems) baja bajo el minimapa. Freno de 84 px por --k; casilleros nunca bajo 44 px. */
body.movil #mapbox{left:calc(50% + 96px);right:auto;top:8px;bottom:auto;transform:none}
body.movil #minimap{width:min(calc(120px * var(--k,1)),calc(50vw - 228px - var(--sa-r)));height:auto}
body.movil #watch-bar,body.movil #req-toast{top:calc(28px + 90px * var(--k,1))}
body.movil #toast{top:max(27%,calc(30px + 90px * var(--k,1)))}
@media (max-width:820px),(max-height:560px){
  body.movil #btn-brake{width:calc(84px * var(--k,1));height:calc(84px * var(--k,1));right:calc(104px * var(--k,1) + var(--sa-r));font-size:calc(13px * var(--k,1))}
  body.movil .slot{width:max(44px,calc(58px * var(--k,1)));height:max(44px,calc(58px * var(--k,1)))}
  body.movil #standings{transform:scale(var(--ks,.85))}
  body.movil #steer-hint{bottom:calc(122px * var(--k,1))}   /* el aviso de la partida no queda bajo los casilleros (QA) */
}