:root{
  --navy:#0b1b2b;
  --navy-deep:#071018;
  --brass:#d4a24c;
  --brass-light:#f0c876;
  --rocket-red:#b3242c;
  --rocket-red-light:#e34b4b;
  --cream:#f4e9d8;
  --sky:#5fa8d3;
  --panel:#16283a;
  --panel-border:#3a5470;
  --green-ok:#4a9e5c;
  --ink:#0d0d0d;
  --paper:#ecdfb8;
  --paper-dark:#dcc890;
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:var(--navy-deep);
  overflow:hidden;
  font-family:'Comic Neue','Comic Sans MS',Arial,sans-serif;
  color:var(--cream);
  user-select:none;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-touch-callout:none;
}
button{touch-action:manipulation;}

.comic-font{
  font-family:'Bangers','Impact','Arial Black',sans-serif;
  letter-spacing:0.05em;
}

/* subtle newsprint halftone dot texture, reused behind several panels */
.halftone{
  background-image:radial-gradient(circle, rgba(0,0,0,0.16) 1px, transparent 1.6px);
  background-size:7px 7px;
}

#app{
  position:relative;
  width:100vw;
  height:100vh;
  /* JS measures the REAL visible box via visualViewport (mobile browsers'
     100vh/100vw lie once the address bar/keyboard/notch are accounted for)
     and drives these; the vw/vh above is just the pre-JS/no-JS fallback. */
  width:var(--app-vw, 100vw);
  height:var(--app-vh, 100vh);
  margin:0 auto;
  box-sizing:border-box;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow:hidden;
}

.screen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hidden{display:none !important;}

.bg-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* ============ MAIN MENU ============ */
.menu-overlay{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.2rem;
  background:linear-gradient(180deg, rgba(7,16,24,0.1) 0%, rgba(7,16,24,0.5) 65%, rgba(7,16,24,0.82) 100%);
}
.title-wrap{text-align:center;}
.game-title{
  font-family:'Bangers','Impact','Arial Black',sans-serif;
  font-weight:normal;
  font-size:5.2rem;
  letter-spacing:0.06em;
  margin:0;
  color:var(--brass-light);
  -webkit-text-stroke:0.025em var(--ink);
  text-shadow:0.05em 0.05em 0 var(--rocket-red), 0.1em 0.1em 0 var(--ink);
}
.game-subtitle{
  margin:0.5rem 0 0;
  letter-spacing:0.04em;
  color:var(--cream);
  opacity:0.9;
  font-style:italic;
  font-weight:700;
}
.menu-buttons{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  width:280px;
}
.menu-footer{
  position:absolute;
  bottom:1rem;
  font-size:0.72rem;
  opacity:0.6;
  text-align:center;
}

/* ============ BUTTONS (flat, hard-inked, comic "POW" style) ============ */
.btn{
  font-family:'Bangers','Impact','Arial Black',sans-serif;
  font-size:1.15rem;
  font-weight:normal;
  letter-spacing:0.04em;
  padding:0.65rem 1.4rem;
  border-radius:4px;
  border:3px solid var(--ink);
  background:#1b3550;
  color:var(--brass-light);
  cursor:pointer;
  transition:transform 0.08s ease, box-shadow 0.08s ease;
  box-shadow:4px 4px 0 var(--ink);
}
.btn:hover{
  background:#24466b;
  transform:translate(-1px, -1px);
  box-shadow:5px 5px 0 var(--ink);
}
.btn:active{
  transform:translate(3px, 3px);
  box-shadow:1px 1px 0 var(--ink);
}
.btn-primary{
  background:var(--rocket-red);
  color:var(--cream);
}
.btn-primary:hover{
  background:var(--rocket-red-light);
}
.btn-small{
  padding:0.4rem 0.85rem;
  font-size:0.95rem;
  box-shadow:3px 3px 0 var(--ink);
}
.btn-small:hover{ box-shadow:4px 4px 0 var(--ink); }
.btn-small:active{ box-shadow:1px 1px 0 var(--ink); }
.btn-danger{
  background:#7a1418;
  color:#ffdede;
}
.btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
  transform:none !important;
}

/* ============ LEVEL SELECT ============ */
#screen-level-select{
  background:var(--navy-deep);
  display:flex;
  flex-direction:column;
  padding:1.2rem 2rem 2rem;
}
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
.panel-header h2{
  margin:0;
  font-family:'Bangers','Impact','Arial Black',sans-serif;
  font-weight:normal;
  letter-spacing:0.06em;
  color:var(--brass-light);
  font-size:2rem;
  -webkit-text-stroke:0.03em var(--ink);
}
.level-grid{
  flex:1;
  overflow-y:auto;
  padding:0.3rem 0.4rem 1rem;
}
.act-heading{
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin:1.1rem 0 0.6rem;
}
.act-heading:first-child{ margin-top:0.2rem; }
.act-heading span{
  font-family:'Bangers','Impact','Arial Black',sans-serif;
  font-size:1.3rem;
  letter-spacing:0.08em;
  color:var(--navy-deep);
  background:var(--brass-light);
  border:2px solid var(--ink);
  padding:0.15rem 0.9rem;
  border-radius:3px;
  box-shadow:3px 3px 0 rgba(0,0,0,0.5);
  transform:skewX(-8deg);
  display:inline-block;
}
.act-heading::after{
  content:"";
  flex:1;
  height:3px;
  background:repeating-linear-gradient(90deg, var(--panel-border) 0 10px, transparent 10px 16px);
}
.act-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1rem;
}
.level-tile{
  position:relative;
  border-radius:5px;
  border:3px solid var(--ink);
  background:var(--panel) center/cover no-repeat;
  padding:0.7rem;
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  cursor:pointer;
  overflow:hidden;
  box-shadow:4px 4px 0 rgba(0,0,0,0.55);
  transition:transform 0.1s ease, box-shadow 0.1s ease;
}
.level-tile::before{
  /* readability scrim so title text stays legible over tile artwork */
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(7,16,24,0.88) 0%, rgba(7,16,24,0.15) 55%, rgba(7,16,24,0.05) 100%);
  pointer-events:none;
}
.level-tile:hover:not(.locked){
  transform:translate(-2px, -2px);
  box-shadow:6px 6px 0 rgba(0,0,0,0.6);
  border-color:var(--brass);
}
.level-tile .tile-num{
  position:absolute;
  top:0.4rem;
  left:0.55rem;
  font-family:'Bangers','Impact',sans-serif;
  font-size:0.85rem;
  color:var(--brass-light);
  opacity:0.9;
  z-index:1;
}
.level-tile .tile-title{
  position:relative;
  z-index:1;
  font-size:0.88rem;
  font-weight:700;
  line-height:1.15;
  color:var(--cream);
}
.level-tile .tile-icon{
  position:absolute;
  right:0.4rem;
  bottom:0.4rem;
  font-size:1.6rem;
  opacity:0.35;
  z-index:1;
}
.level-tile.locked{
  filter:grayscale(1) brightness(0.5);
  cursor:not-allowed;
}
.level-tile.locked .tile-title::after{
  content:" (Locked)";
  font-weight:normal;
  font-size:0.7rem;
  opacity:0.8;
}
.level-tile.locked .lock-icon{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  opacity:0.55;
}
.level-tile.complete{
  border-color:var(--green-ok);
}
.level-tile.complete .tile-check{
  position:absolute;
  z-index:1;
  top:0.3rem;
  right:0.5rem;
  color:var(--green-ok);
  font-weight:bold;
  font-size:0.95rem;
  -webkit-text-stroke:0.03em var(--ink);
}

.progress-label{
  font-size:0.85rem;
  color:var(--brass-light);
  opacity:0.9;
  font-weight:700;
}

.gum-counter{
  display:flex;
  gap:3px;
  align-items:center;
}
.gum-counter .gum{
  width:14px;
  height:20px;
  background:#e8c869;
  border:2px solid var(--ink);
  border-radius:2px;
}
.gum-counter .gum.lost{
  background:#2a2a2a;
  border-color:#000;
  opacity:0.45;
}

/* ============ OPTIONS ============ */
#screen-options{
  background:var(--navy-deep);
  padding:1.2rem 2rem;
}
.options-panel{
  max-width:520px;
  margin:2rem auto;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:6px;
  padding:1.6rem;
  box-shadow:6px 6px 0 rgba(0,0,0,0.55);
  max-height:calc(100% - 2rem);
  overflow-y:auto;
}
.option-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:1.02rem;
  font-weight:700;
}
.option-row input[type=range]{width:180px;}

/* ============ DIALOGUE — rendered as an actual comic panel =========== */
#screen-dialogue{
  background:var(--paper);
  background-image:radial-gradient(circle, rgba(0,0,0,0.14) 1px, transparent 1.6px);
  background-size:8px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.comic-page{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3.4% 4%;
}
.comic-panel{
  position:relative;
  width:100%;
  height:100%;
  max-width:1400px;
  border:7px solid var(--ink);
  border-radius:3px;
  overflow:hidden;
  background:#000;
  box-shadow:10px 10px 0 rgba(0,0,0,0.4);
}
.talk-box{
  position:absolute;
  left:4%;
  right:4%;
  bottom:5%;
  z-index:3;
  display:flex;
  gap:0.9rem;
  align-items:center;
  background:#fdfaf1;
  color:#161616;
  border:3px solid var(--ink);
  border-radius:12px;
  padding:0.9rem 1.2rem;
  min-height:110px;
  box-shadow:6px 6px 0 rgba(0,0,0,0.45);
}
.talk-box::before{
  content:"";
  position:absolute;
  left:52px;
  bottom:-24px;
  border:20px solid transparent;
  border-top-color:var(--ink);
  border-bottom:0;
}
.talk-box::after{
  content:"";
  position:absolute;
  left:57px;
  bottom:-17px;
  border:15px solid transparent;
  border-top-color:#fdfaf1;
  border-bottom:0;
}
.talk-box.is-caption{
  left:4%;
  right:auto;
  bottom:auto;
  top:5%;
  max-width:58%;
  min-height:0;
  background:var(--paper);
  border-radius:2px;
  box-shadow:5px 5px 0 rgba(0,0,0,0.45);
}
.talk-box.is-caption::before,
.talk-box.is-caption::after{
  display:none;
}
.talk-box.is-caption .bubble-portrait{
  display:none;
}
.bubble-portrait{
  width:66px;
  min-width:66px;
  height:66px;
  border-radius:50%;
  border:3px solid var(--ink);
  background:#1b3550;
  overflow:hidden;
}
.bubble-portrait canvas{width:100%;height:100%;}
.talk-text-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;}
.dialogue-name{
  font-family:'Bangers','Impact',sans-serif;
  font-weight:normal;
  color:var(--rocket-red);
  letter-spacing:0.04em;
  margin-bottom:0.3rem;
  font-size:1.1rem;
}
.talk-box.is-caption .dialogue-name{
  color:var(--ink);
  font-style:italic;
  font-family:'Comic Neue','Comic Sans MS',sans-serif;
  font-weight:700;
  font-size:0.85rem;
  opacity:0.75;
}
.dialogue-text{
  font-size:1.12rem;
  font-weight:700;
  line-height:1.35;
  min-height:2.6em;
}
.talk-box.is-caption .dialogue-text{
  font-style:italic;
  font-size:1.02rem;
  min-height:0;
}
.dialogue-next{
  position:absolute;
  right:2.5%;
  bottom:2.2%;
  z-index:5;
}
.dialogue-skip{
  position:absolute;
  top:2.2%;
  right:2.5%;
  z-index:5;
  opacity:0.85;
}

/* ============ GAMEPLAY ============ */
#screen-game{background:#000;}
#game-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
}
.hud{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.7rem 1.2rem;
  pointer-events:none;
}
.hud > *{pointer-events:auto;}
.hud-left, .hud-right{display:flex;align-items:center;}
.hud-center{text-align:center;color:var(--brass-light);}
.lap-label{font-size:0.65rem;letter-spacing:0.15em;opacity:0.85;font-weight:700;}
.lap-value{font-family:'Bangers','Impact',sans-serif;font-size:1.5rem;}
.hud-banner{
  position:absolute;
  top:36%;
  left:0;right:0;
  text-align:center;
  z-index:4;
  pointer-events:none;
  opacity:0;
}
.hud-banner::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:280px; height:280px;
  transform:translate(-50%,-50%) scale(0.6) rotate(8deg);
  background:var(--brass-light);
  clip-path:polygon(50% 0%,61% 35%,95% 15%,79% 48%,100% 50%,79% 52%,95% 85%,61% 65%,50% 100%,39% 65%,5% 85%,21% 52%,0% 50%,21% 48%,5% 15%,39% 35%);
  z-index:-1;
}
.hud-banner span{
  display:inline-block;
  font-family:'Bangers','Impact','Arial Black',sans-serif;
  font-size:2.7rem;
  letter-spacing:0.04em;
  color:var(--rocket-red);
  -webkit-text-stroke:0.035em var(--ink);
  white-space:nowrap;
}
.hud-banner.show{
  animation:bannerPop 1.3s ease forwards;
}
@keyframes bannerPop{
  0%{opacity:0;}
  10%{opacity:1;}
  15%{opacity:1;}
  80%{opacity:1;}
  100%{opacity:0;}
}
.hud-banner.show::before{
  animation:burstPop 1.3s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes burstPop{
  0%{transform:translate(-50%,-50%) scale(0.2) rotate(8deg);}
  20%{transform:translate(-50%,-50%) scale(1.05) rotate(-4deg);}
  30%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}
}

/* ============ OVERLAY SCREENS (pause / result) ============ */
.overlay-screen{
  background:rgba(3,8,14,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.panel-center{
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:8px;
  padding:2rem 2.5rem;
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  align-items:stretch;
  min-width:300px;
  text-align:center;
  box-shadow:8px 8px 0 rgba(0,0,0,0.55);
  /* safety net: if a panel still can't fit a very short/small screen, it
     scrolls internally instead of pushing its own buttons off-screen */
  max-height:92%;
  overflow-y:auto;
}
.panel-center h2{
  margin:0 0 0.4rem;
  color:var(--brass-light);
  font-family:'Bangers','Impact','Arial Black',sans-serif;
  font-weight:normal;
  letter-spacing:0.05em;
  font-size:1.9rem;
  -webkit-text-stroke:0.03em var(--ink);
}
.panel-center p{margin:0 0 0.6rem; opacity:0.9; font-weight:700;}

/* ============ TOAST ============ */
.toast{
  position:fixed;
  bottom:1.4rem;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#fdfaf1;
  border:3px solid var(--ink);
  color:#161616;
  padding:0.6rem 1.2rem;
  border-radius:6px;
  font-size:0.9rem;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
  z-index:999;
  box-shadow:4px 4px 0 rgba(0,0,0,0.5);
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ============ COMIC PANEL-CUT SCREEN TRANSITION ============ */
.panel-wipe{
  position:fixed;
  inset:-10% -30%;
  z-index:9999;
  background:var(--ink);
  background-image:repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,0.05) 38px 40px);
  transform:translateX(-130%) skewX(-14deg);
  pointer-events:none;
}
.panel-wipe.wipe-cover{
  transform:translateX(0) skewX(-14deg);
  transition:none;
}
.panel-wipe.wipe-exit{
  transform:translateX(130%) skewX(-14deg);
  transition:transform 0.26s cubic-bezier(.5,0,.4,1);
}

@media (max-width:900px){
  .game-title{font-size:3rem;}
  .act-row{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:560px){
  :root{font-size:14px;}
  .game-title{font-size:2.2rem;}
  .menu-buttons{width:80%; max-width:280px;}
  .act-row{grid-template-columns:repeat(2,1fr); gap:0.6rem;}
  .level-tile{min-height:96px;}
  .panel-header h2{font-size:1.3rem;}
  .btn{padding:0.75rem 1.2rem; min-height:44px;}
  .talk-box{
    flex-direction:column;
    align-items:flex-start;
    bottom:3%;
    left:3%; right:3%;
    padding:0.7rem 0.9rem;
  }
  .bubble-portrait{width:44px; min-width:44px; height:44px;}
  .talk-box.is-caption{max-width:80%; top:3%;}
  .dialogue-text{font-size:0.95rem;}
  .dialogue-next, .dialogue-skip{padding:0.5rem 0.9rem; font-size:0.8rem;}
  .hud-banner span{font-size:2.2rem;}
  .hud-banner::before{width:170px; height:170px;}
  .panel-center{padding:1.4rem 1.6rem; min-width:0; width:88%;}
}

/* phones/tablets in landscape gameplay: keep HUD readable but compact */
@media (max-height:480px) and (orientation:landscape){
  .hud{padding:0.4rem 0.7rem;}
  .lap-value{font-size:1.05rem;}
  .gum-counter .gum{width:10px; height:15px;}
}