/* PlanetBloq · páginas a pie de calle (paseo y bus turístico) */
:root{
  --bg:#16151c; --panel:#1f1d27; --panel2:#282532; --line:#35323f;
  --ink:#efe9dc; --muted:#a49eaf; --acc:#ffc94a; --acc-ink:#231a04; --acc-edge:#b8862a; --sea:#3fa7d6;
  --px:'Pixelify Sans','Courier New',monospace; --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink)}
[hidden]{display:none!important}
body{margin:0;font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--acc)}
.wrap{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:18px 48px;display:grid;gap:14px}
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
.brand{font:700 28px/1 var(--px);letter-spacing:.03em;margin:0}
.brand a{color:inherit;text-decoration:none}
.brand small{font:500 13px var(--px);letter-spacing:.12em;color:var(--acc);margin-left:10px;vertical-align:middle}
.meta{font:12px/1.5 var(--mono);color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;padding:0;list-style:none}
.meta b{color:var(--ink);font-weight:600}
.stage{position:relative;aspect-ratio:16/9;max-width:100%;background:#0d0c14;border:1px solid var(--line);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.stage canvas{display:block;width:100%;height:100%}
@media (max-width:700px){.stage{aspect-ratio:3/4}}
.hud{position:absolute;inset:0;pointer-events:none}
.hud .tl{position:absolute;left:10px;top:10px;display:grid;gap:4px}
.tile{background:rgba(14,13,18,.72);border:1px solid rgba(255,255,255,.12);padding:4px 10px;border-radius:3px;font:600 13px var(--mono);color:#fff}
.tools{position:absolute;left:10px;bottom:10px;display:flex;gap:4px;flex-wrap:wrap;pointer-events:auto;max-width:70%}
.tools button,.goto button{background:rgba(14,13,18,.74);border:1px solid rgba(255,255,255,.16);color:var(--ink);font:600 12px var(--sans);padding:5px 9px;border-radius:3px;cursor:pointer}
.tools button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.goto{position:absolute;right:10px;top:10px;display:grid;gap:4px;justify-items:end;pointer-events:auto}
@media (max-width:700px){.goto{display:none}}
.joy{position:absolute;left:16px;bottom:56px;width:110px;height:110px;border-radius:50%;background:rgba(14,13,18,.4);border:2px solid rgba(255,255,255,.35);pointer-events:auto;touch-action:none;display:none;place-items:center}
.joy i{width:44px;height:44px;border-radius:50%;background:rgba(255,201,74,.9);display:block}
@media (pointer:coarse){.joy{display:grid}}
.over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,16,.55);padding:16px}
.loading{font:700 20px var(--px);color:#fff;text-align:center;margin:0}
.card{background:var(--panel);border:1px solid var(--line);max-width:480px;width:100%;padding:18px 20px;display:grid;gap:10px;max-height:calc(100% - 16px);overflow-y:auto}
.card h2{font:700 24px/1.1 var(--px);margin:0}
.card p{margin:0;color:#d4cedd;font-size:14.5px}
.card .row{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--acc);color:var(--acc-ink);border:0;font:700 17px var(--px);letter-spacing:.04em;padding:10px 16px;box-shadow:0 4px 0 var(--acc-edge);cursor:pointer;text-decoration:none;display:inline-block}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--acc-edge)}
.btn.ghost{background:var(--panel2);color:var(--ink);box-shadow:0 4px 0 #0e0d13}
.keys{font:12.5px/1.6 var(--mono);color:var(--muted)}
.below{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:860px){.below{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--panel);border:1px solid var(--line);padding:14px 16px}
.panel h3{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.panel p{margin:0 0 8px;font-size:14px;color:#d4cedd}
.note{font-size:13px;color:var(--muted);max-width:90ch;margin:0}
.note b{color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}