/* Layout: one-screen pulpería table — fósforos on top, the felt with seats in a cross, the hand and cantos at the bottom; shop and profile as tabs */
:root{
  --felt:#3d2414;
  --felt-hi:#5c3a20;
  --panel:#1c1109;
  --ink:#f3e6c8;
  --muted:#cdb28a;
  --line:rgba(243,230,200,.17);
  --brass:#d9a441;
  --punzo:#b0261c;
  --punzo-ink:#fbeee0;
  --hide:rgba(28,16,8,.62);
  --brass-ink:#2b1608;
  --coin:#f0c548;
  --card:#f8f0dd;
  --card-edge:#c9b38e;
  --card-ink:#2a1a12;
  --back:#7a2a1e;
  --good:#8fcf86;
  --bad:#ef8a73;
  --oro:#c48a12;
  --copa:#b5302a;
  --espada:#2b5b9c;
  --basto:#3d7a38;
  --f-display:"Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --f-rustic:"Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --f-body:"Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--panel);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.4}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#app{min-height:100%;display:flex;flex-direction:column;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px), radial-gradient(120% 80% at 50% 30%, var(--felt-hi) 0%, var(--felt) 55%, var(--panel) 100%);
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:calc(10px + var(--sat)) 14px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:760px;width:100%;margin:0 auto}
.brand{font-family:var(--f-rustic);font-size:1.5rem;letter-spacing:.03em;line-height:1;color:var(--ink)}
.guarda{height:12px;max-width:760px;width:100%;margin:10px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect width='28' height='12' fill='%23efe0bf'/%3E%3Crect width='28' height='1.4' fill='%232a170b'/%3E%3Crect y='10.6' width='28' height='1.4' fill='%232a170b'/%3E%3Cpath d='M14 2.2L19 6L14 9.8L9 6Z' fill='%232a170b'/%3E%3Cpath d='M14 4.2L16.4 6L14 7.8L11.6 6Z' fill='%23b0261c'/%3E%3Cpath d='M0 3L3.4 6L0 9ZM28 3L24.6 6L28 9Z' fill='%23b0261c'/%3E%3Crect x='4.6' y='5.4' width='2.4' height='1.2' fill='%232a170b'/%3E%3Crect x='21' y='5.4' width='2.4' height='1.2' fill='%232a170b'/%3E%3C/svg%3E") repeat-x left center/28px 12px;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pills{display:flex;align-items:center;gap:6px}
.pill{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 6px;font-weight:700;font-variant-numeric:tabular-nums;font-size:.92rem}
.pill:hover{border-color:var(--brass)}
.chip{width:16px;height:16px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 50%, var(--brass) 0 38%, var(--brass-ink) 39% 46%, var(--brass) 47%);box-shadow:0 0 0 2px var(--brass-ink) inset}
.coin{width:16px;height:16px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%, #fff3c4 0 12%, var(--coin) 13% 62%, #b8861f 63%);box-shadow:0 0 0 1px #8a6114}
.snd{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.28);border:1px solid var(--line);display:grid;place-items:center;padding:0}
.snd svg{width:16px;height:16px}
#view{flex:1;display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto}

.tabs{display:flex;gap:4px;margin-top:12px;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:12px;padding:4px}
.tabs button{flex:1;background:transparent;border:0;border-radius:9px;padding:8px 6px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.tabs button[aria-current="page"]{background:var(--ink);color:var(--panel)}

.hero{padding-block:18px 6px}
.hero h1{font-family:var(--f-rustic);color:#fff!important;font-weight:400;font-size:clamp(2.4rem,11vw,4rem);line-height:.9;margin:0;color:var(--ink)}
.hero h1 span{color:#74acdf;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hero p{margin:.5rem 0 0;color:var(--muted);max-width:46ch}
.me{display:flex;align-items:center;gap:12px;margin-top:14px;background:var(--hide);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.me .av{flex:none}
.me div{flex:1;min-width:0;display:flex;flex-direction:column}
.me small{color:var(--muted);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.me b{font-family:var(--f-display);font-weight:400;font-size:1.25rem;line-height:1.15}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;margin-top:14px}
.box{background:var(--hide);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.box h2{font-family:var(--f-rustic);font-weight:400;font-size:1.5rem;margin:0;line-height:1.1}
.box h3{margin:0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{flex:1 1 auto;min-width:64px;background:transparent;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--felt);border-color:var(--ink)}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.btn{border:1px solid var(--line);background:rgba(244,232,208,.06);border-radius:10px;padding:10px 14px;font-weight:700;letter-spacing:.02em}
.btn.prim{background:var(--punzo);color:var(--punzo-ink);border-color:#7d1a13;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.btn.ink{background:var(--ink);color:var(--felt);border-color:var(--ink)}
.btn.ghost{background:transparent}
.btn.brass{background:transparent;border-color:var(--brass);color:var(--brass)}
.btn.warn{border-color:var(--bad);color:var(--bad);background:transparent}
.btn.sm{padding:6px 10px;font-size:.88rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row>input{flex:1;min-width:0}
input[type=text]{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit;text-transform:uppercase;letter-spacing:.2em}
.note{font-size:.88rem;color:var(--muted);margin:0}
.tables{display:flex;flex-direction:column;gap:6px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.trow b{font-family:var(--f-display);font-weight:400;font-size:1.2rem;letter-spacing:.08em}
.trow span{color:var(--muted);font-size:.9rem}
details.rules{margin-top:14px;background:var(--hide);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
details.rules summary{font-family:var(--f-display);font-size:1.2rem;cursor:pointer}
.rules ul{margin:.6rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem;max-width:68ch}
.rules li b{color:var(--brass)}
.rank{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.rank .card{width:38px}

/* tienda */
.shophead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
.shophead h2{font-family:var(--f-rustic);font-weight:400;font-size:2rem;margin:0;line-height:1}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.subtabs button{background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:600}
.subtabs button[aria-pressed="true"]{border-color:var(--brass);color:var(--brass)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px;margin-top:12px}
.item{background:var(--hide);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.item.on{border-color:var(--brass)}
.prev{display:grid;place-items:center;height:96px}
.item b{font-family:var(--f-display);font-weight:400;font-size:1.1rem;line-height:1.1}
.item p{margin:0;font-size:.84rem;color:var(--muted);flex:1}
.item .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px}
.tag{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:700}
.bigback{width:56px;aspect-ratio:2/3;border-radius:6px;border:3px solid var(--card);box-shadow:0 6px 14px rgba(0,0,0,.35)}
.swatch{width:100%;height:84px;border-radius:14px;border:2px solid;display:flex;align-items:center;justify-content:center;gap:4px}
.swatch .card{width:30px}
.pack .prev{height:72px;font-family:var(--f-display);font-size:1.8rem;color:var(--coin);display:flex;gap:8px}
.pack .ars{font-weight:700;color:var(--ink)}
.demo{border:1px dashed var(--brass);border-radius:12px;padding:10px 12px;font-size:.9rem;color:var(--ink);background:rgba(220,170,72,.08);margin-top:12px}

/* perfil */
.prof{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.prof h2{font-family:var(--f-rustic);font-weight:400;font-size:2rem;margin:0;line-height:1}
.prof p{margin:2px 0 0;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:14px}
.stat-b{background:var(--hide);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat-b small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.stat-b b{font-family:var(--f-display);font-weight:400;font-size:1.7rem;font-variant-numeric:tabular-nums}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.toggle:first-of-type{border-top:0}
.toggle span small{display:block;color:var(--muted);font-size:.85rem}
.sw{width:46px;height:26px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.35);position:relative;padding:0;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s}
.sw[aria-pressed="true"]{background:var(--brass);border-color:var(--brass)}
.sw[aria-pressed="true"]::after{transform:translateX(20px);background:var(--brass-ink)}

/* sala */
.room{padding-top:16px;display:flex;flex-direction:column;gap:14px}
.code{font-family:var(--f-display);font-size:3rem;letter-spacing:.14em;line-height:1}
.seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px}
.seatc{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.seatc .who{display:flex;align-items:center;gap:8px;min-width:0}
.seatc .who div{display:flex;flex-direction:column;min-width:0}
.seatc .who small{color:var(--muted);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.seatc .who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatc.mine{border-color:var(--brass)}

/* juego */
.game{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:8px;max-width:560px;width:100%;margin:0 auto}
.gtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gtop .btn{padding:6px 10px;font-size:.85rem}
.score{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.sc{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sc.them{align-items:flex-end;text-align:right}
.sc .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sc b{font-family:var(--f-display);font-weight:400;font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums;display:inline-block}
.sc svg{max-width:100%;height:auto}
.bump{animation:bump .6s ease-out}
@keyframes bump{40%{transform:scale(1.4);color:var(--brass)}}
.mid{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.78rem;color:var(--muted);text-align:center;line-height:1.25}
.mid b{color:var(--ink);font-size:.9rem}
.felt{position:relative;flex:1;min-height:340px;border-radius:22px;border:1px solid;box-shadow:inset 0 0 0 6px rgba(0,0,0,.18), inset 0 0 60px rgba(0,0,0,.35);display:grid;gap:6px;padding:10px;--pc:96px}
.felt.n2{grid-template-areas:"top" "center" "bottom";grid-template-rows:auto 1fr auto}
.felt.n4{grid-template-areas:". top ." "left center right" ". bottom .";grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;--pc:72px}
.pos-top{grid-area:top}.pos-left{grid-area:left}.pos-right{grid-area:right}.pos-bottom{grid-area:bottom}.center{grid-area:center}
.seat{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;position:relative}
.badge{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.36);border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 2px;max-width:100%;font-size:.86rem;font-weight:600}
.badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge .av{flex:none}
.badge.us{border-color:rgba(220,170,72,.45)}
.badge.active{border-color:var(--brass);box-shadow:0 0 0 2px rgba(220,170,72,.3)}
.badge .m{flex:none;font-size:.62rem;font-weight:700;letter-spacing:.08em;color:var(--brass-ink);background:var(--brass);border-radius:4px;padding:0 4px}
.backs{display:flex}
.backs i{display:block;width:16px;height:24px;border-radius:3px;margin-right:-6px;border:1.5px solid var(--card)}
/* lo único que se ve de la mano del rival: las cartas que mostró para probar el envido o la flor */
.reveal{display:flex;gap:3px;padding:3px;border-radius:7px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(240,197,72,.45)}
.reveal .card{width:40px;margin:0}
@container (min-width:620px){.reveal .card{width:54px}}
.played{display:flex;justify-content:center;min-height:calc(var(--pc) * 1.5)}
.played .card{width:var(--pc);margin-right:calc(var(--pc) * -0.34)}
.played .card:last-child{margin-right:0}
.felt.n4 .pos-left .played .card,.felt.n4 .pos-right .played .card{margin-right:calc(var(--pc) * -0.58)}.felt.n4 .pos-left .played .card:last-child,.felt.n4 .pos-right .played .card:last-child{margin-right:0}
.played .card.lost{filter:saturate(.35) brightness(.72)}
.played .card.win .cart{filter:drop-shadow(0 0 5px rgba(220,170,72,.95))}
.land{animation:land .34s cubic-bezier(.2,.8,.3,1.15)}
.pos-top .land{--fy:-30px}.pos-left .land{--fx:-30px;--fy:0px}.pos-right .land{--fx:30px;--fy:0px}
@keyframes land{from{transform:translate(var(--fx,0px),var(--fy,30px)) scale(1.2) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.bubble{position:absolute;z-index:3;background:var(--card);color:var(--card-ink);border-radius:12px;padding:4px 10px;font-weight:700;font-size:.9rem;white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.35);max-width:180px;overflow:hidden;text-overflow:ellipsis}
.bubble.pop{animation:pop .25s ease-out}
.bubble.react{background:var(--brass);color:var(--brass-ink)}
.bubble.sena{background:var(--panel);color:var(--brass);border:1px dashed var(--brass);font-weight:600;white-space:normal;width:max-content;max-width:170px;font-size:.82rem}
.pos-top .bubble{top:100%;margin-top:-4px}
.pos-bottom .bubble{bottom:100%;margin-bottom:2px}
.pos-left .bubble,.pos-right .bubble{bottom:100%;margin-bottom:2px}
.pos-left .bubble{left:0}
.pos-right .bubble{right:0}
#app{overflow-x:clip}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;min-width:0}
.deck{position:relative;width:26px;height:38px;margin-bottom:2px}
.deck i{position:absolute;inset:0;border-radius:4px;border:1.5px solid var(--card);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.deck i:nth-child(2){transform:translate(2px,-2px)}.deck i:nth-child(3){transform:translate(4px,-4px)}
.bazas{display:flex;gap:6px}
.bazas i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--muted)}
.bazas i.w{background:var(--good);border-color:var(--good)}
.bazas i.l{background:var(--bad);border-color:var(--bad)}
.bazas i.p{background:var(--muted)}
.stat{font-size:.85rem;color:var(--muted);line-height:1.25}
.stat b{color:var(--brass);font-weight:700}
.result{background:rgba(0,0,0,.45);border:1px solid var(--brass);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:4px;align-items:center;max-width:100%;animation:pop .3s ease-out}
.result b{font-family:var(--f-display);font-weight:400;font-size:1.25rem;line-height:1.1}
.result span{font-size:.84rem;color:var(--muted)}
.result .btn{padding:6px 14px}
.ticker{font-size:.86rem;color:var(--muted);min-height:2.6em;display:flex;flex-direction:column;justify-content:flex-end;line-height:1.3}
.ticker div:last-child{color:var(--ink)}
.handinfo{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;min-height:22px;text-align:center}
.handinfo span{font-size:.78rem;font-weight:700;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:1px 10px;color:var(--muted)}
.handinfo span b{color:var(--brass)}
.hand{--hw:min(36vw,172px);display:flex;justify-content:center;gap:0;padding-top:8px;min-height:calc(var(--hw) * 1.5 + 14px)}
.hand button{background:none;border:0;padding:0;width:var(--hw);flex:none;margin:0 calc(var(--hw) * -0.15);transform:translate(var(--dx,0px),calc(var(--y,0px) + var(--dy,0px))) rotate(calc(var(--r,0deg) + var(--dr,0deg)));transform-origin:50% 110%;transition:transform .15s ease;border-radius:8px;position:relative;touch-action:none}
.hand button:first-child:not(:only-child){--r:-5deg;--y:4px}.hand button:last-child:not(:only-child){--r:5deg;--y:4px}.hand button:nth-child(2):last-child{--r:4deg;--y:2px}.hand button:first-child:nth-last-child(2){--r:-4deg;--y:2px}
.hand button:not(:disabled):hover,.hand button:not(:disabled):focus-visible{--y:-14px;z-index:3}
.hand button:disabled{cursor:default}
.hand.wait button{filter:brightness(.82)}
.hand button.dealt{animation:deal .42s cubic-bezier(.2,.8,.3,1.1) backwards}
@keyframes deal{from{transform:translateY(-150px) scale(.5) rotate(12deg);opacity:0}to{transform:none;opacity:1}}
.actions{display:flex;flex-direction:column;gap:6px;align-items:center;min-height:58px}
.ask{margin:0;font-family:var(--f-display);font-size:1.2rem;text-align:center}
.hint{margin:0;color:var(--muted);font-size:.92rem;text-align:center}
.hint b{color:var(--brass)}
.btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.btns .btn{padding:8px 12px}
.social{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;padding:8px}
.chips button{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:.86rem;font-weight:600}
.chips button:hover{border-color:var(--brass)}
.card{display:block;aspect-ratio:2/3;max-width:100%;border-radius:7%/4.7%}
.card svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.card{position:relative}.card .cart{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}.card svg.cidx{position:absolute;inset:0;filter:none;pointer-events:none}
.cnum{font-family:var(--f-display);font-size:12.5px;paint-order:stroke;stroke:#f7efdc;stroke-width:2.4px;stroke-linejoin:round}
.cfig{font-family:var(--f-body);font-size:7px;font-weight:700;letter-spacing:.12em}
.av{border-radius:50%;display:block}
.over{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(15,3,8,.72);padding:24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px))}
.panel{position:relative;z-index:2;background:var(--panel);border:1px solid var(--brass);border-radius:16px;padding:20px;max-width:360px;width:100%;display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center}
.panel h2{font-family:var(--f-rustic);font-weight:400;font-size:2.2rem;margin:0;line-height:1}
.panel p{margin:0;color:var(--muted)}
.panel .big{font-family:var(--f-display);font-size:1.5rem;color:var(--brass);display:flex;align-items:center;gap:8px}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.confetti svg{position:absolute;top:-30px;width:18px;height:18px;animation:fall 2.8s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(600deg)}}
#toast{position:fixed;left:50%;bottom:calc(18px + var(--sab,0px));transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--felt);padding:8px 14px;border-radius:10px;font-weight:600;max-width:calc(100% - 32px);text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.tabs button{font-size:.9rem;padding:8px 2px}
.sech{font-family:var(--f-display);font-weight:400;font-size:1.6rem;margin:22px 0 0;line-height:1}
.mislist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mis{background:var(--hide);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.mis.ok{border-color:var(--good)}
.mtop{display:flex;justify-content:space-between;gap:10px;align-items:center}
.mtop b{font-weight:700}
.rw{display:flex;align-items:center;gap:4px;font-weight:700;color:var(--coin);flex:none}
.mis small,.ach small{color:var(--muted);font-size:.8rem}
.bar{height:6px;border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden}
.bar i{display:block;height:100%;background:var(--brass);border-radius:999px}
.mis.ok .bar i,.ach.ok .bar i{background:var(--good)}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;margin-top:12px}
.ach{display:flex;gap:10px;align-items:flex-start;background:var(--hide);border:1px solid var(--line);border-radius:14px;padding:10px 12px;opacity:.75}
.ach.ok{opacity:1;border-color:var(--brass)}
.ach>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ach b{font-family:var(--f-display);font-weight:400;font-size:1.05rem;line-height:1.1}
.medal{font-size:1.4rem;color:var(--brass);line-height:1}
.lb{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb li{display:flex;align-items:center;gap:10px;background:var(--hide);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.lb li.me{border-color:var(--brass)}
.lb .pos{font-family:var(--f-display);font-size:1.3rem;width:1.6em;text-align:center;color:var(--brass);flex:none;font-variant-numeric:tabular-nums}
.lb .nm{flex:1;min-width:0;display:flex;flex-direction:column;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .nm small{font-weight:400;color:var(--muted);font-size:.8rem}
.lb b{font-family:var(--f-display);font-weight:400;font-size:1.3rem;font-variant-numeric:tabular-nums}
.lessons{display:flex;flex-direction:column;gap:6px}
.lesson{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-weight:600;text-align:left}
.lesson span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.3);font-size:.85rem;flex:none}
.lesson.ok span{background:var(--good);color:var(--panel)}
.lesson:hover{border-color:var(--brass)}
.coach{background:var(--card);color:var(--card-ink);border-radius:12px;padding:10px 12px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.coach small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8a5a2b;font-weight:700}
.coach p{margin:.2rem 0 0;font-size:.95rem;line-height:1.35}
.btn.glow{animation:glow 1.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 4px rgba(220,170,72,.45)}}
.hand button:not(:disabled){outline:none}
.box,.item,.mis,.ach,.lb li,.me,.sc,.seatc,details.rules{outline:1px dashed rgba(243,230,200,.2);outline-offset:-5px}
.sech{font-family:var(--f-rustic)!important}
.felt{box-shadow:inset 0 0 0 4px rgba(0,0,0,.2), inset 0 0 0 6px rgba(243,230,200,.12), inset 0 0 60px rgba(0,0,0,.4)!important}
.bubble .line{display:block;font-weight:600;font-size:.78rem;color:#6b4a2e;white-space:normal;line-height:1.2;margin-top:1px}
.bubble{white-space:normal!important;text-align:center;width:max-content;max-width:170px}
input.plain{text-transform:none;letter-spacing:normal}
.fcode{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.18em;color:var(--brass)}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.flist li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.flist span{display:flex;flex-direction:column;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flist small{font-weight:400;color:var(--muted);font-size:.8rem}
.gate{display:flex;flex-direction:column;gap:14px;padding-top:28px;max-width:520px;width:100%;margin:0 auto}
.gtitle{font-family:var(--f-rustic);color:#fff;font-weight:400;font-size:clamp(2.6rem,12vw,4rem);margin:0;line-height:.95}
.gtitle span{color:#74acdf;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.gate p{margin:0}
.regavs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.regav{background:transparent;border:2px solid var(--line);border-radius:14px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.regav .av{width:100%;height:auto}
.regav b{font-size:.82rem;font-weight:700;text-align:center}
.regav[aria-pressed="true"]{border-color:var(--brass);box-shadow:0 0 0 3px rgba(217,164,65,.3)}
.prem{font-family:var(--f-body);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;background:var(--brass);color:var(--brass-ink);border-radius:6px;padding:2px 7px;vertical-align:middle}
.anot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.acol{background:var(--hide);border:1px solid var(--line);outline:1px dashed rgba(243,230,200,.2);outline-offset:-5px;border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.acol.won{border-color:var(--good)}
.aname{width:100%;text-align:center;font-weight:700;background:transparent!important;border:1px dashed var(--line)!important}
.anum{font-family:var(--f-display);font-weight:400;font-size:3.4rem;line-height:1;font-variant-numeric:tabular-nums}
.aph{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:700}
.afos{width:100%;display:flex;justify-content:center}
.afos svg{width:100%;height:auto;max-width:220px}
.abig{width:100%;font-size:1.4rem;padding:14px}
.arow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%}
.arow .btn{padding:8px 0}
.girabox{border-color:var(--brass)}
.cuppill{color:#e8c99a}
.poroto{display:inline-block;width:11px;height:15px;border-radius:50%/45%;background:radial-gradient(ellipse at 35% 30%,#fff2dc 0 12%,#f1e3c6 13% 45%,#c9ab7e 100%);box-shadow:inset -1px -1px 0 rgba(0,0,0,.25),0 0 0 1px #6b4a2e;transform:rotate(-20deg);vertical-align:-2px;margin-right:4px;position:relative}
.poroto::after{content:'';position:absolute;left:45%;top:22%;width:2px;height:4px;border-radius:2px;background:#6b4a2e;opacity:.7}
.girarow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
@media (max-width:640px){.girarow{grid-template-columns:1fr}}
.mapwrap{display:flex;justify-content:center;background:var(--hide);border:1px solid var(--line);border-radius:14px;padding:10px}
.armap{width:100%;max-width:340px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));border-radius:8px}
.zp{cursor:pointer;transition:filter .15s}
.zp:hover,.zp:focus{filter:brightness(1.15);outline:none}
.zp.sel{stroke:#8f1c12;stroke-width:1.6;stroke-opacity:1;stroke-dasharray:none;fill:rgba(255,240,200,.18)}
.zp:hover,.zp:focus-visible{fill:rgba(255,245,215,.25)}
.zl text{font:italic 700 8px var(--f-display);fill:#2b1a10;paint-order:stroke;stroke:#f3e9cf;stroke-width:2.6px;stroke-linejoin:round}
.zl.lock text{fill:#6b5a46}.zl.sel text{fill:#8f1c12}
.zi{fill:none;stroke:#2b1a10;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}.zl.lock .zi{stroke:#8b7a63}
.armap .mar{font:italic 600 9px var(--f-display);fill:#4f7395;letter-spacing:.3em;opacity:.8}.armap .mar.sm{font-size:6.4px;fill:#6b5236;letter-spacing:.25em}
.rosa text{font:700 7px var(--f-display);fill:#4a3626}
.zl text.need{font:600 5.4px var(--f-body);fill:#6b5a46}
.giraside .box{gap:8px}
.lb.mini li{padding:4px 8px}
.lb.mini .pos{font-size:1rem}
.lb.mini b{font-size:1rem}
.rvl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rv{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.rv.boss{border-color:var(--brass);background:rgba(217,164,65,.08)}
.rvi{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rvi b{font-weight:700}
.rvi small{color:var(--muted);font-size:.8rem}
.stars{color:var(--brass);letter-spacing:1px}
.cup{color:#e8c99a;font-weight:700}
.unlock{font-family:var(--f-rustic);font-size:1.3rem;color:var(--good)!important}
.zbox{border-width:2px}
.mpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mpick.compact{margin-top:10px}
.mpick button{background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-weight:600;font-size:.86rem;color:var(--muted)}
.mpick button[aria-pressed="true"]{border-color:var(--brass);color:var(--ink);background:rgba(217,164,65,.15)}
.tabs button{font-size:.82rem;white-space:nowrap;padding:8px 2px}
.backx{margin-top:12px}
.xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px;margin-top:12px}
.xcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--hide);border:1px solid var(--line);outline:1px dashed rgba(243,230,200,.2);outline-offset:-5px;border-radius:14px;padding:14px 16px;color:var(--ink)}
.xcard:hover{border-color:var(--brass)}
.xcard b{font-family:var(--f-rustic);font-weight:400;font-size:1.3rem;line-height:1.1}
.xcard span{color:var(--muted);font-size:.9rem}
.xcard small{color:var(--brass);font-weight:700;font-size:.8rem;margin-top:2px}
.tbar{position:relative;height:20px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--line);overflow:hidden}
.tbar i{position:absolute;inset:0 auto 0 0;background:rgba(217,164,65,.55);transition:width .5s linear}
.tbar.mine i{background:rgba(176,38,28,.65)}
.tbar.low i{background:var(--bad)}
.tbar span{position:relative;display:block;text-align:center;font-size:.75rem;font-weight:700;line-height:18px;color:var(--ink)}
.autherr{margin:0;color:var(--bad);font-weight:600}
.stat-b b.pos{color:var(--good)}
.stat-b b.neg{color:var(--bad)}
.gate input[type=email],.gate input[type=password]{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit}

.tin{width:100%;box-sizing:border-box;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font:inherit;text-transform:none!important;letter-spacing:normal!important;color-scheme:dark}
textarea.tin{resize:vertical;min-height:84px}
.tlist{display:flex;flex-direction:column;gap:8px}
.tcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.18);transition:border-color .15s,background .15s}
.tcard:hover{border-color:var(--brass)}.tcard:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tcard.mine{border-color:rgba(217,164,65,.55);background:rgba(217,164,65,.07)}
.tc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.tc-top b{font-size:1.05rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-theme{color:var(--muted);font-style:italic;font-size:.88rem}.tc-meta{color:var(--muted);font-size:.82rem}
.tc-pot{display:flex;align-items:center;gap:6px;font-size:.92rem}.tc-pot b{color:var(--coin);font-size:1.05rem}.tc-pot small{color:var(--muted)}
.tst{flex:none;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:3px 8px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tst.open{color:var(--good);border-color:rgba(143,207,134,.4)}.tst.running{color:var(--brass);border-color:rgba(217,164,65,.5)}.tst.finished{color:var(--ink)}.tst.cancelled{color:var(--bad);border-color:rgba(239,138,115,.4)}
.tchips{display:flex;flex-wrap:wrap;gap:6px}.tchips span{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--muted)}
.pozo{border:1px solid rgba(217,164,65,.45);border-radius:14px;padding:12px 14px;background:radial-gradient(120% 140% at 0% 0%,rgba(217,164,65,.16),rgba(0,0,0,.15));display:flex;flex-direction:column;gap:4px}
.pozo>small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pz-n{font-family:var(--f-display);font-size:2.3rem;line-height:1;color:var(--coin);display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.pz-sp{display:flex;gap:14px;flex-wrap:wrap;font-variant-numeric:tabular-nums}.pz-sp b{color:var(--brass)}
.pozo .note{margin:2px 0 0}
.trules summary{cursor:pointer;color:var(--brass);font-weight:700}.trules p{white-space:pre-wrap;margin:6px 0 0}
.tbar{height:8px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden}.tbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--coin));border-radius:99px;transition:width .4s}
.ok{color:var(--good);margin:0}
.bracket{display:flex;flex-direction:column;gap:12px}
@media (min-width:760px){.bracket{flex-direction:row;overflow-x:auto;align-items:stretch}.bcol{flex:1 0 210px;display:flex;flex-direction:column}.bcol>.tms{flex:1;justify-content:space-around}}
.bcol h3,.box h3{margin:4px 0 6px}
.tms{display:flex;flex-direction:column;gap:8px}
.tm{border:1px solid var(--line);border-radius:10px;padding:6px 10px;display:flex;flex-direction:column;gap:2px;background:rgba(0,0,0,.15)}
.tm.mine{border-color:rgba(217,164,65,.55)}
.tm-side{display:flex;justify-content:flex-start;gap:6px;color:var(--muted);min-width:0}.tm-side i{opacity:.7}
.tm-side.win{color:var(--ink);font-weight:700}.tm-side.win::before{content:"✓";color:var(--good);margin-right:-2px}.tm-side.tme{text-decoration:underline;text-decoration-color:rgba(217,164,65,.6);text-underline-offset:3px}
.tm-side b{font-variant-numeric:tabular-nums;margin-left:auto}
.tm .row{margin-top:4px;flex-wrap:wrap}.tm-wo{display:flex;gap:6px}
.tstand{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.tstand th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.tstand td{padding:6px;border-bottom:1px solid var(--line)}.tstand td:nth-child(n+3),.tstand th:nth-child(n+3){text-align:right}.tstand tr.tme td{color:var(--brass)}
.podio{gap:6px}.pd{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.pd-n{font-family:var(--f-display);font-size:1.5rem;width:2.2em}.pd1{border-color:rgba(240,197,72,.6);background:rgba(240,197,72,.1)}.pd1 .pd-n{color:var(--coin)}.pd2 .pd-n{color:#d7d2c6}.pd3 .pd-n{color:#c98b52}
.pd-w{flex:1;font-weight:700;min-width:0}.pd-p{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}.pd.tme{outline:2px solid var(--brass)}
.tnext{border-color:rgba(217,164,65,.55)}
.seathead{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;max-width:100%}
.crow{display:flex;align-items:center;gap:10px}.crow .deck{margin:0}
.center .ticker{min-height:0;font-size:.8rem;text-align:center}.center .handinfo{min-height:0}
.thero{padding-bottom:6px}.thero h1{font-size:2.4rem}
.tsteps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}.tsteps b{color:var(--brass)}
.cd{font-variant-numeric:tabular-nums;font-size:.84rem;font-weight:700;color:var(--muted)}
.tcard .cd{color:var(--good)}.tcard .cd.warm{color:var(--brass)}.tcard .cd.hot{color:var(--bad)}
.cd.big{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(0,0,0,.25);display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.cd.big small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cd-u{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cd-u span{display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:6px 0 4px}
.cd-u b{font-family:var(--f-display);font-size:2rem;line-height:1;color:var(--ink)}.cd-u i{font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cd.big.warm{border-color:rgba(217,164,65,.6)}.cd.big.warm .cd-u b{color:var(--brass)}
.cd.big.hot{border-color:rgba(239,138,115,.7);animation:hotpulse 1.6s ease-in-out infinite}.cd.big.hot .cd-u b{color:var(--bad)}.cd.big.hot small{color:var(--bad)}
.cd-end{color:var(--muted)}
@keyframes hotpulse{0%,100%{box-shadow:0 0 0 0 rgba(239,138,115,0)}50%{box-shadow:0 0 0 4px rgba(239,138,115,.18)}}
.fomo{margin:0;align-self:flex-start;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-ink);background:var(--coin);border-radius:999px;padding:2px 10px;animation:hotpulse 1.6s ease-in-out infinite}
.recent{display:flex;flex-direction:column;gap:4px}.recent span{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--muted)}.recent b{color:var(--ink)}
.pozo,.tcard{position:relative}
.pozo.grow,.tcard.grow{animation:potglow 1.2s ease-out}
@keyframes potglow{0%{box-shadow:0 0 0 0 rgba(240,197,72,.0)}25%{box-shadow:0 0 22px 2px rgba(240,197,72,.45)}100%{box-shadow:0 0 0 0 rgba(240,197,72,0)}}
.pozo.grow .pz-n{animation:potpop 1.1s ease-out}@keyframes potpop{0%{transform:scale(1)}20%{transform:scale(1.08)}100%{transform:scale(1)}}
.potplus{position:absolute;right:14px;top:10px;font-weight:800;color:var(--coin);font-variant-numeric:tabular-nums;pointer-events:none;animation:potup 1.6s ease-out forwards}
@keyframes potup{0%{opacity:0;transform:translateY(8px)}15%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
.btn.big-cta{font-size:1.08rem;padding:14px}
@media (prefers-reduced-motion:reduce){.cd.big.hot,.fomo,.pozo.grow,.tcard.grow,.pozo.grow .pz-n,.potplus{animation:none}}
@media (max-width:420px){.tabs{gap:2px;padding:3px}.tabs button{font-size:.76rem;padding:8px 1px;white-space:nowrap;letter-spacing:0}}
.chiph{width:100%;text-align:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:420px){.felt.n4{--pc:58px}.felt.n2{--pc:80px}.sc b{font-size:1.5rem}.brand{font-size:1.3rem}.pill{padding:3px 8px 3px 5px;font-size:.85rem}}

/* ================= Rediseño: boliche porteño ================= */
:root{--punzo:#c8361f;--coin:#e9b830;--ultramar:#24489a;--papel:#efe4c8;--tinta:#2b1a10}
/* sin etiquetas en mayúsculas espaciadas: todo en minúscula normal */
.me small,.box h3,.field>span,.tag,.stat-b small,.seatc .who small,.sc .lbl,.coach small,.prem,.aph,.tst,.pozo>small,.tstand th,.cd.big small,.cd-u i,.fomo,.chiph,.handinfo span{text-transform:none!important;letter-spacing:.01em!important}
.field>span,.box h3{font-size:.9rem;font-weight:600;color:var(--muted)}
.box h3{font-family:var(--f-body)}
/* sin bordes punteados de relleno */
.box,.item,.mis,.ach,.lb li,.me,.sc,.seatc,details.rules,.acol,.xcard{outline:none!important}
/* títulos en Bodoni */
.box h2,.shophead h2,.prof h2,.panel h2,.xcard b,.unlock,.sech,.brand{font-family:var(--f-display)!important;font-weight:600;letter-spacing:-.005em}
.brand{font-style:italic;font-weight:700;font-size:1.45rem}
.box h2{font-size:1.45rem}
/* título en filete */
.filete{display:flex;align-items:center;justify-content:center;gap:2px;margin:0;font-family:var(--f-display);font-style:italic;font-weight:800;line-height:1;font-size:clamp(3rem,15vw,4.6rem);letter-spacing:-.01em}
.filete span{color:#fff;text-shadow:2px 2px 0 #74acdf,4px 4px 0 #1d3557,5px 6px 10px rgba(0,0,0,.45);padding:0 .04em .08em}
.filete .vol{width:clamp(44px,13vw,72px);height:auto;flex:none;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.35))}
.filete .vol.r{transform:scaleX(-1)}
.gate .filete,.filete.gtitle{font-size:clamp(3rem,15vw,4.4rem)}
/* Jugar: la mesa servida */
.deal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 0 6px}
.lema{margin:0;color:var(--muted);font-size:1.05rem}
.fan{display:flex;justify-content:center;margin:10px 0 4px;height:min(42vw,190px)}
.fan .card{width:min(26vw,118px);flex:none;margin:0 -14px;transform-origin:50% 120%;box-shadow:0 10px 22px rgba(0,0,0,.45);border-radius:7px}
.fan .card:nth-child(1){transform:rotate(-12deg) translateY(10px)}.fan .card:nth-child(3){transform:rotate(12deg) translateY(10px)}.fan .card:nth-child(2){z-index:1}
.btn.xl{width:min(100%,360px);font-size:1.25rem;padding:14px 18px;border-radius:12px;font-family:var(--f-display);font-style:italic;font-weight:700;letter-spacing:.01em}
.optline{all:unset;cursor:pointer;color:var(--muted);font-size:.95rem;max-width:42ch;line-height:1.35}
.optline u,.meline u{color:var(--ink);text-underline-offset:3px;text-decoration-color:rgba(243,230,200,.4)}
.optline:focus-visible,.meline:focus-visible,.rowb:focus-visible{outline:2px solid var(--coin);outline-offset:3px;border-radius:8px}
.opts{width:min(100%,520px);display:flex;flex-direction:column;gap:12px;text-align:left;padding:14px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
/* con otras personas: lista, no cajas */
.rows{max-width:620px;margin:22px auto 0;display:flex;flex-direction:column}
.rows h2{font-family:var(--f-display);font-weight:600;font-size:1.35rem;margin:0 0 6px}
.rows h3{margin:14px 0 6px;font-size:.95rem;color:var(--muted);font-weight:600}
.rowb{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:12px 2px;border-bottom:1px solid var(--line);position:relative;padding-right:28px}
.rowb::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:translateY(-50%) rotate(45deg)}
.rowb b{font-size:1.08rem}.rowb small{color:var(--muted);font-size:.9rem}
.rowb.hot b{color:var(--coin)}
.rowb[aria-expanded="true"]::after{transform:translateY(-70%) rotate(135deg)}
.rows .opts{margin:10px 0}
.rowf{cursor:default;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;padding-right:2px}.rowf::after{display:none}
.rowf label{display:flex;flex-direction:column;gap:2px;flex:1 1 180px}.rowf input{flex:0 0 96px;text-align:center}.rowf .btn{width:auto;padding:8px 16px}
.meline{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;margin:22px auto 8px;max-width:620px;width:100%;color:var(--muted)}
.meline span{flex:1}.meline b{color:var(--ink)}
/* el marcador: un anotador de papel con fósforos */
.score .sc{background:repeating-linear-gradient(180deg,transparent 0 17px,rgba(43,26,16,.13) 17px 18px),var(--papel);color:var(--tinta);border:0;border-radius:4px 4px 10px 10px;box-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 16px rgba(0,0,0,.3);--fs-on:#a8702f;--fs-off:rgba(43,26,16,.16)}
.score .sc .lbl{color:#6d5236;font-size:.85rem;font-weight:700}
.score .sc b{color:var(--tinta)}
.score .sc.us{transform:rotate(-1deg)}.score .sc.them{transform:rotate(1deg)}
.score .mid b{font-family:var(--f-display);font-style:italic}
/* la mano de quien es mano */
.badge .m{font-size:.72rem;font-weight:700;letter-spacing:0;padding:1px 6px;border-radius:999px;background:var(--coin);color:var(--brass-ink)}
/* navegación con íconos; en el celular va abajo, como en un juego */
.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs button span{font-size:.78rem}
.tabs button[aria-current="page"]{background:transparent!important;color:var(--coin)!important}
.tabs button[aria-current="page"] svg{stroke-width:2.1}
@media (max-width:720px){
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;border-radius:0;border:0;border-top:1px solid var(--line);background:rgba(28,17,9,.97);backdrop-filter:blur(6px);padding:6px 4px calc(6px + var(--sab,0px));gap:0}
  .tabs button{padding:4px 0!important;font-size:.72rem!important}
  #view{padding-bottom:calc(84px + var(--sab,0px))}
}
.snd.gear{color:var(--ink)}
body[data-view=menu] .brand,body[data-view=register] .brand,body[data-view=welcome] .brand,body[data-view=auth] .brand,body[data-view=boot] .brand,body[data-view=login] .brand{visibility:hidden}
.xcard{background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:14px 28px 14px 2px!important;position:relative;box-shadow:none!important}
.xcard::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-top:2px solid var(--muted);transform:translateY(-50%) rotate(45deg)}
.item.hincha{grid-column:1/-1}
.kits{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:4px 0 2px}
.kitb{all:unset;cursor:pointer;position:relative;aspect-ratio:1;border-radius:50%;padding:3px;border:2px solid transparent}
.kitb span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.kitb.sel{border-color:var(--coin)}.kitb:focus-visible{outline:2px solid var(--coin);outline-offset:2px}
.kitb i{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:var(--panel);border:1px solid var(--line)}
.kitb i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--coin)}
.kitname{margin:0;font-size:.9rem;color:var(--muted)}.kitname b{color:var(--ink)}
.btn.wa,.rowb.wa b{color:#25d366}.btn.wa{display:inline-flex;align-items:center;gap:6px;justify-content:center;text-decoration:none;border-color:rgba(37,211,102,.45)}
.rowb.wa{text-decoration:none}.rowb.wa b{display:flex;align-items:center;gap:8px}
.btn.mp{background:#009ee3;border-color:#007eb5;color:#fff;text-decoration:none;display:flex;justify-content:center}
.mpform{display:flex;flex-direction:column;gap:8px}
.tos{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:.92rem}.tos input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--punzo)}
.linkb{all:unset;cursor:pointer;color:var(--coin);text-decoration:underline;text-underline-offset:2px}
.tpanel{max-height:86dvh;overflow:hidden;text-align:left;display:flex;flex-direction:column;gap:10px}
.tpanel .terms{flex:1;min-height:0;overflow:auto;padding-right:4px}.tpanel>h2,.tpanel>p,.tpanel>.ptabs,.tpanel>.btn{flex:0 0 auto}.terms h3{margin:14px 0 4px;font-size:1rem;color:var(--ink)}.terms p{margin:0;color:var(--muted);line-height:1.5}
.over{z-index:60!important}
.apanel .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.apanel .stat-b{padding:6px 8px}.apanel .stat-b b{font-size:1.2rem}
.apanel{max-height:88dvh;overflow:auto;text-align:left}.aform{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}.aform h3{margin:0}
.pausebar{margin:0;padding:8px 12px;border-radius:10px;background:rgba(239,138,115,.14);border:1px solid rgba(239,138,115,.5);color:var(--ink);font-weight:600;text-align:center}
.frpick{display:flex;flex-wrap:wrap;gap:6px}.frpick .btn{width:auto;display:inline-flex;align-items:center;gap:6px}
.trow.hot{border-color:rgba(233,184,48,.6);background:rgba(233,184,48,.08)}
.vol{display:grid;grid-template-columns:7.5em 1fr 3.2em;align-items:center;gap:10px;font-size:.95rem}
.vol input{width:100%;accent-color:var(--coin);height:28px}.vol output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.phead{display:flex;align-items:center;gap:12px;max-width:620px;width:100%;box-sizing:border-box;margin:14px auto 0;padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.phead>div{flex:1;min-width:0;display:flex;flex-direction:column}.phead b{font-family:var(--f-display);font-size:1.2rem;font-weight:700}.phead small{color:var(--muted);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phead .btn{width:auto}.pav{all:unset;cursor:pointer;border-radius:50%;box-shadow:0 0 0 2px var(--coin)}.pav:focus-visible{outline:2px solid var(--coin);outline-offset:3px}
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:620px;margin:22px auto 0}
.mode{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:flex-end;gap:8px;min-height:108px;padding:10px;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#f3e9cf,#e2d2ad);color:var(--tinta);box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 0 0 1px rgba(90,61,30,.25)}
.mode img{position:absolute;right:-6px;bottom:-10px;height:120%;max-width:58%;object-fit:contain;opacity:.95;pointer-events:none}
.mode span{position:relative;display:flex;flex-direction:column;max-width:64%;z-index:1}
.mode b{font-family:var(--f-display);font-size:1.18rem;font-weight:700;line-height:1.05}.mode small{font-size:.8rem;color:#5d4630;line-height:1.25;margin-top:3px}
.mode:hover{transform:translateY(-2px)}.mode:focus-visible{outline:2px solid var(--coin);outline-offset:3px}.mode{transition:transform .15s}
@media (min-width:720px){.modes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.profbar{display:flex;justify-content:flex-end;margin-top:12px}.profbar .btn{width:auto}

/* ===== La mesa entra entera en la pantalla, sin scroll ===== */
body[data-view=game]{overflow:hidden}
body[data-view=game] #app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body[data-view=game] .guarda{display:none}
body[data-view=game] .topbar{padding-block:2px}
body[data-view=game] #view{flex:1 1 auto;min-height:0;padding-bottom:0}
body[data-view=game] .game{flex:1 1 auto;min-height:0;gap:5px;padding-top:4px;padding-bottom:calc(6px + var(--sab,0px));position:relative}
.game .gtop{min-height:0}.game .gtop .btn{padding:4px 10px;font-size:.8rem}
.game .score{gap:6px}.game .score .sc{padding:3px 8px;gap:0}.game .score .sc b{font-size:1.25rem}.game .score .sc .lbl{font-size:.78rem}
.game .score .mid{font-size:.72rem}
.game .felt{flex:1 1 0;min-height:0;overflow:hidden;padding:6px;gap:4px}
.game .felt{container-type:size}
/* el tamaño de las cartas de la mesa sale del alto que le queda a la mesa */
.felt.n2>.seat,.felt.n2>.center{--pc:clamp(34px,calc((100cqh - 118px) / 3.3),88px)}
.felt.n4>.seat,.felt.n4>.center{--pc:clamp(30px,min(calc((100cqh - 150px) / 4.3),calc(100cqw / 5.6)),66px)}
@container (max-height:300px){.center .ticker,.center .stat{display:none}}
.game .center{min-height:0;overflow:hidden;gap:3px}
.game .center .ticker{font-size:.76rem}
.game .hand{--hw:clamp(76px,min(35vw,15.5dvh),172px)!important;padding-top:6px;min-height:calc(var(--hw) * 1.5 + 10px);flex:none}
.game .handinfo{min-height:0}
.game .actions{min-height:0;gap:5px;flex:none}
.game .actions .btn{padding:7px 12px;font-size:.9rem}
.game .actions .hint{margin:0;font-size:.88rem}
.game .social .btn{padding:4px 10px;font-size:.78rem}
/* el panel de reacciones y señas se abre encima, sin empujar la mesa */
.game .social{position:relative}
.game .actions .chips{position:absolute;left:8px;right:8px;bottom:calc(100% - 4px);z-index:30;background:rgba(28,17,9,.97);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-height:45dvh;overflow:auto}
.game .actions{position:relative}
@media (max-height:700px){.game .score .sc .lbl{display:none}.game .gtop .btn{padding:2px 8px}.game .hand{--hw:clamp(70px,min(33vw,13dvh),172px)!important}.game .handinfo span{font-size:.72rem}.game .actions .btn{padding:6px 10px;font-size:.84rem}}
.game .center>*{flex-shrink:0}

/* ===== Cada hoja entra entera en la pantalla =====
   El esqueleto es siempre el mismo: encabezado (volver, título, acción), pestañas si hacen falta, el contenido
   que ocupa lo que queda y, abajo, la navegación. Las listas se paginan solas según el alto que haya. */
:root{--sat:env(safe-area-inset-top, 0px);--sab:env(safe-area-inset-bottom, 0px)}
html,body{height:100%;overflow:hidden}
#app{height:100vh;height:100dvh;min-height:0;overflow:hidden;padding-block:calc(8px + var(--sat,0px)) 0}
#view{flex:1 1 auto;min-height:0;overflow:hidden}
.guarda{flex:none}
.page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.page::-webkit-scrollbar{display:none}
.page>*{flex:none;margin-top:0!important;margin-bottom:0!important}
.page>.pbody,.page>.grow,.page>.glay,.page>.olay,.page>.xtiles,.page>.anot,.page>.deal,.page>.rbody,.page>.tnew{flex:1 1 0;min-height:0}
.pbody{display:flex;flex-direction:column;gap:10px;margin:0!important}
.pbody>*{flex:none;margin-top:0!important}
.pbody>.fitw,.pbody>.grow{flex:1 1 0;min-height:0}
.box.grow{flex:1 1 0;min-height:0}
.box>.fitw{flex:1 1 0;min-height:0}
.fitw{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1 1 0}
.fit{flex:1 1 0;min-height:0;overflow:hidden;position:relative;margin:0!important;padding:0;align-content:start;align-items:start}
.fit.flist,.fit.lb,.fit.rvl,.fit.tlist,.fit.tms,.fit.tables,.fit.stand{display:flex;flex-direction:column;gap:6px}
.fit.items{align-items:stretch;grid-auto-rows:max-content}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;flex:none;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}
.pgb{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--ink);font-size:1.35rem;line-height:1;display:grid;place-items:center;padding:0 0 3px;flex:none}
.pgb:hover:not(:disabled){border-color:var(--brass)}.pgb:disabled{opacity:.3;cursor:default}
.phd{display:flex;align-items:center;gap:10px;min-height:40px}
.phd h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.5rem,6.2vw,2.1rem);line-height:1.05;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phr{display:flex;gap:8px;align-items:center;flex:none}.phr .btn{width:auto}
.pback{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--ink);font-size:1.5rem;line-height:1;display:grid;place-items:center;padding:0 2px 4px 0;flex:none}
.pback:hover{border-color:var(--brass)}
.snote{margin:0!important;font-size:.86rem}
.linkrow{all:unset;cursor:pointer;align-self:center;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:.92rem;padding:2px 6px}
.linkrow:hover{color:var(--ink)}.linkrow:focus-visible{outline:2px solid var(--coin);border-radius:6px}
.subtabs{margin-top:0}.subtabs button{font-size:.92rem}
.box{gap:10px}

/* --- Jugar --- */
.pg-menu{gap:12px}
.pg-menu .phead{margin:0 auto!important}
.pg-menu .deal{container-type:size;padding:0;gap:clamp(4px,1.6cqh,12px);justify-content:center;min-height:180px}
.pg-menu .filete{font-size:clamp(2.2rem,min(15vw,17cqh),4.6rem)}
.pg-menu .filete .vol{width:clamp(34px,min(12vw,14cqh),72px)}
.pg-menu .lema{font-size:clamp(.85rem,4cqh,1.05rem)}
.pg-menu .fan{height:clamp(70px,34cqh,190px);margin:0}
.pg-menu .fan .card{width:clamp(44px,min(26vw,21cqh),118px)}
.pg-menu .btn.xl{padding-block:clamp(8px,2.6cqh,14px)}
@container (max-height:250px){.pg-menu .lema{display:none}}
.pg-menu .modes{margin:0 auto!important;width:100%;gap:8px}
.mode{min-height:clamp(70px,11dvh,108px)}
.waline{align-self:center;color:#25d366;text-decoration:none;font-weight:600;display:flex;align-items:center;gap:6px;font-size:.95rem}
.waline:hover{text-decoration:underline}
.rowb.slim{padding-block:8px;max-width:620px;width:100%;margin:0 auto!important}

/* --- Jugar online --- */
.olay{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.ocol{display:flex;flex-direction:column}
.rowb.prim b{color:var(--coin);font-size:1.18rem}
@media (min-width:720px){.olay{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}}
.tables .trow{flex:none}
.opanel{text-align:left;display:flex;flex-direction:column;gap:10px}.opanel h2{text-align:center}
.lpanel{text-align:left;display:flex;flex-direction:column;gap:10px;max-height:86dvh}
.lpanel .fitw{min-height:120px;max-height:60dvh}
.lpanel .lb{margin:0}

/* --- La Huella --- */
.glay{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px}
.glay .mapwrap{grid-row:1;grid-column:1;padding:6px;height:min(76vw,38dvh);align-self:start}
.glay .armap{height:100%;width:auto;max-width:none}
.gtit{grid-row:1;grid-column:2;align-self:stretch;justify-content:center;gap:6px}
.gtit .gt{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,5vw,1.6rem);line-height:1.1}
.gtit .linkb{align-self:flex-start;font-size:.9rem}
.zbox{grid-row:2;grid-column:1/-1;min-height:0;margin:0!important}
.zhd{display:flex;align-items:center;gap:8px}.zhd>div{flex:1;min-width:0;text-align:center}
.zhd h3{margin:0;font-family:var(--f-display);font-size:1.2rem;color:var(--ink)}.zhd small{color:var(--muted);font-size:.8rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv{flex:none}
.cuppill{cursor:pointer}
@media (min-width:720px){.glay{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.glay .mapwrap{grid-row:1/3;height:100%}.zbox{grid-column:2}}

/* --- Extra --- */
.xtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px}
.xtiles .mode{min-height:0;height:100%}
.xtiles .mode img{height:112%}
@media (min-width:720px){.xtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- Perfil --- */
.pg-profile .prof{margin:0!important;flex-wrap:nowrap;gap:12px}
.pg-profile .prof>div{flex:1;min-width:0}
.pg-profile .prof h2{font-size:clamp(1.4rem,6vw,2rem)}
.pg-profile .prof form{margin-top:6px;flex-wrap:nowrap}.pg-profile .prof input{min-width:0;flex:1}
.pg-profile .stats{grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:6px;margin:0!important}
.pg-profile .stat-b{padding:6px 8px;min-width:0}.pg-profile .stat-b small{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pg-profile .stat-b b{font-size:1.3rem}
.mesa3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1 1 0;min-height:0}
.mz{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center;min-width:0;min-height:0;overflow:hidden}
.mz:hover{border-color:var(--brass)}.mz:focus-visible{outline:2px solid var(--coin)}
.mz b{font-size:.92rem;line-height:1.15}.mz small{color:var(--muted);font-size:.78rem}
.mz .bigback{width:56px}.mz .swatch{width:100%;max-width:120px;height:72px}
.frow{flex-wrap:wrap;gap:8px}.frow form{flex:1 1 220px;flex-wrap:nowrap}.frow form input{flex:1;min-width:0}

/* --- Tienda --- */
.pg-shop .items{grid-template-columns:repeat(auto-fill,minmax(min(100%,132px),1fr));gap:8px;margin:0}
.pg-shop .item{padding:10px;gap:5px}
.pg-shop .prev{height:clamp(64px,12dvh,104px)}
.pg-shop .prev .av{height:100%;width:auto}
.pg-shop .item b{font-size:1rem}
.pg-shop .item p{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:none}
.pg-shop .item .btn{padding:7px 8px;font-size:.88rem}
.pg-shop .bigback{width:auto;height:100%;aspect-ratio:2/3}
.pg-shop .swatch{height:100%}
@media (max-height:700px){.pg-shop .item p{display:none}}
.kpanel{text-align:left;max-height:90dvh}.kpanel .item{border:0;background:transparent;padding:0}

/* --- Ajustes --- */
.pg-settings .box{gap:6px}
.pg-settings .toggle{padding:6px 0}
.mpform{gap:6px}.mpl{display:grid;grid-template-columns:8.5em 1fr;align-items:center;gap:8px}.mpl span{font-size:.82rem}

/* --- Misiones y ranking --- */
.mislist{margin:0}.achs{margin:0!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.fit.lb{margin:0}
.fit.lb li,.fit.flist li,.fit.rvl li{flex:none}

/* --- Reglamento --- */
.rbody{gap:10px;justify-content:flex-start;font-size:clamp(.92rem,2.2dvh,1.05rem);line-height:1.45}.rbody p{margin:0}
.rbody .rank{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.rbody .rank .card{width:100%}

/* --- Anotador --- */
.pg-anotador .anot{margin:0!important}
.acol{justify-content:center;gap:clamp(4px,1.2dvh,8px);padding:clamp(8px,1.6dvh,12px)}
.anum{font-size:clamp(2.4rem,8dvh,3.4rem)}
.abig{padding-block:clamp(8px,2.4dvh,16px)!important}
.arow2{justify-content:center}

/* --- Torneos --- */
.tcard{flex:none}
.thead{gap:8px}
.tchips{margin:0}
.ctas{flex-wrap:nowrap}.ctas .big-cta{flex:1}.ctas .btn{width:auto}
.tlinks{gap:8px}.tlinks .btn{width:auto}
.rtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.rtabs button{flex:none}
.tm-lab{color:var(--muted);font-size:.8rem}
.strow{display:grid;grid-template-columns:2em minmax(0,1fr) 2.6em 2.6em 3em;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:8px;flex:none}
.strow>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strow.sth{border:0;color:var(--muted);font-size:.8rem;padding-block:0}.strow.tme{border-color:var(--brass)}
.tnew{gap:10px;overflow:hidden}
.tnew textarea{resize:none}
@media (max-height:720px){.cd.big{padding:6px 10px;gap:2px}.cd.big .cd-u b{font-size:1.3rem}.pozo{padding:8px 12px}}

/* --- Sala y entrada --- */
.page.pg-room>.room{padding-top:0}
.gate{padding-top:clamp(8px,3dvh,28px);gap:clamp(8px,1.8dvh,14px)}
.gate .filete,.filete.gtitle{font-size:clamp(2.4rem,min(13vw,8dvh),4.4rem)}
.gate .box{gap:clamp(6px,1.4dvh,12px)}
.regav .av{max-height:clamp(54px,11dvh,96px);width:auto}

/* --- Dorsos y paños dibujados: el dibujo trae su propio margen de papel --- */
.bigback,.backs i,.deck i{border:0!important}
.bigback{border-radius:5px;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.backs i{box-shadow:0 1px 3px rgba(0,0,0,.35)}
.felt{box-shadow:inset 0 0 0 5px rgba(0,0,0,.22),inset 0 0 0 7px rgba(243,230,200,.14),inset 0 0 70px rgba(0,0,0,.45)!important}
.xtiles .mode img{max-width:46%;height:104%}.xtiles .mode span{max-width:58%}
.pg-profile .stats{grid-template-columns:repeat(auto-fit,minmax(50px,1fr))}
.pg-menu .deal{min-height:150px}
.rv .rvi small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
@media (max-height:700px){.pg-settings .toggle small{display:none}.pg-settings .vol input{height:22px}.pg-settings .box{padding:12px}.mode{min-height:64px}}
.rv .rvi{min-width:0;flex:1}.rv .rvi b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv{padding:6px 10px}
.glay .mapwrap{height:min(70vw,34dvh)}
.rowf{flex-direction:row!important;align-items:center;flex-wrap:wrap;gap:6px 10px}.rowf label{flex:1 1 140px;display:flex;flex-direction:column;cursor:pointer}.rowf input{width:6.5em;flex:none}.rowf .btn{width:auto}
.pg-tour .stats,.apanel .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pg-tour .stat-b{padding:6px 8px}.pg-tour .stat-b b{font-size:1.25rem}
.pg-menu .deal{min-height:130px}
@media (max-height:700px){
  .rowb{padding-block:8px}.rowb small{display:none}.rowb.prim small{display:block}
  .pozo .note,.pg-profile .snote,.pg-tour .admin>.note{display:none}
  .pg-profile .prof .av{width:64px;height:64px}
  .tchips span{font-size:.78rem;padding:2px 8px}
  .pg-settings .vol{font-size:.88rem}.pg-settings .field>span{display:none}
  .phd{min-height:34px}.page{gap:8px;padding-block:8px}
}
@media (max-height:700px){.pg-tour .tc-theme{display:none}.pz-n{font-size:2rem!important}.pz-sp{font-size:.9rem}}
.rv .rvi{overflow:hidden}.rv>.btn{flex:none}
@media (max-height:700px){.gate .filete,.filete.gtitle{font-size:2.3rem}.gate .note{display:none}.gate .box{padding:12px}.regav b{font-size:.75rem}}
/* La Huella: el mapa ocupa la hoja; los rivales se abren aparte */
.glay{display:flex!important;flex-direction:column;gap:8px}
.glay .mapwrap{flex:1 1 0;min-height:0;height:auto!important;padding:6px;display:flex;justify-content:center;align-items:center}
.glay .armap{height:100%;width:auto;max-width:100%;max-height:100%}
.glay .gtit{padding:10px 12px;gap:4px}.gtl{display:flex;align-items:baseline;gap:8px}.gtl .tag{flex:none}
.glay .gtit .note{font-size:.85rem}
.zbar{padding:10px 12px;gap:8px;border-width:2px}
.glay.wide{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.glay.wide .mapwrap{height:100%!important}.gside{display:flex;flex-direction:column;gap:10px;min-height:0}
.rpanel{border-width:2px}.rpanel .fitw{min-height:200px;max-height:58dvh}
.paycoins{all:unset;cursor:pointer;text-align:center;color:var(--muted);font-size:.8rem;text-decoration:underline;text-underline-offset:2px}.paycoins:hover{color:var(--ink)}
@media (max-height:700px){.glay .gtit .note{display:none}}
.glay .mapwrap{align-self:center}
.rpanel .fitw{flex:none;height:min(52dvh,340px)}
.fit.flist,.fit.lb,.fit.rvl,.fit.tlist,.fit.tms,.fit.tables,.fit.stand{align-items:stretch}
.rv .rvi small:first-of-type{white-space:nowrap}
.lpanel,.opanel{align-items:stretch}.lpanel>*,.fitw,.fit{min-width:0}.lpanel>.btn{align-self:center}
/* camisetas de La Hincha en el celular */
.kpanel{align-items:stretch;max-width:420px}
.kpanel .item{width:100%;min-width:0;gap:8px}
.kpanel .prev{height:clamp(120px,24dvh,170px)!important}
.kpanel .kits{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%}
.kpanel .kitb{width:100%;box-sizing:border-box}
@media (max-width:380px){.kpanel .kits{gap:5px}.kpanel{padding:14px}}
/* tirar con dos toques: la carta elegida sube y brilla; el segundo toque la tira */
.hand button.sel{--y:calc(var(--hw) * -0.24)!important;z-index:4}
.hand button.sel .card{box-shadow:0 0 0 3px var(--coin),0 12px 26px rgba(0,0,0,.55);border-radius:7px}
.hand.picking button:not(.sel):not(:disabled){filter:brightness(.82)}
@media (hover:none){.hand button:not(:disabled):hover{--y:0px}.hand button.sel:hover{--y:calc(var(--hw) * -0.24)}}
@media (prefers-reduced-motion:reduce){.hand button{transition:none}}

/* ===== Al tocar: cada botón se hunde un poco y deja una onda dorada, como una ficha que cae en el paño ===== */
button,.btn,.rowb,.mode,.tcard,.mz,.pill,.pgb,.pback,.linkrow,.kitb,.regav{-webkit-tap-highlight-color:transparent}
.btn,.mode,.tcard,.mz,.pill,.pgb,.pback,.kitb,.regav,.seg button,.subtabs button,.tabs button,.snd,.sw,.optline,.rowb{transition:transform .12s cubic-bezier(.3,.7,.4,1),filter .12s}
.btn:active:not(:disabled),.mode:active,.tcard:active,.mz:active,.pill:active,.pgb:active:not(:disabled),.pback:active,.kitb:active,.regav:active,.seg button:active:not(:disabled),.subtabs button:active,.snd:active,.sw:active{transform:scale(.94);filter:brightness(1.12)}
.tabs button:active svg{transform:translateY(2px) scale(.9)}.tabs svg{transition:transform .12s}
.rowb:active{transform:translateX(3px)}
.ripple{position:fixed;pointer-events:none;overflow:hidden;z-index:90}
.ripple i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(240,197,72,.55) 0 30%,rgba(240,197,72,.18) 55%,transparent 70%);transform:translate(-50%,-50%) scale(0);animation:rip .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.tabs button[aria-current="page"] svg{animation:tabin .3s cubic-bezier(.3,1.6,.5,1)}@keyframes tabin{from{transform:scale(.7)}}

/* ===== Cartel de fin de partida ===== */
.endp{padding-top:14px;overflow:hidden}
.cartel{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:6px 0 2px}
.c-rays{position:absolute;left:50%;top:44px;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(240,197,72,.22) 0 9deg,transparent 9deg 22.5deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:spin 18s linear infinite}
.cartel.lose .c-rays,.cartel.nada .c-rays{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.c-av{position:relative;border-radius:50%;padding:4px;background:var(--panel);box-shadow:0 0 0 3px var(--coin),0 10px 24px rgba(0,0,0,.5)}
.c-av .av{display:block;border-radius:50%}
.cartel.lose .c-av{box-shadow:0 0 0 3px #8a6e62,0 10px 24px rgba(0,0,0,.5);filter:saturate(.55)}
.c-rib{position:relative;display:flex;align-items:center;justify-content:center;gap:2px;margin-top:-14px;padding:6px 18px 8px;border-radius:12px;
  background:linear-gradient(180deg,#7a1f2e,#4d1220);border:2px solid var(--coin);box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.c-rib b{font-family:var(--f-display);font-style:italic;font-weight:800;font-size:clamp(2.2rem,11vw,3rem);line-height:1;color:#fff;text-shadow:2px 2px 0 #74acdf,4px 4px 0 #1d3557,4px 6px 10px rgba(0,0,0,.4);padding:0 .06em .06em}
.c-rib .vol{width:34px;height:auto;flex:none}.c-rib .vol.r{transform:scaleX(-1)}
.cartel.lose .c-rib{background:linear-gradient(180deg,#3d3330,#241c1a);border-color:#8a6e62}
.cartel.lose .c-rib b{color:#e9dccb;text-shadow:2px 2px 0 #5b4a44,3px 5px 8px rgba(0,0,0,.45)}
.cartel.lose .c-rib .vol{filter:grayscale(1) brightness(.8)}
.cartel.nada .c-rib{background:linear-gradient(180deg,#3a2c1c,#241a10)}
.c-sub{font-size:1.05rem;color:var(--ink)!important;font-weight:600}
.endp.lose{border-color:#8a6e62}
/* la entrada: la victoria cae y rebota como un sello; la derrota baja pesada y queda torcida */
.cartel.win.anim .c-av{animation:avin .5s cubic-bezier(.3,1.5,.5,1) both}
.cartel.win.anim .c-rib{animation:stamp .6s .15s cubic-bezier(.25,1.6,.45,1) both}
.cartel.win.anim .c-rays{animation:raysin .8s .2s ease-out both,spin 18s linear infinite}
@keyframes avin{from{transform:scale(.3);opacity:0}}
@keyframes stamp{0%{transform:scale(2.2) rotate(-8deg);opacity:0}60%{transform:scale(.94) rotate(1deg);opacity:1}100%{transform:none}}
@keyframes raysin{from{opacity:0;transform:scale(.4)}}
.cartel.lose .c-rib{transform:rotate(-2.5deg)}
.cartel.lose.anim .c-av{animation:avin .5s ease-out both}
.cartel.lose.anim .c-rib{animation:drop .8s .1s cubic-bezier(.5,0,.6,1) both}
@keyframes drop{0%{transform:translateY(-70px) rotate(0);opacity:0}55%{transform:translateY(4px) rotate(-1deg);opacity:1}75%{transform:translateY(-3px) rotate(-3.5deg)}100%{transform:rotate(-2.5deg)}}
.endp.anim>:not(.cartel){animation:fadein .4s .45s both}@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.cartel *,.c-rays,.ripple i,.endp>*{animation:none!important}.btn:active{transform:none}}
.c-av{border-radius:20px}.c-av .av{border-radius:16px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:#f6f1e7;color:#2a1d12;border-color:#d8cdb8;font-weight:700}
.gbtn:hover:not(:disabled){background:#fff}
.ordiv{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem}.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line)}
/* reloj de la jugada (online) */
.turnbar{display:flex;align-items:center;gap:10px;padding:2px 4px;flex:none}
.turnbar .tt{font-size:.82rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.turnbar .tt b{color:var(--ink);font-size:.95rem}
.turnbar .tr{flex:1;height:6px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(243,230,200,.08)}
.turnbar .tr i{display:block;height:100%;width:100%;transform-origin:left center;background:linear-gradient(90deg,var(--brass),var(--coin));border-radius:99px;transition:transform .5s linear}
.turnbar.mine .tt{color:var(--coin)}.turnbar.mine .tt b{color:var(--coin)}
.turnbar.low .tr i{background:var(--bad)}.turnbar.low .tt b{color:var(--bad)}
.turnbar.low.mine .tt{animation:hotpulse 1s ease-in-out infinite}
/* La Huella en el celular: el mapa toma todo el alto libre; su tamaño exacto lo pone sizeMap() */
.glay .mapwrap{container-type:size;width:100%;align-self:stretch}
.glay .armap{height:min(100cqh,calc(100cqw * 440 / 236));width:auto;max-width:none;max-height:none}
.glay.wide .mapwrap{width:auto;align-self:stretch}
.glay.wide{grid-template-columns:minmax(0,44%) minmax(0,1fr)!important}
.glay.wide .mapwrap{width:100%}
/* paño de cuero: costura de tiento alrededor */
.felt.pano-cuero,.swatch.pano-cuero{position:relative}
.felt.pano-cuero::after,.swatch.pano-cuero::after{content:"";position:absolute;inset:8px;border:2px dashed rgba(240,220,176,.6);border-radius:16px;pointer-events:none}
.swatch.pano-cuero::after{inset:4px;border-width:1.5px;border-radius:10px}
/* compartir el resultado */
.btn.share{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-color:rgba(240,197,72,.5);color:var(--coin)}
.spanel{max-width:400px;max-height:94dvh;overflow:auto;align-items:stretch}.spanel h2{font-size:1.7rem!important}
.sprev{display:block;width:auto;max-width:100%;max-height:44dvh;margin:0 auto;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.spanel>.btn.prim{display:flex;align-items:center;justify-content:center;gap:8px}
.srow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.srow .btn{padding:9px 4px;font-size:.88rem;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:4px;text-align:center}
.btn.fb{background:#1877f2;border-color:#1877f2;color:#fff}.btn.ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);border:0;color:#fff}
.spanel>.btn.ghost{align-self:center}
/* sombra de las cartas como caja y no como filtro: es mucho más liviana para mover */
.card .cart{filter:none!important}
.card{border-radius:7%/4.6%;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.hand .card{box-shadow:0 4px 10px rgba(0,0,0,.4)}
.played .card.win{box-shadow:0 0 0 2px var(--coin),0 0 12px rgba(220,170,72,.8)}
/* la sombra del paño en su propia capa: así no se vuelve a pintar cada vez que se tira una carta */
.game .felt{box-shadow:none!important;contain:layout paint}
.game .felt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;transform:translateZ(0);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.22),inset 0 0 0 7px rgba(243,230,200,.14),inset 0 0 70px rgba(0,0,0,.45)}
.game .felt>*{position:relative;z-index:1}

/* ===== La mesa quieta: cada cosa tiene su lugar fijo y lo que aparece o desaparece no corre lo demás ===== */
.game .tablerow{flex:1 1 0;min-height:0;display:flex;gap:6px}
.game .tablerow>.felt{flex:1 1 0;min-width:0;min-height:0}
.felt.n2>.pos-top,.felt.n2>.pos-bottom,.felt.n4>.pos-top,.felt.n4>.pos-bottom{height:calc(var(--pc) * 1.5 + 38px);justify-content:flex-start}
.felt.n2>.pos-bottom,.felt.n4>.pos-bottom{justify-content:flex-end}
.felt .played{height:calc(var(--pc) * 1.5);min-height:0;flex:none}
.felt .seathead{flex-wrap:nowrap;flex:none}
.game .center{position:relative}
/* el registro, a la derecha */
.glog{flex:none;width:clamp(84px,23vw,200px);display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden;padding:8px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.24)}
.glines{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;overflow:hidden;font-size:.74rem;line-height:1.25;color:var(--muted);
  -webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)}
.glines div{flex:none;overflow-wrap:anywhere}.glines div:last-child{color:var(--ink);font-weight:600}
.ginfo{flex:none;display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:var(--muted);border-top:1px solid var(--line);padding-top:6px}.ginfo b{color:var(--coin)}
@media (min-width:720px){.glines{font-size:.84rem}.ginfo{font-size:.86rem}}
/* el reloj en su lugar fijo */
.turnslot{height:22px;flex:none;display:flex;align-items:center}.turnslot>.turnbar{flex:1}
/* los botones crecen hacia arriba si un canto trae más opciones, sin correr la mano */
.game .actions{justify-content:flex-start}
.game .actions{min-height:150px}
@media (max-height:700px){.game .actions{min-height:154px}}
@media (min-width:720px){.game .actions{min-height:146px}}
.game .felt>.seat{z-index:2}.game .felt>.center{z-index:1}
@media (max-width:480px){.game .bubble{font-size:.8rem;padding:3px 8px;max-width:140px}.game .bubble .line{font-size:.7rem}.glog{width:26vw;padding:6px}}

/* ===== El registro no le quita lugar al paño =====
   En pantallas anchas va afuera, a la derecha de la mesa. En el celular queda una línea fina arriba del paño
   con lo último que pasó (y tu envido), sin achicar nada. */
.game .tablerow{position:relative;flex-direction:column;gap:4px}
.game .tablerow>.felt{flex:1 1 0;width:100%}
.game .glog{order:-1;width:auto;flex:none;height:20px;flex-direction:row;align-items:center;gap:10px;padding:0 6px;border:0;background:none;border-radius:0}
.game .glines{-webkit-mask-image:none;mask-image:none;flex:1 1 0;min-width:0;display:block;height:20px;overflow:hidden}
.game .glines div{display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px;font-size:.8rem}
.game .glines div:last-child{display:block}
.game .ginfo{flex-direction:row;border:0;padding:0;gap:10px;white-space:nowrap;font-size:.8rem}
@media (min-width:1180px){
  .game .tablerow{flex-direction:row}
  .game .glog{order:0;position:absolute;left:calc(100% + 14px);top:0;bottom:0;height:auto;width:210px;flex-direction:column;align-items:stretch;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.24)}
  .game .glines{display:flex;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)}
  .game .glines div{display:block;white-space:normal;line-height:1.3;font-size:.86rem}
  .game .ginfo{flex-direction:column;border-top:1px solid var(--line);padding-top:6px;white-space:normal;font-size:.86rem}
}
@media (min-width:1180px){body[data-view=game] #view,body[data-view=game] .game,body[data-view=game] .tablerow{overflow:visible}}

/* ===== En compu, salir y el anotador comparten la misma línea =====
   Arriba del anotador sobraba una franja vacía: «Salir» a la izquierda, la dificultad a la derecha y nada en el
   medio, justo donde entran los dos papelitos. Poniéndolos en la misma línea el paño gana ese alto, y con un paño
   más alto las frases de los jugadores dejan de pisarse entre ellas. */
@media (min-width:1180px){
  .game .gtop{position:absolute;top:0;left:0;right:0;z-index:6;pointer-events:none;align-items:flex-start}
  .game .gtop>*{pointer-events:auto}
  /* los papelitos se quedan en el medio: nunca se meten abajo de «Salir» ni de la dificultad */
  .game .score{margin-top:0;padding-inline:clamp(96px,11vw,170px)}
}

/* ===== Registro desplegable en el celular: no ocupa lugar hasta que lo abrís ===== */
.game .gtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gtr{display:flex;align-items:center;gap:8px}
.gtinfo{font-size:.8rem;color:var(--muted);display:flex;gap:12px;min-width:0;flex:0 1 auto;overflow:hidden}
.gtinfo span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gtinfo b{color:var(--coin)}
.gtop>.btn,.gtop>.gtr{flex:0 0 auto}
.logbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;color:var(--ink);padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.25)}
.logbtn i{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.logbtn[aria-expanded="true"]{border-color:var(--brass);color:var(--coin)}.logbtn[aria-expanded="true"] i{transform:rotate(-135deg) translateY(-1px)}
.logbtn:focus-visible{outline:2px solid var(--coin)}
@media (max-width:1179px){
  .game .glog{display:none!important}
  .game .glog.open{display:flex!important;position:absolute;top:0;right:0;z-index:25;width:min(300px,86%);height:auto;max-height:70%;flex-direction:column;align-items:stretch;gap:6px;padding:10px 12px;
    border:1px solid var(--brass);border-radius:14px;background:rgba(28,17,9,.97);box-shadow:0 12px 30px rgba(0,0,0,.55);animation:pop .18s ease-out}
  .game .glog.open .glines{display:flex;height:auto;max-height:100%;-webkit-mask-image:none;mask-image:none}
  .game .glog.open .glines div{display:block;white-space:normal;line-height:1.3;font-size:.86rem}
  .game .glog.open .ginfo{display:none}
}
@media (min-width:1180px){.logbtn,.gtinfo{display:none}}
@media (max-width:1179px){.game .glog.open .glines{flex:none;overflow:auto}}
.game .actions .chips.senapop{flex-direction:column;align-items:stretch;gap:8px;max-height:60dvh;overflow:auto}
.senapop .sgrp{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.senapop .chiph{width:100%;text-align:center;font-size:.78rem;color:var(--muted);font-weight:700}
.senapop .note{margin:0;text-align:center;font-size:.8rem}

/* Ojo: la animación de repartir se llama "dealt" y no "deal". La clase .deal es la de la portada (display:flex)
   y, si una carta de la mano la tenía, se quedaba sin ancho: esas eran las cartas invisibles al ser mano. */

/* ===== Fin de la mano: el cartel va encima del paño, centrado, y no se corta ===== */
.game .felt>.center{position:static}
.game .center .result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:min(92%,360px);max-height:92%;overflow:auto;
  background:rgba(28,17,9,.94);box-shadow:0 14px 34px rgba(0,0,0,.55);padding:12px 14px;gap:6px;text-align:center}
.game .center .result b{font-family:var(--f-display);font-size:1.25rem}
.game .center .result .btns{justify-content:center;flex-wrap:wrap}
/* ===== Tutorial ===== */
.game .coach{flex:none;margin:0;padding:8px 12px;border-radius:12px}
.game .coach p{margin:2px 0 0;font-size:.92rem;line-height:1.35}
@media (max-height:760px){.game .coach p{font-size:.84rem}}
.hand button.tutpick .card{box-shadow:0 0 0 3px var(--coin),0 0 22px rgba(240,197,72,.75)}
.hand button.tutpick:not(.sel){animation:tutnudge 1.4s ease-in-out infinite}
@keyframes tutnudge{50%{--y:-8px;transform:translateY(-8px) rotate(var(--r,0deg))}}
@media (prefers-reduced-motion:reduce){.hand button.tutpick{animation:none}}

/* ===== Fin de la mano: el cartel va encima del paño, centrado, y no se corta ===== */
.game .felt>.center{position:static}
.game .center .result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:min(92%,360px);max-height:92%;overflow:auto;
  background:rgba(28,17,9,.94);box-shadow:0 14px 34px rgba(0,0,0,.55);padding:12px 14px;gap:6px;text-align:center}
.game .center .result b{font-family:var(--f-display);font-size:1.25rem}
.game .center .result .btns{justify-content:center;flex-wrap:wrap}
/* ===== Tutorial: consejo compacto y la carta que hay que tirar brilla ===== */
.game .coach{flex:none;margin:0;padding:8px 12px;border-radius:12px}
.game .coach p{margin:2px 0 0;font-size:.92rem;line-height:1.35}
@media (max-height:760px){.game .coach p{font-size:.84rem}}
.hand button.tutpick .card{box-shadow:0 0 0 3px var(--coin),0 0 22px rgba(240,197,72,.75)}
.hand button.tutpick:not(.sel) .card{animation:tutnudge 1.4s ease-in-out infinite}
@keyframes tutnudge{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.hand button.tutpick .card{animation:none}}
.game .felt>.center{z-index:auto}
.game .center .result{animation:respop .3s ease-out}
@keyframes respop{from{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
/* ---------- selector de idioma ---------- */
.langseg button{min-width:0}
.langseg.mini{justify-content:center;gap:4px;margin:-4px auto 2px;flex-wrap:nowrap}
.langseg.mini button{flex:0 0 auto;padding:3px 10px;font-size:12px;border-radius:999px;border-color:rgba(255,255,255,.18);color:inherit}
.langseg.mini button[aria-pressed="true"]{background:var(--ink);color:var(--felt)}
/* en pantallas muy bajas el reglamento achica la letra (en portugués e inglés los textos son más largos) */
@media (max-height:700px){.rbody{font-size:clamp(.82rem,2.05dvh,.95rem);line-height:1.38;gap:8px}}
/* ---------- logo: el cartel "Reviro" reemplaza al título con volutas ---------- */
.filete.logo{line-height:0}
.filete.logo img{display:block;height:1.75em;width:auto;max-width:min(92%,460px);object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.pg-menu .filete.logo img{height:1.6em}
.brand img{display:block;height:34px;width:auto}
@media (max-width:420px){.brand img{height:30px}}

/* apodo interno de los admins */
.anick{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;font-size:.78em;font-weight:600;background:rgba(116,172,223,.18);color:#9cc6ec;border:1px dashed rgba(116,172,223,.55);vertical-align:1px}
#admq{width:100%;margin-bottom:8px}
.anick.blk{display:block;width:fit-content;max-width:100%;margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flist li:has(>.anick.row2){flex-wrap:wrap;row-gap:4px}.anick.row2{flex:0 1 auto;max-width:calc(100% - 46px);margin-left:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;flex-wrap:wrap}.admbar .seg{flex:0 0 auto}.admbar .seg button{min-width:0;padding:4px 10px;font-size:.85rem}
.admchips{color:var(--brass);font-variant-numeric:tabular-nums;white-space:nowrap}.admchips svg{width:.95em;height:.95em;vertical-align:-2px;margin-right:2px}
.admchips .chip{display:inline-block;width:.85em;height:.85em;margin-right:3px;vertical-align:-1px}
/* ingreso y registro en celulares: sin la barra de abajo, la hoja usa todo el alto y se baja entera */
@media (max-width:720px){body[data-view=auth] #view,body[data-view=login] #view,body[data-view=register] #view,body[data-view=welcome] #view,body[data-view=boot] #view,body[data-view=banned] #view{padding-bottom:env(safe-area-inset-bottom,0px)}
  body[data-view=auth] .page,body[data-view=register] .page{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:max(24px,env(safe-area-inset-bottom,0px));scroll-padding:80px 0}}
/* cartas de la mesa más grandes: la mano cede un poco de alto y la fórmula aprovecha mejor el paño */
.felt.n2>.seat,.felt.n2>.center{--pc:clamp(38px,calc((100cqh - 120px) / 3),100px)}
.felt.n4>.seat,.felt.n4>.center{--pc:clamp(32px,min(calc((100cqh - 150px) / 4),calc(100cqw / 5.2)),76px)}
.game .hand{--hw:clamp(74px,min(33vw,13.5dvh),160px)!important}
@media (max-height:700px){.game .hand{--hw:clamp(68px,min(31vw,12dvh),160px)!important}}
/* ---------- mano a mano: cartas enfrentadas por baza ----------
   Rival arriba, vos abajo, cada baza en su columna. Los lugares de las cartas están reservados desde el reparto,
   así nada se corre al tirar. En el celular los nombres van en una franja arriba y otra abajo; en pantallas
   anchas van en las esquinas y las cartas usan todo el alto del paño. */
.felt.n2.duel{grid-template-areas:"top" "board" "bottom";grid-template-rows:auto minmax(0,1fr) auto;padding:8px 10px}
.felt.n2.duel>*{--pc:clamp(40px,min(calc((100cqh - 96px) / 2.55),calc((100cqw - 36px) / 3.4)),150px)}
.felt.n2.duel>.seat{height:auto!important;min-height:34px;flex-direction:row;align-items:center;justify-content:flex-start!important;gap:8px;padding-right:96px}
.felt.n2.duel>.pos-top{grid-area:top}.felt.n2.duel>.pos-bottom{grid-area:bottom;padding-right:42%}
.duelboard{grid-area:board;display:flex;justify-content:center;align-items:center;gap:calc(var(--pc) * .14);min-height:0;position:relative;z-index:1}
.bcol{display:flex;flex-direction:column;align-items:center;width:var(--pc);flex:none}
.bcol .slot{width:var(--pc);height:calc(var(--pc) * 1.5);position:relative}
.bcol .slot+.slot{margin-top:calc(var(--pc) * -.42)}
.bcol .slot:first-child{z-index:1}.bcol .slot:last-child{z-index:2}
.bcol .slot .card{width:100%;margin:0}
.bcol .slot:empty{border:1.5px dashed rgba(255,255,255,.13);border-radius:calc(var(--pc) * .08)}
.bcol .slot:first-child .land{--fy:-30px}
.duelside{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:8px;z-index:3}
.duelside .deck{display:none}
.duelstat{position:absolute;right:12px;bottom:12px;max-width:40%;text-align:right;font-size:.74rem;line-height:1.2;color:var(--muted);z-index:3;pointer-events:none}
.felt.n2.duel>.center{position:absolute!important;inset:0;pointer-events:none;z-index:5;display:block;overflow:visible}
.felt.n2.duel>.center .result{pointer-events:auto}
.felt.n2.duel>.seat{z-index:4}
@container (min-width:480px){
  .felt.n2.duel>*{--pc:clamp(40px,min(calc((100cqh - 22px) / 2.55),calc((100cqw - 340px) / 3.4)),170px)}
  .felt.n2.duel>.seat{position:absolute;left:12px;flex-direction:column;align-items:flex-start;padding-right:0;min-height:0;gap:6px}
  .felt.n2.duel>.pos-top{top:10px}.felt.n2.duel>.pos-bottom{bottom:10px;padding-right:0}
  .felt.n2.duel>.pos-bottom{flex-direction:column-reverse}
  .duelboard{grid-row:1/-1}
  .duelside{top:50%;transform:translateY(-50%);right:18px;flex-direction:column;gap:10px}
  .duelside .deck{display:block}
  .duelside .bazas{flex-direction:column}
  .duelstat{max-width:150px;bottom:14px;right:16px;font-size:.8rem}
}
@container (min-width:480px){
  .felt.n2.duel>*{--pc:clamp(40px,min(calc((100cqh - 22px) / 2.55),calc((100cqw - 250px) / 3.3)),170px)}
  .felt.n2.duel .duelboard{justify-content:flex-end;padding-right:64px}
  .felt.n2.duel>.seat .badge{max-width:200px}
}
.felt.n2.duel .badge span:not(.m){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.felt.n2.duel>.center,.felt.n2.duel>.duelside,.felt.n2.duel>.duelstat{grid-area:auto;position:absolute!important}
.felt.n2.duel>.center{inset:0}
.felt.n2.duel>.duelside{left:auto;bottom:auto}
.felt.n2.duel>.duelstat{left:auto;top:auto}
@container (min-width:480px){.felt.n2.duel>.seat{position:absolute!important;grid-area:auto}}
/* celular chico (paño bajo): los nombres se achican a la foto y van a las esquinas, y las cartas usan todo el alto */
@container (max-width:479px) and (max-height:300px){
  .felt.n2.duel>*{--pc:clamp(40px,min(calc((100cqh - 18px) / 2.55),calc((100cqw - 120px) / 3.3)),120px)}
  .felt.n2.duel>.seat{position:absolute!important;grid-area:auto;left:8px;padding-right:0;min-height:0;flex-direction:column;align-items:flex-start;gap:4px}
  .felt.n2.duel>.pos-top{top:8px}.felt.n2.duel>.pos-bottom{bottom:8px;flex-direction:column-reverse}
  .felt.n2.duel .badge>span:not(.m){display:none}
  .felt.n2.duel .seathead{flex-direction:column;align-items:flex-start;gap:4px}
  .duelboard{grid-row:1/-1}
  .duelside{top:50%!important;transform:translateY(-50%);right:10px;flex-direction:column}
  .duelside .bazas{flex-direction:column}
  .duelstat{max-width:84px;font-size:.66rem;bottom:8px;right:8px}
}
/* la carta que ganó la baza queda encima de la que perdió (si es parda, queda como cayó) */
.bcol.l .slot:first-child{z-index:3}
.bcol.w .slot:last-child{z-index:3}
/* las tres bazas centradas en el paño; los nombres de las esquinas se acortan para no pisar las cartas */
@container (min-width:480px){
  .felt.n2.duel .duelboard{justify-content:center;padding-right:0}
  .felt.n2.duel>.seat .badge{max-width:max(96px,calc((100cqw - var(--pc) * 3.28) / 2 - 18px))}
}
@container (min-width:480px){
  .felt.n2.duel>.seat .badge{flex-wrap:wrap;row-gap:2px;border-radius:14px}
  .felt.n2.duel .badge>span:not(.m){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.1;font-size:.82rem;min-width:0;flex:1 1 60px;overflow-wrap:anywhere}
}
@container (min-width:480px){
  .felt.n2.duel>.seat .badge{display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-rows:auto;align-items:center;column-gap:7px;row-gap:2px;padding:4px 10px 4px 4px;border-radius:999px}
  .felt.n2.duel>.seat .badge>svg,.felt.n2.duel>.seat .badge>img,.felt.n2.duel>.seat .badge>:first-child{grid-row:1 / span 2}
  .felt.n2.duel .badge>span:not(.m){flex:none;align-self:end}
  .felt.n2.duel .badge>span.m{justify-self:start;align-self:start}
  .felt.n2.duel .badge:not(:has(.m))>span:not(.m){align-self:center}
}
@container (min-width:480px){
  .felt.n2.duel>.seat .badge{max-width:max(132px,calc((100cqw - var(--pc) * 3.28) / 2 - 10px))}
  .felt.n2.duel .badge>span:not(.m){overflow-wrap:normal;word-break:normal;hyphens:auto}
}
/* ---------- pase de temporada ---------- */
.xtiles .mode[data-wide]{grid-column:1/-1}
.pase{display:flex;flex-direction:column;gap:10px}
.pase .phead{display:flex;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.pase .plv{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6d77a,#c08a1a);color:#2a170b;flex:none;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.pase .plv small{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1}.pase .plv b{font-family:var(--f-display);font-size:1.7rem;line-height:1}
.pase .pinfo{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:3px}.pase .pinfo>b{font-family:var(--f-display);font-size:1.15rem}
.pase .pinfo .bar{height:9px}
.pase .pprem{background:var(--brass);color:var(--brass-ink);font-weight:700;padding:6px 12px;border-radius:999px;font-size:.85rem}
.pase .ptrack{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px;justify-content:space-between}
.pgrid{display:grid;grid-template-columns:auto repeat(var(--n),minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);gap:6px;flex:1 1 0;min-height:0}
.pgrid .prow{align-self:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg)}
.pgrid .prow.pr{color:var(--brass)}
.pgrid .pl{text-align:center;font-weight:700;font-size:.85rem;color:var(--muted);border-bottom:2px solid var(--line);padding-bottom:2px}.pgrid .pl.on{color:var(--brass);border-color:var(--brass)}
.pcell{min-height:0;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 4px;text-align:center;position:relative;overflow:hidden}
.pcell.empty{border-style:dashed;opacity:.35;background:transparent}
.pcell.ready{border-color:var(--brass);box-shadow:0 0 0 2px rgba(240,197,72,.25) inset;animation:glow 1.8s ease-in-out infinite}
.pcell.got{opacity:.62}.pcell.lock .pv{filter:grayscale(.6);opacity:.65}
.pcell .pv{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.pcell .pv b{font-size:.78rem;line-height:1.1;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pcell .pv .chip,.pcell .pv .coin{width:20px;height:20px}
.pcell .pdorso{display:block;width:26px;height:39px;border-radius:4px;background-size:cover!important;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.pcell .ppano{display:block;width:40px;height:30px;border-radius:5px;background-size:cover!important;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.pcell .pst{font-size:.95rem;line-height:1}.pcell .pst.ok{color:var(--good);font-weight:800}
.pcell .btn.sm{padding:3px 8px;font-size:.74rem}
.ptrack .pager{display:flex;align-items:center;justify-content:center;gap:12px;font-size:.85rem;color:var(--muted)}
@media (max-height:700px){.pase .plv{width:50px;height:50px}.pase .plv b{font-size:1.35rem}.pcell .pdorso{width:20px;height:30px}.pcell .ppano{width:32px;height:24px}.pase .snote{display:none}}
.pase .phead .btn{display:inline-flex;align-items:center;gap:6px}.pase .phead .btn .coin{display:inline-block}
.pase .plv small{color:#6b4512}

/* la próxima mano se reparte sola: una barrita que se llena */
.result .autodeal{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(160px,70%);margin-top:2px}
.result .autodeal i{display:block;width:100%;height:4px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.result .autodeal i::after{content:'';position:absolute;inset:0;background:var(--brass);transform-origin:left;transform:scaleX(0);animation:autodeal var(--t) linear var(--d,0ms) forwards}
.result .autodeal small{font-size:.75rem;color:var(--muted)}
@keyframes autodeal{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.result .autodeal i::after{animation:none;transform:scaleX(1);opacity:.5}}
/* La Huella: rivales que todavía no se desbloquean */
.rv.locked{opacity:.72}.rv.locked svg{filter:grayscale(.85) brightness(.8)}
.rv .rvlock{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;color:var(--muted);padding:4px 8px;border:1px dashed var(--line);border-radius:999px;white-space:nowrap}
.rv .rvlock b{color:var(--text,inherit);font-variant-numeric:tabular-nums}
/* La Huella: las estrellas de dificultad en arco alrededor del redondel */
.rv .rvav{position:relative;flex:none;width:46px;height:46px;margin:0 6px 12px}
.rv .rvav>svg:first-child{display:block;border-radius:50%}
.rv .rvst{position:absolute;left:-9px;top:-9px;width:64px;height:70px;overflow:visible;pointer-events:none}
.rvst .rg{fill:none;stroke:rgba(240,197,72,.55);stroke-width:1.6}
.rvst.boss .rg{stroke:#f0c548;stroke-width:2.4}
.rvst .se{fill:#3a2616;stroke:rgba(240,197,72,.85);stroke-width:1;stroke-linejoin:round}
.rvst .sf{fill:#f6c437;stroke:#8a5a12;stroke-width:.6;stroke-linejoin:round}
.rv.locked .rvst{filter:grayscale(.7);opacity:.8}
.bossnote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* La Huella: la línea de porotos con el premio del jefe a la derecha */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv .rvi small.rvn{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.rv .rvn>span{flex:none}.rv .rvn .rvd,.rv .rvn .rvw{font-variant-numeric:tabular-nums}
.rv .rvn>span+span::before{content:'·';margin-right:6px;opacity:.6}
.rv .rvn .rvp{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 3px;border-radius:999px;background:rgba(240,197,72,.14);border:1px solid rgba(240,197,72,.45);color:var(--brass);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.rv .rvn .rvp::before{display:none}
.rv .rvn .rvp i{flex:none;display:block;border-radius:2px;background-size:cover!important;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.rv .rvn .rvp i.d{width:9px;height:13px}.rv .rvn .rvp i.p{width:14px;height:10px}
.rv .rvn .rvp{white-space:nowrap}
/* tarjeta de rival en grilla: nombre y datos al lado de la foto, el botón a la derecha
   y la línea de porotos (con el premio del jefe) que corre también por debajo del botón */
.rvl .rv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:1px;align-items:center}
.rvl .rv .rvi{display:contents}
.rvl .rv .rvav{grid-column:1;grid-row:1/4;align-self:center}
.rvl .rv .rvi>b,.rvl .rv .rvi>small{grid-column:2;min-width:0}
.rvl .rv .rvi>small.rvn{grid-column:2/4}
.rvl .rv>.btn,.rvl .rv>.rvlock{grid-column:3;grid-row:1/3;align-self:center}
.rv .rvn .rvp{padding:1px 8px 1px 3px}
.rv .rvi small.rvn{gap:5px}
.rv .rvn>span+span::before{margin-right:5px}
.rv .rvn>.rvp+span::before,.rv .rvn>.rvp::before{display:none}
.rv .rvn .rvp{flex:none;font-size:.74rem}
.rv .rvn .rvw{flex:0 1 auto;min-width:0;overflow:hidden}
@media (max-width:380px){
 .rvl .rv{column-gap:7px;padding-left:8px;padding-right:8px}
 .rv .rvav{margin:0 4px 12px}
 .rv .rvi small.rvn{gap:4px}
 .rv .rvn>span+span::before{display:none}
 .rv .rvn .rvp{padding:1px 6px 1px 3px}
}
/* si no entra todo en la línea, lo último (las victorias) se baja a una segunda línea que no se ve, en vez de cortarse a la mitad */
.rv .rvi small.rvn{flex-wrap:wrap;height:20px;overflow:hidden;row-gap:8px}
.rv .rvn .rvw{flex:none}
/* ---------- tarjetas de menú con aire de naipe ---------- */
.mode{--su:#8a6a3a;background:radial-gradient(120% 90% at 92% 100%,color-mix(in srgb,var(--su) 22%,transparent),transparent 62%),linear-gradient(160deg,#f6eed8,#e6d6b2)}
.mode.sO{--su:#c08a1a}.mode.sC{--su:#b3352b}.mode.sE{--su:#2f5f8f}.mode.sB{--su:#3f7a3a}
/* el marco fino de los naipes */
.mode::before{content:'';position:absolute;inset:5px;border-radius:11px;border:1px solid color-mix(in srgb,var(--su) 45%,transparent);pointer-events:none;z-index:1}
.mode small{color:#6b543a}
.mode b{letter-spacing:-.01em}
.mode:hover{box-shadow:0 10px 20px rgba(0,0,0,.4),inset 0 0 0 1px rgba(90,61,30,.3)}
/* ---------- el pase de temporada: tarjeta destacada ---------- */
.mode.pasetile{--su:#f0c548;align-items:stretch;background:
  radial-gradient(90% 120% at 85% 110%,rgba(240,197,72,.28),transparent 60%),
  radial-gradient(60% 80% at 10% 0%,rgba(255,255,255,.08),transparent 70%),
  linear-gradient(150deg,#6e1d2c,#3e0f19 70%);color:#f8ecd2;box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(240,197,72,.4)}
.mode.pasetile::before{border-color:rgba(240,197,72,.5)}
.mode.pasetile::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect width='28' height='12' fill='%23efe0bf'/%3E%3Crect width='28' height='1.4' fill='%232a170b'/%3E%3Crect y='10.6' width='28' height='1.4' fill='%232a170b'/%3E%3Cpath d='M14 2.2L19 6L14 9.8L9 6Z' fill='%232a170b'/%3E%3Cpath d='M14 4.2L16.4 6L14 7.8L11.6 6Z' fill='%23b0261c'/%3E%3Cpath d='M0 3L3.4 6L0 9ZM28 3L24.6 6L28 9Z' fill='%23b0261c'/%3E%3Crect x='4.6' y='5.4' width='2.4' height='1.2' fill='%232a170b'/%3E%3Crect x='21' y='5.4' width='2.4' height='1.2' fill='%232a170b'/%3E%3C/svg%3E") left center/21px 9px repeat-x;opacity:.9;pointer-events:none}
.mode.pasetile .ptl{max-width:62%;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:4px 6px 8px;z-index:2}
.mode.pasetile .ptag{align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f0c548;margin:0}
.mode.pasetile .ptl>b{font-size:clamp(1.25rem,3.4vw,1.75rem);color:#fff5dc;line-height:1.05}
.mode.pasetile .pmeta{display:flex;flex-direction:row;align-items:center;gap:10px;max-width:none}
.mode.pasetile .plvc{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f9de8a,#c08a1a);color:#3a210c;font-family:var(--f-display);font-weight:700;font-size:1.2rem;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mode.pasetile .pbarw{flex:1;min-width:0;max-width:none;display:flex;flex-direction:column;gap:4px}
.mode.pasetile .pbar{display:block;height:7px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden;max-width:none}
.mode.pasetile .pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#d9a441,#f6d77a)}
.mode.pasetile .pbarw small{color:#e9d6b4;font-size:.78rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode.pasetile .pready{align-self:flex-start;display:inline-block;max-width:none;padding:4px 10px;border-radius:99px;background:#f0c548;color:#3a210c;font-weight:700;font-size:.78rem;box-shadow:0 0 0 3px rgba(240,197,72,.2);animation:glow 1.8s ease-in-out infinite}
.mode.pasetile .pready.soft{background:transparent;color:#f0c548;border:1px solid rgba(240,197,72,.6);box-shadow:none;animation:none}
.mode.pasetile .pfan{position:absolute;right:30%;bottom:16px;display:flex;max-width:none;z-index:1}
.mode.pasetile .pfan i{display:block;width:38px;height:57px;border-radius:5px;background-size:cover!important;box-shadow:0 4px 10px rgba(0,0,0,.5),0 0 0 1.5px #f6eed8;transform:rotate(var(--r));margin-left:-10px}
.mode.pasetile img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
@media (max-width:520px){.mode.pasetile .pfan{display:none}.mode.pasetile .ptl{max-width:68%}}
@media (max-height:700px){.mode.pasetile .plvc{width:32px;height:32px;font-size:1rem}.mode.pasetile .ptl{gap:4px}}
.mode.pasetile .ptag{white-space:nowrap}
.mode.pasetile .pmeta .pready{display:none}
@media (max-width:420px){.mode.pasetile .pdays{display:none}}
/* pantallas bajas: textos en dos líneas y el pase más compacto */
@media (max-height:700px){
 .xtiles .mode small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .xtiles .mode b{font-size:1.05rem}
 .mode.pasetile .ptag{display:none}
 .mode.pasetile .ptl{gap:3px;padding:2px 4px 6px}
 .mode.pasetile .ptl>b{font-size:1.1rem}
 .mode.pasetile .pready{padding:2px 9px;font-size:.72rem}
}
/* Extra: los dibujos a lápiz de cada tarjeta, abajo a la derecha */
.xtiles .mode.ic img{right:4px;bottom:2px;height:min(86%,150px);width:auto;max-width:52%;aspect-ratio:1;object-fit:contain;opacity:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.xtiles .mode.ic span{max-width:58%}
.xtiles .mode.ic:hover img{transform:rotate(-3deg) scale(1.04)}.xtiles .mode.ic img{transition:transform .2s ease-out}
.mode.pasetile img{right:8px;bottom:6px;height:92%;width:auto;max-width:34%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.mode.pasetile .pfan{right:max(30%,150px)}
.mode.pasetile .ptag .pdays{display:inline;max-width:none}
.xtiles .mode.ic img{height:min(90%,170px);max-width:46%}
.xtiles .mode.ic span{max-width:54%}
@media (max-width:520px){.xtiles .mode.ic img{max-width:42%;right:2px}.xtiles .mode.ic span{max-width:60%}.xtiles .mode.ic b{font-size:1.08rem}}
/* La Huella: tarjetas de rival un poco más compactas (entran 4 por hoja en la compu) */
.rvl .rv{padding-top:5px;padding-bottom:5px}
.rv .rvav{margin-bottom:9px}
/* Tienda: tocar el artículo abre su ficha */
.item .iopen{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;flex:none;min-width:0;border-radius:10px}
.item>.iopen+*{margin-top:auto}
.item .iopen:focus-visible{outline:2px solid var(--coin);outline-offset:3px}
.item .iopen:hover .imore{background:#f6d77a}
.item .prev{position:relative}
.item .imore{position:absolute;right:4px;bottom:4px;font-size:.68rem;font-weight:700;color:#3a210c;background:rgba(246,215,122,.95);padding:2px 7px;border-radius:99px;box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}
.item .imore::after{content:' ›'}
/* la ficha */
.fpanel{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:560px;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:hidden}
.fpanel .fpic{flex:none;display:flex;justify-content:center}
.fpanel .fpic svg{width:min(220px,38dvh);height:auto;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.fpanel .fpic .bigback{width:min(140px,24dvh);aspect-ratio:2/3;height:auto;border-radius:10px;background-size:cover!important;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.fpanel .fpic .swatch{width:min(240px,60vw);height:min(150px,24dvh)}
.fpanel .ftxt{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}
.fpanel h2{margin:0;text-align:center}
.fpanel .fbio{margin:0;color:var(--muted);text-align:center;line-height:1.45}
.fpanel .frases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fpanel .frases li{background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:10px;padding:6px 9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fpanel .frases small{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.fpanel .frases q{font-size:.86rem;line-height:1.25;quotes:'«' '»'}
.fpanel .fbuy{display:flex;flex-direction:column;gap:6px}.fpanel .fbuy .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px}
.fpanel>.ftxt>.btn{width:100%}
@media (min-width:640px){.fpanel{flex-direction:row;align-items:center;gap:20px}.fpanel h2,.fpanel .fbio{text-align:left}}
@media (max-height:640px){.fpanel .frases{display:none}}
.item .imore{white-space:nowrap;max-width:calc(100% - 8px);overflow:hidden;text-overflow:clip}
/* menú Jugar: los mismos dibujos a lápiz que en Extra */
.modes .mode.ic img{right:4px;bottom:2px;height:min(92%,120px);width:auto;max-width:44%;aspect-ratio:1;object-fit:contain;opacity:1;transition:transform .2s ease-out}
.modes .mode.ic span{max-width:60%}
.modes .mode.ic:hover img{transform:rotate(-3deg) scale(1.04)}
/* menú en pantallas bajas: tarjetas de una línea para que el logo y el reparto no se pisen */
@media (max-height:700px){.modes .mode small{display:none}.modes .mode{min-height:54px;align-items:center}.modes .mode.ic img{height:86%}}
/* ---------- Inicio: logo, banner del pase, tres naipes y la línea de la partida ---------- */
.pg-menu .deal.home{gap:clamp(6px,2cqh,14px);justify-content:flex-start;padding-top:4px}
.pg-menu .deal.home .filete{flex:none;margin:0}
.pg-menu .deal.home .filete img{height:clamp(54px,15cqh,120px);width:auto}
.pg-menu .deal.home .optline{flex:none}
/* el pase, en una franja */
.mode.pasetile.pban{flex:none;width:100%;max-width:620px;min-height:0;height:auto;padding:8px 12px;grid-column:auto}
.mode.pasetile.pban .ptl{max-width:70%;gap:4px;padding:2px 2px 6px}
.mode.pasetile.pban .ptl>b{font-size:clamp(1rem,4.2vw,1.3rem)}
.mode.pasetile.pban .plvc{width:32px;height:32px;font-size:1rem}
.mode.pasetile.pban .pfan{display:none}
.mode.pasetile.pban img{height:118%;max-width:28%;bottom:-4px}
.mode.pasetile.pban .pmeta{gap:8px}
.mode.pasetile.pban .pready{animation:none;padding:3px 10px}
/* los tres naipes */
.naipes{flex:1 1 0;min-height:0;width:100%;display:flex;justify-content:center;align-items:center;gap:clamp(8px,3cqw,18px);padding:6px 0 10px}
.naipe{all:unset;box-sizing:border-box;cursor:pointer;flex:none;height:min(100%,44cqw,320px);aspect-ratio:2/3;border-radius:12px;position:relative;
  --su:#8a6a3a;background:radial-gradient(110% 70% at 50% 100%,color-mix(in srgb,var(--su) 20%,transparent),transparent 65%),linear-gradient(165deg,#f8f0dc,#e6d6b2);
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(90,61,30,.3);transition:transform .2s cubic-bezier(.3,.7,.4,1),box-shadow .2s;color:var(--tinta)}
.naipe.sO{--su:#c08a1a}.naipe.sE{--su:#2f5f8f}.naipe.sB{--su:#3f7a3a}
.naipe:first-child{transform:rotate(-4deg) translateY(6px)}.naipe:last-child{transform:rotate(4deg) translateY(6px)}
.naipe.ncen{height:min(100%,48cqw,350px);z-index:1;box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 0 2px rgba(240,197,72,.75)}
.naipe:hover{transform:translateY(-6px)}.naipe:first-child:hover{transform:rotate(-4deg) translateY(-2px)}.naipe:last-child:hover{transform:rotate(4deg) translateY(-2px)}
.naipe:active{filter:brightness(1.08)}
.naipe:focus-visible{outline:2px solid var(--coin);outline-offset:4px}
.naipe[disabled]{opacity:.55;cursor:not-allowed}
.naipe .nfr{position:absolute;inset:6px;border-radius:8px;border:1.5px solid color-mix(in srgb,var(--su) 55%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:6px 5px 9px;text-align:center;overflow:hidden}
.naipe img{flex:1 1 0;min-height:0;width:92%;object-fit:contain;margin-bottom:auto}
.naipe b{font-family:var(--f-display);font-weight:700;font-size:clamp(.92rem,4.4cqw,1.3rem);line-height:1.05;letter-spacing:-.01em}
.naipe small{font-size:clamp(.66rem,2.9cqw,.8rem);color:#6b543a;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@container (max-height:430px){.naipe small{display:none}}
/* ---------- cinco pestañas con Jugar en el centro ---------- */
.tabs.t5 button.tmain{color:var(--ink)}
.tabs.t5 button.tmain svg{stroke:var(--brass-ink)}
@media (max-width:720px){
  .tabs.t5{overflow:visible}
  .tabs.t5 button.tmain{position:relative}
  .tabs.t5 button.tmain svg{width:50px;height:50px;padding:12px;margin-top:-26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f9de8a,#c08a1a);box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 4px rgba(28,17,9,.97);box-sizing:border-box;stroke-width:2}
  .tabs.t5 button.tmain[aria-current="page"] svg{box-shadow:0 4px 14px rgba(240,197,72,.45),0 0 0 4px rgba(28,17,9,.97)}
}
@media (min-width:721px){
  .tabs.t5 button.tmain{background:linear-gradient(180deg,#e9bf55,#c08a1a);color:var(--brass-ink);border-radius:10px}
  .tabs.t5 button.tmain[aria-current="page"]{background:linear-gradient(180deg,#f6d77a,#d9a441)!important;color:var(--brass-ink)!important}
}
.mode.pasetile.pban{text-align:left}
.naipe{height:min(90%,40cqw,300px)}
.naipe.ncen{height:min(100%,46cqw,340px)}
.naipe{height:min(90%,44cqw,300px)}
.naipe.ncen{height:min(100%,50cqw,340px)}
@media (max-height:700px){.pg-menu>.phead{display:none}}
/* los dibujos del inicio vienen sobre papel: se funden con el naipe */
.naipe img{mix-blend-mode:multiply;border-radius:4px}
.naipe img{-webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,#000 62%,transparent 100%);border-radius:0}
/* ---------- naipes del inicio, versión 2: carta española con ventana y cinta ---------- */
.naipe{background:linear-gradient(165deg,#faf3e1,#ead9b3);box-shadow:0 10px 22px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.35) inset,inset 0 0 0 1px rgba(90,61,30,.35)}
.naipe::before{content:'';position:absolute;inset:0;border-radius:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.22;pointer-events:none;mix-blend-mode:multiply}
.naipe .nfr{inset:7px;border:1.5px solid color-mix(in srgb,var(--su) 70%,#3b2c1f);box-shadow:inset 0 0 0 3px #f6eed8,inset 0 0 0 4px color-mix(in srgb,var(--su) 35%,transparent);justify-content:flex-start;gap:0;padding:10px 9px 0}
.naipe .nart{flex:1 1 0;min-height:0;width:100%;border-radius:6px;overflow:hidden;background:#f3e7cd;box-shadow:inset 0 0 0 1px rgba(59,44,31,.35),inset 0 2px 8px rgba(90,61,30,.25);display:flex;align-items:center;justify-content:center}
.naipe .nart img{-webkit-mask-image:none;mask-image:none;mix-blend-mode:multiply;width:100%;height:100%;object-fit:cover;margin:0;flex:none;transition:transform .35s cubic-bezier(.3,.7,.4,1)}
.naipe.n-torneos .nart img{object-fit:contain;padding:4px 0}
.naipe:hover .nart img{transform:scale(1.05)}
/* el título en una cinta del color del palo */
.naipe b{flex:none;align-self:stretch;margin:8px -9px 0;padding:7px 6px 9px;background:linear-gradient(180deg,color-mix(in srgb,var(--su) 88%,#000),color-mix(in srgb,var(--su) 70%,#000));color:#fbf3df;font-size:clamp(.95rem,4.6cqw,1.35rem);text-shadow:0 1px 0 rgba(0,0,0,.35);border-radius:0 0 6px 6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.naipe.ncen b{background:linear-gradient(180deg,#c9932a,#9a6a14);color:#fff8e6}
.naipe .nfr{border-radius:8px}
/* esquinas de naipe: un rombito del color del palo */
.naipe .nesq{position:absolute;width:9px;height:9px;transform:rotate(45deg);background:var(--su);box-shadow:0 0 0 2px #f6eed8;z-index:2}
.naipe .nesq.tl{left:11px;top:11px}.naipe .nesq.br{right:11px;bottom:11px;display:none}
.naipe.ncen .nesq{background:#d9a441}
.naipes{gap:0}
.naipe{height:min(92%,50cqw,340px)}
.naipe.ncen{height:min(100%,56cqw,380px);margin-inline:-3cqw}
.naipe.ncen b{background:linear-gradient(180deg,#3d6f9f,#244a70)}
.naipe.ncen .nesq{background:#2f5f8f}
.naipe.ncen{box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 2px rgba(240,197,72,.85),0 0 22px rgba(240,197,72,.25)}
.naipe.n-torneos .nart{background:#efe3c6}
.pg-menu .deal.home{justify-content:center}
.naipes{flex:0 1 auto;height:min(100%,72cqw,400px)}
.naipe{height:92%}
.naipe.ncen{height:100%;margin-inline:-4cqw}
.naipe:not(.ncen) b{font-size:clamp(.85rem,4.2cqw,1.25rem);padding-inline:12px}
.naipes{height:min(100%,56cqw,400px)}
.naipe.n-torneos .nart img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.naipe.n-torneos .nart{background:radial-gradient(70% 80% at 50% 50%,#ecdcb8,#f1e5c9)}
.naipe.n-torneos .nart img{width:auto;height:100%;max-width:100%}
/* Tienda: pestañas en una sola fila */
.pg-shop .subtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
.pg-shop .subtabs::-webkit-scrollbar{display:none}
.pg-shop .subtabs button{flex:none}
@media (max-width:420px){.pg-shop .subtabs button{padding:6px 11px;font-size:.86rem}}
/* el pase dentro de la Tienda, compacto en pantallas bajas */
.pase.inshop{flex:1 1 0;min-height:0}
@media (max-height:700px){
 .pase.inshop .phead{padding:8px 10px;gap:10px}
 .pase.inshop .phead .btn{padding:6px 12px;font-size:.88rem}
 .pase.inshop .pinfo small:first-of-type{display:none}
}
@media (min-width:721px){
  .tabs.t5 button.tmain:not([aria-current="page"]){background:transparent;color:#e9bf55;box-shadow:inset 0 0 0 1.5px rgba(233,191,85,.55)}
  .tabs.t5 button.tmain:not([aria-current="page"]) svg{stroke:#e9bf55}
}
/* ---------- naipes del inicio, versión 3: del mismo material que los paneles de la página ---------- */
.naipes{height:auto;flex:0 1 auto;gap:clamp(8px,2.6cqw,16px);padding:4px 0 6px;align-items:flex-end}
.naipe,.naipe.ncen{height:auto;aspect-ratio:2/3;margin:0;transform:none;
  width:min(calc((100cqw - 2*clamp(8px,2.6cqw,16px))/3),34cqh,210px);
  background:linear-gradient(170deg,rgba(60,38,20,.92),rgba(28,16,8,.92));color:var(--ink);border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45),inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.06)}
.naipe::before{opacity:.12;mix-blend-mode:screen}
.naipe.ncen{width:min(calc((100cqw - 2*clamp(8px,2.6cqw,16px))/3),34cqh,210px);box-shadow:0 12px 28px rgba(0,0,0,.55),inset 0 0 0 1px rgba(217,164,65,.7),0 0 0 1px rgba(217,164,65,.35),0 0 24px rgba(217,164,65,.18)}
.naipe:first-child,.naipe:last-child{transform:none}
.naipe:hover,.naipe:first-child:hover,.naipe:last-child:hover{transform:translateY(-4px)}
.naipe .nfr{inset:6px;border:1px solid rgba(217,164,65,.45);box-shadow:none;border-radius:9px;padding:6px 6px 0}
.naipe.ncen .nfr{border-color:rgba(217,164,65,.8)}
.naipe .nart,.naipe.n-torneos .nart{background:#efe3c6;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.35)}
.naipe .nart img{mix-blend-mode:normal;image-rendering:auto}
.naipe b,.naipe.ncen b{background:none;box-shadow:none;margin:0;padding:7px 2px 9px;border-radius:0;color:var(--ink);text-shadow:none;
  font-size:clamp(.85rem,3.9cqw,1.2rem);letter-spacing:.01em}
.naipe.ncen b{color:#f0c548}
.naipe .nesq,.naipe.ncen .nesq{display:none}
@container (max-height:430px){.naipe b{padding:5px 2px 6px}}
.naipe b,.naipe.ncen b{white-space:nowrap;font-size:clamp(.78rem,3.6cqw,1.2rem)}
/* naipes: grilla de tres columnas iguales que nunca se sale del ancho */
.naipes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;width:100%;max-width:680px;margin-inline:auto;box-sizing:border-box}
.naipe,.naipe.ncen{width:min(100%,22.6cqh,210px);container-type:inline-size}
.naipe b,.naipe.ncen b{font-size:min(10.5cqi,1.2rem);padding-inline:0}
.naipe,.naipe.ncen{width:min(100%,32cqh,210px)}
.naipe b,.naipe.ncen b{font-size:min(9cqi,1.2rem)}
/* títulos de los naipes: mismo tamaño en los tres, en dos líneas si hace falta (nunca se cortan) */
.naipes .naipe b,.naipes .naipe.ncen b{font-size:clamp(.84rem,3.5vw,1.15rem);white-space:normal;line-height:1.05;min-height:2.3em;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 2px 6px}
.naipes{max-width:calc(3*min(210px,32cqh) + 2*clamp(8px,2.6cqw,16px))}
.naipe.n-torneos .nart img{-webkit-mask-image:none;mask-image:none;width:100%;height:100%;object-fit:contain;padding:4px}
.naipe.n-torneos .nart{background:#f0e5c6}
/* inicio: todo un poco más arriba y la barra de Extras abajo */
.pg-menu .deal.home{justify-content:flex-start;padding-top:0}
.extras{position:relative;flex:none;width:100%;max-width:680px;margin:4px auto 0;box-sizing:border-box;background:var(--hide);border:1px solid var(--line);border-radius:14px;padding:6px 8px 8px}
.extras .xtit{display:block;text-align:left;font-family:var(--f-display);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin:0 0 4px 4px}
.extras .xrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.extras .xb{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:10px;background:rgba(0,0,0,.18);border:1px solid transparent;transition:border-color .15s,transform .12s}
.extras .xb:hover{border-color:rgba(217,164,65,.5)}.extras .xb:active{transform:scale(.95)}
.extras .xb:focus-visible{outline:2px solid var(--coin);outline-offset:2px}
.extras .xb img{width:clamp(34px,10vw,46px);height:auto;aspect-ratio:1;object-fit:contain;background:#efe3c6;border-radius:8px;padding:2px;box-sizing:border-box}
.extras .xb span{font-size:clamp(.66rem,2.7vw,.8rem);font-weight:600;color:var(--ink);line-height:1.1;text-align:center}
.extras .xnotif,.extras .xbdot{position:absolute;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:99px;background:#d8392b;color:#fff;font-style:normal;font-weight:800;font-size:.72rem;box-shadow:0 0 0 2px var(--panel),0 2px 6px rgba(0,0,0,.4)}
.extras .xnotif{top:-8px;right:-8px;animation:xpulse 1.6s ease-in-out infinite}
.extras .xbdot{top:-5px;right:4px;min-width:16px;height:16px;font-size:.62rem}
@keyframes xpulse{50%{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.extras .xnotif{animation:none}}
@media (max-height:700px){.extras .xtit{display:none}.extras .xb img{width:30px}.extras{padding:5px 6px}}
.extras .xnotif{top:-9px;right:6px}
.naipe,.naipe.ncen{width:min(100%,26cqh,210px)}
.naipes{max-width:calc(3*min(210px,26cqh) + 2*clamp(8px,2.6cqw,16px))}
/* naipes del inicio, versión 4: la ilustración entera (marco y título incluidos) */
.naipes .naipe.nfull{aspect-ratio:440/682;background:none;border-radius:12px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.35)}
.naipes .naipe.nfull::before{display:none}
.naipes .naipe.nfull img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.3,.7,.4,1)}
.naipes .naipe.nfull:hover img{transform:scale(1.03)}
.naipes .naipe.nfull.ncen{box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 0 2px rgba(217,164,65,.85),0 0 22px rgba(217,164,65,.2)}
.naipes .naipe.nfull img{-webkit-mask-image:none!important;mask-image:none!important;mix-blend-mode:normal!important;margin:0!important;flex:none!important;border-radius:0!important;opacity:1!important;filter:none!important}
.naipes .naipe.nfull{background:#efe3c6!important;padding:0!important}
/* reglamento: tablas de valores y señas */
.rtab{width:100%;border-collapse:collapse;font-size:.92em}
.rtab th,.rtab td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.rtab th{font-weight:700;color:var(--ink);white-space:nowrap;width:1%}
.rtab td{color:var(--muted)}
.rtab.num td{color:var(--brass);font-weight:700}
.rtab tr:last-child th,.rtab tr:last-child td{border-bottom:0}
.rsenas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;font-size:.88em}
.rsenas div{display:flex;flex-direction:column;padding:3px 0;border-bottom:1px solid var(--line);min-width:0}
.rsenas b{color:var(--ink)}.rsenas span{color:var(--muted)}
.pg-rules .ptabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.pg-rules .ptabs::-webkit-scrollbar{display:none}.pg-rules .ptabs button{flex:none}
.lessons{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pg-tutorial>.box{flex:1 1 0;min-height:0}
.pg-tutorial .fitw{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px}
.pg-tutorial .lessons{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
/* logros: dificultad */
.ach .achlv{display:inline-block;vertical-align:2px;margin-left:4px;font-family:var(--f-body,inherit);font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:99px;background:rgba(255,255,255,.08);color:var(--muted)}
.ach.lv1 .achlv{background:rgba(63,122,58,.35);color:#bfe3b3}
.ach.lv2 .achlv{background:rgba(47,95,143,.4);color:#bcd6f0}
.ach.lv3 .achlv{background:rgba(179,53,43,.4);color:#f3c1ba}
.ach.lv4 .achlv{background:linear-gradient(90deg,#c08a1a,#f6d77a);color:#3a210c}
.ach.lv4{border-color:rgba(240,197,72,.6)}
/* ---------- pase de temporada, versión 2: cartel de peña y camino sobre guarda pampa ---------- */
.pase2{display:flex;flex-direction:column;gap:10px}
.pase2 .pcartel{flex:none;position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px 16px;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,rgba(246,196,55,.16),transparent 55%),linear-gradient(150deg,#6e1d2c,#3e0f19 75%);
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 0 0 1px rgba(240,197,72,.4)}
.pase2 .pcartel::after{content:'';position:absolute;left:0;right:0;bottom:0;height:7px;opacity:.85;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect width='28' height='12' fill='%23efe0bf'/%3E%3Crect width='28' height='1.4' fill='%232a170b'/%3E%3Crect y='10.6' width='28' height='1.4' fill='%232a170b'/%3E%3Cpath d='M14 2.2L19 6L14 9.8L9 6Z' fill='%232a170b'/%3E%3Cpath d='M14 4.2L16.4 6L14 7.8L11.6 6Z' fill='%23b0261c'/%3E%3Cpath d='M0 3L3.4 6L0 9ZM28 3L24.6 6L28 9Z' fill='%23b0261c'/%3E%3Crect x='4.6' y='5.4' width='2.4' height='1.2' fill='%232a170b'/%3E%3Crect x='21' y='5.4' width='2.4' height='1.2' fill='%232a170b'/%3E%3C/svg%3E") left center/18px 8px repeat-x}
/* la medalla: el número del nivel adentro de un aro que se llena con la experiencia */
.pase2 .pmedal{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#f6d77a calc(var(--p)*1%),rgba(0,0,0,.35) 0);box-shadow:0 4px 12px rgba(0,0,0,.45)}
.pase2 .pmedal>span{width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#f9de8a,#c08a1a 70%);color:#3a210c;box-shadow:inset 0 0 0 2px rgba(58,33,12,.35)}
.pase2 .pmedal small{font-size:.62rem;font-weight:700;line-height:1;opacity:.8}
.pase2 .pmedal b{font-family:var(--f-display);font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.pase2 .pdatos{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pase2 .pdatos h3{margin:0;font-family:var(--f-display);font-size:clamp(1.15rem,4.4vw,1.5rem);color:#fff5dc;line-height:1.05}
.pase2 .pdatos p{margin:0;font-size:.84rem;color:#e9d6b4;font-variant-numeric:tabular-nums}
.pase2 .pacc{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pase2 .pacc .btn{width:auto;padding:6px 12px;font-size:.88rem;display:inline-flex;align-items:center;gap:5px}
.pase2 .ptiene{display:inline-block;padding:5px 12px;border-radius:99px;background:#f0c548;color:#3a210c;font-weight:700;font-size:.82rem}
/* el camino */
.pase2 .pcamino{flex:1 1 0;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:6px 6px;
  background:var(--hide);border:1px solid var(--line);border-radius:16px;padding:10px 10px 8px 6px}
.pase2 .plbl{grid-row:1;display:grid;grid-template-rows:minmax(0,1fr) 34px minmax(0,1fr);width:20px}
.pase2 .plbl span{writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;justify-self:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.pase2 .plbl .pr{color:#f0c548}
.pase2 .pscroll{grid-row:1;grid-column:2;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;border-radius:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.pase2 .pscroll::-webkit-scrollbar{display:none}
.pase2 .pscroll:focus-visible{outline:2px solid var(--coin);outline-offset:2px}
.pase2 .ptira{height:100%;width:calc(var(--col) * var(--n));display:grid;grid-template-rows:minmax(0,1fr) 34px minmax(0,1fr)}
.pase2 .pfila{display:grid;grid-template-columns:repeat(var(--n),var(--col));min-height:0}
/* la guarda con los números de nivel */
.pase2 .pguarda{position:relative;display:grid;grid-template-columns:repeat(var(--n),var(--col));align-items:center;
  background:linear-gradient(transparent 13px,rgba(0,0,0,.45) 13px,rgba(0,0,0,.45) 21px,transparent 21px)}
.pase2 .pfill{position:absolute;left:0;top:13px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect width='28' height='12' fill='%23efe0bf'/%3E%3Crect width='28' height='1.4' fill='%232a170b'/%3E%3Crect y='10.6' width='28' height='1.4' fill='%232a170b'/%3E%3Cpath d='M14 2.2L19 6L14 9.8L9 6Z' fill='%232a170b'/%3E%3Cpath d='M14 4.2L16.4 6L14 7.8L11.6 6Z' fill='%23b0261c'/%3E%3Cpath d='M0 3L3.4 6L0 9ZM28 3L24.6 6L28 9Z' fill='%23b0261c'/%3E%3Crect x='4.6' y='5.4' width='2.4' height='1.2' fill='%232a170b'/%3E%3Crect x='21' y='5.4' width='2.4' height='1.2' fill='%232a170b'/%3E%3C/svg%3E") left center/18px 8px repeat-x;box-shadow:0 0 10px rgba(240,197,72,.35);border-radius:0 4px 4px 0}
.pase2 .pn{position:relative;z-index:1;justify-self:center;scroll-snap-align:center;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted);background:#2a1a10;box-shadow:0 0 0 2px rgba(243,230,200,.18)}
.pase2 .pn.on{background:#f0c548;color:#3a210c;box-shadow:0 0 0 2px #8a5a12}
.pase2 .pn.next{color:#f0c548;box-shadow:0 0 0 2px #f0c548}
.pase2 .pn.hito{width:30px;height:30px;transform:rotate(45deg);border-radius:6px}
.pase2 .pn.hito{font-size:0}.pase2 .pn.hito::after{content:attr(data-l)}
/* las celdas de premio */
.pase2 .pc{all:unset;box-sizing:border-box;position:relative;margin:3px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-height:0;overflow:hidden;
  background:rgba(243,230,200,.05);border:1px solid var(--line)}
.pase2 .pc-prem{background:linear-gradient(180deg,rgba(110,29,44,.55),rgba(62,15,25,.6));border-color:rgba(240,197,72,.25)}
.pase2 .pc.vacia{background:transparent;border:0}
.pase2 .pc.fut .pvis,.pase2 .pc.lockr .pvis{opacity:.55;filter:saturate(.6)}
.pase2 .pc.got{opacity:.45}
.pase2 .pc.ready{cursor:pointer;border-color:#f0c548;background:radial-gradient(90% 80% at 50% 30%,rgba(246,215,122,.25),rgba(0,0,0,.15));box-shadow:0 0 0 2px rgba(240,197,72,.35),0 0 16px rgba(240,197,72,.3)}
.pase2 .pc.ready:focus-visible{outline:2px solid var(--coin);outline-offset:2px}
.pase2 .pc.ready:active{transform:scale(.96)}
.pase2 .pc.hito{border-color:rgba(240,197,72,.7)}
.pase2 .pvis{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:0 3px}
.pase2 .pvis b{font-size:.92rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.pase2 .pvis small{font-size:.62rem;color:var(--muted);line-height:1}
.pase2 .pitem b{font-size:.68rem;line-height:1.1;font-weight:700}
.pase2 .pchip,.pase2 .pcoin{display:block;width:24px;height:24px;border-radius:50%;flex:none}
.pase2 .pchip{background:radial-gradient(circle,var(--brass) 0 36%,var(--brass-ink) 37% 45%,var(--brass) 46%);box-shadow:0 0 0 2px var(--brass-ink) inset,0 2px 4px rgba(0,0,0,.4)}
.pase2 .pcoin{background:radial-gradient(circle at 35% 30%,#fff3c4 0 12%,var(--coin) 13% 62%,#b8861f 63%);box-shadow:0 0 0 1px #8a6114,0 2px 4px rgba(0,0,0,.4)}
.pase2 .pdorso{display:block;width:clamp(24px,5dvh,36px);aspect-ratio:2/3;border-radius:4px;background-size:cover!important;box-shadow:0 3px 8px rgba(0,0,0,.5),0 0 0 1.5px #f6eed8}
.pase2 .ppano{display:block;width:clamp(34px,7dvh,52px);aspect-ratio:4/3;border-radius:5px;background-size:cover!important;box-shadow:0 3px 8px rgba(0,0,0,.5),0 0 0 1.5px #f6eed8}
.pase2 .pmark{position:absolute;top:3px;right:4px;font-size:.72rem;line-height:1}
.pase2 .pmark.ok{color:var(--good);font-weight:900}
.pase2 .pgo{font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:99px;background:#c0392b;color:#fff}
.pase2 .pnav{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px}
.pase2 .pnav .btn{width:auto}
@media (max-height:700px){.pase2 .pmedal{width:58px;height:58px}.pase2 .pmedal>span{width:47px;height:47px}.pase2 .pmedal b{font-size:1.4rem}.pase2 .pcartel{padding:8px 12px 12px}.pase2 .pvis small{display:none}.pase2 .snote{display:none}}
@media (prefers-reduced-motion:reduce){.pase2 .pc.ready{box-shadow:0 0 0 2px rgba(240,197,72,.5)}}
/* cada premio se centra en su nivel y ocupa el lugar libre de los costados (los caminos van alternados) */
.pase2 .pfila .pc:not(.vacia){justify-self:center;width:calc(var(--col) * 1.72);margin:4px 0;z-index:1}
.pase2 .pfila .pc.vacia{visibility:hidden}
.pase2 .pfila.pfp{background:none}
.pase2 .pvis b{font-size:1rem}
.pase2 .pchip,.pase2 .pcoin{width:28px;height:28px}
@media (max-height:700px){.pase2 .pchip,.pase2 .pcoin{width:20px;height:20px}.pase2 .pvis b{font-size:.86rem}.pase2 .pacc .btn{padding:4px 10px;font-size:.8rem}}
/* logros: todas las tarjetas del mismo alto, título en una línea con la etiqueta al lado */
.achs{grid-auto-rows:max-content;align-items:stretch;align-content:start}
.ach{height:100%;box-sizing:border-box}
.ach>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ach>div>b{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.ach>div>b{overflow:hidden}
.ach .achlv{flex:none;margin-left:0;vertical-align:0}
.ach>div>small:first-of-type{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.ach>div>.bar{margin-top:auto}
/* tienda: tarjetas parejas */
.fit.items{grid-auto-rows:max-content;align-content:start}
.item>.iopen p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pg-shop .item .iopen{gap:3px}.pg-shop .item{gap:4px}
.pg-shop .item .iopen>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}
.pg-shop .item>.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.pg-shop .item>.btn .chip{flex:none}
/* pase: cantos y títulos */
.pase2 .pcanto i,.pase2 .ptit i{font-style:normal;font-size:1.3rem;line-height:1}
.pase2 .pcanto b,.pase2 .ptit b{font-size:.7rem;line-height:1.15;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pase2 .pcanto b{font-style:italic}
.pase2 .ptit b{font-family:var(--f-display);font-size:.8rem;color:#f0c548}
/* elegir título */
.prof .titbtn{display:flex;flex-wrap:wrap;gap:6px;width:auto;margin-top:4px;align-self:flex-start}
.prof .titbtn>.btn{width:auto}
/* elegir los cantos que van a la mesa: la frase entera y, abajo, de dónde salió */
.tpanel2 .cantolist{gap:5px}
.cantorow{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.cantorow b{font-size:.95rem;font-weight:700}
.cantorow small{color:var(--muted);font-size:.74rem;flex:none}
.cantorow.on{border-color:var(--brass);background:rgba(217,164,65,.12)}
.cantorow.on b{color:var(--coin)}
.cantorow:focus-visible{outline:2px solid var(--coin);outline-offset:2px}
/* el atajo para cambiarlos desde la propia tira, sin salir de la partida */
.chips .chcambiar{border-style:dashed;color:var(--muted)}
.tpanel2 .titlist{display:flex;flex-direction:column;gap:6px;max-height:50dvh;overflow:auto}
.titrow{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.titrow b{font-family:var(--f-display);font-size:1.05rem}.titrow small{color:var(--muted);font-size:.78rem}
.titrow.on{border-color:var(--brass);background:rgba(217,164,65,.12)}.titrow:focus-visible{outline:2px solid var(--coin);outline-offset:2px}
.pase2 .pvis.pitem b,.pase2 .pvis.pcanto b{font-size:.72rem;line-height:1.15}
.pase2 .pvis.ptit b{font-size:.82rem;line-height:1.1}
/* hitos (dorsos, paños): rombo detrás del número, que queda derecho */
.pase2 .pn.hito{transform:none;border-radius:50%;font-size:.74rem;background:transparent!important;box-shadow:none!important;width:28px;height:28px}
.pase2 .pn.hito::after{content:none}
.pase2 .pn.hito::before{content:'';position:absolute;inset:3px;transform:rotate(45deg);border-radius:4px;background:#2a1a10;box-shadow:0 0 0 2px rgba(240,197,72,.6);z-index:-1}
.pase2 .pn.hito.on::before{background:#f0c548;box-shadow:0 0 0 2px #8a5a12}
.pase2 .pn.hito.next::before{box-shadow:0 0 0 2px #f0c548}
.pase2 .pn{isolation:isolate}

/* ================= animaciones de botones (fuera de la partida) =================
   Al pasar el puntero: los botones de metal brillan como un bronce que agarra la luz; las tarjetas se levantan
   como un naipe que sacás del mazo. Al apretar: un golpe seco contra la mesa (se achata y rebota).
   La mesa de juego y la sala de espera no cambian. */
@keyframes golpe{0%{transform:scale(1)}30%{transform:scale(.92,.88)}62%{transform:scale(1.04,1.05)}100%{transform:scale(1)}}
@keyframes golpecard{0%{transform:translateY(-3px)}30%{transform:translateY(1px) scale(.97)}65%{transform:translateY(-4px) scale(1.01)}100%{transform:translateY(-3px)}}
@keyframes saltito{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}70%{transform:translateY(-1px)}}
@keyframes vaiven{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}65%{transform:rotate(5deg)}}
body:not([data-view=game]):not([data-view=room]) .golpe{animation:golpe .32s cubic-bezier(.3,.7,.4,1)}
body:not([data-view=game]):not([data-view=room]) :is(.mode,.xb,.mz,.tcard,.lesson,.titrow,.rowb,.item .iopen,.pc.ready).golpe{animation:golpecard .34s cubic-bezier(.3,.7,.4,1)}
@media (hover:hover) and (pointer:fine){
  /* botones: se elevan y les pasa un brillo de bronce */
  body:not([data-view=game]):not([data-view=room]) .btn{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.3,.7,.4,1),box-shadow .18s,filter .18s,background-color .18s,border-color .18s}
  body:not([data-view=game]):not([data-view=room]) .btn::after{content:'';position:absolute;inset:-1px;background:linear-gradient(105deg,transparent 30%,rgba(255,236,190,.32) 48%,rgba(255,236,190,.08) 56%,transparent 70%);transform:translateX(-130%);pointer-events:none}
  body:not([data-view=game]):not([data-view=room]) .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.38)}
  body:not([data-view=game]):not([data-view=room]) .btn:hover:not(:disabled)::after{transform:translateX(130%);transition:transform .65s cubic-bezier(.3,.6,.3,1)}
  body:not([data-view=game]):not([data-view=room]) .btn.prim:hover:not(:disabled){box-shadow:0 7px 18px rgba(192,57,43,.45),inset 0 -2px 0 rgba(0,0,0,.25)}
  body:not([data-view=game]):not([data-view=room]) .btn.brass:hover:not(:disabled){background:rgba(217,164,65,.12)}
  body:not([data-view=game]):not([data-view=room]) .btn.ghost:hover:not(:disabled){border-color:rgba(243,230,200,.4)}
  /* flechas: se corren hacia donde llevan */
  body:not([data-view=game]):not([data-view=room]) .pback{transition:transform .18s cubic-bezier(.3,.7,.4,1),background-color .18s}
  body:not([data-view=game]):not([data-view=room]) .pback:hover{transform:translateX(-3px)}
  body:not([data-view=game]):not([data-view=room]) .pgb{transition:transform .18s cubic-bezier(.3,.7,.4,1),border-color .18s,color .18s}
  body:not([data-view=game]):not([data-view=room]) .pgb:not(:disabled):hover{border-color:var(--brass);color:var(--brass)}
  body:not([data-view=game]):not([data-view=room]) .pgb[data-d="-1"]:not(:disabled):hover{transform:translateX(-2px)}
  body:not([data-view=game]):not([data-view=room]) .pgb:is([data-d="1"],[data-d="mio"]):not(:disabled):hover{transform:translateX(2px)}
  /* pastillas, pestañas de sección y opciones: se encienden en bronce */
  body:not([data-view=game]):not([data-view=room]) :is(.pill,.subtabs button,.seg button){transition:transform .16s,border-color .16s,color .16s,background-color .16s}
  body:not([data-view=game]):not([data-view=room]) :is(.subtabs button,.seg button):not([aria-pressed="true"]):not(:disabled):hover{border-color:rgba(217,164,65,.55);color:#f3e6c8;transform:translateY(-1px)}
  body:not([data-view=game]):not([data-view=room]) a.pill:hover,body:not([data-view=game]):not([data-view=room]) button.pill:hover{border-color:var(--brass)}
  /* barra de secciones: el ícono pega un saltito; Jugar se balancea como una carta en la mano */
  body:not([data-view=game]):not([data-view=room]) .tabs button:not([aria-current="page"]):hover{color:var(--ink)}
  body:not([data-view=game]):not([data-view=room]) .tabs button:hover svg{animation:saltito .42s cubic-bezier(.3,.7,.4,1)}
  body:not([data-view=game]):not([data-view=room]) .tabs button.tmain:hover svg{animation:vaiven .5s ease-in-out}
  /* tarjetas (menús, tienda, extras, perfil, torneos, tutorial): se levantan como un naipe del mazo */
  body:not([data-view=game]):not([data-view=room]) :is(.mode,.xb,.mz,.tcard,.lesson,.titrow,.rowb){transition:transform .22s cubic-bezier(.3,.7,.4,1),box-shadow .22s,border-color .22s}
  body:not([data-view=game]):not([data-view=room]) :is(.mode,.xb,.mz,.tcard,.lesson,.titrow,.rowb):hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 10px 22px rgba(0,0,0,.42)}
  body:not([data-view=game]):not([data-view=room]) :is(.xb,.lesson,.titrow,.rowb):hover{border-color:rgba(217,164,65,.5)}
  body:not([data-view=game]):not([data-view=room]) .xb img,body:not([data-view=game]):not([data-view=room]) .mz :is(svg,.bigback,.swatch){transition:transform .25s cubic-bezier(.3,.7,.4,1)}
  body:not([data-view=game]):not([data-view=room]) .xb:hover img,body:not([data-view=game]):not([data-view=room]) .mz:hover :is(svg,.bigback,.swatch){transform:rotate(-4deg) scale(1.06)}
  body:not([data-view=game]):not([data-view=room]) .item{transition:transform .22s cubic-bezier(.3,.7,.4,1),box-shadow .22s,border-color .22s}
  body:not([data-view=game]):not([data-view=room]) .item:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.42);border-color:rgba(217,164,65,.45)}
  body:not([data-view=game]):not([data-view=room]) .item .prev>:first-child{transition:transform .25s cubic-bezier(.3,.7,.4,1)}
  body:not([data-view=game]):not([data-view=room]) .item:hover .prev>:first-child{transform:rotate(-2deg) scale(1.04)}
  body:not([data-view=game]):not([data-view=room]) .rv{transition:border-color .2s,background-color .2s}
  body:not([data-view=game]):not([data-view=room]) .rv:not(.locked):hover{border-color:rgba(217,164,65,.55);background:rgba(217,164,65,.06)}
  body:not([data-view=game]):not([data-view=room]) .pc.ready{transition:transform .2s cubic-bezier(.3,.7,.4,1)}
  body:not([data-view=game]):not([data-view=room]) .pc.ready:hover{transform:translateY(-3px) scale(1.02)}
  /* enlaces de texto: el subrayado se tiñe de bronce */
  body:not([data-view=game]):not([data-view=room]) :is(.optline,.linkrow){transition:color .16s}
  body:not([data-view=game]):not([data-view=room]) .optline:hover u{text-decoration-color:var(--brass);color:#f6d77a}
  body:not([data-view=game]):not([data-view=room]) .waline{transition:transform .18s,filter .18s}
  body:not([data-view=game]):not([data-view=room]) .waline:hover{transform:translateY(-1px);filter:brightness(1.15)}
  /* naipes del inicio: al pasar el puntero se sacan del mazo (se levantan, giran un poco y brilla el borde) */
  body:not([data-view=game]):not([data-view=room]) .naipes .naipe.nfull{transition:transform .32s cubic-bezier(.25,.8,.3,1.2),box-shadow .32s}
  body:not([data-view=game]):not([data-view=room]) .naipes .naipe.nfull:hover{transform:translateY(-10px) rotate(-2.5deg);box-shadow:0 18px 30px rgba(0,0,0,.6),0 0 0 2px rgba(240,197,72,.7),0 0 26px rgba(240,197,72,.25)}
  body:not([data-view=game]):not([data-view=room]) .naipes .naipe.nfull.ncen:hover{transform:translateY(-12px) scale(1.03)}
  body:not([data-view=game]):not([data-view=room]) .naipes .naipe.nfull:last-child:hover{transform:translateY(-10px) rotate(2.5deg)}
  body:not([data-view=game]):not([data-view=room]) .naipes .naipe.nfull:hover img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  body:not([data-view=game]):not([data-view=room]) .golpe{animation:none!important}
  body:not([data-view=game]):not([data-view=room]) *:hover,body:not([data-view=game]):not([data-view=room]) *:hover svg,body:not([data-view=game]):not([data-view=room]) *:hover img{animation:none!important}
  body:not([data-view=game]):not([data-view=room]) .btn:hover::after{transition:none!important;transform:translateX(-130%)!important}
}
/* opciones de partida en pantallas bajas: más apretado para que entre la fila de la falta */
@media (max-height:700px){.opanel{gap:6px!important;padding-top:12px!important;padding-bottom:12px!important}.opanel h2{font-size:1.45rem;margin:0}.opanel .field{gap:3px}.opanel .field>span{font-size:.8rem}.opanel .seg button{padding-top:6px;padding-bottom:6px}.opanel>.note{display:none}}
/* ---------- partida en compu grande: paño más ancho y todo lo de adentro más grande ----------
   El registro sigue afuera, a la derecha; el paño ocupa el resto del ancho disponible. */
@media (min-width:1180px) and (min-height:720px){
  body[data-view=game] #view{max-width:min(1120px,calc(100vw - 520px))}
  body[data-view=game] .game{max-width:none}
  body[data-view=game] .topbar,body[data-view=game] .guarda{max-width:min(1120px,calc(100vw - 520px))}
  .felt.n2.duel>*{--pc:clamp(40px,min(calc((100cqh - 22px) / 2.5),calc((100cqw - 300px) / 3.3)),250px)}
  .felt.n4>.seat,.felt.n4>.center{--pc:clamp(30px,min(calc((100cqh - 170px) / 4.1),calc(100cqw / 5.4)),110px)}
  .game .felt .badge{font-size:1rem;padding:3px 14px 3px 3px;gap:9px}
  .game .felt .badge .av{width:46px!important;height:46px!important}
  .felt.n2.duel>.seat .badge{max-width:260px}
  .game .bubble{font-size:1.05rem}
  .duelstat{font-size:.92rem!important;max-width:200px!important}
  .duelside .deck i{transform:scale(1.25)}
  .duelside .bazas i{transform:scale(1.25)}
  .game .score .sc b{font-size:2rem}
}
@media (min-width:1180px) and (min-height:720px){
  /* en pantalla ancha los botones entran en una fila: menos lugar reservado abajo y más paño */
  .game .actions{min-height:112px}
  .game .actions .btn{padding:8px 14px;font-size:.98rem}
}
/* ---------- anotador de la partida en compu: dos papelitos compactos y centrados ----------
   El número grande a un costado y los fósforos al lado (espejados para Ellos), como se anota en la mesa. */
@media (min-width:720px){
  .game .score{grid-template-columns:minmax(0,270px) auto minmax(0,270px);justify-content:center;align-items:center;gap:14px}
  .game .score .sc{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"lbl lbl" "num fos";column-gap:14px;row-gap:0;align-items:center;padding:6px 14px 8px}
  .game .score .sc .lbl{grid-area:lbl}
  .game .score .sc b{grid-area:num;min-width:1.2ch}
  .game .score .sc svg{grid-area:fos;justify-self:start;max-width:none}
  .game .score .sc.them{grid-template-columns:1fr auto;grid-template-areas:"lbl lbl" "fos num";text-align:right}
  .game .score .sc.them svg{justify-self:end}
  .game .score .sc.them .lbl{text-align:right}
  .game .score .mid{text-align:center;line-height:1.25}
}
@media (min-width:1180px) and (min-height:720px){
  .game .score .sc b{font-size:2.2rem}
  .game .score .mid b{font-size:1.1rem}
}
@media (min-width:720px){.game .score .sc svg{height:22px;width:auto}}
/* el nombre del que no es mano queda centrado al lado de la foto */
@container (min-width:480px){.felt.n2.duel .badge:not(:has(.m))>span:not(.m){grid-row:1 / span 2;align-self:center}}
/* fósforos del anotador: ocupan todo el lugar que queda al lado del número, hasta un tope para que no se deformen */
@media (min-width:720px){
  .game .score .sc svg{width:100%;height:auto;max-height:30px;min-width:0}
  .game .score .sc.them svg{justify-self:end}
}
@media (min-width:1180px) and (min-height:720px){
  .game .score{grid-template-columns:minmax(0,310px) auto minmax(0,310px)}
  .game .score .sc svg{max-height:34px}
}
/* paño en compu: más margen interno; carteles, mazo y "la mano vale" más adentro; fotos de los jugadores más grandes */
@container (min-width:480px){
  .felt.n2.duel>.pos-top{top:22px!important}
  .felt.n2.duel>.pos-bottom{bottom:22px!important}
  .felt.n2.duel>.seat{left:26px!important}
  .felt.n2.duel>.duelside{right:30px!important}
  .felt.n2.duel>.duelstat{right:28px!important;bottom:24px!important}
  .felt.n2.duel>.seat .badge>svg:first-child{width:56px;height:56px}
  .felt.n2.duel>.seat .badge{padding:5px 16px 5px 5px;column-gap:10px;font-size:.95rem}
}
@media (min-width:1180px) and (min-height:720px){
  .game .felt.n2.duel>.seat .badge>svg:first-child{width:64px!important;height:64px!important}
  .game .felt.n2.duel>.seat .badge .av{width:64px!important;height:64px!important}
  .game .felt.n2.duel .badge>span:not(.m){font-size:1.05rem}
}
/* que el cartel nunca pise las cartas del centro: si no entra, el nombre baja de renglón */
@container (min-width:480px){
  .felt.n2.duel>.seat .badge{max-width:max(120px,calc((100cqw - var(--pc) * 3.28) / 2 - 40px))!important}
  .felt.n2.duel .badge>span:not(.m){white-space:normal!important;line-height:1.1}
}
/* mano a mano en compu: las cartas del centro dejan lugar fijo a la izquierda para los carteles y a la derecha para el mazo */
@container (min-width:620px){
  .felt.n2.duel .duelboard{justify-content:center!important;padding-left:210px!important;padding-right:76px!important;box-sizing:border-box}
  .felt.n2.duel>*{--pc:clamp(40px,min(calc((100cqh - 30px) / 2.55),calc((100cqw - 300px) / 3.4)),250px)}
  .felt.n2.duel>.seat .badge{max-width:190px!important}
}

/* cambio de fichas por monedas */
.cambio{text-align:left;gap:8px}
.cambio h3{margin:0;font-size:1.02rem;color:var(--ink)}
.cambiorow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media (min-width:620px){.cambiorow{grid-template-columns:repeat(4,1fr)}}
.cambiorow>.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.15;padding:9px 6px;min-width:0}
.cambiorow>.btn b{display:flex;align-items:center;gap:5px;font-size:1.04rem}
.cambiorow>.btn small{font-size:.72rem;opacity:.78;font-weight:600;white-space:nowrap}
.cambiorow>.btn .coin{width:17px;height:17px;flex:0 0 auto}

/* arrastrar la carta hasta la mesa para tirarla (con el dedo o con el mouse) */
.hand button.cdrag{transition:none;z-index:40;cursor:grabbing}
.hand button.cdrag .card{box-shadow:0 18px 34px rgba(0,0,0,.6)}
.hand button.cready .card{box-shadow:0 0 0 3px var(--coin),0 18px 34px rgba(0,0,0,.6)}
.hand button.cback{transition:transform .2s cubic-bezier(.2,.8,.3,1.2)}
body.cdragging{cursor:grabbing}
body.cdragging .duelboard .slot,body.cdragging .seat .played{transition:box-shadow .15s ease}
body.cready .duelboard,body.cready .felt .crow{filter:brightness(1.07)}
@media (prefers-reduced-motion:reduce){.hand button.cback{transition:none}}

/* botón de arrepentimiento: discreto pero siempre a la vista en la primera pantalla */
.arrep{display:block;margin:6px auto 0;background:none;border:0;color:var(--muted);font:inherit;font-size:.76rem;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 8px;opacity:.85}
.arrep:hover,.arrep:focus-visible{color:var(--brass);opacity:1}
.gate .arrep{margin-top:10px}

.linkrow.danger{color:#e07a6b}
.linkrow.danger:hover,.linkrow.danger:focus-visible{color:#ff9281}

/* avisos de sistema: sin internet, o algo se rompió */
#aviso{position:fixed;left:0;right:0;top:0;z-index:600;padding:calc(7px + env(safe-area-inset-top,0px)) 14px 7px;text-align:center;
  font-size:.82rem;font-weight:700;letter-spacing:.02em;color:#1b1206;box-shadow:0 2px 10px rgba(0,0,0,.4)}
#aviso[hidden]{display:none}
#aviso.off{background:linear-gradient(180deg,#e8c56a,#d0a845)}
#aviso.err{background:linear-gradient(180deg,#e58a78,#cf6a56);color:#2a0f09}
#aviso button{margin-left:8px;background:rgba(0,0,0,.22);border:0;color:inherit;font:inherit;
  border-radius:999px;padding:3px 12px;cursor:pointer}
#aviso button:hover{background:rgba(0,0,0,.34)}
@media (max-width:420px){#aviso{font-size:.76rem;padding:6px 10px}}

/* la ventana del botón de arrepentimiento: párrafos sueltos, sin títulos numerados */
.tpanel a.btn{text-decoration:none}
.tpanel .terms p+p{margin-top:10px}

/* aviso de apodo libre u ocupado */
.nickform{display:flex;flex-direction:column;gap:4px}
.nickmsg{min-height:1em;font-size:.76rem;font-weight:700;color:var(--muted)}
.nickmsg.si{color:#7fc08a}.nickmsg.no{color:#e07a6b}

/* ---------- arreglos de celular ---------- */
@media (max-width:720px){
  /* los overlays no se meten abajo de la barra de secciones: el botón de aceptar queda alcanzable */
  body[data-tabs="1"] .over{padding-bottom:calc(76px + var(--sab,0px))}
  .over>.panel{max-height:100%}
  .apanel,.tpanel,.lpanel,.kpanel{max-height:100%}
}
@media (max-width:520px){
  /* el mail no entra y además ya está en Ajustes → Cuenta */
  .prof .mail{display:none}
  .prof{align-items:flex-start}
  .prof>svg,.prof>img{flex:0 0 auto}
  /* las seis cifras del perfil entran si la etiqueta no va tan separada */
  /* seis cifras en fila no entran: van de a tres y las etiquetas se leen enteras */
  .pg-profile .stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pg-profile .stat-b{padding:7px 8px}
  .pg-profile .stat-b small{letter-spacing:.04em;font-size:.66rem}
  .pg-profile .stat-b b{font-size:1.45rem}
  /* el aviso, arriba de la barra de secciones */
  body[data-tabs="1"] #toast{bottom:calc(84px + var(--sab,0px))}
}

/* pantallas bajas (iPhone SE y parecidos): las tres fichas de «Tu mesa» se achican en vez de cortarse */
@media (max-height:720px){
  .pg-profile .mz small{display:none}
  .pg-profile .mz b{font-size:.84rem}
  .pg-profile .mz{padding:6px;gap:2px}
  .pg-profile .mz>svg,.pg-profile .mz>img,.pg-profile .mz .avwrap{width:54px!important;height:54px!important}
  .pg-profile .mz .bigback{width:42px}
  .pg-profile .mz .swatch{height:54px}
  .pg-profile .prof>svg,.pg-profile .prof>img,.pg-profile .prof .avwrap{width:62px!important;height:62px!important}
  .pg-profile .prof h2{font-size:1.6rem}
  .pg-profile .prof p{font-size:.84rem}
  .pg-profile .prof{gap:10px;margin-top:8px}
  .pg-profile .snote{display:none}          /* la aclaración de las estadísticas no entra y no es urgente */
  .pg-profile .stats{margin-top:8px!important;gap:5px!important}
  .pg-profile .stat-b{padding:5px 7px}
  .pg-profile .stat-b b{font-size:1.25rem}
  .pg-profile .titbtn>.btn{padding:5px 10px;font-size:.82rem}
  /* las tres fichas ya llevan a la tienda al tocarlas: el botón de abajo sobra cuando no hay alto */
  .pg-profile .mesa+.btn,.pg-profile .mesa>.btn{display:none}
  .pg-profile .mesa3{min-height:92px}
}

/* ---------- la mesa de 4 en celular ---------- */
@media (max-width:720px){
  /* «Tu envido» y la seña del compa no entran al lado de Salir y Registro: van en su propio renglón */
  .game .gtop{flex-wrap:wrap;row-gap:2px}
  .game .gtop>.gtinfo{order:3;flex:1 0 100%;justify-content:center;gap:16px;font-size:.78rem}
  /* en pantallas bajas ese renglón le saca aire al paño: la ayuda sigue estando en el Registro */
  @media (max-height:700px){.game .gtop>.gtinfo{display:none}}
  /* los de los costados se salían de la pantalla: entran justos y, si no, se recortan hacia afuera */
  .felt.n4>.seat,.felt.n4>.center{--pc:clamp(28px,min(calc((100cqh - 150px) / 4.3),calc(100cqw / 7)),60px)}
  .felt.n4>.pos-left,.felt.n4>.pos-right{min-width:0;overflow:hidden}
  .felt.n4>.pos-left{align-items:flex-start}
  .felt.n4>.pos-right{align-items:flex-end}
  /* el cartel con el nombre se achica para que entre junto a las cartas, en vez de salirse */
  .felt.n4 .seathead{min-width:0;max-width:100%}
  .felt.n4 .seathead>.badge{flex:0 1 auto;min-width:0}
  .felt.n4 .seathead>.backs{flex:0 0 auto}
  .felt.n4 .badge{max-width:100%}
  .felt.n4 .badge span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* «Tu envido» se lee entero; lo que se recorta es la seña, que es más larga */
  .game .gtop>.gtinfo>span:first-child{flex:0 0 auto}
}

/* pantallas muy bajas con mesa de 4: los de los costados quedan como retrato solo,
   que es mejor que verlos cortados por la mitad */
@media (max-width:720px) and (max-height:700px){
  .felt.n4>.pos-left .badge span,.felt.n4>.pos-right .badge span,
  .felt.n4>.pos-left .badge .m,.felt.n4>.pos-right .badge .m{display:none}
  .felt.n4>.pos-left .backs,.felt.n4>.pos-right .backs{display:none}
  .felt.n4>.pos-left .badge,.felt.n4>.pos-right .badge{padding:2px;gap:0}
}

/* las tres fichas de «Tu mesa»: que el nombre entre entero también en celulares normales */
@media (max-width:520px){
  .pg-profile .mz{padding:7px 5px;gap:3px}
  .pg-profile .mz b{font-size:.86rem;line-height:1.1}
  .pg-profile .mz small{font-size:.72rem}
}

/* ---------- inicio: los naipes se acomodan al alto que les queda ----------
   Antes el tamaño del naipe salía del alto de TODA la hoja (26cqh del contenedor de arriba),
   así que en ventanas bajas o anchas los naipes quedaban más altos que su propia fila y el
   sobrante se repartía para arriba, tapando el logo. Ahora la fila mide lo que sobra y el
   naipe sale de ese alto: nunca puede ser más alto que el lugar donde está. */
.pg-menu .deal.home>.naipes{flex:1 1 auto;min-height:0;container-type:size;align-items:center;align-content:center}
.pg-menu .deal.home>.naipes .naipe,
.pg-menu .deal.home>.naipes .naipe.ncen{width:min(100%,calc(100cqh * 440 / 682),210px)}

/* Cuando el alto escasea, lo que se achica es lo de alrededor: los naipes son lo que se viene a tocar. */
@media (max-height:620px){
  .pg-menu .deal.home>.naipes{min-height:132px}
  .pg-menu .deal.home .waline{display:none}
  .pg-menu .extras .xb img{width:26px}
  .pg-menu .extras{padding:4px 6px 5px}
  .pg-menu .extras .xrow{gap:4px}
  .pg-menu .extras .xb{padding:4px 2px;gap:2px}
  .pg-menu .extras .xb span{font-size:.7rem}
  .pg-menu .deal.home .filete img{height:clamp(44px,11cqh,84px)}
}

/* celular acostado y ventanas muy bajas: entra todo, incluida la barra de Extras */
@media (max-height:470px){
  .pg-menu .deal.home>.naipes{min-height:68px}
  .pg-menu .deal.home{gap:3px}
  .pg-menu .arrep{font-size:.7rem;padding:2px 6px;margin-top:2px}
  .pg-menu .deal.home .filete img{height:clamp(34px,9cqh,60px)}
  .pg-menu .extras .xb img{width:22px}
  .pg-menu .extras .xb span{font-size:.64rem}
  .pg-menu .extras{padding:3px 5px 4px}
  .pg-menu .deal.home .optline{font-size:.8rem}
}

/* paquetes de fichas: un renglón por paquete, que entran los cinco y no hay nada que recortar.
   Va con dos clases para ganarle a «.flist li», que los pone en fila. */
.fit.pks{gap:6px}
.pks .pkrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 10px;
  background:var(--hide);border:1px solid var(--line);border-radius:12px;padding:7px 10px}
.pks .pkrow .pk-n{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:1.4rem;
  color:var(--coin);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.pks .pkrow .pk-n .chip{width:19px;height:19px;flex:none}
.pks .pkrow .pk-i{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.pks .pkrow .pk-i b{font-size:.82rem;font-weight:700}
.pks .pkrow .pk-i small{color:var(--brass);font-size:.7rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pks .pkrow .pk-ars{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pks .pkrow .btn{grid-column:1 / -1;width:100%;justify-content:center;padding:6px 12px;font-size:.82rem;
  white-space:nowrap;margin-top:5px}
.pks .pkrow .pk-b{grid-column:1 / -1;display:flex;gap:6px;margin-top:5px}
.pks .pkrow .pk-b .btn{grid-column:auto;margin:0;flex:1 1 0}
/* con ancho de sobra, el botón entra en el mismo renglón */
@media (min-width:520px){
  .pks .pkrow{grid-template-columns:auto 1fr auto auto;gap:4px 12px}
  .pks .pkrow .btn,.pks .pkrow .pk-b{grid-column:auto;width:auto;margin-top:0}
}
/* el cambio de fichas por monedas es secundario: ocupa poco y no le come el lugar a los paquetes */
.cambio{padding:9px 10px;gap:5px}
.cambio h3{font-size:.92rem}
.cambio .note{font-size:.76rem}
.cambiorow .btn{padding:6px 5px}
.cambiorow>.btn b{font-size:.95rem}
.cambiorow>.btn small{font-size:.68rem}

/* las cinco pestañas de la tienda no entran en un celular: se corren con el dedo y el borde
   se desvanece para que se note que hay más */
@media (max-width:520px){
  .pg-shop .subtabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);padding-right:10px}
}

/* ---------- inicio en computadora: los naipes son lo que se viene a tocar ----------
   La barra de Extras se llevaba 115 px de alto y el naipe quedaba en 113 px de ancho. Extras y el
   logo se achican, y el tope del naipe sube, así el alto que sobra se va a las cartas. */
@media (min-width:1000px){
  .pg-menu .extras{padding:5px 10px 6px}
  .pg-menu .extras .xtit{font-size:.7rem;margin:0 0 2px 4px}
  .pg-menu .extras .xrow{gap:8px}
  .pg-menu .extras .xb{padding:4px 2px;gap:2px}
  .pg-menu .extras .xb img{width:34px}
  .pg-menu .extras .xb span{font-size:.76rem}
  .pg-menu .deal.home .filete img{height:clamp(62px,11cqh,100px)}
  .pg-menu .deal.home{gap:clamp(4px,1.2cqh,10px)}
  .pg-menu .deal.home>.naipes .naipe,
  .pg-menu .deal.home>.naipes .naipe.ncen{width:min(100%,calc(100cqh * 440 / 682),260px)}
  .pg-menu .deal.home>.naipes{max-width:calc(3*260px + 2*clamp(8px,2.6cqw,16px))}
}

/* la propuesta de revancha, en el cartel del final */
.endp .rvask{margin:0;color:var(--coin);font-weight:700}
.endp .rvask b{color:var(--ink)}

.endp .rvask q{display:block;color:var(--ink);font-style:italic;margin-bottom:2px}
.endp .rvask q::before,.endp .rvask q::after{content:none}

/* misiones y logros: lo que está cumplido y todavía no se cobró */
.cobtodo{width:100%;margin-bottom:8px}
.mis .cobrar,.ach .cobrar{width:auto;margin-top:6px;padding:5px 12px;font-size:.82rem}
.mis.pend,.ach.pend{box-shadow:inset 0 0 0 1px rgba(240,197,72,.55)}
.ach .cobrar{align-self:flex-start}
.mis .cobrar .coin,.ach .cobrar .coin,.cobtodo .coin{width:16px;height:16px;flex:0 0 auto;margin:0 3px;vertical-align:-3px}
.mis .cobrar,.ach .cobrar,.cobtodo{display:inline-flex;align-items:center;justify-content:center;gap:0}