:root{
  --column-width: 420px;
  --card-gap: 1rem;
  --progress-bg: rgba(0,0,0,.08);
  --progress-fill: rgba(0,0,0,.16);
}
* { box-sizing: border-box; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.container { max-width: 1000px; }

.logo-wrap { display: grid; place-items: center; margin: 1rem auto 2rem; }
#companyLogo { width: 300px; height: auto; display: block; margin: 0 auto 1.5rem; }

.topbar { display:flex; align-items:center; justify-content:space-between; margin: 0 0 1rem 0; gap: .5rem; }
.topbar .title-left { font-weight: 800; font-size: 1.25rem; }
.topbar .gold-right { white-space: nowrap; }

/* Save / Load */
details.save-load { margin: .5rem 0 1.5rem; }
details.save-load > summary { list-style: none; cursor: pointer; }
details.save-load > summary::-webkit-details-marker{ display:none; }
.save-box { padding: .5rem 0; }
.save-actions { display:flex; gap:.75rem; justify-content:center; }
.save-note { margin: .25rem 0 .5rem; }

/* Stands grid */
.stands-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--card-gap); }
.card.stand-card { display:flex; flex-direction:column; gap:.5rem; }
.stand-media { display:flex; align-items:center; justify-content:center; min-height:110px; }
.stand-media img { width:35%; max-width:96px; height:auto; display:block; }

.stand-header { display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center; }
.stand-title { font-weight:700; }
.stand-meta { font-size:.9rem; opacity:.8; }

.stand-actions { display:grid; grid-template-columns: 1fr; gap:.5rem; }
.stand-actions .stirBtn { justify-self: stretch; }

/* Brew button as progress bar */
button.brewBtn {
  position: relative;
  overflow: hidden;
  --p: 0; /* percent 0..100 */
  background:
    linear-gradient(90deg, var(--progress-fill) 0% calc(var(--p)*1%), transparent calc(var(--p)*1%)) !important;
  transition: background-size .05s linear, opacity .2s ease;
}
button.brewBtn[disabled] { opacity:.85; }

/* Disabled build/buy buttons look inert */
.buildBtn[disabled], #upgradesList button.buy[disabled] { opacity:.6; cursor:not-allowed; }

/* Center footer content nicely */
footer.container {
  text-align: center;
  display: flex;
  justify-content: center;
}

/* Dialogs (side-by-side) */
.dlg-row { display:grid; grid-template-columns: auto 1fr; gap:1rem; align-items:center; }
.dlg-left { display:grid; gap:.75rem; }
.dlg-img { width:180px; height:180px; object-fit:contain; }
@media (max-width: 480px) {
  .dlg-row { grid-template-columns: 1fr; }
  .dlg-img { width:140px; height:140px; }
}

#introDialog .dlg-img, #congratsDialog .dlg-img, #newStoreDialog .dlg-img { width:90px; height:90px; }

/* Dialog vertical layout (image above text, centered) */
.dlg-vertical { display:grid; justify-items:center; text-align:center; gap:.5rem; }
dialog article footer { display:flex; justify-content:center; }

.dlg-vertical .dlg-img{ margin-bottom:1.5rem; }

.sell-coin { display:grid; justify-items:center; margin:.5rem 0 .25rem; }
.sell-coin img { width:48px; height:48px; object-fit:contain; }
#prestigeBtn { display:block; margin: 0 auto; }

#sellStoreNotice { text-align:center; }

/* Tabs */
.tabs { display:flex; gap:.5rem; margin: 0 0 1rem 0; flex-wrap:wrap; }
.tab-btn { border:1px solid rgba(0,0,0,.15); background:transparent; padding:.4rem .75rem; border-radius:.5rem; cursor:pointer; }
.tab-btn.active { background: var(--progress-fill); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* Classic "folder" tabs attached to card */
.tab-card { padding-top: 0; }

/* ── Tabs: classic card tabs */
.tab-card { padding-top: 0; }

.tabs {
  display: flex;
  gap: 0;                               /* no space between tabs */
  padding: .5rem .75rem 0 .75rem;
  padding-bottom: .5rem;                /* a few extra pixels for scrollbar/thumb */
  border-bottom: 1px solid var(--pico-muted-border-color, rgba(0,0,0,.1));
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;                /* Firefox: a bit larger than 'thin' */
}

/* Equal width tabs that fill the row */
.tab-btn {
  flex: 1 1 0;                          /* <-- equal split of available width */
  min-width: 0;
  text-align: center;
  appearance: none;
  background: var(--pico-muted-background, transparent);
  border: 1px solid var(--pico-muted-border-color, rgba(0,0,0,.15));
  border-bottom: none;                  /* merges with panel border */
  border-radius: .5rem .5rem 0 0;
  padding: .45rem .8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--pico-color, inherit);
  margin-bottom: -1px;                  /* overlap panel border */
}

/* Remove double seams where tabs touch */
.tab-btn:not(:last-child) { border-right: none; }

/* Active tab looks attached to the card body */
.tab-btn.active,
.tab-btn[aria-selected="true"] {
  background: var(--pico-card-background-color, #fff);
  border-color: var(--pico-border-color, rgba(0,0,0,.2));
  color: var(--pico-color, inherit);
}

/* Panels */
.tab-panel { padding: 1rem .75rem 1rem .75rem; }

/* Bigger, easier horizontal scrollbar on WebKit */
.tabs::-webkit-scrollbar { height: 10px; }
.tabs::-webkit-scrollbar-thumb {
  background: var(--pico-muted-border-color, rgba(0,0,0,.25));
  border-radius: 8px;
}
.tabs::-webkit-scrollbar-track { background: transparent; }

/* Optional: better focus ring */
.tab-btn:focus-visible {
  outline: 2px solid var(--pico-primary, #4f46e5);
  outline-offset: 2px;
  border-color: var(--pico-primary, #4f46e5);
}

/* Brew button progress overlay using the primary (blue) color */
.stand-actions .brewBtn {
  position: relative;
  overflow: hidden; /* clip the progress fill */
}

/* Use ::before so the fill sits UNDER the text (content is above ::before) */
.stand-actions .brewBtn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--p, 0) * 1%);   /* e.g., 37 -> 37% */
  background: var(--pico-primary); /* medium blue from Pico theme */
  opacity: .28;                    /* readable under text (fallback) */
  pointer-events: none;
  transition: width 0.05s linear;  /* smooth updates */
}

/* If color-mix is supported, use a nicer tinted blue without global opacity */
@supports (background: color-mix(in srgb, black 0%, white 0%)) {
  .stand-actions .brewBtn::before {
    background: color-mix(in srgb, var(--pico-primary) 35%, transparent);
    opacity: 1;
  }
}

/* Make Hire/Research grids behave like Brew */
#hireList.stands-grid,
#potionLevelsList.stands-grid,
#labUpgradesList.stands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--column-width, 420px), 1fr));
  gap: 1rem;
}

/* Cards inside those grids */
.grid-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grid-card .card-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.grid-card header.grid-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.grid-card .grid-meta { font-size: .9rem; opacity: .8; }
.grid-card .grid-actions { margin-top: .25rem; display: flex; gap: .5rem; }
.grid-card .grid-actions > * { flex: 1; }
.grid-card .thumb { display:flex; justify-content:center; align-items:center; margin-bottom:.25rem; }
.grid-card .thumb img { max-height: 96px; object-fit: contain; }