/* ============================================================
   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; } }
.marquee-hat {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%) rotate(-8deg);
  font-size: 2.6rem; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35));
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateX(-50%) rotate(8deg) translateY(-4px); } }
.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; }
.hero-stats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hero-stats span { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; color: var(--muted); }
.hero-stats b { color: var(--sun); font-family: var(--display); }

.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); }
.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; }

.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.25s linear, 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 { display: none; }
.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; }

.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* ---------- 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; }
@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); }

.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-cta {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 2px dashed var(--surface-3); border-radius: 16px; padding: 10px 14px; color: var(--text);
}
.local-cta .go { margin-left: auto; color: var(--sun); font-weight: 900; }
.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; }
.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); } }

/* ---------- Portada: tutorial y demostraciones ---------- */
.first-time {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 16px; border-radius: 18px; border: 2px solid var(--sun); color: var(--text);
  background: linear-gradient(90deg, rgba(255, 204, 61, 0.18), rgba(255, 61, 90, 0.12)); font-size: 1rem;
  animation: glow 2.2s ease-in-out infinite; --d: transparent;
}
.first-time .em { font-size: 1.8rem; }
.first-time span:nth-child(2) { flex: 1; }
.first-time .go { font-family: var(--marquee); color: var(--sun); }
.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 { overflow: hidden; }
.demo .demo-modes { margin: 10px 0 8px; }
.demo-stage { margin-top: 12px; }
.demo-phones { display: flex; justify-content: center; gap: 18px; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.phone {
  position: relative; width: 158px; height: 304px; 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: 0.43; pointer-events: none; display: flex; flex-direction: column; gap: 10px; }
@supports not (zoom: 1) {
  .phone-zoom { transform: scale(0.43); 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-caption { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; min-height: 3em; text-align: left; font-weight: 700; animation: slideUp 0.35s ease-out; }
.demo-num { flex-shrink: 0; 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.9rem; }
.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; }
  .phone { width: 150px; height: 290px; }
  .phone-zoom { zoom: 0.405; }
  .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; }
/* 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; }
.marquee-stage { position: relative; display: inline-block; max-width: 100%; }
.marquee-mascot { position: absolute; left: 50%; top: -118px; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.marquee-stage .marquee { z-index: 1; }
.marquee-hat { display: none; }
.loader-mascot { display: flex; justify-content: center; margin-top: 40px; }
.first-mascot, .offer-mascot { flex-shrink: 0; display: grid; place-items: center; }
.first-mascot .mascot { margin-top: -8px; }
.demo-host { flex-shrink: 0; margin: -10px -4px -6px 0; }
.demo-caption { justify-content: flex-start; }

.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; }
/* 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); }
.vote-grid { 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; }
}

/* ---------- 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 > *, .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), .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), .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), .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), .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; }