/* @cpi 2026-10-12 18:00: reservar siempre el hueco del display; los mirones no cambian la geometria de juego. */
/* @cpi 2026-10-11 01:00: arte de distribucion optimizado; originales de diseno conservados. */
/* @cpi 2026-10-10: salón de 2.400 × 1.750; tres veces la superficie anterior y zona social central. */
#room{width:2400px;height:1750px;background-size:2400px 1750px;background-color:#211a2a}.wall-sign{left:975px;top:35px;transform:none}.wall-sign b{font-size:65px}.wall-poster,.bench{display:none}.exit-sign{right:85px;top:130px;transform:none}.floor-mark{left:860px;top:1650px;transform:none}#machines{transform:none}.room-decor{position:absolute;inset:0;pointer-events:none}.classics-neon{position:absolute;left:850px;top:200px;width:700px;text-align:center;color:#baf0e0;font:12px monospace;letter-spacing:6px;text-shadow:0 0 12px #5aecbe}.crt video{display:block;width:100%;height:100%;object-fit:contain;background:#050711;image-rendering:pixelated}.screen-demo{position:absolute;bottom:2px;right:3px;font:5px monospace;letter-spacing:1px;color:#fff9;z-index:1}.poster{position:absolute;top:40px;width:205px;height:180px;border:7px solid #c8bba0;outline:2px solid #322839;padding:13px;box-shadow:4px 8px 10px #0008;text-align:center;overflow:hidden}.poster small,.poster span{font:8px monospace;letter-spacing:2px;display:block}.poster strong{font:bold italic 27px/1.05 sans-serif;display:block;margin-top:10px}.poster i{display:block;font:36px monospace}.poster-race{left:165px;transform:rotate(-4deg);background:linear-gradient(145deg,#d4748b,#623569 65%,#252355);color:#ffe0ab}.poster-race i{color:#ffd579}.poster-space{right:225px;transform:rotate(3deg);background:radial-gradient(circle at 55% 70%,#66a6b0,#27364f 50%,#151326);color:#b5e6e8}.poster-space i{color:#fcd895}.wall-clock{position:absolute;left:640px;top:63px;width:80px;height:80px;border:6px solid #dfaa75;border-radius:50%;background:repeating-conic-gradient(#343047 0deg 3deg,#ede1bd 3deg 30deg);box-shadow:0 4px 12px #0008}.wall-clock:after{content:'';position:absolute;inset:7px;border-radius:50%;background:#e6dbbe}.wall-clock i,.wall-clock b{position:absolute;left:32px;top:15px;width:3px;height:23px;background:#24243c;z-index:1;transform-origin:bottom}.wall-clock b{transform:rotate(120deg);height:19px;top:19px}.wall-record{position:absolute;top:75px;width:90px;height:90px;border-radius:50%;background:repeating-radial-gradient(#171725 0 3px,#302937 4px 5px);border:2px solid #0f101a;box-shadow:0 5px 10px #0009}.wall-record:after{content:'45';position:absolute;inset:28px;border-radius:50%;display:grid;place-items:center;background:#c26f88;color:#272132;font:10px monospace}.record-one{left:785px}.record-two{right:650px}.record-two:after{background:#6ba0a0}.neon-light{position:absolute;top:184px;width:310px;height:4px;background:#fc99cf;box-shadow:0 0 8px #ff70bf,0 0 28px #ff70bf,0 8px 45px #fa61a6;border-radius:6px}.light-a{left:455px}.light-b{right:440px;background:#7df1de;box-shadow:0 0 8px #7df1de,0 0 30px #7df1de}.lounge{position:absolute;left:750px;top:755px;width:800px;height:370px}.lounge-rug{position:absolute;inset:-35px -30px -10px;transform:rotate(-2deg);border:9px double #946278;background:repeating-linear-gradient(35deg,#4d334f 0 30px,#67435d 30px 32px,#47314b 32px 64px);border-radius:22px;box-shadow:0 14px 32px #0008,inset 0 0 70px #171227}.lounge-sign{position:absolute;top:-12px;left:100px;right:100px;text-align:center;font:10px monospace;letter-spacing:3px;color:#ddacbe}.sofa{position:absolute;top:65px;width:210px;height:190px;border-radius:40px 40px 18px 18px;border:12px solid #78364f;background:linear-gradient(#b75b75 0 40%,#742d47 45%,#bf647b 50%,#83364f 92%,#45283e);box-shadow:inset 0 5px 5px #e2a0a550,0 14px 0 #3b2033,0 26px 24px #0009}.sofa:before,.sofa:after{content:'';position:absolute;top:38px;bottom:4px;width:26px;border-radius:16px;background:linear-gradient(90deg,#59293f,#c07384,#77364d);box-shadow:2px 3px 6px #2d162c}.sofa:before{left:-18px}.sofa:after{right:-18px}.sofa i{position:absolute;top:14px;width:4px;height:40px;background:#73324766;border-radius:50%}.sofa i:nth-child(1){left:38px}.sofa i:nth-child(2){left:92px}.sofa i:nth-child(3){left:142px}.sofa-left{left:20px;transform:rotate(-9deg)}.sofa-right{right:20px;transform:rotate(9deg)}.coffee-table{position:absolute;left:280px;top:90px;width:240px;height:160px;border:8px solid #bc8c59;border-radius:34px;background:repeating-linear-gradient(3deg,#6d472f 0 3px,#785438 4px 9px);box-shadow:0 13px #3d2c2a,0 30px 20px #0009,inset 0 0 0 2px #e4b678}.magazine{position:absolute;left:15px;top:20px;width:87px;height:103px;transform:rotate(-14deg);background:linear-gradient(150deg,#f2d191 40%,#df8b5e 41%,#36365a);color:#952b40;border:3px solid #d4bd85;padding:6px;font:bold 12px monospace;box-shadow:4px 3px 3px #0005}.magazine b{font-size:17px;display:block}.magazine small{font:6px monospace;display:block;margin-top:28px;color:#fff2c7}.soda{position:absolute;right:26px;top:13px;width:32px;height:50px;background:linear-gradient(90deg,#813648,#e27b7b,#a94259);border-radius:8px 8px 10px 10px;transform:rotate(12deg);box-shadow:4px 6px 4px #0006}.soda:before{content:'';position:absolute;top:-2px;left:0;width:32px;height:8px;border-radius:50%;background:#c0c8b7}.soda i{position:absolute;left:20px;top:-16px;height:26px;width:3px;transform:rotate(8deg);background:#faf0c9}.cassette{position:absolute;right:17px;bottom:20px;width:75px;height:40px;background:#282539;border:3px solid #e0bc78;color:#edbb81;font:8px monospace;transform:rotate(15deg);text-align:center;padding-top:3px;box-shadow:3px 4px 3px #0007}.plant{position:absolute;font:130px Georgia;color:#607c61;text-shadow:-12px -12px #345946,10px 6px #42654e;top:-105px}.plant:after{content:'';position:absolute;width:54px;height:48px;background:linear-gradient(90deg,#754939,#c78961,#6f4738);left:18px;top:105px;clip-path:polygon(0 0,100% 0,83% 100%,17% 100%)}.plant-a{left:-100px}.plant-b{right:-105px}.jukebox{position:absolute;left:420px;top:780px;width:155px;height:255px;background:linear-gradient(90deg,#4a3035,#ba8560 15%,#422c38 50%,#b77b59 85%,#362536);border:6px solid #5d4043;border-radius:75px 75px 10px 10px;box-shadow:10px 17px 13px #0009}.jukebox-arch{position:absolute;inset:7px 8px 70px;border-radius:65px 65px 8px 8px;border:8px double #f3bc82;box-shadow:0 0 12px #e58477,inset 0 0 12px #df769c;background:linear-gradient(#273346,#141828);text-align:center;padding-top:20px;color:#a6eddd}.jukebox-arch span{display:block;font:45px Georgia;text-shadow:0 0 8px #82d6b3}.jukebox-arch strong{display:block;font:13px Georgia;color:#f5c888;margin-top:8px}.jukebox-arch small{font:6px monospace}.jukebox-grille{position:absolute;bottom:14px;left:22px;right:22px;height:40px;background:repeating-linear-gradient(#161b29 0 3px,#93705d 3px 5px);border:3px solid #c18e63;border-radius:10px}.snack-machine{position:absolute;right:380px;top:785px;width:150px;height:245px;background:linear-gradient(90deg,#273843,#60757b 10%,#33424e 90%,#131e30);border:6px solid #202b39;box-shadow:12px 15px 14px #0009;padding:12px}.snack-machine strong{display:block;color:#f29f91;background:#261e30;text-align:center;padding:9px 0;font:12px monospace;border:2px solid #957889}.snack-machine div{margin-top:15px;background:#151f2c;border:4px solid #70818b;font:bold 23px/1.5 monospace;color:#c79a6e;text-align:center;box-shadow:inset 0 0 16px #000}.snack-machine small{display:block;margin-top:15px;font:7px monospace;color:#b5c3bc}.floor-emblem{position:absolute;top:1130px;left:870px;width:570px;text-align:center;font:italic bold 55px Georgia;color:#ad768f55;transform:rotate(-3deg);border:3px solid #ad768f25;padding:12px;border-radius:50%}.floor-emblem span{display:block;font:13px monospace;letter-spacing:5px}.floor-emblem small{font:9px monospace}.floor-arrow{position:absolute;left:1170px;top:615px;color:#bdaf9760;text-align:center;font:10px monospace;letter-spacing:3px}.floor-arrow b{display:block;font:45px Georgia}
@media(max-width:760px){#room{width:2400px;height:1750px;background-size:2400px 1750px}#machines{transform:none}.wall-sign{left:975px;top:35px;transform:none}.floor-mark{left:860px;top:1650px;transform:none}.room-header p{font-size:10px}}
/* @cpi 2026-10-10: los pies de los muebles llegan al suelo; el decorado no estira la pared hasta las butacas. */
#room{background-size:2400px 1000px;background-repeat:no-repeat}#room:before{content:'';position:absolute;left:0;right:0;top:525px;bottom:0;z-index:-1;border-top:4px solid #7be7dc;box-shadow:0 -4px 20px #5fdddb66,inset 0 40px 85px #070e2299;background-image:linear-gradient(#25213670,#141221aa),repeating-conic-gradient(#38545b 0% 25%,#283a45 0% 50%);background-size:auto,100px 100px}.lounge-rug{background:repeating-linear-gradient(35deg,#4d334f 0 30px,#67435d 30px 32px,#47314b 32px 64px)}

/* @cpi 2026-10-10 20:00: arte raster completo y monitores independientes; no se dibujan muebles genéricos encima. */
.machine{width:200px}.cabinet.illustrated-cabinet{width:auto;height:var(--cab-height);aspect-ratio:var(--cab-ratio);border:0;border-radius:0;background:none;box-shadow:none;perspective:none;overflow:visible}.illustrated-cabinet:after{display:none}.cabinet-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.art-screen{position:absolute;overflow:hidden;border-radius:2px;background:#000;box-shadow:inset 0 0 3px #000;pointer-events:none}.art-screen video{width:100%;height:100%;display:block;object-fit:contain;background:#000;image-rendering:pixelated}.art-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#b7e2ff10,transparent 40%);box-shadow:inset 0 0 3px #000}.machine-status{position:relative;display:inline-block;background:#101521dc;padding:5px 8px;border:1px solid #90b1b332;border-radius:4px;font-size:8px}.machine:hover{filter:drop-shadow(0 0 9px #79dbce77)}#preview-cabinet{right:35px;top:30px;transform:none}#preview-cabinet .illustrated-cabinet{height:390px}.preview-copy{min-height:335px}.preview-actions{margin-top:24px}
@media(max-width:760px){#preview-cabinet{right:4px;top:95px;transform:none}#preview-cabinet .illustrated-cabinet{height:235px}.preview-copy{min-height:310px;padding-right:125px}.preview-actions{margin-top:14px}}

/* @cpi 2026-10-10 20:10: el rotulo de la pared queda por encima de las marquesinas. */
.classics-neon{top:155px}

/* @cpi 2026-10-10 20:30: la habitación ocupa toda la altura; los controles quedan fuera del área que hace panning. */
.layout{height:100dvh;grid-template-columns:88px minmax(0,1fr) 310px;grid-template-rows:minmax(0,1fr)}
main{position:relative;min-height:0}#viewport{height:100%;min-height:0;flex:1}
/* @cpi 2026-10-10 14:27: nick y usuros alineados con el extremo derecho de la pantalla. */
.top{position:fixed;z-index:4;top:12px;left:100px;right:12px;height:auto;padding:0;border:0;background:none;gap:12px;pointer-events:none;justify-content:space-between}
.top .brand,.top .account{pointer-events:auto;background:#111723db;border:1px solid #bbdcd32b;border-radius:12px;box-shadow:0 4px 15px #0004;backdrop-filter:blur(8px)}
.top .brand{padding:5px 9px;font-size:18px;gap:6px}.top .brand img{width:32px;height:36px}.top .brand small{display:none}.top .prototype{display:none}
.top .account{align-self:flex-start;padding:8px 12px;font-size:12px;gap:8px;margin-left:auto}.top .account .avatar,.top .account .coin{display:none}
.room-header{position:absolute;z-index:3;top:70px;right:12px;padding:0;background:none;pointer-events:none}.room-header>div:first-child{display:none}
.room-meta{display:flex;flex-direction:row;align-items:center;gap:8px;pointer-events:auto;padding:5px 8px;border:1px solid #bbdcd32b;border-radius:10px;background:#111723de;backdrop-filter:blur(8px);box-shadow:0 4px 12px #0004}.room-meta>span{font-size:10px}.room-meta button{font-size:11px;color:#e5e3d6}
.room-footer{position:absolute;z-index:3;right:12px;bottom:12px;padding:0;border:0;background:none;pointer-events:none}.room-footer>span{display:none}.room-footer button{pointer-events:auto;background:#111723ed;box-shadow:0 4px 12px #0005}
.rail{grid-row:1;grid-column:1;overflow-y:auto}.rail-bottom{display:none}main{grid-row:1;grid-column:2}#chat{grid-row:1;grid-column:3}.chat-note{display:none}#chat-form{margin-bottom:14px}
@media(max-width:1100px){
 .layout{grid-template-columns:72px minmax(0,1fr)}.top{left:84px;right:12px}
 #chat{display:none;position:fixed;right:0;top:0;bottom:0;width:min(370px,calc(100vw - 72px));height:100dvh;z-index:10;border-radius:0;box-shadow:-15px 0 40px #0008}
 #chat.open{display:flex}#chat-close{display:block;position:absolute;right:12px;top:12px}#chat-toggle{display:block;color:var(--mint);font-size:12px}
}
@media(max-width:760px){
 .layout{height:100dvh;grid-template-columns:56px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .rail{flex-direction:column;justify-content:flex-start;gap:10px;padding:12px 3px;border-top:0}.rail button{padding:10px 1px;font-size:8px}.rail button i{font-size:23px;margin-bottom:5px}
 .top{left:64px;right:8px;top:max(8px,env(safe-area-inset-top));gap:6px}.top .brand{padding:4px;background:#111723c9}.top .brand>span{display:none}.top .brand img{width:30px;height:33px}
 .top .account{padding:7px 9px;flex-wrap:wrap;justify-content:flex-end;max-width:210px;gap:5px;font-size:11px}.top .account>b:last-child{display:block;font-size:10px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .room-header{top:62px;right:8px}.room-meta{gap:4px;padding:3px 6px}.room-meta>span{font-size:9px}.room-meta button{font-size:10px;padding:7px}
 .room-footer{right:8px;bottom:max(8px,env(safe-area-inset-bottom))}#chat{width:calc(100vw - 56px);height:100dvh}#chat-toggle{padding:9px 11px}
}

/* @cpi 2026-10-10 21:00: cabinet completo, monedero pulsable y entrada física de la moneda. */
#preview{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:6px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
#preview::backdrop{background:#050711b8;backdrop-filter:blur(3px)}
#preview .preview-copy,#preview .preview-actions,#preview>#coin-drop{display:none}
#preview #preview-cabinet{position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;transform:none;pointer-events:auto;filter:drop-shadow(0 16px 32px #000a)}
#preview #preview-cabinet .illustrated-cabinet{height:min(calc(100dvh - 12px),calc((100vw - 12px)/var(--cab-ratio)));width:auto;flex:none;margin:0;animation:cabinet-approach .4s ease-out}
#preview>.close{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));background:#101623e8;border:1px solid #e6c77b88;color:#fff;box-shadow:0 3px 12px #0008}
#preview .coin-target{position:absolute;z-index:3;padding:0;background:transparent;border:0;border-radius:8%;cursor:pointer;overflow:visible;box-shadow:0 0 18px #ffc66b30;transition:box-shadow .2s}
#preview .coin-target:hover,#preview .coin-target:focus-visible{background:#ffbe4a0b;box-shadow:0 0 25px #ffc66b99,inset 0 0 10px #ffcc7340;outline:2px solid #ffce7870;outline-offset:2px}
.insert-prompt{pointer-events:auto;cursor:pointer;border:0;border-radius:0;width:100%;position:absolute;left:0;right:0;top:40%;text-align:center;color:#ffe2a0;text-shadow:0 2px #351d08,0 0 12px #e5a141;background:#000b;padding:10px 0;font:bold clamp(12px,2.1vh,23px)/1.3 monospace;letter-spacing:2px}.insert-prompt small{display:block;font-size:.55em;letter-spacing:2px;margin-top:5px}
.inserting .insert-prompt{opacity:0}.inserting .coin-target{box-shadow:0 0 35px #ffd07eaa}
.inserting-coin{position:absolute;left:23%;top:10%;width:clamp(30px,6vh,64px);aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;border:4px double #fff0af;background:radial-gradient(circle at 28% 22%,#fff8cf,#eec365 40%,#a36b20 80%,#f9d988);color:#6a3c0c;box-shadow:3px 3px 0 #80531b,0 0 20px #ffe3a755,inset 0 0 0 2px #ad7729;pointer-events:none;z-index:5}.inserting-coin b{font:bold clamp(18px,3vh,32px) Georgia;line-height:1}.inserting-coin small{font:bold 6px monospace;letter-spacing:1px}
@keyframes cabinet-approach{from{opacity:0;transform:scale(.8) translateY(30px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#preview #preview-cabinet .illustrated-cabinet{animation:none}}

/* @cpi 2026-10-10 21:30: conjunto raster con perspectiva unificada; sustituye los muebles geométricos. */
.lounge{left:800px;top:700px;width:800px;height:534px;background:url('assets/optimized/lounge-retro.webp') center/contain no-repeat;filter:drop-shadow(0 14px 15px #0005)}.lounge>*{display:none}.floor-emblem{display:none}

/* @cpi 2026-10-10 22:00: escenario completo americano, con mobiliario y perspectiva integrados en la ilustración. */
/* @cpi 2026-10-10 16:50: retrato ochentero integrado en el cuadro izquierdo; fondo original conservado. */
#room{background-image:url('assets/optimized/salon-diner-poster-pepsi.webp');background-size:2400px 1750px;background-repeat:no-repeat}
#room:before,#room>.wall-sign,#room>.wall-poster,#room>.exit-sign,#room>.room-decor,#room>.floor-mark,#room>.bench{display:none}
#machines .machine{transform:scale(var(--room-scale,1));transform-origin:top center}#machines .machine:hover{transform:scale(var(--room-scale,1)) translateY(-3px)}

/* @cpi 2026-10-10 22:40: instrucción junto al punto de inserción y mueble ilustrado durante la partida. */
/* @cpi 2026-10-11 13:41: el cartel pertenece al boton de moneda y acepta el mismo clic o toque. */
.coin-instruction{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:max-content;max-width:230px;padding:7px 10px;margin-top:8px;background:#111722ed;color:#ffe1a3;border:1px solid #f0c576;border-radius:6px;font:bold 12px/1.3 sans-serif;box-shadow:0 3px 12px #0009;pointer-events:auto;cursor:pointer}.coin-instruction:before{content:'▲';display:block;color:#ffd47a}.inserting .coin-instruction{opacity:0}
dialog.artwork-game,dialog#play.artwork-game{padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.artwork-game .usu-puzzle-case{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(98vw,calc(94dvh * var(--case-ratio)));aspect-ratio:var(--case-ratio);border:0;border-radius:0;overflow:hidden;background:none;box-shadow:none;filter:drop-shadow(0 10px 25px #000a)}
.artwork-game .usu-puzzle-case:before{content:'';position:absolute;inset:0;background-image:var(--art);background-size:100% var(--art-height);background-repeat:no-repeat;pointer-events:none}
.artwork-game .usu-puzzle-marquee,.artwork-game footer,.artwork-game .help,#play.artwork-game>p,#play.artwork-game>small{display:none}
dialog.artwork-game .usu-puzzle-bezel{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);max-width:none;padding:0;margin:0;background:#000;box-shadow:none;overflow:hidden}
.artwork-game .usu-puzzle-bezel canvas,#play.artwork-game #game{width:100%;height:100%;max-height:none;object-fit:contain;display:block;background:#000}
.artwork-game header,.artwork-game .play-head{position:fixed;top:8px;right:10px;z-index:6;display:flex;gap:8px;padding:0!important}.artwork-game header b,.artwork-game .play-head>b,.artwork-game #play-mode{display:none}.artwork-game header .exit,.artwork-game .play-head .close{position:static}
.artwork-game header button,.artwork-game .play-head button{width:40px;height:40px;background:#111c2be8;border:1px solid #e6ca8a77;border-radius:8px;padding:0;font-size:23px}
.artwork-game .usu-puzzle-deck,.artwork-game .controls{position:absolute;left:12%;width:76%;top:var(--deck-y);height:calc(100% - var(--deck-y));margin:0;border:0;background:#101b36ad;border-radius:12px;display:flex;align-items:center;justify-content:space-around;backdrop-filter:blur(3px)}
.artwork-game .usu-puzzle-deck .joystick,.artwork-game .usu-puzzle-deck .shoot{height:100%;max-height:90px;width:100px}.artwork-game .usu-puzzle-deck b{font-size:9px;bottom:0}
#play.artwork-game .controls button{width:45px;height:45px;border-radius:50%;padding:0;background:radial-gradient(circle at 30% 25%,#ffa5a5,#bb1935 60%,#550c21);box-shadow:0 5px #470f20,0 8px 0 3px #111;flex:none}#play.artwork-game .controls #fire{width:80px;font-size:10px;background:radial-gradient(ellipse at 35% 25%,#fff6a0,#e5bd38 60%,#926322)}
#play.artwork-game #game-result{inset:10%;font-size:12px;z-index:5}.artwork-game .result{overflow:auto;max-height:100%;font-size:12px;gap:5px}.artwork-game .result button{padding:8px;font-size:11px}
@media(max-width:600px){.coin-instruction{font-size:10px;max-width:185px}.artwork-game .usu-puzzle-deck .joystick i{width:34px;height:34px;left:33px;top:0}.artwork-game .usu-puzzle-deck .shoot i{width:45px;height:28px;top:3px}.artwork-game .usu-puzzle-deck b{font-size:7px}#play.artwork-game .controls button{height:32px;width:32px}#play.artwork-game .controls #fire{width:66px}}

/* @cpi 2026-10-10 23:05: el ancho del mueble coincide con su arte, no con los 200px del boton contenedor. */
#machines .illustrated-cabinet{width:calc(var(--cab-height) * var(--cab-ratio));left:50%;transform:translateX(-50%);margin:0}

/* @cpi 2026-10-10 23:50: objetos decorativos independientes, sin capturar el panning. */
#room>.room-prop{position:absolute;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 8px 5px #0008)}

/* @cpi 2026-10-10 01:37: contacto de las patas con el suelo, sin sombra desplazada hacia abajo. */
#room>.room-prop[data-prop="cola"]{filter:none}
.cola-ground-contact{position:absolute;left:1338px;top:641px;width:134px;height:15px;border-radius:50%;background:radial-gradient(ellipse,#0009,transparent 70%);z-index:659;pointer-events:none}

/* @cpi 2026-10-10 02:55: tarjeta anclada al tablero. Avatar cuadrado reconocible sobre el cartel, sin tapar pantalla ni alterar el ancho del mueble. */
/* @cpi 2026-10-11 19:50: nick sin avatar, placa ni fondo; centrado en el torso real de cada silueta. */
.sample-player-card{position:absolute;top:var(--player-nick-y,45%);left:var(--player-nick-x,50%);translate:-50% -50%;width:100px;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;pointer-events:none;color:#fff;z-index:5;background:none;border:0;box-shadow:none}
.sample-player-card:after,.sample-player-portrait:after{display:none}
.sample-player-portrait{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;border-radius:3px;overflow:hidden}
.sample-player-portrait img{display:block;width:100%;height:100%;object-fit:contain}
/* @cpi 2026-10-11 20:00: nick granate sobre la silueta fosforita, sin sombra negra. */
/* @cpi 2026-10-11 21:10: pegatina de papel discreta, ajustada al nick y centrada en la espalda. */
.sample-player-card strong{font:700 13px/1.1 'Segoe UI',sans-serif;max-width:100%;box-sizing:border-box;padding:3px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#650b2b;text-shadow:none;background:#f2eedbd9;border:1px solid #78695466;border-radius:3px;box-shadow:0 1px 2px #0003,inset 0 0 0 1px #ffffff55}
/* @cpi 2026-10-10 02:08: cinco notas reutilizadas, animadas solo con transform y opacidad. */
.jukebox-music{position:absolute;pointer-events:none;user-select:none;overflow:visible}
.jukebox-music>span{position:absolute;left:calc(14% + var(--i)*16%);top:29%;font:700 27px/1 Georgia,serif;color:#ffe394;text-shadow:0 1px 3px #261223,0 0 7px #ffac4670;opacity:0;animation:jukebox-note-rise 4.5s linear infinite;animation-delay:calc(var(--i)*-.9s)}
.jukebox-music>span:nth-child(even){color:#97eeed;font-size:23px}
@keyframes jukebox-note-rise{0%{opacity:0;transform:translate(0,0) rotate(-12deg) scale(.75)}15%{opacity:.9}50%{opacity:.85;transform:translate(12px,-47px) rotate(9deg) scale(1)}85%{opacity:.45}100%{opacity:0;transform:translate(-6px,-100px) rotate(-7deg) scale(.85)}}
@media(prefers-reduced-motion:reduce){.jukebox-music>span{animation:none;opacity:.6;transform:translateY(calc(var(--i)*-8px))}}

/* @cpi 2026-10-10 02:20: marcador retro sobre el marquee, solo numeros; independiente de la tarjeta del jugador. */
.machine-score{position:absolute;left:50%;bottom:calc(100% + 5px);translate:-50% 0;width:146px;height:26px;background:#071018f5;border:1px solid #9fc8b963;border-radius:3px;box-shadow:0 2px 7px #0009;image-rendering:auto;pointer-events:none;z-index:6}

/* @cpi 2026-10-10 02:30: cercanas conservan 146x26; solo las ocho del fondo crecen un 12%. */
.machine-score{transform:none}
.machine-score.rear-score{width:164px;height:29px}

/* @cpi 2026-10-10 15:00: notas solo mientras suena la gramola; control fijo junto al centrado. */
.jukebox-music[hidden]{display:none!important}#room>.room-prop[data-prop="jukebox"]{cursor:pointer;pointer-events:auto}.room-music-credit{font:10px "Segoe UI",sans-serif;color:#b8c5c4}.room-meta{flex-wrap:wrap}

/* @cpi 2026-10-10 13:54: la gramola recibe pulsaciones reales, a diferencia de los objetos decorativos. */

/* @cpi 2026-10-10 13:58: rechazo visible sobre el mueble sin cerrar ni gastar otra moneda. */
#preview .coin-error{position:absolute;z-index:30;bottom:14px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;margin:0;padding:12px 18px;border:1px solid #f1bd70;border-radius:8px;background:#261e18f5;color:#fff1d7;text-align:center;font:600 15px/1.4 "Segoe UI",sans-serif;pointer-events:none}

/* @cpi 2026-10-10: control compacto y tactil del volumen de la gramola. */
.room-music-volume{display:flex;align-items:center;gap:5px;font:11px "Segoe UI",sans-serif;color:#e5e3d6}.room-music-volume input{width:85px;min-width:0;height:28px;padding:0;accent-color:#ecc775;cursor:pointer}.room-music-volume output{min-width:30px;font-variant-numeric:tabular-nums}

/* @cpi 2026-10-10 14:19: opciones ocultas inicialmente; panel superpuesto sin restar espacio al salon. */
.layout{grid-template-columns:0 minmax(0,1fr) 310px}
#community-rail{position:fixed;left:0;top:0;bottom:0;width:88px;z-index:20;padding-top:64px;background:#15141fed;box-shadow:8px 0 24px #0008}
#community-rail[hidden]{display:none}
#rail-toggle{position:fixed;left:10px;top:max(10px,env(safe-area-inset-top));z-index:21;width:44px;height:44px;padding:0;border:1px solid #bbdcd34d;border-radius:10px;background:#111723ed;color:#f0eadc;font:24px sans-serif;cursor:pointer}
.top{left:64px}
@media(max-width:1100px){.layout{grid-template-columns:0 minmax(0,1fr)}}

.rail:not(#community-rail){display:none}

/* @cpi 2026-10-10 14:21: chat oculto al entrar; en pantallas amplias ocupa columna solo al abrirlo. */
.layout{grid-template-columns:0 minmax(0,1fr)}
#chat:not(.open){display:none}
#chat-toggle{display:block;color:var(--mint);font-size:12px}
#chat-close{display:block;position:absolute;right:12px;top:12px}
@media(min-width:1101px){.layout:has(#chat.open){grid-template-columns:0 minmax(0,1fr) 310px}#chat.open{display:flex}}

/* @cpi 2026-10-10 14:24: salon despejado y controles accesibles en la modal de configuracion. */
.room-header{display:none}
#room-settings{width:min(440px,calc(100vw - 32px));padding:28px;color:var(--ink);background:#191b27;border:1px solid #bbdcd34d;border-radius:16px}
#room-settings::backdrop{background:#0009}
/* @cpi 2026-10-18 19:26: selector de idioma en Configuración. */
#room-settings .settings-language{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;font:14px "Segoe UI",sans-serif}#room-settings .settings-language select{min-height:32px;padding:0 8px;color:var(--ink);background:#232637;border:1px solid #bbdcd34d;border-radius:8px}
#room-settings h2{margin:0 40px 24px 0}
#room-settings .music-settings{display:flex;flex-direction:column;gap:24px}
#room-settings .room-music-volume{display:flex;gap:12px;align-items:center}
#room-settings .room-music-volume input{flex:1;min-width:80px}
#room-settings .room-music-credit{color:var(--mint);font-size:14px}

/* @cpi 2026-10-10 14:31: pistas discretas ancladas a los bordes visibles del salon. */
.room-pan-hints{position:absolute;inset:0;z-index:2;pointer-events:none;user-select:none}
.pan-hint{position:absolute;display:grid;place-items:center;width:24px;height:42px;border-radius:14px;background:#11172380;color:#f4ebd7b3;font:32px/1 Arial,sans-serif;text-shadow:0 1px 3px #000}
.pan-hint[hidden]{display:none}
.pan-left{left:7px;top:50%;transform:translateY(-50%)}
.pan-right{right:12px;top:50%;transform:translateY(-50%)}
.pan-up,.pan-down{left:50%;transform:translateX(-50%);width:42px;height:24px;font-size:27px}
.pan-up{top:7px}.pan-down{bottom:12px}

/* @cpi 2026-10-10 16:13: evitar recomponer filtros sobre el canvas cambiante; conservar sombra solo en el arte estático. */
.artwork-game .usu-puzzle-case{filter:none}
.artwork-game .usu-puzzle-case:before{filter:drop-shadow(0 10px 25px #000a)}
dialog.artwork-game::backdrop,.artwork-game .usu-puzzle-deck,.artwork-game .controls{backdrop-filter:none}
body:has(dialog.artwork-game[open]) #room *{animation-play-state:paused!important}

/* @cpi 2026-10-10 16:56: fondo con cabecera Pepsi-Cola vintage en el retrato lateral. */

/* @cpi 2026-10-10 17:22: pequeños distintivos del público, separados del avatar del jugador. */
.machine-watchers{position:absolute;left:50%;top:68%;transform:translateX(-50%);display:flex;z-index:7;pointer-events:none;filter:none}
.machine-watchers>span{width:26px;height:26px;margin-left:-3px;display:grid;place-items:center;background:#172c3c;border:2px solid #e8cb85;border-radius:50%;color:#fff;font:bold 12px sans-serif;box-shadow:0 2px 3px #0008}

/* @cpi 2026-10-10 17:30: estado de mirones visible dentro del cabinet, sin filtros de composicion. */
#play.artwork-game #play-mode{display:block;align-self:center;font:13px "Segoe UI",sans-serif;color:#ffe1a3;background:#111c2be8;padding:8px 12px;border-radius:8px}

.machine-watchers>span{position:relative;overflow:hidden}.machine-watchers img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* @cpi 2026-10-10 18:25: suelo ampliado con perspectiva continua; elimina el reflejo que doblaba las juntas. */
/* @cpi 2026-10-10 18:35: espacio para las tres filas tematicas inferiores, con suelo continuo. */
#room{height:3360px;background-image:url('assets/optimized/salon-diner-dirty.webp');background-size:2400px 3360px}
#room:before{display:none}

/* @cpi 2026-10-10 18:40: tablero limpio con mandos únicos, anclados al arte y con relieve convexo. */
.artwork-game .usu-puzzle-case{container-type:inline-size}
.artwork-game .usu-puzzle-deck,.artwork-game .controls{background:none;border-radius:0;box-shadow:none;left:19%;width:62%;align-items:center}
.artwork-game .usu-puzzle-deck .joystick,.artwork-game .usu-puzzle-deck .shoot{position:relative;width:34%;height:100%;max-height:none;padding:0;overflow:visible}
.artwork-game .usu-puzzle-deck .joystick:before{content:'';position:absolute;left:50%;bottom:24%;width:clamp(34px,8cqw,64px);height:clamp(13px,3cqw,24px);transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#35393c,#111419 65%,#030407);box-shadow:0 2px 0 #777b7a,0 5px 6px #0008}
.artwork-game .usu-puzzle-deck .joystick i{width:clamp(28px,6.5cqw,52px);height:clamp(28px,6.5cqw,52px);left:calc(50% - clamp(28px,6.5cqw,52px)/2);top:auto;bottom:43%;background:radial-gradient(circle at 30% 22%,#fff9ed 0%,#ffaea3 8%,#f44037 24%,#c20e22 57%,#760919 83%,#420712 100%);box-shadow:inset -2px -3px 5px #50051c66,1px 3px 3px #0005;z-index:2}
.artwork-game .usu-puzzle-deck .joystick i:after{content:'';position:absolute;left:42%;top:94%;width:16%;height:46%;background:linear-gradient(90deg,#42454b,#fafafa 40%,#b7bdc2 65%,#3a3d43);border-radius:0 0 3px 3px;z-index:-1}
.artwork-game .usu-puzzle-deck .shoot i{left:calc(50% - clamp(38px,9cqw,70px)/2);top:auto;bottom:32%;width:clamp(38px,9cqw,70px);height:clamp(23px,5.3cqw,41px);background:radial-gradient(ellipse at 34% 22%,#fffef0 0%,#fff7b1 14%,#f7d447 45%,#dfad18 78%,#b7790c 100%);border:1px solid #ffe9a2;box-shadow:inset 0 2px 2px #fff8,0 4px 0 #ac7312,0 7px 0 3px #242528,0 9px 4px 4px #0006}
.artwork-game .usu-puzzle-deck .shoot.pressed i,.artwork-game .usu-puzzle-deck .shoot.key-pressed i{transform:translateY(4px);box-shadow:inset 0 2px 2px #fff8,0 1px #ac7312,0 3px 0 3px #242528}
.artwork-game .usu-puzzle-deck b{font:700 clamp(7px,1.3cqw,10px)/1 Arial,sans-serif;bottom:7%;color:#fff6d8;text-shadow:0 1px 2px #000,0 0 4px #000}
#play.artwork-game .controls button{border:1px solid #ffb4a0;box-shadow:inset 0 2px 2px #fff8,0 4px #7c1623,0 7px 0 3px #202126,0 9px 4px #0008}
#play.artwork-game .controls #fire{background:radial-gradient(ellipse at 30% 22%,#fffef0,#fff2a1 16%,#f4cb3e 52%,#bd8614);border-color:#ffe9a2;box-shadow:inset 0 2px 2px #fff8,0 4px #a67512,0 7px 0 3px #202126}
#play.artwork-game .controls button:active{transform:translateY(4px)}
/* Asteroids ya dispone de una imagen limpia; conserva su control adicional de hiperespacio. */
.asteroids-controls{background:none!important}
.asteroids-fire i{background:radial-gradient(ellipse at 32% 22%,#fffef0,#fff2a1 16%,#f4cb3e 52%,#bd8614);border:1px solid #ffe9a2;box-shadow:inset 0 2px 2px #fff8,0 4px #a67512,0 7px 0 3px #202126}

/* @cpi 2026-10-10 18:45: la modal vertical no recorta los laterales; mandos dentro de la superficie inclinada. */
dialog.usu-puzzle.artwork-game{width:100vw;max-width:none;padding:0}
.artwork-game .usu-puzzle-deck,.artwork-game .controls{height:var(--deck-h)}

.asteroids-cabinet.expanded .asteroids-controls{background:#15222e!important}

/* @cpi 2026-10-10 19:25: Orbita tiene fondo y proporcion propios; no hereda los muebles de La Luna. */
#room[data-theme="orbita"]{height:2400px;background-image:url('assets/optimized/salon-orbita84-decor.webp');background-size:2400px 2400px}
/* @cpi 2026-10-10 20:00: muebles interactivos compartidos; solo cambia su ubicacion en Orbita. */
#room[data-theme="orbita"] .room-system-clock{display:none}
#room[data-theme="orbita"]>.room-prop[data-prop="jukebox"],#room[data-theme="orbita"]>.jukebox-music{left:490px!important;top:985px!important;z-index:1275!important}
#room[data-theme="orbita"]>.jukebox-music{z-index:1276!important}
#room[data-theme="orbita"]>.room-prop[data-prop="cola"]{left:1740px!important;top:1010px!important;z-index:1275!important}
#room[data-theme="orbita"]>.cola-ground-contact{left:1768px;top:1276px;z-index:1274}

/* @cpi 2026-10-10 19:05: monitor dentro del hueco del mueble completo, sin recortes ni halos añadidos. */
.artwork-game.puzzle-wide-screen .usu-puzzle-bezel{border:0;border-radius:5px;box-shadow:none}
.artwork-game.puzzle-wide-screen .usu-puzzle-case:before{filter:none}
.artwork-game.puzzle-wide-screen .usu-puzzle-deck{left:19%;width:62%;justify-content:space-between}

/* @cpi 2026-10-10 21:00: salida permanente en cabecera, independiente del desplazamiento del salon. */
#exit-room{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;border:1px solid #bbdcd34d;border-radius:9px;padding:9px 11px;background:#192329;color:var(--mint);cursor:pointer}
#exit-room[hidden]{display:none}
#exit-room:hover{background:#2c3d40}
@media(max-width:600px){#exit-room{padding:8px}#exit-room span{display:none}}

/* @cpi 2026-10-10 21:15: rincon central de descanso, sofa ancho entre gramola y refrescos. */
.orbita-sofa{display:none;position:absolute;left:700px;top:1010px;width:1020px;height:300px;object-fit:contain;pointer-events:none;z-index:1310}
#room[data-theme="orbita"]>.orbita-sofa{display:block}

/* @cpi 2026-10-10 19:30: tercer salon de comic, suelo continuo y encargado libre de maquinas. */
#room[data-theme="garaje"]{height:2400px;background-image:url('assets/optimized/salon-garaje-empty.webp');background-size:2400px 2400px}
/* @cpi 2026-10-10 23:28: reloj funcional del Garaje en hueco libre de la pared, sin capturar clics. */
#room[data-theme="garaje"] .room-system-clock{display:block;left:1450px!important;top:95px!important;width:104px!important;height:104px!important;border:5px solid #39322d;box-shadow:2px 4px 7px #0008;z-index:4;pointer-events:none}
#room[data-theme="garaje"]>.room-prop[data-prop="jukebox"],#room[data-theme="garaje"]>.jukebox-music{left:55px!important;top:480px!important;z-index:791!important}
/* @cpi 2026-10-11 19:55: notas delante del mueble, independientemente del orden de montaje. */
#room[data-theme="garaje"]>.jukebox-music{z-index:792!important}
#room[data-theme="garaje"]>.room-prop[data-prop="cola"]{left:1440px!important;top:1140px!important;z-index:1425!important}
#room[data-theme="garaje"]>.cola-ground-contact{left:1468px;top:1406px;z-index:1424}
.garaje-sleep{display:none;position:absolute;left:1855px;top:170px;width:130px;height:160px;pointer-events:none;z-index:1000}
#room[data-theme="garaje"]>.garaje-sleep{display:block}
.garaje-sleep i{position:absolute;bottom:0;left:20px;font:bold 42px Georgia,serif;color:#fff2d6;text-shadow:2px 2px #502b22;opacity:0;animation:garaje-snooze 3.6s ease-out infinite;animation-delay:calc(var(--i)*1.2s)}
@keyframes garaje-snooze{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.9}100%{opacity:0;transform:translate(65px,-120px) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.garaje-sleep{display:none!important}}

/* @cpi 2026-10-10 20:00: birras apoyadas junto a la pared derecha; Coca-Cola solo en los otros salones. */
/* @cpi 2026-10-10 23:50: acercar la nevera al encargado y ampliar el mueble manteniendo sus proporciones. */
.garaje-beer{display:none;position:absolute;left:1967px;top:302px;width:245px;height:388px;object-fit:contain;z-index:1120;pointer-events:none}
#room[data-theme="garaje"]>.garaje-beer{display:block}
#room[data-theme="garaje"]>.room-prop[data-prop="cola"],#room[data-theme="garaje"]>.cola-ground-contact{display:none}

/* @cpi 2026-10-10 20:10: ampliacion vertical del Garaje para las cuatro filas nuevas. */
/* @cpi 2026-10-10 20:04: pared frontal menor con carteles, puerta y encargado reducidos proporcionalmente. */
/* @cpi 2026-10-10 23:23: fondo con mayor definicion; conserva escala y geometria del Garaje. */
#room[data-theme="garaje"]{height:4800px;background-image:url('assets/optimized/salon-garaje-definido.webp');background-size:2400px 4800px}

/* @cpi 2026-10-10 20:35: dos mesas bajas en el hueco central y gramola a la pared izquierda. */
/* @cpi 2026-10-10 20:13: acercar las mesas a la primera fila y ajustar su profundidad visual. */
.garaje-tables{display:none;position:absolute;left:750px;top:700px;width:900px;height:450px;object-fit:contain;z-index:1150;pointer-events:none}
#room[data-theme="garaje"]>.garaje-tables{display:block}


/* @cpi 2026-10-10 19:45: tablero del mirón sin mandos, ocupado por avatar e información del jugador. */
.spectator-cabinet .usu-puzzle-deck,.spectator-cabinet .controls,.spectator-cabinet .asteroids-controls{visibility:hidden;pointer-events:none}
.spectator-cabinet #play-mode,.spectator-cabinet .help,.spectator-cabinet .asteroids-help{display:none!important}
.spectator-player{position:absolute;top:var(--deck-y,81%);left:50%;transform:translateX(-50%);max-width:80%;display:flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid #d9c18a99;border-radius:9px;background:#101923ed;color:#fff2d3;font:12px/1.2 Arial,sans-serif;pointer-events:none}
.spectator-player small,.spectator-player strong{display:block}.spectator-player small{font-size:8px;letter-spacing:1px;color:#d4c097}.spectator-player strong{font-size:16px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* @cpi 2026-10-18 18:02: «Jugar yo también» en la tarjeta del mirón; la tarjeta no recibe clics, el botón sí. */
.spectator-join{pointer-events:auto;margin-left:auto;flex-shrink:0;padding:6px 10px;border:0;border-radius:7px;background:#f0c563;color:#201a30;font:bold 12px/1.1 Arial,sans-serif;cursor:pointer;white-space:nowrap}.spectator-join[hidden]{display:none}
.spectator-avatar{position:relative;display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:6px;overflow:hidden;background:#344745;font-weight:bold;font-size:22px}.spectator-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.spectator-player{padding:3px 7px;gap:6px}.spectator-player strong{font-size:12px;max-width:150px}.spectator-avatar{width:29px;height:29px;flex-basis:29px}.asteroids-cabinet.expanded .spectator-player{top:auto;bottom:-75px}}

/* @cpi 2026-10-10 20:20: controles coherentes de Invaders y superficie tactil util en movil. */
#play.artwork-game .controls #left,#play.artwork-game .controls #right{display:none}
#play.artwork-game .controls #fire{width:34%;height:100%;background:none;border:0;box-shadow:none;transform:none}
.artwork-game .usu-puzzle-deck .joystick,.artwork-game .usu-puzzle-deck .shoot{touch-action:none;user-select:none}
@media(max-width:600px){
 .artwork-game .usu-puzzle-deck{min-height:44px}
 .artwork-game .usu-puzzle-deck .joystick,.artwork-game .usu-puzzle-deck .shoot{min-height:44px;min-width:64px}
 .artwork-game .usu-puzzle-deck .joystick i{width:34px;height:34px;left:calc(50% - 17px)}
 .artwork-game .usu-puzzle-deck .shoot i{width:48px;height:28px;left:calc(50% - 24px)}
 .asteroids-hyper{min-height:44px}
}

/* @cpi 2026-10-10 22:00: la nevera de cervezas permite abrirse como la de refrescos. */
#room[data-theme="garaje"]>.garaje-beer{pointer-events:auto;cursor:pointer}
#room>.garaje-beer:focus-visible{outline:2px solid #ffedb8}

/* @cpi 2026-10-10 23:57: letras legibles en el papel del mostrador, siguiendo su perspectiva. */
.garaje-price-sign{display:none;position:absolute;left:1756px;top:473px;width:80px;height:108px;box-sizing:border-box;padding:4px 2px;background:linear-gradient(105deg,#c69b63,#e0bc83 45%,#cfa46a);border:1px solid #76542f;color:#302518;font:700 13px/1.1 'Arial Narrow',Arial,sans-serif;text-align:center;transform:perspective(350px) rotateY(-12deg) skewY(7deg) rotate(-1deg);transform-origin:top left;z-index:610;pointer-events:none;box-shadow:inset 0 0 5px #86603b}
#room[data-theme='garaje']>.garaje-price-sign{display:flex;flex-direction:column;justify-content:space-around}
.garaje-price-sign>*{letter-spacing:0;white-space:nowrap;line-height:1.1;flex-shrink:0;margin:0}.garaje-price-sign strong{font-size:14px}.garaje-price-sign b{font-size:11px;margin-top:3px}
/* @cpi 2026-10-11 00:01: perspectiva del mostrador e imperfecciones de tinta para integrar el cartel antiguo. */
.garaje-price-sign{color:#493722;border-color:#85643d;filter:blur(.25px)}
.garaje-price-sign>*{opacity:.82;text-shadow:.3px .4px .5px #755836}
.garaje-price-sign strong:nth-of-type(2){transform:rotate(-1.5deg)}
.garaje-price-sign b{transform:rotate(.8deg)}
.garaje-price-sign::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(8deg,transparent 0 7px,#d1ae7938 8px,transparent 9px 17px);box-shadow:inset 0 0 8px #70502e44}

/* @cpi 2026-10-11 01:00: no cargar decorado antes de elegir salon. */
#room:not([data-theme]){background-image:none}

/* @cpi 2026-10-11 01:20: capa de carga sin alterar medidas ni bloquear el boton de salida. */
#room[data-loading]{opacity:0}
.room-loading-cover{position:fixed;inset:110px 0 0;z-index:2000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:#101818;color:#dcc69b;font:15px system-ui;text-align:center;pointer-events:auto}
.room-loading-cover strong{font-size:23px;color:#fff0c7}.room-loading-light{width:34px;height:34px;border:3px solid #dcc69b30;border-top-color:#edc16b;border-radius:50%;animation:room-loading-turn 1s linear infinite}
@keyframes room-loading-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.room-loading-light{animation:none}}

/* @cpi 2026-10-11 14:00: recuperacion por encima del cabinet. */
.arcade-recovery{box-sizing:border-box;width:min(440px,92vw);padding:28px;border:1px solid #c7a665;border-radius:14px;background:#152121;color:#fff0ce;text-align:center}.arcade-recovery::backdrop{background:#000a}.arcade-recovery h2{font:700 23px system-ui}.arcade-recovery p{font:16px/1.5 system-ui}.arcade-recovery>div{display:flex;justify-content:center;gap:12px}.arcade-recovery button{padding:12px 18px;border:1px solid #c7a665;border-radius:8px;background:#34453d;color:#fff0ce;font:600 15px system-ui;cursor:pointer}

/* @cpi 2026-10-11 15:25: los controles reales de Tetris se integran en la zona impresa del tablero, sin taparla. */
.artwork-game.tetris-cabinet .usu-puzzle-deck{left:24%;width:52%;background:none;backdrop-filter:none;box-shadow:none}
.artwork-game.tetris-cabinet .usu-puzzle-deck .joystick,.artwork-game.tetris-cabinet .usu-puzzle-deck .shoot{width:42%;max-height:none}
.artwork-game.tetris-cabinet .usu-puzzle-deck b{display:none}
.artwork-game.tetris-cabinet .usu-puzzle-bezel{border:0;border-radius:3px}
/* @cpi 2026-10-11 15:55: opción de lectura grande para el pozo de diez columnas en vertical móvil. */
.tetris-cabinet .screen-expand{display:none}
@media(max-width:600px){
 .tetris-cabinet .screen-expand{display:block}
 .tetris-cabinet.expanded .usu-puzzle-case{width:100vw;height:100dvh;aspect-ratio:auto}
 .tetris-cabinet.expanded .usu-puzzle-case:before{display:none}
 dialog.tetris-cabinet.expanded .usu-puzzle-bezel{left:2vw;top:calc(50% - 34vw);width:96vw;height:auto;aspect-ratio:336/240;border:2px solid #d5a14e;box-sizing:border-box;box-shadow:0 0 20px #d9a34a66}
 .tetris-cabinet.expanded .usu-puzzle-bezel canvas{aspect-ratio:336/240;object-fit:fill}
 .artwork-game.tetris-cabinet.expanded .usu-puzzle-deck{left:8%;top:auto;bottom:5%;width:84%;height:86px;min-height:86px;border:2px solid #bc8847;border-radius:13px;background:#102348;justify-content:space-around}
 .tetris-cabinet.expanded .usu-puzzle-deck .joystick,.tetris-cabinet.expanded .usu-puzzle-deck .shoot{height:82px;min-width:80px}
}

/* @cpi 2026-10-11 17:30: mueble Tetris mas alto; videos y canvas mantienen su proporcion. */
.tetris-room-cabinet .cabinet-art{object-fit:fill}

/* @cpi 2026-10-11 16:51: monitor encajado dentro del mueble, con marco visible por sus cuatro lados. */
dialog.artwork-game.tetris-cabinet:not(.expanded) .usu-puzzle-bezel{left:20%;top:31%;width:60%;max-width:none;height:auto;aspect-ratio:336/240;border:5px solid #111820;border-radius:2px;box-sizing:border-box;box-shadow:0 0 0 1px #60666a,0 3px 5px #000a}
/* @cpi 2026-10-11 16:51: apoyar mandos sobre el plano del tablero, antes del faldon delantero. */
.artwork-game.tetris-cabinet:not(.expanded) .usu-puzzle-deck{top:81.5%;height:10%;left:26%;width:48%}
.artwork-game.tetris-cabinet:not(.expanded) .usu-puzzle-deck .joystick:before{bottom:17%;width:clamp(28px,6cqw,55px);height:clamp(10px,2cqw,18px)}
.artwork-game.tetris-cabinet:not(.expanded) .usu-puzzle-deck .joystick i{width:clamp(25px,5.3cqw,48px);height:clamp(25px,5.3cqw,48px);left:calc(50% - clamp(25px,5.3cqw,48px)/2);top:auto;bottom:38%}
.artwork-game.tetris-cabinet:not(.expanded) .usu-puzzle-deck .joystick i:after{height:35%;top:93%}
.artwork-game.tetris-cabinet:not(.expanded) .usu-puzzle-deck .shoot i{width:clamp(34px,7cqw,64px);height:clamp(21px,4cqw,36px);left:calc(50% - clamp(34px,7cqw,64px)/2);top:auto;bottom:23%}

/* @cpi 2026-10-11 16:45: anular la proporcion vertical heredada del mueble generico. */
.usu-puzzle.tetris-cabinet canvas{aspect-ratio:336/240}

/* @cpi 2026-10-11 17:45: Tetris ya rasteriza a los pixeles fisicos del monitor. */
.usu-puzzle.tetris-cabinet canvas{image-rendering:auto}

/* @cpi 2026-10-12 17:12: ampliar 1200px para filas Pac-Man y Snow Bros, conservando pared y decoracion. */
#room[data-theme="luna"]{height:5100px}
#room[data-theme="orbita"]{height:4100px}
#room[data-theme="garaje"]{height:6600px}
#room[data-theme]{background-repeat:no-repeat}

/* @cpi 2026-10-12 17:12: prolongar la textura de suelo hasta el nuevo limite; no estirar paredes ni muebles. */
#room[data-theme="luna"]{--floor-top:1760px;--floor-height:1600px;--floor-stretch:2.0875}
#room[data-theme="orbita"]{--floor-top:1300px;--floor-height:1100px;--floor-stretch:2.545454546}
#room[data-theme="garaje"]{--floor-top:2400px;--floor-height:2400px;--floor-stretch:1.75}
#room[data-theme]::before{content:'';display:block;position:absolute;left:0;right:0;top:var(--floor-top);bottom:auto;height:var(--floor-height);z-index:-1;pointer-events:none;border:0;box-shadow:none;background-image:inherit;background-size:inherit;background-position:center bottom;background-repeat:no-repeat;transform-origin:center top;transform:scaleY(var(--floor-stretch))}

/* @cpi 2026-10-11 18:35: desplazamiento nativo bidireccional con inercia tactil, aislado del resto de la pagina. */
#viewport{touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:auto}
#room{user-select:none;-webkit-user-select:none}
#room img{-webkit-user-drag:none}

/* @cpi 2026-10-11 18:45: pellizco propio del salon; desplazamiento nativo de un dedo conservado. */
#viewport{touch-action:pan-x pan-y}
.room-zoom-reset{position:absolute;right:14px;bottom:58px;z-index:25;padding:9px 12px;border:1px solid #d5bc7955;background:#141923dd;color:#f5e5be;border-radius:20px;font:600 12px system-ui;min-height:40px;box-shadow:0 2px 8px #0005}
.room-zoom-reset[hidden]{display:none}

/* @cpi 2026-10-11 18:55: bordes fisicos de cada cabinet a sangre en vertical movil; conservar proporcion y modo ampliado. */
@media(max-width:760px) and (orientation:portrait){
 dialog.artwork-game:not(.expanded),dialog#play.artwork-game:not(.expanded){overflow-x:hidden;overflow-y:auto}
 dialog.artwork-game:not(.expanded) .usu-puzzle-case{width:var(--mobile-cabinet-width,100vw);max-width:none;top:max(50%,calc(var(--mobile-cabinet-width,100vw) / var(--case-ratio) / 2 + 52px))}
 .asteroids-cabinet:not(.expanded){overflow-x:hidden;overflow-y:auto}
 .asteroids-cabinet:not(.expanded) .asteroids-machine{width:121.46vw;top:max(50%,calc(121.46vw / 1.2346 / 2 + 52px))}
 .asteroids-cabinet:not(.expanded) .asteroids-controls{left:20%;width:60%;top:81.5%;height:16%;background:none;padding:0 1%}
}

/* @cpi 2026-10-11 19:35: silueta verde fosforito con halo suave y opacidad del 80% para una presencia virtual. */
/* @cpi 2026-10-11 19:20: adulto de 1,70m ante mueble de unos 1,90m, con pies delante de su base. */
/* @cpi 2026-10-11 20:10: cada pose usa sus manos y espalda medidas; sin deformacion ni animacion. */
.arcade-player-silhouette{position:absolute;z-index:3;pointer-events:none;background:var(--figure-color,#66ff75);mask-image:var(--figure-art);mask-size:300% 100%;mask-position:var(--figure-position);mask-repeat:no-repeat;filter:drop-shadow(0 0 3px #66ff7580);opacity:.80}

/* @cpi 2026-10-11 21:30: gestos independientes, sin movimiento de la partida ni foco modal. */
.machine.occupied .arcade-player-silhouette{pointer-events:auto;cursor:pointer}
.gesture-toast{position:fixed;inset:12px auto auto 50%;transform:translateX(-50%);margin:0;max-width:calc(100vw - 100px);border:1px solid #83b69680;border-radius:9px;background:#15291ff2;color:#ecf6df;padding:7px 10px;box-shadow:0 3px 12px #0005;font:14px 'Segoe UI',sans-serif;align-items:center;gap:8px;pointer-events:none}
.gesture-toast:popover-open{display:flex}.gesture-toast img{width:28px;height:28px;object-fit:cover;border-radius:4px}.gesture-toast button{pointer-events:auto;background:#294936;border:1px solid #7f9a81;color:#eff5da;border-radius:5px;padding:5px 8px}
.room-arrival{position:absolute;left:1200px;top:950px;width:270px;height:360px;translate:-50% -100%;border:0;background:none;padding:0;z-index:1000;cursor:pointer;animation:arrival-fade 3.6s both}
#room[data-theme=garaje] .room-arrival{left:1210px;top:760px}#room[data-theme=orbita] .room-arrival{left:1190px;top:1170px}
.arrival-body{position:absolute;inset:0;background:var(--figure-color,#66ff75);opacity:.8;mask:url('assets/players/arrivals.png') var(--arrival-x) var(--arrival-y)/400% 200% no-repeat;filter:drop-shadow(0 0 5px #87ffab);animation:arrival-scan .6s ease-out both,arrival-wave 1.2s ease-in-out infinite;transform-origin:50% 95%}
.room-arrival strong{position:absolute;top:32%;left:50%;translate:-50% 0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13px 'Segoe UI',sans-serif;color:#650b2b;background:#f2eedbdb;border:1px solid #78695466;border-radius:3px;padding:3px 6px}
/* @cpi 2026-10-12 00:28: ondulacion del cuerpo al entrar; pies anclados y nick independiente, sin bucle JavaScript. */
@keyframes arrival-wave{0%,100%{transform:skewX(0deg) scaleX(1)}25%{transform:skewX(2deg) scaleX(.975)}50%{transform:skewX(0deg) scaleX(1.015)}75%{transform:skewX(-2deg) scaleX(.975)}}
@keyframes arrival-scan{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}@keyframes arrival-fade{0%{opacity:0}17%,78%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.arrival-body{animation:none}.room-arrival{animation:none}}

/* @cpi 2026-10-11 22:20: confirmacion discreta del gesto, fija respecto a la vista del salon. */
.gesture-feedback{position:fixed;left:50%;bottom:18px;translate:-50% 0;max-width:85vw;padding:7px 12px;border:1px solid #8aad9380;border-radius:7px;background:#182a20ed;color:#e8efdc;font:13px system-ui;pointer-events:none;z-index:2500}
.room-arrival:disabled{cursor:default}

/* @cpi 2026-10-11 22:40: aparicion siempre visible sobre las filas cercanas del salon. */
.room-arrival{z-index:10000}

/* @cpi 2026-10-11 21:25: zoom comun, marco morado de 6px y mandos accesibles sin deformar la pantalla. */
dialog[data-screen-zoom] .screen-expand{display:block}
dialog[data-screen-zoom].expanded{overflow:auto!important}
/* @cpi 2026-10-12 11:18: centrar el conjunto ampliado con margenes automaticos; conservar scroll si no cabe. */
dialog[data-screen-zoom].expanded[open]{display:flex!important;flex-direction:column;box-sizing:border-box;padding:52px 0 12px!important}
dialog[data-screen-zoom].expanded .usu-puzzle-case,dialog[data-screen-zoom].expanded .asteroids-machine{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:auto!important;flex-shrink:0;width:min(100vw,calc((100dvh - 210px) * var(--screen-ratio) + 12px))!important;min-width:200px;height:auto!important;aspect-ratio:auto!important;background:none!important;overflow:visible;filter:none;display:flex;flex-direction:column}
dialog[data-screen-zoom].expanded .usu-puzzle-case:before,dialog[data-screen-zoom].expanded .asteroids-machine:before{display:none!important}
dialog[data-screen-zoom].expanded .usu-puzzle-bezel,dialog[data-screen-zoom].expanded .asteroids-screen{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;padding:0!important;border:6px solid #7540a7!important;border-top-color:#a368d4!important;border-left-color:#9256c5!important;border-bottom-color:#482567!important;border-radius:4px!important;box-sizing:border-box!important;box-shadow:0 0 0 1px #c59ae04d!important;display:block}
dialog[data-screen-zoom].expanded canvas{width:100%!important;height:auto!important;aspect-ratio:var(--screen-ratio)!important;object-fit:contain!important;display:block}
dialog[data-screen-zoom].expanded .usu-puzzle-deck,dialog[data-screen-zoom].expanded .controls,dialog[data-screen-zoom].expanded .asteroids-controls{position:relative!important;inset:auto!important;width:100%!important;height:115px!important;min-height:115px!important;margin:0!important;padding:12px 20px!important;box-sizing:border-box;border:0!important;border-radius:0 0 8px 8px!important;background:#20182e!important;display:flex;justify-content:space-around;align-items:center}
dialog[data-screen-zoom].expanded .joystick,dialog[data-screen-zoom].expanded .shoot{height:85px!important;min-height:85px!important}
dialog[data-screen-zoom].expanded.spectator-cabinet .usu-puzzle-deck,dialog[data-screen-zoom].expanded.spectator-cabinet .controls,dialog[data-screen-zoom].expanded.spectator-cabinet .asteroids-controls{display:none!important}
dialog[data-screen-zoom].expanded .spectator-player{top:auto!important;bottom:-52px!important}

/* @cpi 2026-10-12 11:30: reservar tambien el alto del display al ajustar el conjunto centrado. */
dialog[data-screen-zoom].expanded .usu-puzzle-case,dialog[data-screen-zoom].expanded .asteroids-machine{width:min(100vw,calc((100dvh - 260px)*var(--screen-ratio) + 12px))!important}

/* @cpi 2026-10-12: Pac-Man sólo usa joystick de cuatro direcciones; no tiene disparo. */
.pacman-cabinet .shoot{display:none!important}
.pacman-cabinet .usu-puzzle-deck{justify-content:center}
.pacman-cabinet canvas{image-rendering:pixelated}

/* @cpi 2026-10-12 14:10: eje Pac-Man anclado al centro de la base; inclina sin desplazar su pie. */
.artwork-game.pacman-cabinet .usu-puzzle-deck .joystick{--ball-size:clamp(28px,6.5cqw,52px);--base-height:clamp(13px,3cqw,24px)}
.artwork-game.pacman-cabinet .usu-puzzle-deck .joystick i{width:var(--ball-size);height:var(--ball-size);left:calc(50% - var(--ball-size)/2);bottom:calc(24% + var(--base-height)/2 + var(--ball-size)*.4);transform-origin:50% 140%;transform:perspective(240px) rotateX(var(--tilt-y,0deg)) rotateZ(var(--tilt-x,0deg))}
@media(max-width:600px){.artwork-game.pacman-cabinet .usu-puzzle-deck .joystick{--ball-size:34px}}

/* @cpi 2026-10-12 21:34: la entrada y la maquina usan la identidad confirmada del mismo atlas. */
.arcade-player-silhouette,.room-arrival .arrival-body{clip-path:var(--silhouette-clip);mask-image:var(--silhouette-art);mask-size:var(--silhouette-size);mask-position:var(--silhouette-position);mask-repeat:no-repeat}

/* @cpi 2026-10-12 21:39: selector de cuenta, compacto y usable también en vertical. */
#room-settings:has(.appearance-settings){width:min(580px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box}
.appearance-settings{margin-top:22px;padding-top:18px;border-top:1px solid #82786155;text-align:left}
.appearance-settings h3{margin:0 0 6px;font:600 19px 'Segoe UI',sans-serif;color:#f1e6c8}
.appearance-settings p{margin:0 0 14px;color:#c8c3ba;font:14px/1.4 'Segoe UI',sans-serif}
.appearance-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.appearance-choices button{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border:1px solid #756a584f;border-radius:6px;background:#181d20;color:#d9d6cc;cursor:pointer;font:12px/1.3 'Segoe UI',sans-serif;min-width:0}
.appearance-choices button[aria-pressed="true"]{border-color:#edcc80;background:#2b302c;box-shadow:inset 0 0 0 1px #edcc80}
.appearance-choices button[aria-pressed="true"]:after{content:'✓';position:absolute;right:6px;top:3px;color:#edcc80;font-size:18px}
.appearance-choices button:focus-visible{outline:2px solid #fff0c6;outline-offset:2px}
.appearance-preview{display:block;width:70px;height:105px;background:var(--figure-color,#66ff75);clip-path:var(--silhouette-clip);mask-image:var(--silhouette-art);mask-size:var(--silhouette-size);mask-position:var(--silhouette-position);mask-repeat:no-repeat}
.appearance-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.appearance-save{border:1px solid #cab278;border-radius:5px;background:#e0ca94;color:#29241b;font:600 14px 'Segoe UI',sans-serif;padding:9px 15px;cursor:pointer;flex-shrink:0}
.appearance-save:disabled{opacity:.5;cursor:default}.appearance-actions [role="status"]{font:13px/1.3 'Segoe UI',sans-serif;color:#e2d8c2}
@media(max-width:430px){.appearance-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.appearance-preview{height:93px;width:62px}.appearance-actions{align-items:flex-start;flex-direction:column}}

/* @cpi 2026-10-13 00:06: todas las modalidades, también mirones, detienen la decoración CSS. */
body:has(dialog[open]) #room *{animation-play-state:paused!important}

/* @cpi 2026-10-13 00:10: amarillo para identificar al jugador colocado en una maquina. */
.machine.occupied .arcade-player-silhouette{background:var(--figure-color,#ffe43b);filter:drop-shadow(0 0 3px #ffe43b80)}

/* @cpi 2026-10-13 12:20: vista previa Bad Dudes: monedero calibrado y aviso dentro del mueble. */
#preview #preview-cabinet .illustrated-cabinet[data-game="baddudes"]{height:min(calc(100dvh - 28px),calc((100vw - 12px)/var(--cab-ratio)))}
#preview .illustrated-cabinet[data-game="baddudes"] .coin-instruction{top:100%;margin-top:6px;max-width:min(230px,58vw)}

/* @cpi 2026-10-13 18:35: zoom propio accesible en PC y móvil, fuera de la capa escalada del salón. */
.room-zoom-controls{position:absolute;right:14px;bottom:58px;z-index:25;display:flex;align-items:center;background:#141923ee;border:1px solid #d5bc7955;border-radius:10px;box-shadow:0 2px 8px #0005;overflow:hidden}
.room-zoom-controls>button{position:static;min-width:42px;min-height:42px;padding:8px;border:0;border-radius:0;background:transparent;color:#f5e5be;font:600 20px system-ui;box-shadow:none}
.room-zoom-controls>.room-zoom-reset{min-width:64px;font-size:12px;border-inline:1px solid #d5bc7933}
.room-zoom-controls>button:hover{background:#d5bc7922}.room-zoom-controls>button:disabled{opacity:.35;cursor:default}

/* @cpi 2026-10-13 22:30: selector de color con muestra amplia y opcion de restaurar. */
.appearance-color{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:16px 0}.appearance-color label{display:flex;align-items:center;gap:10px}.appearance-color input[type=color]{width:64px;height:42px;padding:3px;border:1px solid #9b8c73;border-radius:6px;background:#24252a;cursor:pointer}

/* @cpi 2026-10-15 19:40: arte de mesas y monederos; conserva el boton de cobro existente. */
.table-coin-preview{position:relative;width:100%;aspect-ratio:3/4;background:#17191c;border-radius:12px;overflow:hidden}.table-coin-preview>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.table-coin-preview>h2{position:absolute;top:5%;left:5%;right:5%;margin:0;text-align:center;color:#f5e6c4;font:800 clamp(18px,3vw,30px)/1.2 system-ui;letter-spacing:.06em;text-shadow:0 2px 8px #000}.table-coin-preview .coin-instruction{max-width:min(230px,70vw)}
#preview #preview-cabinet .table-coin-preview{width:min(calc(100vw - 20px),calc((100dvh - 20px)*.75));max-height:calc(100dvh - 20px);flex:none}.picker-stage .table-coin-preview{width:100%}.picker-game[data-game=sidepckt] img,.picker-game[data-game=speedspn] img{object-fit:contain;border-radius:7px}

/* @cpi 2026-10-18 17:15: silueta de grupo (dos o mas jugadores en la misma maquina): acompañantes a los lados y detras, sin clics; contador «×N» en el rotulo. */
.arcade-player-silhouette.group-extra{z-index:2;pointer-events:none!important;opacity:.6;scale:.93;transform-origin:50% 100%}
.arcade-player-silhouette.group-extra.side-0{translate:-36% -2%}
.arcade-player-silhouette.group-extra.side-1{translate:36% -2%}
.sample-player-card.group strong{font-size:15px;letter-spacing:.04em;padding:3px 8px}