/* ═══════════════════════════════════════════════════════════════════════
   GRIMDARK THEME — gothic cathedral-city look for the game UI.
   Palette vars are scoped to the game UI so the READ mode keeps its own skin,
   and the cloned page sections inside the panels pick the new look up too.
   Loaded after arcade-game.css.
   ═══════════════════════════════════════════════════════════════════════ */
.gm-boot, .gm-hud, .gm-top, .gm-prompt, .gm-toasts, .gm-banner, .gm-dialog, .gm-panel, .gm-menu, .gm-pad, .gm-playbtn, .gm-hurt{
  --bg:#0b0a0c; --surface:#16130f; --surface2:#211c16;
  --line:#3a322a; --line2:#7a6430;
  --ink:#e8dfc8; --ink2:#b9ad90; --ink3:#857a62;
  --accent:#c9a24a; --accent2:#b3262e;
  --font-display:'Cinzel','Times New Roman',serif;
  --font-mono:'Cinzel','Times New Roman',serif;
  --font-body:Georgia,'Times New Roman',serif;
}
html.gm-active, body.gm-active{ background:#0b0a0c; }

/* boot */
.gm-boot{
  background:
    radial-gradient(ellipse at 50% 38%, rgba(110,22,32,.38), transparent 62%),
    radial-gradient(ellipse at 50% 120%, rgba(201,162,74,.12), transparent 60%),
    #0b0a0c;
}
.gm-boot-top{ font-family:var(--font-display); font-size:12px; letter-spacing:3px; color:var(--accent2); max-width:560px; margin:0 auto 28px; line-height:1.8; animation:none; }
.gm-boot h1{
  font-family:'UnifrakturCook','Cinzel',serif; font-weight:700; letter-spacing:1px;
  font-size:clamp(46px,9vw,92px); line-height:1.1; color:var(--accent);
  text-shadow:0 0 28px rgba(179,38,46,.65), 0 3px 0 #000;
}
.gm-boot p{ font-family:var(--font-display); font-size:13px; letter-spacing:5px; color:var(--ink2); }
.gm-start{
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:3px; padding:16px 28px;
  color:#f3e8c8; background:linear-gradient(180deg,#a3202d,#6e1620); border:2px solid var(--accent);
  box-shadow:0 0 0 2px #000, 0 6px 20px rgba(179,38,46,.35);
}
.gm-start:hover{ background:linear-gradient(180deg,#bb2634,#7e1a26); }
.gm-start:active{ transform:translateY(2px); box-shadow:0 0 0 2px #000; }
.gm-start.alt{ background:linear-gradient(180deg,#1d1914,#12100c); color:var(--ink); border-color:var(--line2); }
.gm-start.alt:hover{ border-color:var(--accent); color:var(--accent); background:linear-gradient(180deg,#26211a,#16130f); }
.gm-boot small{ font-family:var(--font-body); font-size:13px; letter-spacing:.3px; color:var(--ink3); }

/* read-mode launcher */
.gm-playbtn{
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:2px; padding:13px 16px;
  color:#f3e8c8; background:linear-gradient(180deg,#a3202d,#6e1620); border:2px solid var(--accent);
  box-shadow:0 0 0 2px #000, 0 6px 20px rgba(0,0,0,.5);
}
.gm-playbtn:hover{ background:linear-gradient(180deg,#bb2634,#7e1a26); }

/* HUD */
.gm-hud, .gm-top{ font-family:var(--font-display); }
.gm-chip{
  background:linear-gradient(180deg,rgba(26,22,17,.94),rgba(11,10,12,.94));
  border:1px solid var(--line2); box-shadow:inset 0 0 0 1px #000, 0 2px 8px rgba(0,0,0,.6);
  font-size:12px; font-weight:700; letter-spacing:1.5px; padding:6px 11px;
}
.gm-hp{ color:#d6343f; font-size:15px; letter-spacing:3px; }
.gm-score{ font-size:12px; color:var(--ink); }
.gm-coins{ font-size:12px; color:#d0a23c; }
.gm-places{ font-size:12px; color:var(--accent); }
.gm-pow{ font-size:12px; color:#e8c36a; }
.gm-btn{
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:1.5px;
  background:linear-gradient(180deg,rgba(26,22,17,.94),rgba(11,10,12,.94)); border:1px solid var(--line2); color:var(--ink);
  box-shadow:inset 0 0 0 1px #000;
}
.gm-btn:hover, .gm-btn:focus-visible{ border-color:var(--accent); color:var(--accent); }
.gm-mini{ border:2px solid var(--line2); box-shadow:inset 0 0 0 1px #000, 0 2px 8px rgba(0,0,0,.6); background:#0b0a0c; }

/* prompt / toasts / banner */
.gm-prompt{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:1.5px; background:rgba(11,10,12,.92); border:1px solid var(--accent); box-shadow:0 0 12px rgba(201,162,74,.25); }
.gm-toast{
  background:linear-gradient(180deg,#1a1611,#0f0d0a); border:1px solid var(--line2); border-left:4px solid var(--accent2);
  box-shadow:0 6px 18px rgba(0,0,0,.6); transition:transform .3s ease;
}
.gm-toast.ach{ border-left-color:var(--accent); }
.gm-toast b{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:2px; color:var(--accent); }
.gm-toast span{ font-family:var(--font-body); font-size:13px; color:var(--ink2); }
.gm-banner b{
  font-family:'Cinzel','Times New Roman',serif; font-weight:700; letter-spacing:6px;
  font-size:clamp(26px,5vw,58px); color:var(--accent);
  text-shadow:0 0 22px rgba(179,38,46,.75), 0 3px 0 #000;
}
.gm-banner span{
  font-family:var(--font-display); font-weight:700; font-size:clamp(11px,1.8vw,15px); letter-spacing:3px;
  color:var(--ink); background:rgba(11,10,12,.88); border:1px solid var(--accent); box-shadow:0 0 0 2px #000;
}

/* dialogue */
.gm-dialog{
  background:linear-gradient(180deg,#1a1611,#0f0d0a); border:3px double var(--line2);
  box-shadow:0 0 0 1px #000, 0 12px 36px rgba(0,0,0,.7);
}
.gm-dialog canvas{ border:2px solid var(--line2); background:#0b0a0c; }
.gm-dialog-body b{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:3px; color:var(--accent); }
.gm-dialog-body p{ font-family:var(--font-body); font-style:italic; font-size:17px; line-height:1.5; color:var(--ink); }
.gm-dialog-body i{ color:var(--accent2); animation:none; }

/* content panel */
.gm-panel{ background:rgba(6,5,7,.86); }
.gm-panel-box{
  background:linear-gradient(180deg,#14110d,#0c0a08); border:3px double var(--line2);
  box-shadow:0 0 0 1px #000, 0 16px 60px rgba(0,0,0,.8);
}
.gm-panel-head{ background:linear-gradient(180deg,#201a13,#14110d); border-bottom:1px solid var(--line2); }
.gm-panel-head b{ font-family:'Cinzel','Times New Roman',serif; font-weight:700; font-size:16px; letter-spacing:3px; color:var(--accent); }
.gm-panel-body .section-label{ color:var(--accent2); }
.gm-panel-body .section-title{ letter-spacing:.5px; }
.gm-panel-body .btn-primary{ background:linear-gradient(180deg,#a3202d,#6e1620); color:#f3e8c8; border:1px solid var(--accent); }
.gm-panel-body .btn-primary:hover{ background:linear-gradient(180deg,#bb2634,#7e1a26); }
.gm-panel-body .btn-secondary{ border-color:var(--line2); color:var(--ink); }
.gm-panel-body .exp-badge{ background:var(--accent2); color:#f3e8c8; }
.gm-panel-body .exp-badge.outline{ background:transparent; color:var(--accent); border-color:var(--accent); }
.gm-panel-body .exp-dot{ border-radius:0; transform:rotate(45deg); border-color:var(--accent); }
.gm-panel-body .exp-item.is-current .exp-dot{ background:var(--accent2); border-color:var(--accent2); }
.gm-panel-body .skill-card, .gm-panel-body .project-card, .gm-panel-body .plugin-card, .gm-panel-body .stat{ border:1px solid var(--line2); }
.gm-panel-body img{ filter:saturate(.85) contrast(1.05); }

/* pause menu */
.gm-menu{ background:rgba(6,5,7,.9); }
.gm-menu-box{ background:linear-gradient(180deg,#1a1611,#0f0d0a); border:3px double var(--line2); box-shadow:0 0 0 1px #000, 0 16px 50px rgba(0,0,0,.8); }
.gm-menu h3{ font-family:'Cinzel','Times New Roman',serif; font-weight:700; font-size:22px; letter-spacing:6px; color:var(--accent); text-shadow:0 0 16px rgba(179,38,46,.6); }
.gm-menu li{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:2px; }
.gm-menu li.sel{ color:var(--accent); background:rgba(201,162,74,.1); }
.gm-menu li.sel::before{ content:'✠ '; color:var(--accent2); }
.gm-menu p{ font-family:var(--font-display); font-size:10px; letter-spacing:1.5px; }
.gm-scores h4{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:3px; color:var(--accent2); }
.gm-scores ol{ font-family:var(--font-display); font-size:12px; letter-spacing:1px; }

/* touch pad */
.gm-joy{ background:rgba(22,19,15,.75); border:2px solid var(--line2); }
.gm-joy i{ background:var(--accent); }
.gm-pad-btns button{ background:rgba(22,19,15,.85); border:2px solid var(--line2); font-family:var(--font-display); font-weight:700; }
.gm-fire{ border-color:var(--accent2) !important; color:var(--accent2) !important; }
.gm-act{ border-color:var(--accent) !important; color:var(--accent) !important; }