/* Juego a pantalla completa; HUD fijo abajo (XP + hotbar), controles táctiles flotando sobre el mapa. */
:root{
  --ink:#14121d; --panel:#231e34; --panel-2:#2f2846; --line:#0b0a12; --bevel:#4b4270;
  --paper:#f1ead6; --muted:#b9b0cf; --gold:#f2c14e; --xp:#7fd350; --bad:#ff6b6b;
  --display:'Silkscreen','Courier New',monospace;
  --body:'Pixelify Sans','Trebuchet MS',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ink);color:var(--paper);font-family:var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
#app{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--ink)}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.panel{background:var(--panel);border:3px solid var(--line);box-shadow:inset 0 0 0 3px var(--bevel),0 5px 0 rgba(0,0,0,.4)}
.pbtn{font-family:var(--display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:var(--gold);color:var(--ink);border:3px solid var(--line);box-shadow:inset -3px -3px 0 rgba(0,0,0,.22),inset 3px 3px 0 rgba(255,255,255,.35);padding:9px 12px;line-height:1}
.pbtn:active{transform:translateY(2px)}
.pbtn.ghost{background:var(--panel-2);color:var(--paper);box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.08)}
.pbtn.ghost[aria-pressed=true]{background:var(--bevel)}

#top{position:absolute;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}
#top>*{pointer-events:auto}
.brand{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;text-shadow:2px 2px 0 var(--line);line-height:1.2;min-width:0}
.brand span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#brandSub{font-weight:400;font-size:10px;color:var(--gold)}
.topbtns{display:flex;gap:6px;flex:none}
#hint{position:absolute;top:calc(58px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);background:rgba(20,18,29,.7);padding:4px 10px;white-space:nowrap}
.touch #hint{display:none}
#coord{position:absolute;top:calc(58px + env(safe-area-inset-top,0px));left:16px;font-family:var(--display);font-size:10px;background:rgba(20,18,29,.85);border:2px solid var(--line);padding:5px 8px;max-width:calc(100% - 32px);line-height:1.4}
#coord + #hint{top:calc(92px + env(safe-area-inset-top,0px))}

#hud{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:6px;width:min(100% - 24px,340px)}
.xp{width:100%}
.xplbl{display:flex;justify-content:space-between;font-family:var(--display);font-size:10px;text-shadow:2px 2px 0 var(--line);margin-bottom:3px}
#lvl{color:var(--xp)}
.xpbar{height:8px;background:#0b0a12;border:2px solid var(--line);box-shadow:inset 0 0 0 1px #3a3354}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(var(--xp) 50%,#5fb236 50%);transition:width .4s steps(8)}
#hotbar{display:grid;grid-template-columns:repeat(var(--n,9),1fr);gap:3px;width:100%}
.slot{aspect-ratio:1;max-width:100%;background:#1a1627;border:3px solid var(--line);box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -2px -2px 0 rgba(255,255,255,.07);display:grid;place-items:center}
.slot img{width:78%;image-rendering:pixelated;opacity:.18;filter:grayscale(1)}
.slot.on img{opacity:1;filter:none}
.slot.on{border-color:#5b5080}
.slot.pop{animation:pop .5s steps(4)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

#pad,#btnA{display:none}
.touch #pad,.touch #btnA{display:grid}
.dlg-open #pad,.dlg-open #btnA{visibility:hidden}
#pad{position:absolute;left:14px;bottom:calc(92px + env(safe-area-inset-bottom,0px));grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}
#pad button{background:rgba(35,30,52,.82);border:3px solid var(--line);box-shadow:inset 0 0 0 2px var(--bevel);font-family:var(--display);font-size:14px;color:var(--paper);padding:0}
#pad button.on{background:var(--bevel)}
#pad [data-d=up]{grid-area:1/2}#pad [data-d=left]{grid-area:2/1}#pad [data-d=right]{grid-area:2/3}#pad [data-d=down]{grid-area:3/2}
#btnA{position:absolute;right:18px;bottom:calc(112px + env(safe-area-inset-bottom,0px));width:72px;height:72px;border-radius:50%;background:var(--gold);color:var(--ink);border:4px solid var(--line);box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.35);font-family:var(--display);font-weight:700;font-size:22px;place-items:center;padding:0}
#btnA:active{transform:translateY(2px)}

#dialog{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));width:min(100% - 24px,580px);padding:14px 16px 16px;cursor:pointer}
.spk{display:inline-block;font-family:var(--display);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;margin:-28px 0 8px -6px;border:3px solid var(--line);color:var(--ink);background:var(--gold)}
.dbody{display:flex;gap:14px;align-items:flex-start}
.dtxt{min-width:0;flex:1}
.postal{flex:none;margin:2px 0 0;background:#f4efe2;padding:4px 4px 3px;border:2px solid var(--line);box-shadow:3px 3px 0 rgba(0,0,0,.35);transform:rotate(-2deg)}
.postal img{display:block;width:128px;height:96px;image-rendering:pixelated;background:#cfc8b6}
.postal figcaption{font-family:var(--display);font-size:8px;color:#5a5140;text-align:center;margin-top:3px;letter-spacing:.05em}
#dTitle{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.3;margin:0 0 6px;text-wrap:balance}
#dText{font-size:17px;line-height:1.4;margin:0;min-height:2.8em}
.dfoot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:var(--display);font-size:10px;color:var(--muted)}
.blink{color:var(--gold);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

#toast{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:9px 14px 10px 10px;width:max-content;max-width:calc(100% - 32px);z-index:4}
#toast img{width:30px;image-rendering:pixelated;flex:none}
#toast b{display:block;font-family:var(--display);font-size:10px;color:var(--gold);letter-spacing:.05em}
#toast span{font-size:15px}

#errores{position:absolute;top:calc(60px + env(safe-area-inset-top,0px));left:12px;right:12px;padding:12px 14px;z-index:6;font-size:14px;border-color:var(--bad);max-height:50%;overflow:auto}
#errores b{font-family:var(--display);font-size:11px;color:var(--bad);display:block;margin-bottom:6px}
#errores ul{margin:0;padding-left:18px}

.overlay{position:absolute;inset:0;background:rgba(10,8,16,.8);display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));z-index:5}
.card{width:100%;max-width:520px;max-height:100%;overflow:auto;padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.card h1{font-family:var(--display);font-weight:700;font-size:clamp(24px,7vw,34px);line-height:1.05;margin:0;text-shadow:3px 3px 0 var(--line);text-wrap:balance}
.card h1 em{font-style:normal;color:var(--gold)}
.eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.08em;color:var(--xp);text-transform:uppercase}
.card p{margin:0;font-size:17px;line-height:1.45;color:var(--paper)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:16px;align-items:center}
.k{font-family:var(--display);font-size:10px;background:var(--panel-2);border:2px solid var(--line);padding:4px 6px;text-align:center;white-space:nowrap}
.row{display:flex;gap:10px;flex-wrap:wrap}
.note{font-size:13px!important;color:var(--muted)!important}

#textview .card{max-width:640px}
#tvBody{display:flex;flex-direction:column;gap:16px}
.tv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tv-eje{border-top:3px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.tv-eje h2{font-family:var(--display);font-size:14px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tv-eje h2 i{width:12px;height:12px;border:2px solid var(--line);flex:none}
.tv-eje h2 small{font-weight:400;color:var(--muted);font-size:10px;margin-left:auto}
.tv-eje ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.tv-eje li{font-size:16px;line-height:1.4}
.tv-eje li b{font-weight:600;display:block}
.tv-eje li span{color:var(--muted)}
.tag{font-family:var(--display);font-size:9px;color:var(--gold);margin-left:6px}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.team div{background:var(--panel-2);border:2px solid var(--line);padding:8px 10px;font-size:15px;min-width:0}
.team small{display:block;font-family:var(--display);font-size:9px;color:var(--gold);text-transform:uppercase}

.share{background:#1a1627;border:3px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.share .icons{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.share .icons img{width:30px;image-rendering:pixelated}

@media (max-width:420px){
  #top{padding-left:12px;padding-right:12px}
  .brand{font-size:11px}
  #brandSub{display:none}
  .pbtn{font-size:11px;padding:8px 9px}
  .postal img{width:96px;height:72px}
  .dbody{gap:10px}
  #dText{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .blink,.slot.pop{animation:none}
  .xpbar i{transition:none}
  .postal{transform:none}
}