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

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="fruit-2048"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #3d9bf5 var(--f48-sky, none) center bottom / cover no-repeat;
  filter: saturate(.65) brightness(1.05);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.game-root[data-game="fruit-2048"][data-scene="backdrop-stars"] { background-color: #232f9e; }
.game-root[data-game="fruit-2048"][data-scene="backdrop-ocean"] { background-color: #1583d6; }
.game-root[data-game="fruit-2048"][data-scene="backdrop-meadow"] { background-color: #94a3f6; }
.game-root[data-game="fruit-2048"][data-scene="backdrop-sea"] { background-color: #12a4dc; }
.f48-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* --- the top row: the game's name at the left, its button at the right ------------------------ */
.f48-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;
}
.f48-game { font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(12, 62, 122, .35); }
.f48-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.f48-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: #33506e;
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.f48-pill:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-text); }
.f48-pill .f48-icon { width: 16px; height: 16px; }

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

/* The ladder, as wide as the tray (--bw) and moved down by the space the tray leaves over
   (--slack), with --rungs fruit on it, all set by fruit-2048.js. Its height is fixed: the tray
   is laid out in what it leaves. A fruit never grown is a shadow, one grown in an earlier game is
   faint, and one reached in this game is in colour; the biggest on the tray has a ring. */
.f48-ladder {
  display: flex; align-items: center; justify-content: space-between;
  width: var(--bw, 100%); max-width: 100%; height: 36px; margin-top: var(--slack, 0px);
}
.f48-rung {
  position: relative; display: grid; place-items: center; flex: none;
  width: min(32px, calc((var(--bw, 300px) - 30px) / var(--rungs, 11))); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .5); box-shadow: 0 1px 2px rgba(12, 62, 122, .25);
}
.f48-rung[hidden] { display: none; }
/* iOS before 15 has no aspect-ratio. */
@supports not (aspect-ratio: 1) {
  .f48-rung { height: min(32px, calc((var(--bw, 300px) - 30px) / var(--rungs, 11))); }
}
.f48-rung img, .f48-rung i { display: block; width: 80%; height: 80%; object-fit: contain; border-radius: 50%; filter: brightness(0) opacity(.25); }
.f48-rung.is-known img, .f48-rung.is-known i { filter: opacity(.5); }
.f48-rung.is-here { background: rgba(255, 255, 255, .85); }
.f48-rung.is-here img, .f48-rung.is-here i { filter: none; }
.f48-rung.is-top { background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffb703; }
.f48-rung.is-new { animation: f48-rung-new .7s cubic-bezier(.2, .9, .3, 1.35); }
@keyframes f48-rung-new {
  0% { transform: scale(1); }
  35% { transform: scale(1.7) rotate(-10deg); }
  70% { transform: scale(.9) rotate(4deg); }
  100% { transform: scale(1); }
}

.f48-fit { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: start center; }
.f48-board { position: relative; }
/* A swipe on the tray moves the fruit, so the page must not take it as a scroll. */
.f48-canvas {
  display: block; width: 100%; height: 100%; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none;
}

/* Two lines tall whatever it says, empty included: the tray is laid out in what this leaves, so
   a caption that changed height would move the tray as words come and go. It lies over a scene's
   bottom edge, pale cloud and sand as often as dark hills and deep water: dark words with a white
   halo read on all of them. */
.f48-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: #0f3d6b; 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);
}

/* The lesson's hand: fruit-2048.js puts the fingertip's start and end in --x0 --y0 --x1 --y1. It
   presses, swipes, lifts, then rests for about two seconds before the next pass. */
.f48-hand {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: 46px; aspect-ratio: 32 / 34; opacity: 0;
}
.f48-hand[hidden] { display: none; }
/* iOS before 15 has no aspect-ratio. */
@supports not (aspect-ratio: 1) {
  .f48-hand { height: 48.875px; }
}
.f48-hand svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(12, 62, 122, .35)); }
.f48-hand.is-on { animation: f48-swipe 3.8s ease-in-out infinite; }
@keyframes f48-swipe {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(1.08); }
  8% { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(1); }
  14% { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(.92); }
  38% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(.92); }
  46% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(1.05); }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(1.05); }
}

/* New game, under the caption in the middle; once pressed it asks again, in amber. */
.f48-ctrl {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: var(--bw, 100%); max-width: 100%; min-height: 46px;
}
.f48-new { padding: 8px 18px; font-weight: 700; }
.f48-new.is-sure { background: #ffcf4a; border-color: #fff; color: #5a3b00; }

/* 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. */
.f48-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);
}
.f48-round:hover { background: #fff; }
.f48-round .f48-sicon { width: 22px; height: 22px; }
.f48-audio { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; align-items: center; }
.f48-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;
}
.f48-audio:hover .f48-more, .f48-audio:focus-within .f48-more, .f48-audio.is-open .f48-more { width: 30px; opacity: 1; }
@media (hover: none) { .f48-more { width: 26px; opacity: .6; } }
.f48-more .f48-sicon { width: 22px; height: 22px; }
.f48-ellipsis { stroke-width: 3.4; }
.f48-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);
}
.f48-menu[hidden] { display: none; }
.f48-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;
}
.f48-opt:hover, .f48-opt:focus-visible { background: rgba(77, 64, 49, .07); }
.f48-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(77, 64, 49, .22); transition: background .15s ease; }
.f48-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.f48-opt[aria-checked="true"] .f48-sw { background: #4fb878; }
.f48-opt[aria-checked="true"] .f48-sw::after { transform: translateX(14px); }
.f48-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f48-cone { fill: currentColor; stroke: none; }
.f48-sound.off .f48-waves { display: none; }
.f48-sound:not(.off) .f48-slash { display: none; }
.f48-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.f48-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.f48-win:empty { pointer-events: none; }
.f48-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 20px 12px; text-align: center; overflow-y: auto;
  background: rgba(20, 84, 156, .6);
  animation: f48-in .35s ease-out;
}
@keyframes f48-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. */
.f48-panel > * { flex: none; }
.f48-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.f48-sheet {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%); box-sizing: border-box;
  padding: 24px 14px; border-radius: 20px; background: #fffdf8;
  box-shadow: 0 10px 0 rgba(77, 64, 49, .08);
}
.f48-card-fruit {
  display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: -4px;
  animation: f48-fruit-in .6s cubic-bezier(.2, .9, .3, 1.35) .1s both;
}
.f48-card-fruit img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes f48-fruit-in { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
.f48-sheet .f48-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #4d4031; }
/* The choices stay on one row down to a 360px-wide phone. */
.f48-choices .btn { padding: 10px 14px; font-size: .9rem; }
/* Each letter's delay is set by fruit-2048.js. */
.f48-word { white-space: nowrap; }
.f48-ch { display: inline-block; animation: f48-wave .5s ease-in-out both; }
@keyframes f48-wave { 40% { transform: translateY(-.35em); } }
.f48-view { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.f48-view p { margin: 0; }
.f48-view-line { color: #4d4031; font-weight: 600; }
.f48-view-small { font-size: .8rem; color: #9a8c78; }
.f48-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #6a5a44; }
.f48-ask p { margin: 0; }
.f48-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.f48-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;
}
.f48-mood:hover { border-color: var(--c-primary); }
.f48-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.f48-mood .f48-icon { width: 22px; height: 22px; }
.f48-ask .f48-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.f48-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);
}
.f48-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.f48-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.f48-choices .f48-icon { stroke-width: 2.2; }

/* The review build's tools, under the game panel and outside it. */
.f48-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;
}
.f48-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.f48-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.f48-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 .f48-top > * + * { margin-left: 10px; }
  #game-root .f48-tools > * + * { margin-left: 8px; }
  #game-root .f48-pill > * + * { margin-left: 6px; }
  #game-root .f48 > * + * { margin-top: 8px; }
  #game-root .f48-opt > * + * { margin-left: 16px; }
  #game-root .f48-panel > * + * { margin-top: 18px; }
  #game-root .f48-sheet > * + * { margin-top: 14px; }
  #game-root .f48-view > * + * { margin-top: 4px; }
  #game-root .f48-ask > * + * { margin-top: 10px; }
  #game-root .f48-moods > * { margin: 5px 5px; }
  #game-root .f48-mood > * + * { margin-left: 8px; }
  #game-root .f48-choices > * { margin: 4px 4px; }
  #game-root .f48-choices .btn > * + * { margin-left: 8px; }
  #game-root .f48-review > * { margin: 4px 4px; }
}