@font-face{font-family:'pIqaD';src:url('/fonts/piqad.woff') format('woff'),url('/fonts/piqad.ttf') format('truetype');font-display:block}
@font-face{font-family:'PS2P';src:url('/fonts/PressStart2P.ttf') format('truetype');font-display:swap}
@font-face{font-family:'VT';src:url('/fonts/VT323.ttf') format('truetype');font-display:swap}
:root{--g:#33ff66;--gd:#0c7a2a;--bg:#020b04;--amb:#ffb000;--cy:#00e5ff;--rd:#ff2e4d}
*{box-sizing:border-box}
html,body{margin:0;height:100%;color:var(--g);font-family:'VT',monospace;font-size:22px}
/* borde estilo ZX Spectrum al cargar */
.border{position:fixed;left:0;right:0;height:26px;z-index:5;background:repeating-linear-gradient(90deg,#d70000 0 40px,#00d7d7 40px 80px,#d7d700 80px 120px,#0000d7 120px 160px,#00d700 160px 200px,#d700d7 200px 240px);animation:slide 1.1s linear infinite;image-rendering:pixelated}
.border.top{top:0}.border.bot{bottom:0;animation-direction:reverse}
@keyframes slide{to{background-position:240px 0}}
.screen{position:relative;min-height:100%;padding:56px 14px;display:flex;align-items:center;justify-content:center;background:transparent}
html{background:radial-gradient(ellipse at center,#04200c 0%,#010802 75%) fixed #010802}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;image-rendering:pixelated}
.screen:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}
.screen:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 160px rgba(0,0,0,.85)}
.box{position:relative;z-index:3;width:min(620px,100%);border:3px solid var(--g);padding:22px 22px 18px;box-shadow:0 0 22px rgba(51,255,102,.35),inset 0 0 18px rgba(51,255,102,.15);background:rgba(2,16,6,.82)}
h1{font:14px/1.6 'PS2P';margin:0 0 6px;text-shadow:0 0 8px var(--g);letter-spacing:1px}
.sub{color:var(--amb);margin:0 0 14px;text-shadow:0 0 6px rgba(255,176,0,.6)}
label{display:block;margin:14px 0 4px;color:#9dffb6;letter-spacing:1px}
.dd{position:relative}
.dd button.cur,input[type=password]{width:100%;background:#000;border:2px solid var(--gd);color:var(--g);font:inherit;padding:8px 12px;text-align:left;outline:none}
.dd button.cur:focus,input[type=password]:focus{border-color:var(--g);box-shadow:0 0 10px rgba(51,255,102,.5)}
.dd .glyph{font-family:'pIqaD','VT',monospace;font-size:34px;letter-spacing:6px;line-height:1.1}
.dd .arrow{float:right;margin-top:8px}
.dd ul{display:none;position:absolute;z-index:9;left:0;right:0;margin:2px 0 0;padding:0;list-style:none;background:#000;border:2px solid var(--g)}
.dd.open ul{display:block}
.dd li{padding:8px 12px;cursor:pointer;border-bottom:1px dashed var(--gd)}
.dd li:last-child{border:0}
.dd li:hover,.dd li.sel{background:var(--g);color:#000}
.hint{font-size:17px;color:#58b872;margin-top:4px}
.go{margin-top:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{font:11px 'PS2P';background:var(--g);color:#000;border:0;padding:12px 16px;cursor:pointer;box-shadow:4px 4px 0 #0a5a1f}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #0a5a1f}
.msg{min-height:56px;margin-top:14px;color:var(--rd);text-shadow:0 0 6px rgba(255,46,77,.6)}
.msg.ok{color:var(--g)}
.cursor:after{content:"█";animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.foot{margin-top:12px;font-size:16px;color:#3f8a55;text-align:center}
@media(max-width:520px){html,body{font-size:19px}h1{font-size:11px}.dd .glyph{font-size:28px}}