/* activity/styles/tombstonedivision.css */
/* TombStone Academy — Tombstone Division overlay styles */

/* ── Overlay backdrop ── */
.dh-overlay {
  position: fixed;
  top: calc(var(--sait, 0px) + 48px);
  left: 0;
  right: 0;
  bottom: calc(50px + var(--saib, 0px));
  background: rgba(0,0,0,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.dh-overlay.dh-overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Entry card ── */
.dh-card {
  background: linear-gradient(135deg, #1a000e, #0a0004);
  border: 2px solid #550028;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 460px;
  width: 95vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 60px rgba(136,0,34,.25);
  animation: dh-pop-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dh-pop-in {
  from { transform: scale(.88); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.dh-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 2.1rem;
  color: #ff0044;
  text-shadow: 0 0 28px #ff0044, 0 0 60px rgba(136,0,34,.5);
  letter-spacing: 4px;
  margin-bottom: 6px;
}
.dh-subtitle {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: .65rem;
  color: rgba(255,255,255,.3);
  letter-spacing: 4px;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.dh-story {
  color: #cc88aa;
  font-size: 14px;
  margin-bottom: 6px;
  text-align: center;
  line-height: 1.6;
}
.dh-controls {
  font-size: 13px;
  color: #886677;
  margin-bottom: 20px;
  line-height: 1.8;
}

/* ── Buttons ── */
.dh-btn {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.2s;
}
.dh-btn-primary {
  background: linear-gradient(135deg, #550011, #1a0008);
  border: 2px solid #ff0044;
  color: #ff6688;
  text-shadow: 0 0 8px #ff0044;
}
.dh-btn-primary:hover {
  background: linear-gradient(135deg, #990022, #330010);
  box-shadow: 0 0 25px rgba(255,0,68,.5);
}
.dh-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.4);
  font-size: .9rem;
}
.dh-btn-ghost:hover {
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.6);
}
.dh-btn-locked {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   CHARACTER SELECT — Picker + Preview layout
   ═══════════════════════════════════════════════ */
.dh-charselect {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
  width: 96vw;
  animation: dh-pop-in .3s cubic-bezier(.34,1.56,.64,1);
}
.dh-cs-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.55rem;
  color: #ff0044;
  text-shadow: 0 0 28px #ff0044, 0 0 60px rgba(136,0,34,.4);
  letter-spacing: 7px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* ── Preview panel (portrait + info) ── */
.dh-cs-main {
  display: flex;
  gap: 22px;
  width: 100%;
  margin-bottom: 14px;
  background: linear-gradient(145deg, #14000c 0%, #0c0005 60%, #10000a 100%);
  border: 1px solid rgba(85,0,40,.7);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,0,68,.06);
}

/* ── Portrait ── */
.dh-cs-portrait-wrap {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dh-cs-portrait-frame {
  width: 160px;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(85,0,40,.8);
  background: radial-gradient(ellipse at bottom center, #250012 0%, #080004 70%);
  box-shadow: 0 0 30px rgba(136,0,34,.4), inset 0 -6px 24px rgba(255,0,68,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: box-shadow .3s, border-color .3s;
}
.dh-cs-portrait-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5) 100%);
  border-radius: 10px;
  pointer-events: none;
}
#dh-cs-portrait {
  image-rendering: pixelated;
  display: block;
  width: 160px;
  height: 130px;
}
.dh-cs-portrait-bar {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #550028;
  transition: background .3s;
}

/* ── Info / detail panel ── */
.dh-cs-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dh-cs-charname {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #ff6688;
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 0 22px rgba(255,0,68,.3);
}
.dh-cs-chartitle {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.65rem;
  color: rgba(255,255,255,.33);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.dh-cs-chardesc {
  font-family: 'Oswald', sans-serif;
  font-size: 0.88rem;
  color: #cc88aa;
  font-weight: 400;
  letter-spacing: 1px;
}
.dh-cs-charstory {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 0.87rem;
  color: #886677;
  line-height: 1.5;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.dh-cs-section-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.58rem;
  color: rgba(255,255,255,.2);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 3px;
}
.dh-cs-weapon {
  font-family: 'Oswald', sans-serif;
  font-size: 0.88rem;
  color: #ff9944;
  letter-spacing: 1px;
  font-weight: 400;
}
.dh-cs-passives {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dh-cs-passive-row {
  font-size: 0.72rem;
  color: #887799;
  line-height: 1.45;
}
.dh-cs-passive-name {
  color: #cc99bb;
  font-weight: 700;
}
.dh-cs-petline {
  font-size: 0.76rem;
  color: #886677;
  padding-top: 5px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.dh-cs-pet-type {
  color: #664455;
}
.dh-cs-confirm {
  margin-top: auto;
  align-self: flex-start;
  width: auto;
  padding: 9px 22px;
  font-size: 0.85rem;
  letter-spacing: 2px;
}

/* ── Icon tray ── */
.dh-cs-tray {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
}
.dh-cs-tray-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 8px;
  background: linear-gradient(145deg, #120008, #0a0004);
  border: 1px solid rgba(255,0,68,.12);
  border-radius: 9px;
  cursor: pointer;
  transition: all .18s;
  color: rgba(255,255,255,.38);
  min-width: 50px;
}
.dh-cs-tray-btn:hover {
  border-color: rgba(255,0,68,.45);
  color: rgba(255,255,255,.8);
  transform: translateY(-2px);
  background: linear-gradient(145deg, #1e000e, #0e0006);
}
.dh-cs-tray-btn.active {
  border-color: #ff0044;
  background: linear-gradient(145deg, #280012, #14000a);
  color: #fff;
  box-shadow: 0 0 16px rgba(255,0,68,.32), 0 4px 12px rgba(0,0,0,.4);
}
.dh-cs-tray-btn.dh-cs-locked {
  opacity: .35;
  cursor: not-allowed;
  filter: grayscale(.8);
}
.dh-cs-tray-btn.dh-cs-locked:hover {
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}
.dh-cs-tray-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 18px;
  border: 1px solid rgba(255,255,255,.08);
}
.dh-cs-tray-name {
  font-family: 'Oswald', sans-serif;
  font-size: 0.54rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}

/* ═══════════════════════════════════════════════
   GAME WRAPPER
   ═══════════════════════════════════════════════ */
.dh-game-wrapper {
  position: relative;
  width: 800px;
  height: 600px;
  max-width: 100vw;
  max-height: 100%;
}
.dh-game-wrapper canvas {
  display: block;
  border: 3px solid #2a0018;
  box-shadow: 0 0 50px rgba(136,0,34,.67), 0 0 100px rgba(51,0,8,.4);
  width: 100%;
  height: 100%;
}

/* ── Close button on game ── */
.dh-game-close-btn {
  position: absolute;
  top: 8px;
  right: -40px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 20;
}
.dh-game-close-btn:hover {
  background: rgba(255,0,68,.3);
  border-color: #ff0044;
  color: #fff;
}

/* ═══════════════════════════════════════════════
   HUD OVERLAY
   ═══════════════════════════════════════════════ */
.dh-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* ── Top bar ── */
.dh-hud-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(180deg, rgba(6,1,3,.97) 0%, rgba(14,3,7,.9) 100%);
  border-bottom: 1px solid rgba(80,0,30,.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 2;
  box-shadow: 0 2px 16px rgba(0,0,0,.7);
}
.dh-hud-topleft {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dh-hud-face {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(136,34,68,.7);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(136,0,34,.6);
}
.dh-hud-charinfo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.dh-charLine {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  color: #e8b888;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.dh-levelLabel {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: #bb88dd;
  text-shadow: 0 0 6px rgba(136,0,255,.45);
  letter-spacing: 1px;
}
.dh-hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.dh-waveDisplay {
  color: #ff6644;
  font-size: 13px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255,68,34,.6);
  letter-spacing: 4px;
}
.dh-timer {
  font-family: 'Oswald', sans-serif;
  color: #7a6a88;
  font-size: 9px;
  letter-spacing: 2px;
  margin-top: 1px;
}
.dh-hud-topright {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dh-stat-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.dh-stat-icon { font-size: 11px; }
.dh-stat-val {
  font-size: 12px;
  font-weight: 600;
  color: #ddc888;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
}
.dh-stat-best {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  color: #ffcc02;
  letter-spacing: 1px;
}

/* ── HP / Shield / XP bars ── */
.dh-hud-bars {
  position: absolute;
  top: 36px; left: 0; right: 0;
  z-index: 2;
}
.dh-hpBar {
  width: 100%;
  height: 9px;
  background: linear-gradient(180deg, #0a0004, #1a000a);
  border-bottom: 1px solid rgba(60,0,20,.6);
  overflow: hidden;
}
.dh-hpFill {
  height: 100%;
  background: linear-gradient(90deg, #6a001a, #cc1a3a, #ff4466, #ff7788);
  box-shadow: inset 0 1px 2px rgba(255,120,140,.2), 0 0 8px rgba(204,34,68,.35);
  transition: width 0.12s;
}
.dh-shieldBar {
  width: 100%;
  height: 4px;
  background: #030010;
  overflow: hidden;
}
.dh-shieldFill {
  height: 100%;
  background: linear-gradient(90deg, #0a2899, #1a66ff, #66aaff);
  box-shadow: 0 0 6px rgba(68,136,255,.5);
}
.dh-xpBar {
  width: 100%;
  height: 4px;
  background: #050006;
  border-bottom: 1px solid rgba(30,0,20,.8);
  overflow: hidden;
}
.dh-xpFill {
  height: 100%;
  background: linear-gradient(90deg, #5500aa, #aa33ff, #dd88ff);
  box-shadow: 0 0 6px rgba(170,51,255,.35);
  transition: width 0.28s;
}

/* ── Inventory bar (bottom) ── */
.dh-inventory {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 42px;
  background: linear-gradient(0deg, rgba(4,1,3,.97) 0%, rgba(10,3,6,.92) 100%);
  border-top: 1px solid rgba(68,0,26,.8);
  box-shadow: 0 -2px 16px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 3px 0;
  z-index: 2;
}
.dh-inv-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.dh-inv-label {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  width: 14px;
  text-align: center;
  opacity: 0.45;
  letter-spacing: 0;
}
.dh-inv-slot {
  width: 28px;
  height: 16px;
  background: linear-gradient(180deg, rgba(28,6,14,.75), rgba(14,3,8,.85));
  border: 1px solid rgba(44,0,22,.9);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  position: relative;
  transition: border-color .15s;
}
.dh-inv-filled {
  background: linear-gradient(180deg, rgba(55,10,26,.65), rgba(36,6,14,.75));
  border-color: rgba(85,0,40,.8);
}
.dh-inv-evolved {
  border-color: #ddaa22;
  box-shadow: 0 0 6px rgba(221,170,34,.4), inset 0 0 5px rgba(221,170,34,.15);
}
.dh-inv-emoji {
  font-size: 10px;
  line-height: 1;
}
.dh-inv-lv {
  font-family: 'Oswald', sans-serif;
  font-size: 6px;
  color: #ddaa22;
  position: absolute;
  bottom: 0; right: 1px;
  text-shadow: 0 0 3px #000;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════
   LEVEL-UP / UPGRADE MENU
   ═══════════════════════════════════════════════ */
.dh-upgradeMenu {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9;
  pointer-events: auto;
}
.dh-upgradeMenu h2 {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 22px;
  color: #ffd700;
  text-shadow: 0 0 18px rgba(255,215,0,.6), 0 0 40px rgba(255,180,0,.25);
  margin-bottom: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.dh-upgCards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
}
.dh-upgCard {
  background: linear-gradient(145deg, #160009, #0c0004);
  border: 1px solid rgba(85,0,40,.7);
  padding: 13px 16px;
  cursor: pointer;
  color: #eee;
  width: 162px;
  transition: all 0.15s;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.dh-upgCard:hover {
  border-color: rgba(255,0,68,.7);
  background: linear-gradient(145deg, #240011, #14000a);
  box-shadow: 0 0 20px rgba(255,0,68,.25), 0 6px 24px rgba(0,0,0,.5);
  transform: translateY(-3px);
}
.dh-upgCard-skip {
  width: 122px;
  opacity: .55;
}
.dh-upgCard-skip:hover {
  opacity: 1;
}
.dh-uc-emoji {
  font-size: 26px;
  margin-bottom: 6px;
}
.dh-uc-title {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  color: #ff9944;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.dh-uc-badge {
  display: inline-block;
  background: #22aa44;
  color: #fff;
  font-size: 7px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 1px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
}
.dh-uc-type {
  font-family: 'Oswald', sans-serif;
  font-size: 8px;
  color: #775588;
  margin-bottom: 4px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dh-uc-desc {
  font-family: 'Crimson Text', serif;
  font-size: 11.5px;
  color: #7a6888;
  margin-top: 4px;
  line-height: 1.45;
}

/* ── Gold cost on level-up cards ── */
.dh-uc-cost {
  font-size: 11px;
  color: #ffd700;
  margin-top: 5px;
  letter-spacing: 1px;
}
.dh-upgCard-locked {
  opacity: 0.3;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* ── Reroll button ── */
.dh-upgCard-reroll {
  width: 120px;
  border-color: rgba(255, 215, 0, 0.4);
}
.dh-upgCard-reroll:hover {
  border-color: #ffd700;
  box-shadow: 0 0 14px rgba(255, 215, 0, .2);
}

/* ── Heal button in Level Up menu (next to Reroll) ── */
.dh-upgCard-heal-lu {
  width: 120px;
  border-color: rgba(255, 100, 120, 0.4);
}
.dh-upgCard-heal-lu:hover {
  border-color: #ff6688;
  box-shadow: 0 0 14px rgba(255, 100, 120, 0.25);
}

/* ── Banish button inside cards ── */
.dh-uc-banish {
  font-size: 10px;
  color: #ff6666;
  cursor: pointer;
  margin-top: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 4px;
  background: rgba(255, 0, 0, 0.08);
  transition: all 0.15s;
}
.dh-uc-banish:hover {
  border-color: #ff6666;
  background: rgba(255, 0, 0, 0.15);
}
.dh-uc-banish-locked {
  opacity: 0.3;
  pointer-events: none;
}

/* ── HUD heal button ── */
.dh-heal-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #ff6688;
  background: rgba(255, 50, 80, 0.12);
  border: 1px solid rgba(255, 100, 120, 0.35);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
  pointer-events: auto;
}
.dh-heal-btn:hover {
  background: rgba(255, 50, 80, 0.25);
  border-color: #ff6688;
}
.dh-heal-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   DEATH SCREEN
   ═══════════════════════════════════════════════ */
.dh-deathScreen {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 11;
  pointer-events: auto;
}
.dh-deathScreen h1 {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 58px;
  color: #cc0000;
  text-shadow: 0 0 40px #ff0000, 0 0 80px rgba(180,0,0,.4);
  margin-bottom: 16px;
  letter-spacing: 6px;
}
.dh-deathScreen p {
  font-family: 'Oswald', sans-serif;
  color: #aa5566;
  font-size: 15px;
  letter-spacing: 1px;
  margin: 3px;
}
.dh-deathScreen button {
  margin-top: 24px;
  padding: 12px 36px;
  background: linear-gradient(135deg, #1a0006, #100003);
  border: 1px solid rgba(255,0,0,.5);
  color: #ff4455;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.dh-deathScreen button:hover {
  background: linear-gradient(135deg, #2a0009, #1a0006);
  border-color: rgba(255,0,0,.8);
  box-shadow: 0 0 22px rgba(255,0,0,.35), 0 4px 20px rgba(0,0,0,.5);
  transform: translateY(-1px);
}

/* ── High-score flash animation ── */
.hs-flash {
  animation: hs-flash-anim 0.5s ease-in-out 3;
}
@keyframes hs-flash-anim {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; color: #ff6600; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 860px) {
  .dh-game-wrapper {
    width: 100vw;
    height: calc(100vw * 0.75);
  }
  .dh-game-close-btn {
    right: 4px;
    top: -36px;
  }
}

@media (max-width: 680px) {
  /* Character select: stack portrait above info */
  .dh-cs-main {
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }
  .dh-cs-portrait-wrap {
    flex: none;
    width: 100%;
    flex-direction: row;
    gap: 14px;
    align-items: flex-start;
  }
  .dh-cs-portrait-frame {
    width: 100px;
    height: 82px;
    flex-shrink: 0;
  }
  #dh-cs-portrait {
    width: 100px;
    height: 82px;
  }
  .dh-cs-portrait-bar {
    display: none;
  }
  .dh-cs-charname {
    font-size: 1.2rem;
  }
  .dh-cs-confirm {
    align-self: stretch;
    text-align: center;
  }
  .dh-cs-tray-name {
    display: none;
  }
  .dh-cs-tray-btn {
    min-width: 40px;
    padding: 5px;
  }
  .dh-upgCard {
    width: 140px;
    padding: 10px 12px;
  }
  .dh-upgradeMenu h2 {
    font-size: 18px;
    letter-spacing: 2px;
  }
  /* Lobby: tighter */
  .dh-lobby-icon-btn {
    width: 28px;
    height: 28px;
  }
}

/* ═══════════════════════════════════════════════
   2P CO-OP LOBBY
   ═══════════════════════════════════════════════ */
.dh-lobby {
  text-align: center;
  animation: dh-pop-in .3s cubic-bezier(.34,1.56,.64,1);
  max-width: 600px;
  width: 96vw;
}
.dh-lobby-cols {
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 16px 0 12px;
}
.dh-lobby-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
}
.dh-lobby-divider {
  width: 1px;
  background: rgba(255,255,255,.1);
  margin: 0 6px;
}
.dh-lobby-player-label {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,.35);
  margin-bottom: 4px;
}
.dh-lobby-player-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #e8c888;
  margin-bottom: 10px;
  min-height: 20px;
  letter-spacing: 1px;
}

/* ── Icon tray ── */
.dh-lobby-icon-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
}
.dh-lobby-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.3);
  cursor: pointer;
  transition: all .15s;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.dh-lobby-icon-btn:hover:not(:disabled) {
  border-color: rgba(255,0,68,.5);
  transform: scale(1.1);
}
.dh-lobby-icon-btn.selected {
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255,215,0,.35);
}
.dh-lobby-icon-btn.locked {
  opacity: .2;
  cursor: not-allowed;
}
.dh-lobby-icon-btn.readonly {
  cursor: default;
}
.dh-lobby-char-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  border-radius: 50%;
  overflow: hidden;
}

/* ── Character preview (selected) ── */
.dh-lobby-preview {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  padding: 8px;
  background: linear-gradient(145deg, #120008, #0a0004);
  border: 1px solid rgba(85,0,40,.5);
  border-radius: 8px;
  min-height: 56px;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.dh-lobby-preview-portrait {
  width: 54px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dh-lobby-preview-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.dh-lobby-preview-name {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ff6688;
  letter-spacing: 1px;
  line-height: 1.1;
}
.dh-lobby-preview-title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.58rem;
  color: rgba(255,255,255,.28);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.dh-lobby-preview-desc {
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  color: #cc88aa;
}
.dh-lobby-preview-pet {
  font-size: 0.65rem;
  color: #886677;
  margin-top: 2px;
}
.dh-lobby-no-pick {
  width: 100%;
  padding: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  color: rgba(255,255,255,.2);
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  background: rgba(0,0,0,.2);
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: 8px;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.dh-lobby-check {
  margin-top: 6px;
  font-size: 18px;
  min-height: 24px;
}
.dh-lobby-waiting {
  color: rgba(255,255,255,.3);
  font-style: italic;
  font-weight: normal;
  font-family: 'Crimson Text', serif;
}
.dh-lobby-waiting-chars {
  color: rgba(255,255,255,.2);
  font-size: 12px;
  padding: 16px 0;
}
.dh-lobby-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.dh-lobby-host-msg {
  font-family: 'Oswald', sans-serif;
  color: rgba(255,255,255,.3);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 0;
}

/* ═══════════════════════════════════════════════
   2P LEVEL-UP SYNC BAR
   ═══════════════════════════════════════════════ */
.dh-levelup-sync {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px 16px;
  margin-top: 8px;
  background: rgba(0,0,0,.5);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
}
.dh-sync-check {
  font-size: 14px;
  color: rgba(255,255,255,.6);
}
.dh-sync-timer {
  font-size: 13px;
  color: #ffd700;
  font-weight: bold;
  min-width: 120px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   IMPROVEMENT PATCH — Mechanic Bar, Curse Cards, Synergy Bar,
   Grimoire Screen, Death Souls
   ═══════════════════════════════════════════════════════════════════ */

/* ── Character Mechanic Bar ── */
.dh-mech-bar-wrap {
  position: relative;
  height: 8px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2px;
}
.dh-mech-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.15s ease, background 0.3s ease;
}
.dh-mech-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 4px #000;
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}

/* ── Synergy Badge Bar ── */
.dh-synergy-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2px 8px;
  min-height: 0;
}
.dh-synergy-badge {
  font-size: 9px;
  padding: 1px 6px;
  background: rgba(68, 136, 255, .2);
  border: 1px solid rgba(68, 136, 255, .4);
  border-radius: 10px;
  color: #aaccff;
  white-space: nowrap;
}
.dh-curse-badge {
  background: rgba(200, 0, 50, .2);
  border-color: rgba(200, 0, 50, .4);
  color: #ff8899;
}

/* ── Curse Card Styling ── */
.dh-curse-card {
  border-color: #880022 !important;
  background: linear-gradient(135deg, #1a000a, #0d0002) !important;
  box-shadow: 0 0 20px rgba(136, 0, 34, .3) !important;
}
.dh-curse-card:hover {
  border-color: #cc0033 !important;
  box-shadow: 0 0 30px rgba(200, 0, 50, .5) !important;
}
.dh-curse-good {
  font-size: 11px;
  color: #44ff88;
  margin: 4px 0 2px;
}
.dh-curse-bad {
  font-size: 11px;
  color: #ff4466;
}
.dh-curse-refuse {
  border-color: #333 !important;
  opacity: .7;
}
.dh-curse-refuse:hover {
  opacity: 1;
  border-color: #555 !important;
}

/* ── Death Screen Souls ── */
.dh-deathSouls {
  font-size: .85rem;
  color: #cc88ff;
  margin: 4px 0;
  text-shadow: 0 0 8px rgba(136, 68, 255, .4);
}

/* ── Grimoire Button on Death Screen ── */
.dh-grimoire-btn {
  background: linear-gradient(135deg, #2a1040, #1a0828);
  border: 1px solid #7744aa;
  color: #ddaaff;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: .85rem;
  cursor: pointer;
  margin-top: 6px;
  transition: all .2s ease;
}
.dh-grimoire-btn:hover {
  background: linear-gradient(135deg, #3a1860, #2a1040);
  border-color: #aa66dd;
  box-shadow: 0 0 16px rgba(136, 68, 255, .4);
}

/* ── Grimoire Overlay ── */
.dh-grimoire-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: dh-pop-in .25s ease;
}
.dh-grimoire-panel {
  background: linear-gradient(135deg, #120020, #080010);
  border: 2px solid #5522aa;
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 580px;
  width: 95%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 0 60px rgba(85, 34, 170, .3);
}
.dh-grimoire-title {
  font-size: 1.6rem;
  color: #cc88ff;
  margin: 0 0 4px;
  text-shadow: 0 0 20px rgba(136, 68, 255, .5);
}
.dh-grimoire-souls {
  font-size: 1rem;
  color: #aa77dd;
  margin: 0 0 14px;
}
.dh-grimoire-tiers h3 {
  font-size: .85rem;
  color: #8855cc;
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.dh-grimoire-tier-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.dh-grim-card {
  width: 110px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(20, 10, 30, .8);
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
}
.dh-grim-card:hover { transform: scale(1.05); }
.dh-grim-emoji { font-size: 1.4rem; }
.dh-grim-name { font-size: .7rem; font-weight: 700; color: #ddd; margin: 4px 0 2px; }
.dh-grim-desc { font-size: .55rem; color: #999; line-height: 1.3; }
.dh-grim-cost { font-size: .6rem; color: #cc88ff; margin-top: 4px; font-weight: 600; }

.dh-grim-owned {
  border-color: #44aa44;
  background: rgba(20, 60, 20, .4);
}
.dh-grim-owned .dh-grim-cost { color: #44cc44; }
.dh-grim-owned:hover { transform: none; cursor: default; }

.dh-grim-available {
  border-color: #7744aa;
  box-shadow: 0 0 10px rgba(136, 68, 255, .2);
}
.dh-grim-available:hover {
  border-color: #aa66dd;
  box-shadow: 0 0 20px rgba(136, 68, 255, .4);
}

.dh-grim-locked {
  opacity: .4;
  cursor: not-allowed;
}
.dh-grim-locked:hover { transform: none; }

.dh-grimoire-close {
  margin-top: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #ccc;
  padding: 8px 24px;
  border-radius: 8px;
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s ease;
}
.dh-grimoire-close:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}