/* 底部抽屉：常驻栏 + 道具/线索网格 + 交互工作台 */

.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 1.2cqw;
  padding: .9cqh 0;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0), rgba(10, 8, 6, .92) 55%);
  transition: transform var(--dur) var(--ease-out);
}
.dock__btn {
  position: relative;
  padding: .7cqw 2cqw;
  font-size: 1cqw;
  letter-spacing: .22em;
  color: var(--paper-2);
  border: 1px solid rgba(200, 163, 90, .28);
  background: linear-gradient(180deg, rgba(46, 36, 24, .7), rgba(12, 10, 8, .85));
  transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.dock__btn::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -.55cqw;
  width: 3cqw; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.dock__btn:hover { color: var(--amber); border-color: var(--gold); }
.dock__btn:hover::after { opacity: 1; }
/* 有新东西进栏时，对应的常驻按钮闪一下 */
.dock__btn.is-new { animation: dock-pulse 1.8s var(--ease-out); }
@keyframes dock-pulse {
  0%, 100% { color: var(--paper-2); border-color: rgba(200, 163, 90, .28); }
  25%, 60% { color: var(--amber); border-color: var(--gold); box-shadow: 0 0 2.4cqw rgba(240, 178, 74, .4); }
}
.dock__btn--look { color: var(--gold); }
.dock__btn--icon {
  width: 4.4cqw;
  padding: .7cqw 0;
  letter-spacing: 0;
  font-size: 1.15cqw;
}
/* 关闭状态：文字与描边一起变暗，一眼能看出是"关" */
.dock__btn--icon[data-on="0"] {
  color: #5f4f3a;
  border-color: rgba(200, 163, 90, .14);
}
.dock__btn--icon[data-on="0"]::before {
  content: "";
  position: absolute;
  left: 22%; right: 22%; top: 50%;
  height: 1px;
  background: #7a6142;
  transform: rotate(-32deg);
}

/* ---------- 抽屉本体 ---------- */
.panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: 46cqh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(22, 18, 12, .97), rgba(8, 6, 5, .99));
  border-top: 1px solid var(--line);
  box-shadow: 0 -2cqh 6cqh rgba(0, 0, 0, .65);
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.panel[data-open="true"] { transform: translateY(0); }
/* 抽屉打开时常驻栏退场，收起后回来 */
.panel[data-open="true"] ~ .dock { opacity: 0; pointer-events: none; transform: translateY(3cqh); }

/* 明确的"收起"按钮，替掉原来那根看不出能点的横线 */
.panel__close {
  position: absolute;
  right: 1.4cqw;
  top: 1.2cqh;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5cqw;
  padding: .55cqw 1.1cqw;
  font-size: .95cqw;
  line-height: 1;
  letter-spacing: .22em;
  color: var(--paper-2);
  background: linear-gradient(180deg, rgba(52, 40, 26, .9), rgba(16, 12, 8, .95));
  border: 1px solid var(--line);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.panel__close i {
  width: 0; height: 0;
  margin-top: -.05cqh;
  border-left: .45cqw solid transparent;
  border-right: .45cqw solid transparent;
  border-top: .5cqw solid currentColor;
  transition: transform var(--dur-fast);
}
.panel__close:hover { color: var(--amber); border-color: var(--gold); transform: translateY(-1px); }
.panel__close:hover i { transform: translateY(1px); }

.panel__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.6cqw;
  /* 顶部留白，标签不贴面板上缘 */
  padding: 1.6cqh 1.8cqw 1.4cqh;
  min-height: 0;
}

/* 左侧：Tab + 网格 */
.panel__left { display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; gap: 1cqw; margin-bottom: 1cqh; flex: 0 0 auto; }
.tab {
  padding: .5cqw 1.4cqw;
  font-size: .95cqw;
  letter-spacing: .2em;
  color: var(--paper-3);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tab[data-active="true"] { color: var(--amber); border-bottom-color: var(--gold); }

.grid {
  flex: 1;
  display: grid;
  /* 手机端卡片至少 66px 宽，5 个字的道具名才放得下 */
  grid-template-columns: repeat(auto-fill, minmax(max(6.2cqw, 66px), 1fr));
  gap: .9cqw;
  overflow-y: auto;
  /* 顶部留出卡片 hover 上滑的空间，否则首行会被裁掉一截 */
  padding: .5cqw .4cqw 0 0;
  align-content: start;
}
.grid::-webkit-scrollbar { width: 4px; }
.grid::-webkit-scrollbar-thumb { background: rgba(200, 163, 90, .3); }

.card {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: .5cqw;
  border: 1px solid rgba(200, 163, 90, .22);
  background: radial-gradient(circle at 50% 35%, rgba(58, 45, 28, .55), rgba(14, 11, 8, .9));
  transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.card:hover { transform: translateY(-.3cqw); border-color: var(--gold); }
.card svg { width: 3.2cqw; height: 3.2cqw; }
.card__name {
  position: absolute;
  bottom: .35cqw;
  left: 0; right: 0;
  font-size: .72cqw;
  letter-spacing: .04em;
  text-align: center;
  color: var(--paper-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.is-held {
  border-color: var(--amber);
  box-shadow: 0 0 2cqw rgba(240, 178, 74, .35), 0 0 0 1px rgba(240, 178, 74, .5) inset;
}
/* 黑话线索：右上角标出来，未解开的打虚线边并写"待猜" */
.card.is-slang::after {
  content: "黑话";
  position: absolute;
  top: .3cqw;
  right: .3cqw;
  padding: 0 .3cqw;
  font-size: .66cqw;
  letter-spacing: 0;
  color: rgba(200, 163, 90, .6);
  border: 1px solid rgba(200, 163, 90, .28);
  background: rgba(8, 6, 4, .55);
}
.card.is-unsolved { border-style: dashed; }
.card.is-unsolved::after {
  content: "待猜";
  color: var(--amber);
  border-color: rgba(240, 178, 74, .5);
  animation: read-hint 2.6s var(--ease-in-out) infinite;
}

/* 未读线索：左上角一个亮点，点开过就消失（不占用"阅/待猜"角标的位置） */
.card.is-unread::before {
  content: "";
  position: absolute;
  top: .5cqw;
  left: .5cqw;
  width: .48cqw;
  height: .48cqw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 1cqw rgba(240, 178, 74, .85);
  animation: read-hint 2.6s var(--ease-in-out) infinite;
}

.card.is-new { animation: card-new .7s var(--ease-out); }

/* 可阅读道具的"翻阅"角标 */
.card__read {
  position: absolute;
  top: .3cqw;
  right: .3cqw;
  width: 2.4cqw;
  height: 2.4cqw;
  /* 手机端也要好点：至少 30px，外加一圈不可见的扩边 */
  min-width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  color: rgba(200, 163, 90, .55);
  background: rgba(8, 6, 4, .55);
  border: 1px solid rgba(200, 163, 90, .25);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.card__read svg { width: 60%; height: 60%; }
/* 扩大触控热区（伪元素不计入布局，只扩大命中范围） */
.card__read::before {
  content: "";
  position: absolute;
  inset: -5px;
}
.card__read:hover { color: var(--amber); border-color: var(--gold); background: rgba(8, 6, 4, .9); }
/* 未读时轻微脉动，提示"这里能翻" */
.card__read.is-unread {
  color: var(--amber);
  border-color: rgba(240, 178, 74, .6);
  animation: read-hint 2.6s var(--ease-in-out) infinite;
}
@keyframes read-hint {
  0%, 100% { box-shadow: 0 0 0 rgba(240, 178, 74, 0); }
  50%      { box-shadow: 0 0 .9cqw rgba(240, 178, 74, .55); }
}
@keyframes card-new {
  0%   { transform: scale(.6); opacity: 0; box-shadow: 0 0 0 rgba(240, 178, 74, 0); }
  60%  { transform: scale(1.06); box-shadow: 0 0 3cqw rgba(240, 178, 74, .6); }
  100% { transform: scale(1); }
}
.grid__empty {
  grid-column: 1 / -1;
  padding: 3cqh 0;
  text-align: center;
  font-size: .92cqw;
  letter-spacing: .16em;
  color: rgba(200, 163, 90, .35);
}

/* 右侧：工作台 */
.panel__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* 工作台垂直居中，避开右上角的收起按钮 */
  gap: 1.2cqh;
  padding: 0;
  border-left: 1px solid rgba(200, 163, 90, .14);
}
/* 选中道具的说明：手机端没有 hover，说明必须常驻可读 */
.item-info {
  width: 100%;
  max-width: 26cqw;
  padding: .7cqh 1cqw;
  background: rgba(0, 0, 0, .3);
  border-left: 2px solid rgba(200, 163, 90, .55);
  animation: info-in .22s var(--ease-out);
}
.item-info b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8cqw;
  margin-bottom: .35cqh;
  font-size: .92cqw;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--amber);
}
.item-info p {
  margin: 0;
  font-size: .8cqw;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--paper-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 手机端的主要阅读入口：放在名称右侧，比卡片角标好点且不占额外一行 */
.item-info__read {
  flex: 0 0 auto;
  margin: -.15cqh 0;
  padding: .3cqh .9cqw;
  min-height: 26px;
  font-size: .76cqw;
  letter-spacing: .18em;
  color: var(--amber);
  border: 1px solid rgba(200, 163, 90, .45);
  background: rgba(200, 163, 90, .08);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.item-info__read:hover {
  color: #1a1206;
  background: var(--gold);
  border-color: #e0c07a;
}
@keyframes info-in { from { opacity: 0; transform: translateY(-.4cqh); } to { opacity: 1; transform: none; } }

.slots { display: flex; align-items: center; gap: 1cqw; }
.slot {
  width: 7cqw; height: 7cqw;
  display: grid;
  place-items: center;
  font-size: .82cqw;
  letter-spacing: .1em;
  color: rgba(200, 163, 90, .3);
  border: 1px dashed rgba(200, 163, 90, .3);
  background: rgba(0, 0, 0, .35);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.slot.is-filled {
  border-style: solid;
  border-color: var(--gold);
  box-shadow: 0 0 2cqw rgba(200, 163, 90, .2) inset;
  color: var(--paper);
}
.slot svg { width: 3.4cqw; height: 3.4cqw; }
.slot__plus { color: rgba(200, 163, 90, .35); font-size: 1.2cqw; }
.panel__actions { display: flex; gap: 1cqw; }
.panel__hint {
  margin: 0;
  font-size: .82cqw;
  letter-spacing: .08em;
  color: rgba(200, 163, 90, .45);
  text-align: center;
  min-height: 2.4cqh;
  transition: color var(--dur-fast);
}
.panel__hint[data-kind="warn"] { color: #d98a6a; }
.panel__hint[data-kind="ok"] { color: #b9d69a; }

/* 抽屉打开时，提示条上移，避免被抽屉压住 */
.panel[data-open="true"] ~ .toast-wrap { bottom: 51cqh; }

/* 抽屉打开时，场景边缘按钮、字幕与光点退场，避免半截字/半截光晕露在抽屉上缘 */
.stage:has(.panel[data-open="true"]) .scene__edge,
.stage:has(.panel[data-open="true"]) .subtitle,
.stage:has(.panel[data-open="true"]) .scene__hotspots {
  opacity: 0;
  pointer-events: none;
}