/* Kintufe buscador — estilos. Todos los colores viven como tokens en :root (games-web 18.2); el resto de la hoja usa var(--…). */
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-navy-950: #0e1230;
  --color-navy-800: #1a1f4a;
  --color-navy-600: #2a3380;
  --color-navy-500: #3b47a8;
  --color-navy-edge: #151b55;
  --color-hud-blue: #3a56a8;
  --color-gold: #ffd23f;
  --color-gold-light: #ffe27a;
  --color-gold-deep: #d9a400;
  --color-gold-edge: #8a6a00;
  --color-gold-ink: #241800;
  --color-paper: #f3e9d2;
  --color-gray-300: #9aa0b4;
  --color-white: #f4f4fb;
  --color-black: #05071a;
  --color-brick: #8f4231;
  --color-brick-dark: #7d3a2b;
  --color-wood: #c89a60;
  --color-floor: #8d8d9a;
  --color-alert: #ff6b6b;
  --color-ok: #7cfc9a;
  --color-shade: #000000;
  --font-display: 'Nunito', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', ui-rounded, system-ui, sans-serif;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --shadow-soft: 0 10px 24px color-mix(in srgb, var(--color-black) 35%, transparent);
  --duration-fast: 100ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --panel: linear-gradient(color-mix(in srgb, var(--color-navy-800) 95%, transparent), color-mix(in srgb, var(--color-navy-950) 95%, transparent));
  --veil: color-mix(in srgb, var(--color-black) 84%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#stage { width: 1280px; height: 720px; position: relative; flex: none; overflow: hidden; transform-origin: center center;
  background: var(--color-brick) url('../art/bg.webp') 0 100px / 1280px 720px no-repeat; }
#stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, color-mix(in srgb, var(--color-shade) 30%, transparent) 118px 122px),
    repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in srgb, var(--color-shade) 25%, transparent) 38px 41px),
    linear-gradient(var(--color-brick-dark), var(--color-brick) 70%, transparent); }
#cv { position: absolute; inset: 0; width: 1280px; height: 720px; display: block; z-index: 7; pointer-events: none; }
.ver { position: absolute; right: 16px; bottom: 10px; font-size: 13px; opacity: .6; font-weight: 600; z-index: 3; pointer-events: none; }

/* botones */
button.px {
  font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--color-white);
  background: linear-gradient(var(--color-navy-500), var(--color-navy-600));
  border: 0; border-radius: var(--radius-lg); padding: 14px 34px; min-width: 84px; min-height: 64px; cursor: pointer;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-white) 28%, transparent), 0 8px 0 var(--color-navy-edge), var(--shadow-soft);
  transition: transform var(--duration-fast) var(--ease-smooth), filter var(--duration-fast);
}
button.px:hover { filter: brightness(1.12); }
button.px:active { transform: translateY(5px); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-white) 28%, transparent), 0 3px 0 var(--color-navy-edge); }
button.px.gold {
  background: linear-gradient(var(--color-gold-light), var(--color-gold-deep)); color: var(--color-gold-ink);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-white) 50%, transparent), 0 8px 0 var(--color-gold-edge), var(--shadow-soft);
}
button.px.small { font-size: 22px; padding: 10px 24px; min-height: 52px; }
button.px:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid var(--color-gold); outline-offset: 3px; }

/* pantallas y paneles */
.scr { position: absolute; inset: 0; z-index: 40; background: var(--color-brick); }
.scr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px;
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, color-mix(in srgb, var(--color-shade) 30%, transparent) 118px 122px),
    repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in srgb, var(--color-shade) 25%, transparent) 38px 41px),
    linear-gradient(var(--color-brick), var(--color-brick) 70%, transparent); }
.title { position: absolute; left: 0; right: 0; top: 50px; text-align: center; }
.title h1 { font-family: var(--font-display); font-weight: 900; font-size: 56px; margin: 0; color: var(--color-gold);
  text-shadow: 0 6px 0 var(--color-gold-edge), 0 12px 22px color-mix(in srgb, var(--color-black) 45%, transparent); letter-spacing: 3px; }
.title small { font-size: 22px; color: var(--color-white); background: var(--veil); padding: 4px 16px; border-radius: var(--radius-full); display: inline-block; font-weight: 700; }
.panel { background: var(--panel); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 4px var(--color-hud-blue), var(--shadow-soft); padding: 28px 38px; min-width: 520px; position: absolute; }
.dim { opacity: .78; font-size: 17px; font-weight: 600; }
.ok { color: var(--color-ok); }
.bad { color: var(--color-alert); }
.cards { position: absolute; left: 0; right: 0; top: 230px; display: flex; gap: 30px; justify-content: center; }
.card { width: 220px; height: 280px; background: var(--panel); border: 0; border-radius: var(--radius-lg); color: inherit; font: inherit;
  box-shadow: inset 0 0 0 5px var(--color-hud-blue), var(--shadow-soft); padding-top: 14px; cursor: pointer; text-align: center; }
.card canvas { display: block; margin: 0 auto; width: 150px; height: 170px; }
.card small { display: block; font-size: 26px; margin-top: 8px; }
.card:hover, .card.on { box-shadow: inset 0 0 0 5px var(--color-gold), var(--shadow-soft); }
.roster { font-size: 28px; line-height: 1.9; margin: 8px 0; text-align: left; display: inline-block; min-width: 380px; }
.roster .host { font-size: 15px; background: var(--color-gold); color: var(--color-gold-ink); border-radius: var(--radius-full); padding: 2px 10px; margin-left: 8px; font-weight: 800; }
.btnrow { margin-top: 14px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.codein { font: 900 34px var(--font-display); letter-spacing: 6px; text-align: center; text-transform: uppercase; width: 220px; padding: 6px 10px; border-radius: var(--radius-md); border: 3px solid var(--color-hud-blue); background: var(--color-navy-950); color: var(--color-gold); }
.codein:focus-visible { outline: 3px solid var(--color-gold); }
.code { font-size: 64px; color: var(--color-gold); letter-spacing: 8px; font-family: var(--font-display); font-weight: 900; }
.res { font-size: 26px; line-height: 1.8; text-align: left; }
.res b { color: var(--color-gold); }
.ov { position: absolute; inset: 0; background: var(--veil); z-index: 50; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; text-align: center; }
.ov h1 { font-family: var(--font-display); font-weight: 900; font-size: 48px; margin: 0; color: var(--color-gold); }
.ov p { font-size: 24px; margin: 0; max-width: 760px; line-height: 1.35; font-weight: 600; }

/* HUD */
.hud { position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: 30; pointer-events: none; }
.hbox { position: absolute; top: 12px; height: 96px; background: var(--panel); border-radius: var(--radius-md); box-shadow: inset 0 0 0 3px var(--color-hud-blue), var(--shadow-soft); text-align: center; }
.hbox .lbl { display: block; font-size: 20px; margin-top: 4px; color: var(--color-white); }
.hbox .val { display: block; font-family: var(--font-display); font-weight: 900; font-size: 38px; color: var(--color-gold); font-variant-numeric: tabular-nums; }
#h-pts { left: 40px; width: 200px; }
#h-lv { left: 256px; width: 96px; }
#h-obj { left: 360px; width: 560px; }
#h-time { left: 1010px; width: 150px; }
#h-time .val { font-size: 34px; }
#h-time.low .val { color: var(--color-alert); }
#h-time.pen { animation: penf var(--duration-base) 6; }
#h-pause { position: absolute; left: 1180px; top: 12px; width: 80px; height: 96px; pointer-events: auto; display: flex; align-items: center; justify-content: center; }
.slots { display: flex; justify-content: space-around; padding: 2px 8px; }
.slot { width: 100px; }
.slot .ic { height: 46px; display: flex; align-items: center; justify-content: center; }
.slot .ic canvas { height: 44px; width: 44px; filter: grayscale(1) brightness(.55); }
.slot.got .ic canvas { filter: drop-shadow(0 0 8px var(--color-gold)); }
.slot .ct { font-size: 15px; line-height: 16px; }
.slot.got .ct { color: var(--color-ok); }
@keyframes penf { 50% { transform: scale(1.35); } }
.teamstrip { position: absolute; left: 40px; top: 118px; white-space: nowrap; z-index: 30; font-size: 16px; background: var(--veil); border-radius: var(--radius-md); box-shadow: inset 0 0 0 3px var(--color-hud-blue); padding: 4px 14px; line-height: 1.5; }
.teamstrip .goal { color: var(--color-gold); }

/* nichos del mueble (2 filas de 4 sobre el fondo) */
.nichos { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.lock { position: absolute; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 8px; pointer-events: auto; background: none; border: 0; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.lock canvas { height: 40px; width: 40px; flex: none; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--color-black) 60%, transparent)); }
.lock .nm { font-size: 15px; line-height: 17px; font-weight: 800; color: var(--color-white); text-shadow: 0 2px 3px var(--color-black), 0 0 6px var(--color-black); flex: 1; text-align: left; }
.lock .cnt { position: absolute; right: 5px; top: 3px; min-width: 24px; background: var(--color-gold); color: var(--color-gold-ink); border-radius: 12px; font-weight: 900; font-size: 15px; line-height: 24px; padding: 0 4px; text-align: center; }
.lock .key { position: absolute; left: 4px; bottom: 3px; width: 18px; background: var(--veil); color: var(--color-white); border-radius: 5px; font-size: 12px; line-height: 18px; font-weight: 700; text-align: center; }
.lock:hover { background: color-mix(in srgb, var(--color-gold) 18%, transparent); box-shadow: inset 0 0 0 2px var(--color-gold); }
.lock.ok { background: color-mix(in srgb, var(--color-ok) 38%, transparent); }
.lock.bad { background: color-mix(in srgb, var(--color-alert) 45%, transparent); box-shadow: inset 0 0 0 3px var(--color-alert), 0 0 18px var(--color-alert); animation: shake .12s 4; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.toast { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); background: var(--color-navy-950); padding: 12px 22px; border-radius: 14px; font-size: 20px; z-index: 80; font-weight: 700; max-width: 900px; text-align: center; }
.toast:empty { display: none; }

#rotate { position: fixed; inset: 0; background: var(--color-black); z-index: 200; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 26px; text-align: center; padding: 30px; gap: 10px; }
#rotate .ph { font-size: 70px; display: inline-block; animation: turn 2.4s ease-in-out infinite; }
#rotate b { font-size: 34px; color: var(--color-gold); }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.lostbar { position: absolute; left: 0; right: 0; top: 0; z-index: 90; display: flex; gap: 14px; align-items: center; justify-content: center; padding: 8px; background: var(--color-alert); color: var(--color-gold-ink); font-weight: 800; }
.demo { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 90; background: var(--color-gold-deep); color: var(--color-gold-ink); border-radius: var(--radius-full); padding: 4px 18px; font-size: 16px; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  #rotate .ph, .lock.bad, #h-time.pen { animation: none !important; }
}