/* Wolves Den Tavern, material pass 2: larger steel corners and scorched parchment.
   All graphics are the owner's original art in /public/assets/.
   Applied after each page's existing CSS to preserve layout and JS. */
:root {
  --tavern-ink:#30251b;
  --tavern-steel:#68727b;
  --tavern-crimson:#842b32;
  --tavern-parchment:#ddcda9;
  --tavern-wood:#332116;
}
body {
  background-color:#1b120e;
  background-image:linear-gradient(90deg,rgba(10,8,7,.65),transparent 19%,transparent 81%,rgba(10,8,7,.65)),
                   linear-gradient(rgba(18,11,8,.3),rgba(18,11,8,.3)),
                   url('./dark-wood.png');
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:100% 100%,100% 100%,640px auto;
  background-attachment:fixed,fixed,scroll;
}
/* Preserve the existing sign, fade, page width, and tagline overlap. */
.tagline {text-shadow:0 2px 8px #140d09,0 5px 24px #140d09,0 0 32px #1b0f0c;}

/* Navigation, wooden plaques with dark steel rims. */
.rooms {gap:14px;}
.room {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#372318;
  background-image:linear-gradient(180deg,rgba(255,255,255,.11),transparent 30%,rgba(0,0,0,.34)),url('./dark-wood.png');
  background-size:100% 100%,440px auto;
  border:2px solid var(--tavern-steel);
  border-radius:9px;
  box-shadow:inset 0 0 0 2px #211813,inset 0 2px 0 rgba(220,226,231,.22),0 5px 10px rgba(0,0,0,.45);
  color:#f6ede1;
  text-shadow:0 1px 3px #140a07;
  transition:filter .16s ease,transform .16s ease,box-shadow .16s ease;
}
.room small {color:#dfcebc;}
.room:hover {border-color:#aab4bd;filter:brightness(1.1);transform:translateY(-1px);}
.room[aria-current="page"] {
  background-color:#6f2630;
  background-image:radial-gradient(ellipse at 45% 7%,rgba(255,210,210,.22),transparent 66%),
     linear-gradient(180deg,rgba(36,3,6,.06),rgba(14,0,0,.48)),
     repeating-linear-gradient(26deg,rgba(255,255,255,.022) 0 1px,transparent 1px 7px);
  border-color:#aab3bc;
  box-shadow:inset 0 0 0 2px #441c20,inset 0 3px 8px rgba(0,0,0,.35),0 5px 12px rgba(0,0,0,.5);
}
.home-link {
  background:linear-gradient(180deg,rgba(94,53,35,.98),rgba(33,21,16,.96)),url('./dark-wood.png');
  border:1px solid #7e8890;
  box-shadow:inset 0 1px rgba(232,238,242,.2),0 3px 10px rgba(0,0,0,.5);
  color:#f3e6d5 !important;
}

/* Major text surfaces become framed parchment notice boards. */
main > .section,
main > #games,
main > .library-intro,
#application.panel, #successView.panel {
  position:relative;
  isolation:isolate;
  padding:clamp(25px,4vw,42px);
  margin-top:24px;
  background-color:var(--tavern-parchment);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 50%,transparent 50%,rgba(111,55,21,.17) 78%,rgba(67,28,10,.47) 100%),
    linear-gradient(to right,rgba(76,33,12,.31),transparent 8%,transparent 92%,rgba(76,33,12,.31)),
    linear-gradient(to bottom,rgba(76,33,12,.32),transparent 9%,transparent 91%,rgba(76,33,12,.32)),
    linear-gradient(115deg,rgba(255,249,231,.12),rgba(92,58,36,.06)),
    url('./parchment.png');
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,700px auto;
  border:9px solid #382319;
  border-radius:12px;
  outline:2px solid #59636b;
  box-shadow:
    inset 0 0 0 2px #8b6849,
    inset 0 0 15px rgba(67,25,8,.48),
    inset 0 0 48px rgba(83,36,12,.33),
    inset 0 0 88px rgba(95,51,18,.15),
    0 10px 24px rgba(0,0,0,.53);
  color:var(--tavern-ink);
}
/* Real hand-drawn steel ornament is placed over the wooden board. */
main > .section::before,
main > #games::before,
main > .library-intro::before,
#application.panel::before, #successView.panel::before,
main > .section::after,
main > #games::after,
main > .library-intro::after,
#application.panel::after, #successView.panel::after {
  content:"";
  position:absolute;
  width:clamp(72px,9vw,104px);
  height:clamp(72px,9vw,104px);
  background:url('./steel-corner.png') center/contain no-repeat;
  pointer-events:none;
  z-index:2;
}
main > .section::before,main > #games::before,main > .library-intro::before,#application.panel::before,#successView.panel::before {top:-11px;left:-11px;}
main > .section::after,main > #games::after,main > .library-intro::after,
#application.panel::after, #successView.panel::after {bottom:-11px;right:-11px;transform:rotate(180deg);}
main > .section h2,
main > #games h2,
main > .library-intro h2 {color:#38251a;}
main > .section p,
main > #games p,
main > .library-intro p,
main > .section li {color:#433125;}
main > .section .eyebrow,
main > #games .eyebrow,
main > .library-intro .eyebrow {color:#842b32;}
main > .section a:not(.button),
main > #games a:not(.button),
main > .library-intro a:not(.button) {color:#67232d;}

/* Choice cards and campaign/game cards use a shallower parchment inset. */
.choice,.apply-step,.card,.notice {
  background-color:#e4d3b2;
  background-image:
    radial-gradient(ellipse 125% 100% at 50% 50%,transparent 55%,rgba(94,45,17,.2) 85%,rgba(62,28,10,.36) 100%),
    linear-gradient(to right,rgba(83,39,13,.16),transparent 9%,transparent 91%,rgba(83,39,13,.16)),
    linear-gradient(165deg,rgba(255,249,228,.16),rgba(71,45,25,.08)),
    url('./parchment.png');
  background-size:100% 100%,100% 100%,100% 100%,580px auto;
  border:3px solid #545b60;
  border-radius:9px;
  box-shadow:
    inset 0 0 0 3px rgba(92,56,31,.22),
    inset 0 0 18px rgba(92,43,14,.28),
    inset 0 0 38px rgba(78,35,11,.17),
    0 4px 14px rgba(0,0,0,.17);
  color:#35251a;
}
.choice p,.apply-step p,.card p,.notice p,
.choice h3,.apply-step h3,.card h3,.notice h3 {color:#35251a;}
.choice .eyebrow,.apply-step .eyebrow,.card .eyebrow {color:var(--tavern-crimson);}
.card .tag,.tag {color:#6a2530;border-color:#89736a;background:rgba(255,249,238,.28);}
.card .meta,.small,.status {color:#493527;}
.card .footer {border-top:1px solid rgba(73,53,38,.22);}
/* Action buttons, dark steel frame and crimson leather-like finish. */
.button {
  background:radial-gradient(ellipse at 30% 0%,rgba(255,226,226,.25),transparent 70%),
             linear-gradient(180deg,#963740,#602027);
  color:#fff5e6;
  border:2px solid #67717a;
  border-radius:7px;
  box-shadow:inset 0 1px rgba(255,244,232,.2),inset 0 -3px 4px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.2);
  text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.button:hover {filter:brightness(1.1);border-color:#aeb7bf;}
.button.secondary {
  background:linear-gradient(180deg,#60412e,#382519);
  color:#fff4e6;
  border-color:#67717a;
}
.controls input,.controls select {
  background:#f0e4cf;
  color:#2d211b;
  border:2px solid #6b7178;
  border-radius:7px;
}
.controls input::placeholder {color:#6d6051;}
.controls input:focus-visible,.controls select:focus-visible,.button:focus-visible,.room:focus-visible {
  outline:3px solid #a7464d;
  outline-offset:3px;
}
/* Ensure all three room buttons stack on narrow screens, even when base CSS order differs. */
@media(max-width:760px) {
  .rooms {grid-template-columns:1fr;gap:9px;}
  .room {padding:12px 14px;}
  main > .section::before,main > #games::before,main > .library-intro::before,
#application.panel::before, #successView.panel::before,
  main > .section::after,main > #games::after,main > .library-intro::after,
#application.panel::after, #successView.panel::after {
    width:clamp(60px,15vw,78px);
    height:clamp(60px,15vw,78px);
  }
  main > .section,main > #games,main > .library-intro,
#application.panel, #successView.panel {padding:26px 20px;border-width:7px;}
  main > .section::before,main > #games::before,main > .library-intro::before,#application.panel::before,#successView.panel::before {top:-9px;left:-9px;}
  main > .section::after,main > #games::after,main > .library-intro::after,
#application.panel::after, #successView.panel::after {bottom:-9px;right:-9px;}
}
@media(prefers-reduced-motion:reduce) {.room {transition:none;}}

/* Library listings and filters use the same materials as the Hearth. */
.library-card {
  background-color:#e4d3b2;
  background-image:radial-gradient(ellipse 125% 100% at 50% 50%,transparent 55%,rgba(94,45,17,.2) 85%,rgba(62,28,10,.36) 100%),linear-gradient(to right,rgba(83,39,13,.16),transparent 9%,transparent 91%,rgba(83,39,13,.16)),linear-gradient(165deg,rgba(255,249,228,.16),rgba(71,45,25,.08)),url('./parchment.png');
  background-size:100% 100%,100% 100%,580px auto;
  border:3px solid #545b60;border-radius:9px;
  box-shadow:inset 0 0 0 3px rgba(92,56,31,.22),inset 0 0 18px rgba(92,43,14,.28),inset 0 0 38px rgba(78,35,11,.17),0 4px 14px rgba(0,0,0,.17);
  color:#35251a;
}
.library-card h3,.library-card p,.library-card .meta {color:#35251a;}
.library-card .tag {color:#6a2530;border-color:#89736a;background:rgba(255,249,238,.28);}
.library-controls input,.library-controls select {background:#f0e4cf;color:#2d211b;border:2px solid #6b7178;border-radius:7px;}
.library-controls input::placeholder {color:#6d6051;}
.library-controls input:focus-visible,.library-controls select:focus-visible {outline:3px solid #a7464d;outline-offset:3px;}
.apply-step strong {color:#842b32;}

/* Application form layout and states, sharing materials with the public pages. */
header .brand img { filter:drop-shadow(0 3px 9px rgba(0,0,0,.65)); }
header nav a.home-link {
  background-color:#372318;
  background-image:linear-gradient(180deg,rgba(255,255,255,.10),transparent 30%,rgba(0,0,0,.35)),url('./dark-wood.png');
  background-size:100% 100%,440px auto;
  border:2px solid var(--tavern-steel);
  border-radius:9px;
  box-shadow:inset 0 0 0 2px #211813,inset 0 2px 0 rgba(220,226,231,.22),0 5px 10px rgba(0,0,0,.45);
  color:#f6ede1;
  text-shadow:0 1px 3px #140a07;
}
header nav a.home-link:hover { color:#fff; background-color:#473021; border-color:#aab4bd; filter:brightness(1.1); }
body:has(#application) main { max-width:840px; }
#formView > h1 { color:#f4e9dc; text-shadow:0 3px 12px #140d09; }
#formView > .muted { color:#e2d3c2; }
#application label,#application .heading,#application p,
#application .help,#application .privacy,
#successView h1,#successView h2,#successView p { color:#35251a; }
#application .heading, #application .field > label { font-family:Georgia,serif; font-size:1.12rem; }
#application input:not([type=checkbox]):not([type=radio]),
#application select,#application textarea {
  background:#f0e4cf;
  color:#2d211b;
  border:2px solid #6b7178;
  border-radius:7px;
  box-shadow:inset 0 2px 5px rgba(70,42,22,.1);
}
#application input::placeholder,#application textarea::placeholder {color:#6d6051;opacity:1;}
#application input[type=checkbox],#application input[type=radio] {accent-color:var(--tavern-crimson);}
#application .choice {color:#35251a;}
#application .day { background:rgba(255,248,230,.3);border:1px solid #99866f; }
#application .subtle,#successView .subtle {
  background:rgba(255,246,224,.55);
  border:2px solid #69727a;
  box-shadow:inset 0 0 13px rgba(85,42,16,.16);
  color:#35251a;
}
#application .notice,#successView .notice,#loadStatus.notice {
  background:rgba(255,246,224,.70);
  color:#35251a;
  border:2px solid #69727a;
}
#application .notice.error {border-color:#842b32;color:#842b32;}
#application .notice.success {border-color:#31663e;color:#21492e;}
#application .privacy {border-top:1px solid rgba(73,53,38,.24);padding-top:14px;}
#successView .check {color:#347745;}
#successView a:not(.button) {color:#6c2730;}
#application input:focus-visible,#application textarea:focus-visible,#application select:focus-visible,
#application .button:focus-visible,#successView .button:focus-visible,header nav a.home-link:focus-visible {
  outline:3px solid #a7464d;outline-offset:3px;
}
@media(max-width:760px){
  #application.panel,#successView.panel {border-width:7px;padding:26px 20px;}
  #application.panel::before,#application.panel::after,#successView.panel::before,#successView.panel::after {width:clamp(60px,15vw,78px);height:clamp(60px,15vw,78px);}
  #application.panel::before,#successView.panel::before {top:-9px;left:-9px;}
  #application.panel::after,#successView.panel::after {bottom:-9px;right:-9px;}
}

/* Radio choices are controls, not the decorative choice cards used on Home. */
#application label.choice {background:none;background-image:none;border:0;box-shadow:none;padding:0;border-radius:0;display:inline-flex;gap:9px;color:#35251a;}
#application .help,#application .privacy {color:#493527;}
#application.panel,#successView.panel {margin-top:20px;}


/* Staff editors: shared tavern materials, simplified working layout.
   Scoped to .staff-page so public pages remain unchanged. */
body.staff-page {
  --staff-ink:#35251a;
  --staff-muted:#594331;
}
body.staff-page header {
  border-bottom:0;
  background:rgba(25,17,13,.64);
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}
body.staff-page header .brand {
  color:#f4e9dc;
  text-shadow:0 2px 5px #100b08;
}
body.staff-page header nav a {
  display:inline-block;
  padding:9px 14px;
  color:#f3e6d5;
  text-decoration:none;
  border:1px solid #7e8890;
  border-radius:7px;
  background:linear-gradient(180deg,rgba(94,53,35,.98),rgba(33,21,16,.96)),url('./dark-wood.png');
  box-shadow:inset 0 1px rgba(232,238,242,.2),0 3px 10px rgba(0,0,0,.5);
}
body.staff-page header nav a:hover,body.staff-page header nav a:focus-visible {
  border-color:#aeb7bf;
  filter:brightness(1.12);
}
body.staff-page .staff-intro h1 {
  color:#f4e9dc;
  text-shadow:0 3px 12px #140d09;
}
body.staff-page .staff-intro .eyebrow {color:#dfb0a9;}
body.staff-page .staff-intro p {color:#e2d3c2;}
body.staff-page .staff-switch {
  background-color:#38251a;
  background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.35)),url('./dark-wood.png');
  background-size:100% 100%,440px auto;
  border:2px solid #68727b;
  box-shadow:0 5px 16px rgba(0,0,0,.3),inset 0 0 0 2px #211813;
}
body.staff-page .staff-switch strong {color:#efe0d0;}
body.staff-page .staff-switch a {
  color:#f6ede1;
  background:#3f2a20;
  border:1px solid #88929a;
  box-shadow:inset 0 1px rgba(255,255,255,.11);
}
body.staff-page .staff-switch a:hover {border-color:#c5ccd1;}
body.staff-page .staff-switch a[aria-current="page"] {
  background:linear-gradient(180deg,#963740,#602027);
  border-color:#aab3bc;
  color:#fff5e6;
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.22);
}
/* Treat the staff forms as parchment notices, without changing their structure. */
body.staff-page .panel {
  position:relative;
  isolation:isolate;
  background-color:#ddcda9;
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 50%,transparent 50%,rgba(111,55,21,.17) 78%,rgba(67,28,10,.47) 100%),
    linear-gradient(to right,rgba(76,33,12,.31),transparent 8%,transparent 92%,rgba(76,33,12,.31)),
    linear-gradient(to bottom,rgba(76,33,12,.32),transparent 9%,transparent 91%,rgba(76,33,12,.32)),
    url('./parchment.png');
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:100% 100%,100% 100%,100% 100%,700px auto;
  border:7px solid #382319;
  outline:2px solid #59636b;
  border-radius:11px;
  box-shadow:inset 0 0 0 2px #8b6849,inset 0 0 32px rgba(67,25,8,.38),0 10px 24px rgba(0,0,0,.42);
  color:var(--staff-ink);
}
body.staff-page .panel::before,body.staff-page .panel::after {
  content:"";
  position:absolute;
  width:clamp(56px,7vw,84px);
  height:clamp(56px,7vw,84px);
  background:url('./steel-corner.png') center/contain no-repeat;
  pointer-events:none;
  z-index:2;
}
body.staff-page .panel::before {top:-9px;left:-9px;}
body.staff-page .panel::after {bottom:-9px;right:-9px;transform:rotate(180deg);}
body.staff-page .panel h2,body.staff-page .panel label {color:var(--staff-ink);}
body.staff-page .panel p,body.staff-page .panel .help,body.staff-page .panel .hint {color:var(--staff-muted);}
body.staff-page input:not([type=checkbox]):not([type=radio]),
body.staff-page textarea,body.staff-page select {
  color:#2d211b;
  background:#f0e4cf;
  border:2px solid #6b7178;
  border-radius:7px;
  box-shadow:inset 0 2px 5px rgba(70,42,22,.10);
}
body.staff-page input::placeholder,body.staff-page textarea::placeholder {color:#776656;opacity:1;}
body.staff-page input:focus-visible,body.staff-page textarea:focus-visible,body.staff-page select:focus-visible,
body.staff-page button:focus-visible,body.staff-page a:focus-visible {
  outline:3px solid #a7464d;
  outline-offset:3px;
}
body.staff-page button.button,body.staff-page button.btn {
  background:linear-gradient(180deg,#963740,#602027);
  color:#fff5e6;
  border:2px solid #67717a;
  box-shadow:inset 0 1px rgba(255,244,232,.2),inset 0 -3px 4px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.2);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
body.staff-page button.button:hover,body.staff-page button.btn:hover {filter:brightness(1.09);}
body.staff-page button.button.secondary,body.staff-page button.btn.alt {
  background:linear-gradient(180deg,#60412e,#382519);
  color:#fff4e6;
}
body.staff-page button.button.danger {
  background:linear-gradient(180deg,#6e2c32,#431a20);
  color:#fff1ed;
  border-color:#a65a61;
}
body.staff-page button.item,body.staff-page button.game {
  background:linear-gradient(180deg,#493022,#302019),url('./dark-wood.png');
  border:2px solid #707b83;
  color:#f5e9d7;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
body.staff-page button.item small,body.staff-page button.game small {color:#e1d1bd;}
body.staff-page button.item.active,body.staff-page button.game.active {
  background:linear-gradient(180deg,#7f3038,#542129);
  border-color:#aab3bc;
  box-shadow:inset 3px 0 0 #dbb1b0,0 2px 6px rgba(0,0,0,.12);
}
body.staff-page .status,body.staff-page > main > .notice {
  color:#f6e8d9;
  background:#38251d;
  border:2px solid #707982;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}
body.staff-page .status.error,body.staff-page > main > .notice.error {color:#ffbfb4;border-color:#a65a61;}
body.staff-page .status.success {color:#c6ecc0;border-color:#76977a;}
body.staff-page footer {border-top:1px solid #59636b;color:#e1cdb8;}
@media(max-width:760px) {
  body.staff-page .panel {padding:25px 19px;border-width:6px;}
  body.staff-page .panel::before,body.staff-page .panel::after {width:clamp(48px,12vw,68px);height:clamp(48px,12vw,68px);}
  body.staff-page header nav {gap:8px;}
}

/* Keep game and campaign cards inside their frames on mobile */
@media (max-width: 760px) {
  .cards,
  .library-cards {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .cards > *,
  .library-cards > * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .card .footer,
  .library-card .end {
    min-width: 0;
    flex-wrap: wrap;
  }

  .card .cover,
  .library-card .cover {
    max-width: 100%;
  }
}

/* Prevent application time fields overflowing on phones */
@media (max-width: 600px) {
  #application .days,
  #application .day {
    min-width: 0;
    max-width: 100%;
  }

  #application .day {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #application .day input[type="time"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}