/* /forge/fih: Forge's pond, kept for feeding. The same water, the same monospace; the koi are the colour. Prefix ff-. */
html[data-gsd-fish] main:not(#gsd-inline-canvas)>:not(.ff){display:none!important}
html:not([data-gsd-fish]) .ff{display:none!important}
html[data-gsd-fish]{--dynamic-bg-color:#161615!important;background:#161615!important;
  --water:#161615;--reed:#dcd9d1;--lily:#f2efe8;--silt:#8f8c85;--stone:#57554f;--line:rgb(220 217 209 / .11);--line-hi:rgb(220 217 209 / .26);--pellet:#e2a456;
  --mono:"Forge Mono","Cascadia Mono",ui-monospace,Consolas,monospace;
  --gut:max(24px,1.67vw);--t-body:max(15px,.78vw);--t-small:max(13px,.68vw);--t-display:max(28px,2.92vw)}
html[data-gsd-fish] body,html[data-gsd-fish] main{background:transparent!important}
html[data-gsd-fish] body::before{background-image:none!important}
html[data-gsd-fish] .gf{display:none!important}
html[data-gsd-fish] nav.navbar{max-width:max(1520px,79.17vw)}
html[data-gsd-fish]:not(.gsd-scrolled) div.relative:has(> nav.navbar) > div.absolute.inset-0{background-color:transparent!important;box-shadow:none}
html[data-gsd-fish].gsd-scrolled div.relative:has(> nav.navbar) > div.absolute.inset-0{background-color:rgb(22 22 21 / .74)!important;box-shadow:inset 0 -1px 0 var(--line)}
html[data-gsd-fish]:has(.ff-pond.is-over) body{cursor:pointer}

.ff::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--water);pointer-events:none}
.ff{position:relative;min-height:calc(100vh - var(--ff-top,65px));min-height:calc(100svh - var(--ff-top,65px));display:flex;align-items:flex-end;padding:40px 0 max(26px,3.2vh);color:var(--reed);font-family:var(--mono);font-size:var(--t-body);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip}
.ff *,.ff *::before,.ff *::after{box-sizing:border-box}
.ff :where(p,h1,ul,li){margin:0}
.ff :where(ul){padding:0;list-style:none}
.ff a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.ff a:hover{color:var(--lily);text-decoration-color:var(--lily)}
.ff :focus-visible{outline:1px solid var(--lily);outline-offset:4px}
.ff button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
.ff ::selection{background:var(--lily);color:var(--water)}
.ff-dim{color:var(--silt)}

/* The pond fills the viewport; the copy sits in a band along the bottom, as on the Forge shoreline. */
.ff-pond{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;z-index:0;pointer-events:none}
.ff-band{width:100%}
.ff-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:2em;align-items:end;
  width:max(min(100% - 50px,1470px),calc(79.17vw - 50px));margin-inline:auto;text-shadow:0 0 3px var(--water),0 0 12px var(--water)}
.ff-intro{grid-column:1/7;display:grid;gap:.8em}
.ff-meters{display:flex;flex-wrap:wrap;align-items:end;gap:1.1em calc(var(--gut) * 1.6);margin-top:.4em}
.ff-back{justify-self:start;display:inline-flex;align-items:center;gap:.5em;padding:.6em 0;margin:-.6em 0;color:var(--silt);font-size:var(--t-small)}
.ff-back:hover{color:var(--lily)}
.ff-title{color:var(--lily);font-size:var(--t-display);line-height:1.15;font-weight:400;letter-spacing:-.02em}
.ff-say{min-height:1.75em;color:var(--silt)}

/* The tin and the varieties met, as rows of pond cells: pellets in the pellet's colour, each variety in its own. An empty
   cell is a single dot, as in the Forge pricing ruler; the rows end under their counts. */
.ff-tin,.ff-met,.ff-koi{display:grid;gap:.45em;width:max-content;max-width:100%}
.ff-label{display:flex;justify-content:space-between;gap:1em;color:var(--silt);font-size:var(--t-small)}
.ff-count{color:var(--reed)}
.ff-tiles{display:grid;gap:3px}
.ff-tin-tiles{grid-template-columns:repeat(24,10px)}
.ff-met-tiles{grid-template-columns:repeat(21,8px);gap:2px}
.ff-side .ff-met-tiles{grid-template-columns:repeat(41,8px)}
.ff-tiles i{aspect-ratio:1;background:radial-gradient(circle,var(--stone) 0 1.1px,transparent 1.5px);transition:background-color .25s}
.ff-tin-tiles i.is-on{background:var(--pellet)}

/* How many koi: one cell per koi this screen can hold, each in its koi's colour. Click or drag along the row, use the
   arrow keys, or step with the round buttons; the row shows the number as you go and the pond follows when you let go. */
.ff-koi-row{display:flex;align-items:center;gap:10px}
.ff-koi-tiles{grid-auto-flow:column;grid-auto-columns:10px;padding:9px 0;margin:-9px 0;cursor:pointer;touch-action:none;outline-offset:6px}
.ff-koi-tiles i{height:10px;transition:background-color .2s,opacity .2s}
.ff-koi-tiles i.is-new{background:var(--reed);opacity:.45}
@media(hover:hover){
  .ff-koi-tiles i:hover~i.is-on{opacity:.3}
  .ff-koi-tiles i:not(.is-on):is(:hover,:has(~i:hover)){background:var(--reed);opacity:.4}
}
.ff-step{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid #4a4944!important;border-radius:999px;background:#1f1e1c!important;color:var(--reed);transition:border-color .2s,color .2s,opacity .2s}
.ff-step svg{width:10px;height:10px;fill:currentColor}
.ff-step:hover:not(:disabled){border-color:var(--lily)!important;color:var(--lily)}
.ff-step:active:not(:disabled){transform:translateY(1px)}
.ff-step:disabled{opacity:.35;cursor:default}

/* The collection and the ledger: varieties met, then every koi in the pond with its swatch, name, size and pellets. */
.ff-side{grid-column:7/13;display:grid;gap:1em;align-content:end;min-width:0}
.ff-list{display:inline-flex;justify-self:start;align-items:center;gap:.6em;min-height:34px;padding:0 1em!important;border:1px solid #4a4944!important;border-radius:999px;background:#1f1e1c!important;color:var(--lily)!important;font-size:var(--t-small)!important;transition:border-color .2s}
.ff-list:hover{border-color:var(--lily)!important}
.ff-list svg{width:10px;height:6px;stroke:currentColor;transition:transform .25s}
.ff-side.is-open .ff-list svg{transform:rotate(180deg)}
.ff-side:not(.is-open) .ff-ledger{display:none}
.ff-ledger{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:.1em var(--gut);align-content:end;font-size:var(--t-small)}
.ff-row{display:grid;grid-template-columns:auto 14ch auto auto;justify-content:start;gap:.7em;align-items:center;width:100%;padding:.22em 0;text-align:left;color:var(--reed);transition:color .2s,opacity .5s}
.ff-row:hover{color:var(--lily)}
.ff-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-leaving .ff-row{opacity:.4}
.ff-sw{display:inline-flex;gap:2px}
.ff-sw i{width:9px;height:9px}
.ff-size{display:inline-flex;gap:2px}
.ff-size i{width:7px;height:7px;background:radial-gradient(circle,var(--stone) 0 1px,transparent 1.3px)}
.ff-size i.is-on{background:var(--silt)}
.ff-n{display:inline-flex;align-items:center;justify-content:flex-end;gap:.35em;min-width:3.6ch;color:var(--silt)}
.ff-pellet{width:.75em;height:.75em;flex:none;stroke:var(--pellet)}

/* A koi under the pointer is named; a tapped one gets its card. */
.ff-tag{position:fixed;left:0;top:0;z-index:20;display:grid;gap:2px;padding:6px 10px;border:1px solid var(--line-hi);background:rgb(14 14 13 / .92);font-size:12px;line-height:1.6;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.ff-tag.is-on{opacity:1}
.ff-tag-name{color:var(--lily)}
.ff-tag-sub{color:var(--silt)}
.ff-card{position:fixed;right:24px;top:calc(var(--ff-top,65px) + 22px);z-index:21;width:min(390px,calc(100vw - 32px));padding:16px 18px 18px;background:rgb(15 15 14 / .95);border:1px solid var(--line);
  box-shadow:0 20px 60px rgb(0 0 0 / .45);opacity:0;transform:translateY(-14px);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.ff-card.is-on{opacity:1;transform:none;pointer-events:auto}
.ff-card-head{display:flex;align-items:center;gap:14px}
.ff-portrait{width:64px;height:32px;flex:none}
.ff-card-name{display:grid;gap:1px;min-width:0;font-size:12.5px;line-height:1.5;color:var(--silt)}
.ff-card-name b{color:var(--lily);font-weight:400;font-size:15px}
.ff-card-x{align-self:start;display:grid;place-items:center;margin:-6px -8px 0 auto;width:30px;height:30px;color:var(--silt)}
.ff-card-x svg{width:10px;height:10px;stroke:currentColor}
.ff-card-x:hover{color:var(--lily)}
.ff-card-line{margin-top:12px!important;font-size:13.5px;line-height:1.6}
.ff-card-stat{display:flex;align-items:center;gap:.7em;margin-top:10px!important;color:var(--silt);font-size:12.5px}

@media(max-width:1180px){
  .ff-intro{grid-column:1/-1}
  .ff-side{grid-column:1/-1}
}
@media(max-width:820px){
  .ff{padding-top:30px}
  .ff-grid{grid-template-columns:minmax(0,1fr);width:calc(100% - 40px);row-gap:1em}
  .ff-meters{gap:.7em 1.4em}
  .ff-tin-tiles{grid-template-columns:repeat(24,9px)}
  .ff-intro,.ff-side{grid-column:1/-1!important}
  .ff-side{gap:.8em}
  .ff-side .ff-met-tiles{grid-template-columns:repeat(21,8px)}
  .ff-ledger{grid-template-columns:repeat(2,minmax(0,1fr));gap:.1em 1em}
  .ff-row{grid-template-columns:auto minmax(0,1fr);gap:.5em;padding:.12em 0}
  .ff-row .ff-sizebox,.ff-row .ff-n{display:none}
  .ff-card{right:16px;left:16px;width:auto}
}
@media(max-width:420px){
  .ff-koi-tiles{grid-auto-columns:9px}
  .ff-koi-row{gap:8px}
}
@media(prefers-reduced-motion:reduce){.ff-tiles i,.ff-row,.ff-card,.ff-tag,.ff-step,.ff-list svg{transition:none}}