/* ==========================================================================
   theme-v4 · Round 7 design system layer (loaded after theme-v3, before title.css)

   1. Tokens       radius / border / shadow / spacing / motion, in one place
   2. Shapes       every component level mapped to one radius step
   3. Images       one display rule per image role (figure / illustration / scene)
   4. Profile      fixed-size character sheet, persistent portrait, own scroll
   5. Novel        name plate, text box, toolbar hierarchy, safe stage area
   6. Room         full room art, compact side cards, no empty slabs
   7. Motion       shared durations and easing, press / hover / tab feedback
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  /* radius scale: small control · card · large card · sheet/panel · pill */
  --r-xs: 8px;
  --r-sm: 12px;   /* buttons, inputs, thumbnails */
  --r-md: 16px;   /* ordinary cards, rows */
  --r-lg: 20px;   /* large cards, page panels */
  --r-xl: 24px;   /* dialogs, hero panels, sheets */
  --r-pill: 999px;

  --bd-soft: 1px solid rgba(24, 40, 70, .08);
  --bd-glass: 1px solid rgba(255, 255, 255, .7);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --ease-std: cubic-bezier(.22, .68, .36, 1);
  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --fast: var(--dur-fast) var(--ease-std);
  --base: var(--dur-base) var(--ease-std);
  --slow: var(--dur-slow) var(--ease-out);

  /* story safe area: the text box never takes more than this share of the screen */
  --vn-box-max: 30vh;
}

/* ---------- 2. shapes ---------- */
/* sheets and big panels */
dialog.sheet, dialog.sheet.wide-sheet, dialog.sheet.profile-mode, dialog.sheet.settings-sheet,
dialog.call-sheet,
.ah-hero, .ah-gallery, .ah-focus, .ah-agenda, .rhythm-stage, .ah-scene, .ah-group-banner { border-radius: var(--r-xl) !important; }
/* large cards */
.card, section.card, article.card, .roster-card, .ah-place, .ah-toolbar, .ah-panel,
.ah-encounter, .ah-arc, .msg-list, .msg-side, .ah-msg-list, .ah-msg-side { border-radius: var(--r-lg) !important; }
/* ordinary cards / rows */
.ill-card, .ah-wall-tile, .ah-agenda-row, .msg-row, .msg-start-person, .group-room, .ah-stat,
.voice-row, .rel-card, .canon-block, .memory-item, .room-art, .chat-visual, .chat-log { border-radius: var(--r-md) !important; }
/* small controls */
.icon-btn, .brand-mark, .ill-thumb, .ah-hero-frame, select, input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea,
.rhythm-stage canvas, .voice-char, .voice-manager .voice-tts-state { border-radius: var(--r-sm) !important; }
.voice-head input[type=search] { border-radius: var(--r-pill) !important; }
/* images follow their frame: the top of a roster card art matches the card */
.roster-art { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; overflow: hidden; }
.roster-card { overflow: hidden; }
.ah-place .illustration, .ah-place img, .ill-card img, .ah-wall-tile img { border-radius: inherit; }
/* the room art and other image frames never let the picture escape the corner */
.room-art, .ill-thumb, .ah-wall-tile, .ill-card, .ah-hero-frame { overflow: hidden; isolation: isolate; }

/* ---------- 3. images ---------- */
/* Transparent character art is always sized by the art system (contain + floor);
   never let a generic cover rule touch it. */
.char-image { object-fit: contain !important; }
/* Illustration roles: cover with an explicit focus; every one fades in when decoded. */
.illustration > img, .ah-profile-bg, .novel-bg, .ah-scene-bg img { object-position: var(--focus, 50% 42%); }
.ill-card img, .ah-wall-tile img, .ill-thumb img, .roster-bg { object-fit: cover; object-position: var(--focus, 50% 28%); }
.ah-hero-frame img { object-fit: cover; object-position: 50% 30%; }
.illustration.missing-art, .room-art.missing-art { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, #eef3fa), #f6f8ff); }
@keyframes ah-img-in { from { opacity: 0; } }
.illustration > img, .ill-card img, .ah-wall-tile img, .ill-thumb img, .roster-bg { animation: ah-img-in var(--dur-slow) var(--ease-out) both; }

/* ---------- 4. profile sheet ---------- */
dialog#detail.profile-mode {
  width: min(1200px, calc(100vw - 48px));
  height: min(820px, calc(100dvh - 48px));
  max-height: none; max-width: none;
  padding: 0;
  overflow: hidden;
}
dialog#detail.profile-mode > .sheet-body {
  flex: 1 1 auto; min-height: 0; height: 100%;
  padding: 0 !important; overflow: hidden !important;
}
.profile-mode .ah-profile {
  position: relative;
  height: 100%; min-height: 0 !important;
  grid-template-columns: clamp(300px, 32%, 400px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr);
}
.profile-mode .ah-profile-side {
  height: 100%; min-height: 0 !important;
  padding: 24px 24px 26px;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  contain: layout paint;
}
.profile-mode .ah-profile-side > img.ah-profile-bg { --focus: 50% 30%; }
.profile-mode .ah-profile-side::before {
  background:
    linear-gradient(0deg, rgba(5, 10, 20, .9) 0%, rgba(6, 11, 22, .42) 26%, rgba(6, 11, 22, 0) 52%),
    linear-gradient(180deg, rgba(6, 11, 22, .38) 0%, transparent 18%),
    radial-gradient(90% 50% at 50% 100%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 74%);
}
.profile-mode .ah-profile-art { inset: 54px 2% 118px !important; }
.profile-mode .ah-profile-id { margin-top: auto; }
.profile-mode .ah-profile-id h2 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; word-break: keep-all; }
.profile-mode .ah-profile-eyebrow { top: 24px; left: 24px; right: 24px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.ah-profile-expand { display: none; }

.profile-mode .ah-profile-close {
  position: absolute; top: 14px; right: 14px; z-index: 20;
  width: 40px; height: 40px; border-radius: 50% !important;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .45);
}
.profile-mode .ah-profile-main {
  height: 100%; min-height: 0; min-width: 0;
  overflow: hidden;
  padding: 22px 26px 0 26px !important;
  gap: 14px;
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
}
.profile-mode .ah-profile-actions { padding-right: 46px; flex: 0 0 auto; }
.profile-mode .ah-stats { flex: 0 0 auto; }
.profile-mode .ah-tabs { flex: 0 0 auto; }
.profile-mode .ah-profile-body {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 4px 6px 28px 2px;
  margin-right: -10px;
}
.profile-mode .ah-profile-body::-webkit-scrollbar { width: 8px; }
.profile-mode .ah-profile-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 99px; }
.ah-profile-body .fact-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ah-profile-body .prose-block p, .ah-profile-body .canon-block p, .ah-profile-body .canon-beat span { line-height: 1.85; max-width: 64em; }
.ah-profile-body h4 { margin-top: 4px; }
.ah-tabs button { transition: color var(--fast), background var(--base), box-shadow var(--base), transform var(--fast); }
.ah-tabs button:active { transform: scale(.96); }
.ah-profile-actions button { white-space: nowrap; }

@media (max-width: 1080px) and (min-width: 781px) {
  .profile-mode .ah-profile { grid-template-columns: clamp(260px, 34%, 320px) minmax(0, 1fr) !important; }
  .profile-mode .ah-profile-main { padding: 18px 18px 0 18px !important; }
}

@media (max-width: 780px) {
  dialog#detail.profile-mode {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: none; max-width: none;
    border-radius: var(--r-xl) !important;
  }
  .profile-mode .ah-profile {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .profile-mode .ah-profile-side {
    height: 208px; min-height: 0 !important;
    padding: 14px 16px 16px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transition: height var(--dur-slow) var(--ease-out);
  }
  .profile-mode .ah-profile-side::before {
    background:
      linear-gradient(90deg, rgba(5, 10, 20, .82) 0%, rgba(5, 10, 20, .4) 46%, rgba(5, 10, 20, 0) 70%),
      linear-gradient(0deg, rgba(5, 10, 20, .55) 0%, transparent 40%);
  }
  /* upper body of the figure in a short band, head fully inside */
  .profile-mode .ah-profile-art { inset: 8px 0 auto 36% !important; height: 400px; }
  .profile-mode .ah-profile-eyebrow { display: none; }
  .profile-mode .ah-profile-id { max-width: 62%; position: relative; z-index: 3; }
  .profile-mode .ah-profile-id h2 { font-size: 24px; margin: 6px 0 2px; }
  .profile-mode .ah-profile-id p { font-size: 11px; }
  .profile-mode .ah-profile-id .tag { font-size: 10.5px; }
  .ah-profile-expand {
    display: inline-flex; position: absolute; z-index: 4; right: 12px; bottom: 12px;
    padding: 6px 12px !important; font-size: 11.5px !important; border-radius: var(--r-pill) !important;
    background: rgba(255, 255, 255, .2) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .5) !important;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .profile-mode .ah-profile.art-open .ah-profile-side { height: min(74dvh, 600px); }
  .profile-mode .ah-profile.art-open .ah-profile-art { inset: 40px 0 92px 0 !important; height: auto; }
  .profile-mode .ah-profile.art-open .ah-profile-id { max-width: 100%; }
  .profile-mode .ah-profile.art-open .ah-profile-side::before { background: linear-gradient(0deg, rgba(5, 10, 20, .88) 0%, transparent 34%); }

  .profile-mode .ah-profile-close { top: 10px; right: 10px; width: 36px; height: 36px; }
  .profile-mode .ah-profile-main {
    padding: 12px 14px 0 !important; gap: 10px;
    border-radius: 0 0 var(--r-xl) var(--r-xl);
  }
  .profile-mode .ah-profile-actions {
    display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    padding: 0 0 2px; margin: 0 -14px; padding-inline: 14px;
    scrollbar-width: none;
  }
  .profile-mode .ah-profile-actions::-webkit-scrollbar { display: none; }
  .profile-mode .ah-profile-actions button { flex: 0 0 auto; padding: 8px 14px !important; font-size: 12.5px !important; }
  .profile-mode .ah-stats { gap: 6px; }
  .profile-mode .ah-stat { padding: 7px 10px; }
  .profile-mode .ah-stat b { font-size: 14px; }
  .profile-mode .ah-stat .stat-bar { margin-top: 5px; height: 4px; }
  .profile-mode .ah-profile-main .ah-tabs {
    flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; flex: 0 0 auto;
  }
  .profile-mode .ah-profile-main .ah-tabs::-webkit-scrollbar { display: none; }
  .profile-mode .ah-profile-main .ah-tabs button { flex: 1 0 auto !important; min-width: 56px; padding: 8px 10px !important; scroll-snap-align: center; font-size: 12.5px !important; }
  .profile-mode .ah-profile-body { margin-right: -6px; padding: 2px 4px 24px 0; }
  .ah-profile-body .fact-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .ah-profile-body .fact-grid { grid-template-columns: 1fr; }
}

/* ---------- 5. novel ---------- */
.novel-textbox {
  /* fixed geometry: name plate above, reading area, one toolbar row */
  display: flex !important; flex-direction: column;
  max-height: var(--vn-box-max) !important;
  min-height: 150px;
  padding: 18px 26px 12px !important;
  border-radius: var(--r-xl) !important;
  border-top-width: 3px !important;
}
.novel-name {
  position: absolute !important;
  left: 20px; bottom: calc(100% + 8px); top: auto !important;
  margin: 0 !important;
  display: inline-flex !important; align-items: center; gap: 10px;
  min-width: 128px; max-width: min(78%, 560px);
  padding: 5px 18px 5px 5px !important;
  border-radius: var(--r-pill) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .8) !important;
  z-index: 8;
}
.novel-name img { flex: 0 0 auto; width: 42px !important; height: 42px !important; }
.novel-name-text { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.novel-name b {
  white-space: nowrap; overflow: visible; text-overflow: clip;
  font-size: 15px !important; line-height: 1.2;
  padding: 6px 16px !important;
  letter-spacing: .06em;
}
.novel-name small { white-space: nowrap; font-size: 11.5px; color: var(--ink-3); }
.novel-name.narration { padding: 5px 16px !important; min-width: 0; }
.novel-name.narration b { background: rgba(16, 26, 43, .76) !important; box-shadow: none !important; }

.novel-reading {
  flex: 1 1 auto; min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  padding: 2px 34px 6px 2px !important;
}
.novel-ja { font-size: clamp(16px, 1.45vw, 19px) !important; line-height: 1.75 !important; min-height: 1.75em; }
.novel-zh {
  font-size: clamp(12.5px, 1.1vw, 14px) !important; line-height: 1.7;
  margin-top: 8px !important; padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 22%, transparent);
}
.novel-zh:empty { border-top: 0; padding-top: 0; }

.novel-toolbar {
  flex: 0 0 auto;
  display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px !important; padding-top: 10px !important;
}
.novel-nav, .novel-modes { display: flex; align-items: center; gap: 6px; min-width: 0; }
.novel-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; white-space: nowrap; }
.novel-toolbar button { white-space: nowrap; }
.novel-toolbar .novel-sec, .novel-toolbar .voice-btn { padding: 6px 12px !important; font-size: 12px !important; margin: 0 !important; }
.novel-modes {
  margin-left: auto;
  padding: 3px; gap: 2px;
  border-radius: var(--r-pill); background: rgba(16, 26, 43, .05);
}
.novel-toolbar .novel-toggle {
  border: 0 !important; background: transparent !important;
  padding: 5px 11px !important; font-size: 11.5px !important; color: var(--ink-3) !important;
}
.novel-toolbar .novel-toggle.on { background: #fff !important; color: var(--accent-ink) !important; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .35); }
.novel-toolbar .novel-toggle.on::before { content: "● "; font-size: 8px; vertical-align: 2px; color: var(--accent); }
.novel-toolbar .novel-next {
  padding: 9px 22px !important; font-size: 14px !important; font-weight: 800 !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: #fff !important;
  box-shadow: 0 10px 22px -12px var(--accent-glow);
}
.novel-toolbar .novel-next:active { transform: scale(.95); }

/* the stage keeps a safe area above the text box: actors are drawn down to it */
.novel-cast { bottom: calc(var(--vn-box-max) * .55) !important; top: 7% !important; }
.novel-cast .character-slot.speaking { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 45%, transparent)); }
.novel-choices.floating { bottom: calc(var(--vn-box-max) + 56px) !important; top: auto !important; }

@media (max-width: 860px) {
  :root { --vn-box-max: 38vh; }
  .novel-textbox { padding: 14px 14px 10px !important; min-height: 140px; }
  .novel-name { left: 10px; max-width: calc(100% - 20px); padding: 4px 12px 4px 4px !important; }
  .novel-name img { width: 34px !important; height: 34px !important; }
  .novel-name b { font-size: 13.5px !important; padding: 5px 12px !important; }
  .novel-ja { font-size: 15.5px !important; }
  .novel-zh { font-size: 12.5px !important; }
  .novel-toolbar { flex-wrap: wrap !important; row-gap: 8px; }
  .novel-modes { order: 3; margin-left: 0; width: 100%; justify-content: space-between; }
  .novel-modes .novel-toggle { flex: 1; }
  .novel-toolbar .novel-next { margin-left: auto; padding: 8px 18px !important; font-size: 13px !important; }
  .novel-nav .novel-count { display: none; }
  .novel-cast { bottom: calc(var(--vn-box-max) * .5) !important; }
  /* phones: choices float in the free sky area so faces stay visible */
  .novel-choices.floating { top: 15% !important; bottom: auto !important; }
}

/* ---------- 6. room ---------- */
.journal-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important; align-items: start; gap: 18px; }
.room-card { display: flex; flex-direction: column; gap: 12px; }
.room-card h3 { margin: 0; }
.room-art {
  height: auto !important; aspect-ratio: 16 / 9; max-height: 440px; margin: 0 !important;
  position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 14px 30px -24px rgba(16, 26, 43, .6);
}
.room-art .illustration > img { --focus: 50% 62%; }
.room-zoom {
  position: absolute !important; right: 10px; bottom: 10px; z-index: 2;
  padding: 6px 12px !important; font-size: 12px !important;
  border-radius: var(--r-pill) !important;
  background: rgba(16, 26, 43, .55) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .4) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.room-themes, .room-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; }
.room-label { font-size: 12px; color: var(--ink-3); margin-right: 4px; }
.room-tools { padding-top: 12px; border-top: 1px solid var(--line); }
.journal-side { display: grid; gap: 18px; align-content: start; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-head h3 { margin: 0; }
.card-head .count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.achievement-grid .achievement {
  border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 10px 12px;
  font-size: 13px; color: var(--ink-3);
}
.achievement-grid .achievement.done { border-style: solid; border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent-soft) 60%, #fff); color: var(--ink); }
.achievement-grid .achievement .mark { color: var(--accent); }
.empty-compact { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(16, 26, 43, .035); }
.empty-compact p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.empty-icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 16px; }
.recent-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.recent-row:last-child { border-bottom: 0; }
.recent-row time { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--accent-ink); }
.recent-row b { font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline { gap: 14px !important; }
.timeline .card { padding: 16px 18px !important; }
.timeline .card p { -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) {
  .journal-grid { grid-template-columns: 1fr !important; }
  .room-art { max-height: none; }
}

/* settings: sound card */
.audio-card .range-row { display: grid; grid-template-columns: 72px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; margin: 6px 0; }
.audio-card .range-row input { accent-color: var(--accent); }
.audio-card .range-row output { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-3); text-align: right; }

/* ---------- 7. motion ---------- */
button.primary:not(:disabled):active, button.soft:not(:disabled):active, .ghost-btn:not(:disabled):active,
.glass-button:not(:disabled):active, .tabs button:active, .icon-btn:active { transform: scale(.96); }
.roster-card, .ah-place, .ill-card, .ah-wall-tile, .ah-encounter, .ah-arc {
  transition: transform var(--base), box-shadow var(--base), filter var(--base) !important;
}
@media (hover: hover) {
  .roster-card:hover, .ah-place:hover, .ah-encounter:hover { transform: translateY(-3px); }
  .ill-card:hover img, .ah-wall-tile:hover img { transform: scale(1.04); }
}
.ill-card img, .ah-wall-tile img { transition: transform var(--dur-slow) var(--ease-out); }
dialog.sheet[open] { animation: ah-sheet-in var(--dur-base) var(--ease-out) both !important; }
@keyframes ah-sheet-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
input[type=range] { transition: filter var(--fast); }
input[type=range]:active { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) {
  button.primary:active, button.soft:active, .roster-card:hover, .ah-place:hover, .ah-encounter:hover { transform: none !important; }
  dialog.sheet[open] { animation: none !important; }
}
html.low-effects .roster-card:hover, html.low-effects .ah-place:hover { transform: none !important; }

/* ambient double-buffer: the idle layer has no source yet */
#ambient img:not([src]) { display: none; }
.roster-bg { --focus: 50% 22%; }

/* section panels on home / story ("六种心愿", "想去哪里") were square white slabs behind rounded cards */
.ah-wall, .ah-places {
  border-radius: var(--r-xl) !important;
  padding: 22px 24px 24px !important;
  border: var(--bd-glass);
  box-shadow: var(--sh-1);
}
@media (max-width: 780px) {
  .ah-wall, .ah-places { padding: 16px 14px 18px !important; }
}