:root{
  --bg:#150d08; --wood:#2a1a10; --wood2:#3a2416; --line:#5b3d24; --ivory:#f5ecd9; --ink:#e9dcc4; --muted:#b8a487;
  --gold:#e3a712; --gold2:#ffcf4a; --felt:#1f5e3b; --felt2:#2f7a4f; --red:#ce1126; --blue:#1f4f9a; --ok:#59c27a; --bad:#e2574c;
  --serif:Georgia,"Times New Roman",serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
#lobby{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;color:var(--ink);font:15px/1.5 var(--sans);
  background:radial-gradient(1200px 600px at 50% -10%,#3b2414 0%,transparent 70%),repeating-linear-gradient(92deg,#1a100a 0 3px,#170e08 3px 9px,#1c110b 9px 14px),var(--bg);
  padding:0 16px calc(84px + env(safe-area-inset-bottom,0px));user-select:text;-webkit-user-select:text}
#lobby[hidden],.overlay[hidden],[hidden]{display:none!important}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -16px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  background:linear-gradient(#1b110bf2,#1b110bd9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ivory);text-decoration:none;font:600 19px/1 var(--serif)}
.brand img{border-radius:11px;box-shadow:0 2px 8px #000a}.brand b{font-weight:700;margin-left:6px;color:var(--gold2)}
.bar-right{display:flex;align-items:center;gap:10px}
.online{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.online i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #59c27a33}
.coins,.me{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 8px;border-radius:21px;border:1px solid var(--line);background:#120a06;color:var(--ivory);font:700 16px var(--sans);cursor:pointer}
.coins b{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.coin{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0 0,#f2c230 35%,#b9800b 75%,#7a5206 100%);box-shadow:inset 0 0 0 2px #8a5c08,0 1px 2px #000}
.coins .plus{width:20px;height:20px;border-radius:50%;background:var(--ok);color:#06210f;font:900 15px/20px var(--sans);text-align:center;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px #59c27a33}}
.me img{border-radius:50%;background:#333}.me span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offline{margin:14px auto 0;max-width:1100px;padding:10px 14px;border-radius:10px;background:#3a1d12;border:1px solid #7a3a1f;color:#ffd9c2;font-size:14px}
.views{max-width:1100px;margin:18px auto 0}
.view{display:grid;gap:16px}
.panel{background:linear-gradient(180deg,#2b1b11,#22150d);border:1px solid var(--line);border-radius:16px;padding:18px clamp(14px,3vw,24px);box-shadow:0 10px 30px #0008,inset 0 1px 0 #ffffff0d;min-width:0}
h2{font:700 22px/1.2 var(--serif);color:var(--ivory);margin:0 0 12px;text-wrap:balance}
h3{font:700 13px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:18px 0 10px}
.fine{color:var(--muted);font-size:13px;margin:8px 0 0}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{border:0;border-radius:12px;padding:11px 18px;font:700 15px var(--sans);cursor:pointer;color:var(--ivory);background:#3a2617;border:1px solid var(--line)}
.btn:focus-visible,.mode:focus-visible,.stake:focus-visible,.tabs button:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.btn.gold{background:linear-gradient(#f0b92c,#d9960a);color:#2a1904;border:0;box-shadow:0 3px 0 #8f6206}
.btn.gold:active{transform:translateY(2px);box-shadow:0 1px 0 #8f6206}
.btn.ghost{background:transparent}
.btn.big{width:100%;padding:16px;font-size:19px;margin-top:18px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.play .btn.ghost{width:100%;margin-top:10px}
.play-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){.play-grid,.support-grid{grid-template-columns:1fr}}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:480px){.modes{grid-template-columns:1fr 1fr}.modes .mode:last-child{grid-column:1/3}}
.lens{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.len{display:grid;gap:2px;justify-items:start;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#160e09;color:var(--ink);cursor:pointer;font:inherit;text-align:left}
.len b{font:700 17px var(--serif);color:var(--ivory)}.len small{color:var(--muted);font-size:12px}
.len.on{border-color:var(--gold);background:#2e1f0e;box-shadow:0 0 0 2px #e3a71255}
.pay{display:grid;gap:2px;justify-items:start;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#160e09;color:var(--ink);cursor:pointer;font:inherit;text-align:left}
.pay b{font:700 17px var(--serif);color:var(--ivory)}.pay small{color:var(--muted);font-size:12px}
.pay.on{border-color:var(--gold);background:#2e1f0e;box-shadow:0 0 0 2px #e3a71255}
.otp{letter-spacing:.4em;font:800 22px ui-monospace,Menlo,monospace;text-align:center}
.admin-link{display:inline-block;margin-top:12px;text-decoration:none;font-size:13px;padding:8px 14px}
.len:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.mode{display:grid;grid-template-rows:auto auto auto;justify-items:start;gap:2px;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);cursor:pointer;color:var(--ink);
  background:repeating-linear-gradient(45deg,#ffffff05 0 2px,transparent 2px 5px),#1a110b;font:inherit}
.mode b{font:700 20px var(--serif);color:var(--ivory)}.mode small{color:var(--muted);font-size:12.5px}
.mode.on{background:repeating-linear-gradient(45deg,#ffffff08 0 2px,transparent 2px 5px),radial-gradient(circle at 30% 20%,var(--felt2),var(--felt));border-color:#58b07c;box-shadow:inset 0 0 0 1px #58b07c55,0 6px 18px #0007}
.mode-ico{height:34px;width:72px;margin-bottom:6px;background-repeat:no-repeat;background-size:contain}
.mode-ico.parejas{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 34'%3E%3Cg fill='%23f5ecd9' stroke='%235b3d24'%3E%3Crect x='2' y='4' width='14' height='26' rx='3'/%3E%3Crect x='20' y='4' width='14' height='26' rx='3'/%3E%3Crect x='38' y='4' width='14' height='26' rx='3'/%3E%3Crect x='56' y='4' width='14' height='26' rx='3'/%3E%3C/g%3E%3Cg fill='%231b1b1b'%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Ccircle cx='27' cy='11' r='2'/%3E%3Ccircle cx='45' cy='11' r='2'/%3E%3Ccircle cx='63' cy='11' r='2'/%3E%3C/g%3E%3C/svg%3E")}
.mode-ico.trio{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 34'%3E%3Cg fill='%23f5ecd9' stroke='%235b3d24'%3E%3Crect x='6' y='4' width='14' height='26' rx='3'/%3E%3Crect x='29' y='4' width='14' height='26' rx='3'/%3E%3Crect x='52' y='4' width='14' height='26' rx='3'/%3E%3C/g%3E%3Cg fill='%231b1b1b'%3E%3Ccircle cx='13' cy='11' r='2'/%3E%3Ccircle cx='36' cy='11' r='2'/%3E%3Ccircle cx='36' cy='23' r='2'/%3E%3Ccircle cx='59' cy='11' r='2'/%3E%3Ccircle cx='59' cy='17' r='2'/%3E%3Ccircle cx='59' cy='23' r='2'/%3E%3C/g%3E%3C/svg%3E")}
.mode-ico.duelo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 34'%3E%3Cg fill='%23f5ecd9' stroke='%235b3d24'%3E%3Crect x='10' y='4' width='14' height='26' rx='3'/%3E%3Crect x='48' y='4' width='14' height='26' rx='3'/%3E%3C/g%3E%3Cg fill='%231b1b1b'%3E%3Ccircle cx='17' cy='11' r='2'/%3E%3Ccircle cx='55' cy='11' r='2'/%3E%3Ccircle cx='55' cy='23' r='2'/%3E%3C/g%3E%3Cpath d='M30 17h12' stroke='%23e3a712' stroke-width='2'/%3E%3C/svg%3E")}
.stakes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stake{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 4px 10px;border-radius:14px;border:1px solid var(--line);background:#160e09;color:var(--ink);cursor:pointer;font:inherit}
.stake .chip{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--sans);color:#2a1904;
  background:repeating-conic-gradient(#f2c230 0 15deg,#fff1b8 15deg 30deg);box-shadow:inset 0 0 0 5px #c48c0e,inset 0 0 0 7px #fff1b8,0 2px 4px #000a}
.stake small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.stake.on{border-color:var(--gold);background:#2e1f0e;box-shadow:0 0 0 2px #e3a71255}
.stake[disabled]{opacity:.45;cursor:not-allowed}
.chat{display:flex;flex-direction:column;min-height:420px;max-height:620px}
.chat-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.chat-head h2{margin:0}
.msgs{list-style:none;margin:10px 0;padding:0 4px 0 0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:200px}
.msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:start}
.msg img{border-radius:50%;width:32px;height:32px}
.msg .who{font-weight:700;color:var(--gold2);font-size:13px;margin-right:6px}
.msg .when{color:var(--muted);font-size:11px}
.msg p{margin:1px 0 0;color:var(--ink);overflow-wrap:anywhere}
.msg .rep{border:0;background:none;color:var(--muted);font-size:11px;cursor:pointer;padding:0 4px;opacity:.7}
.msg.sys p{color:var(--muted);font-style:italic}
.chat-form{display:flex;gap:8px}
input,select,textarea{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid var(--line);background:#120a06;color:var(--ivory);padding:10px 12px;font:15px var(--sans)}
textarea{resize:vertical}
.chat-form input{flex:1;min-width:0}
.form{display:grid;gap:10px}.form label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.form.inline{grid-template-columns:1fr auto;align-items:end;margin-top:14px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:#120a06f2;border-top:1px solid var(--line);backdrop-filter:blur(6px)}
.tabs button{position:relative;flex:1;max-width:150px;display:grid;justify-items:center;gap:2px;border:0;background:none;color:var(--muted);font:600 12px var(--sans);padding:6px 2px;border-radius:10px;cursor:pointer}
.tabs button.on{color:var(--gold2);background:#2a1a0e}
.tabs i{width:24px;height:24px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='8' height='14' rx='2'/%3E%3Crect x='13' y='5' width='8' height='14' rx='2'/%3E%3C/svg%3E")}
.ic-style{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.4 0 2-1 1.4-2.2-.6-1.1.2-2.3 1.4-2.3H17a4 4 0 0 0 4-4c0-5-4-9.5-9-9.5Zm-5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm3-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E")}
.ic-rank{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V11h4v9Zm6 0V5h4v15Zm6 0v-7h4v7Z'/%3E%3C/svg%3E")}
.ic-help{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 16h-2v-2h2Zm1.6-6.3c-.9.8-1.6 1.3-1.6 2.8h-2c0-2.2 1-3 1.9-3.7.7-.6 1.1-.9 1.1-1.8a2 2 0 0 0-4 0H8a4 4 0 0 1 8 0c0 1.5-.7 2.1-1.4 2.7Z'/%3E%3C/svg%3E")}
.ic-user{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 21c.6-4.6 4.2-7 9-7s8.4 2.4 9 7Z'/%3E%3C/svg%3E")}
.dot{position:absolute;top:4px;right:calc(50% - 20px);width:9px;height:9px;border-radius:50%;background:var(--bad)}
.foot{max-width:1100px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:13px}.foot a{color:var(--gold2)}
.avatar-builder{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:560px){.avatar-builder{grid-template-columns:1fr;justify-items:center}}
#avBig{border-radius:50%;box-shadow:0 8px 24px #000a}
.av-parts{display:grid;gap:10px;width:100%}
.av-part{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;align-items:center}
.av-part span{color:var(--muted);font-size:13px}
.av-opts{display:flex;gap:6px;flex-wrap:wrap}
.av-opts button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;background:#120a06;color:var(--ivory);font:700 12px var(--sans)}
.av-opts button.on{border-color:var(--gold2)}
.themes{display:grid;gap:16px}
.theme-row h3{margin:0 0 8px}
.theme-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.theme-opt{border:2px solid var(--line);border-radius:12px;padding:0;overflow:hidden;cursor:pointer;background:#120a06;color:var(--ink);font:600 13px var(--sans);text-align:left;transition:transform .12s ease,border-color .15s ease}
.theme-opt.on{border-color:var(--gold2);box-shadow:0 0 12px rgba(245,197,24,.45);outline:1px solid var(--gold2)}
.theme-opt .sw{height:56px;display:block}
.theme-opt span{display:block;padding:7px 10px}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rank li{display:grid;grid-template-columns:34px 38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:#160e09}
.rank li.me{outline:2px solid var(--gold)}
.rank .pos{font:700 18px var(--serif);color:var(--gold2);text-align:center}
.rank img{width:38px;height:38px;border-radius:50%}
.rank .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank .nm small{display:block;color:var(--muted)}
.rank .val{display:flex;align-items:center;gap:6px;font-weight:800;font-variant-numeric:tabular-nums}.rank .coin{width:18px;height:18px}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}.faq summary{cursor:pointer;font-weight:700;color:var(--ivory)}.faq p{margin:8px 0 0;color:var(--ink)}
.tickets{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tickets button{width:100%;display:flex;justify-content:space-between;gap:10px;text-align:left;border:1px solid var(--line);background:#160e09;color:var(--ink);border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit}
.tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:20px;background:#3a2617;color:var(--muted);white-space:nowrap}
.tag.respondido{background:#1f5e3b;color:#c9f2d8}.tag.cerrado{opacity:.6}
.thread{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px}
.bubble{padding:10px 12px;border-radius:12px;background:#160e09;max-width:90%}.bubble.admin{background:#1f3a2a;justify-self:end}.bubble small{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}
.profile .prof-head{display:flex;gap:14px;align-items:center}.prof-head img{border-radius:50%}.prof-head h2{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:14px}
.stat{background:#160e09;border-radius:12px;padding:10px 12px}.stat b{display:block;font:700 22px var(--serif);color:var(--ivory);font-variant-numeric:tabular-nums}.stat span{color:var(--muted);font-size:12px}
.ledger{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:360px;overflow:auto}
.ledger li{display:flex;justify-content:space-between;gap:10px;padding:6px 2px;border-bottom:1px solid #ffffff0d;font-variant-numeric:tabular-nums}
.ledger .pos{color:var(--ok);font-weight:700}.ledger .neg{color:var(--bad);font-weight:700}
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#000a;padding:16px}
.dialog{width:min(420px,100%);background:#22150d;border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center;color:var(--ink);box-shadow:0 20px 60px #000c}
.dialog .row{justify-content:center}
.spinner{width:64px;height:64px;margin:0 auto 12px;border-radius:12px;background:var(--ivory);position:relative;animation:flip 1.2s ease-in-out infinite}
.spinner::before,.spinner::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#1b1b1b;left:27px}
.spinner::before{top:12px}.spinner::after{bottom:12px}
@keyframes flip{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.toastbox{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:40;display:grid;gap:8px;width:min(460px,calc(100% - 32px))}
.toast{background:#22150df5;border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ivory);box-shadow:0 8px 24px #000a;font-size:14px}
.toast.good{border-color:#3f8f5e}.toast.bad{border-color:#9b3a30}
@media (prefers-reduced-motion:reduce){.spinner,.coins .plus{animation:none}}
#ui button{position:relative}
#tchat{position:absolute;left:10px;top:58px;width:320px;max-width:calc(100% - 20px);background:#1d130cf2;border:1px solid #5b3d24;border-radius:14px;padding:10px;color:#f5ecd9;font:14px system-ui;box-shadow:0 10px 30px #000a}
#tchat .quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
#tchat .quick button{border:1px solid #5b3d24;background:#2a1a10;color:#f5ecd9;border-radius:16px;padding:5px 10px;font:600 12.5px system-ui;cursor:pointer}
#tmsgs{list-style:none;margin:0 0 8px;padding:0;max-height:150px;overflow-y:auto;display:grid;gap:4px}
#tmsgs b{color:#ffcf4a}
#tchatForm{display:flex;gap:6px}#tchatForm input{flex:1;min-width:0;padding:8px 10px}#tchatForm button{border:0;border-radius:10px;background:#e3a712;color:#2a1904;font-weight:800;padding:0 12px;cursor:pointer}
#modal .row{justify-content:center;gap:10px}
#modal .res{font:800 26px Georgia,serif;margin:6px 0}
#modal .res.win{color:#2f7a4f}#modal .res.lose{color:#a3322c}
#modal h2{color:#2a1d12;font:700 24px Georgia,serif;margin:0 0 6px}
#modal button+button{color:#2a1d12}
.friends{margin-top:16px;border-top:1px solid var(--line);padding-top:4px}
.friends h3{margin-top:14px}
.friends .btn.ghost{width:100%}
.code-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.code-form input{text-transform:uppercase;letter-spacing:.14em;font:700 16px ui-monospace,SFMono-Regular,Menlo,monospace}
.code-form input::placeholder{letter-spacing:0;text-transform:none;font:15px var(--sans)}
.sala-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sala-head h2{margin:0}.sala-head .fine{margin-top:4px}
.sala-invite{margin:14px 0 6px;padding:14px;border-radius:14px;background:#160e09;border:1px dashed #7a5532;text-align:center}
.code-big{display:flex;align-items:baseline;justify-content:center;gap:10px;width:100%;margin:6px 0 2px;border:0;background:none;cursor:pointer;color:var(--gold2);
  font:800 clamp(30px,8vw,44px)/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.code-big small{font:600 12px var(--sans);letter-spacing:0;color:var(--muted);text-decoration:underline}
.sala-invite .row{justify-content:center}
.btn.wa{text-decoration:none;display:inline-flex;align-items:center;border-color:#2e7d4f;color:#bff0cf}
.sala-seats{display:grid;gap:10px;margin:14px 0}
.sala-seats.n4{grid-template-columns:1fr 1fr}
.sala-seats.n2,.sala-seats.n3{grid-template-columns:1fr 1fr}
.seat.team-c{border-left-color:#2b9348}
.seat.team-x{border-left-color:var(--gold)}
.seat{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:#160e09;border:1px solid var(--line);border-left:5px solid var(--line);min-width:0}
.seat img,.seat .empty-av{grid-row:1/3;width:44px;height:44px;border-radius:50%}
.seat .empty-av{display:grid;place-items:center;background:#24170e;color:var(--muted);font:700 20px var(--serif);border:1px dashed var(--line)}
.seat b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ivory)}
.seat small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat.team-a{border-left-color:#2c6fd1}.seat.team-b{border-left-color:#ce1126}
.seat.me{box-shadow:0 0 0 2px var(--gold2) inset}
.seat.empty b{color:var(--muted);font-weight:600}
.seat .sit{grid-column:1/3;margin-top:8px;padding:7px 10px;font-size:13px}
.seat .kick{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#120a06;color:var(--muted);cursor:pointer;font-size:12px}
.sala-cfg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sala-cfg label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.sala-wait{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ink);padding:10px 0}
.spinner.small{width:22px;height:22px;margin:0;border-radius:5px;flex:none}.spinner.small::before,.spinner.small::after{width:4px;height:4px;left:9px}.spinner.small::before{top:4px}.spinner.small::after{bottom:4px}
.sala-chat{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
#smsgs{list-style:none;margin:0 0 8px;padding:0;max-height:140px;min-height:40px;overflow-y:auto;display:grid;gap:4px;font-size:14px}
#smsgs b{color:var(--gold2)}
@media (max-width:420px){.sala-seats.n4,.sala-cfg{grid-template-columns:1fr}}
@media (max-width:520px){.bar{gap:8px}.brand{font-size:16px}.brand img{width:34px;height:34px}.online span{display:none}.me span{display:none}.me{padding:0 4px}.coins{padding:0 10px 0 6px}}
@media (max-width:360px){.brand span{display:none}}
@media (max-width:560px){
  #lobby{padding-left:12px;padding-right:12px}
  .panel{padding:14px 12px;border-radius:14px}
  h2{font-size:20px}
  .stakes{gap:6px}.stake{padding:10px 2px 8px}.stake .chip{width:40px;height:40px;font-size:14px}.stake small{font-size:11px}
  .mode{padding:10px}.mode b{font-size:17px}.mode small{font-size:11.5px}.mode-ico{width:58px;height:28px}
  .len,.pay{padding:9px 10px}.len b,.pay b{font-size:15px}.len small,.pay small{font-size:11px}
  .sala-cfg{grid-template-columns:1fr}
  .code-form{grid-template-columns:1fr}
  .tabs button{font-size:11px;padding:6px 0}
  .form.inline{grid-template-columns:1fr}
  .chat{min-height:360px}
  .tabs{overflow-x:auto}
  input,select,textarea,button{max-width:100%}
  .views,.panel,.play-grid>*{min-width:0}
  .coin.usd{display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#bff5c9 0,#3fbf6a 40%,#1e7a3f 100%);box-shadow:inset 0 0 0 2px #14592c,0 1px 2px #000;color:#06210f;font:900 15px/1 var(--sans)}
  .rank .val small{font-weight:600;color:var(--muted);font-size:12px}
  .check{display:flex!important;align-items:center;gap:8px;font-size:13px;color:var(--ink)!important}.check a{color:var(--gold2)}
  .games{grid-template-columns:1fr 1fr}.games .game:first-child{grid-column:1/3}
  .hero{flex-direction:column;align-items:stretch}.hero-bal{justify-items:start;text-align:left}.hero-bal b{font-size:28px}
  .game-txt b{font-size:17px}
}
.ic-home{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v9h5v-6h4v6h5v-9h3Z'/%3E%3C/svg%3E")}
.ic-wallet{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h13v3H5v1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2Zm14 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E")}
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  background:radial-gradient(500px 200px at 90% 0,#2f7a4f55,transparent),linear-gradient(180deg,#2b1b11,#22150d)}
.hero-hi{display:flex;align-items:center;gap:12px;min-width:0}.hero-hi img{border-radius:50%;box-shadow:0 4px 12px #0008}.hero-hi h2{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-bal{display:grid;gap:2px;justify-items:end;text-align:right}
.hero-bal b{font:800 32px/1.1 var(--sans);color:#7ee2a0;font-variant-numeric:tabular-nums}
.hero-bal .row{margin-top:6px}
.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.game{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#160e09;color:var(--ink);padding:0;text-align:left;font:inherit;cursor:pointer;min-width:0}
.game:not(.soon):hover{border-color:var(--gold)}.game:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.game-art{display:block;aspect-ratio:16/10;background-size:cover;background-position:center}
.game-art.domino{background-image:linear-gradient(transparent 55%,#0009),url("../assets/og/og-image.jpg");background-position:center center}
.game-art.soon1{background:repeating-linear-gradient(45deg,#2a1a10 0 10px,#24160d 10px 20px)}
.game-art.soon2{background:repeating-linear-gradient(-45deg,#2a1a10 0 10px,#24160d 10px 20px)}
.game-txt{display:grid;gap:2px;padding:10px 12px 12px}.game-txt b{font:700 20px var(--serif);color:var(--ivory)}.game-txt small{color:var(--muted);font-size:12px}
.game.soon{cursor:default;opacity:.6}
.game .live{position:absolute;top:8px;left:8px;font:700 11px var(--sans);font-style:normal;background:#000a;color:#bff0cf;padding:3px 8px;border-radius:20px}
.game .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:5px;vertical-align:1px}
.home-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.ph h2{margin:0 0 12px}
.link{border:0;background:none;color:var(--gold2);font:700 14px var(--sans);cursor:pointer;padding:4px}
.rank.mini li{padding:6px 8px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick>*{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line);background:#160e09;color:var(--ink);font:600 14px var(--sans);text-decoration:none;cursor:pointer;text-align:left}
.quick i{font-style:normal;font-size:20px}
.crumb{display:flex;align-items:center;gap:10px;color:var(--ivory);font:700 18px var(--serif)}
.back{border:1px solid var(--line);background:#160e09;color:var(--ink);border-radius:20px;padding:6px 12px;font:600 13px var(--sans);cursor:pointer}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:12px;background:#120a06;border:1px solid var(--line);margin-bottom:12px}
.seg button{border:0;border-radius:9px;padding:9px 6px;background:none;color:var(--muted);font:700 14px var(--sans);cursor:pointer}
.seg button.on{background:#2e1f0e;color:var(--gold2)}
.wal-bal{font:800 22px var(--sans);color:#7ee2a0}
.amts{display:flex;flex-wrap:wrap;gap:8px}.amts button{border:1px solid var(--line);background:#160e09;color:var(--ink);border-radius:20px;padding:6px 12px;font:700 13px var(--sans);cursor:pointer}
.note{margin:0;padding:10px 12px;border-radius:10px;background:#1f3a2a;color:#d6f5e0;font-size:13px;white-space:pre-line}
.pay-st{display:grid;justify-items:end;font-weight:800}.pay-st small{font-weight:600;font-size:11px;color:var(--muted)}
.pay-st.aprobado small{color:var(--ok)}.pay-st.rechazado{text-decoration:line-through;opacity:.7}.pay-st.rechazado small{color:var(--bad)}
.tag-price{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.theme-opt.locked .sw{filter:saturate(.75) brightness(.8)}.theme-opt.locked .tag-price{color:var(--gold2);font-weight:800}
.free{font:700 11px var(--sans);color:#06210f;background:var(--ok);padding:2px 8px;border-radius:20px;vertical-align:4px;margin-left:6px}
.buy-sw{height:70px;border-radius:12px;margin-bottom:10px}
.reg-dlg{text-align:left}.reg-dlg>p{margin-top:0}
.dialog{max-height:calc(100dvh - 32px);overflow-y:auto}
.how p{text-align:left}
@media (max-width:820px){.home-grid{grid-template-columns:1fr}}
