/* Layout: cuaderno cuadriculado; la pantalla del juego como una hoja pegada, con borde grueso como el arte del EP.
   Palette and fonts come from /assets/brand.css. */
:root{--u:2px}
[hidden]{display:none!important}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{background:var(--paper);color:var(--ink)}
body{
  margin:0;min-height:100vh;box-sizing:border-box;
  font-family:var(--body);font-size:16px;line-height:1.45;
  
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:20px 40px;
}
.wrap{max-width:max(320px,min(1100px,calc((100svh - 170px) * 4 / 3)));margin:0 auto;display:flex;flex-direction:column;gap:16px}
header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.band{color:inherit;text-decoration:none;display:inline-block;font-family:var(--display);font-weight:700;font-size:clamp(22px,5vw,34px);line-height:1;letter-spacing:.02em;transform:rotate(-2deg)}
.ep{font-size:14px;color:var(--muted);max-width:38ch}
.ep em{color:var(--ink);font-style:normal}

.stage{position:relative;border:3px solid var(--ink);background:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.screen{position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
canvas#game{display:block;width:100%;aspect-ratio:4/3;image-rendering:pixelated;image-rendering:crisp-edges}
.hud{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:6px;padding:calc(var(--u)*4);font-family:var(--display);font-size:clamp(9px,calc(var(--u)*6),14px);pointer-events:none}
.hud .sp{flex:1}
.chip{background:var(--card);border:2px solid var(--ink);padding:1px 7px;white-space:nowrap}
.chip.tk{background:var(--yellow)}
.room{max-width:46%;overflow:hidden;text-overflow:ellipsis}

.dlg{position:absolute;left:calc(var(--u)*10);right:calc(var(--u)*10);bottom:calc(var(--u)*8);box-sizing:border-box;min-height:calc(var(--u)*60);background:#000;color:#fff;border:calc(var(--u)*2) solid #fff;padding:calc(var(--u)*7) calc(var(--u)*9);display:flex;gap:calc(var(--u)*8);align-items:flex-start;font-size:calc(var(--u)*9.5);line-height:1.35;pointer-events:none}
.dlg.top{bottom:auto;top:calc(var(--u)*24)}
.dlg p{margin:0;flex:1;min-width:0;white-space:pre-line}
.face{width:calc(var(--u)*27);height:calc(var(--u)*39);image-rendering:pixelated;flex:none;background:#000}
.tag{position:absolute;top:calc(var(--u)*-9);left:calc(var(--u)*8);font-family:var(--display);font-size:calc(var(--u)*6);padding:0 calc(var(--u)*4);border:calc(var(--u)*1) solid #fff;color:#fff}
.next{position:absolute;right:calc(var(--u)*6);bottom:calc(var(--u)*3);font-size:calc(var(--u)*7);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.panel{background:var(--card);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px;display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){
  .panel.over{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(540px,86%);max-height:92%;overflow:auto;box-shadow:6px 6px 0 rgba(0,0,0,.6)}
}
.panel h2{font-family:var(--display);font-size:clamp(18px,3.4vw,26px);line-height:1.1;margin:0;text-wrap:balance}
.panel p{margin:0;max-width:60ch}
.small{font-size:14px;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
button,.btn{font-family:var(--display);font-size:15px;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);padding:10px 16px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);text-decoration:none;display:inline-block}
button.alt,.btn.alt{background:var(--card)}
button:active,.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
button:focus-visible,.btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.keys{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.keys b{font-family:var(--display);font-weight:400;border:2px solid var(--ink);padding:0 6px;background:var(--paper)}
.cast{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font-family:var(--display);font-size:11px}
.cast span{border-top:8px solid var(--ink);padding-top:4px;text-align:center;overflow:hidden;text-overflow:ellipsis}

.tkt{display:grid;grid-template-columns:1fr auto;border:3px solid var(--ink);background:var(--yellow)}
.tkt-main{padding:12px 14px;border-right:3px dashed var(--ink);display:flex;flex-direction:column;gap:4px;min-width:0}
.tkt-main small{font-family:var(--display);font-size:11px;letter-spacing:.06em}
.tkt-main strong{font-family:var(--display);font-size:clamp(18px,4vw,24px);line-height:1.1}
.tkt-stub{writing-mode:vertical-rl;font-family:var(--display);font-size:12px;padding:10px 8px;letter-spacing:.1em;font-variant-numeric:tabular-nums}

.pad{display:none;justify-content:space-between;align-items:center;gap:16px;touch-action:none;user-select:none;-webkit-user-select:none}
.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:4px}
.dpad button{padding:0;font-size:20px;background:var(--card)}
.dpad .u{grid-area:1/2}.dpad .l{grid-area:2/1}.dpad .r{grid-area:2/3}.dpad .d{grid-area:3/2}
.abtn{width:84px;height:84px;border-radius:50%;padding:0;background:var(--red);color:var(--white);font-size:18px}
@media (hover:none),(pointer:coarse){.pad{display:flex}.kbd{display:none}}
.foot{font-size:13px;color:var(--muted)}
.wrap{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wrap input{-webkit-user-select:text;user-select:text}
body{touch-action:manipulation}
@media (max-width:480px){.room{display:none}}
.clue{margin:0;font-size:15px;line-height:1.4}
.clue b{font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.06em;margin-right:8px;background:var(--yellow);border:2px solid var(--ink);padding:0 6px}
.stats{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--display);font-size:14px;font-variant-numeric:tabular-nums}
.lb{display:flex;flex-direction:column;gap:8px;border-top:2px dashed var(--ink);padding-top:12px}
.lb h3{margin:0;font-family:var(--display);font-size:13px;font-weight:400;letter-spacing:.04em}
.lb form{display:flex;gap:8px;flex-wrap:wrap}
.lb input{font-family:var(--body);font-size:16px;border:3px solid var(--ink);padding:8px 10px;flex:1;min-width:0;background:var(--white);color:var(--ink)}
.lb ol{margin:4px 0 0;padding-left:24px;display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.lb li span{float:right;font-family:var(--display);font-size:13px}
.lb button:disabled{opacity:.5;cursor:default}
.lb .ts:empty{display:none}
@media (prefers-reduced-motion:reduce){.band{transform:none}.next{animation:none}}
.cast .c-red{border-color:var(--red)}.cast .c-yellow{border-color:var(--yellow)}.cast .c-green{border-color:var(--green)}.cast .c-blue{border-color:var(--blue)}

/* Auto-pause overlay: covers the game screen while the tab is hidden or unfocused. */
.pause{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(11,10,9,.6);cursor:pointer}
.pause span{font-family:var(--display);font-size:clamp(14px,calc(var(--u)*10),24px);color:var(--ink);background:var(--yellow);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:8px 14px;animation:blink 1.2s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.pause span{animation:none}}

/* Grid paper on the root so it always covers the whole window, however short or tall the page is. */
html{min-height:100%;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
body{background:transparent}