/* Branch Birds, laid out as its stream round is: the stream's top row (the game's name, its
   button) over the round's own area, which branch-birds.js lays the tree out in. The panel's
   size is game-layout.css's (data-ideal); the stage fills it. */

.game-root[data-game="branch-birds"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: linear-gradient(160deg, #eaf5f0 0%, #e6ecfa 55%, #f1e9f8 100%);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.bb-stage { position: absolute; inset: 0; }
/* The panel must sit 4n + .25px down the page, as the stream page's does (424.25 at desktop
   widths): a scroll position is whole device pixels, so at 1.25x, 1.5x and 1.75x a panel at any
   other phase is painted up to a device pixel off and the text lands on another row. The game
   page's header is 195px tall at these widths; recheck this whenever anything above the panel
   changes (a breadcrumb, the header's lines). */
@media (min-width: 1000px) {
  .game-page:has(> #game-root[data-game="branch-birds"]) > .game-header { padding-bottom: 1.25px; }
}

/* --- the stream's row: the game's name at the left, its button at the right ------------------- */
.bb-top {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; pointer-events: none; text-align: left;
}
.bb-namerow { display: flex; align-items: baseline; gap: 10px; }
.bb-game { font-weight: 700; color: #3c4a5a; }
.bb-hint { font-size: .85rem; color: #6a7684; }
.bb-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.bb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid var(--c-border); border-radius: 999px;
  background: rgba(255, 255, 255, .7); color: var(--c-text-soft);
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.bb-pill:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-text); }
.bb-pill:disabled { opacity: .45; cursor: default; }
.bb-pill .bb-icon { width: 16px; height: 16px; }

/* --- the round's own area --------------------------------------------------------------------
   The top padding clears the row above. A vertical swipe still scrolls the page; a branch acts on
   a tap. */
.bb {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 56px 12px 10px; box-sizing: border-box; overflow: hidden;
  background: #e6f2ef; text-align: left;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.bb-canvas {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
/* Above the canvas but letting every press through to it. */
.bb-hud, .bb-fit, .bb-cap { position: relative; pointer-events: none; }
.bb > .bb-hud, .bb > .bb-cap { flex: none; }

.bb-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 560px; color: #2f4d5a;
}
.bb-name { min-width: 0; overflow: hidden; font-weight: 800; font-size: .92rem; white-space: nowrap; text-overflow: ellipsis; }
/* At the stage's two sides, halfway down; under the card's panel (z-index 5). */
.bb-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: none; color: rgba(47, 77, 90, .45); cursor: pointer;
}
.bb-prev { left: 6px; }
.bb-next { right: 6px; }
.bb-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, .7); color: #2f4d5a; }
/* Faint on the icon, not the button: an opacity on the button would fade its tip with it. */
.bb-arrow:disabled { cursor: default; }
.bb-arrow:disabled .bb-icon { opacity: .12; }
.bb-arrow[hidden] { display: none; }
/* Where a press goes, beside the arrow on hover. */
.bb-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: #2f4d5a;
  box-shadow: 0 1px 4px rgba(20, 30, 50, .18); font-size: .8rem; font-weight: 600; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.bb-prev::after { left: calc(100% + 4px); }
.bb-next::after { right: calc(100% + 4px); }
.bb-arrow:hover::after, .bb-arrow:focus-visible::after { opacity: 1; }
.bb-arrow .bb-icon { width: 28px; height: 28px; stroke-width: 2.4; }
.bb-dots { flex: none; display: flex; gap: 7px; align-items: center; }
.bb-dots i {
  display: block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--c); background: transparent; opacity: .55;
  transition: background .35s ease, opacity .35s ease, transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.bb-dots i.done { background: var(--c); opacity: 1; transform: scale(1.2); }

.bb-fit { flex: 1 1 0; min-height: 0; width: 100%; }

/* Two lines tall whatever it says, empty included: the tree is laid out in what this leaves, so a
   caption that changed height would move the tree as a note comes and goes. */
.bb-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 46px;
  color: #3f5f6b; font-size: .86rem; font-weight: 600; text-align: center;
}
/* A note said on every start of its level: in, one glow, out. 6s is NOTE_MS in branch-birds.js. */
.bb-cap.is-note { animation: bb-note 6s ease-in-out both; }
@keyframes bb-note {
  0% { opacity: 0; }
  6%, 92% { opacity: 1; }
  14%, 40% { transform: translateY(-3px); text-shadow: 0 0 10px rgba(92, 201, 141, .45); }
  52% { transform: translateY(0); text-shadow: none; }
  100% { opacity: 0; }
}
/* Moves with the hand: 5s is DEMO.cycle in branch-birds.js; the two change together. */
.bb-cap.is-on { animation: bb-say 5s ease-in-out infinite; }
@keyframes bb-say {
  0%, 8% { transform: translateY(0); text-shadow: none; }
  14%, 48% { transform: translateY(-3px); text-shadow: 0 0 10px rgba(92, 201, 141, .45); }
  60%, 100% { transform: translateY(0); text-shadow: none; }
}

/* The lesson's hand. branch-birds.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. */
.bb-hand {
  position: absolute; left: -16px; top: -3px; z-index: 2; pointer-events: none;
  width: 46px; aspect-ratio: 32 / 34; transform-origin: 34.4% 5.9%; opacity: 0;
}
.bb-hand[hidden] { display: none; }
.bb-hand svg { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.bb-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; transition: transform .25s ease-out, opacity .25s ease-out;
}
.bb-hand.is-down::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* Restart and Undo, side by side in the middle under the caption, level with the speaker. */
.bb-ctrl { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 38px; }
/* The pills' words and icon, in the round buttons' white and shadow. */
.bb-ctrl .bb-pill {
  height: 38px; padding: 0 16px; box-sizing: border-box; border: 0;
  background: rgba(255, 255, 255, .78); color: #2f4d5a;
  box-shadow: 0 1px 4px rgba(20, 30, 50, .18);
}
.bb-ctrl .bb-pill:hover:not(:disabled) { background: #fff; color: #2f4d5a; }
.bb-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .62); color: #2f4d5a; cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 30, 50, .18);
}
.bb-round:hover { background: #fff; }
.bb-round .bb-icon, .bb-round .bb-sicon { width: 22px; height: 22px; }

/* 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. */
.bb-audio { position: absolute; right: 12px; bottom: 10px; z-index: 3; display: flex; align-items: center; }
.bb-more {
  display: grid; place-items: center; width: 0; height: 38px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(47, 77, 90, .6); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.bb-audio:hover .bb-more, .bb-audio:focus-within .bb-more, .bb-audio.is-open .bb-more { width: 30px; opacity: 1; }
@media (hover: none) { .bb-more { width: 30px; opacity: .6; } }
.bb-more .bb-sicon { width: 22px; height: 22px; }
.bb-ellipsis { stroke-width: 3.4; }
.bb-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(47, 77, 90, .18); border-radius: 12px; background: rgba(250, 253, 252, .97);
  box-shadow: 0 6px 20px rgba(20, 40, 50, .18);
}
.bb-menu[hidden] { display: none; }
.bb-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: #2f4d5a; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.bb-opt:hover, .bb-opt:focus-visible { background: rgba(47, 77, 90, .07); }
.bb-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(47, 77, 90, .22); transition: background .15s ease; }
.bb-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.bb-opt[aria-checked="true"] .bb-sw { background: #5cc98d; }
.bb-opt[aria-checked="true"] .bb-sw::after { transform: translateX(14px); }
.bb-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bb-cone { fill: currentColor; stroke: none; }
.bb-sound.off .bb-waves { display: none; }
.bb-sound:not(.off) .bb-slash { display: none; }
.bb-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel blurs it, and a sheet in its middle holds the card ------------- */
.bb-win { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.bb-panel {
  position: absolute; inset: 0; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 20px; text-align: center; overflow-y: auto;
  background: rgba(236, 242, 239, .58);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  animation: bb-in .35s ease-out;
}
@keyframes bb-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. */
.bb-panel > * { flex: none; }
.bb-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.bb-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: 1px solid rgba(255, 255, 255, .55); border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(232, 242, 236, .46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 32px rgba(15, 30, 20, .22);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.bb-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #2f3b4a; }
/* Each letter's delay is set by branch-birds.js. */
.bb-word { white-space: nowrap; }
.bb-ch { display: inline-block; animation: bb-wave .5s ease-in-out both; }
@keyframes bb-wave { 40% { transform: translateY(-.35em); } }
.bb-view { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bb-view p { margin: 0; }
.bb-view-title { font-weight: 800; color: #2f4d5a; }
.bb-view-line { color: #2f4d5a; }
.bb-view-small { font-size: .8rem; color: #8a96a3; }
.bb-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #4a5766; }
.bb-ask p { margin: 0; }
.bb-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bb-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;
}
.bb-mood:hover { border-color: var(--c-primary); }
.bb-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.bb-mood .bb-icon { width: 22px; height: 22px; }
.bb-ask .bb-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.bb-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);
}
.bb-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bb-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.bb-choices .bb-icon { stroke-width: 2.2; }
/* The last level's award: a green badge that pops in, with one shine across it. */
.bb-badge {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 18px 7px 13px; border-radius: 999px;
  background: linear-gradient(180deg, #ecf9f1, #d5f0df); border: 1.5px solid #8fd3a9;
  box-shadow: 0 4px 12px rgba(46, 140, 87, .18);
  color: #237a4a; font-size: 1.12rem; font-weight: 800;
  animation: bb-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .15s both;
}
.bb-badge::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: skewX(-18deg); animation: bb-badge-shine .9s ease-in-out .8s both;
}
.bb-cap-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bb-cap-top { fill: currentColor; }
@keyframes bb-badge-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes bb-badge-shine { from { left: -40%; } to { left: 120%; } }

.bb-error { margin: 12px; color: #4a5766; }

/* The review build's tools, under the game panel and outside it. */
.bb-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;
}
.bb-review select, .bb-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.bb-fs {
  position: fixed; inset: 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.bb-locked { overflow: hidden; }