:root{color-scheme:dark;--wood-dark: #2b1a10;--wood: #4a3122;--cream: #f3ede0;--ink: #1e3f8a;--gold: #d9a441;--silver: #b8b8b8;--red: #c8302b}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Inter,system-ui,sans-serif;color:var(--cream);background:radial-gradient(ellipse at 50% 20%,rgba(255,220,160,.16),transparent 60%),repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 3px,transparent 3px 41px),linear-gradient(180deg,var(--wood) 0%,var(--wood-dark) 100%);background-attachment:fixed}h2,h3{font-family:Caveat,cursive;font-weight:700;letter-spacing:.5px;margin:0 0 8px}h2{font-size:36px}h3{font-size:28px}.muted{opacity:.7}.small{font-size:13px}.error{color:#ff9a8f}.spacer{flex:1}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button{font:inherit;font-weight:600;color:var(--cream);background:#ffffff14;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 14px;cursor:pointer}button:hover:not(:disabled){background:#ffffff29}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--cream);color:var(--wood-dark);border-color:transparent}button.primary:hover:not(:disabled){background:#fff}button.secondary{background:transparent}button.active{background:var(--cream);color:var(--wood-dark)}button.link{background:none;border:none;padding:4px 6px;opacity:.75;font-weight:500}button.link:hover{opacity:1;background:none}input{font:inherit;color:var(--cream);background:#00000040;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:10px 12px}input:focus{outline:2px solid var(--gold)}.screen{min-height:100vh;display:flex;flex-direction:column}.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 16px;text-align:center}.logo-big{width:220px;max-width:60vw}.logo-small{height:44px}.card-panel,.panel{position:relative;color:var(--wood-dark);background:repeating-linear-gradient(180deg,transparent 0 27px,rgba(159,182,203,.35) 27px 28px),linear-gradient(180deg,#f4ecd6,#efe5cf);border:1px solid rgba(0,0,0,.25);border-radius:4px 10px 6px 12px;box-shadow:0 8px 18px #00000073,inset 0 0 40px #78501e1f}.card-panel{padding:24px;display:flex;flex-direction:column;gap:12px;width:340px;max-width:100%}.card-panel h2,.panel h3{color:var(--ink)}.card-panel .muted,.panel .muted{opacity:.75}.card-panel input,.panel input{background:#fff9;color:var(--wood-dark);border-color:#00000040}.card-panel button,.panel button{color:var(--ink);background:#ffffff80;border-color:#1e3f8a59;font-family:Caveat,cursive;font-size:20px;font-weight:700;padding:6px 14px 4px;line-height:1.1}.card-panel button:hover:not(:disabled),.panel button:hover:not(:disabled){background:#fff}.card-panel button.primary,.panel button.primary{background:var(--ink);color:var(--cream);border-color:transparent}.card-panel button.primary:hover:not(:disabled),.panel button.primary:hover:not(:disabled){background:#2a52b0}.card-panel button.active,.panel button.active{background:var(--ink);color:var(--cream)}.card-panel .error{color:var(--red)}.card-panel .chapita,.panel .chapita{vertical-align:middle}.topbar{position:relative;display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;background:linear-gradient(180deg,#2a1a10,#1d110a);border-bottom:1px solid rgba(0,0,0,.6);box-shadow:0 2px 6px #00000073,inset 0 -1px #ffdca014;z-index:20}.brand{display:flex;align-items:center;gap:8px}.brand .logo-small{height:36px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:8px;background:none;border:none;color:var(--cream);opacity:.6}.iconbtn:hover:not(:disabled){background:none;opacity:1}.brand .flag{font-size:14px;line-height:1}.chapitas{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border:none;background:none;font-family:Caveat,cursive;font-size:22px;font-weight:700;color:var(--cream);line-height:1}.chapitas span{margin-right:6px;min-width:14px;text-align:left;font-variant-numeric:tabular-nums}.chapitas:hover:not(:disabled){background:none;transform:translateY(-1px)}.nametag{position:relative;display:inline-flex;align-items:center;gap:7px;max-width:42vw;padding:3px 12px 2px 10px;background:var(--cream);color:var(--wood-dark);border:1px solid rgba(0,0,0,.3);border-radius:3px 8px 4px 9px;box-shadow:0 2px 4px #00000073;transform:rotate(-1.5deg);font-family:Caveat,cursive;font-size:21px;font-weight:700;line-height:1.1}.nametag:hover:not(:disabled){background:#fff8e6;transform:rotate(-1.5deg) translateY(-1px)}.nametag.open{background:var(--gold)}.nametag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{width:9px;height:9px;border-radius:50%;background:#888;flex:none}.dot.open{background:#4caf50}.dot.connecting{background:var(--gold)}.dot.closed{background:var(--red)}.sheet{position:absolute;right:10px;top:52px;width:240px;padding:12px 14px;z-index:30;color:var(--wood-dark);transform:rotate(.6deg);background:repeating-linear-gradient(180deg,transparent 0 27px,rgba(159,182,203,.35) 27px 28px),linear-gradient(180deg,#f4ecd6,#efe5cf);border:1px solid rgba(0,0,0,.3);border-radius:4px 10px 6px 12px;box-shadow:0 10px 22px #00000080;display:flex;flex-direction:column;gap:2px;animation:sheet-in .16s ease-out}@keyframes sheet-in{0%{transform:rotate(.6deg) translateY(-8px);opacity:0}}.sheet-head{display:flex;flex-direction:column;padding:0 4px 6px;border-bottom:1px dashed rgba(30,63,138,.4);margin-bottom:4px}.sheet-head strong{font-family:Caveat,cursive;font-size:24px;color:var(--ink);line-height:1}.sheet button{text-align:left;background:none;border:none;padding:6px 4px;border-radius:4px;font-family:Caveat,cursive;font-size:21px;font-weight:700;color:var(--ink);line-height:1.1}.sheet button:hover:not(:disabled){background:#1e3f8a14}.sheet button.danger{color:var(--red)}.editions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.edition{display:flex;flex-direction:column;gap:6px;padding:24px 28px;width:260px;font-size:18px;color:var(--wood-dark);background:linear-gradient(180deg,#f4ecd6,#efe5cf);border:1px solid rgba(0,0,0,.25);border-radius:4px 10px 6px 12px;box-shadow:0 8px 18px #00000073;font-family:Inter,sans-serif;font-weight:500;transform:rotate(-1deg)}.edition:nth-child(2){transform:rotate(1deg)}.edition strong{font-family:Caveat,cursive;font-size:30px;color:var(--ink)}.edition:hover:not(:disabled){background:#fff8e6;transform:scale(1.03)}.edition-flag{font-size:40px}.lobby{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;padding:16px;max-width:1100px;margin:0 auto;width:100%}.panel{padding:18px 20px;display:flex;flex-direction:column;gap:10px}.tables{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.tables li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:#1e3f8a0f;border-radius:8px;border-bottom:1px dashed rgba(30,63,138,.3)}.field{display:flex;align-items:center;gap:12px}.field>span{width:90px;opacity:.8;font-size:14px}.seg{display:flex;gap:4px;flex-wrap:wrap}.seg button{padding:6px 12px}.banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-2deg);z-index:6;pointer-events:none;font-family:Caveat,cursive;font-size:clamp(28px,6vw,40px);font-weight:700;color:var(--wood-dark);line-height:1.05;max-width:86vw;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--cream);padding:8px 26px 6px;border-radius:6px 12px 8px 14px;box-shadow:0 6px 16px #00000080;animation:banner-in .26s cubic-bezier(.2,.8,.2,1) both}.banner small{font-size:.6em;font-weight:500;color:var(--ink)}@keyframes banner-in{0%{transform:translate(-50%,-30%) rotate(-2deg) scale(.7);opacity:0}}.mesa-screen{height:100vh;overflow:hidden;position:relative}.mesa{position:relative;flex:1;min-height:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,225,170,.18),transparent 55%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.45) 100%)}.waiting{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:3;text-align:center;padding:16px}.waiting ul{list-style:none;padding:0;margin:4px 0 12px;opacity:.8}.ambiente{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.ambiente .td-amb{position:absolute;opacity:.9;filter:saturate(.85)}.ambiente .td-amb:first-child{left:2%;top:30%;transform:rotate(-8deg)}.ambiente .td-amb:last-child{right:1%;bottom:1%;transform:rotate(6deg) scale(.85)}.players-4 .ambiente .td-amb:first-child{display:none}.player{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;width:150px;z-index:2}.player.top{top:14px;left:50%;transform:translate(-50%)}.player.bottom{bottom:6px;left:12px;align-items:flex-start}.player.left{left:12px;top:50%;transform:translateY(-60%)}.player.right{right:12px;top:50%;transform:translateY(-60%)}.player.offline{opacity:.55}.avatar{position:relative;width:50px;height:50px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}.avatar .ring{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;width:62px;height:62px;transform:rotate(-90deg)}.avatar .ring circle{fill:none;stroke:var(--gold);stroke-width:4;stroke-dasharray:1;stroke-linecap:round;transition:stroke-dashoffset .25s linear;filter:drop-shadow(0 0 3px rgba(217,164,65,.9))}.avatar .ring circle.track{stroke:#0000008c;stroke-dasharray:none;filter:none}.pname{font-family:Caveat,cursive;font-size:19px;font-weight:700;text-align:center;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.tag{font-family:Inter,sans-serif;font-size:10px;font-weight:600;padding:1px 6px;border-radius:6px;background:#f3ede02e;text-transform:uppercase;letter-spacing:.5px}.tag.warn{background:#c8302b8c}.backs{display:flex;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}.bubble{position:absolute;top:-8px;left:50%;transform:translate(-50%,-100%);background:var(--cream);color:var(--wood-dark);font-family:Caveat,cursive;font-weight:700;font-size:24px;padding:4px 14px;border-radius:14px;white-space:nowrap;box-shadow:0 3px 8px #0006;animation:pop .2s ease-out;z-index:5}.bubble:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);border:8px solid transparent;border-top-color:var(--cream);border-bottom:0}.player.bottom .bubble{left:60px}.player.top .bubble{top:auto;bottom:-10px;transform:translate(-50%,100%);animation-name:pop-down}.player.top .bubble:after{bottom:auto;top:-8px;border-top:0;border-bottom:8px solid var(--cream)}@keyframes pop-down{0%{transform:translate(-50%,80%) scale(.6);opacity:0}}@keyframes pop{0%{transform:translate(-50%,-80%) scale(.6);opacity:0}}.center{position:absolute;top:70px;right:170px;bottom:20px;left:170px;z-index:1}.played{position:absolute;animation:fly-in .34s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}.played.bottom{left:50%;bottom:16%;margin-left:-43px;--from: translateY(220px) scale(1.15)}.played.top{left:50%;top:24%;margin-left:-43px;--from: translateY(-160px) scale(.6)}.played.left{left:10%;top:50%;margin-top:-64px;--from: translateX(-200px) scale(.6)}.played.right{right:10%;top:50%;margin-top:-64px;--from: translateX(200px) scale(.6)}.players-2 .played.bottom{bottom:6%}.players-2 .played.top{top:20%}@keyframes fly-in{0%{transform:var(--from);opacity:.4}to{transform:none;opacity:1}}.pot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;opacity:.95;transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .6s;z-index:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}.pot span{font-family:Caveat,cursive;font-size:22px;font-weight:700;color:var(--gold);text-shadow:0 1px 2px rgba(0,0,0,.7)}.pot.to-bottom{transform:translate(-50%,260px) scale(.7);opacity:0}.pot.to-top{transform:translate(-50%,-260px) scale(.7);opacity:0}.deck{position:absolute;right:-60px;bottom:18%;display:flex;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}.deck .muestra{margin-left:-36px;transform:rotate(14deg) translateY(12px)}.history{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:6px}.hist{display:flex;align-items:center;gap:2px;padding:3px 6px;border-radius:8px;background:#00000040;font-size:12px}.hist.won{outline:1px solid rgba(111,207,111,.6)}.hist.lost{outline:1px solid rgba(200,48,43,.6)}.hist svg{opacity:.85}.pad-mini{position:absolute;top:8px;right:8px;width:210px;padding:0;background:none;border:none;z-index:2}.pad-mini:hover{background:none;transform:scale(1.03)}.hand-area{padding:6px 12px 10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4));display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:3}.hand-info{font-size:15px;min-height:22px}.shout{font-family:Caveat,cursive;font-size:26px;font-weight:700;color:var(--gold);text-shadow:0 1px 2px rgba(0,0,0,.6)}.hand{display:flex;gap:10px}.hand .td-naipe{transition:transform .12s;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:deal .42s cubic-bezier(.2,.8,.2,1) both}.hand .td-naipe:not(.td-naipe-disabled):hover{transform:translateY(-10px)}@keyframes deal{0%{transform:translate(140px,-120px) rotate(20deg);opacity:0}to{transform:none;opacity:1}}.action-menu{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;min-height:44px}.submenu{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;animation:submenu-in .16s ease-out}@keyframes submenu-in{0%{transform:translateY(8px);opacity:0}}button.canto.group{background:#f3ede01f;color:var(--cream);border-color:#f3ede059;box-shadow:none}button.canto.group.open{background:var(--cream);color:var(--ink)}button.canto .caret{font-size:12px;margin-left:6px;opacity:.7}button.canto.phrase{background:#fff3c4}.partner-cards{filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}button.canto{font-family:Caveat,cursive;font-size:22px;font-weight:700;line-height:1;color:var(--ink);background:var(--cream);border:1px solid rgba(0,0,0,.25);border-radius:6px 10px 8px 12px;padding:6px 14px 4px;box-shadow:0 3px 6px #00000073,inset 0 0 0 1px #fff6}button.canto:hover:not(:disabled){background:#fff8e6;transform:translateY(-2px)!important}button.canto.quiero{background:var(--gold);color:var(--wood-dark);font-size:24px}button.canto.no-quiero{background:var(--cream);color:var(--red)}button.canto.mazo{background:transparent;color:var(--cream);border-color:#f3ede059;box-shadow:none;font-size:19px}.feed{position:absolute;right:12px;top:190px;max-width:260px;text-align:right;align-items:flex-end;font-size:12px;opacity:.8;background:#00000059;padding:6px 10px;border-radius:10px;display:flex;flex-direction:column;gap:2px;z-index:2}.feed-toggle{position:absolute;right:12px;top:190px;z-index:2}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;z-index:10;padding:16px}.modal-body{background:var(--wood-dark);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;max-width:100%}.modal-body.wide{width:860px}.modal-body.paper{background:linear-gradient(180deg,#f4ecd6,#efe5cf);color:var(--wood-dark);border-radius:6px 12px 8px 14px;max-width:360px}.confirm-text{font-family:Caveat,cursive;font-size:26px;font-weight:700;line-height:1.15;margin:0 0 6px}.toast{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:var(--red);color:#fff;padding:10px 16px;border-radius:10px;z-index:20;cursor:pointer;max-width:90vw}@media(max-width:640px){.topbar{height:44px;padding:0 10px;gap:8px}.brand .logo-small{height:32px}.iconbtn{width:30px;height:30px}.chapitas{font-size:20px}.nametag{font-size:19px;max-width:38vw}.center{top:70px;right:60px;bottom:10px;left:60px}.player{width:110px}.player.left,.player.right{width:70px}.pname{font-size:16px}.pad-mini{width:130px}.ambiente .td-amb{transform:scale(.6)}.hand{gap:6px}.hand .td-naipe{width:min(26vw,92px);height:auto}.played .td-naipe{width:70px;height:auto}.played.bottom,.played.top{margin-left:-35px}.deck{right:-24px;bottom:20%}.deck .td-naipe{width:58px;height:auto}button.canto{font-size:19px;padding:5px 10px 3px}.feed,.feed-toggle{display:none}.modal-body.wide{width:100%}}.tabs{justify-content:center}.chapita{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px dotted rgba(0,0,0,.35);box-shadow:inset 0 0 0 2px #ffffff40;vertical-align:middle}.chapita.silver{background:radial-gradient(circle at 35% 35%,#eee,#8c8c8c)}.chapita.gold{background:radial-gradient(circle at 35% 35%,#ffe08a,#a9771c)}.toast.streak{background:var(--wood-dark);border:1px solid var(--gold);color:var(--cream);bottom:auto;top:70px;display:flex;align-items:center;gap:8px}.mock-panel{position:fixed;left:10px;top:64px;z-index:50;background:#000000c7;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;font-size:12px;max-width:360px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mock-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.mock-panel button{font-size:12px;padding:4px 8px}.mock-panel label{display:flex;align-items:center;gap:4px}.mock-panel input[type=range]{width:90px}.mock-toggle{position:fixed;left:10px;top:64px;z-index:50;font-size:12px;opacity:.7}.apodo-form{width:380px}.apodo-preview{display:flex;align-items:center;gap:12px}.apodo-preview input{flex:1;font-family:Caveat,cursive;font-size:26px;font-weight:700}.color-picker{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.color-option{padding:3px;border-radius:50%;background:none;border:2px solid transparent;line-height:0}.color-option.selected{border-color:var(--ink);background:#1e3f8a14}.color-option:hover:not(:disabled){background:#1e3f8a14}.amigos .tables li.offline{opacity:.55}.presence{font-size:13px}.presence.lobby,.presence.online{color:#2e7d32}.presence.mesa{color:var(--ink)}.waiting-friends{width:min(520px,100%);text-align:left;margin-top:12px}.waiting-friends .panel{padding:12px 16px}.toast.invite{background:var(--cream);color:var(--wood-dark);border:1px solid rgba(0,0,0,.3);bottom:auto;top:70px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;box-shadow:0 8px 18px #00000080;border-radius:4px 10px 6px 12px;cursor:default}.toast.invite .primary{background:var(--ink);color:var(--cream);font-family:Caveat,cursive;font-size:20px;font-weight:700;padding:4px 14px 2px}.toast.invite .link{color:var(--wood-dark)}@media(max-width:760px){.lobby{grid-template-columns:1fr}}.party-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px auto 0;max-width:1100px;padding:8px 14px;width:calc(100% - 32px);background:linear-gradient(180deg,#f4ecd6,#efe5cf);color:var(--wood-dark);border:1px solid rgba(0,0,0,.25);border-radius:4px 10px 6px 12px;box-shadow:0 6px 14px #0006}.party-title{font-family:Caveat,cursive;font-size:24px;font-weight:700;color:var(--ink)}.party-members{display:flex;gap:10px;flex-wrap:wrap}.party-member{display:inline-flex;align-items:center;gap:6px;font-family:Caveat,cursive;font-size:20px;font-weight:700}.party-bar .link{color:var(--red);margin-left:auto}.bot-offer{background:linear-gradient(180deg,#f4ecd6,#efe5cf);color:var(--wood-dark);border:1px solid rgba(0,0,0,.25);border-radius:4px 10px 6px 12px;padding:12px 18px;margin:6px 0 10px;box-shadow:0 6px 14px #0006}.bot-offer p{font-family:Caveat,cursive;font-size:24px;font-weight:700;margin:0 0 8px;color:var(--ink)}.bot-offer .row{justify-content:center}