/* ============================================================
   BATTLEMON RPG 2 — styles.css
   DOM is only used for the boot screen. Every menu, panel,
   toast and HUD inside the game is drawn on the canvas.
   100% offline: no web fonts, no external resources.
   ============================================================ */
:root{
  --bg:#05070d;
  --ink:#eef5ff;
  --ink-dim:#9db0d0;
  --accent:#3ce39f;
  --accent2:#ffd15c;
  --border:#2b3b5e;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;background:#000;overflow:hidden;color:var(--ink);
  font-family:'Trebuchet MS','Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;user-select:none;touch-action:none;
}
#game-wrap{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 18%,#101b30,#04060c 72%);
}
canvas#game{display:block;width:100%;height:100%;touch-action:none;image-rendering:auto}
.hidden{display:none !important}

/* ---------------- Boot / loading screen ---------------- */
.screen{
  position:absolute;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:
    radial-gradient(circle at 50% 26%,rgba(60,227,159,.14),transparent 58%),
    radial-gradient(circle at 50% 30%,#12213a,#04060c 76%);
  transition:opacity .5s ease, visibility .5s ease;
}
.screen.fade{opacity:0;visibility:hidden}
.boot-logo{text-align:center;line-height:.92}
.bl-1{
  font-size:clamp(38px,7.4vw,92px);font-weight:900;letter-spacing:.10em;
  background:linear-gradient(180deg,#ffffff 0%,#9fe8ff 46%,#2fa0e0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 0 rgba(6,12,24,.9)) drop-shadow(0 0 34px rgba(60,227,159,.35));
}
.bl-2{
  font-size:clamp(20px,3.4vw,42px);font-weight:900;letter-spacing:.42em;
  color:#ffd15c;text-shadow:0 3px 0 #1a1206,0 0 26px rgba(255,209,92,.45);
  margin-top:6px;
}
.bl-2 em{color:#fff;font-style:normal;text-shadow:0 0 18px #fff}
.tagline{
  color:var(--ink-dim);font-size:clamp(11px,1.5vw,16px);letter-spacing:.34em;
  text-transform:uppercase;opacity:.9;
}
.loadbar{
  position:relative;width:min(66vw,460px);height:14px;border-radius:9px;
  background:#0a1120;border:1px solid var(--border);overflow:hidden;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.65);
}
#loadfill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#2bb888,#3ce39f 45%,#ffd15c);
  box-shadow:0 0 16px rgba(60,227,159,.6);transition:width .18s ease;
}
.loadmeta{
  display:flex;align-items:center;justify-content:space-between;
  width:min(66vw,460px);font-size:12.5px;letter-spacing:.09em;color:var(--ink-dim);
}
#loadpct{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.boot-foot{
  position:absolute;bottom:22px;left:0;right:0;text-align:center;
  font-size:11.5px;letter-spacing:.22em;color:#61728f;
}

/* Toasts are drawn on the canvas (src/ui.js) so they can be placed around the
   battle HUD; there is deliberately no DOM toast element. */