/* @cpi 2026-10-09 19:10: salón independiente; habitación desplazable y chat fuera de la escena. */
:root{color-scheme:dark;--bg:#10101c;--panel:#191924;--muted:#a4a1b6;--ink:#f4ebd7;--mint:#79e0c3;--pink:#f091b5;--gold:#e6bc73}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'Segoe UI',sans-serif;height:100dvh;overflow:hidden}button,a,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #ffffff20;background:#ffffff08;border-radius:8px;padding:10px 14px}button:hover{border-color:var(--gold);background:#ffffff10}button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:disabled{opacity:.55;cursor:default}a{color:inherit;text-decoration:none}.top{height:84px;display:flex;align-items:center;gap:24px;padding:0 28px;border-bottom:1px solid #ffffff13;background:#151521}.brand{display:flex;align-items:center;gap:12px;font-size:27px;letter-spacing:-1px;font-weight:800}.brand img{width:48px;height:52px;object-fit:contain}.brand small{display:block;font:9px 'Segoe UI';letter-spacing:2px;color:var(--muted);margin-top:3px}.pink{color:var(--pink)}.prototype{font-size:9px;letter-spacing:1.7px;color:#858095;margin:auto}.account{display:flex;align-items:center;gap:12px}.account small{font-weight:400;color:var(--muted)}.coin{border-radius:50%;width:34px;height:34px;background:linear-gradient(135deg,#ffdb87,#94622d);border:3px double #805421;color:#482a13;display:grid;place-items:center;font:bold 15px Georgia;box-shadow:0 3px 0 #4d3219}.avatar{width:32px;height:32px;display:inline-grid;place-items:center;border-radius:11px;border:1px solid #ffffff25;font-weight:700;flex:none;background:#615883;color:#fff}.me,.mint{background:#376959}.coral{background:#93594e}.blue{background:#475e8f}.mauve{background:#796085}.layout{display:grid;grid-template-columns:88px minmax(0,1fr) 310px;height:calc(100dvh - 84px)}.rail{border-right:1px solid #ffffff13;display:flex;flex-direction:column;padding:20px 8px;gap:15px;background:#151521}.rail button{border:0;background:none;color:var(--muted);padding:12px 3px;font-size:10px}.rail button i{display:block;font-style:normal;font-size:25px;margin-bottom:6px}.rail .active{background:#f091b516;color:var(--pink)}.rail-bottom{margin-top:auto;text-align:center;letter-spacing:3px;font:12px monospace;color:#6a647f;line-height:1.8}main{min-width:0;display:flex;flex-direction:column;overflow:hidden}.room-header{padding:23px 30px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(110deg,#222033,#151521);z-index:1}.eyebrow{font-size:9px;letter-spacing:2.1px;color:var(--gold);font-weight:700}h1{font-size:25px;margin:6px 0;font-weight:600;letter-spacing:-.7px}.room-header p{margin:0;color:var(--muted);font-size:12px}.live-dot,.free-dot,.busy-dot{display:inline-block;background:var(--mint);width:6px;height:6px;border-radius:50%;box-shadow:0 0 10px #79e0c366;margin-left:12px;vertical-align:middle}.busy-dot{background:var(--pink);margin-right:5px}.free-dot{margin:0 5px 0 0}.room-meta{display:flex;flex-direction:column;gap:10px;font-size:11px;color:var(--mint)}.subtle{background:transparent;color:var(--muted);font-size:12px;padding:8px 12px}#viewport{flex:1;overflow:auto;position:relative;cursor:grab;touch-action:none;background:#14131e;scrollbar-width:thin;scrollbar-color:#635066 #191721}#viewport.dragging{cursor:grabbing}#room{position:relative;width:1440px;height:870px;background:radial-gradient(ellipse at 50% 45%,#44334a,#181623);background-image:url('assets/salon.webp');background-size:1440px 870px;isolation:isolate}.wall-sign{position:absolute;left:495px;top:55px;width:450px;text-align:center;color:#fba8c4;transform:rotate(-1deg);text-shadow:0 0 10px #ff799a,0 0 35px #d05b92}.wall-sign>span{font:12px monospace;letter-spacing:8px}.wall-sign b{display:block;font:italic 800 57px Georgia;letter-spacing:4px;line-height:1.15}.wall-sign small{font:9px monospace;letter-spacing:3px;color:#86e8de;text-shadow:0 0 8px #55d3cc}.wall-poster{position:absolute;top:155px;left:70px;transform:rotate(-6deg);border:4px solid #c8a985;background:#382b4a;padding:18px 15px;font:18px Georgia;line-height:1.3;color:#e9c998}.wall-poster b{color:#fa99b6}.wall-poster span{display:block;font:9px monospace;margin-top:14px}.exit-sign{position:absolute;right:100px;top:92px;border:2px solid #83b29b;background:#304d43;color:#c7e2bc;font:12px monospace;padding:6px 12px;box-shadow:0 0 15px #6ab58730}.floor-mark{position:absolute;left:520px;top:725px;transform:rotateX(45deg);color:#d8b69730;font:bold 22px monospace;letter-spacing:4px}.bench{position:absolute;left:90px;top:650px;width:190px;height:38px;background:#844853;border-radius:10px;box-shadow:0 14px 0 #3b2737,0 25px 15px #0008;display:flex;justify-content:space-around;align-items:center}.friends{position:absolute;left:335px;top:665px;display:flex;align-items:center;gap:12px}.friends .avatar{width:45px;height:55px;border-radius:20px 20px 13px 13px;box-shadow:0 16px 15px #0006}.friend-label{position:absolute;top:72px;left:-35px;white-space:nowrap;background:#171622d9;padding:7px 12px;border-radius:5px;font-size:11px;color:#ccc2d6}.room-footer{display:flex;align-items:center;justify-content:space-between;padding:13px 24px;gap:10px;font-size:11px;color:var(--muted);border-top:1px solid #ffffff15;background:#181723}.key{font-style:normal;color:var(--gold);margin-right:6px}#chat-toggle{display:none}#chat{display:flex;flex-direction:column;min-height:0;background:#1b1a27;border-left:1px solid #ffffff14}.chat-head{padding:25px 22px 16px}.chat-head h2{font-size:17px;font-weight:600;margin:9px 0 0}.chat-head .eyebrow{font-size:8px}.people{display:flex;gap:7px;align-items:center;border-bottom:1px solid #ffffff0c;padding:0 22px 20px}.people>span:last-child{font-size:11px;color:var(--muted)}#messages{overflow:auto;padding:16px 20px;flex:1}.chat-date{text-align:center;font-size:8px;letter-spacing:1.3px;color:#80798f;margin-bottom:25px}article{display:flex;gap:10px;margin:20px 0}article b{font-size:12px;color:#d1b5d5}article time{margin-left:10px;font-size:9px;color:#777086}article p{font-size:12px;line-height:1.7;margin:5px 0 0;color:#cdc8d8}.chat-event{font-size:10px;color:var(--mint);text-align:center;padding:10px;background:#79e0c308;border:1px dashed #79e0c325;border-radius:7px}#chat-form{display:flex;margin:12px 16px 0;padding:4px;background:#12121b;border:1px solid #ffffff16;border-radius:10px}input{width:100%;min-width:0;background:none;border:0;color:var(--ink);padding:10px;font-size:12px;outline:none}#chat-form button{color:var(--mint);border:0}.chat-note{font-size:9px;color:#787184;text-align:center;margin:10px 8px 17px}#chat-close{display:none}.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
/* Muebles independientes del decorado; sus etiquetas conservan la legibilidad. */
.machine{position:absolute;width:154px;padding:0;background:none;border:0;border-radius:0;filter:drop-shadow(0 20px 10px #0009);color:var(--accent);text-align:center;transition:filter .2s,transform .2s}.machine:hover{background:none;border:0;filter:drop-shadow(0 0 12px var(--accent));transform:translateY(-4px)}.cabinet{position:relative;width:140px;height:260px;margin:auto;perspective:600px;background:linear-gradient(90deg,#14151b 0%,#33303b 8%,#181820 92%,#080b14 100%);border:3px solid #101119;border-left:7px solid var(--accent);border-right:6px solid var(--accent);border-radius:7px 7px 2px 2px;box-shadow:inset 2px 0 3px #fff2,9px 4px 0 #171623}.marquee{position:absolute;inset:5px 4px auto;height:40px;border:2px solid #0c1018;background:linear-gradient(120deg,#172034,#302947);display:grid;place-items:center;font:900 11px monospace;letter-spacing:.8px;line-height:1.05;color:var(--accent);text-shadow:0 0 9px var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent),transparent 75%)}.crt{position:absolute;top:57px;left:8px;right:8px;height:107px;background:#050914;border:6px solid #090b11;box-shadow:0 0 0 2px #4b4051,inset 0 0 20px #000;border-radius:7px;overflow:hidden}.crt canvas{width:100%;height:100%;image-rendering:pixelated}.crt:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,#0003 3px);pointer-events:none}.deck{position:absolute;top:170px;left:-6px;right:-6px;height:33px;background:linear-gradient(#777080,#302b40);border:2px solid #080c13;border-bottom:5px solid #15101c;transform:rotateX(20deg)}.stick{position:absolute;left:25px;top:-9px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 30% 22%,#ffc6a0,#e0545e 40%,#7b152b 90%);box-shadow:0 7px 0 -4px #ddd,0 12px 0 0 #141621}.deck:after{content:'● ●';color:#eda654;position:absolute;right:15px;top:0;font-size:17px;text-shadow:0 2px 0 #502e2d}.coin-slot{position:absolute;top:216px;left:43px;width:34px;height:25px;border:2px solid #716e78;background:#1b1820;font:8px monospace;display:grid;place-items:center;color:#f8ab73}.coin-slot:before{content:'';width:16px;height:3px;background:#050508}.cabinet:after{content:'USUJUEGOS';position:absolute;bottom:3px;width:100%;left:0;font:6px monospace;letter-spacing:2px;color:#8f8599}.machine-status{display:inline-block;margin-top:12px;padding:6px 11px;background:#141520ed;border:1px solid #ffffff22;border-radius:20px;font-size:10px;color:var(--mint);white-space:nowrap}.machine.occupied .machine-status{color:var(--pink)}.player-label{position:absolute;left:50%;transform:translateX(-50%);top:-45px;background:#151420ee;border:1px solid #b47cb96b;border-radius:8px;padding:6px 10px;color:#f5d3e6;white-space:nowrap;font-size:11px;display:flex;gap:6px;align-items:center}.player-label .avatar{width:22px;height:22px;font-size:11px;border-radius:7px}.spectators{position:absolute;right:-12px;bottom:49px;background:#282538;padding:4px 7px;border-radius:8px;font-size:9px;color:#e8c2f3;border:1px solid #ffffff20}
/* @cpi 2026-10-09 19:10: portada y crédito de prueba separados de una partida activa. */
dialog{color:var(--ink);background:#201c2c;border:1px solid #85718c;border-radius:18px;box-shadow:0 30px 100px #000a;max-width:calc(100vw - 24px)}dialog::backdrop{background:#090814c9;backdrop-filter:blur(5px)}.close{position:absolute;right:14px;top:12px;width:40px;height:40px;padding:0;font-size:25px;z-index:5}#preview{width:740px;padding:40px;overflow:hidden;background:radial-gradient(ellipse at 75% 35%,#473355,#191925 70%)}.preview-copy{width:46%;padding-top:24px}.preview-copy h2{font-size:35px;line-height:1.1;letter-spacing:-1px;margin:15px 0;color:var(--accent)}.preview-copy p{font-size:14px;color:#c3bace;line-height:1.8}.prototype-note{font-size:10px!important;color:#95879f!important;margin-top:20px}#preview-cabinet{position:absolute;right:65px;top:65px;transform:scale(1.35);transform-origin:top center;filter:drop-shadow(0 0 20px #0008);pointer-events:none}.preview-actions{display:flex;gap:15px;align-items:center;margin-top:65px}.primary{background:var(--gold);color:#271a13;border:0;font-weight:700;padding:15px 22px;box-shadow:0 3px 0 #855a31}.primary:hover{background:#f2cd90}.preview-actions .primary{flex:1}#coin-drop{position:absolute;right:108px;top:355px;width:50px;height:50px;animation:insert .7s ease-in forwards}@keyframes insert{from{transform:translate(0,65px) scale(1.5);opacity:1}to{transform:translate(0,0) scale(.1);opacity:0}}#info{width:510px;padding:35px}#info h2{margin:12px 0 22px}#info-content{line-height:1.8;color:#c9bfd2}#info-content li{margin:12px 0}#play{padding:20px;text-align:center;width:460px}#play .play-head{display:flex;gap:12px;align-items:center;padding:0 45px 15px 0;font-size:11px}#play-mode{font-size:8px;color:var(--muted)}#game{width:min(100%,330px);max-height:58dvh;object-fit:contain;background:#000;image-rendering:pixelated}.controls{display:flex;justify-content:center;gap:14px;margin-top:14px;touch-action:none}.controls button{width:64px;height:52px;background:linear-gradient(#7d4260,#472738);box-shadow:0 4px 0 #130d19}.controls #fire{width:130px;background:linear-gradient(#ffb98b,#d86a73);color:#34131a;font-size:11px;font-weight:bold}#play p,#play small{color:var(--muted);font-size:10px}#game-result{background:#211d2de8;position:absolute;top:30%;left:25px;right:25px;padding:20px}#game-result[hidden]{display:none}#game-result .primary{font-size:12px}
@media(max-width:1100px){.layout{grid-template-columns:72px minmax(0,1fr) 270px}.top{padding:0 18px}.prototype{max-width:170px;font-size:8px}.room-header{padding:20px}.room-meta{display:none}h1{font-size:22px}}@media(max-width:760px){.top{height:65px;padding:0 12px;gap:12px}.brand{font-size:22px;gap:7px}.brand img{width:35px;height:40px}.brand small{font-size:6px;letter-spacing:1px}.prototype{position:fixed;bottom:3px;left:10px;max-width:none;z-index:5;font-size:7px;pointer-events:none}.account{margin-left:auto;gap:7px;font-size:11px}.account>.avatar,.account>b:last-child{display:none}.account .coin{width:25px;height:25px;font-size:11px}.layout{height:calc(100dvh - 65px);grid-template-columns:1fr;grid-template-rows:1fr 56px}.rail{grid-row:2;flex-direction:row;padding:0 4px;justify-content:space-around;gap:0;border-top:1px solid #ffffff18}.rail button{padding:4px 12px;font-size:8px}.rail button i{font-size:20px;margin:0}.rail-bottom{display:none}main{grid-row:1}.room-header{padding:12px 16px}h1{font-size:21px}.room-header p{font-size:10px}.eyebrow{font-size:8px}#room{width:1152px;height:696px;background-size:1152px 696px}#room>*{transform-origin:0 0}#machines{transform:scale(.8)}.wall-sign{left:396px;top:44px;transform:scale(.8)}.wall-poster{left:56px;top:124px;transform:scale(.8) rotate(-6deg)}.exit-sign{top:73px;right:80px;transform:scale(.8)}.bench{top:520px;left:72px;transform:scale(.8)}.friends{top:532px;left:268px;transform:scale(.8)}.floor-mark{top:580px;left:416px;transform:scale(.8)}.room-footer{padding:10px 12px 14px;font-size:9px}.room-footer>span:nth-child(2){display:none}#chat-toggle{display:block;font-size:10px;padding:7px 10px;color:var(--mint)}#chat-toggle b{background:var(--pink);color:#281625;border-radius:50%;padding:1px 5px;margin-left:4px}#chat{display:none;position:fixed;right:0;bottom:0;width:100%;height:min(80dvh,620px);z-index:10;border-radius:20px 20px 0 0;box-shadow:0 -20px 60px #000b}#chat.open{display:flex}#chat-close{display:block;position:absolute;right:16px;top:16px;font-size:20px}.chat-head{padding:22px}.people{padding-bottom:12px}#preview{padding:25px 22px}.preview-copy{width:100%;padding-top:15px;padding-right:115px;min-height:240px}.preview-copy h2{font-size:25px}.preview-copy p{font-size:12px;line-height:1.5}#preview-cabinet{right:8px;top:87px;transform:scale(.78)}.preview-actions{margin-top:14px;flex-direction:column}.preview-actions button{width:100%}#coin-drop{right:45px;top:245px}#play{padding:16px}.controls{gap:10px}#play .play-head{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* @cpi 2026-10-09 19:38: identificación central y avisos de conexión legibles, sin datos de ejemplo. */
#login{width:420px;padding:35px}#login h2{font-size:28px}#login p{font-size:13px;color:#c0b3ce;line-height:1.6}#login label{display:block;font-size:12px;margin:16px 0}#login input{display:block;border:1px solid #ffffff30;border-radius:8px;margin-top:8px;font-size:16px;padding:12px}#login-form>.primary{width:100%;margin-top:10px}#status{position:fixed;top:82px;left:50%;transform:translateX(-50%);background:#352d46;color:#f5ddb4;z-index:20;font-size:12px;border-radius:8px;padding:10px 20px;pointer-events:auto;cursor:pointer}#status:empty{display:none}#play .controls[hidden]{display:none}