@font-face{font-family:"Press Start 2P";src:url(../assets/fonts/PressStart2P-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(../assets/fonts/VT323-latin.woff2) format("woff2");font-display:swap}
:root{color-scheme:dark;--ink:#f7f0d5;--red:#ff4d61;--red-d:#b52746;--cyan:#31d7c7;--yellow:#ffd34e;--yellow-d:#d9992a;--navy:#101629;--deep:#050814;--line:#27345b;--px:"Press Start 2P",ui-monospace,"Courier New",monospace;--term:"VT323","Courier New",monospace}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{margin:0;min-height:100vh;display:grid;place-items:center;overflow-x:hidden;background:radial-gradient(circle at 50% 15%,#29345c 0,#11172b 44%,#090d19 100%);color:var(--ink);font:400 1.35rem/1.3 var(--term)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px)}
.cabinet{width:min(100%,1030px);padding:18px 24px 12px}
header{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:12px}
.back{display:inline-block;margin-bottom:10px;color:var(--cyan);text-decoration:none;font:400 clamp(.5rem,1.4vw,.65rem)/1 var(--px);letter-spacing:.06em}
.back:hover,.back:focus-visible{color:var(--yellow)}
h1{margin:0;color:var(--yellow);font:400 clamp(1rem,3.6vw,1.9rem)/1.3 var(--px);letter-spacing:.03em;text-shadow:3px 3px 0 var(--red-d),6px 6px 0 var(--deep)}
.toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.small-button{border:3px solid var(--line);background:var(--navy);color:var(--ink);padding:9px 11px;font:400 .5rem/1 var(--px);cursor:pointer}
.small-button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
.screen{position:relative;width:100%;margin-inline:auto;border:8px solid #303b61;outline:3px solid #090c17;box-shadow:0 16px 45px #000a,inset 0 0 30px #000;background:#0b1021}
.hud{min-height:38px;display:flex;justify-content:space-around;align-items:center;gap:8px;padding:8px 6px;background:#0b1126;color:#8d99be;font:400 clamp(.45rem,1.35vw,.62rem)/1 var(--px);letter-spacing:.04em;white-space:nowrap}
.hud b{color:var(--yellow);font-weight:400}
#lost{color:var(--red)}
canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;background:#0b1021;touch-action:none}
.overlay{position:absolute;inset:38px 0 0;display:grid;place-items:safe center;overflow:auto;padding:20px;background:#050916c2;backdrop-filter:blur(2px)}
.overlay.hidden{display:none}
.panel{width:min(100%,590px);padding:clamp(16px,3vw,30px);text-align:center;background:#111a31;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--red-d)}
.panel h2{margin:12px 0 16px;font:400 clamp(.9rem,3.2vw,1.35rem)/1.5 var(--px);color:var(--yellow);text-shadow:3px 3px 0 var(--red-d)}
.panel p{margin:0 0 12px;line-height:1.3;font-size:1.45rem}
.stamp{display:inline-block;margin:0;padding:6px 9px;color:var(--cyan);border:3px solid var(--cyan);transform:rotate(-2deg);font:400 .55rem/1 var(--px)!important;letter-spacing:.06em}
[hidden]{display:none!important}
.keys{color:#aab4d5;font-size:1.15rem!important}
footer{margin-top:12px;text-align:center;color:#7782a7;font-size:1.05rem}
@media (hover:none),(max-width:760px){body{place-items:start center}.touch{display:grid}.cabinet{padding:10px}.screen{border-width:4px}}
@media (max-width:760px){header{flex-direction:column;align-items:center;gap:8px;text-align:center}.overlay{position:fixed;inset:0;z-index:2;padding:16px}}
@media (max-width:520px){.hud{font-size:.42rem;letter-spacing:0;padding:8px 2px}.small-button{padding:7px}}
@media (max-height:520px){.cabinet{padding:6px 10px}header{flex-direction:row;align-items:center;margin-bottom:6px}.back,footer{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Acciones, mapa, estrellas y titulares */
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0 16px}
.btn{padding:14px 20px;border:0;background:var(--red);color:#fff;font:400 .66rem/1.3 var(--px);cursor:pointer;box-shadow:0 0 0 4px var(--deep),0 6px 0 4px var(--red-d),0 6px 0 8px var(--deep)}
.btn:hover{background:#ff7384}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 4px var(--deep),0 2px 0 4px var(--red-d),0 2px 0 8px var(--deep)}
.btn.secondary{background:#27345b;box-shadow:0 0 0 4px var(--deep),0 6px 0 4px #151d36,0 6px 0 8px var(--deep);font-size:.55rem}
.btn.secondary:hover{background:#3b4a7a}
.stars{display:flex;justify-content:center;gap:10px;margin:6px 0 10px}
.star{display:inline-block;width:26px;height:26px;background:#27345b;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.star.on{background:var(--yellow)}
.headline{margin:8px 0 14px;padding:12px 14px;border:3px dashed #3b4a7a;background:#0b1126;text-align:left}
.headline b{display:block;margin-bottom:6px;color:var(--cyan);font:400 .5rem/1 var(--px);letter-spacing:.08em}
.headline small{display:block;margin-top:4px;color:#aab4d5;font-size:1.25rem}
.map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.tile{display:grid;gap:4px;justify-items:center;padding:10px 6px;border:3px solid var(--line);background:#0b1126;color:var(--ink);font:inherit;cursor:pointer}
.tile b{font:400 1rem/1 var(--px);color:var(--yellow)}
.tile span{font:400 .38rem/1.5 var(--px);color:#aab4d5;min-height:3em;display:grid;align-items:center}
.tile .stars{margin:0;gap:4px}.tile .star{width:14px;height:14px}
.tile:hover:not(:disabled){border-color:var(--yellow)}
.tile.locked{opacity:.4;cursor:default}
.touch{display:none;grid-template-columns:1fr;gap:8px;margin-top:13px}
.touch button{min-height:60px;border:3px solid #3b4a7a;background:#18213e;color:#fff;font:400 .6rem/1 var(--px);touch-action:none;user-select:none;-webkit-user-select:none}
.touch button.on{background:#27345b;transform:translateY(2px)}
.touch .up{background:var(--red-d);border-color:var(--red);min-height:78px;font-size:.85rem}
.touch-hint{display:none;margin:8px 0 0;text-align:center;color:#8d99be;font-size:1.15rem}
canvas{cursor:pointer}
@media (hover:none),(max-width:760px){.touch{display:grid}.touch-hint{display:block}}
@media (max-width:520px){.map{grid-template-columns:repeat(2,minmax(0,1fr))}.btn{font-size:.55rem;padding:12px 14px}}

.back-button{display:inline-block;text-decoration:none}
.back-button:hover,.back-button:focus-visible{border-color:var(--cyan);color:var(--cyan)}
.tile .rec{font:400 .4rem/1.4 var(--px);color:var(--green,#3cff7a);font-style:normal}