:root{
  --violet:#562eff;
  --indigo:#4338a8;
  --mint:#31ff98;
  --lav:#d5d2ff;
  --ink:#060619;
  --px:'Press Start 2P',ui-monospace,'Courier New',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* das hidden-Attribut muss jede display-Regel schlagen */
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:#000;color:#fff;font-family:var(--px);
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(28px,6vh,56px) 14px clamp(12px,2.4vh,26px);gap:clamp(10px,2vh,20px);
  overflow:hidden;-webkit-font-smoothing:none;
  image-rendering:pixelated;
  touch-action:manipulation;
}

/* ---------- header ---------- */
.hd{margin-bottom:clamp(8px,2.2vh,22px);width:100%;max-width:1238px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(7px,1.4vh,13px);text-align:center}
.brand{display:flex;align-items:baseline;font-size:clamp(16px,3.2vw,26px);letter-spacing:3px;color:var(--mint)}
.brand .m8{background:var(--mint);color:#000;padding:6px 9px 5px;margin-left:10px;
  clip-path:polygon(0 0,100% 0,100% 100%,30% 100%,0 66%)}

/* ---------- stage ---------- */
.stage{position:relative;width:100%;max-width:1238px;flex:1;min-height:0;
  border:4px solid #fff;background:#000;
  box-shadow:0 0 0 4px #000,0 0 0 8px var(--indigo)}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated}

/* Bossleiste */
.bossbar{position:absolute;left:50%;top:4px;transform:translateX(-50%);
  z-index:3;width:min(58%,300px);
  display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
.bb-name{font-size:clamp(5px,1vw,7px);letter-spacing:2px;color:var(--lav);
  text-shadow:0 1px 2px #000,0 0 4px #000}
.bb-track{display:block;width:100%;height:5px;border:1px solid rgba(255,255,255,.85);
  padding:1px;background:rgba(0,0,0,.55)}
.bb-track i{display:block;height:100%;background:var(--mint);width:100%;
  transition:width .12s linear}

/* Pokal im Dialog */
.box-art{line-height:0;margin-bottom:2px}
.box-art svg{display:block}
.box p a{color:var(--indigo);text-decoration:underline}

/* HUD */
.hud{position:absolute;top:10px;left:12px;right:12px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-start;
  font-size:clamp(7px,1.25vw,10px);letter-spacing:1px;pointer-events:none;line-height:1.8}
.hud .lives i{font-style:normal;color:var(--mint);margin-right:3px}
.hud .lives i.off{color:#2a2a3d}
.hud .right{text-align:right}
.hud .right b{font-weight:400;color:var(--mint)}
.bar{margin-top:6px;width:110px;height:8px;border:2px solid #fff;padding:1px;margin-left:auto}
.bar span{display:block;height:100%;width:0%;background:var(--mint);transition:width .25s linear}

/* ---------- pokémon-style dialogue box ---------- */
.box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);
  z-index:5;min-width:min(78%,460px);max-width:min(92%,520px);
  background:#fff;color:#000;border:4px solid #000;padding:4px;
  opacity:0;pointer-events:none;transition:opacity .18s steps(2),transform .18s steps(2)}
.box.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.box .inner{border:3px solid #000;border-radius:10px;padding:clamp(14px,3vw,24px) clamp(12px,3vw,22px);
  text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.box h2{font-size:clamp(12px,2.5vw,19px);letter-spacing:2px;line-height:1.7}
.box p{font-size:clamp(7px,1.4vw,10px);line-height:2.1;letter-spacing:1px;color:#222}
.box button{pointer-events:auto;font-family:var(--px);font-size:clamp(8px,1.5vw,11px);letter-spacing:1px;
  background:var(--violet);color:#fff;border:3px solid #000;
  padding:11px 16px;cursor:pointer;line-height:1.6;
  box-shadow:4px 4px 0 #000;transition:transform .08s steps(1),box-shadow .08s steps(1)}
.box button:hover{background:var(--mint);color:#000}
.box button:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.box .cursor::before{content:'▶';margin-right:8px;color:var(--violet);
  animation:blink 0.7s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- footer / controls ---------- */
.ft{width:100%;max-width:1238px;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:space-between;
  font-size:clamp(6px,1.1vw,9px);line-height:2;letter-spacing:1px;color:#7a7a95}
.ft a{color:var(--mint);text-decoration:none}
.ft a:hover{text-decoration:underline}
.keys b{color:#fff;font-weight:400;background:#15152b;border:2px solid #33334d;
  padding:3px 6px;margin:0 2px;display:inline-block}

.touch{display:none;gap:10px;width:100%;max-width:1238px}
.touch button{flex:1;font-family:var(--px);font-size:12px;color:#fff;
  background:#101024;border:3px solid #33334d;padding:16px 0;
  box-shadow:0 4px 0 #000}
.touch button:active{background:var(--violet)}
.touch .fire{flex:1;position:relative;display:flex}
.touch .fire #tF{flex:1}
.touch .fire.locked #tF{background:var(--violet);border-color:var(--mint);color:var(--mint)}
.touch .auto{position:absolute;right:5px;top:5px;flex:none;font-size:6px;letter-spacing:0;
  padding:5px 4px;border:2px solid #33334d;background:#000;color:#7a7a95;box-shadow:none}
.touch .fire.locked .auto{background:var(--mint);border-color:var(--mint);color:#000}
@media(hover:none) and (pointer:coarse){
  .touch{display:flex}
  .keys{display:none}
}