/* Your formula at the top, beside the goal (trial, 2026-11-12; owner: "I wonder if showing math at the top with the goal
   will make it easier for the player to control the character and also keep track of their current formula (e.g.
   fingers block the formula now)"). The same bar, moved: the ball, then what you have built so far, read as one unit
   near where the tiles appear; nothing under the thumbs but a small round clear button in the bottom-left corner.
   The switch is the class on the HUD root: <div id="app" class="hud-formula-top"> (index.html). Without it the HUD
   is exactly as before (bar at the bottom with its own small ✕; #clearBtn hidden). Loaded after game.css / play.css.

   The goal box (#goalWrap) lets its label, ball and gauge sit in the HUD grid themselves (display: contents), so the
   bar can line up with the ball.
   - Phones in portrait (narrow; 2026-11-12 play test, src/run/hud/hud-place.js sets the classes): the goal and your
     formula are one unit, nothing between them. The formula sits right beside the ball when it fits there, left of
     the mini-map (.fx-side), else right under the ball. The gauge and "? Example" sit on the ball's line right of it,
     or under the mini-map (.fx-gauge-aside / .fx-pill-aside: always when the formula is beside the ball). The pill
     never shows a cut word (only its "?" then). --fx-push moves a long formula under the ball down past whatever
     sits under the mini-map (usually 0).
   - Landscape, tablets and desktops (wide): the bar sits on the ball's line, right of it; the gauge goes under the
     ball and "? Example" under the bar. */

#app.hud-formula-top{--fx-top:calc(max(8px, env(safe-area-inset-top, 0px)) + 56px + 84px + 6px); --fx-right:max(12px, env(safe-area-inset-right, 0px)); --fx-gw:72px;
  grid-template-columns:auto auto minmax(0, 1fr); grid-template-rows:auto auto auto auto minmax(0, 1fr);
  grid-template-areas:"hud hud hud" "lab . ." "ball gauge rule" "expr expr expr" ". . ."}
#app.hud-formula-top .goalwrap{display:contents}
#app.hud-formula-top .goallab{grid-area:lab; justify-self:center; align-self:end}
#app.hud-formula-top #goal{grid-area:ball; justify-self:center; align-self:center}
#app.hud-formula-top #speedo{grid-area:gauge; justify-self:start; align-self:center}
#app.hud-formula-top .rulebar{grid-area:rule; justify-self:start; align-self:center; max-width:calc(100% - 84px - 6px)}
#app.hud-formula-top .exprwrap{grid-area:expr; justify-self:start; align-self:start; align-items:flex-start; margin-top:var(--fx-push, 0px)}
#app.hud-formula-top.fx-side{grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto auto minmax(0, 1fr);
  grid-template-areas:"hud hud" "lab ." "ball expr" ". ."}
#app.hud-formula-top.fx-side .exprwrap{align-self:center; margin-top:0; max-width:none; width:max-content}
#app.hud-formula-top.fx-side .exprbar{max-width:none}   /* (its own width, so hud-place.js sees when it no longer fits) */
/* a pie or wedge badge on the ball's rim: the gauge beside the ball leaves it room */
#app.hud-formula-top.fx-badge:not(.fx-gauge-aside) #speedo, #app.hud-formula-top.fx-side.fx-badge .exprwrap{margin-left:var(--fx-badge, 16px)}
/* Under the mini-map: the gauge at the right edge, the pill (its "?" only) left of it, or at the edge on its own */
#app.hud-formula-top.fx-gauge-aside #speedo{position:fixed; top:var(--fx-top); right:var(--fx-right)}
#app.hud-formula-top.fx-pill-aside .rulebar{position:fixed; top:calc(var(--fx-top) + 3px); right:var(--fx-right); max-width:none;
  min-width:44px; justify-content:center; padding:3px 0}
#app.hud-formula-top.fx-pill-aside .rulebar .rt{display:none}
#app.hud-formula-top.fx-gauge-aside.fx-pill-aside .rulebar{right:calc(var(--fx-right) + var(--fx-gw) + 6px)}
#app.hud-formula-top .exprbar{transition:opacity .3s}
#app.hud-formula-top .exprbar.waiting{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s, visibility 0s .3s}   /* game.js: an answer run's empty bar */
@media (prefers-reduced-motion: reduce){ #app.hud-formula-top .exprbar, #app.hud-formula-top .exprbar.waiting{transition:none} }
html.calm #app.hud-formula-top .exprbar, html.calm #app.hud-formula-top .exprbar.waiting{transition:none}
#app.hud-formula-top .exprbar .clr{display:none}   /* (the bar itself still clears on a tap, and Backspace) */
/* Equation tiles' captions go under the slot (above it would run into the goal row) */
#app.hud-formula-top .slot .cap{bottom:auto; top:calc(100% + 3px)}

@media (min-aspect-ratio: 5/4), (min-width: 600px){
  #app.hud-formula-top{grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto auto auto minmax(0, 1fr);
    grid-template-areas:"hud hud" "lab ." "ball expr" "gauge rule" ". ."}
  #app.hud-formula-top #speedo{justify-self:center; align-self:start}
  #app.hud-formula-top .exprwrap{align-self:center; margin-top:0}
  #app.hud-formula-top .rulebar{align-self:start; max-width:100%}
  /* a pie or wedge badge on the ball's rim hangs below it: the gauge leaves it room (play test, saturn-frac 0642) */
  #app.hud-formula-top.fx-badge #speedo{margin-top:8px; margin-left:0}
}

/* Short screens hide the MAKE label (game.css): no label row, so no empty gap above the ball. */
@media (max-height:700px){
  #app.hud-formula-top{--fx-gw:60px; grid-template-rows:auto auto auto minmax(0, 1fr); grid-template-areas:"hud hud hud" "ball gauge rule" "expr expr expr" ". . ."}
  #app.hud-formula-top.fx-side{grid-template-rows:auto auto minmax(0, 1fr); grid-template-areas:"hud hud" "ball expr" ". ."}
}
@media (max-height:700px) and (min-aspect-ratio: 5/4), (max-height:700px) and (min-width: 600px){
  #app.hud-formula-top{grid-template-rows:auto auto auto minmax(0, 1fr); grid-template-areas:"hud hud" "ball expr" "gauge rule" ". ."}
}
/* Landscape phones: the bar keeps to the top of the ball's line and is a little slimmer (same tiles), so the far end of
   the road stays clear below it. */
@media (min-aspect-ratio: 5/4) and (max-height:500px){
  #app.hud-formula-top .exprwrap{align-self:start}
  #app.hud-formula-top .exprbar{padding-top:3px; padding-bottom:3px}
}
@media (min-aspect-ratio: 5/4) and (max-height:400px){
  #app.hud-formula-top{row-gap:2px}
  #app.hud-formula-top .exprbar{padding-top:1px; padding-bottom:1px}
}

/* The clear button: a round ✕ in the bottom-left corner, where a resting thumb reaches it and steering does not (the
   mini-map has the bottom-right corner in landscape). Shown only while the formula has something in it. */
.clrbtn{display:none}
#app.hud-formula-top .clrbtn{position:fixed; display:grid; place-items:center; width:48px; height:48px; padding:0; border-radius:50%; box-sizing:border-box;
  left:max(12px, env(safe-area-inset-left, 0px)); bottom:max(12px, env(safe-area-inset-bottom, 0px));
  border:2px solid var(--panel-line); background:var(--panel); color:var(--muted); font:800 18px/1 var(--font-body); box-shadow:0 3px 0 var(--tile-edge);
  touch-action:manipulation; visibility:hidden; opacity:0; transition:opacity .2s, visibility 0s .2s}
#app.hud-formula-top .clrbtn.on{visibility:visible; opacity:1; transition:opacity .2s}
#app.hud-formula-top .clrbtn:not(.on){pointer-events:none!important}
#app.hud-formula-top .clrbtn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--tile-edge)}
#app.hud-formula-top .clrbtn:focus-visible{outline:3px solid var(--you); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ #app.hud-formula-top .clrbtn, #app.hud-formula-top .clrbtn.on{transition:none} }
html.calm #app.hud-formula-top .clrbtn, html.calm #app.hud-formula-top .clrbtn.on{transition:none}
/* A dead-end formula (hud/clear-nudge.js): after a few seconds the ✕ calmly draws attention to itself, a slow soft
   pulse of a ring round it (1.6 s, small scale and opacity change, never a flash); Calm / reduced motion: a steady ring */
#app.hud-formula-top .clrbtn.on.nudge::after{content:''; position:absolute; inset:-6px; border-radius:50%; border:3px solid var(--you);
  pointer-events:none; opacity:.3; animation:clr-nudge 1.6s ease-in-out infinite}
@keyframes clr-nudge{0%, 100%{opacity:.25; transform:scale(.97)} 50%{opacity:.7; transform:scale(1.07)}}
@media (prefers-reduced-motion: reduce){ #app.hud-formula-top .clrbtn.on.nudge::after{animation:none; opacity:.6; transform:none} }
html.calm #app.hud-formula-top .clrbtn.on.nudge::after{animation:none; opacity:.6; transform:none}

/* Chips and flip-tags that sit above a bottom bar sit beside a top one when there is room, else under it
   (hud-text.js placeChip adds .side / .below; topics-ui.js flip-tags .below) */
.pl-chip.below{transform:translate(-50%, 0); animation-name:pl-chip-b}
.wr-chip.below{transform:translate(-50%, 0); animation-name:wr-chip-b}
.pl-chip.side{transform:translate(0, -50%); animation-name:pl-chip-s}
.wr-chip.side{transform:translate(0, -50%); animation-name:wr-chip-s}
@keyframes pl-chip-s{0%{opacity:0; transform:translate(-12px, -50%) scale(.8)}12%{opacity:1; transform:translate(0, -50%) scale(1)}80%{opacity:1}100%{opacity:0; transform:translate(8px, -50%)}}
@keyframes wr-chip-s{0%{opacity:0; transform:translate(-12px, -50%) scale(.8)}12%{opacity:1; transform:translate(0, -50%) scale(1)}80%{opacity:1}100%{opacity:0; transform:translate(8px, -50%)}}
@keyframes pl-chip-b{0%{opacity:0; transform:translate(-50%, -30%) scale(.8)}12%{opacity:1; transform:translate(-50%, 0) scale(1)}80%{opacity:1}100%{opacity:0; transform:translate(-50%, 12%)}}
@keyframes wr-chip-b{0%{opacity:0; transform:translate(-50%, -20%) scale(.8)}12%{opacity:1; transform:translate(-50%, 0) scale(1)}80%{opacity:1}100%{opacity:0; transform:translate(-50%, 15%)}}
.fliptag.below{transform-origin:50% 0; transform:translate(-50%, 0) perspective(240px) rotateX(-90deg)}
.fliptag.below.on{transform:translate(-50%, 12%) perspective(240px) rotateX(0)}
@media (prefers-reduced-motion: reduce){ .fliptag.below, .fliptag.below.on{transition:opacity .2s; transform:translate(-50%, 12%)} }
html.calm .fliptag.below, html.calm .fliptag.below.on{transition:opacity .2s; transform:translate(-50%, 12%)}

/* The corner HUD (2026-11-13, owner after playing: "Formula bar obscures the view. Should be higher up and more to the
   right corner - move or remove other overlays"). The switch: the class hud-corner on #app (index.html, default on);
   without it the HUD is the layout above (goal and formula at the left, gauge, "?" pill and mini-map at the right).
   - The goal and your formula sit in the TOP-RIGHT corner right under the top bar, read left to right: the ball, then
     the formula beside it when it fits (.fx-side), else on the next line under the ball, right-aligned. The formula
     keeps its tile size. hud-place.js decides once per goal and holds the formula's room for the goal (--fx-hold), so
     the ball does not shift as the live "= 7" or the room to grow come and go.
   - The "?" (worked example) is a small round button at the top left under the top bar, never a pill with words.
   - No mini-map (the place and the progress bar in the top bar show the same), no MAKE label, no separate speed
     gauge: your speed is a thin ring round the ball, filling clockwise as you go faster (game.js sets --spd, 0..1).
   - The round ✕ stays at the bottom left; a tap on the formula still clears it. */
@property --spd{syntax:'<number>'; inherits:true; initial-value:0}
#app.hud-formula-top.hud-corner{grid-template-columns:auto minmax(0, 1fr) auto auto; grid-template-rows:auto auto auto minmax(0, 1fr);
  grid-template-areas:"hud hud hud hud" "rule . . ball" "expr expr expr expr" ". . . ."}
#app.hud-formula-top.hud-corner.fx-side{grid-template-rows:auto auto minmax(0, 1fr); grid-template-areas:"hud hud hud hud" "rule . ball expr" ". . . ."}
#app.hud-corner .goallab, #app.hud-corner #speedo, #app.hud-corner #minimap{display:none}
#app.hud-formula-top.hud-corner #goal{grid-area:ball; justify-self:end; align-self:start; margin:6px 6px 0 0}
#app.hud-formula-top.hud-corner.fx-side #goal{margin-right:0; align-self:center}
#app.hud-formula-top.hud-corner.fx-badge:not(.fx-side) #goal{margin-right:max(5px, var(--fx-badge, 16px)); margin-bottom:6px}
#app.hud-formula-top.hud-corner .exprwrap{grid-area:expr; justify-self:end; align-self:start; align-items:flex-start; margin:0; max-width:100%; width:auto; min-width:min(100%, var(--fx-hold, 0px))}
#app.hud-formula-top.hud-corner.fx-side .exprwrap{align-self:center; margin-left:6px; margin-right:var(--fx-shift, 0px)}
#app.hud-formula-top.hud-corner.fx-side.fx-badge .exprwrap{margin-left:var(--fx-badge, 16px)}
#app.hud-formula-top.hud-corner .rulebar{grid-area:rule; position:static; justify-self:start; align-self:start; width:44px; min-width:44px; height:44px; max-width:none;
  padding:0; justify-content:center; border-radius:50%; gap:0}
#app.hud-formula-top.hud-corner .rulebar .rt{display:none}
#app.hud-formula-top.hud-corner .rulebar .rq{width:26px; height:26px; font-size:16px}
/* Landscape phones: the formula keeps to the top of the ball's line (slimmer than the ball), so where it crosses the
   middle of the screen it ends above the far end of the road; the ring's margin is trimmed */
@media (min-aspect-ratio: 5/4) and (max-height:500px){
  #app.hud-formula-top.hud-corner #goal{margin-top:3px}
  #app.hud-formula-top.hud-corner.fx-side .exprwrap{align-self:start; margin-top:3px}
}
/* the speed ring: 4 px, just outside the ball's rim (a formula ball: round its pill), your colour on a panel-coloured
   track; the arc eases (never snaps) */
#app.hud-corner #goal::before{content:''; position:absolute; inset:-7px; border-radius:inherit; padding:4px; box-sizing:border-box; pointer-events:none;
  background:conic-gradient(var(--you) calc(var(--spd) * 1turn), color-mix(in srgb, var(--panel) 85%, transparent) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition:--spd .5s ease-out}