/*
 * 《末日悲歌》美术整合参考层，2026-10-29。
 * 用法：在原 styles.css 后加载；body 设置 data-theme="doomsong-ink"。
 * 可选：body 增加 data-doomsong-paper 启用纸纹。
 * 依赖 docs/CODEX_INTEGRATION.md 中的新增图像元素；不自动修改 DOM。
 * 从素材包参考层整合；局部布局补丁位于文件末尾。
 * 所有 URL 都相对站点根目录，不相对本 CSS 文件。
 */

@font-face {
  font-family: "Doomsong Display";
  src: url("/assets/doomsong-ui/fonts/DOOMSONG_FONT_v14.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IM Fell Double Pica";
  src: url("/assets/doomsong-ui/fonts/FeDPrm.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IM Fell Double Pica SC";
  src: url("/assets/doomsong-ui/fonts/FeDPsc2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body[data-theme="doomsong-ink"] {
  --ink: #171714;
  --ink-soft: #555149;
  --paper: #e9e3d6;
  --paper-light: #f7f3e9;
  --paper-deep: #d8cfbd;
  --rust: #a43a2b;
  --rust-dark: #74251d;
  --moss: #53613a;
  --blue: #315f6d;
  --line: #918979;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
}

/* 不假定纹理无缝。启用 repeat 前应查看清单/拼接检查，并按实际尺寸测试。 */
body[data-theme="doomsong-ink"][data-doomsong-paper] {
  background-image: linear-gradient(#e9e3d6a6, #e9e3d6a6),
    url("/assets/doomsong-ui/paper-texture.webp");
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}

body[data-theme="doomsong-ink"] .paper-noise { display: none; }

/* 保持现有视图和权限相关元素的 hidden 语义。 */
body[data-theme="doomsong-ink"] [hidden] { display: none !important; }

body[data-theme="doomsong-ink"] :is(button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--rust-dark);
  outline-offset: 3px;
}

body[data-theme="doomsong-ink"] .doom-english-display {
  font-family: "Doomsong Display", Georgia, serif;
  font-weight: 400;
}

body[data-theme="doomsong-ink"] .doom-english-caption {
  font-family: "IM Fell Double Pica", Georgia, serif;
  font-weight: 400;
}

body[data-theme="doomsong-ink"] :is(.eyebrow, .section-index) {
  font-family: "IM Fell Double Pica SC", Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--rust-dark);
}

/* 首页：需要在 .hero-panel 中添加 picture.hero-art。 */
body[data-theme="doomsong-ink"] .hero-panel {
  min-height: 360px;
  padding: 32px clamp(24px, 6vw, 96px);
  background: var(--paper-light);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "eyebrow art" "title art" "copy art" "sequence art";
  gap: 16px clamp(24px, 4vw, 64px);
  align-items: center;
}

body[data-theme="doomsong-ink"] .hero-panel::before,
body[data-theme="doomsong-ink"] .hero-panel::after { content: none; }

body[data-theme="doomsong-ink"] .hero-panel .eyebrow { grid-area: eyebrow; margin: 0; }

body[data-theme="doomsong-ink"] .hero-panel h1 {
  grid-area: title;
  margin: 0;
  font: 900 clamp(40px, 5vw, 72px)/1.15 var(--serif);
  letter-spacing: -.035em;
}

body[data-theme="doomsong-ink"] .hero-panel h1 span {
  display: block;
  margin: .18em 0 0;
  font-size: .68em;
  color: var(--ink);
  -webkit-text-stroke: 0;
}

body[data-theme="doomsong-ink"] .hero-copy {
  grid-area: copy;
  max-width: 36em;
  margin: 0;
  color: var(--ink-soft);
  font: 400 15px/1.8 var(--sans);
}

body[data-theme="doomsong-ink"] .rule-sequence {
  grid-area: sequence;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: .03em;
}

body[data-theme="doomsong-ink"] .hero-art {
  grid-area: art;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2; /* 展示区域比例；图像真实宽高来自清单。 */
  max-height: 380px;
  min-width: 0;
  pointer-events: none;
}

body[data-theme="doomsong-ink"] .hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body[data-theme="doomsong-ink"] .entry-panel {
  padding: clamp(24px, 4vw, 52px);
  gap: clamp(20px, 3vw, 36px);
}

body[data-theme="doomsong-ink"] .entry-card {
  position: relative;
  padding: 28px;
  background: var(--paper-light);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 #1717141c;
}

body[data-theme="doomsong-ink"] .entry-card h2 {
  padding-right: 88px;
  min-height: 52px;
  margin-bottom: 16px;
  font-size: 25px;
  line-height: 1.3;
}

body[data-theme="doomsong-ink"] .entry-emblem {
  position: absolute;
  top: 22px;
  right: 24px;
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  pointer-events: none;
}

body[data-theme="doomsong-ink"] label { font-size: 13px; letter-spacing: .02em; }
body[data-theme="doomsong-ink"] :is(input, select, textarea) { font-size: 16px; }

body[data-theme="doomsong-ink"] :is(.primary-button, .secondary-button, .danger-button) {
  min-height: 44px;
  font-size: 15px;
  letter-spacing: .03em;
}

/* A04 细长图案在方形画布中留白较多；56px 展示框需按可见图案再次检查。 */
body[data-theme="doomsong-ink"] .brand-mark {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  color: var(--ink);
  background: var(--paper-light);
}

body[data-theme="doomsong-ink"] .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

body[data-theme="doomsong-ink"] :is(.room-header, .roster-panel, .battle-panel, .activity-panel, .character-dialog) {
  background: var(--paper-light);
}

body[data-theme="doomsong-ink"] .phase-banner {
  gap: 20px;
  background: var(--ink);
  color: var(--paper-light);
}

body[data-theme="doomsong-ink"] :is(.phase-copy p, .phase-number span) { color: #d8d2c6; }
body[data-theme="doomsong-ink"] #phase-kicker { color: #e7a18f; }
body[data-theme="doomsong-ink"] .phase-number strong { color: #e7a18f; }

body[data-theme="doomsong-ink"] .gm-controls button {
  min-height: 40px;
  font-size: 13px;
}

body[data-theme="doomsong-ink"] :is(.room-identity, .room-tools, .text-button, .participant-row) {
  font-size: 13px;
}

/* 仅调字号与纸面，保留 --character-color 和状态类。 */
body[data-theme="doomsong-ink"] :is(.character-meta, .character-note, .die-editor-head, .die-summary,
  .die-unavailable, .mini-button, .track-character-tag strong, .token-meta,
  .board-heading p:last-child, .tray-help, .tray-who, .rules-grid p) {
  font-size: 12px;
  line-height: 1.6;
}

body[data-theme="doomsong-ink"] :is(.stat-cell > span, .type-badge, .submission-badge, .die-state) {
  font-size: 12px;
  letter-spacing: .02em;
}

body[data-theme="doomsong-ink"] .stat-value-row strong {
  font-family: var(--sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
body[data-theme="doomsong-ink"] .stat-cell { padding: 6px; }
body[data-theme="doomsong-ink"] .stat-value-row { gap: 2px; }

body[data-theme="doomsong-ink"] .board-grid {
  grid-template-columns: repeat(6, minmax(132px, 1fr));
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

body[data-theme="doomsong-ink"] .phase-lane { min-width: 132px; }
body[data-theme="doomsong-ink"] .dice-token { min-width: 0; }
body[data-theme="doomsong-ink"] .token-stats {
  font-size: 8px;
  overflow-wrap: anywhere;
}
body[data-theme="doomsong-ink"] .lane-action { color: #e2ddd2; font-size: 12px; line-height: 1.5; }
body[data-theme="doomsong-ink"] .lane-empty { color: var(--ink-soft); font-size: 12px; }
body[data-theme="doomsong-ink"] .token-name { font-size: 14px; overflow-wrap: anywhere; }
body[data-theme="doomsong-ink"] .rules-grid strong { font-size: 14px; }

/* 骰盘底材；不触及 perspective / transform / transform-style / 动画结果。 */
body[data-theme="doomsong-ink"] .tray-stage {
  border: 3px solid #48433a;
  border-radius: 6px;
  background-color: #292824;
  background-image: url("/assets/doomsong-ui/responsive/tray-texture-512.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 16px #0004;
}

body[data-theme="doomsong-ink"] .tray-result {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* 可选角饰：仅放在有留白的稳定内层，避免与徽记/标题/关闭按钮重叠。 */
/* .doom-decorated 不加到原生 dialog 本身，以免覆盖模态定位。 */
body[data-theme="doomsong-ink"] .doom-decorated { position: relative; }
body[data-theme="doomsong-ink"] .doom-corner {
  position: absolute;
  top: 8px;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
}
body[data-theme="doomsong-ink"] .doom-corner--left { left: 8px; }
body[data-theme="doomsong-ink"] .doom-corner--right { right: 8px; }

/* A07 原图为 3:1，含较多透明边距；若改用裁切版，以清单实际比例为准。 */
/* 示例结构：独立 div.doom-divider > img；img 使用 A07，alt=""。 */
/* 这是纯装饰行，不要把该类加到包含关闭按钮的 .dialog-heading 上。 */
body[data-theme="doomsong-ink"] .doom-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 16px;
  pointer-events: none;
}
body[data-theme="doomsong-ink"] .doom-divider::before,
body[data-theme="doomsong-ink"] .doom-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
body[data-theme="doomsong-ink"] .doom-divider img {
  display: block;
  width: clamp(180px, 20vw, 260px);
  max-width: calc(100% - 24px);
  min-width: 0;
  height: auto;
  object-fit: contain;
}

body[data-theme="doomsong-ink"] .empty-state-art {
  display: block;
  width: min(100%, 180px);
  height: 125px;
  margin: 0 auto 12px;
  object-fit: contain;
  pointer-events: none;
}

/* 仅在 enterRoom 成功显示视图时添加 .doom-enter，一次后移除。 */
body[data-theme="doomsong-ink"] .doom-enter { animation: doom-page-enter 180ms ease-out both; }
@keyframes doom-page-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 920px) {
  body[data-theme="doomsong-ink"] .hero-panel {
    min-height: 0;
    padding: 28px 24px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "eyebrow" "title" "art" "copy" "sequence";
    gap: 14px;
  }
  body[data-theme="doomsong-ink"] .hero-panel h1 { font-size: clamp(36px, 7vw, 58px); }
  body[data-theme="doomsong-ink"] .hero-art {
    width: 100%;
    height: 200px;
    aspect-ratio: auto;
  }
}

@media (max-width: 700px) {
  body[data-theme="doomsong-ink"] .entry-panel { padding: 22px 16px; }
  body[data-theme="doomsong-ink"] .entry-card { padding: 24px; }
  body[data-theme="doomsong-ink"] .entry-card h2 { padding-right: 64px; font-size: 23px; }
  body[data-theme="doomsong-ink"] .entry-emblem { top: 22px; right: 20px; width: 56px; height: 56px; }
  body[data-theme="doomsong-ink"] .doom-corner { display: none; }
  body[data-theme="doomsong-ink"] .hero-art { height: 170px; }
  body[data-theme="doomsong-ink"] .empty-state-art { width: 140px; height: 100px; }
  body[data-theme="doomsong-ink"] :is(.text-button, .mini-button, .icon-button) { min-height: 40px; }
  body[data-theme="doomsong-ink"] .stat-step { width: 36px; height: 36px; }
  body[data-theme="doomsong-ink"] .stat-value-row { grid-template-columns: 36px minmax(0, 1fr) 36px; }
}

@media (max-width: 560px) {
  body[data-theme="doomsong-ink"] .hero-panel { padding: 24px 20px; }
  body[data-theme="doomsong-ink"] .hero-panel h1 { font-size: 38px; }
  body[data-theme="doomsong-ink"] .phase-banner { gap: 14px; padding: 16px; }
  body[data-theme="doomsong-ink"] .phase-copy h1 { font-size: 25px; line-height: 1.25; }
  body[data-theme="doomsong-ink"] .dialog-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="doomsong-ink"] .doom-enter { animation: none; }
  body[data-theme="doomsong-ink"] :is(.primary-button, .secondary-button, .danger-button) { transition: none; }
}

/* Integration: keep controls readable at the actual roster and mobile widths. */
body[data-theme="doomsong-ink"] .hero-panel .doom-english-display { font-size: 32px; letter-spacing: .04em; color: var(--ink); }
body[data-theme="doomsong-ink"] .hero-panel { max-height: none; }
body[data-theme="doomsong-ink"] .board-heading { position: relative; padding: 24px 46px; }
body[data-theme="doomsong-ink"] .board-heading::before,
body[data-theme="doomsong-ink"] .board-heading::after { content: ""; position: absolute; top: 4px; width: 42px; height: 42px; pointer-events: none; background: center / contain no-repeat; }
body[data-theme="doomsong-ink"] .board-heading::before { left: 4px; background-image: url('/assets/doomsong-ui/responsive/corner-left-128.webp'); }
body[data-theme="doomsong-ink"] .board-heading::after { right: 4px; background-image: url('/assets/doomsong-ui/responsive/corner-right-128.webp'); }
body[data-theme="doomsong-ink"] .character-head { flex-wrap: wrap; }
body[data-theme="doomsong-ink"] .character-identity { flex: 1 1 80px; }
body[data-theme="doomsong-ink"] .character-name { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
body[data-theme="doomsong-ink"] .character-head-actions { flex: 0 1 auto; }
body[data-theme="doomsong-ink"] .track-character-tag span:not(.submission-badge) { white-space: nowrap; font-size: 10px; }
body[data-theme="doomsong-ink"] .readiness-strip p,
body[data-theme="doomsong-ink"] .dice-pool-head > span { font-size: 12px; }
body[data-theme="doomsong-ink"] .board-grid:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
body[data-theme="doomsong-ink"] .empty-state p { margin: 0; }
body[data-theme="doomsong-ink"] .face-button { min-height: 34px; font-size: 15px; }
body[data-theme="doomsong-ink"] .tray-roll-button { min-height: 44px; }
body[data-theme="doomsong-ink"] .entry-message:empty { display: none; }
body[data-theme="doomsong-ink"] .entry-message:not(:empty) { max-width: calc(100vw - 40px); padding: 12px; background: var(--paper-light); border: 1px solid var(--rust); z-index: 30; }
@media (max-width: 1400px) and (min-width: 921px) {
  body[data-theme="doomsong-ink"] .workspace-grid { grid-template-columns: minmax(300px,.75fr) minmax(0,1.4fr); }
  body[data-theme="doomsong-ink"] .activity-panel { position: static; grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 700px) {
  body[data-theme="doomsong-ink"] .board-heading { padding: 18px; flex-wrap: wrap; }
  body[data-theme="doomsong-ink"] .board-heading::before,
  body[data-theme="doomsong-ink"] .board-heading::after { content: none; }
  body[data-theme="doomsong-ink"] .board-heading p:last-child { text-align: left; }
  body[data-theme="doomsong-ink"] .character-head-actions { width: 100%; justify-content: flex-start; }
  body[data-theme="doomsong-ink"] .entry-card h2 { min-height: 60px; }
  body[data-theme="doomsong-ink"] .dialog-heading { gap: 8px; }
  body[data-theme="doomsong-ink"] .dialog-heading .icon-button { flex: 0 0 36px; }
}