:root {
  color-scheme: dark;
  /* PALETA: para cambiar el aspecto, editá solamente estos valores. */
  --bg: #090b10;
  --surface: #11151d;
  --surface-raised: #191f2a;
  --control-bg: #0d1118;
  --line: #2a3240;
  --ink: #f3f5f7;
  --muted: #929baa;
  --placeholder: #778190;
  --accent: #3478f6;
  --accent-strong: #68a5ff;
  --accent-soft: #172b49;
  --on-accent: #07111f;
  --success: #83e6b2;
  --danger: #ff7c91;
  --focus-ring: #a7ceff;
  --shadow: 0 18px 52px rgb(0 0 0 / 34%);
  --qr-bg: #ffffff;
  --accent-pink: #8fc5ff;
  --accent-blue: #9bbcff;
  --surface-purple: #11151d;
  --surface-purple-raised: #191f2a;
  --tab-current: #172b49;
  --tab-current-text: #f3f5f7;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --radius-card: 14px;
  --radius-control: 10px;
  --touch-target: 48px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.container {
  width: min(1100px, 92vw);
  min-height: 100vh;
  margin: auto;
  display: grid;
  place-items: center;
  padding: 2rem 0;
}
.container.narrow { width: min(700px, 92vw); }
.guest-entry { max-width: 520px; }
.guest-entry h1 { font-size: clamp(2rem, 8vw, 3rem); }
.guest-entry-intro { margin: 0 0 1.5rem; color: var(--muted); }
.guest-entry-form { display: grid; grid-template-columns: 1fr; justify-content: stretch; gap: .65rem; text-align: left; }
.guest-entry-form label { font-weight: 700; }
.guest-entry-form input, .guest-entry-form button { width: 100%; min-height: var(--touch-target); }
.guest-entry-form small { color: var(--muted); }
.guest-entry-form button { margin-top: .4rem; }
.card {
  width: 100%;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.hero { text-align: center; }
.eyebrow, .label {
  margin: 0 0 .6rem;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; }
h2 { margin: 1.75rem 0 .75rem; }
.lead { max-width: 48ch; margin: 0 auto 2rem; color: var(--muted); font-size: 1.05rem; }
.actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.join-form { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; width: 100%; }
input, select {
  min-width: 180px;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--ink);
  font: inherit;
}
textarea {
  width: 100%;
  min-height: 8rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
summary { cursor: pointer; font-weight: 700; }
input::placeholder { color: var(--placeholder); }
button, a {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
button { padding: .85rem 1.15rem; }
.primary-action { padding: .85rem 1.15rem; border-color: var(--accent); color: var(--accent); }
button:hover, a:hover { border-color: var(--accent); background: var(--accent-soft); }
button:disabled { cursor: not-allowed; opacity: .5; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.error { margin-top: 1rem; color: var(--danger); font-weight: 650; }
.subtle, .empty { color: var(--muted); }
.help-text { margin: -.4rem 0 .25rem; color: var(--muted); font-size: .9rem; }
.pill {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .9rem;
}
.game-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.game-form select { width: 100%; }
.game-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--accent-strong); border-radius: 12px; background: var(--accent-soft); }
.game-shortcut p { margin: .25rem 0 0; }
@media (max-width: 640px) { .game-shortcut { align-items: stretch; flex-direction: column; } }
.leaderboard { display: grid; gap: .6rem; padding-left: 1.5rem; }
.leaderboard li::marker { color: var(--accent); font-weight: 700; }
.leaderboard.big { font-size: clamp(1.1rem, 2vw, 1.5rem); }
.row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.links a { display: inline-block; padding: .7rem .9rem; }
.invite { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.invite .label { margin-bottom: .25rem; }
.invite .subtle { margin: 0 0 .5rem; }
.invite-url { color: var(--ink); overflow-wrap: anywhere; }
.invite img { width: 148px; height: 148px; padding: .4rem; border-radius: 8px; background: var(--qr-bg); }
.player-list { display: grid; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.bingo-player { max-width: 900px; margin: 1rem auto; padding: clamp(1rem, 3vw, 2rem); border: 4px solid #c8323e; border-radius: 16px; background: #fff3c4; color: #14264b; box-shadow: 0 8px 0 #92202a, 0 12px 24px rgb(0 0 0 / 25%); }
.bingo-header { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border-radius: 10px; background: #c8323e; color: #fff; }
.bingo-header span { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 900; letter-spacing: .16em; }
.bingo-header h2 { margin: 0; font-size: clamp(1.1rem, 3vw, 1.8rem); }
.bingo-call { margin: 1rem 0 .25rem; color: #173d77; font-size: clamp(1.1rem, 3vw, 1.6rem); font-weight: 800; text-align: center; }
.bingo-message, .bingo-result { min-height: 1.5em; color: #8d202a; font-weight: 750; text-align: center; }
.bingo-ticket { width: min(100%, 820px); margin: 1.25rem auto; padding: clamp(.6rem, 2vw, 1.25rem); border: 5px solid #1b4c90; border-radius: 12px; background: #fffdf2; box-shadow: inset 0 0 0 3px #e7bf47; }
.bingo-ticket-heading { margin: 0 0 .6rem; color: #c8323e; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 900; letter-spacing: .22em; text-align: center; }
.bingo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border: 4px solid #1b4c90; background: #1b4c90; }
#bingo-card .bingo-cell { display: grid; place-items: center; min-width: 0; min-height: clamp(7rem, 22vw, 12rem); padding: .65rem; overflow-wrap: anywhere; border: 2px solid #e4c459; border-radius: 0; background: #fffdf4; color: #14264b; font-size: clamp(.95rem, 2.2vw, 1.35rem); font-weight: 800; line-height: 1.2; text-align: center; }
#bingo-card .bingo-cell[aria-pressed="true"] { border-color: #a8212d; background: #ffd953; color: #8d202a; box-shadow: inset 0 0 0 4px #fff1a8; }
.bingo-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.bingo-actions button { min-width: 10rem; border: 2px solid #a8212d; background: #c8323e; color: #fff; font-weight: 850; }
.bingo-actions button:last-child { border-color: #b18b17; background: #f3c934; color: #17274a; }
.bingo-actions button:disabled { opacity: .55; }
.tv-panel#bingo-tv { border: 4px solid #c8323e; border-radius: 16px; background: #fff3c4; color: #14264b; box-shadow: 0 8px 0 #92202a, 0 12px 24px rgb(0 0 0 / 25%); }
.tv-panel#bingo-tv #bingo-result.bingo-countdown { margin: 1.25rem 0; color: #c8323e; font-size: clamp(3rem, 9vw, 7rem); font-weight: 900; line-height: 1; text-align: center; }
.admin-game-alert { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--danger); border-radius: 9px; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--ink); }
.admin-game-alert span { flex: 1 1 14rem; }
.admin-game-alert form { margin: 0; }
.admin-game-alert button { border-color: var(--danger); background: var(--danger); color: #1a0b0b; }
.store-link { display: inline-block; margin-top: .5rem; padding: .7rem 1rem; border-color: var(--accent-strong); background: var(--accent-soft); }
.dance-camera-wrap { position: relative; width: min(100%, 44rem); aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #090d12; }
.dance-camera-wrap video, .dance-camera-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dance-camera-wrap canvas { pointer-events: none; }
.dance-stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .8fr); align-items: start; gap: 1rem; margin: 1rem 0; }
.dance-score-panel { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.dance-score-panel > strong { display: block; margin-bottom: .5rem; color: var(--accent); font-size: 1.3rem; }
.dance-score-panel #dance-live-score { font-size: 1.1rem; font-weight: 700; }
@media (max-width: 760px) { .dance-stage { grid-template-columns: 1fr; } }
.dance-tv #dance-tv-player { font-size: clamp(2rem, 7vw, 5rem); }
.dance-tv #dance-tv-results { font-size: clamp(1.2rem, 3vw, 2rem); }
.dance-control { max-width: 54rem; }
.dance-settings { display: grid; gap: .65rem; }
.dance-settings form { display: grid; gap: .65rem; }
.dance-tv-playlist { margin: 1rem auto; max-width: 70rem; }
.dance-tv-playlist iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #090d12; }
.karaoke-video-wrap { width: min(100%, 70rem); margin: 1rem auto; }
.karaoke-video-wrap iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #090d12; }
.karaoke-video-wrap p { font-size: clamp(.9rem, 1.6vw, 1.2rem); }
.dance-tv-playlist p { font-size: clamp(1.2rem, 3vw, 2rem); }
.statues-settings { display: grid; gap: .65rem; }
.statues-settings form { display: grid; gap: .65rem; }
.statues-stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .8fr); align-items: start; gap: 1rem; margin: 1rem 0; }
.statues-countdown { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; gap: .25rem; background: rgb(7 9 14 / 92%); color: var(--ink); text-align: center; }
.statues-countdown[hidden] { display: none; }
.statues-countdown span { color: var(--muted); font-size: clamp(1rem, 3vw, 1.6rem); }
.statues-countdown strong { color: var(--accent); font-size: clamp(8rem, 28vw, 20rem); line-height: .95; font-variant-numeric: tabular-nums; }
.statues-movers { display: grid; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.statues-movers > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.statues-movers label { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem; border: 1px solid var(--line); border-radius: 9px; }
.statues-evidence { margin: 1rem 0; }
.statues-evidence figcaption { margin-bottom: .5rem; color: var(--muted); font-size: .9rem; }
.statues-evidence img { display: block; width: 100%; max-height: 55vh; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #080b10; }
.statues-evidence video { display: block; width: 100%; max-height: 55vh; border: 1px solid var(--line); border-radius: 12px; background: #080b10; }
.statues-tv-evidence-wrap img { max-height: 58vh; }
.camera-settings-page > div { margin: 1.25rem 0; }
.camera-game-card { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.camera-game-card > h3 { margin: 0; color: var(--accent); }
.camera-game-card > p { margin: .4rem 0 1rem; }
.calibration-test { display: grid; gap: .55rem; margin-top: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.calibration-test h4, .calibration-test p { margin: 0; }
.calibration-test select { max-width: 18rem; }
.calibration-test progress { width: 100%; height: .8rem; accent-color: var(--accent); }
.camera-settings-page { --tab-current: var(--accent-strong); }
.camera-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.camera-page-heading h2, .camera-page-heading p { margin: 0; }
.camera-page-heading p { margin-top: .3rem; color: var(--muted); }
.camera-state-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9rem; white-space: nowrap; }
.camera-state-badge::before { width: .55rem; height: .55rem; flex: 0 0 .55rem; border-radius: 50%; background: var(--muted); content: ""; }
.camera-state-badge[data-state="success"]::before { background: var(--success); }
.camera-state-badge[data-state="info"]::before, .camera-state-badge[data-state="connecting"]::before { background: var(--accent); }
.camera-state-badge[data-state="error"]::before { background: var(--danger); }
.camera-game-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 1rem 0 1.25rem; }
.camera-game-option { display: flex; align-items: center; gap: .75rem; min-width: 0; min-height: 76px; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; text-decoration: none; }
.camera-game-option > span:nth-child(2) { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.camera-game-option small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.camera-game-option b { color: var(--muted); font-size: .72rem; font-weight: 600; }
.camera-game-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.camera-game-option[aria-pressed="true"] b { color: var(--accent); }
.camera-game-option:disabled { opacity: .55; cursor: not-allowed; }
.camera-game-symbol { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border: 1px solid var(--line); border-radius: 8px; color: var(--accent); font-size: 1.15rem; }
.camera-workspace { display: grid; gap: 1rem; max-width: 1080px; }
.camera-main-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, 1fr); gap: 1rem; align-items: stretch; }
.camera-section-heading { margin: 0; }
.camera-section-heading h3, .camera-section-heading p { margin: 0; }
.camera-section-heading p { margin-top: .25rem; color: var(--muted); font-size: .9rem; }
.camera-module-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.camera-module-heading h3 { margin: 0; }
.camera-module-heading > span { padding: .15rem .45rem; border-radius: 999px; background: var(--surface-raised); color: var(--muted); font-size: .72rem; }
.camera-calibration { display: grid; gap: .65rem; }
.camera-calibration h3 { margin: 0; }
.camera-calibration label { font-size: .86rem; font-weight: 650; }
.camera-calibration input[type="range"] { width: 100%; accent-color: var(--accent); }
.camera-calibration output { float: right; color: var(--accent); font-variant-numeric: tabular-nums; }
#statues-camera-preview-slot .dance-camera-wrap { width: 100%; max-width: none; aspect-ratio: 16 / 9; border-radius: 8px; }
#statues-diagnostics-slot .camera-metrics > p { margin: .7rem 0; padding-bottom: .55rem; border-bottom: 1px solid var(--line); color: var(--muted); }
#statues-diagnostics-slot #statues-phase-label { color: var(--accent); font-size: 1.1rem; font-weight: 750; }
.statues-settings { margin-top: 1rem; }
.statues-settings form { display: grid; gap: .65rem; }
.statues-settings > p { margin: 0; }
.camera-module { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.camera-module > h3 { margin: 0; font-size: 1.05rem; }
.camera-module > p { margin: .25rem 0 .85rem; color: var(--muted); font-size: .9rem; }
.camera-preview-module .dance-camera-wrap { width: 100%; max-width: none; aspect-ratio: 16 / 9; border-radius: 8px; }
.camera-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 1rem; color: var(--muted); text-align: center; }
.camera-placeholder svg { width: 2rem; height: 2rem; color: var(--accent); opacity: .8; }
.camera-placeholder strong { color: var(--ink); font-weight: 650; }
.camera-placeholder span { font-size: .85rem; }
.camera-video-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .65rem 0; color: var(--muted); font-size: .8rem; }
.camera-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.camera-actions > span { color: var(--muted); font-size: .82rem; }
.camera-diagnostics > p { color: var(--muted); font-size: .9rem; }
.diagnostic-list { display: grid; gap: .65rem; margin: .8rem 0; padding: 0; list-style: none; }
.diagnostic-list li { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.diagnostic-icon { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; color: var(--accent); font-size: 1rem; }
.diagnostic-list li > span:nth-child(2) { display: grid; min-width: 0; gap: .08rem; }
.diagnostic-list strong { font-size: .86rem; }
.diagnostic-list small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.diagnostic-list b { padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; font-weight: 600; white-space: nowrap; }
.diagnostic-list b[data-state="success"] { border-color: #315541; color: var(--success); }
.diagnostic-list b[data-state="info"] { color: var(--accent); }
.diagnostic-list b[data-state="warning"], .diagnostic-list b[data-state="error"] { border-color: #593638; color: var(--danger); }
.camera-controls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.camera-device-row { display: flex; align-items: center; gap: .55rem; }
.camera-device-row select { min-width: 0; flex: 1; }
.camera-device-row button { flex: 0 0 auto; }
.camera-settings-page .camera-module label { display: block; margin-top: .7rem; font-size: .88rem; font-weight: 650; }
.camera-settings-page .camera-module input[type="range"] { width: 100%; accent-color: var(--accent); }
.camera-settings-page .camera-module output { float: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.camera-note { margin: .45rem 0; color: var(--muted); font-size: .8rem; }
.camera-module progress { width: 100%; height: .7rem; accent-color: var(--accent); }
.camera-test-time { color: var(--accent) !important; font-size: 1.15rem !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.camera-turn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.camera-turn-controls h3 { flex-basis: 100%; }
.camera-turn-controls p { margin: 0; }
.camera-turn-controls #dance-admin-status { flex: 1 1 20rem; }
.camera-turn-controls #dance-live-results, .camera-turn-controls #dance-results, .camera-turn-controls #dance-final-actions { flex-basis: 100%; }
@media (max-width: 850px) { .camera-main-grid { grid-template-columns: 1fr; } .camera-controls-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .camera-page-heading { align-items: flex-start; flex-direction: column; } .camera-game-selector { grid-template-columns: 1fr; } .camera-game-option { min-height: 64px; } .camera-device-row { align-items: stretch; flex-direction: column; } .camera-actions { align-items: stretch; flex-direction: column; } }
.statues-tv iframe { width: min(100%, 70rem); aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #090d12; }
@media (max-width: 760px) { .statues-stage { grid-template-columns: 1fr; } }
.store-message { margin: 1rem 0; padding: .9rem; border: 1px solid var(--accent-strong); border-radius: 10px; background: var(--accent-soft); }
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; margin: 1.25rem 0; }
.store-card, .store-admin-item { display: grid; gap: .65rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.store-card h2 { margin: 0; font-size: 1.2rem; }
.store-card p { margin: 0; }
.store-price { color: var(--accent); font-size: 1.2rem; font-weight: 800; }
.store-form { max-width: 620px; }
.store-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.store-numbers label, .store-admin-item label { display: grid; gap: .35rem; }
.store-admin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.store-purchase { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.store-purchase form { margin: 0; }
.coin-adjust { display: flex; gap: .5rem; }
.coin-adjust input { min-width: 6rem; width: 7rem; }
.check-row { display: flex !important; align-items: center; gap: .5rem !important; }
.check-row input { min-width: 0; }
.store-balances { margin-top: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#bingo-player-frame { width: 100%; min-height: 200px; }
#bingo-audio { display: none; }
.player-list li, .status-box, .tv-panel {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}
.player-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .65rem; }
.player-row form { display: flex; align-items: center; gap: .35rem; margin: 0; }
.player-row input { width: 5rem; min-width: 5rem; min-height: var(--touch-target); padding: .5rem; }
.player-row button { padding: .55rem .7rem; }
.player-select, .player-select-all { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-target); min-height: var(--touch-target); cursor: pointer; }
.player-select input, .player-select-all input { width: 1.2rem; min-width: 1.2rem; min-height: 1.2rem; accent-color: var(--accent); }
.player-bulk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .75rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.player-bulk-tools form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.player-bulk-tools input[type=number] { width: 5rem; min-height: var(--touch-target); }
.player-bulk-tools button { min-height: var(--touch-target); }
.player-bulk-tools button.danger { border-color: var(--danger); background: var(--danger); color: #1a0b0b; }
.player-bulk-tools .help-text { flex-basis: 100%; margin: 0; }
.player-filters { display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(2, minmax(140px, 1fr)); gap: .55rem; align-items: center; margin: .75rem 0; }
.player-filters input, .player-filters select { min-width: 0; min-height: var(--touch-target); }
.player-summary { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; }
.player-info { display: grid; gap: .1rem; min-width: 0; }
.player-info strong { overflow-wrap: anywhere; }
.player-info small { color: var(--muted); }
.player-info .player-online { color: var(--success); }
.player-info .player-offline { color: var(--muted); }
.player-balance { display: grid; justify-items: end; white-space: nowrap; }
.player-balance strong { font-size: 1.15rem; }
.player-balance small { color: var(--muted); }
.player-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.player-quick-actions form { min-width: 0; }
.player-quick-actions button { width: 100%; min-height: var(--touch-target); }
.player-quick-actions .quick-add { border-color: var(--accent); color: var(--accent-strong); }
.player-quick-actions .quick-subtract { border-color: var(--danger); color: var(--danger); }
.player-more-actions { position: relative; }
.player-more-actions summary { display: grid; place-items: center; min-width: var(--touch-target); min-height: var(--touch-target); padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius-control); cursor: pointer; }
.player-more-actions form { margin-top: .45rem; flex-wrap: wrap; }
.player-more-actions input { min-width: 0; flex: 1; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-top: .75rem; }
.team-card { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.team-card h3, .team-card p { margin: 0 0 .45rem; }
.team-card h3 { color: var(--accent); }
.status-box p { margin: .25rem 0; }
.tv-body { background: var(--bg); }
.tv-screen { display: flex; min-height: 100vh; flex-direction: column; padding: clamp(1.25rem, 4vw, 3rem); }
.tv-header h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.tv-main { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; flex: 1; }
.tv-panel h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
.tv-panel#mimic-tv { grid-column: 1 / -1; display: flex; min-height: 65vh; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tv-panel#mimic-tv #mimic-progress { font-size: clamp(1.25rem, 2.8vw, 2.25rem); }
.tv-panel#mimic-tv #mimic-team, .tv-panel#mimic-tv #mimic-actor { margin: .3rem 0; font-size: clamp(1.6rem, 4vw, 3.5rem); }
.tv-panel#mimic-tv #mimic-timer { margin: .4rem 0; color: var(--accent); font-size: clamp(7rem, 24vw, 18rem); font-weight: 800; line-height: .9; font-variant-numeric: tabular-nums; }
.tv-panel#mimic-tv #mimic-timer:not(.mimic-no-limit)::after { display: block; margin-top: .65rem; color: var(--muted); content: "segundos"; font-size: clamp(1.2rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.1; }
.tv-panel#mimic-tv #mimic-timer.mimic-no-limit { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.1; }
.tv-panel#quiz-tv { grid-column: 1 / -1; min-height: 65vh; text-align: center; }
.tv-panel#quiz-tv #quiz-question { margin: 1rem auto; max-width: 1100px; font-size: clamp(2rem, 5vw, 4.5rem); }
.tv-panel#quiz-tv #quiz-timer { color: var(--accent); font-size: clamp(5rem, 18vw, 12rem); font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; }
.tv-panel#quiz-tv #quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; max-width: 1100px; margin: auto; text-align: left; }
.tv-panel#quiz-tv #quiz-options p { font-size: clamp(1.25rem, 3vw, 2.5rem); }
#quiz-answer-form { display: grid; gap: .75rem; }
#quiz-answer-form button { min-height: 3.5rem; text-align: left; }
.quiz-score-guide { padding: .9rem 1rem; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface); }
.quiz-editor-card, .quiz-question-card { display: grid; gap: .65rem; margin: .8rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.quiz-question-card > summary { cursor: pointer; font-weight: 700; }
.quiz-editor-card h4 { margin: 0; }
.quiz-grade-answer { display: flex; gap: .7rem; align-items: start; padding: .7rem; border: 1px solid var(--line); border-radius: 8px; }
.quiz-grade-answer input, .quiz-mobile-choice input { width: auto; margin-top: .2rem; }
.quiz-mobile-choice { display: flex; gap: .7rem; align-items: center; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; }
#quiz-answer-form fieldset { display: grid; gap: .6rem; border: 0; padding: 0; }
.tv-panel#quiz-tv #quiz-ranking { width: min(100%, 900px); margin: 1rem auto; text-align: left; font-size: clamp(1.2rem, 2.3vw, 2rem); }
.status { color: var(--muted); }

@media (max-width: 620px) {
  .join-form { flex-direction: column; }
  input, select, .join-form button { width: 100%; }
  .invite { align-items: flex-start; flex-direction: column; }
  .player-row { grid-template-columns: 1fr auto; }
  .player-row > span { grid-column: 1 / -1; }
  .tv-main { grid-template-columns: 1fr; }
  .tv-screen { min-height: auto; }
  #bingo-card .bingo-cell { min-height: 6.5rem; padding: .4rem; font-size: .88rem; }
  .bingo-actions { display: grid; grid-template-columns: 1fr; }
}

/* Juli Party Music: a focused TV player and a compact host playlist editor. */
.tv-navigation { display:flex; justify-content:flex-end; gap:.6rem; margin:.8rem 0; }
.tv-navigation button[aria-pressed="true"] { border-color:var(--accent); background:#2a203a; }
.tv-music-section:not([hidden]) { display:block; grid-column:1 / -1; min-height:0; }
.tv-music-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.tv-music-heading h2 { margin:.15rem 0; font-size:clamp(2rem,4vw,4rem); }
.tv-music-heading label { display:grid; gap:.3rem; color:var(--muted); }
.tv-music-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.8fr); gap:1rem; }
.tv-music-player, .tv-music-queue { min-width:0; padding:1rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
#tv-music-player { width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:10px; background:#050507; }
#tv-music-player iframe { width:100%; height:100%; border:0; }
#tv-music-current { margin:.8rem 0 .2rem; color:var(--ink); font-size:clamp(1.5rem,3vw,2.7rem); }
.tv-music-controls { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.tv-music-controls button { min-width:7rem; }
.tv-music-queue { max-height:min(56vh,620px); overflow:auto; margin:0; padding:.5rem; list-style:none; }
.tv-music-track { border-bottom:1px solid var(--line); }
.tv-music-track button { width:100%; min-height:3.4rem; padding:.7rem; border:0; background:transparent; color:var(--ink); text-align:left; }
.tv-music-track.is-current button { border-radius:9px; background:#25202d; color:var(--ink); font-weight:800; }
.tv-music-track.is-playing button { background:#38294d; color:var(--accent); }

.roulette-wheel-wrap { position:relative; width:min(78vw,22rem); aspect-ratio:1; margin:1.4rem auto; }
#roulette-wheel { display:block; width:100%; height:100%; border-radius:50%; border:3px solid var(--line); transition:transform 4s cubic-bezier(.12,.72,.08,1); }
.roulette-pointer { position:absolute; z-index:1; top:-.55rem; left:50%; transform:translateX(-50%); color:var(--accent); font-size:1.7rem; line-height:1; text-shadow:0 1px 6px #000; }
.roulette-check { display:flex; align-items:center; gap:.65rem; min-height:44px; margin:.6rem 0; }
.roulette-check input { width:1.1rem; height:1.1rem; accent-color:var(--accent); }
.roulette-tv-result:not([hidden]) { display:grid; place-content:center; text-align:center; min-height:48vh; border-color:var(--accent); }
.roulette-tv-result h2 { font-size:clamp(1.6rem,3vw,3rem); margin:.25em 0; }
.roulette-tv-result > p:last-child { margin:.15em; font-size:clamp(3rem,10vw,8rem); font-weight:900; line-height:1.05; color:var(--accent); overflow-wrap:anywhere; }
.roulette-tv-wheel-wrap { position:relative; width:min(52vh, min(48vw, 34rem)); aspect-ratio:1; margin:.5rem auto; }
.roulette-tv-wheel-wrap canvas { display:block; width:100%; height:100%; filter:drop-shadow(0 12px 22px #0008); }
.roulette-tv-wheel-wrap span { position:absolute; z-index:1; top:-.25rem; left:50%; transform:translateX(-50%); color:var(--accent); font-size:clamp(2rem,4vw,3.5rem); line-height:1; text-shadow:0 3px 8px #000; }
#roulette-tv-status { color:var(--muted); font-size:clamp(1.2rem,2.2vw,2rem); font-weight:700; }
@media (max-width:700px) { .roulette-tv-wheel-wrap { width:min(64vw,44vh,25rem); } .roulette-tv-result:not([hidden]) { min-height:65vh; } }
.roulette-guest-result:not([hidden]) { position:fixed; z-index:20; inset:auto 1rem max(1rem,env(safe-area-inset-bottom)); display:grid; gap:.4rem; padding:1rem; border:1px solid var(--accent); border-radius:1rem; background:var(--surface); box-shadow:0 10px 36px #0008; text-align:center; }
.roulette-guest-result strong { font-size:1.4rem; overflow-wrap:anywhere; }
@media (prefers-reduced-motion:reduce) { #roulette-wheel { transition:none; } }
.music-admin-list { display:grid; gap:.55rem; padding:0; list-style:none; }
.music-admin-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.5rem 1rem; padding:.75rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.music-admin-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.4rem; }
.music-admin-actions button { min-height:40px; }
.music-admin-row a { color:var(--accent); }
.music-admin-current { width:fit-content; padding:.2rem .55rem; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.82rem; font-weight:700; }
body.tv-music-mode .tv-main > :not(#tv-music-section) { display:none !important; }
body.tv-invite-mode .tv-main > :not(#tv-invite-section) { display:none !important; }
.tv-invite-section:not([hidden]) { display:block; grid-column:1 / -1; }
.tv-invite-layout { display:flex; align-items:center; justify-content:center; gap:clamp(2rem,6vw,6rem); }
.tv-invite-layout img { width:min(36vw,52vh,520px); height:auto; padding:1rem; border-radius:1.25rem; background:#fff; }
.tv-invite-code { font-size:clamp(3rem,8vw,7rem); font-weight:900; letter-spacing:.12em; }
.invite-body { min-height:100vh; display:grid; place-items:center; padding:1rem; background:var(--bg); }
.invite-page { width:min(100%,34rem); padding:clamp(1.25rem,5vw,2.5rem); display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); }
.invite-page h1 { margin:0; }
.invite-page-qr { width:min(72vw,18rem); height:auto; padding:.75rem; border-radius:1rem; background:#fff; }
.invite-connected { margin:0; }
.invite-join { width:100%; min-height:var(--touch-target); display:grid; place-items:center; padding:.75rem; border-radius:var(--radius-control); background:var(--accent); color:var(--on-accent); font-weight:800; text-decoration:none; }
.invite-code { margin:0; color:var(--muted); }
.invite-code strong { color:var(--ink); letter-spacing:.15em; }
@media (max-width:650px) {
  .tv-invite-layout { flex-direction:column; gap:.75rem; text-align:center; }
  .tv-invite-layout img { width:min(62vw,42vh,360px); }
}
@media (max-width:700px) {
  .tv-music-layout { grid-template-columns:1fr; }
  .tv-music-queue { max-height:34vh; }
  .tv-music-heading { align-items:flex-start; flex-direction:column; }
  .tv-music-heading label, .tv-music-heading select { width:100%; }
  .tv-navigation { position:sticky; top:.25rem; z-index:5; }
  .music-admin-row { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Estructura común de juego: cabecera, área principal y panel lateral como Just Dance. */
.game-form:not(#dance-player) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .65rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--surface);
}
.game-form:not(#dance-player) > .status-box,
.game-form:not(#dance-player) > .dance-score-panel,
.game-form:not(#dance-player) > p {
  min-width: 0;
  margin: 0;
}
.game-config > .game-form,
.game-config > .statues-settings,
.game-config > details.game-form {
  border-radius: 10px;
  background: var(--surface-raised);
}
.statues-stage { grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); }
.statues-stage .dance-score-panel { height: 100%; }
.tv-panel:not(#bingo-tv) {
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
@media (max-width: 760px) {
  .statues-stage { grid-template-columns: 1fr; }
}

/* El panel usa la paleta definida arriba, igual que el resto de la aplicación. */
body[data-view="admin"] {
  background: var(--bg);
}
body[data-view="admin"] .container {
  display: block;
  width: min(1050px, 94vw);
  padding: 2rem 0;
}
body[data-view="admin"] .card {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
body[data-view="admin"] h1,
body[data-view="admin"] h2 { color: var(--ink); }
body[data-view="admin"] h2 {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
body[data-view="admin"] .eyebrow,
body[data-view="admin"] .label { color: var(--accent); }
body[data-view="admin"] .pill {
  border-color: var(--line);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 700;
}
body[data-view="admin"] .game-form,
body[data-view="admin"] .invite {
  border-color: var(--line);
  background: var(--surface-raised);
}
body[data-view="admin"] input,
body[data-view="admin"] select,
body[data-view="admin"] textarea {
  border-color: var(--line);
  background: var(--control-bg);
  color: var(--ink);
}
body[data-view="admin"] button,
body[data-view="admin"] .links a {
  min-height: 48px;
  padding: .75rem 1rem;
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--ink);
}
body[data-view="admin"] .start-game-button {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 750;
}
body[data-view="admin"] button:hover,
body[data-view="admin"] .links a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
body[data-view="admin"] .start-game-button:hover { background: var(--accent); color: var(--bg); }
body[data-view="admin"] button:focus-visible,
body[data-view="admin"] a:focus-visible,
body[data-view="admin"] input:focus-visible,
body[data-view="admin"] select:focus-visible,
body[data-view="admin"] textarea:focus-visible {
  outline-color: var(--focus-ring);
}
body[data-view="admin"] .player-list li,
body[data-view="admin"] .status-box {
  border-color: var(--line);
  background: var(--surface-raised);
}
body[data-view="admin"] .team-card {
  border-color: var(--line);
  background: var(--surface-raised);
}
body[data-view="admin"] .team-card h3,
body[data-view="admin"] .leaderboard li::marker { color: var(--accent); }
body[data-view="admin"] .invite-url { color: var(--accent); font-weight: 650; }
body[data-view="admin"] .row.links { align-items: center; }
.admin-header { padding-bottom: .5rem; }
.admin-nav {
  display: flex;
  gap: .5rem;
  margin: 1rem 0 1.5rem;
  padding: 0 0 .75rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}
.admin-nav button { flex: 0 0 auto; min-height: 48px; }
.admin-nav button[aria-selected="true"] {
  border-color: var(--tab-current);
  background: var(--tab-current);
  color: var(--tab-current-text);
}
.admin-panel { min-width: 0; }
.admin-panel > h2:first-child { margin-top: .5rem; padding-top: 0; border-top: 0; }
.admin-panel > select { width: min(100%, 34rem); margin: .4rem 0 1rem; }
.game-config > h3 { margin: .75rem 0; color: var(--accent); }
.game-config > .help-text { max-width: 70ch; }
.admin-panel .game-form h3 { margin: 0; }
.admin-panel .game-form h4 { margin: 0; }
.admin-panel #mimic-secret strong { display: block; margin-top: .35rem; color: var(--accent); font-size: 1.4rem; }
.admin-panel .game-form form { display: grid; gap: .65rem; }
.mimic-team-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.mimic-team-controls label { flex-basis: 100%; }
.mimic-team-controls select { width: 8rem; min-width: 8rem; }
.mimic-team-controls button { min-height: 48px; }
.mimic-squads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .8rem; margin: 1rem 0; }
.mimic-squad { display: flex; flex-direction: column; gap: .65rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.mimic-squad-name-label { font-weight: 700; }
.mimic-squad .mimic-squad-name { width: 100%; min-width: 0; font-weight: 650; }
.mimic-squad-count { margin: 0; color: var(--muted); font-size: .9rem; }
.mimic-squad-members { display: flex; flex: 1; flex-wrap: wrap; align-content: start; gap: .5rem; min-height: 120px; padding: .65rem; border: 1px dashed var(--line); border-radius: 10px; background: var(--control-bg); }
.mimic-squad-members:has(.mimic-player-chip:active) { border-color: var(--accent); }
.mimic-player-chip { min-height: 42px; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: grab; touch-action: manipulation; }
.mimic-player-chip:active { cursor: grabbing; }
.mimic-player-chip.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.mimic-add-selected { width: 100%; min-height: 46px; }
.mimic-team-controls + [role="status"] { min-height: 1.5em; }
.admin-quick-links form { margin: 0; }
@media (max-width: 620px) {
  body[data-view="admin"] .container { width: min(100% - 1rem, 1050px); padding: .5rem 0; }
  body[data-view="admin"] .card { padding: 1rem; border-radius: 12px; }
  body[data-view="admin"] .row.links { align-items: stretch; flex-direction: column; }
  body[data-view="admin"] .row.links > *, body[data-view="admin"] .row.links form,
  body[data-view="admin"] .row.links form button { width: 100%; }
  .admin-nav { gap: .35rem; }
  .admin-nav button { padding: .65rem .8rem; }
}

/* Diseño compacto de cámaras inspirado en la referencia del anfitrión. */
.camera-settings-page { max-width: 760px; padding: 1rem !important; }
.camera-settings-page > div { margin: .8rem 0; }
.camera-page-heading { margin-bottom: .8rem; }
.camera-page-heading > div > small { display: block; margin-bottom: .25rem; color: var(--accent); font-size: .68rem; font-weight: 750; letter-spacing: .04em; }
.camera-page-heading h2 { margin: 0 !important; font-size: 1.35rem; }
.camera-page-heading p { margin-top: .18rem; font-size: .82rem; }
.camera-state-badge { width: 2rem; height: 2rem; justify-content: center; padding: 0; border: 0; background: transparent; color: transparent; font-size: 0; }
.camera-state-badge::before { width: 1rem; height: 1rem; flex-basis: 1rem; background: var(--accent); content: "⚙"; color: var(--accent); font-size: 1rem; border-radius: 0; }
.camera-game-selector { gap: .5rem; margin: .75rem 0 .9rem; }
.camera-game-option { display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; min-height: 64px; padding: .55rem .65rem; border-radius: 7px; }
.camera-game-option > span:nth-child(2) { gap: .12rem; }
.camera-game-option strong { font-size: .8rem; }
.camera-game-option small { font-size: .68rem; }
.camera-game-option b { grid-column: 2; font-size: .62rem; }
.camera-game-symbol { grid-row: span 2; width: 1.25rem; height: 1.25rem; border: 0; font-size: .9rem; }
.camera-section-heading { padding: .75rem 0 .2rem; border-top: 1px solid var(--line); }
.camera-section-heading h3, .camera-section-heading p { margin: 0; }
.camera-section-heading h3 { font-size: .95rem; }
.camera-section-heading p { margin-top: .2rem; color: var(--muted); font-size: .73rem; }
.camera-workspace { gap: .6rem; max-width: none; }
.camera-main-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
.camera-module { padding: .65rem; border-radius: 7px; }
.camera-module > h3 { font-size: .78rem; }
.camera-module > p { margin: .25rem 0 .55rem; font-size: .68rem; }
.camera-module-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.camera-module-heading h3 { margin: 0; font-size: .78rem; }
.camera-module-heading span { padding: .15rem .35rem; border-radius: 999px; background: #292b33; font-size: .62rem; }
.camera-module-heading span[data-state="active"] { color: var(--success); }
.camera-module-heading span[data-state="error"] { color: var(--danger); }
.camera-preview-module .dance-camera-wrap { aspect-ratio: 4 / 3; border-radius: 5px; }
.camera-preview-module .camera-placeholder { gap: .3rem; }
.camera-preview-module .camera-placeholder svg { width: 1.35rem; height: 1.35rem; }
.camera-preview-module .camera-placeholder strong { font-size: .68rem; font-weight: 500; }
.camera-preview-module .camera-placeholder span { font-size: .58rem; }
.camera-video-meta { display: none; }
.camera-note { margin: .3rem 0; font-size: .6rem; }
.camera-actions { gap: .35rem; }
.camera-preview-module .camera-actions button { width: 100%; min-height: 2.1rem; padding: .45rem; border-radius: 5px; }
.camera-preview-module .camera-actions span { display: none; }
.camera-diagnostics { background: var(--surface-raised); }
.camera-metrics { display: grid; gap: .3rem; margin-top: .55rem; }
.camera-metrics label { display: flex; justify-content: space-between; margin: 0 !important; color: var(--muted); font-size: .68rem !important; font-weight: 400 !important; }
.camera-metrics label b { color: var(--ink); font-size: .72rem; }
.camera-metrics progress { width: 100%; height: .38rem; accent-color: var(--accent); }
.camera-calibration { display: block; padding: .75rem; }
.camera-calibration > h3 { margin-bottom: .55rem; font-size: .85rem; }
.camera-calibration > label { margin-top: .5rem !important; font-size: .68rem !important; }
.camera-device-row { gap: .3rem; }
.camera-device-row select, .camera-device-row button { min-height: 1.9rem; padding: .35rem .5rem; font-size: .68rem; }
.camera-device-row button { width: auto; }
.camera-calibration input[type="range"] { margin: .3rem 0 0; }
.camera-calibration-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .5rem; }
.camera-calibration-actions > div { display: grid; grid-template-columns: 1fr; align-content: start; gap: .15rem; min-width: 0; padding: .35rem; border: 1px solid var(--line); border-radius: 5px; }
.camera-calibration-actions button { grid-row: 1; min-height: 2rem; padding: .35rem; font-size: .7rem; }
.camera-calibration-actions small { text-align: center; color: var(--muted); font-size: .58rem; }
.camera-calibration-actions select { margin-bottom: .2rem; font-size: .65rem; }
.camera-calibration-actions p, .camera-calibration-actions progress, .camera-calibration-actions a { font-size: .62rem !important; }
#dance-calibration-status, #dance-test-status { margin: .2rem 0 0; }
#dance-test-panel > label.sr-only { display: none; }
#dance-test-remaining, #dance-test-score, #dance-test-back { grid-column: 1; }
.camera-test-time { font-size: .8rem !important; }
@media (max-width: 540px) { .camera-main-grid { grid-template-columns: 1fr; } .camera-settings-page { padding: .75rem !important; } .camera-game-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); } .camera-game-option { min-height: 72px; padding: .4rem; } .camera-game-option > span:nth-child(2) { grid-column: 1 / -1; } .camera-game-option b { grid-column: 1 / -1; } .camera-game-symbol { display: none; } .camera-device-row { flex-direction: row; } .camera-device-row button { width: auto; } }

/* Patrones de layout compartidos; los colores se controlan arriba. */
body {
  background:
    radial-gradient(ellipse at 50% -18%, rgb(123 78 184 / 13%), transparent 48rem),
    var(--bg);
}

.container { width: min(980px, 94vw); padding: clamp(1rem, 4vh, 3rem) 0; }
.container.narrow { width: min(760px, 94vw); }
.card {
  padding: clamp(1.15rem, 4vw, 2.4rem);
  border-color: #332942;
  border-radius: 18px;
  background: linear-gradient(145deg, #15111d, #100e16 62%);
  box-shadow: var(--shadow);
}
h1 { letter-spacing: -.035em; }
h2, h3 { letter-spacing: -.02em; }
.eyebrow, .label { color: var(--accent); letter-spacing: .09em; }
.pill, .status, .camera-state-badge { border-radius: 999px; }
.status-box, .player-list li, .team-card, .game-form, .invite,
.store-card, .store-admin-item, .quiz-editor-card, .quiz-question-card,
.mimic-squad, .camera-module, .camera-game-card {
  border-color: var(--line);
  background: var(--surface-raised);
}
.player-list li { border-radius: 11px; }
.store-link { border-color: #584276; background: var(--accent-soft); color: var(--accent); }
button.primary-action, .start-game-button { background: var(--accent-strong); color: var(--on-accent); }
button:hover, a:hover { border-color: var(--accent); }
input[type="range"], progress { accent-color: var(--accent); }
::selection { background: #563a7d; color: white; }

body[data-view="admin"] .container { width: min(1120px, 94vw); padding: clamp(1rem, 4vh, 3rem) 0; }
body[data-view="admin"] .card { border-radius: 18px; }
.admin-header h1 { margin-bottom: .5rem; font-size: clamp(2rem, 5vw, 3.2rem); }
.admin-nav {
  gap: .35rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c0a12;
}
.admin-nav button { min-height: 42px; border-color: transparent; border-radius: 9px; background: transparent; }
.admin-nav button[aria-selected="true"] { border-color: #7257a3; background: #2a203a; color: #e9ddff; }
.game-config > h3 { color: var(--ink); font-size: clamp(1.2rem, 3vw, 1.6rem); }
.camera-game-option { border-radius: 11px; background: var(--surface-raised); }
.camera-game-option[aria-pressed="true"] { border-color: var(--accent); background: #211a2d; }

.tv-screen { width: min(100%, 1920px); margin: 0 auto; padding: clamp(1.5rem, 4vw, 4rem); }
.tv-header { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tv-header .eyebrow { margin-bottom: .2rem; }
.tv-header h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 5rem); }
.tv-main { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); gap: clamp(.8rem, 2vw, 1.4rem); align-content: start; }
.tv-main > .tv-panel:has(#active-game) { grid-column: 1 / -1; min-height: 30vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tv-main > .tv-panel:has(#tv-teams-display), .tv-main > .tv-panel:has(#leaderboard) { min-height: 20vh; }
.tv-main > .tv-panel:has(#tv-teams-display[hidden]) { display: none; }
.tv-panel:not([hidden]) { border-color: #392c4d; border-radius: 16px; background: linear-gradient(145deg, #171320, #100e16); box-shadow: var(--shadow); }
.tv-panel:not([hidden]) > .label { color: var(--accent); }
.tv-panel h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
.tv-panel#impostor-tv, .tv-panel#karaoke-tv, .tv-panel#mimic-tv,
.tv-panel#quiz-tv, .tv-panel#bingo-tv, .tv-panel#dance-tv, .tv-panel#statues-tv {
  grid-column: 1 / -1;
  min-height: min(58vh, 680px);
  justify-content: center;
}
.tv-panel#mimic-tv #mimic-team, .tv-panel#mimic-tv #mimic-actor { color: var(--accent-pink); }
.tv-panel#quiz-tv #quiz-timer, .tv-panel#mimic-tv #mimic-timer { color: var(--accent-pink); }
.tv-panel#bingo-tv { border-color: #8d3149; }
.tv-panel#bingo-tv h2 { color: var(--accent-pink); }
.tv-panel#dance-tv #dance-tv-team, .tv-panel#statues-tv h2 { color: var(--accent-pink); }
.tv-panel .leaderboard.big { font-size: clamp(1.25rem, 2.2vw, 2rem); }

body[data-view="guest"] .container { width: min(680px, 94vw); padding: 1rem 0; }
body[data-view="guest"] .card { border-radius: 16px; }
body[data-view="guest"] .admin-header, body[data-view="guest"] .guest-header { margin-bottom: 1rem; }
body[data-view="guest"] .status-box { border-radius: 12px; }
.bingo-player { box-shadow: 0 10px 30px rgb(0 0 0 / 28%); }

/* Guest phones switch from the lobby to a focused, thumb-friendly game screen. */
.guest-app { overflow: hidden; }
.guest-app-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: -.4rem 0 1.25rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.guest-app-bar > p { display: flex; align-items: center; gap: .55rem; margin: 0; }
.guest-connection-status { flex: 0 0 100%; padding: .45rem .65rem; border: 1px solid var(--danger); border-radius: 9px; background: var(--surface-raised); color: var(--danger); font-size: .85rem; font-weight: 650; }
.guest-brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 9px; background: var(--accent-strong); color: var(--on-accent); font-weight: 850; }
.guest-room-code { padding-left: .55rem; border-left: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.guest-player-chip { max-width: 42%; overflow: hidden; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--ink); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.guest-lobby-view > h1 { margin-bottom: .6rem; font-size: clamp(2rem, 7vw, 3rem); }
.guest-lobby-view > .pill { margin: 0 0 .65rem; }
.guest-lobby-ranking { margin-top: 1.5rem; }
.guest-lobby-ranking h2 { margin: 1.2rem 0 .55rem; font-size: 1.1rem; }
.guest-game-view { display: grid; gap: .85rem; }
.guest-game-header { position: sticky; top: .4rem; z-index: 2; display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: rgb(25 22 34 / 94%); box-shadow: 0 8px 24px rgb(0 0 0 / 22%); backdrop-filter: blur(12px); }
.guest-live-dot { width: .6rem; height: .6rem; flex: 0 0 .6rem; border-radius: 50%; background: var(--accent-pink); box-shadow: 0 0 0 .25rem rgb(255 121 198 / 12%); }
.guest-game-header p { display: grid; gap: .1rem; margin: 0; }
.guest-game-header strong { font-size: .9rem; }
.guest-game-header small { color: var(--muted); font-size: .76rem; }
.guest-game-content { display: grid; gap: .85rem; min-width: 0; }
.guest-game-view .game-form { gap: .8rem; margin: 0; padding: clamp(1rem, 4vw, 1.5rem); border-radius: 16px; background: linear-gradient(150deg, #1c1726, #15121c); }
.guest-game-view .game-form > h2 { margin: 0; padding: 0 0 .7rem; border-bottom: 1px solid var(--line); color: var(--accent); font-size: clamp(1.25rem, 5vw, 1.65rem); }
.guest-game-view .game-form > p { margin: 0; font-size: 1rem; }
.guest-game-view .status-box { padding: .9rem; border-radius: 12px; background: #100d17; }
.guest-game-view form { display: grid; gap: .7rem; }
.guest-game-view button, .guest-game-view select, .guest-game-view input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; min-height: 52px; }
.guest-game-view input, .guest-game-view select { padding: .8rem .9rem; border-radius: 12px; }
.guest-game-view button { padding: .8rem 1rem; border-radius: 12px; touch-action: manipulation; }
.guest-game-view #quiz-answer-form { display: grid; gap: .65rem; }
.guest-game-view #quiz-answer-form button { min-height: 58px; text-align: left; }
.guest-game-view #vote-form { padding-top: .4rem; }
.guest-game-view #mimic-secret strong { display: block; margin-top: .35rem; color: var(--accent-pink); font-size: clamp(1.6rem, 7vw, 2.4rem); }
.guest-game-view #dance-player-team { color: var(--accent-pink); font-size: 1.2rem; font-weight: 750; }
.guest-game-view .leaderboard { padding-left: 1.25rem; }
body[data-game-mode="active"] .container { width: min(720px, 100% - 1rem); min-height: 100svh; padding: .5rem 0 1rem; }
body[data-game-mode="active"] .guest-app { min-height: calc(100svh - 1.5rem); padding: clamp(.8rem, 4vw, 1.3rem); border-radius: 16px; }
body[data-game-mode="active"] .guest-app-bar { margin: 0 0 .85rem; }

@media (max-width: 520px) {
  .guest-app-bar { margin-top: -.1rem; }
  .guest-room-code { display: none; }
  .guest-game-header { top: .2rem; }
  .guest-game-view .game-form { padding: 1rem; }
  .guest-game-view #quiz-answer-form button { min-height: 60px; }
  body[data-game-mode="active"] .guest-app { border-radius: 14px; }
}

/* Storefront: colorful product browsing with a clear balance and mobile layout. */
.store-page { overflow: hidden; }
.store-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 4vw, 1.5rem); border: 1px solid #55406f; border-radius: 18px; background: linear-gradient(115deg, #332347, #21172e 58%, #172c38); }
.store-header h1 { margin: 0; font-size: clamp(2rem, 7vw, 3rem); }
.store-header p:not(.eyebrow) { margin: .3rem 0 0; color: #e3d9f3; }
.store-wallet { display: grid; justify-items: center; min-width: 86px; padding: .65rem .8rem; border: 1px solid rgb(255 255 255 / 20%); border-radius: 14px; background: rgb(12 10 18 / 55%); }
.store-wallet span, .store-wallet small { color: #d8c9ec; font-size: .78rem; }
.store-wallet strong { color: #ffd36e; font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.store-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 1rem 0; }
.store-section-heading { display: flex; align-items: end; justify-content: space-between; gap: .8rem; margin-top: 1.5rem; }
.store-section-heading h2 { margin: 0; }
.store-section-heading > span { padding: .3rem .65rem; border-radius: 999px; background: #262038; color: #d8c9ec; font-size: .83rem; }
.store-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: stretch; gap: 1rem; }
.store-card { overflow: hidden; align-content: start; gap: .7rem; padding: 0 1rem 1rem; border-color: #483956; background: linear-gradient(160deg, #211a2c, #17131e); box-shadow: 0 10px 24px rgb(0 0 0 / 20%); }
.store-product-image, .store-product-placeholder { display: grid; width: calc(100% + 2rem); aspect-ratio: 4 / 3; margin: 0 -1rem .25rem; object-fit: cover; background: linear-gradient(135deg, #3d2856, #244454 55%, #74415f); }
.store-product-placeholder { align-content: center; justify-items: center; gap: .2rem; color: #fff4ff; }
.store-product-placeholder strong { font-size: clamp(3rem, 14vw, 5.5rem); line-height: 1; text-shadow: 0 4px 20px rgb(0 0 0 / 30%); }
.store-product-placeholder span { color: #f2d9fc; font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.store-card:nth-child(3n + 2) .store-product-placeholder { background: linear-gradient(135deg, #1d4c51, #29486b 58%, #50325d); }
.store-card:nth-child(3n) .store-product-placeholder { background: linear-gradient(135deg, #74475e, #754b34 55%, #55412c); }
.store-card-title { display: flex; align-items: start; justify-content: space-between; gap: .6rem; }
.store-card-title h3 { margin: 0; font-size: 1.18rem; overflow-wrap: anywhere; }
.store-stock { flex: 0 0 auto; padding: .25rem .55rem; border-radius: 999px; background: #193d32; color: #a9f2ce; font-size: .75rem; font-weight: 750; }
.store-stock.is-empty { background: #482734; color: #ffd0dc; }
.store-price { display: flex; align-items: baseline; gap: .4rem; color: #ffe08a; }
.store-price strong { font-size: 1.55rem; }
.store-price span { color: #d8c9ec; font-size: .9rem; }
.store-status { min-height: 1.5em; color: var(--muted); font-size: .9rem; }
.store-status.is-ready { color: #9ce7bd; }
.store-card form { margin-top: .15rem; }
.store-card button { width: 100%; min-height: 50px; border-color: #7661a7; background: linear-gradient(100deg, #b28bff, #fa91c5); color: #1a1023; font-weight: 850; }
.store-card button:disabled { border-color: var(--line); background: #383342; color: #c0b9cb; }
.store-guide, .menu-guide, .game-guide { margin: .8rem 0; border: 1px solid #4b3c60; border-radius: 12px; background: #1a1523; }
.store-guide summary, .menu-guide summary, .game-guide summary { min-height: 44px; padding: .65rem .85rem; color: #d9c2ff; cursor: pointer; font-weight: 750; }
.store-guide p, .menu-guide p, .game-guide p { margin: 0; padding: 0 .85rem .8rem; color: var(--muted); }
.store-redemptions { margin-top: 1.7rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.store-redemptions h2 { color: #e5d3ff; }
.product-editor { max-width: 680px; }
.product-image-preview { overflow: hidden; min-height: 150px; border: 1px dashed #6b5689; border-radius: 14px; background: #110e17; }
.product-image-preview img { display: block; width: 100%; max-height: 260px; aspect-ratio: 16 / 9; object-fit: contain; background: #110e17; }
.product-image-placeholder { display: grid; min-height: 150px; align-content: center; justify-items: center; gap: .2rem; padding: 1rem; background: linear-gradient(125deg, #30233e, #1b3040); color: #f5e9ff; text-align: center; }
.product-image-placeholder span { color: #c8badc; font-size: .88rem; }
.store-admin-item { min-width: 0; }
.store-admin-item input[type="file"], .store-form input[type="file"] { padding: .6rem; }
@media (max-width: 520px) {
  .store-page { padding: .9rem; }
  .store-header { align-items: flex-start; padding: .9rem; }
  .store-wallet { min-width: 76px; }
  .store-toolbar { align-items: flex-start; flex-direction: column; }
  .store-toolbar .store-link { width: 100%; text-align: center; }
  .store-section-heading { align-items: flex-start; flex-direction: column; }
  .store-grid { grid-template-columns: 1fr; }
  .store-card { padding-bottom: .9rem; }
  .store-card button { min-height: 54px; }
}

@media (max-width: 760px) {
  .tv-screen { min-height: 100svh; padding: 1rem; }
  .tv-main { grid-template-columns: 1fr; }
  .tv-panel#impostor-tv, .tv-panel#karaoke-tv, .tv-panel#mimic-tv,
  .tv-panel#quiz-tv, .tv-panel#bingo-tv, .tv-panel#dance-tv, .tv-panel#statues-tv { min-height: 45vh; }
}
@media (max-width: 620px) {
  body[data-view="admin"] .container { width: min(100% - 1rem, 1120px); }
  .admin-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-nav button { white-space: normal; }
  .camera-game-selector { grid-template-columns: 1fr; }
  .camera-game-option { grid-template-columns: auto 1fr; min-height: 60px; }
  .camera-game-symbol { display: grid; }
}

/* Rediseño de producto: prioridades distintas para celular, anfitrión y TV. */
body {
  background:
    radial-gradient(ellipse at 12% 0%, rgb(167 139 250 / 10%), transparent 34rem),
    radial-gradient(ellipse at 95% 18%, rgb(255 141 199 / 5%), transparent 30rem),
    var(--bg);
}
button, a, input, select, textarea { border-radius: var(--radius-control); }
button, .primary-action, .store-link { min-height: var(--touch-target); }
button.primary-action, .start-game-button, .join-form button {
  border-color: transparent;
  background: linear-gradient(115deg, #a78bfa, #bd8cf2);
  color: #160f22;
  box-shadow: 0 7px 20px rgb(167 139 250 / 18%);
}
button.primary-action:hover, .start-game-button:hover, .join-form button:hover {
  background: linear-gradient(115deg, #c2a9ff, #ff9bd0);
  color: #160f22;
}
.card { border-radius: var(--radius-card); }
.error, [role="alert"] { color: var(--danger); }
.status, [role="status"] { overflow-wrap: anywhere; }

/* Celulares: la partida ocupa el foco y cada juego conserva sus propios controles. */
body[data-view="guest"] {
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 50% -18%, rgb(167 139 250 / 14%), transparent 31rem),
    var(--bg);
}
body[data-view="guest"] .container {
  width: min(680px, 100% - 1rem);
  min-height: 100svh;
  padding: max(.5rem, env(safe-area-inset-top)) 0 max(.65rem, env(safe-area-inset-bottom));
  align-items: start;
}
body[data-view="guest"] .guest-app {
  min-height: calc(100svh - 1.15rem);
  padding: clamp(.9rem, 4vw, 1.5rem);
  border-color: #342a49;
  background: linear-gradient(155deg, #171322, #100e16 62%);
}
.guest-app-bar { padding-bottom: .9rem; }
.guest-brand-mark { box-shadow: 0 0 22px rgb(167 139 250 / 30%); }
.guest-player-chip { border-color: #514268; background: #211a2d; }
.guest-lobby-view > h1 { overflow-wrap: anywhere; }
.guest-lobby-view .status-box { display: grid; gap: .35rem; }
.guest-lobby-view .status-box > p { margin: 0; }
.guest-lobby-view .store-link { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: .45rem; }
.guest-game-view { gap: .7rem; }
.guest-game-header { top: max(.2rem, env(safe-area-inset-top)); border-color: #4a3b62; background: rgb(20 17 28 / 96%); }
.guest-live-dot { background: var(--accent-pink); box-shadow: 0 0 0 .28rem rgb(255 141 199 / 14%); }
.guest-game-view .game-form {
  gap: 1rem;
  padding: clamp(1rem, 5vw, 1.4rem);
  border-color: #413452;
  background: linear-gradient(155deg, #1c1728, #14111c);
  box-shadow: 0 14px 36px rgb(0 0 0 / 22%);
}
.guest-game-view .game-form > h2 { color: var(--ink); font-size: clamp(1.45rem, 6vw, 2rem); }
.guest-game-view .game-form > p { line-height: 1.55; }
.guest-game-view .game-form .status-box { border-color: #4a3b62; background: #120f1a; }
.guest-game-view button, .guest-game-view select,
.guest-game-view input:not([type="checkbox"]):not([type="radio"]) { min-height: 54px; }
.guest-game-view button { font-size: 1rem; }
.guest-game-view #private-role { padding: 1rem; border-color: #7655a6; background: linear-gradient(130deg, #2d2040, #171322); }
.guest-game-view #secret-word, .guest-game-view #mimic-secret strong { color: var(--accent-pink); font-size: clamp(1.8rem, 9vw, 2.8rem); font-weight: 850; }
.guest-game-view #karaoke-player, .guest-game-view #karaoke-song, .guest-game-view #karaoke-challenge { margin: 0; padding: .85rem 1rem; border-radius: 12px; background: #211a2d; }
.guest-game-view #karaoke-challenge { border-left: 3px solid var(--accent-pink); color: #ffe5f2; font-size: 1.1rem; font-weight: 750; }
.guest-game-view #quiz-question { margin: 0; font-size: clamp(1.2rem, 5vw, 1.65rem); }
.guest-game-view #quiz-timer { justify-self: start; margin: 0; padding: .3rem .8rem; border-radius: 999px; background: #2a203a; color: var(--accent-pink); font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.guest-game-view #quiz-answer-form button { border-color: #49405a; background: #211a2d; }
.guest-game-view #quiz-answer-form button:active { transform: scale(.985); }
.guest-game-view #vote-form label { font-weight: 700; }
.guest-game-view #dance-player-score { padding: .9rem; border-radius: 12px; background: #211a2d; }
.guest-game-view #statues-player-status { padding: 1rem; border: 1px solid #514268; border-radius: 12px; background: #211a2d; font-size: 1.1rem; font-weight: 750; }
.guest-game-view .leaderboard { margin: .3rem 0; }
.bingo-player { max-width: none; margin: 0; padding: clamp(.8rem, 3vw, 1.2rem); border-width: 3px; border-radius: 16px; }
.bingo-header { justify-content: center; padding: .6rem .8rem; }
.bingo-header h2 { margin: 0; font-size: clamp(1.15rem, 5vw, 1.6rem); }
.bingo-call { min-height: 2.2rem; margin: .8rem 0; font-size: 1.1rem; font-weight: 800; text-align: center; }
.bingo-ticket { padding: .55rem; border: 2px solid #1b4c90; border-radius: 10px; background: #f8edbd; }
.bingo-ticket-heading { margin-bottom: .45rem; color: #14264b; font-size: .85rem; font-weight: 900; letter-spacing: .12em; text-align: center; }
.bingo-grid { gap: 3px; border-width: 3px; }
#bingo-card .bingo-cell { min-height: clamp(5.1rem, 23vw, 7.3rem); padding: .35rem .2rem; font-size: clamp(.72rem, 3.2vw, 1rem); }
.bingo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .75rem; }
.bingo-actions button { min-height: 54px; padding: .5rem; border-radius: 10px; font-size: .92rem; }
.bingo-actions #bingo-claim { border-color: #a8212d; background: #c8323e; color: #fff; }

/* Televisor: foco amplio, tipografía grande y datos públicos ordenados. */
.tv-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 8%, rgb(123 75 170 / 19%), transparent 52rem),
    radial-gradient(ellipse at 8% 100%, rgb(255 141 199 / 6%), transparent 36rem),
    #090811;
}
.tv-screen { min-height: 100svh; padding: clamp(1.25rem, 4vw, 4.5rem); }
.tv-header { width: min(100%, 1700px); margin: 0 auto 1rem; padding-bottom: clamp(.75rem, 2vh, 1.5rem); }
.tv-header .eyebrow { font-size: clamp(.85rem, 1.1vw, 1.2rem); letter-spacing: .18em; }
.tv-header h1 { font-size: clamp(2.8rem, 6vw, 6.5rem); }
.tv-main { width: min(100%, 1700px); margin: 0 auto; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .85fr); gap: clamp(1rem, 2vw, 2rem); }
.tv-panel:not([hidden]) { padding: clamp(1.25rem, 3vw, 2.6rem); border-color: #443354; border-radius: 22px; background: linear-gradient(145deg, #1a1525, #100e18 72%); box-shadow: 0 24px 70px rgb(0 0 0 / 30%); }
.tv-panel .label { font-size: clamp(.95rem, 1.25vw, 1.3rem); letter-spacing: .14em; }
.tv-panel h2 { line-height: 1.12; }
.tv-panel:has(#active-game) #active-game { color: var(--accent-pink); font-size: clamp(2.4rem, 5vw, 5rem); }
.tv-panel#impostor-tv h2, .tv-panel#karaoke-tv h2, .tv-panel#statues-tv h2 { font-size: clamp(2.6rem, 6vw, 6rem); }
.tv-panel#impostor-tv #round-starter, .tv-panel#karaoke-tv #karaoke-player { color: var(--accent-pink); font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 800; }
.tv-panel#karaoke-tv #karaoke-song, .tv-panel#karaoke-tv #karaoke-challenge { font-size: clamp(1.5rem, 3vw, 2.8rem); }
.tv-panel#quiz-tv #quiz-question { font-size: clamp(2rem, 4.5vw, 5rem); }
.tv-panel#quiz-tv #quiz-options p { padding: .7rem 1rem; border: 1px solid #493b60; border-radius: 14px; background: #211a2d; }
.tv-panel#bingo-tv #bingo-current { color: var(--accent-pink); font-size: clamp(2.2rem, 6vw, 6rem); font-weight: 850; }
.tv-panel#bingo-tv #bingo-player-frame { max-width: 100%; }
.tv-panel#dance-tv #dance-tv-team { font-size: clamp(2.4rem, 6vw, 6rem); }
.tv-panel .leaderboard.big { width: min(100%, 1050px); margin: 1rem auto; }

/* Anfitrión: controles con peso visual, acciones peligrosas separadas y pestañas visibles. */
body[data-view="admin"] .container { width: min(1160px, 94vw); }
body[data-view="admin"] .card { padding: clamp(1.15rem, 3vw, 2.3rem); border-radius: 20px; }
.admin-header { position: relative; }
.admin-header h1 { font-size: clamp(2.1rem, 4vw, 3.5rem); }
.admin-game-alert { display: grid; gap: .65rem; margin: 1rem 0; padding: 1rem; border: 1px solid rgb(255 124 145 / 40%); border-radius: 14px; background: rgb(255 124 145 / 8%); }
.admin-game-alert form { margin: 0; }
.admin-game-alert button { border-color: rgb(255 124 145 / 45%) !important; color: #ffc4cc !important; }
.admin-nav { position: sticky; top: .35rem; z-index: 5; border: 1px solid var(--line); border-radius: 14px; background: rgb(18 16 28 / 94%); backdrop-filter: blur(12px); }
.admin-nav button { border-radius: 10px; }
.admin-nav button[aria-selected="true"] { border-color: #8d6cc7; background: linear-gradient(120deg, #352746, #272039); }
.admin-panel > h2:first-child { font-size: 1.55rem; }
.admin-panel > select { min-height: 50px; }
.admin-panel .game-config > h3 { padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.admin-panel .player-row { padding: .9rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); }
.store-grid { gap: 1rem; }
.store-card { border-radius: 16px; }

@media (max-width: 760px) {
  .tv-screen { justify-content: flex-start; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
  .tv-main { grid-template-columns: 1fr; }
  .tv-main > .tv-panel:has(#active-game), .tv-panel#impostor-tv, .tv-panel#karaoke-tv,
  .tv-panel#mimic-tv, .tv-panel#quiz-tv, .tv-panel#bingo-tv, .tv-panel#dance-tv,
  .tv-panel#statues-tv { min-height: 42svh; }
}
@media (max-width: 520px) {
  body[data-view="guest"] .container { width: 100%; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  body[data-view="guest"] .guest-app { min-height: 100svh; padding: .85rem; border-right: 0; border-left: 0; border-radius: 0; }
  .guest-app-bar { margin-bottom: .8rem; }
  .guest-game-header { padding: .6rem .7rem; }
  .guest-game-view .game-form { padding: .95rem; border-radius: 14px; }
  .guest-game-view #vote-form { gap: .65rem; }
  .bingo-player { border-radius: 12px; }
  #bingo-card .bingo-cell { min-height: clamp(4.8rem, 22vw, 6.2rem); }
  .bingo-actions { grid-template-columns: 1fr; }
  body[data-view="admin"] .container { width: 100%; padding: 0; }
  body[data-view="admin"] .card { min-height: 100svh; padding: .9rem; border-right: 0; border-left: 0; border-radius: 0; }
  .admin-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin: .75rem 0 1rem; padding: .4rem; overflow: visible; }
  .admin-nav button { min-width: 0; min-height: 48px; padding: .45rem .3rem; font-size: .78rem; line-height: 1.2; white-space: normal; }
  .admin-quick-links { gap: .55rem; }
  .admin-panel .player-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .admin-panel .player-remove-action { grid-column: 1 / -1; }
  .admin-panel .player-row form { grid-column: 1 / -1; flex-wrap: wrap; }
  .admin-panel .player-quick-actions,
  .admin-panel .player-more-actions { grid-column: 1 / -1; }
  .admin-panel .player-filters { grid-template-columns: 1fr 1fr; }
  .admin-panel .player-filters input,
  .admin-panel .player-summary { grid-column: 1 / -1; }
  .admin-panel .player-bulk-tools { align-items: stretch; }
  .admin-panel .player-bulk-tools form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .admin-panel .player-bulk-tools form label,
  .admin-panel .player-bulk-tools form span { grid-column: 1 / -1; }
  .admin-panel .player-bulk-tools form button { width: 100%; }
  .store-numbers label input { width: 100%; min-width: 0; }
  .store-purchase .coin-adjust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; }
  .store-purchase .coin-adjust input { width: 100%; min-width: 0; }
  .store-purchase .coin-adjust button { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .guest-player-chip { max-width: 36%; }
  .guest-game-view .game-form { padding: .8rem; }
  #bingo-card .bingo-cell { min-height: 4.55rem; font-size: .7rem; }
  .tv-panel:not([hidden]) { padding: 1rem; }
}

/* La tienda usa el ancho del teléfono y una cuadrícula de catálogo, no una tarjeta centrada. */
.store-shell { display: block; width: min(100%, 760px); padding: 1.25rem 0; }
@media (max-width: 520px) {
  .store-shell { width: 100%; padding: max(.5rem, env(safe-area-inset-top)) 0 env(safe-area-inset-bottom); }
  .store-shell > .store-page { min-height: 100svh; padding: 1rem; border-right: 0; border-left: 0; border-radius: 0; }
  .store-header { align-items: center; gap: .65rem; padding: .9rem; border-radius: 16px; }
  .store-header h1 { font-size: clamp(1.8rem, 8vw, 2.35rem); }
  .store-header p:not(.eyebrow) { font-size: .9rem; }
  .store-wallet { flex: 0 0 auto; min-width: 72px; padding: .55rem; }
  .store-wallet strong { font-size: 1.55rem; }
  .store-toolbar { flex-direction: row; align-items: center; }
  .store-toolbar .store-link { width: auto; min-height: 44px; padding: .55rem .7rem; }
  .store-guide { margin: .65rem 0; }
  .store-section-heading { align-items: center; flex-direction: row; margin-top: 1rem; }
  .store-section-heading h2 { margin: .1rem 0; font-size: 1.25rem; }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0; }
  .store-card { gap: .55rem; padding: 0 .7rem .7rem; border-radius: 14px; }
  .store-product-image, .store-product-placeholder { width: calc(100% + 1.4rem); margin-right: -.7rem; margin-left: -.7rem; aspect-ratio: 1 / 1; }
  .store-product-placeholder strong { font-size: clamp(2.6rem, 13vw, 4rem); }
  .store-card-title { display: block; }
  .store-card-title h3 { font-size: 1rem; line-height: 1.25; }
  .store-stock { display: inline-flex; max-width: 100%; margin-top: .35rem; white-space: normal; line-height: 1.25; }
  .store-price { gap: .25rem; font-size: 1.1rem; }
  .store-status { min-height: 2.5em; font-size: .82rem; line-height: 1.3; }
  .store-card button { min-height: 48px; padding: .6rem .35rem; font-size: .9rem; }
  .store-redemptions { margin-top: 1.1rem; }
}
@media (max-width: 379px) {
  .store-grid { grid-template-columns: 1fr; gap: .8rem; }
  .store-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: .45rem .75rem; padding: .7rem; }
  .store-product-image, .store-product-placeholder { grid-row: span 4; width: 100%; margin: 0; border-radius: 10px; aspect-ratio: 1 / 1; }
  .store-card-title { align-self: end; }
  .store-card-title h3 { font-size: 1.05rem; }
  .store-stock { margin-top: .25rem; }
  .store-price, .store-status, .store-card form { grid-column: 2; }
  .store-card form { align-self: end; width: 100%; }
  .store-card button { min-height: 46px; }
  .store-header { align-items: flex-start; }
  .store-header .eyebrow { font-size: .65rem; }
  .store-toolbar { align-items: stretch; flex-direction: column; }
  .store-toolbar .store-link { width: 100%; text-align: center; }
}

/* Cada juego cambia la escena; solo comparte los controles básicos. */
.guest-game-view > section:not([hidden]) { animation: game-scene-enter .24s ease-out both; }
.tv-panel:not([hidden]) { animation: game-scene-enter .32s ease-out both; }
body[data-view="guest"]:has(#impostor-player:not([hidden])) .guest-game-header,
body[data-view="guest"]:has(#karaoke-player-view:not([hidden])) .guest-game-header,
body[data-view="guest"]:has(#mimic-player:not([hidden])) .guest-game-header,
body[data-view="guest"]:has(#quiz-player:not([hidden])) .guest-game-header,
body[data-view="guest"]:has(#bingo-player:not([hidden])) .guest-game-header,
body[data-view="guest"]:has(#dance-player:not([hidden])) .guest-game-header,
body[data-view="guest"]:has(#statues-player:not([hidden])) .guest-game-header { display: none; }
body[data-view="tv"]:has(#impostor-tv:not([hidden])) .tv-main > .tv-panel:has(#active-game),
body[data-view="tv"]:has(#karaoke-tv:not([hidden])) .tv-main > .tv-panel:has(#active-game),
body[data-view="tv"]:has(#mimic-tv:not([hidden])) .tv-main > .tv-panel:has(#active-game),
body[data-view="tv"]:has(#quiz-tv:not([hidden])) .tv-main > .tv-panel:has(#active-game),
body[data-view="tv"]:has(#bingo-tv:not([hidden])) .tv-main > .tv-panel:has(#active-game),
body[data-view="tv"]:has(#dance-tv:not([hidden])) .tv-main > .tv-panel:has(#active-game),
body[data-view="tv"]:has(#statues-tv:not([hidden])) .tv-main > .tv-panel:has(#active-game) { display: none; }
@keyframes game-scene-enter {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Impostor: escena de deducción, separación clara entre rol privado y voto público. */
body[data-view="guest"]:has(#impostor-player:not([hidden])) .guest-app {
  background: radial-gradient(ellipse at 50% 34%, #28203a 0, #15111f 44%, #0d0b13 100%);
}
#impostor-player:not([hidden]) {
  min-height: min(76svh, 760px);
  align-content: center;
  border: 1px solid #5b456e;
  background: linear-gradient(160deg, rgb(29 23 41 / 96%), rgb(14 12 20 / 98%));
}
#impostor-player > h2 { color: #d8b4fe; letter-spacing: .04em; text-transform: uppercase; }
#impostor-player #game-phase { color: var(--muted); font-size: .92rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#impostor-player #private-role { display: grid; gap: .4rem; min-height: 180px; align-content: center; text-align: center; box-shadow: inset 0 0 36px rgb(167 139 250 / 12%); }
#impostor-player #role-label { margin: 0; color: #d8b4fe; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
#impostor-player #vote-form { margin-top: .5rem; padding: 1rem; border: 1px solid #574568; border-radius: 16px; background: #120f1a; }
#impostor-player #vote-form button { background: #8662c8; color: white; }
body[data-view="tv"] .tv-panel#impostor-tv:not([hidden]) {
  background: radial-gradient(ellipse at 50% 18%, #3a2852, #191322 52%, #100d18 100%);
}
#impostor-tv #game-phase { color: #d8b4fe; font-size: clamp(1rem, 1.7vw, 1.7rem); letter-spacing: .18em; text-transform: uppercase; }
#impostor-tv #vote-progress { padding: .65rem 1rem; border: 1px solid #554065; border-radius: 999px; background: #211a2d; }
#impostor-tv #game-result { color: #ffb3da; font-size: clamp(1.4rem, 3vw, 3rem); font-weight: 800; }

/* Karaoke: escenario, foco sobre el desafío y energía de show. */
body[data-view="guest"]:has(#karaoke-player-view:not([hidden])) .guest-app {
  background: radial-gradient(ellipse at 50% 18%, #51284a 0, #211524 34%, #100d17 76%);
}
#karaoke-player-view:not([hidden]) {
  min-height: min(76svh, 760px);
  align-content: center;
  border-color: #714266;
  background: radial-gradient(ellipse at 50% 0, #46223f, #211522 48%, #17111d 100%);
}
#karaoke-player-view > h2 { color: #ffc1e1; font-size: clamp(1.7rem, 7vw, 2.5rem); }
#karaoke-player-view #karaoke-progress { align-self: start; padding: .35rem .75rem; border-radius: 999px; background: #392039; color: #ffd2eb; font-size: .85rem; font-weight: 750; }
#karaoke-player-view #karaoke-challenge { padding: 1.2rem; border: 1px solid #31558a; border-left: 5px solid var(--accent-strong); background: linear-gradient(120deg, #172b49, #151a25); font-size: clamp(1.25rem, 6vw, 2rem); text-align: center; }
#karaoke-player-view #karaoke-song { border: 1px solid #54344f; background: #241729; font-size: 1.05rem; text-align: center; }
body[data-view="tv"] .tv-panel#karaoke-tv:not([hidden]) {
  background: radial-gradient(ellipse at 50% 7%, #663450, #281a2b 42%, #100d18 100%);
  text-align: center;
}
#karaoke-tv #karaoke-progress { color: #ffc1e1; font-size: clamp(1rem, 1.7vw, 1.7rem); letter-spacing: .16em; text-transform: uppercase; }
#karaoke-tv #karaoke-challenge { display: inline-block; max-width: 90%; padding: .6rem 1.3rem; border: 1px solid #895276; border-radius: 16px; background: #35203a; color: #ffd5ec; font-size: clamp(1.8rem, 4.2vw, 4.5rem); font-weight: 850; }

/* Quiz: pregunta como centro y respuestas como opciones de concurso. */
body[data-view="guest"]:has(#quiz-player:not([hidden])) .guest-app { background: radial-gradient(ellipse at 50% 0, #253550, #151522 48%, #0d0c13); }
#quiz-player:not([hidden]) { min-height: min(76svh, 760px); align-content: start; border-color: #435983; background: linear-gradient(155deg, #1b2030, #13131d 72%); }
#quiz-player > h3 { margin: .1rem 0; padding: 1rem; border: 1px solid #435983; border-radius: 16px; background: linear-gradient(120deg, #242d43, #1b2030); font-size: clamp(1.3rem, 5.8vw, 2.1rem); line-height: 1.25; }
#quiz-player #quiz-answer-form button { min-height: 62px; padding: .9rem 1rem; border-color: #4d5c7e; background: #20283a; }
#quiz-player #quiz-answer-form button:hover, #quiz-player #quiz-answer-form button:focus-visible { border-color: #9eafff; background: #303b58; }
body[data-view="tv"] .tv-panel#quiz-tv:not([hidden]) { background: radial-gradient(ellipse at 50% 0, #263753, #171522 48%, #100d18); }
#quiz-tv #quiz-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#quiz-tv #quiz-options p { min-height: 2.5em; display: flex; align-items: center; margin: 0; border-color: #52648d; background: #20283a; }
#quiz-tv #quiz-timer { color: #9eafff; }

/* Mímica: espacio de actuación y reloj dominante, texto mínimo. */
body[data-view="guest"]:has(#mimic-player:not([hidden])) .guest-app { background: radial-gradient(ellipse at 50% 34%, #4b2636, #1c1420 46%, #0e0b12); }
#mimic-player:not([hidden]) { min-height: min(76svh, 760px); align-content: center; border-color: #784055; background: radial-gradient(ellipse at 50% 8%, #3b202e, #17121b 64%); }
#mimic-player #mimic-timer { align-self: center; min-width: 2.8em; margin: .2rem 0; color: #ff9bc6; font-size: clamp(4.5rem, 24vw, 8rem); font-weight: 900; line-height: .95; font-variant-numeric: tabular-nums; text-align: center; text-shadow: 0 0 30px rgb(255 141 199 / 24%); }
#mimic-player #mimic-player-message { min-height: 1.5em; color: #ffd0e5; font-size: 1.15rem; font-weight: 750; text-align: center; }
body[data-view="tv"] .tv-panel#mimic-tv:not([hidden]) { background: radial-gradient(ellipse at 50% 15%, #572b40, #211520 56%, #100d18); }
#mimic-tv #mimic-timer { color: #ff9bc6; text-shadow: 0 0 50px rgb(255 141 199 / 30%); }

/* Bingo mantiene su cartón de sala tradicional y ocupa casi todo el teléfono. */
body[data-view="guest"]:has(#bingo-player:not([hidden])) .guest-app { background: radial-gradient(ellipse at 50% 0, #342b48, #17121d 45%, #0e0c13); }
#bingo-player:not([hidden]) { min-height: calc(100svh - 6rem); display: flex; flex-direction: column; justify-content: space-between; }
#bingo-card .bingo-cell { transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
#bingo-card .bingo-cell:active { transform: scale(.97); }
body[data-view="tv"] .tv-panel#bingo-tv:not([hidden]) { background: radial-gradient(ellipse at 50% 8%, #3c253a, #17121c 58%, #100d18); text-align: center; }
#bingo-tv #bingo-current { margin: auto; }
#bingo-tv #bingo-progress { padding: .55rem 1rem; border-radius: 999px; background: #291d30; color: #e8d9f3; font-size: clamp(1.1rem, 2vw, 2rem); }

/* Baile y Estatuas: marcador legible frente a estados de pausa y revisión. */
body[data-view="guest"]:has(#dance-player:not([hidden])) .guest-app { background: radial-gradient(ellipse at 50% 20%, #2c2850, #171322 48%, #0d0b13); }
#dance-player:not([hidden]) { min-height: min(76svh, 760px); align-content: center; border-color: #514987; background: linear-gradient(145deg, #211e36, #13121d); }
#dance-player #dance-player-team { padding: 1rem; border: 1px solid #5d5691; border-radius: 16px; background: #292541; color: #c9c2ff; font-size: clamp(1.4rem, 6vw, 2rem); text-align: center; }
#dance-player #dance-player-score { min-height: 6rem; display: grid; place-items: center; color: #fff; font-size: 1.15rem; text-align: center; }
#dance-player-results { padding: 0; list-style-position: inside; }
body[data-view="tv"] .tv-panel#dance-tv:not([hidden]) { background: radial-gradient(ellipse at 50% 8%, #342d5c, #181522 58%, #100d18); }
#dance-tv #dance-tv-progress { padding: .65rem 1rem; border: 1px solid #534a7a; border-radius: 14px; background: #221f37; }
#dance-tv #dance-tv-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; padding: 0; list-style-position: inside; }
#dance-tv #dance-tv-results li { padding: .85rem; border: 1px solid #514987; border-radius: 14px; background: #211e36; }
body[data-view="guest"]:has(#statues-player:not([hidden])) .guest-app { background: radial-gradient(ellipse at 50% 24%, #243b37, #141b1a 48%, #0c1010); }
#statues-player:not([hidden]) { min-height: min(76svh, 760px); align-content: center; border-color: #3c6154; background: linear-gradient(145deg, #1a2a25, #111917); }
#statues-player #statues-player-status { border-color: #477864; background: #1a332a; color: #c8f8dc; font-size: clamp(1.25rem, 5vw, 1.8rem); text-align: center; }
#statues-player-round { align-self: center; color: #a4ebc4; font-size: 1.1rem; font-weight: 800; }
body[data-view="tv"] .tv-panel#statues-tv:not([hidden]) { background: radial-gradient(ellipse at 50% 7%, #28503e, #16211c 55%, #100d18); }
#statues-tv #statues-tv-phase { color: #a4ebc4; }
#statues-tv .statues-evidence { max-width: min(100%, 1000px); margin: .8rem auto; }

@media (max-width: 620px) {
  #quiz-tv #quiz-options { grid-template-columns: 1fr; }
  #mimic-player #mimic-timer { font-size: clamp(4rem, 22vw, 6rem); }
  #bingo-player:not([hidden]) { min-height: calc(100svh - 5.5rem); }
}

/* Juli Party · Cyber-Retro: tinta oscura, ámbar y detalles HUD discretos. */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(243 245 247 / 2.2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(243 245 247 / 2.2%) 1px, transparent 1px);
  background-size: 36px 36px;
}
h1, h2, h3, .admin-header h1 { font-weight: 760; letter-spacing: -.025em; }
.eyebrow, .label, .pill, .guest-live-dot, .admin-header .room-code,
.tv-header .eyebrow, #quiz-timer, #mimic-timer, #dance-tv-progress {
  font-family: var(--font-mono);
}
.eyebrow, .label { color: var(--accent); }
.card, .guest-app, .admin-nav, .game-form, .camera-card,
.quiz-editor-card, .quiz-question-card, .store-admin-item {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
button.primary-action, .start-game-button, .join-form button,
.store-card button, .store-admin-item button.primary-action {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}
button.primary-action:hover, .start-game-button:hover, .join-form button:hover,
.store-card button:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
button:not(.primary-action):not(.start-game-button):not(.store-card button),
.store-link { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
button:not(:disabled):not(.primary-action):not(.start-game-button):hover,
.store-link:hover { border-color: var(--accent); background: var(--accent-soft); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline-color: var(--accent); }
input, select, textarea { border-color: var(--line); background: var(--control-bg); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
.admin-nav { background: rgb(17 21 29 / 96%); }
.admin-nav button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.guest-app { background: var(--surface); }
.guest-game-header { border-color: var(--line); background: rgb(17 21 29 / 96%); }
.guest-live-dot { background: var(--success); box-shadow: 0 0 0 .28rem rgb(131 230 178 / 12%); }
.guest-game-view .game-form { border-color: var(--line); background: var(--surface); box-shadow: none; }
.guest-game-view .game-form .status-box { border-color: var(--line); background: var(--control-bg); }
.guest-game-view #private-role { border-color: var(--accent); background: var(--surface-raised); }
.guest-game-view #secret-word, .guest-game-view #mimic-secret strong,
.guest-game-view #karaoke-challenge, .guest-game-view #quiz-timer { color: var(--accent-strong); }
.guest-game-view #karaoke-player, .guest-game-view #karaoke-song,
.guest-game-view #karaoke-challenge, .guest-game-view #quiz-answer-form button,
.guest-game-view #dance-player-score, .guest-game-view #statues-player-status {
  border-color: var(--line); background: var(--surface-raised); color: var(--ink);
}
.guest-game-view #quiz-answer-form button:hover,
.guest-game-view #quiz-answer-form button:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
#impostor-player:not([hidden]), #karaoke-player-view:not([hidden]),
#quiz-player:not([hidden]), #mimic-player:not([hidden]), #dance-player:not([hidden]),
#statues-player:not([hidden]) {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
#impostor-player > h2, #impostor-player #role-label,
#karaoke-player-view > h2, #karaoke-player-view #karaoke-progress,
#karaoke-player-view #karaoke-challenge, #quiz-player > h3,
#quiz-player #quiz-timer, #mimic-player #mimic-timer,
#mimic-player #mimic-player-message, #dance-player #dance-player-team,
#dance-player #dance-player-score, #dance-tv #dance-tv-progress,
#impostor-tv #game-phase, #impostor-tv #game-result,
#karaoke-tv #karaoke-progress, #karaoke-tv #karaoke-challenge,
#quiz-tv #quiz-timer, #statues-tv #statues-tv-phase {
  color: var(--accent-strong);
  text-shadow: none;
}
#impostor-player #private-role, #impostor-player #vote-form,
#impostor-tv #vote-progress, #karaoke-player-view #karaoke-progress,
#karaoke-player-view #karaoke-challenge, #karaoke-player-view #karaoke-song,
#quiz-player > h3, #quiz-player #quiz-answer-form button,
#quiz-tv #quiz-options p, #mimic-player #mimic-player-message,
#dance-player #dance-player-team, #dance-tv #dance-tv-progress,
#dance-tv #dance-tv-results li {
  border-color: var(--line);
  background: var(--surface-raised);
  box-shadow: none;
}
#impostor-player #vote-form button { background: var(--accent); color: var(--on-accent); }
#karaoke-player-view #karaoke-challenge { border-left: 4px solid var(--accent); color: var(--ink); }
#mimic-player #mimic-timer { text-shadow: none; }
.tv-body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(243 245 247 / 2.2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(243 245 247 / 2.2%) 1px, transparent 1px);
  background-size: 44px 44px;
}
.tv-panel:not([hidden]):not(#bingo-tv) {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.tv-panel:not(#bingo-tv) .label, .tv-panel:not(#bingo-tv) #active-game,
.tv-panel:not(#bingo-tv) #round-starter { color: var(--accent-strong); }
.tv-panel#quiz-tv #quiz-options p { border-color: var(--line); background: var(--surface-raised); }
.store-card { border-color: var(--line); background: var(--surface-raised); box-shadow: none; }
.store-card button:disabled { border-color: var(--line); background: #303744; color: var(--muted); }
.admin-game-alert { border-color: rgb(255 124 145 / 40%); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Neutraliza tintes antiguos de página; cada juego conserva su composición. */
body[data-view="guest"]:has(#impostor-player:not([hidden])) .guest-app,
body[data-view="guest"]:has(#karaoke-player-view:not([hidden])) .guest-app,
body[data-view="guest"]:has(#mimic-player:not([hidden])) .guest-app,
body[data-view="guest"]:has(#quiz-player:not([hidden])) .guest-app,
body[data-view="guest"]:has(#bingo-player:not([hidden])) .guest-app,
body[data-view="guest"]:has(#dance-player:not([hidden])) .guest-app,
body[data-view="guest"]:has(#statues-player:not([hidden])) .guest-app {
  background: var(--surface);
}
body[data-view="tv"] .tv-panel#impostor-tv:not([hidden]),
body[data-view="tv"] .tv-panel#karaoke-tv:not([hidden]),
body[data-view="tv"] .tv-panel#mimic-tv:not([hidden]),
body[data-view="tv"] .tv-panel#quiz-tv:not([hidden]),
body[data-view="tv"] .tv-panel#dance-tv:not([hidden]),
body[data-view="tv"] .tv-panel#statues-tv:not([hidden]) {
  border-color: var(--line);
  background: var(--surface);
}
.store-header {
  border-color: var(--line);
  background: var(--surface);
}
.store-header p:not(.eyebrow), .store-wallet span, .store-wallet small,
.store-price span, .store-section-heading > span { color: var(--muted); }
.store-wallet { border-color: var(--line); background: var(--surface-raised); }
.store-wallet strong, .store-price, .store-price strong { color: var(--accent-strong); }
.store-section-heading > span, .store-guide, .menu-guide, .game-guide,
.store-product-placeholder, .store-product-placeholder span,
.product-image-placeholder {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--ink);
}
.store-card:nth-child(3n + 2) .store-product-placeholder,
.store-card:nth-child(3n) .store-product-placeholder,
.product-image-placeholder { background: var(--surface-raised); }
.store-guide summary, .menu-guide summary, .game-guide summary,
.store-redemptions h2 { color: var(--accent-strong); }
.store-product-placeholder strong { color: var(--accent); text-shadow: none; }
.product-image-preview { border-color: var(--line); background: var(--control-bg); }

/* Más lenguaje de videojuego: marco HUD, esquinas por píxel y controles firmes. */
:root {
  --radius-card: 11px;
  --radius-control: 8px;
  --hud-mark: rgb(52 120 246 / 78%);
}
.card:not(.bingo-player), .guest-app, .game-form, .tv-panel:not(#bingo-tv),
.store-header, .camera-module, .team-card, .mimic-squad {
  border-radius: 11px;
  background-image:
    linear-gradient(var(--hud-mark), var(--hud-mark)),
    linear-gradient(var(--hud-mark), var(--hud-mark)),
    linear-gradient(var(--hud-mark), var(--hud-mark)),
    linear-gradient(var(--hud-mark), var(--hud-mark));
  background-size: 26px 2px, 2px 14px, 26px 2px, 2px 14px;
  background-position: 14px 0, 14px 0, calc(100% - 14px) 100%, calc(100% - 14px) calc(100% - 14px);
  background-repeat: no-repeat;
}
.card:not(.bingo-player), .guest-app, .game-form,
.tv-panel:not(#bingo-tv), .store-header { position: relative; }
.card:not(.bingo-player)::before, .guest-app::before, .game-form::before,
.tv-panel:not(#bingo-tv)::before, .store-header::before {
  position: absolute;
  top: -1px;
  left: 18px;
  width: 62px;
  height: 3px;
  background: var(--accent);
  box-shadow: 6px 4px 0 -1px rgb(52 120 246 / 36%);
  content: "";
  pointer-events: none;
}
.card:not(.bingo-player)::after, .guest-app::after, .game-form::after,
.tv-panel:not(#bingo-tv)::after, .store-header::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 3px;
  height: 3px;
  background: var(--accent);
  box-shadow: -5px 0 0 rgb(52 120 246 / 62%), 0 -5px 0 rgb(52 120 246 / 62%), -5px -5px 0 var(--accent);
  content: "";
  pointer-events: none;
}
.card:not(.bingo-player), .guest-app, .tv-panel:not(#bingo-tv) {
  box-shadow: inset 0 0 0 1px rgb(243 245 247 / 2%), 0 16px 36px rgb(0 0 0 / 28%);
}
.guest-brand-mark {
  border-radius: 3px !important;
  box-shadow: 3px 3px 0 rgb(52 120 246 / 24%);
}
.admin-header h1::before {
  display: inline-block;
  width: .36em;
  height: .36em;
  margin-right: .38em;
  background: var(--accent);
  box-shadow: .18em .18em 0 rgb(52 120 246 / 32%);
  content: "";
  vertical-align: .08em;
  image-rendering: pixelated;
}
.admin-header { padding: 0 0 .85rem; border-bottom: 1px solid var(--line); }
.admin-header::after, .tv-header::after {
  display: block;
  width: 52px;
  height: 3px;
  margin-top: .8rem;
  background: var(--accent);
  content: "";
}
.admin-panel > h2:first-child, .store-section-heading h2 {
  position: relative;
  padding-left: .8rem;
  border-left: 3px solid var(--accent);
}
.admin-nav button {
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: -.02em;
}
.admin-nav button[aria-selected="true"] {
  box-shadow: inset 0 -3px 0 var(--accent), inset 0 0 0 1px rgb(52 120 246 / 18%);
}
button, .store-link, input, select, textarea { border-radius: 7px; }
button:not(:disabled) { box-shadow: 0 2px 0 rgb(0 0 0 / 35%); }
button:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
button.primary-action, .start-game-button, .join-form button, .store-card button {
  box-shadow: 0 3px 0 #2052a5;
  letter-spacing: .01em;
}
button.primary-action:active, .start-game-button:active,
.join-form button:active, .store-card button:active { box-shadow: 0 1px 0 #2052a5; }
.eyebrow, .label { letter-spacing: .14em; }
.guest-app-bar { border-bottom-style: dashed; }
.guest-room-code, .guest-player-chip, .pill {
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: .01em;
}
.guest-game-view > section:not([hidden]) {
  background-image: linear-gradient(90deg, rgb(52 120 246 / 5%) 1px, transparent 1px);
  background-size: 28px 100%;
}
.guest-game-view .game-form > h2 { border-bottom-style: dashed; }
.tv-header h1 { letter-spacing: -.045em; }
.tv-header .eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.tv-header .eyebrow::before { width: 8px; height: 8px; background: var(--accent); content: ""; image-rendering: pixelated; }
.tv-panel:not(#bingo-tv) { border-left: 3px solid var(--accent); }
.tv-panel:not(#bingo-tv) #active-game { letter-spacing: -.04em; }
.tv-panel:not(#bingo-tv) .label { display: inline-block; padding: .3rem .55rem; border: 1px solid var(--line); background: var(--control-bg); }
.tv-panel#impostor-tv #game-phase, .tv-panel#karaoke-tv #karaoke-progress,
.tv-panel#quiz-tv #quiz-timer, .tv-panel#mimic-tv #mimic-timer,
.tv-panel#dance-tv #dance-tv-progress, .tv-panel#statues-tv #statues-tv-phase {
  width: fit-content;
  margin-inline: auto;
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  background: var(--control-bg);
  font-family: var(--font-mono);
}
.status-box, .player-list li, .team-card, .admin-panel .player-row,
.camera-module, .mimic-squad, .dance-score-panel {
  border-radius: 7px;
  box-shadow: inset 3px 0 0 rgb(52 120 246 / 30%);
}
progress {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--control-bg);
  accent-color: var(--accent);
}
progress::-webkit-progress-bar { background: var(--control-bg); }
progress::-webkit-progress-value, progress::-moz-progress-bar {
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px, #70aaff 10px 12px);
}
input[type="range"] { accent-color: var(--accent); }
.player-list li, .team-card, .admin-panel .player-row,
.camera-module, .mimic-squad, .dance-score-panel { border-color: var(--line); }
.store-product-placeholder, .product-image-placeholder {
  background-image:
    linear-gradient(rgb(52 120 246 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(52 120 246 / 5%) 1px, transparent 1px) !important;
  background-size: 12px 12px !important;
}
.store-stock, .store-stock.is-empty { border-radius: 4px; font-family: var(--font-mono); }
.store-price strong, .store-wallet strong, .leaderboard li::marker,
#quiz-timer, #mimic-timer { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .card:not(.bingo-player), .guest-app, .store-header { border-radius: 8px; }
  .admin-nav button { font-size: .7rem; }
}

/* Correcciones de contraste y adornos duplicados: una marca HUD por superficie. */
body[data-view="admin"], body[data-view="guest"], body[data-view="tv"] {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(243 245 247 / 2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(243 245 247 / 2%) 1px, transparent 1px);
  background-size: 40px 40px;
}
.card:not(.bingo-player), .guest-app, .game-form, .tv-panel:not(#bingo-tv),
.store-header, .camera-module, .team-card, .mimic-squad {
  background-image: none;
}
.card:not(.bingo-player)::after, .guest-app::after, .game-form::after,
.tv-panel:not(#bingo-tv)::after, .store-header::before, .store-header::after {
  display: none;
}
.store-product-placeholder, .product-image-placeholder {
  background-image: radial-gradient(rgb(52 120 246 / 10%) 1px, transparent 1.4px) !important;
  background-size: 10px 10px !important;
}
.store-card button:disabled {
  border-color: var(--line) !important;
  background: #252c36 !important;
  color: #9aa4b2 !important;
  box-shadow: none !important;
  transform: none !important;
}
.store-header p:not(.eyebrow), .store-wallet span, .store-wallet small,
.store-price span { color: var(--muted); }
.store-price strong, .store-wallet strong { color: #78b7ff; }
.pill#room-status { border-radius: 4px; border-color: var(--line); background: var(--surface-raised); color: var(--accent-strong); }
.store-page::before { display: none; }
.store-header::before {
  display: block;
  top: -1px;
  left: 14px;
  width: 56px;
  height: 3px;
}

/* Ranking del lobby: puestos visibles, nombres legibles y puntos alineados. */
#leaderboard {
  display: grid;
  gap: .5rem;
  margin: .75rem 0;
  padding: 0;
  list-style: none;
  counter-reset: lobby-rank;
}
#leaderboard li:not(.empty) {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-width: 0;
  min-height: 3.25rem;
  padding: .65rem .8rem;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-raised);
  counter-increment: lobby-rank;
}
#leaderboard li:not(.empty)::before {
  display: grid;
  width: 2.25rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  content: counter(lobby-rank, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 800;
}
#leaderboard li:first-child:not(.empty) {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
  font-weight: 800;
}
#leaderboard li:first-child:not(.empty)::before {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.tv-panel #leaderboard li:not(.empty) {
  min-height: clamp(3.5rem, 7vh, 5rem);
  grid-template-columns: clamp(3rem, 5vw, 4rem) minmax(0, 1fr);
  gap: clamp(.8rem, 1.5vw, 1.25rem);
  padding: .7rem 1rem;
}
.tv-panel #leaderboard li:not(.empty)::before {
  width: clamp(2.7rem, 4.5vw, 3.5rem);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
}
@media (max-width: 420px) {
  #leaderboard li:not(.empty) { gap: .55rem; padding: .6rem; }
}
body.tv-music-mode .tv-main > #roulette-tv-result:not([hidden]) { display:grid !important; }
.pose-admin, .pose-player, .pose-tv { text-align: center; }
.pose-figure { display: grid; place-items: center; width: min(48vw, 220px); aspect-ratio: 1; margin: 1rem auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); }
.pose-figure svg { width: 82%; height: 82%; overflow: visible; }
.pose-figure circle, .pose-figure path { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.pose-figure circle { fill: var(--accent); stroke: none; }
.pose-tv h2 { font-size: clamp(2rem, 6vw, 4.5rem); }
.pose-tv #pose-tv-timer { font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 800; }
#pose-player-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .5rem; margin: .75rem 0; text-align: left; }
#pose-player-options label { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem; border: 1px solid var(--line); border-radius: 8px; }
#pose-player-options input { width: 1.2rem; height: 1.2rem; }
@media (max-width: 540px) { .pose-figure { width: min(62vw, 200px); } .pose-admin fieldset { padding: .65rem; } }