/* 风格1：金墨写字机 */
:root {
  --ink: #1a1308;
  --paper: #f3ead7;
  --gold: #c8a24a;
  --wood: #6b4a2a;
  --wood-dark: #3b2614;
  --accent: #8b1e1e;
  --muted: #7a6a52;
  --line: rgba(107, 74, 42, 0.18);
  --glow: rgba(200, 162, 74, 0.35);
}

body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 248, 230, 0.55), transparent 55%),
    linear-gradient(180deg, #2a1a0d 0%, #120a05 100%);
}

.safe-note { color: rgba(243, 234, 215, 0.35); }

.work-zone {
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.04), transparent 30%),
    linear-gradient(180deg, #4a311c, #2c1a0d);
  border: 1px solid rgba(200, 162, 74, 0.28);
  border-radius: 18px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 248, 230, 0.08);
  padding: 1.6vh 2vw 1.8vh;
}

.brand-mark {
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(200, 162, 74, 0.55);
  background: radial-gradient(circle at 30% 30%, #5a3a1f, #2a170b);
  box-shadow: 0 0 16px var(--glow);
}

.brand h1 { color: #f8efd8; }
.brand p { color: rgba(248, 239, 216, 0.62); }

.live-pill {
  border-radius: 999px;
  color: #f8efd8;
  border: 1px solid rgba(200, 162, 74, 0.35);
  background: rgba(0, 0, 0, 0.22);
}
.live-pill i {
  background: #e24a4a;
  box-shadow: 0 0 8px rgba(226, 74, 74, 0.8);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.plotter {
  background:
    linear-gradient(180deg, #5a3c22, #3d2715 40%, #2b1a0d);
  border: 1px solid rgba(200, 162, 74, 0.22);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.rail-end {
  background: radial-gradient(circle at 35% 35%, #d4b36a, #8a6428);
  border: 1px solid rgba(255, 236, 180, 0.35);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.rail-beam {
  background: linear-gradient(180deg, #8a6438, #4a2f18);
  border-radius: 999px;
  border: 1px solid rgba(200, 162, 74, 0.25);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.carriage-body {
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #c9a45a, #8a6428);
  border: 1px solid rgba(255, 236, 180, 0.4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.pen {
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, #2a170b, #111);
  box-shadow: 0 0 0 1px rgba(200, 162, 74, 0.25);
}

.paper-roll {
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(107, 74, 42, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(107, 74, 42, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, #f8f0df, var(--paper));
  border: 1px solid rgba(107, 74, 42, 0.18);
  box-shadow:
    inset 0 0 40px rgba(107, 74, 42, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.paper-head { color: var(--muted); }

.rule {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px dashed rgba(107, 74, 42, 0.22);
}
.rule em { color: var(--muted); }
.rule strong { color: var(--ink); }
.rule span {
  border-radius: 999px;
  color: var(--wood-dark);
  background: rgba(200, 162, 74, 0.22);
}

.result-ticker { color: var(--muted); }

.card {
  border-radius: 12px;
  background: rgba(255, 252, 245, 0.92);
  border: 1px solid rgba(107, 74, 42, 0.16);
  box-shadow: 0 10px 24px rgba(59, 38, 20, 0.12);
}
.card::before { background: var(--gold); }
.card.gift::before { background: var(--accent); }
.card.like::before { background: #c45c26; }
.card.enter::before { background: #2f6b4f; }
.card.sales::before { background: #1f4f8a; }

.card .avatar {
  color: var(--wood-dark);
  background: linear-gradient(145deg, #f0e2c4, #d8c49a);
  border: 1px solid rgba(107, 74, 42, 0.18);
}
.card .badge {
  border-radius: 4px;
  color: var(--wood-dark);
  background: rgba(200, 162, 74, 0.2);
}
.card.gift .badge { color: #fff; background: var(--accent); }
.card.like .badge { color: #fff; background: #c45c26; }
.card.enter .badge { color: #fff; background: #2f6b4f; }
.card.sales .badge { color: #fff; background: #1f4f8a; }
.card .nick { color: var(--ink); }
.card .tip { color: var(--muted); }
.card .times { color: var(--accent); }

.sales-banner {
  border-radius: 12px;
  background: rgba(255, 252, 245, 0.96);
  border: 1px solid rgba(31, 79, 138, 0.22);
  box-shadow: 0 14px 28px rgba(31, 79, 138, 0.16);
}
.sales-tag {
  border-radius: 4px;
  color: #fff;
  background: #1f4f8a;
}
.sales-text { color: var(--ink); }
.queue-hint { color: rgba(248, 239, 216, 0.55); }

.particles span { background: rgba(200, 162, 74, 0.55); }