html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
/* Recreativa de fantasía de 16 bits: la pantalla manda; debajo, mandos y la ficha de la máquina como un pergamino */
:root{
  --bg:#0b0912;
  --panel:#16121f;
  --line:#2c2440;
  --fg:#ece6f6;
  --dim:#a39bc2;
  --gold:#f4b860;
  --ember:#ff8a3d;
  --acid:#6ee7a8;
  --rune:#5ec8f2;
  --blood:#ff5d73;
  --display:"Press Start 2P","Courier New",monospace;
  --body:"VT323","Courier New",monospace;
  color-scheme:dark;
}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--body);font-size:21px;line-height:1.25}
.wrap{max-width:960px;margin:0 auto;padding-block:20px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:16px}
header{text-align:center}
.eyebrow{font-family:var(--display);font-size:9px;letter-spacing:.12em;color:var(--ember);margin:0 0 10px;text-transform:uppercase}
h1{font-family:var(--display);font-weight:400;font-size:clamp(15px,3.6vw,24px);line-height:1.4;color:var(--gold);margin:0;text-wrap:balance;text-shadow:0 2px 0 #6b3a12}
.lede{margin:10px auto 0;color:var(--dim);max-width:62ch;text-wrap:pretty}
.cabinet{border:4px solid #3a2a1a;background:#000;box-shadow:0 0 0 3px #6b4a26,0 0 0 7px var(--panel),0 0 70px rgba(255,138,61,.08)}
canvas{display:block;width:100%;height:auto;aspect-ratio:320/200;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;touch-action:none}
canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--rune)}
.tip{margin:-4px 0 0;color:var(--dim);font-size:18px;text-align:center}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start;margin-top:8px}
.info > div{min-width:0;background:var(--panel);border:2px solid var(--line);box-shadow:0 0 0 3px var(--bg),0 0 0 4px #3a2a1a;padding:16px 18px 18px}
.info h2{padding-bottom:10px;border-bottom:2px dashed var(--line)}
.info p{margin:14px 0 0;padding-top:12px;border-top:2px dashed var(--line);color:var(--dim)}
h2{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.1em;color:var(--ember);margin:0 0 12px;text-transform:uppercase}
dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 14px;margin:0;align-items:start}
dt{color:var(--gold);white-space:nowrap;font-family:var(--display);font-size:9px;line-height:1.6;justify-self:start;padding:3px 6px 2px;border:1px solid #6b4a26;border-bottom-width:3px;background:#1d1626;margin-top:2px}
@media (max-width:420px){dl{grid-template-columns:1fr;gap:4px}dd{margin-bottom:8px}}
dd{margin:0}
ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
li::marker{color:var(--acid);content:"> "}
code{font-family:var(--body);color:var(--rune)}

/* ------------------------------------------------------------------ mandos táctiles */
.stage{position:relative}
.touch{display:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch button{font-family:var(--display);color:var(--fg);background:rgba(22,18,31,.85);border:2px solid var(--line);touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.touch button.on{background:var(--line);border-color:var(--rune);transform:scale(.94)}

.pad{position:relative;width:136px;height:136px;border-radius:50%;background:rgba(22,18,31,.85);border:2px solid var(--line);touch-action:none}
.pad-arrow{position:absolute;width:0;height:0;border:10px solid transparent}
.pad-up{left:50%;top:10px;margin-left:-10px;border-bottom:14px solid var(--dim);border-top:0}
.pad-down{left:50%;bottom:10px;margin-left:-10px;border-top:14px solid var(--dim);border-bottom:0}
.pad-left{top:50%;left:10px;margin-top:-10px;border-right:14px solid var(--dim);border-left:0}
.pad-right{top:50%;right:10px;margin-top:-10px;border-left:14px solid var(--dim);border-right:0}
.pad.on-up .pad-up{border-bottom-color:var(--rune)}
.pad.on-down .pad-down{border-top-color:var(--rune)}
.pad.on-left .pad-left{border-right-color:var(--rune)}
.pad.on-right .pad-right{border-left-color:var(--rune)}
.pad-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--line);border:2px solid var(--dim);pointer-events:none;transition:transform .08s ease-out}
.pad.active .pad-knob{border-color:var(--rune);transition:none}

.sys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pill{height:32px;padding:0 12px;border-radius:16px;font-size:9px}

.btns{display:grid;grid-template-columns:repeat(2,64px);grid-template-rows:repeat(2,64px);gap:10px 12px}
.btns .big{width:64px;height:64px;border-radius:50%;font-size:14px}
.btns .sp{grid-column:1;grid-row:1;border-color:var(--ember);color:var(--ember);font-size:10px}
.btns .b{grid-column:1;grid-row:2;border-color:var(--rune);color:var(--rune)}
.btns .a{grid-column:2;grid-row:1 / span 2;align-self:center;width:72px;height:72px;border-color:var(--gold);color:var(--gold);font-size:16px}

/* Modo táctil: el juego ocupa la pantalla y la ficha se oculta (sigue en el README). */
html.is-touch,html.is-touch body{height:100%;overflow:hidden;overscroll-behavior:none}
html.is-touch body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
html.is-touch header,html.is-touch .info,html.is-touch .keys-only{display:none}
html.is-touch .wrap{max-width:none;height:100%;padding:0;gap:0}
html.is-touch .touch{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
html.is-touch .pad{justify-self:start}
html.is-touch .btns{justify-self:end}
html.is-touch .cabinet{border:0;box-shadow:none}

/* Vertical: consola portátil, pantalla arriba y mandos abajo. */
@media (orientation:portrait){
  html.is-touch .stage{display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top,0px)}
  html.is-touch .cabinet{border-bottom:3px solid #6b4a26}
  html.is-touch .touch{flex:1;align-content:center;gap:18px 8px;grid-template-rows:auto auto;
    padding:20px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  html.is-touch .sys{grid-column:1 / -1;grid-row:1}
  html.is-touch .pad{grid-column:1;grid-row:2}
  html.is-touch .btns{grid-column:3;grid-row:2}
}

/* Horizontal: pantalla completa con los mandos superpuestos. */
@media (orientation:landscape){
  html.is-touch .stage{position:fixed;inset:0;background:#000}
  html.is-touch .cabinet{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
  html.is-touch canvas{width:min(100vw,160dvh);max-height:100dvh}
  html.is-touch .touch{position:absolute;inset:0;pointer-events:none;
    padding:calc(8px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  html.is-touch .touch > *{pointer-events:auto}
  html.is-touch .touch{grid-template-rows:auto 1fr}
  html.is-touch .sys{grid-column:2;grid-row:1;align-self:start;opacity:.75}
  html.is-touch .pad{grid-column:1;grid-row:2;align-self:end;opacity:.62}
  html.is-touch .btns{grid-column:3;grid-row:2;align-self:end;opacity:.62}
}
/* Móviles en horizontal (pantalla panorámica): los botones de sistema van a la franja lateral. */
@media (orientation:landscape) and (min-aspect-ratio:7/4){
  html.is-touch .sys{grid-column:1;justify-self:start;flex-direction:column;align-items:flex-start;gap:6px}
  html.is-touch .pill{height:26px;padding:0 10px;font-size:8px}
}
@media (orientation:landscape) and (max-height:430px){
  .pad{width:116px;height:116px}
  .pad-knob{width:42px;height:42px;margin:-21px 0 0 -21px}
  .btns{grid-template-columns:repeat(2,56px);grid-template-rows:repeat(2,56px)}
  .btns .big{width:56px;height:56px}
  .btns .a{width:64px;height:64px}
}