/* Fruit Bubbles: the game's name and its button across the top, and under them the round's own
   area, which fruit-bubbles.js lays the board out in. The panel's size is game-layout.css's
   (data-ideal); the stage fills it. Behind everything is the level's scene, in ::before:
   --fbu-sky is its picture and data-scene names it, both set by fruit-bubbles.js. Every 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.

   The scene is shown at .65 of its saturation; the fruit are not, so the kinds stay apart. A
   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. */

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="fruit-bubbles"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #3d9bf5;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.game-root[data-game="fruit-bubbles"]::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: #3d9bf5 var(--fbu-sky, none) center bottom / cover no-repeat;
  filter: saturate(.65) brightness(1.05);
}
.game-root[data-game="fruit-bubbles"][data-scene="backdrop-meadow"]::before { background-color: #94a3f6; }
.game-root[data-game="fruit-bubbles"][data-scene="backdrop-sea"]::before { background-color: #12a4dc; }
.game-root[data-game="fruit-bubbles"][data-scene="backdrop-ocean"]::before { background-color: #1583d6; }
.game-root[data-game="fruit-bubbles"][data-scene="backdrop-stars"]::before { background-color: #232f9e; }
.fbu-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 ------------------------ */
.fbu-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;
}
.fbu-game { font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(12, 62, 122, .4); }
.fbu-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.fbu-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;
}
.fbu-pill:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-text); }
.fbu-pill .fbu-icon { width: 16px; height: 16px; }

/* --- the round's own area --------------------------------------------------------------------
   The top padding clears the row above. */
.fbu {
  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;
}
.fbu > .fbu-hud, .fbu > .fbu-cap, .fbu > .fbu-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
   cleared. --bw is the board's width and --slack-top / --slack-bottom the space left over, both set
   by fruit-bubbles.js. The row's height is fixed: the board is laid out in what it leaves. */
.fbu-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-top, 0px); padding: 0 8px; box-sizing: border-box;
}
.fbu-lv { flex: none; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(12, 62, 122, .5); white-space: nowrap; }
.fbu-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(12, 62, 122, .38);
  box-shadow: 0 1px 2px rgba(12, 62, 122, .35);
}
.fbu-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;
}
.fbu-bar.is-bump { animation: fbu-bump .28s ease-out; }
@keyframes fbu-bump { 40% { transform: scale(1.08); } }
/* The level's points, after its number; the row's height stays fixed whatever they read. */
.fbu-score {
  flex: none; margin-right: auto; display: inline-flex; align-items: center; gap: 4px;
  color: #fff; font-size: .95rem; font-weight: 800; line-height: 1; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(12, 62, 122, .5); font-variant-numeric: tabular-nums;
}
.fbu-score .fbu-icon { width: 17px; height: 17px; color: #ffd23f; filter: drop-shadow(0 1px 1px rgba(12, 62, 122, .5)); }
.fbu-score.is-bump { animation: fbu-score-bump .32s ease-out; }
@keyframes fbu-score-bump { 35% { transform: scale(1.18); } }

/* The firework key, on the board at its bottom-right: the bomb alone, and on the bomb's ball, at
   its upper left, how many are in hand; fruit-bubbles.js sets the key's place and size. The bomb
   keeps its colours with none in hand: only the count, grey, says so. */
.fbu-fw {
  position: absolute; z-index: 3; display: grid; place-items: center; box-sizing: border-box; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.fbu-fw .fbu-bomb { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(12, 40, 80, .4)); }
.fbu-fw:hover:not(:disabled) .fbu-bomb { filter: drop-shadow(0 2px 2px rgba(12, 40, 80, .4)) brightness(1.15); }
.fbu-fw:disabled { cursor: default; }
.fbu-fw[hidden] { display: none; }
.fbu-fw.is-armed { animation: fbu-fw-armed .9s ease-in-out infinite; }
@keyframes fbu-fw-armed { 50% { transform: scale(1.08); filter: brightness(1.15); } }
/* 21% 51% is the ball's upper left edge in the bomb's picture (BOMB in fruit-bubbles.js); 11px
   is half the count's size. */
.fbu-fw-count {
  position: absolute; top: calc(51% - 11px); left: calc(21% - 11px);
  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;
}
.fbu-fw.is-empty .fbu-fw-count, .fbu-fw:disabled .fbu-fw-count { background: #8a97a3; }
.fbu-fw-count.is-pop { animation: fbu-count-pop .45s ease-out; }
@keyframes fbu-count-pop { 35% { transform: scale(1.55); } }

.fbu-fit { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: start center; }
.fbu-board { position: relative; }
/* A finger aims sideways and shoots on the lift, so its up-and-down move still scrolls the page. */
.fbu-canvas {
  display: block; width: 100%; height: 100%; cursor: crosshair; 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. */
.fbu-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: #0d3f63; 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 words move with the hand: up a little and lit while the fruit flies. 4.2s is
   DEMO.cycle in fruit-bubbles.js; the two change together. */
.fbu-cap.is-on { animation: fbu-cue 4.2s ease-in-out infinite; }
@keyframes fbu-cue {
  0%, 12% { transform: none; color: #0d3f63; }
  17%, 40% { transform: translateY(-3px); color: #c2410c; }
  52%, 100% { transform: none; color: #0d3f63; }
}
/* A big drop's word: it lifts a little and glows, 1.5s to match CHEER_MS in fruit-bubbles.js. It
   is made bigger by the transform only: the caption's height is in em, so a font-size here
   would change it, and the board, laid out in what the caption leaves, would shrink with it. */
.fbu-cap.is-cheer { animation: fbu-cheer 1.5s ease-out both; color: #b45309; }
@keyframes fbu-cheer {
  0% { transform: scale(1.1); opacity: 0; }
  15% { transform: translateY(-3px) scale(1.3); opacity: 1; }
  70% { transform: translateY(-3px) scale(1.22); opacity: 1; }
  100% { transform: none; opacity: 0; }
}

/* The lesson's hand: it presses at --hx/--hy (set by fruit-bubbles.js) on DEMO's cycle; the
   offsets put the fingertip (34.4% 5.9% of the icon) on that point. */
.fbu-hand {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: 46px; aspect-ratio: 32 / 34; transform-origin: 34.4% 5.9%; opacity: 0;
}
.fbu-hand[hidden] { display: none; }
.fbu-hand svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.fbu-hand::before {
  content: ''; position: absolute; left: 34.4%; top: 5.9%; width: 70%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(92, 201, 141, .5); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
  transform: translate(-50%, -50%) scale(0); opacity: 0;
}
/* iOS before 15 has no aspect-ratio. */
@supports not (aspect-ratio: 1) {
  .fbu-hand { height: 48.875px; }
  .fbu-hand::before { height: 32.2px; }
}
.fbu-hand.is-on { animation: fbu-tap 4.2s ease-in-out infinite; }
.fbu-hand.is-on::before { animation: fbu-tap-ring 4.2s ease-out infinite; }
@keyframes fbu-tap {
  0% { opacity: 0; transform: translate(calc(var(--hx) - 34.4%), calc(var(--hy) - 5.9% - 16px)) scale(1.1); }
  8% { opacity: 1; transform: translate(calc(var(--hx) - 34.4%), calc(var(--hy) - 5.9% - 16px)) scale(1.1); }
  15%, 24% { opacity: 1; transform: translate(calc(var(--hx) - 34.4%), calc(var(--hy) - 5.9%)) scale(1); }
  36% { opacity: 1; transform: translate(calc(var(--hx) - 34.4%), calc(var(--hy) - 5.9% - 12px)) scale(1.08); }
  48%, 100% { opacity: 0; transform: translate(calc(var(--hx) - 34.4%), calc(var(--hy) - 5.9% - 12px)) scale(1.08); }
}
@keyframes fbu-tap-ring {
  0%, 14% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  17% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  32%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

/* Under the board, a row as wide as it: Start over at its left, and the room the level's arrows
   and the speaker stand in where there is none beside the board. */
.fbu-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;
  margin-bottom: var(--slack-bottom, 0px);
}
.fbu-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: #fff; color: #33506e; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(12, 62, 122, .28);
}
.fbu-box:hover:not(:disabled) { color: #0d3f63; }
.fbu-box:disabled { background: #e6ebf1; color: #9aa6b4; cursor: default; }
.fbu-box .fbu-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). */
.fbu-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: #33506e; cursor: pointer;
  box-shadow: 0 1px 4px rgba(12, 62, 122, .2);
}
.fbu-prev { left: 6px; }
.fbu-next { right: 6px; }
.fbu-arrow:hover:not(:disabled) { background: #fff; color: #0d3f63; }
/* Faint on the icon, not the button: an opacity on the button would fade its tip with it. */
.fbu-arrow:disabled { cursor: default; }
.fbu-arrow:disabled .fbu-icon { opacity: .12; }
.fbu-arrow[hidden] { display: none; }
/* Where a press goes, beside the arrow on hover. */
.fbu-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: #33506e;
  box-shadow: 0 1px 4px rgba(12, 62, 122, .18); font-size: .8rem; font-weight: 600; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.fbu-prev::after { left: calc(100% + 4px); }
.fbu-next::after { right: calc(100% + 4px); }
.fbu-arrow:hover::after, .fbu-arrow:focus-visible::after { opacity: 1; }
.fbu-arrow .fbu-icon { width: 28px; height: 28px; }
/* No room beside the board (fruit-bubbles.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. */
.fbu-tight .fbu-arrow { top: auto; bottom: calc(9px + var(--slack-bottom, 0px)); transform: none; width: 34px; height: 34px; }
.fbu-tight .fbu-prev { left: calc(50% - 10px); }
.fbu-tight .fbu-next { left: calc(50% + 30px); right: auto; }
.fbu-tight .fbu-arrow::after { display: none; }
.fbu-tight .fbu-arrow .fbu-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. */
.fbu-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .62); color: #33506e; cursor: pointer;
  box-shadow: 0 1px 4px rgba(12, 62, 122, .18);
}
.fbu-round:hover { background: #fff; }
.fbu-round .fbu-sicon { width: 22px; height: 22px; }
.fbu-audio { position: absolute; right: 12px; bottom: calc(7px + var(--slack-bottom, 0px)); z-index: 3; display: flex; align-items: center; }
.fbu-more {
  display: grid; place-items: center; width: 0; height: 38px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(255, 255, 255, .85); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.fbu-audio:hover .fbu-more, .fbu-audio:focus-within .fbu-more, .fbu-audio.is-open .fbu-more { width: 30px; opacity: 1; }
@media (hover: none) { .fbu-more { width: 26px; opacity: .7; } }
.fbu-more .fbu-sicon { width: 22px; height: 22px; }
.fbu-ellipsis { stroke-width: 3.4; }
.fbu-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(51, 80, 110, .18); border-radius: 12px; background: #fdfeff;
  box-shadow: 0 6px 20px rgba(12, 40, 80, .2);
}
.fbu-menu[hidden] { display: none; }
.fbu-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: #33506e; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.fbu-opt:hover, .fbu-opt:focus-visible { background: rgba(51, 80, 110, .07); }
.fbu-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(51, 80, 110, .22); transition: background .15s ease; }
.fbu-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.fbu-opt[aria-checked="true"] .fbu-sw { background: #4fb878; }
.fbu-opt[aria-checked="true"] .fbu-sw::after { transform: translateX(14px); }
.fbu-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fbu-cone { fill: currentColor; stroke: none; }
.fbu-sound.off .fbu-waves { display: none; }
.fbu-sound:not(.off) .fbu-slash { display: none; }
.fbu-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.fbu-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.fbu-win:empty { pointer-events: none; }
.fbu-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(12, 62, 122, .55);
  animation: fbu-in .35s ease-out;
}
@keyframes fbu-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. */
.fbu-panel > * { flex: none; }
.fbu-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.fbu-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: #fdfeff;
  box-shadow: 0 10px 0 rgba(12, 40, 80, .1);
}
.fbu-sheet .fbu-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #2b4560; }
/* Each letter's delay is set by fruit-bubbles.js. */
.fbu-word { white-space: nowrap; }
.fbu-ch { display: inline-block; animation: fbu-wave .5s ease-in-out both; }
@keyframes fbu-wave { 40% { transform: translateY(-.35em); } }
.fbu-view { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.fbu-view p { margin: 0; }
.fbu-view-title { font-weight: 800; color: #2b4560; }
.fbu-view-line { color: #2b4560; }
.fbu-view-small { font-size: .8rem; color: #8396aa; }
/* The fruit the next level adds. */
.fbu-new { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; color: #2b4560; font-weight: 700; }
.fbu-new-tile {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  animation: fbu-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .5s both;
}
.fbu-new-tile img { display: block; width: 42px; height: 42px; object-fit: contain; }
.fbu-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #4b6178; }
.fbu-ask p { margin: 0; }
.fbu-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fbu-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;
}
.fbu-mood:hover { border-color: var(--c-primary); }
.fbu-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.fbu-mood .fbu-icon { width: 22px; height: 22px; }
.fbu-ask .fbu-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.fbu-kbd {
  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);
}
.fbu-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fbu-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.fbu-choices .fbu-icon { stroke-width: 2.2; }
/* The last level's award: a green badge that pops in. */
.fbu-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: fbu-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .15s both;
}
.fbu-cap-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fbu-cap-top { fill: currentColor; }
@keyframes fbu-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. */
.fbu-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;
}
.fbu-review select, .fbu-review button { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }
.fbu-review-note { max-width: 100%; overflow-wrap: anywhere; }

/* #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.fbu-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.fbu-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 .fbu-top > * + * { margin-left: 10px; }
  #game-root .fbu-tools > * + * { margin-left: 8px; }
  #game-root .fbu-pill > * + * { margin-left: 6px; }
  #game-root .fbu > * + * { margin-top: 6px; }
  #game-root .fbu-hud > * + * { margin-left: 14px; }
  #game-root .fbu-score > * + * { margin-left: 4px; }
  #game-root .fbu-box > * + * { margin-left: 7px; }
  #game-root .fbu-opt > * + * { margin-left: 16px; }
  #game-root .fbu-panel > * + * { margin-top: 18px; }
  #game-root .fbu-sheet > * + * { margin-top: 14px; }
  #game-root .fbu-view > * + * { margin-top: 4px; }
  #game-root .fbu-new > * + * { margin-left: 10px; }
  #game-root .fbu-ask > * + * { margin-top: 10px; }
  #game-root .fbu-moods > * { margin: 5px 5px; }
  #game-root .fbu-mood > * + * { margin-left: 8px; }
  #game-root .fbu-choices > * { margin: 6px 6px; }
  #game-root .fbu-choices .btn > * + * { margin-left: 8px; }
  #game-root .fbu-badge > * + * { margin-left: 8px; }
  #game-root .fbu-review > * { margin: 4px 4px; }
}