/* The Awakening Fountain.

   Everything sized so a full step — target, slots, trade, track — fits one
   phone screen at the common recipe of one or two food heroes, and scrolls
   inside the body frame rather than moving the chrome when it does not. */

.fo-target {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3);
  border-radius: var(--rad-md);
  background:
    radial-gradient(120% 100% at 14% 0%, color-mix(in srgb, var(--aw) 16%, transparent), transparent 70%),
    var(--panel-face);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aw) 34%, transparent), var(--cast-sm);
}

.fo-target-fig {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--rad-sm);
  background: var(--ink-700);
}
.fo-target-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
}

.fo-target-text { min-width: 0; }

.fo-target-name {
  margin: 0;
  font-size: var(--fz-title);
  font-weight: 700;
  line-height: 1.15;
}

.fo-target-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s1);
}
/* The three facts under the name, at a size worth reading. They were
   11px chips in near-black; on a panel this size they looked like
   metadata rather than like the hero's identity. */
.fo-rar, .fo-fac, .fo-lv {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--rad-pill);
  background: var(--ink-700);
  color: var(--text-muted);
  font-size: var(--fz-small);
  font-weight: 700;
}

/* RARITY, in the rarity's own colour and filled.
   
   It used `--aw` — the AWAKENING TIER's colour — so a UR at Excellent+
   printed "UR" in Excellent violet. The one chip whose whole job is to
   say which rarity this is was coloured by something else entirely. */
.fo-rar {
  color: #0b0d14;
  background: var(--rar, var(--gold-300));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  letter-spacing: 0.03em;
}

/* Level reads as a number, not as a label. */
.fo-lv { color: var(--text-cream); }

/* The step. Two tier names with an arrow between, then the two numbers that
   say what the step is worth. Laid out so the "after" never wraps away from
   the "before". */
.fo-step {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  align-items: baseline;
  margin-top: var(--s2);
}
.fo-step-now {
  color: var(--aw);
  font-size: var(--fz-body);
  font-weight: 700;
}
.fo-step-arrow {
  display: inline-flex;
  color: var(--text-dim);
  /* The back chevron, turned. One icon, two directions. */
  transform: rotate(180deg);
}
.fo-step-next {
  color: var(--aw-next, var(--aw));
  font-size: var(--fz-body);
  font-weight: 800;
}
.fo-step-cap, .fo-step-mult {
  flex: 0 0 auto;
  padding: 1px var(--s2);
  border-radius: var(--rad-pill);
  background: var(--ink-700);
  color: var(--text-dim);
  font-size: var(--fz-tiny);
}
.fo-step-mult { color: var(--success); }
.fo-step.is-done .fo-step-now { color: var(--text-dim); }

/* --- food slots ------------------------------------------------------------
   Wide enough for a name at two food, and wrapping to a second row at three
   rather than shrinking to illegibility. */

.fo-slots {
  display: grid;
  /* auto-FILL, not auto-fit: with one food slot auto-fit collapses the empty
     tracks and stretches the single tile across the whole panel, which read
     as a drop zone rather than as one card-shaped thing. */
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--s2);
}

.fo-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: var(--s2);
  border: 1px dashed var(--line);
  border-radius: var(--rad-md);
  background: var(--ink-700);
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.fo-slot:hover { border-color: var(--gold-300); }
.fo-slot.is-filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--gold-300) 60%, transparent);
  background: var(--panel-face);
  color: var(--text-cream);
}
/* The painted socket supplies the edge; the CSS border would double it. */
.fo-slot.is-socketed { border-color: transparent; }
/* Nothing held that fits: say so on the tile rather than only in a toast
   after the tap. */
.fo-slot.is-short {
  border-color: color-mix(in srgb, var(--alert) 42%, transparent);
  opacity: 0.72;
}

.fo-slot-art, .fo-slot-empty {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: var(--rad-sm);
  background: var(--ink-800);
  background-position: center 10%;
  background-size: auto 150%;
}
.fo-slot-empty { color: var(--text-muted); }

.fo-slot-label {
  font-size: var(--fz-tiny);
  font-weight: 700;
  line-height: 1.2;
}
.fo-slot-sub {
  color: var(--text-muted);
  font-size: 0.56rem;
}

/* A precious hero in a slot wears a mark, so "auto-fill took my legendary"
   is visible without opening the confirm dialog. */
.fo-slot-warn {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: var(--alert);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
}

.fo-hint {
  margin: var(--s2) 0 0;
  color: var(--text-muted);
  font-size: var(--fz-tiny);
  line-height: 1.4;
}

.fo-note {
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3);
  border-radius: var(--rad-md);
  background: var(--ink-700);
  color: var(--text-dim);
  font-size: var(--fz-small);
}

/* --- the trade -------------------------------------------------------------- */

.fo-trade { display: grid; gap: var(--s1); }
.fo-trade-row {
  display: flex;
  gap: var(--s2);
  justify-content: space-between;
  align-items: baseline;
}
.fo-trade-k { color: var(--text-dim); font-size: var(--fz-small); }
.fo-trade-v {
  color: var(--text-cream);
  font-size: var(--fz-small);
  font-weight: 700;
  text-align: right;
}

/* --- the twelve-tier track --------------------------------------------------
   A horizontal strip that scrolls on its own. Twelve stops never fit a phone
   width legibly, and stacking them vertically would cost the screen more
   height than the whole rest of the panel. */

.fo-track {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: var(--s1);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.fo-tick {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  width: 54px;
  opacity: 0.44;
  scroll-snap-align: center;
  text-align: center;
}
.fo-tick.is-past { opacity: 0.8; }
.fo-tick.is-now { opacity: 1; }
.fo-tick.is-barred { opacity: 0.2; }

.fo-tick-dot {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--aw);
  border-radius: 50%;
  background: var(--ink-700);
}
.fo-tick.is-past .fo-tick-dot { background: color-mix(in srgb, var(--aw) 55%, transparent); }
.fo-tick.is-now .fo-tick-dot {
  background: var(--aw);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aw) 26%, transparent);
}
.fo-tick.is-barred .fo-tick-dot { border-style: dashed; }

/* The "+" steps and the Transcend stars — the signals that survive the
   colour being removed. */
.fo-tick-plus {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aw);
}
.fo-tick.is-now .fo-tick-plus, .fo-tick.is-past .fo-tick-plus { background: var(--ink-900); }
.fo-tick-stars {
  color: var(--aw);
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 900;
}
.fo-tick.is-now .fo-tick-stars, .fo-tick.is-past .fo-tick-stars { color: var(--ink-900); }

.fo-tick-name {
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1.15;
}
.fo-tick-cap { color: var(--text-muted); font-size: 0.5rem; }

/* --- picker ---------------------------------------------------------------- */

.fo-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--s2);
  max-height: 58vh;
  overflow-y: auto;
}

.fo-pick-why {
  position: absolute;
  z-index: 4;
  inset: auto 0 0 0;
  padding: 1px 2px;
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  color: var(--text-dim);
  font-size: 0.5rem;
  line-height: 1.3;
  text-align: center;
}
.fo-pick-why.is-ready { background: color-mix(in srgb, var(--success) 72%, transparent); color: #06130a; }

/* An ineligible copy is shown, not hidden — a picker that drops the hero you
   were looking for reads as the game having lost it. */
.fo-pick-no { cursor: not-allowed; filter: grayscale(0.85) brightness(0.68); }

/* --- the awakening ceremony ------------------------------------------------- */

.fo-cer {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: grid;
  gap: var(--s2);
  place-content: center;
  justify-items: center;
  background: radial-gradient(60% 50% at 50% 42%,
    color-mix(in srgb, var(--aw) 20%, transparent), rgba(4, 6, 10, 0.93) 72%);
  cursor: pointer;
  animation: fo-cer-in var(--t-base) var(--ease-out);
}
@keyframes fo-cer-in { from { opacity: 0; } to { opacity: 1; } }

.fo-cer-rays {
  position: absolute;
  z-index: 0;
  width: 120vmax;
  height: 120vmax;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--aw) 13%, transparent) 0deg 5deg, transparent 5deg 13deg);
  animation: fo-cer-spin 24s linear infinite;
}
@keyframes fo-cer-spin { to { transform: rotate(360deg); } }

.fo-cer-fig {
  position: relative;
  z-index: 1;
  width: min(54vw, 210px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--rad-md);
  box-shadow: 0 0 34px 6px var(--aw-glow);
  animation: fo-cer-rise var(--t-slow) var(--ease-back);
}
.fo-cer-fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
@keyframes fo-cer-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.fo-cer-tier {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  color: var(--aw);
  font-size: var(--fz-display);
  font-weight: 800;
  text-shadow: 0 0 18px var(--aw-glow);
}
.fo-cer-tier span {
  color: var(--text-dim);
  font-size: var(--fz-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fo-cer-caprow {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  color: var(--text-dim);
  font-size: var(--fz-small);
}
.fo-cer-cap { color: var(--gold-200); font-size: var(--fz-title); font-weight: 800; }

.fo-cer-tap {
  position: relative;
  z-index: 1;
  margin: var(--s3) 0 0;
  color: var(--text-muted);
  font-size: var(--fz-tiny);
  opacity: 0;
}
.fo-cer.can-exit .fo-cer-tap { opacity: 1; transition: opacity var(--t-base) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .fo-cer, .fo-cer-fig, .fo-cer-rays { animation: none; }
  .fo-cer-tap { opacity: 1; }
}

/* Tablet and up: the target and the slots sit side by side, which is the one
   place pairing columns genuinely helps — the target panel is short and the
   slot grid is short, and stacking them wasted a band of empty frame. */
@media (min-width: 720px) {
  .fo-target { grid-template-columns: 128px 1fr; }
  .fo-slots { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .fo-tick { width: 62px; }
}

/* --- the food picker, second pass ------------------------------------------
   Only what can fill the slot, at the tier the slot asks for. Everything
   else is a count, not a card. */

/* What is being held back, and why. */
.fo-pick-hidden {
  margin: var(--s2) 0 0;
  font-size: var(--fz-tiny);
  color: var(--text-dim);
  text-align: center;
}

/* Over-feeding is opt-in per slot and says what it is offering. */
.fo-pick-toggle { margin-top: var(--s2); }
.fo-pick-toggle.is-on { color: var(--warn); }

/* A candidate above the tier the recipe needs, tagged so the extra tiers
   being thrown away are visible before the tap rather than after. */
.fo-pick-over {
  position: absolute;
  z-index: 6;
  inset: auto 0 0 0;
  padding: 1px 2px;
  font-size: 0.48rem;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  background: color-mix(in srgb, var(--alert) 88%, #000);
}

/* ===========================================================================
   The fountain hub: three tabs
   --------------------------------------------------------------------------
   Awaken, Quick fuse, Dismantle. One job done in three orders — the
   player who cannot awaken needs to fuse, and the one who cannot fuse
   needs to dismantle.
   ========================================================================= */

.fo-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: var(--s2);
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--rad-md);
  background: var(--panel-sunken);
}
.fo-tab {
  min-height: 34px;
  border: 0;
  border-radius: var(--rad-sm);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--fz-tiny);
  cursor: pointer;
}
.fo-tab.is-on {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--ink-900, #070a11);
}

/* The faction strip, on every tab. */
.fo-facs {
  display: grid;
  grid-template-columns: auto repeat(6, 1fr);
  gap: 4px;
  margin-bottom: var(--s3);
}
/* The faction STRIP button. Renamed from `.fo-fac`, which was already
   the faction CHIP on the target panel — the later definition won and
   the chip lost its background. */
.fo-facbtn {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--rad-sm);
  background: none;
  color: var(--text-dim);
  font-size: var(--fz-tiny);
  cursor: pointer;
}
.fo-facbtn.is-on {
  border-color: var(--gold-300);
  background: color-mix(in srgb, var(--gold-300) 16%, transparent);
  color: var(--text-cream);
}

.fo-sect { margin-bottom: var(--s4); }
.fo-sect-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.fo-sect-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fz-body);
  color: var(--gold-200);
}
.fo-sect-head .kit-btn { margin-left: auto; }

/* Ready now: a short horizontal rail, because it is a shortlist and a
   grid of three looks like a grid that failed to fill. */
.fo-ready-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.fo-ready-row .kit-hero { flex: 0 0 76px; }

.fo-ready-tag {
  position: absolute;
  z-index: 6;
  inset: auto 0 0 0;
  padding: 1px 0;
  text-align: center;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #07210f;
  background: var(--success);
}

/* Food held back for an awakening that is already possible. */
.fo-reserved {
  margin: 0 0 var(--s2);
  padding: var(--s2);
  border-radius: var(--rad-sm);
  font-size: var(--fz-tiny);
  color: var(--gold-200);
  background: color-mix(in srgb, var(--gold-300) 12%, transparent);
}

/* --- a plan, as rows ------------------------------------------------------- */

.fo-plan { display: grid; gap: 4px; }
.fo-plan-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  border-radius: var(--rad-sm);
  background: var(--panel-sunken);
}
.fo-plan-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.fo-plan-name { font-size: var(--fz-small); color: var(--text-cream); }
.fo-plan-step { font-size: var(--fz-tiny); color: var(--text-muted); }
.fo-plan-cost { font-size: var(--fz-small); color: var(--alert); }

/* --- the one dialog -------------------------------------------------------- */

.fo-bulk { max-height: 62vh; overflow-y: auto; }
.fo-bulk-title {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--fz-title);
  color: var(--gold-200);
}
.fo-bulk-sect { margin-bottom: var(--s3); }
.fo-bulk-sect h4 {
  margin: 0 0 var(--s2);
  font-size: var(--fz-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* The held-back section reads as a caution, not as more of the list. */
.fo-bulk-sect.is-review {
  padding: var(--s2);
  border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent);
  border-radius: var(--rad-sm);
}

.fo-bulk-tick { margin-right: 2px; }
.fo-bulk-food { display: grid; gap: 4px; }
.fo-bulk-fac {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fz-small);
  color: var(--text-muted);
}
.fo-bulk-fac .tiny { margin-left: auto; text-align: right; }

.fo-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: var(--fz-small);
  color: var(--text-muted);
  cursor: pointer;
}
/* Not on offer: no checkbox, and it says so. */
.fo-opt.is-hard { cursor: default; opacity: 0.7; }

.fo-total { margin: var(--s2) 0 0; font-size: var(--fz-tiny); color: var(--text-dim); }

/* --- hold to confirm ------------------------------------------------------- */

/* Armed only when the player has opted something valuable in. One dialog
   either way; what changes is how hard it is to do by accident. */
.fo-hold { position: relative; overflow: hidden; touch-action: none; }
.fo-hold-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.fo-hold > span { position: relative; }

/* --- the undo window ------------------------------------------------------- */

.fo-undo {
  position: absolute;
  z-index: var(--z-toast);
  left: 50%;
  bottom: calc(var(--navbar-h) + 18px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--rad-pill);
  background: var(--ink-900, #070a11);
  box-shadow: var(--cast-md);
  font-size: var(--fz-small);
  color: var(--text-cream);
  animation: kit-rise var(--t-base) var(--ease-out);
}