/* Colours live in /css/theme.css, shared with the rest of the site. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#app { max-width: 1400px; margin: 0 auto; padding: 16px; }

header { margin: 8px 0 16px; }
h1 { font-family: Fredoka, system-ui, sans-serif; font-weight: 600; font-size: 2.2rem; margin: 0; letter-spacing: .01em; }
#tagline { margin: 2px 0 0; color: var(--muted); }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }

/* The resource column has a fixed width. Sized to its contents, it widened
   whenever a rate like "−0.19/s" appeared, which narrowed the cards beside it
   and could flip them between two and three across mid-game. Long names wrap
   instead, so the numbers stay put. */
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 220px; gap: 16px; align-items: start; }
@media (max-width: 1100px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); }
  .logpanel { grid-column: 2; } /* never under the sticky resource column */
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }

#resources table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#resources th { text-align: left; font-weight: 600; padding: 3px 0; }
#resources td.num { text-align: right; padding: 3px 0 3px 6px; white-space: nowrap; }
#resources td.cap { color: var(--muted); }
#resources td.rate { color: var(--good); font-size: .85em; }
#resources td.rate.neg { color: var(--short); }
#resources tr.full td:not(.rate):not(.cap) { color: var(--full); font-weight: 600; }
#resources tr.res.full th, #resources tr.res.full td { background: color-mix(in srgb, var(--full) 12%, transparent); }
#resources tr.res.full th { border-radius: 6px 0 0 6px; }
#resources tr.res.full td:last-child { border-radius: 0 6px 6px 0; }
#resources td.rate.wasted { color: var(--full); font-weight: 600; }
.reshead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.reshead h2 { margin: 0; }
.fullcount { color: var(--full); font-size: .8em; font-weight: 600; }
#resources tbody + tbody tr.res th, #resources tbody + tbody tr.res td { padding-top: 8px; }
#resources th { cursor: default; }
#resources .twisty { display: inline-block; width: 1em; color: var(--muted); cursor: pointer; }
#resources { min-width: 240px; }
#resources tr.flow td { font-size: .8em; color: var(--muted); padding: 1px 0 1px 1em; }
#resources tr.flow td.num { text-align: right; padding-left: 6px; color: var(--good); }
#resources tr.flow td.num.neg { color: var(--short); }
#resources tr.flow.manual td.num { color: var(--muted); }
#resources tr.flow a { color: var(--muted); text-decoration: none; }
#resources tr.flow a:hover { color: var(--accent); text-decoration: underline; }
#resources tr.collapsed { display: none; }
#resources .starved { color: var(--short); }

@keyframes flash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 3px transparent; } }
.flash { animation: flash 1.4s ease-out; border-radius: 10px; }
.action.flash { border-radius: 999px; }

#totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 5; text-decoration: none;
  background: var(--panel); color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font-size: .85em; font-weight: 600; box-shadow: var(--shadow);
}

main section { margin-bottom: 18px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

button { font: inherit; color: inherit; }
.action {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
  padding: 10px 20px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
  touch-action: manipulation;
}
.action:active { transform: translateY(1px); }
.action:disabled { opacity: .45; cursor: default; transform: none; }

/* The wrapper is the visible card, so footers (running toggle, craft
   amounts) sit inside it and every card in a row lines up. */
.cardwrap {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); overflow: hidden;
}
.card {
  flex: 1; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 0;
  padding: 10px 12px; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; justify-content: flex-start; /* buttons centre content by default */
}
.cardwrap:has(.card:hover:not(:disabled)) { background: var(--card-hover); border-color: var(--accent); }
.card:disabled { cursor: default; }
.card:disabled .name { color: var(--muted); }
.cardwrap.buyable { box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }
.cardwrap:has(.card.upgrade) { border-style: dashed; }
.card .name { font-weight: 650; }
.card .owned {
  display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 6px; background: var(--line);
  color: var(--ink); font-size: .85em; font-weight: 700; vertical-align: 1px;
}
.card .owned[hidden] { display: none; }
/* Players scan for the effect; the joke can wait (full text on hover). */
.card .desc {
  color: var(--muted); font-size: .85em; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card .effect { font-size: .84em; margin-top: 4px; color: var(--ink); font-weight: 600; }
.costs { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-size: .88em; font-variant-numeric: tabular-nums; }
.cost.ok { color: var(--muted); opacity: .6; }
.cost.short { color: var(--ink); font-weight: 600; }
.cost.never { color: var(--short); }
.relief {
  margin-top: 6px; font-size: .8em; font-weight: 600; color: var(--full);
  background: color-mix(in srgb, var(--full) 14%, transparent); border-radius: 6px; padding: 2px 8px;
}
.relief[hidden] { display: none; }
.trips { margin-top: 6px; font-size: .85em; font-weight: 600; color: var(--muted); }
.relief.spare { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.cardwrap.spare { opacity: .6; }
.cardwrap.spare:hover { opacity: 1; }

/* Sticks to the top while the hinted card further down is in view. */
.hintbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  position: sticky; top: 0; z-index: 4; padding: 8px 0; background: var(--bg);
}
.hinttext { color: var(--ink); font-weight: 600; }
.hintdanger { margin-left: auto; color: var(--short); font-weight: 700; }
.hintdanger[hidden] { display: none; }
@keyframes hinted { 0%, 100% { box-shadow: 0 0 0 3px transparent; } 50% { box-shadow: 0 0 0 4px var(--accent); } }
.hinted { animation: hinted 1.2s ease-in-out 3; border-radius: 10px; }
.action.hinted { border-radius: 999px; }

.toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 10px; border-top: 1px solid var(--line); font-size: .85em; color: var(--muted);
}
.toggle[hidden] { display: none; }
.tiny {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--panel); color: var(--accent);
  font-weight: 700; border-radius: 6px; min-width: 36px; height: 32px; cursor: pointer; touch-action: manipulation;
}
.tiny:hover:not(:disabled) { background: var(--card-hover); }
.tiny:disabled { opacity: .35; cursor: default; }
.tiny.wide { padding: 0 10px; }
.craftmore { justify-content: flex-end; }
.craftmore span { margin-right: auto; }

.bought summary {
  cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600;
}
.bought ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
.bought li { background: var(--line); border-radius: 999px; padding: 2px 10px; font-size: .85em; }

.logpanel ul { list-style: none; margin: 0; padding: 0; font-size: .88em; max-height: 60vh; overflow: auto; }
.logpanel li { padding: 4px 0; border-bottom: 1px dotted var(--line); }
.logpanel li:first-child { font-weight: 600; }

/* ---------- deadline clock ---------- */
.clock {
  display: flex; align-items: center; gap: 12px; margin: -4px 0 16px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600;
}
.clock[hidden] { display: none; }
.clock-track { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; min-width: 60px; }
.clock-bar { display: block; height: 100%; background: var(--muted); border-radius: 3px; transition: width .3s linear; }
.clock.amber { color: var(--full); border-color: var(--full); }
.clock.amber .clock-bar { background: var(--full); }
.clock.red { color: var(--short); border-color: var(--short); }
.clock.red .clock-bar { background: var(--short); animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .clock.red .clock-bar { animation: none; } }
@media (max-width: 900px) { .clock { position: sticky; top: 0; z-index: 4; } }

/* ---------- seasons ---------- */
.season, .danger {
  margin: 0 0 12px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); font-size: .95rem;
}
.season[hidden], .danger[hidden] { display: none; }
.season.amber { color: var(--full); border-color: var(--full); }
.danger { color: var(--short); border-color: var(--short); font-weight: 600; }
.yield { display: block; font-size: .8rem; opacity: .8; }
.chores { display: block; font-size: .75rem; opacity: .7; }
.offseason { font-size: .8rem; color: var(--muted); }
@media (max-width: 900px) { .season { position: sticky; top: 0; z-index: 4; } }

.notice {
  background: var(--panel); border: 1px solid var(--full); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.notice p { margin: 0 0 10px; font-weight: 600; }

/* ---------- win / loss card ---------- */
.endcard {
  background: var(--panel); border: 2px solid var(--accent); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.endcard.loss { border-color: var(--short); }
.endcard h2 {
  font-family: Fredoka, system-ui, sans-serif; font-size: 1.3rem; text-transform: none;
  letter-spacing: 0; color: var(--ink); margin: 0 0 8px;
}
.endcard p { margin: 0 0 6px; }
.endcard p.story { margin: 0 0 10px; max-width: 70ch; line-height: 1.55; }
.endcard p.story + p:not(.story) { margin-top: 14px; color: var(--muted); }
.endcard .row { margin-top: 12px; gap: 10px; }
.endcard.mini p, .endcard.mini .action.secondary { display: none; }
.layout.ended main, .layout.ended #resources { opacity: .55; pointer-events: none; }
.layout.ended #resources { pointer-events: auto; }

footer { margin: 28px 0 8px; color: var(--muted); font-size: .85em; }
footer a { color: var(--accent); }
.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: inherit; }

.errors { white-space: pre-wrap; background: var(--panel); border: 1px solid var(--short); padding: 16px; border-radius: 8px; }

/* ---------- make-your-own page ---------- */
#app.make { max-width: 760px; }
.step { margin-bottom: 16px; padding: 16px; }
.step p { margin: 0 0 12px; }
.step .row { align-items: center; gap: 12px; }
.step a { color: var(--accent); }
a.action { text-decoration: none; display: inline-block; color: var(--accent-ink); }
.action.secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.note { color: var(--muted); font-size: .88em; }
.step .note { margin: 10px 0 0; }
.or { color: var(--muted); margin: 12px 0 6px !important; }
.drop {
  display: block; border: 2px dashed var(--line); border-radius: 10px; padding: 18px;
  text-align: center; cursor: pointer; background: var(--card);
}
.drop.over, .drop:hover { border-color: var(--accent); background: var(--card-hover); }
.drop input { display: block; margin: 0 auto 8px; max-width: 100%; }
textarea {
  width: 100%; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 12px;
}
.bad { border-color: var(--short); }
.bad ul { margin: 0 0 12px; padding-left: 20px; }
.bad li { margin: 3px 0; }
.good { border-color: var(--accent); }
.ready-title { font-size: 1.15rem; }
.mine { margin: 0; padding-left: 20px; }
.mine li { margin: 4px 0; color: var(--muted); }
.custom { margin: -8px 0 14px; color: var(--muted); font-size: .9em; }
.custom a { color: var(--accent); }

.report { margin: 14px 0 4px; }
.report p { margin: 0 0 8px; }
.report .good { color: var(--good); }
.report .bad { color: var(--short); }
.report .warn { color: var(--full); }
.speedbadge { margin: -8px 0 14px; color: var(--full); font-weight: 600; font-size: .9em; }

/* ---------- goal tracker ---------- */
.goal { margin-bottom: 16px; }
.goal[hidden] { display: none; }
.goalhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; cursor: pointer; }
.goalhead h2 { margin: 0; color: var(--ink); font-size: .85rem; }
.goalhead .twisty { color: var(--muted); }
.verdict { font-weight: 600; color: var(--good); font-variant-numeric: tabular-nums; }
.verdict.late { color: var(--short); }
.verdict.quiet { color: var(--muted); font-weight: 500; }
.prereq { margin: 8px 0 0; font-size: .88em; color: var(--muted); }
.goal a { color: var(--accent); text-decoration: none; }
.goal a:hover { text-decoration: underline; }
.goalrows { display: flex; flex-direction: column; margin-top: 8px; font-size: .88em; }
.goalrow {
  display: grid; grid-template-columns: minmax(7em, 12em) 1fr 8.5em 13em; gap: 10px;
  align-items: center; padding: 2px 0; font-variant-numeric: tabular-nums;
}
.goalrow .num { text-align: right; color: var(--muted); }
.goaleta { text-align: right; white-space: nowrap; }
.goaltrack { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.goalbar { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.goalrow.ready { opacity: .5; }
.goalrow.ready .goaleta { color: var(--good); }
.goalrow.bottleneck { font-weight: 700; }
.goalrow.bottleneck .goalbar { background: var(--short); }
.goalrow.bottleneck .goaleta::after { content: ' · bottleneck'; color: var(--short); font-weight: 600; }
@media (max-width: 560px) {
  .goalrow { grid-template-columns: 1fr auto; row-gap: 2px; padding: 3px 0; }
  .goalrow .goaltrack { grid-column: 1; grid-row: 2; }
  .goalrow .goaleta { grid-column: 2; grid-row: 2; font-size: .9em; }
}

/* Wide screens: the resource column stays in view and scrolls by itself,
   so the floating "Resources" button is only needed on phones. */
@media (min-width: 901px) {
  #resources { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; }
  #totop { display: none; }
}
@media (max-width: 900px) {
  main { padding-bottom: 64px; }
  .logpanel { grid-column: 1; }
}

.gamemenu { margin-top: 8px; font-size: .88em; color: var(--muted); }
.gamemenu[hidden] { display: none; }
.gamemenu a { color: var(--accent); }
.gamemenu strong { color: var(--ink); }

/* "+0.5 water" rising from the button that earned it; red when a click did nothing. */
.floatnote {
  position: absolute; z-index: 10; pointer-events: none; white-space: nowrap;
  font-weight: 700; font-size: .9em; color: var(--good);
  animation: floatnote 1s ease-out forwards;
}
.floatnote.bad { color: var(--short); }
@keyframes floatnote {
  from { opacity: 1; transform: translate(-50%, -100%); }
  to { opacity: 0; transform: translate(-50%, -260%); }
}