:root{
  --bg:#090b13;--panel:#10142a;--panel-2:#161b38;--line:#232a4f;--line-2:#323c6e;
  --txt:#e9edfa;--mute:#8a93b8;--accent:#f2b84b;--accent-ink:#1a1305;--rival:#8fd0ff;--err:#ff8a8a;--wa:#25d366;
  --display:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--body);overscroll-behavior:none;touch-action:manipulation;-webkit-font-smoothing:antialiased}
body{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
button{font:inherit;color:inherit}
.mono{font-family:var(--mono)}

#app{height:100dvh;display:flex;flex-direction:column;align-items:center;padding:max(12px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));gap:10px}
.bar{width:min(100%,460px);display:flex;align-items:center;justify-content:space-between;min-height:36px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);text-decoration:none;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.32em}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--mute);cursor:pointer}
.icon-btn:hover{color:var(--txt);border-color:var(--line-2)}
.icon-btn svg{width:18px;height:18px}

.view{width:min(100%,460px);flex:1;min-height:0;display:flex;flex-direction:column}
#home{overflow:auto;padding-bottom:12px;gap:18px;justify-content:flex-start}
.intro{padding:10px 2px 0}
.eyebrow{margin:0;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
h1{margin:8px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(30px,9vw,40px);line-height:1.04;letter-spacing:-.01em}
h2{margin:0;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.005em}
h2 em{font-style:normal;color:var(--mute);font-weight:600}

.card{display:flex;gap:16px;padding:18px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel),#0d1126);box-shadow:0 24px 50px -28px #000}
.art{flex:none;display:grid;place-items:end center;width:88px;padding-top:6px}
.card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.desc{margin:0;font-size:14px;line-height:1.5;color:var(--mute)}
.field{display:flex;flex-direction:column;gap:6px}
label{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
input{width:100%;padding:11px 12px;font:inherit;font-size:16px;border-radius:6px;border:1px solid var(--line-2);background:#0a0e22;color:var(--txt);outline:none}
input::placeholder{color:#566090}
input:focus{border-color:var(--accent)}
#code{text-align:center;letter-spacing:.35em;text-transform:uppercase;font-weight:700;padding-left:calc(12px + .35em)}
#code::placeholder{letter-spacing:.2em;font-weight:500;font-size:13px}
#mainActions,#inviteActions{display:flex;flex-direction:column;gap:10px}
.join{display:flex;gap:8px}
.join .btn{width:auto;padding-inline:18px}
.invite{padding:10px 12px;border:1px dashed var(--line-2);border-radius:6px;font-size:13px;color:var(--mute)}
.invite p{margin:0}.invite b{color:var(--accent);letter-spacing:.2em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px 16px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:6px;border:1px solid var(--line-2);background:transparent;color:var(--txt);cursor:pointer;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:#ffffff0c}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#f6c76a}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#04210f}
.btn.wa:hover{background:#3be07b}
.btn.ghost{border-color:var(--line)}
.btn:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;padding:6px;color:var(--mute);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.link:hover{color:var(--txt)}
.hint{margin:0;font-size:12px;line-height:1.5;color:var(--mute)}
.hint:empty{display:none}
.hint.warn{color:var(--accent)}
.err{margin:0;font-size:12px;color:var(--err)}
.aux{display:flex;flex-direction:column;gap:10px;align-items:stretch}

/* Sala de espera */
.room-wrap{margin:auto 0;display:flex;flex-direction:column;gap:12px;padding:6px 2px 24px}
.code{display:flex;gap:8px;margin:6px 0 2px}
.code span{flex:1;display:grid;place-items:center;aspect-ratio:1/1.15;max-width:84px;border:1px solid var(--line-2);border-radius:8px;background:#0a0e22;font-family:var(--mono);font-weight:700;font-size:38px;color:var(--accent);box-shadow:inset 0 -3px 0 #ffffff08}
.slots{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.slots li{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:15px}
.slots .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.slots .wait .dot{background:transparent;border:1px solid var(--line-2);animation:pulse 1.4s ease-in-out infinite}
.slots .wait .nm{color:var(--mute)}
.slots .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slots .tagme{font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
@keyframes pulse{50%{opacity:.25}}

/* Partida */
#game{position:relative;align-items:center;justify-content:center}
.arena{display:flex;gap:14px;align-items:flex-start;justify-content:center}
.side{display:flex;flex-direction:column;gap:8px}
.tag{display:flex;justify-content:space-between;align-items:baseline;gap:10px;height:30px;font-family:var(--display)}
.tag .nm{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag .n{font-family:var(--mono);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.side.me .tag .n{color:#fff}
.side.rival .tag .n{color:var(--rival)}
.side.rival .tag .nm{color:#6d9bb8}
canvas{display:block;border:1px solid var(--line-2);border-radius:8px;background:#0c1029;box-shadow:0 22px 44px -26px #000}
.note{margin:0;min-height:16px;font-size:12px;color:var(--accent)}

.count{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;text-align:center}
.count span{font-family:var(--display);font-weight:700;font-size:min(34vw,150px);line-height:1;color:#fff;text-shadow:0 0 40px #4f7bff66;animation:pop .5s ease-out}
.count span.txt{font-size:clamp(20px,6vw,28px);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-shadow:none}
.count small{font-size:13px;color:var(--mute);letter-spacing:.04em}
@keyframes pop{from{transform:scale(1.25);opacity:0}to{transform:scale(1);opacity:1}}

.result{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:rgba(6,8,18,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .25s ease-out}
@keyframes fade{from{opacity:0}}
.panel{width:100%;max-width:280px;display:flex;flex-direction:column;gap:12px}
.result h2{font-size:44px;line-height:1}
.result.win h2{color:var(--accent)}
.result.lose h2{color:var(--rival)}
.score{margin:0;font-size:15px;color:var(--txt)}

.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;padding:10px 16px;border-radius:6px;border:1px solid var(--line-2);background:#141a3a;color:var(--txt);font-size:13px;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== v2: catálogo, selector, vistas de juego ===== */
.scroll{overflow:auto;padding-bottom:14px;gap:18px;justify-content:flex-start}
#room.scroll{justify-content:flex-start}
.room-wrap{margin:0;padding:6px 2px 10px}
.card{flex-direction:column;gap:14px;padding:18px}
.eyebrow.soft{color:var(--mute);margin-bottom:10px}
.link.center{display:block;margin:10px auto 0}
.row{display:flex;gap:8px}.row .btn{flex:1}

.catalog,.picker{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:380px){.catalog{grid-template-columns:1fr 1fr}}
.gcard{display:flex;align-items:center;gap:12px;width:100%;padding:12px;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--txt);font:inherit;cursor:default}
button.gcard{cursor:pointer;transition:border-color .15s,background .15s}
button.gcard:hover{border-color:var(--line-2);background:var(--panel-2)}
.gcard.on{border-color:var(--accent);background:linear-gradient(180deg,#1a1d33,#14172c);box-shadow:inset 0 0 0 1px #f2b84b33}
.gicon{flex:none;width:40px;height:40px}.gicon svg{width:40px;height:40px;display:block}
.gtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gtxt b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em}
.gtxt small{font-size:12px;line-height:1.35;color:var(--mute)}

#game{position:relative}
.gv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.gv[hidden]{display:none}

/* Reflejos */
.r-top{width:100%;display:flex;justify-content:space-between;gap:12px;padding:0 2px}
.r-side{display:flex;flex-direction:column;gap:8px}.r-side.end{align-items:flex-end}
.nm{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dots{display:flex;gap:6px}
.dots i{width:14px;height:14px;border:1px solid var(--line-2);border-radius:3px;background:transparent}
.dots.me i.on{background:var(--accent);border-color:var(--accent)}
.dots.rv i.on{background:var(--rival);border-color:var(--rival)}
.pad{flex:1;width:100%;min-height:0;margin-bottom:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-2);border-radius:12px;text-align:center;padding:20px;transition:background .06s,border-color .06s}
.pad b{font-family:var(--display);font-weight:700;font-size:clamp(34px,11vw,56px);line-height:1.05}
.pad small{font-size:14px;color:var(--mute)}
.pad.wait{background:#0e1230}
.pad.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pad.go small{color:#3b2b08}
.pad.win{background:#1b1a10;border-color:var(--accent)}.pad.win b{color:var(--accent)}
.pad.lose{background:#0f1a26;border-color:var(--rival)}.pad.lose b{color:var(--rival)}

/* Tira y afloja */
.t-head{width:100%;display:flex;align-items:baseline;justify-content:space-between;padding:0 4px}
.t-head .n{font-family:var(--mono);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.n.me{color:#fff}.n.rv{color:var(--rival)}
.rope{position:relative;flex:1;width:100%;min-height:0;border:1px solid var(--line-2);border-radius:12px;background:#0c1029;overflow:hidden}
.rope .line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:repeating-linear-gradient(#ffffff2a 0 8px,transparent 8px 16px)}
.rope .goal{position:absolute;left:0;right:0;height:14%}
.rope .goal.top{top:0;background:linear-gradient(#8fd0ff2e,transparent)}
.rope .goal.bottom{bottom:0;background:linear-gradient(transparent,#f2b84b2e)}
.rope .knot{position:absolute;left:50%;width:56px;height:28px;margin-left:-28px;border-radius:5px;background:var(--accent);box-shadow:0 0 22px #f2b84b66;transition:top .12s linear}
.rope.trail .knot{background:var(--rival);box-shadow:0 0 22px #8fd0ff66}
.rope .time{position:absolute;left:12px;top:10px;font-size:13px;color:var(--mute)}

/* 4 en raya */
.c4-turn{margin:0;min-height:20px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.c4-turn.mine{color:var(--accent)}
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:min(100%,380px);padding:10px;border:1px solid var(--line-2);border-radius:12px;background:#0c1029;aspect-ratio:7/6}
.c4 .cell{position:relative;appearance:none;padding:0;border:0;border-radius:50%;background:#171c3e;box-shadow:inset 0 2px 4px #0006;cursor:pointer;aspect-ratio:1}
.c4 .cell:hover{background:#1d2350}
.c4 .cell.me{background:var(--accent);box-shadow:0 0 12px #f2b84b55}
.c4 .cell.rv{background:var(--rival);box-shadow:0 0 12px #8fd0ff55}
.c4 .cell.win{outline:3px solid #fff;outline-offset:-3px;animation:blink .9s ease-in-out infinite}
.c4 .cell.drop{animation:drop .38s cubic-bezier(.3,.7,.4,1)}
@keyframes drop{from{transform:translateY(calc(var(--d,1) * -110%));opacity:.4}to{transform:none;opacity:1}}
@keyframes blink{50%{filter:brightness(1.5)}}
.c4-legend{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.c4-legend .disc{width:12px;height:12px;border-radius:50%}
.c4-legend .disc.me{background:var(--accent)}.c4-legend .disc.rv{background:var(--rival);margin-left:10px}
.slots .nm{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:15px;font-weight:400;color:var(--txt);max-width:none}
.slots .wait .nm{color:var(--mute)}
#pickNote{margin-top:10px}

/* ===== sin zoom ni selección ===== */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{touch-action:pan-x pan-y}
#game,#game *{touch-action:none}
input,textarea{-webkit-user-select:text;user-select:text;touch-action:manipulation}
img,svg,canvas{-webkit-user-drag:none;user-drag:none}

/* ===== v5: hockey, quién es quién, chat ===== */
.gv.top{justify-content:flex-start;align-items:stretch;overflow:auto;gap:10px;padding-bottom:10px}

.hk-top{width:min(100%,420px);display:flex;justify-content:space-between;align-items:baseline;padding:0 6px;height:36px}
.hk-side{display:flex;align-items:baseline;gap:10px}.hk-side.end{flex-direction:row-reverse}
.hk-side .n{font-family:var(--mono);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.hk-wrap{position:relative;display:grid;place-items:center}
#hkBoard{touch-action:none;cursor:grab}
.hk-msg{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:var(--display);font-weight:700;font-size:clamp(30px,10vw,46px);color:#fff;text-shadow:0 0 30px #4f7bff88;opacity:0}
.hk-msg.on{animation:flash 1.5s ease-out}
@keyframes flash{0%{opacity:0;transform:scale(1.3)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}

.w-status{margin:0;text-align:center;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);min-height:18px}
.w-status.on{color:var(--accent)}
.w-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;width:100%}
.wc{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 3px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--txt);cursor:pointer;transition:opacity .15s,border-color .15s}
.wc .wf{width:100%;aspect-ratio:1;display:block;border-radius:5px;background:#1a2150;overflow:hidden}
.wc .wf svg{width:100%;height:100%;display:block}
.wc .wn{font-size:9.5px;line-height:1.1;color:var(--mute);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc.mine{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.wc.mine::after{content:"TÚ";position:absolute;top:2px;left:2px;padding:1px 3px;border-radius:3px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-size:8px;font-weight:700;letter-spacing:.08em}
.wc.sel{border-color:var(--rival);box-shadow:0 0 0 2px var(--rival)}
.wc.off{opacity:.22}
.wc.off .wf::after{content:"";position:absolute;inset:4px 2px 14px;background:linear-gradient(135deg,transparent 46%,#ff8a8a 46% 54%,transparent 54%)}
.w-hist{display:flex;flex-direction:column;gap:3px;min-height:18px}
.wh{display:flex;justify-content:space-between;gap:10px;padding:4px 8px;border-radius:5px;font-size:12.5px;background:#ffffff08}
.wh.me{border-left:2px solid var(--accent)}.wh.rv{border-left:2px solid var(--rival)}
.wh b.yes{color:#7ee0a0}.wh b.no{color:#ff9a9a}
.w-actions{display:flex;flex-direction:column;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 11px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--txt);font:inherit;font-size:13px;cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--accent)}

.chat{display:flex;flex-direction:column;gap:8px}
.chat-list{display:flex;flex-direction:column;gap:5px;max-height:150px;min-height:44px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:8px;background:#0a0e22}
.chat.compact .chat-list{max-height:96px}
.chat-empty{margin:auto;font-size:12px;color:#566090}
.msg{display:flex;gap:8px;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.msg b{flex:none;font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.msg.me b{color:var(--accent)}.msg.rv b{color:var(--rival)}
.chat-form{display:flex;gap:6px}
.chat-form input{flex:1;min-width:0}
.chat-form .btn{width:auto;padding-inline:14px}

.result{display:flex;overflow:auto}
.result .panel{margin:auto}
.slots .nm{max-width:none}

/* ===== v6: contra la CPU ===== */
.h-sm{font-size:clamp(24px,7vw,30px);margin:6px 0 4px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{padding:11px 6px;border:0;border-right:1px solid var(--line-2);background:transparent;color:var(--mute);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent);color:var(--accent-ink)}