/* =====================================================
   Ma sói - giao diện riêng: ngôi làng cổ giữa rừng thông, đêm sương mù.
   Nạp SAU ww.css, chỉ áp dụng cho body.ww-page. Bảng màu: đen rêu, vàng đồng cũ, đỏ máu, giấy da.
   ===================================================== */
body.ww-page {
  --ww-gold: #d8b45f;
  --ww-gold-2: #f1d78e;
  --ww-blood: #a3231f;
  --ww-blood-2: #6e130f;
  --ww-parch: #ece3cb;
  --ww-glass: rgba(10, 17, 16, .78);
  --ww-glass-2: rgba(18, 28, 25, .82);

  --paper: var(--ww-glass);
  --ink: var(--ww-parch);
  --ink-2: #cfc6aa;
  --ink-3: #98927c;
  --line: rgba(216, 180, 95, .2);
  --line-strong: rgba(216, 180, 95, .42);
  --teal: #d0a94f;
  --teal-deep: var(--ww-gold-2);
  --teal-soft: rgba(208, 169, 79, .16);
  --khaki-soft: rgba(216, 180, 95, .14);
  --mahogany: #ee7f72;
  --mahogany-soft: rgba(163, 35, 31, .28);
  --shadow: 0 14px 40px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(216, 180, 95, .07);
  --shadow-lift: 0 18px 44px -12px rgba(0, 0, 0, .9);
  --font-title: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;

  background: #050908;
  color: var(--ww-parch);
}
body.ww-page .backdrop-art { display: none; }
body.ww-page a { color: var(--ww-gold-2); }

/* ---------------- Cảnh nền (xem scene.php) ---------------- */
.ww-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #050908; }
.ww-scene > i { position: absolute; display: block; }
.ws-sky, .ws-dawn, .ws-stars, .ws-vignette { inset: 0; }
.ws-sky { background: linear-gradient(180deg, #03060a 0%, #07121c 38%, #11232a 62%, #24383a 80%, #3a4a3e 100%); }
.ws-dawn { background: radial-gradient(120% 70% at 30% 100%, rgba(255, 190, 110, .55), transparent 60%), linear-gradient(180deg, #243a44 0%, #53706b 46%, #b9a478 82%, #d9b877 100%); opacity: 0; transition: opacity 1.6s ease; }
.ws-stars { background-image:
  radial-gradient(1.3px 1.3px at 12% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 27% 8%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 41% 22%, #fff, transparent 60%),
  radial-gradient(1px 1px at 58% 11%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 71% 27%, #fff, transparent 60%), radial-gradient(1px 1px at 86% 9%, #fff, transparent 60%),
  radial-gradient(1.2px 1.2px at 8% 36%, #fff, transparent 60%), radial-gradient(1px 1px at 35% 41%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 64% 44%, #fff, transparent 60%),
  radial-gradient(1px 1px at 93% 38%, #fff, transparent 60%), radial-gradient(1px 1px at 50% 5%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 78% 52%, #fff, transparent 60%);
  opacity: .8; animation: wsTwinkle 5s ease-in-out infinite alternate; transition: opacity 1.4s ease; }
@keyframes wsTwinkle { from { opacity: .45; } to { opacity: .9; } }

.ws-moon { top: 13%; right: 11%; width: clamp(86px, 18vmin, 170px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffbe8 0 42%, #efe4bd 66%, #cdbf92 100%);
  box-shadow: 0 0 40px 12px rgba(245, 236, 195, .35), 0 0 160px 60px rgba(214, 200, 150, .18);
  transition: opacity 1.4s ease, transform 1.8s ease; animation: wsMoon 9s ease-in-out infinite alternate; }
.ws-moon::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 62% 30%, rgba(120, 105, 70, .28) 0 9%, transparent 10%), radial-gradient(circle at 38% 64%, rgba(120, 105, 70, .24) 0 13%, transparent 14%), radial-gradient(circle at 72% 70%, rgba(120, 105, 70, .2) 0 7%, transparent 8%); }
@keyframes wsMoon { from { box-shadow: 0 0 40px 12px rgba(245, 236, 195, .3), 0 0 150px 55px rgba(214, 200, 150, .14); } to { box-shadow: 0 0 48px 16px rgba(245, 236, 195, .42), 0 0 180px 70px rgba(214, 200, 150, .22); } }
.ws-sun { left: 24%; bottom: 20%; width: clamp(90px, 20vmin, 180px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff1c4 0 40%, #ffd37a 70%, rgba(255, 190, 90, 0) 72%); box-shadow: 0 0 90px 40px rgba(255, 196, 110, .45); opacity: 0; transform: translateY(40px); transition: opacity 1.6s ease, transform 1.8s ease; }

/* rừng thông + làng: đáy màn hình, nhiều tầng */
.ws-far, .ws-near, .ws-village, .ws-windows { left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-position: left bottom; }
.ws-far { height: clamp(160px, 34vh, 340px); background-image: url('../img/ww-forest-far.svg'); background-size: auto 100%; opacity: .95; }
.ws-village, .ws-windows { height: clamp(150px, 31vh, 320px); background-repeat: no-repeat; background-position: center bottom; background-size: auto 100%; }
.ws-village { background-image: url('../img/ww-village.svg'); }
.ws-windows { background-image: url('../img/ww-windows.svg'); animation: wsFlicker 4.6s steps(1, end) infinite; transition: opacity 1.4s ease; }
@keyframes wsFlicker { 0%, 100% { opacity: 1; } 18% { opacity: .82; } 22% { opacity: 1; } 55% { opacity: .9; } 58% { opacity: 1; } 81% { opacity: .78; } 84% { opacity: 1; } }
.ws-near { height: clamp(130px, 26vh, 270px); background-image: url('../img/ww-forest-near.svg'); background-size: auto 100%; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 16%, transparent 36%, transparent 64%, #000 84%, #000 100%); mask-image: linear-gradient(90deg, #000 0, #000 16%, transparent 36%, transparent 64%, #000 84%, #000 100%); }

/* cặp mắt trong rừng */
.ws-eyes { bottom: 9vh; width: 16px; height: 5px; background: radial-gradient(circle at 25% 50%, #ffcf5a 0 2px, transparent 2.6px), radial-gradient(circle at 75% 50%, #ffcf5a 0 2px, transparent 2.6px); filter: drop-shadow(0 0 4px #ff8a1f); animation: wsBlink 7s infinite; }
.ws-eyes.e1 { left: 9%; } .ws-eyes.e2 { left: 63%; bottom: 7vh; animation-delay: -3s; } .ws-eyes.e3 { left: 88%; bottom: 11vh; animation-delay: -5s; }
@keyframes wsBlink { 0%, 44%, 50%, 100% { opacity: 1; } 46%, 48% { opacity: 0; } 70%, 96% { opacity: 0; } 98% { opacity: 1; } }

/* sương mù trôi + đom đóm */
.ws-mist { left: -50%; width: 200%; height: 34vh; bottom: 2vh; background: radial-gradient(40% 55% at 20% 70%, rgba(190, 208, 196, .16), transparent 70%), radial-gradient(35% 50% at 60% 60%, rgba(190, 208, 196, .13), transparent 70%), radial-gradient(30% 45% at 90% 75%, rgba(190, 208, 196, .15), transparent 70%); animation: wsDrift 70s linear infinite alternate; }
.ws-mist.m2 { bottom: 14vh; height: 26vh; opacity: .8; animation-duration: 95s; animation-direction: alternate-reverse; }
@keyframes wsDrift { from { transform: translateX(0); } to { transform: translateX(22%); } }
.ws-fly { left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #e8ff9a; box-shadow: 0 0 8px 3px rgba(214, 255, 120, .65); opacity: 0; animation: wsFly var(--d) ease-in-out var(--dl) infinite; transition: opacity 1.2s ease; }
@keyframes wsFly { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .95; } 50% { opacity: .35; transform: translate(26px, -34px); } 80% { opacity: .95; } 100% { opacity: 0; transform: translate(-14px, -62px); } }
.ws-vignette { background: radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

/* ban ngày trong ván: bình minh sương mù, không trăng, không đom đóm */
body.ww-page[data-ww-time="day"] .ws-dawn { opacity: 1; }
body.ww-page[data-ww-time="day"] .ws-stars, body.ww-page[data-ww-time="day"] .ws-moon, body.ww-page[data-ww-time="day"] .ws-fly, body.ww-page[data-ww-time="day"] .ws-eyes { opacity: 0; }
body.ww-page[data-ww-time="day"] .ws-sun { opacity: 1; transform: none; }
body.ww-page[data-ww-time="day"] .ws-windows { opacity: .25; animation: none; }
body.ww-page[data-ww-time="day"] .ws-mist { filter: brightness(1.7); }
/* ban đêm trong ván: tối và xanh hơn một chút */
body.ww-page[data-ww-time="night"] .ws-sky { background: linear-gradient(180deg, #020409 0%, #060d1b 40%, #0c1a29 68%, #172a30 100%); }

/* ---------------- Khung trang ---------------- */
body.ww-page .topbar { background: rgba(5, 9, 9, .72); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.ww-page .topbar, body.ww-page .brand, body.ww-page .topbar-name { color: var(--ww-parch); }
body.ww-page .app-footer, body.ww-page .app-footer * { color: #7f7a68 !important; }
body.ww-page .back-link { color: var(--ww-gold-2); text-shadow: 0 1px 8px #000; }
body.ww-page .back-link:hover { background: rgba(216, 180, 95, .12); }
body.ww-page h1, body.ww-page h2, body.ww-page .card-title { font-family: var(--font-title); letter-spacing: .02em; }
body.ww-page .page-head h1 { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 700; color: var(--ww-gold-2); text-shadow: 0 2px 18px rgba(0, 0, 0, .9), 0 0 24px rgba(216, 180, 95, .28); }
body.ww-page .card-title, body.ww-page .card h2 { font-size: 1.5rem; font-weight: 700; color: var(--ww-gold-2); }
body.ww-page label, body.ww-page .label, body.ww-page legend { color: var(--ink-2); }
body.ww-page .card { background: var(--ww-glass); border: 1px solid var(--line); border-radius: 18px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); position: relative; }
body.ww-page .card::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(216, 180, 95, .12); border-radius: 13px; pointer-events: none; }

/* nút: tem sáp đỏ / đồng cũ */
body.ww-page .btn { font-weight: 700; letter-spacing: .02em; }
body.ww-page .btn-primary { --_bg: linear-gradient(180deg, #b32a24, #6e130f); --_fg: #fbecc8; --_bd: #d8b45f; background: linear-gradient(180deg, #b32a24, #6e130f); border-color: rgba(216, 180, 95, .75); color: #fbecc8; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); box-shadow: 0 8px 22px -8px rgba(163, 35, 31, .9), inset 0 1px 0 rgba(255, 220, 170, .25); }
body.ww-page .btn-primary:hover { background: linear-gradient(180deg, #c8352d, #84180f); box-shadow: 0 10px 28px -6px rgba(200, 50, 40, .95), inset 0 1px 0 rgba(255, 220, 170, .35); }
body.ww-page .btn-ghost { background: rgba(10, 17, 16, .5); color: var(--ww-parch); border-color: var(--line-strong); }
body.ww-page .btn-ghost:hover { background: rgba(216, 180, 95, .14); }
body.ww-page .btn-danger { color: #f0968b; border-color: rgba(238, 127, 114, .45); background: transparent; }
body.ww-page .btn-danger:hover { background: rgba(163, 35, 31, .3); }
body.ww-page .btn:focus-visible { outline: 2px solid var(--ww-gold-2); outline-offset: 2px; }

body.ww-page input[type="text"], body.ww-page input[type="number"], body.ww-page input[type="email"], body.ww-page select, body.ww-page textarea { background: rgba(4, 8, 8, .72); color: var(--ww-parch); border-color: var(--line-strong); }
body.ww-page input::placeholder { color: #7d7762; }
body.ww-page input:focus, body.ww-page select:focus { border-color: var(--ww-gold); box-shadow: 0 0 0 4px rgba(216, 180, 95, .18); }
body.ww-page .form-error { background: rgba(163, 35, 31, .3); color: #ffb4aa; border: 1px solid rgba(238, 127, 114, .35); }
body.ww-page .ww-hint { color: var(--ink-2); }

/* ---------------- Trang chủ Ma sói ---------------- */
.ww-hero { text-align: center; padding: 6px 0 4px; }
.ww-kicker { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--ww-gold); text-shadow: 0 1px 8px #000; }
.ww-title { margin: 6px 0 4px; font-family: var(--font-title); font-weight: 700; font-size: clamp(3.4rem, 17vw, 6.2rem); line-height: .95; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3c9 0%, #e6c36d 46%, #a77b2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(60, 20, 10, .85)) drop-shadow(0 0 26px rgba(216, 180, 95, .28)); }
.ww-tag { margin: 0 auto; max-width: 30em; font-family: var(--font-title); font-style: italic; font-size: clamp(1.15rem, 4vw, 1.4rem); color: var(--ww-parch); text-shadow: 0 2px 12px #000; }
.ww-orn { display: block; width: min(320px, 70%); height: 24px; margin: 14px auto 22px; background: url('../img/ww-divider.svg') center / contain no-repeat; }
.ww-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 620px; margin: 0 auto; }
@media (max-width: 520px) { .ww-doors { grid-template-columns: 1fr; } }
.ww-door { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 18px 22px; color: var(--ww-parch); text-decoration: none; background: linear-gradient(180deg, rgba(30, 21, 14, .86), rgba(12, 12, 10, .9)); border: 1px solid rgba(216, 180, 95, .45); border-radius: 18px 18px 8px 8px; box-shadow: 0 16px 36px -14px #000, inset 0 0 0 4px rgba(10, 8, 6, .6), inset 0 0 0 5px rgba(216, 180, 95, .18); transition: transform .18s, box-shadow .18s, border-color .18s; overflow: hidden; }
.ww-door::before { content: ''; position: absolute; left: 50%; top: -40px; width: 160px; height: 120px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 190, 90, .28), transparent); pointer-events: none; }
.ww-door:hover, .ww-door:focus-visible { transform: translateY(-4px); border-color: var(--ww-gold-2); box-shadow: 0 22px 44px -12px #000, 0 0 30px rgba(216, 180, 95, .22), inset 0 0 0 4px rgba(10, 8, 6, .6), inset 0 0 0 5px rgba(216, 180, 95, .3); outline: none; text-decoration: none; }
.ww-door:active { transform: scale(.98); }
.ww-door svg { width: 64px; height: 64px; color: var(--ww-gold-2); filter: drop-shadow(0 0 10px rgba(255, 190, 90, .45)); }
.ww-door h2 { margin: 2px 0 0; font-size: 1.7rem; color: var(--ww-gold-2); }
.ww-door p { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.ww-lamp { animation: wsLamp 3.4s ease-in-out infinite alternate; }
@keyframes wsLamp { from { opacity: .82; } to { opacity: 1; } }
.ww-login-hint { text-align: center; margin: 18px 0 0; }

/* ---------------- Tạo phòng / Tham gia ---------------- */
.ww-sub { margin: -10px 0 18px; font-family: var(--font-title); font-style: italic; font-size: 1.2rem; color: var(--ink-2); text-shadow: 0 2px 10px #000; }
.ww-role { background: linear-gradient(180deg, rgba(26, 20, 14, .85), rgba(10, 12, 11, .88)); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: inset 0 0 0 3px rgba(5, 8, 7, .7), inset 0 0 0 4px rgba(216, 180, 95, .15); }
button.ww-role:hover { border-color: var(--ww-gold-2); }
.ww-role.is-on { border-color: var(--ww-gold-2); background: linear-gradient(180deg, rgba(64, 30, 20, .88), rgba(20, 12, 10, .9)); box-shadow: 0 0 22px rgba(216, 150, 70, .25), inset 0 0 0 3px rgba(5, 8, 7, .7), inset 0 0 0 4px rgba(216, 180, 95, .35); }
.ww-role:not(.is-on) { opacity: .62; }
.ww-role-ico { filter: drop-shadow(0 0 8px rgba(255, 190, 90, .35)); }
.ww-role b { font-family: var(--font-title); font-size: 1.2rem; color: var(--ww-gold-2); }
.ww-role small { color: var(--ink-2); }
.ww-role em, .ww-role.is-on:not(.is-fixed)::after { color: var(--ww-gold-2); }
.ww-code-in { font-family: var(--font-title); font-size: 2.6rem; color: var(--ww-gold-2); text-shadow: 0 0 18px rgba(216, 180, 95, .45); background: rgba(4, 8, 8, .8) !important; border: 1.5px solid var(--ww-gold) !important; border-radius: 14px; }
.ww-code-tag { background: rgba(216, 180, 95, .16); color: var(--ww-gold-2); font-family: var(--font-title); border: 1px solid var(--line-strong); }

/* ---------------- Phòng chờ ---------------- */
.ww-bigcode { font-family: var(--font-title); color: var(--ww-gold-2); text-shadow: 0 0 24px rgba(216, 180, 95, .5), 0 3px 0 rgba(60, 20, 10, .8); }
.ww-label { color: var(--ww-gold); }
.ww-qr { border-color: var(--ww-gold); box-shadow: 0 0 26px rgba(216, 180, 95, .25); }
.ww-link input, .ww-chat-form input, .ww-step input { background: rgba(4, 8, 8, .72); color: var(--ww-parch); border-color: var(--line-strong); }
.ww-prow, .ww-srow, .ww-m, .ww-roster li, .ww-log li { background: rgba(4, 8, 8, .6); border-color: var(--line); color: var(--ww-parch); }
.ww-av { background: radial-gradient(circle at 35% 30%, #c8412f, #6e130f); color: #fbecc8; border: 1px solid rgba(216, 180, 95, .6); font-family: var(--font-title); font-size: 1.1rem; }
.ww-badge { background: rgba(216, 180, 95, .16); color: var(--ww-gold-2); }
.ww-badge.is-off { background: rgba(163, 35, 31, .3); color: #ffb4aa; }
.ww-chip { background: rgba(216, 180, 95, .1); border-color: var(--line-strong); color: var(--ww-parch); }
#wwLock.is-locked { background: rgba(163, 35, 31, .28); border-color: rgba(238, 127, 114, .55); color: #ffb4aa; }
.ww-modal { background: rgba(2, 4, 4, .78); }
.ww-modal-box { background: linear-gradient(180deg, #1a140e, #0b0d0c); border: 1px solid var(--ww-gold); box-shadow: 0 30px 70px -10px #000, inset 0 0 0 4px rgba(5, 8, 7, .7), inset 0 0 0 5px rgba(216, 180, 95, .2); }
.ww-modal-box h2 { font-family: var(--font-title); font-size: 1.8rem; color: var(--ww-gold-2); }
.ww-step button { background: rgba(216, 180, 95, .12); color: var(--ww-gold-2); border-color: var(--line-strong); }
.ww-split-sum { color: var(--ww-gold-2); }
.ww-split-sum.is-bad { color: #ff9a8f; }

/* ---------------- Màn chơi ---------------- */
body.ww-page .ww-bar, body.ww-page[data-ww-time] .ww-bar { background: rgba(5, 9, 9, .82); border-color: var(--line); }
.ww-phase { font-family: var(--font-title); font-size: 1.5rem; color: var(--ww-gold-2); }
body.ww-page .ww-timer, body.ww-page[data-ww-time="night"] .ww-timer { color: var(--ww-gold-2); font-family: var(--font-title); font-size: 1.7rem; }
.ww-timer.is-low { color: #ff7a6b !important; animation: wwPulse .9s ease-in-out infinite alternate; }
@keyframes wwPulse { from { opacity: .7; } to { opacity: 1; } }
.ww-progress { background: rgba(216, 180, 95, .15); }
.ww-progress span { background: linear-gradient(90deg, #a3231f, #d8b45f); }
body.ww-page[data-ww-time] .ww-game .card { background: var(--ww-glass); border-color: var(--line); color: var(--ww-parch); }
body.ww-page[data-ww-time="day"] .ww-game .card { background: rgba(28, 22, 14, .8); }
body.ww-page[data-ww-time] .ww-game .card-title, body.ww-page[data-ww-time] .ww-game h2 { color: var(--ww-gold-2); }
body.ww-page[data-ww-time] .ww-prompt p, body.ww-page[data-ww-time] .ww-me-desc, body.ww-page[data-ww-time] .ww-wait { color: var(--ink-2); }
.ww-me-name { font-family: var(--font-title); font-size: 1.7rem; color: var(--ww-gold-2); }
.ww-me-ico { filter: drop-shadow(0 0 14px rgba(255, 190, 90, .5)); }
body.ww-page .ww-me.is-wolf, body.ww-page[data-ww-time] .ww-me.is-wolf { background: linear-gradient(180deg, rgba(86, 18, 16, .78), rgba(24, 8, 8, .86)); border-color: rgba(238, 127, 114, .55); box-shadow: 0 0 30px rgba(163, 35, 31, .35); }
.ww-me.is-big { box-shadow: 0 0 0 2px var(--ww-gold), 0 0 40px rgba(216, 180, 95, .3); }
body.ww-page[data-ww-time] .ww-extra { background: rgba(216, 180, 95, .1); }
body.ww-page[data-ww-time] .ww-pc { background: rgba(8, 13, 12, .72); color: var(--ww-parch); border-color: var(--line); }
body.ww-page[data-ww-time] .ww-pc.is-can { border-color: var(--line-strong); }
body.ww-page[data-ww-time] .ww-pc.is-can:hover { border-color: var(--ww-gold-2); }
body.ww-page[data-ww-time] .ww-pc.is-sel { background: linear-gradient(180deg, rgba(110, 24, 18, .75), rgba(30, 10, 8, .85)); border-color: #e0a64a; box-shadow: 0 0 0 3px rgba(216, 150, 70, .3), 0 0 22px rgba(216, 150, 70, .3); }
.ww-pc.is-me .ww-pn { color: var(--ww-gold-2); }
.ww-pc.is-off .ww-av { background: #3b3a33; }
.ww-pc.is-speaking { border-color: #8bd36a; box-shadow: 0 0 0 3px rgba(139, 211, 106, .3); }
body.ww-page .ww-picks { background: var(--ww-blood); border: 1px solid var(--ww-gold); }
body.ww-page[data-ww-time] .ww-result { background: rgba(216, 180, 95, .16); color: var(--ww-gold-2) !important; border: 1px solid var(--line-strong); }
body.ww-page[data-ww-time] .ww-m, body.ww-page[data-ww-time] .ww-log li, body.ww-page[data-ww-time] .ww-roster li { background: rgba(4, 8, 8, .6); border-color: var(--line); color: var(--ww-parch); }
body.ww-page[data-ww-time] .ww-m.is-me { background: rgba(216, 180, 95, .12); }
body.ww-page[data-ww-time] .ww-m-wolf, body.ww-page .ww-roster li.is-wolf { background: rgba(110, 24, 18, .5); border-color: rgba(238, 127, 114, .45); }
body.ww-page[data-ww-time] .ww-chat-form input { background: rgba(4, 8, 8, .72); color: var(--ww-parch); border-color: var(--line-strong); }
body.ww-page[data-ww-time] .btn-ghost { color: var(--ww-parch); border-color: var(--line-strong); }
.ww-log li { border-left-color: var(--line-strong); }
.ww-l-night, .ww-l-day, .ww-l-vote, .ww-l-end { border-left-color: var(--ww-gold); }
.ww-l-died { border-left-color: #c0392b; }
.ww-win { font-family: var(--font-title); font-size: 2.2rem; color: var(--ww-gold-2); text-shadow: 0 0 24px rgba(216, 180, 95, .4); }

@media (prefers-reduced-motion: reduce) {
  .ws-stars, .ws-moon, .ws-windows, .ws-eyes, .ws-mist, .ws-fly, .ww-lamp, .ww-timer.is-low { animation: none; }
  .ws-fly { opacity: .5; }
}