/* Stick Man Run 3D — rooftop wall identity + responsive polish */
:root{--sm-safe-l:max(12px,env(safe-area-inset-left,0px));--sm-safe-r:max(12px,env(safe-area-inset-right,0px));--sm-safe-t:max(10px,env(safe-area-inset-top,0px));--sm-safe-b:max(10px,env(safe-area-inset-bottom,0px))}
#screen-menu{padding:0;align-items:stretch;justify-content:stretch;background:linear-gradient(180deg,#c9d3d7 0 32%,#59636a 32% 35%,#31383d 35% 100%);overflow:hidden}
#screen-menu::before{content:'';position:absolute;left:0;right:0;bottom:0;height:66%;background:repeating-linear-gradient(90deg,#565e63 0 11%,#60686d 11% 22%),repeating-linear-gradient(0deg,transparent 0 58px,rgba(255,255,255,.05) 59px 61px);clip-path:polygon(0 20%,24% 20%,24% 7%,44% 7%,44% 26%,70% 26%,70% 12%,100% 12%,100% 100%,0 100%);opacity:.95;pointer-events:none}
#screen-menu::after{content:'RUN  //  VAULT  //  DON’T LOOK DOWN';position:absolute;left:max(6vw,var(--sm-safe-l));top:calc(var(--sm-safe-t) + 3vh);color:#161b1e;font:900 clamp(.8rem,2.8vw,1.25rem)/1 'Permanent Marker',cursive;letter-spacing:.12em;transform:rotate(-4deg);white-space:nowrap;max-width:calc(100vw - var(--sm-safe-l) - var(--sm-safe-r));overflow:hidden;text-overflow:ellipsis}
#screen-menu .panel{position:absolute;inset:0;width:100%;max-width:none;max-height:none;background:transparent;border:0;box-shadow:none;padding:0;text-align:left;overflow:visible;transform:none}
#screen-menu .panel::before,#screen-menu .panel::after{display:none!important}
#screen-menu .eyebrow{position:absolute;left:max(6vw,var(--sm-safe-l));top:16vh;background:#fff7bf;color:#202326;padding:.28rem .55rem;border-radius:0;border:3px solid #202326;box-shadow:4px 4px 0 #202326;transform:rotate(2deg)}
#screen-menu h1{position:absolute;left:max(6vw,var(--sm-safe-l));top:23vh;margin:0!important;background:none!important;color:#f2f2ea!important;font:900 clamp(3.4rem,11vw,8rem)/.7 'Permanent Marker',cursive!important;letter-spacing:-.05em!important;text-shadow:6px 6px 0 #141819!important;transform:rotate(-5deg);max-width:64vw}
#screen-menu h1 span{display:block;color:#ff4e42!important;font-size:.56em}
#screen-menu .subtitle{position:absolute;left:max(7vw,var(--sm-safe-l));bottom:calc(9vh + env(safe-area-inset-bottom,0px));width:min(43vw,520px);margin:0;background:#e5e0d4;color:#252728!important;border-left:8px solid #202326;padding:.65rem .8rem;font-weight:800;transform:rotate(1deg);box-shadow:5px 5px 0 rgba(0,0,0,.28)}
#screen-menu .stat-strip{position:absolute;right:max(5vw,var(--sm-safe-r));top:11vh;width:min(29vw,320px);display:flex;flex-direction:column;gap:6px;margin:0;background:transparent;border:0}
#screen-menu .stat-strip span{background:#22272a;color:#fff;border-radius:0;padding:.52rem .65rem;border:2px solid #fff;box-shadow:4px 4px 0 #ff4e42;font:800 .73rem/1 ui-monospace,monospace;transform:rotate(var(--a,-1deg))}#screen-menu .stat-strip span:nth-child(even){--a:2deg}
#screen-menu .menu-actions{position:absolute;right:max(5vw,var(--sm-safe-r));bottom:calc(8vh + env(safe-area-inset-bottom,0px));width:min(34vw,360px);display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}
#screen-menu .menu-actions button{min-height:56px;border-radius:0!important;border:3px solid #1e2224!important;background:#f0e98d!important;color:#202426!important;box-shadow:6px 6px 0 #171a1c!important;font:900 .78rem/1 'Permanent Marker',cursive!important;transform:rotate(var(--r,2deg));padding:.55rem!important}
#screen-menu .menu-actions button:nth-child(2n){--r:-2deg;background:#b6dde0!important}#screen-menu .menu-actions button:nth-child(3n){--r:1deg;background:#f4b1aa!important}
#screen-menu .menu-actions button.primary{grid-column:1/-1;min-height:72px;background:#ff4e42!important;color:#fff!important;font-size:1.05rem!important;transform:rotate(-1deg)}
#screen-how .panel,#screen-leaderboard .panel,#screen-pause .panel,#screen-gameover .panel{max-height:calc(100dvh - var(--sm-safe-t) - var(--sm-safe-b) - 18px);overflow:auto}
#screen-pause{align-items:flex-start;justify-content:flex-end;background:linear-gradient(90deg,rgba(18,22,24,.35),rgba(18,22,24,.9));padding:var(--sm-safe-t) var(--sm-safe-r) var(--sm-safe-b) var(--sm-safe-l)}
#screen-pause .panel{margin:6vh 2vw 0 0;width:min(380px,88vw);background:#e4dfd3;color:#232629;border-radius:0;border:4px solid #232629;box-shadow:8px 8px 0 #ff4e42;text-align:left;transform:rotate(1deg)}
#screen-gameover .panel{background:#e9e5da!important;color:#232629!important;border-radius:0!important;border:5px solid #232629!important;box-shadow:9px 9px 0 #ff4e42!important;transform:rotate(-1deg)}
#screen-how,#screen-leaderboard,#screen-gameover{padding:var(--sm-safe-t) var(--sm-safe-r) var(--sm-safe-b) var(--sm-safe-l)}
.game-bar{padding-left:var(--sm-safe-l);padding-right:var(--sm-safe-r);padding-top:max(0px,env(safe-area-inset-top,0px))}
.hud{padding-left:var(--sm-safe-l);padding-right:var(--sm-safe-r);padding-top:max(0px,env(safe-area-inset-top,0px))}
.hud-hint{margin-bottom:max(8px,var(--sm-safe-b))!important}
button,a{touch-action:manipulation}
.icon-btn,.hud-btn,.menu-actions button,.nn-nudge-signup,.nn-nudge-later{min-height:44px}
.icon-btn,.hud-btn{min-width:44px}
button:focus-visible,a:focus-visible{outline:3px solid #fff7bf;outline-offset:3px}
@media(max-width:700px){
  #screen-menu{overflow:auto}
  #screen-menu::before{height:58%;opacity:.72}
  #screen-menu::after{font-size:.62rem;letter-spacing:.08em;transform:rotate(-2deg)}
  #screen-menu .panel{position:relative;display:grid;grid-template-rows:auto auto auto auto 1fr;align-content:start;gap:8px;min-height:100%;padding:calc(var(--sm-safe-t) + 46px) var(--sm-safe-r) calc(var(--sm-safe-b) + 16px) var(--sm-safe-l);overflow:auto}
  #screen-menu .eyebrow,#screen-menu h1,#screen-menu .subtitle,#screen-menu .stat-strip,#screen-menu .menu-actions{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:min(92vw,560px);max-width:100%;justify-self:center}
  #screen-menu .eyebrow{width:auto;justify-self:start;font-size:.58rem}
  #screen-menu h1{font-size:clamp(3rem,17vw,5.8rem)!important}
  #screen-menu .subtitle{font-size:.72rem;padding:.55rem .65rem}
  #screen-menu .stat-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #screen-menu .stat-strip span{min-width:0;transform:none;font-size:.62rem}
  #screen-menu .menu-actions{grid-template-columns:1fr 1fr;gap:8px;margin:auto 0 0}
  #screen-menu .menu-actions button,#screen-menu .menu-actions button.primary{transform:none;min-height:46px;font-size:.65rem!important}
  #screen-menu .menu-actions button.primary{grid-column:1/-1;min-height:56px}
  #screen-how .panel,#screen-leaderboard .panel,#screen-pause .panel,#screen-gameover .panel{width:min(94vw,660px);padding:16px 14px;transform:none}
  #screen-pause{align-items:center;justify-content:center}
  #screen-pause .panel{margin:0}
  .how-grid{grid-template-columns:1fr!important}
  .hud-top{gap:5px}
  .hud-chip{min-width:0;padding:.35rem .45rem}
  .hud-chip span{font-size:.52rem}.hud-chip b{font-size:.82rem!important}
}
@media(max-height:520px) and (orientation:landscape){
  #screen-menu .panel{grid-template-columns:minmax(250px,.9fr) minmax(350px,1.1fr);grid-template-rows:auto auto 1fr;gap:6px 18px;padding:calc(var(--sm-safe-t) + 24px) var(--sm-safe-r) var(--sm-safe-b) var(--sm-safe-l)}
  #screen-menu .eyebrow{grid-column:1;grid-row:1;align-self:end}
  #screen-menu h1{grid-column:1;grid-row:2;font-size:clamp(2.3rem,11vh,3.6rem)!important}
  #screen-menu .subtitle{grid-column:1;grid-row:3;width:100%;font-size:.6rem;align-self:start}
  #screen-menu .stat-strip{grid-column:2;grid-row:1;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-self:end}
  #screen-menu .menu-actions{grid-column:2;grid-row:2/4;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-self:center}
  #screen-menu .menu-actions button,#screen-menu .menu-actions button.primary{grid-column:auto;min-height:44px;font-size:.58rem!important}
  #screen-menu .menu-actions button.primary{grid-column:1/-1}
  #screen-how .panel,#screen-leaderboard .panel,#screen-pause .panel,#screen-gameover .panel{width:min(94vw,860px);padding:12px 16px}
  .how-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
