/* Fruit Cottage: the game's name and its button across the top, and under them the round's own
   area, which fruit-cottage.js lays the board out in. The panel's size is game-layout.css's
   (data-ideal); the stage fills it. Behind everything is a scene, in ::before: --fsh-sky is its
   picture, set by fruit-cottage.js. The scene keeps its scenery along the bottom edge, so it is
   fitted from the bottom; the colour with it is what shows until it arrives.

   Everything on the stage is shown at .65 of its saturation. The filter must never be on the
   board's canvas or on anything the canvas stands in: there it is worked out again over the
   whole of it for every frame the canvas draws. So the scene takes it, and every part of the
   stage beside the canvas's own line of parents; the canvas tones its own pictures as it makes
   them (SAT in fruit-cottage.js — the two numbers change together). */

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="fruit-cottage"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #5fb9d7;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.game-root[data-game="fruit-cottage"]::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: #38c2f0 var(--fsh-sky, none) center bottom / cover no-repeat;
  filter: saturate(.65);
}
.fsh-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.fsh-stage > :not(.fsh):not(.fsh-win), .fsh > :not(.fsh-fit), .fsh-board > :not(canvas) { filter: saturate(.65); }

/* --- the top row: the game's name at the left, its button at the right ------------------------ */
.fsh-top {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2;
  display: flex; align-items: baseline; gap: 10px; pointer-events: none; text-align: left;
}
.fsh-game { font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(10, 70, 96, .4); }
.fsh-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.fsh-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
  background: rgba(255, 255, 255, .82); color: #2f5568;
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.fsh-pill:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-text); }
.fsh-pill .fsh-icon { width: 16px; height: 16px; }

/* --- the round's own area --------------------------------------------------------------------
   The top padding clears the row above. */
.fsh {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 52px 6px 6px; box-sizing: border-box; overflow: hidden; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.fsh > .fsh-hud, .fsh > .fsh-cap, .fsh > .fsh-ctrl { flex: none; }

/* The level at the board's left edge and, at its right, a bar of how much of the level's fruit is
   taken. --bw is the board's width and --slack the space left over above, both set by
   fruit-cottage.js. The row's height is fixed: the board is laid out in what it leaves. The row
   is as wide as the board, and 304px where the board is narrower than that and the stage is not. */
.fsh-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: max(var(--bw, 100%), min(100%, 304px)); max-width: 100%; height: 1.84rem; margin-top: var(--slack, 0px); padding: 0 8px; box-sizing: border-box;
}
.fsh-lv { flex: none; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(10, 70, 96, .5); white-space: nowrap; }
.fsh-bar {
  flex: 0 1 220px; min-width: 0; height: 14px; box-sizing: border-box; overflow: hidden;
  border: 2px solid #fff; border-radius: 999px; background: rgba(10, 70, 96, .38);
  box-shadow: 0 1px 2px rgba(10, 70, 96, .35);
}
.fsh-bar-fill {
  display: block; width: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #ffe29a 0 40%, #ffab1f 40% 100%); transition: width .28s ease-out;
}
.fsh-bar.is-bump { animation: fsh-bump .28s ease-out; }
@keyframes fsh-bump { 40% { transform: scale(1.08); } }

.fsh-fit { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: start center; }
.fsh-board { position: relative; }
/* A fruit acts on a tap, so a finger's up-and-down move still scrolls the page. */
.fsh-canvas {
  display: block; width: 100%; height: 100%; cursor: pointer; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}

/* Between the level's row and the board. Two lines tall whatever it says, empty included: the
   board is laid out in what this leaves, so a caption that changed height would move the board
   as words come and go. */
.fsh-cap {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 3em; overflow: hidden; line-height: 1.5; margin: 0; width: 100%; max-width: 560px; padding: 0 8px;
  color: #0d4257; font-size: .86rem; font-weight: 700; text-align: center;
  text-shadow: 0 0 2px #fff, 0 0 6px rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .8);
}
/* Moves with the hand: 3s is DEMO.cycle in fruit-cottage.js; the two change together. */
.fsh-cap.is-on { animation: fsh-say 3s ease-in-out infinite; }
@keyframes fsh-say {
  0%, 10% { transform: translateY(0); }
  16%, 52% { transform: translateY(-3px); color: #c2410c; }
  66%, 100% { transform: translateY(0); }
}

/* The lesson's hand. fruit-cottage.js places it with transform each frame; the offsets put the
   fingertip (34.4% 5.9% of the icon) on the point it is moved to. */
.fsh-hand {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: 46px; aspect-ratio: 32 / 34; opacity: 0;
}
.fsh-hand[hidden] { display: none; }
.fsh-hand svg { display: block; width: 100%; height: 100%; }
/* iOS before 15 has no aspect-ratio. */
@supports not (aspect-ratio: 1) {
  .fsh-hand { height: 48.875px; }
}

/* The two keys, on the board at each side of the basket: the hint at the left, the refresh at the
   right, each with how many are left at its upper corner. --bw is the board's width. */
.fsh-aid {
  position: absolute; bottom: 6%; z-index: 3;
  display: grid; place-items: center; box-sizing: border-box; padding: 0;
  width: clamp(54px, calc(var(--bw, 320px) * .2), 92px); aspect-ratio: 3 / 2;
  border: 3px solid #fff; border-radius: 16px; background: linear-gradient(180deg, #6fd0ff, #2fa3ee); color: #fff; cursor: pointer;
  box-shadow: 0 3px 0 #1a72bb;
}
.fsh-aid[hidden] { display: none; }
.fsh-aid-hint { left: 15.5%; transform: translateX(-50%); }
.fsh-aid-mix { right: 15.5%; transform: translateX(50%); }
.fsh-aid:hover:not(:disabled) { background: linear-gradient(180deg, #8adbff, #44b1f5); }
/* Off, or none left: a duller blue, never see-through. One with none left is still pressed, to be
   told when the next comes. */
.fsh-aid:disabled, .fsh-aid.is-empty, .fsh-aid.is-empty:hover { background: linear-gradient(180deg, #b4d2e4, #8eb3cb); box-shadow: 0 3px 0 #6a8da5; }
.fsh-aid:disabled { cursor: default; }
.fsh-aid .fsh-icon {
  width: 68%; height: auto; aspect-ratio: 1; max-width: 46px; stroke-width: 2.9;
  filter: drop-shadow(0 1.5px 0 rgba(12, 76, 134, .6));
}
/* iOS before 15 has no aspect-ratio: the key's width and its icon's, taken again as heights. */
@supports not (aspect-ratio: 1) {
  .fsh-aid { height: calc(clamp(54px, calc(var(--bw, 320px) * .2), 92px) * 2 / 3); }
  .fsh-aid .fsh-icon { height: min(46px, calc((clamp(54px, calc(var(--bw, 320px) * .2), 92px) - 6px) * .68)); }
}
.fsh-count {
  position: absolute; top: -8px; right: -8px;
  display: grid; place-items: center; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 5px;
  border: 2px solid #fff; border-radius: 999px; background: #3fae6a; color: #fff;
  font-size: .78rem; font-weight: 800; line-height: 1;
}
.fsh-aid:disabled .fsh-count, .fsh-aid.is-empty .fsh-count { background: #8a97a3; }
.fsh-count.is-pop { animation: fsh-count-pop .45s ease-out; }
@keyframes fsh-count-pop { 35% { transform: scale(1.55); } }

/* Start over, on the board: on the right hut's wall, level with the count on the left one
   (--fsh-row, from fruit-cottage.js), and sized by the board's width so it stays on the wall. */
.fsh-box.fsh-restart {
  position: absolute; top: var(--fsh-row, 77%); right: 18%; z-index: 3; transform: translate(50%, -50%);
  height: clamp(28px, calc(var(--bw, 320px) * .1), 40px); padding: 0 10px 0 8px; gap: 5px;
  background: #fff; font-size: clamp(.66rem, calc(var(--bw, 320px) * .035), .9rem);
}
.fsh-box.fsh-restart:disabled { opacity: 1; background: #e9e4da; color: #a39d92; }

/* Under the board, a row as wide as it: the room the level's arrows and the speaker stand in
   where there is none beside the board. */
.fsh-ctrl {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start;
  width: max(var(--bw, 100%), min(100%, 304px)); max-width: 100%; min-height: 40px; padding: 0 8px; box-sizing: border-box;
}
.fsh-box {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 14px; background: rgba(255, 255, 255, .84); color: #2f5568; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(10, 70, 96, .28);
}
.fsh-box:hover:not(:disabled) { background: #fff; color: #0d4257; }
.fsh-box:disabled { opacity: .5; cursor: default; }
.fsh-box .fsh-icon { width: 18px; height: 18px; stroke-width: 2.4; }

/* At the stage's two sides, halfway down; under the card's panel (z-index 5). */
.fsh-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .62); color: #2f5568; cursor: pointer;
  box-shadow: 0 1px 4px rgba(10, 70, 96, .2);
}
.fsh-prev { left: 6px; }
.fsh-next { right: 6px; }
.fsh-arrow:hover:not(:disabled) { background: #fff; color: #0d4257; }
/* Faint on the icon, not the button: an opacity on the button would fade its tip with it. */
.fsh-arrow:disabled { cursor: default; }
.fsh-arrow:disabled .fsh-icon { opacity: .12; }
.fsh-arrow[hidden] { display: none; }
/* Where a press goes, beside the arrow on hover. */
.fsh-arrow::after {
  content: attr(data-tip); position: absolute; top: 50%; transform: translateY(-50%);
  padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #4d4031;
  box-shadow: 0 1px 4px rgba(40, 30, 20, .18); font-size: .8rem; font-weight: 600; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.fsh-prev::after { left: calc(100% + 4px); }
.fsh-next::after { right: calc(100% + 4px); }
.fsh-arrow:hover::after, .fsh-arrow:focus-visible::after { opacity: 1; }
.fsh-arrow .fsh-icon { width: 28px; height: 28px; }
/* No room beside the board (fruit-cottage.js sets the class): halfway down, the arrows would lie
   over its outer columns, so the two sit together in the middle of the bottom row, between Start
   over and the speaker. */
.fsh-tight .fsh-arrow { top: auto; bottom: 9px; transform: none; width: 34px; height: 34px; }
.fsh-tight .fsh-prev { left: calc(50% - 10px); }
.fsh-tight .fsh-next { left: calc(50% + 30px); right: auto; }
.fsh-tight .fsh-arrow::after { display: none; }
.fsh-tight .fsh-arrow .fsh-icon { width: 24px; height: 24px; }

/* The speaker, and the dots beside it that open the menu. The dots take no room until shown
   (hover, focus, or the menu open); a screen that cannot hover shows them always, dimmer. The
   menu opens upward. */
.fsh-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .62); color: #4d4031; cursor: pointer;
  box-shadow: 0 1px 4px rgba(40, 30, 20, .18);
}
.fsh-round:hover { background: #fff; }
.fsh-round .fsh-sicon { width: 22px; height: 22px; }
.fsh-audio { position: absolute; right: 12px; bottom: 7px; z-index: 3; display: flex; align-items: center; }
.fsh-more {
  display: grid; place-items: center; width: 0; height: 38px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(77, 64, 49, .6); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.fsh-audio:hover .fsh-more, .fsh-audio:focus-within .fsh-more, .fsh-audio.is-open .fsh-more { width: 30px; opacity: 1; }
@media (hover: none) { .fsh-more { width: 26px; opacity: .6; } }
.fsh-more .fsh-sicon { width: 22px; height: 22px; }
.fsh-ellipsis { stroke-width: 3.4; }
.fsh-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(77, 64, 49, .18); border-radius: 12px; background: #fffdf8;
  box-shadow: 0 6px 20px rgba(50, 40, 20, .18);
}
.fsh-menu[hidden] { display: none; }
.fsh-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; color: #4d4031; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.fsh-opt:hover, .fsh-opt:focus-visible { background: rgba(77, 64, 49, .07); }
.fsh-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(77, 64, 49, .22); transition: background .15s ease; }
.fsh-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.fsh-opt[aria-checked="true"] .fsh-sw { background: #4fb878; }
.fsh-opt[aria-checked="true"] .fsh-sw::after { transform: translateX(14px); }
.fsh-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fsh-cone { fill: currentColor; stroke: none; }
.fsh-sound.off .fsh-waves { display: none; }
.fsh-sound:not(.off) .fsh-slash { display: none; }
.fsh-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.fsh-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.fsh-win:empty { pointer-events: none; }
.fsh-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 20px; text-align: center; overflow-y: auto;
  background: rgba(35, 87, 105, .6);
  animation: fsh-in .35s ease-out;
}
/* No filter on the overlay or the panel: the sheet takes its own, and the panel's colour is
   rgb(12, 92, 120) at .65 saturation already. */
@keyframes fsh-in { from { opacity: 0; } }
/* Centred with auto margins rather than justify-content: a sheet taller than the stage scrolls
   from its top instead of losing it. */
.fsh-panel > * { flex: none; }
.fsh-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.fsh-sheet {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%); box-sizing: border-box;
  padding: 26px 18px; border-radius: 20px; background: #fffdf8;
  box-shadow: 0 10px 0 rgba(77, 64, 49, .08); filter: saturate(.65);
}
.fsh-sheet .fsh-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #4d4031; }
/* Each letter's delay is set by fruit-cottage.js. */
.fsh-word { white-space: nowrap; }
.fsh-ch { display: inline-block; animation: fsh-wave .5s ease-in-out both; }
@keyframes fsh-wave { 40% { transform: translateY(-.35em); } }
.fsh-view { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.fsh-view p { margin: 0; }
.fsh-view-title { font-weight: 800; color: #4d4031; }
.fsh-view-line { color: #4d4031; }
.fsh-view-small { font-size: .8rem; color: #9a8c78; }
/* The fruit the next level adds. */
.fsh-new { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; color: #4d4031; font-weight: 700; }
.fsh-new-tile {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  animation: fsh-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .5s both;
}
.fsh-new-tile img { display: block; width: 42px; height: 42px; object-fit: contain; }
.fsh-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #6a5a44; }
.fsh-ask p { margin: 0; }
.fsh-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fsh-mood {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--c-text);
  font: inherit; cursor: pointer;
}
.fsh-mood:hover { border-color: var(--c-primary); }
.fsh-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.fsh-mood .fsh-icon { width: 22px; height: 22px; }
.fsh-ask .fsh-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.fsh-key {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; margin: 0 1px;
  border: 1px solid #c9ced8; border-bottom-width: 2px; border-radius: 5px; background: #fff;
  font: inherit; font-size: .85em; font-weight: 700; line-height: 1.4; text-align: center; color: var(--c-text);
}
.fsh-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fsh-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.fsh-choices .fsh-icon { stroke-width: 2.2; }
/* The last level's award: a green badge that pops in. */
.fsh-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 18px 7px 13px; border-radius: 999px;
  background: #dff3e6; border: 1.5px solid #8fd3a9;
  color: #237a4a; font-size: 1.12rem; font-weight: 800;
  animation: fsh-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .15s both;
}
.fsh-cap-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fsh-cap-top { fill: currentColor; }
@keyframes fsh-badge-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* The review build's tools, under the game panel and outside it. */
.fsh-review {
  display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 10px auto 0; padding: 8px; font-size: .85rem; color: #4a5766;
}
.fsh-review select, .fsh-review button { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }

/* #game-root itself is the element that goes full screen; these same rules are the
   fixed-position fallback for a browser without the Fullscreen API. game-layout.css gives a
   [data-ideal] panel an explicit width and height, which would beat the fallback's inset. */
#game-root.fsh-fs {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; margin: 0; padding: 0;
  width: auto; height: auto; max-width: none;
  border: 0; border-radius: 0; box-shadow: none; min-height: 0; overflow: hidden;
}
body.fsh-locked { overflow: hidden; }

/* iOS before 14.5 ignores `gap` on a flex box, and `inset` came in the same release, so this
   reaches only those browsers. The margins stand in for each gap above, and must change with it.
   #game-root lifts them over the `margin: 0` the children set. */
@supports not (inset: 0) {
  #game-root .fsh-top > * + *, #game-root .fsh-new > * + * { margin-left: 10px; }
  #game-root .fsh-tools > * + *, #game-root .fsh-mood > * + *, #game-root .fsh-choices .btn > * + *, #game-root .fsh-badge > * + * { margin-left: 8px; }
  #game-root .fsh-pill > * + * { margin-left: 6px; }
  #game-root .fsh-hud > * + * { margin-left: 14px; }
  #game-root .fsh-box > * + * { margin-left: 7px; }
  #game-root .fsh-box.fsh-restart > * + * { margin-left: 5px; }
  #game-root .fsh-opt > * + * { margin-left: 16px; }
  #game-root .fsh > * + * { margin-top: 6px; }
  #game-root .fsh-panel > * + * { margin-top: 18px; }
  #game-root .fsh-sheet > * + * { margin-top: 14px; }
  #game-root .fsh-view > * + * { margin-top: 4px; }
  #game-root .fsh-ask > * + * { margin-top: 10px; }
  #game-root .fsh-moods > * { margin: 5px; }
  #game-root .fsh-choices > * { margin: 6px; }
}