@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{height:26px;min-height:26px;padding:4px 12px;border-width:4px 0 0;font-size:12px;overflow:hidden;white-space:nowrap}
#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;
  }
}

/* Game Boy mobile shell + endless build overrides */
#game.screen.active{
  background:radial-gradient(circle at 50% 18%,rgba(184,242,68,.10),transparent 26%),#050308;
}
#bezel{
  position:relative;
  width:min(940px,calc(100vw - 16px));
  max-height:calc(100svh - 18px);
  border:5px solid var(--green);
  border-radius:34px;
  padding:14px 18px 18px;
  background:linear-gradient(180deg,#1b1125,#08040d 70%,#050308);
  box-shadow:0 0 0 4px #000, inset 0 0 0 4px rgba(255,62,158,.55), 0 18px 0 rgba(0,0,0,.55);
  overflow:hidden;
}
#bezel:before{
  content:"DOODLEBOY // DORA EDITION";
  display:block;
  text-align:center;
  color:var(--green);
  opacity:.85;
  font-size:13px;
  letter-spacing:4px;
  padding:0 0 12px;
}
#topbar{
  border:4px solid #000;
  border-bottom:0;
  border-radius:14px 14px 0 0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.04);
}
canvas{
  border-left:4px solid var(--green);
  border-right:4px solid var(--green);
}
#dialog{
  border:4px solid #000;
  border-top:4px solid var(--violet);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.03);
}
#mobile{
  border:4px solid #000;
  border-top:4px solid var(--violet);
  border-radius:0 0 20px 20px;
}
.pad.two-way{
  display:grid;
  grid-template-columns:repeat(2,76px);
  gap:14px;
  align-items:end;
}
.pad.two-way button{min-width:76px;min-height:64px}

/* Retro Game Boy start page */
#title.gameboy-title-page{
  padding:14px;
  background:radial-gradient(circle at 50% 20%,rgba(184,242,68,.12),transparent 26%),#050308;
}
.gb-title-shell{
  width:min(760px,calc(100vw - 20px));
  min-height:min(820px,calc(100svh - 20px));
  border:6px solid var(--green);
  border-radius:38px;
  padding:18px 22px 24px;
  background:linear-gradient(180deg,#21122d,#090512 70%,#050308);
  box-shadow:0 0 0 5px #000,inset 0 0 0 4px var(--hot),0 24px 0 rgba(0,0,0,.55);
}
.gb-brand,.gb-title-footer{
  text-align:center;
  color:var(--green);
  letter-spacing:4px;
  font-size:13px;
  opacity:.9;
}
.gb-title-screen{
  min-height:560px;
  margin:18px 0;
  border:5px solid #000;
  outline:4px solid var(--green);
  border-radius:14px;
  background:linear-gradient(180deg,#20103a,#120720 65%,#07040d);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:26px;
}
.gb-title-screen: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);
}
.gb-title-copy{position:relative;z-index:2;max-width:560px}
.gb-title-copy h1{font-size:clamp(46px,11vw,96px);letter-spacing:-5px;margin:8px 0;color:var(--hot);line-height:.82}
.gb-title-copy h1 em{display:block;color:var(--cream);font-style:normal;font-size:.38em;letter-spacing:4px;margin:4px 0 2px;text-shadow:3px 3px #000}
.gb-title-copy h1 span{color:var(--green)}
.gb-title-copy h2{color:var(--cream);font-size:clamp(18px,5vw,34px)}
.gb-title-copy p{font-weight:bold;line-height:1.45}
.gb-title-copy #start,.gb-title-copy #openLeaderboard{margin-top:14px;background:var(--hot);border-color:var(--green);color:#fff;min-width:170px;text-align:center}
.gb-title-copy #openLeaderboard{margin-left:10px}
.gb-pixel-dora{position:absolute;left:24px;bottom:24px;width:64px;height:64px;background:var(--blue);box-shadow:16px 0 var(--blue),8px -8px var(--cream),32px -8px var(--cream),24px 24px #000,52px 20px var(--green)}

@media (hover:none), (pointer:coarse), (max-width:800px){
  #game.screen.active{padding-top:8px;align-items:flex-start}
  #bezel{
    width:calc(100vw - 14px);
    min-height:calc(100svh - 18px);
    max-height:calc(100svh - 18px);
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius:30px;
  }
  #bezel:before{font-size:11px;letter-spacing:3px;padding-bottom:8px}
  #topbar{font-size:11px;padding:7px 8px;gap:6px}
  canvas{max-height:47svh;object-fit:contain}
  #dialog{min-height:44px;font-size:12px;padding:8px}
  #mobile{
    min-height:126px;
    padding:14px 16px 18px;
    gap:12px;
    align-items:center;
  }
  .pad.two-way{grid-template-columns:repeat(2,64px);gap:10px}
  .pad.two-way button,#mobile button{min-width:64px;min-height:58px;font-size:16px}
  .act{grid-template-columns:repeat(3,70px);gap:8px;margin-bottom:0;align-self:center}
  .act button{min-width:70px;min-height:58px;font-size:12px}
  #title.gameboy-title-page{align-items:flex-start;padding:8px}
  .gb-title-shell{min-height:calc(100svh - 16px);padding:14px;border-width:5px;border-radius:28px}
  .gb-title-screen{min-height:calc(100svh - 178px);margin:14px 0;padding:18px}
}
@media (max-width:430px){
  #mobile{padding-left:12px;padding-right:12px}
  .pad.two-way{grid-template-columns:repeat(2,58px);gap:8px}
  .pad.two-way button,#mobile button{min-width:58px;min-height:56px}
  .act{grid-template-columns:repeat(3,62px);gap:7px}
  .act button{min-width:62px;min-height:56px;font-size:11px}
}


/* Option 1 mobile viewport patch: taller gameplay, smaller status bar, same button comfort */
@media (hover:none), (pointer:coarse), (max-width:800px){
  #bezel{
    display:flex;
    flex-direction:column;
  }
  canvas{
    width:100%;
    height:auto;
    max-height:56svh;
    object-fit:contain;
  }
  #dialog{
    min-height:34px;
    padding:6px 10px;
    font-size:11px;
    line-height:1.25;
  }
  #mobile{
    margin-top:auto;
    min-height:118px;
    padding-top:12px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
}
@media (max-width:430px){
  canvas{max-height:54svh;}
  #dialog{min-height:32px;padding:6px 8px;font-size:10.5px;}
  #mobile{min-height:112px;padding-top:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom));}
}

/* Mobile zoom-ratio patch: make gameplay feel like the pinched/zoomed Safari view,
   but keep it inside the Game Boy layout with buttons still usable. */
#playfield{
  overflow:hidden;
  border-left:4px solid var(--green);
  border-right:4px solid var(--green);
  background:#08040d;
}
#playfield canvas{
  border-left:0;
  border-right:0;
}

@media (hover:none), (pointer:coarse), (max-width:800px){
  #playfield{
    width:100%;
    flex:0 0 auto;
  }
  #playfield canvas{
    width:132%;
    max-width:none;
    height:auto;
    margin-left:-10%;
    display:block;
    object-fit:initial;
  }
  #dialog{
    min-height:32px;
    padding:5px 8px;
    font-size:10.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
  }
  #mobile{
    min-height:116px;
    padding-top:10px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
}
@media (max-width:430px){
  #playfield canvas{
    width:138%;
    margin-left:-13%;
  }
}


/* HUD enhancement */
#topbar{
  font-size:18px;
  font-weight:bold;
  letter-spacing:1px;
  align-items:center;
}
#scoreHud{
  color:var(--cream);
  font-size:22px;
  text-shadow:0 0 8px rgba(255,232,163,.4);
}
#chaos{
  color:var(--hot);
  font-size:24px;
  text-shadow:0 0 10px rgba(255,62,158,.6);
}
#levelHud{
  font-size:18px;
}
#objective{
  font-size:20px;
}

@media (hover:none),(pointer:coarse),(max-width:800px){
  #topbar{
    font-size:14px;
    padding:10px 8px;
  }
  #levelHud{font-size:15px;}
  #objective{font-size:18px;}
  #scoreHud{font-size:20px;}
  #chaos{font-size:22px;}
}


/* Move objective out of top HUD so changing objective text no longer shifts the layout */
#topbar{
  display:grid;
  grid-template-columns:1fr auto auto;
  column-gap:22px;
  justify-content:initial;
}
#objectivePanel{
  background:#08040d;
  border:4px solid #000;
  border-top:4px solid var(--green);
  border-bottom:0;
  color:var(--cream);
  padding:8px 14px;
  font-size:18px;
  font-weight:bold;
  letter-spacing:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.03);
}
#objectivePanel b{
  color:var(--hot);
}
#objective{
  color:var(--green);
  font-size:inherit;
}
#scoreHud,#chaos{
  min-width:max-content;
}
@media (hover:none),(pointer:coarse),(max-width:800px){
  #topbar{
    grid-template-columns:1fr auto auto;
    column-gap:10px;
    padding:9px 8px;
  }
  #objectivePanel{
    font-size:14px;
    padding:6px 8px;
  }
  #objective{
    font-size:inherit;
  }
  #dialog{
    border-top:4px solid var(--violet);
  }
}
@media (max-width:430px){
  #objectivePanel{
    font-size:12px;
    padding:5px 8px;
  }
}


/* Firebase leaderboard */
.player-card{
  display:grid;
  gap:4px;
  margin:10px auto 8px;
  max-width:220px;
  text-align:left;
}
.player-card label{
  color:var(--green);
  font-size:10px;
  letter-spacing:1px;
  font-weight:bold;
}
#playerName{
  width:100%;
  box-sizing:border-box;
  border:3px solid #000;
  background:#fff7d4;
  color:#07040d;
  font:700 14px monospace;
  padding:7px 8px;
  text-transform:uppercase;
  outline:none;
}
#playerName:focus{
  box-shadow:0 0 0 3px var(--green);
}
.leaderboard{
  width:min(280px, 92%);
  margin:12px auto 0;
  background:#08040d;
  border:4px solid #000;
  border-top-color:var(--hot);
  padding:8px 10px;
  color:var(--cream);
  text-align:left;
}
.leaderboard h3{
  margin:0 0 6px;
  color:var(--green);
  font-size:13px;
  letter-spacing:1px;
  text-align:center;
}
#leaderboardList{
  margin:0;
  padding-left:22px;
  font:700 12px monospace;
}
#leaderboardList li{
  margin:3px 0;
  padding-left:2px;
}
#leaderboardList li span{
  display:inline-block;
  width:92px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
  text-transform:uppercase;
}
#leaderboardList li b{
  color:var(--hot);
  margin-left:6px;
}
#leaderboardList li small{
  color:var(--green);
  margin-left:6px;
  font-size:10px;
}

/* Full leaderboard page */
#openLeaderboard{margin-top:8px;background:var(--hot);border-color:var(--green);color:#fff}
#leaderboardScreen.screen.active{align-items:flex-start;overflow:hidden;padding:14px 0}
.leaderboard-page-card{
  max-width:760px;
  width:min(760px,92vw);
  min-height:0;
  max-height:calc(100dvh - 28px);
  text-align:center;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.leaderboard-page-card h1{font-size:clamp(42px,9vw,78px);flex:0 0 auto}
.last-score-card{margin:8px auto 12px;padding:10px 14px;border:4px solid var(--hot);background:#08040d;max-width:420px;width:100%;box-shadow:5px 5px #000;flex:0 0 auto}
.last-score-card h2{margin:0 0 4px;color:var(--green);font-size:18px}
.last-score-card p{margin:0;color:var(--cream);font-weight:bold;opacity:1}
.leaderboard-page-list{
  margin:10px auto 12px;
  padding:12px 12px 12px 34px;
  text-align:left;
  width:min(540px,100%);
  font:700 18px monospace;
  background:#08040d;
  border:4px solid #000;
  border-top-color:var(--green);
  overflow-y:auto;
  overflow-x:hidden;
  flex:1 1 auto;
  min-height:130px;
  max-height:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.leaderboard-page-list li{margin:8px 0;padding-right:12px}
.leaderboard-page-list span{display:inline-block;width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;text-transform:uppercase}
.leaderboard-page-list b{color:var(--hot);margin-left:10px}
.leaderboard-page-list small{color:var(--green);margin-left:10px;font-size:13px}
#firebaseStatus{flex:0 0 auto;margin:0 0 10px}
.leaderboard-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;flex:0 0 auto}
.leaderboard-actions .share-x{
  background:var(--green);
  border-color:var(--hot);
  color:#05050a;
  flex-basis:100%;
  max-width:360px;
}
.leaderboard-actions .share-x[hidden]{display:none!important}

@media (max-width:520px){
  #leaderboardScreen.screen.active{padding:8px 0}
  .leaderboard-page-card{width:calc(100vw - 44px);padding:18px 14px;max-height:calc(100dvh - 16px)}
  .leaderboard-page-card .label{margin-bottom:8px}
  .leaderboard-page-card h1{font-size:44px;margin-bottom:8px}
  .last-score-card{margin:4px auto 8px;padding:8px 10px}
  .last-score-card h2{font-size:15px}
  .last-score-card p{font-size:13px}
  .leaderboard-page-list{font-size:13px;padding-left:28px;margin:6px auto 8px;min-height:145px}
  .leaderboard-page-list span{width:105px}
  .leaderboard-page-list small{display:block;margin-left:0}
  .leaderboard-actions{gap:8px}
  .leaderboard-actions button{font-size:13px;padding:10px}
  .leaderboard-actions .share-x{max-width:none;width:100%;font-size:14px;padding:11px 10px}
}

@media(max-width:480px){.gb-title-copy #start,.gb-title-copy #openLeaderboard{min-width:0;width:44%;padding-left:8px;padding-right:8px;font-size:16px}.gb-title-copy #openLeaderboard{margin-left:6px}.gb-title-copy h1{font-size:clamp(42px,10vw,80px)}}

/* v22: make the dialog read like a tiny built-in screen instead of a full bar */
#dialog{
  width:calc(100% - 28px);
  height:30px;
  min-height:30px;
  margin:6px 14px 0;
  padding:4px 10px;
  border:3px solid #000;
  outline:2px solid var(--violet);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18)),
    #05030a;
  color:var(--cream);
  font-size:12px;
  line-height:16px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
  box-shadow:
    inset 0 0 0 2px rgba(184,242,68,.10),
    inset 0 0 16px rgba(61,167,255,.07),
    4px 4px #000;
}
#dialog b,
#speaker{
  color:var(--hot);
  text-shadow:0 0 6px rgba(255,62,158,.55);
}
#line{
  color:var(--cream);
  text-shadow:0 0 5px rgba(255,232,163,.32);
}

@media (hover:none), (pointer:coarse), (max-width:800px){
  #dialog{
    width:calc(100% - 24px);
    height:28px;
    min-height:28px;
    margin:5px 12px 0;
    padding:3px 9px;
    font-size:11px;
    line-height:16px;
  }
}

@media (max-width:430px){
  #dialog{
    width:calc(100% - 20px);
    height:26px;
    min-height:26px;
    margin:4px 10px 0;
    padding:3px 8px;
    font-size:10.5px;
    line-height:14px;
  }
}