@charset "UTF-8";
/* 血染辩场 · 角色表
   风格：淡雅纸面 / 洋风沙龙。移动端优先，任何宽度下固定 3 列 8 行。
   卡片头部：竖排角色名（左侧带金脊线与菱形装饰）｜ 阵营色粗框头像
   （阵营标签在外框左下角，编号在右上角，特权徽记在右下角）。
   技能文本全宽直出。 */

:root {
  --paper:      #f6f1e6;
  --paper-deep: #ece3d2;
  --card:       #fffdf8;
  --card-edge:  #e6dcc6;
  --ink:        #372f26;
  --ink-soft:   #5f5648;
  --ink-faint:  #9c9080;
  --gold:       #b3902f;
  --gold-line:  #cdb475;
  --gold-edge:  #ddc793;
  --gold-soft:  #f5ead0;
  --shadow:     0 1px 2px rgba(90, 75, 45, .06), 0 6px 18px rgba(90, 75, 45, .07);

  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", "宋体", Georgia, serif;
  --sans:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", -apple-system,
           BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gap: 6px;
  --avatar: 56px;   /* 头像直径（含外框） */
  --ring: 3px;      /* 阵营色外框粗细 */
  --badge: 19px;    /* 角标直径 */
}

/* 阵营配色 */
.f-公民 { --f-main: #35618f; --f-deep: #1d3c5c; --f-soft: #e8f0f8; --f-edge: #adc6e0; }
.f-访客 { --f-main: #1f8073; --f-deep: #0f5049; --f-soft: #e1f1ed; --f-edge: #a2d5cc; }
.f-爪牙 { --f-main: #c9601f; --f-deep: #8a3d10; --f-soft: #fbe8db; --f-edge: #ecbe9c; }
.f-暗影 { --f-main: #8d2233; --f-deep: #56111d; --f-soft: #f6e0e3; --f-edge: #dfa9b2; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at 20% 8%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(226,211,180,.55), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
}

/* ---------- 页头 ---------- */
.site-header {
  padding: 16px 14px 9px;
  text-align: center;
}
.site-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.site-titlebar::before,
.site-titlebar::after {
  content: "";
  flex: 0 1 68px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line));
}
.site-titlebar::after { background: linear-gradient(90deg, var(--gold-line), transparent); }

.site-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  white-space: nowrap;
}
.site-sub {
  margin: 7px 0 0;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--gold);
  font-family: var(--serif);
}

/* ---------- 列标注（吸顶） ---------- */
.col-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  max-width: 1120px;
  margin: 0 auto;
  padding: 7px 8px;
  background: rgba(246, 241, 230, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-edge);
  box-shadow: 0 3px 10px rgba(120, 100, 60, .07);
}
.col-header__cell {
  position: relative;
  min-width: 0;
  padding: 2px 0 5px;
  text-align: center;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--gold);
}
.col-header__cell::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 25%, var(--gold-line) 75%, transparent);
  opacity: .75;
}

/* ---------- 夜间行动顺序轨道（页面最下方） ---------- */
.orders {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2px 8px 8px;
  display: grid;
  gap: 8px;
}
.orders[hidden] { display: none; }

.order {
  padding: 9px 10px 10px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(90, 75, 45, .05);
}
.order__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--gold);
  white-space: nowrap;
}
.order__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), rgba(205,180,117,0));
}

.order__row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
}
.order__row + .order__row { border-top: 1px dashed rgba(205, 180, 117, .35); }

.order__phase {
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 1px 5px;
  border: 1px solid var(--gold-edge);
  border-radius: 2px;
  background: var(--gold-soft);
  color: #7c6320;
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  white-space: nowrap;
}

.order__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  min-width: 0;
}

.step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 1px 6px;
  border: 1px solid var(--card-edge);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.55;
  white-space: nowrap;
}
/* 轨道箭头：画在相邻两步之间的空档里 */
.step + .step { margin-left: 14px; }
.step + .step::before {
  content: "›";
  position: absolute;
  left: -11px;
  top: 50%;
  margin-top: -.62em;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.2;
}
.step__code {
  font-family: var(--serif);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: .02em;
}
.step__label { font-size: 11px; }

/* 可点击的角色步骤：染阵营色 */
.step--role {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: var(--f-deep);
  font-weight: 600;
}
.step--role .step__code { color: var(--f-main); opacity: .8; }
.step--role:active { opacity: .6; }
.step--role:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 3px; }

@media (min-width: 700px) {
  .orders { padding: 4px 16px 16px; gap: 12px; }
  .order { padding: 12px 14px 13px; }
  .order__title { font-size: 14px; margin-bottom: 10px; }
  .order__phase { font-size: 11.5px; padding: 1px 7px; }
  .step, .step__label { font-size: 12.5px; }
  .step__code { font-size: 10.5px; }
}

@media (min-width: 900px) {
  .orders { grid-template-columns: 1fr 1fr; align-items: start; }
  .order__title { font-size: 15px; }
  .step, .step__label { font-size: 13px; }
}

/* ---------- 网格：任何宽度下都是 3 列 ---------- */
.sheet {
  max-width: 1120px;
  margin: 0 auto;
  padding: 9px 8px 12px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.load-msg {
  margin: 24px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-faint);
}
.load-msg[hidden] { display: none; }

/* ---------- 卡片 ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 7px 9px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 5px;
  box-shadow: var(--shadow);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .13s ease, box-shadow .13s ease;
}
/* 顶部阵营色缎带 */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--f-deep), var(--f-main) 45%, var(--f-deep));
}
.card:active { transform: translateY(1px); }
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.card--priv { border-color: var(--gold-edge); }

/* 头部：竖排名字 ｜ 头像 */
.card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
}

.card__name {
  position: relative;
  margin: 0;
  padding-left: 8px;      /* 让出左侧脊线 */
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-text-orientation: upright;
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .12em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
  white-space: nowrap;
}
/* 装饰：名字左侧一道渐隐金脊线 */
.card__name::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5%;
  bottom: 5%;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(205,180,117,0), var(--gold-line) 20%, var(--gold-line) 80%, rgba(205,180,117,0));
}
/* 装饰：脊线中央嵌一颗菱形 */
.card__name::after {
  content: "";
  position: absolute;
  left: -1.5px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  transform: rotate(45deg);
  background: var(--f-main);
  box-shadow: 0 0 0 2.5px var(--card);
}
.card--priv .card__name::after { background: var(--gold); }

/* 头像外框：粗阵营色圈 + 深色描边 + 投影 */
.card__frame {
  position: relative;
  flex: 0 0 auto;
  width: var(--avatar);
  height: var(--avatar);
  margin-left: 14px;   /* 与竖排名字拉开距离，并给左下角阵营牌留位 */
  margin-right: 3px;   /* 给右侧角标留位 */
}
.card__art {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--f-soft);
  border: var(--ring) solid var(--f-main);
  box-shadow: 0 0 0 1px var(--f-deep), 0 2px 6px rgba(70, 55, 30, .26);
}
.card--priv .card__art {
  box-shadow: 0 0 0 1px var(--f-deep), 0 0 0 3.5px var(--gold-soft),
              0 2px 7px rgba(120, 92, 25, .34);
}
.card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 6%;
  display: block;
}

/* 无立绘占位：阵营色纸面 + 角色首字 */
.placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 5px, transparent 5px 10px),
    var(--f-soft);
  color: var(--f-deep);
  font-family: var(--serif);
  font-size: calc(var(--avatar) * .42);
  font-weight: 700;
}

/* 阵营标签：横排小牌，嵌在外框左下角 */
.card__faction {
  position: absolute;
  left: -7px;
  bottom: -3px;
  z-index: 3;
  padding: 1px 5px;
  border-radius: 2px;
  background: linear-gradient(160deg, var(--f-main), var(--f-deep));
  color: #fff;
  font-family: var(--serif);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
  text-indent: .06em;
  white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--card), 0 1px 3px rgba(50, 38, 16, .34);
}

/* 编号：外框右上角 */
.card__id {
  position: absolute;
  top: -3px;
  right: -4px;
  z-index: 3;
  min-width: var(--badge);
  height: var(--badge);
  padding: 0 3px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--f-main), var(--f-deep));
  color: #fff;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  line-height: var(--badge);
  text-align: center;
  box-shadow: 0 0 0 1.5px var(--card), 0 1px 3px rgba(0,0,0,.3);
}

/* 特权：外框右下角金徽 */
.card__priv {
  position: absolute;
  bottom: -3px;
  right: -4px;
  z-index: 3;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  background: linear-gradient(160deg, #f8e7b2, #d5b45c 45%, #a8842c);
  color: #4a3810;
  font-family: var(--serif);
  font-size: 11.5px;
  font-weight: 700;
  line-height: var(--badge);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 0 0 1.5px var(--card), 0 1px 4px rgba(90, 68, 15, .45);
}

/* ---------- 技能文本：所有宽度下都直接显示 ---------- */
.card__text {
  width: 100%;
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--card-edge);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: justify;
  overflow-wrap: anywhere;
}

/* 稍宽的手机（≥ 390px） */
@media (min-width: 390px) {
  :root { --avatar: 60px; }
  .card__name { font-size: 18.5px; }
  .card__frame { margin-left: 15px; }
  .card__text { font-size: 12px; }
}

/* 极窄屏（≤ 340px） */
@media (max-width: 340px) {
  :root { --gap: 4px; --avatar: 48px; --badge: 17px; --ring: 2.5px; }
  .card { padding: 9px 5px 8px; }
  .card__frame { margin-left: 11px; margin-right: 2px; }
  .card__faction { left: -6px; font-size: 8.5px; padding: 0 4px; }
  .card__name { font-size: 15.5px; letter-spacing: .08em; padding-left: 7px; }
  .card__name::after { width: 5px; height: 5px; margin-top: -2.5px; }
  .card__text { font-size: 11px; line-height: 1.6; }
}

/* ---------- 平板 / 桌面 ---------- */
@media (min-width: 700px) {
  :root { --gap: 10px; --avatar: 80px; --ring: 4px; --badge: 24px; }
  .card { padding: 14px 12px 12px; }
  .card__frame { margin-left: 18px; margin-right: 5px; }
  .card__faction { left: -9px; font-size: 11.5px; padding: 1px 7px; }
  .card__name { font-size: 21.5px; padding-left: 11px; }
  .card__name::after { width: 7px; height: 7px; margin-top: -3.5px; left: -2px; }
  .card__id, .card__priv { font-size: 13px; }
  .card__text { font-size: 12.5px; line-height: 1.75; }
}

@media (min-width: 900px) {
  :root { --gap: 14px; --avatar: 96px; --ring: 4.5px; --badge: 27px; }
  .site-header { padding: 28px 16px 13px; }
  .site-title { font-size: 33px; }
  .site-titlebar::before, .site-titlebar::after { flex-basis: 110px; }
  .site-sub { font-size: 12px; }
  .col-header { padding: 10px 16px; }
  .col-header__cell { font-size: 14px; }
  .sheet { padding: 14px 16px 28px; }
  .card { padding: 16px 16px 14px; }
  .card__head { gap: 4px; }
  .card__frame { margin-left: 21px; margin-right: 6px; }
  .card__faction { left: -10px; font-size: 12.5px; padding: 2px 8px; }
  .card__name { font-size: 25px; letter-spacing: .14em; padding-left: 13px; }
  .card__name::after { width: 8px; height: 8px; margin-top: -4px; left: -2.5px; }
  .card__id, .card__priv { font-size: 14.5px; }
  .card__text { font-size: 13.5px; line-height: 1.8; margin-top: 12px; padding-top: 11px; }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 6px rgba(90,75,45,.09), 0 14px 30px rgba(90,75,45,.14);
  }
  .card--priv:hover {
    box-shadow: 0 3px 6px rgba(90,75,45,.09), 0 14px 30px rgba(140,110,30,.2);
  }
}

/* ---------- 详情浮层（立绘大图 + 大字技能文本） ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(52, 42, 28, .46);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade .16s ease;
}
.overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  box-shadow: 0 20px 56px rgba(55, 44, 24, .34);
  animation: rise .18s ease;
}
.modal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--f-deep), var(--f-main) 45%, var(--f-deep));
  z-index: 4;
}
.modal--priv { box-shadow: 0 20px 56px rgba(55, 44, 24, .34), inset 0 0 0 1px rgba(205,180,117,.5); }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal__close {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 6;
  width: 34px;
  height: 34px;
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background: rgba(255, 253, 248, .94);
  color: var(--ink-soft);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(80,65,35,.16);
}
.modal__close:active { background: var(--paper-deep); }

/* 立绘大图：底色取立绘白底，四边向纸面渐隐；
   图像整体上提并裁掉下缘，遮住部分立绘自带的水印。 */
.modal__art {
  position: relative;
  width: 100%;
  height: 252px;
  overflow: hidden;
  background: #fff;
}
.modal__art img {
  width: 100%;
  height: 114%;
  object-fit: contain;
  object-position: center top;
  display: block;
}
.modal__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      var(--card) 0,
      rgba(255,253,248,0) 17%,
      rgba(255,253,248,0) 83%,
      var(--card) 100%),
    linear-gradient(to bottom,
      rgba(255,253,248,.55) 0,
      rgba(255,253,248,0) 12%,
      rgba(255,253,248,0) 58%,
      rgba(255,253,248,.7) 84%,
      var(--card) 100%);
}
.modal__art .placeholder {
  font-size: 68px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.6) 0 6px, transparent 6px 12px),
    var(--f-soft);
}

.modal__body { position: relative; padding: 0 20px 22px; margin-top: -20px; }

.modal__plate {
  position: relative;
  padding-top: 16px;
  text-align: center;
}
.modal__plate::before {
  content: "";
  position: absolute;
  top: 8px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
}
.modal__plate::after {
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  transform: rotate(45deg);
  background: var(--f-main);
  box-shadow: 0 0 0 4px var(--card);
}
.modal--priv .modal__plate::after { background: var(--gold); }

.modal__idline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-faint);
}
.modal__id { font-family: var(--serif); color: var(--f-main); font-weight: 700; }
.modal__name {
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1.25;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
.modal__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.tag {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid var(--f-edge);
  border-radius: 2px;
  background: var(--f-soft);
  color: var(--f-deep);
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: .12em;
  text-indent: .12em;
  white-space: nowrap;
}
.badge-priv {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 2px;
  border: 1px solid rgba(150, 118, 40, .5);
  background: linear-gradient(160deg, #f6e4ac, #d5b45c 45%, #b18d33);
  color: #46340a;
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-indent: .14em;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: 0 1px 4px rgba(90,68,15,.28);
}
.badge-priv[hidden] { display: none; }

.modal__text {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--gold-soft);
  font-size: 15.5px;
  line-height: 1.75;
  text-align: justify;
  color: var(--ink);
}

@media (min-width: 900px) {
  .modal { max-width: 470px; }
  .modal__art { height: 312px; }
  .modal__name { font-size: 32px; }
}

body.is-locked { overflow: hidden; }