styles.css

:root{
  /* Theme */
  --bg:#1b2544; --ink:#fff; --ink-dim:#cfe4ff;
  --card:rgba(255,255,255,.06); --chip:rgba(255,255,255,.1); --btn:rgba(255,255,255,.12);
  --accent:#4ade80; --accent2:#60a5fa;
  --shadow:0 12px 30px rgba(0,0,0,.25);
  --radius:16px;

  /* Track */
  --track-pad:36px;
  --actor-size:44px;
  --tick-color:rgba(255,255,255,.2);
  --rail-color:rgba(255,255,255,.1);

  /* Scales */
  --space-xs: clamp(8px, 2vw, 14px);
  --space-sm: clamp(10px, 3vw, 18px);
  --space-md: clamp(12px, 3.5vw, 24px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Mini HUD */
.hud-mini{
  font-size:12px; opacity:.75; display:flex; gap:12px;
  padding:6px 10px;
}

/* Common page containers */
.hero, .stage, .controls, .track-wrap, .footnote, #statusWrap{
  max-width:1200px; margin-inline:auto; padding-inline: var(--space-md);
}
.hero{padding-top:10px}

/* Title */
.brand{
  font-size: clamp(40px, 6vw, 72px);
  line-height:1.2; letter-spacing:1px;
  margin:12px 0 20px;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
  text-align:center; width:100%; display:block;
}

/* Header HUD */
.hero-hud{display:flex; align-items:center; gap:10px}
.chip{background:var(--chip); padding:6px 10px; border-radius:999px; font-size:12px}

/* Top timer */
.hero-timer{flex:1; height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden}
.hero-timer > #timerBar{
  height:100%; width:100%; background:var(--accent);
  transform-origin:left center; transform:scaleX(0);
  border-radius:999px;
}

/* Stage: equation (left) + canvas (right) */
.stage{
  display:grid;
  grid-template-columns: minmax(420px, auto) max-content;
  justify-content:center; column-gap: clamp(24px, 5vw, 56px);
  align-items:center; margin-top: var(--space-xs);
}

/* Equation area */
.equation{
  justify-self:end; text-align:right; min-width:420px;
}
.equation .expr{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap: clamp(12px,2vw,20px);
  font-weight:800; font-size: clamp(28px,4.6vw,48px);
  line-height:1.15; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25);
}

/* Answer slots */
.answer-slots .slot{
  display:inline-grid; place-items:center;
  min-width: clamp(36px,4.4vw,56px); height: clamp(36px,4.4vw,56px);
  padding:0 clamp(10px,2vw,14px); border-radius:10px;
  background:#122031; color:#e2f7e8; border:2px solid rgba(255,255,255,.2);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
  font-size: clamp(20px,3.4vw,32px); line-height:1;
}
.slot.done{ background:#0f5; color:#042; border-color:#0a4 }
.slot.wrong{ background:#3a1216; color:#fee; border-color:#c33 }

/* Canvas card */
.answer-box{
  background:var(--card); border-radius:18px;
  padding: clamp(10px,2vw,16px);
  box-shadow: var(--shadow), inset 0 8px 20px rgba(0,0,0,.25);
  width: fit-content; display:inline-block;
}
#pad{
  width: clamp(220px,30vw,360px); aspect-ratio:1/1;
  border-radius:12px; border:2px solid rgba(255,255,255,.85); background:#000;
}

/* Status message */
#statusWrap{ margin: var(--space-xs) auto 0; }
.status{
  text-align:center; font-weight:700; font-size: clamp(14px,2vw,18px);
  padding:10px 14px; border-radius:12px; background:var(--card); color:#eaf2ff;
  border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 2px 8px rgba(0,0,0,.25);
  opacity:0; transform:translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.status.show{opacity:1; transform:translateY(0)}
.status:empty{display:none}
.status.hint   { background: rgba(106,137,204,.14); border-color: rgba(106,137,204,.32) }
.status.success{ background: rgba(32,197,143,.14); border-color: rgba(32,197,143,.32); color:#d8fff2 }
.status.error  { background: rgba(205,66,66,.16);  border-color: rgba(205,66,66,.36);  color:#ffe9ee }

/* Buttons */
.controls{
  display:flex; gap:12px; justify-content:center; align-items:center;
  margin-top: var(--space-sm);
}
.btn{
  border:none; background:var(--btn); color:#fff; padding:10px 14px; border-radius:10px;
  font-weight:700; font-size: clamp(14px,1.8vw,15px); cursor:pointer;
  transition: transform .05s ease, background .2s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.18) }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none }
.btn.primary{ background: rgba(96,165,250,.22) }
.btn.accent { background: rgba(74,222,128,.22) }

/* Track (runner vs monster) */
.track-wrap{ margin-top: var(--space-sm) }
.track{
  position:relative; height:64px; background: rgba(255,255,255,.07);
  border-radius:999px; overflow:hidden; padding-inline: var(--track-pad);
}
/* Optional rail + ticks (only if you render them) */
.track .rail, .track .ticks{
  position:absolute; left:var(--track-pad); right:var(--track-pad);
  top: calc(50% + 8px); height:14px;
}
.track .rail{ background: var(--rail-color); border-radius: 999px; }
.track .ticks{ display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.track .tick{ width:2px; height:100%; background: var(--tick-color); opacity:.9; }

/* Actors */
.actor{
  position:absolute; top:10px; left:0;
  font-size: var(--actor-size); line-height:1;
  user-select:none; pointer-events:none;
  transform: translateX(0); transition: transform .2s ease;
}

/* Help floating button (bigger size) */
.help-fab {
  position: fixed;
  right: 16px;
  top: 16px;                 
  z-index: 9998;

  width: 60px;              
  height: 60px;
  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff;

  font-weight: 800;
  font-size: 28px;        
  line-height: 60px;         
  text-align: center;

  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.help-fab:hover {
  background: rgba(255,255,255,.18);
}

/* Help overlay/dialog */
.help-overlay{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
}
.help-overlay[hidden]{ display:none; }
.help-dialog{
  width: min(640px, 92vw);
  background: rgba(22,30,54,.96); color: #eaf2ff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.help-dialog h2{ margin:0 0 10px; font-size: clamp(18px, 2.2vw, 22px); }
.help-list{
  margin:6px 0 14px; padding-left:20px;
  line-height:1.6; font-size: clamp(14px, 1.8vw, 16px);
}
.help-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* Keep other elements below the overlay just in case */
#pad, .stage, .answer-box, .track-wrap, .track { z-index:1; position:relative; }

/* World background (simplified but keeps the vibe) */
.world{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% -250px, rgba(80,140,255,.25) 0, rgba(0,0,0,0) 60%),
    linear-gradient(#0a1226 0%, #0c1833 55%, #0a1326 100%);
}
@keyframes scroll-x { from{background-position:0 100%} to{background-position:-10000px 100%} }
@keyframes twinkle  { 0%,100%{opacity:.7} 50%{opacity:1} }

.world .sky{
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.92) 50%, transparent 51%) 0 0/170px 170px,
    radial-gradient(1.5px 1.5px at 60% 75%, rgba(210,235,255,.8) 50%, transparent 51%) 0 0/220px 220px,
    radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,.35) 50%, transparent 51%) 0 0/160px 160px;
  animation: scroll-x 220s linear infinite, twinkle 3.5s ease-in-out infinite;
  opacity:.95;
}
.world .clouds{
  position:absolute; inset:0;
  background:
    radial-gradient(160px 100px at 100px 100%, rgba(20,46,84,.95) 62%, transparent 63%) 0 100%/360px 180px repeat-x,
    radial-gradient(200px 120px at 200px 100%, rgba(22,54,98,.92) 62%, transparent 63%) 0 100%/420px 200px repeat-x,
    linear-gradient(to top, rgba(8,22,45,.95), rgba(8,22,45,0) 65%);
  animation: scroll-x 26s linear infinite;
  opacity:.95; filter: drop-shadow(0 -6px 10px rgba(0,0,0,.5));
}