:root {
  --ink: #1c1814;
  --paper: #cfc6b8;
  --gold: #d9b45b;
  --candle: #e8dfc9;
  --fire: #c45c3e;
  --water: #4a7ea8;
  --air: #9aa7b5;
  --earth: #6a8f4e;
  --warn: #c45c3e;
  --card-w: 4.4rem;
  --card-h: 6.4rem;
  --panel: #252019;
  --radius: 6px;
  --space: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --offer-w: 9rem;
  --offer-h: 13rem;
  --rail-w: 14rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--paper);
  background: var(--ink);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gold);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.brand h1 {
  margin: 0;
  font-size: 28px;
  color: var(--candle);
  letter-spacing: 0.12em;
}

.game-version {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
  opacity: 0.8;
}

.menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  position: relative;
}

.menu-items {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

label[for="menu-toggle"] {
  display: none;
  font: inherit;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: var(--space) var(--space-2);
  cursor: pointer;
}

#seed {
  color: var(--gold);
  letter-spacing: 0.08em;
  font-size: 13px;
}

#menu-rules,
#menu-decks,
#menu-challenges,
#overlay-close,
#overlay-cancel {
  font: inherit;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  padding: 6px 12px;
  cursor: pointer;
}

#menu-new-game,
#overlay-confirm {
  font: inherit;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

#jaunt-screen {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 760px) {
  #jaunt-screen {
    grid-template-columns: var(--rail-w) 1fr var(--rail-w);
    grid-template-areas:
      "context context context"
      "challenges challenges challenges"
      "goal play majors";
  }

  .context,
  .challenges,
  #lost-run,
  #won-jaunt {
    grid-column: 1 / -1;
  }

  .context {
    grid-area: context;
  }

  .challenges {
    grid-area: challenges;
    grid-template-columns: 1fr 1fr;
  }

  .goal {
    grid-area: goal;
  }

  .play {
    grid-area: play;
  }

  .majors {
    grid-area: majors;
  }

  .tiles {
    flex-direction: column;
  }

  #wells {
    flex-direction: column;
    gap: 0;
  }

  #wells > div {
    flex: none;
    width: 100%;
    height: auto;
    overflow: visible;
    position: relative;
    background: var(--panel);
  }

  #wells > div + div {
    margin-top: calc(-1 * var(--space-2));
  }

  #wells > div:hover,
  #wells > div:focus {
    z-index: 1;
    transform: translateY(-4px);
  }

  #shop-sections > [data-section="Major"],
  #shop-sections > [data-section="Jaunt"] {
    width: fit-content;
  }
}

@media (max-width: 759px) {
  :root {
    --card-w: clamp(3.2rem, 18vw, 4.4rem);
  }

  #jaunt-screen {
    grid-template-columns: 1fr;
  }

  .challenges {
    grid-template-columns: 1fr;
  }

  #hand {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  #hand button {
    flex: 0 0 var(--card-w);
    scroll-snap-align: start;
  }

  .commit {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: var(--space);
    background: var(--panel);
  }

  #wells {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  #wells > div {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: calc(var(--card-w) * 3);
    white-space: nowrap;
    text-overflow: ellipsis;
    scroll-snap-align: start;
  }

  label[for="menu-toggle"] {
    display: inline-block;
  }

  .menu-items {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space);
    background: var(--panel);
    border-radius: var(--radius);
    z-index: 3;
  }

  #menu-toggle:checked ~ .menu-items {
    display: flex;
  }

  #shop-sections > [data-section="Minor"] > div {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  #shop-sections > [data-section="Minor"] > div > article {
    flex: 0 0 var(--offer-w);
    scroll-snap-align: start;
  }

  #shop-sections > [data-section="Major"],
  #shop-sections > [data-section="Jaunt"] {
    flex: 1 1 100%;
  }

  #leave-shop {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-left: 0;
    width: 100%;
    background: var(--gold);
  }

  #overlay-body > [data-suit] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  #overlay-body > [data-suit]::before {
    position: sticky;
    left: 0;
    background: var(--ink);
    z-index: 1;
  }

  #overlay-body button {
    flex: 0 0 var(--card-w);
    scroll-snap-align: start;
  }

  #overlay-body > [data-element] {
    margin-bottom: var(--space-2);
  }

  #overlay[data-decks] #overlay-body:has(> [data-element]),
  #overlay[data-challenges] #overlay-body:has(> [data-element]) {
    grid-template-columns: 1fr;
  }

  #overlay[data-pick] #overlay-panel,
  #overlay[data-decks] #overlay-panel,
  #overlay[data-challenges] #overlay-panel {
    max-width: none;
    width: calc(100% - var(--space-3));
    padding: var(--space-2);
  }
}

.context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--gold);
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
}

.goal,
.majors,
.play {
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.challenges {
  display: grid;
  gap: var(--space-2);
}

.challenges[hidden] {
  display: none;
}

.challenge-stats,
.challenge-other {
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.challenges h2 {
  margin: 0 0 var(--space);
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.challenge-stats p,
#challenge-other {
  margin: 0;
}

#challenge-other {
  overflow: auto;
  max-height: 7rem;
  white-space: pre-line;
}

.goal {
  display: flex;
  flex-direction: column;
}

.readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--gold);
}

.readout .tile {
  flex: 1;
}

.readout .tile:has(#score) {
  flex: 1 1 100%;
}

#mana {
  color: var(--water);
}

#surge {
  color: var(--fire);
}

#wells > div[data-hit] {
  z-index: 6;
  box-shadow: 0 0 18px var(--gold);
}

.context #stage {
  margin-right: auto;
}

.badge {
  padding: 2px 10px;
  border: 1px solid var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

.badge[data-element="Fire"] { border-color: var(--fire); color: var(--fire); }
.badge[data-element="Water"] { border-color: var(--water); color: var(--water); }
.badge[data-element="Air"] { border-color: var(--air); color: var(--air); }
.badge[data-element="Earth"] { border-color: var(--earth); color: var(--earth); }

body[data-screen="jaunt"][data-element="fire"] {
  --suit-tint: #3a1f14;
  --suit-accent: #c96a3c;
}

body[data-screen="jaunt"][data-element="water"] {
  --suit-tint: #14262a;
  --suit-accent: #4f8f93;
}

body[data-screen="jaunt"][data-element="air"] {
  --suit-tint: #232833;
  --suit-accent: #9aa7b0;
}

body[data-screen="jaunt"][data-element="earth"] {
  --suit-tint: #1f2416;
  --suit-accent: #8a8a3c;
}

body[data-screen="jaunt"] {
  background: linear-gradient(180deg, var(--suit-tint), transparent 55%), var(--ink);
}

body[data-screen="shop"] {
  --shop-tint: #241a2e;
  --shop-accent: #b8925a;
  background: linear-gradient(180deg, var(--shop-tint), transparent 55%), var(--ink);
}

body[data-screen="shop"]:not([data-reward]) #shop-sections > section {
  border-color: var(--shop-accent);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 11px, color-mix(in srgb, var(--shop-accent) 18%, transparent) 11px, color-mix(in srgb, var(--shop-accent) 18%, transparent) 12px),
    repeating-linear-gradient(-45deg, transparent, transparent 11px, color-mix(in srgb, var(--shop-accent) 18%, transparent) 11px, color-mix(in srgb, var(--shop-accent) 18%, transparent) 12px);
}

body[data-screen="shop"][data-reward] #shop-sections {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--candle) 22%, transparent), transparent 70%);
}

body[data-screen="jaunt"] .insight-bar {
  border-color: var(--suit-accent);
}

body[data-screen="jaunt"] .insight-bar .fill {
  background: var(--suit-accent);
}

body[data-screen="jaunt"] .badge {
  border-color: var(--suit-accent);
  color: var(--suit-accent);
}

body[data-screen="jaunt"] .context {
  padding-left: 2em;
  letter-spacing: 0.04em;
}

body[data-screen="jaunt"] .context::before,
body[data-screen="jaunt"] .context::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  background: var(--suit-accent);
  pointer-events: none;
}

body[data-element="fire"] .context::before {
  width: 2px;
  height: 16px;
  transform: translateY(-50%);
}

body[data-element="fire"] .context::after {
  width: 10px;
  height: 2px;
  left: 6px;
  margin-top: -5px;
}

body[data-element="water"] .context::before {
  width: 12px;
  height: 9px;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  border-radius: 0 0 5px 5px;
  transform: translateY(-80%);
}

body[data-element="water"] .context::after {
  width: 2px;
  height: 7px;
  left: 15px;
  margin-top: 2px;
}

body[data-element="air"] .context::before,
body[data-element="air"] .context::after {
  width: 14px;
  height: 2px;
  transform-origin: center;
}

body[data-element="air"] .context::before {
  transform: translateY(-50%) rotate(45deg);
}

body[data-element="air"] .context::after {
  transform: translateY(-50%) rotate(-45deg);
}

body[data-element="earth"] .context::before {
  width: 16px;
  height: 16px;
  border: 2px solid var(--suit-accent);
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
}

body[data-element="earth"] .context::after {
  width: 10px;
  height: 10px;
  left: 13px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform: translateY(-50%);
}

.pill {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  text-transform: capitalize;
  background: #2a2520;
}

.pill[data-status="playing"] { color: var(--paper); }
.pill[data-status="won"] { color: #7dba6a; }
.pill[data-status="lost"] { color: var(--warn); }
.pill[data-status="complete"],
.pill[data-status="win"] { color: var(--gold); }

.insight-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1.8em;
  padding: 0 10px;
  border: 1px solid var(--gold);
  overflow: hidden;
}

.insight-bar .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--gold);
  opacity: 0.35;
  transition: width 400ms ease-out;
}

.insight-bar .fill[data-shimmer]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--candle), transparent);
  animation: shimmer 400ms ease-out;
}

.insight-bar .fill[data-ember] {
  animation: ember 1.8s ease-in-out infinite;
}

.insight-bar[data-flourish] {
  animation: flourish 600ms ease-out;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes ember {
  50% { opacity: 0.55; }
}

@keyframes flourish {
  50% { box-shadow: 0 0 18px var(--gold); }
}

.insight-bar span {
  position: relative;
  color: var(--gold);
}

.tiles {
  display: flex;
  gap: var(--space);
  margin-top: var(--space);
  color: var(--gold);
}

.tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space);
  padding: var(--space);
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  border-radius: var(--radius);
}

.tile span:last-child {
  font-variant-numeric: tabular-nums;
  font-size: 1.4em;
  color: var(--gold);
}

.tile:has(#cost[data-unaffordable]) {
  border-color: var(--warn);
  color: var(--warn);
}

#cost[data-unaffordable] {
  color: var(--warn);
  font-weight: bold;
}

#effects {
  min-height: 1.5em;
  margin: 0 0 var(--space);
  color: var(--gold);
  white-space: pre-line;
}

#wells {
  display: flex;
  gap: var(--space);
}

#wells > div {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  padding: var(--space);
  border: 1px dashed color-mix(in srgb, var(--paper) 40%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0.6;
  font-size: 12px;
  color: var(--gold);
}

#wells > div:not(:empty) {
  border-style: solid;
  opacity: 1;
}

.commit {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "preview confirm"
    "summons confirm"
    "last confirm";
  align-items: end;
  column-gap: var(--space);
  row-gap: var(--space);
}

#preview {
  grid-area: preview;
  min-height: 1.5em;
  margin: 0;
  color: var(--gold);
  font-size: 1.15em;
}

#summons {
  grid-area: summons;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  min-height: 0;
}

#summons:empty {
  display: none;
}

.last-hand {
  grid-area: last;
  margin: 0;
  font-size: 0.85em;
  opacity: 0.6;
  color: var(--gold);
}

#confirm {
  grid-area: confirm;
}

#summons span {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.55em 0.15em 1.35em;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.8em;
  color: var(--gold);
}

#summons [data-element="Fire"] { border-color: var(--fire); color: var(--fire); }
#summons [data-element="Water"] { border-color: var(--water); color: var(--water); }
#summons [data-element="Air"] { border-color: var(--air); color: var(--air); }
#summons [data-element="Earth"] { border-color: var(--earth); color: var(--earth); }

#summons [data-suit]::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 50%;
  transform: translateY(-50%) scale(0.55);
  transform-origin: left center;
  pointer-events: none;
}

.sort {
  display: flex;
  margin-bottom: var(--space);
}

.sort button {
  font: inherit;
  font-size: 13px;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  padding: 6px 12px;
  cursor: pointer;
}

.sort button + button {
  border-left: 0;
}

.sort button[data-active] {
  background: var(--gold);
  color: var(--ink);
}

#hand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: var(--space);
  margin-bottom: var(--space-2);
}

#hand button,
#overlay-body button {
  font: inherit;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  color: var(--candle);
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  border-radius: var(--radius);
  padding: var(--space);
  width: var(--card-w);
  height: var(--card-h);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  align-self: start;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out, opacity 150ms ease-out;
}

#hand button::before,
#overlay-body button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#hand button::after,
#overlay-body button::after {
  content: attr(data-rank);
  position: absolute;
  right: var(--space);
  bottom: var(--space);
  transform: rotate(180deg);
  font-size: 0.85em;
}

#hand button[data-suit="Wands"]::before,
#overlay-body button[data-suit="Wands"]::before,
#summons [data-suit="Wands"]::before {
  width: 1em;
  height: 1.6em;
  background:
    linear-gradient(var(--fire), var(--fire)) center 0.2em / 0.7em 2px no-repeat,
    linear-gradient(var(--fire), var(--fire)) center / 2px 100% no-repeat;
}

#hand button[data-suit="Cups"]::before,
#overlay-body button[data-suit="Cups"]::before,
#summons [data-suit="Cups"]::before {
  width: 0.85em;
  height: 0.7em;
  border: 2px solid var(--water);
  border-top: 0;
  border-radius: 0 0 0.4em 0.4em;
  box-shadow: 0 0.55em 0 -0.28em var(--water);
}

#hand button[data-suit="Swords"]::before,
#overlay-body button[data-suit="Swords"]::before,
#summons [data-suit="Swords"]::before {
  width: 1.3em;
  height: 1.3em;
  background:
    linear-gradient(45deg, transparent 46%, var(--air) 46%, var(--air) 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--air) 46%, var(--air) 54%, transparent 54%);
}

#hand button[data-suit="Pentacles"]::before,
#overlay-body button[data-suit="Pentacles"]::before,
#summons [data-suit="Pentacles"]::before {
  width: 1.15em;
  height: 1.15em;
  border: 2px solid var(--earth);
  border-radius: 50%;
  background: var(--earth);
  clip-path: polygon(50% 8%, 61% 38%, 95% 38%, 67% 57%, 78% 90%, 50% 70%, 22% 90%, 33% 57%, 5% 38%, 39% 38%);
}

#overlay-body button[data-enhanced] {
  background-image: linear-gradient(45deg, transparent 78%, var(--gold) 78%);
}

#hand button[data-surge],
#overlay-body button[data-surge] {
  --ring: var(--fire);
  box-shadow: 0 0 0 2px var(--fire);
  overflow: visible;
}

#hand button[data-mana],
#overlay-body button[data-mana] {
  --ring: var(--water);
  box-shadow: 0 0 0 2px var(--water);
  overflow: visible;
}

#hand button[data-karma],
#overlay-body button[data-karma] {
  --ring: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
  overflow: visible;
}

#hand button[data-surge][data-mana],
#overlay-body button[data-surge][data-mana] {
  --blend: linear-gradient(135deg, var(--fire), var(--water));
}

#hand button[data-surge][data-karma],
#overlay-body button[data-surge][data-karma] {
  --blend: linear-gradient(135deg, var(--fire), var(--gold));
}

#hand button[data-mana][data-karma],
#overlay-body button[data-mana][data-karma] {
  --blend: linear-gradient(135deg, var(--water), var(--gold));
}

#hand button[data-surge][data-mana][data-karma],
#overlay-body button[data-surge][data-mana][data-karma] {
  --blend: linear-gradient(135deg, var(--fire), var(--water), var(--gold));
}

#hand button[data-surge][data-mana],
#hand button[data-surge][data-karma],
#hand button[data-mana][data-karma],
#overlay-body button[data-surge][data-mana],
#overlay-body button[data-surge][data-karma],
#overlay-body button[data-mana][data-karma] {
  box-shadow: none;
  background-image:
    linear-gradient(var(--panel), var(--panel)),
    var(--blend);
  background-size: calc(100% - 4px) calc(100% - 4px), 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#hand button[data-selected] {
  border-color: var(--gold);
  box-shadow: 0 0 0.6em color-mix(in srgb, var(--gold) 45%, transparent), 0 0 0 2px var(--ring, transparent);
  transform: translateY(-6px);
}

#hand button[data-suit="Wands"][data-selected] { border-color: var(--fire); box-shadow: 0 0 0.6em color-mix(in srgb, var(--fire) 45%, transparent), 0 0 0 2px var(--ring, transparent); }
#hand button[data-suit="Cups"][data-selected] { border-color: var(--water); box-shadow: 0 0 0.6em color-mix(in srgb, var(--water) 45%, transparent), 0 0 0 2px var(--ring, transparent); }
#hand button[data-suit="Swords"][data-selected] { border-color: var(--air); box-shadow: 0 0 0.6em color-mix(in srgb, var(--air) 45%, transparent), 0 0 0 2px var(--ring, transparent); }
#hand button[data-suit="Pentacles"][data-selected] { border-color: var(--earth); box-shadow: 0 0 0.6em color-mix(in srgb, var(--earth) 45%, transparent), 0 0 0 2px var(--ring, transparent); }

#hand button[data-scored] {
  background: color-mix(in srgb, var(--gold) 35%, var(--panel));
}

#hand button[data-discarded] {
  opacity: 0.4;
  filter: saturate(0.3);
}

#confirm,
#new-game,
#enter-shop {
  font: inherit;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  padding: var(--space) var(--space-2);
  cursor: pointer;
}

#confirm {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  line-height: 1.15;
  font-size: 0.8em;
}

#confirm::before {
  content: "Play";
  font-size: 1.25em;
}

#confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#lost-run,
#won-jaunt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

#lost-run[hidden],
#won-jaunt[hidden] {
  display: none;
}

#lost-message {
  margin: 0;
  color: var(--warn);
}

#won-jaunt p {
  margin: 0;
  color: var(--gold);
}

#shop-screen[hidden],
#jaunt-screen[hidden] {
  display: none;
}

.shop-bar {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--gold);
}

.shop-bar h2 {
  margin: 0;
  font-size: 1.15em;
  font-weight: normal;
}

#shop-karma {
  margin-left: auto;
  font-size: 1.4em;
  color: var(--gold);
}

#shop-sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#shop-sections > [data-section="Minor"] {
  flex: 1 1 100%;
}

#shop-sections > section {
  padding: var(--space-2);
  border: 1px solid var(--gold);
  background: var(--panel);
}

#shop-sections header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#shop-sections h3 {
  margin: 0;
  margin-right: auto;
  color: var(--gold);
  letter-spacing: 0.08em;
}

#shop-sections header button {
  font: inherit;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  padding: 6px 12px;
  cursor: pointer;
}

#shop-sections section > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
}

#shop-sections article {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space);
  width: var(--offer-w);
  height: var(--offer-h);
  padding: 10px;
  border: 1px solid var(--paper);
  background: #2a2520;
  color: var(--paper);
}

#shop-sections article[data-warn] {
  border-color: var(--warn);
  color: var(--warn);
}

#shop-sections article p {
  margin: 0;
}

#shop-sections article hr {
  width: 100%;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  margin: 0;
}

#shop-sections article p:first-child {
  color: var(--candle);
}

#shop-sections article [data-effect] {
  font-size: 0.85em;
  overflow: hidden;
}

#shop-sections article [data-cost] {
  margin-top: auto;
}

#shop-sections article button {
  font: inherit;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--paper);
  padding: 6px 10px;
  cursor: pointer;
}

#shop-sections button:disabled,
#shop-sections button[data-unaffordable] {
  opacity: 0.4;
  cursor: not-allowed;
}

#leave-shop {
  font: inherit;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  padding: 8px 16px;
  margin-top: 16px;
  margin-left: auto;
  display: block;
  cursor: pointer;
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
}

#overlay[hidden] {
  display: none;
}

#overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.72;
}

#overlay-panel {
  position: relative;
  max-width: 36rem;
  max-height: 80vh;
  overflow: auto;
  padding: 24px;
  background: var(--ink);
  border: 1px solid var(--gold);
  color: var(--paper);
}

#overlay[data-pick] #overlay-panel,
#overlay[data-decks] #overlay-panel,
#overlay[data-challenges] #overlay-panel {
  max-width: min(96vw, 90rem);
}

#overlay-title {
  margin: 0 0 12px;
  color: var(--candle);
  letter-spacing: 0.08em;
}

#overlay-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

#overlay-tabs[hidden] {
  display: none;
}

#overlay-tabs button {
  font: inherit;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  padding: 6px 12px;
  cursor: pointer;
}

#overlay-tabs button[data-active] {
  color: var(--ink);
  background: var(--gold);
}

#overlay-body {
  margin: 0 0 16px;
  white-space: pre-line;
}

#overlay[data-decks] #overlay-body {
  min-height: calc(4 * var(--card-h) + 4 * var(--space));
}

#overlay-body > [data-suit] {
  display: flex;
  gap: var(--space);
  margin-bottom: var(--space);
}

#overlay-body > [data-suit]::before {
  content: attr(data-suit);
  flex: 0 0 5.5rem;
  align-self: center;
  color: var(--gold);
}

#overlay-body > [data-element] {
  margin: 0 0 1rem;
}

#overlay[data-decks] #overlay-body:has(> [data-element]),
#overlay[data-challenges] #overlay-body:has(> [data-element]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  white-space: normal;
}

#overlay-body > [data-element] > h3 {
  margin: 0 0 0.4rem;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.06em;
}

#overlay-body > [data-element] > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
  white-space: pre-wrap;
}

#overlay-body > [data-element] > [data-active] {
  border-left: 3px solid var(--gold);
  padding-left: 0.5rem;
}

#overlay[data-challenges] #overlay-body > [data-element] > div:not([data-active]) {
  opacity: 0.6;
}

#overlay-body > [data-element] > [data-active] > span {
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.overlay-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

#card-tip {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  max-width: 16rem;
  padding: var(--space) var(--space-2);
  font-size: 0.85em;
  letter-spacing: 0.04em;
  color: var(--candle);
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 0.4em 1em color-mix(in srgb, var(--ink) 70%, transparent);
}

#card-tip[hidden] {
  display: none;
}

#card-tip .mana { color: var(--water); }
#card-tip .surge { color: var(--fire); }
#card-tip .karma { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .insight-bar .fill {
    transition: none;
  }
  .insight-bar .fill[data-shimmer]::after,
  .insight-bar .fill[data-ember],
  .insight-bar[data-flourish] {
    animation: none;
  }
}