/* Local palette: one-off colours for this page, named by role. Global tokens live in style.css. */
:root {
  --ec-dome-bg: #dcf0ff;
  --ec-tide-pool-bg: #effcff;
  --ec-tide-pool-bg-2: #c6f1ff;
}
/* Player economy pages: stalls, price map, bottles, sealed auctions, town builds, the geode. Loaded via page({head}). */
.pickers { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 12px 0; }
.stack-form { display: grid; gap: 12px; max-width: 420px; }
.lots { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lot {
  display: grid; gap: 4px; padding: 12px; color: var(--ink); text-decoration: none;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: var(--shadow-sm);
}
.lot small { color: var(--muted); }
.lot-items { display: flex; flex-wrap: wrap; gap: 4px; }
.spark polyline { stroke: var(--grape); }
.spark.up polyline { stroke: var(--gain); }
.spark.down polyline { stroke: var(--loss); }
.gain { color: var(--gain); font-weight: 800; }
.loss { color: var(--loss); font-weight: 800; }
.lot { align-content: start; } /* grid rows share a height; keep each lot's text at the top instead of spread out */
.stack-form .pickers { margin: 0; }
.stack-form > p:last-child { margin: 0; }
.item-tile form { margin-top: auto; padding-top: 4px; } /* Buy buttons line up along the bottom of a row of tiles */
.haggle .bank-figures { margin: 0; }
.grid-2 > form > .btn { justify-self: start; } /* bank: buttons keep their natural width */
.grid-2 > form.search-row { display: flex; } /* your shop: name/till fields sit beside their buttons */

/* Tables: numbers right-aligned and unbroken; boxes and buttons on one centre line; labels beside their boxes */
.table .num { text-align: right; white-space: nowrap; }
.table .inline-form { align-items: center; }
.table .inline-form label { display: flex; align-items: center; gap: 6px; }

/* Phones: .table-stack rows turn into wrapped strips so prices and buttons never scroll off the right edge.
   .stack-main grows to fill the first line (.stack-wide fills all of it), .stack-full takes a line of its own, data-label names a cell once the header is gone. */
@media (max-width: 560px) {
  .table-wrap .table-stack { min-width: 0; }
  .table-stack, .table-stack tbody { display: block; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; }
  .table-stack td { padding: 0; }
  .table-stack td:has(> svg:only-child) { width: auto; } /* the 1% icon-column trick collapses the icon in a flex row */
  .table-stack td:empty { display: none; }
  .table-stack tbody tr + tr { border-top: 1px solid var(--rule); }
  .table-stack tbody tr + tr > * { border-top: 0; }
  .table-stack .stack-main { flex: 1 1 55%; min-width: 0; }
  .table-stack .stack-wide { flex: 1 1 calc(100% - 64px); } /* fills the line beside an icon, pushing the rest to line two */
  .table-stack .stack-full { flex-basis: 100%; }
  .table-stack td:last-child { margin-left: auto; } /* the row's action or price keeps to the right edge */
  .table-stack .num { text-align: left; }
  .table-stack td[data-label]::before { content: attr(data-label) ' '; font: 700 var(--fs-xs) var(--display); color: var(--muted); }
}

/* Vault Burrow geode */
.geode-body { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.geode-body > div { flex: 1 1 260px; display: grid; gap: 8px; }
.geode-body p { margin: 0; }
.geode { flex: none; max-width: 100%; height: auto; }

/* Bargain Owl price map: glows over the world map, brighter = cheaper */
.owl-glows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.owl-glow { pointer-events: auto; cursor: pointer; }
.owl-glow circle { animation: owl-pulse 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.owl-glow:hover rect, .owl-glow:focus-visible rect { fill: var(--sun); }
@keyframes owl-pulse { to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .owl-glow circle { animation: none; } }
.reduce-motion .owl-glow circle { animation: none; }
.owl-map { margin: 8px 0 12px; }

/* Starlight Auction: a lot under its glass dome, glowing brighter with each sealed bid (--glow 0-1) */
.dome { display: inline-grid; place-items: center; padding: 10px 8px 4px; border: 3px solid var(--ink); border-bottom-width: 6px;
  border-radius: 999px 999px 10px 10px; background: radial-gradient(circle at 50% 60%, rgb(255 226 138 / calc(var(--glow) * .9)), transparent 70%), color-mix(in srgb, var(--ec-dome-bg) 40%, transparent); /* style-ok: colour computed from a per-element custom property */
  box-shadow: 0 0 calc(var(--glow) * 22px) rgb(255 210 63 / var(--glow)); } /* style-ok: colour computed from a per-element custom property */
.reveal-bids { display: grid; gap: 6px; padding-left: 1.4em; }
.reveal-bids .row-hi { font-weight: 800; }

/* Swap Meet Pier: bottles bobbing in the tide pool, glass glowing with the thrower's pet */
.tide-pool { background: linear-gradient(180deg, var(--ec-tide-pool-bg), var(--ec-tide-pool-bg-2)); }
.bottle-tile { grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; }
.bottle-tile > span { display: grid; gap: 4px; min-width: 0; }
.bottle-tile .bottle { animation: bottle-bob 3s ease-in-out infinite alternate; }
.lot:nth-child(3n+2) .bottle { animation-delay: -1.2s; }
.lot:nth-child(3n) .bottle { animation-delay: -2.1s; }
@keyframes bottle-bob { from { transform: translateY(2px) rotate(-6deg); } to { transform: translateY(-3px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .bottle-tile .bottle { animation: none; } }
.reduce-motion .bottle-tile .bottle { animation: none; }
h1 .bottle { vertical-align: middle; }

/* Geode card: the label sits over an input+Add row; Crack it open is its own full-width button on phones (label, input and button were three loose flex items) */
.geode-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.geode-add label { grid-column: 1 / -1; font-weight: 700; }
.geode-add input { min-width: 0; width: 100%; } /* the input grows to fill the row beside Add */
@media (max-width: 767px) {
  .geode-card .btn-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* grid: the shared flex-basis 40% rule would stretch a column's height */
  .geode-card .btn-row form { width: 100%; }
  .geode-card .btn-row .btn { width: 100%; }
  .geode-add .btn { width: auto; }
  .geode-body { justify-content: center; text-align: center; }
}
.geode-body > div { min-width: 0; }
.geode-card .btn-row .btn { white-space: normal; } /* the long Crack it open label wraps instead of pushing the page wide */

/* Desktop: stall/auction/bottle forms use two columns instead of a narrow strip beside empty space; the recipe list and lots use the width. */
@media (min-width: 1100px) {
  .stack-form { max-width: 760px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .stack-form > :first-child, .stack-form > p, .stack-form > fieldset { grid-column: 1 / -1; }
  .recipes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}