:root{
  --bg:#100d18;
  --panel:#191522;
  --panel-2:#211b2c;
  --text:#fff8ea;
  --muted:#a9a0b3;
  --gold:#ffc462;
  --green:#6cf6b1;
  --red:#ff6c79;
  --blue:#67c8ff;
  --line:rgba(255,255,255,.11);
  --shadow:0 24px 70px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{width:100%;min-height:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  width:100%;
  min-height:100%;
  margin:0;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  background:
    radial-gradient(circle at 20% -10%,rgba(108,246,177,.09),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(103,200,255,.08),transparent 32%),
    var(--bg);
  color:var(--text);
  font-family:ui-rounded,"SF Pro Rounded","SF Pro Display",system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}
main{min-width:0}

.app-shell{
  width:min(100%,1060px);
  margin:0 auto;
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 2px 12px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;min-width:0;border:0;background:none;padding:8px 0;cursor:pointer;text-align:left}
.brand>span:last-child{min-width:0}
.brand-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px rgba(255,196,98,.6)}
.brand strong,.brand small{display:block;white-space:normal}.brand strong{font-size:14px;letter-spacing:.08em}.brand small{font-size:9px;color:var(--muted);letter-spacing:.2em;margin-top:2px}
.icon-btn,.hud-btn{min-height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);padding:0 12px;font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer;flex:0 0 auto}

.screen{display:none;min-width:0}.screen.active{display:block}.game-screen{width:100%;min-width:0}
.panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:28px;box-shadow:var(--shadow);overflow:hidden}

.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:center;min-width:0}
#heroCanvas{display:block;width:100%;height:auto;max-width:100%;background:#0f121a}
.hero-copy{padding:34px;min-width:0}
.eyebrow{margin:0 0 9px;color:var(--gold);font-size:10px;font-weight:1000;letter-spacing:.2em;text-transform:uppercase}
h1,h2,p{margin-top:0}h1{font-size:clamp(34px,6vw,55px);line-height:.98;letter-spacing:-.045em;margin-bottom:18px}h2{font-size:32px;letter-spacing:-.025em}p{line-height:1.55}.hero-copy>p:not(.eyebrow),.result>p:not(.eyebrow){color:#d4ccd9}
.primary-btn,.secondary-btn{width:100%;min-height:54px;border-radius:16px;font-weight:1000;letter-spacing:.06em;cursor:pointer}.primary-btn{border:0;background:linear-gradient(135deg,#ffd27d,#f4a842);color:#241a0e;margin-top:12px}.secondary-btn{border:1px solid var(--line);background:rgba(255,255,255,.045);margin-top:10px}

.hud{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;gap:10px;width:100%;min-width:0;margin:0 2px 10px}.hud>div{min-width:0}.hud small,.hud strong{display:block}.hud small{color:var(--muted);font-size:9px;letter-spacing:.17em}.hud strong{font-size:17px;letter-spacing:.08em;white-space:nowrap}.objective{text-align:center}.hud-btn{cursor:pointer}

/*
  Phaser's own Scale.FIT manager controls the canvas size. Do not absolutely
  stretch the canvas: on iOS that can leave part of the game outside its parent
  after the browser bars expand/collapse.
*/
.game-frame{
  position:relative;
  width:100%;
  min-width:0;
  border-radius:24px;
  background:#10141c;
  touch-action:none;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.phaser-host{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  aspect-ratio:11 / 7;
  margin:0 auto;
  overflow:hidden;
  background:#0a0f18;
  touch-action:none;
  min-width:0;
  min-height:0;
}
.phaser-host.portrait{aspect-ratio:7 / 11}
.phaser-host.landscape{aspect-ratio:11 / 7}
.phaser-host canvas{
  display:block!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  touch-action:none!important;
}
.game-message{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);min-width:min(220px,80%);max-width:84%;padding:11px 16px;border-radius:999px;text-align:center;background:rgba(10,10,15,.87);border:1px solid rgba(255,255,255,.15);font-size:13px;font-weight:1000;letter-spacing:.07em;opacity:0;pointer-events:none;transition:.18s}.game-message.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

.mobile-controls{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
  padding:12px 6px 2px;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.dpad{
  --dpad-cell:clamp(40px,12vw,58px);
  justify-self:start;
  display:grid;
  grid-template-columns:repeat(3,var(--dpad-cell));
  grid-template-rows:repeat(3,var(--dpad-cell));
  gap:4px;
}
.dpad button,.punch-btn{border:1px solid var(--line);background:rgba(255,255,255,.065);touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.dpad button{border-radius:15px;font-size:18px;font-weight:1000}.dpad button:active,.punch-btn:active{transform:scale(.96);background:rgba(255,255,255,.14)}.dpad-center{border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}
.punch-btn{justify-self:end;width:clamp(78px,25vw,112px);height:clamp(78px,25vw,112px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd98b,#f0a03a 65%,#c97a22);color:#26190b;border:4px solid rgba(255,255,255,.16);font-weight:1000;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12)}.punch-btn span,.punch-btn small{display:block}.punch-btn span{font-size:clamp(20px,6vw,25px);letter-spacing:.03em}.punch-btn small{font-size:9px;letter-spacing:.15em;margin-top:2px}.keyboard-hint{text-align:center;margin:8px 0 0;color:#746b7e;font-size:10px}

.result{text-align:center;padding-bottom:28px}.result canvas{display:block;width:100%;height:auto;max-width:100%;background:#11141c}.result>p,.result>h2,.result>button{max-width:520px;margin-left:auto;margin-right:auto}.result .eyebrow{margin-top:26px}.result .secondary-btn{display:block}
.modal{width:min(calc(100% - 28px),520px);border:1px solid var(--line);border-radius:24px;background:#1a1622;color:var(--text);padding:0;box-shadow:var(--shadow)}.modal::backdrop{background:rgba(0,0,0,.74);backdrop-filter:blur(5px)}.modal-inner{position:relative;padding:28px}.modal-close{position:absolute;right:14px;top:12px;width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.05);font-size:24px;cursor:pointer}.instructions{display:grid;gap:10px;margin-top:20px}.instructions>div{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:13px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.055)}.instructions span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,196,98,.12);color:var(--gold);font-weight:1000}.instructions p{margin:0;color:var(--muted);font-size:14px}.instructions strong{color:var(--text)}.secret-modal{text-align:center}.secret-message{padding:18px;border:1px dashed rgba(255,196,98,.35);border-radius:18px;background:rgba(255,196,98,.06)}code{color:#ffd284}

/*
  Touch devices / small viewports: the whole game screen is one viewport-sized
  flex column. JS measures the *visible* viewport (visualViewport on Safari) and
  gives the dojo exactly the height left after the HUD + controls. This prevents
  the bottom controls or part of the arena from falling behind mobile browser UI.
*/
@media (max-width:900px), (pointer:coarse){
  .app-shell{
    width:100%;
    padding-top:max(7px,env(safe-area-inset-top));
    padding-right:max(7px,env(safe-area-inset-right));
    padding-bottom:max(7px,env(safe-area-inset-bottom));
    padding-left:max(7px,env(safe-area-inset-left));
  }

  .topbar{gap:8px}.brand strong{font-size:12px}.brand small{font-size:8px;letter-spacing:.14em}.icon-btn{padding:0 9px;font-size:9px}
  .hero{grid-template-columns:minmax(0,1fr)}.hero-copy{padding:24px}.hero #heroCanvas{max-height:330px;object-fit:cover}

  body.game-active{
    height:100vh;
    height:100dvh;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body.game-active .app-shell{
    height:100vh;
    height:100dvh;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  body.game-active .topbar{
    flex:0 0 auto;
    padding:1px 2px 5px;
  }
  body.game-active .brand{padding:4px 0}
  body.game-active .brand small{display:none}
  body.game-active .icon-btn{min-height:34px}
  body.game-active main{
    flex:1 1 auto;
    min-height:0;
    display:flex;
  }
  body.game-active .game-screen.active{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
  }

  .hud{
    flex:0 0 auto;
    width:100%;
    max-width:520px;
    margin:0 auto 5px;
    grid-template-columns:repeat(3,minmax(0,1fr)) auto;
    gap:5px;
    padding:0 1px;
  }
  .hud-btn{grid-column:auto;width:auto;min-height:34px;padding:0 8px;font-size:8px}
  .hud small{font-size:7px;letter-spacing:.12em}.hud strong{font-size:13px}.objective{text-align:center}

  .game-frame{
    flex:0 0 auto;
    max-width:520px;
    margin:0 auto;
    border-radius:16px;
    box-shadow:0 12px 35px rgba(0,0,0,.28);
  }
  .phaser-host,
  .phaser-host.portrait,
  .phaser-host.landscape{
    width:100%;
    height:100%;
    max-width:100%;
    border-radius:15px;
  }

  .mobile-controls{
    flex:0 0 auto;
    width:100%;
    max-width:520px;
    margin:0 auto;
    padding:6px 4px max(2px,env(safe-area-inset-bottom));
    gap:8px;
  }
  .dpad{--dpad-cell:clamp(38px,12vw,50px);gap:3px}
  .punch-btn{width:clamp(76px,23vw,96px);height:clamp(76px,23vw,96px);border-width:3px}
  .keyboard-hint{display:none}

  .result{padding-bottom:22px}.modal-inner{padding:24px 20px}
}

/* Extra compression for short phones (SE-class screens and browser chrome open). */
@media (max-height:700px) and (max-width:900px), (max-height:700px) and (pointer:coarse){
  body.game-active .topbar{padding:0 2px 3px}
  body.game-active .brand{padding:2px 0}
  body.game-active .brand-dot{width:9px;height:9px}
  body.game-active .brand strong{font-size:10px}
  body.game-active .icon-btn{min-height:30px;padding:0 7px;font-size:8px}
  .hud{margin-bottom:3px;gap:3px}.hud small{font-size:6px}.hud strong{font-size:11px}.hud-btn{min-height:30px;padding:0 6px;font-size:7px}
  .mobile-controls{padding-top:4px;gap:5px}
  .dpad{--dpad-cell:clamp(34px,10.5vw,42px);gap:3px}
  .dpad button{font-size:15px;border-radius:12px}
  .punch-btn{width:clamp(68px,20vw,82px);height:clamp(68px,20vw,82px)}
  .punch-btn span{font-size:18px}.punch-btn small{font-size:7px}
}

@media (max-width:360px){
  .app-shell{padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right))}
  .hero-copy{padding:20px}
  .hud strong{font-size:11px}
  .hud-btn{padding:0 5px}
  .dpad{--dpad-cell:clamp(34px,11vw,40px)}
  .punch-btn{width:clamp(68px,22vw,80px);height:clamp(68px,22vw,80px)}
}

@media (min-width:901px) and (pointer:fine){
  .mobile-controls{max-width:560px;margin:0 auto}.game-screen{padding-bottom:20px}
}

[hidden]{display:none!important}