@font-face{font-family:"Bangers";src:url(../assets/fonts/Bangers-Regular.woff) format("woff");font-display:block}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:italic;src:url(../assets/fonts/BarlowCondensed-ExtraBoldItalic.woff) format("woff");font-display:block}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;src:url(../assets/fonts/BarlowCondensed-Bold.woff) format("woff");font-display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b0716;color:#fff;font-family:"Trebuchet MS",Arial,sans-serif;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1b1236 0,#07040f 75%)}
#stage{position:relative;aspect-ratio:384/216;width:min(100vw,calc(100vh*384/216));max-height:100vh;background:#000;box-shadow:0 0 40px rgba(120,60,200,.35)}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block}
#crt{position:absolute;inset:0;pointer-events:none;display:none;
 background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 1px,rgba(0,0,0,.28) 2px,rgba(0,0,0,0) 3px),radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);mix-blend-mode:multiply}
#crt.on{display:block}
#crt2{position:absolute;inset:0;pointer-events:none;display:none;box-shadow:inset 0 0 60px rgba(0,0,0,.6);border-radius:14px}
#crt2.on{display:block}
#nameBox{position:absolute;left:50%;top:60%;transform:translateX(-50%);display:none;gap:6px;align-items:center;z-index:5}
#nameBox input{font:bold 16px "Trebuchet MS",Arial;padding:6px 8px;width:200px;border:3px solid #ffe066;background:#150f22;color:#fff;text-transform:none;border-radius:4px}
#nameBox button{font:bold 15px "Trebuchet MS",Arial;padding:7px 12px;background:#ffe066;border:3px solid #150f22;border-radius:4px;color:#150f22;cursor:pointer}
/* controles táctiles */
#touch{position:fixed;inset:0;pointer-events:none;display:none;z-index:10}
body.touch #touch{display:block}
#touch .zone{position:absolute;pointer-events:auto}
#stickZone{left:0;bottom:0;width:46%;height:52%}
#stick{position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.10);border:3px solid rgba(255,255,255,.35);display:none}
#stickKnob{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:rgba(255,224,102,.8);border:3px solid #150f22}
.tb{position:absolute;pointer-events:auto;width:58px;height:58px;border-radius:50%;background:rgba(21,15,34,.62);border:3px solid rgba(255,255,255,.55);color:#fff;font:bold 18px "Trebuchet MS",Arial;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1}
.tb small{display:block;margin-top:2px;font-size:9px;font-weight:bold;opacity:.85;letter-spacing:-.2px}
.tb.sm small{font-size:7.5px}
.tb.on{background:rgba(255,224,102,.75);color:#150f22}
#tJ{background:rgba(232,80,58,.62)}#tK{background:rgba(58,140,232,.62)}#tS{background:rgba(58,200,120,.62)}#tL{background:rgba(232,190,58,.62)}
.tb.sm{width:42px;height:42px;font-size:13px}
#tPause{right:10px;top:8px;width:40px;height:40px;font-size:16px}
/* celular vertical: el juego bajo la franja de los botones Compartir/Pausa, con aviso para girar */
body.touch.portrait #stage{position:fixed;left:0;top:calc(60px + env(safe-area-inset-top,0px));width:100vw;max-height:none}
body.touch.portrait #stage::after{content:"\21BB  Gira el tel\E9 fono para verlo m\E1 s grande";position:absolute;top:100%;left:0;right:0;margin-top:12px;text-align:center;font:bold 14px "Barlow Condensed","Trebuchet MS",Arial,sans-serif;letter-spacing:.3px;color:#cdb8ff;opacity:.85;pointer-events:none}
body.touch.portrait #wrap{align-items:flex-start}
#rotate{display:none}
@media (orientation:portrait){ body:not(.touch) #stage{width:100vw} }