/* =========================
   W.T.F. Lab Add-ons
   Paste at END of sd-doc.css
========================= */


.wtf-kickers{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.wtf-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  font-size:12px; font-weight:800; color:#111;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}


.wtf-small{ font-size: 13px; color:#374151; opacity:.95; }


.wtf-coldopen{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap:16px; margin: 14px 0 10px;
}
@media (max-width: 900px){ .wtf-coldopen{ grid-template-columns:1fr; } }


.wtf-host, .wtf-scoreboard{
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  padding: 14px;
}
.wtf-host-title{ font-weight:900; letter-spacing:.2px; margin-bottom:6px; }


.wtf-scoreboard{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.wtf-score-row{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed rgba(0,0,0,.14); }
.wtf-score-row:last-child{ border-bottom:0; }
.wtf-score-k{ opacity:.72; }
.wtf-score-v{ font-weight:800; }


.wtf-panel{
  border-radius: 16px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  padding: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.wtf-panel-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-end; margin-bottom:10px; }
.wtf-panel-title{ font-weight:900; }
.wtf-panel-sub{ font-size:12px; color:#475569; }


.wtf-meter-bar{
  height: 12px; border-radius: 999px;
  background: rgba(2,6,23,.10);
  border:1px solid rgba(0,0,0,.10);
  overflow:hidden;
  position:relative;
}
.wtf-meter-fill{
  display:block; height:100%;
  width: var(--p, 50%);
  background: linear-gradient(90deg, rgba(99,102,241,.70), rgba(236,72,153,.60), rgba(34,197,94,.60));
  border-radius:999px;
}
.wtf-meter-stats{
  margin-top:10px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.wtf-meter-stats .k{ opacity:.75; }
.wtf-meter-stats .v{ font-weight:900; float:right; }


.wtf-voice{
  margin-top:10px;
  padding:10px 12px;
  border-left: 4px solid rgba(236,72,153,.65);
  background: rgba(236,72,153,.06);
  border-radius: 10px;
}
.wtf-voice strong{ font-weight:900; }


.wtf-cam{ position:relative; overflow:hidden; }
.wtf-cam-tag{
  position:absolute; top:12px; right:12px;
  padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:900;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(34,197,94,.18);
}
.wtf-cam-body{ padding-top: 4px; }


/* Timeline layout */
.wtf-timeline{
  margin-top: 10px;
  display:flex; flex-direction:column; gap:14px;
}
.wtf-event{
  border-radius: 16px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.74);
  overflow:hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}
.wtf-event-head{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  gap:10px;
  align-items:center;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(219,234,254,.55), rgba(253,226,243,.45));
  border-bottom:1px solid rgba(0,0,0,.08);
}
@media (max-width:720px){
  .wtf-event-head{ grid-template-columns: 1fr; align-items:flex-start; }
}
.wtf-date{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:900; opacity:.9;
}
.wtf-title{ font-weight:900; }
.wtf-badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
@media (max-width:720px){ .wtf-badges{ justify-content:flex-start; } }


.wtf-badge{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.70);
  font-size:12px; font-weight:900;
}
.wtf-ok{ background: rgba(34,197,94,.14); }
.wtf-warn{ background: rgba(245,158,11,.16); }
.wtf-hot{ background: rgba(239,68,68,.14); }


.wtf-event-body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
}
@media (max-width:900px){ .wtf-event-body{ grid-template-columns:1fr; } }


.wtf-play h3, .wtf-replay h3{ margin-top:0; font-size: 14px; }
.wtf-play p{ margin: 8px 0; }


.wtf-margin{
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(15,23,42,.04);
}
.wtf-margin-title{
  font-weight: 900;
  font-size: 12px;
  text-transform: none;
  opacity: .92;
  margin-bottom: 6px;
}
.wtf-margin p{ margin:0; }


/* Quote block for “script replay” moments */
.wtf-quote{
  margin-top: 10px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(11,16,32,.05);
  padding: 10px 12px;
}
.wtf-quote-head{ font-weight:900; font-size:12px; margin-bottom:6px; opacity:.9; }
.wtf-quote blockquote{
  margin:0;
  padding-left: 12px;
  border-left: 4px solid rgba(99,102,241,.55);
  color:#111;
  line-height:1.6;
}


/* Evidence vault */
.wtf-vault{
  margin: 10px 0;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  padding: 10px 12px;
}
.wtf-vault summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.wtf-vault summary::-webkit-details-marker{ display:none; }
.wtf-vault pre{
  margin-top:10px;
  background:#0b1020; color:#e6edf3;
  border-radius:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
}

/* =========================
   FIX: grid-2 两列卡片高度不齐
   Paste at END of sd-doc.css
========================= */


/* 1) 强制 grid-2 变成真正的 CSS Grid，两列同一行会自动对齐高度 */
.grid-2{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch; /* 默认就是 stretch，这里写死防止被覆盖 */
}


/* 移动端 */
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}


/* 2) 子元素必须允许撑满行高 */
.grid-2 > *{
  height: 100%;
  min-height: 0;
}


/* 3) 卡片本体改成 flex column，内部结构才能“把底部那块顶下去” */
.grid-2 .wtf-panel{
  height: 100%;
  display: flex;
  flex-direction: column;
}


/* 4) 让 body 区域吃掉剩余高度（不同卡用不同 body 类名，统一兜底） */
.grid-2 .wtf-panel > .wtf-meter-body,
.grid-2 .wtf-panel > .wtf-cam-body,
.grid-2 .wtf-panel > .wtf-panel-body{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}


/* 5) 把“旁白框”压到底部：视觉上两张卡更齐整 */
.grid-2 .wtf-panel .wtf-voice{
  margin-top: auto;
}

/* =========================
   FIX: Copy-Paste Cam 里 LIVE 胶囊压到文字
========================= */


/* 方案 A：保持胶囊浮在右上角，但给正文留出顶部空间 */
.wtf-cam .wtf-cam-body{
  position: relative;
  padding-top: 34px;   /* 给 LIVE 胶囊让位；不够就 38px */
}


/* LIVE 胶囊钉在右上角 */
.wtf-cam .wtf-cam-tag{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  line-height: 1;      /* 防止自己变高 */
  white-space: nowrap; /* 防止 LIVE 断行 */
}


/* 第一段小字别顶到胶囊下面（更保险） */
.wtf-cam .wtf-small{
  margin-top: 0;
}



/* =========================================================
   W.T.F. Lab add-on styles (paste at END of sd-doc.css)
   - funny HUD vibes + receipts-lab aesthetics
========================================================= */


/* ---- Base: wtf panel shell (works with your existing .frost vibe) ---- */
.wtf-panel{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  backdrop-filter: blur(10px) saturate(140%);
}


/* top highlight + subtle “lab film” texture */
.wtf-panel::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(249,168,212,.35), transparent 55%),
    radial-gradient(820px 320px at 100% 10%, rgba(147,197,253,.28), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  opacity:.85;
  pointer-events:none;
}
.wtf-panel::after{
  /* “lab scan / film grain” */
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.035) 0px,
      rgba(0,0,0,.035) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity:.10;
  pointer-events:none;
}


/* funny micro-tilt on hover (desktop only) */
@media (hover:hover){
  .wtf-panel:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 70px rgba(0,0,0,.26);
  }
}


/* ---- Head layout ---- */
.wtf-panel-head{
  position: relative;
  padding: 16px 18px 10px;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.wtf-panel-title{
  font-weight: 900;
  letter-spacing: .2px;
  color:#0b0b0c;
}
.wtf-panel-sub{
  color: rgba(17,24,39,.68);
  font-size: 13px;
  white-space: nowrap;
}


/* A tiny “SATIRE” stamp corner (optional but funny) */
.wtf-panel .wtf-stamp{
  position:absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color:#111;
  background: linear-gradient(90deg, rgba(253,226,243,.95), rgba(219,234,254,.95));
  border:1px solid rgba(0,0,0,.06);
}


/* ---- Body ---- */
.wtf-panel-body,
.wtf-meter-body,
.wtf-cam-body{
  position: relative;
  padding: 14px 18px 18px;
  min-height: 0;
}


/* Narrator callout: “snark card” */
.wtf-voice{
  margin-top: 14px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  background: rgba(249,168,212,.16);
  border: 1px solid rgba(249,168,212,.35);
  color:#111;
  position: relative;
}
.wtf-voice::before{
  content:"";
  position:absolute; left: 0; top: 10px; bottom: 10px;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(249,168,212,.95), rgba(147,197,253,.85));
}


/* small text used in your snippet */
.wtf-small{
  font-size: 13px;
  color: rgba(17,24,39,.78);
  line-height: 1.6;
}


/* =========================================================
   LIVE pill fix + make it fun
========================================================= */
.wtf-cam .wtf-cam-body{
  position: relative;
  padding-top: 40px; /* reserve space so LIVE never overlaps text */
}


/* LIVE badge: top-right “on-air” */
.wtf-cam .wtf-cam-tag{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  line-height: 1;
  color: #083b2a;
  background: linear-gradient(90deg, rgba(167,243,208,.95), rgba(220,252,231,.95));
  border: 1px solid rgba(16,185,129,.35);
  box-shadow: 0 10px 26px rgba(16,185,129,.20);
  white-space: nowrap;
  user-select: none;
}


/* pulse dot */
.wtf-cam .wtf-cam-tag::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display:inline-block;
  margin-right: 8px;
  background: rgba(16,185,129,.95);
  box-shadow: 0 0 0 0 rgba(16,185,129,.55);
  animation: wtfPulse 1.2s ease-in-out infinite;
  transform: translateY(-.5px);
}
@keyframes wtfPulse{
  0%{ box-shadow: 0 0 0 0 rgba(16,185,129,.55); opacity:.9; }
  70%{ box-shadow: 0 0 0 12px rgba(16,185,129,0); opacity:1; }
  100%{ box-shadow: 0 0 0 0 rgba(16,185,129,0); opacity:.9; }
}


/* =========================================================
   Combat Report styles (stars, stats, skills)
========================================================= */


/* stats grid */
.wtf-stats{
  display: grid;
  gap: 12px;
}
.wtf-stat{
  display:grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.06);
}
@media (max-width: 620px){
  .wtf-stat{ grid-template-columns: 1fr; }
}
.wtf-stat-k{
  font-weight: 900;
  color:#0b0b0c;
}
.wtf-stat-note{
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(17,24,39,.70);
}


/* stars */
.wtf-stars{
  display:flex;
  gap: 2px;
  font-size: 16px;
  align-items:center;
}
.wtf-stars span{
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.12));
}
.wtf-stars span.off{
  opacity: .22;
  filter: grayscale(1);
}


/* Skill book blocks */
.wtf-skill-h{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  color:#0b0b0c;
}
.wtf-skill-group + .wtf-skill-group{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.12);
}


.wtf-skill{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(147,197,253,.10);
  border: 1px solid rgba(147,197,253,.28);
  margin: 10px 0;
  position: relative;
}
.wtf-skill::before{
  content:"";
  position:absolute; left: 0; top: 10px; bottom: 10px;
  width: 4px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(147,197,253,.95), rgba(249,168,212,.85));
  opacity: .9;
}


.wtf-skill-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.wtf-skill-name{
  font-weight: 900;
  color:#0b0b0c;
}
.wtf-skill-meta{
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color:#111;
  background: linear-gradient(90deg, rgba(253,226,243,.95), rgba(219,234,254,.95));
  border:1px solid rgba(0,0,0,.06);
  white-space: nowrap;
}
.wtf-skill-desc{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(17,24,39,.80);
  line-height: 1.6;
}


/* Passive list */
.wtf-skill-list{
  margin: 0;
  padding-left: 18px;
}
.wtf-skill-list li{
  margin: 8px 0;
  color: rgba(17,24,39,.82);
}


/* “Drops & Outcome” card */
.wtf-drop{
  margin-top: 16px;
  padding: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
}
.wtf-drop h3{
  margin: 0 0 10px;
  font-weight: 900;
}


/* tiny fun: “loot sparkle” */
.wtf-drop::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(10px 10px at 18% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(8px 8px at 82% 28%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(7px 7px at 66% 80%, rgba(255,255,255,.7), transparent 60%);
  opacity:.35;
}


/* =========================================================
   Optional: make Boomerang/Copy-Paste panels look like “meters”
   (If you already have progress bars, these won’t break them.)
========================================================= */
.wtf-meter .wtf-panel-body,
.wtf-cam  .wtf-panel-body,
.wtf-combat .wtf-panel-body,
.wtf-skills .wtf-panel-body{
  display:flex;
  flex-direction: column;
  min-height: 0;
}


/* pin narrator to bottom for consistent card height aesthetics */
.wtf-panel .wtf-voice{
  margin-top: auto;
}

/* =========================
   Fix: Skill meta pill overflow / overlap
   - allow wrap, clamp width, drop to next line on small screens
========================= */


/* 技能卡顶部：允许换行，避免 pill 把标题挤爆 */
.wtf-skill-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;              /* ✅关键：允许换行 */
}


/* 标题：允许占满一行，不被 pill 压缩到奇怪断行 */
.wtf-skill-name{
  flex: 1 1 260px;              /* ✅宽度不足时先让标题独占 */
  min-width: 0;
}


/* pill：限制最大宽度 + 可换行 + 不撑破容器 */
.wtf-skill-meta{
  flex: 0 1 auto;
  max-width: 100%;              /* ✅关键：不允许超过卡片宽度 */
  white-space: normal;          /* ✅允许换行 */
  overflow-wrap: anywhere;      /* ✅长词也能断 */
  line-height: 1.15;
  padding: 6px 10px;
}


/* 手机窄屏：pill 直接掉到下一行（更像“状态条”） */
@media (max-width: 520px){
  .wtf-skill-meta{
    width: 100%;
    text-align: center;
  }
}

/* =========================
   Fix: wtf-panel sub text overflow on small screens
   target: .wtf-panel-sub
========================= */


.wtf-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;          /* ✅关键：允许换行 */
}


/* 标题那一组（title + sub）尽量占满一行 */
.wtf-panel-title{
  flex: 1 1 220px;
  min-width: 0;
}


/* 小字：必须允许换行，且不要被挤成一条细缝 */
.wtf-panel-sub{
  flex: 1 1 100%;
  display:block;
  min-width: 0;
  white-space: normal;      /* ✅允许换行 */
  overflow-wrap: anywhere;  /* ✅长词/特殊符号也能断 */
  line-height: 1.25;
}


/* 如果你面板里有右侧小标签（比如 LIVE），让它不压住文字 */
.wtf-panel-head .wtf-cam-tag,
.wtf-panel-head .wtf-tag,
.wtf-panel-head .wtf-pill{
  flex: 0 0 auto;
  align-self: flex-start;
}


/* 更窄屏：sub 字号略收一点点，避免“几行太高” */
@media (max-width: 520px){
  .wtf-panel-sub{ font-size: 12px; opacity: .92; }
}

.wtf-silence .wtf-silence-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed rgba(0,0,0,.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.wtf-silence .wtf-silence-row:last-child{ border-bottom:0; }
.wtf-silence .k{ opacity:.72; }
.wtf-silence .v{ font-weight:900; }



/* =========================
   FIX: Meter stats 每行只显示 1 组 k/v（不再一行两个）
   Paste at END of wtf.css
========================= */


.wtf-meter-stats{
  display: grid;
  grid-template-columns: 1fr;     /* ✅ 一行一个 */
  gap: 8px;
}


/* 每一行：k 左 v 右 */
.wtf-meter-stats > div{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}


/* 左侧 key：允许长文本换行 */
.wtf-meter-stats .k{
  opacity: .75;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}


/* 右侧 value：尽量保持一行，别乱跳 */
.wtf-meter-stats .v{
  font-weight: 900;
  flex: 0 0 auto;
  float: none !important;        /* ✅ 干掉你旧的 float:right */
  white-space: nowrap;
}

/* ===== Red Flag Comparator ===== */
.wtf-compare{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 6px;
}
@media (max-width: 900px){
  .wtf-compare{ grid-template-columns: 1fr; }
}


.wtf-shot img{
  width:100%;
  height:auto;
  border-radius: 14px;
  display:block;
}


.wtf-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
}
.wtf-bullets li{ margin: 6px 0; }


.wtf-callout{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.wtf-callout-title{
  font-weight: 700;
  margin-bottom: 6px;
  opacity: .92;
}


.wtf-note{ opacity: .75; margin-top: 8px; }