/* Public experience: one composition for TV, one for repeated mobile taps.
   Legacy styles.css continues to own access and organizer pages. */
body[data-view="screen"] { --tv-top:112px; background:#110b24; }
body[data-view="screen"]:has(.demo-banner) { --tv-top:156px; }
body[data-view="screen"] .topbar { height:52px; padding-inline:24px; }
body[data-view="screen"] .tv-round-controls { height:60px; min-height:60px; padding:7px 24px; }
body[data-view="screen"] .tv-round-controls strong { font-size:12px; }
body[data-view="screen"] .tv-round-controls span { font-size:12px; }
body[data-view="screen"] .demo-banner { height:44px; padding:6px 16px; gap:14px; }
.tv-layout.page { width:100%; max-width:none; height:calc(100svh - var(--tv-top)); margin:0; padding:16px 24px 10px; display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,17vw,340px); grid-template-rows:minmax(0,1fr) auto; gap:14px 24px; }
.tv-stage-panel { min-width:0; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.tv-layout .tv-battle { width:100%; max-width:calc((100svh - var(--tv-top) - 96px)*1916/821); flex-shrink:0; border-radius:7px; overflow:hidden; box-shadow:0 0 0 3px #07030f,0 0 0 5px #7b519044,0 16px 60px #0006; }
.tv-layout .tv-panorama { width:100%; height:auto; }
.tv-layout .tv-meter-label { padding-inline:.8cqw; }
.tv-layout .tv-meter-label>strong { font-size:clamp(18px,2.2cqw,43px); }
.tv-layout .tv-vote-count { font-size:clamp(12px,1.25cqw,24px); }
.tv-sidebar { display:flex; flex-direction:column; justify-content:center; min-width:0; min-height:0; gap:12px; }
.tv-clock-panel { border:2px solid #ffdf314d; border-radius:12px; padding:12px 14px; background:#271740; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tv-clock-panel .round-meta { text-align:left; gap:6px; }
.tv-clock-panel .round-label { font-size:14px; }
.tv-clock-panel .clock-label { font-size:11px; max-width:90px; line-height:1.3; color:#ded1f2; }
.tv-clock-panel .clock { transform:none; min-width:0; font-size:clamp(40px,3.4vw,65px); padding:0; border:0; box-shadow:none; background:transparent; color:#ffe730; gap:7px; }
.tv-clock-panel .clock .icon { width:22px; height:22px; }
.tv-live-total { display:flex; justify-content:center; align-items:center; gap:12px; padding:2px 10px; }
.tv-live-total strong { font:54px/1 var(--display); font-variant-numeric:tabular-nums; color:#ffe730; }
.tv-live-total>span { font-size:12px; line-height:1.4; font-weight:900; letter-spacing:.07em; color:#eee2ff; }
.tv-sidebar .participation { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px; background:#fef9eb; border:3px solid #100d20; box-shadow:4px 5px 0 #0009; border-radius:14px; text-align:center; color:#100d20; }
.tv-sidebar .qr-link { order:1; width:min(100%,248px); height:auto; aspect-ratio:1; border:1px solid #100d2018; border-radius:4px; padding:0; }
.tv-sidebar .participation>div:not(.qr-actions):not(.qr-link) { order:0; width:100%; }
.tv-sidebar .participation .eyebrow { color:#602cb5; font-size:10px; letter-spacing:.12em; }
.tv-sidebar .participation h2 { font:italic 27px/1.02 var(--display); margin:6px auto 0; max-width:250px; }
.tv-sidebar .participation p,.tv-sidebar .steps { display:none; }
.tv-sidebar .vote-url { color:#4c2676; font-size:12px; font-weight:700; line-height:1.4; margin:8px 0 0; }
.tv-sidebar .qr-actions { order:2; max-width:none; width:100%; align-items:center; gap:7px; }
.tv-sidebar .qr-actions .button { min-height:36px; font-size:11px; background:#ece0ff; padding:7px 12px; box-shadow:none; }
.tv-sidebar .qr-actions small { font-size:11px; line-height:1.35; color:#534166; }
.tv-sidebar .qr-empty { font-size:13px; background:#ece0ff; border:2px dashed #8151bb; }
.tv-sidebar .qr-empty>.icon { height:34px; width:34px; margin-bottom:5px; }
.tv-sidebar .state-banner { margin:0; font-size:13px; padding:10px 12px; border:1px solid #ffffff2b; border-radius:8px; background:#241637; line-height:1.5; }
.tv-sidebar .state-banner>.icon,.tv-sidebar .state-banner .tiny-tag { display:none; }
.tv-sidebar .banner-copy>strong { display:block; color:#fff0a0; }
.tv-sidebar .banner-copy>span { display:block; color:#ded1f2; font-size:12px; }
.tv-result-note { text-align:center; font-size:14px; color:#e4d4f6; padding:6px; }
.tv-layout>.site-footer { grid-column:1/-1; min-height:48px; padding:10px 0 0; border-top:1px solid #ffffff20; }
.tv-layout .display-controls { gap:10px; }
.tv-layout .display-controls .button { min-height:38px; font-size:12px; padding:7px 12px; }
.tv-layout .developer-credit { font-size:13px; }
.tv-layout .footer-symbols { display:none; }
.tv-layout .volume-control { font-size:12px; gap:8px; }
.tv-layout .winner-stage { border-radius:10px; overflow:hidden; flex-shrink:1; min-height:0; }
.tv-layout .winner-announcement { padding:14px 20px; min-height:0; }
.tv-layout .winner-announcement .comic-title { font-size:clamp(30px,3vw,56px); }
.tv-layout .winner-announcement .eyebrow { font-size:12px; margin-bottom:10px; }
.tv-layout .victory-callout { font-size:36px; margin-bottom:10px; }
.tv-layout .victory-callout span { font-size:20px; }
.tv-layout .winning-scenes { min-height:0; }
.tv-layout .winning-scene .winner-art { width:100%; height:auto; max-height:calc(100svh - var(--tv-top) - 270px); object-fit:contain; }
.tv-layout .winning-scene figcaption { padding:10px 16px; font-size:14px; }
.tv-layout .winning-scene figcaption strong { font-size:22px; }
.tv-layout .result-bottom { margin:0; min-height:44px; font-size:14px; }
.tv-layout .result-bottom .button { min-height:44px; font-size:13px; }
.tv-layout .result-bottom strong { font-size:21px; }
.tv-layout .winner-stage.tie .winning-scene { align-self:center; }
.tv-layout .empty-stage { min-height:300px; font-size:18px; }
.tv-layout .winner-stage.empty .winner-announcement { padding:28px; }
/* Each raster piece remains in its original scene coordinates. */
.duel-title-entry { transform-origin:958px 90px; animation:duel-title-enter .75s cubic-bezier(.2,.8,.3,1) both; }
.duel-title { transform-origin:958px 90px; animation:duel-title-idle 9s 1s ease-in-out infinite; }
.final-countdown .duel-title { animation:duel-title-tension 1s ease-in-out infinite; }
.scene-guest-head { animation:guest-nod 7s ease-in-out infinite; }
.scene-guest-arm { animation:guest-cheer 9s ease-in-out infinite; }
.guest-criolla .scene-guest-head { animation-delay:-3.4s; animation-duration:8.2s; }
.guest-salsa .scene-guest-head { animation-delay:-5.2s; animation-duration:6.7s; }
.celebrating .scene-guest-head { animation:guest-victory 1.2s ease-in-out 5; }
.celebrating .scene-guest-arm { animation:guest-cheer 1.5s ease-in-out 4; }
@keyframes duel-title-enter { 0%{opacity:0;transform:translateY(-18px) scale(.94)} 65%{opacity:1;transform:translateY(3px) scale(1.015)} 100%{opacity:1;transform:none} }
@keyframes duel-title-idle { 0%,65%,100%{transform:none} 73%{transform:rotate(-.45deg) scale(1.007)} 82%{transform:rotate(.35deg)} 90%{transform:none} }
@keyframes duel-title-tension { 0%,100%{transform:scale(1)} 50%{transform:scale(1.012) rotate(.25deg)} }
@keyframes guest-nod { 0%,35%,70%,100%{transform:rotate(0)} 45%,55%{transform:rotate(1.6deg)} 81%{transform:rotate(-1deg)} }
@keyframes guest-cheer { 0%,48%,90%,100%{transform:rotate(0)} 58%,76%{transform:rotate(-2.2deg)} 66%{transform:rotate(1deg)} }
@keyframes guest-victory { 0%,100%{transform:rotate(-1deg)} 50%{transform:rotate(2deg)} }
/* Mobile ballot: three large targets, a stable HUD and confirmed-only totals. */
body[data-view="vote"] .topbar { height:54px; padding-inline:16px; gap:12px; }
body[data-view="vote"] .brand-record { width:28px; height:28px; }
body[data-view="vote"] .brand-text { font-size:13px; }
.voter-experience.page { width:min(100%,620px); padding:14px 16px 18px; }
.voter-intro { margin-bottom:12px; }
.voter-intro>.eyebrow { font-size:9px; color:#cdb5ee; letter-spacing:.12em; }
.voter-intro h1 { font-size:32px; margin-top:5px; line-height:1.05; }
.voter-intro>p { margin-top:6px; font-size:12px; color:#e0d3ef; }
.voter-hud { position:sticky; top:8px; z-index:20; display:flex; justify-content:space-between; gap:14px; align-items:center; background:#2c1848; border:2px solid #8f5ac8; border-radius:12px; box-shadow:0 8px 24px #090312aa; padding:9px 12px; }
.voter-hud .round-clock { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.voter-hud .round-meta { flex-direction:row; text-align:left; align-items:center; gap:7px; }
.voter-hud .round-label,.voter-hud .clock-label { font-size:9px; max-width:none; }
.voter-hud .clock { transform:none; border:0; background:none; color:#ffe730; box-shadow:none; min-width:0; font-size:36px; padding:0; gap:6px; }
.voter-hud .clock .icon { width:21px; height:21px; }
.voter-hud .my-taps { display:flex; align-items:center; gap:10px; grid-column:auto; grid-row:auto; font-size:9px; text-align:right; letter-spacing:.04em; }
.voter-hud .my-taps>span { line-height:1.4; }
.voter-hud .my-taps>span>span { display:block; color:#ceb9e5; }
.voter-hud .my-taps b { font:42px/1 var(--display); color:#ffe730; font-variant-numeric:tabular-nums; }
.pending-pill { position:absolute; bottom:-9px; right:10px; font-size:10px; line-height:1.3; border:2px solid #100d20; border-radius:20px; padding:3px 8px; background:#ffe730; color:#100d20; font-weight:800; }
.voter-experience .tap-status { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; min-height:72px; margin:12px 0; padding:10px 11px; border:1px solid #9a6cc777; border-left:4px solid #cba1ff; border-radius:9px; background:#251735; }
.tap-status-symbol { display:grid; place-items:center; align-self:start; color:#dfbcff; padding-top:2px; }
.tap-status-symbol .icon { width:20px; height:20px; }
.voter-experience #tap-state-title { display:block; font-size:13px; color:#fff2bb; line-height:1.3; }
.voter-experience #tap-state-detail { display:block; min-height:30px; margin-top:3px; font-size:12px; line-height:1.35; color:#e8dbf5; }
.voter-experience .tap-status[data-state="confirmed"] { border-left-color:#b7f449; }
.voter-experience .tap-status[data-state="sending"] { border-left-color:#ffe730; }
.voter-experience .tap-status[data-state="offline"],.voter-experience .tap-status[data-state="error"] { border-left-color:#ffae5b; }
.voter-experience .tap-status[data-state="paused"] { border-left-color:#cba1ff; }
.voter-experience #retry-taps,.voter-experience #tap-error { grid-column:1/-1; }
.voter-experience .ballot { grid-template-columns:1fr; gap:12px; margin:0; max-width:none; }
.voter-experience .tap-card { border:3px solid #100d20; box-shadow:4px 5px 0 #05020d; border-radius:12px; background:linear-gradient(125deg,var(--deep),var(--accent)); overflow:visible; }
.voter-experience .tap-card[data-category="rock"] { --deep:#0755cf; --accent:#00b8ff; }
.voter-experience .tap-card[data-category="criolla"] { --deep:#b90e39; --accent:#ff3156; }
.voter-experience .tap-card[data-category="salsa"] { --deep:#f58c00; --accent:#ffce25; }
.voter-experience .tap-vote { display:grid; grid-template-columns:128px minmax(0,1fr) 34px; align-items:stretch; height:132px; border-radius:9px; isolation:isolate; }
.voter-experience .tap-vote::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,#fff8,transparent 75%); opacity:0; z-index:4; }
.voter-experience .tap-vote:disabled { opacity:.7; }
.ballot-art { display:block; position:relative; min-width:0; overflow:hidden; border-right:2px solid #100d20; background:#171026; }
.ballot-art .illustrated-scene { width:100%; height:100%; display:block; }
.ballot-number { position:absolute; left:6px; top:6px; width:24px; height:24px; display:grid; place-items:center; font:15px var(--display); background:#100d20; border:1px solid #fff8; border-radius:50%; color:#fff; }
.ballot-copy { padding:12px 10px; display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; background:radial-gradient(#ffffff22 .6px,transparent 1px) 0 0/5px 5px; }
.ballot-tagline { font-size:10px; line-height:1.2; color:#fff; font-weight:750; text-shadow:0 1px 2px #100d20; }
.ballot-name { font:italic 29px/.98 var(--display); color:#fff9e8; text-shadow:2px 2px 0 #100d20; -webkit-text-stroke:.6px #100d20; paint-order:stroke fill; letter-spacing:.01em; }
.ballot-name>span { display:block; font-size:.76em; margin-top:2px; }
.ballot-bottom { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:2px; flex-wrap:wrap; }
.voter-experience .tap-action { display:inline-flex; min-height:27px; padding:5px 8px; margin:0; border:0; background:#100d20; color:#fff9eb; border-radius:5px; font-size:10px; letter-spacing:.03em; }
.voter-experience .tap-count { display:inline; margin:0; font-size:10px; color:#fff; font-weight:800; text-shadow:0 1px 2px #100d20; }
.ballot-plus { display:grid; place-items:center; align-self:center; width:28px; height:28px; color:#100d20; background:#fff3c7; border:2px solid #100d20; border-radius:50%; margin-right:5px; box-shadow:2px 2px 0 #100d20; }
.ballot-plus>.icon { width:17px; height:17px; }
.voter-experience .tap-card.last-tapped { box-shadow:0 0 0 2px #ffe730,4px 5px 0 #05020d; }
.voter-experience .tap-pulse { animation:none; }
.voter-experience .tap-pulse::after { animation:tap-ink .18s ease-out; }
@keyframes tap-ink { 0%,100%{opacity:0} 45%{opacity:1} }
.mobile-live-results { margin-top:16px; border-top:1px solid #ffffff25; }
.mobile-live-results>summary { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; font-size:12px; font-weight:750; cursor:pointer; color:#d9c5ef; }
.mobile-live-results>summary::after { content:'⌄'; font-size:20px; }
.mobile-live-results[open]>summary::after { content:'⌃'; }
.mobile-live-results .mini-results { margin:0 0 12px; padding:14px; }
.voter-experience>.site-footer { margin-top:8px; padding-top:12px; flex-wrap:wrap; justify-content:center; gap:12px 20px; border-top:1px solid #ffffff20; }
.voter-experience .developer-credit { font-size:12px; }
.voter-experience .footer-symbols { display:none; }
.voter-experience .site-footer>a:not(.developer-credit) { font-size:11px; color:#cbb5e3; }
.demo-mobile-banner { display:flex; justify-content:space-between; gap:8px; padding:6px 12px; }
.demo-mobile-banner strong,.demo-mobile-banner a,.demo-mobile-banner button { font-size:9px; }
/* Narrow screens use normal document flow. TV targets retain every control. */
@media(min-width:760px) {
  .voter-experience.page { width:min(100%,1100px); padding-top:24px; }
  .voter-experience .ballot { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .voter-experience .tap-vote { display:flex; flex-direction:column; height:auto; }
  .voter-experience .ballot-art { width:100%; height:250px; border-right:0; border-bottom:2px solid #100d20; }
  .voter-experience .ballot-copy { padding:18px; min-height:150px; width:100%; }
  .voter-experience .ballot-name { font-size:38px; }
  .voter-experience .ballot-plus { position:absolute; right:10px; top:270px; }
  .voter-experience .ballot-bottom { margin-top:12px; }
  .voter-experience .tap-action { font-size:12px; padding:9px 12px; }
}
@media(max-width:1100px) {
 body[data-view="screen"] { --tv-top:124px; }
 body[data-view="screen"]:has(.demo-banner) { --tv-top:190px; }
 .tv-layout.page { height:auto; min-height:calc(100svh - var(--tv-top)); grid-template-columns:minmax(0,1fr) 260px; padding:16px; gap:16px; }
 .tv-layout .tv-battle { max-width:none; }
 .tv-sidebar .qr-link { width:190px; }
 .tv-clock-panel .clock { font-size:40px; }
 .tv-sidebar .participation h2 { font-size:24px; }
}
@media(max-width:760px) {
 body[data-view="vote"] .topbar { padding-inline:14px; }
 body[data-view="vote"] .view-badge,body[data-view="vote"] .change-access { display:none; }
 body[data-view="vote"] .organizer-shortcut { font-size:9px; min-height:34px; padding:5px 8px; }
 body[data-view="vote"] .topbar-right { gap:10px; }
 body[data-view="screen"] .topbar { padding-inline:14px; }
 body[data-view="screen"] .tv-round-controls { height:auto; }
 body[data-view="screen"] .demo-banner { height:auto; }
 .tv-layout.page { display:flex; flex-direction:column; height:auto; min-height:0; padding:16px 12px; }
 .tv-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
 .tv-sidebar .participation,.tv-sidebar .state-banner,.tv-result-note { grid-column:1/-1; }
 .tv-sidebar .participation { padding:16px; }
 .tv-sidebar .qr-link { width:220px; }
 .tv-clock-panel { padding:10px; }
 .tv-clock-panel .clock { font-size:32px; }
 .tv-clock-panel .round-label { font-size:11px; }
 .tv-clock-panel .clock-label { font-size:9px; }
 .tv-live-total { padding:0; }
 .tv-live-total strong { font-size:40px; }
 .tv-live-total>span { font-size:10px; }
 .tv-layout>.site-footer { flex-wrap:wrap; justify-content:center; }
 .tv-layout .display-controls { flex-wrap:wrap; justify-content:center; }
 .tv-layout .winning-scene .winner-art { max-height:none; }
 .tv-layout .winner-stage.tie .winning-scenes { flex-direction:column; }
 .tv-layout .winner-announcement .comic-title { font-size:30px; }
 .tv-layout .result-bottom { flex-wrap:wrap; font-size:12px; }
}
@media(max-width:360px) {
 .voter-experience.page { padding-inline:12px; }
 .voter-intro h1 { font-size:28px; }
 .voter-experience .tap-vote { grid-template-columns:102px minmax(0,1fr) 30px; height:130px; }
 .ballot-copy { padding:10px 8px; }
 .ballot-name { font-size:26px; }
 .ballot-tagline { font-size:9px; }
 .voter-experience .tap-count { font-size:9px; }
 .ballot-plus { width:25px; height:25px; }
 .voter-hud .my-taps { font-size:8px; gap:7px; }
 .voter-hud .my-taps b { font-size:36px; }
}
@media(min-width:1101px) and (max-height:850px) {
 .tv-layout.page { padding-top:10px; gap:8px 18px; }
 .tv-sidebar { gap:8px; }
 .tv-sidebar .qr-link { width:170px; }
 .tv-sidebar .participation { padding:10px; gap:8px; }
 .tv-sidebar .participation h2 { font-size:23px; }
 .tv-sidebar .vote-url { display:none; }
 .tv-sidebar .state-banner { font-size:11px; padding:8px; }
 .tv-clock-panel { padding:8px 10px; }
 .tv-clock-panel .clock { font-size:43px; }
 .tv-live-total strong { font-size:38px; }
 .tv-layout .winner-announcement .comic-title { font-size:36px; }
 .tv-layout .winning-scene .winner-art { max-height:calc(100svh - var(--tv-top) - 230px); }
}
@media(prefers-reduced-motion:reduce) {
 .duel-title-entry,.duel-title,.scene-guest-head,.scene-guest-arm { animation:none; }
 .voter-experience .tap-pulse::after { animation:none; }
}
.light-motion .duel-title { animation:none; }