@font-face{font-family:sys;src:local("Courier New")}
:root{
  --ink:#07040d; --purple:#1a0b2e; --violet:#3b1760; --hot:#ff3e9e;
  --green:#b8f244; --mint:#54d98c; --cream:#ffe8a3; --blue:#3da7ff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#050308;color:var(--cream);font-family:sys,monospace;overflow:hidden}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:10;
  background:
    radial-gradient(circle at 50% 45%,transparent 0 45%,rgba(0,0,0,.25) 83%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045),rgba(255,255,255,.045) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:screen;opacity:.45
}
.screen{display:none;height:100vh;width:100vw;align-items:center;justify-content:center}
.screen.active{display:flex}
.cart{
  width:min(760px,92vw);min-height:455px;padding:30px;border:6px solid var(--green);
  background:
    linear-gradient(135deg,rgba(255,62,158,.16),transparent 38%),
    radial-gradient(circle at 78% 18%,rgba(184,242,68,.25),transparent 16%),
    linear-gradient(145deg,var(--purple),#090512 65%,#130716);
  box-shadow:0 0 0 8px #000,inset 0 0 0 4px var(--hot),0 0 50px rgba(255,62,158,.3);
}
.label{display:inline-block;border:3px solid var(--cream);padding:6px 10px;color:var(--green);margin-bottom:18px}
h1{font-size:74px;line-height:.78;margin:0;color:var(--hot);letter-spacing:-4px;text-shadow:5px 5px #000}
h1 span{color:var(--green)}
h2{font-size:24px;color:var(--cream)}
p{opacity:.85}
button{
  background:#08040d;color:var(--cream);border:3px solid var(--hot);font:bold 18px sys,monospace;
  padding:12px 18px;box-shadow:5px 5px #000;cursor:pointer
}
button:hover{background:var(--hot);color:#fff}
#bezel{
  width:960px;
  max-width:calc(100vw - 16px);
  background:#030207;
  border:6px solid var(--green);
  box-shadow:0 0 0 8px #000;
  margin:0 auto;
}
#topbar,#dialog,#mobile{background:#08040d;border-color:var(--violet);border-style:solid;color:var(--cream)}
#topbar{display:flex;justify-content:space-between;padding:9px 12px;border-width:0 0 4px;font-size:14px}
#objective{color:var(--green)}#chaos{color:var(--hot)}
canvas{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#08040d;
  margin:0 auto;
}
#dialog{min-height:58px;padding:10px 12px;border-width:4px 0 0;font-size:15px}
#speaker{color:var(--hot)}
#mobile{display:none;padding:8px 12px;border-width:4px 0 0;justify-content:space-between;touch-action:none}
#mobile button{min-width:58px;min-height:48px;margin:2px;padding:6px;font-size:14px}
.pad div{display:flex}
.act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.act button{min-width:76px}
@media (hover:none),(pointer:coarse),(max-width:800px){
  .screen.active{align-items:flex-start;justify-content:center;padding-top:8px}
  #bezel{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    border-width:4px;
    box-shadow:0 0 0 4px #000;
  }
  #topbar{font-size:11px;flex-wrap:wrap;padding:7px 8px}
  #dialog{font-size:12px;min-height:44px;padding:8px}
  #mobile{display:flex;padding:7px 8px}
  #mobile button{min-width:52px;min-height:44px;font-size:12px}
  .act button{min-width:68px}
  canvas{
    width:100%;
    height:auto;
    max-height:52vh;
    object-fit:contain;
  }
  h1{font-size:48px}
  .cart{min-height:70vh}
}

@media (orientation:landscape) and (max-height:520px){
  .screen.active{padding-top:2px}
  #bezel{
    width:min(96vw, calc((100vh - 120px) * 1.7777));
    max-width:96vw;
  }
  #topbar{font-size:10px;padding:4px 8px}
  #dialog{font-size:11px;min-height:34px;padding:5px 8px}
  #mobile{padding:4px 8px}
  #mobile button{min-height:34px;min-width:48px;font-size:11px}
}


/* Comic-page inspired START SCREEN ONLY */
#title.comic-title-page{
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,62,158,.20), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(184,242,68,.14), transparent 24%),
    #050308;
}

.comic-shell{
  position:relative;
  width:min(980px,96vw);
  min-height:min(720px,92vh);
  border:7px solid #050308;
  outline:3px solid var(--cream);
  background:
    linear-gradient(90deg,rgba(5,3,8,.95),rgba(5,3,8,.60),rgba(5,3,8,.92)),
    url("comic-page.png") center/cover no-repeat;
  box-shadow:0 0 0 8px #000, inset 0 0 0 4px rgba(255,62,158,.65);
  overflow:hidden;
  padding:28px;
}

.comic-shell:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 1px,transparent 1px,transparent 4px),
    radial-gradient(circle at 60% 20%,transparent 0 3px,rgba(0,0,0,.34) 4px,transparent 8px);
  opacity:.7;
  mix-blend-mode:screen;
}

.issue-box{
  position:absolute;
  top:20px;
  left:20px;
  z-index:3;
  width:82px;
  background:var(--cream);
  color:#111;
  border:4px solid #111;
  box-shadow:5px 5px #000;
  text-align:center;
  transform:rotate(-1deg);
}
.issue-box strong{
  display:block;
  font-size:22px;
  line-height:.9;
  padding:8px 6px;
  border-bottom:3px solid #111;
}
.issue-box span{
  display:block;
  padding:6px;
  font-weight:bold;
}

.comic-hero-panel{
  position:absolute;
  inset:34px 34px 158px 34px;
  border:5px solid #060308;
  outline:3px solid rgba(255,232,163,.75);
  background:
    linear-gradient(90deg,rgba(5,3,8,.92),rgba(5,3,8,.42),rgba(5,3,8,.72));
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.55);
}

.comic-copy{
  position:absolute;
  left:clamp(86px,11vw,132px);
  top:32px;
  max-width:720px;
  z-index:4;
  transform:rotate(-1deg);
}

.comic-copy .label{
  display:inline-block;
  background:var(--cream);
  color:#111;
  border:3px solid #111;
  padding:7px 10px;
  margin-bottom:12px;
  box-shadow:4px 4px #000;
}

.comic-copy h1{
  font-size:clamp(62px,13vw,154px);
  line-height:.72;
  margin:0;
  letter-spacing:-7px;
  color:var(--hot);
  text-shadow:7px 7px #000;
}
.comic-copy h1 span{color:var(--hot)}
.comic-copy h2{
  color:var(--green);
  font-size:clamp(24px,5vw,54px);
  margin:14px 0;
  text-shadow:4px 4px #000;
  transform:rotate(-2deg);
}

.story-card{
  display:inline-block;
  max-width:420px;
  padding:14px 16px;
  border:4px solid var(--hot);
  background:rgba(5,3,8,.86);
  color:var(--cream);
  line-height:1.35;
  font-weight:bold;
  box-shadow:5px 5px #000;
}

.controls-note{
  color:var(--cream);
  background:rgba(0,0,0,.68);
  display:inline-block;
  padding:7px 9px;
  border:2px solid rgba(255,232,163,.6);
}

.mini-panels{
  position:absolute;
  left:34px;
  right:34px;
  bottom:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  z-index:3;
}
.mini-panels div{
  min-height:104px;
  border:5px solid #050308;
  outline:2px solid rgba(255,232,163,.7);
  padding:12px;
  background:
    linear-gradient(rgba(5,3,8,.72),rgba(5,3,8,.90)),
    url("comic-page.png") center/cover no-repeat;
  color:var(--cream);
  font-weight:bold;
  font-size:16px;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.5);
}

#title button#start{
  margin-top:14px;
  background:var(--hot);
  border-color:var(--green);
  color:#fff;
  font-size:18px;
}

@media(max-width:700px){
  #title.comic-title-page{
    padding:8px;
    align-items:flex-start;
  }
  .comic-shell{
    width:calc(100vw - 16px);
    min-height:calc(100vh - 16px);
    padding:14px;
    outline-width:2px;
    border-width:4px;
    box-shadow:0 0 0 4px #000, inset 0 0 0 3px rgba(255,62,158,.65);
  }
  .issue-box{
    top:12px;
    left:12px;
    width:66px;
  }
  .issue-box strong{font-size:17px}
  .comic-hero-panel{
    inset:18px 18px 142px 18px;
  }
  .comic-copy{
    left:74px;
    top:22px;
    right:12px;
  }
  .comic-copy h1{
    font-size:clamp(54px,19vw,94px);
    letter-spacing:-4px;
  }
  .comic-copy h2{
    font-size:clamp(22px,7vw,34px);
  }
  .story-card{
    font-size:12px;
    padding:10px;
    max-width:260px;
  }
  .controls-note{
    font-size:10px;
  }
  .mini-panels{
    left:18px;
    right:18px;
    bottom:16px;
    gap:7px;
  }
  .mini-panels div{
    min-height:102px;
    font-size:11px;
    padding:8px;
    border-width:3px;
  }
  #title button#start{
    font-size:14px;
    padding:10px 12px;
  }
}


/* End-game black hole redirect animation */
#redirectOverlay{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(255,62,158,.16), transparent 18%),
    radial-gradient(circle at center, rgba(184,242,68,.12), transparent 28%),
    #030106;
  color:var(--cream);
}

#redirectOverlay.active{
  display:grid;
  animation:voidShake .18s infinite alternate;
}

.void-core{
  position:absolute;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#000;
  box-shadow:
    0 0 0 18px rgba(255,62,158,.9),
    0 0 0 32px rgba(184,242,68,.85),
    0 0 80px 36px rgba(255,62,158,.65);
  animation:voidGrow 2.1s ease-in forwards;
}

.void-ring{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  border:14px dashed var(--hot);
  box-shadow:0 0 30px var(--hot);
  animation:voidSpin .7s linear infinite, voidGrowRing 2.1s ease-in forwards;
}

.void-ring.two{
  width:260px;
  height:260px;
  border-color:var(--green);
  animation-duration:1.1s, 2.1s;
  animation-direction:reverse, normal;
}

.redirect-text{
  position:relative;
  z-index:3;
  text-align:center;
  font-weight:bold;
  font-size:clamp(28px,7vw,74px);
  line-height:.9;
  color:var(--hot);
  text-shadow:5px 5px #000;
  animation:textSuck 2.1s ease-in forwards;
}

.redirect-text span{
  display:block;
  margin-top:14px;
  color:var(--green);
  font-size:clamp(12px,2.6vw,22px);
  letter-spacing:2px;
}

@keyframes voidSpin{to{transform:rotate(360deg)}}
@keyframes voidGrow{
  0%{transform:scale(.4);filter:hue-rotate(0deg)}
  70%{transform:scale(6);filter:hue-rotate(80deg)}
  100%{transform:scale(18);filter:hue-rotate(160deg)}
}
@keyframes voidGrowRing{
  0%{transform:scale(.25);opacity:1}
  80%{transform:scale(7);opacity:.85}
  100%{transform:scale(14);opacity:0}
}
@keyframes textSuck{
  0%{transform:scale(1) rotate(0deg);opacity:1}
  65%{transform:scale(.9) rotate(-1deg);opacity:1}
  100%{transform:scale(.1) rotate(24deg);opacity:0}
}
@keyframes voidShake{
  from{transform:translate(-2px,1px)}
  to{transform:translate(2px,-1px)}
}


/* Mobile control comfort patch */
@media (hover:none), (pointer:coarse), (max-width:800px){
  body{
    min-height:100svh;
    overflow:hidden;
  }

  #game.screen.active{
    align-items:flex-start;
    padding-top:8px;
  }

  #bezel{
    display:flex;
    flex-direction:column;
    min-height:calc(100svh - 18px);
  }

  canvas{
    max-height:42svh;
  }

  #dialog{
    min-height:48px;
  }

  #mobile{
    margin-top:auto;
    min-height:205px;
    align-items:flex-end;
    padding:18px 18px calc(22px + env(safe-area-inset-bottom));
    gap:12px;
  }

  .pad{
    display:grid;
    grid-template-columns:repeat(3,58px);
    grid-template-rows:repeat(2,58px);
    gap:8px;
    align-items:end;
  }

  .pad > button[data-k="ArrowUp"]{
    grid-column:1;
    grid-row:1;
  }

  .pad > div{
    grid-column:1 / span 3;
    grid-row:2;
    display:grid;
    grid-template-columns:repeat(3,58px);
    gap:8px;
  }

  #mobile button{
    min-width:58px;
    min-height:58px;
    margin:0;
    padding:0;
    font-size:18px;
    display:grid;
    place-items:center;
  }

  .act{
    align-self:flex-end;
    display:grid;
    grid-template-columns:repeat(3,70px);
    gap:10px;
    justify-content:end;
    margin-bottom:18px;
  }

  .act button{
    min-width:70px;
    min-height:58px;
    font-size:14px;
  }
}

@media (max-width:430px) and (hover:none), (max-width:430px) and (pointer:coarse){
  #mobile{
    min-height:220px;
    padding-left:14px;
    padding-right:14px;
  }

  .pad{
    grid-template-columns:repeat(3,50px);
    grid-template-rows:repeat(2,54px);
    gap:7px;
  }

  .pad > div{
    grid-template-columns:repeat(3,50px);
    gap:7px;
  }

  #mobile button{
    min-width:50px;
    min-height:54px;
    font-size:16px;
  }

  .act{
    grid-template-columns:repeat(3,62px);
    gap:8px;
    margin-bottom:26px;
  }

  .act button{
    min-width:62px;
    min-height:54px;
    font-size:12px;
  }
}

@media (max-width:380px) and (hover:none), (max-width:380px) and (pointer:coarse){
  #mobile{
    padding-left:10px;
    padding-right:10px;
  }

  .pad{
    grid-template-columns:repeat(3,46px);
    grid-template-rows:repeat(2,50px);
    gap:6px;
  }

  .pad > div{
    grid-template-columns:repeat(3,46px);
    gap:6px;
  }

  #mobile button{
    min-width:46px;
    min-height:50px;
  }

  .act{
    grid-template-columns:repeat(3,56px);
    gap:6px;
  }

  .act button{
    min-width:56px;
    min-height:50px;
    font-size:11px;
  }
}


#scoreHud{color:var(--cream)}
#levelHud{color:var(--green)}
@media (hover:none), (pointer:coarse), (max-width:800px){
  #topbar{gap:8px}
  #topbar>div{flex:1 1 auto}
  #scoreHud,#chaos{text-align:right}
}


/* Fetch button label fit patch */
#use{
  font-size:12px;
  letter-spacing:.5px;
}

@media (hover:none), (pointer:coarse), (max-width:430px){
  #use{
    font-size:10px;
    letter-spacing:0;
  }
}