/* @cpi 2026-10-09 23:25: mueble limpio del salón, separado de los píxeles del juego. */
.usu-puzzle{padding:12px;background:#101322;border:1px solid #758297;border-radius:12px;width:min(660px,96vw);max-height:97dvh;color:#fff;overflow:auto}.usu-puzzle::backdrop{background:#050811c9}.usu-puzzle header{display:flex;align-items:center;gap:12px;padding:0 5px 10px;font:12px monospace;letter-spacing:2px}.usu-puzzle header b{flex:1}.usu-puzzle header button{background:#222e43;border:1px solid #6c7998;border-radius:50%;color:white;width:38px;height:38px;font-size:22px}.usu-puzzle-case{border:9px solid #344779;border-radius:4px;box-shadow:inset 0 0 0 3px #66c8da,0 12px 35px #000;background:#152847}.usu-puzzle-marquee{background:radial-gradient(ellipse at center,#553488,#131f53);text-align:center;border-bottom:5px solid #81ccda;padding:8px;color:#ffe77b;text-shadow:2px 3px #592047}.usu-puzzle-marquee small{font:10px monospace;letter-spacing:4px;color:#ace9ed}.usu-puzzle-marquee strong{display:block;font:bold 25px/1 sans-serif;letter-spacing:3px}.usu-puzzle-marquee strong br{display:none}.usu-puzzle-marquee em{font-style:normal;color:#91ecff}.usu-puzzle-marquee span{color:#f66c99;letter-spacing:12px;font-size:12px}.usu-puzzle-bezel{position:relative;background:#08090c;padding:7px;box-shadow:inset 0 0 12px #000}.usu-puzzle canvas{display:block;width:100%;height:auto;aspect-ratio:320/224;image-rendering:pixelated;touch-action:none}.usu-puzzle-deck{display:flex;justify-content:space-around;align-items:center;height:100px;background:repeating-linear-gradient(120deg,#273b64 0 20px,#23345a 20px 40px);border-top:4px solid #73c3ce}.usu-puzzle .joystick,.usu-puzzle .shoot{position:relative;width:110px;height:90px;touch-action:none;text-align:center;cursor:pointer}.usu-puzzle .joystick i{display:block;position:absolute;width:48px;height:48px;left:31px;top:9px;transform:translateX(var(--x,0px));border-radius:50%;background:radial-gradient(circle at 32% 24%,#ffa3a3,#c22135 50%,#4c1025);box-shadow:0 15px 0 -9px #b3bccb,0 25px 0 -5px #070b12}.usu-puzzle .shoot{border:0;background:none;color:white}.usu-puzzle .shoot i{display:block;position:absolute;left:25px;top:19px;width:60px;height:37px;border-radius:50%;background:radial-gradient(ellipse at 38% 27%,#fff7ad,#e5ba3b 58%,#9b6925);box-shadow:0 6px #6f5129,0 9px 0 4px #090d19}.usu-puzzle .shoot.pressed i,.usu-puzzle .shoot.key-pressed i{transform:translateY(5px);box-shadow:0 2px #6f5129,0 4px 0 4px #090d19}.usu-puzzle-deck b{position:absolute;bottom:3px;left:0;width:100%;font:11px monospace}.usu-puzzle footer{padding:8px 20px;font:10px monospace;letter-spacing:4px;color:#91bdcf}.usu-puzzle footer span{float:right}.usu-puzzle .help{text-align:center;font-size:12px;margin:8px 0 0}.usu-puzzle .result{position:absolute;inset:25%;padding:12px;background:#101828ee;text-align:center}.usu-puzzle .result button{background:#e6c35d;border:0;padding:10px;color:#15192b;font-weight:bold}@media(max-width:600px){.usu-puzzle{padding:6px;width:98vw}.usu-puzzle-case{border-width:4px}.usu-puzzle-bezel{padding:2px}.usu-puzzle .help{display:none}.usu-puzzle-marquee strong{font-size:21px}.usu-puzzle header b{font-size:10px}}
/* @cpi 2026-10-10: las pantallas verticales conservan su proporción nativa. */
.usu-puzzle.portrait{width:min(460px,96vw)}.usu-puzzle.portrait canvas{aspect-ratio:224/256}.usu-puzzle .joystick i{transform:translate(var(--x,0px),var(--y,0px))}.usu-puzzle.portrait .usu-puzzle-bezel{max-width:min(100%,calc((100dvh - 300px)*224/256));margin:auto}.usu-puzzle .result{inset:20% 10%;display:flex;flex-direction:column;justify-content:center;gap:10px}.usu-puzzle .result[hidden]{display:none}.usu-puzzle .return{background:#334663!important;color:white!important}
