/* ============================================================
   MIDNIGHT SURVIVORS — UI stylesheet
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #d4af37;
  --gold-bright: #ffd24a;
  --blood: #ff5964;
  --panel: rgba(13, 10, 22, .94);
  --panel-border: #3a2f55;
  --text: #d8d2e8;
  --muted: #776f92;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0b0814;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

#game { position: fixed; inset: 0; display: block; touch-action: none; }

.hidden { display: none !important; }
.gold-text { color: var(--gold-bright); }
.muted { color: var(--muted); font-size: 13px; }

/* ================= HUD ================= */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

#xpbar {
  position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background: rgba(8, 5, 16, .85);
  border-bottom: 1px solid #2a2140;
}
#xpfill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2e6fd8, #4fc3f7 60%, #8be9ff);
  box-shadow: 0 0 12px rgba(79, 195, 247, .7);
  transition: width .15s ease-out;
}

#hudrow {
  position: absolute; top: 20px; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0 18px;
}
#timer {
  font-size: 34px; font-weight: bold; letter-spacing: 4px;
  color: #efe9dc;
  text-shadow: 0 0 14px rgba(180, 90, 224, .55), 0 2px 4px #000;
}
.hudstat {
  font-size: 17px; font-weight: bold; color: #cfc7e2;
  text-shadow: 0 2px 3px #000;
}
.hudright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#btn-hud-pause {
  pointer-events: auto;
  font-family: inherit; font-size: 13px;
  color: #cfc7e2;
  background: rgba(13, 10, 22, .7);
  border: 1px solid #3a2f55; border-radius: 8px;
  padding: 7px 12px; margin-top: 4px;
  cursor: pointer;
}
#btn-hud-pause:hover { border-color: var(--gold); color: var(--gold-bright); }

#slots { position: absolute; top: 22px; left: 18px; margin-top: 26px; max-width: 44vw; }
#slotweapons, #slotpassives { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.slot canvas { display: block; border-radius: 6px; }
/* weapon slot states: maxed = steady gold, ready = pulsing "open a chest" */
.slot.maxed canvas { box-shadow: 0 0 0 1px rgba(212, 175, 55, .55); }
.slot.pmax canvas { box-shadow: 0 0 0 1px rgba(125, 136, 168, .55); }
.slot.ready canvas { animation: slotpulse 1.1s ease-in-out infinite; }
.slot.fuseready canvas { animation: slotpulsef 1.1s ease-in-out infinite; }
@keyframes slotpulse {
  0%, 100% { box-shadow: 0 0 2px 1px rgba(255, 210, 74, .35); }
  50% { box-shadow: 0 0 10px 2px rgba(255, 210, 74, .85); }
}
@keyframes slotpulsef {
  0%, 100% { box-shadow: 0 0 2px 1px rgba(205, 182, 255, .35); }
  50% { box-shadow: 0 0 10px 2px rgba(205, 182, 255, .9); }
}
.slotbadge {
  position: absolute; top: -6px; right: -7px;
  min-width: 14px; height: 14px; border-radius: 50%;
  background: #2a2140; border: 1px solid var(--gold);
  color: var(--gold-bright); font-size: 9px; line-height: 12px; text-align: center;
  z-index: 1;
}
.slotbadge.fuse { border-color: #8a6fd6; color: #cdb6ff; }
.pips { display: flex; gap: 2px; }
.pip {
  width: 4px; height: 4px; border-radius: 50%;
  background: #3a3352;
}
.pip.on { background: var(--gold-bright); box-shadow: 0 0 4px var(--gold-bright); }
.pip.evolved { width: auto; height: auto; background: none; color: var(--blood); font-size: 9px; line-height: 5px; }
.pip.evolved.fused { color: var(--gold-bright); letter-spacing: -1px; }
.pip.maxlbl {
  width: auto; height: auto; background: none;
  color: var(--gold-bright); font-size: 8px; line-height: 5px;
  letter-spacing: .5px; font-weight: bold;
}

#bossbar {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: min(560px, 80vw); text-align: center;
}
#bossname {
  font-size: 15px; letter-spacing: 3px; color: var(--blood);
  text-shadow: 0 0 10px rgba(255, 89, 100, .6), 0 2px 3px #000;
  margin-bottom: 4px;
}
#bosstrack {
  height: 10px; border: 1px solid #5c1f26; border-radius: 5px;
  background: rgba(8, 5, 16, .8); overflow: hidden;
}
#bossfill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #8f1f2b, #ff5964);
  transition: width .12s ease-out;
}

/* ================= banner ================= */
#banner {
  position: fixed; top: 22%; left: 0; right: 0;
  text-align: center; pointer-events: none; z-index: 6;
  opacity: 0;
}
#banner.show { animation: bannerpop 2.6s ease forwards; }
@keyframes bannerpop {
  0% { opacity: 0; transform: scale(.85); }
  12% { opacity: 1; transform: scale(1.04); }
  18% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.02); }
}
#bannertitle {
  font-size: 40px; font-weight: bold; letter-spacing: 5px;
  text-shadow: 0 0 22px rgba(0, 0, 0, .9), 0 3px 6px #000;
}
#bannersub {
  font-size: 17px; color: #cfc7e2; letter-spacing: 2px;
  text-shadow: 0 2px 4px #000;
}

/* ================= screens ================= */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.screen.dim { background: rgba(5, 3, 12, .72); backdrop-filter: blur(2px); }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: 0 0 60px rgba(120, 60, 200, .18), 0 24px 60px rgba(0, 0, 0, .7);
  padding: 34px 40px;
  text-align: center;
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
}
.panel.wide { max-width: 860px; }

h1 {
  font-size: clamp(40px, 7vw, 64px);
  letter-spacing: 8px; line-height: 1.05;
  color: #efe9dc;
  text-shadow: 0 0 30px rgba(180, 90, 224, .5), 0 0 8px rgba(255, 210, 74, .25), 0 4px 8px #000;
  margin-bottom: 10px;
}
h2 {
  font-size: 26px; letter-spacing: 5px; color: #efe9dc;
  text-shadow: 0 0 16px rgba(180, 90, 224, .4);
  margin-bottom: 16px;
}
h2.win, #over-title.win { color: var(--gold-bright); }
#over-title.lose { color: var(--blood); }
.subhead { font-size: 14px; letter-spacing: 3px; color: var(--muted); margin: 18px 0 8px; }
.tagline { color: #a89ac2; font-style: italic; margin-bottom: 26px; }

.title-panel { position: relative; overflow: hidden; }
.title-moon {
  position: absolute; top: -70px; right: -70px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #f3ead2, #cabd9a 55%, #948a6c);
  box-shadow: 0 0 80px 24px rgba(240, 230, 200, .16);
  opacity: .5; pointer-events: none;
}

.menu-buttons { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-bottom: 20px; }
.controls { margin-top: 18px; line-height: 1.7; }

/* menu tiles (main menu) */
.menu-group { width: 100%; }
.menu-grouplabel {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); text-align: left; margin: 2px 2px 6px;
}
.menu-tiles {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
}
.tile {
  font-family: inherit;
  flex: 1 1 128px; max-width: 236px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 74px;
  background: linear-gradient(180deg, #1d1730, #141021);
  border: 1px solid #3a2f55; border-radius: 11px;
  color: var(--text); cursor: pointer;
  transition: transform .13s, border-color .13s, box-shadow .13s, color .13s;
  padding: 10px 6px;
}
.tile:hover {
  border-color: var(--gold); color: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 14px rgba(212, 175, 55, .2);
}
.tile-ico { font-size: 22px; line-height: 1; }
.tile-label { font-size: 13px; letter-spacing: .5px; }
.tile-sub { font-size: 11px; margin-top: -1px; }
.profile-chip {
  font-family: inherit; align-self: center; margin-top: 4px;
  background: transparent; border: 1px solid #3a2f55; border-radius: 20px;
  color: var(--muted); padding: 7px 20px; font-size: 13px; letter-spacing: 1px;
  cursor: pointer; transition: color .13s, border-color .13s;
}
.profile-chip:hover { color: var(--text); border-color: #5c4d85; }

/* pause layout */
.pausebtns { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 16px; }
.pausebtns .btn { width: 260px; max-width: 100%; }
.btn.danger {
  color: #b56b74; border-color: #5c2f38; margin-top: 16px;
  min-width: 0; padding: 9px 24px; font-size: 14px;
}
.btn.danger:hover {
  color: var(--blood); border-color: var(--blood);
  box-shadow: 0 0 14px rgba(255, 89, 100, .22);
}

/* ================= buttons ================= */
.btn {
  font-family: inherit;
  font-size: 16px; letter-spacing: 2px;
  color: #f0e9da;
  background: linear-gradient(180deg, #3a2f55, #241d38);
  border: 1px solid #5c4d85;
  border-radius: 8px;
  padding: 12px 30px;
  cursor: pointer;
  transition: all .15s;
  min-width: 230px;
}
.btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: 0 0 18px rgba(212, 175, 55, .3);
  transform: translateY(-1px);
}
.btn.big { font-size: 19px; padding: 14px 36px; }
.btn.ghost { background: transparent; border-color: #3a2f55; color: var(--muted); min-width: 0; }
.btn.ghost:hover { color: var(--text); border-color: #5c4d85; box-shadow: none; }
.row-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* ================= character select ================= */
#chargrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin: 10px 0 22px;
}
.charcard {
  background: linear-gradient(180deg, #1d1730, #141021);
  border: 1px solid #3a2f55;
  border-radius: 12px;
  padding: 18px 12px 16px;
  cursor: pointer;
  transition: all .15s;
}
.charcard:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5), 0 0 20px rgba(212, 175, 55, .25);
}
.cportrait { height: 70px; display: flex; align-items: center; justify-content: center; }
.portrait-canvas { transform: scale(1.15); image-rendering: auto; }
.charcard h3 { font-size: 18px; color: #efe9dc; margin-top: 4px; }
.ctitle { font-size: 12px; font-style: italic; color: var(--muted); margin-bottom: 10px; }
.cweapon { display: flex; justify-content: center; margin-bottom: 4px; }
.cwname { font-size: 12px; color: #a89ac2; margin-bottom: 10px; }
.cperk { font-size: 12.5px; color: var(--gold-bright); line-height: 1.5; }

/* ================= stage select ================= */
#stagegrid { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 20px; }
.stagecard {
  display: flex; gap: 16px; align-items: center;
  background: linear-gradient(90deg, #1d1730, #141021);
  border: 1px solid #3a2f55;
  border-radius: 12px;
  padding: 12px 16px 12px 12px;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.stagecard:hover {
  border-color: var(--gold);
  transform: translateX(4px);
  box-shadow: 0 0 20px rgba(212, 175, 55, .22);
}
.stagecard.locked { cursor: default; opacity: .6; }
.stagecard.locked:hover { border-color: #3a2f55; transform: none; box-shadow: none; }
.stagepreview canvas {
  display: block; border-radius: 8px;
  border: 1px solid #2a2140;
  width: 200px; height: 92px;
}
.stageinfo { flex: 1; }
.stageinfo h3 { font-size: 20px; color: #efe9dc; letter-spacing: 1px; margin-bottom: 4px; }
.stagewon { color: var(--gold-bright); }
.stagedesc { font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 6px; }
.stagebest { font-size: 12.5px; color: #a89ac2; }
.hyperbox {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 5px 10px;
  border: 1px solid #5c1f26; border-radius: 6px;
  font-size: 12px; color: var(--blood);
  letter-spacing: 1px; cursor: pointer;
  background: rgba(92, 31, 38, .15);
}
.hyperbox:hover { border-color: var(--blood); box-shadow: 0 0 10px rgba(255, 89, 100, .25); }
.hyperbox input { accent-color: var(--blood); cursor: pointer; }
.modeboxes { display: flex; gap: 10px; flex-wrap: wrap; }
.hyperbox.endlessbox {
  color: #b45ae0;
  border-color: #4a2a6e;
  background: rgba(74, 42, 110, .15);
}
.hyperbox.endlessbox:hover { border-color: #b45ae0; box-shadow: 0 0 10px rgba(180, 90, 224, .25); }
.hyperbox.endlessbox input { accent-color: #b45ae0; }

/* ================= paragon ================= */
.paragon-text { color: #cdb6ff; }
#paragon-level {
  font-size: 30px; letter-spacing: 5px; margin: 14px 0 8px;
  text-shadow: 0 0 18px rgba(205, 182, 255, .5);
}
#paragon-xpbar {
  height: 12px; max-width: 380px; margin: 0 auto 6px;
  background: rgba(8, 5, 16, .85);
  border: 1px solid #3d3358; border-radius: 6px; overflow: hidden;
}
#paragon-xpfill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #5c4d85, #cdb6ff);
  box-shadow: 0 0 12px rgba(205, 182, 255, .6);
  transition: width .2s ease-out;
}
.paragon-pts { font-size: 15px; color: var(--gold-bright); margin: 10px 0 4px; min-height: 18px; }
#paragon-tracks { max-width: 420px; margin: 10px auto 4px; }
.ptrack {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; text-align: left;
  border-bottom: 1px solid rgba(58, 47, 85, .45);
}
.ptico { font-size: 20px; flex: 0 0 28px; text-align: center; color: #cdb6ff; }
.ptbody { flex: 1; }
.ptname { font-size: 15px; color: #efe9dc; }
.ptpts { color: #cdb6ff; font-weight: bold; margin-left: 6px; }
.ptdesc { font-size: 12px; color: var(--muted); }
.ptplus { min-width: 0; padding: 6px 16px; font-size: 16px; }
.ptplus:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* act headers on stage select */
.actlabel {
  font-size: 13px; letter-spacing: 4px; color: var(--gold-bright);
  text-align: center; margin: 14px 0 2px;
  text-shadow: 0 0 10px rgba(255, 210, 74, .3);
}
.actlabel:first-child { margin-top: 0; }

/* tempo (game speed) selector */
#temporow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.tempolabel { font-size: 12px; letter-spacing: 3px; color: var(--muted); }
.tempobtn {
  font-family: inherit; font-size: 14px;
  color: var(--muted);
  background: transparent;
  border: 1px solid #3a2f55; border-radius: 7px;
  padding: 5px 14px; cursor: pointer;
  transition: all .13s;
}
.tempobtn:hover { color: var(--text); border-color: #5c4d85; }
.tempobtn.on {
  color: var(--gold-bright); border-color: var(--gold);
  background: rgba(212, 175, 55, .1);
  box-shadow: 0 0 10px rgba(212, 175, 55, .2);
}
.tempohint { font-size: 11.5px; }

.lvactions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.lvactions .btn { min-width: 0; padding: 8px 18px; font-size: 13px; }
.lvactions .btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ================= records ================= */
#achlist { max-width: 640px; margin: 0 auto 18px; }
.achrow {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(58, 47, 85, .45);
  text-align: left;
}
.achmark { font-size: 20px; color: #3a3352; flex: 0 0 24px; text-align: center; }
.achrow.done .achmark { color: var(--gold-bright); text-shadow: 0 0 8px rgba(255, 210, 74, .6); }
.achbody { flex: 1; }
.achname { font-size: 15px; color: #cfc7e2; }
.achrow.done .achname { color: #efe9dc; }
.achdesc { font-size: 12.5px; color: var(--muted); }
.achprog { color: #8d84ad; }
.achreward { font-size: 12px; color: #a89ac2; max-width: 180px; text-align: right; }
.achrow.done .achreward { color: var(--gold-bright); }

/* ================= profiles ================= */
#profile-list { max-width: 420px; margin: 14px auto; }
.profrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border: 1px solid #3a2f55; border-radius: 10px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #1d1730, #141021);
  text-align: left;
}
.profrow.active { border-color: var(--gold); }
.profinfo b { color: #efe9dc; font-size: 16px; }
.profactive { color: var(--gold-bright); font-size: 12px; }
.profsummary { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.profbtns { display: flex; gap: 6px; }
.profbtns .btn { min-width: 0; padding: 6px 14px; font-size: 13px; }
.profnew { display: flex; gap: 8px; justify-content: center; margin: 16px 0 18px; }
.profnew input {
  font-family: inherit; font-size: 14px;
  background: #120e1e; color: var(--text);
  border: 1px solid #3a2f55; border-radius: 8px;
  padding: 10px 14px; width: 220px;
}
.profnew input:focus { outline: none; border-color: var(--gold); }
.profnew .btn { min-width: 0; }

#account-box { margin: 18px auto 16px; max-width: 420px; }
.accform { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 8px; }
.accform input {
  font-family: inherit; font-size: 14px;
  background: #120e1e; color: var(--text);
  border: 1px solid #3a2f55; border-radius: 8px;
  padding: 10px 14px; width: 240px;
}
.accform input:focus { outline: none; border-color: var(--gold); }
.accform .btn { min-width: 0; padding: 9px 26px; }
#acc-msg { margin-top: 8px; min-height: 16px; }
.accwho { font-size: 15px; color: #cfc7e2; margin-bottom: 4px; }
.accwho b { color: var(--gold-bright); }
#account-info .btn { margin-top: 10px; }

/* ================= chronicle & prologue ================= */
.archive-buttons { margin-top: 2px; }
.archive-buttons .btn { min-width: 0; padding: 9px 16px; font-size: 13px; }

#chronicle-list { max-width: 640px; margin: 6px auto 18px; text-align: left; }
.chronentry {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(58, 47, 85, .45);
}
.chronentry.locked { opacity: .55; }
.chrontitle { font-size: 16px; color: var(--gold-bright); margin-bottom: 4px; letter-spacing: 1px; }
.chronentry.locked .chrontitle { color: var(--muted); }
.chrontext { font-size: 14px; color: #cfc7e2; line-height: 1.55; font-style: italic; }
.chrontext.hint { color: var(--muted); font-style: normal; font-size: 13px; }
.chrontext.hint::before { content: '🔒 '; }

.introtext { max-width: 420px; margin: 6px auto 24px; }
.introtext p { font-size: 15.5px; color: #cfc7e2; line-height: 1.6; font-style: italic; margin-bottom: 14px; }

#over-epilogue {
  max-width: 420px; margin: -6px auto 14px;
  font-size: 14px; font-style: italic; color: #a89ac2; line-height: 1.55;
}

/* ================= build planner ================= */
#build-list { max-width: 660px; margin: 0 auto 14px; }
#build-list .subhead { margin-top: 16px; }
.buildgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin-top: 8px;
}
.buildcell {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #1d1730, #141021);
  border: 1px solid #3a2f55; border-radius: 9px;
  padding: 8px 10px; cursor: pointer;
  transition: all .12s;
}
.buildcell:hover { border-color: #5c4d85; }
.buildcell.on {
  border-color: var(--gold);
  background: linear-gradient(180deg, #2a2140, #1a1530);
  box-shadow: 0 0 12px rgba(212, 175, 55, .25);
}
.buildcell.on .buildname { color: var(--gold-bright); }
.buildcell.on::after { content: '★'; color: var(--gold-bright); margin-left: auto; font-size: 13px; }
.buildcell.locked { opacity: .5; cursor: default; }
.buildcell.locked:hover { border-color: #3a2f55; }
.buildicon { flex: 0 0 auto; display: flex; }
.buildname { font-size: 13px; color: #cfc7e2; }

/* planned-item highlight on the level-up cards */
.lvcard.planned {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(212, 175, 55, .3);
}
.planbadge {
  font-size: 10px; letter-spacing: 1px; color: var(--gold-bright);
  border: 1px solid var(--gold); border-radius: 4px;
  padding: 1px 5px; vertical-align: 2px;
}

/* ================= leaderboard ================= */
#lb-list { max-width: 520px; margin: 6px auto 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; text-align: left; }
.lbsection { margin-bottom: 10px; }
.lbsection .subhead { text-align: center; }
.lbrow {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(58, 47, 85, .4);
  font-size: 14px;
}
.lbrow.me { background: rgba(212, 175, 55, .08); border-radius: 6px; }
.lbrow.me .lbname { color: var(--gold-bright); }
.lbrank { flex: 0 0 30px; text-align: center; color: var(--muted); }
.lbname { flex: 1; color: #cfc7e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbscore { color: #efe9dc; font-weight: bold; }
.lbempty { padding: 6px 10px; }
@media (max-width: 640px) { #lb-list { grid-template-columns: 1fr; } }

/* ================= grimoire ================= */
#grimoire-list { text-align: left; max-width: 720px; margin: 0 auto 16px; }
#grimoire-list .subhead { text-align: center; margin-top: 18px; }
.grimrow {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(58, 47, 85, .4);
}
.grimrow.locked { opacity: .55; }
.grimbase { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; }
.grimicon { flex: 0 0 auto; display: flex; }
.grimname { font-size: 15px; color: #efe9dc; }
.evoname { color: var(--blood); }
.grimdesc { font-size: 12px; color: var(--muted); }
.grimlevels { font-size: 11px; color: #6e6590; margin-top: 3px; max-width: 320px; }
.grimrecipe { display: flex; align-items: center; gap: 8px; flex: 1 1 300px; }
.grimrecipe.wide { flex: 1 1 100%; flex-wrap: wrap; }
.grimplus { color: var(--gold-bright); font-size: 18px; }
.grimpname { font-size: 12px; color: #a89ac2; max-width: 80px; }
.fusename { color: var(--gold-bright); }
.grimpassives {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 10px;
}
.grimpcell {
  background: linear-gradient(180deg, #1d1730, #141021);
  border: 1px solid #3a2f55; border-radius: 10px;
  padding: 10px; text-align: center;
}
.grimpcell .grimicon { justify-content: center; margin-bottom: 4px; }

/* ================= bestiary ================= */
#bestiary-list { text-align: left; }
#bestiary-list .subhead { text-align: center; margin-top: 20px; }
.beastgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 10px 0 6px;
}
.beastcard {
  background: linear-gradient(180deg, #1d1730, #141021);
  border: 1px solid #3a2f55;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.beastcard.boss { border-color: #5c1f26; background: linear-gradient(180deg, #2a1420, #170e16); }
.beastcard.unknown { opacity: .65; }
.bportrait { display: flex; justify-content: center; }
.bname { font-size: 14px; color: #efe9dc; margin-top: 2px; }
.beastcard.boss .bname { color: var(--blood); }
.blore { font-size: 11px; font-style: italic; color: var(--muted); min-height: 28px; line-height: 1.3; margin: 2px 0 4px; }
.bstats { font-size: 11px; color: #a89ac2; }
.bkills { font-size: 11px; color: var(--gold-bright); margin-top: 2px; }

/* locked character cards */
.charcard.locked { cursor: default; opacity: .55; }
.charcard.locked:hover { border-color: #3a2f55; transform: none; box-shadow: none; }
.charcard.locked .cportrait { filter: grayscale(1) brightness(.6); }
.charcard.locked .cperk { color: var(--muted); }

/* ================= shop ================= */
#shopgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: 16px 0 4px;
}
.shopcard {
  background: linear-gradient(180deg, #1d1730, #141021);
  border: 1px solid #3a2f55;
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  transition: all .15s;
}
.shopcard:hover { border-color: var(--gold); box-shadow: 0 0 14px rgba(212, 175, 55, .2); }
.shopcard.maxed { opacity: .55; cursor: default; }
.shopcard.maxed:hover { border-color: #3a2f55; box-shadow: none; }
.shopcard.poor { opacity: .7; cursor: default; }
.shopcard.poor .shopcost { color: var(--blood); }
.shopcard.gated { opacity: .65; cursor: default; border-color: #3d3358; }
.shopcard.gated .shopcost { color: #cdb6ff; }
.shopcard h4 { font-size: 16px; color: #efe9dc; margin-bottom: 5px; letter-spacing: 1px; }
.shopdesc { font-size: 12px; color: var(--muted); min-height: 30px; line-height: 1.4; }
.shoppips { color: var(--gold-bright); font-size: 11px; letter-spacing: 3px; margin: 7px 0; }
.shopcost { font-size: 13px; color: #a89ac2; }

/* ================= level up ================= */
#lvchoices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.lvcard {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, #1d1730, #17122a);
  border: 1px solid #3a2f55;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  transition: all .13s;
  position: relative;
}
.lvcard:hover {
  border-color: var(--gold);
  background: linear-gradient(90deg, #262040, #1a1530);
  transform: translateX(4px);
  box-shadow: 0 0 16px rgba(212, 175, 55, .22);
}
.lvkey {
  position: absolute; top: 6px; right: 10px;
  font-size: 11px; color: var(--muted);
  border: 1px solid #3a2f55; border-radius: 4px;
  width: 18px; height: 18px; line-height: 16px; text-align: center;
}
.lvicon { flex: 0 0 52px; height: 52px; }
.lvtext { flex: 1; }
.lvname { font-size: 17px; color: #efe9dc; margin-bottom: 3px; }
.lvbadge {
  font-size: 11px; letter-spacing: 1px; color: #a89ac2;
  border: 1px solid #3a2f55; border-radius: 4px; padding: 1px 6px;
  vertical-align: 2px;
}
.lvbadge.new { color: var(--gold-bright); border-color: var(--gold); }
.lvbadge.max { color: var(--gold-bright); border-color: var(--gold); background: rgba(212, 175, 55, .1); }
.lvdesc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.lvnote { font-size: 11.5px; color: var(--gold-bright); margin-top: 3px; }

/* current-build strip on the level-up panel */
#lvbuild {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start; justify-content: center;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(58, 47, 85, .45);
}
#lvbuild:empty { display: none; }
.mini { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mini canvas { display: block; border-radius: 5px; }
.minilbl { font-size: 9px; color: var(--muted); letter-spacing: .3px; }
.mini.gold .minilbl { color: var(--gold-bright); }
.minigap { width: 10px; }

/* pause build overview */
#pause-build { max-width: 360px; margin: 4px auto 0; text-align: left; }
.pbrow {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px; font-size: 13.5px;
  border-bottom: 1px solid rgba(58, 47, 85, .35);
}
.pbicon { flex: 0 0 auto; display: flex; }
.pbname { flex: 1; color: #cfc7e2; }
.pbstat { color: var(--muted); font-size: 12px; text-align: right; }
.pbstat.ready { color: var(--gold-bright); }
.pbstat.needs { color: #b56b74; }
.pbpassives { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; justify-content: center; }

/* current story frontier on stage select */
.stagenext {
  font-size: 10px; letter-spacing: 2px; font-weight: bold;
  color: #0b0814; background: var(--gold-bright);
  border-radius: 4px; padding: 2px 7px; vertical-align: 3px;
  box-shadow: 0 0 12px rgba(255, 210, 74, .45);
}

/* ================= chest ================= */
.chest-panel { max-width: 420px; }
.chest-evolve { padding: 8px 0 18px; }
.chest-evolve .cicon { display: flex; justify-content: center; margin-bottom: 12px; animation: chestglow 1.6s ease-in-out infinite; }
@keyframes chestglow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 210, 74, .4)); }
  50% { filter: drop-shadow(0 0 22px rgba(255, 210, 74, .9)); }
}
.chest-evolve h3 { font-size: 24px; color: #efe9dc; letter-spacing: 2px; margin-bottom: 6px; }
.chest-evolve p { font-size: 14px; color: var(--muted); margin-bottom: 4px; }

/* ================= stats / pause / results ================= */
.statlist { margin: 8px auto 4px; max-width: 340px; }
.srow {
  display: flex; justify-content: space-between;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(58, 47, 85, .45);
  font-size: 15px;
}
.srow span { color: var(--muted); }
.srow b { color: #efe9dc; }

.optlist { margin: 16px auto 2px; max-width: 340px; text-align: left; }
.optlist label {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px; font-size: 15px; cursor: pointer; color: #cfc7e2;
}
.optlist input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }

#over-weapons { max-width: 400px; margin: 0 auto; }
.wrow {
  display: grid; grid-template-columns: 130px 1fr 70px;
  gap: 10px; align-items: center;
  padding: 4px 0; font-size: 13px;
}
.wrow span:first-child { text-align: left; color: #cfc7e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow span:last-child { text-align: right; color: var(--muted); }
.wbar { height: 8px; background: rgba(58, 47, 85, .4); border-radius: 4px; overflow: hidden; }
.wbar div { height: 100%; background: linear-gradient(90deg, #8f1f2b, #ff5964); border-radius: 4px; }

/* scrollbars inside panels */
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: #3a2f55; border-radius: 4px; }

/* ================= small screens / phones ================= */
@media (max-width: 640px) {
  .panel { padding: 20px 14px; }
  #timer { font-size: 24px; letter-spacing: 2px; }
  .hudstat { font-size: 14px; }
  #hudrow { padding: 0 10px; }
  #slots { left: 10px; }
  .slot canvas { width: 28px; height: 28px; }
  h1 { letter-spacing: 4px; }
  h2 { font-size: 20px; letter-spacing: 3px; }
  .stagecard { flex-direction: column; align-items: stretch; }
  .stagepreview canvas { width: 100%; height: 80px; object-fit: cover; }
  .stageinfo { text-align: center; }
  .modeboxes { justify-content: center; }
  .wrow { grid-template-columns: 90px 1fr 60px; }
  .btn.big { font-size: 16px; padding: 12px 24px; }
  .btn { min-width: 0; }
  .lvcard { padding: 10px 10px; gap: 10px; }
  .lvkey { display: none; }
  #banner #bannertitle { font-size: 26px; letter-spacing: 3px; }
  .charcard .cperk { font-size: 11.5px; }
}