/* ---------- 外层卷轴 ---------- */
lq {
  --sha: #b23a48;
  --sha-l: #e85a71;
  --yan: #7a2a35;
  --paper: #f5efe4;
  --paper-2: #ede3d0;
  --ink: #221820;
  --moss: #3d4f47;
  --gold: #c9a44a;
  --gold-l: #e6c674;
  --mist: #a89b8a;
  --purple: #3a2838;

  display: block;
  position: relative;
  margin: 8px 0;
  padding: 20px 14px 24px;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 18% 8%, rgba(230,198,116,.10), transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(178,58,72,.08), transparent 55%),
    repeating-linear-gradient(43deg, rgba(122,42,53,.018) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-47deg, rgba(122,42,53,.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #f7f1e6 0%, #ede3d0 100%);
  border: 1px solid rgba(122,42,53,.35);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(245,239,228,.55),
    inset 0 0 48px rgba(178,58,72,.05),
    0 4px 18px rgba(42,24,32,.14);
  animation: lqIn .6s ease-out;
  overflow: visible;
}
lq::before, lq::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .16;
}
lq::before {
  top: -4px; right: -4px;
  width: 96px; height: 96px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8 L54 26 L70 20 L62 36 L80 42 L64 50 L74 66 L58 60 L54 82 L50 66 L46 82 L42 60 L26 66 L36 50 L20 42 L38 36 L30 20 L46 26 Z' fill='%23b23a48'/></svg>");
  transform: rotate(18deg);
}
lq::after {
  bottom: -6px; left: -6px;
  width: 78px; height: 78px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8 L54 26 L70 20 L62 36 L80 42 L64 50 L74 66 L58 60 L54 82 L50 66 L46 82 L42 60 L26 66 L36 50 L20 42 L38 36 L30 20 L46 26 Z' fill='%237a2a35'/></svg>");
  transform: rotate(-155deg);
  opacity: .12;
}

/* ---------- 顶部状态栏 ---------- */
lq .hd {
  position: relative;
  margin: 4px 0 14px;
  padding: 10px 14px 12px;
  background: linear-gradient(90deg, rgba(178,58,72,.10), rgba(178,58,72,.02) 45%, transparent);
  border-left: 3px solid var(--sha);
  border-radius: 0 2px 2px 0;
  font-size: 14px;
}
lq .hd::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sha), transparent);
  opacity: .5;
}
lq .hd p {
  margin: 2px 0;
  color: #4a3038;
  letter-spacing: .3px;
}

/* ---------- 折叠面板 ---------- */
lq details {
  margin: 10px 0;
  border: 1px solid rgba(122,42,53,.22);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,251,242,.55), rgba(232,223,208,.35));
  box-shadow: 0 1px 2px rgba(122,42,53,.06);
  overflow: visible;
}
lq summary {
  position: relative;
  list-style: none;
  padding: 9px 14px 9px 42px;
  font-size: 15px;
  font-weight: 600;
  color: var(--yan);
  cursor: pointer;
  background: linear-gradient(90deg, rgba(178,58,72,.07), transparent 72%);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
  user-select: none;
  letter-spacing: .5px;
}
lq summary::-webkit-details-marker { display: none; }
lq summary::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #c94858 0%, #7a2a35 100%);
  border: 1px solid rgba(60,20,25,.5);
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.18);
}
lq summary::after {
  content: "❋";
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: rgba(245,239,228,.9);
  transition: transform .4s ease, color .3s;
}
lq details[open] > summary {
  border-bottom-color: rgba(201,164,74,.4);
  background: linear-gradient(90deg, rgba(178,58,72,.14), rgba(201,164,74,.08) 55%, transparent);
}
lq details[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
  color: var(--gold-l);
}
lq details[open] > *:not(summary) {
  animation: openDown .38s ease-out;
}

/* 嵌套（隐私）面板：更墨紫的调子 */
lq details details {
  margin: 10px 8px 6px;
  background: linear-gradient(180deg, rgba(58,40,56,.06), rgba(42,30,42,.02));
  border-color: rgba(58,40,56,.35);
}
lq details details > summary {
  color: var(--purple);
  background: linear-gradient(90deg, rgba(58,40,56,.10), transparent 72%);
  font-size: 14px;
}
lq details details > summary::before {
  background: linear-gradient(135deg, #5a3f55 0%, #2a1e2a 100%);
}

/* ---------- 分组与小标题 ---------- */
lq .grp {
  padding: 8px 12px 6px;
  border-bottom: 1px dashed rgba(178,58,72,.15);
}
lq .grp:last-child { border-bottom: none; }
lq .gt {
  position: relative;
  padding: 4px 0 6px 16px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--yan);
  letter-spacing: .8px;
}
lq .gt::before {
  content: "";
  position: absolute;
  left: 2px; top: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e85a71, #7a2a35);
  box-shadow: 0 0 5px rgba(178,58,72,.55);
}
lq .gt::after {
  content: "";
  position: absolute;
  left: 16px; right: 4px; bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, rgba(178,58,72,.32), transparent 85%);
}
lq .grp p {
  margin: 3px 0;
  font-size: 14px;
  color: #3a252c;
  line-height: 1.72;
}

/* ---------- 正文卷心 ---------- */
lq .story {
  position: relative;
  margin: 14px 0;
  padding: 16px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255,251,242,.55), rgba(245,239,228,.18)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(122,42,53,.028) 27px 28px);
  border-top: 1px solid rgba(201,164,74,.35);
  border-bottom: 1px solid rgba(201,164,74,.35);
}
lq .story::before, lq .story::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
}
lq .story::before { top: -1px; }
lq .story::after { bottom: -1px; }
lq .story p {
  margin: 8px 0;
  font-size: 15.5px;
  line-height: 1.88;
  text-indent: 2em;
  color: #1e1418;
  letter-spacing: .3px;
}

/* ---------- 台词 ---------- */
lq b.mc {
  display: inline;
  padding: 0 4px;
  margin: 0 1px;
  color: var(--sha);
  font-weight: 600;
  font-style: normal;
  background: linear-gradient(90deg, rgba(232,90,113,.10), transparent 82%);
  text-shadow: 0 0 1px rgba(178,58,72,.18);
}
lq b.npc {
  display: inline;
  padding: 0 4px;
  margin: 0 1px;
  color: #1e5a6b;
  font-weight: 600;
  font-style: normal;
  background: rgba(30,90,107,.08);
  border-radius: 2px;
}

/* ---------- 法术/咒文块 ---------- */
lq v {
  display: block;
  position: relative;
  margin: 14px 6px;
  padding: 16px 44px;
  text-align: center;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 2px;
  color: var(--gold-l);
  background:
    radial-gradient(ellipse at center, rgba(201,164,74,.10), transparent 70%),
    linear-gradient(135deg, #1a1120 0%, #2a1e2a 50%, #1a1120 100%);
  border: 1px solid rgba(201,164,74,.45);
  border-radius: 3px;
  box-shadow:
    inset 0 0 22px rgba(201,164,74,.10),
    inset 0 0 0 1px rgba(201,164,74,.18),
    0 2px 10px rgba(0,0,0,.22);
  text-shadow: 0 0 6px rgba(230,198,116,.42);
}
lq v::before, lq v::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px; height: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='%23c9a44a' stroke-width='.5'/><circle cx='12' cy='12' r='6.5' fill='none' stroke='%23c9a44a' stroke-width='.4'/><circle cx='12' cy='12' r='2.5' fill='none' stroke='%23e6c674' stroke-width='.5'/><path d='M12 2 L12 22 M2 12 L22 12 M4.9 4.9 L19.1 19.1 M4.9 19.1 L19.1 4.9' stroke='%23c9a44a' stroke-width='.35' opacity='.7'/></svg>");
  background-size: contain;
  opacity: .78;
  animation: runeSpin 14s linear infinite;
}
lq v::before { left: 10px; transform: translateY(-50%); }
lq v::after { right: 10px; transform: translateY(-50%); animation-direction: reverse; }

/* ---------- 术语气泡 info ---------- */
lq info {
  position: relative;
  display: inline-block;
  margin: 0 2px;
  padding: 1px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #f5efe4;
  background: linear-gradient(135deg, #7a2a35, #b23a48);
  border: 1px solid rgba(50,15,20,.5);
  border-radius: 2px;
  cursor: help;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.16);
  transition: transform .25s, box-shadow .25s;
  vertical-align: baseline;
  text-indent: 0;
}
lq info:hover, lq info:focus {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 10px rgba(178,58,72,.32);
}
lq info n { display: inline; font-style: normal; }

/* 不同分类玉牌配色 */
lq info[c="realm"]    { background: linear-gradient(135deg, #2f4a42, #4d6b60); border-color: rgba(30,50,45,.6); }
lq info[c="aptitude"] { background: linear-gradient(135deg, #5a4370, #8168a0); border-color: rgba(50,30,60,.6); }
lq info[c="talent"]   { background: linear-gradient(135deg, #4a3a6b, #6b5a9a); border-color: rgba(40,25,60,.6); }
lq info[c="method"]   { background: linear-gradient(135deg, #8a6a2a, #c9a44a); color: #2a1e2a; border-color: rgba(80,55,20,.6); text-shadow: 0 1px 0 rgba(255,240,200,.25); }
lq info[c="power"]    { background: linear-gradient(135deg, #7a2a35, #b23a48); }
lq info[c="treasure"] { background: linear-gradient(135deg, #3a5a5f, #5a8a90); border-color: rgba(25,45,50,.6); }
lq info[c="elixir"]   { background: linear-gradient(135deg, #a04a35, #d97050); border-color: rgba(70,25,15,.6); }
lq info[c="check"], lq info[c="count"] { background: linear-gradient(135deg, #5a4a4a, #7a6a6a); font-size: 12px; }

/* 展开卷 */
lq info pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) scaleY(.82);
  transform-origin: bottom center;
  min-width: 220px;
  max-width: min(320px, 84vw);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 400;
  color: #ede3d0;
  background: linear-gradient(180deg, #2a1e2a, #17101a);
  border: 1px solid rgba(201,164,74,.38);
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 0 0 1px rgba(201,164,74,.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s, transform .28s cubic-bezier(.2,.9,.3,1.1), visibility .25s;
  z-index: 9999;
  white-space: normal;
  text-align: left;
  letter-spacing: .3px;
  line-height: 1.65;
}
lq info pop::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: #17101a;
  border-right: 1px solid rgba(201,164,74,.38);
  border-bottom: 1px solid rgba(201,164,74,.38);
}
lq info:hover pop,
lq info:focus pop,
lq info:focus-within pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scaleY(1);
  pointer-events: auto;
}
lq info pop r {
  display: block;
  position: relative;
  padding: 4px 0 4px 14px;
  margin: 2px 0;
  color: #d8ccb8;
  font-style: normal;
}
lq info pop r::before {
  content: "";
  position: absolute;
  left: 2px; top: 13px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-l);
  box-shadow: 0 0 4px rgba(230,198,116,.55);
}
lq info pop r + r { border-top: 1px dashed rgba(201,164,74,.16); }

/* ---------- 印章 tag ---------- */
lq tag {
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  color: #f5efe4;
  background: linear-gradient(135deg, #b23a48, #7a2a35);
  border: 1px solid rgba(50,15,20,.45);
  border-radius: 2px;
  transform: rotate(-1.2deg);
  box-shadow: inset 0 0 5px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.14);
  transition: transform .2s, box-shadow .2s;
  vertical-align: baseline;
  text-indent: 0;
}
lq tag:hover {
  transform: rotate(-1.2deg) translateY(1px);
  box-shadow: inset 0 0 8px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.1);
}
lq tag[t="ally"]  { background: linear-gradient(135deg, #c94858, #7a2a35); }
lq tag[t="power"] { background: linear-gradient(135deg, #4d6b60, #2a3830); }
lq tag[t="big"]   { background: linear-gradient(135deg, #e0b555, #8a6a2a); color: #2a1e2a; text-shadow: 0 1px 0 rgba(255,240,200,.35); }
lq tag[t="mid"]   { background: linear-gradient(135deg, #7a688a, #4a3f5a); }
lq tag[t="chap"]  { background: linear-gradient(135deg, #7a2a35, #4a181e); }
lq tag[t="act"]   { background: linear-gradient(135deg, #3a2a30, #221820); border-color: rgba(201,164,74,.4); color: var(--gold-l); }

/* ---------- 秘密 ---------- */
lq secret {
  display: inline-block;
  padding: 0 6px;
  color: #3a2838;
  background: linear-gradient(90deg, #4a3a48, #3a2838);
  border-radius: 2px;
  filter: blur(3.5px);
  transition: filter .5s ease, color .5s, background .5s;
  cursor: help;
  user-select: none;
  position: relative;
}
lq secret:hover, lq secret:focus {
  filter: blur(0);
  color: #ede3d0;
  background: linear-gradient(90deg, #2a1e2a, #17101a);
  user-select: text;
}

/* ---------- 行动签 choice ---------- */
lq choice {
  display: inline-block;
  position: relative;
  padding: 2px 8px 2px 22px;
  color: #3a2028;
  font-size: 14px;
  border-bottom: 1px dashed rgba(178,58,72,.42);
  transition: color .25s, background .25s, padding .25s, border-color .25s;
  cursor: pointer;
}
lq choice::before {
  content: "⚘";
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  color: var(--sha);
  font-size: 12px;
  opacity: .65;
  transition: transform .35s, opacity .3s, color .3s;
}
lq choice:hover {
  color: var(--sha);
  background: linear-gradient(90deg, rgba(232,90,113,.14), rgba(232,90,113,.03) 82%, transparent);
  border-bottom-color: var(--sha);
  padding-left: 26px;
}
lq choice:hover::before {
  content: "❁";
  color: var(--sha-l);
  opacity: 1;
  transform: translateY(-50%) rotate(90deg);
}

/* ---------- 建议行动分组的一点补强 ---------- */
lq details:last-of-type .grp p {
  margin: 6px 0;
  padding-left: 4px;
  line-height: 1.75;
}

/* ---------- 动画 ---------- */
@keyframes lqIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes openDown {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes runeSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* ---------- 移动端：气泡改为屏幕居中 ---------- */
@media (max-width: 640px) {
  lq info pop {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) scale(.9);
    transform-origin: center center;
    max-width: 86vw;
    width: max-content;
    min-width: 200px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(201,164,74,.12);
  }
  lq info pop::after { display: none; }
  lq info:hover pop,
  lq info:focus pop,
  lq info:focus-within pop {
    transform: translate(-50%, -50%) scale(1);
  }
}