:root{--bg-void: #030306;--bg-raised: #0c0c10;--bg-panel: rgba(12, 12, 16, .85);--border: rgba(255, 255, 255, .06);--border-hover: rgba(199, 134, 255, .3);--text: #e2e4eb;--text-muted: #6b6f7c;--text-faint: #4a4e5c;--brand-a: #c084fc;--brand-b: #a855f7;--brand-c: #ec4899;--font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--text-hero-eyebrow: .7rem;--board-max: min(47rem, 80vmin);--chat-log-min-h: max(15rem, min(31dvh, 24rem));--board-gap-approx: 10px;color:var(--text);background:var(--bg-void);color-scheme:dark;font-family:var(--font);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:var(--bg-void);background-image:radial-gradient(120% 80% at 50% -20%,rgba(88,28,135,.12) 0%,transparent 50%),radial-gradient(80% 50% at 100% 100%,rgba(236,72,153,.05) 0%,transparent 45%)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,p{margin:0}.shell{width:100%;max-width:min(1560px,100vw);margin:0 auto;min-height:100vh;padding:20px clamp(14px,2.5vw,28px) 28px;box-sizing:border-box}.shell--game{display:flex;flex-direction:column;min-height:100dvh;max-width:min(1240px,100% - 24px);width:100%;margin:0 auto;gap:.9rem;padding:clamp(16px,2.4dvh,28px) clamp(10px,1.4vw,18px) clamp(10px,1.5dvh,20px)}.shell--lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;padding:clamp(24px,6vh,80px) 20px 40px}.brand{text-align:center}.brand--inline{display:flex;align-items:center;gap:.7rem;text-align:left;min-width:0;flex:1}.brand-icon{display:block;margin:0 auto 1rem;width:52px;height:52px;image-rendering:-webkit-optimize-contrast;border-radius:12px;filter:drop-shadow(0 2px 16px rgba(168,85,247,.2))}.brand--inline .brand-icon{margin:0;flex-shrink:0}.brand-icon--sm{width:32px;height:32px;border-radius:8px}.brand-lockup{font-size:clamp(1.4rem,3.5vw,1.75rem);font-weight:700;line-height:1.2;letter-spacing:-.03em;font-style:normal;font-family:var(--font)}.brand-ghost{background:linear-gradient(120deg,var(--brand-a),var(--brand-b) 50%,var(--brand-c));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}.brand-ghost--sm{font-size:.9rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(120deg,var(--brand-a),var(--brand-b) 50%,var(--brand-c));-webkit-background-clip:text;background-clip:text;color:transparent}.brand-separator,.brand .brand-separator{color:var(--text-faint);font-weight:500;background:none;-webkit-text-fill-color:var(--text-faint)}.brand-c4{color:var(--text-muted);font-weight:600;background:none;-webkit-text-fill-color:currentColor;letter-spacing:-.02em}.lobby{width:100%;max-width:22rem;display:flex;flex-direction:column;align-items:center;gap:2rem}.lobby-form{width:100%;display:flex;flex-direction:column;gap:1.1rem}.room-occupancy{margin:.15rem 0 .35rem;font-size:.8rem;font-weight:700;color:#a78bfa;letter-spacing:.03em}.conn-alert{flex:0 0 auto;margin:0;padding:.65rem .75rem;border-radius:10px;border:1px solid rgba(234,179,8,.35);background:#42200040;color:#e5d4b7;font-size:.72rem;line-height:1.45}.conn-alert__p{margin:0}.conn-alert__p code,.conn-alert code{font-size:.9em;color:#fde68a;font-family:ui-monospace,Cascadia Code,monospace}.room-occupancy--warn{color:#fbbf24}.empty-seat--warn{border-color:#eab3084d;color:#fde68a;background:#1e140059}.field{display:flex;flex-direction:column;align-items:stretch;gap:.45rem;color:var(--text-muted);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.field-label{text-align:center;font-size:.68rem}.lobby-form input{text-align:center;font-size:.95rem;font-weight:500;letter-spacing:.01em;border-radius:12px;border:1px solid var(--border);padding:.9rem 1rem;color:var(--text);background:var(--bg-raised);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.lobby-form input::placeholder{color:var(--text-faint);font-weight:400}.lobby-form input:focus{border-color:#a855f766;box-shadow:0 0 0 3px #a855f71a}.primary,.ghost{border:0;border-radius:12px;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;font-weight:700;font-family:var(--font)}.primary{padding:.8rem 1.25rem;color:#0a0610;background:linear-gradient(120deg,#d4a5ff,var(--brand-b) 45%,#f0abfc 100%);box-shadow:0 4px 20px #7c3aed2e}.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 28px #7c3aed40;filter:brightness(1.03)}.primary:active:not(:disabled){transform:translateY(0)}.ghost{padding:.45rem .7rem;color:#c4b5fd;background:#8b5cf61a;border:1px solid rgba(139,92,246,.15);font-size:.75rem;font-weight:600;border-radius:10px}.ghost:hover{background:#8b5cf629}.topbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:0;padding:.35rem 0 .6rem;border-bottom:1px solid var(--border);max-width:100%;flex:0 0 auto}.topbar-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem}.rebtn{font-size:.62rem!important;padding:.3rem .45rem!important;border-radius:8px!important;white-space:nowrap}.topbar-titles{margin:0;font-size:.8rem;line-height:1.3;font-weight:500;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em;min-width:0;color:var(--text-muted);font-family:var(--font)}.topbar-sep{color:var(--text-faint);-webkit-user-select:none;user-select:none}.panel,.board-wrap{border:1px solid var(--border);border-radius:16px;background:var(--bg-panel);box-shadow:none}h2{color:var(--text);font-size:1.05rem;line-height:1.35;font-weight:600;font-family:var(--font);letter-spacing:-.02em}.match-headline{color:#a8b0c0;font-size:.84rem;font-weight:500;line-height:1.4}.side-panel .label{margin:0 0 .2rem;font-size:.65rem;letter-spacing:.1em}.panel-prefs{display:flex;flex-direction:column;gap:.4rem;padding:.45rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:.1rem 0 .35rem}.panel-prefs .label{margin-bottom:.1rem}.pref-toggle{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-muted);font-weight:500;cursor:pointer;line-height:1.3}.pref-toggle input:disabled{cursor:not-allowed;opacity:.5}.pref-toggle input[type=checkbox]{width:1rem;height:1rem;accent-color:#a78bfa;flex-shrink:0}.pref-toggle__text{-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:no-preference){.pref-toggle:has(:focus-visible){outline:2px solid rgba(167,139,250,.5);outline-offset:3px;border-radius:4px}}.eyebrow,.label,.hero-eyebrow{margin:0 0 6px;color:var(--text-faint);font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font)}.status-pill{flex-shrink:0;border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:#a8adbc;background:#ffffff0a;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-family:var(--font)}.status-pill[data-status=conectando]{color:#a78bfa;border-color:#7c3aed40}.status-pill[data-status=online]{color:#86efac;border-color:#22c55e40;background:#1665341f}.status-pill[data-status=desconectado]{color:var(--text-faint)}input:not(.lobby-form input){width:100%;border:1px solid var(--border);border-radius:12px;padding:.7rem .85rem;color:var(--text);background:var(--bg-raised);outline:none}input:not(.lobby-form input):focus{border-color:#7c3aed59}label:not(.field){display:grid;gap:6px;color:var(--text-muted);font-weight:600;font-size:.8rem;font-family:var(--font)}.game-layout{display:grid;grid-template-columns:minmax(12.5rem,16.5rem) minmax(0,1.3fr) minmax(16.5rem,22rem);gap:clamp(.5rem,.8vw,.9rem);align-items:start;align-content:start;flex:0 1 auto;min-height:0;width:100%;max-width:100%}@media(min-width:1400px){.game-layout{grid-template-columns:minmax(13.5rem,17.5rem) minmax(0,1.35fr) minmax(17rem,22.5rem)}}@media(max-width:1100px){.game-layout{grid-template-columns:minmax(11rem,14rem) minmax(0,1.2fr) minmax(14.5rem,20rem)}}.side-panel{display:flex;flex-direction:column;align-items:stretch;gap:.55rem;padding:.65rem;font-size:.88rem;align-self:start;min-width:0;max-width:100%}.side-panel .match-info .primary{padding:.5rem .65rem;font-size:.72rem;border-radius:10px;width:100%}.room-code{display:block;font-size:.88rem;font-weight:600;letter-spacing:.04em;font-family:ui-monospace,"Cascadia Code",var(--font),system-ui,sans-serif;color:var(--text);line-height:1.35;word-break:break-all}.room-line,.player-card{display:flex;align-items:center;gap:10px}.room-line{justify-content:space-between;flex-wrap:wrap;row-gap:.3rem}.side-panel .ghost{font-size:.75rem;padding:.35rem .5rem}.scoreboard{display:grid;gap:8px}.player-card{border:1px solid var(--border);border-radius:10px;padding:6px 8px;background:#0003;transition:border-color .15s ease;gap:6px}.player-card.active{border-color:#7c3aed59;background:#581c8714}.player-card--away{border-color:#eab30866;background:#2d200033}.player-card--away .player-status{color:#fbbf24;font-weight:600}.player-card strong{display:block;font-size:.86rem;line-height:1.25}.player-card p,.empty-seat{color:var(--text-faint);font-size:.72rem;margin:.05rem 0 0;line-height:1.2}.score{margin-left:auto;color:var(--text);font-size:1.2rem;font-weight:800;font-family:var(--font);letter-spacing:-.03em;line-height:1}.token{width:14px;height:14px;border-radius:999px;flex-shrink:0}.empty-seat{border:1px dashed var(--border);border-radius:8px;padding:.45rem .4rem;text-align:center;color:var(--text-muted);font-size:.72rem;line-height:1.3}.match-info{display:grid;gap:.35rem;margin-top:.15rem;padding-top:.45rem;border-top:1px solid var(--border)}.board-wrap{display:flex;flex-direction:column;align-items:center;flex:0 1 auto;min-width:0;min-height:0;width:100%;max-width:min(100%,calc(var(--board-max) + 1.25rem));margin-left:auto;margin-right:auto;justify-content:flex-start;gap:.35rem;padding:.4rem clamp(.2rem,.5vw,.5rem)}.turn-banner{width:100%;max-width:min(100%,var(--board-max));border:1px solid var(--border);border-radius:10px;padding:.5rem .65rem;color:var(--text-muted);background:#0003;text-align:center;font-size:.84rem;font-weight:600;font-family:var(--font);letter-spacing:.02em;flex:0 0 auto}.turn-banner.mine{border-color:#16a34a59;color:#a7f3c7;background:#1665341a}.turn-banner--warn{border-color:#facc1566;color:#fef3c7;background:#3728004d}.board-outer{flex:0 1 auto;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%}.board{display:grid;width:100%;max-width:var(--board-max);min-width:0;max-height:min(64dvh,40rem,100%);aspect-ratio:7 / 6;height:auto;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:clamp(4px,.4vw,8px);border-radius:16px;padding:clamp(4px,.5vw,9px);background:#05060a;border:1px solid var(--border);box-sizing:border-box}.cell{position:relative;aspect-ratio:1;border:0;border-radius:999px;background:#0a0b0f;box-shadow:inset 0 2px 6px #00000073;transition:outline .12s ease;outline:none}.cell:not(:disabled):hover{outline:2px solid rgba(124,58,237,.25)}.cell:focus-visible{outline:none}.cell.last-moved{box-shadow:inset 0 0 0 2px #a78bfa80;z-index:1}.cell.last-moved:focus-visible,.cell.last-moved:not(:disabled):hover{box-shadow:inset 0 0 0 2px #a78bfa80,0 0 0 2px #7c3aed33;outline:none}.cell.last-moved.win{box-shadow:inset 0 0 0 1px #ffffff26;z-index:2}.player-0{opacity:0;pointer-events:none;transform:scale(.01)}.disc{position:absolute;top:10%;right:10%;bottom:10%;left:10%;border-radius:inherit;transform:scale(.2);opacity:0;transition:transform .16s ease,opacity .16s ease;will-change:auto}.filled .disc:not(.disc--dropping){transform:scale(1);opacity:1}.player-1{background:linear-gradient(145deg,#fbbf24,#f97316);box-shadow:0 1px #ffffff1a inset}.player-2,.app--swap-fills .player-1{background:linear-gradient(145deg,#60a5fa,#6366f1);box-shadow:0 1px #ffffff1a inset}.app--swap-fills .player-2{background:linear-gradient(145deg,#fbbf24,#f97316);box-shadow:0 1px #ffffff1a inset}.win .disc{box-shadow:none}@keyframes win-ring-pulse{0%{transform:scale(1);opacity:.92}55%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:.92}}.cell.win{z-index:3}@media(prefers-reduced-motion:no-preference){.cell.win .disc:after{transform-origin:50% 50%;animation:win-ring-pulse .9s ease-in-out infinite}}.cell.win .disc:after{content:"";position:absolute;top:-6%;right:-6%;bottom:-6%;left:-6%;border-radius:inherit;pointer-events:none;border:2px solid rgba(240,171,252,.92);box-shadow:0 0 0 2px #ffffff14}@keyframes disc-drop{0%{transform:translate3d(0,calc(-1*max(5rem,var(--drop-px, 8rem))),0) scale(1)}to{transform:translateZ(0) scale(1)}}.filled .disc.disc--dropping{transform-origin:50% 100%;transition:none;animation:disc-drop .45s cubic-bezier(.2,.85,.2,1) both;will-change:transform;opacity:1}.filled .disc.disc--dropping,.filled .disc.disc--dropping.player-1,.filled .disc.disc--dropping.player-2{box-shadow:inherit}@media(prefers-reduced-motion:reduce){.filled .disc.disc--dropping{animation:none;will-change:auto;transform:scale(1)}}.chat-panel{display:flex;flex-direction:column;min-height:0;width:100%;max-width:24rem;max-height:min(72dvh,34rem);flex:0 1 auto;gap:.4rem;border:1px solid var(--border);border-radius:16px;background:var(--bg-panel);padding:.5rem .55rem .55rem}.chat-panel .label{margin-bottom:.15rem}.chat-log{flex:0 1 auto;min-height:var(--chat-log-min-h);max-height:min(40dvh,28rem);overflow-y:auto;overflow-x:hidden;padding:.45rem .2rem .45rem .3rem;font-size:.88rem;line-height:1.5;font-family:ui-monospace,Cascadia Code,Consolas,monospace;color:var(--text);border-radius:8px;background:#00000040;scroll-behavior:smooth}.chat-line{display:block;padding:.1rem .35rem;word-wrap:break-word;border-radius:4px}.chat-time{color:var(--text-faint);margin-right:.25em;font-weight:500}.chat-nick{color:#a78bfa;font-weight:600;margin-right:.35em}.chat-text{color:#c9cdd8;font-weight:400}.chat-form{display:flex;gap:.4rem;margin-top:auto;padding-top:.2rem;flex:0 0 auto;width:100%;font-family:var(--font)}.chat-input{flex:1;min-width:0;font-size:.9rem;font-family:var(--font)!important;padding:.55rem .7rem!important;border-radius:10px!important}.chat-input:disabled{opacity:.55;cursor:not-allowed}button.chat-send{flex-shrink:0;font-size:.8rem;padding:.5rem .65rem}button.chat-send:disabled{opacity:.4;cursor:not-allowed}@media(max-width:900px){.game-layout{grid-template-columns:1fr}.side-panel{order:1}.board-wrap{order:2}.chat-panel{order:3;max-width:100%;max-height:min(50dvh,28rem)}.chat-log{min-height:5.5rem;max-height:min(36dvh,18rem)}}