/* ============================================================
   Jester Master — estética de game show
   Escenario oscuro, reflectores, marquesina con bombillas, dorado y rojo.
   ============================================================ */
:root {
  --bg: #0b0820;
  --bg-2: #130e31;
  --surface: #1c1644;
  --surface-2: #271f5c;
  --surface-3: #352a78;
  --line: rgba(255, 248, 236, 0.1);
  --text: #fff8ec;
  --muted: #bab2e2;
  --faint: #8c82bd;
  --coral: #ff3d5a;
  --coral-d: #b21e3a;
  --sun: #ffcc3d;
  --sun-d: #c38a12;
  --lime: #7ee04a;
  --lime-d: #4c9a22;
  --sky: #2fd6ff;
  --sky-d: #168fb0;
  --magenta: #ff4fd8;
  --violet: #8b5cf6;
  --ink: #120b26;
  /* Estilo ilustrado: contorno de tinta, bisel y sombras de "cartón" */
  --outline: #0c0822;
  --outline-w: 3px;
  --drop: #07051a;
  --bevel: inset 0 2px 0 rgba(255, 255, 255, 0.09), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  --grain: url('art/grain.svg');
  --ink-text: 2px 2px 0 var(--outline), -2px 2px 0 var(--outline), 2px -2px 0 var(--outline), -2px -2px 0 var(--outline), 0 2px 0 var(--outline), 0 -2px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline);
  --radius: 20px;
  --marquee: 'Bungee', 'Arial Black', 'Impact', system-ui, sans-serif;
  --display: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
  /* Movimiento */
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-in: cubic-bezier(0.6, 0, 0.8, 0.4);
  --ease-pop: cubic-bezier(0.3, 1.6, 0.6, 1);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --dur-fast: 0.14s;
  --dur: 0.32s;
  --dur-slow: 0.6s;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  background:
    radial-gradient(70rem 30rem at 50% -8%, rgba(139, 92, 246, 0.35), transparent 65%),
    radial-gradient(40rem 30rem at 50% 115%, rgba(255, 61, 90, 0.22), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Reflectores que barren el escenario */
body::before,
body::after {
  content: '';
  position: fixed;
  top: -30vh;
  width: 60vmax;
  height: 140vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  mix-blend-mode: screen;
  background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgba(255, 238, 190, 0.9) 50%, transparent 58%);
  filter: blur(8px);
  transform-origin: 50% 0;
}
body::before { left: -18vmax; animation: sweepL 11s ease-in-out infinite alternate; }
body::after { right: -18vmax; animation: sweepR 13s ease-in-out infinite alternate; }
@keyframes sweepL { from { transform: rotate(-26deg); } to { transform: rotate(18deg); } }
@keyframes sweepR { from { transform: rotate(24deg); } to { transform: rotate(-20deg); } }

.wrap {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 16px 130px;
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 0.875rem; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
[hidden] { display: none !important; }

.show-title {
  font-family: var(--marquee);
  font-weight: 400;
  font-size: clamp(1.8rem, 7vw, 3rem);
  letter-spacing: 0.01em;
  color: var(--sun);
  text-shadow: 0 3px 0 var(--coral-d), 0 0 26px rgba(255, 204, 61, 0.35);
  line-height: 1.05;
}

/* ---------- Íconos y emojis dibujados (public/icons.svg) ---------- */
.ic, .emo { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.22em; flex-shrink: 0; overflow: visible; }
.ic { filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.25)); }
.btn .ic, .btn .emo, .chip .ic, .chip .emo, .pill .ic, .pill .emo { width: 1.25em; height: 1.25em; }
s .ic, s .emo { opacity: 0.45; filter: grayscale(0.6); }
.icon-btn .ic, .icon-btn .emo { width: 1.55em; height: 1.55em; vertical-align: middle; }
.avatar-opt .emo, .pick-chip .emo { width: 1.3em; height: 1.3em; }

/* ---------- Botones ---------- */
button { font: inherit; color: inherit; }

.btn {
  --c: var(--surface-3);
  --d: #1d164a;
  position: relative;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 13px 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  background: var(--c);
  color: var(--text);
  box-shadow: 0 4px 0 var(--d), 0 8px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.07s ease, box-shadow 0.07s ease, filter 0.15s;
  user-select: none;
}
/* Brillo de plástico en la mitad superior */
.btn::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
  pointer-events: none;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--d); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible, .chip:focus-visible, .pl-card:focus-visible, .seg button:focus-visible, .answer-btn:focus-visible, .vote-card:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}
.btn-coral { --c: var(--coral); --d: var(--coral-d); }
.btn-lime { --c: var(--lime); --d: var(--lime-d); color: var(--ink); }
.btn-sun { --c: var(--sun); --d: var(--sun-d); color: var(--ink); }
.btn-sky { --c: var(--sky); --d: var(--sky-d); color: var(--ink); }
.btn-dark { --c: var(--ink); --d: rgba(0, 0, 0, 0.4); }
.btn-ghost { --c: rgba(255, 255, 255, 0.04); --d: transparent; box-shadow: none; border: 1.5px solid var(--line); }
.btn-ghost::before { display: none; }
.btn-block { width: 100%; }
.btn-lg { padding: 18px 22px; font-size: 1.3rem; border-radius: 18px; }
.btn-sm { padding: 8px 12px; font-size: 0.9rem; border-radius: 10px; box-shadow: 0 3px 0 var(--d); }
.icon-btn { min-width: 42px; }
.icon-btn s { opacity: 0.55; }
.btn-glow { animation: glow 2.2s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { box-shadow: 0 4px 0 var(--d), 0 0 0 rgba(255, 204, 61, 0); }
  50% { box-shadow: 0 4px 0 var(--d), 0 0 28px rgba(255, 204, 61, 0.45); }
}
.buzzer { font-family: var(--marquee); font-weight: 400; letter-spacing: 0.02em; }
.link {
  background: none; border: 0; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; padding: 4px 8px; font-size: 0.9rem;
}

/* ---------- Tarjetas y campos ---------- */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

input[type='text'], textarea {
  width: 100%;
  background: var(--bg-2);
  border: 2px solid var(--surface-3);
  color: var(--text);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  font-size: 1.05rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type='text']:focus, textarea:focus { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(255, 204, 61, 0.15); }
textarea { resize: vertical; min-height: 110px; }
label.field, .field-label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; }

/* ---------- Marquesina (logo) ---------- */
.hero { text-align: center; padding-block: 30px 4px; }
.loader { font-family: var(--display); color: var(--muted); padding: 40px; animation: pulse 0.9s ease-in-out infinite alternate; }

.marquee {
  position: relative;
  display: inline-block;
  padding: 30px 30px 22px;
  border-radius: 26px;
  background: radial-gradient(120% 90% at 50% 0%, #3a1664, #1b0b3a 70%);
  border: 4px solid var(--sun);
  box-shadow: 0 0 0 4px var(--coral-d), 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 60px rgba(255, 204, 61, 0.2);
  transform: rotate(-1.5deg);
  max-width: 100%;
}
.marquee-bulbs,
.marquee-bulbs::after {
  --bulb: radial-gradient(circle, #fffbe0 0 3px, rgba(255, 204, 61, 0.55) 4px, transparent 6.5px);
  position: absolute;
  inset: 3px;
  border-radius: 20px;
  background:
    var(--bulb) top / 22px 14px space no-repeat,
    var(--bulb) bottom / 22px 14px space no-repeat,
    var(--bulb) left / 14px 22px no-repeat space,
    var(--bulb) right / 14px 22px no-repeat space;
  pointer-events: none;
}
/* Dos capas desfasadas que se alternan: efecto de luces que corren */
.marquee-bulbs { animation: blinkA 0.9s steps(1) infinite; filter: drop-shadow(0 0 3px rgba(255, 204, 61, 0.9)); }
.marquee-bulbs::after { content: ''; inset: 0; --bulb: radial-gradient(circle, #ff9fb0 0 2px, transparent 4px); animation: blinkB 0.9s steps(1) infinite; }
@keyframes blinkA { 0% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes blinkB { 0% { opacity: 0; } 50% { opacity: 1; } }
.logo { font-family: var(--marquee); font-weight: 400; line-height: 0.9; margin: 0; }
.logo .l1 {
  display: block;
  font-size: clamp(2.6rem, 13vw, 5rem);
  background: linear-gradient(180deg, #fff6c8 0%, var(--sun) 45%, #ff9f1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 var(--coral-d)) drop-shadow(0 0 18px rgba(255, 204, 61, 0.35));
}
.logo .l2 {
  display: inline-block;
  margin-top: 8px;
  font-size: clamp(1.3rem, 6.5vw, 2.4rem);
  color: var(--text);
  background: var(--coral);
  padding: 4px 16px 2px;
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--coral-d);
  letter-spacing: 0.12em;
}
.tagline { margin-top: 22px; color: var(--muted); font-weight: 700; }

.home { max-width: 480px; margin: 0 auto; }
.avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-opt {
  width: 46px; height: 46px; border-radius: 12px; border: 2px solid transparent;
  background: var(--surface-2); font-size: 1.5rem; cursor: pointer; transition: transform 0.12s;
}
.avatar-opt:hover { transform: translateY(-2px); }
.avatar-opt[aria-pressed='true'] { border-color: var(--sun); background: var(--surface-3); transform: scale(1.1); box-shadow: 0 0 16px rgba(255, 204, 61, 0.35); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 0.85rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.code-input { text-transform: uppercase; letter-spacing: 0.3em; font-family: var(--marquee); text-align: center; font-size: 1.4rem !important; }

.modes-intro { display: grid; gap: 8px; }
.mode-pill { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.mode-pill .em { font-size: 1.8rem; line-height: 1; }
.mode-pill b { font-family: var(--display); font-size: 1.05rem; }
.mode-pill p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Cabecera sala ---------- */
.topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.brand-mini { font-family: var(--marquee); color: var(--sun); font-size: 1rem; display: flex; align-items: center; gap: 4px; }
.room-code {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--text); color: var(--ink); border: 0; cursor: pointer;
  border-radius: 14px; padding: 5px 7px 5px 14px; font-weight: 700;
  box-shadow: 0 3px 0 #b9ad96;
}
.room-code .code { font-family: var(--marquee); font-size: 1.35rem; letter-spacing: 0.14em; }
.room-code .copy { background: var(--coral); color: var(--text); font-size: 0.75rem; padding: 5px 8px; border-radius: 9px; font-family: var(--display); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; background: var(--surface-2); color: var(--muted);
  font-size: 0.85rem; font-weight: 800; white-space: nowrap;
}
.pill-sun { background: var(--sun); color: var(--ink); }
.clock-pill { font-family: var(--marquee); background: var(--sun); color: var(--ink); padding: 6px 14px; border-radius: 12px; font-size: 1.3rem; box-shadow: 0 3px 0 var(--sun-d); }

/* ---------- Tabs y segmentados ---------- */
.tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 5px; background: var(--bg-2);
  border-radius: 16px; margin-bottom: 14px; scrollbar-width: none; border: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 1 0 auto; border: 0; background: transparent; color: var(--muted); padding: 10px 14px;
  border-radius: 12px; font-family: var(--display); font-weight: 600; font-size: 1rem; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tabs button[aria-selected='true'] { background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); color: var(--text); box-shadow: inset 0 -3px 0 var(--sun); }
.tabs .badge { background: var(--coral); color: var(--text); border-radius: 999px; padding: 0 7px; font-size: 0.75rem; margin-left: 4px; }
.tab-body { animation: slideUp 0.28s ease-out; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  border: 2px solid var(--surface-3); background: var(--bg-2); color: var(--text); border-radius: 12px;
  padding: 9px 14px; font-weight: 800; cursor: pointer; min-width: 48px;
}
.seg button[aria-pressed='true'] { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.seg button:disabled { cursor: default; }
.seg button:disabled:not([aria-pressed='true']) { opacity: 0.5; }

.setting { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting .label { font-weight: 800; }
.setting .hint { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.setting .full { grid-column: 1 / -1; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-2); border-radius: 12px; padding: 4px; }
.stepper button { width: 36px; height: 36px; border-radius: 9px; border: 0; background: var(--surface-3); font-size: 1.2rem; cursor: pointer; }
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stepper output { min-width: 34px; text-align: center; font-family: var(--marquee); font-size: 1.1rem; }

.switch { position: relative; width: 54px; height: 32px; border-radius: 999px; border: 0; background: var(--surface-3); cursor: pointer; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.6, 1); }
.switch[aria-checked='true'] { background: var(--lime); }
.switch[aria-checked='true']::after { transform: translateX(22px); background: var(--ink); }
.switch:disabled { opacity: 0.6; cursor: default; }

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mode-card {
  text-align: left; border: 2px solid var(--surface-3); background: var(--bg-2); border-radius: 16px;
  padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: transform 0.12s, border-color 0.15s;
}
.mode-card:hover:not(:disabled) { transform: translateY(-2px); }
.mode-card strong { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.mode-card span { color: var(--muted); font-size: 0.9rem; }
.mode-card[aria-pressed='true'] { border-color: var(--sun); background: radial-gradient(120% 120% at 0% 0%, rgba(255, 204, 61, 0.18), transparent 60%), var(--bg-2); box-shadow: 0 0 22px rgba(255, 204, 61, 0.18); }
.mode-card:disabled { cursor: default; }

/* ---------- Jugadores / equipos ---------- */
.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.team-col { background: var(--surface); border-radius: var(--radius); border: 2px solid var(--team); overflow: hidden; }
.team-head { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1.1rem; background: var(--team); }
/* El nombre propio de un equipo puede ser largo: parte en dos renglones antes que cortarse o
   empujar los botones fuera de la columna */
.team-title { min-width: 0; flex: 1; line-height: 1.15; overflow-wrap: anywhere; }
.team-rename { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(12, 8, 34, 0.35); background: rgba(255, 255, 255, 0.35); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0; }
.team-rename:hover, .team-rename:focus-visible { background: rgba(255, 255, 255, 0.6); }
.team-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.player {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2);
  animation: popIn 0.3s cubic-bezier(0.3, 1.6, 0.6, 1);
}
@keyframes popIn { from { transform: scale(0.85); opacity: 0; } }
.player .av { font-size: 1.5rem; width: 34px; text-align: center; }
.player .nm { font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player.me { box-shadow: inset 0 0 0 2px var(--sun); }
.player.off { opacity: 0.45; }
.player .x { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 1.1rem; padding: 2px 6px; border-radius: 8px; }
.player .x:hover { color: var(--coral); }
.host-badge { filter: drop-shadow(0 0 6px rgba(255, 204, 61, 0.7)); }
.empty { color: var(--faint); font-size: 0.9rem; padding: 10px; text-align: center; }
.team-banner { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; color: var(--ink); font-family: var(--display); font-weight: 600; background: var(--team); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); position: relative; }

/* ---------- Temas / playlists ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px;
  border: 2px solid var(--surface-3); background: var(--bg-2); color: var(--text); font-weight: 800; cursor: pointer; font-size: 0.95rem;
  transition: transform 0.1s;
}
.chip:active:not(:disabled) { transform: scale(0.95); }
.chip .n { color: var(--faint); font-weight: 700; font-size: 0.8rem; }
.chip[aria-pressed='true'] { background: var(--text); color: var(--ink); border-color: var(--text); }
.chip[aria-pressed='true'] .n { color: #6b6290; }
.chip.ex[aria-pressed='true'] { background: var(--coral); border-color: var(--coral); color: var(--text); }
.chip.ex[aria-pressed='true'] .n { color: rgba(255, 248, 236, 0.75); }
.chip:disabled { cursor: default; }
/* Vetos ajenos o sin vetos libres: se ven, pero apagados */
.chip.ex:disabled { opacity: 0.55; }
.chip.ex[aria-pressed='true']:disabled { opacity: 0.8; }
.chip .who { margin-left: 2px; }
.ex-status { min-height: 1.6em; }

.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.pl-card {
  text-align: left; border: 2px solid var(--surface-3); background: var(--bg-2); border-radius: 16px; padding: 12px;
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: relative; color: var(--text); transition: transform 0.12s;
}
.pl-card:hover:not(:disabled) { transform: translateY(-2px); }
.pl-card .em { font-size: 1.6rem; }
.pl-card .nm { font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.15; }
.pl-card .ex { color: var(--faint); font-size: 0.8rem; line-height: 1.3; }
.pl-card .ct { position: absolute; top: 10px; right: 10px; font-size: 0.75rem; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.pl-card[aria-pressed='true'] { border-color: var(--lime); background: rgba(126, 224, 74, 0.1); }
.pl-card[aria-pressed='true'] .ct { background: var(--lime); color: var(--ink); }
.pl-card:disabled { cursor: default; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---------- Barra inferior ---------- */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, rgba(11, 8, 32, 0));
}
.bottom-bar .inner { max-width: 980px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.bottom-bar .inner > * { flex: 1; }
.waiting { text-align: center; color: var(--muted); font-weight: 700; padding: 14px; background: var(--surface); border-radius: 16px; border: 1px dashed var(--surface-3); }

/* ---------- Votación ---------- */
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.vote-card {
  position: relative; overflow: hidden; text-align: left; border: 2px solid var(--surface-3); background: var(--surface);
  border-radius: 18px; padding: 14px; cursor: pointer; color: var(--text); display: flex; gap: 12px; align-items: center;
}
.vote-card .em { font-size: 2rem; z-index: 1; }
.vote-card .info { z-index: 1; flex: 1; min-width: 0; }
.vote-card .nm { font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.15; }
.vote-card .bar { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(47, 214, 255, 0.08), rgba(47, 214, 255, 0.25)); transition: width 0.45s cubic-bezier(0.3, 1.3, 0.6, 1); }
.vote-card .votes { z-index: 1; font-family: var(--marquee); font-size: 1.5rem; min-width: 28px; text-align: right; }
.vote-card[aria-pressed='true'] { border-color: var(--sky); box-shadow: 0 0 20px rgba(47, 214, 255, 0.25); }
.vote-card[aria-pressed='true'] .votes::after { content: ' ✓'; color: var(--sky); font-size: 1rem; }

/* ---------- Anuncio de turno ---------- */
.turn-ready { text-align: center; padding-block: 4px; }
.spotlight-stage { position: relative; padding: 24px 12px 8px; overflow: hidden; border-radius: 28px; }
.rays {
  position: absolute; inset: -60%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 204, 61, 0.14) 0 10deg, transparent 10deg 20deg);
  animation: spin 24s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 60%);
  mask: radial-gradient(circle, #000 20%, transparent 60%);
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.big-avatar { position: relative; font-size: 5.5rem; line-height: 1; margin: 4px 0 8px; animation: bounceIn 0.7s cubic-bezier(0.3, 1.7, 0.6, 1); filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.3)); }
@keyframes bounceIn { from { transform: scale(0) rotate(-30deg); } }
.spotlight-stage .show-title { position: relative; margin-bottom: 12px; }
.instruction { font-size: 1.1rem; color: var(--muted); max-width: 540px; margin: 0 auto; }
.peek { max-width: 420px; margin: 0 auto; width: 100%; }

/* ---------- Turno en juego ---------- */
.hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 12px; }
.hud .left { justify-self: start; }
.hud .right { justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.hud-num { font-family: var(--marquee); font-size: 2.2rem; color: var(--sun); line-height: 1; }
.timer { position: relative; width: 112px; height: 112px; filter: drop-shadow(0 0 18px rgba(255, 204, 61, 0.25)); }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .track { stroke: var(--surface-2); }
.timer .prog { stroke: var(--sun); transition: stroke-dashoffset 0.3s ease-out, stroke 0.3s; }
html.reposo .timer .prog { transition: stroke 0.3s; }
.timer.low { filter: drop-shadow(0 0 22px rgba(255, 61, 90, 0.55)); }
.timer.low .prog { stroke: var(--coral); }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--marquee); font-size: 2.3rem; }
.timer.low .num { color: var(--coral); animation: pulse 0.5s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }

.turn-stage.pre-start .word-card,
.turn-stage.pre-start .guess-card,
.turn-stage.pre-start .mystery-card { filter: blur(16px); }
.turn-stage.pre-start .controls,
.turn-stage.pre-start .answer-buttons,
.turn-stage.pre-start .guess-row,
.turn-stage.pre-start .buzzer { pointer-events: none; opacity: 0.4; }

.effect-banner {
  background: repeating-linear-gradient(-45deg, var(--coral), var(--coral) 14px, var(--coral-d) 14px, var(--coral-d) 28px);
  color: var(--text); border-radius: 16px; padding: 12px 16px; text-align: center; font-family: var(--marquee);
  font-size: 1.3rem; margin-bottom: 12px; animation: wobble 0.9s ease-in-out infinite; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
@keyframes wobble { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }

.word-card {
  position: relative;
  background: var(--text); color: var(--ink); border-radius: 26px; padding: 18px 18px 22px; text-align: center;
  box-shadow: 0 0 0 5px var(--sun), 0 0 0 9px var(--coral-d), 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 12px 9px;
  transition: filter 0.4s;
}
.word-card.anim { animation: flipIn 0.45s cubic-bezier(0.3, 1.4, 0.6, 1); }
@keyframes flipIn { from { transform: rotateY(90deg) scale(0.9); opacity: 0; } }
.card-heading { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: #6b6290; }
.word-card .word { font-family: var(--marquee); font-size: clamp(1.8rem, 8vw, 3.6rem); line-height: 1.02; overflow-wrap: anywhere; }
.word-card .meta { font-size: 0.85rem; color: #6b6290; font-weight: 700; }
.img-wrap {
  position: relative; width: min(260px, 70%); aspect-ratio: 1; max-width: 100%; border-radius: 18px; overflow: hidden;
  background: #efe3cc; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.img-wrap.placeholder, .img-wrap.broken { display: grid; place-items: center; font-size: 4.5rem; width: 120px; }
.img-wrap.broken img, .img-wrap.broken .img-credit, .img-wrap.broken .img-flag { display: none; }
/* «La foto no es esto»: discreta en la esquina, para no tocarla sin querer */
.img-flag { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.45); font-size: 0.85rem; cursor: pointer; opacity: 0.7; }
.img-flag:hover, .img-flag:focus-visible { opacity: 1; }
.img-wrap.broken::after { content: '✨'; }
.img-credit { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.65rem; padding: 2px 6px; border-radius: 6px; text-decoration: none; }
.word-card.rival { background: var(--surface-2); color: var(--text); box-shadow: 0 0 0 3px var(--surface-3); }
.word-card.rival .card-heading, .word-card.rival .meta { color: var(--muted); }
.word-card.secret .card-heading { color: var(--coral-d); }
.word-card.mini { margin: 6px 0 0; padding: 12px; box-shadow: 0 0 0 3px var(--sun); }
.word-card.mini .word { font-size: 1.15rem; }
.word-card.mini .img-wrap { width: 100%; }

.guess-card {
  background: var(--surface); border: 2px solid var(--surface-3); border-radius: 26px; padding: 22px 18px; text-align: center;
  min-height: 210px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
  transition: filter 0.4s;
}
.mystery { font-family: var(--marquee); font-size: 4.5rem; line-height: 1; color: var(--sun); text-shadow: 0 5px 0 var(--coral-d); animation: bob2 1.6s ease-in-out infinite; }
@keyframes bob2 { 50% { transform: translateY(-6px) rotate(6deg); } }
.pattern { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; position: relative; }
.pattern .w { display: flex; gap: 4px; }
.pattern .b {
  width: 24px; height: 32px; border-radius: 6px; background: var(--bg-2); border-bottom: 3px solid var(--sky);
  display: grid; place-items: center; font-family: var(--marquee); color: var(--sun);
}
.pattern .b.p { background: none; border: 0; color: var(--muted); width: 10px; }
.letter-hint { font-family: var(--display); font-size: 1.1rem; position: relative; }
.letter-hint b { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--sun); color: var(--ink); font-family: var(--marquee); font-size: 1.8rem; margin-left: 8px; vertical-align: middle; box-shadow: 0 3px 0 var(--sun-d); }
.clue { background: var(--bg-2); border-radius: 12px; padding: 10px 12px; font-weight: 800; position: relative; }

.controls { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 16px; }
.controls.single { grid-template-columns: 1fr; }
.controls .btn { min-height: 76px; font-size: 1.35rem; }

/* ---------- ¿Quién soy? ---------- */
.points-meter { background: var(--bg-2); border: 2px solid var(--sun); border-radius: 14px; padding: 6px 10px; min-width: 92px; text-align: center; }
.pm-value { font-family: var(--marquee); color: var(--sun); font-size: 1.8rem; line-height: 1; }
.pm-value small { font-family: var(--display); font-size: 0.75rem; margin-left: 2px; color: var(--muted); }
.pm-bar { height: 6px; background: var(--surface-3); border-radius: 6px; overflow: hidden; margin: 5px 0 3px; }
.pm-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--sun)); transition: width 0.2s linear; }
.pm-label { font-size: 0.7rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.points-meter.drop { animation: drop 0.5s ease-out; }
@keyframes drop { 30% { transform: scale(0.85); border-color: var(--coral); } }

.mystery-card {
  position: relative; overflow: hidden; border-radius: 28px; padding: 26px 16px; text-align: center;
  background: radial-gradient(90% 80% at 50% 0%, #3a1664, var(--surface) 70%); border: 3px solid var(--sun);
  display: flex; flex-direction: column; align-items: center; gap: 12px; transition: filter 0.4s;
}
.mystery-card .rays { inset: -80%; opacity: 0.8; }
.silhouette {
  position: relative; width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2a1e5e, #0b0820 70%); border: 4px dashed var(--sun);
  font-family: var(--marquee); font-size: 4.5rem; color: var(--sun); animation: bob2 1.8s ease-in-out infinite;
}
.mystery-title { position: relative; font-family: var(--marquee); font-size: clamp(1.8rem, 8vw, 2.8rem); color: var(--text); text-shadow: 0 4px 0 var(--coral-d); }
.answers-board { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 14px; }
.answer-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.answer-tile {
  border-radius: 16px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg-2); border: 2px solid var(--surface-3); transition: transform 0.2s, box-shadow 0.2s;
}
.answer-tile .em { font-size: 1.5rem; }
.answer-tile .lbl { font-family: var(--marquee); font-size: 0.95rem; }
.answer-tile .cnt { font-family: var(--marquee); font-size: 2rem; line-height: 1; }
.answer-tile.si .cnt { color: var(--lime); }
.answer-tile.no .cnt { color: var(--coral); }
.answer-tile.quizas .cnt { color: var(--sky); }
.answer-tile.lead { transform: scale(1.05); }
.answer-tile.si.lead { border-color: var(--lime); box-shadow: 0 0 20px rgba(126, 224, 74, 0.35); }
.answer-tile.no.lead { border-color: var(--coral); box-shadow: 0 0 20px rgba(255, 61, 90, 0.35); }
.answer-tile.quizas.lead { border-color: var(--sky); box-shadow: 0 0 20px rgba(47, 214, 255, 0.35); }
.answer-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.answer-btn {
  border: 0; border-radius: 16px; padding: 14px 6px; cursor: pointer; font-size: 1.8rem; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--surface-2); box-shadow: 0 4px 0 #120d33; transition: transform 0.08s;
}
.answer-btn span { font-family: var(--marquee); font-size: 0.95rem; }
.answer-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #120d33; }
.answer-btn.si[aria-pressed='true'] { background: var(--lime); color: var(--ink); }
.answer-btn.no[aria-pressed='true'] { background: var(--coral); }
.answer-btn.quizas[aria-pressed='true'] { background: var(--sky); color: var(--ink); }
.guess-row { display: flex; gap: 8px; margin-top: 14px; }
.guess-row input { flex: 1; min-width: 0; }
/* Sugerencias de la caja de adivinar. Viven fuera de #app (ver ui/suggest.js), así que se
   colocan con position: fixed sobre el campo. */
.suggest { position: fixed; z-index: 60; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--sun); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
.suggest[hidden] { display: none; }
.suggest-item { padding: 10px 12px; text-align: left; font: inherit; font-weight: 700; color: var(--text); background: none; border: 0; cursor: pointer; }
.suggest-item + .suggest-item { border-top: 1px solid rgba(255, 248, 236, 0.12); }
.suggest-item:hover, .suggest-item.on { background: rgba(255, 204, 61, 0.22); }

.guesses { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.miss-chip { background: rgba(255, 61, 90, 0.14); border: 1px solid rgba(255, 61, 90, 0.4); border-radius: 999px; padding: 3px 10px; font-size: 0.85rem; font-weight: 700; }

/* ---------- Power-ups ---------- */
.powerbar { margin-top: 18px; }
.power-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.power {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 14px;
  border: 2px solid var(--surface-3); background: var(--surface); color: var(--text); cursor: pointer; transition: transform 0.1s;
}
.power:hover:not(:disabled) { transform: translateY(-2px); }
.power .em { font-size: 1.6rem; }
.power .nm { font-weight: 800; font-size: 0.9rem; line-height: 1.15; }
.power .tp { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.power.help { border-color: rgba(126, 224, 74, 0.5); }
.power.sabotage { border-color: rgba(255, 61, 90, 0.55); }
.power.help:not(:disabled) { box-shadow: 0 0 14px rgba(126, 224, 74, 0.15); }
.power.sabotage:not(:disabled) { box-shadow: 0 0 14px rgba(255, 61, 90, 0.2); }
.power:disabled { opacity: 0.38; cursor: not-allowed; }
.power .qty { margin-left: auto; background: var(--surface-3); border-radius: 999px; padding: 0 7px; font-weight: 800; font-size: 0.8rem; }

.results { display: flex; flex-direction: column; gap: 6px; }
.result { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface); }
.result .t { flex: 1; font-weight: 700; }
.result .display { font-family: var(--marquee); color: var(--sun); }
.result.ok .i { color: var(--lime); }
.result.no .i { color: var(--faint); }
.result.no .t { color: var(--muted); text-decoration: line-through; }

/* ---------- Marcador y resumen ---------- */
.scoreboard { display: flex; flex-direction: column; gap: 8px; }
.target-label { text-align: right; }
.score-row { display: flex; align-items: center; gap: 10px; }
.score-row .nm { width: 130px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-row .track { flex: 1; height: 26px; background: var(--bg-2); border-radius: 8px; overflow: hidden; position: relative; }
.score-row .track .goal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; line-height: 1; }
.score-row .fill { display: block; height: 100%; border-radius: 8px; transition: width 0.7s cubic-bezier(0.3, 1.3, 0.6, 1); min-width: 6px; background: linear-gradient(90deg, var(--sky), var(--violet)); }
.score-row.mine .fill { background: linear-gradient(90deg, var(--sun), var(--coral)); }
.score-row .pts { width: 44px; text-align: right; font-family: var(--marquee); font-size: 1.25rem; }
[data-count].bump { color: var(--sun); display: inline-block; animation: bump 0.7s ease-out; }
@keyframes bump { 30% { transform: scale(1.35); } }

.summary-icon, .trophy { font-size: 3.6rem; animation: bounceIn 0.7s cubic-bezier(0.3, 1.7, 0.6, 1); }
.trophy { font-size: 4.4rem; filter: drop-shadow(0 0 24px rgba(255, 204, 61, 0.6)); }

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 10px 0; min-height: 260px; padding-top: 40px; }
.podium .step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 30%; max-width: 160px; position: relative; }
.podium .block {
  width: 100%; height: var(--h); border-radius: 14px 14px 4px 4px; display: grid; place-items: center; overflow: hidden;
  font-family: var(--marquee); font-size: 2rem; color: var(--ink); box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.25), 0 10px 24px rgba(0, 0, 0, 0.35);
}
.podium .place-1 .block { animation-delay: 0.9s; }
.podium .place-2 .block { animation-delay: 0.5s; }
.podium .place-3 .block { animation-delay: 0.2s; }
@keyframes rise { from { height: 0; } }
.podium .who { font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.podium .em { font-size: 2.4rem; animation: bounceIn 0.6s both; }
/* En el podio cabe el disfraz entero: es donde tiene sentido haberlo comprado */
.podium .em.em-arlek { display: grid; place-items: end center; min-height: 92px; }
.podium .place-1 .em { animation-delay: 1.4s; }
.podium .crown { position: absolute; top: -34px; font-size: 2rem; animation: bounceIn 0.6s 1.7s both; }

/* auto-fit y no auto-fill: con auto-fill una pantalla ancha crea columnas vacías a la derecha y
   las cartas se quedan pegadas a la izquierda, que es lo que pasaba al terminar un duelo (una o
   dos cartas en un monitor). auto-fit colapsa las vacías, el tope de 220px evita que una sola
   carta se estire de lado a lado, y justify-content las deja en el centro. */
.char-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); gap: 12px; justify-content: center; }

/* ---------- Toasts y modal ---------- */
#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast {
  background: rgba(39, 31, 92, 0.96); border: 1px solid var(--line); border-left: 4px solid var(--sun); color: var(--text); padding: 10px 14px; border-radius: 14px;
  font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); animation: toastIn 0.35s cubic-bezier(0.3, 1.5, 0.6, 1);
}
.toast.error { border-left-color: var(--coral); background: rgba(120, 20, 45, 0.96); }
.toast.sabotage { border-left-color: var(--magenta); background: rgba(110, 18, 80, 0.96); }
.toast.miss { border-left-color: var(--coral); }
.toast.out { animation: toastOut 0.25s ease-in forwards; }
/* El botón de un aviso (por ejemplo «Reportar» después de un error): los avisos no reciben
   clics para no tapar el juego, el botón sí */
.toast-act {
  pointer-events: auto; margin-left: 8px; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--outline);
  background: var(--sun); color: var(--ink); font: inherit; font-size: 0.9em; cursor: pointer;
}
/* El modal es una columna con altura máxima: sin esto, lo que tiene desplazamiento propio
   (los cuadros de texto y el registro) se encoge hasta desaparecer */
.modal.report-modal { overflow-x: hidden; }
.report-modal > * { flex-shrink: 0; }
.report-modal textarea { overflow-x: hidden; }
.report-file { align-self: flex-start; cursor: pointer; }
.report-log { background: var(--bg-2); border-radius: 10px; padding: 8px 10px; margin: 0; overflow-wrap: anywhere; }

/* ---------- Compartir la partida (ui/share.js) ---------- */
.share-btn { margin-top: 4px; }
.share-modal > * { flex-shrink: 0; }
/* La vista previa ocupa lo que haya y nunca obliga a desplazar de lado */
.share-stage { display: grid; place-items: center; min-height: 220px; background: var(--bg-2); border-radius: 16px; padding: 10px; }
.share-preview { display: block; max-width: 100%; max-height: min(52vh, 460px); border-radius: 12px; box-shadow: 0 6px 0 var(--drop); }
.share-preview.wide { max-height: 260px; }
.share-wait { width: 100%; max-width: 280px; text-align: center; }
.share-progress { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.share-progress i { display: block; height: 100%; background: var(--sun); transition: width 0.12s linear; }

/* ---------- Opinar sobre el juego (ui/feedback.js) ---------- */
/* Cinco caras grandes: tienen que poder tocarse con el pulgar sin apuntar */
.fb-faces { display: flex; justify-content: center; align-items: center; padding: 6px 0; gap: clamp(4px, 2vw, 12px); }
.fb-face {
  --s: clamp(46px, 15vw, 62px);
  width: var(--s); height: var(--s); min-height: 0; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 50%; border: var(--outline-w) solid var(--outline); background: var(--surface-2); box-shadow: 0 4px 0 var(--drop);
  font-size: 1.9rem; line-height: 1; transition: transform var(--dur-fast) var(--ease-pop), background var(--dur-fast);
}
.fb-face .emo { display: block; width: calc(var(--s) * 0.62); height: calc(var(--s) * 0.62); vertical-align: 0; }
.fb-face:hover { transform: translateY(-2px); }
.fb-face:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--drop); }
.fb-face[aria-pressed='true'] { background: var(--sun); transform: scale(1.14); }
/* Con una ya elegida, las demás se apagan: se ve cuál quedó */
.fb-faces:has([aria-pressed='true']) .fb-face[aria-pressed='false'] { opacity: 0.45; }
.fb-modal > * { flex-shrink: 0; }
@keyframes toastIn { from { transform: translateY(-16px) scale(0.95); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-12px); opacity: 0; } }

.modal-back { position: fixed; inset: 0; background: rgba(8, 5, 22, 0.75); z-index: 40; display: grid; place-items: center; padding: 16px; animation: fadeIn 0.2s; }
.modal { background: var(--surface); border-radius: 22px; padding: 18px; width: min(100%, 420px); max-height: 80vh; overflow: auto; border: 2px solid var(--sun); animation: popIn 0.3s cubic-bezier(0.3, 1.6, 0.6, 1); }

/* «Hay una versión nueva»: el servidor se actualizó mientras esta pestaña estaba abierta.
   Arriba y no abajo, para no taparle el botón de la partida a nadie (ver core/socket.js). */
.update-bar {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 31;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 6px 8px 6px 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 800;
  background: var(--sky); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.conn { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); background: var(--sun); color: var(--ink); padding: 6px 14px; border-radius: 999px; font-weight: 800; z-index: 30; font-size: 0.9rem; }

/* ---------- Selector de idioma ---------- */
.lang-picker { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ---------- Un solo dispositivo ---------- */
.local-mascot { display: grid; place-items: center; }
.local-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.local-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 14px; padding: 6px 10px; }
.local-n { width: 20px; text-align: center; font-weight: 900; color: var(--muted); }
.local-av summary { list-style: none; cursor: pointer; font-size: 1.4rem; }
.local-av summary::-webkit-details-marker { display: none; }
.local-av[open] .avatars { position: absolute; z-index: 5; background: var(--surface); border: 2px solid var(--surface-3); border-radius: 16px; padding: 8px; max-width: min(320px, 80vw); }
.local-name { flex: 1; min-width: 0; }
.seat-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 6px; overflow-x: auto;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); background: rgba(8, 5, 22, 0.86); backdrop-filter: blur(6px);
}
.seat-chip {
  display: flex; align-items: center; gap: 6px; flex: none; cursor: pointer; color: var(--text);
  background: var(--surface-2); border: 2px solid var(--surface-3); border-radius: 999px; padding: 4px 12px; font-weight: 800;
}
.seat-chip.on { border-color: var(--sun); background: var(--surface); }
.seat-chip.turn .nm { color: var(--sun); }
.seat-chip .nm { max-width: 8ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handoff { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: #08051a; backdrop-filter: blur(8px); cursor: pointer; padding: 20px; }
.handoff-card { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 420px; }
.handoff-kicker { color: var(--muted); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
/* La barra de asientos vive abajo: la barra de acciones se sube para no quedar tapada */
#app[data-local='si'] .bottom-bar { bottom: 46px; }
#app[data-local='si'] { padding-bottom: 46px; }

/* ---------- Caza en grupo ---------- */
.hunt-head { gap: 8px; flex-wrap: wrap; }
.hunt-grace { color: var(--sun); font-weight: 900; animation: pulse 1s ease-in-out infinite; }
.hunt-places { display: grid; gap: 8px; }
.hunt-place { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 14px; padding: 8px 12px; }
.hunt-place .em { font-size: 1.3rem; }
.hunt-place b { margin-left: auto; color: var(--sun); }
.hunt-place.empty { opacity: 0.6; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ---------- Rueda de turnos ---------- */
.wheel-card { display: grid; gap: 10px; }
.wheel-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.wheel {
  position: relative; flex: none; width: var(--wheel, 200px); height: var(--wheel, 200px);
  border: 2px dashed var(--surface-3); border-radius: 50%; margin: 18px;
}
.wheel-dir { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2rem; font-weight: 900; color: var(--sun); }
.wheel .seat { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; width: 62px; }
.wheel .seat-av {
  position: relative;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--surface-3); font-size: 1.2rem;
}
.wheel .seat-av .costume-badge { position: absolute; right: -5px; bottom: -5px; margin: 0; font-size: 0.7rem; }
.wheel .seat-av .costume-badge .emo, .wheel .seat-av .costume-badge .ic { width: 15px; height: 15px; }
.wheel .seat-av .emo, .wheel .seat-av .ic { width: 24px; height: 24px; }
.wheel .seat-name { font-size: 0.65rem; font-weight: 800; color: var(--muted); text-align: center; }
.wheel .seat.now .seat-av { background: var(--sun); border-color: var(--sun); }
.wheel .seat.now .seat-name { color: var(--sun); }
.wheel .seat.next .seat-av { border-color: var(--sky); }
.seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 200px; flex: 1; }
.seat-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 6px 10px; }
.seat-n { width: 20px; text-align: center; font-weight: 900; color: var(--muted); }
.seat-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-moves { display: flex; gap: 4px; }
.wheel-powers { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.power.orden { border-color: rgba(47, 214, 255, 0.55); }
.power.orden:not(:disabled) { box-shadow: 0 0 14px rgba(47, 214, 255, 0.18); }

/* ---------- Confirmación de aciertos: la sala vota si el punto cuenta ---------- */
.claim-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; place-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.claim-card {
  pointer-events: auto; width: min(420px, 100%); background: var(--surface); border: 2px solid var(--sun);
  border-radius: 20px; padding: 12px 14px; text-align: center; box-shadow: 0 18px 40px rgba(8, 5, 22, 0.45);
  display: grid; gap: 6px; justify-items: center; animation: claim-in 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes claim-in { from { transform: translateY(40px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.claim-what { font-size: 1.05rem; }
.claim-dots { display: flex; gap: 6px; }
.claim-dots span { width: 10px; height: 10px; border-radius: 999px; background: var(--surface-3); }
.claim-dots span.on { background: var(--sun); }
.claim-votes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.claim-clock { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .claim-card { animation: none; } }

/* ---------- Capa de efectos: cortinilla, cuenta regresiva, revelación ---------- */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
/* Aviso grande de power-up (fx.powerBanner): un cartel en el tercio de arriba, sin tapar toques */
.pu-banner { position: absolute; left: 50%; top: 26%; translate: -50% -50%; width: min(340px, calc(100vw - 32px)); padding: 14px 18px 16px; border-radius: 22px; text-align: center; color: var(--ink); background: var(--c); border: var(--outline-w, 3px) solid var(--outline); box-shadow: 0 8px 0 rgba(12, 8, 34, 0.45); --c: var(--lime); }
.pu-banner.tone-sabotage { --c: var(--coral); color: var(--text); }
.pu-banner.tone-wild { --c: var(--sun); }
.pu-banner.tone-orden { --c: var(--sky); }
.pu-banner.you { box-shadow: 0 0 0 6px rgba(255, 248, 236, 0.85), 0 8px 0 rgba(12, 8, 34, 0.45); }
.pu-emoji { font-size: 2.6rem; line-height: 1; }
.pu-emoji .ic, .pu-emoji .emo { width: 1em; height: 1em; }
.pu-title { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; margin-top: 4px; }
.pu-line { font-weight: 800; margin-top: 4px; font-size: 1.05rem; }
.pu-desc { font-size: 0.9rem; margin-top: 6px; opacity: 0.9; }
.pu-banner.css { animation: pu-in 0.3s var(--ease-pop, ease-out) both, pu-out 0.3s ease-in both calc(var(--hold, 1.2s) + 0.3s); }
@keyframes pu-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes pu-out { to { opacity: 0; transform: translateY(-20px); } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 65; }

.stinger { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; --band: var(--coral); --band-d: var(--coral-d); --title: var(--sun); }
.stinger.tone-gold { --band: var(--sun); --band-d: var(--sun-d); --title: var(--text); }
.stinger.tone-cyan { --band: var(--sky); --band-d: var(--sky-d); --title: var(--text); }
.stinger::before { content: ''; position: absolute; inset: 0; background: rgba(8, 5, 22, 0.7); animation: dim var(--dur) ease both; }
.stinger-band {
  position: absolute; left: -20%; right: -20%; top: 50%; height: 190px; margin-top: -95px;
  background: repeating-linear-gradient(-45deg, var(--band) 0 26px, var(--band-d) 26px 52px);
  box-shadow: 0 0 0 6px var(--ink), 0 0 60px rgba(0, 0, 0, 0.6);
  transform: rotate(-6deg) scaleX(0);
  animation: band var(--dur) cubic-bezier(0.7, 0, 0.2, 1) both;
}
.stinger-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0 8deg, transparent 8deg 16deg); animation: spin 6s linear infinite, dim var(--dur) ease both; }
.stinger-text { position: relative; text-align: center; padding-inline: 16px; animation: slam var(--dur) cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.stinger-title {
  font-family: var(--marquee); font-size: clamp(2rem, 11vw, 5.6rem); line-height: 0.95; color: var(--title);
  text-shadow: 0 6px 0 var(--ink), 0 0 40px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 2px var(--ink);
  overflow-wrap: anywhere;
}
.stinger-sub { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--text); margin-top: 8px; text-shadow: 0 2px 0 var(--ink); }
@keyframes dim { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes band { 0% { transform: rotate(-6deg) scaleX(0); } 22%, 78% { transform: rotate(-6deg) scaleX(1); } 100% { transform: rotate(-6deg) scaleX(1) translateX(120%); } }
@keyframes slam { 0% { transform: scale(3) rotate(-10deg); opacity: 0; } 20% { transform: scale(0.92) rotate(-3deg); opacity: 1; } 30%, 80% { transform: scale(1) rotate(-3deg); opacity: 1; } 100% { transform: scale(0.6) rotate(-3deg); opacity: 0; } }

.countdown { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(11, 8, 32, 0.55), rgba(11, 8, 32, 0.85)); animation: fadeIn 0.2s; }
.countdown-ring { position: absolute; width: min(64vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 10px solid var(--sun); box-shadow: 0 0 60px rgba(255, 204, 61, 0.45), inset 0 0 40px rgba(255, 204, 61, 0.3); animation: ringPulse 1s ease-out infinite; }
.countdown-num { position: relative; font-family: var(--marquee); font-size: min(38vw, 11rem); color: var(--text); text-shadow: 0 8px 0 var(--coral-d), 0 0 50px rgba(255, 204, 61, 0.5); }
.countdown-num.pop { animation: numPop 0.9s cubic-bezier(0.3, 1.6, 0.5, 1); }
.countdown.go { animation: fadeOut 0.7s ease-in forwards; }
.countdown.go .countdown-num { color: var(--sun); font-size: min(24vw, 7rem); }
@keyframes ringPulse { from { transform: scale(0.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
@keyframes numPop { 0% { transform: scale(2.4); opacity: 0; } 30% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fadeOut { to { opacity: 0; } }

.float-text { position: absolute; transform: translate(-50%, -50%); font-family: var(--marquee); font-size: 3rem; color: var(--sun); text-shadow: 0 4px 0 var(--coral-d); animation: floatUp 1.1s ease-out forwards; }
@keyframes floatUp { 0% { transform: translate(-50%, -30%) scale(0.5); opacity: 0; } 25% { transform: translate(-50%, -60%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -180%) scale(1); opacity: 0; } }

.reveal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 5, 22, 0.86); overflow: hidden; animation: fadeIn 0.25s; padding: 16px; }
.reveal.out { animation: fadeOut 0.4s forwards; }
.reveal-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(rgba(255, 204, 61, 0.16) 0 9deg, transparent 9deg 18deg); animation: spin 10s linear infinite; }
.reveal-inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reveal-kicker { font-family: var(--marquee); font-size: clamp(1.3rem, 6vw, 2.2rem); color: var(--text); text-shadow: 0 3px 0 var(--coral-d); animation: slideUp 0.4s ease-out; }
.reveal-card { width: min(68vw, 290px); aspect-ratio: 3 / 4; position: relative; }
.reveal-face { position: absolute; inset: 0; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 0 0 6px var(--sun), 0 0 0 11px var(--coral-d), 0 20px 60px rgba(0, 0, 0, 0.6); }
.reveal-front { background: radial-gradient(circle at 50% 30%, #3a1664, #120b26); font-family: var(--marquee); font-size: 8rem; color: var(--sun); animation: flipOut 0.35s 0.5s ease-in both; }
.reveal-back { background: var(--text); color: var(--ink); padding: 12px; gap: 10px; animation: flipBack 0.5s 0.85s cubic-bezier(0.3, 1.5, 0.6, 1) both; }
.reveal-back img { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: center 25%; border-radius: 16px; }
.reveal-name { font-family: var(--marquee); font-size: clamp(1.3rem, 7vw, 2.1rem); line-height: 1; padding-inline: 6px; overflow-wrap: anywhere; }
.reveal-pts { font-family: var(--marquee); font-size: 3rem; color: var(--sun); text-shadow: 0 4px 0 var(--coral-d); animation: bounceIn 0.6s 1.1s both; }
.reveal-pts span { font-size: 1.2rem; }
.reveal-how { color: var(--muted); font-weight: 700; animation: fadeIn 0.4s 1.3s both; }
/* Giro plano (sin 3D) para que funcione igual en cualquier navegador móvil */
@keyframes flipOut { to { transform: scaleX(0); } }
@keyframes flipBack { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- La cuenta ---------- */
.account-cta {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 14px; border: 2px dashed rgba(47, 214, 255, 0.55); color: var(--text);
  background: rgba(47, 214, 255, 0.08); font-size: 0.9rem; line-height: 1.3;
}
.account-cta:hover { border-color: var(--sky); }
.account-cta > span:first-child { font-size: 1.4rem; }
.account-cta > span:nth-child(2) { flex: 1; }
.account-cta .go { color: var(--sky); }
.account-name { font-family: var(--display); font-size: 1.5rem; }
.verified {
  display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%;
  background: var(--sky); color: var(--ink); font-size: 0.7em; font-weight: 900; vertical-align: 0.15em;
}
.account-modal { max-width: 420px; }
.account-modal .field input { width: 100%; }
.acc-code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: clamp(1rem, 4.6vw, 1.3rem); font-weight: 800;
  letter-spacing: 0.04em; text-align: center; padding: 14px 10px; border-radius: 14px; user-select: all;
  background: var(--ink); border: 2px solid var(--sun); color: var(--sun); overflow-wrap: anywhere;
}
.acc-code-input { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; text-transform: uppercase; }
.acc-check { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.acc-check input { width: 20px; height: 20px; accent-color: var(--lime); }
.acc-error { color: var(--coral); font-weight: 800; margin: 0; }
.acc-perks { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--muted); }
.acc-who { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; }
.acc-avatar { font-size: 2.2rem; }
.link.danger { color: var(--coral); }

.tour-offer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px;
  border-radius: 16px; border: 2px solid var(--sun); background: rgba(255, 204, 61, 0.1); font-weight: 700;
  animation: slideUp 0.35s ease-out;
}
.tour-offer .em { font-size: 1.5rem; }

.demo-phones { display: flex; justify-content: center; gap: 18px; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* El tamaño sale de --phone-scale: cada sitio que enseña teléfonos pone el suyo (la hoja «Cómo
   se juega», la galería). 367×707 es el teléfono a escala 1. */
.phone {
  position: relative; width: calc(367px * var(--phone-scale)); height: calc(707px * var(--phone-scale));
  border-radius: 28px; background: #05030d;
  border: 3px solid #3d3380; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #120c2c;
}
.phone-notch { position: absolute; top: 7px; left: 50%; width: 44px; height: 6px; margin-left: -22px; border-radius: 6px; background: #1d1545; z-index: 2; }
.phone-screen { position: absolute; inset: 7px; border-radius: 22px; overflow: hidden; background: radial-gradient(90% 50% at 50% 0%, rgba(139, 92, 246, 0.35), transparent), var(--bg); }
.phone-zoom { width: 330px; padding: 22px 12px 12px; zoom: var(--phone-scale); pointer-events: none; display: flex; flex-direction: column; gap: 10px; }
@supports not (zoom: 1) {
  .phone-zoom { transform: scale(var(--phone-scale)); transform-origin: top left; }
}
.phone-zoom .word-card { margin: 8px 6px; }
.phone-zoom .controls { margin-top: 6px; }
.phone-zoom .controls .btn { min-height: 64px; }
.phone-label { font-weight: 800; font-size: 0.82rem; color: var(--muted); }
.speech {
  position: absolute; left: 50%; top: 44%; transform: translateX(-50%); width: 150px; z-index: 3;
  background: var(--text); color: var(--ink); border-radius: 14px; padding: 8px 10px; text-align: center;
  font-weight: 800; font-size: 0.8rem; line-height: 1.25; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  animation: speechIn 0.4s cubic-bezier(0.3, 1.6, 0.6, 1);
}
@keyframes speechIn { from { transform: translateX(-50%) scale(0.6); opacity: 0; } }
.speech::after { content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--text); }
.demo-hud { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.demo-clock { width: 58px; height: 58px; border-radius: 50%; border: 6px solid var(--sun); display: grid; place-items: center; font-family: var(--marquee); font-size: 1.3rem; }
.demo-plus { font-family: var(--marquee); color: var(--sun); font-size: 2.2rem; text-shadow: 0 3px 0 var(--coral-d); animation: bounceIn 0.5s cubic-bezier(0.3, 1.7, 0.6, 1); }
.pressed { transform: translateY(3px) scale(0.97); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 0 30px rgba(126, 224, 74, 0.6) !important; }
.demo-reveal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 20px; }
.demo-reveal .word-card.mini .img-wrap { width: 70%; }
.demo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.demo-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--surface-3); cursor: pointer; }
.demo-dots button.on { background: var(--sun); width: 22px; border-radius: 6px; }

/* ---------- Crear: playlists y personajes ---------- */
.chip.example { border-style: dashed; font-weight: 700; font-size: 0.85rem; padding: 6px 11px; }
.q-result { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; animation: slideUp 0.25s ease-out; }
.q-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.q-chip { cursor: default; padding: 6px 11px; font-size: 0.88rem; }
.q-chip.yes { border-color: var(--lime); background: rgba(126, 224, 74, 0.12); }
.q-chip.no { border-color: var(--coral); background: rgba(255, 61, 90, 0.14); }
.q-op { font-family: var(--marquee); color: var(--sun); font-size: 0.8rem; }
.q-warn { color: #ffb4c0; }
.q-count { font-family: var(--marquee); font-size: 1.4rem; color: var(--sun); }
.chip.sample { cursor: default; padding: 4px 10px; font-size: 0.8rem; font-weight: 700; }
.vocab { background: var(--bg-2); border-radius: 14px; padding: 10px 12px; display: grid; gap: 4px; color: var(--muted); }
.vocab b { color: var(--text); }
.lib-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); border: 2px solid transparent; }
.lib-row.on { border-color: var(--lime); }
.lib-row .em { font-size: 1.4rem; }
.lib-row .x, .col-item .x { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 1.1rem; padding: 4px 6px; }
.lib-row .x:hover, .col-item .x:hover { color: var(--coral); }

.wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.wiki-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 6px 6px 8px; border-radius: 14px; cursor: pointer;
  background: var(--bg-2); border: 2px solid var(--surface-3); color: var(--text); transition: transform 0.12s;
}
.wiki-card:hover { transform: translateY(-2px); }
.wiki-card[aria-pressed='true'] { border-color: var(--lime); box-shadow: 0 0 16px rgba(126, 224, 74, 0.3); }
.wiki-card img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 25%; border-radius: 10px; background: #efe3cc; }
.wiki-card .nm { font-weight: 800; font-size: 0.85rem; line-height: 1.2; }
.wiki-card .ds { color: var(--faint); font-size: 0.72rem; line-height: 1.25; }
.char-form { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; padding: 12px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); animation: slideUp 0.25s ease-out; }
.char-preview { width: 200px; flex-shrink: 0; margin-inline: auto; }
.char-form .grow { min-width: 240px; }
.chip.trait { padding: 5px 10px; font-size: 0.82rem; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.col-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 14px; background: var(--surface-2); animation: popIn 0.3s; }
.col-item img, .col-emoji { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 25%; flex-shrink: 0; background: #efe3cc; display: grid; place-items: center; font-size: 1.4rem; }
.col-item .grow { min-width: 0; }
.col-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Tutorial guiado ---------- */
.tour { position: fixed; inset: 0; z-index: 90; }
.tour-back { position: fixed; inset: 0; }
.tour-back.dim { background: rgba(8, 5, 22, 0.75); }
.tour-spot {
  position: fixed; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(8, 5, 22, 0.75), 0 0 0 3px var(--sun), 0 0 30px rgba(255, 204, 61, 0.6);
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.tour-spot::after { content: ''; position: absolute; inset: -6px; border-radius: 22px; border: 2px solid var(--sun); animation: ringPulse 1.4s ease-out infinite; }
.tour-bubble {
  position: fixed; width: min(360px, calc(100vw - 32px)); background: var(--surface); border: 2px solid var(--sun); border-radius: 20px;
  padding: 14px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); transition: top 0.3s ease, left 0.3s ease;
}
.tour-bubble.centered { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-bubble.pop { animation: popIn 0.35s cubic-bezier(0.3, 1.6, 0.6, 1); }
.tour-bubble.centered.pop { animation: none; }
.tour-guide { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tour-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: radial-gradient(circle at 50% 30%, #3a1664, var(--ink)); border: 2px solid var(--sun); }
.tour-name { font-family: var(--marquee); color: var(--sun); font-size: 0.85rem; }
.tour-title { font-family: var(--display); font-size: 1.2rem; margin-bottom: 4px; }
.tour-text { color: var(--muted); }
.tour-text b { color: var(--text); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tour-dots { display: flex; gap: 4px; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); }
.tour-dots span.on { background: var(--sun); width: 18px; border-radius: 5px; }
.tour-buttons { display: flex; align-items: center; gap: 6px; margin-left: auto; }

@media (max-width: 560px) {
  .hud { grid-template-columns: 1fr auto; }
  .hud .left { grid-column: 1 / -1; justify-self: stretch; flex-direction: row; justify-content: space-between; align-items: center; }
  .hud .timer { justify-self: center; }
  .timer { width: 96px; height: 96px; }
  .timer .num { font-size: 2rem; }
  .score-row .nm { width: 96px; }
  .setting { grid-template-columns: 1fr; }
  .topbar .brand-mini { display: none; }
  .img-wrap { width: min(220px, 70%); }
  .stinger-band { height: 150px; margin-top: -75px; }
  .demo-phones { gap: 10px; }
  .char-preview { width: 170px; }
}

/* ---------- Arlek, la mascota ---------- */
.mascot { display: block; overflow: visible; max-width: 100%; height: auto; }
.mascot .m-bob { animation: m-breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; transform-box: view-box; }
.mascot .m-eye { animation: m-blink 4.6s infinite; transform-origin: center; transform-box: fill-box; }
.mascot .m-bell { animation: m-bell 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.mascot .m-hat-r .m-bell { animation-delay: -1.2s; }
.mascot .m-mask { animation: m-mask 3.2s ease-in-out infinite; }
.mascot .m-glow { animation: m-glow 1.6s ease-in-out infinite; }
.mascot .m-spark { animation: m-twinkle 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.mascot .m-spark:nth-of-type(2n) { animation-delay: -0.7s; }
.mascot .m-drop { animation: m-drop 1.6s ease-in infinite; }
.mascot .m-q, .mascot .m-dots { animation: m-float 2s ease-in-out infinite; }
.mascot.talking .m-mouth-a { animation: m-talk-a 0.36s steps(1) infinite; }
.mascot.talking .m-mouth-b { animation: m-talk-b 0.36s steps(1) infinite; }
.mascot.mood-happy .m-bob { animation: m-hop 0.9s ease-in-out infinite; }
.mascot.mood-shock .m-bob { animation: m-shake 0.35s linear infinite; }
@keyframes m-breathe { 50% { transform: translateY(2px) scaleY(0.99); } }
@keyframes m-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
@keyframes m-bell { 50% { transform: rotate(14deg); } }
@keyframes m-mask { 50% { transform: translate(184px, 114px) rotate(10deg); } }
@keyframes m-glow { 50% { opacity: 0.45; } }
@keyframes m-twinkle { 50% { transform: scale(0.45) rotate(45deg); opacity: 0.6; } }
@keyframes m-drop { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes m-float { 50% { transform: translateY(-5px); } }
@keyframes m-talk-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes m-talk-b { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes m-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@keyframes m-shake { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
.arlek { display: contents; }
/* Arlek responde si lo tocas en los menús (ver ui/poke.js). En los avisos y las cortinillas no,
   porque se van solos. */
.arlek > svg.mascot { cursor: pointer; }
#fx-layer .arlek > svg.mascot { cursor: default; }
/* Con el rig de GSAP las animaciones CSS del cuerpo se apagan (los adornos siguen) */
.mascot.rigged .m-bob, .mascot.rigged .m-eye, .mascot.rigged .m-bell, .mascot.rigged .m-mask,
.mascot.rigged.talking .m-mouth-a, .mascot.rigged.talking .m-mouth-b { animation: none; }
.mascot .m-spin, .mascot .m-orbit { transform-box: view-box; animation: spin 1.4s linear infinite; }
.mascot .m-orbit { animation-duration: 3.2s; }
.poof { position: absolute; left: 50%; top: 55%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.poof i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e6dcff 60%, rgba(230, 220, 255, 0.6)); box-shadow: 0 0 0 3px rgba(12, 8, 34, 0.35); }

.hero { padding-top: 92px; }
.loader-mascot { display: flex; justify-content: center; margin-top: 40px; }
.offer-mascot { flex-shrink: 0; display: grid; place-items: center; }

.silhouette { width: auto; height: auto; border: 0; background: none; border-radius: 0; animation: none; font-size: inherit; display: block; }
.silhouette .mascot { filter: drop-shadow(0 0 22px rgba(255, 204, 61, 0.35)); }

.winner-host { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; }
.winner-host .trophy { position: absolute; left: -46px; bottom: 6px; font-size: 3rem; }

.stinger-mascot { position: absolute; left: max(4vw, 12px); bottom: 6vh; animation: stinger-host var(--dur) cubic-bezier(0.3, 1.4, 0.5, 1) both; }
@keyframes stinger-host { 0% { transform: translateY(120%) rotate(-8deg); } 22%, 82% { transform: translateY(0) rotate(-3deg); } 100% { transform: translateY(130%) rotate(4deg); } }

.reveal-mascot { position: absolute; left: -96px; top: 34%; animation: slideUp 0.5s 0.3s both; }

.host-pop {
  position: fixed; left: 12px; bottom: 104px; z-index: 64; display: flex; align-items: flex-end; gap: 4px; pointer-events: none;
  transform: translateX(-130%); transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.host-pop.show { transform: translateX(0); }
.host-pop.gsap { transition: none; transform: none; }
.host-bubble {
  position: relative; margin-bottom: 44px; max-width: 210px; padding: 9px 13px; border-radius: 16px 16px 16px 4px;
  background: var(--text); color: var(--ink); font-weight: 800; font-size: 0.95rem; line-height: 1.25; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.tour-avatar { width: 64px; height: 66px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a1664, var(--ink)); border: 2px solid var(--sun); }
.tour-avatar .mascot { width: 78px; height: auto; margin-top: 14px; }

@media (max-width: 560px) {
  .reveal-mascot { left: auto; right: -18px; top: -86px; }
  .host-pop { bottom: 96px; }
  .winner-host .trophy { left: -34px; font-size: 2.4rem; }
}

/* ---------- Progresión del concursante ---------- */
.player-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 2px solid var(--surface-3); border-radius: 20px; padding: 10px 14px; color: var(--text);
  border-image: linear-gradient(90deg, var(--plate, var(--surface-3)), var(--plate, var(--surface-3))) 1;
  box-shadow: 0 0 0 2px var(--plate, transparent);
}
.player-card:hover { border-color: var(--sun); }
.pc-mascot { flex-shrink: 0; display: grid; place-items: center; width: 60px; overflow: hidden; }
.pc-mascot .mascot { margin-bottom: -10px; }
.pc-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pc-info b { font-size: 1.05rem; }
.pc-title { font-size: 0.78rem; font-weight: 800; color: var(--sun); }
.pc-level { font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.pc-coins { font-weight: 900; color: var(--sun); white-space: nowrap; }
.level-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; max-width: 260px; }
.level-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), var(--sun)); transition: width 0.5s; }

.plate { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plate-name { font-weight: 800; }
/* Silenciado: se ve que la persona está, pero no lo suyo (ver core/muted.js) */
.muted-plate .plate-name { color: var(--faint); font-style: italic; }
.player .x.on { background: var(--surface-3); color: var(--sun); }
/* El disfraz donde no cabe un Arlek entero: una insignia al lado del nombre */
.costume-badge { margin-left: 4px; font-size: 0.9em; vertical-align: -0.1em; }
.costume-badge .emo, .costume-badge .ic { width: 1em; height: 1em; }
.plate-level { font-size: 0.7rem; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: var(--plate, var(--surface-3)); color: var(--ink); }
.plate-title { font-size: 0.72rem; font-weight: 800; color: var(--sun); }
.plate.small .plate-title { display: none; }

.progress-modal { width: min(100%, 560px); }
.progress-head { display: flex; align-items: center; gap: 12px; }
.progress-head .mascot { flex-shrink: 0; margin-bottom: -12px; }
.progress-body { max-height: 46vh; overflow: auto; gap: 8px; }
.progress-body h3 { margin-top: 6px; }
.ach { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.ach.done { box-shadow: inset 0 0 0 2px var(--lime); }
.ach.new { animation: popIn 0.4s cubic-bezier(0.3, 1.6, 0.6, 1); }
.ach-em { font-size: 1.5rem; }
.ach .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-prize { font-weight: 900; color: var(--sun); white-space: nowrap; }
.ach-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; max-width: 220px; }
.ach-bar span { display: block; height: 100%; background: var(--sky); }

.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chip {
  position: relative; font-size: 1.5rem; width: 52px; height: 52px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 2px solid transparent; display: grid; place-items: center;
}
.pick-chip.on { border-color: var(--sun); background: rgba(255, 204, 61, 0.14); }
.pick-chip.locked { opacity: 0.55; filter: grayscale(0.5); }
.pick-chip .cost { position: absolute; bottom: -2px; right: -2px; font-size: 0.6rem; font-weight: 900; background: var(--ink); padding: 1px 4px; border-radius: 8px; color: var(--sun); }
.pick-list { display: grid; gap: 6px; }
.pick-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 2px solid transparent; color: var(--text); text-align: left;
}
.pick-row.on { border-color: var(--sun); }
.pick-row.locked { opacity: 0.6; }
.pick-row .faint { margin-left: auto; }
.frame-demo { width: 28px; height: 14px; border-radius: 6px; background: var(--plate, var(--surface-3)); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.stat { background: var(--surface-2); border-radius: 14px; padding: 10px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 1.4rem; color: var(--sun); }
.stat span { font-size: 0.72rem; color: var(--muted); font-weight: 700; }

.reward-card { border: 2px solid var(--sun); }
.reward-lines { display: grid; gap: 4px; }
.reward-line { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.reward-line .xp { color: var(--lime); font-weight: 900; }
.reward-line .coins { color: var(--sun); font-weight: 900; }
.level-up { text-align: center; font-family: var(--marquee); font-size: 1.3rem; color: var(--sun); animation: bounceIn 0.6s both; }
.record-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.record-row .em { font-size: 1.3rem; }
.record-row b { color: var(--sun); }

/* ---------- Modo impostor ---------- */
.impostor-stage { margin-top: 12px; }
.impostor-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: radial-gradient(circle at 50% 30%, #4a1030, #1a0c22); border-radius: 26px; padding: 18px;
  box-shadow: 0 0 0 5px var(--coral-d), 0 0 0 9px var(--sun), 0 16px 40px rgba(0, 0, 0, 0.45);
}
.impostor-card .mascot { position: relative; }
.impostor-title { position: relative; font-family: var(--marquee); font-size: clamp(1.5rem, 7vw, 2.4rem); color: var(--coral); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.impostor-card p { position: relative; }
.impostor-hint { position: relative; margin-top: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 248, 236, 0.1); border: 1px solid var(--sun); font-weight: 800; }
.clue-round { margin-top: 8px; }
.clue-round-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.clue-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: var(--surface-2); margin-bottom: 4px; }
.clue-row.mine { box-shadow: inset 0 0 0 2px var(--sun); }
.clue-row .av { font-size: 1.2rem; }
.clue-row .nm { font-weight: 800; font-size: 0.85rem; color: var(--muted); min-width: 68px; }
.clue-row .tx { font-weight: 800; overflow-wrap: anywhere; }
.clue-clock { font-family: var(--marquee); color: var(--sun); }
/* Votar a alguien en el impostor. Se llamaba .vote-grid, igual que la rejilla de votar
   temas, y al estar más abajo la pisaba: los temas salían en tarjetas de 130 px y los nombres
   largos («Influencers y streamers») no cabían. */
.vote-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.vote-player {
  display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 16px; cursor: pointer;
  background: var(--surface-2); border: 2px solid transparent; color: var(--text); font-weight: 800; font-size: 1rem;
}
.vote-player .av { font-size: 1.6rem; }
.vote-player:hover { border-color: var(--surface-3); }
.vote-player.picked { border-color: var(--coral); background: rgba(255, 61, 90, 0.14); }

/* ---------- Datos curiosos ---------- */
.host-bubble.wide { max-width: min(360px, 74vw); font-size: 0.88rem; margin-bottom: 30px; }
.reveal-fact {
  max-width: min(420px, 82vw); margin-top: 2px; padding: 8px 12px; border-radius: 14px;
  background: rgba(255, 248, 236, 0.1); border: 1px solid rgba(255, 204, 61, 0.35);
  color: var(--text); font-size: 0.85rem; font-weight: 700; line-height: 1.3; animation: slideUp 0.4s 1.3s both;
}
.result .fact { display: block; color: var(--faint); font-size: 0.72rem; font-weight: 600; line-height: 1.25; margin-top: 2px; }

/* ---------- Power-ups nuevos ---------- */
.power.wild { border-color: var(--sun); background: linear-gradient(135deg, rgba(255, 204, 61, 0.14), rgba(123, 79, 214, 0.14)); }
.power.off { opacity: 0.4; filter: grayscale(0.7); }
.power .power-state { margin-left: auto; font-weight: 900; font-size: 1rem; color: var(--muted); }
.power.off .power-state { color: var(--coral); }
button.power { cursor: pointer; text-align: left; width: 100%; }
.shield-banner {
  margin: 8px 0; padding: 8px 12px; border-radius: 12px; font-weight: 800; text-align: center;
  background: rgba(47, 214, 255, 0.12); border: 1.5px solid var(--sky); color: var(--text);
}

/* ---------- Botones de juego grandes y claros ---------- */
.btn .big-label { display: block; font-family: var(--marquee); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; line-height: 1.1; }
.btn .sub { display: block; font-family: var(--body, inherit); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.01em; opacity: 0.8; line-height: 1.2; text-transform: none; }
.btn:has(.big-label) { flex-direction: column; gap: 3px; text-align: center; }
.controls .btn { min-height: 92px; padding: 12px 10px; }
.controls { grid-template-columns: 1fr 1.3fr; gap: 12px; }
.btn-skip { --c: #2b3a8c; --d: #18215a; color: #fff; border: 2px solid var(--sky); }
.btn-skip .sub { color: #cfe9ff; }
.btn-next { min-height: 76px; }
.btn-next .big-label { font-size: 1.25rem; }
.btn-outline {
  --c: transparent; --d: transparent; box-shadow: none; color: var(--text);
  border: 2px solid rgba(255, 255, 255, 0.35); min-height: 52px; padding: 10px 16px; font-weight: 800; font-size: 1rem;
}
.btn-outline::before { display: none; }
.btn-outline:hover:not(:disabled) { border-color: var(--sun); background: rgba(255, 204, 61, 0.08); }
.btn-outline.danger { color: #ffb3c0; border-color: rgba(255, 61, 90, 0.55); }
.btn-outline.danger:hover:not(:disabled) { border-color: var(--coral); background: rgba(255, 61, 90, 0.1); }
.btn-giveup { margin-top: 14px; min-height: 64px; }
.btn-giveup .big-label { font-size: 1.05rem; }
.answers-board .btn-next { margin-top: 12px; }
.host-controls { margin-top: 20px; padding: 12px; border-radius: 18px; border: 1.5px dashed var(--surface-3); background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 8px; }
.host-controls-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.host-controls-row { display: flex; flex-wrap: wrap; gap: 8px; }
.host-controls-row .btn { flex: 1 1 180px; }
.timer .num.long { font-size: 1.6rem; }

/* ---------- Selector de tiempo ---------- */
.time-picker { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 0; }
.seg.seg-wrap { flex-wrap: wrap; }
.time-custom { display: flex; gap: 8px; align-items: center; }
.time-custom input { width: 100px; text-align: center; font-family: var(--marquee); font-size: 1.3rem; padding: 8px; }
.time-custom .btn { min-width: 64px; }

/* ---------- Carta de pistas (palabras sin foto) ---------- */
.img-wrap.art { background: none; box-shadow: none; }
.art-card {
  position: relative; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: end center;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 12px, transparent 12px 24px),
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c1) 55%, #fff) 0%, var(--c1) 45%, color-mix(in srgb, var(--c2) 70%, #120b26) 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35), inset 0 -40px 60px rgba(18, 11, 38, 0.35);
  border-radius: inherit;
}
.art-card::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 255, 255, 0.1) 0 8deg, transparent 8deg 22deg); }
.art-card .mascot { position: relative; width: 94%; height: auto; margin-bottom: -4%; filter: drop-shadow(0 6px 12px rgba(18, 11, 38, 0.45)); }
.art-card.poster { place-items: center; }
.art-emoji { position: relative; font-size: clamp(3.5rem, 22vw, 6.5rem); filter: drop-shadow(0 6px 10px rgba(18, 11, 38, 0.45)); animation: m-float 3s ease-in-out infinite; }
.art-cat { position: absolute; top: 7px; left: 8px; z-index: 1; font-size: 1.15rem; background: rgba(255, 248, 236, 0.9); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.art-badges { position: absolute; top: 7px; right: 8px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.art-badges span { font-size: 1rem; background: rgba(18, 11, 38, 0.55); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; }
.word-card.mini .art-cat, .word-card.mini .art-badges span { width: 24px; height: 24px; font-size: 0.8rem; }
.reveal-art { width: 100%; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; }
.img-credit { max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-card .cr { color: var(--faint); font-size: 0.65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mascot .m-bat { animation: m-float 1.8s ease-in-out infinite; }

/* ---------- Créditos ---------- */
.credits-modal { width: min(100%, 560px); }
.sound-modal .x { background: none; border: 0; color: var(--faint); font-size: 1.2rem; cursor: pointer; }
.vol-row { display: flex; align-items: center; gap: 12px; }
.vol-label { display: flex; justify-content: space-between; font-weight: 800; font-size: 0.9rem; margin-bottom: 4px; }
.vol-label b { color: var(--sun); font-family: var(--display); }
input[type='range'] { width: 100%; accent-color: var(--sun); height: 28px; cursor: pointer; }
.credits-modal .x { background: none; border: 0; color: var(--faint); font-size: 1.2rem; cursor: pointer; }
.credits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 45vh; overflow: auto; }
.credits-list li { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); }
.credits-list a { color: var(--text); text-decoration: none; }
.credits-list a:hover { text-decoration: underline; }

/* ============================================================
   Estilo ilustrado: escenario, superficies con bisel y contorno
   ============================================================ */
body { background: var(--bg); }
.stage-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('art/stage.svg') center top / cover no-repeat, var(--bg);
}
.stage-bg::after {
  content: ''; position: absolute; inset: 0; background: var(--grain); opacity: 0.05; mix-blend-mode: overlay;
}
body::before, body::after { opacity: 0.12; }
/* La barra superior va en su propio panel para leerse sobre la cenefa del telón */
.topbar {
  position: relative; z-index: 2; padding: 6px 8px; border-radius: 18px;
  background: rgba(11, 8, 32, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: var(--outline-w) solid var(--outline); box-shadow: var(--bevel), 0 6px 0 rgba(7, 5, 26, 0.7);
}

/* Tarjetas: cartón con contorno de tinta, bisel y sombra sólida */
.card, .team-col, .modal, .tour-bubble, .answers-board {
  border: var(--outline-w) solid var(--outline);
  box-shadow: var(--bevel), 0 0 0 1.5px rgba(255, 255, 255, 0.06), 0 7px 0 var(--drop), 0 18px 34px rgba(0, 0, 0, 0.35);
}
.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%),
    var(--grain) repeat,
    var(--surface);
  background-blend-mode: normal, soft-light, normal;
}
.modal { border-color: var(--sun); box-shadow: 0 0 0 var(--outline-w) var(--outline), 0 9px 0 var(--outline-w) var(--drop), 0 28px 60px rgba(0, 0, 0, 0.55); }
.team-col { border-color: var(--outline); box-shadow: 0 0 0 3px var(--team), 0 7px 0 3px var(--drop); }
.team-head { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.3); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

/* Botones con contorno y brillo de plástico */
.btn:not(.btn-ghost):not(.btn-outline) { border: 2.5px solid var(--outline); }
.btn:not(.btn-ghost):not(.btn-outline)::before { inset: 2px 6px 52% 6px; border-radius: 10px 10px 16px 16px; background: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.05)); }
.btn-skip { border-color: var(--outline) !important; box-shadow: inset 0 0 0 2px var(--sky), 0 4px 0 var(--d), 0 8px 18px rgba(0, 0, 0, 0.25); }
.btn-lg .big-label, .btn-lg { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.btn-coral, .btn-skip { text-shadow: 0 2px 0 rgba(12, 8, 34, 0.45); }
.room-code { border: 2.5px solid var(--outline); }
.pill { border: 2px solid rgba(12, 8, 34, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.pill-sun, .clock-pill { border-color: var(--outline); }
.chip { box-shadow: 0 3px 0 rgba(7, 5, 26, 0.7); }
.chip:active:not(:disabled) { box-shadow: 0 1px 0 rgba(7, 5, 26, 0.7); }
.seg button[aria-pressed='true'] { border-color: var(--outline); box-shadow: 0 3px 0 var(--sun-d); }
.tabs { border: var(--outline-w) solid var(--outline); box-shadow: var(--bevel); }

/* Títulos con contorno de caricatura */
.show-title { text-shadow: var(--ink-text), 0 6px 0 var(--coral-d), 0 7px 0 var(--outline), 0 0 26px rgba(255, 204, 61, 0.35); }
.mystery-title, .impostor-title, .reveal-kicker, .reveal-pts, .float-text, .demo-plus { text-shadow: var(--ink-text), 0 5px 0 var(--outline); }
.hud-num, .pm-value { text-shadow: 0 3px 0 var(--outline); }

/* Carta de palabra: naipe con marco dorado, esquinas y papel */
.word-card {
  background: var(--grain) repeat, linear-gradient(180deg, #fffdf6, #f6ecd9);
  background-blend-mode: multiply, normal;
  border: var(--outline-w) solid var(--outline);
  box-shadow: inset 0 0 0 5px #fffaf0, inset 0 0 0 7px rgba(195, 138, 18, 0.55), 0 0 0 5px var(--sun), 0 0 0 8px var(--outline), 0 9px 0 8px var(--drop), 0 20px 44px rgba(0, 0, 0, 0.5);
}
.word-card::before, .word-card::after {
  content: ''; position: absolute; width: 16px; height: 22px; background: var(--coral);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 1px 0 var(--outline));
}
.word-card::before { top: 14px; left: 14px; }
.word-card::after { bottom: 14px; right: 14px; }
.word-card .word { text-shadow: 0 3px 0 rgba(195, 138, 18, 0.35); }
.word-card .img-wrap { border: 3px solid var(--outline); box-shadow: 0 4px 0 rgba(12, 8, 34, 0.25); }
.word-card .img-wrap.placeholder { border: 0; box-shadow: none; }
.word-card.rival { background: var(--surface-2); border-color: var(--outline); box-shadow: 0 0 0 3px var(--surface-3), 0 7px 0 3px var(--drop); }
.word-card.rival::before, .word-card.rival::after { background: var(--surface-3); }
.word-card.mini { box-shadow: inset 0 0 0 3px #fffaf0, 0 0 0 3px var(--sun), 0 0 0 5px var(--outline); }
.word-card.mini::before, .word-card.mini::after { width: 10px; height: 14px; }
.word-card.mini::before { top: 8px; left: 8px; }
.word-card.mini::after { bottom: 8px; right: 8px; }
.guess-card, .mystery-card, .impostor-card { border: var(--outline-w) solid var(--outline); box-shadow: var(--bevel), 0 0 0 3px var(--sun), 0 0 0 6px var(--outline), 0 9px 0 6px var(--drop); }
.impostor-card { box-shadow: 0 0 0 5px var(--coral-d), 0 0 0 8px var(--outline), 0 9px 0 8px var(--drop), 0 16px 40px rgba(0, 0, 0, 0.45); }

/* Cronómetro como dial de concurso */
.timer { border-radius: 50%; background: radial-gradient(circle at 50% 32%, #33287a, #120b26 72%); box-shadow: 0 0 0 4px var(--outline), 0 0 0 8px var(--sun-d), 0 0 0 11px var(--outline), 0 8px 0 11px var(--drop); }
.timer::before {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  background: repeating-conic-gradient(from -1.5deg, rgba(255, 248, 236, 0.55) 0 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 38px, #000 39px); mask: radial-gradient(circle, transparent 38px, #000 39px);
}
.timer .num { text-shadow: 0 3px 0 var(--outline); }
.timer.low { box-shadow: 0 0 0 4px var(--outline), 0 0 0 8px var(--coral-d), 0 0 0 11px var(--outline), 0 8px 0 11px var(--drop); }

/* Podio en 3D: cara superior iluminada, lado en sombra y contorno */
.podium .block {
  position: relative; overflow: visible; border: var(--outline-w) solid var(--outline); border-radius: 6px 6px 3px 3px;
  box-shadow: inset -12px 0 0 rgba(0, 0, 0, 0.16), inset 0 6px 0 rgba(255, 255, 255, 0.28), 0 8px 0 var(--drop);
  animation: rise-up 0.9s var(--ease-spring) both; transform-origin: bottom;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}
.podium .block::before {
  content: ''; position: absolute; left: -3px; right: -3px; top: -16px; height: 14px; background: inherit;
  border: var(--outline-w) solid var(--outline); border-bottom: 0; border-radius: 8px 8px 0 0;
  box-shadow: inset 0 0 0 40px rgba(255, 255, 255, 0.3); transform: skewX(-24deg); transform-origin: bottom;
}
.podium .block::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35) 0 2px, transparent 3px) 0 0 / 22px 22px;
  opacity: 0.45;
}
@keyframes rise-up { from { transform: scaleY(0); } }

/* Barra de puntos y medidores con ranura */
.score-row .track, .level-bar, .pm-bar, .ach-bar { box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35); border: 2px solid var(--outline); }
.score-row .fill { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.15); }

/* Avatares grandes y fichas de jugador */
.big-avatar { filter: drop-shadow(0 8px 0 rgba(7, 5, 26, 0.6)); }
.player { border: 2px solid rgba(12, 8, 34, 0.7); box-shadow: var(--bevel); }
.player .av .emo { width: 1.3em; height: 1.3em; }

/* Carta de pistas: rayos, semitono y marco de naipe */
.art-card { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55), inset 0 0 0 6px rgba(12, 8, 34, 0.35), inset 0 -40px 60px rgba(18, 11, 38, 0.35); }
.art-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle, rgba(18, 11, 38, 0.55) 1.2px, transparent 1.8px) 0 0 / 9px 9px;
  -webkit-mask: linear-gradient(transparent 35%, #000); mask: linear-gradient(transparent 35%, #000);
}
.art-card.poster .art-emoji {
  display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fffdf6, #efe3cc 70%);
  border: 4px solid var(--outline); box-shadow: 0 0 0 5px var(--sun), 0 0 0 8px var(--outline), 0 8px 0 8px rgba(12, 8, 34, 0.45);
  font-size: clamp(3rem, 16vw, 5rem); line-height: 1;
}
.art-card.poster .art-emoji .emo, .art-card.poster .art-emoji .ic { width: 1.1em; height: 1.1em; }
.art-cat, .art-badges span { border: 2px solid var(--outline); }

/* ---------- Caja de preguntas (¿Quién soy? y duelo) ---------- */
.question-now {
  margin: 8px 0 10px; padding: 12px 14px; border-radius: 16px; background: var(--text); color: var(--ink);
  font-family: var(--display); font-size: 1.25rem; font-weight: 600; text-align: center;
  border: var(--outline-w) solid var(--outline); box-shadow: 0 4px 0 var(--drop); animation: enter-pop 0.4s var(--ease-spring);
}
.ask-box { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1; min-width: 0; }
.idea-chips { gap: 6px; }
.idea-chips .chip { font-size: 0.8rem; padding: 5px 10px; }
.guess-box { margin-top: 14px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 204, 61, 0.08); border: 2px dashed rgba(255, 204, 61, 0.45); }
.guess-box h3 { margin-bottom: 2px; }
.guess-box .guess-row { margin-top: 8px; }
.question-bubble {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; padding: 12px 14px; border-radius: 18px;
  background: var(--text); color: var(--ink); border: var(--outline-w) solid var(--outline); box-shadow: 0 5px 0 var(--drop);
}
.question-bubble::after { content: ''; position: absolute; left: 34px; bottom: -13px; border: 10px solid transparent; border-top-color: var(--outline); border-bottom: 0; }
.qb-av { font-size: 2rem; line-height: 1; }
.qb-who { display: block; font-size: 0.78rem; font-weight: 800; color: #6b6290; }
.qb-text { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.answered-by { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.who-answer { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border-radius: 999px; background: var(--surface-2); border: 2px solid var(--surface-3); font-size: 0.8rem; font-weight: 800; animation: enter-pop 0.35s var(--ease-spring); }
.who-answer.si { border-color: var(--lime); }
.who-answer.no { border-color: var(--coral); }
.who-answer.quizas { border-color: var(--sky); }
.who-answer .nm { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.question-log { margin-top: 16px; }
.question-log summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.question-log summary::-webkit-details-marker { display: none; }
.question-log summary h3::after { content: ' ▾'; color: var(--faint); }
.question-log:not([open]) summary h3::after { content: ' ▸'; }
.qlog-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.qlog-row { padding: 9px 11px; border-radius: 14px; background: var(--surface-2); border: 2px solid rgba(12, 8, 34, 0.6); }
.qlog-head { display: flex; align-items: center; gap: 8px; }
.qlog-n { font-family: var(--marquee); color: var(--sun); font-size: 0.85rem; }
.qlog-text { flex: 1; min-width: 0; font-weight: 800; }
.qlog-tally { display: inline-flex; gap: 6px; white-space: nowrap; font-size: 0.85rem; }
.qlog-tally .si { color: var(--lime); }
.qlog-tally .no { color: var(--coral); }
.qlog-tally .quizas { color: var(--sky); }
.qlog-verdict { font-family: var(--marquee); font-size: 0.85rem; padding: 3px 9px; border-radius: 999px; white-space: nowrap; color: var(--ink); }
.qlog-verdict.si { background: var(--lime); }
.qlog-verdict.no { background: var(--coral); color: var(--text); }
.qlog-verdict.quizas { background: var(--sky); }
.qlog-row .answered-by { margin-top: 6px; }
.qlog-row .who-answer { font-size: 0.72rem; animation: none; }

/* ---------- Pizarra compartida ---------- */
.board-fab {
  position: fixed; right: 14px; bottom: calc(112px + env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 10px 10px; border-radius: 999px; cursor: pointer;
  background: var(--sun); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  border: var(--outline-w) solid var(--outline); box-shadow: 0 5px 0 var(--sun-d), 0 10px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s var(--ease-spring);
}
.board-fab:active { transform: translateY(3px) scale(0.96); }
.board-fab-icon { font-size: 1.4rem; line-height: 1; }
.board-dot { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); border: 3px solid var(--outline); animation: pulse 0.6s ease-in-out infinite alternate; }
.board.open .board-fab { transform: translateY(20px) scale(0.6); opacity: 0; pointer-events: none; }
.board-panel {
  position: fixed; left: 50%; bottom: 0; z-index: 46; width: min(100%, 560px); padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border: var(--outline-w) solid var(--outline); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5); transform: translate(-50%, 110%); transition: transform 0.45s var(--ease-spring);
  display: flex; flex-direction: column; gap: 10px; max-height: 92vh;
}
.board.open .board-panel { transform: translate(-50%, 0); }
.board-head { display: flex; align-items: center; gap: 10px; }
.board-head b { font-family: var(--display); font-size: 1.1rem; }
.board-who { flex: 1; }
.board-x { background: none; border: 0; color: var(--faint); font-size: 1.3rem; cursor: pointer; padding: 2px 6px; }
.board-canvas-wrap { position: relative; }
.board-canvas {
  display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 58vh; border-radius: 16px; touch-action: none;
  background: var(--grain) repeat, linear-gradient(180deg, #fffdf6, #f6ecd9); background-blend-mode: multiply, normal;
  border: var(--outline-w) solid var(--outline); box-shadow: inset 0 0 0 4px #fffaf0;
}
.board.can-draw .board-canvas { cursor: crosshair; }
.board-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #8c82bd; }
.board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.board:not(.can-draw) .board-tools { display: none; }
.board-colors, .board-sizes, .board-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.board-actions { margin-left: auto; }
.swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); border: 3px solid var(--outline); cursor: pointer; box-shadow: 0 2px 0 var(--drop); }
.swatch.on { box-shadow: 0 0 0 3px var(--sun), 0 2px 0 var(--drop); transform: scale(1.12); }
.size { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--surface-3); cursor: pointer; color: var(--text); font-size: 1.1rem; }
.size i { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: var(--text); }
.size.on { border-color: var(--sun); background: rgba(255, 204, 61, 0.15); }
@media (max-width: 560px) {
  .board-fab { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .board-actions { margin-left: 0; }
}
/* En la pantalla grande y en la del comentarista: sin botón ni herramientas, abierta sola mientras
   haya algo dibujado (ui/board.js). En la del comentarista, que es un teléfono, es la hoja de
   siempre; en la del evento va a la izquierda, y lo del turno (el reloj, la pregunta) se corre a la
   derecha para que se vean las dos cosas. */
.board.on-stage .board-fab, .board.on-stage .board-x, .board.on-stage .board-tools, .board.on-stage .board-who { display: none; }
html[data-watch='screen'] .board.on-stage .board-panel {
  left: 2vw; bottom: 2vw; width: min(34vw, 62vh); border-bottom: var(--outline-w) solid var(--outline); border-radius: 1.4rem;
  transform: translate(-120%, 0); padding: 0.8rem;
}
html[data-watch='screen'] .board.on-stage.open .board-panel { transform: translate(0, 0); }
html[data-watch='screen'] .board.on-stage .board-head b { font-size: 1.4rem; }
html[data-watch='screen'] .board.on-stage .board-canvas { max-height: 62vh; }
html[data-watch='screen'][data-board='ver'] .stage-center { padding-left: calc(min(34vw, 62vh) + 1rem); transition: padding 0.4s; }

/* ---------- Duelo 1 vs 1 ---------- */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.vs { align-self: center; font-family: var(--marquee); font-size: 1.6rem; color: var(--sun); text-shadow: var(--ink-text), 0 4px 0 var(--coral-d); transform: rotate(-8deg); }
.duelist {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: 20px; text-align: center;
  background: var(--surface); border: var(--outline-w) solid var(--outline); box-shadow: var(--bevel), 0 6px 0 var(--drop); transition: transform 0.4s var(--ease-spring), box-shadow 0.3s;
}
.duelist.on-turn { box-shadow: 0 0 0 3px var(--sun), 0 6px 0 var(--drop), 0 0 30px rgba(255, 204, 61, 0.35); transform: translateY(-3px); }
.duelist.me .duelist-name { color: var(--sun); }
.duelist.off { opacity: 0.55; }
.duelist-av { font-size: 2.4rem; line-height: 1; }
.duelist-name { font-weight: 800; overflow-wrap: anywhere; }
.duelist-wins { display: flex; gap: 2px; font-size: 1.05rem; }
.duelist-wins i { font-style: normal; color: var(--surface-3); text-shadow: 0 1px 0 var(--outline); }
.duelist-wins i.won { color: var(--sun); animation: chip-on 0.5s var(--ease-spring); }
.duelist-turn { font-size: 0.72rem; font-weight: 800; color: var(--ink); background: var(--sun); border-radius: 999px; padding: 2px 8px; margin-top: 4px; }
.duel-secrets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.duel-secrets .word-card.mini { margin: 0; }
.duel-mystery { padding: 16px 10px; gap: 6px; }
.duel-mystery .mystery-title { font-size: clamp(1.3rem, 6vw, 1.9rem); }
.duel-mystery p { position: relative; }
.your-turn { box-shadow: 0 0 0 3px var(--sun), 0 7px 0 3px var(--drop); }
.waiting-turn .mascot { margin: 0 auto -6px; }
.preset-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; padding: 4px 0; }
.preset-menu summary::-webkit-details-marker { display: none; }
.preset-menu summary b::after { content: ' ▾'; color: var(--faint); }
.preset-menu:not([open]) summary b::after { content: ' ▸'; }
.preset-group { margin-top: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 2px solid rgba(12, 8, 34, 0.6); }
.preset-group summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.preset-group summary::-webkit-details-marker { display: none; }
.preset-group .chips { margin-top: 8px; }
.preset-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.preset-label::after { content: ' ▸'; color: var(--faint); }
.preset-group[open] .preset-label::after { content: ' ▾'; }
.chip.preset { font-size: 0.85rem; padding: 7px 11px; }
.chip.preset.used { text-decoration: line-through; opacity: 0.45; }
.duel-answers { margin-top: -6px; }
.duel-answers .answer-btn { padding: 18px 6px; font-size: 2.2rem; }
.duel-extra { display: grid; gap: 8px; }
.duel-result .char-grid { width: 100%; }
@media (max-width: 560px) {
  .duel-secrets { grid-template-columns: 1fr; }
}

/* ============================================================
   Coreografías con GSAP (fx.js): cortinilla, cuenta regresiva, vuelos y podio
   ============================================================ */
.stinger.gsap::before { animation: none; opacity: var(--dim, 0); }
.stinger.gsap .stinger-band, .stinger.gsap .stinger-rays, .stinger.gsap .stinger-text, .stinger.gsap .stinger-mascot { animation: none; }
.stinger.gsap .stinger-band { transform: rotate(-6deg) scaleX(0); }
.stinger.gsap .stinger-rays { opacity: 0; }
.stinger-curtain {
  position: absolute; inset: 0 0 12% 0;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(0, 0, 0, 0.55), transparent 60%),
    repeating-linear-gradient(90deg, #4a0a1f 0 10px, #9c1636 22px, #c8284a 34px, #8a1230 46px, #4a0a1f 60px);
  box-shadow: 0 8px 0 var(--sun-d), 0 14px 0 var(--outline), 0 30px 60px rgba(0, 0, 0, 0.6);
  -webkit-mask: radial-gradient(30px 22px at 30px 100%, transparent 98%, #000) 0 0 / 60px 100% repeat-x;
  mask: radial-gradient(30px 22px at 30px 100%, transparent 98%, #000) 0 0 / 60px 100% repeat-x;
}
.stinger.gsap .stinger-title div { will-change: transform; }

.countdown.gsap, .countdown.gsap.go, .countdown.gsap .countdown-ring, .countdown.gsap .countdown-num { animation: none; }
.countdown-flash { position: absolute; inset: 0; background: radial-gradient(circle, #fff8ec, rgba(255, 204, 61, 0.6) 40%, transparent 70%); opacity: 0; pointer-events: none; }

.float-text.gsap { animation: none; transform: none; }
.card-ghost { position: absolute !important; z-index: 2; pointer-events: none; will-change: transform; }
.power-ghost { position: absolute; z-index: 3; pointer-events: none; margin: 0; box-shadow: 0 0 0 3px var(--sun), 0 10px 30px rgba(0, 0, 0, 0.5); }
.power-ghost.sabotage { box-shadow: 0 0 0 3px var(--coral), 0 0 30px rgba(255, 61, 90, 0.6); }
.burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 4; }
.burst i {
  position: absolute; left: -3px; top: -34px; width: 6px; height: 26px; border-radius: 6px; background: var(--c);
  box-shadow: 0 0 0 2px var(--outline); transform-origin: 3px 34px; transform: rotate(var(--a)) translateY(-10px);
}
.vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 40px rgba(255, 61, 90, 0.75); }
.vignette.tone-sky { box-shadow: inset 0 0 120px 40px rgba(47, 214, 255, 0.6); }
.drop-chip { position: absolute; font-size: 2rem; pointer-events: none; z-index: 4; filter: drop-shadow(0 4px 0 rgba(7, 5, 26, 0.6)); }

.reveal.gsap, .reveal.gsap .reveal-kicker, .reveal.gsap .reveal-front, .reveal.gsap .reveal-back, .reveal.gsap .reveal-pts,
.reveal.gsap .reveal-how, .reveal.gsap .reveal-fact, .reveal.gsap .reveal-mascot, .reveal.gsap.out { animation: none; }
.reveal.gsap .reveal-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.reveal.gsap .reveal-card { transform-style: preserve-3d; }
.reveal-light { position: absolute; left: 50%; top: 45%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 248, 236, 0.95), rgba(255, 204, 61, 0.45) 35%, transparent 70%); opacity: 0; pointer-events: none; }

/* El podio lo anima GSAP (fx.podium); sin GSAP quedan las animaciones CSS */
.gsap-on .podium .block, .gsap-on .podium .em, .gsap-on .podium .crown, .gsap-on .level-up { animation: none; }

/* Tarjetas que se inclinan hacia el cursor */
.tilting { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); transition-duration: 0.12s; }

/* ============================================================
   Movimiento: transiciones entre pantallas, entradas y botones
   ============================================================ */
/* Cada pantalla vive en #app; la barra superior, la inferior, la capa de efectos y
   los avisos tienen su propia capa para no deslizarse junto con el contenido. */
#app { view-transition-name: screen; }
.topbar { view-transition-name: topbar; }
.bottom-bar { view-transition-name: bottombar; }
#fx-layer { view-transition-name: fx; }
#toasts { view-transition-name: toasts; }
.confetti { view-transition-name: confetti; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(fx), ::view-transition-old(toasts), ::view-transition-old(confetti) { display: none; }
::view-transition-new(fx), ::view-transition-new(toasts), ::view-transition-new(confetti) { animation: none; }
::view-transition-group(topbar) { animation-duration: var(--dur); animation-timing-function: var(--ease-out); }

html[data-vt='slide']::view-transition-old(screen) { animation: vt-out-left 0.26s var(--ease-in) both; }
html[data-vt='slide']::view-transition-new(screen) { animation: vt-in-right 0.5s var(--ease-spring) both; }
html[data-vt='zoom']::view-transition-old(screen) { animation: vt-zoom-out 0.24s var(--ease-in) both; }
html[data-vt='zoom']::view-transition-new(screen) { animation: vt-zoom-in 0.5s var(--ease-spring) both; }
html[data-vt='rise']::view-transition-old(screen) { animation: vt-out-up 0.26s var(--ease-in) both; }
html[data-vt='rise']::view-transition-new(screen) { animation: vt-in-up 0.5s var(--ease-spring) both; }
html[data-vt='iris']::view-transition-old(screen) { animation: vt-dim 0.55s ease both; }
html[data-vt='iris']::view-transition-new(screen) { animation: vt-iris 0.6s var(--ease-out) both; }
html[data-vt]::view-transition-old(bottombar) { animation: vt-drop 0.22s var(--ease-in) both; }
html[data-vt]::view-transition-new(bottombar) { animation: vt-lift 0.45s 0.1s var(--ease-spring) both; }

/* Cambiar de pestaña en la sala no es cambiar de pantalla: se queda quieto todo menos el
   cuerpo de la pestaña, que entra por el lado del que viene. La barra de abajo tampoco se
   mueve, porque el botón de empezar sigue ahí. */
/* El nombre solo existe durante una transición de pestaña: un elemento con nombre propio se
   saca de la foto de su contenedor, y el resto de las transiciones dejarían un hueco donde
   está la pestaña. render.js pone data-vt antes de que el navegador tome la foto. */
html[data-vt^='tabs'] .tab-body { view-transition-name: tabbody; }
html[data-vt^='tabs']::view-transition-old(screen), html[data-vt^='tabs']::view-transition-new(screen) { animation: none; }
html[data-vt^='tabs']::view-transition-old(bottombar), html[data-vt^='tabs']::view-transition-new(bottombar) { animation: none; }
html[data-vt^='tabs']::view-transition-old(tabbody) { animation: vt-fade-out 0.14s var(--ease-in) both; }
html[data-vt='tabs-right']::view-transition-new(tabbody) { animation: vt-tab-right 0.34s var(--ease-out) both; }
html[data-vt='tabs-left']::view-transition-new(tabbody) { animation: vt-tab-left 0.34s var(--ease-out) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-tab-right { from { transform: translateX(7%); opacity: 0; } }
@keyframes vt-tab-left { from { transform: translateX(-7%); opacity: 0; } }
@keyframes vt-out-left { to { transform: translateX(-9%); opacity: 0; } }
@keyframes vt-in-right { from { transform: translateX(12%); opacity: 0; } }
@keyframes vt-zoom-out { to { transform: scale(0.94); opacity: 0; } }
@keyframes vt-zoom-in { from { transform: scale(1.06); opacity: 0; } }
@keyframes vt-out-up { to { transform: translateY(-6%); opacity: 0; } }
@keyframes vt-in-up { from { transform: translateY(9%); opacity: 0; } }
@keyframes vt-dim { to { opacity: 0; filter: brightness(0.4); } }
@keyframes vt-iris { from { clip-path: circle(0% at 50% 42%); } to { clip-path: circle(140% at 50% 42%); } }
@keyframes vt-drop { to { transform: translateY(100%); } }
@keyframes vt-lift { from { transform: translateY(100%); } }

/* Listas que entran en cascada (solo los elementos nuevos: morphdom conserva los demás) */
.player-grid > *, .team-body > *, .results > *, .power-list > *, .vote-grid > *, .vote-players > *, .pl-grid > *, .modes > *, .reward-lines > *, .progress-body > *, .stat-grid > *, .clue-round > *, .answer-tiles > * {
  animation: enter-pop 0.42s var(--ease-spring) backwards;
}
.player-grid > :nth-child(2), .team-body > :nth-child(2), .results > :nth-child(2), .power-list > :nth-child(2), .vote-grid > :nth-child(2), .vote-players > :nth-child(2), .pl-grid > :nth-child(2), .modes > :nth-child(2), .reward-lines > :nth-child(2), .progress-body > :nth-child(2), .stat-grid > :nth-child(2), .clue-round > :nth-child(2), .answer-tiles > :nth-child(2) { animation-delay: 0.04s; }
.player-grid > :nth-child(3), .team-body > :nth-child(3), .results > :nth-child(3), .power-list > :nth-child(3), .vote-grid > :nth-child(3), .vote-players > :nth-child(3), .pl-grid > :nth-child(3), .modes > :nth-child(3), .reward-lines > :nth-child(3), .progress-body > :nth-child(3), .stat-grid > :nth-child(3), .clue-round > :nth-child(3), .answer-tiles > :nth-child(3) { animation-delay: 0.08s; }
.player-grid > :nth-child(4), .team-body > :nth-child(4), .results > :nth-child(4), .power-list > :nth-child(4), .vote-grid > :nth-child(4), .vote-players > :nth-child(4), .pl-grid > :nth-child(4), .modes > :nth-child(4), .reward-lines > :nth-child(4), .progress-body > :nth-child(4), .stat-grid > :nth-child(4), .clue-round > :nth-child(4), .answer-tiles > :nth-child(4) { animation-delay: 0.12s; }
.player-grid > :nth-child(n+5), .team-body > :nth-child(n+5), .results > :nth-child(n+5), .power-list > :nth-child(n+5), .vote-grid > :nth-child(n+5), .vote-players > :nth-child(n+5), .pl-grid > :nth-child(n+5), .modes > :nth-child(n+5), .reward-lines > :nth-child(n+5), .progress-body > :nth-child(n+5), .stat-grid > :nth-child(n+5), .clue-round > :nth-child(n+5), .answer-tiles > :nth-child(n+5) { animation-delay: 0.16s; }
@keyframes enter-pop { from { transform: translateY(10px) scale(0.94); opacity: 0; } }
.chip[aria-pressed='true'] { animation: chip-on 0.35s var(--ease-spring); }
@keyframes chip-on { 40% { transform: scale(1.08); } }

/* Botones con física: se hunden al presionar y rebotan al soltar */
.btn { transition: transform 0.45s var(--ease-spring), box-shadow 0.2s var(--ease-out), filter 0.15s; }
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--d), 0 12px 24px rgba(0, 0, 0, 0.3); }
.btn:active:not(:disabled) { transform: translateY(3px) scale(0.98); box-shadow: 0 1px 0 var(--d); transition-duration: 0.06s; }
.btn-ghost:hover:not(:disabled), .btn-outline:hover:not(:disabled) { box-shadow: none; }
/* Destello que cruza el botón al pasar el cursor */
.btn::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn:hover:not(:disabled)::after { animation: shine 0.7s var(--ease-out); }
@keyframes shine { 0% { opacity: 1; transform: skewX(-18deg) translateX(0); } 100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
.seg button, .avatar-opt, .pick-chip, .answer-btn, .vote-player, .power, .mode-card, .pl-card, .tabs button, .chip {
  transition: transform 0.4s var(--ease-spring), background-color var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur);
}
.seg button:active, .avatar-opt:active, .pick-chip:active, .vote-player:active, .chip:active:not(:disabled),
.power:active:not(:disabled), .mode-card:active:not(:disabled), .pl-card:active:not(:disabled) { transform: scale(0.95); transition-duration: 0.06s; }
.switch::after { transition: transform 0.45s var(--ease-spring), background-color var(--dur); }

/* Barras que se llenan con resorte */
.level-bar span, .ach-bar span { transition: width 0.9s var(--ease-spring); }
.level-bar span, .ach-bar span { animation: bar-fill 1.1s var(--ease-out) both; transform-origin: left; }
@keyframes bar-fill { from { transform: scaleX(0); } }

/* Modales */
.modal { animation: modal-in 0.45s var(--ease-spring); }
@keyframes modal-in { from { transform: translateY(24px) scale(0.92); opacity: 0; } }

/* Menos movimiento: preferencia del sistema o ajuste del juego */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::before, body::after { display: none; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; }
html.reduce-motion body::before, html.reduce-motion body::after { display: none; }

/* Reposo (core/reposo.js): sin tocar la pantalla un rato, lo que se mueve solo de adorno se queda
   quieto y la pantalla deja de dibujar. Lo que dice algo (el reloj, la cuenta, los avisos) sigue. */
html.reposo body::before, html.reposo body::after,
html.reposo .btn-glow, html.reposo .h3-howbtn.is-first,
html.reposo .marquee-bulbs, html.reposo .marquee-bulbs::after,
html.reposo .mascot, html.reposo .mascot *,
html.reposo .rays, html.reposo .silhouette, html.reposo .mystery, html.reposo .art-emoji { animation-play-state: paused !important; }

/* En una pantalla táctil, las barras y paneles van sin desenfoque detrás: el navegador lo recalcula
   en cada fotograma y era de lo que más le costaba a la GPU. Con el fondo casi opaco no se nota. */
@media (pointer: coarse) {
  .topbar, .seat-bar, .dock, .turn-stage .hud, .handoff { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar { background: rgba(11, 8, 32, 0.92); }
  .seat-bar { background: rgba(8, 5, 22, 0.95); }
  .turn-stage .hud { background: rgba(11, 8, 32, 0.88); }
}

/* ============================================================
   Escritorio: el escenario y sus dos carriles
   ------------------------------------------------------------
   El juego nació para un teléfono y hasta aquí todo el CSS es eso: una columna, con cuatro
   ajustes para pantallas estrechas. En un monitor esa columna dejaba dos tercios vacíos.

   De 1280 px para arriba la página pasa a tres columnas. Lo que en el móvil está escondido en
   pestañas y botones flotantes sale a los carriles: a la izquierda quién juega y cómo van, a la
   derecha lo que está pasando. El centro no pierde nada: gana.

   El marcado no cambió por pantalla. Todo lo que dibuja una pantalla va dentro de .stage, y en
   el móvil .stage es la columna de siempre (ver core/render.js y ui/layout.js).
   ============================================================ */

/* Alto del anuncio del carril. Cero hasta que existan: reservarlo desde ahora es lo que evita
   que el día que se encienda salte todo de sitio. Cuando llegue, se cambia aquí y ya. */
:root { --ad-h: 0px; --rail-w: 260px; --stage-max: 820px; }

.stage { min-width: 0; }

.rail { display: none; }

@media (min-width: 1280px) {
  #app[data-rails='si'] {
    max-width: 1560px;
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-w);
    align-items: start;
    gap: 14px;
  }
  /* Los carriles se quedan a la vista al bajar: son el estado de la sala, no contenido */
  #app[data-rails='si'] .rail {
    display: flex; flex-direction: column; gap: 10px;
    position: sticky; top: 16px;
    max-height: calc(100vh - 150px);
  }
  #app[data-rails='si'] .stage { max-width: var(--stage-max); justify-self: center; width: 100%; }
  /* Sin carriles (portada, podio) la columna se queda centrada como siempre */
  #app:not([data-rails='si']):not([data-phase='home']) .stage { max-width: 980px; margin-inline: auto; }
  /* La barra de abajo se alinea con el escenario, no con la pantalla entera */
  #app[data-rails='si'] ~ .bottom-bar .inner,
  .bottom-bar .inner { max-width: var(--stage-max); }
}

@media (min-width: 1600px) {
  :root { --rail-w: 300px; --stage-max: 880px; }
}

.rail-panel {
  background: var(--surface); border: var(--outline-w) solid var(--outline); border-radius: 18px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.rail-panel > h3 { font-size: 0.95rem; color: var(--muted); }
.rail-feed { flex: 1 1 auto; overflow: auto; }
.rail-wheel { display: grid; place-items: center; }
.rail-wheel .wheel { margin: 2px auto 6px; }
.rail .scoreboard { margin: 0; }
.rail .powerbar { margin: 0; }
/* En el carril los power-ups van en una sola columna: hay 260 px, no 800 */
.rail .powers { grid-template-columns: 1fr; }

.rail-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rail-players li {
  display: flex; align-items: center; gap: 6px; background: var(--surface-2);
  border-radius: 12px; padding: 6px 9px; font-size: 0.85rem;
}
.rail-players li.me { outline: 2px solid var(--sun); outline-offset: -2px; }
.rail-players li.off { opacity: 0.5; }
.rail-players .plate-name { font-size: 0.85rem; }
/* En 260 px el nombre no puede comerse toda la barra del marcador */
.rail .score-row .nm, .dock-body .score-row .nm { width: 84px; }

/* El hueco del anuncio. No existe mientras --ad-h sea cero, así que hoy no ocupa ni se ve. */
.ad-slot { flex: none; height: var(--ad-h); border-radius: 14px; overflow: hidden; }
.ad-slot:empty { background: none; }

/* ---------------- Lo que va pasando ---------------- */
/* Hasta ahora el feed solo existía como avisos que se iban solos: en el móvil no cabía otra
   cosa, pero quien se los perdía no tenía forma de saber qué había pasado. */
.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.feed-item {
  display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; line-height: 1.4;
  color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 6px 9px;
}
.feed-item .fi-icon { flex: none; }
.feed-item.win { color: var(--text); background: rgba(126, 224, 74, 0.14); }
.feed-item.miss { background: rgba(255, 61, 90, 0.12); }
.feed-item.sabotage { background: rgba(255, 79, 216, 0.14); }
.feed-item.help { background: rgba(47, 214, 255, 0.12); }

/* ---------------- El dock del móvil ---------------- */
/* Los paneles de los carriles, en una barra abajo: quién juega, lo que va pasando y la pizarra.
   Cerrado ocupa 44 px; abierto, lo que necesite sin tapar la carta (de ahí el tope de altura). */
.dock {
  display: flex; flex-direction: column;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
  background: rgba(8, 5, 22, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: var(--outline-w) solid var(--outline);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Con el dock puesto hay 44 px menos de pantalla: lo que va al final necesita ese aire de más */
html[data-dock-on='si'] #app { padding-bottom: 180px; }
html[data-dock-on='si'] .bottom-bar { bottom: 46px; }
/* Sin dock (un solo dispositivo) el botón flotante se queda, pero por encima de los asientos */
.board-fab { bottom: calc(116px + env(safe-area-inset-bottom)); }
/* En escritorio no hay dock: el botón se alinea con el borde del carril derecho en vez de
   quedarse orbitando la esquina de un monitor de 1920, lejos de todo lo demás */
@media (min-width: 1280px) {
  .dock { display: none; }
  .board-fab { right: max(14px, calc(50% - 764px)); bottom: 24px; }
}
.dock-tabs { display: flex; gap: 6px; padding: 5px 8px; }
.dock-tabs button {
  flex: 1; position: relative; padding: 8px 4px; border-radius: 12px; border: 0;
  background: var(--surface); color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 800;
}
.dock-tabs button.on { background: var(--sun); color: var(--ink); }
/* La pizarra solo aparece cuando hay algo que dibujar o que mirar (ui/board.js la anuncia
   en <html data-board>, para no repintar la página entera cada vez que alguien traza algo) */
.dock-board { display: none; }
html[data-board]:not([data-board='']) .dock-board { display: block; }
html:not([data-board-dot='si']) .dock-dot-board { display: none; }
/* Y con el dock puesto sobra el botón flotante, que además caía justo encima de la fila de
   power-ups y tapaba uno. En «un solo dispositivo» no hay dock, así que ahí se queda. */
html[data-dock-on='si'] .board-fab { display: none; }
.dock-dot {
  position: absolute; top: 5px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 2px var(--surface);
}
.dock-body {
  max-height: min(42vh, 320px); overflow: auto; padding: 10px 10px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.dock.open { box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45); }
.dock-body .wheel { margin: 0 auto 6px; }

/* ---------------- La sala en escritorio ---------------- */
/* Las cinco pestañas en vertical dentro del carril. En el móvil son una tira que hay que
   arrastrar para ver el final; aquí caben todas de un vistazo y ninguna queda escondida. */
.rail-tabs { display: flex; flex-direction: column; gap: 4px; }
.rail-tabs button {
  border: 0; background: transparent; color: var(--muted); text-align: left;
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  transition: background 0.15s, color 0.15s;
}
.rail-tabs button[aria-selected='true'] {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--text); box-shadow: inset 3px 0 0 var(--sun);
}
.rail-tabs .badge {
  background: var(--coral); color: var(--text); border-radius: 999px;
  padding: 0 7px; font-size: 0.75rem; margin-left: 4px;
}

/* ============================================================
   La portada: «¿A qué jugamos hoy?»
   ------------------------------------------------------------
   Arlek y el cartel arriba, los seis modos como cartelera, y crear o entrar a un toque. En el
   teléfono: Arlek encima del cartel, las acciones justo debajo y la cartelera después. En
   pantallas más anchas: Arlek al lado del cartel señalándolo, la cartelera en tres columnas y
   las acciones en una barra al pie.

   La regla que manda aquí: **nada se tapa y nada se recorta.** Si una pantalla pequeña no da,
   la página se desplaza. La versión anterior se empeñó en caber sin scroll y acabó encogiendo a
   Arlek detrás del cartel y recortando los teléfonos de la demostración.

   Se cuelga de `#app:has(.home3)` y no de `#app[data-phase='home']`: ese atributo también lo
   lleva la pantalla de «un solo dispositivo» (ver core/render.js).
   ============================================================ */

#app:has(.home3) { max-width: 1360px; padding: 14px 24px 28px; }
.home3 { display: flex; flex-direction: column; min-height: calc(100vh - 42px); color: var(--text); }

/* ---------------- La barra de arriba ---------------- */
.h3-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 5; }
.h3-top .grow { flex: 1; }
.profile-chip {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 60vw; cursor: pointer;
  padding: 6px 16px 6px 8px; border-radius: 999px;
  background: rgba(11, 8, 32, 0.84); border: 2px solid var(--surface-3); color: var(--text);
  font-weight: 800; font-size: 0.95rem;
}
.profile-chip:hover { border-color: var(--sun); }
.profile-chip .pc-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip .emo { width: 1.7em; height: 1.7em; flex: none; }
.h3-howbtn {
  display: inline-flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(11, 8, 32, 0.84); border: 2px solid var(--surface-3); color: var(--text);
  font-weight: 800; font-size: 0.9rem;
}
.h3-howbtn .ic { width: 1.35em; height: 1.35em; }
.h3-howbtn.is-first { border-color: var(--sun); animation: glow 2.2s ease-in-out infinite; }
.menu-btn {
  flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(11, 8, 32, 0.84); border: 2px solid var(--sun); box-shadow: 0 4px 0 var(--sun-d);
}
.menu-btn .ic { width: 26px; height: 26px; }

/* ---------------- Arlek y el cartel ---------------- */
.h3-brand { display: flex; align-items: flex-end; justify-content: center; margin-top: 8px; }
/* Arlek delante del cartel, con el busto entero a la vista. El cartel es decoración y no recibe
   clics: aunque se rocen, un toque sobre Arlek es de Arlek, y lo hace reaccionar. */
.h3-arlek { line-height: 0; position: relative; z-index: 2; margin-right: -30px; margin-bottom: -6px; }
.h3-arlek svg.mascot { width: 190px; height: 200px; }
.h3-sign { position: relative; z-index: 1; pointer-events: none; }
.h3-tag { margin: 12px 0 0; color: var(--muted); font-weight: 700; text-align: center; font-size: 1rem; }

/* ---------------- La cartelera ---------------- */
.h3-title { text-align: center; font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin: 20px 0 12px; }
.mode-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1180px; margin: 0 auto; }
.mode-tile { position: relative; }
/* El cartel entero es el botón de elegir; «Verlo» va aparte, en la esquina de abajo */
.h3-pick {
  width: 100%; height: 100%; cursor: pointer; text-align: left; color: var(--text);
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 20px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.22), transparent 60%), rgba(28, 22, 68, 0.92);
  border: 2px solid var(--surface-3); transition: border-color 0.15s, transform 0.15s;
}
.h3-pick:hover { border-color: var(--sky); }
.mode-tile.on .h3-pick { border-color: var(--sun); box-shadow: 0 0 22px rgba(255, 204, 61, 0.24); }
.h3-pic {
  width: 78px; height: 78px; border-radius: 18px; display: grid; place-items: center;
  background: var(--surface-2); border: var(--outline-w) solid var(--outline); box-shadow: 0 4px 0 var(--outline);
}
.h3-pic .ic { width: 52px; height: 52px; }
.mode-tile.on .h3-pic { background: var(--sun); }
.h3-ptxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.h3-ptxt b { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.1; }
.h3-ptag { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.h3-people { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 0.8rem; font-weight: 800; color: var(--faint); }
.h3-people .ic { width: 1.3em; height: 1.3em; }
.h3-see {
  position: absolute; right: 12px; bottom: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: rgba(47, 214, 255, 0.12); border: 1px solid rgba(47, 214, 255, 0.35); color: var(--sky);
  font-weight: 800; font-size: 0.8rem;
}
.h3-see:hover { background: rgba(47, 214, 255, 0.22); }
.h3-see .ic { width: 1.2em; height: 1.2em; }
.h3-picked {
  position: absolute; top: 10px; right: 12px; pointer-events: none;
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--sun); color: var(--ink); padding: 3px 9px; border-radius: 999px;
}

/* ---------------- Crear y entrar ---------------- */
.h3-actions { display: flex; flex-direction: column; gap: 10px; width: min(480px, 100%); margin: 18px auto 0; }
.h3-play { width: 100%; }
.h3-play .big-label .emo { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
.h3-join {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 18px;
  background: rgba(11, 8, 32, 0.84); border: 2px solid var(--surface-3);
}
.h3-join-l { font-weight: 800; color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.h3-join .code-input { flex: 1; min-width: 0; width: 100%; padding: 10px 8px; font-size: 1.15rem !important; letter-spacing: 0.18em; }
.h3-join .btn { flex: none; }
.h3-join .btn .ic { width: 1.3em; height: 1.3em; }
.h3-local {
  align-self: center; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: 0; padding: 6px 4px; color: var(--muted); font-weight: 800; font-size: 0.92rem;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--surface-3);
}
.h3-local .ic { width: 1.4em; height: 1.4em; }

/* ---------------- La invitación ---------------- */
.h3-invite {
  width: min(460px, 100%); margin: 18px auto 0; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: 22px; background: rgba(28, 22, 68, 0.94); border: var(--outline-w) solid var(--outline);
  box-shadow: var(--bevel), 0 7px 0 var(--outline);
}
.h3-inv-head { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.h3-inv-head .ic { width: 1.6em; height: 1.6em; flex: none; }
.h3-code {
  margin-left: auto; font-family: var(--marquee); font-weight: 400; letter-spacing: 0.14em;
  background: var(--text); color: var(--ink); padding: 3px 10px; border-radius: 10px;
}
.avatars-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; overscroll-behavior-x: contain; }
.avatars-row .avatar-opt { flex: none; }

/* ---------------- Pantallas anchas ---------------- */
@media (min-width: 720px) {
  /* Las acciones bajan a una barra al pie de la cartelera */
  .home3:not(.is-invite) .h3-actions {
    order: 10; width: 100%; max-width: 1180px; margin: 16px auto 0;
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) auto; align-items: center; gap: 12px;
    padding: 12px; border-radius: 24px; background: rgba(11, 8, 32, 0.86); border: var(--outline-w) solid var(--outline);
  }
  /* Y el conjunto se centra en el alto que queda bajo la barra de arriba */
  .home3:not(.is-invite) .h3-brand { margin-top: auto; }
  .home3:not(.is-invite) .h3-actions { margin-bottom: auto; }
}
/* Tableta: dos columnas de carteles, y la barra apilada para que el código no quede cortado
   entre su etiqueta y el botón */
@media (min-width: 720px) and (max-width: 959px) {
  .mode-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home3:not(.is-invite) .h3-actions { grid-template-columns: 1fr; }
  .home3:not(.is-invite) .h3-actions .h3-local { justify-self: center; }
}
/* Con tres columnas pero poco ancho, la etiqueta del código le quitaba sitio al propio código:
   el campo ya dice CÓDIGO y el botón, Entrar */
@media (min-width: 960px) and (max-width: 1199px) {
  .h3-join-l { display: none; }
}
/* Pantallas bajas (un portátil de 768 px): la marca se aprieta para que la barra de crear no
   quede bajo el pliegue */
@media (min-width: 720px) and (max-height: 820px) {
  .h3-arlek svg.mascot { width: 150px; height: 158px; }
  .h3-sign { padding: 18px 22px 14px; }
  .h3-sign .logo .l1 { font-size: 3.3rem; }
  .h3-sign .logo .l2 { font-size: 1.55rem; margin-top: 6px; }
  .h3-tag { margin-top: 8px; }
  .h3-title { margin: 12px 0 10px; font-size: 1.2rem; }
  .h3-pick { padding: 11px 14px; }
}

/* ---------------- El teléfono ---------------- */
@media (max-width: 719px) {
  #app:has(.home3) { padding: 10px 14px 24px; }
  .home3 { min-height: 0; }
  .h3-howbtn span { display: none; }
  .h3-howbtn { padding: 9px; }
  .menu-btn { width: 44px; height: 44px; }
  /* Arlek encima del cartel, saludando: el cartel solo le roza el borde de abajo */
  .h3-brand { flex-direction: column; align-items: center; margin-top: 6px; }
  .h3-arlek { margin: 0 0 -20px; z-index: 0; }
  .h3-arlek svg.mascot { width: 150px; height: 158px; }
  .h3-sign { padding: 16px 18px 13px; }
  .h3-sign .logo .l1 { font-size: 2.05rem; }
  .h3-sign .logo .l2 { font-size: 1.05rem; margin-top: 5px; padding: 3px 11px 1px; }
  .h3-tag { font-size: 0.9rem; margin-top: 10px; }
  .h3-actions { margin-top: 14px; }
  .h3-join-l { display: none; }
  .h3-title { font-size: 1.15rem; margin: 20px 0 10px; }
  .mode-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .h3-pick { grid-template-columns: 1fr; justify-items: start; gap: 8px; padding: 12px 12px 42px; }
  .h3-pic { width: 54px; height: 54px; border-radius: 14px; }
  .h3-pic .ic { width: 36px; height: 36px; }
  .h3-ptxt b { font-size: 1.02rem; }
  .h3-ptag { font-size: 0.8rem; }
  .h3-people { position: absolute; left: 12px; bottom: 13px; margin: 0; font-size: 0.72rem; }
  .h3-see { right: 10px; bottom: 9px; font-size: 0.74rem; padding: 3px 8px; }
  .h3-picked { top: 8px; right: 8px; font-size: 0.6rem; }
}

/* ============================================================
   «Cómo se juega»: la demostración en su propia hoja (screens/demo.js)
   ============================================================ */
.modal.howto-modal {
  --phone-scale: 0.55; width: min(980px, 100%); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 20px;
}
.howto-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.howto-head h2 .ic { width: 1.1em; height: 1.1em; }
.howto-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 2px solid transparent; color: var(--text); font-weight: 800; font-size: 0.85rem;
}
.mchip .ic { width: 1.5em; height: 1.5em; }
.mchip[aria-pressed='true'] { background: var(--sun); color: var(--ink); border-color: var(--sun-d); }
.howto-desc { margin: 0; text-align: center; color: var(--muted); font-size: 0.92rem; max-width: 70ch; align-self: center; }
.howto-body { display: flex; align-items: flex-end; justify-content: center; gap: 22px; }
.howto-host { line-height: 0; flex: none; }
.howto-host svg.mascot { width: 150px; height: 158px; }
.howto-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.howto-bubble {
  position: relative; display: flex; align-items: center; gap: 10px; max-width: 460px; min-height: 3.2em;
  background: #fff8ec; color: var(--ink); font-weight: 800; font-size: 0.95rem; line-height: 1.35;
  padding: 12px 16px; border-radius: 18px; border: var(--outline-w) solid var(--outline); box-shadow: 0 5px 0 var(--outline);
}
.howto-bubble::before {
  content: ''; position: absolute; left: -14px; bottom: 14px; width: 22px; height: 18px; background: inherit;
  border-left: var(--outline-w) solid var(--outline); border-bottom: var(--outline-w) solid var(--outline);
  transform: skewY(-30deg) rotate(8deg); border-radius: 0 0 0 6px;
}
.howto-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sun); color: var(--ink); font-family: var(--marquee); font-size: 0.95rem;
}
.howto-stage .demo-dots { margin-top: 0; }
.howto-foot { display: flex; align-items: center; gap: 10px; }
.howto-foot .grow { flex: 1; }
.howto-nav { min-width: 46px; }
.howto-nav .ic { width: 1.3em; height: 1.3em; }
.howto-prev .ic { transform: scaleX(-1); }
@media (max-width: 719px) {
  .modal-back:has(.howto-modal) { padding: 0; align-items: end; }
  .modal.howto-modal { --phone-scale: 0.44; max-height: 100vh; border-radius: 24px 24px 0 0; padding: 14px 14px 18px; gap: 10px; }
  .howto-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .howto-chips .mchip { flex: none; }
  .howto-host { display: none; }
  .howto-desc { font-size: 0.84rem; }
  .howto-bubble { font-size: 0.86rem; padding: 10px 12px; }
  .howto-bubble::before { display: none; }
  .howto-foot { flex-wrap: wrap; }
  .howto-foot .btn-coral { width: 100%; }
}

/* La palabra de los teléfonos se medía con el ancho de la ventana (vw) aunque viva dentro de
   un teléfono de 330 px: en un monitor salía enorme y se partía por la mitad («BOB ESPONJ A»).
   Dentro del teléfono va a tamaño fijo, y solo se parte una palabra que no quepa entera. */
.phone-zoom .word-card .word { font-size: 2.15rem; overflow-wrap: break-word; }

/* Escala de los teléfonos por defecto (la galería de arte los usa así); la hoja pone la suya */
:root { --phone-scale: 0.43; }

/* ---------------- El menú ---------------- */
/* Todo lo que antes estaba suelto al pie de la portada. Entra desde abajo en el teléfono y
   desde la derecha en un monitor: el mismo marcado, solo cambia por dónde llega.
   El corte son 720 px porque la pregunta aquí es «¿esto es un teléfono?», no «¿caben tres
   columnas?» (eso es WIDE_MIN, 1280, y es otra cosa).
   Va en 45/46 para quedar por encima del dock, que está en 44: si no, dentro de una partida y en
   un teléfono el menú saldría medio tapado. */
.drawer-back { position: fixed; inset: 0; background: rgba(8, 5, 22, 0.62); z-index: 45; animation: fadeIn 0.18s; }
.drawer {
  position: fixed; z-index: 46; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain;
  background: var(--surface); border: var(--outline-w) solid var(--outline); border-bottom: 0;
  border-radius: 22px 22px 0 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  max-height: min(84dvh, 640px); overflow: auto;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.5);
  animation: drawerUp 0.24s var(--ease-spring);
}
@keyframes drawerUp { from { transform: translateY(100%); } }
.drawer-grab { width: 44px; height: 4px; border-radius: 3px; background: var(--surface-3); margin: 0 auto 2px; }
.drawer-list { display: flex; flex-direction: column; gap: 7px; }
.drawer-row {
  display: flex; align-items: center; gap: 11px; width: 100%; cursor: pointer;
  padding: 11px 13px; border-radius: 14px; text-align: left;
  background: var(--surface-2); border: 2px solid transparent; color: var(--text);
  font-family: var(--display); font-weight: 600; font-size: 1rem;
}
.drawer-row:hover { border-color: var(--sky); }
.drawer-row .ic { width: 1.5em; height: 1.5em; flex: none; }
.drawer-toggles { display: flex; gap: 6px; justify-content: center; }
.drawer-sub { display: flex; flex-direction: column; gap: 6px; padding: 9px 13px; border-radius: 14px; background: var(--surface-2); }
.drawer-sub b { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); }
.drawer .player-card { margin: 0; }

@media (min-width: 720px) {
  .drawer {
    left: auto; top: 0; bottom: 0; width: min(360px, 88vw);
    border-radius: 22px 0 0 22px; border-right: 0; border-bottom: var(--outline-w) solid var(--outline);
    max-height: none; padding-bottom: 14px;
    box-shadow: -14px 0 44px rgba(0, 0, 0, 0.5);
    animation: drawerIn 0.24s var(--ease-spring);
  }
  @keyframes drawerIn { from { transform: translateX(100%); } }
  .drawer-grab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-back { animation: none; }
}

/* ---------------- Lo que el ancho arregla de paso ---------------- */
/* El HUD del turno caía sobre la cenefa del telón y se leía mal. La barra de arriba tiene su
   propio panel justo para eso desde el principio; el HUD no lo tenía. */
.turn-stage .hud {
  background: rgba(11, 8, 32, 0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 2px solid var(--outline); border-radius: 16px; padding: 8px 14px;
}

/* Y la foto, que es de donde sale la gracia del juego, ocupaba 256 px en una pantalla de 1440 */
@media (min-width: 1280px) {
  .img-wrap { width: min(420px, 100%); }
}

/* La pantalla de Kyogen Studio mientras carga (js/splash.js) */
#splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #0b0820; transition: opacity 0.35s ease; cursor: pointer; }
#splash.out { opacity: 0; pointer-events: none; }
.splash-mark { display: flex; flex-direction: column; align-items: center; animation: splash-in 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.splash-mark svg { width: min(40vw, 170px); height: auto; animation: splash-wobble 1.4s ease-in-out 0.5s both; }
.splash-name { font-family: 'Bungee', 'Fredoka', sans-serif; color: #ffcc3d; font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: 0.06em; margin-top: 14px; animation: splash-up 0.5s ease-out 0.25s both; }
.splash-sub { font-family: 'Nunito', sans-serif; font-weight: 800; color: #fff8ec; letter-spacing: 0.55em; margin-right: -0.55em; font-size: 0.8rem; opacity: 0.8; animation: splash-up 0.5s ease-out 0.4s both; }
@keyframes splash-in { from { opacity: 0; transform: scale(0.7); } }
@keyframes splash-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes splash-wobble { 30% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .splash-mark, .splash-mark svg, .splash-name, .splash-sub { animation: none; } #splash { transition: none; } }

/* Canjear un código (ui/redeem.js) */
.redeem-input { font-family: var(--display); font-size: 1.4rem; text-align: center; letter-spacing: 0.12em; text-transform: uppercase; }
.redeem-code { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.12em; text-align: center; color: var(--sun); }
.redeem-prize { display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 800; font-size: 1.1rem; }
.redeem-emoji { font-size: 3.4rem; line-height: 1; }
.redeem-arlek { display: flex; justify-content: center; }
.redeem-emoji .ic, .redeem-emoji .emo { width: 1em; height: 1em; }
.pick-row .until { color: var(--sun); }

/* La tarjeta de un jugador (ui/player-card.js) */
.plate-btn { all: unset; cursor: pointer; border-radius: 10px; }
.plate-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.plate-btn:hover .plate-name { text-decoration: underline; text-decoration-thickness: 2px; }
.player-card-modal { align-items: stretch; }
.card-arlek { display: flex; justify-content: center; margin-top: -10px; }
.card-stats { grid-template-columns: repeat(3, 1fr); }
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.showcase-item { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px 6px; border-radius: 14px; background: var(--surface-2, rgba(255, 255, 255, 0.06)); font-size: 0.85rem; }
.showcase-item .ach-em { font-size: 1.8rem; }
.card-actions { justify-content: center; flex-wrap: wrap; }
.ach .pin { all: unset; cursor: pointer; font-size: 1.2rem; opacity: 0.35; filter: grayscale(1); padding: 4px; }
.ach .pin.on { opacity: 1; filter: none; }
.ach .pin:focus-visible { outline: 3px solid var(--sun); border-radius: 8px; }

/* ---------- Blind Rank (screens/ranking.js): la consigna, tocar en orden y la revelación ---------- */
.rk-stage { padding-bottom: 12px; }
.rk-clock { font-family: var(--marquee); background: var(--sun); color: var(--ink); border: 3px solid var(--outline); border-radius: 999px; padding: 3px 14px; box-shadow: 0 4px 0 var(--sun-d); white-space: nowrap; }
.rk-prompt { background: var(--text); color: var(--ink); border: 3px solid var(--outline); border-radius: 22px; padding: 16px 18px; box-shadow: 0 6px 0 var(--drop); text-align: center; }
.rk-prompt small { display: block; color: #6b6290; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; margin-bottom: 4px; }
.rk-prompt b { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; overflow-wrap: anywhere; }
.rk-hint { color: var(--muted); font-size: 0.9rem; text-align: center; margin: 0; }
.rk-strip { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.rk-strip span { width: 40px; height: 40px; border-radius: 12px; border: 3px dashed var(--surface-3); display: grid; place-items: center; color: var(--faint); font-family: var(--marquee); overflow: hidden; }
.rk-strip span.on { border-style: solid; border-color: var(--outline); padding: 0; background: #efe3cc; }
.rk-strip img, .rk-strip .rk-art { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.rk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding-top: 6px; }
.rk-tap {
  position: relative; min-width: 0; margin: 0; font: inherit; background: var(--text); color: var(--ink); border: 3px solid var(--outline); border-radius: 18px;
  padding: 6px 6px 8px; box-shadow: 0 5px 0 var(--drop); text-align: center; display: block;
}
button.rk-tap { cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }
button.rk-tap:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--drop); }
button.rk-tap:disabled { cursor: default; }
.rk-tap img, .rk-tap .rk-art { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 22%; border-radius: 12px; display: block; background: #efe3cc; }
.rk-art { display: grid; place-items: center; overflow: hidden; font-size: 2rem; }
.rk-art svg, .rk-art canvas { width: 100%; height: 100%; }
.rk-tap b { display: block; font-family: var(--display); font-size: 0.86rem; line-height: 1.1; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-badge { position: absolute; top: -10px; left: -8px; width: 38px; height: 38px; border-radius: 50%; background: var(--coral); color: #fff; font-family: var(--marquee); display: grid; place-items: center; border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--coral-d); z-index: 1; }
.rk-tap.done { outline: 4px solid var(--sun); outline-offset: 1px; }
.rk-undo { justify-content: center; }
.rk-bar { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.rk-bar .btn { width: 100%; }
.rk-bar small { text-align: center; color: var(--muted); font-weight: 700; }
.rk-credits { color: var(--faint); font-size: 0.8rem; }
.rk-credits summary { cursor: pointer; text-align: center; font-weight: 700; }
.rk-credits ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.rk-credits a { color: inherit; overflow-wrap: anywhere; }
.rk-choose .chips { justify-content: flex-start; }
.rk-choose .chip { cursor: pointer; text-align: left; white-space: normal; }
.rk-unblock { color: var(--muted); font-size: 0.9rem; }
.rk-unblock summary { cursor: pointer; text-align: center; font-weight: 700; margin-bottom: 8px; }
.rk-first { display: flex; gap: 14px; align-items: center; background: var(--text); color: var(--ink); border: 3px solid var(--outline); border-radius: 22px; padding: 12px; box-shadow: 0 6px 0 var(--drop); }
.rk-first img, .rk-first .rk-art { width: 108px; height: 108px; border-radius: 16px; object-fit: cover; object-position: center 22%; border: 3px solid var(--outline); flex: none; background: #efe3cc; }
.rk-first > div { min-width: 0; }
.rk-first b { font-family: var(--marquee); font-size: 1.5rem; line-height: 1; display: block; overflow-wrap: anywhere; }
.rk-first small { color: #6b6290; font-weight: 800; display: block; }
.rk-order { gap: 10px; }
.rk-row { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rk-row img, .rk-row .rk-art { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; object-position: center 22%; border: 2px solid var(--outline); background: #efe3cc; font-size: 1.2rem; }
.rk-row .n { font-family: var(--marquee); color: var(--sun); text-align: center; }
.rk-row .who { min-width: 0; }
.rk-row .who b { display: block; font-family: var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .bar { display: block; margin-top: 4px; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rk-row .bar i { display: block; height: 100%; background: var(--sky); border-radius: 99px; }
.rk-row .you { font-size: 0.8rem; color: var(--muted); font-weight: 800; white-space: nowrap; }
.rk-row .you.hit { color: var(--lime); }
.rk-fact { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 2px solid var(--surface-3); border-radius: 18px; padding: 12px 14px; }
.rk-fact .em { font-size: 1.7rem; flex: none; }
.rk-fact b { font-family: var(--display); display: block; }
.rk-fact span { color: var(--muted); font-size: 0.9rem; }
.rk-empty { display: grid; justify-items: center; gap: 8px; text-align: center; }
/* En la pantalla grande: más ancho, las cartas en una sola fila y sin el pliegue de créditos tapando */
.stage-rank { width: min(100%, 62rem); display: grid; gap: 1rem; }
.stage-rank .rk-grid { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; }
.stage-rank .rk-prompt b { font-size: 2.2rem; }
.stage-rank .rk-tap b { font-size: 1rem; }
.stage-rank .rk-first b { font-size: 2rem; }
.stage-rank .rk-row .who, .stage-rank .rk-first, .stage-rank .rk-fact { text-align: left; }
/* La revelación, en dos columnas: a la izquierda lo que se comenta, a la derecha el orden entero */
.stage-rank.rk-two { width: min(100%, 76rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.stage-rank .rk-col { display: grid; gap: 1rem; min-width: 0; }
@media (max-width: 900px) {
  .stage-rank.rk-two { grid-template-columns: minmax(0, 1fr); }
}
/* En la demostración caben tres cartas pequeñas */
.phone .rk-grid { gap: 8px 6px; }
.phone .rk-prompt { padding: 10px 12px; border-radius: 16px; }
.phone .rk-prompt b { font-size: 1.05rem; }
.phone .rk-badge { width: 28px; height: 28px; font-size: 0.8rem; top: -8px; left: -6px; }

/* ---------- Build The Team (screens/draft.js): las carteras, la puja y los equipos ---------- */
.dr-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dr-wallet { min-width: 0; background: var(--surface); border: 3px solid var(--outline); border-radius: 18px; padding: 10px 12px; box-shadow: 0 4px 0 var(--drop); }
.dr-wallet.me { border-color: var(--sun); }
.dr-wallet small { color: var(--muted); font-weight: 800; display: block; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-wallet b { font-family: var(--marquee); font-size: 1.5rem; color: var(--sun); }
.dr-stars { color: var(--sun); letter-spacing: 1px; }
.dr-slots { display: flex; gap: 4px; margin-top: 6px; }
.dr-slots span { flex: 1 1 0; max-width: 34px; aspect-ratio: 1; border-radius: 9px; border: 2px dashed var(--surface-3); overflow: hidden; display: block; }
.dr-slots span.on { border: 2px solid var(--outline); background: #efe3cc; }
.dr-slots img, .dr-slots .rk-art { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; font-size: 1rem; }
.dr-lot { display: flex; gap: 14px; align-items: center; background: var(--text); color: var(--ink); border: 3px solid var(--outline); border-radius: 22px; padding: 12px; box-shadow: 0 6px 0 var(--drop); }
.dr-lot img, .dr-lot .rk-art { width: 132px; height: 132px; border-radius: 16px; object-fit: cover; object-position: center 22%; border: 3px solid var(--outline); flex: none; background: #efe3cc; }
.dr-lot > div { min-width: 0; }
.dr-lot b { font-family: var(--marquee); font-size: 1.5rem; line-height: 1.02; display: block; overflow-wrap: anywhere; }
.dr-lot small { color: #6b6290; font-weight: 800; display: block; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; }
.dr-bid { background: var(--surface); border: 3px solid var(--outline); border-radius: 22px; padding: 14px; display: grid; gap: 10px; justify-items: center; box-shadow: 0 6px 0 var(--drop); }
.dr-amount { font-family: var(--marquee); font-size: 3.2rem; line-height: 1; color: var(--sun); text-shadow: var(--ink-text); }
.dr-range { width: 100%; height: 34px; accent-color: var(--sun); cursor: pointer; }
.dr-bid .chips { justify-content: center; }
.dr-bid .chip { cursor: pointer; }
.dr-goals span { display: inline-block; margin: 2px 2px 0; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--surface-3); color: var(--text); font-weight: 700; white-space: nowrap; }
.dr-verdict { display: grid; gap: 2px; text-align: center; background: var(--surface); border: 3px solid var(--outline); border-radius: 18px; padding: 12px 14px; }
.dr-verdict.mine { border-color: var(--sun); }
.dr-verdict.none { border-style: dashed; }
.dr-verdict b { font-family: var(--display); font-size: 1.3rem; }
.dr-verdict span { color: var(--muted); }
.dr-goal { background: linear-gradient(135deg, #7b4fd6, #ff3d5a); color: #fff; border: 3px solid var(--outline); border-radius: 22px; padding: 16px; text-align: center; box-shadow: 0 6px 0 var(--drop); }
.dr-goal small { display: block; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.dr-goal b { display: block; font-family: var(--marquee); font-size: 1.6rem; line-height: 1.08; text-shadow: var(--ink-text); overflow-wrap: anywhere; }
.dr-team { background: var(--surface); border: 3px solid var(--outline); border-radius: 20px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.dr-team.win { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun), 0 6px 0 var(--drop); }
.dr-team .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.dr-team .hd span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-team .hd b { font-family: var(--marquee); color: var(--sun); font-size: 1.4rem; }
.dr-roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dr-roster div { position: relative; min-width: 0; }
.dr-roster img, .dr-roster .rk-art { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 22%; border-radius: 12px; border: 3px solid var(--outline); display: block; background: #efe3cc; font-size: 1.4rem; }
.dr-roster .dim img, .dr-roster .dim .rk-art { opacity: 0.45; }
.dr-roster .hit img, .dr-roster .hit .rk-art { border-color: var(--lime); }
.dr-roster .hit::after { content: '✔'; position: absolute; right: -4px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--ink); font-weight: 900; font-size: 0.8rem; display: grid; place-items: center; border: 2px solid var(--outline); }
.dr-roster small { display: block; text-align: center; font-size: 0.68rem; color: var(--muted); font-weight: 800; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-team .btn { width: 100%; }
/* En la pantalla grande */
.stage-draft { width: min(100%, 46rem); display: grid; gap: 1rem; text-align: left; }
.stage-draft.wide { width: min(100%, 76rem); }
.stage-draft .stage-note { text-align: center; margin: 0; }
.stage-draft .dr-lot img, .stage-draft .dr-lot .rk-art { width: 11rem; height: 11rem; }
.stage-draft .dr-lot b { font-size: 2.4rem; }
.stage-draft .dr-wallet b { font-size: 2rem; }
.stage-draft .dr-slots span { max-width: 3rem; }
.stage-draft .dr-goal b { font-size: 2.2rem; }
.stage-teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) {
  .stage-teams { grid-template-columns: minmax(0, 1fr); }
}
/* En la demostración */
.phone .dr-lot { padding: 8px; gap: 8px; border-radius: 16px; }
.phone .dr-lot img, .phone .dr-lot .rk-art { width: 64px; height: 64px; border-radius: 10px; }
.phone .dr-lot b { font-size: 1rem; }
.phone .dr-wallet { padding: 6px 8px; border-radius: 12px; }
.phone .dr-wallet b { font-size: 1.1rem; }
.phone .dr-amount { font-size: 2rem; }
.phone .dr-bid { padding: 8px; border-radius: 16px; gap: 4px; }
.phone .dr-goal { padding: 10px; border-radius: 16px; }
.phone .dr-goal b { font-size: 1.05rem; }
.phone .dr-team { padding: 8px; border-radius: 14px; }
.phone .dr-roster { gap: 3px; }
.phone .dr-roster small { display: none; }

/* ---------- La butaca: el público con teléfono (screens/audience.js) ---------- */
.butaca { min-height: 100vh; min-height: 100dvh; max-width: 520px; margin: 0 auto; padding: 14px 14px 28px; display: flex; flex-direction: column; gap: 12px; }
.bt-top { display: flex; align-items: center; gap: 8px; }
.bt-role { margin-left: auto; background: var(--surface-2); border: 2px dashed var(--surface-3); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 0.85rem; white-space: nowrap; }
.bt-top .x { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 1.2rem; padding: 6px 8px; border-radius: 10px; }
.bt-now { background: var(--surface); border: 3px solid var(--outline); border-radius: 22px; padding: 14px; box-shadow: 0 6px 0 var(--drop); display: grid; gap: 10px; }
.bt-now .spread { gap: 8px; }
.bt-clock { font-family: var(--marquee); background: var(--sun); color: var(--ink); border: 3px solid var(--outline); border-radius: 999px; padding: 3px 12px; box-shadow: 0 4px 0 var(--sun-d); white-space: nowrap; }
.bt-who { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.bt-who .av { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 1.5rem; border: 3px solid var(--outline); }
.bt-scores { display: grid; gap: 6px; }
.bt-score { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-weight: 800; }
.bt-score .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-score .bar { grid-column: 1 / -1; display: block; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bt-score .bar i { display: block; height: 100%; border-radius: 99px; background: var(--sky); transition: width 0.4s; }
.bt-h { font-family: var(--display); font-size: 1.25rem; margin: 4px 0 0; }
.bt-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bt-pad button {
  aspect-ratio: 1; min-width: 0; border-radius: 22px; border: 3px solid var(--outline); background: var(--surface-2); box-shadow: 0 6px 0 var(--drop);
  display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--text); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s;
}
.bt-pad button .em { font-size: 2.6rem; line-height: 1; }
.bt-pad button small { font-size: 0.74rem; font-weight: 800; color: var(--muted); }
.bt-pad button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--drop); }
.bt-pick { background: var(--surface); border: 3px solid var(--sky); border-radius: 22px; padding: 14px; display: grid; gap: 8px; text-align: center; }
.bt-pick .seg { justify-content: center; }
.bt-pick .seg button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-pick .seg button .n { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(12, 8, 34, 0.35); font-size: 0.8rem; }
.bt-crowd { margin: 0; text-align: center; color: var(--faint); font-weight: 700; font-size: 0.85rem; }
.bt-arlek { align-self: center; }
.bt-join { margin: 0; text-align: center; color: var(--muted); font-size: 0.92rem; }
.h3-watch { justify-self: center; }
.stage-crowd { font-family: var(--body); font-size: 0.9rem; font-weight: 800; color: var(--muted); margin-left: 0.8em; vertical-align: middle; white-space: nowrap; }

/* ---------- La pantalla grande de un evento y el comentarista (screens/stage.js) ---------- */
/* La pantalla se lee a varios metros: todo crece con el ancho. El comentarista la ve en su teléfono. */
html[data-watch='screen'] { font-size: clamp(16px, 1.3vw, 34px); }
/* (el atributo existe vacío en las pestañas de jugador: hay que nombrar los dos valores) */
html[data-watch='screen'] #app, html[data-watch='caster'] #app { max-width: none; width: 100%; padding: 0; }
.big-screen { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; gap: 1rem; padding: 1.2rem 2rem 2rem; }
.stage-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.5rem; padding: 0.6rem 1.2rem; border-radius: 1.2rem; background: rgba(11, 8, 32, 0.88); border: 3px solid var(--outline); }
.stage-brand { font-family: var(--display); font-size: 1.6rem; color: var(--sun); }
.stage-mode { font-family: var(--body); font-size: 0.9rem; font-weight: 800; color: var(--text); background: var(--surface-2); border-radius: 99px; padding: 0.25em 0.9em; margin-left: 0.6em; vertical-align: middle; }
.stage-howto { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; }
.stage-howto .stage-qr { width: 5.4rem; border-radius: 0.5rem; padding: 0.2rem; }
.stage-howto > div { display: grid; line-height: 1.15; }
.stage-code-sm { font-family: var(--display); font-size: 1.8rem; color: var(--sun); letter-spacing: 0.12em; }
.stage-tools { display: flex; gap: 0.4rem; margin-left: 1rem; opacity: 0.45; }
.stage-tools:hover, .stage-tools:focus-within { opacity: 1; }
.stage-brand + .stage-tools { margin-left: auto; }
.stage-main { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.5rem; align-items: start; }
.stage-center { display: grid; justify-items: center; align-content: start; gap: 1.1rem; text-align: center; padding-top: 1rem; }
.stage-side { display: grid; gap: 1rem; }
.stage-card, .stage-private { background: var(--surface); border: 3px solid var(--outline); border-radius: 1.2rem; padding: 1rem 1.2rem; }
.stage-card h3, .stage-private h3 { margin-bottom: 0.6rem; }
.stage-private { border-color: var(--sun); display: grid; gap: 0.6rem; }
.stage-qr { width: 15rem; background: #fff; border-radius: 1rem; padding: 0.4rem; line-height: 0; }
.stage-qr svg { width: 100%; height: auto; display: block; }
.stage-join { display: flex; align-items: center; gap: 2.5rem; text-align: left; }
.stage-kicker { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; margin: 0; }
.stage-url { font-family: var(--display); font-size: 2.4rem; margin: 0 0 0.6rem; }
.stage-code { font-family: var(--display); font-size: 6rem; line-height: 1; color: var(--sun); letter-spacing: 0.14em; margin: 0; text-shadow: 0 0.07em 0 var(--outline); }
.stage-h { font-family: var(--display); font-size: 2.6rem; line-height: 1.1; margin: 0; }
.stage-note { font-size: 1.3rem; font-weight: 700; color: var(--muted); margin: 0; }
.stage-big { font-family: var(--display); font-size: 3rem; color: var(--sun); margin: 0; }
.stage-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.stage-player { display: grid; justify-items: center; gap: 0.2rem; font-size: 1.1rem; }
.stage-player.off { opacity: 0.4; }
.stage-now { display: flex; align-items: center; gap: 2.2rem; text-align: left; }
.big-screen .timer { width: 11rem; height: 11rem; flex: none; }
.big-screen .timer .num { font-size: 3rem; }
.stage-clock { font-family: var(--display); color: var(--sun); white-space: nowrap; }
.stage-count { display: flex; gap: 2.5rem; font-family: var(--display); font-size: 3.4rem; }
.stage-count .ok, .stage-tally .si, .stage-log b.si { color: var(--lime); }
.stage-count .no, .stage-tally .no, .stage-log b.no { color: var(--coral); }
.stage-question { display: grid; justify-items: center; gap: 0.4rem; }
.stage-q { font-size: 2.2rem; font-weight: 900; margin: 0; max-width: 26ch; }
.stage-tally { display: flex; gap: 1.8rem; font-family: var(--display); font-size: 2.4rem; }
.stage-guesses { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; font-size: 1.2rem; }
.stage-guesses span { background: var(--surface-2); color: var(--coral); border-radius: 99px; padding: 0.2em 0.8em; font-weight: 800; }
.stage-effect { font-family: var(--display); font-size: 1.6rem; background: var(--coral); color: var(--text); border-radius: 99px; padding: 0.2em 1em; }
.stage-hints { font-size: 1.4rem; }
.stage-results { width: min(100%, 36rem); display: grid; gap: 0.4rem; text-align: left; font-size: 1.2rem; }
.stage-log { display: grid; gap: 0.4rem; font-size: 1.4rem; text-align: left; }
.stage-clues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; width: 100%; }
.stage-clue { display: flex; justify-content: space-between; gap: 1rem; background: var(--surface); border-radius: 1rem; padding: 0.6rem 1rem; font-size: 1.3rem; }
.stage-clue b { color: var(--sun); }
.stage-duel { display: flex; align-items: center; gap: 2.5rem; }
.stage-duelist { display: grid; justify-items: center; gap: 0.2rem; font-size: 1.5rem; padding: 1rem 1.4rem; border: 4px solid transparent; border-radius: 1.2rem; }
.stage-duelist.on { border-color: var(--sun); background: var(--surface); }
.stage-vs { font-family: var(--display); font-size: 3rem; color: var(--coral); }
.stage-wins { color: var(--sun); font-size: 1.6rem; }
.stage-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.stage-ranking { list-style: none; padding: 0; margin: 0; width: min(100%, 34rem); display: grid; gap: 0.4rem; font-size: 1.5rem; }
.stage-ranking li { display: flex; gap: 1rem; background: var(--surface); border-radius: 1rem; padding: 0.5rem 1rem; text-align: left; }
.stage-ranking li.first { background: var(--sun); color: var(--ink); }
.stage-ranking .pts { margin-left: auto; font-family: var(--display); }
.stage-votes { display: grid; gap: 0.5rem; width: min(100%, 40rem); }
.stage-vote { position: relative; display: flex; align-items: center; gap: 0.8rem; background: var(--surface); border-radius: 1rem; padding: 0.6rem 1rem; font-size: 1.3rem; overflow: hidden; text-align: left; }
.stage-vote > * { position: relative; }
.stage-vote .bar { position: absolute; inset: 0 auto 0 0; background: rgba(255, 204, 61, 0.25); transition: width 0.3s; }
.stage-vote .n { margin-left: auto; font-family: var(--display); }
.stage-chars { display: grid; gap: 0.3rem; }
.stage-chars > div { display: flex; justify-content: space-between; gap: 1rem; }
.stage-secret { font-weight: 900; color: var(--coral); margin: 0; }
.stage-feed .feed-list { max-height: 15rem; overflow: hidden; }
.stage-entry .row { flex-wrap: nowrap; }
.stage-entry .row input { flex: 1; min-width: 0; text-transform: uppercase; }
.watch-card, .streamer-card { margin-top: 12px; }
.watch-card summary, .streamer-card summary { cursor: pointer; }
.watch-card[open] summary, .streamer-card[open] summary { margin-bottom: 8px; }
.watch-link { font-family: var(--display); color: var(--sun); word-break: break-all; margin: 6px 0; }
@media (max-width: 900px) {
  .big-screen { padding: 0.8rem; }
  .stage-top { flex-wrap: wrap; gap: 0.6rem; }
  .stage-main { grid-template-columns: minmax(0, 1fr); }
  .stage-join { flex-direction: column; gap: 1rem; text-align: center; }
  .stage-qr { width: 11rem; }
  .stage-code { font-size: 3.6rem; }
  .stage-h { font-size: 1.8rem; }
  .stage-now { flex-direction: column; gap: 1rem; text-align: center; }
  .big-screen.caster .stage-side { order: -1; }
  /* El comentarista ya está dentro: el QR le sobra en el teléfono */
  .big-screen.caster .stage-howto { display: none; }
}

/* ---------- Modo streamer y sala con aprobación (ui/streamer.js, screens/waiting.js) ---------- */
.pending-card { border-color: var(--sun); display: grid; gap: 8px; }
.pending-float { position: fixed; top: 70px; left: 50%; translate: -50% 0; width: min(420px, calc(100vw - 24px)); z-index: 30; box-shadow: 0 10px 0 rgba(12, 8, 34, 0.5); max-height: 50vh; overflow: auto; }
.pending-row { display: flex; align-items: center; gap: 8px; }
.streamer-card .setting { padding: 8px 0; }
.waiting-room { display: grid; justify-items: center; gap: 12px; text-align: center; padding-top: 40px; }
/* La pantalla como fuente de OBS: sin fondo, para ponerla encima del directo */
html[data-obs='si'], html[data-obs='si'] body { background: transparent !important; }
html[data-obs='si'] .stage-bg { display: none; }
.big-screen.obs .stage-top { background: rgba(11, 8, 32, 0.7); }
.big-screen.obs .stage-center, .big-screen.obs .stage-card { background: rgba(11, 8, 32, 0.78); border-radius: 1.2rem; }
.big-screen.obs .stage-center { padding: 1.2rem; }

/* ---------- El chat de Twitch en la sala (ui/twitch.js) ---------- */
.twitch-panel { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--surface-3); }
.twitch-connect { flex-wrap: nowrap; }
.twitch-connect input { flex: 1; min-width: 0; }
.twitch-list { display: grid; gap: 6px; }
.twitch-row { display: flex; align-items: center; gap: 6px; }
.twitch-votes { display: grid; gap: 8px; border-color: var(--violet, #9146ff); }
.twitch-tally { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tag-chat { font-size: 0.75rem; font-weight: 800; color: var(--sky); white-space: nowrap; }
.stage-vote-n, .vote-n { position: relative; font-family: var(--display); color: var(--sun); }

/* ---------- La temporada (ui/season.js) y las novedades (ui/news.js) ---------- */
/* El color lo pone la temporada en curso: --season y --season-ink llegan desde syncSeason */
.season-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  width: min(480px, 100%); margin: 14px auto 0; padding: 12px 14px;
  border-radius: var(--radius); border: 3px solid var(--season, var(--sun));
  background: color-mix(in srgb, var(--season, var(--sun)) 16%, var(--surface));
  text-align: left;
}
.season-card .grow { display: grid; gap: 2px; min-width: 150px; }
.season-card b { font-family: var(--display); font-size: 1.15rem; line-height: 1.1; }
.season-em { font-size: 2rem; line-height: 1; }
.season-kind { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--season, var(--sun)); }
.season-event { font-size: 0.8rem; font-weight: 700; }
.season-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.season-play { background: var(--season, var(--sun)); color: var(--season-ink, #1f1a33); border-color: var(--season-ink, #1f1a33); }
.season-card.is-teaser { border-style: dashed; }
.season-modal h2 { color: var(--season, var(--sun)); }
.season-prize { color: var(--sun); font-weight: 800; }
.season-reward { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 2px dashed var(--season, var(--sun)); }
.season-reward.done { border-style: solid; background: color-mix(in srgb, var(--season, var(--sun)) 18%, transparent); }
.chip-new {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  background: var(--season, var(--sun)); color: var(--season-ink, #1f1a33);
}
.news-chip {
  display: flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 6px 14px; border-radius: 999px;
  border: 2px solid var(--surface-3); background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.news-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* ---------- El torneo: la tarjeta de la sala y el cuadro (screens/bracket.js) ---------- */
.tournament-card { display: grid; gap: 8px; }
.tournament-card[open] summary { margin-bottom: 4px; }
.bracket-screen { width: min(1100px, 100%); margin: 0 auto; }
.bk-next { display: grid; gap: 8px; justify-items: center; text-align: center; border: 3px solid var(--sky); }
.bk-next.mine { border-color: var(--sun); }
.bk-next-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sun); }
.bk-versus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; font-family: var(--display); font-size: 1.4rem; }
.bk-versus span { font-size: 0.9rem; color: var(--faint, #b9b0e6); font-family: var(--body); }
/* El cuadro se desplaza de lado si no cabe: con 16 jugadores y repesca son muchas columnas */
.bk-board { display: grid; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.bk-side h3 { font-size: 1rem; color: var(--sun); margin-bottom: 6px; }
.bk-cols { display: flex; gap: 12px; align-items: stretch; }
.bk-col { display: flex; flex-direction: column; gap: 6px; min-width: 150px; flex: 1 0 150px; }
/* Los combates de cada ronda se reparten a lo alto: cada uno queda entre los dos de los que viene */
.bk-boxes { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; flex: 1; }
.bk-round { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.bk-match { display: grid; border-radius: 12px; border: 2px solid var(--surface-3); background: var(--surface); overflow: hidden; }
.bk-match.now { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(255, 204, 61, 0.25); }
.bk-match.bye { opacity: 0.6; }
.bk-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 9px; font-size: 0.9rem; font-weight: 700; min-height: 30px; }
.bk-row + .bk-row { border-top: 1px solid var(--surface-3); }
.bk-row.won { background: color-mix(in srgb, var(--lime, #7ee04a) 22%, transparent); }
.bk-row.lost { opacity: 0.5; text-decoration: line-through; }
.bk-row.me .bk-name { color: var(--sun); }
.bk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-score { font-family: var(--display); }
.bk-champion { display: grid; gap: 6px; justify-items: center; text-align: center; border: 3px solid var(--sun); }
.bk-champion h2 { font-size: 2rem; }
.bk-podium { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-weight: 700; }
.bk-prize { color: var(--sun); font-weight: 800; margin: 0; }
/* El pronóstico de quien mira el combate que toca (monedas de torneo) */
.bk-pick { display: grid; gap: 8px; justify-items: center; width: 100%; margin-top: 4px; padding-top: 12px; border-top: 2px dashed var(--surface-3); }
.bk-pick .seg { justify-content: center; width: 100%; }
.bk-pick .seg button { flex: 1 1 130px; max-width: 240px; }
.bk-pick .seg button .n { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgba(12, 8, 34, 0.35); font-size: 0.8rem; }
.bk-medals { color: var(--sun); font-weight: 800; margin: 0; }
.medals-hint { margin: 0; }
.stage-bracket { display: grid; gap: 16px; width: 100%; }

/* ---------- Los gestos (ui/gestures.js) y la revancha ---------- */
.gesture-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gesture-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--surface-3); background: var(--surface-2);
  font-size: 1.3rem; line-height: 1; cursor: pointer; transition: transform 0.12s;
}
.gesture-btn:active { transform: scale(0.88); }
#gesture-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.gesture-pop { position: absolute; bottom: 12%; display: grid; justify-items: center; gap: 2px; animation: gesture-rise 2.4s ease-out forwards; }
.gesture-who {
  padding: 2px 9px; border-radius: 999px; background: rgba(11, 8, 32, 0.85); color: #fff; font-size: 0.78rem; font-weight: 800; white-space: nowrap;
}
@keyframes gesture-rise {
  0% { transform: translateY(40px) scale(0.6); opacity: 0; }
  12% { transform: translateY(0) scale(1.05); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(-46vh) scale(1); opacity: 0; }
}
html.reduce-motion .gesture-pop { animation: gesture-fade 2.4s linear forwards; }
@keyframes gesture-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Los gestos del público (server/game/audience.js): llegan juntos y sin nombre */
.crowd-emoji { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 3px 0 rgba(11, 8, 32, 0.5)); }
html[data-watch='screen'] .crowd-emoji { font-size: 3.4rem; }
.btn-rematch { margin-bottom: 8px; }
.btn-rematch .sub { display: block; font-size: 0.78rem; font-weight: 600; opacity: 0.85; }

/* ---------- Jugadores recientes e invitaciones (ui/recents.js) ---------- */
.recents-card { display: grid; gap: 8px; }
.recents-list { display: grid; gap: 6px; }
.recents-row { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.invite-float {
  position: fixed; top: 70px; left: 50%; translate: -50% 0; width: min(420px, calc(100vw - 24px)); z-index: 30;
  display: grid; gap: 8px; border: 3px solid var(--sky); box-shadow: 0 10px 0 rgba(12, 8, 34, 0.5);
}
.invite-float p { margin: 0; }

/* ---------- Anuncios (core/ads.js): el botón de la recompensa y el recuadro de prueba ---------- */
.ad-reward { justify-self: start; }
.ad-reward .sub { display: block; font-size: 0.74rem; font-weight: 600; opacity: 0.85; }
.ad-test { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(5, 3, 16, 0.92); }
.ad-test-box {
  display: grid; gap: 8px; justify-items: center; padding: 34px 44px; border-radius: 18px;
  border: 3px dashed var(--sun); color: #fff; font-family: var(--display); font-size: 1.3rem; text-align: center;
}
.ad-test-box span { font-family: var(--body); font-size: 0.9rem; opacity: 0.8; }

/* ---------- Qué temas ganaron la votación (screens/voting.js) ---------- */
.vr { display: grid; gap: 14px; justify-items: center; text-align: center; padding-top: 10px; }
.vr-winners, .vr-out { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vr-topic {
  display: grid; justify-items: center; gap: 2px; padding: 12px 16px; border-radius: 18px; min-width: 120px;
  background: var(--surface-2); border: 3px solid var(--sun); box-shadow: 0 5px 0 rgba(12, 8, 34, 0.5);
}
.vr-topic .em { font-size: 2.2rem; line-height: 1; }
.vr-topic b { font-family: var(--display); font-size: 1.1rem; }
.vr-n { font-size: 0.8rem; font-weight: 800; color: var(--sun); }
.vr-out-label { margin: 6px 0 -6px; }
.vr-out .vr-topic { border-color: var(--surface-3); box-shadow: none; opacity: 0.55; padding: 6px 12px; min-width: 0; grid-auto-flow: column; align-items: center; gap: 6px; }
.vr-out .vr-topic .em { font-size: 1.1rem; }
.vr-out .vr-topic b { font-size: 0.85rem; }
.vr-out .vr-n { color: var(--faint); }
.big-screen .vr-topic { min-width: 200px; padding: 20px 26px; }
.big-screen .vr-topic .em { font-size: 4rem; }
.big-screen .vr-topic b { font-size: 1.8rem; }

/* ---------- La portada para buscadores y sin JavaScript (server/home-page.js) ---------- */
.h3-guides { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 22px auto 6px; font-size: 0.85rem; color: var(--faint); }
.h3-guides a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.h3-guides a:hover, .h3-guides a:focus-visible { color: var(--text); }
.no-js { max-width: 640px; margin: 40px auto; padding: 0 20px; color: var(--text); line-height: 1.5; }
.no-js a { color: var(--sky); }