/* Friends Playing © 2026 Carlos Robles. Todos los derechos reservados. */
:root{--bg: #0f0f17;--surface: #1a1a28;--surface-2: #24243a;--line: #2f2f4a;--text: #f2f2f7;--muted: #9a9ab8;--red: #e63946;--red-hi: #ff6b6b;--blue: #3478e6;--blue-hi: #78beff;--pad-t: max(16px, env(safe-area-inset-top));--pad-r: max(24px, env(safe-area-inset-right));--pad-b: max(16px, env(safe-area-inset-bottom));--pad-l: max(24px, env(safe-area-inset-left))}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body{height:100dvh}[hidden]{display:none!important}button,input{font:inherit;color:inherit}.screen{position:fixed;inset:0;height:100dvh;display:flex;align-items:center;justify-content:center;gap:clamp(24px,6vw,64px);padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l)}.col{display:flex;flex-direction:column;gap:12px;width:min(300px,42vw);max-height:100%}.col.wide{width:min(360px,46vw)}.row{display:flex;gap:12px}.row>*{flex:1}.brand{display:flex;align-items:center;gap:12px;font-size:32px;font-weight:800;letter-spacing:-.02em}.logo{display:inline-flex;gap:5px}.logo i{width:22px;height:22px;border-radius:5px;background:var(--red);box-shadow:inset 3px 3px 0 var(--red-hi)}.logo i+i{background:var(--blue);box-shadow:inset 3px 3px 0 var(--blue-hi)}.sub{color:var(--muted);margin:-6px 0 8px}.label{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.status{color:var(--muted);font-size:16px;min-height:1.4em}.status.ok{color:var(--text);font-weight:600}.status.bad{color:var(--red-hi)}.btn{min-height:56px;padding:0 20px;border:0;border-radius:16px;background:var(--surface-2);font-size:18px;font-weight:700;cursor:pointer;transition:transform .08s,filter .15s}.btn:active{transform:scale(.97);filter:brightness(1.15)}.btn.primary{background:var(--red);box-shadow:0 4px #a3222d}.btn.primary:active{box-shadow:0 1px #a3222d;transform:translateY(3px)}.btn.ghost{background:transparent;border:2px solid var(--line);color:var(--muted)}.btn:disabled{opacity:.35;box-shadow:none;transform:none}.btn:focus-visible,.game:focus-visible,.exit:focus-visible{outline:3px solid var(--blue-hi);outline-offset:2px}.games{display:flex;flex-direction:column;gap:8px;overflow-y:auto;touch-action:pan-y;min-height:0;padding-bottom:24px;mask-image:linear-gradient(#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}.game{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 14px;border-radius:14px;background:var(--surface);border:2px solid transparent;font-size:18px;font-weight:700;text-align:left}button.game{cursor:pointer}button.game.sel{border-color:var(--red);background:var(--surface-2)}.game .icon{width:40px;height:40px;display:grid;place-items:center;font-size:26px;border-radius:10px;background:var(--bg)}.game .icon img{width:32px;height:32px;image-rendering:pixelated}.game small{margin-left:auto;color:var(--muted);font-size:12px;font-weight:600;text-align:right}.game.off{opacity:.4}.game:not(.off) small{display:none}button.game:not(.pick){cursor:default}#room-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:max-content;align-content:start;flex:1 1 auto}.game.card{flex-wrap:wrap;align-content:flex-start;gap:4px 8px;padding:0 0 8px;overflow:hidden;font-size:15px;min-height:0}.card .portada{flex:0 0 100%;width:100%;aspect-ratio:16 / 9;object-fit:cover;background:var(--bg)}.card .icon{width:28px;height:28px;margin-left:8px;font-size:18px;border-radius:8px}.card .icon img{width:22px;height:22px}.games .card small{display:block;flex:0 0 100%;margin:0;padding:0 10px;text-align:left}.players{list-style:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,30px);grid-auto-flow:column;gap:0 10px;font-size:15px;font-weight:700}.players li{display:flex;align-items:center;gap:6px;min-width:0}.players li:before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--c)}.players .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.players small{color:var(--muted);font-size:12px}.players li.off{color:var(--muted)}.players li.off:before{opacity:.4}.code{font-size:72px;line-height:1;font-weight:800;letter-spacing:.12em;font-variant-numeric:tabular-nums}.code-input{width:100%;padding:10px 0;border:2px solid var(--line);border-radius:16px;background:var(--surface);text-align:center;text-transform:uppercase;outline:none;user-select:text;-webkit-user-select:text}.code-input:focus{border-color:var(--blue)}.code-input::placeholder{color:var(--line)}.install{position:relative;margin-top:4px;padding:10px 40px 10px 12px;border-radius:12px;background:var(--surface);color:var(--muted);font-size:13px;line-height:1.35}.install-x{position:absolute;top:0;right:0;width:40px;height:40px;border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer}#play{padding:0;overflow:hidden;touch-action:none}#game{position:absolute;inset:0;z-index:0;background:#000}.exit{position:absolute;z-index:2;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));height:36px;padding:0 12px;border:0;border-radius:10px;background:#00000073;color:#ffffffd9;font-size:14px;font-weight:700}.overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0f0f17e0;text-align:center}.overlay-title{font-size:28px;font-weight:800}.overlay .btn{min-width:240px}.touch{position:absolute;inset:0;z-index:1;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end;padding:var(--pad-t) max(20px,env(safe-area-inset-right)) var(--pad-b) max(20px,env(safe-area-inset-left))}.touch-pad{display:grid;grid-template-columns:repeat(3,72px);grid-template-areas:". up ." "left . right" ". down ."}.touch-acts{display:flex;gap:16px;align-items:flex-end}.touch-btn{pointer-events:auto;touch-action:none;width:72px;height:72px;display:grid;place-items:center;border-radius:18px;background:#ffffff1f;border:2px solid rgba(255,255,255,.22);color:#ffffffbf;font-size:26px;font-weight:800}.touch-btn.on{background:#ffffff52}.t-up{grid-area:up}.t-left{grid-area:left}.t-right{grid-area:right}.t-down{grid-area:down}.touch-acts .touch-btn{width:80px;height:80px;border-radius:50%}.touch-acts .t-b{order:0;margin-bottom:44px}.touch-acts .t-a{order:1}.touch-zone{position:absolute;left:0;top:0;width:50%;height:100%;pointer-events:auto;touch-action:none}.touch-base{display:none;position:absolute;width:80px;height:80px;border-radius:50%;background:#ffffff1a;border:2px solid rgba(255,255,255,.25)}.touch-knob{position:absolute;left:18px;top:18px;width:40px;height:40px;border-radius:50%;background:#ffffff73}.toast{position:fixed;z-index:50;left:50%;bottom:var(--pad-b);transform:translate(-50%);padding:12px 20px;border-radius:12px;background:var(--surface-2);font-weight:600}.charla{position:fixed;z-index:10;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:6px}#play:not([hidden])~.charla{right:max(4px,env(safe-area-inset-right));opacity:.6}.redondo{width:40px;height:40px;border:2px solid rgba(255,255,255,.18);border-radius:50%;background:#00000080;font-size:18px;line-height:1;cursor:pointer}.mic-btn{position:relative;filter:grayscale(1);opacity:.75}.sonido{position:relative}.sonido.off{filter:grayscale(1);opacity:.6}.mic-btn:after,.sonido.off:after{content:"";position:absolute;left:7px;right:7px;top:16px;height:4px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px #111;transform:rotate(-45deg)}.mic-btn.on{filter:none;opacity:1;background:#2a9d4e;border-color:#5fd68a}.mic-btn.on:after{display:none}.mic-btn.habla{box-shadow:0 0 0 4px #5fd68ad9}.players .mic{font-size:13px}.burbujas{position:fixed;z-index:10;top:max(8px,env(safe-area-inset-top));left:50%;transform:translate(-50%);width:min(60vw,480px);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.burbuja{max-width:100%;padding:6px 12px;border-radius:14px;background:#0f0f17d1;font-size:15px;font-weight:600;overflow-wrap:anywhere;animation:aparece .15s ease-out}.burbuja b{font-weight:800;margin-right:6px}@keyframes aparece{0%{opacity:0;transform:translateY(-6px)}}.chat-bar{position:fixed;z-index:11;left:0;right:0;bottom:var(--teclado, 0px);display:flex;flex-direction:column;gap:8px;padding:8px var(--pad-r) max(8px,env(safe-area-inset-bottom)) var(--pad-l);background:#0f0f17eb;border-top:2px solid var(--line)}.chips{display:flex;gap:8px;overflow-x:auto;touch-action:pan-x}.chips button{flex:none;height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--surface-2);font-size:15px;font-weight:700;cursor:pointer}.chat-row{display:flex;gap:8px}.chat-row input{flex:1;min-width:0;height:44px;padding:0 14px;border:2px solid var(--line);border-radius:12px;background:var(--surface);outline:none;font-size:16px;user-select:text;-webkit-user-select:text}.chat-row input:focus{border-color:var(--blue)}.chat-row .btn{min-height:44px;font-size:16px}#play.chateando .touch{display:none!important}#rotate{display:none;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--bg);font-size:22px;font-weight:800}.phone{width:44px;height:76px;border:4px solid var(--text);border-radius:10px;animation:girar 1.8s ease-in-out infinite}@keyframes girar{0%,25%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media(orientation:portrait){#rotate{display:flex}}@media(prefers-reduced-motion:reduce){.phone{animation:none;transform:rotate(-90deg)}}#room{gap:20px;padding-right:max(60px,env(safe-area-inset-right))}#room .code{font-size:40px}#room .col{gap:8px;width:min(360px,44vw)}#room .col.wide{width:min(560px,52vw)}#room .btn{min-height:48px}.who-strip{display:flex;flex:none;gap:2px;overflow-x:auto;touch-action:pan-x;scrollbar-width:none}.who-strip::-webkit-scrollbar{display:none}.who{flex:none;width:54px;display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;cursor:pointer}.who i{width:38px;height:38px;display:grid;place-items:center;border:3px solid transparent;border-radius:50%;background:var(--c);background-clip:padding-box;color:var(--tinta);font-style:normal;font-size:17px;font-weight:800}.who span{font-size:12px;font-weight:700}.who small{min-height:12px;color:var(--muted);font-size:10px;line-height:12px}.who.mio i{border-color:#fff}.who.mio small{color:var(--text)}.who.ocupado{opacity:.4}