:root{
  /* Panamá Cuenta — navy + oro. Nombres viejos (--clay/--sand/--teal…) se conservan como alias. */
  --navy:#0B1F3A; --navy-2:#16315A; --navy-soft:#E8EDF5;
  --gold:#C9A227; --gold-d:#A9871B; --gold-soft:#F7EFD4; --gold-ink:#7A5F0E;
  --bg:#F5F6F9; --bg-2:#ECEFF5; --card:#FFFFFF; --ink:#0B1F3A; --muted:#36465C; --line:#D7DEE9;
  --sand:var(--bg); --sand-2:var(--bg-2);
  --clay:var(--navy); --clay-d:#071427; --teal:var(--navy-2);
  --ok:#1E7A4C; --ok-soft:#E2F2E9; --bad:#B3261E; --bad-soft:#FBE6E4;
  --r:18px; --shadow:0 6px 22px rgba(11,31,58,.08);
  --font-serif:"Fraunces","Source Serif 4",Georgia,"Times New Roman",serif;
  --font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* escala tipográfica (móvil → desktop) */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-md:18px; --fs-lg:clamp(20px,2.4vw,24px);
  --fs-xl:clamp(26px,4vw,34px); --fs-2xl:clamp(30px,5vw,44px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.45;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 50% -240px,#FFFFFF,var(--bg));color:var(--ink);
  min-height:100vh;display:flex;flex-direction:column}
button,input{font:inherit;color:inherit}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;max-width:720px;width:100%;margin:0 auto}
.brand{display:flex;gap:8px;align-items:center;text-decoration:none;color:var(--ink)}
.brand-mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--clay);color:#fff;font-size:20px;box-shadow:var(--shadow)}
.brand-name{font-size:22px;letter-spacing:-.3px}
.brand-name b{color:var(--clay)}
.me{font-size:14px;background:var(--card);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:6px 16px 32px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:14px}

h1{font-size:28px;line-height:1.15;margin:8px 0 6px;letter-spacing:-.5px}
h2{font-size:18px;margin:0 0 10px}
p.lead{color:var(--muted);margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}

.btn{appearance:none;border:0;border-radius:14px;padding:14px 18px;font-weight:650;cursor:pointer;
  background:var(--clay);color:#fff;width:100%;transition:transform .05s,background .15s;min-height:48px}
.btn:hover{background:var(--clay-d)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--clay);border:2px solid var(--clay)}
.btn.ghost:hover{background:var(--navy-soft)}
.btn.teal{background:var(--teal)} .btn.teal:hover{background:var(--navy)}
.btn:disabled{opacity:1;cursor:not-allowed;background:var(--gold-soft);color:var(--navy);box-shadow:none;border:1.5px solid var(--gold-d)}
.btn.sm{padding:8px 12px;min-height:36px;width:auto;font-size:14px}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}

label.f{display:block;font-size:13px;font-weight:650;color:var(--muted);margin:0 0 6px;text-transform:uppercase;letter-spacing:.5px}
.input{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:17px}
.input:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(201,162,39,.35)}
.input.code{text-transform:uppercase;letter-spacing:6px;font-weight:700;text-align:center;font-size:24px}
.field{margin-bottom:16px}

/* chips / options */
.opts{display:grid;gap:8px}
.opts.c4{grid-template-columns:repeat(4,1fr)} .opts.c3{grid-template-columns:repeat(3,1fr)} .opts.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.opts.c4.packs{grid-template-columns:repeat(2,1fr)}}
.opt{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:10px 8px;cursor:pointer;text-align:center;min-height:48px}
.opt small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.opt .ic{font-size:22px;display:block}
.opt[aria-checked="true"]{border-color:var(--clay);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--clay)}

/* sand clock */
.hg{width:34px;height:46px;display:block;margin:0 auto 4px}
.hg .frame{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.hg .glass{fill:#fff;stroke:#9AA8BD;stroke-width:1.2}
.hg .sand{fill:var(--gold)}
.opt[aria-checked="true"] .hg .frame{stroke:var(--clay)}
.hg.off .sand{fill:#C9D1DD}

/* code display */
.codebox{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.code-big{font-size:38px;font-weight:800;letter-spacing:8px;background:#fff;border:2px dashed var(--clay);border-radius:14px;padding:6px 14px 6px 22px}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;justify-content:center}
.tag{font-size:13px;background:var(--sand-2);border-radius:999px;padding:5px 10px}

/* players */
.players{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.player{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.av{width:40px;height:40px;border-radius:12px;background:var(--sand-2);display:grid;place-items:center;font-size:22px}
.pname{font-weight:650}
.pname small{font-weight:500;color:var(--muted);margin-left:6px}
.state{margin-left:auto;font-size:13px;font-weight:650;padding:5px 10px;border-radius:999px}
.state.ready{background:var(--ok-soft);color:var(--ok)} .state.wait{background:var(--bg-2);color:var(--muted)}
.hint{color:var(--muted);font-size:14px;text-align:center;margin:10px 0 0}

/* game */
.qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:var(--muted);font-size:14px}
.qtext{font-size:21px;font-weight:700;line-height:1.3;margin:4px 0 16px}
.answers{display:grid;gap:10px}
.ans{text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px;cursor:pointer;font-size:16px;min-height:52px}
.ans:hover:not(:disabled){border-color:var(--clay)}
.ans.picked{border-color:var(--clay);background:var(--gold-soft)}
.ans.correct{border-color:var(--ok);background:var(--ok-soft)}
.ans.wrong{border-color:var(--bad);background:var(--bad-soft)}
.ans:disabled{cursor:default}
.why{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--navy-soft);border-left:4px solid var(--teal);font-size:15px}
.timer{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.timer .hg{width:26px;height:34px;margin:0}
.bar{height:6px;background:var(--sand-2);border-radius:99px;overflow:hidden;margin-bottom:14px}
.bar > i{display:block;height:100%;background:var(--gold);transition:width .25s linear}
.answered{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.answered span{font-size:13px;background:var(--sand-2);border-radius:99px;padding:4px 9px}
.answered span.done{background:var(--ok-soft);color:var(--ok)}

/* podium */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:16px 0 8px;min-height:220px}
.step{flex:1;max-width:150px;text-align:center}
.step .av{margin:0 auto 6px;width:52px;height:52px;font-size:28px}
.step .blk{border-radius:14px 14px 0 0;color:#fff;font-weight:800;font-size:26px;display:grid;place-items:center}
.step.p1 .blk{height:130px;background:var(--gold)} .step.p2 .blk{height:95px;background:#9AA8BD} .step.p3 .blk{height:70px;background:#B98B5E}
.step .nm{font-weight:700;font-size:15px} .step .pts{color:var(--muted);font-size:13px;margin-bottom:6px}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rank li{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.rank li b{margin-left:auto}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:10;box-shadow:var(--shadow)}
.err{color:var(--bad);font-size:14px;margin-top:6px;min-height:1em}
.center{text-align:center}
@keyframes flip{0%,45%{transform:rotate(0)}50%,95%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.spin{animation:flip 3s ease-in-out infinite}

/* ===== roles / equipos / TV (primer diff jugable) ===== */
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:3px}
.muted{color:var(--muted);font-weight:500}
.rolechip{font-size:13px;font-weight:650;background:var(--sand-2);border-radius:999px;padding:4px 10px;vertical-align:middle;margin-left:6px}
.notice{border-color:var(--gold);background:var(--gold-soft);font-size:14px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
@media (max-width:560px){.roles{grid-template-columns:1fr}}
.role-card{border:1.5px solid var(--line);background:var(--card);border-radius:var(--r);padding:18px 14px;cursor:pointer;text-align:left;box-shadow:var(--shadow);min-height:120px}
.role-card:hover{border-color:var(--clay)}
.role-card .ic{font-size:30px;display:block;margin-bottom:6px}
.role-card b{display:block;font-size:18px}
.role-card small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
@media (max-width:560px){.role-card{min-height:0;display:grid;grid-template-columns:44px 1fr;column-gap:10px;align-items:center}.role-card .ic{grid-row:span 2;margin:0}}

.share2{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:14px}
.qr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;width:132px;text-align:center}
.qr svg{width:100%;height:auto;display:block}
.qr small{color:var(--muted);font-size:11px}
.qr.big{width:220px;padding:10px}
.tvlinks{display:flex;flex-direction:column;gap:8px}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

.seg{display:flex;gap:6px}.seg .opt{min-height:36px;padding:6px 14px}
.teams{display:grid;gap:10px}
.teams.c2{grid-template-columns:repeat(2,1fr)} .teams.c3{grid-template-columns:repeat(3,1fr)} .teams.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.teams.c3,.teams.c4{grid-template-columns:repeat(2,1fr)}}
.team{border:1.5px solid var(--line);border-top:6px solid var(--tc);border-radius:14px;padding:10px;background:#fff;display:flex;flex-direction:column;gap:8px}
.team.mine{box-shadow:inset 0 0 0 2px var(--tc)}
.thead{font-weight:800;color:var(--tc)}
.tname-in{font-weight:800;color:var(--tc)}
.tmembers{list-style:none;margin:0;padding:0;display:grid;gap:4px;flex:1}
.tmembers li{display:flex;align-items:center;gap:6px;font-size:14px}
.tmembers li .state{padding:2px 7px;font-size:12px}
.tmembers li.empty{color:var(--muted);font-style:italic}
.btn.teamjoin{background:var(--tc);width:100%}
.input.sm{padding:7px 9px;font-size:15px;border-radius:10px}
.stubnote{font-size:12px;color:var(--muted);background:var(--gold-soft);border-radius:10px;padding:6px 10px;margin:10px 0 0}

.roster{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rrow{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 10px}
.rrow .input.sm{flex:1;min-width:0}
.rrow select.input.sm{flex:0 1 140px}
.rrow .input.pts{flex:0 0 84px;text-align:right}
.rrow b.pts{margin-left:auto}
.av.sm{width:30px;height:30px;font-size:18px;border-radius:9px;flex:0 0 auto}
.ttag{font-size:12px;font-weight:700;color:#fff;background:var(--tc);border-radius:999px;padding:2px 8px}
.tdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
details.card summary{cursor:pointer}
details.card[open] summary{margin-bottom:10px}

/* jugador móvil */
.myteam{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--tc);border-radius:14px;padding:8px 12px;margin-bottom:10px;font-weight:700;font-size:14px}
.mini{font-size:12px;font-weight:650;border-radius:999px;padding:3px 8px;background:var(--sand-2);border-bottom:3px solid var(--tc)}
.ans .L{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--sand-2);margin-right:6px;font-size:14px}
.pausebar{background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px;margin-bottom:12px;font-weight:700;text-align:center}
.pausebar small{font-weight:500;opacity:.75}
.is-paused .answers{opacity:.55}
.hostbar{display:flex;gap:10px;margin-bottom:14px}
@media (max-width:560px){ main{padding:4px 10px 24px} .card{padding:14px} .qtext{font-size:19px} .ans{padding:12px;min-height:48px} }

/* marcador por equipo */
.tboard{display:grid;gap:8px;margin-top:10px}
.tscore{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:4px 10px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--tc);border-radius:12px;padding:8px 12px}
.tpos{font-weight:800;color:var(--muted)} .tname{font-weight:700} .tpts{font-size:18px}
.tbar{grid-column:1/-1;height:6px;background:var(--sand-2);border-radius:99px;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--tc);transition:width .4s}

/* ===== TV / living room ===== */
body.tv .topbar{max-width:none;padding:10px 28px}
body.tv .foot{display:none}
body.tv main{max-width:none;padding:0 28px 28px}
.tvwrap{display:grid;grid-template-columns:1fr minmax(280px,26vw);gap:24px;min-height:calc(100vh - 90px)}
@media (max-width:900px){.tvwrap{grid-template-columns:1fr}}
.tvmain{background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:3vw;position:relative;display:flex;flex-direction:column;gap:2vh}
.tvside{background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:24px}
.tvside h2{font-size:clamp(20px,1.8vw,30px)}
.tvkicker,.tvtop{font-size:clamp(18px,1.8vw,30px);color:var(--muted);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.tvtop .timer{font-size:clamp(26px,3vw,54px)}
.tvtop .timer .hg{width:clamp(40px,4vw,72px);height:auto}
.tvmain .bar{height:12px}
.tvq{font-size:clamp(30px,3.6vw,68px);font-weight:800;line-height:1.15;letter-spacing:-.5px}
.tvopts{display:grid;grid-template-columns:1fr 1fr;gap:1.6vw;flex:1;align-content:start}
.tvopt{display:flex;align-items:center;gap:16px;background:#fff;border:2px solid var(--line);border-radius:22px;padding:1.6vw 2vw;font-size:clamp(22px,2.4vw,44px);font-weight:700}
.tvopt .L{flex:0 0 auto;display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:14px;background:var(--clay);color:#fff}
.tvopt:nth-child(2) .L{background:var(--teal)} .tvopt:nth-child(3) .L{background:var(--gold)} .tvopt:nth-child(4) .L{background:#6B5CA5}
.tvopt em{margin-left:auto;font-style:normal;font-size:.7em;color:var(--muted)}
.tvopt.correct{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 0 0 4px rgba(30,122,76,.25)}
.tvopt.dim{opacity:.4}
.why.tv{font-size:clamp(18px,1.7vw,30px)}
.tvhint{font-size:clamp(18px,1.6vw,28px);color:var(--muted);text-align:center}
.tvpause{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,31,58,.82);color:#fff;border-radius:28px;font-size:clamp(48px,7vw,120px);font-weight:800}
.tvjoin{display:flex;gap:3vw;align-items:center;justify-content:center;flex-wrap:wrap}
.tvlabel{font-size:clamp(20px,2vw,34px);color:var(--muted);font-weight:700}
.tvcode{font-size:clamp(60px,8vw,150px);font-weight:900;letter-spacing:.12em;color:var(--clay);line-height:1}
.tvurl{font-size:clamp(13px,1vw,18px);color:var(--muted);word-break:break-all;max-width:40vw}
.teams.tv .team{font-size:clamp(16px,1.5vw,26px)}
.teams.tv .thead{font-size:1.2em}
.teams.tv .tmembers li{font-size:1em}
.tvplayers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:clamp(18px,1.6vw,28px)}
.tvplayers span{background:var(--sand-2);border-radius:999px;padding:6px 14px}
.tvrank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tvrank li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 14px;font-size:clamp(16px,1.4vw,24px)}
.tvrank li span:first-child{font-weight:800;color:var(--muted);width:1.4em}
.tvrank li b{margin-left:auto}
.tboard.big .tscore{padding:14px 16px}
.tboard.big .tname{font-size:clamp(18px,1.6vw,28px)} .tboard.big .tpts{font-size:clamp(26px,2.6vw,48px)}
.tboard.big .tbar{height:10px}
.podium.tv{min-height:50vh}
.podium.tv .step{max-width:260px}
.podium.tv .av{width:90px;height:90px;font-size:48px}
.podium.tv .nm{font-size:clamp(20px,2vw,36px)} .podium.tv .pts{font-size:clamp(16px,1.4vw,26px)}
.podium.tv .p1 .blk{height:30vh} .podium.tv .p2 .blk{height:22vh} .podium.tv .p3 .blk{height:16vh}
.mini{display:inline-flex;gap:4px;max-width:46%}
.mini .mn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){
  .rrow.edit{display:grid;grid-template-columns:30px 1fr 84px;gap:6px}
  .rrow.edit select.input.sm{grid-column:2/4;grid-row:2}
}

/* ===== ajustes revisión Moreno ===== */
.share2{flex-wrap:nowrap;gap:12px;margin-top:12px}
.share2 .qr{width:92px;padding:4px;flex:0 0 auto}
.share2 .qr small{font-size:10px}
.share2 .tvlinks{flex:1;max-width:260px}
.linkbtn{appearance:none;background:none;border:0;color:var(--clay);font-weight:650;font-size:13px;text-decoration:underline;cursor:pointer;margin-top:10px;padding:4px}
details.card summary .muted{font-size:13px}
/* TV ~3 m: opciones y marcador un paso más grandes */
.tvopt{font-size:clamp(26px,2.9vw,54px);padding:1.8vw 2.2vw}
.tvopt em{font-size:.55em;white-space:nowrap}
.tboard.big .tname{font-size:clamp(22px,2vw,36px)}
.tboard.big .tpts{font-size:clamp(32px,3.2vw,60px)}
.tboard.big .tpos{font-size:clamp(18px,1.4vw,26px)}
.tboard.big .tscore{padding:16px 18px}
.tvrank li{font-size:clamp(18px,1.6vw,28px)}
.tvgroup{border-left:6px solid var(--tc);padding-left:10px;margin-bottom:14px}
.tvghead{display:flex;justify-content:space-between;font-weight:800;color:var(--tc);font-size:clamp(20px,1.8vw,32px);margin-bottom:6px}

/* ===== ads UI Moreno ===== */
/* Contenedores reservados (anti-CLS) bajo el contenido: móvil 320×100, desktop 728×90.
   Solo home, hubs de pack y podio móvil; nunca TV/lobby/ronda. El script lo monta en .adslot-frame. */
.adslot{display:flex;flex-direction:column;align-items:center;gap:4px;margin:22px auto 8px;
  width:320px;max-width:100%}
.adslot-label{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);opacity:.8}
.adslot-frame{width:320px;max-width:100%;min-height:100px;height:100px;overflow:hidden;
  border:2px dashed #9AA8BD;border-radius:10px;
  background:repeating-linear-gradient(135deg,rgba(11,31,58,.06) 0 10px,transparent 10px 20px)}
.adslot-frame:not(:empty){border:0;background:none}
@media (min-width:768px){
  .adslot{width:728px;max-width:calc(100vw - 32px);position:relative;left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}
  .adslot-frame{width:728px;min-height:90px;height:90px}
}
body.tv .adslot{display:none !important}
/* ===== ads host (Esteban): el anuncio vive en #adHost, fuera de #app, para que los re-render no lo destruyan */
#adHost{width:100%;max-width:760px;margin:0 auto;padding:0 16px}
#adHost[hidden],body.tv #adHost{display:none !important}
#adHost .adslot{position:static;left:auto;transform:none;margin:8px auto 8px}
/* ===== mantenimiento (kill switch LIVE / aq_app_config) */
.card.maint h2{margin:0 0 6px}

/* ===== TV empty-state (Moreno live review MUST) + hide Netlify badge on TV ===== */
.tvempty{min-height:calc(100vh - 90px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(12px,2vh,28px);padding:4vh 4vw}
.tvempty-kicker{font-size:clamp(22px,2.2vw,36px);font-weight:700;color:var(--muted)}
.tvempty-code{font-size:clamp(56px,8vw,140px);font-weight:900;letter-spacing:.12em;color:var(--clay);line-height:1}
.tvempty-title{font-size:clamp(32px,4vw,72px);font-weight:800;letter-spacing:-.5px;line-height:1.15;margin:0;max-width:18ch}
.tvempty-lead{font-size:clamp(20px,2vw,34px);color:var(--muted);margin:0;max-width:28ch}
.tvempty .btn{font-size:clamp(18px,1.6vw,28px);padding:14px 28px}
/* Netlify "Deploys by Netlify" / site badge — living-room TV should be clean */
body.tv a[href*="netlify.com"],
body.tv a[href*="netlify.app"][aria-label*="Netlify" i],
body.tv img[src*="netlify"],
body.tv #netlify-badge,
body.tv .netlify-badge,
body.tv [data-netlify-deploy-id],
body.tv iframe[src*="netlify"]{display:none !important}

/* Hide Netlify badge site-wide */
a[href*="netlify.com"] img,
a[href="https://www.netlify.com"]{display:none!important}

/* =====================================================================
   VISUAL REFRESH · Panamá Cuenta (navy #0B1F3A + oro #C9A227)
   Tipos: Fraunces (títulos/marca) + DM Sans (UI). Solo estilo: no cambia estructura.
   ===================================================================== */
h1,h2,.brand-name,.qtext,.tvq,.tvcode,.tvempty-title,.code-big,.step .nm,.tvghead,.role-card b{font-family:var(--font-serif);font-optical-sizing:auto}
h1{font-size:var(--fs-2xl);font-weight:650;letter-spacing:-.6px;line-height:1.1;color:var(--navy)}
h2{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.2px;color:var(--navy)}
p.lead{font-size:var(--fs-md);color:var(--muted)}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* topbar + marca + idioma */
.topbar{gap:12px}
.brand-mark{background:var(--navy);color:var(--gold);border-radius:12px}
.brand-name{font-size:24px;font-weight:600;color:var(--navy);letter-spacing:-.4px}
.brand-name b{color:var(--gold-ink);font-weight:700}
.topright{display:flex;align-items:center;gap:10px;min-width:0}
.me{color:var(--navy);border-color:var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.lang{display:inline-flex;border:1.5px solid var(--navy);border-radius:999px;overflow:hidden;flex:0 0 auto}
.lang button{appearance:none;border:0;background:transparent;color:var(--navy);font:600 13px/1 var(--font-sans);letter-spacing:.6px;padding:7px 10px;cursor:pointer;min-width:40px;min-height:32px}
.lang button[aria-pressed="true"]{background:var(--navy);color:#fff}
.lang button:not([aria-pressed="true"]):hover{background:var(--navy-soft)}
.foot{color:var(--muted)}

/* botones: CTA oro con texto navy (AA ≈ 6.8:1); secundarios navy */
.btn{background:var(--gold);color:var(--navy);font-weight:700;letter-spacing:.1px;box-shadow:0 2px 0 var(--gold-d)}
.btn:hover{background:#D6B13A}
.btn:active{box-shadow:none}
.btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy);box-shadow:none}
.btn.ghost:hover{background:var(--navy-soft)}
.btn.teal{background:var(--navy);color:#fff;box-shadow:0 2px 0 #050f1e}
.btn.teal:hover{background:var(--navy-2)}
.btn.teamjoin{background:var(--tc);color:#fff;box-shadow:none;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.btn:disabled:hover{background:var(--gold-soft)}
.btn.ghost:disabled:hover{background:transparent}
.linkbtn{color:var(--navy)}

/* formularios / chips */
label.f{color:var(--muted);letter-spacing:.7px}
.input{border-color:var(--line)}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.30)}
.opt{color:var(--navy)}
.opt:hover{border-color:#9AA8BD}
.opt[aria-checked="true"]{border-color:var(--navy);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--navy)}
.opt[aria-checked="true"] .hg .frame{stroke:var(--navy)}
.tag,.rolechip,.mini,.answered span{background:var(--navy-soft);color:var(--navy)}
.rolechip{font-family:var(--font-sans)}
.role-card{background:#fff}
.role-card:hover{border-color:var(--gold);box-shadow:0 8px 26px rgba(11,31,58,.12)}
.role-card b{font-weight:650;color:var(--navy)}
.notice{border-color:var(--gold);background:var(--gold-soft)}
.code-big{border-color:var(--gold);color:var(--navy);font-weight:700;background:#fff}
.qtext{font-weight:600;color:var(--navy);font-size:clamp(21px,3vw,26px)}
.ans .L{background:var(--navy);color:#fff;font-weight:700}
.ans.picked{border-color:var(--navy);background:var(--gold-soft)}
.ans.picked .L{background:var(--gold);color:var(--navy)}
.ans:hover:not(:disabled){border-color:var(--gold)}
.why{border-left-color:var(--gold);background:var(--gold-soft)}
.bar > i{background:var(--gold)}
.state.ready{background:var(--ok-soft);color:var(--ok)}
.pausebar{background:var(--navy)}
.step.p1 .blk{background:var(--gold);color:var(--navy)} .step.p2 .blk{background:#5C6F8C} .step.p3 .blk{background:#B98B5E;color:var(--navy)}
.step .nm{font-weight:650;font-size:16px}
.toast{background:var(--navy)}
.err{color:var(--bad)}
.stubnote{background:var(--gold-soft);color:var(--gold-ink)}
.share-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.btn.share{width:auto}

/* ===== TV living-room (~3 m): lobby, ronda y podio, no solo empty-state ===== */
body.tv{background:var(--bg)}
body.tv .lang button{font-size:15px;padding:9px 14px}
.tvmain,.tvside{background:#fff;border-color:var(--line)}
.tvside h2{font-size:clamp(26px,2.2vw,40px)}
.tvkicker,.tvtop{font-size:clamp(22px,2.1vw,36px);color:var(--muted)}
.tvtop .timer{font-size:clamp(32px,3.4vw,62px);color:var(--navy)}
.tvq{font-size:clamp(36px,4vw,76px);font-weight:600;color:var(--navy);letter-spacing:-.8px}
.tvopt{font-size:clamp(28px,3vw,56px);font-weight:600;color:var(--navy);border-color:var(--line)}
.tvopt .L{background:var(--navy);color:#fff;font-family:var(--font-sans);font-weight:700}
.tvopt:nth-child(2) .L{background:var(--gold);color:var(--navy)}
.tvopt:nth-child(3) .L{background:#2F5D8C;color:#fff}
.tvopt:nth-child(4) .L{background:#8C3B3B;color:#fff}
.tvopt em{color:var(--muted);font-family:var(--font-sans);font-weight:600}
.why.tv{font-size:clamp(22px,2vw,36px)}
.tvhint{font-size:clamp(22px,2vw,34px)}
.tvlabel{font-size:clamp(24px,2.4vw,40px);color:var(--muted)}
.tvcode{font-size:clamp(72px,9vw,170px);font-weight:700;color:var(--navy);text-shadow:0 4px 0 var(--gold-soft)}
.tvurl{font-size:clamp(16px,1.3vw,24px)}
.teams.tv .team{font-size:clamp(20px,1.8vw,32px)}
.teams.tv .tmembers li .state{font-size:.7em}
.tvplayers{font-size:clamp(22px,2vw,34px)}
.tvplayers span{background:var(--navy-soft);color:var(--navy)}
.tvrank li{font-size:clamp(20px,1.8vw,32px);border-color:var(--line)}
.tboard.big .tname{font-size:clamp(24px,2.2vw,40px)}
.tboard.big .tpts{font-size:clamp(34px,3.4vw,64px);color:var(--navy)}
.tvghead{font-size:clamp(24px,2vw,36px)}
.podium.tv .nm{font-size:clamp(26px,2.4vw,44px)}
.podium.tv .pts{font-size:clamp(20px,1.7vw,32px)}
.podium.tv .blk{font-size:clamp(40px,3.6vw,70px)}
.tvpause{font-family:var(--font-serif);font-weight:600}
.tvempty-code{color:var(--navy);font-family:var(--font-serif);font-weight:700}
.tvempty-title{color:var(--navy);font-weight:600}
.qr.big{width:clamp(220px,18vw,340px)}
@media (max-width:560px){.me{max-width:38vw;font-size:13px}.brand-name{font-size:21px}}

/* home tighter packs→footer (Moreno SHOULD 5) */
body:not(.tv) main .card.center[style*="dashed"]{margin-bottom:4px}
body:not(.tv) main .adslot, #adHost .adslot{margin-top:10px;margin-bottom:0}
.foot{padding-top:8px;padding-bottom:18px}

/* ---------- PWA: barra Añadir a escritorio / Compartir (pwa.js) — solo inicio ---------- */
.pwabar{display:none;max-width:720px;width:100%;margin:-4px auto 6px;padding:0 18px;text-align:right}
body[data-view="home"] .pwabar{display:block}
body.tv .pwabar{display:none !important}
.pwabar-btns{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.pwa-btn{appearance:none;cursor:pointer;border:1.5px solid var(--navy);background:var(--card);color:var(--navy);
  font:600 13px/1 var(--font-sans);padding:8px 12px;min-height:34px;border-radius:999px;white-space:nowrap;transition:background .15s}
.pwa-btn:hover{background:var(--navy-soft)}
.pwa-btn.install{background:var(--gold);border-color:var(--gold-d);color:var(--navy)}
.pwa-btn.install:hover{background:var(--gold-d);color:#fff}
.pwa-btn[hidden],.pwa-tip[hidden]{display:none}
.pwa-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,162,39,.45)}
.pwa-tip{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
@media (max-width:560px){.pwabar{padding:0 10px}.pwabar-btns{justify-content:stretch}.pwa-btn{flex:1 1 0}.pwa-tip{text-align:center}}
@media (display-mode:standalone){body{padding-top:env(safe-area-inset-top)}}

/* ---------- modo solo ---------- */
.solo-cta{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px 0 6px}
.solo-cta small{color:var(--muted)}
.solo-game .qhead{gap:10px}
.solo-score{margin-left:auto;font-weight:700;color:var(--navy)}
.solo-total{font-family:var(--font-serif);font-size:3.2rem;font-weight:700;color:var(--navy);line-height:1.1}
.solo-total small{font-size:1rem;color:var(--muted)}

/* solo SHOULD (Moreno): CTA/quit softer than role CTAs */
.solo-cta .solo-link{font-size:15px;font-weight:600;padding:6px 4px;border:0;background:none;box-shadow:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.solo-cta .solo-link:hover{color:var(--navy);background:none}
.solo-quit{font-size:14px;font-weight:600;color:var(--muted);margin-top:8px}
.solo-quit:hover{color:var(--navy)}

.social{display:flex;justify-content:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.social a{color:var(--gold,#d4a017);font-weight:750;text-decoration:none}
.social a:hover{text-decoration:underline}