/* A compact food shortcut above the map: progress icon, level, bites earned in this level.
   Food names and exact next-level requirements live in the opened ladder. */
.food-count{position:absolute;right:max(10px,calc(env(safe-area-inset-right) + 6px));bottom:calc(max(12px,calc(env(safe-area-inset-bottom) + 8px)) + var(--map) + 10px);
  display:grid;grid-template-columns:36px 1fr;grid-template-rows:13px 21px;column-gap:7px;align-content:center;
  width:min(112px,var(--map));height:46px;z-index:8;padding:5px 9px 5px 5px;border-radius:24px;background:#fff4d7;border:1px solid #fffdf3;
  box-shadow:0 2px 9px #102f3d24;color:#123d47;pointer-events:none;opacity:0;
  transition:opacity .18s ease,bottom .8s cubic-bezier(.2,.8,.3,1);transform-origin:right bottom;
  --accent:#bfe0e8;--well:28px;--icon:27px;--orbit:36px;--num:19px;text-align:left;appearance:none;touch-action:manipulation}
.food-count.on{opacity:1;pointer-events:auto}
.food-count:not(.on){visibility:hidden}
.food-count:focus-visible{outline:3px solid #f6bc55;outline-offset:3px}
.food-count:active{filter:brightness(.96)}
.fc-total,.fc-value{position:relative;display:flex;align-items:center}
.fc-current{display:contents}
.fc-orbit{grid-row:1/3;grid-column:1;align-self:center;position:relative;width:var(--orbit);height:var(--orbit);display:grid;place-items:center;flex:none}
.fc-progress-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg);fill:none;stroke-width:3.2}
.fc-track{stroke:#d8ddcb}.fc-progress{stroke:#367d80;stroke-linecap:round;transition:stroke-dashoffset .35s ease}
.fc-step,.fc-name{display:none}
.fc-food{grid-column:2;grid-row:1;display:block;min-width:0;line-height:13px}
.fc-label{font-size:10px;line-height:1.3;font-weight:650;letter-spacing:-.25px;color:#426168;white-space:nowrap}
.fc-level{font-size:10.5px;font-weight:800;color:#426168}
.fc-total{grid-column:2;grid-row:2;justify-content:flex-start;gap:3px;margin:0;padding:0;border:0}
.fc-total>.fc-label{display:none}
.fc-value{gap:3px;align-items:baseline;min-width:0}
.fc-goal{font-size:11px;font-weight:750;color:#426168;white-space:nowrap}.fc-goal:empty{display:none}
.fc-unit{font-size:11px;font-weight:700;color:#506c61}
.fc-well{position:relative;flex:none;width:var(--well);height:var(--well);border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 40% 30%,#fffdf5 0,color-mix(in srgb,var(--accent) 52%,#dfeee6) 100%);box-shadow:inset 0 0 0 1px #fff9}
.fc-icon{position:relative;width:var(--icon);height:var(--icon);display:grid;place-items:center;overflow:visible}
.fc-vector{width:100%;height:66.67%;overflow:visible}
.fc-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden;pointer-events:none}
.art-ready>.fc-art{visibility:visible}.art-ready>.fc-vector{visibility:hidden}
.fc-shine{position:absolute;inset:-25%;background:linear-gradient(100deg,transparent 38%,#fffdf2d9 50%,transparent 62%);transform:translateX(-130%) rotate(18deg)}
.fc-num{position:relative;display:block;height:1.05em;overflow:hidden;font-size:var(--num);line-height:1.05;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.5px;min-width:1.1ch;text-align:right}
.fc-d{display:block;white-space:nowrap}
.fc-old{position:absolute;right:0;top:0;opacity:0}
.fc-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 30% 50%,#fffef5,#fffef500 75%);opacity:0}
.fc-ring{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;
  background:radial-gradient(circle,transparent 42%,color-mix(in srgb,var(--accent) 70%,#fff) 56%,#fff8 62%,transparent 72%)}
/* The last food, the golden carp: a soft gold rim, and a slow shine crossing the icon now and then. */
.food-count[data-food="gold"]{border-color:#ffd66b;box-shadow:0 4px 14px #1b3b3322,0 0 0 1px #ffd66b88,0 0 14px #ffd66b55}
.food-count[data-food="gold"] .fc-level{font-size:9px}
.food-count[data-food="gold"] .fc-shine{animation:fc-shine 6s ease-in-out 2s infinite}
@keyframes fc-shine{0%,86%{transform:translateX(-130%) rotate(18deg)}100%{transform:translateX(130%) rotate(18deg)}}
#game.wide .food-count{right:calc(var(--feed-w) + 16px);bottom:calc(16px + var(--map) + 12px)}
/* A vertical food ladder: higher foods are above, and opening centres the current level. */
.food-levels{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:#082b2b99;touch-action:manipulation}
.fl-sheet{display:flex;flex-direction:column;width:min(390px,100%);max-height:min(680px,100%);padding:22px 20px 14px;border-radius:26px;background:#fff4d7;color:#123d47;box-shadow:0 20px 70px #072d2d66;overflow:hidden}
.fl-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;margin-bottom:6px}
.fl-header .fl-summary{margin:0;min-width:0}
.fl-eyebrow{margin:0 0 4px;font-size:11px;line-height:1.2;color:#698071;font-weight:650}
.fl-header h2{margin:0;font-size:24px;line-height:1.25;letter-spacing:-.8px}
.fl-close{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e8ebdf;flex:none}
.fl-close svg{width:19px;height:19px;fill:none;stroke:#376454;stroke-width:2;stroke-linecap:round}
.fl-summary{margin:14px 0 12px;font-size:13px;font-weight:750;line-height:1.4;color:#28656b}
.fl-scroll{position:relative;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9cbbb transparent;touch-action:pan-y;padding:7px 5px 9px}
.fl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.fl-node{position:relative;display:flex;gap:12px;align-items:center;min-height:82px;padding:11px 12px 15px;border:1px solid #d7ded0;border-radius:18px;background:#efeee2;flex:none}
.fl-node:not(:last-child)::after{content:"↑";position:absolute;left:34px;bottom:-19px;width:15px;text-align:center;font-size:14px;line-height:18px;color:#94aa97}
.fl-food-icon{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fffcf1;border:1px solid #dce5d6}
.fl-food-icon svg{width:41px;height:28px;overflow:visible}.fl-food-icon .fc-art{inset:2px;width:40px;height:40px}
.fl-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.fl-level{font-size:10px;font-weight:800;letter-spacing:.5px;color:#6d856f}
.fl-copy strong{font-size:15px;line-height:1.2}.fl-note{font-size:10.5px;line-height:1.3;color:#6b806c;word-break:keep-all}
.fl-status{align-self:flex-start;margin-top:3px;font-size:10px;font-weight:800;color:#5c8068;white-space:nowrap}
.fl-meter{position:absolute;left:12px;right:12px;bottom:7px;height:3px;border-radius:3px;background:#dce3d5;overflow:hidden}.fl-meter>span{display:block;height:100%;background:#87a886;border-radius:inherit}
.fl-node.current{background:#fffdf4;border:2px solid #367d80;box-shadow:0 3px 12px #294f4612;padding:10px 11px 14px}
.fl-node.current .fl-food-icon{border-color:#a5bd95;background:color-mix(in srgb,var(--accent) 28%,#fffdf4)}
.fl-node.current .fl-status{background:#367d80;color:#fffcef;padding:3px 6px;border-radius:9px;margin-top:0}
.fl-node.current .fl-meter>span{background:#367d80}.fl-node.unlocked{background:#f5f4e8}.fl-node.locked .fl-food-icon{opacity:.65}
.fl-foot{flex:none;margin:12px 0 0;text-align:center;color:#71836e;font-size:10px;line-height:1.4}
@media(max-height:420px){.food-levels{padding:10px}.fl-sheet{max-height:100%;padding:12px 16px 10px;border-radius:20px}.fl-header h2{font-size:20px}.fl-eyebrow{display:none}.fl-summary{margin:6px 0}.fl-foot{margin-top:6px}.fl-node{min-height:76px}}
/* Motes of light flying from Bukang's mouth to the food card. */
.food-motes{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.fc-mote{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;opacity:0;will-change:transform,opacity;--mote:#bfe0e8;
  background:radial-gradient(circle,#fffbe6 0,#fffbe6 20%,var(--mote) 46%,transparent 72%);box-shadow:0 0 10px color-mix(in srgb,var(--mote) 60%,transparent)}