/* ============================================================
   徐十七电竞 · 至尊刮刮乐
   主视觉 / 骰子台 / 刮面 / 规则
   ============================================================ */

:root {
  --ink: #0b0907;
  --ink-2: #120d08;
  --iron: #1c1712;
  --gold: #d8a24b;
  --gold-l: #f3d796;
  --gold-d: #8a6a33;
  --gold-ink: #2a1b0a;
  --blood: #b3352a;
  --bone: #ebdfc7;
  --bone-dim: #b7a98c;
  --line: rgba(216, 162, 75, 0.32);
  --line-soft: rgba(216, 162, 75, 0.14);
  --font-body: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-hud: "Bahnschrift", "DIN Alternate", "Oswald", "Arial Narrow", "Microsoft YaHei", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: #0b0907;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; }

/* ---------------------------------------------------------- 背景层 */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 46% at 50% -6%, rgba(216, 162, 75, 0.20), transparent 62%),
    radial-gradient(70% 34% at 50% 8%, rgba(139, 96, 38, 0.24), transparent 70%),
    radial-gradient(120% 60% at 50% 100%, rgba(60, 34, 12, 0.35), transparent 70%),
    linear-gradient(180deg, #100b07 0%, #0b0907 42%, #080605 100%);
}
.bg__haze {
  position: absolute;
  inset: -10% -20% auto;
  height: 60vh;
  background: radial-gradient(closest-side, rgba(243, 215, 150, 0.16), transparent 72%);
  filter: blur(30px);
}
.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(216, 162, 75, 0.055) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(216, 162, 75, 0.045) 0 1px, transparent 1px 64px);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 78%);
}
.bg__noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rail { display: none; }

/* ---------------------------------------------------------- 版面 */

.poster {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 14px 40px;
}

/* ---------------------------------------------------------- 顶部 HUD */

.hud-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px 0;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--gold-d);
}
.hud-strip__tag { color: var(--gold); }
.hud-strip__ticks {
  flex: 1;
  height: 5px;
  background: repeating-linear-gradient(90deg, rgba(216, 162, 75, 0.5) 0 2px, transparent 2px 7px);
  mask-image: linear-gradient(90deg, #000, #000 70%, transparent);
}
.hud-strip__serial { color: rgba(183, 169, 140, 0.75); }

/* ---------------------------------------------------------- 主视觉 */

.hero {
  position: relative;
  padding: 14px 0 26px;
  text-align: center;
  overflow: hidden;
}
.hero__watermark {
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-hud);
  font-weight: 700;
  font-size: min(46vw, 320px);
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 162, 75, 0.17);
  mask-image: radial-gradient(closest-side at 50% 40%, #000 30%, transparent 88%);
  pointer-events: none;
  user-select: none;
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 4px 10px;
}
.brand__rule {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 162, 75, 0.85));
  position: relative;
}
.brand__rule:last-child { background: linear-gradient(90deg, rgba(216, 162, 75, 0.85), transparent); }
.brand__rule::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(216, 162, 75, 0.9);
}
.brand__rule:last-child::after { right: auto; left: -2px; }
.brand__text { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.brand__cn {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--gold-l);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 18px rgba(216, 162, 75, 0.25);
}
.brand__en {
  font-family: var(--font-hud);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gold-d);
}

/* 标题：金属字 + 双描边 + 顶部高光 + 两侧纹饰 */
.title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 22px);
  margin: 0 0 24px;
  padding-bottom: 4px;
}
.title-orn {
  position: relative;
  flex: 0 0 auto;
  width: clamp(26px, 6vw, 62px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 162, 75, 0.9));
}
.title-orn--r { background: linear-gradient(90deg, rgba(216, 162, 75, 0.9), transparent); }
.title-orn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: linear-gradient(140deg, #fff3cb, #d8a24b 60%, #8a6a33);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(216, 162, 75, 0.8);
}
.title-orn--r::after { right: auto; left: -3px; }

.title {
  position: relative;
  margin: 0;
  padding: 0 6px;
  font-size: clamp(46px, 12.8vw, 108px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.06em;
  transform: skewX(-6deg) scaleY(1.05);
  background:
    linear-gradient(180deg, #fffdf2 0%, #fff3c9 10%, #f2d183 26%, #d8a24b 44%, #8c5c20 54%, #c8913c 66%, #f6e0a4 80%, #fff9e0 96%);
  background-size: 220% 100%;
  background-position: 70% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #1f1205;
  filter:
    drop-shadow(0 2px 0 #4a2e0f)
    drop-shadow(0 7px 0 #241505)
    drop-shadow(0 16px 26px rgba(0, 0, 0, 0.8));
  isolation: isolate;
  animation: titleSweep 2.8s 0.25s ease-out 1 both;
}
.title::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 0 6px;
  transform: translate(3px, 10px);
  background: linear-gradient(#5c3c12, #170c03);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0 14%, rgba(255, 255, 255, 0.18) 30%, transparent 46%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.title span { display: inline-block; }

@keyframes titleSweep {
  from { background-position: 130% 0; }
  to { background-position: 50% 0; }
}

.tagline {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.38em;
  color: #b9a888;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9em;
}
.tagline span { color: var(--gold-d); letter-spacing: 0; }

/* ---------------------------------------------------------- 骰子台 */

.console {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.dice-set { display: flex; gap: 14px; }
.die {
  position: relative;
  width: 62px;
  height: 62px;
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  border-radius: 12px;
  background: linear-gradient(150deg, #f8ebc8, #d8a24b 52%, #7c5a26 96%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 214, 0.65),
    inset 0 -8px 14px rgba(70, 42, 10, 0.45),
    0 14px 24px rgba(0, 0, 0, 0.6);
}
.die::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%);
  opacity: 0.55;
  pointer-events: none;
}
.die::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  border: 1px solid rgba(74, 44, 14, 0.22);
  pointer-events: none;
}
.die__pip { display: grid; place-items: center; }
.die__pip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a4020, #140d06 72%);
  box-shadow: inset 0 1px 1px rgba(255, 240, 200, 0.3);
  opacity: 0.08;
  transition: opacity 0.12s ease;
}
.die[data-face="1"] .die__pip:nth-child(5) i,
.die[data-face="2"] .die__pip:nth-child(1) i,
.die[data-face="2"] .die__pip:nth-child(9) i,
.die[data-face="3"] .die__pip:nth-child(1) i,
.die[data-face="3"] .die__pip:nth-child(5) i,
.die[data-face="3"] .die__pip:nth-child(9) i,
.die[data-face="4"] .die__pip:nth-child(1) i,
.die[data-face="4"] .die__pip:nth-child(3) i,
.die[data-face="4"] .die__pip:nth-child(7) i,
.die[data-face="4"] .die__pip:nth-child(9) i,
.die[data-face="5"] .die__pip:nth-child(1) i,
.die[data-face="5"] .die__pip:nth-child(3) i,
.die[data-face="5"] .die__pip:nth-child(5) i,
.die[data-face="5"] .die__pip:nth-child(7) i,
.die[data-face="5"] .die__pip:nth-child(9) i,
.die[data-face="6"] .die__pip:nth-child(1) i,
.die[data-face="6"] .die__pip:nth-child(3) i,
.die[data-face="6"] .die__pip:nth-child(4) i,
.die[data-face="6"] .die__pip:nth-child(6) i,
.die[data-face="6"] .die__pip:nth-child(7) i,
.die[data-face="6"] .die__pip:nth-child(9) i { opacity: 1; }

.die.is-rolling { animation: dieWobble 0.36s ease-in-out infinite alternate; }
@keyframes dieWobble {
  from { transform: translateY(0) rotate(-3deg); }
  to { transform: translateY(-6px) rotate(3deg); }
}

.console__readout {
  margin: 2px 0 0;
  min-height: 1.8em;
  font-family: var(--font-hud);
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--gold-l);
  transition: color 0.2s ease;
}
.console__readout.is-hit { color: #ffe9b0; text-shadow: 0 0 18px rgba(243, 215, 150, 0.5); }

.console__tools { display: flex; gap: 10px; margin-top: 2px; }

/* ---------------------------------------------------------- 按钮 */

.btn {
  position: relative;
  border: 0;
  cursor: pointer;
  background: none;
  letter-spacing: 0.16em;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }

.btn--primary {
  padding: 0.82em 2.7em;
  font-size: 15px;
  font-weight: 800;
  color: #241604;
  border-radius: 2px;
  background: linear-gradient(180deg, #f8ebc8, #e0b05c 38%, #c08c34 62%, #f1d08a);
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 220, 0.6),
    0 12px 26px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.45);
}
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent rgba(36, 22, 4, 0.28) transparent transparent;
}
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary:disabled { opacity: 0.55; cursor: progress; transform: none; }

.btn--ghost {
  padding: 0.55em 1.15em;
  font-size: 12px;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(216, 162, 75, 0.04);
}
.btn--ghost:hover { background: rgba(216, 162, 75, 0.12); color: var(--gold-l); }
.btn--ghost:active { transform: translateY(1px); }

.btn--tiny {
  padding: 0.34em 0.9em;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-d);
  border: 1px solid rgba(216, 162, 75, 0.22);
  border-radius: 2px;
}
.btn--tiny:hover { color: var(--gold-l); border-color: var(--line); }

/* ---------------------------------------------------------- 斜纹分隔 */

.stripe {
  height: 8px;
  margin: 4px 0 26px;
  background: repeating-linear-gradient(135deg, rgba(216, 162, 75, 0.5) 0 5px, transparent 5px 13px);
  opacity: 0.45;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---------------------------------------------------------- 区块标题 */

.sec { margin: 0 0 34px; }
.sec-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 0 2px 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.sec-head__tag {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold-d);
}
.sec-head__title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--gold-l);
}
.sec-head__hint {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--bone-dim);
}
.sec-head--hidden { border-bottom-color: rgba(179, 53, 42, 0.3); }
.sec-head--hidden .sec-head__tag { color: var(--blood); }
.sec-head--hidden .sec-head__title { color: #edb9ad; }
.sec-head--plain { border-bottom: 0; margin-bottom: 4px; }

/* ---------------------------------------------------------- 刮面卡片 */

.boards { display: grid; gap: 16px; }
.boards--base { grid-template-columns: repeat(auto-fill, minmax(246px, 1fr)); }
.boards--hidden { grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); }

.board {
  position: relative;
  padding: 11px 11px 9px;
  border: 1px solid rgba(216, 162, 75, 0.24);
  background:
    linear-gradient(180deg, rgba(38, 29, 20, 0.96), rgba(13, 9, 6, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.06),
    inset 0 0 46px rgba(0, 0, 0, 0.35),
    0 18px 34px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 3px);
}
.board::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px solid rgba(216, 162, 75, 0.07);
}
.board__corner {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid var(--gold);
  opacity: 0.5;
  pointer-events: none;
}
.board__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.board__corner--br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.board__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 1px 7px;
  border-bottom: 1px solid rgba(216, 162, 75, 0.12);
  font-family: var(--font-hud);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--gold-d);
}
.board__dice {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: rgba(183, 169, 140, 0.75);
}
.board__dice span { font-size: 9px; letter-spacing: 0.16em; color: var(--gold-d); }
.board__dice b {
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-l);
}

.board__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 2px;
}
.board__name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold-l);
}
.board__size {
  margin-left: auto;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
}

.board__stage {
  position: relative;
  margin-top: 8px;
  padding: 5px;
  background: #080604;
  border: 1px solid rgba(216, 162, 75, 0.18);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.6);
}
.board__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr));
  gap: 4px;
  aspect-ratio: var(--cols, 3) / var(--rows, 3);
  background: #0d0906;
}

.board__foil {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  cursor: crosshair;
  touch-action: none;
  border-radius: 1px;
  transition: opacity 0.5s ease;
}
.board.is-revealed .board__foil { opacity: 0; pointer-events: none; }

.board__locked {
  position: absolute;
  inset: 5px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.board__locked-text {
  padding: 0.45em 0.95em;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: 0.36em;
  color: #2a1b0a;
  background: linear-gradient(#f3d796, #c08c34);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 246, 214, 0.55);
  transform: rotate(-2deg);
}
.board.has-scratch .board__locked,
.board.is-revealed .board__locked { opacity: 0; }

.board__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
}
.board__progress {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
}
.board.is-revealed .board__progress { color: var(--gold); }
.js-reveal:disabled { opacity: 0.4; cursor: default; }

.board.is-target {
  border-color: rgba(216, 162, 75, 0.9);
  box-shadow:
    0 0 0 1px rgba(216, 162, 75, 0.55),
    0 0 46px rgba(216, 162, 75, 0.3),
    inset 0 1px 0 rgba(255, 240, 200, 0.08);
  animation: targetThrob 1.5s ease-in-out 2;
}
@keyframes targetThrob {
  0%, 100% { box-shadow: 0 0 0 1px rgba(216, 162, 75, 0.5), 0 0 24px rgba(216, 162, 75, 0.18); }
  50% { box-shadow: 0 0 0 2px rgba(243, 215, 150, 0.85), 0 0 60px rgba(216, 162, 75, 0.42); }
}

/* 隐藏款 */

.board--hidden {
  border-color: rgba(179, 53, 42, 0.36);
  background: linear-gradient(180deg, rgba(44, 19, 15, 0.96), rgba(12, 8, 6, 0.98));
}
.board--hidden .board__corner { border-color: var(--blood); opacity: 0.6; }
.board--hidden .board__tag { color: var(--blood); letter-spacing: 0.24em; }
.board--hidden .board__name { color: #f0c3b5; }
.board--hidden .board__stage { border-color: rgba(179, 53, 42, 0.3); }
.board--hidden .js-reveal { color: #d98d7f; border-color: rgba(179, 53, 42, 0.3); }
.board__seal {
  position: absolute;
  top: -11px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-align: center;
  color: #ffd9cb;
  background: radial-gradient(circle at 35% 30%, #c8453a, #6e1d15 70%);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 190, 175, 0.55);
  transform: rotate(-8deg);
  pointer-events: none;
}

/* ---------------------------------------------------------- 刮面内物品 */

.item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(216, 162, 75, 0.22);
  background:
    radial-gradient(120% 130% at 28% 18%, rgba(96, 71, 36, 0.5), rgba(20, 14, 9, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.05);
  transition: border-color 0.2s ease;
}
.item:hover { border-color: rgba(216, 162, 75, 0.5); }
.item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.6));
}
.item__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 4px;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ded2b8;
  background: linear-gradient(0deg, rgba(6, 4, 2, 0.92), rgba(6, 4, 2, 0.55) 70%, transparent);
}
.item--rare {
  border-color: rgba(178, 156, 232, 0.7);
  box-shadow: inset 0 0 18px rgba(150, 122, 220, 0.14), inset 0 1px 0 rgba(255, 246, 214, 0.05);
}
.item--big .item__name { font-size: 11px; letter-spacing: 0.04em; padding: 4px 6px; }
.item--epic {
  border-color: rgba(243, 205, 110, 0.82);
  box-shadow: inset 0 0 22px rgba(233, 185, 73, 0.22), inset 0 1px 0 rgba(255, 246, 214, 0.08);
}
.item--supreme {
  border-color: rgba(235, 82, 76, 0.92);
  box-shadow: inset 0 0 26px rgba(235, 60, 55, 0.3), 0 0 16px rgba(235, 60, 55, 0.24);
}
.board.is-revealed .item { animation: itemPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes itemPop {
  from { transform: scale(0.94); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

.board__error {
  grid-column: 1 / -1;
  padding: 26px 14px;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: var(--bone-dim);
}
.board__error a { color: var(--gold); }

/* ---------------------------------------------------------- 规则 */

.briefing {
  padding: 16px 18px 8px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(26, 20, 14, 0.72), rgba(10, 7, 5, 0.72));
}
.rules {
  counter-reset: rule;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rules li {
  counter-increment: rule;
  position: relative;
  padding: 10px 0 10px 42px;
  font-size: 13px;
  line-height: 1.8;
  color: #cfc2a6;
  border-top: 1px solid rgba(216, 162, 75, 0.1);
}
.rules li:first-child { border-top: 0; }
.rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 2px;
  top: 11px;
  font-family: var(--font-hud);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold-d);
}
.rules b { color: var(--gold-l); font-weight: 700; }

/* ---------------------------------------------------------- 页脚 */

.foot {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.foot__club {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--gold-d);
}
.foot__note {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(183, 169, 140, 0.7);
}
.foot__admin {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(216, 162, 75, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 162, 75, 0.25);
  padding-bottom: 2px;
}
.foot__admin:hover { color: var(--gold-l); }

/* ---------------------------------------------------------- 房间 / 老板 */

.session {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--bone-dim);
  border: 1px solid rgba(216, 162, 75, 0.22);
  background: linear-gradient(180deg, rgba(38, 29, 20, 0.8), rgba(12, 9, 6, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.04), 0 10px 26px rgba(0, 0, 0, 0.35);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.session__group { display: inline-flex; align-items: center; gap: 7px; }
.session__divider { width: 1px; height: 18px; background: rgba(216, 162, 75, 0.2); }
.session b { color: var(--gold-l); font-weight: 700; letter-spacing: 0.08em; }
.session__sep { color: var(--gold-d); }
.session__field { display: inline-flex; align-items: baseline; gap: 0.45em; }
.session__label { font-size: 10px; letter-spacing: 0.22em; color: var(--gold-d); }
.session__input {
  width: 6.2em;
  min-width: 3.4em;
  padding: 2px 0 3px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--gold-l);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgba(216, 162, 75, 0.35);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.session__input::placeholder { color: rgba(183, 169, 140, 0.45); letter-spacing: 0.1em; }
.session__input:hover { border-bottom-color: rgba(216, 162, 75, 0.6); }
.session__input:focus { border-bottom-color: var(--gold); background: rgba(216, 162, 75, 0.07); }
.session__input--room {
  width: 5.1em;
  font-family: var(--font-hud);
  font-size: 16px;
  letter-spacing: 0.16em;
  color: var(--gold-l);
}

.session__btn,
.session__copy,
.session__icon-btn {
  padding: 0.26em 0.62em;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-d);
  background: transparent;
  border: 1px solid rgba(216, 162, 75, 0.28);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.session__icon-btn {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1;
}
.session__btn:hover,
.session__copy:hover,
.session__icon-btn:hover { color: var(--gold-l); border-color: var(--gold); background: rgba(216, 162, 75, 0.1); }
.session__btn:focus-visible,
.session__copy:focus-visible,
.session__icon-btn:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.session__copy { color: var(--gold); }
.session__copy.is-copied { color: #241604; background: linear-gradient(180deg, #f3d796, #c08c34); border-color: transparent; }
.session__mode {
  padding: 0.2em 0.55em;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #f3c1b5;
  border: 1px solid rgba(179, 53, 42, 0.55);
  background: rgba(179, 53, 42, 0.16);
}

/* 主视觉下方的小指标 */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.hero__meta li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  border: 1px solid rgba(216, 162, 75, 0.16);
  background: rgba(10, 8, 6, 0.5);
}
.hero__meta b {
  font-family: var(--font-hud);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-l);
}

/* 观战模式：只读 */
body.is-watch .board__foil { pointer-events: none !important; cursor: default; }
body.is-watch .js-reveal { opacity: 0.32; }
body.is-watch .btn--primary { opacity: 0.45; }

/* 轻提示 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 80;
  max-width: min(520px, calc(100vw - 32px));
  padding: 0.7em 1.2em;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
  word-break: break-all;
  color: var(--bone);
  background: linear-gradient(180deg, rgba(44, 34, 22, 0.98), rgba(18, 13, 9, 0.98));
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------- 刮面锁定 */

.board.is-await,
.board.is-locked {
  opacity: 0.62;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.board.is-await:hover,
.board.is-locked:hover { opacity: 0.78; }
.board.is-revealed { opacity: 1; }
.board.is-await .board__foil,
.board.is-locked .board__foil { pointer-events: none; cursor: not-allowed; }
.board.is-await .board__locked-text,
.board.is-locked .board__locked-text {
  color: #a2937a;
  background: linear-gradient(#332a20, #1d1610);
  box-shadow: inset 0 0 0 1px rgba(216, 162, 75, 0.22);
}
.board.is-locked .js-reveal { opacity: 0.32; cursor: not-allowed; }

/* ---------------------------------------------------------- 骰子记录面板 */

.logbtn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--font-hud);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-l);
  background: linear-gradient(180deg, rgba(38, 29, 20, 0.96), rgba(14, 10, 7, 0.98));
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.logbtn:hover { border-color: var(--gold); transform: translateY(-1px); }
.logbtn:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.logbtn__icon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: radial-gradient(circle at 35% 30%, #f3d796, #a97c35 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 214, 0.5);
}
.logbtn__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  color: #241604;
  background: linear-gradient(180deg, #f3d796, #c08c34);
  border-radius: 2px;
}
.logbtn__count[data-zero="true"] {
  background: rgba(216, 162, 75, 0.18);
  color: var(--bone-dim);
}

.logscrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(4, 3, 2, 0.6);
  backdrop-filter: blur(2px);
}

.logpanel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 24px));
  background: linear-gradient(180deg, #17110c, #0b0806 60%);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
  transform: translateX(102%);
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.logpanel.is-open { transform: none; pointer-events: auto; }
.logpanel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.logpanel__title { margin: 0; font-size: 15px; letter-spacing: 0.18em; color: var(--gold-l); }
.logpanel__meta { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.06em; color: var(--bone-dim); }
.logpanel__close {
  width: 28px;
  height: 28px;
  color: var(--bone-dim);
  background: none;
  border: 1px solid var(--line-soft);
  cursor: pointer;
}
.logpanel__close:hover { color: var(--gold-l); border-color: var(--line); }

.loglist {
  flex: 1;
  margin: 0;
  padding: 6px 10px;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.logrow {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 9px 6px;
  border-bottom: 1px solid rgba(216, 162, 75, 0.08);
}
.logrow:last-child { border-bottom: 0; }
.logrow__time {
  font-family: var(--font-hud);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
}
.logrow__main { min-width: 0; }
.logrow__dice {
  font-family: var(--font-hud);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold-l);
}
.logrow__dice em { font-style: normal; color: var(--gold-d); margin: 0 3px; }
.logrow__board { display: block; margin-top: 2px; font-size: 11px; color: var(--bone-dim); }
.logrow__badge {
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--bone-dim);
  border: 1px solid var(--line-soft);
}
.logrow__badge.is-hit {
  color: #241604;
  background: linear-gradient(180deg, #f3d796, #c08c34);
  border-color: transparent;
}
.logrow__room {
  grid-column: 2 / -1;
  font-size: 10px;
  color: rgba(183, 169, 140, 0.6);
}
.logempty {
  padding: 30px 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: var(--bone-dim);
}
.logpanel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line-soft);
}
.logpanel__foot .btn { flex: 1 1 calc(50% - 4px); padding: 0.5em 0.6em; font-size: 11px; }
.logpanel__clear:hover { color: #e08a7c; border-color: rgba(179, 53, 42, 0.5); }

/* ---------------------------------------------------------- 预览模式 */

.is-instant *,
.is-instant *::before,
.is-instant *::after {
  transition: none !important;
  animation: none !important;
}

/* ---------------------------------------------------------- 响应式 */

@media (max-width: 760px) {
  /* 右上角有「骰子记录」浮层按钮，HUD 右侧留出空间 */
  .hud-strip { padding-right: 96px; }
  .logbtn__text { display: none; }
  .logbtn { padding: 8px 10px; gap: 6px; }
}

@media (min-width: 700px) {
  .poster { padding: 0 24px 56px; }
  .boards--base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head__title { font-size: 21px; }
}

@media (min-width: 980px) {
  .boards--base { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .die { width: 66px; height: 66px; }
}

@media (min-width: 1180px) {
  .rail {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 16px;
    z-index: 0;
    background: repeating-linear-gradient(180deg, rgba(216, 162, 75, 0.22) 0 1px, transparent 1px 28px);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  }
  .rail--l { left: calc(50% - 486px); }
  .rail--r { right: calc(50% - 486px); }
}

/* ---------------------------------------------------------- 磨砂玻璃质感 */

.board,
.briefing,
.session,
.logpanel {
  background:
    linear-gradient(155deg, rgba(255, 246, 214, 0.075), rgba(255, 246, 214, 0.015) 42%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(34, 26, 18, 0.55), rgba(10, 7, 5, 0.62));
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  backdrop-filter: blur(16px) saturate(118%);
  border-color: rgba(255, 240, 200, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 40px rgba(0, 0, 0, 0.22),
    0 22px 44px rgba(0, 0, 0, 0.42);
}

.board__stage {
  background:
    linear-gradient(160deg, rgba(255, 246, 214, 0.055), rgba(255, 246, 214, 0.01) 45%, rgba(0, 0, 0, 0.18)),
    rgba(7, 5, 3, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  border-color: rgba(255, 240, 200, 0.13);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 按钮：磨砂玻璃 */
.btn,
.btn--ghost,
.btn--tiny,
.session__copy,
.session__icon-btn,
.logbtn {
  background: linear-gradient(180deg, rgba(255, 246, 214, 0.13), rgba(255, 246, 214, 0.035));
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  border: 1px solid rgba(255, 240, 200, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 8px 20px rgba(0, 0, 0, 0.32);
}
.btn:hover,
.btn--ghost:hover,
.btn--tiny:hover,
.session__copy:hover,
.session__icon-btn:hover,
.logbtn:hover {
  background: linear-gradient(180deg, rgba(255, 246, 214, 0.22), rgba(255, 246, 214, 0.07));
  border-color: rgba(216, 162, 75, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 10px 24px rgba(0, 0, 0, 0.36);
}
.btn:active,
.btn--ghost:active,
.btn--tiny:active { transform: translateY(1px); }

.btn--primary {
  background:
    linear-gradient(180deg, rgba(255, 249, 229, 0.95), rgba(246, 223, 162, 0.66) 46%, rgba(202, 150, 66, 0.85)),
    linear-gradient(180deg, rgba(255, 246, 214, 0.2), rgba(255, 246, 214, 0.05));
  color: #1c1105;
  border-color: rgba(255, 246, 214, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(90, 60, 20, 0.45),
    0 12px 28px rgba(216, 162, 75, 0.3);
}
.btn--primary:hover {
  background:
    linear-gradient(180deg, #fff9e3, rgba(248, 231, 180, 0.78) 46%, rgba(214, 163, 78, 0.92)),
    linear-gradient(180deg, rgba(255, 246, 214, 0.24), rgba(255, 246, 214, 0.06));
}
.btn--primary:disabled {
  background: linear-gradient(180deg, rgba(255, 246, 214, 0.2), rgba(255, 246, 214, 0.06));
  color: rgba(28, 17, 5, 0.55);
  border-color: rgba(255, 240, 200, 0.2);
}

@media (max-width: 720px) {
  .hero { padding-top: 8px; }
  .brand { margin-bottom: 8px; gap: 8px; padding: 2px 6px; }
  .brand__rule { width: 22px; }
  .brand__cn { font-size: 13.5px; letter-spacing: 0.26em; text-indent: 0.26em; }
  .brand__en { font-size: 8px; letter-spacing: 0.32em; text-indent: 0.32em; }
  .title-wrap { gap: 8px; margin-bottom: 16px; }
  .title-orn { width: 22px; }

  .session {
    width: 100%;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
  }
  .session__group { flex: 1 1 auto; justify-content: center; }
  .session__divider { display: none; }
  .session__copy { flex: 1 1 100%; padding: 8px 10px; font-size: 12px; text-align: center; }
  .session__icon-btn { width: 24px; height: 24px; }

  .title { font-size: clamp(32px, 13vw, 54px); }
  .tagline { font-size: 11px; letter-spacing: 0.26em; }
  .console { margin-top: 16px; gap: 9px; }
  .die { width: 54px; height: 54px; }
  .btn--primary { width: min(260px, 78%); padding: 0.85em 1em; }
  .console__tools .btn--ghost { padding: 0.55em 0.9em; }
  .hero__meta { gap: 6px; margin-top: 10px; }
  .hero__meta li { padding: 3px 8px; font-size: 9px; letter-spacing: 0.1em; }
  .hero__meta b { font-size: 12px; }

  .sec { margin-bottom: 26px; }
  .sec-head { gap: 6px 10px; }
  .sec-head__title { font-size: 18px; letter-spacing: 0.16em; }
  .sec-head__hint { font-size: 10px; }
  .board { padding: 10px 9px 8px; }
  .board__name { font-size: 16px; letter-spacing: 0.16em; }
  .item__name { font-size: 9.5px; }
  .item--big .item__name { font-size: 10.5px; padding: 3px 4px; }
  .rules li { font-size: 12.5px; padding: 9px 0 9px 38px; }
  .briefing { padding: 14px 14px 6px; }
}

@media (max-width: 420px) {
  .title { font-size: 15vw; }
  .title-orn { display: none; }
  .boards--base, .boards--hidden { grid-template-columns: 1fr; }
  .die { width: 52px; height: 52px; }
  .item__name { font-size: 9px; }
  .item--big .item__name { font-size: 10px; }
  .brand__cn { letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   粉色主题（.theme-candy）：粉白圆角 · 参考 MIKA CLUB 风格
   ============================================================ */

.theme-candy {
  color-scheme: light;
  --gold: #e0568c;
  --gold-l: #d63a78;
  --gold-d: #c2608b;
  --gold-ink: #ffffff;
  --bone: #5d2a3f;
  --bone-dim: #96707f;
  --line: rgba(224, 86, 140, 0.28);
  --line-soft: rgba(224, 86, 140, 0.14);
  --blood: #d63a78;
  --foil-a: #ffe6f0;
  --foil-mid: #ffc9dd;
  --foil-b: #f6a6c5;
  --foil-line: rgba(255, 255, 255, 0.5);
  --foil-grain: #ffffff;
  --foil-frame: rgba(214, 58, 120, 0.26);
  --foil-corner: rgba(214, 58, 120, 0.5);
  --foil-text: rgba(150, 52, 92, 0.55);
  --foil-font: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.theme-candy body { background: #fff8fb; color: #5d2a3f; }
.theme-candy .bg {
  background:
    radial-gradient(120% 70% at 10% 0%, #ffe3ef 0%, rgba(255, 227, 239, 0) 58%),
    radial-gradient(100% 60% at 94% 6%, #efe6ff 0%, rgba(239, 230, 255, 0) 60%),
    radial-gradient(90% 55% at 50% 100%, #ffe9f4 0%, rgba(255, 233, 244, 0) 72%),
    linear-gradient(180deg, #fff9fc 0%, #fdf0f6 36%, #fbf2f8 100%);
}
.theme-candy .bg__haze,
.theme-candy .bg__noise { display: none; }
.theme-candy .bg__grid {
  opacity: 0.7;
  background-image: radial-gradient(circle, rgba(224, 86, 140, 0.18) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 82%, transparent);
}
.theme-candy .rail { display: none; }

/* 顶部 HUD */
.theme-candy .hud-strip {
  margin-bottom: 10px;
  padding: 8px 16px;
  color: #b38298;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #f7dde9;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(224, 86, 140, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.theme-candy .hud-strip__tag { color: #c2608b; }
.theme-candy .hud-strip__ticks {
  height: 4px;
  background: repeating-linear-gradient(90deg, rgba(224, 86, 140, 0.4) 0 2px, transparent 2px 7px);
}
.theme-candy .hud-strip__serial { color: #a87e92; }
.theme-candy .hero__watermark { -webkit-text-stroke: 1px rgba(224, 86, 140, 0.12); }

/* 俱乐部标识 */
.theme-candy .brand {
  padding: 6px 16px;
  background: #fff;
  border: 1px solid #f7dde9;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(224, 86, 140, 0.1);
}
.theme-candy .brand__rule { height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #f0a6c4); }
.theme-candy .brand__rule:last-child { background: linear-gradient(90deg, #f0a6c4, transparent); }
.theme-candy .brand__rule::after { background: #e0568c; box-shadow: none; }
.theme-candy .brand__cn { color: #5d2a3f; text-shadow: none; }
.theme-candy .brand__en { color: #c2608b; }

/* 房间条 */
.theme-candy .session {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #f7dde9;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(224, 86, 140, 0.12);
  clip-path: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.theme-candy .session__label { color: #b38298; }
.theme-candy .session__input { color: #5d2a3f; border-bottom-color: #f2c6d9; }
.theme-candy .session__input::placeholder { color: #cba6b6; }
.theme-candy .session__input:hover { border-bottom-color: #eaa2c0; }
.theme-candy .session__input:focus { border-bottom-color: #d63a78; background: #fff3f8; }
.theme-candy .session__divider { background: #f7dde9; }
.theme-candy .session__copy,
.theme-candy .session__icon-btn {
  color: #d63a78;
  background: #fff;
  border: 1px solid #f4c2d6;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(224, 86, 140, 0.12);
}
.theme-candy .session__copy:hover,
.theme-candy .session__icon-btn:hover { background: #fff0f6; border-color: #ee9dc0; color: #c2185b; }
.theme-candy .session__mode { color: #c2185b; background: #ffe6f0; border-color: #f6b6cf; border-radius: 999px; }

/* 标题 */
.theme-candy .title {
  background: linear-gradient(180deg, #7a2e4b 0%, #a83863 46%, #e0568c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 10px 20px rgba(224, 86, 140, 0.2));
  transform: none;
  animation: none;
}
.theme-candy .title::before,
.theme-candy .title::after { display: none; }
.theme-candy .title-orn { background: linear-gradient(90deg, transparent, #f0a6c4); }
.theme-candy .title-orn--r { background: linear-gradient(90deg, #f0a6c4, transparent); }
.theme-candy .title-orn::after { background: #e0568c; box-shadow: 0 0 10px rgba(224, 86, 140, 0.4); }
.theme-candy .tagline { color: #a87e92; }
.theme-candy .tagline span { color: #e0568c; }

/* 骰子台 */
.theme-candy .console__readout { color: #a83863; }
.theme-candy .console__readout.is-hit { color: #d63a78; text-shadow: 0 0 14px rgba(224, 86, 140, 0.3); }
.theme-candy .die {
  border-radius: 18px;
  background: linear-gradient(150deg, #ffffff, #ffe9f2 55%, #f7c6dd);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 -8px 14px rgba(224, 86, 140, 0.12),
    0 12px 26px rgba(224, 86, 140, 0.22);
}
.theme-candy .die::before { background: linear-gradient(158deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 46%); }
.theme-candy .die::after { border-color: rgba(224, 86, 140, 0.18); border-radius: 14px; }
.theme-candy .die__pip i {
  background: radial-gradient(circle at 35% 30%, #ff9dc0, #d63a78 72%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* 按钮 */
.theme-candy .btn--primary {
  background: linear-gradient(180deg, #ffa8c8, #ef6ba3 52%, #d63a78);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(214, 58, 120, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: none;
}
.theme-candy .btn--primary::after { display: none; }
.theme-candy .btn--primary:hover { transform: translateY(-1px); }
.theme-candy .btn--primary:disabled { background: #f7d3e2; color: #b26e8d; border-color: #fbe6ef; }
.theme-candy .btn--ghost,
.theme-candy .btn--tiny,
.theme-candy .js-reveal {
  color: #d63a78;
  background: #fff;
  border: 1px solid #f4c2d6;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(224, 86, 140, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.theme-candy .btn--ghost:hover,
.theme-candy .btn--tiny:hover,
.theme-candy .js-reveal:hover { background: #fff0f6; border-color: #ee9dc0; color: #c2185b; }
.theme-candy .btn--ghost:active,
.theme-candy .btn--tiny:active { transform: translateY(1px); }

/* 小指标 */
.theme-candy .hero__meta li {
  color: #a87e92;
  background: #fff;
  border: 1px solid #f7dde9;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(224, 86, 140, 0.08);
}
.theme-candy .hero__meta b { color: #d63a78; font-family: var(--font-body); font-weight: 800; }

/* 分区标题 */
.theme-candy .stripe {
  opacity: 0.45;
  background: repeating-linear-gradient(115deg, #f7c6dd 0 10px, transparent 10px 20px);
}
.theme-candy .sec-head__tag { color: #c2608b; }
.theme-candy .sec-head__title { color: #5d2a3f; }
.theme-candy .sec-head--hidden .sec-head__title { color: #a83863; }
.theme-candy .sec-head__hint { color: #a87e92; }

/* 刮面卡片 */
.theme-candy .board {
  padding: 14px 14px 12px;
  background: #fff;
  border: 1px solid #f7dde9;
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(219, 120, 160, 0.16);
}
.theme-candy .board::before { background: none; }
.theme-candy .board::after { inset: 8px; border: 1px solid #fbe9f1; border-radius: 16px; }
.theme-candy .board__corner { border-color: #f0a6c4; opacity: 0.9; }
.theme-candy .board__top { padding: 0 2px 9px; color: #c2608b; border-bottom: 1px dashed #f7dde9; }
.theme-candy .board__tag { color: #c2608b; }
.theme-candy .board__dice span { color: #b38298; }
.theme-candy .board__dice b { color: #d63a78; font-family: var(--font-body); font-weight: 800; }
.theme-candy .board__name { color: #5d2a3f; }
.theme-candy .board__size { color: #a87e92; }
.theme-candy .board__stage {
  background: #fff6fa;
  border: 1px solid #f9e0ea;
  border-radius: 14px;
  box-shadow: none;
}
.theme-candy .board__grid { background: #fff; gap: 6px; border-radius: 10px; }
.theme-candy .board__foil { border-radius: 10px; }
.theme-candy .board__locked-text {
  color: #c2185b;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px dashed #f0a6c4;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(224, 86, 140, 0.16);
  transform: none;
}
.theme-candy .board.is-await,
.theme-candy .board.is-locked { opacity: 0.92; }
.theme-candy .board.is-await:hover,
.theme-candy .board.is-locked:hover { opacity: 1; }
.theme-candy .board.is-await .board__locked-text,
.theme-candy .board.is-locked .board__locked-text {
  color: #c2185b;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(224, 86, 140, 0.16), inset 0 0 0 1.5px #f0a6c4;
}
.theme-candy .board.is-locked .js-reveal { opacity: 0.5; }
.theme-candy .board__progress { color: #b38298; }
.theme-candy .board.is-revealed .board__progress { color: #d63a78; }
.theme-candy .board.is-target {
  border-color: #ee9dc0;
  box-shadow: 0 0 0 2px #ffd7e7, 0 18px 38px rgba(224, 86, 140, 0.26);
}

/* 当前可刮面：整体呼吸放大 + 显眼光环（刮开后消失） */
.board.is-active {
  position: relative;
  z-index: 3;
  border-color: #e0568c;
  transform-origin: center;
  animation: boardBreath 2.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}
/* 外圈旋转流光（沿用 ::after 当环） */
.board.is-active::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid transparent;
  border-radius: 27px;
  background: conic-gradient(
      from 0deg,
      #ff6fa8,
      #ffe3ee 55deg,
      #ff2f78 130deg,
      #ffb3d2 200deg,
      #ff4f8f 265deg,
      #ffe9f3 320deg,
      #ff6fa8 360deg
    ) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow: 0 0 18px rgba(255, 47, 120, 0.45);
  animation: ringSpin 2.8s linear infinite;
  pointer-events: none;
}
/* 卡片背后的柔光扩散 */
.board.is-active::before {
  content: "";
  position: absolute;
  inset: -34px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(224, 86, 140, 0.45), rgba(224, 86, 140, 0.18) 52%, rgba(224, 86, 140, 0));
  animation: haloPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.board.is-active .board__locked-text {
  box-shadow: 0 10px 22px rgba(224, 86, 140, 0.3), 0 0 0 4px rgba(238, 157, 192, 0.24);
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}
@keyframes haloPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes boardBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.9),
      0 0 0 9px rgba(238, 120, 170, 0.4),
      0 0 34px 10px rgba(224, 86, 140, 0.45),
      0 20px 42px rgba(224, 86, 140, 0.28);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 1),
      0 0 0 20px rgba(238, 120, 170, 0.22),
      0 0 78px 26px rgba(224, 86, 140, 0.62),
      0 34px 64px rgba(224, 86, 140, 0.42);
  }
}
/* 观战端节奏稍慢一点 */
body.is-watch .board.is-active,
body.is-watch .board.is-active::before { animation-duration: 3.2s; }
.theme-candy .board--hidden { background: linear-gradient(180deg, #fff6fb, #fff); }
.theme-candy .board__seal { color: #fff; background: linear-gradient(180deg, #ff9ec1, #d63a78); border-color: #fff; }
.theme-candy .board__error { color: #a87e92; }
.theme-candy .board__error a { color: #d63a78; }

/* 格子 */
.theme-candy .item {
  border: 1px solid #f7dde9;
  border-radius: 12px;
  background: radial-gradient(120% 130% at 28% 18%, #ffffff, #fff2f8 68%, #ffe6f1);
  box-shadow: none;
}
.theme-candy .item:hover { border-color: #ee9dc0; }
.theme-candy .item img { padding: 8px; filter: drop-shadow(0 4px 8px rgba(224, 86, 140, 0.18)); }
.theme-candy .item__name {
  background: rgba(255, 255, 255, 0.94);
  color: #8e3f66;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
}
.theme-candy .item--rare { border-color: #b9a4e8; box-shadow: 0 0 0 2px #f1eafc; }
.theme-candy .item--epic { border-color: #e9b949; box-shadow: 0 0 0 2px #fff4da, 0 0 12px rgba(233, 185, 73, 0.25); }
.theme-candy .item--supreme {
  border-color: #ef5350;
  box-shadow: 0 0 0 2px #ffe2e0, 0 0 14px rgba(239, 83, 80, 0.28);
}

/* 规则 / 页脚 */
.theme-candy .briefing {
  background: #fff;
  border: 1px solid #f7dde9;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(219, 120, 160, 0.12);
}
.theme-candy .rules li { color: #6f4056; border-top: 1px dashed #f7dde9; }
.theme-candy .rules li::before { color: #e0568c; }
.theme-candy .rules b { color: #c2185b; }
.theme-candy .foot { color: #a87e92; }
.theme-candy .foot__admin { color: #e0568c; border-bottom-color: #f4c2d6; }

/* 骰子记录 */
.theme-candy .logbtn {
  color: #c2608b;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #f7dde9;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(224, 86, 140, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.theme-candy .logbtn:hover { color: #c2185b; }
.theme-candy .logbtn__count { background: #ffe6f0; color: #d63a78; }
.theme-candy .logscrim { background: rgba(90, 40, 60, 0.26); }
.theme-candy .logpanel {
  background: #fff;
  border: 1px solid #f7dde9;
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(120, 50, 80, 0.2);
}
.theme-candy .logpanel__title { color: #5d2a3f; }
.theme-candy .logpanel__meta { color: #a87e92; }
.theme-candy .logpanel__close { color: #c2608b; }
.theme-candy .logrow { color: #6f4056; border-top: 1px dashed #f7dde9; }
.theme-candy .logrow__time { color: #b38298; }
.theme-candy .logrow__dice { color: #d63a78; }
.theme-candy .logrow__badge { color: #a87e92; background: #fff; border-color: #f7dde9; border-radius: 999px; }
.theme-candy .logrow__badge.is-hit { color: #c2185b; background: #ffe6f0; border-color: #f6b6cf; }
.theme-candy .logrow__room { color: #a87e92; }
.theme-candy .logempty { color: #a87e92; }
.theme-candy .toast {
  color: #5d2a3f;
  background: #fff;
  border: 1px solid #f7dde9;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(224, 86, 140, 0.18);
}

@media (max-width: 720px) {
  .theme-candy .session { border-radius: 20px; }
  .theme-candy .hud-strip { padding: 6px 12px; }
  .theme-candy .brand { padding: 5px 12px; }
}