/* ============================================================
   POCKET DUNGEON — COMBAT THEME
   Self-contained pixel-HUD styling for the battle screen.
   Palette = richer, saturated 16-bit firelit. Type pairing:
   Pixelify Sans (titles/labels) · VT323 (numbers/log) · Hanken (body).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&family=VT323&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --pd-bg:        #0d0908;
  --pd-bg-2:      #16100d;
  --pd-stone:     #241a15;
  --pd-stone-2:   #30221b;
  --pd-stone-3:   #3d2c22;
  --pd-edge:      #0a0605;

  --pd-ink:       #f8efdb;
  --pd-ink-dim:   #d8c5a6;
  --pd-muted:     #ab9277;
  --pd-faint:     #6f5d4b;

  --pd-gold:      #ffc24d;
  --pd-gold-2:    #f2a32b;
  --pd-gold-deep: #a96a18;
  --pd-ember:     #ff6a32;
  --pd-ember-2:   #ff8a3d;
  --pd-blood:     #d6313a;
  --pd-blood-deep:#7e1a1f;
  --pd-mystic:    #3ce8b6;
  --pd-azure:     #5aa9ff;
  --pd-azure-deep:#1f5fb0;
  --pd-poison:    #97e04a;
  --pd-violet:    #b07cff;

  --pd-hp:        #d6313a;
  --pd-hp-track:  #2a0f10;

  --pd-pixel: 'Pixelify Sans', 'Trebuchet MS', sans-serif;
  --pd-mono:  'VT323', ui-monospace, monospace;
  --pd-body:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
img { image-rendering: pixelated; image-rendering: crisp-edges; }

.pd-pixel { font-family: var(--pd-pixel); }
.pd-mono  { font-family: var(--pd-mono); }

/* ----------  PIXEL FRAME  ---------- */
.pd-frame {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.10)),
    var(--pd-stone);
  border: 2px solid var(--pd-gold-deep);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px var(--pd-edge),
    inset 0 2px 0 2px rgba(255,255,255,0.05),
    0 4px 0 0 var(--pd-edge),
    0 10px 22px rgba(0,0,0,0.5);
}
.pd-frame-raised { background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)),
    var(--pd-stone-2); }
.pd-frame.pd-rivets::before,
.pd-frame.pd-rivets::after {
  content: ""; position: absolute; top: 3px; width: 4px; height: 4px;
  background: var(--pd-gold); box-shadow: 0 0 0 1px var(--pd-edge);
}
.pd-frame.pd-rivets::before { left: 3px; }
.pd-frame.pd-rivets::after  { right: 3px; }

/* ----------  PIXEL BUTTON  ---------- */
.pd-btn {
  font-family: var(--pd-pixel); font-weight: 600; letter-spacing: 0.02em;
  color: var(--pd-ink);
  background: linear-gradient(180deg, var(--pd-stone-3), var(--pd-stone));
  border: 2px solid var(--pd-gold-deep); border-radius: 0;
  padding: 12px 14px; min-height: 46px; cursor: pointer; position: relative;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), inset 0 0 0 2px var(--pd-edge), 0 4px 0 0 var(--pd-edge);
  transition: transform .07s steps(2), box-shadow .07s steps(2), filter .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; -webkit-tap-highlight-color: transparent; user-select: none;
}
.pd-btn:hover { filter: brightness(1.12); }
.pd-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.06), inset 0 0 0 2px var(--pd-edge), 0 1px 0 0 var(--pd-edge); }
.pd-btn[disabled] { opacity: .42; cursor: not-allowed; filter: grayscale(.4); }
.pd-btn[disabled]:active { transform: none; }
.pd-btn-gold   { color: #2a1a06; background: linear-gradient(180deg, var(--pd-gold), var(--pd-gold-2)); border-color: var(--pd-gold-deep); text-shadow: 0 1px 0 rgba(255,255,255,0.25); }
.pd-btn-ember  { color: #2a0d05; background: linear-gradient(180deg, var(--pd-ember-2), var(--pd-ember)); border-color: #8a2f10; }
.pd-btn-azure  { color: #03142b; background: linear-gradient(180deg, #7cc0ff, var(--pd-azure)); border-color: var(--pd-azure-deep); }
.pd-btn-mystic { color: #042b20; background: linear-gradient(180deg, #6ff0cf, var(--pd-mystic)); border-color: #157a5c; }
.pd-btn-ghost  { background: rgba(20,14,11,0.6); border-color: var(--pd-faint); color: var(--pd-ink-dim); }
.pd-btn-sm { min-height: 38px; padding: 8px 12px; font-size: 13px; }
.pd-btn-lg { min-height: 56px; font-size: 17px; }

/* ---------- chips ---------- */
.pd-chip {
  font-family: var(--pd-mono); font-size: 16px; line-height: 1; color: var(--pd-ink-dim);
  background: rgba(10,6,5,0.55); border: 1px solid var(--pd-faint);
  padding: 4px 7px; display: inline-flex; align-items: center; gap: 5px;
  text-transform: uppercase; letter-spacing: .03em;
}

/* ---------- headings ---------- */
.pd-h { font-family: var(--pd-pixel); color: var(--pd-gold); font-weight: 600; text-shadow: 0 2px 0 var(--pd-edge); margin: 0; }

/* ---------- scrollbars ---------- */
.pd-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.pd-scroll::-webkit-scrollbar-thumb { background: var(--pd-gold-deep); }
.pd-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }

/* ---------- HP bars ---------- */
.pd-bar { height: 9px; background: var(--pd-hp-track); border: 1px solid var(--pd-edge); position: relative; overflow: hidden; }
.pd-bar-fill {
  height: 100%; background: linear-gradient(180deg, var(--pd-ember), var(--pd-hp));
  transition: width .55s cubic-bezier(.2,.7,.2,1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ---------- combat root scaffold ---------- */
.pd-app-root {
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,138,61,0.10), transparent 55%),
    radial-gradient(90% 60% at 50% 115%, rgba(70,40,20,0.5), transparent 60%),
    var(--pd-bg);
  color: var(--pd-ink); font-family: var(--pd-body);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.pd-app-root::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 4px 4px; opacity: .6;
}

/* ---------- floating combat text ---------- */
.pd-float {
  position: absolute; font-family: var(--pd-pixel); font-weight: 700; font-size: 22px;
  pointer-events: none; z-index: 40;
  text-shadow: 0 2px 0 var(--pd-edge), 0 0 8px rgba(0,0,0,.6);
  animation: pd-float-up 1.05s cubic-bezier(.2,.7,.2,1) forwards;
}
.pd-float.dmg  { color: #ff5550; }
.pd-float.crit { color: var(--pd-gold); font-size: 30px; }
.pd-float.heal { color: var(--pd-mystic); }
.pd-float.miss { color: var(--pd-muted); font-size: 17px; }
@keyframes pd-float-up {
  0%   { transform: translate(-50%, 0) scale(.4); opacity: 0; }
  18%  { transform: translate(-50%, -10px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -52px) scale(1); opacity: 0; }
}

/* ---------- sprite / token animations ---------- */
@keyframes pd-shake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3px,1px)} 40%{transform:translate(3px,-1px)} 60%{transform:translate(-2px,2px)} 80%{transform:translate(2px,-2px)} }
.pd-anim-hurt { animation: pd-shake .32s steps(2); }
@keyframes pd-lunge-r { 0%{transform:translateX(0)} 35%{transform:translateX(14px)} 100%{transform:translateX(0)} }
@keyframes pd-lunge-l { 0%{transform:translateX(0)} 35%{transform:translateX(-14px)} 100%{transform:translateX(0)} }
.pd-anim-lunge-r { animation: pd-lunge-r .34s ease-out; }
.pd-anim-lunge-l { animation: pd-lunge-l .34s ease-out; }
@keyframes pd-cast { 0%{filter:brightness(1)} 50%{filter:brightness(1.5) drop-shadow(0 0 10px var(--pd-violet))} 100%{filter:brightness(1)} }
.pd-anim-cast { animation: pd-cast .55s ease-out; }
@keyframes pd-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* ---------- UI entrance (transform-only: never hides content at rest) ---------- */
@keyframes pd-fade-up { from{transform:translateY(10px)} to{transform:translateY(0)} }
.pd-fade-up { animation: pd-fade-up .35s ease-out both; }
@keyframes pd-pop { 0%{transform:scale(.85)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }
.pd-pop { animation: pd-pop .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pd-slide-up { from{transform:translateY(100%)} to{transform:translateY(0)} }
.pd-slide-up { animation: pd-slide-up .26s cubic-bezier(.2,.8,.2,1) both; }

/* active-turn ring + reachable-cell shimmer */
@keyframes pd-turn-pulse {
  0%,100% { box-shadow: 0 0 0 2px var(--pd-gold), 0 0 10px 2px rgba(255,194,77,.5); }
  50%     { box-shadow: 0 0 0 3px var(--pd-gold), 0 0 18px 5px rgba(255,194,77,.8); }
}
.pd-turn-active { animation: pd-turn-pulse 1.2s ease-in-out infinite; }
@keyframes pd-cell-shimmer { 0%,100%{opacity:.7} 50%{opacity:1} }

.pd-no-select { user-select: none; -webkit-user-select: none; }

/* ---------- spell impact bursts ---------- */
@keyframes pd-impact-ring { 0%{transform:translate(-50%,-50%) scale(.25);opacity:.95} 100%{transform:translate(-50%,-50%) scale(2.6);opacity:0} }
@keyframes pd-impact-core { 0%{transform:translate(-50%,-50%) scale(.4);opacity:1} 55%{transform:translate(-50%,-50%) scale(1.25);opacity:.9} 100%{transform:translate(-50%,-50%) scale(.6);opacity:0} }

/* ============================================================
   LAYOUT — vanilla combat screen scaffolding (combat.view.js)
   ============================================================ */
.cm-stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% -10%, #2a1a12, #0b0807 60%); }
.cm-bezel { width: 400px; height: 820px; border-radius: 22px; overflow: hidden;
  border: 8px solid #1b1714; box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transform-origin: top left; }

.cm-screen { height: 100%; display: flex; flex-direction: column; padding: 8px 10px 10px; gap: 6px; position: relative; overflow: hidden; }
/* Flexible region above the pinned dock — the log absorbs slack so the dock
   (End Turn) is always fully on-screen, even with a dice-result card showing. */
.cm-upper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
/* Fixed rows never shrink, so the initiative bar (top) and the dock with the
   End Turn button (bottom) are always fully on-screen. The map is height-capped
   (see measure()) and the log takes the slack. */
.cm-header { display: flex; align-items: center; gap: 10px; padding: 2px 2px 6px; flex-shrink: 0; }
.cm-init { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; flex-shrink: 0; }

.cm-mapwrap { position: relative; width: 100%; flex-shrink: 0; }
.cm-grid { position: relative; margin: 0 auto; background-size: cover; background-position: center 35%;
  border: 2px solid var(--pd-gold-deep);
  box-shadow: inset 0 0 0 2px var(--pd-edge), inset 0 0 60px rgba(0,0,0,.6), 0 6px 0 var(--pd-edge);
  overflow: hidden; }
.cm-cells, .cm-preview, .cm-tokens, .cm-fx { position: absolute; inset: 0; }
.cm-banner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 60; pointer-events: none; }

.cm-dice { min-height: 4px; flex-shrink: 0; }
/* The log is the flex absorber: it takes the slack when there's room (readable,
   ~140px) but yields when the dice-result card appears so the dock + End Turn
   button never get pushed off the bottom of the fixed-height frame. */
.cm-logbox { flex: 1 1 auto; min-height: 64px; padding: 6px 9px; display: flex; flex-direction: column; }
.cm-logscroll { overflow-y: auto; font-family: var(--pd-mono); font-size: 16px; line-height: 1.3; flex: 1; }
/* Dock stays compact so it never crowds out the map or the log. */
.cm-dock { padding: 8px; flex-shrink: 0; }
.cm-dock .pd-btn { min-height: 40px; padding: 7px 9px; font-size: 15px; }
.cm-dock .pd-btn.pd-btn-sm { min-height: 34px; }
/* A caster's spell list can be long — let the action grid scroll instead of
   pushing the map + log off-screen. */
.cm-actiongrid { max-height: 150px; overflow-y: auto; padding-right: 2px; }
/* Uniform, readable action buttons: every button is the same height (so the
   grid isn't ragged when one spell's mechanic line is longer), the name never
   wraps (ellipsis if huge), and the mechanic line is allowed up to two tidy
   lines, clipped. */
.cm-actiongrid .pd-btn { height: 54px; min-height: 54px; padding: 5px 8px; overflow: hidden; line-height: 1.1; }
.cm-actiongrid .pd-btn > span:first-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.cm-actiongrid .pd-btn .pd-mono { font-size: 12px; }

.cm-overlay { position: absolute; inset: 0; display: none; z-index: 60; }
.cm-overpane { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.cm-drawerwrap { position: absolute; inset: 0; display: flex; align-items: flex-end; z-index: 55; }
.cm-drawer { width: 100%; max-height: 55%; display: flex; flex-direction: column; padding: 12px; }