/* The Wayside: a roadside inn, with quiet, readable working surfaces.
   Artwork is local and decorative. Existing palettes keep their own colours. */
html[data-site-name="The Wayside"] {
  --wayside-art-ink: #f3f0e9;
  --wayside-brass: var(--theme-accent, #e5bd77);
  --wayside-dark-ink: #251a10;
  --wayside-frame: color-mix(in srgb, var(--theme-line) 72%, transparent);
  --wayside-inn-art: url("./inn-dusk-800.webp");
}
html[data-palette="wayside"] {
  --theme-background: #1b1511;
  --theme-surface: #2a211a;
  --theme-ink: #f4e7ca;
  --theme-muted: #c9b693;
  --theme-accent: #e5bd77;
  --theme-line: #786047;
  --theme-tint: #382b20;
  --theme-button-ink: #251a10;
  --theme-heading: #f4e7ca;
  --theme-backdrop: radial-gradient(ellipse at 50% 0, #47321d45, transparent 45rem);
}
html[data-palette="wayside-dusk"] {
  --theme-background: #111922;
  --theme-surface: #18232e;
  --theme-tint: #22313e;
  --theme-ink: #ebe8df;
  --theme-muted: #adb8bd;
  --theme-accent: #d7af8b;
  --theme-line: #71808a;
  --theme-button-ink: #17212b;
  --theme-heading: #f2efe8;
  --theme-backdrop: radial-gradient(ellipse at 85% 0, #d7af8b09, transparent 40rem);
}
html[data-palette="wayside-moss"] {
  --theme-background: #171e1b;
  --theme-surface: #202c26;
  --theme-tint: #2b3a30;
  --theme-ink: #eeeade;
  --theme-muted: #bdc8bc;
  --theme-accent: #d4aa83;
  --theme-line: #809184;
  --theme-button-ink: #1c251f;
  --theme-heading: #f2efe6;
  --theme-backdrop: radial-gradient(ellipse at 85% 0, #d4aa8309, transparent 40rem);
}
html[data-palette="wayside-stone"] {
  --theme-background: #1b1c1e;
  --theme-surface: #28292a;
  --theme-tint: #343534;
  --theme-ink: #efece4;
  --theme-muted: #c3c0b8;
  --theme-accent: #d6b780;
  --theme-line: #8c8d87;
  --theme-button-ink: #242422;
  --theme-heading: #f3f0e9;
  --theme-backdrop: radial-gradient(ellipse at 85% 0, #d6b7809, transparent 40rem);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) body {
  background-image: var(--theme-backdrop);
  background-color: var(--theme-background);
  color: var(--theme-ink);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .site-header {
  padding-block: 0.65rem 0.25rem;
  border-bottom: 1px solid var(--wayside-frame);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .wayside-wordmark {
  gap: 0.7rem;
  letter-spacing: 0.015em;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .wayside-wordmark .wordmark-name {
  font-size: 1.35rem;
  font-variant: small-caps;
  font-weight: 600;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .wayside-mark {
  box-sizing: border-box;
  padding: 0;
  width: 38px;
  height: 42px;
  border: 0;
  background: transparent;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .site-project-nav {
  column-gap: clamp(0.9rem, 2vw, 1.4rem);
  font-size: 0.82rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .site-project-nav > a {
  box-sizing: border-box;
  padding-block: 0.45rem;
  position: relative;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .site-project-nav > a[aria-current] {
  border-color: var(--theme-accent);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  .site-project-nav
  > a[aria-current]::after {
  position: absolute;
  inset-inline-start: calc(50% - 2px);
  inset-block-end: -3px;
  width: 4px;
  height: 4px;
  content: "";
  transform: rotate(45deg);
  background: var(--theme-accent);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .display-options {
  border: 1px solid var(--theme-line);
  box-shadow: 0 0.75rem 2rem #0006;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .site-content footer {
  margin-top: 2rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--wayside-frame);
}

/* The arrival image belongs to the brand in every selected palette. */
html[data-site-name="The Wayside"] .site-header [hidden] {
  display: none !important;
}
.wayside-profile-menu {
  position: static;
}
html[data-site-name="The Wayside"] .site-header .account-tools {
  position: relative;
}
.wayside-profile-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.wayside-profile-menu > summary::-webkit-details-marker {
  display: none;
}
.wayside-profile-menu > nav {
  box-sizing: border-box;
  position: absolute;
  z-index: 50;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  width: min(20rem, calc(100vw - 3rem));
  padding: 0.6rem;
  border: 1px solid var(--theme-muted);
  border-radius: 0.35rem;
  background: var(--theme-surface);
  color: var(--theme-ink);
  box-shadow: 0 0.7rem 2rem #0004;
}
.wayside-profile-menu:not([open]) > nav {
  display: none;
}
html[data-site-name="The Wayside"] .wayside-profile-menu nav :is(a, button) {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem;
  background: transparent;
  color: inherit;
  border: 0;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
html[data-site-name="The Wayside"] .wayside-profile-menu nav :is(a, button):hover {
  background: var(--theme-tint);
}
html[data-site-name="The Wayside"] .wayside-profile-menu nav button:disabled {
  color: var(--theme-muted);
  cursor: default;
}
.wayside-profile-menu nav p {
  margin: 0.3rem 0.65rem 0.75rem;
  line-height: 1.5;
  color: var(--theme-muted);
  font-size: 0.8rem;
}
.wayside-account {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: 1rem 3rem;
}
.wayside-account h1 {
  font:
    400 clamp(2rem, 5vw, 3rem)/1.15 Georgia,
    serif;
}
.wayside-account :is(p, label) {
  line-height: 1.6;
}
.wayside-account :is(fieldset, section, details) {
  border: 1px solid var(--theme-line);
  background: var(--theme-surface);
  border-radius: 0.3rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.wayside-account legend {
  padding-inline: 0.5rem;
  font-weight: 600;
}
.wayside-account label {
  display: grid;
  gap: 0.5rem;
  margin-block: 0.75rem;
}
.wayside-account input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--theme-muted);
  background-color: var(--theme-background);
  color: var(--theme-ink);
  padding: 0.65rem;
  font: inherit;
  border-radius: 0.3rem;
}
.wayside-account button {
  min-height: 44px;
  padding: 0.6rem 1rem;
  font: inherit;
  border: 1px solid var(--theme-muted);
  border-radius: 0.3rem;
  background: var(--theme-tint);
  color: var(--theme-ink);
  cursor: pointer;
}
.wayside-account :is(summary, a) {
  color: var(--theme-accent);
}
.wayside-account summary {
  min-height: 44px;
  align-content: center;
  cursor: pointer;
}
.wayside-account #account-email {
  overflow-wrap: anywhere;
}

html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome {
  display: grid;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  min-height: 21rem;
  margin-block: 0.2rem 1.25rem;
  border: 0;
  border-radius: 0;
  background-color: var(--theme-background);
  background-image:
    linear-gradient(0deg, var(--theme-background), transparent 28%),
    linear-gradient(90deg, #111922ec, #111922a8 45%, #11192212 80%), var(--wayside-inn-art);
  background-position: center;
  background-size: cover;
  color: var(--wayside-art-ink);
}
html[data-site-name="The Wayside"] .wayside-welcome .trophy-hub-intro {
  box-sizing: border-box;
  width: min(100%, 38rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  align-self: center;
}
html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome h1 {
  max-width: 14ch;
  margin-block: 0.65rem 0.9rem;
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--wayside-art-ink);
  text-shadow: 0 2px 14px #0008;
}
html[data-site-name="The Wayside"] .wayside-welcome .guide-kicker {
  color: var(--wayside-brass);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  line-height: 1.8;
  margin: 0;
}
html[data-site-name="The Wayside"] .wayside-welcome-copy {
  max-width: 36ch;
  margin: 0 0 1.15rem;
  color: var(--wayside-art-ink);
  font-size: 1rem;
  line-height: 1.6;
}
html[data-site-name="The Wayside"] .wayside-welcome-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome .trophy-hub-primary {
  box-sizing: border-box;
  display: inline-flex;
  padding: 0.65rem 1rem;
  min-height: 44px;
  gap: 1.2rem;
  margin: 0;
  border: 1px solid var(--wayside-brass);
  border-radius: 0.2rem;
  background: var(--wayside-brass);
  color: var(--wayside-dark-ink);
  text-decoration: none;
  text-shadow: none;
  box-shadow:
    inset 0 0 0 2px #251a1022,
    0 3px 8px #0003;
}
html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome-secondary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.5rem 0.15rem;
  color: var(--wayside-art-ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
html[data-site-name="The Wayside"]
  #trophy-guides
  .wayside-welcome
  :is(.trophy-hub-primary, .wayside-welcome-secondary):focus-visible {
  outline-color: var(--wayside-art-ink);
}
/* Featured games retain their real identity and live progress below the inn. */
html[data-site-name="The Wayside"] .wayside-featured {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 6rem;
  color: var(--theme-ink);
  border-block: 1px solid var(--theme-line, var(--site-rule));
  padding: 0.75rem;
  background: var(--theme-surface);
  text-decoration: none;
}
.wayside-featured-art {
  display: block;
  width: 5.5rem;
  height: 4rem;
  overflow: hidden;
  background: var(--theme-tint);
  border-radius: 0.15rem;
}
.wayside-featured-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wayside-featured-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.wayside-featured-copy .guide-kicker {
  margin: 0;
  color: var(--theme-muted);
}
.wayside-featured-copy strong {
  font:
    500 1.4rem/1.25 Georgia,
    serif;
  overflow-wrap: anywhere;
}
.wayside-featured-link {
  color: var(--theme-accent);
  font-size: 0.85rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .wayside-featured {
  border: 0;
  border-bottom: 1px solid var(--wayside-frame);
  background: transparent;
  padding: 0.5rem 0 1.25rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  .trophy-hub-section
  > .guide-row
  > h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  .trophy-hub-section
  > .guide-row
  > h2::before {
  content: "";
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  transform: rotate(45deg);
  border: 1px solid var(--theme-accent);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-search {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-search label {
  color: var(--theme-ink);
  font-weight: 600;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  .trophy-hub-search
  :is(input, select) {
  background-color: var(--theme-background);
  border-radius: 0.55rem;
  font-weight: 400;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-section {
  padding-top: 1.5rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-section h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-games {
  gap: 1.25rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) #trophy-guides .trophy-hub-game {
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  #trophy-guides
  .trophy-hub-game
  > :not(.trophy-hub-cover) {
  margin-inline: 0;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  #trophy-guides
  .trophy-hub-game
  .trophy-hub-game-footer {
  padding-block: 0.75rem 1rem;
  border-top: 1px solid var(--wayside-frame);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  #trophy-guides
  .trophy-hub-game:is(:hover, :focus-visible) {
  box-shadow: none;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  #trophy-guides
  .guide-grid
  .guide-game {
  border: 1px solid var(--theme-line);
  background: var(--theme-surface);
  padding: 1rem;
}
html[data-site-name="The Wayside"] #trophy-guides .guide-game-art {
  min-height: 10rem;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--theme-line);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-game .trophy-hub-cover {
  border: 0;
  border-radius: 0.55rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) #trophy-guides .trophy-hub-game h3 {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-empty,
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-no-results {
  border: 1px dashed var(--theme-line);
  padding: 1rem;
  background: var(--theme-surface);
  border-radius: 0.2rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-empty-mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--theme-line);
  border-radius: 50%;
  background: var(--theme-background);
  font-size: 1.4rem;
}

/* Reading stays in the same warm material family as the surrounding shell. */
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  :is(.guide-reading-column, .reference-article) {
  box-sizing: border-box;
  --guide-line: var(--theme-line);
  --guide-control-line: var(--theme-muted);
  --site-rule: var(--theme-line);
  min-width: 0;
  padding: clamp(0.5rem, 2vw, 1rem) 0;
  background: transparent;
  color: var(--theme-ink);
  border: 0;
  box-shadow: none;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  .guide-reading-column
  .reference-article {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .guide-reading-column :is(h2, h3) {
  color: var(--theme-heading);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .guide-reading-column h2 {
  padding-block-end: 0.65rem;
  border-bottom: 1px solid var(--guide-line);
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  .guide-reading-column
  .guide-chapter-number {
  color: var(--theme-muted);
  font-size: 0.7em;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  :is(.guide-reading-column, .reference-article)
  :focus-visible {
  outline-color: var(--theme-accent);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .guide-jump {
  border-top: 3px double var(--theme-line);
  padding-top: 0.75rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) :is(.guide-tabs, .guide-mobile-jump) {
  background: var(--theme-background);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .guide-hero {
  border: 1px solid var(--theme-line);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .reference-navigation {
  border-color: var(--theme-line);
  background: var(--theme-surface);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .reference-owner-tools {
  border-color: var(--theme-line);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .prestige-card {
  position: relative;
  border: 0;
  border-block: 1px solid var(--wayside-frame);
  border-radius: 0;
  padding: 1.5rem 0;
  background: transparent;
  box-shadow: none;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .prestige-portrait {
  background: transparent;
  border: 0;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  .profile-prestige
  .prestige-portrait
  .prestige-emblem {
  inline-size: 5rem;
  block-size: 5rem;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  .profile-prestige
  .prestige-card-body:has(.prestige-portrait) {
  grid-template-columns: 5rem minmax(0, 1fr);
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .renown-ladder {
  background: transparent;
}
html:is([data-palette="wayside"], [data-palette^="wayside-"]) .renown-ladder > ol > li {
  border: 0;
  border-bottom: 1px solid var(--wayside-frame);
  border-radius: 0;
  background: transparent;
  padding: 1rem 0;
}
@media (min-width: 640px) {
  html:is([data-palette="wayside"], [data-palette^="wayside-"])
    .profile-prestige
    .prestige-card-body:has(.prestige-portrait) {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
  }
}
html:is([data-palette="wayside"], [data-palette^="wayside-"])
  :is(.renown-ladder, .renown-breakdown-panel) {
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

@media (min-width: 900px) {
  html[data-site-name="The Wayside"] {
    --wayside-inn-art: url("./inn-dusk-1600.webp");
  }
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome {
    min-height: 22rem;
  }
}
@media (max-width: 599px) {
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome {
    min-height: 0;
    background-position: 62% center;
    background-image:
      linear-gradient(0deg, var(--theme-background), transparent 28%),
      linear-gradient(90deg, #111922db, #1119227a), var(--wayside-inn-art);
  }
  html[data-site-name="The Wayside"] .wayside-welcome .trophy-hub-intro {
    padding: 1.35rem 1.1rem;
  }
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome h1 {
    font-size: clamp(2.05rem, 8.5vw, 2.7rem);
    max-width: 15ch;
  }
  html[data-site-name="The Wayside"] .wayside-welcome-copy {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 1rem;
  }
  html[data-site-name="The Wayside"] .wayside-welcome-actions {
    gap: 0.35rem 0.7rem;
  }
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome .trophy-hub-primary {
    padding-inline: 0.8rem;
    gap: 0.85rem;
    font-size: 0.9rem;
  }
  html[data-site-name="The Wayside"] .wayside-welcome .guide-kicker {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
  }
  html[data-site-name="The Wayside"] .wayside-featured {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.7rem;
  }
  .wayside-featured-art {
    width: 4rem;
    height: 3.5rem;
  }
  .wayside-featured-copy strong {
    font-size: 1.15rem;
  }
  .wayside-featured-link {
    grid-column: 2;
  }
  html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-search {
    padding: 0;
  }
  html:is([data-palette="wayside"], [data-palette^="wayside-"]) .trophy-hub-section {
    padding-top: 1.1rem;
  }
}
@media (max-width: 360px) {
  html:is([data-palette="wayside"], [data-palette^="wayside-"]) .wayside-wordmark {
    gap: 0.45rem;
  }
  html:is([data-palette="wayside"], [data-palette^="wayside-"]) .wayside-wordmark .wordmark-name {
    display: inline;
    font-size: 1.05rem;
  }
  html:is([data-palette="wayside"], [data-palette^="wayside-"]) .wayside-wordmark .wayside-mark {
    width: 32px;
    height: 36px;
  }
}
@media (forced-colors: active) {
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome {
    background-image: none;
    background-color: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome :is(h1, p, .guide-kicker) {
    color: CanvasText;
    text-shadow: none;
  }
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome .trophy-hub-primary {
    color: LinkText;
    background: Canvas;
    border-color: LinkText;
  }
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome-secondary {
    color: LinkText;
  }
  html[data-site-name="The Wayside"] #trophy-guides .wayside-welcome::before {
    border-color: CanvasText;
  }
}