:root{--bg:#1b1530;--bg2:#241c3f;--panel:#2c2350;--line:#3e3370;--text:#f4f1ff;--muted:#a99fd1;--accent:#ffd34d;--danger:#f57;--laranja:#ff8a1f;--roxo:#8b5cf6;--turquesa:#14b8a6;--rosa:#ec4899;--cw:clamp(54px, 14vw, 96px);--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}body{background:radial-gradient(circle at 50% 0%, #2f2460 0%, var(--bg) 60%);background-color:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}h1,h2,h3{margin:0 0 .5rem;line-height:1.15}h2{font-size:1.05rem}h3{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:1rem;font-size:.9rem}.muted{color:var(--muted)}.small-print{font-size:.78rem}.center-text{text-align:center}input,select{background:var(--bg2);color:var(--text);border:1px solid var(--line);font:inherit;border-radius:10px;min-width:0;padding:.6rem .75rem}input{flex:1}.code-input{text-transform:uppercase;letter-spacing:.2em;font-weight:700}.btn{background:var(--panel);color:var(--text);border:1px solid var(--line);font:inherit;cursor:pointer;white-space:nowrap;touch-action:manipulation;border-radius:10px;padding:.6rem .9rem;font-weight:600}.btn:hover:not(:disabled){filter:brightness(1.15)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);color:#241c3f;border-color:#0000}.btn.danger{background:var(--danger);border-color:#0000}.btn.ghost{background:0 0}.btn.small{padding:.3rem .55rem;font-size:.85rem}.btn.big{padding:.8rem 1.3rem;font-size:1.05rem}.chip{background:var(--bg2);color:var(--text);border:1px solid var(--line);font:inherit;cursor:pointer;border-radius:999px;padding:.25rem .6rem;font-size:.8rem}.row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.6rem;display:flex}.row.tight{flex-wrap:nowrap;margin:0}.inline{align-items:center;gap:.4rem;font-size:.9rem;display:flex}.panel{background:color-mix(in srgb, var(--panel) 85%, transparent);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}.panel-head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.home{gap:14px;max-width:560px;margin:0 auto;padding:24px 16px 48px;display:grid}.brand{align-items:center;gap:14px;margin-bottom:8px;display:flex}.brand h1{letter-spacing:-.02em;margin:0;font-size:2.4rem;font-weight:900}.brand p{color:var(--muted);margin:0}.group-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.group-list li{gap:6px;display:flex}.group-item{text-align:left;background:var(--bg2);color:var(--text);border:1px solid var(--line);cursor:pointer;font:inherit;border-radius:10px;flex:1;padding:.6rem .8rem;display:grid}.online-dot{color:#4ade80;font-weight:600}.topbar{padding:10px 16px;padding-top:max(10px, env(safe-area-inset-top));align-items:center;gap:8px;display:flex}.topbar .title{text-align:center;flex:1;min-width:0;display:grid}.topbar .title strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.code{letter-spacing:.15em;color:var(--accent)}.lobby{max-width:1100px;margin:0 auto;padding-bottom:32px}.lobby-grid{grid-template-columns:1fr;gap:14px;padding:0 16px;display:grid}@media (width>=900px){.lobby-grid{grid-template-columns:1fr 1.2fr;align-items:start}.lobby-grid .rules{grid-row:span 3}}.seats{gap:6px;margin:0;padding:0;list-style:none;display:grid}.seats li{background:var(--bg2);border-radius:10px;align-items:center;gap:10px;padding:.45rem .6rem;display:flex}.seats li.offline{opacity:.55}.seat-name{flex-wrap:wrap;flex:1;align-items:center;gap:6px;display:flex}.avatar{background:var(--line);border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-weight:800;display:grid}.tag{background:var(--line);color:var(--muted);border-radius:999px;padding:1px 7px;font-size:.7rem;font-style:normal}.tag.you{background:var(--accent);color:#241c3f}.ranking{gap:4px;margin:0;padding-left:1.3rem;display:grid}.ranking li span:first-child{margin-right:.5rem;font-weight:600}.presets{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.preset{text-align:left;background:var(--bg2);color:var(--text);border:2px solid var(--line);font:inherit;cursor:pointer;border-radius:12px;gap:2px;padding:.6rem .7rem;display:grid}.preset small{color:var(--muted);font-size:.75rem}.preset.active{border-color:var(--accent)}.preset:disabled{cursor:default}.extras{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;display:grid}.extra{background:var(--bg2);border:2px solid var(--line);cursor:pointer;border-radius:12px;align-items:center;gap:10px;padding:.5rem;display:flex}.extra.on{border-color:var(--accent)}.extra input{display:none}.extra span{display:grid}.extra small{color:var(--muted);font-size:.75rem}.toggle{cursor:pointer;align-items:flex-start;gap:10px;padding:.45rem 0;display:flex}.toggle input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin-top:2px}.toggle span{display:grid}.toggle small{color:var(--muted);font-size:.8rem}.readonly{cursor:default}.grid-fields{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:.8rem;display:grid}.grid-fields label{color:var(--muted);gap:4px;font-size:.85rem;display:grid}.chat{gap:6px;display:grid}.chat-log{align-content:start;gap:4px;max-height:260px;padding-right:4px;display:grid;overflow-y:auto}.chat.compact .chat-log{height:50vh;max-height:none}.chat-log p{overflow-wrap:anywhere;margin:0;font-size:.92rem}.chat-log .sys{color:var(--muted);font-size:.82rem;font-style:italic}.chat-log .bot b{color:var(--turquesa)}.chat-log .mine b{color:var(--accent)}.quick{flex-wrap:wrap;gap:4px;display:flex}.card{--c:#555;width:var(--cw);height:calc(var(--cw) * 1.45);border-radius:calc(var(--cw) * .14);border:calc(var(--cw) * .05) solid #fff;background:linear-gradient(150deg, color-mix(in srgb, var(--c) 80%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 75%, #000) 100%);color:#fff;cursor:default;-webkit-user-select:none;user-select:none;flex:none;place-items:center;padding:0;font-family:Arial Black,system-ui,sans-serif;transition:transform .15s,box-shadow .15s,filter .15s;display:grid;position:relative;overflow:hidden;box-shadow:0 4px 10px #00000059}.card:before{content:"";border-radius:calc(var(--cw) * .1);border:calc(var(--cw) * .025) solid #ffffff8c;background:repeating-linear-gradient(45deg,#ffffff14 0 6px,#0000 6px 12px);position:absolute;inset:12%}.card.small{--cw:44px}.c-laranja{--c:var(--laranja)}.c-roxo{--c:var(--roxo)}.c-turquesa{--c:var(--turquesa)}.c-rosa{--c:var(--rosa)}.card.wild{background:conic-gradient(var(--laranja) 0 25%, var(--roxo) 0 50%, var(--turquesa) 0 75%, var(--rosa) 0)}.card.wild:before{background:#1b1530cc}.card .face{font-size:calc(var(--cw) * .56);text-shadow:0 2px #0006;font-weight:900;position:relative}.card.long .face{font-size:calc(var(--cw) * .4)}.card .corner{font-size:calc(var(--cw) * .2);text-shadow:0 1px #0006;font-weight:900;line-height:1;position:absolute}.card .corner.tl{top:5%;left:7%}.card .corner.br{bottom:5%;right:7%;transform:rotate(180deg)}.card .kind{font-size:calc(var(--cw) * .1);opacity:.9;font-family:system-ui,sans-serif;font-weight:700;position:absolute;bottom:17%}.card.small .kind{display:none}.card.back{cursor:default;background:linear-gradient(150deg,#3b2c78,#1b1530)}.card.back[role=button]{cursor:pointer}.card.back[role=button]:hover{transform:translateY(-4px)}.back-logo{font-weight:900;font-size:calc(var(--cw) * .32);color:var(--accent);position:relative;transform:rotate(-12deg)}.card.playable{cursor:pointer}.card.playable:hover,.card.playable:focus-visible{transform:translateY(-14px)}.card.dim{filter:brightness(.55)saturate(.6)}.card.hint{box-shadow:0 0 0 4px var(--accent), 0 0 24px var(--accent);transform:translateY(-14px)}.table{flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.table:after{content:"";pointer-events:none;background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cur) 22%, transparent), transparent 60%);transition:background .4s;position:absolute;inset:0}.color-laranja{--cur:var(--laranja)}.color-roxo{--cur:var(--roxo)}.color-turquesa{--cur:var(--turquesa)}.color-rosa{--cur:var(--rosa)}.opponents{z-index:1;flex:none;justify-content:safe center;gap:8px;padding:4px 16px;display:flex;overflow-x:auto}.opp{background:var(--panel);border:2px solid var(--line);border-radius:12px;flex:none;justify-items:center;gap:2px;min-width:84px;padding:6px 10px;display:grid}.opp.turn{border-color:var(--accent);box-shadow:0 0 16px color-mix(in srgb, var(--accent) 50%, transparent)}.opp-name{text-overflow:ellipsis;white-space:nowrap;max-width:96px;font-size:.82rem;font-weight:600;overflow:hidden}.opp-count{align-items:center;gap:4px;font-weight:800;display:flex}.mini-back{background:linear-gradient(150deg,#3b2c78,#1b1530);border:1.5px solid #fff;border-radius:3px;width:12px;height:17px}.badge{background:var(--line);border-radius:999px;padding:1px 8px;font-size:.7rem}.badge.vira{background:var(--accent);color:#241c3f;font-weight:800}.badge.big{background:var(--danger);padding:4px 12px;font-size:1.3rem;font-weight:900}.center{z-index:1;flex:1;justify-content:center;align-items:center;gap:clamp(16px,6vw,48px);min-height:0;display:flex;position:relative}.pile,.discard{justify-items:center;gap:6px;display:grid}.color-dot{border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700}.dot-laranja{background:var(--laranja)}.dot-roxo{background:var(--roxo)}.dot-turquesa{background:var(--turquesa)}.dot-rosa{background:var(--rosa)}.center-info{justify-items:center;gap:8px;display:grid}.direction{color:var(--muted);font-size:2.2rem}.status{z-index:1;text-align:center;flex-direction:column;align-items:center;gap:4px;padding:0 16px;font-weight:700;display:flex}.status.mine{color:var(--accent)}.timer{background:var(--bg2);border-radius:99px;width:min(260px,70vw);height:8px;position:relative;overflow:hidden}.timer span{background:var(--accent);transition:width .25s linear;position:absolute;inset:0 auto 0 0}.timer em{display:none}.log{z-index:1;text-align:center;color:var(--muted);min-height:3.6em;padding:4px 16px;font-size:.8rem}.log p{margin:0}.hint-bubble{z-index:2;background:var(--accent);color:#241c3f;border-radius:12px;align-self:center;max-width:560px;margin:0 16px 4px;padding:.5rem .8rem;font-size:.9rem;font-weight:600}.hand-area{z-index:1;padding:6px 16px;padding-bottom:max(12px, env(safe-area-inset-bottom));flex:none}.actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:8px;display:flex}.vira-btn{background:var(--danger);letter-spacing:.03em;border-color:#0000;font-weight:900}.vira-btn.pulse{animation:1s infinite pulse}@keyframes pulse{50%{box-shadow:0 0 18px var(--danger);transform:scale(1.08)}}.hand{--gap:clamp(calc(var(--cw) * -.72), calc((100vw - 32px - var(--cw)) / max(var(--n) - 1, 1) - var(--cw)), 6px);justify-content:safe center;padding-top:16px;display:flex;overflow:auto visible}.modal{z-index:50;background:#0a0619b8;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;gap:.8rem;width:min(420px,100%);padding:1.2rem;display:grid}.modal-box.end h2{text-align:center;font-size:1.4rem}.color-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.color-btn{color:#fff;font:inherit;cursor:pointer;border:none;border-radius:14px;padding:1.4rem .5rem;font-size:1.05rem;font-weight:800}.drawer{background:var(--panel);border-left:1px solid var(--line);z-index:40;grid-template-rows:auto 1fr;gap:8px;width:min(380px,100%);padding:16px;display:grid;position:fixed;top:0;bottom:0;right:0}.toast{color:#fff;z-index:100;text-align:center;background:#000d;border-radius:10px;max-width:calc(100% - 32px);padding:.6rem 1rem;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.banner{background:var(--danger);color:#fff;text-align:center;z-index:90;padding:4px;font-size:.85rem;position:fixed;top:0;left:0;right:0}@media (width>=900px) and (height>=700px){:root{--cw:92px}}@media (height<=520px) and (orientation:landscape){:root{--cw:52px}.center .card{--cw:62px}.log{display:none}}.btn.icon{text-align:center;width:40px;padding:.5rem 0}.opp{transition:transform .2s,opacity .2s,box-shadow .2s;position:relative}.opponents{padding-top:14px;padding-bottom:10px}.opp:not(.turn){opacity:.78}.opp.offline{opacity:.45}.opp.turn{opacity:1;border:3px solid var(--accent);background:color-mix(in srgb, var(--accent) 18%, var(--panel));box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent);animation:1.4s ease-in-out infinite glow;transform:scale(1.1)}@keyframes glow{50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 75%, transparent)}}.turn-tag{background:var(--accent);color:#241c3f;letter-spacing:.08em;white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:.62rem;font-weight:900;position:absolute;top:-11px;left:50%;transform:translate(-50%)}.opp.acting .avatar{box-shadow:0 0 0 3px var(--turquesa)}.hit-badge{z-index:3;background:var(--danger);color:#fff;border-radius:999px;padding:2px 9px;font-size:.95rem;font-weight:900;animation:.35s cubic-bezier(.3,1.6,.5,1) pop;position:absolute;top:-12px;right:-10px;box-shadow:0 3px 10px #0006}.hit-badge.mine{width:max-content;margin:0 auto 6px;font-size:1rem;display:block;position:static}@keyframes pop{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}.announce{z-index:5;border:2px solid var(--accent);background:#140e2af0;border-radius:16px;align-items:center;gap:14px;width:min(460px,100% - 32px);padding:12px 16px;animation:.3s ease-out announce;display:flex;position:absolute;top:6px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #0000008c}.announce .card{--cw:clamp(48px, 13vw, 70px)}.announce strong{font-size:clamp(1rem,4vw,1.2rem);line-height:1.2;display:block}.announce p{color:#e3dcff;margin:4px 0 0;font-size:clamp(.88rem,3.4vw,1rem)}@keyframes announce{0%{opacity:0;transform:translate(-50%,-12px)scale(.92)}to{opacity:1;transform:translate(-50%)scale(1)}}.center{align-items:flex-end;min-height:230px;padding-bottom:8px}.caption{z-index:1;text-align:center;padding:0 16px 4px;font-size:.92rem}.color-dot{padding:3px 12px;font-size:.85rem}.status{gap:5px;padding-bottom:4px;font-size:1rem}.status.mine{font-size:1.05rem}.your-turn{background:var(--accent);color:#241c3f;letter-spacing:.06em;box-shadow:0 0 24px color-mix(in srgb, var(--accent) 70%, transparent);border-radius:999px;padding:4px 22px;font-size:clamp(1.1rem,5vw,1.5rem);font-weight:900;animation:1.2s ease-in-out infinite pulse-y}@keyframes pulse-y{50%{transform:scale(1.06)}}.timer.low span{background:var(--danger)}.hand-area{border-radius:18px 18px 0 0;transition:background .3s,box-shadow .3s}.table.my-turn .hand-area{background:color-mix(in srgb, var(--accent) 10%, transparent);box-shadow:inset 0 3px 0 var(--accent), 0 -10px 30px color-mix(in srgb, var(--accent) 22%, transparent)}.hand-slot{flex:none;position:relative}.hand-slot+.hand-slot{margin-left:var(--gap)}.hand .card+.card{margin-left:0}.hand-slot.selected .card{box-shadow:0 0 0 4px var(--turquesa), 0 8px 18px #00000080;transform:translateY(-22px)}.check{z-index:2;background:var(--turquesa);color:#fff;border-radius:50%;place-items:center;width:24px;height:24px;font-size:.85rem;font-weight:900;display:grid;position:absolute;top:-30px;left:50%;transform:translate(-50%)}.select-bar{align-items:center;margin-bottom:30px}.select-bar span{color:var(--muted);text-align:center;flex-basis:100%;font-size:.85rem}.modal-box.guide{width:min(620px,100%);max-height:88dvh;overflow-y:auto}.guide-rules{gap:6px;margin:0;padding-left:1.2rem;font-size:.93rem;display:grid}.guide-cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;display:grid}.guide-card{background:var(--bg2);border-radius:12px;align-items:center;gap:10px;padding:6px 8px;display:flex}.guide-card span{display:grid}.guide-card small{color:var(--muted);font-size:.8rem}.history{color:var(--muted);max-height:30vh;font-size:.8rem;overflow-y:auto}.history p{margin:2px 0}.drawer{grid-template-rows:auto 1fr auto}:root{--cw:clamp(48px, min(14vw, 11dvh), 96px)}.center{min-height:0}.center .card{--cw:clamp(52px, min(18vw, 14dvh), 120px)}@media (width>=900px) and (height>=700px){:root{--cw:clamp(48px, 11dvh, 92px)}}@media (height<=820px){.opponents{padding-top:12px;padding-bottom:4px}.opp{padding:3px 8px}.opp .avatar{width:26px;height:26px;font-size:.8rem}.opp.turn{transform:scale(1.04)}.center{padding-bottom:4px}.caption{padding-bottom:2px;font-size:.85rem}.status{gap:3px;padding-bottom:2px}.your-turn{padding:2px 18px;font-size:1.1rem}.hand-area{padding-top:4px}.hand{padding-top:12px}.actions{margin-bottom:4px}.actions .btn{padding-top:.35rem;padding-bottom:.35rem}}