/* Toy HUD (P11 Balloon Race), shared by shell.html and drive.html (toyhud.js).
   Toy-game theme, not Ink & Print (owner override, DECISIONS 2026-10-01).
   System fonts only: the macOS faces by local(), then a chunky fallback. */
@font-face{font-family:"Toy Numerals";src:local("Futura-CondensedExtraBold"),local("Futura Condensed ExtraBold");}
@font-face{font-family:"Toy Timing";src:local("DINCondensed-Bold"),local("DIN Condensed Bold");}
@font-face{font-family:"Toy Round";src:local("ArialRoundedMTBold"),local("Arial Rounded MT Bold");}
@font-face{font-family:"Toy Talk";src:local("AvenirNextCondensed-Heavy"),local("Avenir Next Condensed Heavy");}
:root{--toy-num:"Toy Numerals","Arial Black",Impact,sans-serif;--toy-time:"Toy Timing","Arial Narrow",sans-serif;
  --toy-round:"Toy Round","Arial Rounded MT Bold","Arial Black",sans-serif;--toy-talk:"Toy Talk","Arial Black",sans-serif;
  --toy-cream:#fffaf0;--toy-ink:#1c1712;--toy-red:#e23b2e;--toy-hot:#ff7a3d;--toy-gold:#ffcf3f;--toy-blue:#2f6bff;--toy-green:#2fbf5b}
.toy{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5;--k:1}
.toy>*{position:absolute;left:0;top:0}
.toy-strings{width:100%;height:100%;overflow:visible}
.toy-strings .str{fill:none;stroke:rgba(255,250,235,.92);stroke-width:2.2;stroke-linecap:round}
.toy-strings .str-sh{fill:none;stroke:rgba(0,0,0,.32);stroke-width:4;stroke-linecap:round}
/* A balloon: the outer box sits on the balloon's centre and scales from it. */
.tb{transform-origin:0 0;will-change:transform}
.tb-sway{position:absolute;left:0;top:0;transform-origin:0 61px;animation:tb-bob 2.6s ease-in-out infinite alternate}
.tb-in{position:absolute;left:0;top:0;transform-origin:0 0}
.tb-in svg{position:absolute;left:-50px;top:-72px;overflow:visible;filter:drop-shadow(0 6px 5px rgba(0,0,0,.28))}
.tb .num{font:58px var(--toy-round);paint-order:stroke;stroke:rgba(0,0,0,.22);stroke-width:1.5}
.tb .sub{font:15px var(--toy-time);letter-spacing:1px;opacity:.92}
.tb .stk{position:absolute;white-space:nowrap;border-radius:6px;font:21px/1 var(--toy-time);letter-spacing:.04em;padding:5px 7px 2px;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.tb .stk.pen{left:34px;top:22px;transform:rotate(12deg);background:var(--toy-gold);color:#2a1a00;border:2.5px solid #7a5200}
.tb .stk.pit{left:-44px;top:4px;transform:rotate(-8deg);font-size:30px;padding:7px 10px 3px;background:var(--toy-blue);color:#fff;border:3px solid #fff;animation:tb-jig .45s ease-in-out infinite alternate}
.tb.inpit .tb-in svg{filter:saturate(.55) drop-shadow(0 6px 5px rgba(0,0,0,.28))}
.tb.edge .tb-sway{animation-duration:1.6s}
.tb-in.inflate{animation:tb-inflate .75s cubic-bezier(.3,1.9,.5,1) both}
@keyframes tb-bob{from{transform:translateY(-3px) rotate(-3deg)}to{transform:translateY(3px) rotate(3deg)}}
@keyframes tb-inflate{0%{transform:scale(.15)}100%{transform:scale(1)}}
@keyframes tb-jig{to{transform:rotate(6deg)}}
/* The pop: confetti shards and an up/down arrow. */
.tb-pop{position:absolute;width:0;height:0;z-index:40}
.tb-pop i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:2px;animation:tb-shard .7s cubic-bezier(.1,.7,.3,1) both}
@keyframes tb-shard{from{transform:translate(0,0) rotate(0) scale(calc(var(--s) * 1.4))}to{transform:translate(calc(var(--dx) * var(--s) * 1.4),calc(var(--dy) * var(--s) * 1.4)) rotate(260deg) scale(.2);opacity:0}}
.tb-pop b{position:absolute;left:0;top:0;font:40px/1 var(--toy-num);transform:translate(-50%,-50%);paint-order:stroke;-webkit-text-stroke:2px var(--toy-ink);animation:tb-arrow 1.05s ease-out both}
.tb-pop b.up{color:var(--toy-green)}.tb-pop b.dn{color:var(--toy-red)}
@keyframes tb-arrow{0%{transform:translate(-50%,-50%) scale(.3)}25%{transform:translate(-50%,-150%) scale(1.25)}100%{transform:translate(-50%,-260%) scale(1);opacity:0}}
/* Luggage tags (gaps). */
.toy-tags{width:100%;height:100%}
.tt{position:absolute;left:0;top:0;white-space:nowrap;background:var(--toy-cream);color:var(--toy-ink);border-radius:7px;padding:5px 9px 2px;
  font:calc(14px * var(--k))/1 var(--toy-time);letter-spacing:.06em;box-shadow:0 3px 0 rgba(0,0,0,.32);z-index:35}
.tt b{font:calc(24px * var(--k))/1 var(--toy-num);letter-spacing:0;margin-right:5px;vertical-align:-2px}
.tt.hot{background:var(--toy-hot);color:#fff;animation:tt-jig .5s ease-in-out infinite alternate}
.tt.peek b{font-size:calc(22px * var(--k))}
.tt.big{font-size:calc(16px * var(--k))}.tt.big b{font-size:calc(28px * var(--k))}
.tt .cmp{display:inline-block;width:calc(15px * var(--k));height:calc(15px * var(--k));border-radius:50%;border:3px solid currentColor;vertical-align:-1px;margin:0 4px 0 2px}
.tt .cmp.s{color:var(--toy-red)}.tt .cmp.h{color:#9a9384}
@keyframes tt-jig{from{rotate:-3deg}to{rotate:3deg}}
/* Bunting. */
.toy-bunting{transform-origin:0 0;transform:scale(var(--kb,var(--k)))}
.toy-bunting svg{overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.toy-bunting text{font:16px var(--toy-num)}.toy-bunting text.big{font-size:34px}
.toy-bunting .cap{font:18px var(--toy-time);letter-spacing:2px;fill:#fff8e6;paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:3}
.toy-bunting .cap2{font:15px var(--toy-time);letter-spacing:2px;fill:#fff8e6;opacity:.85;paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:3}
.toy-bunting .pen{animation:pen-sway 1.8s ease-in-out infinite alternate}.toy-bunting .pen.cur{animation-duration:.9s}
@keyframes pen-sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
/* The comic bubble. */
.toy-bubble{max-width:calc(330px * var(--k));background:#fff;color:var(--toy-ink);border:3px solid var(--toy-ink);border-radius:18px;padding:8px 14px 9px;
  box-shadow:0 5px 0 rgba(0,0,0,.35);z-index:45}
.toy-bubble[hidden]{display:none}
.toy-bubble::after{content:"";position:absolute;top:calc(50% - 10px);width:18px;height:18px;background:#fff;border:3px solid var(--toy-ink);border-width:0 0 3px 3px}
.toy-bubble[data-side="l"]::after{left:-11px;transform:rotate(45deg)}
.toy-bubble[data-side="r"]::after{right:-11px;transform:rotate(-135deg)}
.toy-bubble[data-side="n"]::after{display:none}
.toy-bubble .kick{display:inline-block;background:var(--team);color:#fff;font:calc(13px * var(--k))/1 var(--toy-time);letter-spacing:.14em;padding:4px 7px 1px;border-radius:5px;margin-bottom:4px;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.toy-bubble .say{font:calc(22px * var(--k))/1.08 var(--toy-talk);letter-spacing:.01em}
.toy-bubble .say b{font-family:var(--toy-num);font-weight:400;font-size:1.3em;color:var(--toy-red)}
.toy-bubble.in{animation:bub-in .45s cubic-bezier(.3,1.8,.5,1) both}
@keyframes bub-in{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
@media (prefers-reduced-motion:reduce){.tb-sway,.tt.hot,.tb .stk.pit,.toy-bunting .pen,.toy-bubble.in,.tb-in.inflate{animation:none}.tb-pop{display:none}}
/* Toy controls: chunky cream pills with ink outlines (the transport and the drive cards share them). */
.toy-pill{background:rgba(28,23,18,.62);border:2px solid rgba(255,250,235,.22);border-radius:999px;color:#fff8e6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.toy-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;
  font:17px/1 var(--toy-time);letter-spacing:.08em;color:#fff;background:rgba(255,250,235,.12);white-space:nowrap}
.toy-btn[hidden]{display:none}
.toy-btn:hover{background:rgba(255,250,235,.22)}
.toy-btn:active{transform:translateY(1px)}
.toy-btn:focus-visible{outline:2px solid var(--toy-gold);outline-offset:2px}
.toy-btn.on{background:var(--toy-cream);color:var(--toy-ink)}
.toy-btn.go{background:var(--toy-red);color:#fff;min-width:42px;height:42px;font-size:18px}
.toy-btn.go:hover{background:#f04a3c}
/* The running order, folded away behind the ORDER toggle (O): a string of small balloons. */
#standings{position:fixed;right:12px;top:12px;z-index:20;display:flex;flex-direction:column;gap:3px;padding:8px 8px 6px;border-radius:20px;max-height:calc(100% - 90px);overflow:auto}
#standings[hidden]{display:none}
#standings button{all:unset;cursor:pointer;display:grid;grid-template-columns:30px 54px 64px;align-items:center;gap:6px;padding:1px 8px 1px 2px;border-radius:999px;color:#fff8e6;font:15px/1 var(--toy-time);letter-spacing:.05em}
#standings button:hover,#standings button.sel{background:rgba(255,250,235,.16)}
#standings .bl{width:28px;height:30px;border-radius:50% 50% 48% 48%;display:grid;place-items:center;font:17px/1 var(--toy-round);box-shadow:inset -4px -5px 0 rgba(0,0,0,.18),inset 4px 4px 0 rgba(255,255,255,.18)}
#standings .g{text-align:right;font-variant-numeric:tabular-nums;opacity:.9}
#standings .g.pit{color:#7fb2ff}#standings .g.out{opacity:.5}
.tt .pitcall{display:block;margin:6px -4px 0;padding:4px 6px 1px;border-radius:5px;background:rgba(28,23,18,.08);font-size:calc(17px * var(--k));letter-spacing:.06em}
.tt .pitcall.on{background:var(--toy-gold);animation:tt-jig .5s ease-in-out infinite alternate}
.tt .flag{display:inline-block;background:var(--toy-blue);color:#fff;border-radius:5px;padding:3px 6px 1px;font-size:calc(15px * var(--k));letter-spacing:.1em;vertical-align:2px}
.tt.knot::before{content:"";position:absolute;left:50%;top:-7px;width:2px;height:8px;margin-left:-1px;background:rgba(255,250,235,.92)}
.tt .gaps{display:block;margin-top:5px;font-size:calc(15px * var(--k))}.tt .gaps b{font-size:calc(19px * var(--k))}
.toy-strings .str.big{stroke:rgba(255,250,235,.5);stroke-width:2}.toy-strings .str-sh.big{stroke:rgba(0,0,0,.15)}
.toy-bubble.dock{max-width:calc(420px * var(--k))}.toy-bubble.dock .say{font-size:calc(27px * var(--k))}

/* ---- Phones (shared with the drive page): legibility and de-piling, not a restyle. ---- */
.toy-bunting{left:env(safe-area-inset-left,0px);top:env(safe-area-inset-top,0px)}
.tt.bunch{background:var(--toy-gold);color:#2a1a00}
.toy.compact .tt{white-space:normal;text-align:center;max-width:calc(100vw - 24px);width:max-content}
.toy.compact .toy-bubble{max-width:calc(100vw - 24px)}
.toy.compact .toy-bubble.dock{max-width:calc(100vw - 24px)}
.toy.compact .toy-bubble.dock .say{font-size:calc(22px * var(--k))}
.toy.compact .tb .stk.pen{font-size:22px}
@media (max-width:700px),(max-height:500px){
  .toy-pill{background:rgba(28,23,18,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
@media (pointer:coarse){
  .toy-btn{min-width:44px;height:44px}
  .toy-btn.go{min-width:44px;height:44px}
  #standings button{min-height:44px}
}