@font-face{
  font-family:'BaruSans';
  src:url('font/BaruSans-Light.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'BaruSans';
  src:url('font/BaruSans-SemiBold.woff') format('woff');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
:root{
  /* ---- evai design tokens — the only colors/radii allowed anywhere in this file ---- */
  --evai-black: #1c1c1c;
  --evai-white: #ffffff;
  --evai-light-gray: #eaeaea;
  --evai-medium-gray: #cdcdcd;
  --evai-dark-gray: #9b9b9b;
  --evai-transp-white-10: rgba(255, 255, 255, 0.1);

  --evai-rad-2: 0.125em;
  --evai-rad-4: 0.25em;
  --evai-rad-6: 0.375em;
  --evai-rad-12: 0.75em;

  --evai-pad-4: 0.25em;
  --evai-pad-6: 0.375em;
  --evai-pad-8: 0.5em;
  --evai-pad-10: 0.625em;
  --evai-pad-12: 0.75em;
  --evai-pad-20: 1.25em;
  --evai-pad-24: 1.5em;

  --evai-gap-4: 0.25em;
  --evai-gap-8: 0.5em;
  --evai-gap-12: 0.75em;
  --evai-gap-24: 1.5em;

  /* ---- semantic aliases — all resolve directly to evai tokens above ---- */
  --bg:var(--evai-white);
  --bg2:var(--evai-light-gray);
  --fg:var(--evai-black);
  --fg-dim:var(--evai-dark-gray);
}
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  /* iOS long-press callout (Save Image/Copy/select) on the touch-control icons —
     that's the "hold and everything gets selected" bug, and it interrupts an
     in-progress hold on a move/jump button mid-air, dropping the player */
  -webkit-touch-callout:none;
}
img{ -webkit-user-drag:none; user-drag:none; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--bg);
  overflow:hidden;
  font-family: 'BaruSans', -apple-system, sans-serif;
  color:var(--fg);
  touch-action:none;
}
#wrap{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
#stage{
  position:relative;
}
canvas{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display:block;
  background:var(--bg);
  /* floor so a tiny/misconfigured container (e.g. width:auto with no real
     size) never shrinks the game to an illegible size — it clips/scrolls
     inside the container instead of shrinking past this */
  min-width:150px;
  min-height:250px;
  /* the canvas has no click/touch listeners at all — gameplay input is
     keyboard (keydown/keyup on window) or the #controls buttons, never the
     canvas itself — so it never needs to be a drag/press target */
  pointer-events:none;
}

/* ---------- HUD ---------- */
#hud{
  position:absolute; top:0; right:0; bottom:0;
  display:flex; align-items:flex-start;
  pointer-events:none;
}
#progress-col{
  display:flex; flex-direction:column; align-items:center;
  height:78%;
  margin-top:8px;
  margin-right:4px;
}
#top-label, #bottom-label{
  font-size:8px;
  letter-spacing:1px;
  color:var(--fg-dim);
}
#bar-track{
  /* stepped pixel corners (squares, not a smooth curve) — matches the Figma capsule,
     which is "rounded" by omitting corner squares rather than by a border-radius.
     NOTE: this clip-path is sized for the track's own (border-included) width — it
     must not also be applied to #bar-fill, whose box is much narrower (track width
     minus the 2px border on each side), or the same 3px cut becomes proportionally
     huge and collapses the fill into a sliver. */
  clip-path: polygon(
    3px 0, calc(100% - 3px) 0,
    100% 3px, 100% calc(100% - 3px),
    calc(100% - 3px) 100%, 3px 100%,
    0 calc(100% - 3px), 0 3px
  );
  flex:1;
  width:10px;
  margin:4px 0;
  background:var(--bg);
  border:2px solid var(--fg);
  position:relative;
  overflow:hidden;
}
#bar-fill{
  position:absolute;
  bottom:0; left:0; width:100%;
  height:0%;
  background:var(--fg);
}
#pct{
  font-size:8px;
  color:var(--fg);
  margin-top:2px;
}

#lives{
  position:absolute; top:8px; left:8px;
  display:flex; gap:var(--evai-gap-4);
  pointer-events:none; /* purely visual (skull icons), never a press target */
}
.skull-mini{ width:14px; height:14px; }

/* ---------- Overlays ---------- */
/* fixed (not absolute) so these fill the real iframe viewport, not the small
   letterboxed #stage/canvas box — the canvas keeps a fixed 180:300 aspect ratio
   and gets pillarboxed on tall/narrow embeds, but the menu screens shouldn't be
   squeezed into that same tiny box, they should use the full available space */
.overlay{
  position:fixed; inset:0;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:var(--evai-gap-12);
  padding:var(--evai-pad-20) var(--evai-pad-12);
  overflow-y:auto;
  z-index:20;
}
#screen-start{
  padding-inline:24px;
  padding-block:34px;
  justify-content:space-between;
  gap:0;
}
.hidden{ display:none !important; }

.pixel-title{
  font-size:22px;
  font-weight:600;
  letter-spacing:0.2px;
  color:var(--fg);
}
.final-countdown-num{
  font-size:48px;
  font-weight:600;
  line-height:1;
  color:var(--fg);
}
.pixel-sub{
  font-size:13px;
  font-weight:400;
  letter-spacing:0.2px;
  line-height:1.5;
  color:var(--fg);
}
.skull-row{ display:flex; gap:var(--evai-gap-12); margin:6px 0; }
.skull-row svg{ width:26px; height:26px; }

.menu-line{
  font-size:13px;
  font-weight:400;
  cursor:pointer;
  padding:var(--evai-pad-4) var(--evai-pad-10);
  max-width:260px;
  white-space:normal;
}
.menu-line .cursor{ opacity:0; margin-right:6px; }
.menu-line.active .cursor{ opacity:1; }
.menu-line.active{ color:var(--fg); font-weight:600; }
.menu-line:not(.active){ color:var(--fg-dim); }

/* ---------- Start screen (matches Figma "Start Game Screen") ---------- */
.hero-sprite{
  width:52px;
  height:auto;
  image-rendering:pixelated;
  margin-bottom:2px;
}
.title-404{
  font-size:48px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1;
  color:var(--fg);
}
.lead-text{
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  color:var(--fg);
  max-width:260px;
}
.tips-block{ display:flex; flex-direction:column; align-items:center; gap:var(--evai-gap-12); }
.tips-label{
  font-size:10px;
  font-weight:400;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.tips-list{ display:flex; flex-direction:column; gap:var(--evai-gap-8); }
.tip-row{ display:flex; align-items:center; gap:var(--evai-gap-12); }
.tip-icon{
  width:26px; height:26px;
  flex:none;
  display:block;
}
.tip-label{
  font-size:12px;
  font-weight:400;
  color:var(--fg-dim);
  text-align:left;
}

/* reusable button-style menu (Figma "Frame 244511": black primary + white/bordered secondary) */
.menu-buttons{ display:flex; flex-direction:column; gap:var(--evai-gap-8); width:100%; max-width:260px; }
.menu-buttons .menu-line{
  max-width:none;
  width:100%;
  padding:var(--evai-pad-12) var(--evai-pad-10);
  border-radius:var(--evai-rad-6);
  font-size:14px;
  font-weight:600;
  text-align:center;
}
.menu-buttons .menu-line.btn-primary{
  background:var(--fg);
  color:var(--bg);
  border:1px solid var(--fg);
}
.menu-buttons .menu-line.btn-secondary{
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--evai-medium-gray);
}

/* ---------- touch controls ---------- */
/* the tap target itself stays a fixed 56x56 box (never below the 48x48 minimum
   touch-target size), drawn here with the same border/radius tokens as the
   Control Tips icons' baked-in box (border:#CDCDCD == --evai-medium-gray,
   radius ~5.5/68 == --evai-rad-6) — the arrow glyph is a separate, smaller
   icon centered inside it, since the box size and glyph size are independent */
#controls{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:space-between;
  padding:0 var(--evai-pad-10);
  z-index:30; /* above .overlay (20) so these never get hidden underneath it */
}
.ctl-btn{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  border:1px solid var(--evai-medium-gray);
  border-radius:var(--evai-rad-6);
}
.ctl-btn:active{ opacity:0.6; }
.ctl-icon{
  width:24px; height:24px;
  display:block;
  pointer-events:none; /* the pointerdown/up handlers are bound to .ctl-btn, not the icon */
}
#side-btns{ display:flex; gap:var(--evai-gap-8); }