/* Ember of the Red Wyrm — charcoal / ember red / antique gold (from monster-default.png) */
.ember-play {
  --ember-charcoal: #0d0d10;
  --ember-charcoal-2: #16161c;
  --ember-charcoal-3: #1e1e28;
  --ember-ember: #8b1a12;
  --ember-ember-deep: #5a1210;
  --ember-ember-hot: #c43a1f;
  --ember-gold: #a67c2a;
  --ember-gold-bright: #d4a84b;
  --ember-gold-dim: #6b4e14;
  --ember-amber: #f0a030;
  --ember-parchment: #e8dfc8;
  --ember-muted: #a8a29a;
  --ember-smoke-url: url("../images/games/texture-smoke.svg");
  --ember-corner-url: url("../images/games/chrome-corner.svg");
  --ember-diamond-url: url("../images/games/chrome-diamond.svg");
  --ember-frame-url: url("../images/games/chrome-frame.svg");
  --ember-wood-panel-url: url("../images/games/actions/wood-panel.png");
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: 0.25rem;
  width: 100%;
}

/* ——— Shared chrome kit ——— */
.ember-chrome,
.ember-chrome-pane {
  position: relative;
  background-color: var(--ember-charcoal-2);
  background-image: var(--ember-smoke-url);
  background-size: cover;
  background-blend-mode: soft-light;
  border: 1px solid var(--ember-gold-dim);
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.25),
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(139, 26, 18, 0.12);
}

.ember-chrome-pane {
  border-radius: 0.35rem;
}

/* Filigree corners (CSS chrome kit) */
.ember-chrome::before,
.ember-chrome::after,
.ember-chrome-pane::before,
.ember-chrome-pane::after {
  content: "";
  position: absolute;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--ember-corner-url) no-repeat center / contain;
  pointer-events: none;
  opacity: 0.9;
  z-index: 2;
}

.ember-chrome::before,
.ember-chrome-pane::before {
  top: -1px;
  left: -1px;
}

.ember-chrome::after,
.ember-chrome-pane::after {
  top: -1px;
  right: -1px;
  transform: scaleX(-1);
}

.ember-chrome > .ember-chrome-corners,
.ember-chrome-pane > .ember-chrome-corners {
  display: none;
}

/* Bottom corners via extra box-shadow technique: use background on children wrapper is hard;
   duplicate with linear corners on a pseudo via box — add helper elements in rare cases.
   For panes we tint bottom with gold rule instead. */
.ember-chrome,
.ember-chrome-pane {
  border-bottom-color: var(--ember-gold);
}

.ember-chrome-btn {
  position: relative;
  background: linear-gradient(180deg, var(--ember-charcoal-3), var(--ember-charcoal));
  border: 1px solid var(--ember-gold-dim);
  box-shadow:
    inset 0 1px 0 rgba(232, 201, 106, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  color: var(--ember-parchment);
}

.ember-chrome-btn:hover:not(:disabled) {
  border-color: var(--ember-gold-bright);
  box-shadow:
    0 0 16px rgba(196, 58, 31, 0.35),
    inset 0 0 20px rgba(240, 160, 48, 0.08);
  color: #fff8e7;
}

/* Shared HP bar */
.ember-hp {
  margin: 0.4rem 0 0.55rem;
}

.ember-hp-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ember-muted);
  margin-bottom: 0.25rem;
}

.ember-hp-track {
  position: relative;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--ember-gold-dim);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ember-hp-track::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 14px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--ember-diamond-url) no-repeat center / contain;
  opacity: 0.85;
  pointer-events: none;
}

.ember-hp-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ember-ember-deep), var(--ember-ember-hot) 55%, var(--ember-amber));
  box-shadow: 0 0 10px rgba(196, 58, 31, 0.55);
  transition: width 0.25s ease;
}

/* Shared XP bar (status / fight / character sheet) */
.ember-xp {
  margin: 0.35rem 0 0.45rem;
}

.ember-xp--status {
  margin: 0.55rem 0 0.35rem;
}

.ember-xp-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ember-muted);
  margin-bottom: 0.25rem;
}

.ember-xp-track {
  position: relative;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(212, 160, 23, 0.35);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ember-xp-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b3a0a, var(--ember-gold-dim) 40%, var(--ember-gold-bright));
  box-shadow: 0 0 10px rgba(212, 160, 23, 0.45);
  transition: width 0.25s ease;
}

.ember-xp--sheet .ember-xp-track {
  height: 0.6rem;
}

.ember-hp--mid .ember-hp-fill {
  background: linear-gradient(90deg, #7a3a0a, var(--ember-amber));
}

.ember-hp--low .ember-hp-fill {
  background: linear-gradient(90deg, #5a1010, #ef4444);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}


.ember-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0.25rem 0 0.5rem;
  letter-spacing: 0.02em;
}

.ember-tagline {
  color: var(--muted, #a8a29a);
  margin: 0 0 1.5rem;
  max-width: 36rem;
}

.ember-panel,
.ember-app {
  background-color: rgba(13, 13, 16, 0.96);
  background-image: var(--ember-smoke-url);
  background-size: cover;
  background-blend-mode: soft-light;
  border: 1px solid var(--ember-gold-dim);
  border-radius: 0.5rem;
  padding: 1rem 1.15rem 1.35rem;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.22),
    0 16px 48px rgba(0, 0, 0, 0.5),
    inset 0 0 48px rgba(139, 26, 18, 0.1);
}

@media (min-width: 640px) {
  .ember-panel,
  .ember-app {
    padding: 1.25rem 1.5rem;
  }
}

.ember-login-gate {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.ember-login-gate .btn-primary,
.ember-login-gate .btn-ghost,
.ember-app button.btn-primary,
.ember-app button.btn-ghost,
.ember-app a.btn-primary,
.ember-app a.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.15rem;
  min-height: 2.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}

.ember-app button.btn-primary,
.ember-login-gate .btn-primary,
.ember-app a.btn-primary {
  background: linear-gradient(135deg, var(--ember-gold), var(--ember-gold-bright));
  color: #1a1205;
  border-color: rgba(212, 168, 75, 0.55);
}

.ember-app button.btn-primary:hover:not(:disabled),
.ember-login-gate .btn-primary:hover {
  filter: brightness(1.06);
}

.ember-app button.btn-ghost,
.ember-login-gate .btn-ghost,
.ember-app a.btn-ghost {
  background: transparent;
  color: var(--foreground, #f3f0ea);
  border-color: rgba(212, 160, 23, 0.35);
}

.ember-app button.btn-ghost:hover:not(:disabled) {
  border-color: rgba(240, 193, 75, 0.65);
  background: rgba(240, 193, 75, 0.08);
}

.ember-app button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ember-btn-block {
  width: 100%;
  margin-top: 0.5rem;
}

.ember-loading {
  color: var(--muted, #a8a29a);
}

.ember-gold {
  color: #f0c14b;
}

/* ——— Sticky status bar ——— */
.ember-status {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -0.25rem -0.35rem 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.35rem;
  backdrop-filter: blur(8px);
  overflow: hidden;
}

@media (min-width: 640px) {
  .ember-status {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
  }
}

.ember-status--dead {
  border-color: rgba(248, 113, 113, 0.55);
}

.ember-status-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.5rem;
}

.ember-status-name {
  font-weight: 700;
  color: var(--ember-gold-bright);
  font-size: 1.05rem;
}

.ember-status-class {
  font-size: 0.8rem;
  color: var(--muted, #a8a29a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ember-status-vitals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

@media (max-width: 420px) {
  .ember-status-vitals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ember-chip {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.35rem 0.4rem;
  text-align: center;
  min-width: 0;
}

.ember-chip--gold {
  border-color: rgba(212, 160, 23, 0.4);
}

.ember-chip--warn {
  border-color: rgba(248, 113, 113, 0.45);
}

.ember-chip--warn .ember-chip-value {
  color: #fca5a5;
}

.ember-chip-label {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #a8a29a);
}

.ember-chip-value {
  font-weight: 700;
  color: var(--ember-amber);
  font-size: 0.95rem;
  word-break: break-all;
}

.ember-status-gear {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted, #a8a29a);
}

.ember-status-gear span {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}

.ember-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--muted, #a8a29a);
}

.ember-detail-stats strong {
  color: #f0c14b;
  font-weight: 700;
}

/* ——— Nav ——— */
.ember-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.ember-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  min-height: 2.5rem;
  border-radius: 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
}

.ember-nav-btn:hover:not(:disabled) {
  border-color: var(--ember-gold-bright);
}

.ember-nav-btn--active {
  border-color: var(--ember-gold-bright);
  color: var(--ember-gold-bright);
  box-shadow:
    0 0 16px rgba(196, 58, 31, 0.25),
    inset 0 0 20px rgba(240, 160, 48, 0.1);
}

.ember-nav-btn--locked,
.ember-nav-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ember-lock-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.35);
}

/* ——— Town hub cards ——— */
.ember-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0.85rem 0 1rem;
}

@media (min-width: 480px) {
  .ember-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .ember-hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ember-hub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.2rem;
  padding: 0.85rem 1rem 1rem;
  min-height: 5.5rem;
  border-radius: 0.35rem;
  color: var(--ember-parchment);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font: inherit;
  width: 100%;
}

.ember-hub-card:hover:not(.ember-hub-card--locked) {
  border-color: var(--ember-gold-bright);
  box-shadow:
    0 0 0 1px rgba(212, 168, 75, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(240, 160, 48, 0.1);
}

.ember-hub-card--active {
  border-color: var(--ember-gold-bright);
  box-shadow:
    0 0 0 1px rgba(212, 168, 75, 0.5),
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(139, 26, 18, 0.18);
}

.ember-hub-card--danger:not(.ember-hub-card--locked) {
  border-color: rgba(196, 58, 31, 0.65);
}

.ember-hub-card--locked {
  opacity: 0.72;
  cursor: not-allowed;
  filter: saturate(0.7);
}

.ember-hub-label {
  font-weight: 700;
  font-size: 1.05rem;
  color: #f0c14b;
}

.ember-hub-card--locked .ember-hub-label {
  color: #a8a29a;
}

.ember-hub-sub {
  font-size: 0.82rem;
  color: var(--muted, #a8a29a);
}

.ember-hub-meta {
  font-size: 0.78rem;
  margin-top: 0.25rem;
  color: #e7e2d8;
}

.ember-hub-lock {
  font-size: 0.75rem;
  margin-top: 0.35rem;
  color: #fca5a5;
  line-height: 1.35;
}

.ember-locked-banner {
  position: relative;
  padding: 0.75rem 0.95rem;
  color: #fca5a5;
  font-size: 0.9rem;
  margin: 0.5rem 0 0.85rem;
  border-radius: 0.35rem;
  border-color: rgba(196, 58, 31, 0.55);
  box-shadow:
    0 0 0 1px rgba(196, 58, 31, 0.25),
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(139, 26, 18, 0.22);
}

.ember-locked-banner--danger {
  background: rgba(248, 113, 113, 0.14);
}

.ember-locked-banner strong {
  color: #fecaca;
}

/* ——— Combat log ——— */
.ember-log {
  padding: 0.75rem 0.85rem;
  min-height: 6.5rem;
  max-height: 16rem;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ember-parchment);
  margin: 0.5rem 0;
  border-radius: 0.35rem;
}

.ember-log--empty {
  min-height: 3.5rem;
}

.ember-log-line {
  margin: 0 0 0.45rem;
  padding-left: 0.15rem;
  border-left: 3px solid transparent;
  padding-left: 0.55rem;
}

.ember-log-line:last-child {
  margin-bottom: 0;
}

.ember-log-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  margin-right: 0.25rem;
  vertical-align: middle;
}

.ember-log-line--hit {
  border-left-color: #f0c14b;
}

.ember-log-line--hit .ember-log-tag {
  background: rgba(240, 193, 75, 0.2);
  color: #f0c14b;
}

.ember-log-line--miss {
  border-left-color: #78716c;
  color: #a8a29a;
}

.ember-log-line--miss .ember-log-tag {
  background: rgba(120, 113, 108, 0.25);
  color: #a8a29a;
}

.ember-log-line--loot {
  border-left-color: #4ade80;
}

.ember-log-line--loot .ember-log-tag {
  background: rgba(74, 222, 128, 0.18);
  color: #86efac;
}

.ember-log-line--death {
  border-left-color: #f87171;
  color: #fecaca;
}

.ember-log-line--death .ember-log-tag {
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
}

.ember-log-line--level {
  border-left-color: #60a5fa;
}

.ember-log-line--level .ember-log-tag {
  background: rgba(96, 165, 250, 0.2);
  color: #93c5fd;
}

.ember-log-line--info .ember-log-tag {
  background: rgba(255, 255, 255, 0.08);
  color: #a8a29a;
}

.ember-error {
  color: #f87171;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

/* ——— Create / class cards ——— */
.ember-create label,
.ember-field-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted, #a8a29a);
  margin-bottom: 0.25rem;
}

.ember-field-label {
  margin-top: 0.25rem;
}

.ember-create input {
  width: 100%;
  max-width: 24rem;
  background: #0a0a10;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f3f0ea;
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 1rem;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.ember-create input:focus {
  outline: none;
  border-color: rgba(240, 193, 75, 0.65);
  box-shadow: 0 0 0 2px rgba(240, 193, 75, 0.2);
}

.ember-class-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0.35rem 0 1rem;
}

@media (min-width: 520px) {
  .ember-class-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 800px) {
  .ember-class-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ember-class-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.35rem;
  padding: 0.9rem 1rem 1.05rem;
  min-height: 8.5rem;
  border-radius: 0.35rem;
  color: var(--ember-parchment);
  cursor: pointer;
  touch-action: manipulation;
  font: inherit;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ember-class-card:hover {
  border-color: var(--ember-gold-bright);
}

.ember-class-card--selected {
  border-color: var(--ember-gold-bright);
  box-shadow:
    0 0 0 1px rgba(212, 168, 75, 0.5),
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(240, 160, 48, 0.12);
}

.ember-class-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: #f0c14b;
}

.ember-class-desc {
  font-size: 0.82rem;
  color: var(--muted, #a8a29a);
  line-height: 1.4;
  flex: 1;
}

.ember-class-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #e7e2d8;
}

.ember-class-stats em {
  display: block;
  font-style: normal;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #a8a29a);
}

.ember-class-stats span {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.35rem;
  padding: 0.3rem 0.25rem;
  text-align: center;
  border: 1px solid rgba(212, 160, 23, 0.2);
  font-weight: 700;
  color: #f0c14b;
}

/* ——— Shop / bank / screens ——— */
.ember-shop-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}

.ember-shop-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ember-shop-list li .btn-ghost {
  flex-shrink: 0;
  min-width: 4.5rem;
}

.ember-shop-meta {
  font-size: 0.8rem;
  color: var(--muted, #a8a29a);
}

.ember-screen-title {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
  color: #f0c14b;
}

.ember-screen-title--sub {
  margin-top: 1rem;
  font-size: 1rem;
}

.ember-muted {
  color: var(--muted, #a8a29a);
  font-size: 0.9rem;
}

.ember-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ember-actions .btn-primary,
.ember-actions .btn-ghost {
  flex: 1 1 auto;
  min-width: 7rem;
}

.ember-bank-form label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted, #a8a29a);
  margin-bottom: 0.25rem;
}

.ember-bank-form input {
  width: 100%;
  max-width: 12rem;
  background: #0a0a10;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f3f0ea;
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.ember-bank-form input:focus {
  outline: none;
  border-color: rgba(240, 193, 75, 0.65);
}

/* Legacy stats grid kept for any residual use */
.ember-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.ember-stat {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 160, 23, 0.25);
  border-radius: 0.65rem;
  padding: 0.55rem 0.7rem;
}

.ember-stat-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #a8a29a);
}

.ember-stat-value {
  font-weight: 700;
  color: #f0c14b;
  font-size: 1.05rem;
}

/* —— Classic two-pane fight + chrome —— */
.ember-fight {
  margin: 0.85rem 0 1rem;
  padding: 1rem 0.9rem 1.1rem;
  border-radius: 0.4rem;
  overflow: hidden;
}

.ember-fight-panes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

/* Mid column: combat log primary, action buttons compact underneath */
.ember-fight-mid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}

.ember-fight-mid .ember-log {
  flex: 1 1 auto;
  min-height: 6.5rem;
  margin: 0;
  overflow-y: auto;
}

.ember-fight-mid .ember-fight-actions {
  flex: 0 0 auto;
  margin: 0;
}

@media (min-width: 640px) {
  .ember-fight-panes {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
  }
}

.ember-fight-foe,
.ember-fight-hero,
.ember-fight-actions {
  padding: 0.85rem 0.9rem;
  overflow: hidden;
}

.ember-fight-portrait {
  position: relative;
  margin: 0 auto 0.65rem;
  max-width: 14rem;
  aspect-ratio: 1;
  border: 1px solid var(--ember-gold);
  box-shadow:
    0 0 0 1px var(--ember-gold-dim),
    inset 0 0 24px rgba(139, 26, 18, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.45);
  background: var(--ember-charcoal);
  overflow: hidden;
}

.ember-fight-art,
.ember-fight-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ember-fight-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ember-muted);
}

.ember-fight-name {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ember-gold-bright);
  letter-spacing: 0.02em;
  text-align: center;
}

.ember-fight-hero .ember-fight-name {
  text-align: left;
}

.ember-fight-class {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: var(--ember-muted);
}

.ember-fight-qck {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ember-parchment);
}

.ember-fight-qck strong {
  color: var(--ember-amber);
}

.ember-fight-boss {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ember-ember-hot);
}

.ember-fight-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.ember-fight-buffs {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ember-buff-chip {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--ember-gold-dim);
  background: rgba(139, 26, 18, 0.25);
  color: var(--ember-parchment);
}

.ember-fight-actions {
  margin-top: 0;
  margin-bottom: 0;
}

/* Carved wood console — fight actions + fight mid combat LOG.
   Relative url() is PathBase-safe (same pattern as --ember-smoke-url).
   Mood/location .ember-chrome-pane rules outrank these (0,2,0)/(0,3,0); winning
   overrides live after the mood section (markers: fight-actions-wood-over-mood,
   fight-log-wood-over-mood). Hub/town/service .ember-log keep mood/charcoal. */
.ember-fight-actions.ember-chrome-pane,
.ember-fight-actions {
  background-color: #1a1210;
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 5, 4, 0.38) 0%,
      rgba(8, 5, 4, 0.22) 42%,
      rgba(8, 5, 4, 0.45) 100%
    ),
    var(--ember-wood-panel-url, url("../images/games/actions/wood-panel.png"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

/* Fight mid LOG: same wood cover + darken overlay (HIT tags / notes stay readable).
   Scoped to .ember-fight-mid so hub/town aside logs stay mood chrome. */
.ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-fight-mid > .ember-log,
.ember-fight .ember-log.ember-chrome-pane {
  background-color: #1a1210;
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 5, 4, 0.42) 0%,
      rgba(8, 5, 4, 0.28) 42%,
      rgba(8, 5, 4, 0.5) 100%
    ),
    var(--ember-wood-panel-url, url("../images/games/actions/wood-panel.png"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

.ember-fight-resolving {
  margin: 0.25rem 0;
}

.ember-encounter-stance {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: #93c5fd;
}

.ember-turn-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.4rem;
}

/* Text-card fallback (unknown action ids) still stacks like a card */
.ember-turn-btn:not(.ember-turn-btn--icon) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  padding: 0.7rem 0.85rem;
  min-height: 4.25rem;
  flex: 1 1 8rem;
  max-width: 14rem;
}

.ember-turn-btn {
  border-radius: 0.35rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ember-turn-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ember-turn-btn:focus-visible {
  outline: 2px solid var(--ember-gold-bright);
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(240, 193, 75, 0.45);
}

/* Compact icon action buttons — primary fight chrome */
.ember-turn-btn--icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  flex: 0 0 auto;
  width: 4.25rem;
  min-width: 3.75rem;
  max-width: 4.75rem;
  min-height: 0;
  padding: 0.35rem 0.3rem 0.4rem;
  text-align: center;
}

.ember-turn-icon {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0.25rem;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.ember-turn-btn--icon:hover:not(:disabled) .ember-turn-icon {
  filter:
    drop-shadow(0 0 6px rgba(240, 193, 75, 0.55))
    drop-shadow(0 0 10px rgba(196, 58, 31, 0.35));
}

.ember-turn-caption {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.2rem;
  width: 100%;
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--ember-gold-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ember-turn-caption-ready {
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ember-muted);
}

.ember-turn-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ember-gold-bright);
}

.ember-turn-delay {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ember-muted);
}

.ember-turn-preview {
  font-size: 0.8rem;
  color: var(--ember-parchment);
  line-height: 1.35;
  opacity: 0.9;
}

/* Action hover/focus detail strip — desktop only (hidden on narrow / phone) */
.ember-turn-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.ember-turn-detail {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
  text-align: center;
}

.ember-turn-detail-placeholder {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ember-muted);
  font-style: italic;
  opacity: 0.85;
}

.ember-turn-detail-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0.35rem 0.55rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid var(--ember-gold-dim);
  background: rgba(0, 0, 0, 0.28);
}

.ember-turn-detail-name {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--ember-gold-bright);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ember-turn-detail-ready {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ember-muted);
}

.ember-turn-detail-preview {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ember-parchment);
  opacity: 0.92;
  max-width: 28rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legacy encounter selectors kept for safety */
.ember-encounter {
  margin: 0.85rem 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.4rem;
}


/* Bottom filigree corners for chrome panes */
.ember-chrome-pane::after {
  /* top-right already set; bottom corners via extra elements would need markup.
     Approximate with gold bottom edge + smoke. */
}

.ember-log {
  margin-top: 0.65rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.75rem 0.85rem;
  color: var(--ember-parchment);
  border-color: var(--ember-gold-dim);
}

/* In fight mid, log sits above buttons — no extra top margin */
.ember-fight-mid > .ember-log {
  margin-top: 0;
  position: relative;
  cursor: text;
}

/* Modem/BBS typewriter: caret + skip (fight mid only) */
.ember-fight-mid .ember-log-cursor {
  display: inline-block;
  width: 0.55ch;
  margin-left: 1px;
  border-right: 2px solid var(--ember-amber, #f0a050);
  animation: ember-log-caret 0.85s step-end infinite;
  vertical-align: baseline;
}

@keyframes ember-log-caret {
  50% { border-right-color: transparent; }
}

.ember-fight-mid .ember-log-skip {
  position: sticky;
  bottom: 0.15rem;
  display: block;
  margin: 0.45rem 0 0 auto;
  padding: 0.2rem 0.55rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ember-gold-bright, #f5d78e);
  background: rgba(20, 14, 10, 0.72);
  border: 1px solid var(--ember-gold-dim, #8a6a2f);
  border-radius: 0.25rem;
  cursor: pointer;
  z-index: 2;
}

.ember-fight-mid .ember-log-skip:hover,
.ember-fight-mid .ember-log-skip:focus-visible {
  color: var(--ember-parchment, #f3e6c8);
  border-color: var(--ember-amber, #f0a050);
  outline: none;
}

.ember-fight-mid .ember-log-line--typing .ember-log-msg {
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  .ember-fight-mid .ember-log-cursor {
    animation: none;
    border-right-color: var(--ember-amber, #f0a050);
  }
}

.ember-log-line {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ember-parchment);
}

.ember-log-tag {
  display: inline-block;
  min-width: 2.6rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ember-amber);
  margin-right: 0.25rem;
}

.ember-log-line--hit .ember-log-tag { color: var(--ember-ember-hot); }
.ember-log-line--loot .ember-log-tag { color: var(--ember-gold-bright); }
.ember-log-line--death .ember-log-tag { color: #f87171; }
.ember-log-line--miss .ember-log-tag { color: var(--ember-muted); }

.ember-hub-card.ember-chrome-pane {
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.ember-class-card.ember-chrome-pane {
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.ember-gold {
  color: var(--ember-gold-bright);
}

/* Bottom filigree via ornament span (top corners use ::before/::after) */
.ember-chrome-ornament {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.ember-chrome-ornament::before,
.ember-chrome-ornament::after {
  content: "";
  position: absolute;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--ember-corner-url) no-repeat center / contain;
  opacity: 0.9;
}
.ember-chrome-ornament::before {
  bottom: -1px;
  left: -1px;
  transform: scaleY(-1);
}
.ember-chrome-ornament::after {
  bottom: -1px;
  right: -1px;
  transform: scale(-1);
}


.ember-panel.ember-chrome,
.ember-login-gate.ember-chrome {
  background-color: var(--ember-charcoal-2);
  background-image: var(--ember-smoke-url);
  background-size: cover;
  background-blend-mode: soft-light;
  border: 1px solid var(--ember-gold-dim);
  border-bottom-color: var(--ember-gold);
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.25),
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(139, 26, 18, 0.12);
  border-radius: 0.35rem;
}

/* ——— Play-wide chrome unify (town / create / gates / errors) ——— */
.ember-screen.ember-chrome,
.ember-create.ember-chrome {
  margin: 0.35rem 0 0.85rem;
  padding: 1rem 0.95rem 1.15rem;
  border-radius: 0.35rem;
  overflow: hidden;
}

.ember-login-gate.ember-chrome {
  position: relative;
  overflow: hidden;
}

.ember-error-banner {
  margin: 0.5rem 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.35rem;
  border-color: rgba(196, 58, 31, 0.55);
}

.ember-error-banner .ember-error {
  margin: 0;
  color: #fecaca;
}

.ember-empty.ember-chrome-pane {
  padding: 1rem 1.1rem;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.ember-loading.ember-chrome-pane {
  padding: 1rem 1.1rem;
  color: var(--ember-muted);
}

.ember-chip {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--ember-gold-dim);
  border-radius: 0.35rem;
}

.ember-chip--gold {
  border-color: rgba(212, 168, 75, 0.45);
}

.ember-create input,
.ember-bank-form input {
  background: var(--ember-charcoal);
  border: 1px solid var(--ember-gold-dim);
  color: var(--ember-parchment);
  border-radius: 0.35rem;
}

.ember-create input:focus,
.ember-bank-form input:focus {
  border-color: var(--ember-gold-bright);
  box-shadow: 0 0 0 2px rgba(212, 168, 75, 0.2);
}

.ember-shop-list li {
  border-bottom: 1px solid rgba(166, 124, 42, 0.22);
}

.ember-app .btn-ghost.ember-chrome-btn,
.ember-login-gate .btn-ghost.ember-chrome-btn {
  border-radius: 0.35rem;
}

.ember-screen-title {
  color: var(--ember-gold-bright);
  position: relative;
  z-index: 1;
}

.ember-hub-label {
  color: var(--ember-gold-bright);
  position: relative;
  z-index: 1;
}

.ember-hub-sub,
.ember-hub-meta,
.ember-class-desc,
.ember-class-name,
.ember-class-stats {
  position: relative;
  z-index: 1;
}

.ember-class-name {
  color: var(--ember-gold-bright);
}

.ember-class-stats span {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--ember-gold-dim);
  border-radius: 0.35rem;
  color: var(--ember-gold-bright);
}


/* ========== Desktop no-scroll multi-panel (≥960px + enough height) ========== */
@media (min-width: 960px) {
  /* Fill site width; lift container cap while playing */
  .ember-play {
    max-width: none;
  }

  body.public-books:has(.ember-play--shell) .container-pad {
    max-width: none;
  }

  .ember-hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  @media (min-width: 1100px) {
    .ember-hub {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .ember-hub-card {
    min-height: 4.75rem;
    padding: 0.7rem 0.75rem 0.85rem;
  }

  /* Fight mid buttons: compact icon row under log */
  .ember-fight-mid .ember-turn-actions {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.35rem;
  }

  /* Service splits even without height lock */
  .ember-screen-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 0.9fr);
    gap: 0.75rem;
    align-items: start;
  }

  .ember-screen-split--hub {
    grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 0.75fr);
  }

  .ember-screen-split--shop {
    align-items: stretch;
  }

  .ember-fight-panes {
    display: contents;
  }

  .ember-fight {
    display: grid;
    grid-template-columns: minmax(11rem, 0.95fr) minmax(16rem, 1.45fr) minmax(11rem, 0.95fr);
    gap: 0.65rem;
    align-items: stretch;
  }

  .ember-fight-foe { grid-column: 1; grid-row: 1; }
  .ember-fight-mid {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 0;
  }
  .ember-fight-hero { grid-column: 3; grid-row: 1; }

  .ember-fight-mid .ember-log {
    flex: 1 1 auto;
    min-height: 7rem;
    max-height: none;
    margin: 0;
    overflow-y: auto;
  }

  .ember-fight-mid .ember-fight-actions {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    margin: 0;
  }

  /* Compact icon row under the log */
  .ember-fight-mid .ember-turn-actions {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.35rem;
  }

  .ember-fight-mid .ember-turn-btn--icon {
    width: 4rem;
    padding: 0.3rem 0.25rem 0.35rem;
  }

  .ember-fight-mid .ember-turn-icon {
    width: 3rem;
    height: 3rem;
  }

  .ember-turn-btn:not(.ember-turn-btn--icon) {
    min-height: 0;
    padding: 0.45rem 0.65rem;
  }

  /* Hover/focus action detail under icon row — wide desktop only.
     Fixed height so placeholder ↔ filled does not shift the fight bottom. */
  .ember-fight-mid .ember-turn-detail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    /* Fits label + Ready +N + up to two-line preview (body pad/border included). */
    height: 5.5rem;
    min-height: 5.5rem;
    overflow: hidden;
  }

  .ember-fight-mid .ember-turn-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    overflow: hidden;
  }
}

/* Height-locked play shell: wide + tall enough that multi-panel fits */
@media (min-width: 960px) and (min-height: 620px) {
  /* Reclaim chrome: tighter main pad, hide site footer while playing */
  body.public-books:has(.ember-play--shell) .site-main-pad {
    padding-block: 0.65rem;
  }

  body.public-books:has(.ember-play--shell) .container-pad {
    max-width: none;
  }

  body.public-books:has(.ember-play--shell) .site-footer {
    display: none;
  }

  body.public-books:has(.ember-play--shell) {
    overflow: hidden;
  }

  body.public-books:has(.ember-play--shell) .site-shell {
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
  }

  body.public-books:has(.ember-play--shell) .site-main {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.public-books:has(.ember-play--shell) .site-main-pad {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ember-play--shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Compact page hero so the SPA fills the viewport */
  .ember-play--shell > .ember-hero {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 0 0.35rem;
  }

  .ember-play--shell > .ember-hero .section-kicker {
    margin: 0;
    font-size: 0.65rem;
  }

  .ember-play--shell > .ember-hero h1 {
    font-size: 1.2rem;
    margin: 0.1rem 0 0;
  }

  .ember-play--shell > .ember-hero .ember-tagline {
    display: none;
  }

  .ember-play--shell > .ember-login-gate {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .ember-play--shell .ember-app {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.75rem 1rem 0.85rem;
  }

  .ember-play--shell .ember-status {
    position: static;
    flex: 0 0 auto;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .ember-play--shell .ember-status-identity {
    margin-bottom: 0.3rem;
  }

  .ember-play--shell .ember-status-gear {
    display: none;
  }

  .ember-play--shell .ember-nav {
    flex: 0 0 auto;
    margin: 0 0 0.45rem;
    gap: 0.3rem;
  }

  .ember-play--shell .ember-nav-btn {
    min-height: 2.15rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
  }

  .ember-play--shell .ember-error-banner {
    flex: 0 0 auto;
    margin: 0 0 0.4rem;
    padding: 0.45rem 0.7rem;
  }

  .ember-play--shell .ember-screen,
  .ember-play--shell .ember-create {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ember-play--shell .ember-screen-title {
    flex: 0 0 auto;
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
  }

  .ember-play--shell .ember-screen-lead,
  .ember-play--shell .ember-screen > .ember-muted {
    flex: 0 0 auto;
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
  }

  .ember-play--shell .ember-locked-banner {
    flex: 0 0 auto;
    margin: 0 0 0.4rem;
    padding: 0.5rem 0.75rem;
  }

  /* —— Shared split panes —— */
  .ember-screen-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 0.9fr);
    gap: 0.75rem;
    align-items: stretch;
  }

  .ember-screen-main,
  .ember-screen-aside {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .ember-screen-aside {
    gap: 0.5rem;
  }

  .ember-screen-aside .ember-actions {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .ember-screen-aside .ember-log,
  .ember-screen-aside--log .ember-log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
  }

  .ember-shop-pane {
    overflow: hidden;
  }

  .ember-shop-pane .ember-shop-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0.35rem 0 0;
  }

  .ember-screen-split--shop .ember-screen-main,
  .ember-screen-split--shop .ember-screen-aside {
    padding: 0.55rem 0.65rem;
    border-radius: 0.35rem;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(166, 124, 42, 0.28);
  }

  .ember-screen-split--hub {
    grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 0.75fr);
  }

  .ember-screen-split--hub .ember-hub {
    flex: 1 1 auto;
    margin: 0;
    align-content: start;
    grid-auto-rows: minmax(4.5rem, auto);
  }

  .ember-screen--hub {
    overflow: hidden;
  }

  .ember-screen--hub > .ember-screen-split {
    margin-top: 0.15rem;
  }

  /* —— Fight: foe | log+actions | hero —— */
  .ember-screen--fight > .ember-fight {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0.25rem 0 0;
    display: grid;
    grid-template-columns: minmax(11rem, 0.95fr) minmax(16rem, 1.45fr) minmax(11rem, 0.95fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0.65rem;
    align-items: stretch;
    overflow: hidden;
  }

  .ember-fight {
    margin: 0.35rem 0 0;
    padding: 0.65rem 0.7rem 0.75rem;
  }

  .ember-screen--fight .ember-fight,
  .ember-app > .ember-fight {
    /* when fight is nested under forest/lair screen */
  }

  .ember-fight-panes {
    display: contents;
  }

  .ember-fight {
    display: grid;
    grid-template-columns: minmax(11rem, 0.95fr) minmax(16rem, 1.45fr) minmax(11rem, 0.95fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0.65rem;
    align-items: stretch;
  }

  .ember-fight-foe {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
  }

  .ember-fight-mid {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 0;
    overflow: hidden;
  }

  .ember-fight-hero {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
  }

  .ember-fight-foe,
  .ember-fight-hero,
  .ember-fight-actions {
    margin: 0;
    padding: 0.65rem 0.7rem;
  }

  .ember-fight-portrait {
    max-width: 11rem;
    margin-bottom: 0.45rem;
  }

  .ember-fight-mid .ember-log {
    flex: 1 1 auto;
    min-height: 8rem;
    max-height: none;
    margin: 0;
    overflow-y: auto;
  }

  .ember-fight-actions {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    margin-bottom: 0;
  }

  .ember-fight-mid .ember-turn-actions {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.3rem;
  }

  .ember-fight-mid .ember-turn-btn--icon {
    width: 3.85rem;
    padding: 0.28rem 0.2rem 0.32rem;
  }

  .ember-fight-mid .ember-turn-icon {
    width: 2.85rem;
    height: 2.85rem;
  }

  .ember-turn-btn:not(.ember-turn-btn--icon) {
    min-height: 0;
    padding: 0.4rem 0.6rem;
  }

  .ember-turn-preview {
    font-size: 0.75rem;
  }

  /* Create character: form left, classes fill */
  .ember-create--wide {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 0.5rem 1rem;
    align-content: start;
  }

  .ember-create--wide > .ember-chrome-ornament {
    grid-column: 1 / -1;
  }

  .ember-create--wide > .ember-screen-title,
  .ember-create--wide > .ember-muted {
    grid-column: 1 / -1;
  }

  .ember-create--wide > label,
  .ember-create--wide > #char-name,
  .ember-create--wide > input {
    grid-column: 1;
  }

  .ember-create--wide > .ember-field-label {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }

  .ember-create--wide > .ember-class-grid {
    grid-column: 2;
    grid-row: 3 / span 2;
    margin: 0;
    overflow: auto;
    min-height: 0;
    align-content: start;
  }

  .ember-create--wide > .ember-error-banner {
    grid-column: 1;
  }

  .ember-create--wide > #btn-create,
  .ember-create--wide > .ember-btn-block {
    grid-column: 1;
    align-self: end;
    margin-top: 0;
  }
}

/* Mid-height laptops: still multi-col but allow inner scroll rather than document scroll */
@media (min-width: 960px) and (max-height: 719px) and (min-height: 620px) {
  .ember-fight-portrait {
    max-width: 8.5rem;
  }

  .ember-hub-card {
    min-height: 3.75rem;
    padding: 0.55rem 0.65rem 0.65rem;
  }

  .ember-hub-sub {
    display: none;
  }
}

/* Wide but short: keep multi-col width, allow page scroll (can't fit no-scroll) */
@media (min-width: 960px) and (max-height: 619px) {
  .ember-play {
    max-width: none;
  }

  .ember-hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media (min-width: 1100px) {
    .ember-hub {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  .ember-fight-panes {
    display: contents;
  }

  .ember-fight {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 1.4fr) minmax(10rem, 1fr);
    gap: 0.55rem;
  }

  .ember-fight-foe { grid-column: 1; grid-row: 1; }
  .ember-fight-mid { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 0.45rem; }
  .ember-fight-hero { grid-column: 3; grid-row: 1; }

  .ember-screen-split {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(12rem, 0.85fr);
    gap: 0.65rem;
  }
}

/* Tablet band: expand width + 2–3 hub cols, stacked fight mid below panes */
@media (min-width: 720px) and (max-width: 959px) {
  .ember-play {
    max-width: none;
  }

  .ember-hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ember-fight-mid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Phone / narrow: keep stacked; fight mid after panes */
@media (max-width: 719px) {
  .ember-fight-mid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ember-screen-split,
  .ember-screen-split--shop,
  .ember-screen-split--hub {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
}

/* ========== Stage wash / console frame (toggleable mocks → production) ==========
   .ember-play--stage   — full-bleed charcoal→ember wash + smoke behind play panels
   .ember-play--console — thicker gold/filigree outer board around .ember-app
   .ember-play--dim-chrome — lower-contrast site header/nav while playing
   Prefer stacking: shell + stage; shell + stage + console; shell + stage + console + dim-chrome
   ============================================================================ */

/* A) Stage wash: site-main becomes the play field; header stays on flat site black */
body.public-books:has(.ember-play--stage) .site-main {
  position: relative;
  background-color: #121018;
  background-image:
    linear-gradient(
      180deg,
      #14121a 0%,
      #1a1218 38%,
      #3a1412 78%,
      #6a1c14 100%
    ),
    radial-gradient(
      ellipse 110% 70% at 50% 115%,
      rgba(196, 58, 31, 0.72) 0%,
      rgba(139, 26, 18, 0.35) 38%,
      transparent 68%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-position: center, center bottom, center;
  background-blend-mode: normal, screen, soft-light;
  box-shadow: inset 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Extra local wash layer on the play shell (bezel around panels) */
.ember-play--stage {
  position: relative;
  isolation: isolate;
}

.ember-play--stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
  background:
    radial-gradient(
      ellipse 85% 50% at 50% 100%,
      rgba(240, 160, 48, 0.18) 0%,
      rgba(196, 58, 31, 0.22) 35%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(90, 18, 16, 0.25) 100%
    );
}

.ember-play--stage > * {
  position: relative;
  z-index: 1;
}

/* Full-bleed: reclaim container padding so wash hits site-main edges */
@media (min-width: 960px) and (min-height: 620px) {
  body.public-books:has(.ember-play--stage.ember-play--shell) .site-main-pad {
    padding-inline: 0;
    padding-block: 0;
  }

  /* Visible bezel: wash peeks around the arcade board */
  .ember-play--stage.ember-play--shell {
    padding-inline: 1.35rem;
    padding-block: 0.65rem 1rem;
  }

  .ember-play--stage.ember-play--shell > .ember-hero {
    padding-inline: 0.15rem;
  }
}

/* B) Outer console frame: thicker gold ring + filigree so hub reads as one arcade board */
.ember-play--console .ember-app {
  position: relative;
  border: 3px solid var(--ember-gold-bright, #d4a84b);
  border-radius: 0.5rem;
  background-color: rgba(16, 16, 22, 0.98);
  background-image: var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: cover;
  background-blend-mode: soft-light;
  box-shadow:
    0 0 0 1px rgba(107, 78, 20, 0.9),
    0 0 0 6px rgba(10, 10, 14, 0.92),
    0 0 0 7px rgba(166, 124, 42, 0.7),
    0 0 28px rgba(196, 58, 31, 0.25),
    0 22px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 64px rgba(139, 26, 18, 0.16),
    inset 0 1px 0 rgba(232, 201, 106, 0.16);
}

/* Filigree corner caps on the outer console */
.ember-play--console .ember-app::before,
.ember-play--console .ember-app::after {
  content: "";
  position: absolute;
  width: 3.1rem;
  height: 3.1rem;
  background: var(--ember-corner-url, url("../images/games/chrome-corner.svg")) no-repeat center / contain;
  pointer-events: none;
  opacity: 1;
  z-index: 4;
  filter: drop-shadow(0 0 4px rgba(212, 168, 75, 0.35));
}

.ember-play--console .ember-app::before {
  top: -5px;
  left: -5px;
}

.ember-play--console .ember-app::after {
  top: -5px;
  right: -5px;
  transform: scaleX(-1);
}

.ember-play--console .ember-app > .ember-console-filigree,
.ember-play--console .ember-app > .ember-chrome-ornament.ember-console-filigree {
  display: block;
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -4px;
  height: 1.35rem;
  pointer-events: none;
  z-index: 4;
  background:
    var(--ember-corner-url, url("../images/games/chrome-corner.svg")) no-repeat left bottom / 2.8rem,
    var(--ember-corner-url, url("../images/games/chrome-corner.svg")) no-repeat right bottom / 2.8rem;
  transform: scaleY(-1);
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(212, 168, 75, 0.3));
}

.ember-play--console .ember-app > .ember-console-filigree::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: 1.1rem;
  height: 0.85rem;
  transform: translateX(-50%) scaleY(-1);
  background: var(--ember-diamond-url, url("../images/games/chrome-diamond.svg")) no-repeat center / contain;
  opacity: 0.95;
}

@media (min-width: 960px) and (min-height: 620px) {
  .ember-play--console.ember-play--shell .ember-app {
    margin-inline: 0.35rem;
  }

  /* Slightly roomier bezel when console+stage so wash rings the board */
  .ember-play--stage.ember-play--console.ember-play--shell {
    padding-inline: 1.6rem;
    padding-block: 0.7rem 1.15rem;
  }
}

/* C) Mild dimming of surrounding page chrome so the board reads as the focus */
body.public-books:has(.ember-play--dim-chrome) .site-header {
  opacity: 0.42;
  filter: saturate(0.45) brightness(0.72);
  border-bottom-color: rgba(166, 124, 42, 0.08);
  box-shadow: none;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

body.public-books:has(.ember-play--dim-chrome) .site-header .brand,
body.public-books:has(.ember-play--dim-chrome) .site-header .nav-link {
  opacity: 0.9;
}

body.public-books:has(.ember-play--dim-chrome) .site-footer {
  opacity: 0.35;
  filter: saturate(0.4);
}

/* Footer stays hidden under height-locked shell; dim still applies if shown */

/* ========== Inner pane treatments (toggle classes; ON by default in Play.cshtml) ==========
   .ember-play--inner-ember — treatment 2: deep red-black + smoke inside chrome panes
   .ember-play--inner-mood  — treatment 3: location wash/pane mood (pair with mood class)
   Mood selectors (use on .ember-play and/or .ember-screen):
     .ember-mood--town / .ember-screen--town   — gate-stone + ember
     .ember-mood--forest / .ember-screen--forest — cool mossy dark
     .ember-mood--inn / .ember-screen--inn     — warmer hearth gold
   Stage wash + console (stage B) remain independent; stack with these toggles.
   When both inner-ember + inner-mood are on, the layered block below composes them
   (chamber smoke/ember radials + mood retint) so mood does not replace the chamber.
   ============================================================================== */

/* --- Shared readability when richer pane fills are on --- */
.ember-play--inner-ember .ember-screen-title,
.ember-play--inner-ember .ember-status-name,
.ember-play--inner-ember .ember-hub-label,
.ember-play--inner-ember .ember-fight-name,
.ember-play--inner-mood .ember-screen-title,
.ember-play--inner-mood .ember-status-name,
.ember-play--inner-mood .ember-hub-label,
.ember-play--inner-mood .ember-fight-name {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 12px rgba(0, 0, 0, 0.35);
}

.ember-play--inner-ember .ember-muted,
.ember-play--inner-ember .ember-hub-sub,
.ember-play--inner-ember .ember-hub-meta,
.ember-play--inner-ember .ember-log-line,
.ember-play--inner-ember .ember-chip-label,
.ember-play--inner-mood .ember-muted,
.ember-play--inner-mood .ember-hub-sub,
.ember-play--inner-mood .ember-hub-meta,
.ember-play--inner-mood .ember-log-line,
.ember-play--inner-mood .ember-chip-label {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}

/* --- 2) Ember chamber: deep red-black gradient + smoke inside panes --- */
.ember-play--inner-ember .ember-status.ember-chrome,
.ember-play--inner-ember .ember-screen.ember-chrome,
.ember-play--inner-ember .ember-chrome-pane,
.ember-play--inner-ember .ember-fight.ember-chrome {
  background-color: #100608;
  background-image:
    linear-gradient(
      165deg,
      rgba(36, 10, 12, 0.97) 0%,
      rgba(14, 6, 8, 0.98) 42%,
      rgba(48, 12, 14, 0.94) 100%
    ),
    radial-gradient(
      ellipse 90% 55% at 50% -10%,
      rgba(196, 58, 31, 0.28) 0%,
      rgba(139, 26, 18, 0.12) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 50% at 80% 110%,
      rgba(90, 18, 16, 0.45) 0%,
      transparent 65%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, auto, cover;
  background-position: center, center top, right bottom, center;
  background-blend-mode: normal, screen, soft-light, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.28),
    0 12px 36px rgba(0, 0, 0, 0.6),
    inset 0 0 48px rgba(139, 26, 18, 0.28),
    inset 0 1px 0 rgba(232, 201, 106, 0.08);
}

/* Hub cards: slightly stronger ember bloom so they don't flatten into the screen */
.ember-play--inner-ember .ember-hub-card.ember-chrome-pane {
  background-image:
    linear-gradient(
      180deg,
      rgba(42, 12, 14, 0.95) 0%,
      rgba(16, 6, 8, 0.98) 55%,
      rgba(32, 10, 12, 0.96) 100%
    ),
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(240, 160, 48, 0.1) 0%,
      transparent 55%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-blend-mode: normal, screen, soft-light;
}

/* Hub/town/service logs: keep charcoal for scanability (fight mid LOG uses wood) */
.ember-play--inner-ember .ember-log.ember-chrome-pane {
  background-image:
    linear-gradient(
      180deg,
      rgba(18, 6, 8, 0.98) 0%,
      rgba(10, 4, 6, 0.99) 100%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, cover;
  background-blend-mode: normal, soft-light;
}

/* Inner-ember (no mood): wood on fight actions + fight mid LOG; deeper wash for chamber.
   When mood/location classes are also present, see post-mood override blocks. */
.ember-play--inner-ember .ember-fight-actions.ember-chrome-pane {
  background-color: #1a1210;
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 4, 4, 0.48) 0%,
      rgba(8, 4, 4, 0.28) 42%,
      rgba(8, 4, 4, 0.52) 100%
    ),
    var(--ember-wood-panel-url, url("../images/games/actions/wood-panel.png"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

.ember-play--inner-ember .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-ember .ember-fight .ember-log.ember-chrome-pane {
  background-color: #1a1210;
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 4, 4, 0.52) 0%,
      rgba(8, 4, 4, 0.32) 42%,
      rgba(8, 4, 4, 0.56) 100%
    ),
    var(--ember-wood-panel-url, url("../images/games/actions/wood-panel.png"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

/* Console board interior picks up chamber tint without fighting gold ring */
.ember-play--inner-ember.ember-play--console .ember-app {
  background-color: rgba(14, 8, 10, 0.98);
  background-image:
    linear-gradient(
      180deg,
      rgba(22, 10, 12, 0.55) 0%,
      rgba(10, 6, 8, 0.35) 100%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, cover;
  background-blend-mode: normal, soft-light;
  box-shadow:
    0 0 0 1px rgba(107, 78, 20, 0.9),
    0 0 0 6px rgba(10, 10, 14, 0.92),
    0 0 0 7px rgba(166, 124, 42, 0.7),
    0 0 28px rgba(196, 58, 31, 0.32),
    0 22px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 72px rgba(139, 26, 18, 0.22),
    inset 0 1px 0 rgba(232, 201, 106, 0.16);
}

/* --- 3) Location mood: wash + pane tint per screen --- */

/* Shared pane fill helper vars when mood is on */
.ember-play--inner-mood {
  --ember-mood-pane-base: #121018;
  --ember-mood-pane-mid: #1a141c;
  --ember-mood-pane-glow: rgba(139, 26, 18, 0.18);
  --ember-mood-wash-top: #14121a;
  --ember-mood-wash-mid: #1a1218;
  --ember-mood-wash-bot: #3a1412;
  --ember-mood-wash-ember: rgba(196, 58, 31, 0.55);
}

.ember-play--inner-mood.ember-mood--town,
.ember-play--inner-mood:has(.ember-screen--town) {
  --ember-mood-pane-base: #12141a;
  --ember-mood-pane-mid: #1a1c24;
  --ember-mood-pane-glow: rgba(166, 124, 42, 0.14);
  --ember-mood-wash-top: #16181e;
  --ember-mood-wash-mid: #1c1818;
  --ember-mood-wash-bot: #3a2218;
  --ember-mood-wash-ember: rgba(196, 58, 31, 0.42);
}

.ember-play--inner-mood.ember-mood--forest,
.ember-play--inner-mood:has(.ember-screen--forest) {
  --ember-mood-pane-base: #0a1210;
  --ember-mood-pane-mid: #101a16;
  --ember-mood-pane-glow: rgba(46, 120, 72, 0.22);
  --ember-mood-wash-top: #0e1614;
  --ember-mood-wash-mid: #121a16;
  --ember-mood-wash-bot: #1a2a20;
  --ember-mood-wash-ember: rgba(52, 140, 88, 0.38);
}

.ember-play--inner-mood.ember-mood--inn,
.ember-play--inner-mood:has(.ember-screen--inn) {
  --ember-mood-pane-base: #16120c;
  --ember-mood-pane-mid: #221810;
  --ember-mood-pane-glow: rgba(240, 160, 48, 0.2);
  --ember-mood-wash-top: #1a1410;
  --ember-mood-wash-mid: #241810;
  --ember-mood-wash-bot: #4a2a12;
  --ember-mood-wash-ember: rgba(240, 160, 48, 0.48);
}

/* Site-main wash retinted by active mood (explicit selectors — vars do not inherit upward) */
body.public-books:has(.ember-play--stage.ember-play--inner-mood.ember-mood--town) .site-main,
body.public-books:has(.ember-play--stage.ember-play--inner-mood:has(.ember-screen--town)) .site-main {
  background-color: #1a1c24;
  background-image:
    linear-gradient(180deg, #1a1e28 0%, #222028 36%, #3a2a22 72%, #5a2418 100%),
    radial-gradient(ellipse 110% 70% at 50% 115%, rgba(196, 58, 31, 0.5) 0%, rgba(139, 26, 18, 0.28) 38%, transparent 68%),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-position: center, center bottom, center;
  background-blend-mode: normal, screen, soft-light;
}

body.public-books:has(.ember-play--stage.ember-play--inner-mood.ember-mood--forest) .site-main,
body.public-books:has(.ember-play--stage.ember-play--inner-mood:has(.ember-screen--forest)) .site-main {
  background-color: #0c1814;
  background-image:
    linear-gradient(180deg, #0c1612 0%, #102018 36%, #1a3224 72%, #18402c 100%),
    radial-gradient(ellipse 110% 70% at 50% 115%, rgba(46, 160, 96, 0.52) 0%, rgba(28, 100, 60, 0.28) 40%, transparent 70%),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-position: center, center bottom, center;
  background-blend-mode: normal, screen, soft-light;
}

body.public-books:has(.ember-play--stage.ember-play--inner-mood.ember-mood--inn) .site-main,
body.public-books:has(.ember-play--stage.ember-play--inner-mood:has(.ember-screen--inn)) .site-main {
  background-color: #1c140e;
  background-image:
    linear-gradient(180deg, #1c140e 0%, #2a1a10 36%, #5a3210 72%, #7a4210 100%),
    radial-gradient(ellipse 110% 70% at 50% 115%, rgba(240, 170, 48, 0.58) 0%, rgba(196, 80, 31, 0.28) 40%, transparent 70%),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-position: center, center bottom, center;
  background-blend-mode: normal, screen, soft-light;
}

/* Local bezel wash follows mood too */
.ember-play--inner-mood.ember-play--stage::before {
  background:
    radial-gradient(
      ellipse 85% 50% at 50% 100%,
      var(--ember-mood-pane-glow, rgba(240, 160, 48, 0.18)) 0%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--ember-mood-pane-base, #100608) 40%, transparent) 100%
    );
}

/* Mood panes: status, screen, chrome panes, fight shell */
.ember-play--inner-mood .ember-status.ember-chrome,
.ember-play--inner-mood .ember-screen.ember-chrome,
.ember-play--inner-mood .ember-chrome-pane,
.ember-play--inner-mood .ember-fight.ember-chrome {
  background-color: var(--ember-mood-pane-base, #121018);
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--ember-mood-pane-mid, #1a141c) 92%, #fff) 0%,
      var(--ember-mood-pane-base, #121018) 48%,
      var(--ember-mood-pane-mid, #1a141c) 100%
    ),
    radial-gradient(
      ellipse 85% 50% at 50% 0%,
      var(--ember-mood-pane-glow, rgba(139, 26, 18, 0.18)) 0%,
      transparent 60%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-position: center, center top, center;
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.28),
    0 12px 36px rgba(0, 0, 0, 0.58),
    inset 0 0 44px var(--ember-mood-pane-glow, rgba(139, 26, 18, 0.18)),
    inset 0 1px 0 rgba(232, 201, 106, 0.08);
}

/* Town: gate-stone grain (cool slate + ember lip) */
.ember-play--inner-mood.ember-mood--town .ember-status.ember-chrome,
.ember-play--inner-mood.ember-mood--town .ember-screen.ember-chrome,
.ember-play--inner-mood .ember-screen--town.ember-chrome {
  background-color: #141820;
  background-image:
    linear-gradient(165deg, rgba(40, 44, 56, 0.96) 0%, rgba(18, 20, 28, 0.98) 50%, rgba(32, 28, 30, 0.95) 100%),
    radial-gradient(ellipse 90% 45% at 50% 100%, rgba(196, 58, 31, 0.2) 0%, transparent 65%),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-blend-mode: normal, screen, soft-light;
}

.ember-play--inner-mood.ember-mood--town .ember-hub-card.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--town .ember-hub-card.ember-chrome-pane,
.ember-play--inner-mood.ember-mood--town .ember-log.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--town .ember-log.ember-chrome-pane {
  background-color: #141820;
  background-image:
    linear-gradient(
      180deg,
      rgba(44, 48, 62, 0.97) 0%,
      rgba(20, 22, 32, 0.99) 48%,
      rgba(34, 26, 28, 0.96) 100%
    ),
    radial-gradient(
      ellipse 90% 40% at 50% 100%,
      rgba(196, 58, 31, 0.28) 0%,
      transparent 70%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.3),
    0 12px 36px rgba(0, 0, 0, 0.58),
    inset 0 0 40px rgba(90, 30, 20, 0.18),
    inset 0 1px 0 rgba(180, 190, 210, 0.06);
}

/* Forest: mossy cool dark (fight panes + log) */
.ember-play--inner-mood.ember-mood--forest .ember-status.ember-chrome,
.ember-play--inner-mood.ember-mood--forest .ember-screen.ember-chrome,
.ember-play--inner-mood .ember-screen--forest.ember-chrome {
  background-color: #0a1410;
  background-image:
    linear-gradient(165deg, rgba(18, 40, 30, 0.97) 0%, rgba(8, 18, 14, 0.98) 50%, rgba(16, 36, 26, 0.95) 100%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(60, 150, 100, 0.22) 0%, transparent 60%),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-blend-mode: normal, screen, soft-light;
}

.ember-play--inner-mood.ember-mood--forest .ember-chrome-pane,
.ember-play--inner-mood .ember-screen--forest .ember-chrome-pane,
.ember-play--inner-mood.ember-mood--forest .ember-fight.ember-chrome,
.ember-play--inner-mood .ember-screen--forest .ember-fight.ember-chrome {
  background-color: #0a1410;
  background-image:
    linear-gradient(
      165deg,
      rgba(20, 44, 34, 0.97) 0%,
      rgba(8, 18, 14, 0.99) 48%,
      rgba(16, 38, 28, 0.96) 100%
    ),
    radial-gradient(
      ellipse 70% 55% at 20% 0%,
      rgba(74, 170, 120, 0.28) 0%,
      transparent 55%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.28),
    0 12px 36px rgba(0, 0, 0, 0.58),
    inset 0 0 48px rgba(40, 120, 80, 0.22),
    inset 0 1px 0 rgba(232, 201, 106, 0.08);
}

/* Inn: warmer hearth gold bloom */
.ember-play--inner-mood.ember-mood--inn .ember-status.ember-chrome,
.ember-play--inner-mood.ember-mood--inn .ember-screen.ember-chrome,
.ember-play--inner-mood .ember-screen--inn.ember-chrome,
.ember-play--inner-mood.ember-mood--inn .ember-chrome-pane,
.ember-play--inner-mood .ember-screen--inn .ember-chrome-pane {
  background-color: #16100a;
  background-image:
    linear-gradient(
      165deg,
      rgba(56, 32, 14, 0.96) 0%,
      rgba(18, 12, 8, 0.99) 46%,
      rgba(64, 36, 14, 0.95) 100%
    ),
    radial-gradient(
      ellipse 80% 55% at 50% 110%,
      rgba(240, 170, 48, 0.36) 0%,
      rgba(196, 58, 31, 0.16) 40%,
      transparent 70%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.32),
    0 12px 36px rgba(0, 0, 0, 0.58),
    inset 0 0 52px rgba(240, 160, 48, 0.14),
    inset 0 1px 0 rgba(232, 201, 106, 0.1);
}

/* Console board picks up mood base */
.ember-play--inner-mood.ember-play--console .ember-app {
  background-color: color-mix(in srgb, var(--ember-mood-pane-base, #121018) 92%, #000);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ember-mood-pane-mid, #1a141c) 50%, transparent) 0%,
      transparent 100%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, cover;
  background-blend-mode: normal, soft-light;
}

/* Gold chrome / buttons stay sharp under mood fills */
.ember-play--inner-ember .ember-chrome-btn,
.ember-play--inner-mood .ember-chrome-btn {
  background: linear-gradient(180deg, var(--ember-charcoal-3), var(--ember-charcoal));
  border-color: var(--ember-gold-dim);
  color: var(--ember-parchment);
}

.ember-play--inner-ember .ember-chrome-btn:hover:not(:disabled),
.ember-play--inner-mood .ember-chrome-btn:hover:not(:disabled) {
  border-color: var(--ember-gold-bright);
  color: #fff8e7;
}


/* --- Chamber + mood layered (both toggles ON): compose, do not replace ---
   Mood alone would override chamber backgrounds (same specificity, later rule).
   These higher-specificity selectors keep chamber smoke + ember radials and
   retint via mood vars / location fills so text stays readable.
   ============================================================================ */

.ember-play--inner-ember.ember-play--inner-mood .ember-screen-title,
.ember-play--inner-ember.ember-play--inner-mood .ember-status-name,
.ember-play--inner-ember.ember-play--inner-mood .ember-hub-label,
.ember-play--inner-ember.ember-play--inner-mood .ember-fight-name,
.ember-play--inner-ember.ember-play--inner-mood .ember-status-class,
.ember-play--inner-ember.ember-play--inner-mood .ember-chip-value {
  color: var(--ember-parchment);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.92),
    0 0 18px rgba(0, 0, 0, 0.5);
}

.ember-play--inner-ember.ember-play--inner-mood .ember-muted,
.ember-play--inner-ember.ember-play--inner-mood .ember-hub-sub,
.ember-play--inner-ember.ember-play--inner-mood .ember-hub-meta,
.ember-play--inner-ember.ember-play--inner-mood .ember-log-line,
.ember-play--inner-ember.ember-play--inner-mood .ember-chip-label,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen-lead {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.35);
}

/* Shared layered pane: mood base + chamber ember radials + smoke */
.ember-play--inner-ember.ember-play--inner-mood .ember-status.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood .ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-fight.ember-chrome {
  background-color: color-mix(in srgb, var(--ember-mood-pane-base, #100608) 72%, #100608);
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--ember-mood-pane-mid, #24100c) 82%, #2a0c0e) 0%,
      color-mix(in srgb, var(--ember-mood-pane-base, #100608) 78%, #0e0608) 44%,
      color-mix(in srgb, var(--ember-mood-pane-mid, #30100e) 70%, #2a0a0c) 100%
    ),
    radial-gradient(
      ellipse 90% 55% at 50% -10%,
      rgba(196, 58, 31, 0.24) 0%,
      var(--ember-mood-pane-glow, rgba(139, 26, 18, 0.14)) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 50% at 80% 110%,
      rgba(90, 18, 16, 0.42) 0%,
      transparent 65%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, auto, cover;
  background-position: center, center top, right bottom, center;
  background-blend-mode: normal, screen, soft-light, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.3),
    0 12px 36px rgba(0, 0, 0, 0.62),
    inset 0 0 48px color-mix(in srgb, var(--ember-mood-pane-glow, rgba(139, 26, 18, 0.22)) 55%, rgba(139, 26, 18, 0.28)),
    inset 0 1px 0 rgba(232, 201, 106, 0.09);
}

/* Town layered: gate-stone + chamber smoke / ember lip */
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--town .ember-status.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--town .ember-screen.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--town.ember-chrome {
  background-color: #12141a;
  background-image:
    linear-gradient(165deg, rgba(40, 44, 56, 0.94) 0%, rgba(16, 12, 16, 0.98) 50%, rgba(36, 22, 24, 0.95) 100%),
    radial-gradient(ellipse 90% 45% at 50% 100%, rgba(196, 58, 31, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(196, 58, 31, 0.18) 0%, transparent 60%),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, auto, cover;
  background-position: center, center bottom, center top, center;
  background-blend-mode: normal, screen, screen, soft-light;
}

.ember-play--inner-ember.ember-play--inner-mood.ember-mood--town .ember-hub-card.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--town .ember-hub-card.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--town .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--town .ember-log.ember-chrome-pane {
  background-color: #12141a;
  background-image:
    linear-gradient(
      180deg,
      rgba(44, 48, 62, 0.95) 0%,
      rgba(16, 12, 18, 0.99) 48%,
      rgba(36, 20, 22, 0.96) 100%
    ),
    radial-gradient(
      ellipse 90% 40% at 50% 100%,
      rgba(196, 58, 31, 0.32) 0%,
      transparent 70%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.3),
    0 12px 36px rgba(0, 0, 0, 0.6),
    inset 0 0 40px rgba(90, 30, 20, 0.22),
    inset 0 1px 0 rgba(180, 190, 210, 0.06);
}

/* Forest layered: moss cool + deep ember chamber (wyrm / thicket) */
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--forest .ember-status.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--forest .ember-screen.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--forest.ember-chrome {
  background-color: #0a1210;
  background-image:
    linear-gradient(165deg, rgba(18, 40, 30, 0.94) 0%, rgba(10, 10, 12, 0.98) 48%, rgba(28, 18, 16, 0.94) 100%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(60, 150, 100, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 70% 55% at 85% 110%, rgba(139, 26, 18, 0.38) 0%, transparent 62%),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, auto, cover;
  background-position: center, center top, right bottom, center;
  background-blend-mode: normal, screen, soft-light, soft-light;
}

.ember-play--inner-ember.ember-play--inner-mood.ember-mood--forest .ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--forest .ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--forest .ember-fight.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--forest .ember-fight.ember-chrome {
  background-color: #0a1210;
  background-image:
    linear-gradient(
      165deg,
      rgba(20, 44, 34, 0.95) 0%,
      rgba(8, 14, 12, 0.99) 46%,
      rgba(28, 16, 14, 0.95) 100%
    ),
    radial-gradient(
      ellipse 70% 55% at 20% 0%,
      rgba(74, 170, 120, 0.26) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 65% 50% at 90% 100%,
      rgba(196, 58, 31, 0.28) 0%,
      transparent 60%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, auto, cover;
  background-position: center, left top, right bottom, center;
  background-blend-mode: normal, screen, soft-light, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.28),
    0 12px 36px rgba(0, 0, 0, 0.62),
    inset 0 0 48px rgba(40, 100, 70, 0.18),
    inset 0 0 36px rgba(139, 26, 18, 0.16),
    inset 0 1px 0 rgba(232, 201, 106, 0.08);
}

/* Inn layered: hearth gold bloom + chamber smoke */
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--inn .ember-status.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--inn .ember-screen.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--inn.ember-chrome,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--inn .ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--inn .ember-chrome-pane {
  background-color: #14100a;
  background-image:
    linear-gradient(
      165deg,
      rgba(56, 32, 14, 0.94) 0%,
      rgba(14, 8, 8, 0.99) 46%,
      rgba(64, 28, 14, 0.94) 100%
    ),
    radial-gradient(
      ellipse 80% 55% at 50% 110%,
      rgba(240, 170, 48, 0.34) 0%,
      rgba(196, 58, 31, 0.2) 40%,
      transparent 70%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, auto, cover;
  background-position: center, center bottom, center;
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    0 0 0 1px rgba(166, 124, 42, 0.34),
    0 12px 36px rgba(0, 0, 0, 0.6),
    inset 0 0 52px rgba(240, 160, 48, 0.14),
    inset 0 0 40px rgba(139, 26, 18, 0.18),
    inset 0 1px 0 rgba(232, 201, 106, 0.1);
}

/* fight-actions-wood-over-mood
   Fight ACTIONS wood wins over mood/location .ember-chrome-pane fills.
   Mood rules like .ember-play--inner-ember.ember-play--inner-mood.ember-mood--forest .ember-chrome-pane
   and .ember-screen--forest .ember-chrome-pane are (0,4,0); these reach (0,5,0) so wood-panel.png
   paints. Hub cards / non-fight logs keep mood fills. */
.ember-play--inner-mood .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-mood.ember-mood--town .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-mood.ember-mood--forest .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-mood.ember-mood--inn .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--town .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--forest .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--inn .ember-fight-actions.ember-chrome-pane {
  background-color: #1a1210;
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 5, 4, 0.38) 0%,
      rgba(8, 5, 4, 0.22) 42%,
      rgba(8, 5, 4, 0.45) 100%
    ),
    var(--ember-wood-panel-url, url("../images/games/actions/wood-panel.png"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

.ember-play--inner-ember.ember-play--inner-mood .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--town .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--forest .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--inn .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--town .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--forest .ember-fight-actions.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--inn .ember-fight-actions.ember-chrome-pane {
  background-color: #1a1210;
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 4, 4, 0.48) 0%,
      rgba(8, 4, 4, 0.28) 42%,
      rgba(8, 4, 4, 0.52) 100%
    ),
    var(--ember-wood-panel-url, url("../images/games/actions/wood-panel.png"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

/* fight-log-wood-over-mood
   Fight mid LOG wood wins over mood/location .ember-chrome-pane (and town .ember-log)
   fills the same way as fight-actions-wood-over-mood. Selectors reach (0,5,0)/(0,6,0).
   Hub/town/inn aside logs are NOT under .ember-fight-mid — they keep mood. */
.ember-play--inner-mood .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-mood.ember-mood--town .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-mood.ember-mood--forest .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-mood.ember-mood--inn .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--town .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--forest .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--inn .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-mood .ember-fight .ember-log.ember-chrome-pane,
.ember-play--inner-mood.ember-mood--forest .ember-fight .ember-log.ember-chrome-pane,
.ember-play--inner-mood .ember-screen--forest .ember-fight .ember-log.ember-chrome-pane {
  background-color: #1a1210;
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 5, 4, 0.42) 0%,
      rgba(8, 5, 4, 0.28) 42%,
      rgba(8, 5, 4, 0.5) 100%
    ),
    var(--ember-wood-panel-url, url("../images/games/actions/wood-panel.png"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

.ember-play--inner-ember.ember-play--inner-mood .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--town .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--forest .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--inn .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--town .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--forest .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--inn .ember-fight-mid > .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-fight .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood.ember-mood--forest .ember-fight .ember-log.ember-chrome-pane,
.ember-play--inner-ember.ember-play--inner-mood .ember-screen--forest .ember-fight .ember-log.ember-chrome-pane {
  background-color: #1a1210;
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 4, 4, 0.52) 0%,
      rgba(8, 4, 4, 0.32) 42%,
      rgba(8, 4, 4, 0.56) 100%
    ),
    var(--ember-wood-panel-url, url("../images/games/actions/wood-panel.png"));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, normal;
}

/* Console board: chamber inset glow + mood base */
.ember-play--inner-ember.ember-play--inner-mood.ember-play--console .ember-app {
  background-color: color-mix(in srgb, var(--ember-mood-pane-base, #100608) 88%, #0a0608);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ember-mood-pane-mid, #22100c) 48%, transparent) 0%,
      rgba(10, 6, 8, 0.3) 100%
    ),
    var(--ember-smoke-url, url("../images/games/texture-smoke.svg"));
  background-size: auto, cover;
  background-blend-mode: normal, soft-light;
  box-shadow:
    0 0 0 1px rgba(107, 78, 20, 0.9),
    0 0 0 6px rgba(10, 10, 14, 0.92),
    0 0 0 7px rgba(166, 124, 42, 0.7),
    0 0 28px color-mix(in srgb, var(--ember-mood-pane-glow, rgba(196, 58, 31, 0.32)) 70%, rgba(196, 58, 31, 0.32)),
    0 22px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 72px rgba(139, 26, 18, 0.2),
    inset 0 1px 0 rgba(232, 201, 106, 0.16);
}

.ember-play--inner-ember.ember-play--inner-mood .ember-chrome-btn {
  background: linear-gradient(180deg, var(--ember-charcoal-3), var(--ember-charcoal));
  border-color: var(--ember-gold-dim);
  color: var(--ember-parchment);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.ember-play--inner-ember.ember-play--inner-mood .ember-chrome-btn:hover:not(:disabled) {
  border-color: var(--ember-gold-bright);
  color: #fff8e7;
}


/* forest trip lobby — fight shell (grayed last foe / waiting thicket) */
.ember-fight--lobby .ember-fight-foe--spent .ember-fight-art,
.ember-fight-foe--spent .ember-fight-art {
  filter: grayscale(1) brightness(0.55) contrast(0.95);
  opacity: 0.72;
}
.ember-fight--lobby .ember-fight-foe--waiting .ember-fight-art,
.ember-fight-foe--waiting .ember-fight-art {
  filter: grayscale(0.85) brightness(0.45);
  opacity: 0.4;
}
.ember-fight-foe-status {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ember-gold-bright, #e8c872);
  opacity: 0.92;
}
.ember-fight-foe-hint {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}
.ember-trip-haul--foe {
  margin: 0.65rem 0 0;
  padding: 0.45rem 0 0;
  border-top: 1px solid rgba(232, 200, 114, 0.22);
  background: transparent;
  box-shadow: none;
}
.ember-trip-haul--foe .ember-trip-haul-title {
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
}
.ember-trip-haul--foe .ember-trip-haul-stats {
  margin-bottom: 0.25rem;
}
.ember-trip-haul--foe .ember-trip-haul-note {
  font-size: 0.75rem;
}

/* Trip choices in wood actions row (text cards, same turn-block hover strip) */
.ember-turn-block--trip .ember-turn-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
.ember-turn-btn--trip {
  min-width: 8.5rem;
  max-width: 14rem;
  flex: 1 1 auto;
  padding: 0.55rem 0.75rem;
  text-align: center;
}
.ember-turn-btn--trip .ember-turn-label {
  display: block;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ember-gold-bright, #e8c872);
}
.ember-turn-btn--trip .ember-turn-preview {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.3;
  opacity: 0.82;
  color: var(--ember-parchment, #fff8e7);
}
.ember-turn-btn--trip.ember-turn-btn--primary {
  box-shadow: 0 0 0 1px rgba(232, 200, 114, 0.35), 0 0 12px rgba(180, 80, 30, 0.25);
}
.ember-turn-btn--trip:disabled {
  opacity: 0.45;
}

/* forest trip haul */
.ember-trip-haul {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem 1rem;
}
.ember-trip-haul-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  opacity: 0.9;
}
.ember-trip-haul-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.ember-trip-haul-note {
  margin: 0;
  font-size: 0.85rem;
}
.ember-actions #btn-leave-forest,
.ember-actions #btn-push {
  width: 100%;
  margin-top: 0.4rem;
}


/* ——— Character sheet ——— */
.ember-screen--character .ember-screen-split--character {
  align-items: start;
}

.ember-char-panel {
  position: relative;
  padding: 0.85rem 0.9rem 1rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.ember-char-identity {
  margin: 0 0 0.35rem;
  color: var(--ember-gold-bright);
  font-size: 1.05rem;
}

.ember-char-level {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--ember-muted);
}

.ember-char-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.65rem;
}

@media (min-width: 520px) {
  .ember-char-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ember-char-stat {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.45rem;
  padding: 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ember-char-stat span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ember-muted);
}

.ember-char-stat strong {
  font-size: 1rem;
  color: #fff8e7;
}

.ember-char-bonus,
.ember-char-equip em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--ember-gold-dim);
}

.ember-char-equip {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ember-char-equip li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.45rem 0.55rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.45rem;
}

.ember-char-equip li span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ember-muted);
  min-width: 4.5rem;
}

.ember-char-equip li strong {
  color: #fff8e7;
}

.ember-char-inv li {
  /* reuse shop list; no sell button — pack is read-only here */
  justify-content: flex-start;
}