/* Sakura Ward Mini — demo styles
   Extends ../css/style.css. */

/* ─── view modes (title vs play) ─────────────── */
/* When view=title: hide everything except #title-screen. */
.ryokan-demo[data-view="title"] .nav,
.ryokan-demo[data-view="title"] .demo-stage {
  display: none;
}
.ryokan-demo[data-view="play"] #title-screen {
  display: none;
}
.ryokan-demo[data-view="title"] .combat-overlay {
  display: none !important;
}

/* ─── title screen ───────────────────────────── */
.title-screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  font-family: var(--mono);
  color: #fff;
  isolation: isolate;
}

.title-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Night is always the base layer (always visible). Day, if it exists,
   overlays during day phase. If title_day.png is missing, night shows
   through. If title_night.png is missing too, the fallback gradient shows. */
.title-bg-night { display: block; }
.title-bg-day   { display: none; }
body[data-phase="day"] .title-bg-day { display: block; }

/* If neither image exists, use this gradient as fallback */
.title-bg-fallback {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(180, 120, 200, 0.25), transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(80, 60, 120, 0.3), transparent 50%),
    linear-gradient(180deg, #1a1525 0%, #2a1f3e 40%, #1f1830 100%);
}

/* Heavy darkening on the left + bottom to hide any UI baked into the
   painted background image. Keeps the scene visible on the right. */
.title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(8,4,12,0.95) 0%,
      rgba(8,4,12,0.92) 36%,
      rgba(8,4,12,0.55) 48%,
      rgba(8,4,12,0.15) 58%,
      rgba(8,4,12,0) 68%),
    linear-gradient(0deg,
      rgba(8,4,12,0.88) 0%,
      rgba(8,4,12,0.4) 12%,
      rgba(8,4,12,0) 22%);
  z-index: 1;
  pointer-events: none;
}

/* ─── logo plate (upper-left) ──────────────── */
.title-logo {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 5;
  padding: 14px 28px 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 220, 0.1), transparent 50%),
    linear-gradient(180deg, #7a5a3a 0%, #4a3520 100%);
  border: 3px solid #2a1a08;
  border-radius: 10px;
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 180, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.5);
  text-align: center;
  min-width: 380px;
}

.t-brand {
  font-size: 12px;
  letter-spacing: 0.35em;
  color: #ff4a5c;
  font-weight: 700;
  margin-bottom: 4px;
}

.t-name {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: #f5e8d8;
  text-shadow:
    2px 2px 0 #2a1a08,
    -1px -1px 0 #2a1a08,
    1px -1px 0 #2a1a08,
    -1px 1px 0 #2a1a08;
}

.t-sub {
  font-size: 18px;
  letter-spacing: 0.25em;
  color: #f5e8d8;
  margin-top: 2px;
  font-weight: 700;
}

.t-jp {
  font-family: var(--jp);
  font-size: 18px;
  letter-spacing: 0.4em;
  color: #ff4a5c;
  margin-top: 4px;
  font-weight: 700;
}

/* ─── menu (left column) ───────────────────── */
.title-menu {
  position: absolute;
  top: 200px;
  left: 28px;
  width: 460px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
  /* Cap height so buttons can't overlap the rating badge */
  max-height: calc(100vh - 320px);
}

.t-btn {
  position: relative;
  background: linear-gradient(180deg, rgba(60, 30, 60, 0.9), rgba(30, 15, 30, 0.92));
  border: 2px solid #2a1a2a;
  border-radius: 10px;
  padding: 7px 14px;
  color: #fff;
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  transition: all 0.15s ease;
}

.t-btn:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(90, 50, 90, 0.92), rgba(45, 25, 45, 0.95));
}

.t-btn-primary {
  background: linear-gradient(180deg, rgba(190, 80, 130, 0.85), rgba(120, 40, 90, 0.92));
  border-color: #ff6b9a;
  box-shadow: 0 0 18px rgba(255, 107, 154, 0.5);
}
.t-btn-primary:hover {
  background: linear-gradient(180deg, rgba(220, 100, 150, 0.9), rgba(140, 50, 100, 0.95));
}

.t-icon {
  grid-row: 1 / span 2;
  font-size: 22px;
  color: #ffb0c8;
  text-align: center;
}

.t-row {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.t-jp-label {
  font-family: var(--jp);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.t-pipe {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
}
.t-en-label {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #ff8aa8;
  font-weight: 700;
}
.t-btn-primary .t-en-label { color: #fff; }

.t-desc {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--jp);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* ─── HUD pills (upper-right) ──────────────── */
.title-hud {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.t-pill {
  background: linear-gradient(180deg, rgba(20, 15, 25, 0.92), rgba(10, 8, 15, 0.95));
  border: 2px solid #2a1a2a;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
}

.t-pill-icon { font-size: 16px; color: #4ade80; }
.t-pill-clock .t-pill-icon { color: #ffe066; }
.t-pill-sub {
  font-family: var(--jp);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.t-conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
  margin-left: auto;
}
.t-conn-dot.disconnected { background: var(--accent); box-shadow: 0 0 8px rgba(255, 46, 60, 0.7); }

/* ─── rating badge (lower-left) ────────────── */
.title-rating {
  position: absolute;
  bottom: 22px;
  left: 28px;
  z-index: 5;
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.esrb-badge {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  font-family: var(--mono);
  font-weight: 800;
}
.esrb-tier {
  font-size: 9px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #000;
  width: 100%;
  text-align: center;
  padding-bottom: 2px;
}
.esrb-m {
  font-size: 44px;
  line-height: 1;
  padding: 4px 0;
}
.esrb-org {
  font-size: 9px;
  letter-spacing: 0.1em;
  border-top: 1px solid #000;
  width: 100%;
  text-align: center;
  padding-top: 2px;
}

.rating-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #fff;
}
.rt-line1 { font-weight: 700; }
.rt-line2 { color: rgba(255, 255, 255, 0.75); }
.rt-jp {
  font-family: var(--jp);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  font-size: 10px;
  margin-top: 2px;
}

/* ─── feature pills (bottom-center) ────────── */
.title-features {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 5;
}

.t-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(40, 25, 50, 0.6);
  border: 1.5px solid rgba(255, 138, 168, 0.4);
  border-radius: 22px;
}
.t-feat-mid {
  border-color: rgba(125, 211, 252, 0.5);
  background: rgba(30, 40, 60, 0.6);
}
.ft-icon { font-size: 18px; }
.ft-stack { display: flex; flex-direction: column; line-height: 1.1; }
.ft-jp {
  font-family: var(--jp);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.08em;
}
.ft-en {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.2em;
}

/* ─── version label (bottom-right) ─────────── */
.title-version {
  position: absolute;
  bottom: 22px;
  right: 28px;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  z-index: 5;
}

/* ─── modal panels (OPTIONS / CHRONICLES) ──── */
.title-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: linear-gradient(180deg, #2a1a2e, #1a0e20);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 0;
  width: min(520px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
  font-family: var(--mono);
  color: #fff;
}
.title-panel[hidden] { display: none; }

.title-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.panel-title {
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--accent);
}
.panel-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

#panel-options {
  padding-bottom: 20px;
}
#panel-options label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
#panel-options input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
}
.t-btn-small {
  margin: 8px 20px;
  padding: 8px 16px;
  background: var(--accent);
  color: #07070a;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  cursor: pointer;
  font-weight: 700;
}
.t-btn-small.t-btn-ghost {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.t-btn-small.t-btn-ghost:hover { background: rgba(255, 210, 63, 0.08); }

.panel-intro {
  padding: 0 20px;
  margin: 6px 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  line-height: 1.5;
}
.checkin-actions {
  display: flex;
  gap: 10px;
  padding: 0 20px;
  margin-top: 6px;
}
.checkin-actions .t-btn-small { margin: 0; }
.checkin-status {
  padding: 6px 20px 14px;
  min-height: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
.checkin-status.is-error { color: #ff4459; }
.checkin-status.is-ok    { color: #7dd3fc; }

.chronicles-body {
  padding: 16px 24px 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
}
.chronicles-body h3 {
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.chronicles-body h4 {
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--accent-3);
}
.chronicles-body ul { padding-left: 20px; }
.chronicles-body li { margin: 4px 0; }

/* responsive — narrow title-screen */
@media (max-width: 1100px) {
  .title-menu { width: 380px; }
  .title-logo { min-width: 320px; }
  .t-name { font-size: 44px; }
  .t-pill { min-width: 220px; font-size: 11px; }
}
@media (max-width: 720px) {
  .title-logo, .title-menu, .title-hud, .title-rating, .title-features, .title-version {
    position: static;
    transform: none;
  }
  .title-screen { padding: 16px; overflow-y: auto; }
}


/* ─── demo stage shell ─────────────────────── */
body.ryokan-demo {
  overflow: hidden;
}

.demo-stage {
  position: relative;
  width: 100vw;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Chrome rows keep their size; the active content area (scene / control /
   inn) fills the remaining height. Flex is robust to which children are
   visible (workspace + play-view + role all toggle siblings), unlike the
   old 3-row grid that relied on child order. */
.top-strip,
.demo-controls { flex: 0 0 auto; }
.map-view,
.demo-room { flex: 1 1 auto; min-height: 0; }

/* ─── HUD strip (top) ─────────────────────── */
.demo-hud {
  position: relative;          /* anchor for the centered workspace tabs */
  display: flex;
  gap: 1px;
  background: var(--border);
  z-index: 5;
}

.hud-block {
  background: var(--bg-panel);
  padding: 6px 16px;
  min-width: 0;
}

/* Block 1: identity — fixed width, holds name + arch + connection */
.hud-block-identity {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Block 2: context — flex-fills, holds room/action + stats bars + phase */
.hud-block-context {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 16px;
  justify-content: center;
}

/* Block 3: view toggle — fixed narrow column on the right */
.hud-view-toggle {
  flex: 0 0 auto;
}

.hud-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.hud-name {
  font-size: 18px;
  font-weight: 800;
  color: #7dd3fc;
  letter-spacing: 0.05em;
  line-height: 1;
}

.hud-arch {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 0.18em;
}

.hud-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* Block-2 internal rows */
.hud-context-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.hud-context-room {
  font-weight: 700;
  color: var(--fg);
}
.hud-context-action {
  color: var(--accent-3);
}
.hud-context-sep {
  color: var(--fg-faint);
}
.hud-context-phase {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  margin-top: 2px;
}

/* Stats — three compact, self-contained chips (label · bar · value) so each
   reads as a unit instead of bars stretching across the whole HUD. */
.hud-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.hud-stat {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hud-stat-label {
  color: var(--fg-dim);
  font-weight: 700;
  letter-spacing: 0.2em;
  min-width: 18px;
}
.hud-bar {
  height: 6px;
  width: 120px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.hud-bar .bar-fill {
  height: 100%;
  transition: width 0.35s ease;
}
.hud-stats .stat-val {
  color: var(--fg);
  font-weight: 700;
  min-width: 26px;
  text-align: right;
}

/* Legacy .demo-stats overlay — removed from HTML, retained as no-op */
.demo-stats { display: none; }

/* ─── room stage ─────────────────────────── */
.demo-room {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #2a1f2e 0%, #1a1520 60%, #0a0608 100%);
  transition: background 0.6s ease, filter 0.6s ease;
}
.demo-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--room-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.demo-room::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.demo-room[style*="--room-bg"]::after {
  opacity: 1;
}
/* Stage children stay above layers */
.demo-room > * {
  position: relative;
  z-index: 2;
}

.demo-room[data-room="entrance"] {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 220, 180, 0.06), transparent 50%),
    linear-gradient(180deg, #3a2f24 0%, #221b14 60%, #0d0a07 100%);
}
.demo-room[data-room="front_desk"] {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(200, 150, 255, 0.06), transparent 50%),
    linear-gradient(180deg, #2e2638 0%, #1a1622 60%, #0a0810 100%);
}
.demo-room[data-room="lounge"] {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 200, 220, 0.05), transparent 50%),
    linear-gradient(180deg, #3a2842 0%, #1f1825 60%, #0d0a12 100%);
}
.demo-room[data-room="kitchen"] {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 220, 180, 0.05), transparent 50%),
    linear-gradient(180deg, #3a3528 0%, #221c14 60%, #0d0b06 100%);
}
.demo-room[data-room="tea_room"] {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(220, 255, 200, 0.05), transparent 50%),
    linear-gradient(180deg, #2e3a28 0%, #1c241a 60%, #0a0e08 100%);
}
.demo-room[data-room="onsen"] {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(180, 230, 255, 0.08), transparent 50%),
    linear-gradient(180deg, #1f3340 0%, #122028 60%, #060d12 100%);
}
.demo-room[data-room="guest_room"] {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(200, 180, 220, 0.06), transparent 50%),
    linear-gradient(180deg, #2a2438 0%, #18142a 60%, #0a0814 100%);
}
.demo-room[data-room="garden"] {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(200, 255, 200, 0.05), transparent 50%),
    linear-gradient(180deg, #2a3a28 0%, #1c241a 60%, #0a0e08 100%);
}

.room-label {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--jp);
  font-size: 64px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: 0.15em;
  pointer-events: none;
  z-index: 1;
}

/* Subtle floor line */
.demo-room::after {
  content: "";
  position: absolute;
  bottom: 22%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

/* Night phase — global darken + cool tint */
.ryokan-demo[data-phase="night"] .demo-room {
  filter: brightness(0.55) saturate(1.2) hue-rotate(-15deg);
}

.ryokan-demo[data-phase="night"] .room-label {
  color: rgba(180, 200, 255, 0.06);
}

/* Phase overlay — lantern glow at night */
.phase-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 80%, rgba(255, 180, 100, 0), transparent 30%);
  transition: background 0.6s ease;
  z-index: 2;
}
.ryokan-demo[data-phase="night"] .phase-overlay {
  background:
    radial-gradient(circle at 20% 70%, rgba(255, 180, 100, 0.15), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255, 180, 100, 0.12), transparent 30%);
}

/* Sakura petals — small drifting accents */
.sakura-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 182, 193, 0.18) 1px, transparent 2px),
    radial-gradient(circle at 75% 25%, rgba(255, 182, 193, 0.14) 1px, transparent 2px),
    radial-gradient(circle at 30% 45%, rgba(255, 182, 193, 0.10) 1px, transparent 2px),
    radial-gradient(circle at 85% 60%, rgba(255, 182, 193, 0.16) 1px, transparent 2px),
    radial-gradient(circle at 50% 80%, rgba(255, 182, 193, 0.12) 1px, transparent 2px);
  background-size: 100% 100%;
  animation: petals-drift 30s linear infinite;
  opacity: 0.7;
  z-index: 1;
}

@keyframes petals-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%; }
}

/* ─── scene grid (positioning context for all in-room sprites) ───
   Fills the demo-room. Each character is absolutely positioned within
   this grid via per-element CSS vars (--col, --row). 8 cols × 4 rows.
   Closer rows render larger sprites for a sense of depth.
   Selector specificity (.demo-room > .scene-grid) intentionally beats
   the .demo-room > * relative-positioning rule above. */
.demo-room > .scene-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Ultrawide guard: sprites anchor at 18.5%–81.5% of this layer, so on a
     3440px monitor the cast would spread across a huge void. Cap the play
     band and centre it (left:0/right:0 + margin-inline:auto). The room
     background (.demo-room::before, background-size:cover) still fills the
     full width behind them. No effect below 1800px, so 1080p/1440p are
     untouched — only true ultrawide gets reined in. */
  max-width: 1800px;
  margin-inline: auto;
}
.demo-room > .scene-grid-nav {
  position: absolute;
  z-index: 5;
}

/* Grid cell overlay — only shown when GRID toggle is on (.grid-show on body)
   Inset MUST match the sprite anchor range in main.js:GRID_*_MIN/MAX.
   Horizontal 14..86%, vertical bottom 10..40% from the room bottom. */
.scene-grid-cells {
  position: absolute;
  top: 50%;
  bottom: 10%;
  left: 14%;
  right: 14%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 4;
}
.ryokan-demo.grid-show .scene-grid-cells {
  opacity: 1;
  pointer-events: auto;
}
.grid-cell {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  font-family: var(--mono);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2px 4px;
}
.grid-cell:hover {
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.7);
  color: rgba(255, 255, 255, 0.85);
}
.grid-cell.is-occupied {
  background: rgba(255, 220, 100, 0.08);
  border-color: rgba(255, 220, 100, 0.5);
}
.grid-cell.is-occupied:hover {
  background: rgba(255, 220, 100, 0.22);
}

/* ─── sprite (any character on the grid — followed or companion) ───
   --col: 0..7 (horizontal grid column)
   --row: 0..3 (depth; 0 = back, 3 = front)
   --depth-scale: derived size multiplier (1.0 at front, ~0.72 at back)
   --base-h: base sprite height before depth scaling
   --left-pct / --bottom-pct: computed by JS for crisp transitions */
.sprite,
.scene-companion {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  left: var(--left-pct, 50%);
  bottom: var(--bottom-pct, 14%);
  transform: translate(-50%, 0);
  transition: left 0.45s ease, bottom 0.45s ease, transform 0.45s ease;
  pointer-events: none;   /* let grid cells underneath receive clicks */
  z-index: calc(10 + var(--row, 3));   /* front rows overlap back rows */
}

/* Followed-character sprite — full size + cyan name tag */
.sprite img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  height: calc(var(--base-h, 220px) * var(--depth-scale, 1));
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
  transition: height 0.45s ease;
}
.sprite-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #7dd3fc;
  background: rgba(0, 0, 0, 0.75);
  padding: 3px 12px;
  border: 1px solid rgba(125, 211, 252, 0.4);
  border-radius: 2px;
}

/* Companion container is the positioning context — actual companion
   elements (.scene-companion) position themselves absolutely on the grid */
.scene-companions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene-companion {
  opacity: 0.92;
  filter: saturate(0.92);
}
.scene-companion-img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  height: calc(var(--base-h, 200px) * var(--depth-scale, 1));
  width: auto;
  display: block;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.55));
  transition: height 0.45s ease;
}
.scene-companion-name {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  white-space: nowrap;
}

.scene-companion-overflow {
  position: absolute;
  bottom: 12%;
  right: 4%;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  letter-spacing: 0.1em;
  z-index: 20;
}

/* ─── grid controls (GRID toggle · hint · RESET) ─── */
/* ─── Legacy scene-grid-nav (replaced by .dev-tray) ──────
   Style retained for any old code path that still emits the element. */
.scene-grid-nav { display: none; }

/* ─── DEV TRAY ───
   Bottom-right corner of the demo-room. Closed: tiny ⚙ pill with optional
   validator-count badge. Open: row of dev controls (GRID / RESET / VALIDATE).
   Replaces three separate floating clusters: scene-grid-nav, validator-badge,
   and the old standalone validator badge. */
.demo-room > .dev-tray {
  position: absolute;
  bottom: 12px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dev-tray-toggle {
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  backdrop-filter: blur(2px);
  transition: background 0.15s, border-color 0.15s;
}
.dev-tray-toggle:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.55);
}
.dev-tray[data-state="open"] .dev-tray-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Validator count badge — small red dot in the corner of the toggle */
.dev-tray-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  background: #ef4444;
  border: 1px solid #1a0a0a;
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 8px;
}
.dev-tray-badge[data-sev="warn"] { background: #f59e0b; }
.dev-tray-badge[data-sev="ok"]   { display: none; }

.dev-tray-body {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 10px;
  backdrop-filter: blur(2px);
  animation: dev-tray-slide 0.18s ease;
}
.dev-tray-body[hidden] { display: none; }
@keyframes dev-tray-slide {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.dev-tray-hint {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 4px;
}

.scene-grid-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.scene-grid-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
}
.scene-grid-btn.on {
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.7);
  color: #7dd3fc;
}

/* ─── DEV-ONLY controls ───
   Hidden for normal players. Revealed only when dev mode is enabled
   (🛠 DEV MODE in the dev tray → body.dev-mode). */
.dev-only { display: none !important; }
body.dev-mode .dev-only { display: inline-flex !important; }

.dev-refill-btn {
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(125, 211, 252, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.55);
  color: #7dd3fc;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dev-refill-btn:hover {
  background: rgba(125, 211, 252, 0.18);
  border-color: #7dd3fc;
}

.scene-grid-hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
}

/* ─── scene validator (debug overlay) ───
   Floating badge in the top-right of #demo-room. Click to open the
   slide-out issue panel. Only visible when validator is enabled (V key
   or ⚙ VALIDATE button on the grid-nav). */
.demo-room > .validator-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 12px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.demo-room > .validator-badge:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.55);
}
.demo-room > .validator-badge[data-sev="error"] {
  background: rgba(180, 30, 30, 0.85);
  border-color: rgba(255, 80, 80, 0.85);
}
.demo-room > .validator-badge[data-sev="warn"] {
  background: rgba(180, 140, 30, 0.85);
  border-color: rgba(251, 191, 36, 0.85);
}
.demo-room > .validator-badge[data-sev="ok"] {
  background: rgba(30, 130, 60, 0.85);
  border-color: rgba(34, 197, 94, 0.85);
}
.validator-badge-icon { font-size: 14px; }
.validator-badge-count {
  font-weight: 700;
  font-size: 12px;
  min-width: 14px;
  text-align: center;
}
.validator-badge-label {
  font-size: 9px;
  opacity: 0.85;
}

/* Issue panel — slides in below the badge */
.demo-room > .validator-panel {
  position: absolute;
  top: 56px;
  right: 14px;
  width: clamp(280px, 32vw, 420px);
  max-height: calc(100% - 80px);
  overflow-y: auto;
  z-index: 7;
  background: rgba(8, 8, 10, 0.92);
  border: 1px solid var(--border);
  backdrop-filter: blur(3px);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
}
.validator-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
}
.validator-panel-title {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent);
}
.validator-panel-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 12px;
}
.validator-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.validator-panel-body {
  padding: 10px 12px;
}
.validator-panel-body .v-head {
  margin: 8px 0 4px;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.85;
}
.v-head-error { color: #fca5a5; }
.v-head-warn  { color: #fbbf24; }
.v-head-info  { color: #94a3b8; }
.validator-panel-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.validator-panel-body .v-issue {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  padding: 5px 6px;
  border-left: 2px solid transparent;
  border-radius: 2px;
  margin-bottom: 3px;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.02);
}
.validator-panel-body .v-error  { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.validator-panel-body .v-warn   { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.validator-panel-body .v-info   { border-left-color: #64748b; }
.validator-panel-body .v-sev    { color: inherit; opacity: 0.85; }
.validator-panel-body .v-msg    { color: #fff; }
.validator-panel-body .v-hint   {
  grid-column: 2;
  margin-top: 2px;
  font-size: 10px;
  color: #7dd3fc;
  opacity: 0.85;
}
.v-empty {
  text-align: center;
  padding: 16px 8px;
  color: #22c55e;
  font-size: 10px;
  letter-spacing: 0.25em;
}

/* ─── stats panel (top-left) ──────────────── */
.demo-stats {
  position: absolute;
  top: 90px;
  left: 18px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(8, 8, 10, 0.78);
  padding: 14px 16px;
  border: 1px solid var(--border);
  backdrop-filter: blur(2px);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
}

.stat-label {
  color: var(--fg-faint);
  width: 22px;
}

.bar {
  width: 140px;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 100%;
  transition: width 0.4s ease;
}

.bar-fill.bar-hp     { background: linear-gradient(90deg, #ff2e3c, #ff6b8a); }
.bar-fill.bar-energy { background: linear-gradient(90deg, #c9a84c, #f5d678); }
.bar-fill.bar-mood   { background: linear-gradient(90deg, #7dd3fc, #b3e5fc); }

.stat-val {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg);
  width: 28px;
  text-align: right;
}

/* ─── live feed (top-right) ───────────────── */
.demo-feed {
  position: absolute;
  top: 90px;
  right: 18px;
  z-index: 6;
  width: 280px;
  /* Bound to the scene band so the box ends above the bottom action strip
     + controls instead of overlapping them. */
  max-height: calc(100vh - 360px);
  overflow: hidden;
  background: rgba(8, 8, 10, 0.78);
  padding: 0 14px 12px;
  border: 1px solid var(--border);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: width 0.18s ease, padding 0.18s ease;
}
/* Scrollable message area — sits between the fixed head and the bottom
   composer so the chat input stays put while messages scroll. */
.feed-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── standalone RP chat (left-docked) ─── */
.rp-chat {
  position: absolute;
  top: 90px;
  left: 18px;
  z-index: 6;
  width: 300px;
  height: 440px;                 /* default — drag the bottom-right corner */
  min-width: 240px;
  min-height: 220px;
  max-width: 620px;
  max-height: calc(100vh - 130px);
  resize: both;                  /* drag-scalable */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(8, 8, 10, 0.82);
  border: 1px solid rgba(244, 143, 177, 0.35);
  backdrop-filter: blur(2px);
}
.ryokan-demo[data-workspace="control"] .rp-chat,
.ryokan-demo[data-workspace="inn"] .rp-chat { display: none; }
.rp-chat.is-collapsed {
  width: 34px !important;
  height: auto !important;
  max-height: none;
  resize: none;
}
/* Style the drag handle so it reads in the dark theme */
.rp-chat::-webkit-resizer { background: rgba(244, 143, 177, 0.4); }
.rp-chat.is-collapsed .rp-chat-body,
.rp-chat.is-collapsed .rp-chat-form,
.rp-chat.is-collapsed .rp-chat-title,
.rp-chat.is-collapsed .rp-scope { display: none; }

.rp-chat-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(244, 143, 177, 0.08);
}
/* CHAT | FEED tabs */
.rp-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 8px 9px;
  cursor: pointer;
}
.rp-tab.on { color: #f48fb1; border-bottom-color: #f48fb1; }
.rp-tab:hover:not(.on) { color: var(--fg); }
.rp-head-spacer { flex: 1; }
.rp-feed-unread {
  background: var(--accent-3);
  color: #1a0a0a;
  font-size: 8px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 7px;
  margin-left: 2px;
}
/* Body switching — one panel, two views */
.rp-chat[data-comms="chat"] .feed-body { display: none; }
.rp-chat[data-comms="feed"] .rp-chat-body,
.rp-chat[data-comms="feed"] .rp-chat-form,
.rp-chat[data-comms="feed"] #rp-scope { display: none; }
.rp-chat .feed-body { padding: 10px; }
.rp-scope, .rp-chat-collapse {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  cursor: pointer;
}
.rp-scope.is-all { color: #f48fb1; border-color: rgba(244,143,177,0.6); }
.rp-scope:hover, .rp-chat-collapse:hover { color: var(--fg); }
.rp-chat-collapse { padding: 2px 6px; font-size: 12px; }

.rp-chat-body {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
/* Bottom-anchor chat: few messages sit at the bottom (next to the composer)
   with empty space above; when they overflow, margin collapses and it scrolls
   normally. The standard chat-log layout. */
.rp-chat-body > :first-child { margin-top: auto; }
.rp-msg { font-family: var(--mono); }
.rp-msg-head { display: flex; align-items: baseline; gap: 6px; }
.rp-msg-name { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.rp-msg-time { font-size: 8px; color: var(--fg-faint); letter-spacing: 0.05em; }
.rp-msg-text { font-size: 12px; color: var(--fg); line-height: 1.5; margin-top: 1px; word-break: break-word; }
.rp-msg-empty { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); text-align: center; padding: 16px 8px; }

.rp-chat-form {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.ryokan-demo[data-role="viewer"] .rp-chat-form { display: none; }
.rp-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
}
.rp-chat-input::placeholder { color: var(--fg-faint); }
.rp-chat-input:focus { outline: none; border-color: #f48fb1; }
.rp-chat-form.is-disabled .rp-chat-input { opacity: 0.5; }
.rp-chat-send {
  flex: 0 0 auto;
  background: rgba(244, 143, 177, 0.14);
  border: 1px solid rgba(244, 143, 177, 0.5);
  color: #f48fb1;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0 10px;
  cursor: pointer;
}
.rp-chat-send:hover { background: rgba(244, 143, 177, 0.24); }
/* Collapsed: width shrinks to a narrow tab, feed-items hidden */
.demo-feed.is-collapsed {
  width: 32px;
  padding: 0;
  overflow: hidden;
}
.demo-feed.is-collapsed .feed-item {
  display: none;
}

/* Feed head is now a clickable toggle button */
.feed-head {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--accent);
  padding: 10px 0 8px;
  margin-bottom: 4px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.feed-head:hover { color: var(--accent-3); }
.feed-head-icon {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
}
.feed-head-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-feed.is-collapsed .feed-head-label {
  display: none;
}
.demo-feed.is-collapsed .feed-head {
  flex-direction: column;
  padding: 14px 0;
  justify-content: center;
  align-items: center;
  border-bottom: none;
}

/* Unread count badge — only visible when collapsed + has unread events */
.feed-head-unread {
  background: var(--accent-3);
  color: #1a0a0a;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  letter-spacing: 0.1em;
  min-width: 16px;
  text-align: center;
}
.demo-feed.is-collapsed .feed-head-unread {
  margin-top: 4px;
}
.demo-feed:not(.is-collapsed) .feed-head-unread {
  display: none;
}

/* ─── feed → chat: mute toggle + composer ─── */
.feed-mute {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  background: transparent;
  border: none;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  padding: 2px;
}
.feed-mute:hover, .demo-feed.is-muted .feed-mute { opacity: 1; }
.demo-feed.is-collapsed .feed-body,
.demo-feed.is-collapsed .feed-chat,
.demo-feed.is-collapsed .feed-mute { display: none; }

.feed-chat {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.ryokan-demo[data-role="viewer"] .feed-chat { display: none; }
.feed-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
  letter-spacing: 0.04em;
}
.feed-chat-input::placeholder { color: var(--fg-faint); }
.feed-chat-input:focus { outline: none; border-color: #f48fb1; }
.feed-chat.is-disabled .feed-chat-input { opacity: 0.5; }
.feed-chat-send {
  flex: 0 0 auto;
  background: rgba(244, 143, 177, 0.12);
  border: 1px solid rgba(244, 143, 177, 0.5);
  color: #f48fb1;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 0 10px;
  cursor: pointer;
}
.feed-chat-send:hover { background: rgba(244, 143, 177, 0.22); }

.feed-item {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: feed-in 0.25s ease;
}
/* Chat lines wrap (unlike truncated event lines) so messages are readable */
.feed-item.chat-event {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  background: rgba(244, 143, 177, 0.06);
  border-left: 2px solid rgba(244, 143, 177, 0.5);
  padding: 3px 6px;
  color: var(--fg);
}
.chat-name { font-weight: 700; letter-spacing: 0.08em; margin-right: 5px; }
.chat-text { color: var(--fg); }

.feed-item.fresh { color: var(--accent-3); }
.feed-item.system { color: var(--accent); }
/* Server-side scene validator auto-corrected a bad state */
.feed-item.validator-fix {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.08);
  border-left: 2px solid #f59e0b;
  padding-left: 6px;
}
/* Quest activity — accent, step progress dimmer, completion gold */
.feed-item.quest-event {
  color: var(--accent-3);
  background: rgba(255, 210, 63, 0.05);
  border-left: 2px solid rgba(255, 210, 63, 0.5);
  padding-left: 6px;
}
.feed-item.quest-event.quest-step-evt {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.03);
  border-left-color: rgba(125, 211, 252, 0.4);
}
.feed-item.quest-event.quest-complete {
  color: #fbbf24;
  font-weight: 700;
  background: rgba(251, 191, 36, 0.12);
  border-left-color: #f59e0b;
}
/* Loot drops — green for got-it, dim for inventory-full overflow */
.feed-item.loot-event {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  border-left: 2px solid #16a34a;
  padding-left: 6px;
}
.feed-item.loot-event.loot-overflow {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  border-left-color: #64748b;
  font-style: italic;
}
/* Visitor arrivals + departures — purple (story-coded, lines up with chronicles) */
.feed-item.visitor-event {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.08);
  border-left: 2px solid #a855f7;
  padding-left: 6px;
}
/* Hucow events — pink, matches the barn UI color */
.feed-item.hucow-event {
  color: #f48fb1;
  background: rgba(244, 143, 177, 0.06);
  border-left: 2px solid #f48fb1;
  padding-left: 6px;
}
/* Autopilot reasoning — small, muted gray, dim until hovered.
   Hidden entirely when .ryokan-demo doesn't have .show-autopilot-reason
   on the body (toggle this via the dev tray to debug bias tuning). */
.feed-item.autopilot-reason {
  color: rgba(255, 255, 255, 0.32);
  font-size: 9px;
  letter-spacing: 0.02em;
  font-style: italic;
  padding-left: 14px;
}
.feed-item.autopilot-reason:hover {
  color: rgba(255, 255, 255, 0.7);
}
.ryokan-demo:not(.show-autopilot-reason) .feed-item.autopilot-reason {
  display: none;
}

/* Auto-initiated joint action — soft pink, calls out the social moment */
.feed-item.auto-joint-event {
  color: #f8bbd0;
  background: rgba(244, 143, 177, 0.06);
  border-left: 2px solid #f48fb1;
  padding-left: 6px;
}

/* Show Day events — bigger, gold, the brag broadcast */
.feed-item.showday-event {
  color: #fbbf24;
  font-weight: 700;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.14), rgba(244, 143, 177, 0.06));
  border-left: 3px solid #f59e0b;
  padding-left: 8px;
  letter-spacing: 0.04em;
}

/* ─── chronicles panel (narrative entries unlocked through play) ───
   Each entry is a <details> so the player expands what they want to read.
   Title bar shows JP/EN title + source line. Body uses a slightly larger
   reading font with paragraph spacing. */
.chronicles-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chronicle-entry {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid #c084fc;   /* purple — lore / story */
}
.chronicle-entry > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.15s;
}
.chronicle-entry > summary::-webkit-details-marker { display: none; }
.chronicle-entry > summary:hover {
  background: rgba(192, 132, 252, 0.06);
}
.chronicle-entry[open] > summary {
  background: rgba(192, 132, 252, 0.08);
  border-bottom: 1px solid var(--border);
}
.chronicle-title {
  font-weight: 700;
  color: #e9d5ff;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.chronicle-source {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.chronicle-body {
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--fg);
  white-space: pre-wrap;       /* preserves the \n\n paragraph breaks */
}
.chronicles-empty {
  color: var(--fg-faint);
  font-style: italic;
  font-size: 10px;
  padding: 8px 4px;
  line-height: 1.5;
}
.chronicles-locked-hint {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--fg-faint);
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px dashed var(--border);
}

/* ─── quests panel (inside the profile sidebar) ───
   Two lists: ACCEPTED (in-progress with per-step bars) + BOARD (offerings
   with accept buttons). Compact, monospace, matches the rest of the panel. */
.quests-accepted, .quests-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quest-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.quest-card.is-accepted { border-left: 3px solid var(--accent-3); }
.quest-card.is-board    { border-left: 3px solid rgba(255, 255, 255, 0.18); }
.quest-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.quest-title {
  font-weight: 700;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.quest-yen {
  color: #fbbf24;
  font-weight: 700;
  white-space: nowrap;
}
.quest-desc {
  color: var(--fg-dim);
  margin-bottom: 6px;
  font-size: 10px;
  line-height: 1.4;
}

/* ── bounty hunt cards ── */
.bounties-board { display: flex; flex-direction: column; gap: 6px; }
.bounty-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);   /* red — a hunt is dangerous */
  background: rgba(255, 46, 60, 0.03);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.bounty-card.is-claimed { border-left-color: rgba(134, 239, 172, 0.6); opacity: 0.72; }
.bounty-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 3px;
}
.bounty-title { font-weight: 700; color: #fff; font-size: 11px; letter-spacing: 0.05em; }
.bounty-reward { color: #fbbf24; font-weight: 700; white-space: nowrap; font-size: 9.5px; }
.bounty-target {
  font-size: 8.5px; letter-spacing: 0.14em; color: var(--accent);
  font-weight: 700; margin-bottom: 3px;
}
.bounty-desc { color: var(--fg-dim); font-size: 10px; line-height: 1.4; margin-bottom: 6px; }
.bounty-actions { display: flex; justify-content: flex-end; }
.bounty-cleared {
  color: #86efac; font-weight: 700; font-size: 9px; letter-spacing: 0.14em;
  border: 1px solid rgba(134, 239, 172, 0.4); padding: 2px 8px;
}
.quest-step {
  display: grid;
  grid-template-columns: 1fr 50px;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-size: 9px;
}
.quest-step-note {
  color: var(--fg);
}
.quest-step.is-done .quest-step-note {
  color: #22c55e;
  text-decoration: line-through;
  opacity: 0.7;
}
.quest-step-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 1px;
  overflow: hidden;
}
.quest-step-bar-fill {
  height: 100%;
  background: var(--accent-3);
  transition: width 0.35s ease;
}
.quest-step.is-done .quest-step-bar-fill { background: #22c55e; }
.quest-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.quest-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.quest-btn:hover:not(:disabled) {
  border-color: var(--accent-3);
  color: var(--accent-3);
  background: rgba(255, 210, 63, 0.06);
}
.quest-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.quest-btn.is-accept {
  border-color: rgba(34, 197, 94, 0.5);
  color: #22c55e;
}
.quest-btn.is-abandon {
  border-color: rgba(255, 68, 89, 0.45);
  color: #ff8898;
}
.quests-empty {
  color: var(--fg-faint);
  font-style: italic;
  font-size: 10px;
  padding: 6px 4px;
}
.quests-status {
  padding: 4px 14px;
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 0.1em;
}

/* ─── mastery / skill progress toasts ───
   Bottom-right corner above the live feed. Stacked, fading. Each toast
   shows a one-line progress update with a small progress bar so the
   player can SEE numbers tick toward the next threshold. */
.mastery-toasts {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  width: clamp(220px, 24vw, 320px);
}

.mastery-toast {
  background: rgba(8, 8, 10, 0.94);
  border: 1px solid rgba(125, 211, 252, 0.4);
  border-left: 3px solid #7dd3fc;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.05em;
  animation: mastery-toast-in 0.25s ease, mastery-toast-out 0.4s ease 3.1s forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.mastery-toast.is-tier-up {
  border-color: #fbbf24;
  border-left-color: #f59e0b;
  background: linear-gradient(180deg, rgba(60, 40, 10, 0.94), rgba(8, 8, 10, 0.94));
  animation: mastery-toast-in 0.3s ease, mastery-tierup-pulse 0.6s ease 2x,
             mastery-toast-out 0.5s ease 4.6s forwards;
}

.mastery-toast.is-skill {
  border-left-color: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
}

.mt-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.2em;
}
.mt-actor { font-weight: 700; }
.mt-delta {
  margin-left: auto;
  color: #7dd3fc;
  font-weight: 700;
}
.mastery-toast.is-tier-up .mt-delta { color: #fbbf24; }
.mastery-toast.is-skill .mt-delta { color: #22c55e; }

.mt-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  overflow: hidden;
  margin-top: 4px;
}
.mt-bar-fill {
  height: 100%;
  background: #7dd3fc;
  transition: width 0.35s ease;
}
.mastery-toast.is-tier-up .mt-bar-fill { background: #fbbf24; }
.mastery-toast.is-skill   .mt-bar-fill { background: #22c55e; }

.mt-foot {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

@keyframes mastery-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mastery-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}
@keyframes mastery-tierup-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
  50%      { box-shadow: 0 4px 24px rgba(251, 191, 36, 0.6); }
}

/* ─── MANUAL MILKING (scrub) OVERLAY ─── */
.milk-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.milk-overlay[hidden] { display: none; }
.milk-panel {
  background: rgba(12, 12, 16, 0.98);
  border: 1px solid #f48fb1;
  box-shadow: 0 0 0 1px rgba(244, 143, 177, 0.4), 0 8px 24px rgba(0,0,0,0.7);
  font-family: var(--mono);
  color: var(--fg);
  max-width: 92vw;
  max-height: 92vh;
}
.milk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(244, 143, 177, 0.08);
}
.milk-title { font-size: 12px; letter-spacing: 0.25em; color: #f48fb1; font-weight: 700; flex: 1; }
.milk-title #milk-hucow-name { color: #fff; }
.milk-quick {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  padding: 5px 12px;
  cursor: pointer;
}
.milk-quick:hover { color: #fff; border-color: rgba(255,255,255,0.55); }
.milk-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 14px;
  padding: 3px 9px;
  cursor: pointer;
}
.milk-close:hover { background: rgba(255,255,255,0.1); }

.milk-body {
  display: flex;
  gap: 18px;
  padding: 18px;
}
.milk-scene {
  width: 448px;
  height: 448px;
  border: 1px solid #2a2a2a;
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #0a0a0e;
}
/* Two stacked layers — sheet transitions crossfade between them */
.milk-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.milk-layer.front { opacity: 1; }
.milk-scene.dragging { cursor: grabbing; border-color: #f48fb1; }
.milk-scene.letdown { animation: milk-letdown-flash 0.4s ease; }

/* ─── Suzunari tray (inside .milk-scene by default; goes fixed while held) ─── */
.milk-tool {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 72px;
  height: 72px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(106, 202, 255, 0.45);
  border-radius: 12px;
  cursor: grab;
  z-index: 20;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.milk-tool[hidden] { display: none; }
.milk-tool img {
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(106, 202, 255, 0.35));
}
.milk-tool-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
}
.milk-tool:hover { transform: scale(1.05); border-color: #6acaff; }
.milk-tool.held {
  position: fixed;
  cursor: grabbing;
  transform: scale(1.1);
  z-index: 1000;
  /* let pointermove/pointerup fire on the underlying scene through us */
  pointer-events: none;
}
.milk-tool.active-zone {
  border-color: #6acaff;
  box-shadow: 0 0 22px rgba(106, 202, 255, 0.85);
  animation: suzu-pulse 0.45s ease-in-out infinite;
}
.milk-tool.active-zone img {
  filter: drop-shadow(0 0 10px rgba(106, 202, 255, 1)) brightness(1.15);
}
@keyframes suzu-pulse {
  0%, 100% { transform: scale(1.08) rotate(-2deg); }
  50%      { transform: scale(1.14) rotate(2deg); }
}
@keyframes milk-letdown-flash {
  0% { box-shadow: 0 0 0 0 rgba(244,143,177,0); }
  40% { box-shadow: 0 0 0 8px rgba(244,143,177,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(244,143,177,0); }
}

.milk-side {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.milk-meter-row { display: flex; flex-direction: column; gap: 4px; }
.milk-meter-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.milk-meter-bar {
  height: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid #2a2a2a;
  overflow: hidden;
}
.milk-meter-fill { height: 100%; width: 0%; transition: width 0.08s linear; }
.milk-flow    { background: linear-gradient(90deg, #f48fb1, #fbbf24); }
.milk-comfort { background: linear-gradient(90deg, #22c55e, #86efac); }
.milk-stamina { background: linear-gradient(90deg, #7dd3fc, #38bdf8); }

.milk-stats {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.milk-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.milk-stat-n { font-size: 22px; font-weight: 800; color: #f48fb1; }
.milk-stat-l { font-size: 8px; letter-spacing: 0.2em; color: var(--fg-dim); text-transform: uppercase; }

.milk-hint {
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
}
.milk-done {
  margin-top: auto;
  background: rgba(244,143,177,0.16);
  border: 1px solid #f48fb1;
  color: #f48fb1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}
.milk-done:hover { background: #f48fb1; color: #1a0a0a; }

/* ─── FIRST-TIME PILOT TOUR ─── */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;   /* let clicks through except on callout */
}
.tour-overlay[hidden] { display: none; }
.tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.tour-callout {
  position: absolute;
  width: clamp(280px, 28vw, 380px);
  background: rgba(12, 12, 16, 0.98);
  border: 1px solid #f48fb1;
  box-shadow: 0 0 0 1px rgba(244, 143, 177, 0.4),
              0 6px 18px rgba(0, 0, 0, 0.65);
  font-family: var(--mono);
  color: var(--fg);
  pointer-events: auto;
  animation: tour-fade-in 0.2s ease;
}
@keyframes tour-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tour-callout-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(244, 143, 177, 0.10);
  border-bottom: 1px solid var(--border);
}
.tour-callout-step {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: #f48fb1;
  font-weight: 700;
}
.tour-callout-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.12em;
  flex: 1;
}
.tour-callout-skip {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  padding: 4px 10px;
  cursor: pointer;
}
.tour-callout-skip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.tour-callout-body {
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg);
}

.tour-callout-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.tour-dots {
  display: flex;
  gap: 5px;
}
.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s;
}
.tour-dot.is-current {
  background: #f48fb1;
}
.tour-dot.is-done {
  background: rgba(244, 143, 177, 0.45);
}
.tour-callout-next {
  background: rgba(244, 143, 177, 0.18);
  border: 1px solid #f48fb1;
  color: #f48fb1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  padding: 6px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tour-callout-next:hover {
  background: #f48fb1;
  color: #1a0a0a;
}

/* The element being introduced gets a temporary glow */
.tour-highlight {
  position: relative;
  z-index: 201;
  outline: 2px solid #f48fb1;
  outline-offset: 4px;
  border-radius: 2px;
  animation: tour-glow 1.4s ease-in-out infinite;
}
@keyframes tour-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 143, 177, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(244, 143, 177, 0.35); }
}

/* ─── help FAB + cheat-sheet overlay ───
   Persistent "?" badge bottom-left so new pilots can ALWAYS find the
   controls without having to memorize a shortcut. */
.demo-room > .help-fab {
  /* Pinned inside the demo-room (the 1fr middle row), top-left so it
     never overlaps the bottom .demo-controls strip and stays visible
     in both MAP and STAGE views. Looks paired with the validator
     badge in the top-right. Selector specificity beats .demo-room > *. */
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(8, 8, 10, 0.92);
  border: 1px solid var(--border);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.help-fab:hover {
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.7);
  transform: translateY(-1px);
}
.help-fab-key {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: rgba(125, 211, 252, 0.18);
  border: 1px solid rgba(125, 211, 252, 0.55);
  border-radius: 3px;
  font-weight: 700;
  font-size: 12px;
  color: #7dd3fc;
}
.help-fab-label { letter-spacing: 0.3em; }

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: help-fade-in 0.2s ease;
}
/* The class selector above sets display:flex, which (at equal specificity)
   beats the UA's [hidden]{display:none}. Without this override, setting
   ov.hidden = true does nothing — the overlay stays visible. */
.help-overlay[hidden] {
  display: none;
}
@keyframes help-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.help-panel {
  width: clamp(360px, 70vw, 720px);
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(12, 12, 16, 0.98);
  border: 1px solid var(--border);
  font-family: var(--mono);
  color: var(--fg);
}
.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
}
.help-title {
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--accent);
}
.help-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 14px;
}
.help-close:hover { background: rgba(255, 255, 255, 0.1); }
.help-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  padding: 20px;
}
.help-body section h4 {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent-3);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.help-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--fg);
}
.help-body kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  background: rgba(125, 211, 252, 0.12);
  border: 1px solid rgba(125, 211, 252, 0.45);
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
  color: #7dd3fc;
  text-align: center;
  margin: 0 2px;
}
@media (max-width: 720px) {
  .help-body { grid-template-columns: 1fr; }
}

@keyframes feed-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── pilot action HUD (above bottom controls) ───────── */
.pilot-hud {
  background: rgba(10, 8, 18, 0.94);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px 12px;
  font-family: var(--mono);
}
/* Live-only: hidden offline + hidden when not playing as anyone (viewer w/o follow) */
.ryokan-demo[data-mode="offline"] .pilot-hud { display: none; }
.ryokan-demo[data-role="viewer"]  .pilot-hud { display: none; }

.pilot-hud-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}
.ph-title { color: var(--accent-3); font-weight: 700; letter-spacing: 0.25em; }
.ph-title #ph-who { color: var(--fg); }

/* + MORE toggle — reveals the TRAIN + SOCIAL columns when training is needed */
.ph-more-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  padding: 3px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ph-more-toggle:hover {
  color: var(--accent-3);
  border-color: var(--accent-3);
}
.ph-more-toggle.is-open {
  background: rgba(255, 210, 63, 0.08);
  color: var(--accent-3);
  border-color: var(--accent-3);
}
.ph-progress {
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
}
.ph-progress.is-active { color: var(--accent-3); }
.ph-hint { margin-left: auto; font-size: 9px; color: var(--fg-faint); }

.pilot-hud-body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ph-col { display: flex; flex-direction: column; gap: 4px; }
.ph-col-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--fg-faint);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.ph-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-btn {
  flex: 1 0 auto;
  min-width: 92px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
}
.ph-btn:hover:not(:disabled) {
  color: var(--accent-3);
  border-color: var(--accent-3);
  background: rgba(255, 210, 63, 0.04);
}
.ph-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  position: relative;
}
/* Small number-key chip inside basic-action buttons (1-6 live shortcuts) */
.ph-key {
  display: inline-block;
  min-width: 14px;
  margin-right: 6px;
  padding: 1px 4px;
  background: rgba(125, 211, 252, 0.14);
  border: 1px solid rgba(125, 211, 252, 0.45);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
  color: #7dd3fc;
  text-align: center;
  vertical-align: 1px;
}
.ph-btn:disabled .ph-key { opacity: 0.6; }
/* Inline "why disabled" hint baked into the button label via data-lock */
.ph-btn:disabled[data-lock]::after {
  content: attr(data-lock);
  display: block;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #ff8898;
  margin-top: 2px;
  opacity: 0.85;
}
.ph-btn.is-current {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 210, 63, 0.08);
  animation: ph-active-pulse 1.6s ease-in-out infinite;
}
@keyframes ph-active-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.0); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.18); }
}
.ph-btn.ph-btn-danger {
  margin-top: 2px;
  border-color: rgba(255, 68, 89, 0.4);
  color: #ff8898;
}
.ph-btn.ph-btn-intimate {
  border-color: rgba(244, 143, 177, 0.5);
  color: #f48fb1;
}
.ph-btn.ph-btn-intimate:hover:not(:disabled) {
  background: rgba(244, 143, 177, 0.08);
  border-color: #f48fb1;
  color: #f8bbd0;
}
.ph-btn.ph-btn-duel {
  border-color: rgba(255, 68, 89, 0.5);
  color: #ff8898;
  font-weight: 700;
}
.ph-btn.ph-btn-duel:hover:not(:disabled) {
  background: rgba(255, 68, 89, 0.08);
  border-color: #ff4459;
  color: #ff4459;
}
.ph-btn.ph-btn-danger:hover:not(:disabled) {
  background: rgba(255, 68, 89, 0.08);
  border-color: #ff4459;
  color: #ff4459;
}
.ph-queue {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  min-height: 28px;
  padding: 4px 2px;
}
.ph-queue .ph-queue-item {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.ph-queue .ph-queue-empty { color: var(--fg-faint); font-style: italic; }

@media (max-width: 1100px) {
  .pilot-hud-body { grid-template-columns: repeat(2, 1fr); }
}

/* ─── controls (bottom) ───────────────────── */
.demo-controls {
  display: flex;
  gap: 24px;
  padding: 14px 24px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  z-index: 5;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── Session control group — visual hierarchy ─── */
.control-group-session {
  gap: 16px;
  flex: 1;
}
/* Auth-state cluster (left, small, muted) */
.session-cluster-state {
  display: flex;
  align-items: center;
  gap: 6px;
}
.session-cluster-state .ctl-btn {
  font-size: 9px;
  padding: 5px 10px;
  letter-spacing: 0.25em;
  opacity: 0.75;
}
.session-cluster-state .ctl-btn:hover {
  opacity: 1;
}

/* Primary actions cluster (center, prominent) */
.session-cluster-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.session-cluster-primary .ctl-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  letter-spacing: 0.14em;
}

/* Admin cluster (right, accent-coded, owner-only) */
.session-cluster-admin {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
/* Hide the admin border if no owner button is visible */
.session-cluster-admin:empty,
.session-cluster-admin:has(button[hidden]:only-child) {
  margin-left: 0;
}

.control-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--fg-faint);
  margin-right: 8px;
  text-transform: uppercase;
}

.ctl-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all 0.15s;
}

.ctl-btn:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}

.ctl-btn.on {
  background: var(--accent);
  color: #07070a;
  border-color: var(--accent);
  font-weight: 600;
}
.ctl-btn.ctl-btn-ghost {
  border-color: var(--border);
  color: var(--fg-faint);
  padding: 4px 10px;
  font-size: 10px;
}
.ctl-btn.ctl-btn-ghost:hover { color: var(--fg-dim); border-color: var(--fg-faint); }

.session-pill {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  background: rgba(125, 211, 252, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.4);
  color: #7dd3fc;
  margin-right: 6px;
}
.ryokan-demo[data-role="owner"] .session-pill {
  background: rgba(255, 210, 63, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.ryokan-demo[data-role="pilot"] .session-pill {
  background: rgba(201, 168, 76, 0.12);
  border-color: #c9a84c;
  color: #c9a84c;
}
.ryokan-demo[data-role="viewer"] .session-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--fg-faint);
}

/* ─── live-mode indicators ───────────────────────── */
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-left: 6px;
}
.mode-pill[data-mode="live"]    { border-color: #4ade80; color: #4ade80; }
.mode-pill[data-mode="offline"] { border-color: var(--accent); color: var(--accent); }

/* When live mode is active, hide local-only controls */
.ryokan-demo[data-mode="live"] .control-group[data-offline-only] {
  display: none;
}

/* Sprite placeholder for characters without art assets yet */
.sprite-placeholder {
  height: clamp(160px, 28vh, 280px);
  width: clamp(80px, 14vh, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 16px;
  background: linear-gradient(180deg, transparent, currentColor);
  opacity: 0.5;
  border-radius: 6px 6px 0 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

.sprite-placeholder .ph-text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #000;
  font-weight: 700;
}

/* ─── combat overlay ──────────────────────────────────── */
.combat-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0a0608;          /* fallback if no bg loads */
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  gap: 10px;
  font-family: var(--mono);
  overflow: hidden;
}
.combat-overlay[hidden] { display: none; }

/* Painted room backdrop — bg image set via JS, day/night-aware */
.combat-bg {
  position: absolute;
  inset: 0;
  background-image: var(--combat-bg, none);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
}
.combat-bg-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 60%, transparent 0%, rgba(0,0,0,0.55) 80%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 65%, rgba(0,0,0,0.6) 100%);
}
.ryokan-demo[data-phase="night"] .combat-bg-tint,
.ryokan-demo[data-phase="dusk"]  .combat-bg-tint {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(20,10,30,0.3) 0%, rgba(0,0,0,0.75) 80%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 65%, rgba(0,0,0,0.75) 100%);
}

/* Make all overlay content sit above the bg layers */
.combat-overlay > *:not(.combat-bg):not(.combat-bg-tint) {
  position: relative;
  z-index: 2;
}

.combat-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.combat-header .ch-title {
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--accent);
}
.combat-header .ch-round {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--fg);
}
.combat-header .ch-turn {
  color: var(--accent-3);
  font-size: 13px;
  letter-spacing: 0.18em;
}
.combat-header .ch-countdown {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.combat-header .ch-countdown.is-low { color: #ff4459; font-weight: 700; }

/* Initiative lineup */
.ch-lineup {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 14px 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.ch-lineup-chip {
  padding: 3px 10px;
  border: 1px solid;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  opacity: 0.7;
}
.ch-lineup-chip.is-current {
  opacity: 1;
  box-shadow: 0 0 10px currentColor;
  transform: scale(1.05);
}
.ch-lineup-arrow {
  color: var(--fg-faint);
  font-size: 11px;
}

/* Attack pose picker (two rows in combat overlay) */
.ch-attack-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 14px 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.ch-attack-picker[hidden] { display: none; }

/* Row 1: move slots — each shows the move name + currently-bound thumbnail */
.cap-moves {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.cap-moves::-webkit-scrollbar { height: 4px; }
.cap-moves::-webkit-scrollbar-thumb { background: rgba(255, 210, 63, 0.25); }
.cap-move-slot {
  flex: 0 0 auto;
  width: 84px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: all 0.12s;
}
.cap-move-slot:hover { border-color: var(--accent-3); }
.cap-move-slot.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(255, 210, 63, 0.45);
}
.cap-move-slot[data-tier="normal"]   { border-left: 3px solid #888; }
.cap-move-slot[data-tier="special"]  { border-left: 3px solid var(--accent-2); }
.cap-move-slot[data-tier="ultimate"] { border-left: 3px solid var(--accent); }
.cap-move-thumb {
  width: 100%;
  height: 50px;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cap-move-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.cap-move-thumb.is-auto {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--fg-faint);
}
.cap-move-name {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  padding: 3px 4px;
  text-align: center;
  border-top: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cap-move-slot.is-selected .cap-move-name {
  color: var(--accent);
  font-weight: 700;
}

/* Row 2: variant picker — tiles to bind to the selected slot */
.cap-variants-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cap-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  white-space: nowrap;
  text-transform: uppercase;
}
.cap-label #cap-selected {
  color: var(--accent);
  font-weight: 700;
}
.cap-grid {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  padding-bottom: 2px;
}
.cap-grid::-webkit-scrollbar { height: 4px; }
.cap-grid::-webkit-scrollbar-thumb { background: rgba(255, 210, 63, 0.25); }
.cap-tile {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cap-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.cap-tile.cap-auto {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--accent-3);
  background: rgba(255, 210, 63, 0.06);
  line-height: 1.1;
  text-align: center;
  flex-direction: column;
  overflow: hidden;
  word-break: keep-all;
  padding: 4px 2px;
}
.cap-tile.cap-auto .cap-sub {
  font-size: 7px;
  letter-spacing: 0.05em;
  color: var(--fg-faint);
  display: block;
  margin-top: 1px;
}
.cap-tile:hover { border-color: var(--accent-3); }
.cap-tile.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.4);
}
/* Off-tier dim — animation doesn't match the selected move's tier (still
   clickable; this is a soft hint, not a hard restriction) */
.cap-tile.is-off-tier {
  opacity: 0.32;
  filter: grayscale(40%);
}
.cap-tile.is-off-tier:hover {
  opacity: 0.65;
  filter: grayscale(0%);
}

/* Named tiles — taller to fit the name label, color-coded by animation tier */
.cap-tile.cap-tile-named {
  flex-direction: column;
  width: 70px;
  height: 78px;
  padding: 0;
}
.cap-tile.cap-tile-named img {
  width: 100%;
  height: 56px;
}
.cap-tile-name {
  display: block;
  width: 100%;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 2px 1px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--border);
}
.cap-tile-named[data-tier="basic"]  { border-color: rgba(255,255,255,0.25); }
.cap-tile-named[data-tier="basic"]  .cap-tile-name { color: #ccc; }
.cap-tile-named[data-tier="red"]    { border-color: rgba(216,68,60,0.6); }
.cap-tile-named[data-tier="red"]    .cap-tile-name { color: #ff8870; }
.cap-tile-named[data-tier="green"]  { border-color: rgba(106,165,90,0.6); }
.cap-tile-named[data-tier="green"]  .cap-tile-name { color: #b8e898; }
.cap-tile-named[data-tier="strong"] { border-color: rgba(244,143,177,0.6); }
.cap-tile-named[data-tier="strong"] .cap-tile-name { color: #f8bbd0; }
.cap-tile-named[data-tier="ult"]    { border-color: var(--accent); }
.cap-tile-named[data-tier="ult"]    .cap-tile-name { color: var(--accent); text-shadow: 0 0 6px rgba(255,210,63,0.5); }
.cap-tile-named.is-current { border-width: 2px; }

/* Move announce banner — fires on each fresh log entry with a move name */
.ch-announce {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  pointer-events: none;
  font-family: var(--display, var(--mono));
  font-size: 42px;
  letter-spacing: 0.25em;
  font-weight: 900;
  text-shadow: 0 2px 0 #000, 0 0 30px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  animation: announce-in 0.35s cubic-bezier(.3, 1.4, .4, 1) forwards;
}
.ch-announce[hidden] { display: none; }
.ch-announce.is-fading { animation: announce-out 0.45s ease-in forwards; }
.ch-announce .ann-actor { display: block; font-size: 18px; letter-spacing: 0.4em; color: var(--fg-dim); }
.ch-announce .ann-move  { display: block; }
.ch-announce.is-ally  .ann-move { color: var(--accent-3); text-shadow: 0 0 22px rgba(255, 210, 63, 0.55), 0 2px 0 #000; }
.ch-announce.is-ghost .ann-move { color: #ff6b8a; text-shadow: 0 0 22px rgba(255, 68, 89, 0.6), 0 2px 0 #000; }
.ch-announce.is-crit  .ann-move::after { content: " !"; color: #fff; }
@keyframes announce-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
}
@keyframes announce-out {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

/* Cooldown state on move buttons — visual feedback while a strike animates */
.move-btn.on-cooldown {
  opacity: 0.45;
  cursor: wait;
  pointer-events: none;
}
.move-btn.on-cooldown::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) var(--cd-pct, 0%), transparent var(--cd-pct, 0%));
  pointer-events: none;
}
.move-btn { position: relative; }

/* "YOUR TURN" prompt — pulses when the followed character is up */
.ch-your-turn {
  margin: 6px 14px 0;
  padding: 10px 14px;
  background: rgba(255, 210, 63, 0.12);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  animation: your-turn-pulse 1.1s ease-in-out infinite;
}
.ch-your-turn[hidden] { display: none; }
.ch-your-turn .cyt-arrow {
  font-size: 16px;
  color: var(--accent-3);
}
.ch-your-turn .cyt-text {
  flex: 1;
  font-size: 13px;
  text-transform: uppercase;
}
.ch-your-turn .cyt-text #cyt-name {
  color: #fff;
  font-weight: 900;
}
.ch-your-turn .cyt-hint {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  font-weight: 400;
  text-transform: none;
}
@keyframes your-turn-pulse {
  0%, 100% { box-shadow: 0 0 0   rgba(255, 210, 63, 0); }
  50%      { box-shadow: 0 0 24px rgba(255, 210, 63, 0.55); }
}

/* Synergy hint banner */
.ch-synergy {
  margin: 6px 14px 0;
  padding: 6px 12px;
  background: rgba(255, 210, 63, 0.08);
  border-left: 3px solid var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent-3);
  animation: synergy-pulse 1.6s ease-in-out infinite;
}
@keyframes synergy-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* Fighter portrait + attack strike */
.fighter-portrait {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  margin-bottom: 4px;
  overflow: hidden;
}
.fighter-sprite {
  max-width: 92px;
  max-height: 92px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform 0.15s ease;
}
.fighter-card.is-striking {
  animation: strike-shake 1.2s cubic-bezier(.36,.07,.19,.97);
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(255, 210, 63, 0.55);
}
.fighter-card.is-striking .fighter-sprite {
  transform: scale(1.18);
}
.fighter-card.is-ghost.is-striking {
  border-color: #ff4459;
  box-shadow: 0 0 22px rgba(255, 68, 89, 0.55);
}
@keyframes strike-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* Victory / defeat banner */
.combat-banner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.92) 80%);
  z-index: 50;
  animation: banner-in 0.45s ease-out, banner-out 0.55s ease-in 2.6s forwards;
}
.combat-banner .banner-text {
  font-family: var(--display, var(--mono));
  font-size: 64px;
  letter-spacing: 0.35em;
  font-weight: 900;
}
.combat-banner .banner-sub {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
}
.combat-banner.banner-won  .banner-text { color: var(--accent);  text-shadow: 0 0 30px rgba(255, 210, 63, 0.7); }
.combat-banner.banner-lost .banner-text { color: #ff4459;        text-shadow: 0 0 30px rgba(255, 68, 89, 0.7); }
.combat-banner.banner-fled .banner-text { color: #b3e5fc;        text-shadow: 0 0 30px rgba(125, 211, 252, 0.6); }
@keyframes banner-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes banner-out {
  to { opacity: 0; }
}

.combat-fighters {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.fighter-card {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── In-scene battle stage ─────────────────────────────── */
.combat-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: end;
  padding: 16px 32px;
  min-height: 320px;
}
.stage-allies {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 24px;
  grid-column: 1;
}
.stage-ghost {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  grid-column: 3;
}

/* A single fighter in the scene — bigger sprite, HP/EN bar above, name below */
.stage-fighter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.6));
  transition: transform 0.2s ease;
}
.stage-fighter:hover { transform: translateY(-2px); }
.stage-fighter.is-turn {
  animation: stage-bob 1.1s ease-in-out infinite;
}
@keyframes stage-bob {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-6px); }
}
.stage-fighter.is-striking {
  animation: stage-strike 1.2s cubic-bezier(.36, .07, .19, .97);
}
@keyframes stage-strike {
  0%, 100% { transform: translateX(0) scale(1); }
  20%      { transform: translateX(-8px) scale(1.06); }
  40%      { transform: translateX(10px) scale(1.06); }
  60%      { transform: translateX(-6px) scale(1.04); }
  80%      { transform: translateX(6px)  scale(1.04); }
}
.stage-fighter.critical { animation: critical-pulse 1.4s ease-in-out infinite; }
.stage-fighter.is-target .stage-target-marker {
  opacity: 1;
}

/* HP + EN bars floating above the sprite */
.stage-bars {
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.stage-bar-row {
  display: grid;
  grid-template-columns: 18px 1fr 36px;
  gap: 4px;
  align-items: center;
}
.stage-bar-lab { color: rgba(255,255,255,0.7); }
.stage-bar-track {
  height: 5px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
}
.stage-bar-fill {
  height: 100%;
  transition: width 0.4s ease;
}
.stage-bar-fill.hp { background: linear-gradient(90deg, #ff2e3c, #ff6b8a); }
.stage-bar-fill.en { background: linear-gradient(90deg, #c9a84c, #f5d678); }
.stage-bar-val {
  text-align: right;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
  font-size: 9px;
}

/* ─── Phase 1 status chips (burn/guard/focus/stagger) ─── */
.stage-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
  min-height: 16px;
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px 1px 4px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  animation: chip-pop 0.35s ease;
}
.stat-chip .stat-glyph { font-size: 11px; line-height: 1; }
.stat-chip .stat-stack {
  color: #ffe27a;
  font-weight: 700;
}
.stat-chip .stat-turns {
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
}
.stat-chip.stat-burn    { border-color: #ff7340; box-shadow: 0 0 6px rgba(255, 92, 32, 0.55); background: rgba(80, 18, 0, 0.7); }
.stat-chip.stat-guard   { border-color: #6acaff; box-shadow: 0 0 6px rgba(80, 180, 255, 0.55); background: rgba(8, 30, 60, 0.7); }
.stat-chip.stat-focus   { border-color: #ffd86b; box-shadow: 0 0 8px rgba(255, 215, 90, 0.65); background: rgba(60, 44, 0, 0.7); }
.stat-chip.stat-stagger { border-color: #d28cff; box-shadow: 0 0 6px rgba(190, 110, 255, 0.55); background: rgba(40, 8, 60, 0.7); }
.stat-chip.stat-fatigue  { border-color: #9aa77c; box-shadow: 0 0 6px rgba(150, 165, 120, 0.45); background: rgba(28, 32, 20, 0.72); }
.stat-chip.stat-weakness { border-color: #e06a9c; box-shadow: 0 0 7px rgba(224, 106, 156, 0.55); background: rgba(56, 10, 34, 0.72); }
.stat-chip.stat-regen    { border-color: #86efac; box-shadow: 0 0 7px rgba(134, 239, 172, 0.55); background: rgba(10, 46, 26, 0.72); }
.stat-chip.stat-burn .stat-glyph     { animation: glyph-burn 0.9s ease-in-out infinite; }
.stat-chip.stat-focus .stat-glyph    { animation: glyph-focus 1.2s ease-in-out infinite; }
.stat-chip.stat-stagger .stat-glyph  { animation: glyph-stagger 0.6s ease-in-out infinite; }
.stat-chip.stat-fatigue .stat-glyph  { animation: glyph-fatigue 1.8s ease-in-out infinite; }
.stat-chip.stat-weakness .stat-glyph { animation: glyph-weakness 1.1s ease-in-out infinite; }
.stat-chip.stat-regen .stat-glyph    { animation: glyph-regen 1.3s ease-in-out infinite; }

@keyframes chip-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes glyph-burn {
  0%, 100% { filter: drop-shadow(0 0 2px #ff5a1f); transform: translateY(0); }
  50%      { filter: drop-shadow(0 0 6px #ffb957); transform: translateY(-1px); }
}
@keyframes glyph-focus {
  0%, 100% { filter: drop-shadow(0 0 2px #ffd86b); }
  50%      { filter: drop-shadow(0 0 8px #fff1a8); }
}
@keyframes glyph-stagger {
  0%, 100% { transform: rotate(-10deg); }
  50%      { transform: rotate(10deg); }
}
@keyframes glyph-fatigue {
  0%, 100% { transform: translateY(0);    opacity: 0.75; }
  50%      { transform: translateY(1px);  opacity: 1; }
}
@keyframes glyph-weakness {
  0%, 100% { filter: drop-shadow(0 0 2px #e06a9c); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 6px #ff9ec2); transform: scale(1.12); }
}
@keyframes glyph-regen {
  0%, 100% { filter: drop-shadow(0 0 2px #86efac); transform: translateY(0); }
  50%      { filter: drop-shadow(0 0 6px #bbf7d0); transform: translateY(-1px); }
}

/* Sprite — bigger than the old fighter-card portrait */
.stage-sprite {
  width: 180px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.stage-sprite img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.stage-fighter.is-ghost .stage-sprite {
  width: 240px;
  height: 280px;
}

/* Name plate below the sprite */
.stage-nameplate {
  padding: 3px 12px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-shadow: 0 1px 0 #000;
}

/* Target marker — floats over the targeted sprite */
.stage-target-marker {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #07070a;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  font-weight: 800;
  padding: 2px 10px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  animation: target-pulse 1.2s ease-in-out infinite;
}

.stage-fighter.critical .stage-nameplate::after { content: " ⚠"; color: #ff4459; }

/* Retreat button moved to the header (top-right) */
.btn-retreat-top {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  padding: 5px 14px;
  cursor: pointer;
  font-weight: 700;
}
.btn-retreat-top:hover { background: var(--accent); color: #07070a; }

/* Combat log → floating right column, less prominent */
.combat-overlay .combat-log {
  position: absolute;
  top: 110px;
  right: 24px;
  width: 260px;
  max-height: calc(100vh - 280px);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  overflow-y: auto;
  z-index: 3;
}

/* Move palette docks at bottom with a subtle backdrop */
.combat-overlay .combat-moves {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: auto;
}

/* Attack-bind drawer */
.ch-attack-drawer {
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ch-attack-drawer > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-dim);
  user-select: none;
}
.ch-attack-drawer > summary::-webkit-details-marker { display: none; }
.ch-attack-drawer > summary::before {
  content: "▶ ";
  color: var(--fg-faint);
  font-size: 9px;
}
.ch-attack-drawer[open] > summary::before { content: "▼ "; }
.ch-attack-drawer .ch-attack-picker {
  border-bottom: none;
}
.fighter-card.is-turn {
  border-color: var(--accent-3);
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.18);
}
.fighter-card.is-ghost {
  border-color: #ff4459;
}
.fighter-name {
  font-size: 14px;
  letter-spacing: 0.15em;
  font-weight: 700;
}
.fighter-arch {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.fighter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
}
.fighter-bar .lab { width: 24px; }
.fighter-bar .bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); position: relative; overflow: hidden; }
.fighter-bar .bar-fill { height: 100%; transition: width 0.35s ease; }
.fighter-bar .val { width: 36px; text-align: right; color: var(--fg); }

.fighter-bar.hp .bar-fill     { background: linear-gradient(90deg, #ff2e3c, #ff6b8a); }
.fighter-bar.en .bar-fill     { background: linear-gradient(90deg, #c9a84c, #f5d678); }
/* Targeted marker — appears on the currently-targeted fighter card */
.fighter-card .target-marker {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #07070a;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  font-weight: 800;
  padding: 2px 10px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  white-space: nowrap;
}
.fighter-card.is-target .target-marker {
  opacity: 1;
  animation: target-pulse 1.2s ease-in-out infinite;
}
.fighter-card.is-target {
  box-shadow: 0 0 20px rgba(255, 210, 63, 0.5), inset 0 0 0 2px var(--accent);
}
.fighter-card[data-fighter] { cursor: pointer; }
@keyframes target-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 63, 0.0); }
  50%      { box-shadow: 0 0 14px rgba(255, 210, 63, 0.7); }
}

.fighter-card.critical { animation: critical-pulse 1.4s ease-in-out infinite; }
.fighter-card.critical .fighter-name::after { content: " ⚠"; color: #ff4459; }
@keyframes critical-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 89, 0); }
  50%      { box-shadow: 0 0 14px 2px rgba(255, 68, 89, 0.5); }
}

.combat-moves {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.move-btn {
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.15s;
}
.move-btn:hover:not(:disabled) {
  border-color: var(--accent-3);
  background: rgba(255, 210, 63, 0.06);
}
.move-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.move-btn .mv-name { font-weight: 600; letter-spacing: 0.05em; }
.move-btn .mv-stats {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
.move-btn .mv-tier {
  position: absolute;
  font-size: 8px;
  letter-spacing: 0.25em;
  color: var(--fg-faint);
}
.move-btn[data-tier="normal"]   { border-left: 3px solid #888; }
.move-btn[data-tier="special"]  { border-left: 3px solid var(--accent-2); }
.move-btn[data-tier="ultimate"] { border-left: 3px solid var(--accent); }

.combat-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.combat-actions button {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 8px 14px;
  cursor: pointer;
  text-transform: uppercase;
}
.combat-actions button:hover { background: var(--accent); color: #07070a; }
.combat-actions .ch-status {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
  margin-left: auto;
}

.combat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.combat-log .log-line { animation: feed-in 0.25s ease; }
.combat-log .log-line.fresh { color: var(--accent-3); }
.combat-log .log-line.ghost { color: #ff8898; }
.combat-log .log-line.system { color: var(--accent); }

/* ─── combat: wind-up + damage floats + critical banner ─── */
.move-btn.wind-up {
  animation: wind-up 0.38s ease-out;
  background: rgba(255, 210, 63, 0.18);
  border-color: var(--accent-3);
  box-shadow: 0 0 18px rgba(255, 210, 63, 0.35);
}
@keyframes wind-up {
  0%   { transform: scale(1);    box-shadow: 0 0 0   rgba(255, 210, 63, 0.0); }
  40%  { transform: scale(1.06); box-shadow: 0 0 24px rgba(255, 210, 63, 0.55); }
  100% { transform: scale(1);    box-shadow: 0 0 0   rgba(255, 210, 63, 0.0); }
}

.fighter-card { position: relative; }   /* anchor floats */
.dmg-float {
  position: absolute;
  left: 50%;
  top: 30%;
  pointer-events: none;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(0,0,0,0.85);
  animation: dmg-rise 2.2s cubic-bezier(.2,.7,.3,1) forwards;
  z-index: 5;
}
.dmg-float.dmg-hit  { color: #ffefb0; }
.dmg-float.dmg-crit { color: #ff6b8a; font-size: 38px; text-shadow: 0 1px 0 #000, 0 0 18px #ff2e3c, 0 0 6px #fff; }
.dmg-float.dmg-miss { color: #9aa6b2; font-size: 18px; letter-spacing: 0.3em; }
.dmg-float.dmg-ko   { color: #ff2e3c; font-size: 30px; letter-spacing: 0.25em; }
/* Phase 1: focused crit (gold) + guarded (cyan, smaller) + DOT tick */
.dmg-float.dmg-focused {
  color: #ffd86b;
  font-size: 42px;
  text-shadow: 0 1px 0 #000, 0 0 24px #ffb53a, 0 0 10px #fff;
  animation: dmg-rise-focused 2.4s cubic-bezier(.2,.7,.3,1) forwards;
}
.dmg-float.dmg-guarded { color: #6acaff; font-size: 22px; }
.dmg-float.dmg-burn    {
  color: #ff7340; font-size: 22px;
  text-shadow: 0 1px 0 #000, 0 0 14px #ff5a1f;
}
.dmg-float .dmg-tag {
  display: block;
  font-size: 0.46em;
  letter-spacing: 0.32em;
  opacity: 0.92;
  margin-bottom: 1px;
}
@keyframes dmg-rise {
  0%   { transform: translate(-50%, 0)    scale(0.6); opacity: 0; }
  15%  { transform: translate(-50%, -8px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -56px) scale(1);  opacity: 0; }
}
@keyframes dmg-rise-focused {
  0%   { transform: translate(-50%, 0)    scale(0.4) rotate(-4deg); opacity: 0; }
  12%  { transform: translate(-50%, -6px) scale(1.35) rotate(2deg); opacity: 1; }
  25%  { transform: translate(-50%, -14px) scale(1.1)  rotate(-1deg); opacity: 1; }
  100% { transform: translate(-50%, -72px) scale(1.05); opacity: 0; }
}

/* Screen shake — applied to .combat-overlay briefly on crit / break / DOT */
.combat-overlay.shake-light { animation: cmb-shake-light 0.32s ease; }
.combat-overlay.shake-heavy { animation: cmb-shake-heavy 0.55s cubic-bezier(.36,.07,.19,.97); }
@keyframes cmb-shake-light {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, 2px); }
  50%      { transform: translate(2px, -2px); }
  75%      { transform: translate(-2px, 1px); }
}
@keyframes cmb-shake-heavy {
  0%, 100% { transform: translate(0, 0); }
  10%      { transform: translate(-6px, 3px) rotate(-0.5deg); }
  25%      { transform: translate(7px, -4px) rotate(0.6deg); }
  40%      { transform: translate(-5px, 5px) rotate(-0.4deg); }
  60%      { transform: translate(6px, -3px) rotate(0.5deg); }
  80%      { transform: translate(-3px, 2px); }
}

/* Hit flash — quick red tint on the sprite when struck */
.stage-fighter.is-hit .fighter-sprite { animation: sprite-hit-flash 0.34s ease; }
@keyframes sprite-hit-flash {
  0%   { filter: brightness(1) saturate(1); }
  35%  { filter: brightness(1.8) saturate(0) drop-shadow(0 0 10px #ff2e3c); }
  100% { filter: brightness(1) saturate(1); }
}

/* ─── character profile editor ─── */
.ctl-btn.ctl-btn-profile {
  background: rgba(201, 168, 76, 0.08);
  border-color: rgba(201, 168, 76, 0.6);
  color: #c9a84c;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.ctl-btn.ctl-btn-profile:hover { background: rgba(201, 168, 76, 0.18); color: #e6d099; }
.ryokan-demo[data-role="viewer"] .ctl-btn-profile { display: none; }

/* MEI follow button — owner-only (an owner can control any character). */
.ctl-btn-mei { display: none; }
.ryokan-demo[data-role="owner"] .ctl-btn-mei { display: inline-flex; }

.profile-panel {
  position: fixed;
  top: 70px;
  right: 24px;
  width: 480px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  z-index: 65;
  background: rgba(10, 8, 18, 0.97);
  border: 1px solid rgba(201, 168, 76, 0.6);
  box-shadow: 0 0 40px rgba(201, 168, 76, 0.18), 0 8px 32px rgba(0,0,0,0.6);
  padding: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
}
.profile-yen-tag {
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accent);
  background: rgba(255, 210, 63, 0.08);
  border: 1px solid var(--accent);
  padding: 2px 8px;
  font-size: 10px;
  margin-right: 6px;
}

/* Expandable collapsibles (native <details>) */
.profile-collapsible {
  border-bottom: 1px solid var(--border);
}
.profile-collapsible:last-of-type { border-bottom: none; }
.profile-collapsible > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--accent-3);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-collapsible > summary::-webkit-details-marker { display: none; }
.profile-collapsible > summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--fg-faint);
  transition: transform 0.15s;
}
.profile-collapsible[open] > summary::before {
  transform: rotate(90deg);
}
.profile-collapsible > summary:hover { background: rgba(255, 210, 63, 0.04); }
.profile-collapsible[open] > summary {
  background: rgba(201, 168, 76, 0.07);
  color: #e6d099;
  border-bottom: 1px solid var(--border);
}
.profile-collapsible > summary #pose-current {
  flex: 1;
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 0.1em;
  font-weight: 400;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}
.profile-collapsible > summary #inv-summary {
  color: var(--fg-dim);
  font-weight: 400;
}
.profile-collapsible > summary .pose-auto-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--accent-3);
  color: var(--accent-3);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  padding: 3px 8px;
  cursor: pointer;
}
.profile-collapsible > summary .pose-auto-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.profile-collapsible > summary .pose-auto-btn:hover:not(:disabled) {
  background: rgba(255, 210, 63, 0.08);
}
.profile-panel[hidden] { display: none; }
.profile-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(201, 168, 76, 0.05);
}
.profile-panel-title {
  color: #c9a84c;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.profile-body { padding: 0 0 0; }
.profile-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.profile-section:last-child { border-bottom: none; }
.profile-section h4 {
  margin: 0 0 10px;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--accent-3);
  text-transform: uppercase;
}

/* Skills strip — combat / focus / endurance with tier badge */
.profile-skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-skill-row {
  display: grid;
  grid-template-columns: 80px 1fr 38px 78px;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
}
.profile-skill-label {
  letter-spacing: 0.2em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.profile-skill-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.profile-skill-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e 0%, #84cc16 100%);
  transition: width 0.4s ease;
}
.profile-skill-row[data-tier="1"] .profile-skill-fill { background: linear-gradient(90deg, #7dd3fc 0%, #38bdf8 100%); }
.profile-skill-row[data-tier="2"] .profile-skill-fill { background: linear-gradient(90deg, #c084fc 0%, #a855f7 100%); }
.profile-skill-row[data-tier="3"] .profile-skill-fill { background: linear-gradient(90deg, #fb923c 0%, #f97316 100%); }
.profile-skill-row[data-tier="4"] .profile-skill-fill { background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%); }
.profile-skill-val {
  text-align: right;
  font-weight: 700;
  color: #fff;
}
.profile-skill-tier {
  padding: 2px 6px;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 2px;
  text-transform: uppercase;
}
.profile-skill-row[data-tier="0"] .profile-skill-tier { color: #94a3b8; }
.profile-skill-row[data-tier="1"] .profile-skill-tier { color: #7dd3fc; }
.profile-skill-row[data-tier="2"] .profile-skill-tier { color: #c084fc; }
.profile-skill-row[data-tier="3"] .profile-skill-tier { color: #fb923c; }
.profile-skill-row[data-tier="4"] .profile-skill-tier { color: #fbbf24; background: rgba(251, 191, 36, 0.08); }

.profile-slider-row {
  display: grid;
  grid-template-columns: 60px 1fr 28px 100px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
/* Preset bias buttons — one click sets sliders + traits coherently */
.profile-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.profile-preset {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 6px 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-align: center;
}
.profile-preset:hover {
  background: rgba(255, 210, 63, 0.08);
  color: var(--accent-3);
  border-color: var(--accent-3);
}
.profile-preset[data-preset="combat"]:hover { color: #ff8898; border-color: #ff4459; background: rgba(255, 68, 89, 0.08); }
.profile-preset[data-preset="bond"]:hover   { color: #f48fb1; border-color: #f48fb1; background: rgba(244, 143, 177, 0.08); }
.profile-preset[data-preset="tender"]:hover { color: #c9a84c; border-color: #c9a84c; background: rgba(201, 168, 76, 0.08); }
.profile-preset.is-applied {
  color: var(--accent-3);
  border-color: var(--accent-3);
  background: rgba(255, 210, 63, 0.12);
  font-weight: 700;
}

/* The new multiplier preview column — shows what the slider value DOES */
.profile-mult {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.profile-slider-row label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.profile-slider-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.08);
  outline: none;
  cursor: pointer;
}
.profile-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-3);
  border: 1px solid var(--accent);
  cursor: pointer;
}
.profile-slider-row input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-3);
  border: 1px solid var(--accent);
  cursor: pointer;
}
.profile-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--accent-3);
  font-weight: 700;
}

.profile-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-trait-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.12s;
}
.profile-trait-btn:hover { color: var(--fg); border-color: var(--fg-dim); }
.profile-trait-btn.is-active {
  background: rgba(201, 168, 76, 0.14);
  border-color: #c9a84c;
  color: #e6d099;
}

.profile-select {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
}
.profile-note {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
  resize: vertical;
  letter-spacing: 0.05em;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.profile-save-btn {
  background: var(--accent);
  color: #07070a;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  font-weight: 700;
  padding: 8px 18px;
  cursor: pointer;
}
.profile-save-btn:hover { background: #fff3a0; }
.profile-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.profile-status {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
.profile-status.is-ok    { color: #7dd3fc; }
.profile-status.is-error { color: #ff4459; }

/* Animation-bind help text (in character panel) */
.binds-help {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  line-height: 1.45;
}

/* Move mastery list */
.moves-list { display: flex; flex-direction: column; gap: 4px; }
.move-row {
  display: grid;
  grid-template-columns: 1fr 36px 60px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  font-size: 10px;
}
.move-row[data-tier="normal"]   { border-left: 3px solid #888; }
.move-row[data-tier="special"]  { border-left: 3px solid var(--accent-2); }
.move-row[data-tier="ultimate"] { border-left: 3px solid var(--accent); }
.move-row-name {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.move-row-stats {
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 0.06em;
  font-family: var(--mono);
  grid-column: 1 / -1;
  margin-top: 2px;
}
.move-mastery-tier {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  padding: 2px 0;
  border: 1px solid;
}
.move-mastery-tier[data-mastery="0"] { color: var(--fg-faint); border-color: var(--border); }
.move-mastery-tier[data-mastery="1"] { color: #b3e5fc;        border-color: #b3e5fc; background: rgba(125,211,252,0.08); }
.move-mastery-tier[data-mastery="2"] { color: var(--accent-3); border-color: var(--accent-3); background: rgba(255,210,63,0.1); }
.move-mastery-tier[data-mastery="3"] { color: #ff8898;        border-color: #ff8898; background: rgba(255,68,89,0.1); text-shadow: 0 0 8px rgba(255,68,89,0.6); }
.move-mastery-progress {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fg-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Trust list (intimate_partners) */
.trust-note {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  margin-bottom: 8px;
  line-height: 1.4;
  font-style: italic;
}
.trust-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trust-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(244, 143, 177, 0.06);
  border: 1px solid rgba(244, 143, 177, 0.3);
}
.trust-row-portrait {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
}
.trust-row-portrait img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.trust-row-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.trust-row-sub {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  display: block;
  margin-top: 2px;
  font-weight: 400;
}
.trust-revoke-btn {
  background: transparent;
  border: 1px solid rgba(255, 68, 89, 0.5);
  color: #ff8898;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  padding: 4px 10px;
  cursor: pointer;
}
.trust-revoke-btn:hover:not(:disabled) {
  background: rgba(255, 68, 89, 0.1);
  border-color: #ff4459;
  color: #ff4459;
}
.trust-revoke-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.trust-empty {
  font-size: 10px;
  color: var(--fg-faint);
  font-style: italic;
  padding: 8px 0;
}
.trust-status {
  margin-top: 8px;
  min-height: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
.trust-status.is-ok    { color: #b8e898; }
.trust-status.is-error { color: #ff8898; }

/* Trust + block sub-headers */
.trust-subhead {
  margin: 14px 0 6px;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--fg-faint);
  font-weight: 700;
  text-transform: uppercase;
}
.trust-subhead:first-of-type { margin-top: 8px; }

/* Block list rows — like trust rows but red-tinted */
.block-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.block-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255, 68, 89, 0.06);
  border: 1px solid rgba(255, 68, 89, 0.3);
}
.block-row .trust-row-portrait { filter: grayscale(80%); }
.block-row .trust-row-name { color: #ff8898 !important; }
.block-empty {
  font-size: 10px;
  color: var(--fg-faint);
  font-style: italic;
  padding: 4px 0;
}
.block-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.block-add-select {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 6px;
}
.block-add-btn {
  /* Inherits trust-revoke-btn red styling */
}

/* Inbox — pending pair requests */
.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inbox-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(125, 211, 252, 0.06);
  border: 1px solid rgba(125, 211, 252, 0.35);
}
.inbox-row.is-intimate {
  background: rgba(244, 143, 177, 0.08);
  border-color: rgba(244, 143, 177, 0.45);
}
.inbox-row.is-duel {
  background: rgba(255, 68, 89, 0.08);
  border-color: rgba(255, 68, 89, 0.5);
  animation: duel-pulse 1.6s ease-in-out infinite;
}
@keyframes duel-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 68, 89, 0); }
  50%      { box-shadow: 0 0 12px rgba(255, 68, 89, 0.45); }
}
.inbox-row-action.is-duel { color: #ff4459; font-weight: 700; }
.inbox-row-portrait {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
}
.inbox-row-portrait img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.inbox-row-body {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.05em;
}
.inbox-row-from {
  font-weight: 700;
  letter-spacing: 0.12em;
}
.inbox-row-action {
  display: block;
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 0.18em;
  margin-top: 2px;
  text-transform: uppercase;
}
.inbox-row-action.is-intimate { color: #f48fb1; }
.inbox-row-timer {
  font-size: 9px;
  color: var(--fg-faint);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.inbox-accept-btn, .inbox-decline-btn {
  background: transparent;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  padding: 4px 10px;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
}
.inbox-accept-btn {
  border-color: rgba(125, 211, 252, 0.6);
  color: #7dd3fc;
}
.inbox-accept-btn:hover:not(:disabled) {
  background: rgba(125, 211, 252, 0.1);
  border-color: #7dd3fc;
}
.inbox-decline-btn {
  border-color: rgba(255, 68, 89, 0.5);
  color: #ff8898;
}
.inbox-decline-btn:hover:not(:disabled) {
  background: rgba(255, 68, 89, 0.08);
  border-color: #ff4459;
  color: #ff4459;
}
.inbox-empty {
  font-size: 10px;
  color: var(--fg-faint);
  font-style: italic;
  padding: 8px 0;
}
.inbox-status {
  margin-top: 6px;
  min-height: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
.inbox-status.is-ok    { color: #b8e898; }
.inbox-status.is-error { color: #ff8898; }

/* ─── pose picker (thumbnail grid) ─── */
.ctl-btn.ctl-btn-pose {
  background: rgba(244, 143, 177, 0.08);
  border-color: rgba(244, 143, 177, 0.6);
  color: #f48fb1;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.ctl-btn.ctl-btn-pose:hover { background: rgba(244, 143, 177, 0.18); color: #f8bbd0; }
.ryokan-demo[data-role="viewer"] .ctl-btn-pose { display: none; }

.pose-panel {
  position: fixed;
  top: 90px;
  right: 24px;
  width: 480px;
  max-height: 75vh;
  overflow-y: auto;
  z-index: 65;
  background: rgba(10, 8, 18, 0.97);
  border: 1px solid rgba(244, 143, 177, 0.6);
  box-shadow: 0 0 40px rgba(244, 143, 177, 0.18), 0 8px 32px rgba(0,0,0,0.6);
  padding: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
}
.pose-panel[hidden] { display: none; }
.pose-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(244, 143, 177, 0.05);
}
.pose-panel-title {
  color: #f48fb1;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.pose-current {
  flex: 1;
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.1em;
  font-style: italic;
  text-align: right;
  padding-right: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pose-auto-btn {
  background: transparent;
  border: 1px solid var(--accent-3);
  color: var(--accent-3);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  padding: 4px 10px;
  cursor: pointer;
}
.pose-auto-btn:hover { background: rgba(255, 210, 63, 0.08); }

.pose-body {
  padding: 4px 10px;
}
.pose-group {
  margin-top: 10px;
}
.pose-group-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.pose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.pose-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
}
.pose-tile:hover {
  border-color: #f48fb1;
  background: rgba(244, 143, 177, 0.07);
}
.pose-tile.is-current {
  border-color: #f48fb1;
  background: rgba(244, 143, 177, 0.14);
  box-shadow: 0 0 16px rgba(244, 143, 177, 0.3);
}
.pose-tile img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #07070a;
}
.pose-tile .pose-tile-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  text-align: center;
}
.pose-tile.is-current .pose-tile-label { color: #f8bbd0; }

/* ─── shop button + panel ─── */
.ctl-btn.ctl-btn-shop {
  background: rgba(165, 214, 167, 0.08);
  border-color: rgba(165, 214, 167, 0.6);
  color: #a5d6a7;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.ctl-btn.ctl-btn-shop:hover { background: rgba(165, 214, 167, 0.18); color: #c8e6c9; }
.ryokan-demo[data-role="viewer"] .ctl-btn-shop { display: none; }

/* ─── BARN button (hucow sub-system) ─── */
.ctl-btn.ctl-btn-barn {
  background: rgba(244, 143, 177, 0.06);
  border-color: rgba(244, 143, 177, 0.55);
  color: #f48fb1;
  letter-spacing: 0.22em;
  font-weight: 700;
}
.ctl-btn.ctl-btn-barn:hover { background: rgba(244, 143, 177, 0.16); color: #f8bbd0; }
.ryokan-demo[data-role="viewer"] .ctl-btn-barn { display: none; }

/* ─── HUCOW ADOPTION OVERLAY ──────────────────────────
   Modal taking over the screen. Three states the body renders in:
     1. "owns" — show current hucow stats + abandon button
     2. "available" — show breed picker + name input + commit button
     3. "blocked" — show reason ("must be at front desk", "wait 24h", etc.) */
.hucow-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: help-fade-in 0.2s ease;
}
.hucow-overlay[hidden] { display: none; }

.hucow-panel {
  width: clamp(380px, 78vw, 880px);
  max-height: 88vh;
  overflow-y: auto;
  background: rgba(12, 12, 16, 0.98);
  border: 1px solid var(--border);
  font-family: var(--mono);
  color: var(--fg);
}
.hucow-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(244, 143, 177, 0.06);
}
.hucow-title {
  font-size: 12px;
  letter-spacing: 0.35em;
  color: #f48fb1;
  font-weight: 700;
  flex-shrink: 0;
}

/* Tab strip — switch between BARN and HERD BOARD */
.hucow-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.hucow-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hucow-tab:hover {
  color: #f48fb1;
  border-color: rgba(244, 143, 177, 0.5);
}
.hucow-tab.is-active {
  background: rgba(244, 143, 177, 0.18);
  border-color: #f48fb1;
  color: #f48fb1;
  font-weight: 700;
}
.hucow-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 14px;
}
.hucow-close:hover { background: rgba(255, 255, 255, 0.1); }
.hucow-body { padding: 20px; }

/* Adoption intro */
.hucow-intro {
  font-size: 12px;
  line-height: 1.7;
  color: #e8e2d2;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid #f48fb1;
  padding: 12px 16px;
  margin-bottom: 18px;
  white-space: pre-wrap;
}
.hucow-intro-warn {
  display: block;
  margin-top: 10px;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(244, 143, 177, 0.85);
  text-transform: uppercase;
}

/* Breed selection grid */
.hucow-breeds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.hucow-breed-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.hucow-breed-card:hover { background: rgba(244, 143, 177, 0.08); border-color: rgba(244, 143, 177, 0.6); }
.hucow-breed-card.is-selected {
  background: rgba(244, 143, 177, 0.16);
  border-color: #f48fb1;
}
.hucow-breed-sprite {
  width: 100%;
  height: 120px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hucow-breed-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
}
.hucow-breed-desc {
  font-size: 10px;
  color: var(--fg-dim);
  line-height: 1.5;
  flex: 1;
}
.hucow-breed-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--fg);
}
.hucow-breed-stats span:nth-child(odd) { color: var(--fg-dim); text-transform: uppercase; }
.hucow-pip-on { color: #f48fb1; }
.hucow-pip-off { color: rgba(255, 255, 255, 0.2); }

/* Name input */
.hucow-name-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 14px 0;
}
.hucow-name-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  color: #fff;
  font-family: var(--mono);
  font-size: 14px;
  padding: 8px 12px;
  letter-spacing: 0.08em;
}
.hucow-name-input:focus {
  outline: none;
  border-color: #f48fb1;
}
.hucow-name-roll {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 6px 14px;
  cursor: pointer;
}
.hucow-name-roll:hover { border-color: #f48fb1; color: #f48fb1; }

/* Commit row */
.hucow-commit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.hucow-commit-cost {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
.hucow-commit-cost b { color: #fbbf24; font-weight: 700; }
.hucow-commit-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 700;
  background: rgba(244, 143, 177, 0.16);
  border: 1px solid #f48fb1;
  color: #f48fb1;
  padding: 9px 24px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hucow-commit-btn:hover:not(:disabled) {
  background: #f48fb1;
  color: #1a0f14;
}
.hucow-commit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.hucow-status {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.hucow-status.is-err { color: #fca5a5; }
.hucow-status.is-ok { color: #86efac; }

/* Blocked state — explain why */
.hucow-blocked {
  text-align: center;
  padding: 30px 20px;
}
.hucow-blocked-icon { font-size: 36px; opacity: 0.4; }
.hucow-blocked-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #f48fb1;
  margin: 12px 0 6px;
}
.hucow-blocked-detail {
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* Owned-state stat readout */
.hucow-owned-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 14px 0;
  font-size: 11px;
}
.hucow-owned-stats dt {
  color: var(--fg-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 9px;
}
.hucow-owned-stats dd {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.hucow-owned-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.hucow-abandon-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  background: transparent;
  border: 1px solid rgba(255, 68, 89, 0.45);
  color: #ff8898;
  padding: 6px 14px;
  cursor: pointer;
}
.hucow-abandon-btn:hover { background: rgba(255, 68, 89, 0.08); border-color: #ff4459; }

/* ─── BARN STALLS ───
   Only visible content when the followed character is in gyuusha.
   Hucow sprites land at the three stall positions in the background art.
   Empty (no rendered content) for every other room. */
.demo-room > .barn-stalls {
  position: absolute;
  inset: 0;
  z-index: 2;   /* below the character sprite layer so wandering chars aren't buried */
  pointer-events: none;
}
.barn-stall {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  transition: opacity 0.4s ease;
}
/* Hucows live in the foreground of the barn — same depth as the
   followed character. They ARE the room. Stalls in the bg art are
   decorative; the live action sits up front. Up to 3 lined up
   horizontally; if you ever have more than one hucow they spread out. */
.barn-stall[data-stall="1"] { left: 44%; bottom: 30%; }
.barn-stall[data-stall="2"] { left: 61%; bottom: 30%; }
.barn-stall[data-stall="3"] { left: 79%; bottom: 30%; }

.barn-hucow-img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* Full foreground size — match the player character's sprite scale. */
  height: clamp(160px, 28vh, 280px);
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.barn-stall-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
  padding: 2px 8px;
  border: 1px solid rgba(244, 143, 177, 0.4);
  border-radius: 2px;
  white-space: nowrap;
}
.barn-stall-label .barn-stall-owner {
  display: block;
  font-size: 7px;
  color: var(--fg-dim);
  letter-spacing: 0.22em;
  margin-top: 1px;
}
.barn-stall-boarded {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #7dd3fc;
  background: rgba(0, 0, 0, 0.75);
  padding: 6px 14px;
  border: 1px dashed #7dd3fc;
  border-radius: 2px;
  font-style: italic;
}
/* During the 7-second milking animation sequence, glow the stall */
.barn-stall.is-milking .barn-hucow-img {
  filter: drop-shadow(0 0 8px rgba(244, 143, 177, 0.6))
          drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

/* Boarding (KIRA's vacation insurance) */
.hucow-boarding {
  background: rgba(125, 211, 252, 0.04);
  border: 1px solid rgba(125, 211, 252, 0.3);
  padding: 10px 14px;
  margin: 12px 0;
}
.hucow-boarding-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.25em;
  color: #7dd3fc;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hucow-boarding-active {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hucow-boarding-when {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
}
.hucow-boarding-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hucow-board-days {
  width: 56px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 8px;
  text-align: center;
}
.hucow-board-btn, .hucow-pickup-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  background: rgba(125, 211, 252, 0.14);
  border: 1px solid #7dd3fc;
  color: #7dd3fc;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.hucow-board-btn:hover, .hucow-pickup-btn:hover {
  background: #7dd3fc;
  color: #0a0c10;
}
.hucow-pickup-btn {
  align-self: flex-start;
  margin-top: 4px;
}
.hucow-boarding-hint {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--fg-faint);
}

/* Phase action buttons (dawn/day/dusk/night) */
.hucow-phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.hucow-phase-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hucow-phase-btn:hover:not(:disabled) {
  background: rgba(244, 143, 177, 0.08);
  border-color: rgba(244, 143, 177, 0.6);
  color: #f48fb1;
}
.hucow-phase-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.hucow-phase-btn.is-active {
  border-color: #f48fb1;
  background: rgba(244, 143, 177, 0.12);
  color: #f48fb1;
  animation: ph-active-pulse 1.6s ease-in-out infinite;
}
.hucow-phase-btn.is-done {
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
  background: rgba(34, 197, 94, 0.05);
}
/* Milk button when supply is low — amber warning, still clickable */
.hucow-phase-btn.is-low {
  border-color: rgba(245, 158, 11, 0.6);
  color: #fbbf24;
}
.hucow-phase-icon { font-size: 20px; }
.hucow-phase-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.hucow-phase-state {
  font-size: 8px;
  letter-spacing: 0.2em;
  opacity: 0.7;
}

/* Milking prep strip — visible all the time, highlighted during dusk */
.hucow-prep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.hucow-prep.is-active { border-color: rgba(244, 143, 177, 0.6); }
.hucow-prep.is-dim    { opacity: 0.55; }
.hucow-prep-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-right: 4px;
}
.hucow-prep-toggle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--fg-dim);
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hucow-prep-toggle:hover {
  border-color: rgba(244, 143, 177, 0.5);
  color: #f48fb1;
}
.hucow-prep-toggle.is-on {
  background: rgba(244, 143, 177, 0.18);
  border-color: #f48fb1;
  color: #f48fb1;
  font-weight: 700;
}

/* ─── HERD BOARD ───
   Public listing of every active hucow + retired hall.
   Rendered when the HERD tab is active in the barn overlay. */
.herd-intro {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid #f48fb1;
}

.herd-board {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
  margin-bottom: 22px;
}
.herd-board thead th {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  text-transform: uppercase;
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.herd-board tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.herd-board tbody tr:hover { background: rgba(244, 143, 177, 0.04); }
.herd-board tbody tr.is-me {
  background: rgba(244, 143, 177, 0.10);
  border-left: 3px solid #f48fb1;
}
.herd-board tbody tr.is-me td:first-child { padding-left: 6px; }

.hb-rank { color: var(--fg-dim); font-weight: 700; width: 28px; }
.hb-name { min-width: 140px; }
.hb-name-main {
  display: block;
  font-weight: 700;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.hb-name-sub {
  display: block;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  margin-top: 1px;
}
.hb-weight {
  font-weight: 700;
  color: #fbbf24;
  text-align: right;
  width: 70px;
}
.hb-mood, .hb-bond { text-align: right; width: 50px; color: var(--fg); }
.hb-streak { text-align: right; width: 56px; color: #86efac; }
.hb-devoted { text-align: right; width: 70px; color: var(--fg); }
.hb-rank-tag {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}
.hb-tags { text-align: right; }

/* Top-of-category tags shown on the leading row */
.hb-tag {
  display: inline-block;
  font-size: 8px;
  letter-spacing: 0.2em;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  margin-left: 4px;
}
.hb-tag.hb-w { color: #fbbf24; }
.hb-tag.hb-s { color: #86efac; }
.hb-tag.hb-d { color: #c084fc; }
.hb-tag.hb-b {
  color: var(--fg-dim);
  font-style: italic;
}

/* Empty state when no one has adopted yet */
.herd-empty {
  text-align: center;
  padding: 36px 20px;
}
.herd-empty-icon { font-size: 36px; opacity: 0.5; }
.herd-empty-title {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #f48fb1;
  font-weight: 700;
  margin: 10px 0 6px;
}
.herd-empty-detail {
  font-size: 11px;
  color: var(--fg-dim);
}

/* ─── SHOW DAY banner (on the Herd tab) ─── */
.showday-banner {
  background: linear-gradient(135deg, rgba(244, 143, 177, 0.10), rgba(251, 191, 36, 0.06));
  border: 1px solid rgba(244, 143, 177, 0.4);
  border-left: 3px solid #f48fb1;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-family: var(--mono);
}
.showday-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #f48fb1;
  font-weight: 700;
  text-transform: uppercase;
}
.showday-category {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.08em;
  margin: 4px 0;
}
.showday-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
  margin-top: 4px;
}
.showday-meta .showday-done {
  color: #86efac;
  font-weight: 700;
  letter-spacing: 0.25em;
}
.showday-desc {
  font-size: 11px;
  color: var(--fg);
  margin-top: 6px;
  font-style: italic;
  opacity: 0.85;
}
.showday-last {
  background: rgba(255, 210, 63, 0.04);
  border: 1px solid rgba(255, 210, 63, 0.3);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.showday-last-title {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--accent-3);
  font-weight: 700;
  margin-bottom: 6px;
}
.showday-podium {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg);
}
.showday-podium strong {
  color: var(--accent-3);
  margin-right: 4px;
}
.showday-last-meta {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}

/* Past Hucows Hall */
.herd-past-title {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.herd-past {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-dim);
}
.herd-past thead th {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px;
  text-align: left;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.herd-past tbody td {
  padding: 5px 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.shop-panel {
  position: fixed;
  top: 90px;
  right: 24px;
  width: 420px;
  max-height: 75vh;
  overflow-y: auto;
  z-index: 65;
  background: rgba(10, 8, 18, 0.97);
  border: 1px solid rgba(165, 214, 167, 0.6);
  box-shadow: 0 0 40px rgba(165, 214, 167, 0.18), 0 8px 32px rgba(0,0,0,0.6);
  padding: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
}
.shop-panel[hidden] { display: none; }
.shop-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(165, 214, 167, 0.05);
}
.shop-panel-title {
  color: #a5d6a7;
  letter-spacing: 0.22em;
  font-weight: 700;
  flex: 1;
}
.shop-buyer {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}
.shop-buyer .shop-buyer-yen {
  color: var(--accent);
  font-weight: 700;
  margin-left: 4px;
}
.shop-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.shop-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.shop-row.is-equipment  { border-left: 3px solid #7dd3fc; }
.shop-row.is-consumable { border-left: 3px solid var(--accent-3); }
.shop-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.shop-row-name {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg);
}
.shop-row-price {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.15em;
  font-size: 12px;
  white-space: nowrap;
}
.shop-row-desc {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--fg-dim);
  line-height: 1.45;
  margin-top: 2px;
}
.shop-row-buffs {
  grid-column: 1 / -1;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--accent-3);
}
.shop-row-actions { display: flex; gap: 4px; }
.shop-buy {
  background: transparent;
  border: 1px solid #a5d6a7;
  color: #a5d6a7;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 700;
}
.shop-buy:hover:not(:disabled) {
  background: rgba(165, 214, 167, 0.12);
  color: #c8e6c9;
}
.shop-buy:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--fg-faint);
}
.shop-row .shop-cant-afford { color: #ff8898; }

/* ─── inventory button + panel ─── */
.ctl-btn.ctl-btn-bag {
  background: rgba(125, 211, 252, 0.08);
  border-color: rgba(125, 211, 252, 0.6);
  color: #7dd3fc;
  letter-spacing: 0.2em;
  font-weight: 700;
}
.ctl-btn.ctl-btn-bag:hover { background: rgba(125, 211, 252, 0.18); color: #7dd3fc; }
/* Hide entirely for viewers (no character → no bag) */
.ryokan-demo[data-role="viewer"] .ctl-btn-bag { display: none; }

.inv-panel {
  position: fixed;
  bottom: 240px;            /* sit above the pilot HUD + bottom controls */
  right: 24px;
  width: 360px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 65;
  background: rgba(10, 8, 18, 0.97);
  border: 1px solid rgba(125, 211, 252, 0.5);
  box-shadow: 0 0 40px rgba(125, 211, 252, 0.18), 0 8px 32px rgba(0,0,0,0.6);
  padding: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
}
.inv-panel[hidden] { display: none; }
.inv-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(125, 211, 252, 0.05);
}
.inv-panel-title {
  color: #7dd3fc;
  letter-spacing: 0.22em;
  font-weight: 700;
  flex: 1;
}
.inv-panel-title #inv-who { color: var(--fg); }
.inv-yen {
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accent);
  background: rgba(255, 210, 63, 0.08);
  border: 1px solid var(--accent);
  padding: 2px 8px;
}
.inv-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.inv-section:last-child { border-bottom: none; }
.inv-section h4 {
  margin: 0 0 8px;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--accent-3);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.inv-cap {
  color: var(--fg-faint);
  letter-spacing: 0.15em;
  font-weight: normal;
}

.inv-equipped, .inv-buffs, .inv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-empty {
  color: var(--fg-faint);
  font-style: italic;
  font-size: 10px;
}

/* ── typed equipment slots (weapon / accessory / charm) ── */
.equip-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.equip-slot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 74px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-top: 2px solid #7dd3fc;
}
.equip-slot.is-empty {
  border-top-color: var(--border);
  opacity: 0.55;
}
.equip-slot-lab {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  font-weight: 700;
}
.equip-slot-glyph { font-size: 11px; color: #7dd3fc; }
.equip-slot.is-empty .equip-slot-glyph { color: var(--fg-faint); }
.equip-slot-item {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.equip-slot-empty {
  font-style: italic;
  font-size: 10px;
  color: var(--fg-faint);
  margin-top: auto;
}
.equip-slot-meta {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--accent-3);
  line-height: 1.35;
}
.equip-slot-btn { margin-top: auto; align-self: flex-start; }
.inv-passive {
  display: inline-block;
  padding: 0 4px;
  border: 1px solid #e0b46a;
  border-radius: 2px;
  color: #ffd9a0;
  background: rgba(120, 80, 10, 0.25);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.equip-extra { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }

.inv-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
}
.inv-row.is-equipment { border-left: 3px solid #7dd3fc; }
.inv-row.is-consumable { border-left: 3px solid var(--accent-3); }
.inv-row.is-equipped { background: rgba(125, 211, 252, 0.06); }
.inv-row-name {
  font-weight: 700;
  letter-spacing: 0.1em;
}
.inv-row-name .inv-qty {
  margin-left: 6px;
  font-size: 10px;
  color: var(--fg-dim);
  font-weight: normal;
}
.inv-row-desc {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--fg-dim);
  line-height: 1.4;
  margin-top: 2px;
}
.inv-row-buffs {
  grid-column: 1 / -1;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--accent-3);
}
.inv-row-actions { display: flex; gap: 4px; }
.inv-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 4px 8px;
  cursor: pointer;
}
.inv-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--fg-dim); }
.inv-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.inv-btn.inv-btn-primary {
  border-color: #7dd3fc;
  color: #7dd3fc;
}
.inv-btn.inv-btn-primary:hover:not(:disabled) {
  background: rgba(125, 211, 252, 0.1);
  color: #b3e5fc;
}
.inv-btn.inv-btn-warn {
  border-color: rgba(255, 68, 89, 0.4);
  color: #ff8898;
}
.inv-btn.inv-btn-warn:hover:not(:disabled) {
  background: rgba(255, 68, 89, 0.08);
  color: #ff4459;
}

.inv-buff-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(255, 210, 63, 0.04);
  border: 1px solid rgba(255, 210, 63, 0.25);
  font-size: 10px;
}
.inv-buff-stat { color: var(--accent-3); letter-spacing: 0.12em; }
.inv-buff-time { color: var(--fg-dim); font-variant-numeric: tabular-nums; }

/* ─── owner-only admin button (lives in SESSION control group) ─── */
.ctl-btn.ctl-btn-owner {
  background: rgba(255, 210, 63, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.22em;
}
.ctl-btn.ctl-btn-owner:hover { background: rgba(255, 210, 63, 0.25); color: var(--accent); }
.ctl-btn.ctl-btn-owner[hidden] { display: none; }
/* Belt-and-braces: only ever visible when body has data-role="owner" */
.ryokan-demo:not([data-role="owner"]) .ctl-btn-owner { display: none; }

.owner-panel {
  position: fixed;
  top: 120px;
  right: 24px;
  width: 380px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 70;
  background: rgba(10, 8, 18, 0.97);
  border: 1px solid var(--accent);
  box-shadow: 0 0 50px rgba(255, 210, 63, 0.25), 0 8px 32px rgba(0,0,0,0.6);
  padding: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg);
}
.owner-panel[hidden] { display: none; }
.owner-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 210, 63, 0.05);
}
.owner-panel-title {
  color: var(--accent);
  letter-spacing: 0.25em;
  font-weight: 700;
}
.owner-panel-close {
  background: transparent;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 14px;
}
.owner-panel-close:hover { color: var(--fg); }
.owner-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.owner-section:last-child { border-bottom: none; }
.owner-section h4 {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent-3);
  text-transform: uppercase;
}
.owner-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.owner-row label {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  gap: 3px;
}
.owner-row select {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 6px;
}
.owner-ally {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  color: var(--fg) !important;
  cursor: pointer;
}
.owner-ally[data-non-combatant] {
  opacity: 0.5;
  cursor: not-allowed;
}
.owner-ally .own-ally-tag {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--fg-faint);
  font-style: italic;
}
.owner-btn {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  background: var(--accent);
  color: #07070a;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  font-weight: 700;
  cursor: pointer;
}
.owner-btn:hover { background: #fff3a0; }
.owner-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.owner-status {
  margin-top: 6px;
  min-height: 14px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.owner-status.is-ok    { color: #7dd3fc; }
.owner-status.is-error { color: #ff4459; }

.own-codes { display: flex; flex-direction: column; gap: 8px; }
.own-code-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
}
.own-code-name { font-weight: 700; letter-spacing: 0.15em; }
.own-code-val {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  user-select: all;
  word-break: break-all;
}
.own-code-actions { display: flex; gap: 4px; }
.own-code-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 4px 6px;
  cursor: pointer;
}
.own-code-btn:hover { color: var(--fg); border-color: var(--fg-dim); }

.ch-critical {
  color: #ff4459;
  letter-spacing: 0.22em;
  font-weight: 700;
  animation: critical-flash 1.2s ease-in-out infinite;
}
@keyframes critical-flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.combat-overlay.has-critical {
  box-shadow: inset 0 0 0 2px rgba(255, 68, 89, 0.6),
              0 0 60px rgba(255, 68, 89, 0.25);
}

/* ─── view toggle (in HUD) ───────────────────────────── */
.hud-view-toggle { flex: 0 0 auto; }
.view-toggle { display: flex; gap: 2px; margin-top: 2px; }
.view-toggle button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 8px;
  letter-spacing: 0.18em;
  cursor: pointer;
}
.view-toggle button.on {
  background: var(--accent);
  color: #07070a;
  border-color: var(--accent);
}
.view-toggle button:hover:not(.on) { color: var(--fg); border-color: var(--fg-dim); }

/* Default play view = map; stage when explicitly toggled */
.ryokan-demo[data-play-view="map"] .demo-room,
.ryokan-demo[data-play-view="map"] .demo-stats {
  display: none;
}
.ryokan-demo[data-play-view="stage"] .map-view {
  display: none;
}

/* ─── WORKSPACE TABS (PLAY / CONTROL / INN) ───
   Splits the play screen into three jobs so it stops cramming everything at
   once. body[data-workspace] drives which regions show. Tabs hidden for
   viewers/offline (they can't act); JS pins viewers to PLAY. */
.workspace-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 3px 12px 0;
}
.ryokan-demo[data-mode="offline"] .workspace-tabs,
.ryokan-demo[data-role="viewer"]  .workspace-tabs { display: none; }
.workspace-tab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--fg-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  padding: 5px 22px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.workspace-tab:hover:not(.on) { color: var(--fg); border-color: var(--fg-dim); }
.workspace-tab.on {
  color: #f48fb1;
  background: rgba(244, 143, 177, 0.14);
  border-color: #f48fb1;
}

/* ── region visibility per workspace ── */
/* PLAY: scene + feed + slim BASIC action strip (hide TRAIN/SOCIAL/PAIR/QUEUE + MORE) */
.ryokan-demo[data-workspace="play"] #inn-hub { display: none; }
.ryokan-demo[data-workspace="play"] #pilot-hud [data-group="train"],
.ryokan-demo[data-workspace="play"] #pilot-hud [data-group="social"],
.ryokan-demo[data-workspace="play"] #pilot-hud [data-group="pair"],
.ryokan-demo[data-workspace="play"] #pilot-hud [data-group="queue"],
.ryokan-demo[data-workspace="play"] #ph-more-toggle { display: none !important; }
.ryokan-demo[data-workspace="play"] .pilot-hud-body { grid-template-columns: 1fr; }

/* CONTROL: character preview + full action grid filling the screen —
   hide scene, feed, INN, view toggle */
.ryokan-demo[data-workspace="control"] .map-view,
.ryokan-demo[data-workspace="control"] .demo-room,
.ryokan-demo[data-workspace="control"] .demo-feed,
.ryokan-demo[data-workspace="control"] #inn-hub,
.ryokan-demo[data-workspace="control"] .hud-view-toggle { display: none !important; }
.ryokan-demo[data-workspace="control"] #pilot-hud .ph-col-more { display: flex !important; }
.ryokan-demo[data-workspace="control"] #ph-more-toggle { display: none !important; }

/* Status/context block (room · action · HP/EN/MD · clock) lives on CONTROL
   only — frees the top HUD on PLAY/INN. The view toggle hugs the right when
   the middle block is gone so it doesn't drift inward. */
/* Keep the context block as an invisible spacer on PLAY/INN so the HUD row
   stays clean (blocks fill it) and the tabs + view toggle sit on the right. */
.ryokan-demo[data-workspace="play"] .hud-block-context,
.ryokan-demo[data-workspace="inn"]  .hud-block-context { visibility: hidden; }
/* ─── slim top strip (replaces the old HUD bar) ─── */
.top-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  z-index: 5;
}
.ts-clock {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
}
/* Tabs centered on the strip; view toggle hugs the right (PLAY only). */
.top-strip .workspace-tabs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  padding: 0;
}
.top-strip .view-toggle { margin-left: auto; }
.ryokan-demo[data-workspace="control"] .top-strip .view-toggle,
.ryokan-demo[data-workspace="inn"]  .top-strip .view-toggle { display: none; }

/* ── CONTROL stage layout ── */
#control-stage { display: contents; }      /* transparent outside CONTROL */
#control-preview { display: none; }
.ryokan-demo[data-workspace="control"] #control-stage {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 18px;
  align-items: stretch;
  padding: 18px 22px;
}
.ryokan-demo[data-workspace="control"] #control-preview { display: flex; }
.ryokan-demo[data-workspace="control"] #pilot-hud { flex: 1; margin: 0; }
.ryokan-demo[data-workspace="control"] .pilot-hud-body { height: 100%; align-content: start; }

.control-preview {
  flex: 0 0 300px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  overflow-y: auto;
  min-height: 0;
}
.cp-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 60%, rgba(244, 143, 177, 0.10), transparent 70%);
  border: 1px solid var(--border);
  overflow: hidden;
}
#control-preview-img { max-width: 92%; max-height: 92%; image-rendering: pixelated; }
.cp-name { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: 0.2em; color: #f48fb1; margin-top: 6px; }
.cp-action { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg); }
.cp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; width: 100%; margin-top: 10px; }
.cp-stats > div { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; }
.cp-stats dt { color: var(--fg-faint); letter-spacing: 0.15em; }
.cp-stats dd { color: var(--fg); margin: 0; }
.cp-pose {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 6px 10px;
  background: rgba(244, 143, 177, 0.08);
  border: 1px solid rgba(244, 143, 177, 0.4);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.cp-pose-label { color: #f48fb1; font-weight: 700; letter-spacing: 0.2em; }
.cp-pose-name { color: var(--fg); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pose-clear {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  padding: 3px 6px;
  cursor: pointer;
  flex: 0 0 auto;
}
.cp-pose-clear:hover { color: #fff; border-color: #f48fb1; }

/* Compact pose picker on the CONTROL preview */
.cp-poses { width: 100%; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cp-pose-group-label {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--fg-faint);
  margin-bottom: 4px;
}
.cp-pose-row { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-pose-tile {
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s;
}
.cp-pose-tile img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.cp-pose-tile:hover:not(:disabled) { border-color: #f48fb1; }
.cp-pose-tile.is-current { border-color: #f48fb1; box-shadow: 0 0 0 1px #f48fb1; }
.cp-pose-tile:disabled { opacity: 0.4; cursor: not-allowed; }

/* INN: management hub only — hide scene, feed, action grid, view toggle */
.ryokan-demo[data-workspace="inn"] .map-view,
.ryokan-demo[data-workspace="inn"] .demo-room,
.ryokan-demo[data-workspace="inn"] .demo-feed,
.ryokan-demo[data-workspace="inn"] #pilot-hud,
.ryokan-demo[data-workspace="inn"] .hud-view-toggle { display: none !important; }

/* INN hub — shown only in the inn workspace */
#inn-hub { display: none; }
.ryokan-demo[data-workspace="inn"] #inn-hub { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ryokan-demo[data-role="viewer"] #inn-hub { display: none !important; }

.inn-hub { padding: 40px 24px; min-height: 280px; }
.inn-hub-head {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #f48fb1;
  text-align: center;
  margin-bottom: 28px;
}
.inn-hub-cards {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 0 auto;
}
.inn-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 240px;
  padding: 28px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.inn-card:hover {
  background: rgba(244, 143, 177, 0.08);
  border-color: #f48fb1;
  transform: translateY(-2px);
}
.inn-card-icon { font-size: 40px; }
.inn-card-title { font-size: 14px; font-weight: 700; letter-spacing: 0.2em; }
.inn-card-sub {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  text-align: center;
  line-height: 1.5;
}

/* ─── map view ─────────────────────────────────────── */
.map-view {
  /* left gutter tracks the (resizable) comms panel; right column is now free
     (the feed moved into the comms panel) — map runs to the right edge. */
  padding: 16px 22px 16px calc(var(--chat-w, 300px) + 36px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;            /* scroll if rooms don't all fit — never scrunch */
  background: var(--bg);
  position: relative;
}

@media (max-width: 1100px) {
  .map-view { padding-right: 22px; padding-left: 22px; }   /* narrow: reclaim side gutters */
  .ryokan-demo[data-play-view="map"] .demo-feed { display: none; }
}

/* wide cutaway banner above the floor cards */
.map-header {
  position: relative;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,12,16,0) 0%, rgba(10,12,16,0.55) 100%),
    url("../assets/map-header.png") center 35% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.map-header-title {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-family: var(--display, var(--mono));
  font-size: 18px;
  letter-spacing: 0.18em;
  color: #f4ecd8;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.85),
    0 0 14px rgba(0,0,0,0.6);
  text-transform: uppercase;
}
.ryokan-demo[data-phase="night"] .map-header,
.ryokan-demo[data-phase="dusk"]  .map-header {
  background:
    linear-gradient(180deg, rgba(8,6,18,0.35) 0%, rgba(8,6,18,0.75) 100%),
    url("../assets/map-header.png") center 35% / cover no-repeat;
}
@media (max-width: 900px) {
  .map-header { height: 110px; }
  .map-header-title { font-size: 15px; }
}

.map-floor {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: stretch;
}

.map-floor-tag {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--fg-faint);
  border-right: 1px solid var(--border);
  padding: 8px 0;
  text-transform: uppercase;
}

.room-cards {
  display: grid;
  gap: 10px;
}
.room-cards[data-floor="2"] { grid-template-columns: repeat(2, 1fr); }
.room-cards[data-floor="1"] { grid-template-columns: repeat(5, 1fr); }
.room-cards[data-floor="0"] { grid-template-columns: 1fr; }

.room-card {
  position: relative;
  /* Base layer: tinted gradient fallback when no painted bg exists */
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 200, 220, 0.08), transparent 50%),
    linear-gradient(180deg, var(--room-tint, #2a1f2e) 0%, #0a0608 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;   /* never scrunch below content — sprites/labels stay put */
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s;
  overflow: hidden;
}

/* Painted background image — sits below the dark overlay, above the fallback gradient */
.room-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--room-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Dark gradient overlay for text legibility (only when painted bg is set) */
.room-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.room-card[style*="--room-bg"]::after {
  opacity: 1;
}

/* Card contents always above the layers */
.room-card > * {
  position: relative;
  z-index: 2;
}

/* Placeholder room id watermark — shows when JS hasn't populated the card yet */
.room-card:empty::before {
  content: attr(data-room);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
}

.room-card[data-room="entrance"]    { --room-tint: #3a2f24; }
.room-card[data-room="front_desk"]  { --room-tint: #2e2638; }
.room-card[data-room="lounge"]      { --room-tint: #3a2842; }
.room-card[data-room="kitchen"]     { --room-tint: #3a3528; }
.room-card[data-room="tea_room"]    { --room-tint: #2e3a28; }
.room-card[data-room="onsen"]       { --room-tint: #1f3340; }
.room-card[data-room="guest_room"]  { --room-tint: #2a2438; }
.room-card[data-room="garden"]      { --room-tint: #2a3a28; }

.room-card:hover {
  border-color: var(--fg-dim);
  transform: translateY(-1px);
}

/* Night darkening on cards */
.ryokan-demo[data-phase="night"] .room-card { filter: brightness(0.65) saturate(1.15) hue-rotate(-10deg); }

/* In-room spectator battle widget */
.room-card.has-battle {
  border-color: #ff4459;
  box-shadow: 0 0 18px rgba(255, 68, 89, 0.4), inset 0 0 30px rgba(255, 68, 89, 0.1);
  animation: rcb-card-pulse 1.8s ease-in-out infinite;
}
@keyframes rcb-card-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 68, 89, 0.35), inset 0 0 30px rgba(255, 68, 89, 0.08); }
  50%      { box-shadow: 0 0 28px rgba(255, 68, 89, 0.55), inset 0 0 36px rgba(255, 68, 89, 0.18); }
}

.rc-battle {
  background: rgba(8, 4, 8, 0.72);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 68, 89, 0.5);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  z-index: 2;
}
.rc-battle.is-pvp {
  border-color: rgba(201, 168, 76, 0.6);
}
.rc-battle.is-pvp .rcb-round { color: var(--accent); }

.rcb-betting {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 210, 63, 0.3);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.rcb-bet-pool {
  color: var(--accent);
  font-weight: 700;
  margin-right: auto;
}
.rcb-bet-btn {
  background: transparent;
  border: 1px solid rgba(255, 210, 63, 0.4);
  color: var(--accent-3);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.15em;
  padding: 2px 6px;
  cursor: pointer;
}
.rcb-bet-btn:hover { background: rgba(255, 210, 63, 0.1); color: var(--accent); }
.rcb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 68, 89, 0.3);
}
.rcb-mark {
  color: #ff4459;
  font-size: 13px;
  animation: rcb-spin 2.5s linear infinite;
  display: inline-block;
}
@keyframes rcb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.rcb-round {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.15em;
}
.rcb-turn {
  color: var(--accent-3);
  flex: 1;
  text-align: right;
  font-size: 9px;
  font-style: italic;
}

.rcb-row {
  display: grid;
  grid-template-columns: 12px 70px 1fr 50px;
  gap: 6px;
  align-items: center;
}
.rcb-row.is-turn .rcb-arrow {
  color: var(--accent-3);
  animation: rcb-blink 0.7s ease-in-out infinite;
}
@keyframes rcb-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.rcb-arrow { font-size: 10px; color: transparent; }
.rcb-name {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcb-row.is-critical .rcb-name::after { content: " ⚠"; color: #ff4459; }
.rcb-ghost-name { color: #ff8898; }
.rcb-lvl {
  font-size: 8px;
  font-weight: 400;
  color: var(--fg-faint);
}
.rcb-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.rcb-fill {
  height: 100%;
  transition: width 0.4s ease;
}
.rcb-fill-ally  { background: linear-gradient(90deg, var(--accent), #fff3a0); }
.rcb-fill-ghost { background: linear-gradient(90deg, #ff2e3c, #ff8898); }
.rcb-hp {
  font-size: 9px;
  text-align: right;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.rcb-log {
  margin-top: 3px;
  font-size: 9px;
  color: var(--accent-3);
  letter-spacing: 0.08em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 3px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Widen the row a bit on small/wide cards */
.room-card.room-card-wide .rcb-row {
  grid-template-columns: 12px 90px 1fr 70px;
}

/* In-room move announce — pops over the room card on every fresh strike */
.rcb-announce {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  font-family: var(--display, var(--mono));
  text-align: center;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(0, 0, 0, 0.85);
  animation: rcba-in 0.4s cubic-bezier(.3, 1.4, .4, 1) forwards,
             rcba-out 0.5s ease-in 1.8s forwards;
  white-space: nowrap;
}
.rcb-announce .rcba-actor {
  display: block;
  font-size: 10px;
  letter-spacing: 0.32em;
  font-weight: 700;
  color: var(--fg-dim);
}
.rcb-announce .rcba-move {
  display: block;
  font-size: 22px;
  letter-spacing: 0.18em;
  font-weight: 900;
}
.rcb-announce.is-ally  .rcba-move { color: var(--accent-3); text-shadow: 0 0 18px rgba(255, 210, 63, 0.55), 0 2px 0 #000; }
.rcb-announce.is-ghost .rcba-move { color: #ff8898;        text-shadow: 0 0 18px rgba(255, 68, 89, 0.6), 0 2px 0 #000; }
.rcb-announce.is-crit .rcba-move::after { content: " !"; color: #fff; }

@keyframes rcba-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
}
@keyframes rcba-out {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

/* The wide garden card can fit larger text */
.room-card.room-card-wide .rcb-announce .rcba-move { font-size: 30px; }

/* Selection target highlight (when a character is selected, rooms become targetable) */
.ryokan-demo.send-mode .room-card {
  border-color: var(--accent-3);
  border-style: dashed;
}
.ryokan-demo.send-mode .room-card:hover {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 210, 63, 0.1), transparent 50%),
    linear-gradient(180deg, var(--room-tint, #2a1f2e) 0%, #0a0608 100%);
  border-color: #ffd23f;
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.3);
}
/* Don't allow sending into the same room a char is already in */
.ryokan-demo.send-mode .room-card.is-current {
  border-color: var(--border);
  border-style: solid;
  opacity: 0.5;
  cursor: not-allowed;
}

.rc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.rc-jp {
  font-family: var(--jp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.rc-en {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--fg-faint);
  text-transform: uppercase;
}

.rc-occupants {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rc-char {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.rc-char:hover { background: rgba(0, 0, 0, 0.5); }
.rc-char.is-selected {
  border-color: var(--accent-3);
  background: rgba(255, 210, 63, 0.12);
  box-shadow: 0 0 8px rgba(255, 210, 63, 0.4);
}

.rc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.rc-char-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
}

/* ─── persistent sprite layer (positioned over painted room bg) ─── */
.rc-content { position: relative; z-index: 2; }
.rc-sprite-stage {
  position: absolute;
  bottom: 22px;                    /* clear the rc-spots strip */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
  z-index: 3;
}
.rc-sprite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  transition: transform 0.2s ease;
}
.rc-sprite.is-followed {
  transform: scale(1.12);
}
.rc-sprite-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.65));
}
.rc-sprite.is-followed .rc-sprite-img {
  filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 3px 6px rgba(0,0,0,0.75));
}
.rc-sprite-name {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Floating "training" badge above the sprite — amber, pulsing = active drill.
   Stacks a discipline label over a thin duration progress bar. */
.rc-sprite-badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 2px 6px 3px;
  color: #ffe6a8;
  background: rgba(120, 78, 8, 0.88);
  border: 1px solid #e0b46a;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000;
  animation: rc-train-pulse 1.4s ease-in-out infinite;
}
.rc-sprite-badge .tb-label { text-align: center; }
.rc-sprite-badge .tb-bar {
  height: 3px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(224, 180, 106, 0.35);
  overflow: hidden;
}
.rc-sprite-badge .tb-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #ffd68c;
  box-shadow: 0 0 4px #ffd68c;
  transition: width 0.8s linear;
}
@keyframes rc-train-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(224, 180, 106, 0.40); transform: translateY(0); }
  50%      { box-shadow: 0 0 11px rgba(255, 214, 140, 0.80); transform: translateY(-1px); }
}

/* Wider rooms (like the garden) can fit larger sprites */
.room-card.room-card-wide .rc-sprite-img { width: 72px; height: 72px; }
.room-card.room-card-wide .rc-sprite-stage { bottom: 24px; gap: 18px; }

/* Action progress bar */

.rc-spots {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--fg-faint);
}

/* Ghost danger indicator on garden during night */
.ryokan-demo[data-phase="night"] .room-card[data-room="garden"]::before {
  content: "⚠";
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--accent);
  font-size: 14px;
  animation: critical-pulse 1.6s ease-in-out infinite;
}

.map-hint {
  margin-top: auto;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--fg-faint);
  padding: 6px;
}
.ryokan-demo.send-mode .map-hint {
  color: var(--accent-3);
}

/* ─── responsive ─────────────────────────── */
@media (max-width: 900px) {
  .demo-feed { display: none; }
  .demo-stats { left: 8px; top: 80px; }
  .demo-stats .bar { width: 90px; }
  .hud-block { padding: 6px 10px; }
  .hud-name { font-size: 14px; }
  .hud-arch, .hud-status, .hud-room, .hud-action, .hud-phase { font-size: 10px; }
}