/* ============================================================
   Battlemon RPG - styles.css
   Modern fantasy adventure UI. Fully offline, no web fonts.
   ============================================================ */
:root{
  --bg:#0a0e14;
  --panel:#141c2b;
  --panel2:#1d2942;
  --ink:#eaf2ff;
  --ink-dim:#9fb2d0;
  --accent:#37e0a6;
  --accent2:#ffcf5c;
  --danger:#ff6b7a;
  --gold:#ffd76a;
  --border:#2c3b5c;
  --shadow:0 10px 30px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none}
#game-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 20%,#101a2e,#05070d 70%)}
canvas#game{display:block;width:100%;height:100%;image-rendering:auto;touch-action:none}

.hidden{display:none !important}

/* Loading screen */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle at 50% 30%,#12203a,#05070d 75%);z-index:50}
.logo{font-size:clamp(40px,8vw,96px);font-weight:900;letter-spacing:3px;color:var(--ink);text-shadow:0 4px 0 #0b1220,0 0 30px rgba(55,224,166,.35)}
.logo span{color:var(--accent);margin-left:12px}
.tagline{color:var(--ink-dim);font-size:clamp(13px,1.6vw,17px);letter-spacing:4px;text-transform:uppercase;opacity:.85;margin-top:-6px}
.loadbar{position:relative;width:min(60vw,420px);height:16px;border-radius:10px;background:#0c1526;border:1px solid var(--border);overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
#loadfill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s ease;box-shadow:0 0 14px rgba(55,224,166,.55)}
.loadmeta{display:flex;align-items:center;justify-content:space-between;width:min(60vw,420px);color:var(--ink-dim);font-size:13px;letter-spacing:1px}
#loadpct{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.loadtxt{color:var(--ink-dim);font-size:13px;letter-spacing:1px}

/* Toast */
.toast{position:absolute;top:22px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);padding:12px 22px;border-radius:12px;box-shadow:var(--shadow);z-index:60;font-size:15px;letter-spacing:.4px;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}