/* Watercolor paper theme. Layout and game behavior live in the base files. */
:root {
  color-scheme: light;
  --bg: #f6efe3;
  --panel: #fcf8f0f5;
  --paper: #303e49;
  --muted: #62717a;
  --gold: #4f687d;
  --line: #7d91a65c;
  --red: #984b43;
  --green: #4b705d;
}
body { background: var(--bg); }
::selection { background: #c6d6df; color: #263e52; }
.scenery {
  position: absolute;
  inset: 0 0 auto;
  height: 1050px;
  background: url('/werewolf/assets/watercolor-village.webp') top center / max(1440px, 100vw) auto no-repeat;
  pointer-events: none;
}
.scenery:after {
  background: linear-gradient(180deg, transparent 45%, var(--bg) 94%);
}
.shell { max-width: 1400px; }
.header { height: 88px; border-bottom: 1px solid #7d91a65c; background: #f8f2e8df; }
.brand { color: #405a70; }
.brand svg { stroke-width: 1.5; }
.header nav button { color: #425c70; font-size: 12px; }
.hero { min-height: 450px; max-width: 710px; padding: 55px 0 45px; }
.hero-kicker { font: 10px Georgia, serif; letter-spacing: .28em; margin-bottom: 18px; }
h1 { color: #344f67; text-shadow: none; font-size: clamp(72px, 8vw, 106px); letter-spacing: .13em; }
.hero-sub { color: #728497; margin: 14px 0 24px; letter-spacing: .6em; }
.hero-copy { color: #455969; font-size: 20px; }
.hero-meta { color: #61727f; font-size: 11px; }
.hero-buttons { margin-top: 29px; }
.home-resume { margin-top: 16px; }
.home-resume .subtle { background: #f8f2e8b3; min-height: 34px; }
.primary, .outline, .subtle, .danger { border-radius: 2px; }
.primary {
  background: #506a7f;
  border-color: #506a7f;
  color: #fffaf0;
  box-shadow: inset 0 0 0 3px #f6efe31a, 0 3px 9px #41526312;
  font-weight: 500;
}
.primary:hover { background: #405c73; }
.outline { background: #fcf8efc9; color: #415e75; border-color: #7c91a4a6; }
.outline:hover { background: #e3eaf0; }
.subtle { background: #ebede844; color: #526b7c; }
.subtle:hover { background: #dfe7e5aa; }
.danger { background: #f2e2da; color: #8b413a; border-color: #b47a6d7a; }
.danger:hover { background: #ecd3ca; }
button:disabled { opacity: .47; }
.role-gallery, .mode-box, .panel {
  border: 1px solid #7d91a66b;
  border-radius: 3px;
  background: #fcf8eff0;
  box-shadow: 0 4px 18px #576c7c08;
}
.role-gallery { padding: 27px 25px 18px; outline: 1px solid #94a3af35; outline-offset: -7px; }
.gallery-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.gallery-heading h2 { color: #405a70; font-size: 27px; letter-spacing: .04em; }
.gallery-heading .eyebrow { font: 9px Georgia, serif; letter-spacing: .22em; margin-bottom: 7px; }
.gallery-heading .subtle { font-size: 12px; }
.role-strip { margin-top: 22px; gap: 14px; }
.sprite { background-color: #f5eee1; border-radius: 1px; box-shadow: 0 3px 9px #42566518; }
.role-strip button { transition: transform .2s; }
.role-strip button:hover { transform: translateY(-4px); }
.gallery-note { text-align: center; font-size: 11px; color: #657581; margin-top: 17px; line-height: 1.8; }
.mode-box { margin-top: 28px; padding: 28px; background: #faf6edf2; }
.section-caption { color: #425d72; font-size: 23px; }
.setup-group h3 { color: #526b7c; font-size: 13px; }
.mode-card { background: #f9f5ecb3; border-color: #8fa0ac70; border-radius: 2px; }
.mode-card strong { color: #405970; }
.mode-card small { color: #61717d; }
.mode-card.selected { border-color: #658095; background: #dfe8e9a8; box-shadow: inset 0 0 0 3px #f6f5ed8a; }
.mode-card:hover { background: #e7edeba3; }
.setup-options .mode-card { min-height: 106px; }
.setup-summary { color: #3d596f; margin-top: 18px; }
.setup-create { display: flex; gap: 13px; margin-top: 22px; }
.setup-create button { min-width: 220px; }
.home-foot { font-size: 12px; padding: 28px 0 35px; }
.home-foot button { font-size: 12px; }
.page-title h2 { color: #3e586d; }
.eyebrow { color: #5a7286; font-size: 10px; }
.panel-title h3 { color: #415f75; }
.panel hr { border-color: #9aa9b644; }
.pill { color: #435f75; background: #e5ece755; border-color: #8195a66b; }
.pill.green { color: #41664f; border-color: #76917d88; background: #e8eddf; }
.pill.red { color: #914d43; border-color: #b47a6d88; background: #f0e1d8; }
input, select, textarea { background: #fffcf5; color: #354956; border-color: #8296a780; border-radius: 2px; }
input::placeholder, textarea::placeholder { color: #78848c; }
label.field, .check { color: #536773; }
.check input { accent-color: #526f85; }
.deck-row { background: #f5f3eaaa; border-color: #91a2ae55; }
.stepper button { background: #e5ece9; border-color: #8197a866; }
.seat { background: #f4f3eccc; border-color: #899eaf59; border-radius: 2px; }
.seat.self { border-color: #526f8599; background: #e4ece9; }
.seat.speaking { border-color: #5f7e94; background: #dfe9eb; box-shadow: inset 0 0 16px #a4c0cd22; }
.seat-number { color: #486780; }
.seat.dead { opacity: .6; }
.notice { color: #445b6b; background: #dde8e77a; border-left-color: #6c8799; }
.notice.warn { background: #f1e2d9; color: #865047; }
.phase-card { background: #faf7eef5; }
.phase-card h2 { color: #3f5b73; }
.phase-card .eyebrow { color: #6a7c89; }
.phase-card p { color: #586c7c; font-size: 13px; }
.phase-icon { color: #72899a; filter: none; }
.private-box { border-color: #8fa3b680; background: #e9efebcc; }
.reports li { color: #3e586c; border-color: #92a4b448; }
.log p { color: #647681; border-left-color: #91a3ae60; }
.log p:last-child { color: #3b556a; }
.vote-bar { background: #dbe4e7; }
.vote-bar i { background: #6c8799; }
.demo-bar { background: #edf0e6; border-color: #8195a686; }
.library-tabs button.active { color: #3b596f; background: #dce7e7; }
.library-card .name, .result-grid .name { color: #3d5b72; }
dialog { background: #fcf8ef; color: #303e49; border-color: #8197a9b3; border-radius: 3px; box-shadow: 0 15px 70px #354a5b30; }
dialog::backdrop { background: #41536363; backdrop-filter: blur(4px); }
dialog h2 { color: #3d5b73; }
dialog p { color: #596e7c; }
.identity-team { background: #e3eae7; color: #3f5d72; }
#toast { background: #455f73f5; color: #fff8e9; border-color: #879cae; border-radius: 3px; }
.screen-mask { background: #f6efe3; color: #3f5d73; }
.screen-mask p { color: #5b7283; }
.judge-table th, .judge-table td { border-color: #9aabb65c; }
.judge-table button { color: #405c72; background: #edf0e7; }
.private-session { outline: 1px solid #94a3af35; outline-offset: -7px; }
.private-session>h2 { color: #3d586e; }
.transfer-gate { background: #faf7edf7; }
.gold { color: #46657d; }
@media (min-width: 1700px) { .hero { min-height: 550px; } }
@media (max-width: 1100px) {
  .hero { min-height: 430px; }
  .role-strip { gap: 10px; }
}
@media (max-width: 800px) {
  .hero { min-height: 430px; max-width: 570px; }
  .hero h1 { font-size: 88px; }
  .scenery:after { background: linear-gradient(90deg,#f6efe3f0,#f6efe3b8 46%,#f6efe322),linear-gradient(180deg,transparent 30%,#f6efe3 94%); }
  .gallery-heading h2 { font-size: 24px; }
  .role-gallery { padding: 22px 18px 16px; }
  .mode-box { padding: 24px 19px; }
}
@media (max-width: 550px) {
  .header { height: 74px; }
  .header nav button { font-size: 11px; }
  .hero { min-height: 416px; padding: 36px 0; }
  .hero h1 { font-size: 76px; }
  .hero-copy { font-size: 16px; }
  .hero-meta { font-size: 10px; }
  .hero-kicker { font-size: 8px; }
  .scenery { height: 900px; background-size: 1080px auto; background-position: 40% top; }
  .scenery:after { background: linear-gradient(90deg,#f6efe3f0,#f6efe3c4 48%,#f6efe355),linear-gradient(180deg,transparent 20%,#f6efe3 88%); }
  .gallery-heading { align-items: flex-start; gap: 7px; }
  .gallery-heading h2 { font-size: 21px; }
  .gallery-heading .subtle { padding: 5px 0; min-height: 26px; font-size: 10px; }
  .gallery-heading .eyebrow { font-size: 7px; }
  .role-gallery { padding: 22px 13px 15px; }
  .role-strip { grid-template-columns: repeat(5,minmax(96px,1fr)); overflow-x: auto; gap: 10px; padding: 0 0 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .role-strip button { scroll-snap-align: start; }
  .gallery-note { font-size: 10px; margin-top: 10px; }
  .setup-create { flex-direction: column; }
  .setup-create button { min-width: 0; width: 100%; }
  .section-caption { font-size: 19px; }
  .home-foot { font-size: 10px; }
  .home-foot button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .role-strip button:hover { transform: none; } }

.dealer-entry{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}.dealer-entry .primary{font-size:15px;min-width:260px}.dealer-entry>span{font-size:11px;color:#5a7183}.dealer-entry+.hero-buttons{margin-top:14px}.dealer-entry+.hero-buttons>*{min-width:0;font-size:12px;padding:9px 17px;min-height:38px}.dealer-entry+.hero-buttons .primary{background:#f9f4e8c9;color:#465f73;border-color:#8298aa88;box-shadow:none}

/* Individual cards load as they approach the screen. Preserve the complete printed frame. */
img.sprite{width:100%;height:auto;object-fit:contain}

.wolf-hall-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;color:inherit;text-decoration:none;font-size:12px;white-space:nowrap}.wolf-hall-link:hover{text-decoration:underline}@media(max-width:600px){.wolf-hall-link{font-size:10px;padding:5px}}

/* Keep the added hall entry readable on narrow phones. */
@media(max-width:550px){.header:has(>nav){height:auto;min-height:91px;flex-wrap:wrap;gap:4px;padding:15px 0 9px}.header:has(>nav)>.brand{flex:1 0 100%}.header>nav{width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px 14px;align-items:center}.header>nav button{white-space:nowrap;flex-shrink:0;min-height:36px;padding:4px 0;font-size:11px}.header>nav .wolf-hall-link{min-height:36px;font-size:11px;padding:4px 0}}