/* Scorbunny Breakaway — shared by play.html and display.html. See flappy-stage.js. */

.ba-head{ display:flex; align-items:baseline; justify-content:space-between; margin:0 auto 8px; width:min(100%,420px); }
.ba-kicker{ font-family:"Russo One",sans-serif; font-size:15px; letter-spacing:2px; color:#ffe07a; }
.ba-tier{ font-family:"Russo One",sans-serif; font-size:13px; letter-spacing:2px; color:#8c93a8; }

/* The stage keeps the sim's own 420x746 shape, because the sim's coordinates ARE the picture.
   Anything else would letterbox the course or, worse, crop a pipe the player is being scored on. */
/* Sized by HEIGHT, not width. The course is 420x746 — taller than it is wide — so sizing it the way
   a square stage is sized (a width, with the height following) runs the ground off the bottom of the
   phone, and the ground is the thing that kills you. Height first, width follows from the aspect. */
.ba-stage{ position:relative; height:min(72svh, 660px); aspect-ratio:420/746; width:auto; margin:0 auto;
  border-radius:18px; overflow:hidden; background:#8fd3f4; box-shadow:0 10px 30px rgba(0,0,0,.35);
  touch-action:manipulation; }
.ba-canvas{ display:block; width:100%; height:100%; transition:filter .25s ease; }
/* Down, not gone: the last frame stays on screen so a player can see what killed them. */
.ba-canvas.ba-down{ filter:grayscale(.75) brightness(.72); }

/* The distance reads as the score, so it sits where a score sits and stays legible over sky and
   over a Wobbuffet alike — hence the shadow rather than a panel, which would cover the course. */
.ba-dist{ position:absolute; top:10px; left:0; right:0; text-align:center; pointer-events:none;
  font-family:"Russo One",sans-serif; color:#fff; text-shadow:0 3px 10px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.6); }
.ba-dist b{ font-size:34px; font-weight:400; }
.ba-dist i{ font-size:16px; font-style:normal; margin-left:3px; opacity:.85; }

.ba-start{ position:absolute; inset:auto 0 38% 0; text-align:center; pointer-events:none;
  font-family:"Russo One",sans-serif; font-size:20px; letter-spacing:3px; color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,.45); animation:baPulse 1.1s ease-in-out infinite; }
.ba-start.gone{ display:none; }
@keyframes baPulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

.ba-hint{ text-align:center; font-size:13px; font-weight:700; color:#8c93a8; margin:10px auto 0; min-height:18px; }

/* ---- IMMERSIVE: set while she is in the air (flappy-stage.js), phones only ------------------
   The stage is normally 72svh so the page's own furniture has room. In flight none of that
   furniture is wanted: the top bar is tappable chrome sitting across the top of a game played by
   tapping, and the kicker and hint have already said what they have to say. Hiding them buys the
   course the rest of the screen, and everything returns the instant she is down — which is when a
   player actually wants Standings.
   The height is bounded by WIDTH as well: the course is 420x746, so at a tall phone's full height
   the aspect-locked width would run off the sides. min() takes whichever limit bites first. */
body.ba-flying .ba-head,
body.ba-flying .ba-hint { display:none; }
/* THE TOP BAR COLLAPSES, IT DOES NOT DISAPPEAR. display:none on .top takes the whole subtree with
   it — including the sound pill, which is the one piece of chrome a player may genuinely need
   mid-round: it is both the indicator that audio is not coming out and the control that fixes it.
   Hiding it meant a phone whose context had been suspended went quiet with nothing on screen to say
   so and nothing to tap. So collapse the bar to nothing and hide its contents individually, leaving
   the pill — which is position:fixed anyway, so it needs no layout of its own.
   The pill carries its own .hide class from syncSoundPill, so it is only ever on screen when audio
   really is off or paused. When sound is working, this shows nothing. */
body.ba-flying .top { height:0; min-height:0; margin:0; padding:0; border:0; background:none;
                      overflow:visible; pointer-events:none; position:fixed; top:0; left:0; right:0; }
body.ba-flying .top > *:not(.top-r) { display:none; }
body.ba-flying .top-r > *:not(.sndpill) { display:none; }
body.ba-flying .sndpill { pointer-events:auto; z-index:7;
  top:calc(env(safe-area-inset-top, 0px) + 8px); right:12px; }
/* max-width is the belt to 100vw's braces. body carries 16px of side padding, so a course sized to
   100vw is 32px wider than the box it sits in and the page side-scrolls — which it did, at every
   width the smoke test checks. max-width:100% cannot exceed the container whatever the padding is,
   and aspect-ratio pulls the height down to match, so the course still fills what it honestly can. */
body.ba-flying .ba-stage { height:min(100svh, calc(100vw * 746 / 420)); max-width:100%; }
/* The round clock normally sits UNDER the stage; with the stage taking the full height there is no
   under. Float it over the top of the course instead — while sitting out a round after a crash,
   it is the one number the player is waiting on. */
/* The stream footer is chrome like the top bar — gone for the duration of the flight, both because
   it is noise over a game and because it sits exactly where the clock wants to be. */
body.ba-flying .screenlink { display:none; }

/* THE CLOCK, ANCHORED INSIDE THE COURSE. flappy-stage.js moves the pill into .ba-stage (adoptClock),
   the one box guaranteed to be on screen — its height is min(100svh, 100vw*746/420) exactly so it
   fits. #stage, where play.html creates it, is content-sized, so its bottom edge can fall below the
   fold on a phone with browser chrome or a home-indicator inset, and the clock went with it. It was
   also 17px, which is not a size you read at arm's length mid-game.
   The grass is the bottom ~15% of the course and she never flies through it, so the clock sits there
   without covering anything that matters. */
.ba-stage > .rclock {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px); top:auto; margin:0; z-index:6;
  font-size:clamp(30px, 9vw, 46px); font-weight:900; letter-spacing:1px;
  padding:4px 24px; border-radius:999px;
  background:rgba(8,11,20,.62); border:2px solid rgba(255,255,255,.28); color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.65); backdrop-filter:blur(3px);
}
.ba-stage > .rclock.low { color:#ff8f8f; border-color:rgba(255,90,90,.75); background:rgba(60,8,12,.66); }

/* The metre unit beside the big number on the result card, so "24.6m" reads as a distance without
   the m competing with the figure for weight. */
.ba-unit{ font-size:.42em; font-weight:800; margin-left:.12em; opacity:.75; }

/* THE STAGE MUST NOT MOVE WHILE SHE IS IN THE AIR. body.sndpill-up reserves 52px at the top of the
   stage for the floating "Sound off" pill, and syncSoundPill toggles that class every second from
   whether audio is actually running. At the start of a round audio is usually NOT running yet — the
   context resumes on the first tap — so the reservation was in place as the course appeared and then
   released a second later, dropping the whole course 20px mid-flight. The pill lives inside .top,
   which is hidden in flight anyway, so there is nothing to reserve for; this pins the padding to the
   value it has with no pill. Specificity beats body.sndpill-up .stage without depending on load order. */
body.ba-flying.sndpill-up .stage { padding-top: 12px; }

/* ===== Tutorial mini (the playable card): the real course, scaled to the card's tall box ===== */
.bad{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-user-select:none; user-select:none; touch-action:none; }
.bad-canvas{ height:100%; width:auto; aspect-ratio:420/746; display:block; border-radius:3cqw; }
.bad-dist{ position:absolute; top:3%; left:50%; transform:translateX(-50%); font-family:"Russo One",sans-serif;
  font-size:8cqw; color:#fff; text-shadow:0 .4cqw .8cqw rgba(0,0,0,.45); pointer-events:none; }
.bad-dist i{ font-style:normal; font-size:.55em; margin-left:.15em; opacity:.85; }
.bad-cap{ position:absolute; left:50%; bottom:13%; transform:translateX(-50%); width:max-content; max-width:52cqw; text-align:center;
  font-family:"Russo One",sans-serif; font-size:4.2cqw; line-height:1.25; letter-spacing:.2cqw; color:#fff; padding:1.2cqw 2.6cqw;
  border-radius:99px; background:rgba(0,0,0,.45); pointer-events:none; }
.bad-cap.down{ font-family:inherit; font-weight:800; letter-spacing:0; background:rgba(214,58,58,.75); border-radius:3cqw; }
.bad-cap.gone{ display:none; }