:root{--wood-deep:#2a1a10;--wood:#5b3923;--wood-light:#75492c;--paper:#f3e8cf;--paper-shade:#e6d6b2;--ink:#2a1a10;--ink-soft:#6b5440;--red:#b8312f;--gold:#e2a72e;--us:#e8b23a;--them:#8cb4da;--green:#3f7d3a;--display:"Alfa Slab One", "Rockwell", "Georgia", serif;--body:"Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;--cw:60px;--hand-cw:clamp(68px, 21vw, 104px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--wood-deep);color:var(--paper);font:500 17px/1.4 var(--body);-webkit-tap-highlight-color:transparent;overflow-x:hidden}#app{height:100%;min-height:100%}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.home,.lobby,.connecting,.game{background:repeating-linear-gradient(92deg, #ffffff06 0 2px, transparent 2px 9px), repeating-linear-gradient(88deg, #00000014 0 1px, transparent 1px 23px), radial-gradient(ellipse at 50% 40%, var(--wood-light), var(--wood) 55%, var(--wood-deep) 120%);min-height:100%}.paper{background:var(--paper);color:var(--ink);border-radius:6px;box-shadow:inset 0 1px #fff6,0 10px 24px -12px #000000b3}.btn{border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:999px;padding:.55em 1.2em;font-size:1rem;font-weight:700;line-height:1.1;transition:transform 80ms,box-shadow 80ms}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.btn:disabled{opacity:.55}.btn-primary{background:var(--red);color:var(--paper)}.btn-quiet{box-shadow:none;text-underline-offset:3px;background:0 0;border-color:#0000;text-decoration:underline}.btn-small{padding:.4em 1em;font-size:.9rem}.link-btn{text-underline-offset:3px;background:0 0;border:0;padding:.4em .2em;font-weight:600;text-decoration:underline}.chip{border:1.5px solid var(--ink-soft);color:var(--ink);background:0 0;border-radius:999px;padding:.15em .75em;font-size:.88rem;font-weight:600}.chip-warn{border-color:var(--red);color:var(--red)}.card{--w:var(--cw);width:var(--w);height:calc(var(--w) * 1.5);border-radius:calc(var(--w) * .09);background:linear-gradient(160deg, #fbf4e2, var(--paper) 60%, var(--paper-shade));color:var(--ink);border:1px solid #b9a37a;flex:none;position:relative;box-shadow:0 2px 4px #00000059}.card:after{content:"";inset:calc(var(--w) * .06);border-radius:calc(var(--w) * .05);opacity:.35;border:1.5px solid;position:absolute}.suit-oro{color:#9a6410}.suit-copa{color:#a12a1f}.suit-espada{color:#1f3f6e}.suit-basto{color:#2d5e23}.card-n{top:calc(var(--w) * .08);left:calc(var(--w) * .12);font:calc(var(--w) * .28) / 1 var(--display);position:absolute}.card-n-b{top:auto;left:auto;bottom:calc(var(--w) * .08);right:calc(var(--w) * .12);transform:rotate(180deg)}.card-emblem{width:62%;height:62%;position:absolute;top:19%;left:19%}.card-back{border:2px solid var(--paper);background:repeating-linear-gradient(45deg,#f3e8cf2e 0 2px,#0000 2px 7px),repeating-linear-gradient(-45deg,#f3e8cf2e 0 2px,#0000 2px 7px),#7b1e2a}.card-back:after{border-color:var(--paper);opacity:.6}.card.mini{--w:22px;border-width:1px;box-shadow:0 1px 2px #00000080}.card.mini:after{border-width:1px;inset:2px}.card.tiny{--w:34px}.home{flex-direction:column;align-items:center;gap:18px;padding:16px 16px 40px;display:flex}.home-top{justify-content:flex-end;align-self:stretch;display:flex}.hero{text-align:center;margin-top:2vh}.fan{width:220px;height:150px;margin:0 auto 6px;position:relative}.fan .card{--w:84px;transform-origin:50% 120%;position:absolute;top:10px;left:68px}.fan .fan-0{transform:rotate(-16deg)}.fan .fan-1{transform:rotate(0)translateY(-8px)}.fan .fan-2{transform:rotate(16deg)}@media (prefers-reduced-motion:no-preference){.fan .card{animation:.7s cubic-bezier(.2,.9,.3,1.2) both deal}.fan .fan-1{animation-delay:80ms}.fan .fan-2{animation-delay:.16s}}@keyframes deal{0%{opacity:0;transform:translateY(40px)rotate(0)}}.logo{font:clamp(2.6rem, 11vw, 4.4rem) / .95 var(--display);color:var(--paper);letter-spacing:-.01em;text-shadow:0 3px 0 var(--wood-deep), 0 6px 18px #00000080;margin:0}.logo span,.brand span{color:var(--gold)}.tagline{color:#e9d9b8;max-width:30ch;margin:10px auto 0;font-size:1.1rem}.home-panel{flex-direction:column;gap:14px;width:min(100%,380px);padding:22px 20px;display:flex}.field{flex-direction:column;gap:4px;font-weight:600;display:flex}.field input,.join-row input{font:600 1.15rem var(--body);border:2px solid var(--ink);color:var(--ink);background:#fffaf0;border-radius:6px;min-width:0;padding:.45em .6em}.join-row{gap:8px;display:flex}.join-row input{text-transform:uppercase;letter-spacing:.25em;font-family:var(--display);flex:1;font-weight:400}.error{color:var(--red);margin:0;font-weight:700}.connecting{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;display:flex}.spinner{border:5px solid #f3e8cf40;border-top-color:var(--gold);border-radius:50%;width:46px;height:46px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.lobby{flex-direction:column;display:flex}.topbar{justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.brand{font:1.3rem var(--display)}.lobby-body{grid-template-columns:1fr;gap:14px;width:min(100%,760px);margin:0 auto;padding:8px 16px 16px;display:grid}.code-card{flex-direction:column;align-items:center;gap:8px;padding:16px;display:flex}.code-label{color:var(--ink-soft);font-weight:600}.code-title{font:1.6rem var(--display);margin:0}.code{gap:6px;display:flex}.code span{font:clamp(1.8rem, 9vw, 2.6rem) / 1 var(--display);text-align:center;border-bottom:3px solid var(--red);width:1.25em;padding:.12em 0}.settings{gap:10px;padding:12px 16px;display:grid}.setting{grid-template-columns:6.5em 1fr;align-items:center;gap:10px;font-weight:700;display:grid}.seg{border:2px solid var(--ink);border-radius:8px;flex-wrap:wrap;width:fit-content;display:flex;overflow:hidden}.seg button{color:var(--ink);background:0 0;border:0;padding:.4em .85em;font-weight:600}.seg button+button{border-left:2px solid var(--ink)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.seg button:disabled{cursor:default}.seg button:disabled[aria-pressed=false]{color:var(--ink-soft)}.teams{grid-template-columns:1fr;gap:14px;display:grid}.team h2{font:1.15rem var(--display);align-items:center;gap:8px;margin:0 0 6px;display:flex}.team h2:before{content:"";background:var(--us);border-radius:50%;width:12px;height:12px}.team-1 h2:before{background:var(--them)}.team ol{gap:8px;margin:0;padding:0;list-style:none;display:grid}.seat-row{background:var(--paper);min-height:48px;color:var(--ink);border-left:6px solid var(--us);border-radius:6px;align-items:center;gap:8px;padding:6px 10px 6px 14px;display:flex}.team-1 .seat-row{border-left-color:var(--them)}.seat-row.empty{color:var(--paper);background:#f3e8cf1f;border:2px dashed #f3e8cf59;border-left-width:6px}.seat-row.empty .chip{color:var(--paper);border-color:#f3e8cf99}.seat-row.me{box-shadow:0 0 0 3px var(--gold)}.seat-name{text-overflow:ellipsis;white-space:nowrap;font-size:1.08rem;font-weight:700;overflow:hidden}.seat-tags{flex:1;gap:4px;display:flex}.seat-tags em{background:var(--paper-shade);color:var(--ink-soft);border-radius:4px;padding:0 6px;font-size:.8rem;font-style:normal;font-weight:600}.seat-tools{gap:6px;margin-left:auto;display:flex}.watchers{color:#e9d9b8;margin:0}.lobby-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(#0000,#2a1a10f2 35%);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:auto;display:flex;position:sticky;bottom:0}.waiting{color:#e9d9b8;margin:0;font-weight:600}@media (width>=640px){.lobby-body{grid-template-columns:1fr 1.4fr}.teams{grid-column:1/-1;grid-template-columns:1fr 1fr}}.game{flex-direction:column;height:100%;display:flex;overflow:hidden}.scorebar{background:#140c078c;border-bottom:1px solid #f3e8cf1f;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:6px 12px;display:grid}.score{grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;display:grid}.score-them{grid-template-columns:1fr auto;justify-items:end}.score-them .score-name{text-align:right;grid-column:1}.score-them .score-num{grid-area:1/2/3}.score-them .tally{grid-column:1;justify-content:flex-end}.score-us .score-num{grid-row:1/3}.score-name{font-size:.92rem;font-weight:700}.score-us .score-name{color:var(--us)}.score-them .score-name{color:var(--them)}.score-num{font:1.9rem / 1 var(--display)}.tally{flex-wrap:wrap;gap:3px;display:flex}.tally-box{width:20px;height:20px}.tally-buenas{margin-left:6px}.stick{stroke:var(--paper);stroke-width:2.6px;stroke-linecap:round}.head{fill:var(--red)}.score-mid{color:#e9d9b8;flex-direction:column;align-items:center;font-size:.85rem;font-weight:600;display:flex;position:relative}.target{opacity:.8}.menu-btn{font-size:1.2rem;text-decoration:none}.menu{z-index:30;flex-direction:column;min-width:9em;padding:8px 14px;display:flex;position:absolute;top:100%}.menu .link-btn{color:var(--ink);text-align:left}.table{flex:1;min-height:0;position:relative}.table:before{content:"";background:radial-gradient(at 50% 45%,#ffe6be1a,#0000 70%);border:1px solid #f3e8cf14;border-radius:48%/44%;position:absolute;inset:4% 3%}.n2{--cw:clamp(46px, 9.5vmin, 70px)}.n4{--cw:clamp(40px, 9vmin, 64px)}.n6{--cw:clamp(32px, 7.4vmin, 54px)}.seat{z-index:3;flex-direction:column;align-items:center;gap:4px;max-width:34vw;display:flex;position:absolute;transform:translate(-50%,-50%)}.seat-me{transform:translate(-50%,-70%)}.backs{gap:2px;height:33px;display:flex}.plate{border:2px solid var(--us);background:#140c07b3;border-radius:8px;flex-direction:column;align-items:center;min-width:5.5em;max-width:100%;padding:3px 10px;transition:box-shadow .2s,background .2s;display:flex}.team-them .plate{border-color:var(--them)}.pname{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-weight:700;overflow:hidden}.pname em{color:#f3a28f;font-size:.8em;font-weight:500}.ptag{color:#e9d9b8;font-size:.75rem}.acting .plate{background:var(--paper);color:var(--ink);box-shadow:0 0 0 4px #e2a72e73,0 0 22px #e2a72e99}.acting .ptag{color:var(--ink-soft)}@media (prefers-reduced-motion:no-preference){.acting .plate{animation:1.4s ease-in-out infinite pulse}}@keyframes pulse{50%{box-shadow:0 0 0 7px #e2a72e33,0 0 26px #e2a72e66}}.pile{z-index:2;display:flex;position:absolute;transform:translate(-50%,-50%)}.pile .card+.card{margin-left:calc(var(--cw) * -.38)}.played.done{filter:brightness(.72)saturate(.7)}.played.won{box-shadow:0 0 0 3px var(--gold), 0 4px 10px #00000080;z-index:1}.played.parda{box-shadow:0 0 0 3px var(--paper-shade);filter:none}@media (prefers-reduced-motion:no-preference){.played.enter{animation:.32s cubic-bezier(.2,.8,.3,1.1) land}}@keyframes land{0%{opacity:0;transform:translateY(18px)scale(1.25)rotate(-6deg)}}.muestra{z-index:4;color:var(--gold);flex-direction:column;align-items:center;gap:2px;font-size:.8rem;font-weight:700;display:flex;position:absolute;top:10px;left:10px}.muestra .card{--w:clamp(40px, 9vmin, 58px);box-shadow:0 0 0 3px var(--gold), 0 4px 8px #00000080;transform:rotate(-8deg)}.stake{z-index:4;font:.95rem var(--display);color:var(--paper);background:var(--red);border-radius:6px;align-items:center;gap:8px;padding:4px 10px;display:flex;position:absolute;top:10px;right:10px;transform:rotate(3deg)}.stake b{background:var(--paper);color:var(--red);border-radius:50%;place-items:center;width:1.5em;height:1.5em;font-weight:400;display:grid}.bubble{white-space:nowrap;z-index:10;background:var(--paper);color:var(--ink);border-radius:6px;padding:.25em .7em;font-weight:700;position:absolute;bottom:calc(100% + 4px);box-shadow:0 6px 14px #00000073}.side-c .bubble{left:50%;translate:-50%}.side-l .bubble{left:0}.side-r .bubble{right:0}.seat-me .bubble{bottom:calc(100% + 8px)}.bubble.call{font:1.15rem var(--display);border:2px solid var(--ink);transform:rotate(-4deg)}.bubble.call-truco,.bubble.call-retruco,.bubble.call-vale4{background:var(--red);color:var(--paper);border-color:var(--paper);font-size:1.35rem}.bubble.call-envido,.bubble.call-real,.bubble.call-falta,.bubble.call-flor{background:var(--gold)}.bubble.call-noquiero,.bubble.call-mazo{color:var(--paper);border-color:var(--paper-shade);background:#3a2a1f}.bubble.say{border-radius:14px 14px 14px 2px;font-size:.95rem}@media (prefers-reduced-motion:no-preference){.bubble{animation:.28s cubic-bezier(.2,.9,.3,1.4) stamp}}@keyframes stamp{0%{opacity:0;transform:scale(1.8)rotate(-12deg)}}.banner{z-index:12;background:var(--gold);color:var(--ink);border:2px solid var(--ink);text-align:center;border-radius:8px;flex-direction:column;align-items:center;max-width:88%;padding:10px 18px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 24px #00000080}.banner strong{font:1.3rem var(--display)}.banner .plus{font:1.1rem var(--display);color:var(--red)}.result{z-index:15;text-align:center;width:min(92%,420px);max-height:94%;padding:14px 18px;position:absolute;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}.result h2{font:1.3rem var(--display);margin:0}.result h2 b{color:var(--red);font-weight:400}.why{color:var(--ink-soft);margin:2px 0 0;font-weight:600}.reveal{text-align:left;gap:4px;margin:10px 0 4px;display:grid}.reveal-row{border-left:4px solid var(--us);align-items:center;gap:10px;padding-left:8px;display:flex}.reveal-row.team-them{border-left-color:var(--them)}.reveal-row span{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:700;overflow:hidden}.reveal-row div{gap:3px;display:flex}.next{color:var(--ink-soft);margin:6px 0 0;font-size:.85rem}@media (prefers-reduced-motion:no-preference){.result,.banner{animation:.3s cubic-bezier(.2,.9,.3,1.2) pop}}@keyframes pop{0%{opacity:0;transform:translate(-50%,-40%)scale(.9)}}.dock{padding:6px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(#140c0733,#140c07bf);border-top:1px solid #f3e8cf1a;flex-direction:column;align-items:center;gap:8px;display:flex;position:relative}.status-row{align-items:center;gap:10px;width:min(100%,640px);min-height:34px;display:flex}.status{flex:1;margin:0;font-size:1.05rem;font-weight:700}.my-turn .status,.must-answer .status{color:var(--gold)}.hint{white-space:nowrap;background:#f3e8cf1f;border-radius:6px;padding:2px 8px;font-size:.9rem}.hand{min-height:calc(var(--hand-cw) * 1.5);justify-content:center;gap:10px;display:flex}.hand-card{background:0 0;border:0;border-radius:9px;padding:0;transition:transform .15s}.hand-card .card{--w:var(--hand-cw)}.my-turn .hand-card:not(:disabled):hover,.my-turn .hand-card:not(:disabled):focus-visible{transform:translateY(-10px)}.my-turn .hand-card:not(:disabled) .card{box-shadow:0 0 0 3px var(--gold), 0 6px 14px #00000080}.hand-card:disabled{opacity:1}.actions{flex-wrap:wrap;justify-content:center;gap:8px;min-height:42px;display:flex}.actions .btn{padding:.5em 1em;font-size:.98rem}.btn-call{background:var(--red);color:var(--paper);font-family:var(--display);letter-spacing:.02em;font-weight:400}.btn-envido{background:var(--gold)}.btn-yes{background:var(--green);color:var(--paper)}.btn-yes small{opacity:.85;margin-left:4px;font-size:.8em}.btn-no{color:var(--paper);background:#3a2a1f}.dock .btn-quiet{color:var(--paper)}.chat{position:relative}.chat-btn{background:#f3e8cf1f;border:0;border-radius:50%;width:36px;height:36px}.chat-menu{z-index:40;grid-template-columns:1fr 1fr;gap:4px;width:15em;padding:8px;display:grid;position:absolute;bottom:calc(100% + 6px);right:0}.chat-menu button{border:1.5px solid var(--paper-shade);color:var(--ink);background:0 0;border-radius:6px;padding:6px;font-weight:600}.overlay{z-index:50;background:#140c07b3;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.gameover{text-align:center;flex-direction:column;align-items:center;gap:12px;width:min(100%,380px);padding:24px 22px;display:flex}.gameover h2{font:2.2rem / 1 var(--display);margin:0}.gameover.won h2{color:var(--red)}.final{margin:0;font-size:1.15rem;font-weight:700}.gameover .row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.gameover .waiting{color:var(--ink-soft)}.gameover .link-btn{color:var(--ink)}@media (width<=420px){.tally-box{width:15px;height:15px}.score-num{font-size:1.5rem}.plate{min-width:4.5em;padding:2px 6px;font-size:.9rem}.n6 .plate{font-size:.8rem}.backs{height:28px}.card.mini{--w:18px}.hint{font-size:.8rem}}@media (height<=620px){:root{--hand-cw:clamp(56px, 15vh, 84px)}}
