/* =====================================================================
   ui.css -- app bar/tabs, the Kitchen, cutscenes, effect layer and the
   card-driven action affordances. Loaded after style.css.
   ===================================================================== */

/* ------------------------------------------------------------- app bar */

#app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
#app-bar #app-title {
  border-bottom: none;
  padding: 9px 0 8px;
  text-align: left;
}
#app-tabs { display: flex; gap: 6px; }
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--text-dim);
}
.tab-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border); }
.tab-btn.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* ------------------------------------------------------------- kitchen */

#kitchen-view {
  display: flex;
  flex-direction: row;
  gap: 14px;
  padding: 12px 16px 16px;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  /* warm kitchen light, vs the cold blue of the expedition */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224, 182, 97, 0.09), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 60px);
}

/* pantry (left) */
#pantry-pane {
  width: 260px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#pantry-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 0 4px;
}
#pantry-hint {
  font-size: 0.66rem;
  color: var(--text-dim);
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
}
#pantry-list { overflow-y: auto; flex: 1; min-height: 0; }

.pantry-group {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
  padding: 12px 6px 5px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 5px;
}
.pantry-group:first-child { padding-top: 2px; }

.pantry-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.pantry-row:hover { background: var(--panel-light); }
.pantry-row.selected { border-color: var(--accent); background: rgba(224,182,97,0.1); }
.pantry-row.in-pot { box-shadow: inset 2px 0 0 var(--good); }
.pantry-icon { width: 1.3em; text-align: center; opacity: 0.9; }
.pantry-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pantry-count { font-size: 0.72rem; color: var(--good); font-weight: 700; }
.pantry-add {
  padding: 1px 8px;
  font-size: 0.85rem;
  letter-spacing: 0;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.14s ease;
}
.pantry-row:hover .pantry-add { opacity: 1; }

.pantry-row.type-Resource .pantry-icon { color: #8fa8e0; }
.pantry-row.type-Survival .pantry-icon { color: #f0a95e; }
.pantry-row.type-Sabotage .pantry-icon { color: #e08080; }
.pantry-row.type-Event    .pantry-icon { color: #c093e0; }

/* counter (middle) */
#kitchen-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#counter-head { flex-shrink: 0; }
#counter-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--accent);
}
#counter-sub { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }

#kitchen-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
#prep-area, #shelf-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.kitchen-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
  margin-bottom: 10px;
  flex-shrink: 0;
}

#cookbook-meta { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
#cookbook-meta input { width: 100%; font-size: 0.85rem; }
#cookbook-name { font-family: var(--font-display); font-size: 1rem !important; }

/* the pot */
#pot-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0 10px;
  flex-shrink: 0;
}
#pot-wrap #z-jar { margin-left: auto; }
#pot {
  position: relative;
  width: 108px;
  height: 82px;
  flex-shrink: 0;
  border-radius: 6px 6px 34% 34%;
  background: linear-gradient(180deg, #2b3441, #171d26);
  border: 2px solid #4a5666;
  overflow: hidden;
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.55);
}
#pot-rim {
  position: absolute;
  inset: 0 -6px auto -6px;
  height: 9px;
  background: linear-gradient(180deg, #5b6879, #3a4553);
  border-radius: 4px;
  z-index: 3;
}
#pot-contents {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(180deg, var(--survival), #8a4a12);
  transition: height 0.45s cubic-bezier(0.3, 0.8, 0.3, 1);
  z-index: 1;
}
#pot-contents.bubbling::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(6px 6px at 22% 40%, rgba(255,255,255,0.4), transparent 70%),
    radial-gradient(5px 5px at 62% 25%, rgba(255,255,255,0.32), transparent 70%),
    radial-gradient(4px 4px at 80% 60%, rgba(255,255,255,0.28), transparent 70%);
  animation: bubble 2.4s ease-in-out infinite;
}
@keyframes bubble {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-7px); opacity: 1; }
}
#pot.splash { animation: pot-shake 0.4s ease; }
@keyframes pot-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  30% { transform: translateX(-3px) rotate(-1.5deg); }
  65% { transform: translateX(3px) rotate(1.5deg); }
}
.pot-drop {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  font-size: 1.1rem;
  z-index: 4;
  animation: drop-in 0.65s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
@keyframes drop-in {
  0% { top: -22px; opacity: 0; }
  35% { opacity: 1; }
  100% { top: 62px; opacity: 0; transform: translateX(-50%) scale(0.5); }
}
#pot-steam {
  position: absolute;
  inset: -22px 0 auto 0;
  height: 26px;
  display: flex;
  justify-content: center;
  gap: 13px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 5;
  pointer-events: none;
}
#pot-steam span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  animation: steam 2.6s ease-in-out infinite;
}
#pot-steam span:nth-child(2) { animation-delay: 0.5s; }
#pot-steam span:nth-child(3) { animation-delay: 1.1s; }
@keyframes steam {
  0% { transform: translateY(12px) scale(0.5); opacity: 0; }
  40% { opacity: 0.7; }
  100% { transform: translateY(-16px) scale(1.5); opacity: 0; }
}
#pot-readout { font-size: 0.85rem; color: var(--text-dim); }
.pot-empty { font-style: italic; opacity: 0.75; }

/* Overflow easter egg: the fill bar already caps out at 100% once the pot
   is stuffed full, so past that point the extra has nowhere to go but
   down the sides and onto the counter. */
#pot.overflowing { overflow: visible; }
.pot-overflow-drip {
  position: absolute;
  top: 100%;
  width: 8px;
  height: 0;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, var(--survival), #8a4a12);
  opacity: 0;
  z-index: 2;
}
.pot-overflow-drip.drip-a { left: 40%; }
.pot-overflow-drip.drip-b { left: 60%; }
#pot.overflowing .pot-overflow-drip.drip-a { opacity: 1; animation: drip-flow 1.1s ease-in-out infinite; }
#pot.overflowing .pot-overflow-drip.drip-b { opacity: 1; animation: drip-flow 1.1s ease-in-out 0.45s infinite; }
@keyframes drip-flow {
  0%   { height: 0; }
  60%  { height: 24px; }
  100% { height: 24px; opacity: 0; }
}
#pot-puddle {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 150px;
  height: 24px;
  margin-top: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--survival) 0%, rgba(138,74,18,0.55) 55%, transparent 78%);
  transform: translateX(-50%) scale(var(--puddle-scale, 0));
  transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.3, 1);
  z-index: 1;
  pointer-events: none;
}

#mix-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
}
.mix-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--panel-light);
  font-size: 0.8rem;
}
.mix-icon { width: 1.2em; text-align: center; }
.mix-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-stepper { display: flex; align-items: center; gap: 4px; }
.mix-stepper button {
  padding: 0 7px;
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1.5;
  border-radius: 4px;
}
.mix-val { min-width: 1.6em; text-align: center; font-weight: 700; }

#kitchen-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
#kitchen-actions button { flex: 1; }

/* shelf */
#shelf-list { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.shelf-book {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 10px;
  padding: 9px 11px 9px 0;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.shelf-book .book-spine { background: var(--border); border-radius: 7px 0 0 7px; }
.shelf-book.custom .book-spine { background: var(--survival); }
.shelf-book.active { border-color: var(--accent); }
.shelf-book.active .book-spine { background: var(--accent); }
.book-name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.book-desc { font-size: 0.72rem; color: var(--text-dim); margin: 2px 0 4px; line-height: 1.4; }
.book-meta { font-size: 0.64rem; color: var(--text-dim); }
.book-actions { grid-column: 2; display: flex; gap: 6px; margin-top: 8px; }
.book-actions button { padding: 4px 10px; font-size: 0.6rem; }

/* card inspector (right) */
#card-detail-pane {
  width: 280px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#card-detail-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
  margin-bottom: 10px;
}
#card-detail-body { overflow-y: auto; flex: 1; min-height: 0; }
.cd-empty { color: var(--text-dim); font-style: italic; font-size: 0.82rem; }

.cd-card {
  height: 190px;
  border-radius: 11px;
  border: 2px solid var(--border);
  background: linear-gradient(160deg, var(--panel-light), var(--bg));
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  animation: cd-in 0.28s ease;
}
@keyframes cd-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.cd-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
}
.cd-card-art { font-size: 3.2rem; line-height: 1; opacity: 0.92; }
.cd-card-type {
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
}
.cd-card.type-Resource { border-left: 6px solid var(--resource); }
.cd-card.type-Survival { border-left: 6px solid var(--survival); }
.cd-card.type-Sabotage { border-left: 6px solid var(--sabotage); }
.cd-card.type-Event    { border-left: 6px solid var(--event); }

.cd-rules, .cd-blurb, .cd-note, .cd-box {
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--text-dim);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.cd-rules b {
  display: block;
  color: var(--text);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: 4px;
}
.cd-blurb { font-style: italic; color: var(--text); opacity: 0.82; }
.cd-note { font-size: 0.72rem; }
.cd-box { border-bottom: none; font-size: 0.72rem; }
.cd-add { width: 100%; }

/* ------------------------------------------- card-driven action affordances */

.actionable {
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  outline: 1.5px solid var(--accent);
  outline-offset: 1px;
  animation: action-glow 1.6s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.actionable:hover { transform: translateY(-2px); }
@keyframes action-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(224, 182, 97, 0.4); }
  50% { box-shadow: 0 0 14px rgba(224, 182, 97, 0.8); }
}
.action-chip {
  position: absolute;
  top: -8px;
  right: -6px;
  background: var(--accent);
  color: #14181f;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 1px 6px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}

.play-chip {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent);
  color: #14181f;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 1px 7px;
  border-radius: 999px;
  pointer-events: none;
}
.card { position: relative; }
.card-art {
  font-size: 1.7rem;
  text-align: center;
  opacity: 0.55;
  line-height: 1;
  margin: 5px 0 1px;
}

/* hand drag-to-reorder */
.card.dragging { opacity: 0.4; transform: scale(0.96); }
.card.drop-target { outline: 2px dashed var(--accent); outline-offset: 3px; }

button.end-turn { border-color: var(--good); color: var(--good); }

/* ----------------------------------------------------------- fx layer */

#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}

.card-fx {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 3px 14px rgba(0,0,0,0.85);
  animation: fx-pop 1.05s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes fx-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(-9deg); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(3deg); }
  45%  { transform: translate(-50%, -60%) scale(1.05) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -145%) scale(0.9); }
}
.fx-ambush   { color: #ff5d57; }
.fx-heal     { color: var(--good); }
.fx-loot     { color: var(--survival); }
.fx-stun     { color: #b9a6f0; }
.fx-door     { color: #8fd0ff; }
.fx-redirect { color: #f0c05e; }
.fx-axe      { color: #f09a5e; }
.fx-obstacle { color: #b0b8c4; }
.fx-z        { color: #8fa8e0; }
.fx-pouch    { color: #d7c08a; }

.toast {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--good);
  color: var(--text);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.8rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  animation: toast-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.toast.bad { border-color: var(--bad); }
.toast.out { animation: toast-out 0.4s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ---------------------------------------------------------- cutscenes */

#cutscene {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.86);
  backdrop-filter: blur(3px);
  animation: cs-fade-in 0.3s ease;
}
#cutscene.closing { animation: cs-fade-out 0.34s ease forwards; }
@keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-fade-out { to { opacity: 0; } }

.cs-inner {
  text-align: center;
  animation: cs-rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes cs-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
.cs-kicker {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.cs-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.cs-huge { font-size: 4.2rem; letter-spacing: 0.16em; color: var(--bad); }
.cs-sub { color: var(--text-dim); font-size: 0.9rem; margin-top: 8px; font-style: italic; }
.cs-stats {
  display: flex;
  gap: 26px;
  justify-content: center;
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.cs-monster-frame { position: relative; display: inline-block; }
.cs-monster-img {
  width: 200px;
  height: 275px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--bad);
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.75);
  animation: monster-loom 1.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes monster-loom {
  0%   { transform: scale(0.72) translateY(22px); filter: brightness(0.35); }
  45%  { transform: scale(1.06) translateY(0); filter: brightness(1.1); }
  60%  { transform: scale(1.02) translateX(-7px); }
  70%  { transform: scale(1.02) translateX(6px); }
  100% { transform: scale(1); filter: brightness(1); }
}
.cs-slash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 44%, rgba(255, 90, 84, 0.95) 47%,
              rgba(255,255,255,0.95) 50%, rgba(255, 90, 84, 0.95) 53%, transparent 56%);
  opacity: 0;
  animation: slash 0.5s ease 0.95s;
}
@keyframes slash {
  0% { opacity: 0; transform: translateX(-120%) scaleX(0.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%) scaleX(1.4); }
}

.cs-duel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 8px 0;
}
.cs-duelist {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  min-width: 190px;
}
.cs-duelist.left  { animation: duel-left 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); }
.cs-duelist.right { animation: duel-right 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes duel-left  { from { opacity: 0; transform: translateX(-90px); } }
@keyframes duel-right { from { opacity: 0; transform: translateX(90px); } }
.cs-vs {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--bad);
  animation: vs-clash 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.35s both;
}
@keyframes vs-clash {
  0% { opacity: 0; transform: scale(2.6) rotate(-16deg); }
  60% { opacity: 1; transform: scale(0.88) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

.cs-curse .cs-title { color: var(--event); }
.cs-curse-mark {
  font-size: 3.4rem;
  line-height: 1;
  margin: 6px 0 2px;
  animation: curse-rise 0.75s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes curse-rise {
  from { opacity: 0; transform: translateY(28px) scale(0.7); }
}

/* Zeluphinom overflow easter egg. Zeluphinom is the upgrade material, so the
   payoff for drowning the vial is that everything on screen gets "enhanced". */
.cs-zflood .cs-title { color: var(--accent); }
.cs-zflood-mark {
  font-size: 3.6rem;
  line-height: 1;
  color: var(--accent);
  animation: z-surge 0.9s cubic-bezier(0.2, 1.3, 0.3, 1);
}
@keyframes z-surge {
  0%   { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  60%  { opacity: 1; transform: scale(1.25) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
#z-jar-fill.overflowing {
  animation: z-boil 0.7s ease-in-out infinite alternate;
  box-shadow: 0 0 14px var(--accent), inset 0 0 10px rgba(255, 255, 255, 0.35);
}
@keyframes z-boil { to { filter: brightness(1.45) saturate(1.4); } }
body.z-enhanced .kitchen-card,
body.z-enhanced .bench-row,
body.z-enhanced .shelf-book {
  animation: z-enhanced-glow 1.1s ease-in-out 3;
}
@keyframes z-enhanced-glow {
  50% { box-shadow: 0 0 12px var(--accent); border-color: var(--accent); }
}

.cs-showdown .cs-title { animation: showdown-throb 1.6s ease-in-out infinite; }
@keyframes showdown-throb {
  0%, 100% { text-shadow: 0 0 18px rgba(221, 91, 86, 0.5); }
  50% { text-shadow: 0 0 40px rgba(221, 91, 86, 0.95); }
}

/* Lighter, faster cutscene for an individual hit -- attacker vs defender --
   reusing the same overlay system as the monster/duel/showdown beats above. */
.cs-impact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 6px;
}
.cs-impact-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: impact-side-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes impact-side-in {
  from { opacity: 0; transform: translateY(10px); }
}
.cs-impact-portrait {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  border: 3px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,0.6);
}
.cs-impact-monster {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--bad);
  border-color: var(--bad);
}
.cs-impact-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.cs-impact-bolt {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--bad);
  animation: impact-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes impact-pop {
  0% { opacity: 0; transform: scale(0.4); }
  55% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* A quick "you drew a card" beat, privately shown to whoever drew --
   the same face-down/flip mechanic as the Loot overlay, sized up as a
   lone centerpiece instead of a row of picks. */
.cs-draw-card {
  width: 150px;
  height: 208px;
  margin: 20px auto 0;
}
.cs-draw-card .loot-face { border-radius: 13px; }
.cs-draw-card .loot-back span { font-size: 2.8rem; }
.cs-draw-card .loot-front-name { font-size: 1.1rem; }
.cs-draw-icon { font-size: 2.1rem; margin-bottom: 8px; opacity: 0.9; }

/* The interactive "how do you respond" overlay -- monster strikes and
   incoming player attacks both land here. Same portrait/bolt language as
   the impact cutscene above, plus a row of real clickable choices. */
.cs-respond-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  max-width: 920px;
}
.cs-respond-opt {
  width: 210px;
  text-align: left;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: respond-opt-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-respond-opt:nth-child(1) { animation-delay: 0.05s; }
.cs-respond-opt:nth-child(2) { animation-delay: 0.11s; }
.cs-respond-opt:nth-child(3) { animation-delay: 0.17s; }
.cs-respond-opt:nth-child(4) { animation-delay: 0.23s; }
@keyframes respond-opt-in {
  from { opacity: 0; transform: translateY(14px); }
}
.cs-respond-opt:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
.cs-respond-opt-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.cs-respond-opt-detail {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.35;
}
.cs-respond-opt-flavor {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--accent);
  line-height: 1.4;
  padding-top: 4px;
  border-top: 1px solid var(--hairline);
}
/* "Take the hit" reads as the grim option, not just another choice. */
.cs-respond-opt[data-key="pass"] { border-color: rgba(217, 83, 79, 0.4); }
.cs-respond-opt[data-key="pass"]:hover { border-color: var(--bad); }
.cs-respond-opt[data-key="pass"] .cs-respond-opt-flavor { color: var(--bad); }

/* --------------------------------------------------- kitchen, tight screens */
@media (max-height: 820px) {
  #kitchen-body { grid-template-columns: 1fr 280px; }
  #pot { width: 90px; height: 68px; }
  .cd-card { height: 160px; }
  .cd-card-art { font-size: 2.6rem; }
  #counter-title { font-size: 1.4rem; }
}
@media (max-width: 1180px) {
  #card-detail-pane { width: 240px; }
  #pantry-pane { width: 224px; }
}

/* =====================================================================
   Lobby: three columns (characters | detail | recipe+roster), full width,
   nothing ever scrolls the page itself.
   ===================================================================== */

#lobby-view {
  max-width: 1720px !important;
  gap: 14px;
  align-items: stretch;
}
#char-list-pane { width: 250px; }

#lobby-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;          /* the detail pane manages its own scroll */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#char-detail-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#lobby-side {
  width: 372px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
#lobby-recipe-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#recipe-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
}
#lobby-roster-pane {
  flex: 0 0 auto;
  max-height: 46%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#roster-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
}

/* The character sheet can breathe now that it owns the middle column. */
.char-big-portrait { width: 116px; height: 160px; }
.char-big-name { font-size: 2.2rem; }
#char-detail-pane .kit-block { font-size: 0.88rem; }

@media (max-width: 1400px) {
  #lobby-side { width: 320px; }
  #char-list-pane { width: 214px; }
  .char-big-portrait { width: 92px; height: 127px; }
  .char-big-name { font-size: 1.8rem; }
}
@media (max-height: 820px) {
  .char-big-portrait { width: 88px; height: 121px; }
  .char-big-name { font-size: 1.7rem; }
  #char-detail-pane { padding: 14px 16px; }
  #char-detail-pane .kit-block {
    font-size: 0.8rem;
    margin-bottom: 9px;
    padding-bottom: 9px;
    line-height: 1.45;
  }
  .recipe-desc { font-size: 0.7rem; }
  .recipe-row { padding: 5px 9px; }
}

/* ------------------------------------------------------------ loot overlay */

.cs-loot .cs-title { margin-top: 6px; }
.loot-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  max-width: 860px;
}

.loot-card {
  width: 108px;
  height: 150px;
  position: relative;
  cursor: pointer;
  perspective: 900px;
  animation: loot-deal 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  transition: transform 0.16s ease, opacity 0.3s ease;
}
@keyframes loot-deal {
  from { opacity: 0; transform: translateY(34px) rotate(-6deg) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.loot-card:hover:not(.locked):not(.chosen) { transform: translateY(-10px); }
.loot-card.locked { opacity: 0.28; pointer-events: none; }

.loot-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.4, 0.05, 0.2, 1);
  border: 2px solid var(--border);
}
.loot-back {
  background:
    repeating-linear-gradient(45deg, #2c3648 0 7px, #232c3a 7px 14px);
  border-color: var(--survival);
  box-shadow: inset 0 0 22px rgba(0,0,0,0.6);
}
.loot-back span { font-size: 2.1rem; color: var(--survival); opacity: 0.65; font-weight: 700; }
.loot-front {
  background: linear-gradient(160deg, var(--panel-light), var(--bg));
  border-color: var(--accent);
  transform: rotateY(180deg);
  padding: 10px;
}
.loot-front-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: var(--accent);
}
.loot-card.revealed .loot-back  { transform: rotateY(180deg); }
.loot-card.revealed .loot-front { transform: rotateY(360deg); }
.loot-card.revealed {
  animation: loot-pop 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) 0.35s both;
}
@keyframes loot-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.16) translateY(-8px); }
  100% { transform: scale(1.08) translateY(-4px); }
}
.loot-card.chosen:not(.revealed) { animation: loot-waiting 0.9s ease-in-out infinite; }
@keyframes loot-waiting {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(-16px); }
}
.loot-card.type-Resource .loot-front { border-color: var(--resource); }
.loot-card.type-Survival .loot-front { border-color: var(--survival); }
.loot-card.type-Sabotage .loot-front { border-color: var(--sabotage); }
.loot-card.type-Event    .loot-front { border-color: var(--event); }

/* ------------------------------------------------------------------ map */

#map-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 24px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
#map-head { text-align: center; }
#map-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}
#map-sub { color: var(--text-dim); font-size: 0.82rem; margin-top: 2px; }

#map-wrap { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 10px; }
#world-map {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.map-region {
  stroke: rgba(10, 14, 20, 0.55);
  stroke-width: 3;
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.map-region.map-hover {
  opacity: 1;
  filter: brightness(1.16);
}

.map-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  fill: rgba(10, 14, 20, 0.82);
  text-anchor: middle;
  cursor: pointer;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 3px;
  transition: fill 0.15s ease;
}
.map-label-tight { font-size: 12px; }
.map-label.map-hover { fill: #14181f; }

/* the region reveal overlay -- reuses #cutscene */
.cs-region { max-width: 900px; }
.region-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
  margin: 20px 0 10px;
}
.region-char-row, .region-card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.region-char-card {
  width: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.region-char-portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  border: 2px solid var(--border);
}
.region-char-name { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; text-align: center; }
.region-char-stat { font-size: 0.72rem; color: var(--text-dim); }
.region-card-face { width: 108px; height: 150px; }
.region-close-btn { margin-top: 26px; }



/* =====================================================================
   THE KITCHEN AS A ROOM
   Tiled backsplash, a rail of hanging tools, a window, and a butcher-block
   counter that the three working panes actually sit on. All CSS -- no art
   files -- and it lives in #kitchen-room behind everything, pointer-events
   off, so nothing here can eat a click.
   ===================================================================== */

#kitchen-view { position: relative; isolation: isolate; }
#kitchen-view > *:not(#kitchen-room) { position: relative; z-index: 1; }

#kitchen-room {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 12px;
}

/* wall: glazed tile, grouted, with the light coming from the window side */
#kitchen-tiles {
  position: absolute;
  inset: 0 0 46% 0;
  background:
    linear-gradient(180deg, rgba(255,236,196,0.10), rgba(0,0,0,0.18)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.34) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.34) 0 1px, transparent 1px 54px),
    linear-gradient(160deg, #2c333d, #202730);
}
#kitchen-tiles::after {          /* wiped-down sheen */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 78% 0%, rgba(255,240,205,0.14), transparent 60%);
}

/* window over the sink side */
#kitchen-window {
  position: absolute;
  right: 5%;
  top: 5%;
  width: 168px;
  height: 116px;
  border: 6px solid #3a4250;
  border-radius: 4px;
  background: linear-gradient(180deg, #33465c, #1d2a38);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), inset 0 0 26px rgba(180,215,255,0.14);
  display: flex;
}
#kitchen-window span { flex: 1; border-right: 5px solid #3a4250; }
#kitchen-window span:last-child { border-right: none; }
#kitchen-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.16) 0 22%, transparent 22% 46%,
              rgba(255,255,255,0.08) 46% 58%, transparent 58%);
}

/* pot rail: the tools hang off it */
#kitchen-rail {
  position: absolute;
  left: 3%;
  right: 34%;
  top: 26%;
  height: 4px;
  background: linear-gradient(180deg, #7d848f, #444b56);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.hang-tool { position: relative; width: 26px; height: 52px; }
.hang-tool::before {              /* the hook */
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 2px;
  height: 13px;
  background: #6d747f;
}
.hang-tool::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #99a1ac, #5c636e);
}
.tool-ladle::after   { width: 20px; height: 20px; border-radius: 50% 50% 60% 60%; }
.tool-pan::after     { width: 26px; height: 15px; border-radius: 3px 3px 12px 12px; }
.tool-knife::after   { width: 7px;  height: 34px; border-radius: 2px 2px 60% 2px; }
.tool-spoon::after   { width: 13px; height: 24px; border-radius: 50% 50% 40% 40%; }
.tool-strainer::after{ width: 24px; height: 13px; border-radius: 0 0 14px 14px;
  background: repeating-linear-gradient(90deg, #99a1ac 0 2px, #4d545e 2px 4px); }

/* butcher block */
#kitchen-counter {
  position: absolute;
  inset: 46% 0 0 0;
  background:
    linear-gradient(180deg, rgba(255,225,180,0.14), transparent 12%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 3px, transparent 3px 26px),
    linear-gradient(180deg, #5b4227, #3a2a19 60%, #2a1e12);
  border-top: 5px solid #74532f;
  box-shadow: 0 -10px 26px rgba(0,0,0,0.5);
}
#kitchen-counter::after {         /* a couple of honest rings and knife marks */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38px 12px at 22% 26%, rgba(0,0,0,0.22), transparent 70%),
    radial-gradient(28px 9px at 68% 42%, rgba(0,0,0,0.18), transparent 70%),
    linear-gradient(94deg, transparent 40%, rgba(0,0,0,0.12) 40.4%, transparent 41%);
}

/* the panes read as things resting on the counter */
#pantry-pane, #card-detail-pane, #prep-area, #shelf-area, #pile-bench {
  background: rgba(24, 29, 37, 0.93);
  box-shadow: 0 16px 34px rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
#shelf-area {                     /* an actual shelf, lipped at the bottom */
  border-bottom: 6px solid #74532f;
}

/* ---------------------------------------------------------------- stove */

#stove {
  position: relative;
  flex-shrink: 0;
  padding: 16px 20px 22px;
}
#burner {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #2a2016 40%, #14100c 75%);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.8), 0 0 26px rgba(255,132,48,0.28);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
}
#burner .flame {
  width: 12px;
  height: 20px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(180deg, #ffd98a, #ff8a3a 55%, #d3401c);
  filter: blur(0.4px);
  transform-origin: 50% 100%;
  animation: flicker 1.1s ease-in-out infinite;
  opacity: 0.9;
}
#burner .flame:nth-child(2) { animation-delay: 0.28s; height: 26px; }
#burner .flame:nth-child(3) { animation-delay: 0.55s; }
@keyframes flicker {
  0%, 100% { transform: scaleY(1) scaleX(1) translateY(0); opacity: 0.85; }
  40%      { transform: scaleY(1.28) scaleX(0.88) translateY(-2px); opacity: 1; }
  70%      { transform: scaleY(0.92) scaleX(1.08); opacity: 0.8; }
}
#pot {
  position: relative;
  z-index: 2;
  border-color: #6b7382;
  background: linear-gradient(180deg, #38414f, #171d26 70%);
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.6), 0 8px 18px rgba(0,0,0,0.55);
}
#pot::before, #pot::after {       /* handles */
  content: "";
  position: absolute;
  top: 12px;
  width: 13px;
  height: 20px;
  border: 3px solid #5b6472;
  border-radius: 4px;
  z-index: 0;
}
#pot::before { left: -14px; border-right: none; }
#pot::after  { right: -14px; border-left: none; }

/* ------------------------------------------------------- the pile bench */

#kitchen-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}
#prep-area { flex: 0 0 auto; }
#pile-bench { flex: 0 0 auto; }
#bench-body {
  display: grid;
  grid-template-columns: 178px 1fr;
  gap: 14px;
  align-items: start;
}
.bench-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.bench-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
}
.bench-note { font-size: 0.68rem; color: var(--text-dim); line-height: 1.35; }

.bench-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
.bench-row-label { font-size: 0.72rem; color: var(--text-dim); }
.bench-stepper button { padding: 0 8px; }
.bench-toggle { display: flex; gap: 4px; }
.bench-toggle button { padding: 3px 7px; font-size: 0.55rem; }
.bench-toggle button.on { border-color: var(--accent); color: var(--accent); background: rgba(224,182,97,0.12); }

/* the two piles at the head of the pantry */
.pantry-row.pantry-pile .pantry-icon { color: var(--accent); }
.pantry-row.pantry-pile .pantry-count {
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* pile editors, as shown in the inspector pane */
.pile-detail { display: flex; flex-direction: column; gap: 10px; }
.pile-detail-art {
  font-size: 2.4rem;
  line-height: 1;
  text-align: center;
  color: var(--accent);
  padding: 10px 0 4px;
}
.pile-detail-blurb {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-dim);
  text-wrap: pretty;
}
.pile-detail .bench-note { font-size: 0.7rem; }
.pile-detail #monster-ladder {
  grid-template-columns: 1fr;
  max-height: none;
}
.pile-detail #monster-reset { width: 100%; }

/* the ore jar */
#z-jar {
  position: relative;
  width: 62px;
  height: 96px;
  margin: 6px auto 10px;
  border: 2px solid #59627140;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(100deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: inset -6px 0 10px rgba(255,255,255,0.05), inset 6px 0 12px rgba(0,0,0,0.35);
  overflow: hidden;
}
#z-jar-lid {
  position: absolute;
  inset: 0 -4px auto -4px;
  height: 10px;
  background: linear-gradient(180deg, #6d7480, #454c57);
  border-radius: 3px;
}
#z-jar-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background:
    radial-gradient(4px 4px at 30% 20%, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(3px 3px at 66% 44%, rgba(255,255,255,0.35), transparent 70%),
    linear-gradient(180deg, #6f86c8, #2f3f78);
  transition: height 0.4s cubic-bezier(0.3, 0.8, 0.3, 1);
}
#z-jar-fill.forged { background: linear-gradient(180deg, #d9b96a, #8a6a1f); }

/* the monster block */
#monster-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px;
  max-height: 232px;
  overflow-y: auto;
  padding-right: 4px;
}
.mon-row {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px;
  background: var(--panel-light);
}
.mon-row.custom { border-color: var(--bad); box-shadow: inset 0 0 0 1px rgba(221,91,86,0.25); }
.mon-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mon-level { font-size: 0.7rem; font-weight: 700; color: var(--accent); }
.mon-art {
  width: 22px; height: 30px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: #000;
}
.mon-stats { display: flex; flex-direction: column; gap: 1px; }
.mon-stat { padding: 1px 0; }
.mon-stat .bench-row-label { font-size: 0.58rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.mon-stat .mix-val { min-width: 1.4em; font-size: 0.72rem; }
.mon-stat .bench-stepper button { padding: 0 5px; font-size: 0.75rem; }
.mon-reset { margin-top: 5px; width: 100%; padding: 2px 4px; font-size: 0.5rem; }
#monster-reset { margin-top: 8px; padding: 4px 10px; font-size: 0.55rem; }

@media (max-width: 1400px) {
  #bench-body { grid-template-columns: 1fr; }
  #monster-ladder { max-height: 200px; }
}

/* =====================================================================
   MAP: a drawn chart
   ===================================================================== */

#world-map {
  border: none;
  border-radius: 6px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.6);
  background: transparent;
}
#map-wrap { max-width: 1180px; }

.map-region {
  stroke: #4a3a1e;
  stroke-opacity: 0.72;
  stroke-width: 1.8;
  cursor: pointer;
  opacity: 0.92;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.map-region.region-land { stroke-width: 2.6; }
.map-region.region-sea { stroke-width: 1.2; stroke-opacity: 0.4; opacity: 0.5; }
.map-region.region-chasm { stroke-dasharray: 5 3; }
.map-region.map-hover { opacity: 1; filter: saturate(1.25) brightness(1.08); }

.map-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: #3b2d15;
  text-anchor: middle;
  text-transform: uppercase;
  cursor: pointer;
  paint-order: stroke;
  stroke: rgba(247, 240, 219, 0.75);
  stroke-width: 3.5px;
  transition: fill 0.15s ease;
}
.map-label.label-sm { font-size: 12px; letter-spacing: 0.16em; }
.map-label.label-sea {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.22em;
  fill: #2f4b57;
  font-size: 18px;
}
.map-label.map-hover { fill: #7a3018; }
.map-fine {
  font-family: var(--font-num);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: #4a3a1e;
  fill-opacity: 0.75;
}
.map-cartouche {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2em;
  fill: #3b2d15;
}
.region-blurb { max-width: 640px; margin: 10px auto 0; line-height: 1.5; }

/* =====================================================================
   ON-BOARD CUES AND TABLE BEATS  (the log, made unnecessary)
   ===================================================================== */

.seat-cue {
  position: absolute;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  background: rgba(12, 15, 20, 0.94);
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.55);
  animation: cue-rise 2.4s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.cue-icon { font-size: 0.82rem; line-height: 1; }
@keyframes cue-rise {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.9); }
  12%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -22px); }
  100% { opacity: 0; transform: translate(-50%, -34px); }
}
.cue-dmg      { border-color: var(--bad); color: #ffb3b0; }
.cue-heal     { border-color: var(--good); color: #b8e8b4; }
.cue-gain     { border-color: var(--accent); color: var(--accent); }
.cue-block    { border-color: #8fd0ff; color: #b9e4ff; }
.cue-sabotage { border-color: var(--sabotage); color: #f0a8a8; }
.cue-victory  { border-color: var(--accent); color: #ffe6a8; background: rgba(60, 44, 14, 0.95); }
.cue-neutral  { color: var(--text-dim); }

.seat-card.cue-flash { animation: cue-flash 0.5s ease; }
@keyframes cue-flash {
  0%   { box-shadow: inset 0 0 0 999px rgba(224, 182, 97, 0.16); }
  100% { box-shadow: inset 0 0 0 999px rgba(224, 182, 97, 0); }
}

#beat-rail {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 920;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.beat {
  padding: 7px 20px;
  border-radius: 999px;
  background: rgba(12, 15, 20, 0.94);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  animation: beat-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.beat.out { animation: beat-out 0.42s ease forwards; }
@keyframes beat-in  { from { opacity: 0; transform: translateY(-12px); } }
@keyframes beat-out { to { opacity: 0; transform: translateY(-10px); } }
.beat-round { border-color: var(--accent); color: var(--accent); letter-spacing: 0.06em; }
.beat-event { border-color: var(--event); color: #cdb0e8; }
.beat-bad   { border-color: var(--bad); color: #ffb3b0; }
.beat-quiet { font-size: 0.8rem; color: var(--text-dim); font-style: italic; }

/* a one-beat flash for your own good news (upgrade, minion, kill) */
.cs-flash { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cs-flash-icon {
  font-size: 3.4rem;
  line-height: 1;
  animation: impact-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.cs-flash-label {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* =====================================================================
   CHARACTER SHEET: ability / perk / minion / gear, each its own card
   ===================================================================== */

.kit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.kit-panel {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-light);
  padding: 11px 13px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 3px solid var(--border);
}
.kit-panel header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.kit-kind {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text);
}
.kit-cost { font-size: 0.64rem; color: var(--text-dim); white-space: nowrap; }
.kit-panel h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--accent);
}
.kit-panel p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.9;
  text-wrap: pretty;
}
.kit-panel footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}
.kit-foot-note { font-size: 0.62rem; color: var(--text-dim); }
.kit-pips { display: inline-flex; gap: 3px; }
.kit-pips .pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--text-dim);
  display: block;
}
.pips-ability .pip.on { background: #4f8fd0; border-color: #4f8fd0; }
.pips-perk .pip.on { background: var(--accent); border-color: var(--accent); }

.panel-ability { border-top-color: #4f8fd0; }
.panel-perk    { border-top-color: var(--accent); }
.panel-minion  { border-top-color: var(--good); }
.panel-gear    { border-top-color: var(--text-dim); }

.kit-minion-body { display: flex; gap: 11px; align-items: flex-start; }
.kit-minion-art {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #000;
}
.gear-ladders { display: flex; flex-direction: column; gap: 6px; }
.gear-ladder {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.gear-icon { width: 1.2em; text-align: center; }
.gear-name { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.gear-steps { margin-left: auto; color: var(--text); }
.kit-note {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-dim);
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}
.kit-note b {
  color: var(--text);
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-right: 6px;
}

@media (max-width: 1180px) {
  .kit-grid { grid-template-columns: 1fr; }
}
@media (max-height: 820px) {
  .kit-panel { padding: 8px 11px; gap: 4px; }
  .kit-panel h4 { font-size: 1rem; }
  .kit-panel p { font-size: 0.76rem; line-height: 1.42; }
  .kit-minion-art { width: 44px; height: 44px; }
}


/* The shelf's fixed 320px column starves the working side of the counter on
   anything narrower than a wide desktop -- stack it under instead. */
@media (max-width: 1340px) {
  #kitchen-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  #shelf-area { max-height: 240px; }
}
@media (max-width: 1040px) {
  #kitchen-view { flex-wrap: wrap; }
  #pantry-pane, #card-detail-pane { width: 220px; }
}


/* =====================================================================
   WEAR
   The chart is drawn on paper that has been folded, stained and carried
   around; the app it sits in should feel handled too. One fixed layer:
   fine grain over everything, heavier foxing in the corners, nothing in
   the middle where you are actually reading. Pointer-events off.
   ===================================================================== */

#wear-layer {
  position: fixed;
  inset: 0;
  z-index: 880;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(58% 44% at 0% 0%, rgba(120, 96, 52, 0.16), transparent 70%),
    radial-gradient(52% 40% at 100% 100%, rgba(120, 96, 52, 0.14), transparent 70%),
    radial-gradient(40% 30% at 96% 4%, rgba(90, 70, 40, 0.1), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='matrix' values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0.1 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-blend-mode: normal, normal, normal, overlay;
}
/* a crease down the same place the chart is folded */
#wear-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 33.2%, rgba(255,255,255,0.03) 33.4%, transparent 33.7%),
    linear-gradient(0deg, transparent 61%, rgba(0,0,0,0.10) 61.3%, transparent 61.7%);
}

/* ================================================== story mode + VN ====== */

/* ---------------------------------------------------------- visual novel */

.vn {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  width: min(900px, 92vw);
  margin: auto;
  cursor: pointer;
}
.vn-portrait {
  width: 190px;
  flex-shrink: 0;
  border-radius: 12px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
  animation: vn-rise 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes vn-rise { from { opacity: 0; transform: translateY(18px); } }

.vn-box {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, black);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.vn-speaker {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 5px;
}
.vn-text {
  font-size: 1.02rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.vn-text.in { opacity: 1; transform: none; }
.vn-note {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.45;
}
.vn-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.vn-dots { display: flex; gap: 5px; }
.vn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.vn-dot.on { background: var(--accent); }
.vn-hint { font-size: 0.68rem; color: var(--text-dim); }

@media (max-width: 760px) {
  .vn { flex-direction: column; align-items: stretch; }
  .vn-portrait { width: 120px; align-self: center; }
}

/* ===================================================== story pins ======== */
/* Stages live on the territory they happened in. The chart is the level
   select -- that is what the world was drawn for. */

.stage-pin { cursor: pointer; }
.stage-pin:focus { outline: none; }

.pin-body {
  fill: #2a2016;
  stroke: #e8d8a8;
  stroke-width: 1.6;
  transition: transform 0.14s ease, fill 0.14s ease;
}
.stage-pin:hover .pin-body,
.stage-pin:focus-visible .pin-body { fill: #46341f; transform: scale(1.12); }

.pin-mark {
  fill: #f4e7c4;
  font-family: var(--font-display), serif;
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.pin-label {
  fill: #3a2c17;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(247, 238, 214, 0.9);
  stroke-width: 3px;
  pointer-events: none;
}

/* Squad events get a ring, so the set pieces read at a glance. */
.pin-ring {
  fill: none;
  stroke: #c9a23f;
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  opacity: 0.9;
  animation: pin-turn 14s linear infinite;
  transform-origin: center;
}
@keyframes pin-turn { to { transform: rotate(360deg); } }

.stage-pin.cleared .pin-body { fill: #2f4030; stroke: #8fc08a; }
.stage-pin.cleared .pin-mark { fill: #bfe6b8; }

.stage-pin.locked { cursor: default; opacity: 0.4; }
.stage-pin.locked .pin-body { fill: #2b2b2b; stroke: #6b6b6b; }
.stage-pin.locked .pin-label { display: none; }

/* ------------------------------------------------------- the stage card */

.stage-card {
  width: min(540px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  margin: auto;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, black);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.stage-card-kicker {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.stage-card h2 { margin: 4px 0 2px; font-family: var(--font-display); font-size: 1.5rem; }
.stage-card-sub { font-size: 0.86rem; color: var(--text-dim); margin-bottom: 14px; }

.stage-card-facts { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.stage-card-facts .fact-label {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.stage-card-facts strong { font-size: 0.92rem; }

.stage-card-who { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stage-card-who figure { margin: 0; width: 62px; text-align: center; }
.stage-card-who img {
  width: 62px; height: 62px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.stage-card-who figcaption { font-size: 0.62rem; color: var(--text-dim); margin-top: 3px; }

.stage-card-note {
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--bg);
  font-size: 0.74rem;
  line-height: 1.45;
  margin-bottom: 14px;
}
.stage-card-actions { display: flex; gap: 8px; }
.stage-card-actions button {
  font: inherit; font-size: 0.82rem; padding: 8px 16px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); cursor: pointer;
}
.stage-card-actions .primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }

/* Arc pins carry a side line under the name on two-sided events. */
.pin-side {
  fill: #5c4a2c;
  font-size: 8.5px;
  font-style: italic;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(247, 238, 214, 0.9);
  stroke-width: 3px;
  pointer-events: none;
}
.stage-pin.locked .pin-side { display: none; }

/* --------------------------------------------------- chapters in a card */

.arc-chapters { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 16px; }
.arc-chapter {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--text);
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.arc-chapter:hover:not(:disabled) { border-color: var(--accent); transform: translateX(2px); }
.arc-chapter:disabled { cursor: default; opacity: 0.42; }
.arc-chapter.cleared { background: color-mix(in srgb, var(--good) 9%, var(--bg)); }

.arc-num {
  flex: 0 0 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
}
.arc-chapter.cleared .arc-num { color: var(--good); border-color: var(--good); }

.arc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arc-mid strong { font-size: 0.83rem; font-weight: 600; }
.arc-mid small { font-size: 0.69rem; color: var(--text-dim); line-height: 1.35; }

.arc-tag {
  flex-shrink: 0;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.arc-chapter .arc-tag:only-of-type { white-space: nowrap; }

/* ------------------------------------------------ story entry on a card */

.story-entry {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  background: var(--bg);
}
.story-entry-head {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.story-entry-line { font-size: 0.73rem; color: var(--text-dim); margin: 3px 0 9px; }
.story-entry-none { font-size: 0.73rem; color: var(--text-dim); margin-top: 4px; }
.story-entry-btn, .story-entry-stop {
  font: inherit;
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.story-entry-stop {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border);
  font-weight: 400;
  margin-left: 6px;
}

/* The beat of black between reading and fighting. Without it the board just
   appears and the chapter reads as a different program starting. */
#story-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #07090c;
  opacity: 0;
  pointer-events: none;
}
#story-veil.showing { opacity: 1; transition: opacity 0.5s ease; pointer-events: all; }
#story-veil.clearing { opacity: 0; transition: opacity 0.5s ease; }

/* ================================================= battle stage ========= */
/* Party on the left, enemies on the right, both angled inward so they read as
   facing each other -- the classic side-on JRPG framing. The floor recedes so
   the fighters are standing ON something rather than floating over a band of
   colour, which is most of what sells the perspective. */

#battle-stage {
  position: relative;
  height: 300px;
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  /* Defaults; battle.js overrides these per region. */
  --sc-sky-a: #7fb4d8; --sc-sky-b: #9ccbe4; --sc-sky-c: #bcd9c6;
  --sc-hill: #5f8569; --sc-ground: #c9a23f; --sc-tint: #e0c777;
  background: linear-gradient(180deg,
    var(--sc-sky-a) 0%, var(--sc-sky-b) 26%, var(--sc-sky-c) 44%,
    var(--sc-tint) 52%, var(--sc-hill) 56%);
}

/* Distant hills, drawn rather than imported. */
#battle-sky {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 56%;
  background:
    radial-gradient(60px 26px at 14% 100%, var(--sc-hill) 0 99%, transparent 100%),
    radial-gradient(90px 38px at 32% 100%, var(--sc-hill) 0 99%, transparent 100%),
    radial-gradient(70px 30px at 54% 100%, var(--sc-hill) 0 99%, transparent 100%),
    radial-gradient(110px 44px at 78% 100%, var(--sc-hill) 0 99%, transparent 100%),
    radial-gradient(60px 24px at 93% 100%, var(--sc-hill) 0 99%, transparent 100%);
  opacity: 0.85;
}

/* The floor. A tiled plane laid back in 3D so the rows converge toward the
   horizon instead of staying parallel. */
#battle-ground {
  position: absolute;
  left: -40%; right: -40%; bottom: -6%;
  height: 58%;
  background-color: var(--sc-ground);
  background-image:
    repeating-linear-gradient(90deg, rgba(90,66,20,0.30) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg,  rgba(90,66,20,0.30) 0 2px, transparent 2px 34px);
  transform: perspective(300px) rotateX(58deg);
  transform-origin: 50% 100%;
  box-shadow: inset 0 40px 60px rgba(0,0,0,0.22);
}

.battle-side {
  position: absolute;
  bottom: 20px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 2;
}
#battle-party { left: 30px; }
#battle-foes  { right: 30px; flex-direction: row-reverse; }

.bt-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 104px;
  transition: filter 0.2s, transform 0.2s;
}
.bt-unit.dead { filter: grayscale(1) brightness(0.45); transform: translateY(6px); }

.bt-art { position: relative; height: 150px; display: flex; align-items: flex-end; }
.bt-art img {
  max-height: 150px;
  max-width: 104px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
  animation: bt-idle 3.1s ease-in-out infinite;
}

/* Angle each side inward. The source art is front-facing, so a yaw plus a
   mirror on the enemy side is what makes the two ranks read as squared up
   against each other rather than both staring out of the screen. */
#battle-party .bt-art img { transform: perspective(620px) rotateY(24deg); }
#battle-foes  .bt-art img { transform: perspective(620px) rotateY(24deg) scaleX(-1); }

@keyframes bt-idle {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}
.bt-unit:nth-child(2) .bt-art img { animation-delay: -0.7s; }
.bt-unit:nth-child(3) .bt-art img { animation-delay: -1.4s; }
.bt-unit:nth-child(4) .bt-art img { animation-delay: -2.1s; }

.bt-shadow {
  position: absolute;
  left: 50%; bottom: -2px;
  width: 64px; height: 11px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.38);
  filter: blur(4px);
}

.bt-unit.acting .bt-art img {
  filter: drop-shadow(0 0 14px var(--accent)) drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.bt-unit.acting .bt-name { color: var(--accent); }

.bt-unit.hit .bt-art img { animation: bt-hit 0.4s ease; }
@keyframes bt-hit {
  0%   { filter: brightness(3) saturate(0); }
  30%  { translate: 10px 0; }
  60%  { translate: -6px 0; }
  100% { translate: 0 0; }
}

/* Name plates sit on a slab so they stay legible over a bright floor. */
.bt-plate {
  width: 100%;
  text-align: center;
  margin-top: 4px;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(10, 13, 18, 0.74);
  border: 1px solid rgba(255,255,255,0.08);
}
.bt-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #f2ead6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bt-unit.is-you .bt-name { text-decoration: underline; text-underline-offset: 3px; }

.bt-hp {
  height: 6px;
  margin: 3px 0 2px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}
.bt-hp i { display: block; height: 100%; background: var(--good); transition: width 0.35s ease; }
.bt-hp.foe i { background: var(--bad); }
.bt-hp i.low { background: var(--bad); }

.bt-nums { font-size: 0.6rem; color: #c6bfae; }
.bt-tags { font-size: 0.57rem; color: var(--accent); margin-top: 1px; }

.bt-lull {
  color: #f2ead6;
  font-size: 0.76rem;
  font-style: italic;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(10,13,18,0.6);
  margin-bottom: 60px;
}

body.battle-mode #seats-grid { display: none !important; }

@media (max-height: 760px) {
  #battle-stage { height: 240px; }
  .bt-art { height: 112px; }
  .bt-art img { max-height: 112px; }
}

/* Driven by the stage's own width (battle.js), not the viewport: this element
   lives in a column, so the window being wide says nothing about how much room
   it actually got. */
#battle-stage.cramped { height: 230px; }
#battle-stage.cramped #battle-party { left: 8px; }
#battle-stage.cramped #battle-foes  { right: 8px; }
#battle-stage.cramped .bt-unit { width: 76px; }
#battle-stage.cramped .bt-art { height: 100px; }
#battle-stage.cramped .bt-art img { max-height: 100px; max-width: 76px; }
#battle-stage.cramped .bt-shadow { width: 44px; }
#battle-stage.cramped .bt-name { font-size: 0.62rem; }
#battle-stage.cramped .bt-nums, #battle-stage.cramped .bt-tags { font-size: 0.52rem; }
#battle-stage.cramped .battle-side { gap: 4px; }

/* Narrower than two fighters can share: drop the plates to HP bars only and
   let the sprites carry it, rather than printing names over each other. */
#battle-stage.tiny { height: 180px; }
#battle-stage.tiny .bt-unit { width: 58px; }
#battle-stage.tiny .bt-art { height: 78px; }
#battle-stage.tiny .bt-art img { max-height: 78px; max-width: 58px; }
#battle-stage.tiny .bt-shadow { width: 34px; }
#battle-stage.tiny .bt-name,
#battle-stage.tiny .bt-nums,
#battle-stage.tiny .bt-tags { display: none; }
#battle-stage.tiny .bt-plate { padding: 2px; background: none; border: none; }
#battle-stage.tiny .bt-lull { font-size: 0.64rem; margin-bottom: 36px; }

/* ============================================ story-mode command menu === */
/* The hand, the piles and the deck framing are a card game's furniture. In a
   chapter they are hidden: the same options are the character's moves, and
   showing them as a hand is what made this read as a card game instead of a
   fight. */

/* #hand-cards is an ID, not a class. The old rule said `.hand-cards` and
   therefore matched nothing, which is why the hand was still sitting there in
   story mode with PLAY badges on it. */
body.battle-mode #piles-row,
body.battle-mode #hand-cards,
body.battle-mode #hand-label,
body.battle-mode #action-buttons { display: none !important; }

body.battle-mode #hand-panel {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

#battle-actions { padding: 2px 0 4px; }
.ba-prompt {
  font-family: var(--font-display);
  font-size: 0.86rem;
  color: var(--accent);
  margin-bottom: 7px;
}
.ba-wait { font-size: 0.78rem; color: var(--text-dim); font-style: italic; }

.ba-row { display: flex; flex-wrap: wrap; gap: 7px; }
.ba-btn {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s, background 0.12s;
}
.ba-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.ba-btn:active { transform: translateY(0); }

/* The verbs that matter most read loudest. */
.ba-attack  { border-color: var(--bad); }
.ba-ability { border-color: var(--accent); color: var(--accent); }
.ba-perk    { border-color: var(--good); }
.ba-gear    { border-color: #7a93b8; }
.ba-end     { opacity: 0.78; }
.ba-cancel  { opacity: 0.7; font-weight: 400; }

/* The command menu carries the prompt, so the banner above it is the same
   sentence printed twice. */
body.battle-mode #prompt-banner { display: none !important; }

/* ================================================= character sheet ====== */
/* One column, one idea per row, nothing nested. Values align on a single
   right edge so the whole sheet can be scanned down that line, and the only
   coloured things are the two you can actually press. */

#sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 11, 0.74);
  backdrop-filter: blur(3px);
}

.sheet {
  width: min(480px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 28px 22px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.sheet-loading { padding: 30px 0; text-align: center; color: var(--text-dim); }

/* --- identity ---------------------------------------------------------- */
.sh-top { display: flex; align-items: center; gap: 14px; }
.sh-art {
  width: 62px; height: 62px;
  object-fit: contain;
  object-position: bottom;
  flex-shrink: 0;
}
.sh-who { flex: 1; min-width: 0; }
.sh-who h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.15;
}
.sh-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }

.sh-purse { text-align: right; flex-shrink: 0; }
.sh-purse-n { display: block; font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.sh-purse-l {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- section rule ------------------------------------------------------ */
.sh-section {
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- stat rows --------------------------------------------------------- */
.sh-stats { display: flex; flex-direction: column; gap: 1px; }
.sh-row { display: flex; align-items: baseline; justify-content: space-between; padding: 5px 0; }
.sh-label { font-size: 0.82rem; color: var(--text-dim); }
.sh-value { font-size: 0.94rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- gear -------------------------------------------------------------- */
.sh-gear { padding: 11px 0; }
.sh-gear + .sh-gear { border-top: 1px solid var(--border); }
.sh-gear-head { display: flex; justify-content: space-between; align-items: baseline; }
.sh-gear-head span:first-child { font-size: 0.88rem; font-weight: 600; }
.sh-tier { font-size: 0.68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.sh-pips { display: flex; gap: 5px; margin: 9px 0 8px; }
.sh-pip {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.sh-pip.on { background: var(--accent); }

.sh-gear-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-gain { font-size: 0.72rem; color: var(--text-dim); }
.sh-maxed { font-size: 0.72rem; color: var(--good); }

.sh-buy {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  flex-shrink: 0;
}
.sh-buy:disabled {
  background: none;
  color: var(--text-dim);
  border-color: var(--border);
  cursor: default;
}

/* --- kit --------------------------------------------------------------- */
.sh-kit { padding: 11px 0; }
.sh-kit + .sh-kit { border-top: 1px solid var(--border); }
.sh-kit.locked { opacity: 0.45; }
.sh-kit-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.sh-kit-kind {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
  width: 54px;
}
.sh-kit-name { font-size: 0.88rem; font-weight: 600; }
.sh-kit-text { font-size: 0.78rem; line-height: 1.5; color: var(--text); padding-left: 63px; }
.sh-kit.locked .sh-kit-text { font-style: italic; }
.sh-kit-meta { font-size: 0.66rem; color: var(--text-dim); margin-top: 4px; padding-left: 63px; }

.sh-close {
  margin-top: 22px;
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.sh-close:hover { border-color: var(--accent); }

.story-entry-sheet {
  font: inherit;
  font-size: 0.78rem;
  padding: 7px 14px;
  margin-left: 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.story-entry-sheet:hover { border-color: var(--accent); }

@media (max-width: 520px) {
  .sheet { padding: 20px 18px 18px; }
  .sh-kit-text, .sh-kit-meta { padding-left: 0; margin-top: 6px; }
}

/* A story chapter deals the character's own moveset, so there is no deck to
   choose and the recipe pane is a chooser for a choice that does not exist. */
body.story-lobby #lobby-recipe-pane { display: none !important; }

/* Moves you chose for this run, filling the space under the fixed commands. */
.ba-moves-label {
  margin: 14px 0 7px;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ba-moves {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.ba-move {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font: inherit;
  padding: 10px 12px;
  min-height: 74px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.22));
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s;
}
.ba-move:hover { border-color: var(--accent); transform: translateY(-1px); }
.ba-move-name { font-size: 0.82rem; font-weight: 700; }
.ba-move-text { font-size: 0.68rem; line-height: 1.4; color: var(--text-dim); }