/* BOBAI BRAIN TERMINAL — the popup behind the yellow nav button. Everything is scoped under #bt so the
 * terminal cannot restyle the homepage and the homepage cannot restyle it. Generated from the preview
 * (temp/terminal/v3.html) by scratchpad scope.js; edit here after it ships. */
#bt{
  --gold:#F0B90B;--gold2:#ffd54f;--bg:#0b090a;--line:rgba(198,143,118,.16);--line2:rgba(198,143,118,.32);
  --text:#eceaf5;--muted:#a0a2c0;--dim:#6f6f86;--ok:#00e676;--bad:#ff5a36;
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,'SF Mono',monospace;
}
#bt .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:bt-blink 1.6s steps(2) infinite}
@keyframes bt-blink{50%{opacity:.25}}
#bt{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:14px}
#bt.on{display:flex}
#bt .bt-back{position:absolute;inset:0;background:rgba(3,2,3,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#bt .bt-win{position:relative;width:min(1320px,100%);height:min(840px,100%);overflow:hidden;background:var(--bg);
  border:1px solid var(--line2);border-radius:22px;box-shadow:0 40px 140px rgba(0,0,0,.8),0 0 120px rgba(240,185,11,.08)}
#bt #bt-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#bt .vign{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 40% 45%,transparent 55%,rgba(0,0,0,.65)),repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
#bt .fig{position:absolute;z-index:2;pointer-events:none;transform-origin:50% 100%;opacity:0;will-change:transform}
#bt .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1)}
#bt .fig img.on{opacity:1}
#bt .fig .rgb{position:absolute;inset:0;opacity:0;mix-blend-mode:screen}
#bt .fig.glitch .rgb.r{animation:bt-glR .4s steps(3)}
#bt .fig.glitch .rgb.b{animation:bt-glB .4s steps(3)}
@keyframes bt-glR{0%,100%{opacity:0}30%{opacity:.55;transform:translate(-7px,1px);filter:hue-rotate(150deg) saturate(3)}60%{opacity:.35;transform:translate(4px,-2px)}}
@keyframes bt-glB{0%,100%{opacity:0}30%{opacity:.5;transform:translate(7px,-1px);filter:hue-rotate(280deg) saturate(3)}60%{opacity:.3;transform:translate(-4px,2px)}}
#bt .fig .shadow{position:absolute;left:18%;right:18%;bottom:-2%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,185,11,.35),transparent);filter:blur(6px)}
/* TELL ME A JOKE (2026-09-29): a gold pill just under the shadow at his feet; the HA badge wiggles on hover, jumps on a click */
#bt .joke{position:absolute;z-index:5;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;
  border-radius:999px;border:1px solid rgba(240,185,11,.55);background:rgba(18,14,10,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#F0B90B;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  box-shadow:0 0 18px rgba(240,185,11,.16),inset 0 0 12px rgba(240,185,11,.06);transition:opacity .4s,border-color .2s,box-shadow .2s,background .2s}
#bt .joke:hover,#bt .joke:focus-visible{border-color:#F0B90B;background:rgba(40,30,8,.82);box-shadow:0 0 26px rgba(240,185,11,.35);outline:none}
#bt .joke .jk-ha{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#F0B90B,#ffd54f);
  color:#1a1206;flex:none}
#bt .joke:hover .jk-ha{animation:bt-ha .5s ease-in-out 2}
#bt .joke.hit .jk-ha{animation:bt-hahit .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes bt-ha{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@keyframes bt-hahit{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-10deg)}100%{transform:scale(1)}}
#bt .in-moment .joke,#bt .m-list .joke,#bt .m-log .joke{opacity:0;pointer-events:none}
#bt .portrait .joke{font-size:9.5px;line-height:1.25;padding:5px 11px 5px 5px;gap:7px;border-radius:18px}
#bt .portrait .joke .jk-t{white-space:normal;max-width:11ch;text-align:left}
#bt .portrait .joke .jk-ha{width:21px;height:21px}
@media (prefers-reduced-motion:reduce){#bt .joke .jk-ha{animation:none!important}}
/* THINKING OF ONE (2026-09-29): the wrong moment for a joke — a thinking face, the label dimmed, three dots that think */
#bt .joke .jk-th,#bt .joke .jk-d{display:none}
#bt .joke.wait{border-color:rgba(240,185,11,.28);color:rgba(240,185,11,.62);background:rgba(18,14,10,.6);box-shadow:none}
#bt .joke.wait .jk-ha{display:none}
#bt .joke.wait .jk-th{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;color:#1a1206;background:linear-gradient(135deg,rgba(240,185,11,.55),rgba(255,213,79,.5))}
#bt .joke.wait .jk-th svg{animation:bt-think 2.4s ease-in-out infinite}
#bt .joke.wait .jk-d{display:inline-flex;gap:3px;margin-left:-4px}
#bt .joke.wait .jk-d i{width:3px;height:3px;border-radius:50%;background:currentColor;animation:bt-dot 1.2s infinite}
#bt .joke.wait .jk-d i:nth-child(2){animation-delay:.2s}#bt .joke.wait .jk-d i:nth-child(3){animation-delay:.4s}
#bt .joke.queued{color:#F0B90B;border-color:rgba(240,185,11,.55)}
#bt .joke.ready-in{animation:bt-jkready .9s ease-out}
@keyframes bt-think{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes bt-dot{0%,100%{opacity:.2}40%{opacity:1}}
@keyframes bt-jkready{0%{box-shadow:0 0 0 rgba(240,185,11,0)}40%{box-shadow:0 0 30px rgba(240,185,11,.55)}100%{box-shadow:0 0 18px rgba(240,185,11,.16)}}
#bt .portrait .joke.wait .jk-th{width:21px;height:21px}
@media (prefers-reduced-motion:reduce){#bt .joke.wait .jk-th svg,#bt .joke.wait .jk-d i,#bt .joke.ready-in{animation:none!important}}
#bt .lab{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-50%);text-align:left;white-space:nowrap;opacity:0;transition:opacity .6s}
#bt .lab.show{opacity:1}
#bt .dest{transform:translate(var(--off,26px),-50%)}
#bt .core .cd{color:var(--gold2);margin-top:2px}
#bt .lab.hot{pointer-events:auto;cursor:pointer}
#bt .dest.hot{padding:4px 8px;margin:-4px -8px;border-radius:10px;transition:background .25s}
#bt .dest.hot:hover{background:rgba(255,255,255,.04)}
#bt .wk.hot:hover b{text-shadow:0 0 10px var(--c)}
#bt .detail{position:absolute;z-index:6;left:18px;top:108px;width:min(330px,calc(100% - 36px));padding:14px 16px 12px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--c,#F0B90B) 40%,transparent);background:linear-gradient(180deg,rgba(18,14,15,.88),rgba(10,8,9,.94));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--c,#F0B90B) 12%,transparent);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s,transform .35s}
#bt .detail.on{opacity:1;transform:none;pointer-events:auto}
#bt .detail .dh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#bt .detail .dh b{font:700 .95rem 'Space Grotesk',sans-serif;color:var(--c)}
#bt .detail .dx{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
#bt .detail .dr div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid rgba(198,143,118,.08);font:12px var(--mono)}
#bt .detail .dr span{color:var(--muted)}
#bt .detail .dr b{color:var(--text);font-weight:600;text-align:right}
#bt .detail p{margin:10px 0 8px;font:12.5px/1.5 Inter,sans-serif;color:#cfcbe0}
#bt .detail .dl{display:flex;flex-wrap:wrap;gap:6px 12px}
#bt .detail .dl a{font:600 11px var(--mono);color:var(--c);text-decoration:none;border-bottom:1px dotted currentColor}
#bt .portrait .detail{left:12px;right:12px;width:auto;top:auto;bottom:122px}
#bt .cine{position:absolute;z-index:6;left:50%;top:11%;transform:translateX(-50%);text-align:center;pointer-events:none;white-space:nowrap;opacity:0}
#bt .cine .a{font:700 clamp(10px,1vw,13px) var(--mono);letter-spacing:.42em;color:#fff;opacity:.85}
#bt .cine .b{font:700 clamp(20px,3.2vw,44px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.01em;color:var(--c);margin-top:6px;
  text-shadow:0 0 28px color-mix(in srgb,var(--c) 35%,transparent)}
#bt .cine .t{font:600 .66rem var(--mono);letter-spacing:.2em;color:var(--muted);margin-top:8px}
#bt .cine.go{animation:bt-cine var(--d,2.6s) cubic-bezier(.2,.8,.2,1) forwards}
#bt .cine.go .b{animation:bt-cineB var(--d,2.6s) cubic-bezier(.2,.8,.2,1) forwards}
@keyframes bt-cine{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes bt-cineB{0%{clip-path:inset(0 100% 0 0);transform:translateY(6px)}22%{clip-path:inset(0 0 0 0);transform:none}100%{transform:none}}
#bt .dest .n{font:700 .64rem var(--mono);letter-spacing:.14em;color:var(--c);display:flex;align-items:center;gap:8px}
#bt .dest .pc{font:700 .62rem var(--mono);padding:1px 6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);background:color-mix(in srgb,var(--c) 14%,transparent)}
#bt .dest .v{font:600 clamp(15px,1.55vw,21px) 'Space Grotesk',sans-serif;margin-top:2px;font-variant-numeric:tabular-nums;text-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
#bt .dest .s{font:500 .68rem var(--mono);color:var(--muted);margin-top:1px}
/* wide screen: each label gets the room left to the window's right edge (--mw, set in placeLabels) */
#bt .bt-win:not(.portrait) .dest{max-width:var(--mw,none);white-space:normal}
#bt .bt-win:not(.portrait) .dest .n{white-space:nowrap;width:max-content}
#bt .bt-win.tight .dest .s,#bt .bt-win.tight .core .s:not(.cd){display:none}
/* and the log box a little narrower there, so the buyback label between it and the Giggle label has room */
#bt .bt-win.tight .term:not(:hover):not(:focus-within){width:min(330px,calc(100% - 32px));height:auto;max-height:92px}
#bt .bt-win:not(.portrait) .dest .v{font-size:clamp(13px,min(1.55vw,calc(var(--mw,400px) / 11.5)),21px)}
#bt .dest.hit .v{animation:bt-pop .7s ease}
@keyframes bt-pop{30%{color:#fff}}
#bt .core{text-align:center;transform:translate(-50%,0);text-shadow:0 0 4px #000,0 0 8px #000,0 1px 2px #000} /* readable where it crosses his shoes (2026-09-28) */
/* squeezed between the log and the Giggle coin (placeLabels sets max-width): its lines wrap instead of running under the coin */
#bt .core[style*=max-width] .s{white-space:normal}
#bt .core .n{font:700 .6rem var(--mono);letter-spacing:.16em;color:var(--gold)}
#bt .core .v{font:600 15px 'Space Grotesk',sans-serif}
#bt .core .s{font:.64rem var(--mono);color:var(--muted)}
#bt .core .s span{display:block}
#bt .src{text-align:center;transform:translate(-50%,18px)}
#bt .src .n{font:700 .62rem var(--mono);letter-spacing:.14em;color:#9ae6b4}
#bt .src .s{font:.64rem var(--mono);color:var(--muted)}
#bt .wk{text-align:center;transition:opacity .4s}
#bt .wk b{display:block;font:700 .56rem var(--mono);letter-spacing:.12em;color:var(--c)}
#bt .wk i{display:block;font:normal .56rem var(--mono);color:var(--dim)}
/* with the Halloween ghosts on the bots' places the name rides above its ghost: the ghost sat on 'beat 10m ago' (26.10.) */
#bt .hw-on .wk{margin-top:-12px}
#bt .flt{position:absolute;z-index:4;pointer-events:none;font:700 13px var(--mono);color:var(--c);text-shadow:0 0 10px var(--c);transform:translate(-50%,-50%);animation:bt-flt 2.4s ease-out forwards;white-space:nowrap}
@keyframes bt-flt{0%{opacity:0;transform:translate(-50%,-20%)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-260%)}}
#bt .hud{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:14px;padding:16px 18px;pointer-events:none}
#bt .hud>*{pointer-events:auto}
#bt .ttl{font:700 1.02rem 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase}
#bt .ttl b{color:var(--gold)}
#bt .ttl small{display:block;margin-top:3px;font:500 .66rem var(--mono);letter-spacing:.04em;text-transform:none;color:var(--dim)}
#bt .live{display:inline-flex;white-space:nowrap;align-items:center;gap:6px;font:700 .66rem var(--mono);letter-spacing:.16em;color:var(--ok);padding:4px 10px;border:1px solid rgba(0,230,118,.3);border-radius:999px;background:rgba(0,0,0,.35);margin-top:2px}
#bt .live.rp{color:var(--gold2);border-color:rgba(240,185,11,.45)}
#bt .live.rp .dot{background:var(--gold);box-shadow:0 0 10px var(--gold)}
#bt .clk{margin-left:auto;font:.76rem var(--mono);color:var(--muted);margin-top:8px}
#bt .x{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:rgba(0,0,0,.4);color:var(--muted);cursor:pointer;font-size:20px;line-height:1}
#bt .shr{height:36px;padding:0 14px;border-radius:11px;border:1px solid rgba(240,185,11,.5);background:linear-gradient(180deg,rgba(240,185,11,.2),rgba(240,185,11,.06));color:var(--gold2);cursor:pointer;font:700 .66rem var(--mono);letter-spacing:.12em}
#bt .shr:hover{background:linear-gradient(180deg,rgba(240,185,11,.32),rgba(240,185,11,.1))}
#bt .shr[disabled]{opacity:.5;cursor:wait}
#bt .portrait .shr{padding:0 10px;font-size:.58rem}
#bt .x:hover{color:var(--text);border-color:var(--line2)}
#bt .rclk{position:absolute;z-index:5;left:50%;top:58px;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s}
#bt .rclk.on{opacity:1}
#bt .rclk b{display:block;font:700 clamp(16px,1.8vw,24px) 'Space Grotesk',sans-serif;letter-spacing:.14em;color:#fff;text-shadow:0 0 20px rgba(240,185,11,.45);font-variant-numeric:tabular-nums}
#bt .rclk span{display:block;margin-top:2px;font:700 .58rem var(--mono);letter-spacing:.2em;color:var(--gold)}
#bt .portrait .rclk{top:52px}
#bt .portrait .rclk b{font-size:14px}
#bt .phase{position:absolute;z-index:5;left:18px;top:64px;font:.64rem var(--mono);color:var(--dim);max-width:340px;line-height:1.5}
#bt .term{position:absolute;z-index:5;left:16px;bottom:128px;width:min(360px,calc(100% - 32px));height:auto;max-height:176px;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,11,12,.72),rgba(10,8,9,.88));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;overflow:hidden}
#bt .term .hd{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);font:600 .6rem var(--mono);letter-spacing:.14em;color:var(--dim)}
#bt .term .hd i{width:7px;height:7px;border-radius:50%;background:#3a3032}
#bt .term .hd span{margin-left:6px}
/* as tall as its lines, up to the box's height; beyond that it scrolls (the newest line is kept in view) */
#bt .term .bd{flex:0 1 auto;min-height:0;overflow-y:auto;padding:6px 10px;font:11.5px/1.55 var(--mono);display:flex;flex-direction:column;justify-content:flex-start}
#bt .ln{display:flex;gap:8px;animation:bt-lnIn .3s ease;white-space:nowrap}
#bt .ln.wrap{white-space:normal}
#bt .ln.wrap .m{overflow:visible}
#bt .cmd{display:flex;align-items:center;gap:8px;padding:7px 10px;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
#bt .cmd label{font:700 11.5px var(--mono);color:var(--ok);flex:none}
#bt .cmd input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:11.5px var(--mono);caret-color:var(--gold)}
#bt .cmd input::placeholder{color:#5d5d72}
#bt .typing .term,#bt .term:hover,#bt .term:focus-within{height:auto;max-height:min(420px,62%);width:min(560px,calc(100% - 32px));z-index:7;background:linear-gradient(180deg,rgba(14,11,12,.94),rgba(10,8,9,.97))}
#bt .typing .term .bd,#bt .term:hover .bd,#bt .term:focus-within .bd{overflow-y:auto;justify-content:flex-start}
#bt .term:hover .ln,#bt .typing .term .ln,#bt .term:focus-within .ln{white-space:normal}
#bt .term:hover .ln .m,#bt .typing .term .ln .m,#bt .term:focus-within .ln .m{overflow:visible;text-overflow:clip}
#bt .term .bd{scrollbar-width:thin;scrollbar-color:#3a302c transparent}
#bt .term{transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}
#bt .ln .t{color:var(--dim);flex:none;width:9ch;pointer-events:auto}
#bt .ln .g{color:var(--c);font-weight:700;flex:none;width:52px}
#bt .ln .m{color:#d7d3e3;overflow:hidden;text-overflow:ellipsis}
#bt .ln .m b{color:var(--c);font-weight:600}
#bt .ln a{color:var(--muted);text-decoration:none;border-bottom:1px dotted #555;margin-left:6px;pointer-events:auto}
#bt .ln a:hover{color:var(--gold2)}
#bt .cur{display:inline-block;width:6px;height:12px;background:var(--gold);vertical-align:-1px;animation:bt-blink 1s steps(2) infinite}
@keyframes bt-lnIn{from{opacity:0;transform:translateX(-6px)}}
#bt .tl{position:absolute;z-index:5;left:0;right:0;bottom:0;height:112px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(14,11,12,.82),rgba(6,5,6,.92));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex}
#bt .tl canvas{flex:1;min-width:0;height:100%;cursor:pointer}
#bt .tl button{flex:none;width:96px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--gold2);cursor:pointer;font:700 .64rem var(--mono);letter-spacing:.12em}
#bt .tl button:hover{background:rgba(240,185,11,.07)}
/* wide screen: the four spans stand in one slim column, the chosen one marked by a gold edge — the 2x2 grid with a
   full gold square was the heaviest thing on the page (2026-09-28) */
#bt .tl .tlw{flex:none;display:flex;flex-direction:column;border-left:1px solid var(--line)}
#bt .tl .tlw button{flex:1;width:54px;border:0;border-bottom:1px solid var(--line);font:700 .6rem var(--mono);letter-spacing:.1em;color:var(--dim);transition:color .2s,background .2s}
#bt .tl .tlw button:last-child{border-bottom:0}
#bt .tl .tlw button:hover{color:var(--gold2)}
#bt .tl .tlw button.on{color:var(--gold);background:rgba(240,185,11,.09);box-shadow:inset 2px 0 0 var(--gold)}
/* replay controls: pause and speed, only while a replay runs */
#bt .tl .rpc{display:none;flex:none;flex-direction:column;border-left:1px solid var(--line)}
#bt .tl.rpon .rpc{display:flex}
#bt .tl .rpc button{flex:1;width:44px;border:0;font:700 .72rem var(--mono);letter-spacing:.04em;color:var(--gold2)}
#bt .tl .rpc button:first-child{border-bottom:1px solid var(--line)}
#bt .tl .rpc button.on{color:#0b090a;background:var(--gold)}
#bt .tip{position:absolute;z-index:7;bottom:92px;transform:translateX(-50%);display:none;pointer-events:none;max-width:340px;white-space:normal;
  padding:8px 11px;border-radius:10px;border:1px solid var(--line2);background:#161213;font:11.5px/1.45 var(--mono);box-shadow:0 10px 40px rgba(0,0,0,.6)}
#bt .tip b{color:var(--c)}
#bt .intro{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font:700 clamp(20px,3.4vw,40px) 'Space Grotesk',sans-serif;letter-spacing:.28em;color:#fff;text-shadow:0 0 30px rgba(240,185,11,.8);transition:opacity .9s}
#bt .intro.out{opacity:0}
#bt .portrait .dest{transform:translate(-50%,var(--off,20px));text-align:center}
/* name above, share pill below it, on every label alike: some fit on one line and some did not, and the rows looked ragged */
#bt .portrait .dest .n{flex-direction:column;align-items:center;font-size:10px;letter-spacing:.02em;gap:3px}
/* a row of three has a third of the screen each: the label wraps inside it instead of spilling over its neighbour */
#bt .portrait .dest{width:max-content;max-width:calc((100vw - 20px) / 3);white-space:normal}
/* the figure line stays on one line: "12 adds · 0.1757 BNB" wrapped on a 360-375 px phone and ran into the next row
   (2026-09-27); its name may wrap, the row nudging in placeLabels keeps the three apart */
#bt .portrait .dest{max-width:none}
#bt .portrait .dest .v{white-space:nowrap;font-size:min(12px,3.1vw)}
#bt .portrait .dest .pc{font-size:10px;padding:0 3px}
#bt .portrait .dest .v{font-size:12px}
#bt .portrait .dest .s,#bt .portrait .wk,#bt .portrait .src .s,#bt .portrait .core .s:not(.cd){display:none}
#bt .portrait .core{transform:translate(-100%,-50%);text-align:right}
#bt .portrait .core .v{font-size:13px}
#bt .portrait .cine{top:auto;bottom:122px;width:calc(100% - 32px);padding:10px 12px;border-radius:14px;background:rgba(10,8,9,.9);border:1px solid var(--line)}
#bt .portrait .ttl{font-size:.82rem}
#bt .portrait .cine .b{font-size:20px;white-space:normal;max-width:92vw}
@media (max-width:820px){#bt{padding:0}
#bt .bt-win{width:100%;height:100%;border-radius:0;border:0}
#bt .ttl small,#bt .rclk{position:absolute;z-index:5;left:50%;top:58px;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s}
#bt .rclk.on{opacity:1}
#bt .rclk b{display:block;font:700 clamp(16px,1.8vw,24px) 'Space Grotesk',sans-serif;letter-spacing:.14em;color:#fff;text-shadow:0 0 20px rgba(240,185,11,.45);font-variant-numeric:tabular-nums}
#bt .rclk span{display:block;margin-top:2px;font:700 .58rem var(--mono);letter-spacing:.2em;color:var(--gold)}
#bt .portrait .rclk{top:52px}
#bt .portrait .rclk b{font-size:14px}
#bt .phase{display:none}
/* the subtitle never shows on a phone, and unwrapped it made the window 500 px wide (sideways scroll) */
#bt .ttl small{display:none}
#bt .term{height:auto;max-height:96px;bottom:94px}
#bt .dest{transform:translate(12px,-50%)}
#bt .dest .s{display:none}
#bt .tl button{width:66px}

}
/* calm mode (/?calm#brain): no CSS motion either */
#bt.calm .bt-open,#bt.calm .dot,#bt.calm .flt,#bt.calm .ln{animation:none}

/* the popup inherits nothing from the page: its own type, colour and box model */
#bt{font-family:Inter,system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;text-align:left;line-height:normal;letter-spacing:normal}
#bt *,#bt *::before,#bt *::after{box-sizing:border-box}
#bt button{font-family:inherit}
/* share menu: where this moment can go */
#bt .shm{position:absolute;z-index:8;top:64px;right:18px;width:min(360px,calc(100% - 36px));padding:12px;border-radius:16px;border:1px solid rgba(240,185,11,.35);
  background:linear-gradient(180deg,rgba(20,16,17,.96),rgba(10,8,9,.98));box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(240,185,11,.1);
  opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;transition:opacity .3s,transform .3s,visibility 0s .3s}
#bt .shm.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
#bt .shh{display:flex;align-items:center;margin-bottom:10px}
#bt .shh b{font:700 .9rem 'Space Grotesk',sans-serif;color:var(--gold)}
#bt .shx{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
#bt .shm img{display:block;width:100%;border-radius:10px;border:1px solid var(--line);margin-bottom:10px}
/* which moment the card tells (B8) */
#bt .shk{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:8px}
#bt .shk button{height:30px;padding:0 2px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;font:700 10px var(--mono);letter-spacing:.02em;white-space:nowrap}
#bt .shk button.on{border-color:var(--gold);color:var(--gold2);background:rgba(240,185,11,.12)}
/* the two formats of the same moment (B7) */
#bt .shf{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
#bt .shf button{height:32px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;font:600 11px var(--mono);letter-spacing:.04em}
#bt .shf button.on{border-color:var(--gold);color:#0b090a;background:var(--gold)}
#bt .shm.tall img{width:auto;max-width:100%;max-height:min(46vh,380px);margin-left:auto;margin-right:auto}
/* phone: the menu never grows past the top of the window; the 4:5 preview stays small enough for the buttons */
#bt .portrait .shm{top:auto;max-height:calc(100% - 178px - 56px);overflow-y:auto}
#bt .portrait .shm.tall img{max-height:min(24vh,200px)}
#bt .shb{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#bt .shb button{height:36px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font:600 12px var(--mono);letter-spacing:.04em}
#bt .shb button:hover{border-color:var(--gold);color:var(--gold2)}
#bt .shb button.wide{grid-column:1/-1;background:linear-gradient(180deg,rgba(240,185,11,.22),rgba(240,185,11,.08));border-color:rgba(240,185,11,.5);color:var(--gold2)}
#bt .shb button small{font-weight:400;color:var(--muted);margin-left:6px}
#bt .shb button[hidden]{display:none}
#bt .portrait .shm{top:auto;bottom:122px;left:12px;right:12px;width:auto}
/* ---- phone, reworked (2026-09-24): one-line title, icon share, timeline controls on their own row ---- */
#bt .portrait .hud{padding:12px 12px 0;gap:8px;align-items:center}
#bt .portrait .ttl{font-size:.76rem;letter-spacing:.1em;white-space:nowrap}
#bt .portrait .clk{display:none}
#bt .portrait .live{position:absolute;left:12px;top:40px;font-size:10px;padding:2px 8px;margin:0}
#bt .portrait .shr{margin-left:auto;width:36px;padding:0;font-size:0}
#bt .portrait .shr::before{content:"\2197";font-size:17px;line-height:36px}
/* the portrait look by the WINDOW, not the screen: in the new page the terminal is portrait inside a 1024 px wide
   iPad, where the phone rules (max-width:820px) do not apply, and the subtitle pushed the share button out of the
   window (2026-09-27) */
#bt .portrait .ttl small{display:none}
#bt .portrait .shr{flex-shrink:0}
#bt .portrait .rclk{top:64px}
#bt .portrait .rclk b{font-size:13px;letter-spacing:.1em}
#bt .portrait .rclk span{font-size:.5rem}
#bt .portrait .src{transform:translate(-14px,14px);text-align:left}
#bt .portrait .tl{height:128px;flex-wrap:wrap}
#bt .portrait .tl canvas{order:3;flex:0 0 100%;height:94px}
#bt .portrait .tl .tlw{display:flex;flex-direction:row;flex:1;border-left:0;border-bottom:1px solid var(--line)}
#bt .portrait .tl .tlw button{flex:1;width:auto;height:33px;border:0;border-right:1px solid var(--line);font-size:11px}
#bt .portrait .tl .tlw button.on{color:#0b090a;background:var(--gold);box-shadow:none}
#bt .portrait .tl #bt-rp{flex:0 0 auto;width:auto;padding:0 12px;height:33px;border-bottom:1px solid var(--line)}
#bt .portrait .tl .rpc{flex-direction:row;height:33px;border-bottom:1px solid var(--line)}
#bt .portrait .tl .rpc button{width:40px;height:33px;font-size:12px}
#bt .portrait .tl .rpc button:first-child{border-bottom:0;border-right:1px solid var(--line)}
#bt .portrait .term{bottom:112px}
#bt .portrait .detail,#bt .portrait .shm,#bt .portrait .cine{bottom:112px}
#bt .portrait .tip{bottom:110px}
/* ---- phone views: BRAIN · MONEY · BOTS · LOG ---- */
#bt .mtabs,#bt .mpanel{display:none}
#bt .portrait .mtabs{display:grid;grid-template-columns:repeat(4,1fr);position:absolute;z-index:6;left:0;right:0;bottom:128px;height:42px;border-top:1px solid var(--line);background:rgba(10,8,9,.92)}
#bt .portrait .mtabs button{border:0;border-right:1px solid var(--line);background:transparent;color:var(--dim);font:700 .64rem var(--mono);letter-spacing:.14em;cursor:pointer}
#bt .portrait .mtabs button:last-child{border-right:0}
#bt .portrait .mtabs button.on{color:#0b090a;background:var(--gold)}
#bt .portrait .term{display:none}
#bt .portrait.m-log .term{display:flex;left:10px;right:10px;width:auto;top:66px;bottom:178px;height:auto;max-height:none}
#bt .portrait.m-log .term .bd{flex:1}
#bt .portrait.m-log .term .bd{overflow-y:auto;justify-content:flex-start}
#bt .portrait.m-log .term .ln{white-space:normal}
#bt .portrait.m-log .term .ln .m{overflow:visible}
#bt .portrait .term .hd span{font-size:10px}
#bt .portrait .cmd{padding:2px 10px}
#bt .portrait .cmd input{height:40px;font-size:16px}
#bt .portrait.m-list .mpanel{display:flex;flex-direction:column;gap:6px;position:absolute;z-index:6;left:10px;right:10px;top:66px;bottom:178px;overflow-y:auto;padding:8px;
  border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,11,12,.9),rgba(10,8,9,.95));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#bt .mrow{display:grid;grid-template-columns:1fr;gap:2px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  background:color-mix(in srgb,var(--c) 6%,transparent);color:var(--text);cursor:pointer;font-family:inherit}
#bt .mrow .mn{display:flex;align-items:center;gap:6px;font:700 10.5px var(--mono);letter-spacing:.12em;color:var(--c)}
#bt .mrow .mn i{font-style:normal;font-size:10px;padding:0 5px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 50%,transparent)}
#bt .mrow b{font:600 17px 'Space Grotesk',sans-serif}
#bt .mrow small{font:.68rem var(--mono);color:var(--muted);line-height:1.4}
#bt .portrait .detail,#bt .portrait .shm,#bt .portrait .cine{bottom:178px}
#bt .portrait .detail{z-index:7}

#bt .bt-win:focus{outline:none}
#bt .shm.busy img{opacity:.35;transition:opacity .2s}
#bt .shm.busy .shk,#bt .shm.busy .shf{cursor:progress}
/* BOBAI speaks: a glass bubble above his head, letters typed in (the living BOBAI, 2026-09-25) */
#bt .say{position:absolute;z-index:4;max-width:min(300px,70vw);padding:10px 14px;border-radius:16px 16px 16px 4px;border:1px solid rgba(240,185,11,.35);
  background:linear-gradient(180deg,rgba(28,22,20,.92),rgba(14,11,12,.92));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#f3efe6;font:500 14px/1.4 'Space Grotesk',sans-serif;box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 24px rgba(240,185,11,.08);
  opacity:0;transform:translateY(6px) scale(.97);transition:opacity .35s,transform .35s;pointer-events:none}
#bt .say.on{opacity:1;transform:none}
#bt .say:empty{display:none}
#bt .portrait .say{font-size:13px;max-width:min(230px,62vw)}
/* the face layer: blink and talk frames snap on over the pose (no fade) */
#bt .fig img.face{opacity:0;transition:none}
#bt .fig img.face.on{opacity:1}
/* the clip layer: over the still, which stays underneath as the fallback frame */
#bt .fig canvas.vid{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:110.1852%;opacity:0;transition:opacity .25s}
#bt .fig canvas.vid.on{opacity:1}
#bt .fig.moving img[data-p]{opacity:0!important}
#bt .fig.away img[data-p]{opacity:0!important} /* before his entrance (2026-10-02): nobody there yet */
/* one figure, one flow (2026-09-26): clip and still share their first and last frame, so they swap in one frame —
   a fade let both be half-transparent for a moment and he flickered */
#bt .fig img[data-p]{transition:none}
#bt .fig canvas.vid:not(.ghost){transition:none}
/* all takes again (2026-09-28): a take that starts inside the move fades in over the standing still */
#bt .fig canvas.vid.soft:not(.ghost){transition:opacity .4s}
/* the big moments: film bars, the tier title, the bar of brains or flames (TG alert ladder) */
#bt .moment{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;--c:#F0B90B}
#bt .moment.go{opacity:1}
#bt .moment .lb{position:absolute;left:0;right:0;height:0;background:#000;transition:height .6s cubic-bezier(.2,.8,.2,1)}
#bt .moment .lb.t{top:0}#bt .moment .lb.b{bottom:0}
/* no cinema bars (2026-09-28): they covered the terminal's header — the frame stays the same in every moment */
#bt .moment .lb{display:none}
#bt .moment .mc{position:absolute;left:50%;top:9%;transform:translateX(-50%);text-align:center;width:min(92%,760px)}
#bt .moment .k{font:700 11px var(--mono);letter-spacing:.42em;color:#fff;opacity:0}
#bt .moment .h{font:800 clamp(20px,2.6vw,36px)/1.15 var(--mono);letter-spacing:.1em;color:var(--c);margin-top:6px;opacity:0;
  text-shadow:0 0 30px color-mix(in srgb,var(--c) 60%,transparent),0 0 90px color-mix(in srgb,var(--c) 35%,transparent)}
#bt .moment .s{font:600 clamp(12px,1.2vw,15px) var(--mono);letter-spacing:.06em;color:#eceaf5;margin-top:10px;opacity:0}
#bt .moment .bar{margin-top:12px;font-size:clamp(14px,1.5vw,20px);line-height:1.25;letter-spacing:1px;max-width:100%}
#bt .moment .bar span,#bt .moment .bar b{display:inline-block;opacity:0;transform:translateY(8px) scale(.6)}
#bt .moment .bar b{font:700 13px var(--mono);letter-spacing:.1em;color:var(--c)}
#bt .moment.go .k{animation:bt-mIn .5s .05s both}
#bt .moment.go .h{animation:bt-mTitle .9s .12s cubic-bezier(.2,.9,.2,1.2) both}
#bt .moment.go .s{animation:bt-mIn .6s .45s both}
#bt .moment.go .bar span,#bt .moment.go .bar b{animation:bt-mIcon .35s both}
@keyframes bt-mIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bt-mTitle{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes bt-mIcon{to{opacity:1;transform:none}}
#bt .portrait .moment .mc{top:13%}
#bt .portrait .moment .bar{font-size:13px}
/* during a moment: the replay clock and his bubble step aside, the destinations dim */
#bt .in-moment .say{opacity:0!important}
#bt .in-moment #bt-labs{opacity:.35;transition:opacity .4s}
#bt #bt-labs{transition:opacity .6s}
/* the bar sits under him, not over his head */
#bt .moment .bar{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);margin:0;white-space:nowrap;text-align:center;
  padding:8px 14px;border-radius:999px;background:rgba(8,6,7,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
#bt .portrait .moment .bar{bottom:calc(178px + 10px);font-size:12px;max-width:94%;overflow:hidden}
/* the NFT card flies in beside him */
#bt .moment .card{position:absolute;right:30%;top:30%;width:clamp(110px,12vw,170px);text-align:center;opacity:0;transform:translateY(24px) rotate(8deg) scale(.8)}
#bt .moment .card img{width:100%;border-radius:12px;border:2px solid var(--c);box-shadow:0 0 40px color-mix(in srgb,var(--c) 50%,transparent)}
#bt .moment .card b{display:block;margin-top:6px;font:700 11px var(--mono);letter-spacing:.3em;color:var(--c)}
#bt .moment.go .card{animation:bt-mCard 1s .9s cubic-bezier(.2,.9,.2,1.1) both}
@keyframes bt-mCard{to{opacity:1;transform:rotate(-4deg)}}
#bt .portrait .moment .card{right:6%;top:24%;width:92px}
/* film bars: a strong top bar, a thin bottom one that leaves the timeline readable */

/* phone: the bubble above his head, tail down */
#bt .say.top{border-radius:16px 16px 16px 16px;text-align:center}
#bt .say.top::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);
  background:rgba(14,11,12,.92);border-right:1px solid rgba(240,185,11,.35);border-bottom:1px solid rgba(240,185,11,.35)}
/* the one-time hint that everything answers */
#bt .hint{position:absolute;z-index:6;left:50%;bottom:130px;transform:translate(-50%,8px);padding:8px 14px;border-radius:999px;
  background:rgba(14,11,12,.88);border:1px solid rgba(240,185,11,.45);color:#f3efe6;font:600 12px var(--mono);letter-spacing:.04em;
  opacity:0;transition:opacity .5s,transform .5s;pointer-events:none;white-space:nowrap}
#bt .hint.on{opacity:1;transform:translate(-50%,0)}
#bt .portrait .hint{bottom:160px;font-size:11px;white-space:normal;text-align:center;max-width:86%}
/* labels that answer: a quiet dot says so */
#bt .lab.hot .n::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;background:currentColor;opacity:.55;vertical-align:middle;animation:bt-dot 2.4s ease-in-out infinite}
@keyframes bt-dot{50%{opacity:.15}}
/* the DeFi agent's range, live: its band in CAKE/BNB and where the price stands */
#bt .moment .meter{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);width:min(420px,80%);padding:10px 14px 12px;border-radius:14px;
  background:rgba(8,6,7,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);display:none}
#bt .moment.defi .meter:not([hidden]){display:block}
#bt .moment.defi .bar{display:none}
#bt .meter .mt,#bt .meter .ms{font:700 10px var(--mono);letter-spacing:.2em;color:var(--c);text-align:center}
#bt .meter .ms{margin-top:8px;color:#eceaf5;letter-spacing:.12em}
#bt .meter.out .ms{color:#fbbf24}
#bt .meter .track{position:relative;height:14px;margin-top:9px;border-radius:999px;background:rgba(255,255,255,.06)}
#bt .meter .rng{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 45%,transparent),color-mix(in srgb,var(--c) 80%,transparent),color-mix(in srgb,var(--c) 45%,transparent));
  box-shadow:0 0 18px color-mix(in srgb,var(--c) 55%,transparent)}
#bt .meter .px{position:absolute;top:-5px;width:3px;height:24px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 10px #fff}
#bt .moment.go .meter .rng{animation:bt-mRng 1.2s .5s both}
@keyframes bt-mRng{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
#bt .portrait .moment .meter{bottom:calc(178px + 10px)}
/* his line in a scene stays visible while the rest of the talk steps aside */
#bt .in-moment .say.scene.on{opacity:1!important}
/* title and end cards of the replay: centred, no bar, a slower landing */
#bt .moment.story .mc{top:34%}
#bt .moment.story .h{font-size:clamp(22px,3vw,40px)}
#bt .moment.story .s{font-size:clamp(12px,1.3vw,16px);color:#f3efe6;letter-spacing:.08em;line-height:1.6}
#bt .moment.story .bar,#bt .moment.story .card,#bt .moment.story .meter{display:none!important}
#bt .story-on .fig{opacity:.3!important;transition:opacity .6s}
#bt .fig{transition:opacity .6s}
#bt .portrait .moment.story .mc{top:30%}
/* phone: the scene's words sit on glass above the bar, below him — never over his face */
#bt .portrait .moment .mc{top:auto;bottom:calc(178px + 64px);width:calc(100% - 24px);padding:12px 14px 14px;border-radius:16px;
  background:rgba(8,6,7,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
#bt .portrait .moment .k{font-size:9.5px;letter-spacing:.28em}
#bt .portrait .moment .h{font-size:20px}
#bt .portrait .moment .s{font-size:11.5px;line-height:1.45;margin-top:8px}
#bt .portrait .moment.defi .mc{bottom:calc(178px + 96px)}
#bt .portrait .moment.story .mc{top:auto;bottom:calc(178px + 40px)}
#bt .portrait .moment.story .h{font-size:22px}
#bt .portrait .moment .card{top:18%;right:4%;width:84px}
/* speech bubbles that look like speech bubbles: cream, round, a tail to his mouth, a soft pop (2026-09-25) */
#bt .say{background:#fff7e6;color:#1d1512;border:2px solid #1d1512;border-radius:20px;padding:10px 16px 11px;
  font:600 14.5px/1.35 'Space Grotesk',sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 4px rgba(240,185,11,.18);
  backdrop-filter:none;-webkit-backdrop-filter:none;transform-origin:0% 100%;transform:scale(.6) translateY(10px);opacity:0;
  transition:opacity .25s ease,transform .45s cubic-bezier(.2,1.6,.4,1)}
#bt .say.on{opacity:1;transform:none}
#bt .say::before{content:"";position:absolute;left:-12px;bottom:10px;width:0;height:0;border-style:solid;border-width:8px 14px 8px 0;border-color:transparent #1d1512 transparent transparent}
#bt .say::after{content:"";position:absolute;left:-8px;bottom:12px;width:0;height:0;border-style:solid;border-width:6px 10px 6px 0;border-color:transparent #fff7e6 transparent transparent}
#bt .say.top{transform-origin:50% 100%;border-radius:20px;text-align:center}
#bt .say.top::before{left:50%;bottom:-14px;margin-left:-9px;border-width:14px 9px 0 9px;border-color:#1d1512 transparent transparent transparent;transform:none;background:none;width:0;height:0}
#bt .say.top::after{left:50%;bottom:-9px;margin-left:-6px;border-width:10px 6px 0 6px;border-color:#fff7e6 transparent transparent transparent;transform:none;background:none;width:0;height:0}
#bt .portrait .say{font-size:13.5px}
/* phone: while he speaks, the bubble takes the title row and points down at his head (2026-09-25) */
#bt .portrait .ttl,#bt .portrait .live{transition:opacity .25s}
#bt .portrait.talking .ttl,#bt .portrait.talking .live{opacity:0}
#bt .say.top::before{left:var(--tail,50%)}
#bt .say.top::after{left:var(--tail,50%)}
#bt .portrait .say.tight{font-size:12px;padding:8px 12px 9px}
/* ---- BOBAI's flipchart (2026-09-25): a glass board on two legs beside him; he writes each figure with a pen of
   light, then draws one chart. It replaces the sentence under the title and the bubble on top of it. ---- */
#bt .moment .s{display:none}
#bt .flip{position:absolute;z-index:6;padding:13px 16px 15px;border-radius:14px;text-align:left;
  /* glass of light, like the brain: no black slab, only a whisper of tint, a grid of dots and a glowing edge */
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 9%,transparent),transparent 70%),
    radial-gradient(circle,rgba(255,236,200,.07) .8px,transparent 1.2px) 0 0/11px 11px,rgba(10,8,9,.16);
  border:1px solid color-mix(in srgb,var(--c) 38%,transparent);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
  box-shadow:0 0 26px color-mix(in srgb,var(--c) 16%,transparent),inset 0 0 22px color-mix(in srgb,var(--c) 7%,transparent);opacity:0;transform:translateY(14px) scale(.97)}
#bt .flip[hidden]{display:none}
#bt .moment.go .flip{animation:bt-flipIn .6s .2s cubic-bezier(.2,.9,.3,1) both}
@keyframes bt-flipIn{to{opacity:1;transform:none}}
#bt .flip .fl-h{font:700 10px var(--mono);letter-spacing:.3em;color:var(--c);padding-bottom:9px;margin-bottom:4px;border-bottom:1px dashed rgba(255,255,255,.13)}
#bt .flip .fl-leg{position:absolute;bottom:-30px;width:1px;height:30px;background:linear-gradient(color-mix(in srgb,var(--c) 70%,transparent),transparent);box-shadow:0 0 6px var(--c)}
#bt .flip .fl-leg.l{left:24%;transform:rotate(9deg)}#bt .flip .fl-leg.r{right:24%;transform:rotate(-9deg)}
#bt .flip .fl-r{position:relative;padding:6px 0}
#bt .flip .fl-i{display:flex;align-items:baseline;justify-content:space-between;gap:14px;clip-path:inset(-6px 100% -6px 0)}
#bt .moment.go .flip .fl-i{animation:bt-write .55s var(--at,.6s) linear forwards}
@keyframes bt-write{to{clip-path:inset(-6px 0 -6px 0)}}
#bt .flip .fl-p{position:absolute;top:55%;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 8px #fff,0 0 18px var(--fc,var(--c))}
#bt .moment.go .flip .fl-p{animation:bt-pen .55s var(--at,.6s) linear both}
@keyframes bt-pen{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
#bt .flip .fl-r span{font:600 10px var(--mono);letter-spacing:.14em;color:var(--muted);white-space:nowrap}
#bt .flip .fl-r b{font:700 21px/1.1 'Space Grotesk',sans-serif;color:var(--fc,#f3efe6);font-variant-numeric:tabular-nums;white-space:nowrap;
  text-shadow:0 0 18px color-mix(in srgb,var(--fc,#ffffff) 30%,transparent)}
#bt .flip .fl-s{display:flex;height:10px;margin-top:12px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.06);clip-path:inset(0 100% 0 0)}
#bt .moment.go .flip .fl-s{animation:bt-write .8s var(--at,.6s) cubic-bezier(.4,0,.2,1) forwards}
#bt .flip .fl-s i{height:100%;background:var(--sc);box-shadow:inset -2px 0 0 rgba(0,0,0,.5)}
#bt .flip .fl-k{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:9px;font:600 9px var(--mono);letter-spacing:.1em;color:var(--muted);opacity:0}
#bt .moment.go .flip .fl-k{animation:bt-mIn .5s var(--at,.6s) both}
#bt .flip .fl-k span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--sc);margin-right:5px}
#bt .flip .meter{position:static;transform:none;width:auto;margin:12px 0 0;padding:0;border:0;background:none;box-shadow:none;display:block;opacity:0}
#bt .flip .meter[hidden]{display:none}
#bt .moment.go .flip .meter{animation:bt-mIn .6s var(--at,.6s) both}
/* the replay's closing score stands centred under the title */
#bt .moment.story .flip{left:0!important;right:0;top:auto!important;bottom:18%;width:min(360px,80%)!important;margin:0 auto}
#bt .moment.story .flip .fl-leg{display:none}
/* phone: the board is the lower half of the scene card above the tabs */
#bt .portrait .flip{position:relative;left:auto;top:auto;width:auto;margin-top:10px;padding:9px 12px 11px;box-shadow:none;background:radial-gradient(circle,rgba(255,236,200,.06) .8px,transparent 1.2px) 0 0/11px 11px,rgba(255,255,255,.02)}
#bt .portrait .flip .fl-leg{display:none}
#bt .portrait .flip .fl-r{padding:3px 0}
#bt .portrait .flip .fl-r b{font-size:16px}
#bt .portrait .flip .fl-h{padding-bottom:6px}
#bt .portrait .moment.defi .mc{bottom:calc(178px + 64px)}
#bt .portrait .moment.story .flip{position:relative;bottom:auto;width:auto!important;margin-top:10px}
/* ---- BOBAI's chart (2026-09-26): candles of the pool, faint behind him and the brain; a scene dims it further ---- */
#bt .chart{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.78;transition:opacity 1.2s}
#bt .in-moment .chart,#bt .has-detail .chart{opacity:.2}
#bt .portrait .chart{opacity:.4;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* the board's diagrams (2026-09-26): a ring drawn arc by arc with its key, and a mini chart of the moment */
#bt .flip .fl-r b{text-shadow:0 0 14px color-mix(in srgb,var(--fc,#F0B90B) 45%,transparent)}
#bt .flip .fl-d{display:flex;align-items:center;gap:12px;margin-top:10px}
#bt .flip .fl-d svg{flex:0 0 68px;width:68px;height:68px;transform:rotate(-90deg);overflow:visible}
#bt .flip .fl-d svg text{transform:rotate(90deg);transform-origin:34px 34px;font:700 9px var(--mono);letter-spacing:.08em;fill:#f3efe6}
#bt .flip .fl-d circle{fill:none;stroke-width:7;stroke:var(--sc);filter:drop-shadow(0 0 3px var(--sc))}
#bt .flip .fl-d circle.fl-bg{stroke:rgba(255,255,255,.06);filter:none}
#bt .moment.go .flip .fl-d circle:not(.fl-bg){animation:bt-arc .7s var(--at,.6s) cubic-bezier(.4,0,.2,1) forwards}
@keyframes bt-arc{to{stroke-dasharray:var(--len) var(--c0)}}
#bt .flip .fl-d .fl-k{flex:1;display:grid;grid-template-columns:1fr;gap:3px;margin:0}
#bt .flip .fl-d .fl-k span{display:flex;align-items:center;gap:6px;white-space:nowrap}
#bt .flip .fl-d .fl-k span::before{display:none}
#bt .flip .fl-d .fl-k em{width:7px;height:7px;border-radius:50%;background:var(--sc);box-shadow:0 0 6px var(--sc)}
#bt .flip .fl-d .fl-k b{margin-left:auto;color:#f3efe6;font-weight:700}
#bt .flip .fl-c{display:block;width:100%;height:62px;margin-top:10px;opacity:0;border-top:1px dashed rgba(255,255,255,.1);padding-top:4px}
#bt .moment.go .flip .fl-c{animation:bt-mIn .6s var(--at,.6s) both}
/* the NFT card of a drop, in its row on the board (2026-09-28) */
#bt .flip .fl-i .fl-n{align-self:center;height:64px;width:auto;margin-left:-6px;border-radius:6px;border:1px solid var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 40%,transparent)}
#bt .portrait .flip .fl-i .fl-n{height:46px}
#bt .portrait .flip .fl-d svg{flex-basis:54px;width:54px;height:54px}
#bt .portrait .flip .fl-d{margin-top:6px}
#bt .portrait .flip .fl-c{height:46px;margin-top:6px}
/* ---- the detail is a board too (2026-09-26): the same glass of light as the flipchart, figures glow, one diagram ---- */
#bt .detail{background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--c,#F0B90B) 9%,transparent),transparent 70%),
    radial-gradient(circle,rgba(255,236,200,.07) .8px,transparent 1.2px) 0 0/11px 11px,rgba(10,8,9,.34);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-color:color-mix(in srgb,var(--c,#F0B90B) 38%,transparent);
  box-shadow:0 0 26px color-mix(in srgb,var(--c,#F0B90B) 16%,transparent),inset 0 0 22px color-mix(in srgb,var(--c,#F0B90B) 7%,transparent)}
#bt .detail .dr div{border-bottom:1px dashed rgba(255,255,255,.07)}
#bt .detail .dr b{text-shadow:0 0 12px color-mix(in srgb,var(--c,#F0B90B) 40%,transparent)}
#bt .detail .dv{margin:10px 0 8px}
#bt .db-c{font:700 9px var(--mono);letter-spacing:.2em;color:var(--c,#F0B90B);margin-bottom:7px}
#bt .db-b{display:flex;align-items:flex-end;gap:3px;height:58px;padding-bottom:1px;border-bottom:1px solid rgba(255,255,255,.1)}
#bt .db-b i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:linear-gradient(var(--c,#F0B90B),color-mix(in srgb,var(--c,#F0B90B) 35%,transparent));
  box-shadow:0 0 8px color-mix(in srgb,var(--c,#F0B90B) 45%,transparent);transform-origin:bottom}
#bt .db-b i.z{background:rgba(255,255,255,.12);box-shadow:none}
#bt .db-b i:last-child{background:linear-gradient(#fff,var(--c,#F0B90B))}
#bt .detail.draw .db-b i{animation:bt-grow .5s calc(.15s + var(--i) * .04s) cubic-bezier(.2,.9,.3,1) both}
@keyframes bt-grow{from{transform:scaleY(0)}}
#bt .db-x{display:flex;justify-content:space-between;margin-top:5px;font:600 8.5px var(--mono);letter-spacing:.12em;color:var(--muted)}
#bt .db-x b{color:#f3efe6}
#bt .dh-r{display:grid;grid-template-columns:78px 1fr 44px;align-items:center;gap:8px;padding:3px 0;font:600 9px var(--mono);letter-spacing:.1em;color:var(--muted)}
#bt .dh-r i{height:7px;width:var(--w);min-width:2px;border-radius:9px;background:var(--c);box-shadow:0 0 8px var(--c);transform-origin:left}
#bt .dh-r b{text-align:right;color:#f3efe6}
#bt .detail.draw .dh-r i{animation:bt-growX .6s calc(.15s + var(--i) * .1s) cubic-bezier(.2,.9,.3,1) both}
@keyframes bt-growX{from{transform:scaleX(0)}}
#bt .detail .fl-d{display:flex;align-items:center;gap:12px}
#bt .detail .fl-d svg{flex:0 0 68px;width:68px;height:68px;transform:rotate(-90deg)}
#bt .detail .fl-d svg text{transform:rotate(90deg);transform-origin:34px 34px;font:700 11px var(--mono);fill:#f3efe6}
#bt .detail .fl-d circle{fill:none;stroke-width:7;stroke:var(--sc);filter:drop-shadow(0 0 3px var(--sc))}
#bt .detail .fl-d circle.fl-bg{stroke:rgba(255,255,255,.06);filter:none}
#bt .detail.draw .fl-d circle:not(.fl-bg){animation:bt-arcD .8s calc(.15s + var(--i) * .25s) cubic-bezier(.4,0,.2,1) both}
@keyframes bt-arcD{from{stroke-dasharray:0 var(--c0)}}
#bt .detail .fl-k{flex:1;display:grid;gap:4px;font:600 9px var(--mono);letter-spacing:.1em;color:var(--muted)}
#bt .detail .fl-k span{display:flex;align-items:center;gap:6px}
#bt .detail .fl-k em{width:7px;height:7px;border-radius:50%;background:var(--sc);box-shadow:0 0 6px var(--sc)}
#bt .detail .fl-k b{margin-left:auto;color:#f3efe6}
#bt .dm{position:relative;height:14px;border-radius:99px;background:rgba(255,255,255,.06);margin-top:4px}
#bt .dm .rng{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 45%,transparent),color-mix(in srgb,var(--c) 85%,transparent),color-mix(in srgb,var(--c) 45%,transparent));box-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent)}
#bt .dm i{position:absolute;top:-5px;width:3px;height:24px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 10px #fff}
#bt .dm.out i{background:#fbbf24;box-shadow:0 0 10px #fbbf24}
#bt .detail.draw .dm .rng{animation:bt-growX .8s .15s cubic-bezier(.2,.9,.3,1) both}
#bt .detail .fl-c{display:block;width:100%;height:70px}
/* a short phone (360x640, measured 2026-09-26): the scene card covered BOBAI whole. The board keeps its figures and
   the ring, the mini chart steps out, the ring shrinks and its key runs in two columns */
@media (max-height:760px){
  #bt .portrait .flip .fl-c{display:none}
  #bt .portrait .flip .fl-d svg{flex-basis:44px;width:44px;height:44px}
  #bt .portrait .flip .fl-d .fl-k{grid-template-columns:1fr 1fr;column-gap:10px}
  #bt .portrait .flip .fl-r b{font-size:14px}
  #bt .portrait .flip .fl-r{padding:2px 0}
  #bt .portrait .moment .h{font-size:18px}
  #bt .portrait .moment .mc{padding:9px 12px 10px}
}
/* ---- the chart, full size (2026-09-26): glass like the brain, the chart first, BOBAI's marks under the candles ---- */
#bt .portrait .mtabs{grid-template-columns:repeat(5,1fr)}
#bt .chart-open{position:absolute;z-index:4;padding:5px 10px;border-radius:8px;border:1px solid rgba(240,185,11,.35);background:rgba(11,9,10,.5);
  color:var(--gold);font:700 9px var(--mono);letter-spacing:.18em;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s,background .2s}
#bt .chart-open.show{opacity:.85;pointer-events:auto}
#bt .chart-open:hover{background:rgba(240,185,11,.14);opacity:1}
#bt .cx-on .chart-open{opacity:0;pointer-events:none}
#bt .chartx{position:absolute;z-index:8;left:16px;right:16px;top:64px;bottom:124px;display:none;flex-direction:column;gap:10px;padding:14px 16px 12px;border-radius:18px;
  border:1px solid rgba(240,185,11,.28);
  background:radial-gradient(120% 80% at 30% 0%,rgba(240,185,11,.07),transparent 60%),radial-gradient(circle,rgba(255,236,200,.05) .8px,transparent 1.2px) 0 0/12px 12px,rgba(9,7,8,.72);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 0 50px rgba(240,185,11,.1),inset 0 0 40px rgba(240,185,11,.04)}
#bt .chartx.on{display:flex;animation:bt-cxIn .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes bt-cxIn{from{opacity:0;transform:translateY(12px) scale(.985)}}
#bt .cx-h{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#bt .cx-t b{font:800 20px 'Space Grotesk',sans-serif;color:var(--gold)}
#bt .cx-t span{margin-left:8px;font:700 9px var(--mono);letter-spacing:.18em;color:var(--muted)}
#bt .cx-p{display:flex;align-items:baseline;gap:10px}
#bt .cx-p b{font:800 26px 'Space Grotesk',sans-serif;color:#f3efe6;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(240,185,11,.3)}
#bt .cx-p i{font:700 12px var(--mono);font-style:normal}
#bt .cx-tf{margin-left:auto;display:flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
#bt .cx-tf button{padding:6px 12px;border:0;background:transparent;color:var(--muted);font:700 10px var(--mono);letter-spacing:.14em;cursor:pointer}
#bt .cx-tf button.on{background:var(--gold);color:#0b090a}
#bt .cx-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
#bt .cx-s{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
#bt .cx-s div{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}
#bt .cx-s span{display:block;font:700 8.5px var(--mono);letter-spacing:.16em;color:var(--muted)}
#bt .cx-s b{display:block;margin-top:3px;font:700 14px 'Space Grotesk',sans-serif;color:#f3efe6;font-variant-numeric:tabular-nums;white-space:nowrap}
#bt .cx-s i{font-style:normal}
#bt .cx-c{position:relative;flex:1;min-height:0}
#bt .cx-c canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
#bt .cx-o{position:absolute;left:10px;top:8px;max-width:calc(100% - 100px);padding:7px 10px;border-radius:9px;background:rgba(11,9,10,.82);border:1px solid var(--line2);
  font:600 10.5px var(--mono);color:#dcd8ea;pointer-events:none;opacity:0;transition:opacity .15s}
#bt .cx-o.on{opacity:1}
#bt .cx-o b{color:var(--gold);margin-right:6px}#bt .cx-o i{font-style:normal}#bt .cx-o div{margin-top:3px}
#bt .cx-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:700 8.5px var(--mono);letter-spacing:.12em;color:var(--muted)}
#bt .cx-k span{color:var(--k)}
#bt .cx-k em{margin-left:auto;font:600 11px var(--mono);letter-spacing:0;font-style:normal;color:#e8e3d4}
#bt .cx-on .chart{opacity:0}
/* phone: the chart is its own tab, between the scene's header and the tabs */
#bt .portrait .chartx{left:8px;right:8px;top:62px;bottom:176px;padding:10px 10px 8px;gap:7px}
#bt .portrait .cx-t span{display:none}
#bt .portrait .cx-p b{font-size:20px}
#bt .portrait .cx-x{width:30px;height:30px;margin-left:6px}
#bt .portrait .cx-h{gap:10px}
#bt .portrait .cx-s{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#bt .portrait .cx-s div{padding:5px 7px;min-width:0}
#bt .portrait .cx-s span{font-size:7.5px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bt .portrait .cx-s b{font-size:12px;overflow:hidden;text-overflow:ellipsis}
#bt .portrait .cx-s .cx-rg b{white-space:normal;font-size:11px;line-height:1.2}
/* phone: the chart tab is the chart alone — the timeline below it showed the same candles a second time; the tabs
   move down to the bottom edge and the chart takes the room */
#bt .portrait.cx-on .tl{display:none}
#bt .portrait.cx-on .mtabs{bottom:0}
#bt .portrait.cx-on .hud .ttl,#bt .portrait.cx-on .hud .live{visibility:hidden}
#bt .portrait .chartx{bottom:50px}
#bt .portrait .cx-k em{margin-left:0;flex-basis:100%}
#bt .portrait.cx-on .fig,#bt .portrait.cx-on #bt-labs,#bt .portrait.cx-on .say{visibility:hidden}
/* 2026-09-26: the timeline is the chart; the small one behind BOBAI is gone, its OPEN button sits on the timeline */
#bt .chart{display:none}
/* 2026-09-26 (operator: "a bit larger, and in the middle"): centred over the timeline's candles (the canvas ends where
   the 1H..7D and REPLAY buttons begin, about 190 px from the right), riding on its top edge */
#bt .chart-open{z-index:6;left:calc(50% - 95px)!important;right:auto;top:auto!important;bottom:92px;transform:translateX(-50%);opacity:.95;pointer-events:auto;
  padding:8px 20px;font-size:11px;letter-spacing:.2em;border-color:rgba(240,185,11,.6);background:rgba(11,9,10,.82);box-shadow:0 0 22px rgba(240,185,11,.18)}
#bt .chart-open:hover{background:rgba(240,185,11,.18);box-shadow:0 0 30px rgba(240,185,11,.3)}
#bt .portrait .chart-open{display:none}
/* ---- EMBEDDED (2026-09-26): the new page's centre window. No backdrop, no close button, it fills its frame ---- */
#bt.embed{position:absolute;inset:0;z-index:1;display:flex;padding:0}
#bt.embed .bt-back,#bt.embed .hud .x{display:none}
#bt.embed .bt-win{width:100%;height:100%;border-radius:inherit;border:0;box-shadow:none}
/* the market's weather (2026-09-26): a breath of colour over the scene, faded over seconds */
#bt .mood{position:absolute;inset:0;z-index:1;pointer-events:none;background-color:transparent;transition:background-color 6s ease;
  -webkit-mask-image:radial-gradient(70% 60% at 45% 50%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 45% 50%,#000,transparent 75%)}
/* embedded in the Brain page: the split line is window 02's job, and the chart view's head keeps to one row */
#bt.embed .phase{display:none}
#bt.embed .cx-t span{display:none}
/* phone (2026-09-26, operator: "the destinations a bit smaller, so BOBAI can be larger") */
#bt .portrait .dest .n{font-size:8.5px;gap:2px}
#bt .portrait .dest .pc{font-size:8.5px;padding:0 2px}
#bt .portrait .dest .v{font-size:10.5px}
#bt .portrait .core .n{font-size:8.5px}
#bt .portrait .core .v{font-size:12px}
/* PHONE SCENES (2026-09-26, operator: "in the replay the card covers BOBAI — the six destinations can go meanwhile"):
   while a scene plays, the destinations and the buyback label step aside and the scene card takes their place right
   above the tabs; BOBAI stays free above it. They come back when the scene ends. */
#bt .portrait.in-moment #bt-labs .dest,#bt .portrait.in-moment #bt-labs .core{opacity:0!important;transition:opacity .4s}
#bt .portrait .moment .mc,#bt .portrait .moment.defi .mc,#bt .portrait .moment.story .mc{bottom:calc(178px + 8px)!important}
#bt .portrait .moment .bar{display:none}
#bt .portrait .flip .fl-c{display:none} /* the phone's timeline right below already shows the candles */
/* ---- PHONE BOARD (2026-09-26, operator: "in the replay BOBAI is hard to see — make the board as transparent as on
   the desktop, and smaller"): no dark slab any more, the desktop's glass of light; title smaller, the figures in two
   columns, the ring smaller — the card is about half as tall and BOBAI stands free above it ---- */
#bt .portrait .moment .mc{background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 8%,transparent),transparent 70%),
    radial-gradient(circle,rgba(255,236,200,.06) .8px,transparent 1.2px) 0 0/11px 11px,rgba(10,8,9,.14);
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--c) 14%,transparent);padding:8px 11px 9px!important;width:calc(100% - 28px)}
#bt .portrait .moment .k{font-size:8px;letter-spacing:.22em;text-shadow:0 1px 6px #000}
#bt .portrait .moment .h{font-size:17px!important;margin-top:3px;text-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent),0 2px 10px #000}
#bt .portrait .flip{background:none!important;border:0;box-shadow:none;padding:4px 2px 0!important;margin-top:6px}
#bt .portrait .flip .fl-h{font-size:8px;padding-bottom:4px;margin-bottom:2px}
#bt .portrait .flip .fl-b{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
#bt .portrait .flip .fl-b>.fl-d,#bt .portrait .flip .fl-b>.meter,#bt .portrait .flip .fl-b>.fl-s,#bt .portrait .flip .fl-b>canvas{grid-column:1/-1}
#bt .portrait .flip .fl-r{padding:2px 0}
#bt .portrait .flip .fl-i{flex-direction:column;align-items:flex-start;gap:0}
#bt .portrait .flip .fl-r span{font-size:7.5px;letter-spacing:.12em}
#bt .portrait .flip .fl-r b{font-size:14px!important;text-shadow:0 1px 8px #000}
#bt .portrait .flip .fl-d{margin-top:5px;gap:10px}
#bt .portrait .flip .fl-d svg{flex-basis:46px!important;width:46px!important;height:46px!important}
#bt .portrait .flip .fl-d .fl-k{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:1px;margin-top:0;font-size:7.5px}
#bt .portrait .flip .meter{margin-top:6px}
/* a board you tapped stays; a thin line says how to let it go */
#bt .moment.go .mc,#bt .moment.go .flip{pointer-events:auto;cursor:pointer}
#bt .moment.held .mc::after,#bt .moment.held:not(:has(.mc .flip)) .flip::after{content:"HELD · TAP TO CLOSE";display:block;margin-top:6px;text-align:center;font:700 8px var(--mono);letter-spacing:.24em;color:var(--c);opacity:.8}
#bt .moment.held .mc{border-color:color-mix(in srgb,var(--c) 60%,transparent)}
/* MOMENTS: the button in the head, the list over the scene */
#bt .scn{height:36px;padding:0 12px;border-radius:11px;border:1px solid var(--line2);background:rgba(11,9,10,.45);color:var(--gold2);cursor:pointer;
  font:700 .62rem var(--mono);letter-spacing:.14em;display:flex;align-items:center;gap:8px;margin-left:auto}
#bt .scn b{min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:rgba(240,185,11,.16);color:var(--gold);font:800 10px var(--mono);display:grid;place-items:center}
#bt .scn:hover,#bt .scn[aria-expanded="true"]{background:rgba(240,185,11,.14)}
#bt .hud .scn + .shr{margin-left:0}
#bt .scnl{position:absolute;z-index:9;right:16px;top:64px;width:min(360px,calc(100% - 32px));max-height:min(62%,520px);display:none;flex-direction:column;border-radius:16px;
  border:1px solid rgba(240,185,11,.3);background:radial-gradient(120% 60% at 30% 0%,rgba(240,185,11,.07),transparent 60%),radial-gradient(circle,rgba(255,236,200,.05) .8px,transparent 1.2px) 0 0/12px 12px,rgba(9,7,8,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 40px rgba(240,185,11,.12)}
#bt .scnl.on{display:flex;animation:bt-cxIn .35s cubic-bezier(.2,.9,.3,1) both}
#bt .scn-h{display:flex;align-items:baseline;gap:10px;padding:12px 12px 8px 14px;border-bottom:1px dashed rgba(255,255,255,.1)}
#bt .scn-h b{font:800 11px var(--mono);letter-spacing:.2em;color:var(--gold)}
#bt .scn-h span{font:600 9px var(--mono);letter-spacing:.06em;color:var(--muted)}
#bt .scn-x{margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:16px;cursor:pointer;align-self:center}
#bt .scn-0{margin:14px;font:600 11px var(--mono);color:var(--muted)}
#bt .scn-b{overflow-y:auto;padding:6px;scrollbar-width:thin;scrollbar-color:rgba(240,185,11,.3) transparent}
#bt .scn-b button{display:grid;grid-template-columns:10px auto 1fr auto;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:#e8e3d4;cursor:pointer;text-align:left}
#bt .scn-b button:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
#bt .scn-b i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
#bt .scn-b em{font:800 9px var(--mono);letter-spacing:.14em;font-style:normal;color:var(--c);white-space:nowrap}
#bt .scn-b b{font:700 13px 'Space Grotesk',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bt .scn-b small{font:600 9.5px var(--mono);color:var(--muted);white-space:nowrap}
#bt .in-moment .scnl{display:none}
/* phone: a square button under the share button, the list across the scene */
#bt .portrait .scn{position:absolute;right:12px;top:58px;height:32px;padding:0 9px;margin:0;font-size:.52rem;letter-spacing:.1em}
#bt .portrait .scnl{left:8px;right:8px;top:100px;width:auto;max-height:calc(100% - 100px - 190px)}
#bt .portrait .scn-h span{display:none}
#bt .portrait.cx-on .scn{visibility:hidden}
#bt .scn,#bt .shr{white-space:nowrap}
#bt .scn-h b{white-space:nowrap}
#bt .portrait .hud .scn + .shr{margin-left:auto}
/* THE LABELS NAME, THE PAGE COUNTS (operator, 2026-09-27: "take the white numbers out — the page shows them cleanly,
   and the terminal gets more room and a nicer view"): each destination keeps its name and its share of the tax;
   its figures are one tap away on its board and in the windows around the terminal. */
#bt .dest .v,#bt .dest .s{display:none}

/* THE NFT STICKER (2026-09-28): on the window's top-left corner, over the frame, slapped on like a sticker */
#bt .bt-stk{position:absolute;z-index:8;left:-40px;top:-48px;width:108px;pointer-events:none;transform-origin:50% 40%} /* 8% bigger, placed by stkPlace (2026-10-01) */
#bt .stk-on #bt-labs .wk{opacity:0!important;transition:opacity .3s}
#bt .bt-stk .st-c{position:relative;border-radius:8px;overflow:hidden;border:2px solid #fff;background:#15121c;aspect-ratio:3/4;
  box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 34px color-mix(in srgb,#a78bfa 55%,transparent)}
#bt .bt-stk img{display:block;width:100%;height:100%;object-fit:cover}
#bt .bt-stk .st-w{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font:800 8px var(--mono);letter-spacing:.14em;color:#e9e3ff;font-style:normal;
  background:linear-gradient(115deg,#221a36 20%,#4b3a7a 40%,#221a36 60%);background-size:250% 100%;animation:bt-stkShim 1.6s linear infinite}
#bt .bt-stk.wait img{visibility:hidden}
#bt .bt-stk.wait .st-w{display:flex}
#bt .bt-stk b{display:block;margin:4px auto 0;width:max-content;padding:2px 6px;border-radius:999px;background:#a78bfa;color:#120e1c;font:800 7.5px var(--mono);letter-spacing:.14em;box-shadow:0 4px 12px rgba(0,0,0,.5)}
#bt .bt-stk.go{animation:bt-stkIn .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bt-stkIn{0%{opacity:0;transform:rotate(-24deg) scale(1.7)}70%{opacity:1;transform:rotate(-6deg) scale(.95)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes bt-stkShim{to{background-position:-250% 0}}
#bt .bt-stk.pt{width:66px;left:auto;right:-8px;top:-30px}
#bt .bt-stk.ph{width:72px} /* a phone: 9% bigger than the old corner card, placed free by stkPlace (2026-10-01) */
#bt .bt-stk.ph b{display:none}
#bt .bt-stk.pt b{display:none}
/* the buy board a size bigger on a wide screen (operator, 2026-09-28) */
#bt .bt-win:not(.portrait) .moment:not(.story):not(.defi) .flip{zoom:1.12}
@media (prefers-reduced-motion:reduce){#bt .bt-stk.go{animation:none;transform:rotate(-8deg)}#bt .bt-stk .st-w{animation:none}}

/* the buyback ring shows how full it is: the tax line under its label goes (operator, 2026-09-28); the MONEY tab still reads it */
#bt .lab.core .s:not(.cd){display:none}
#bt .lab.core.say-over{opacity:0!important;transition:opacity .25s} /* his line stands here: the label steps back until it is over */

/* the trades label: one line on a wide screen, two on a phone (TRADES / 3% TAX) under its dot (2026-09-28) */
#bt .lab.src .sep{font-style:normal}
#bt .portrait .lab.src{text-align:center}
#bt .portrait .lab.src .sep{display:none}
#bt .portrait .lab.src .n span{display:block;line-height:1.3}
#bt .bt-win:not(.portrait) .lab.src .n span{display:inline}
#bt .portrait .lab.src .n .sep{display:none}

/* THE NFT CARD ON ITS OWN (2026-09-28): big, in the middle of the window, slapped on, then gone */
#bt .bt-nft{position:absolute;z-index:9;left:50%;top:41%;transform:translate(-50%,-50%);pointer-events:none;text-align:center}
#bt .bt-nft[hidden]{display:none}
#bt .bt-nft.placed{transform:none} /* placed beside him by nftShow (2026-10-01) */
#bt .bt-nft.placed .nc{width:clamp(150px,13.5vw,200px)}
#bt .nft-on #bt-labs .wk{opacity:0!important;transition:opacity .3s}
#bt .bt-nft .nc{width:clamp(170px,17vw,230px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:3px solid #fff;margin:0 auto;background:#15121c;
  box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 60px color-mix(in srgb,#a78bfa 60%,transparent);transform:rotate(-4deg)}
#bt .bt-nft img{display:block;width:100%;height:100%;object-fit:cover}
#bt .bt-nft b{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;background:#a78bfa;color:#120e1c;font:800 11px var(--mono);letter-spacing:.24em}
#bt .bt-nft span{display:block;width:max-content;max-width:92vw;margin:7px auto 0;padding:4px 10px;border-radius:8px;background:rgba(12,9,18,.82);font:700 12px var(--mono);letter-spacing:.1em;color:#e9e3ff;white-space:nowrap}
#bt .bt-nft.go .nc{animation:bt-nftIn .7s cubic-bezier(.2,1.4,.4,1) both}
#bt .bt-nft.go b,#bt .bt-nft.go span{animation:bt-mIn .5s .45s both}
#bt .bt-nft.out{opacity:0;transition:opacity .6s}
@keyframes bt-nftIn{0%{opacity:0;transform:rotate(-22deg) scale(1.9)}65%{opacity:1;transform:rotate(-2deg) scale(.96)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}
#bt .portrait .bt-nft{top:36%}
#bt .portrait .bt-nft .nc{width:140px}
@media (prefers-reduced-motion:reduce){#bt .bt-nft.go .nc{animation:none}}
#bt .portrait .bt-nft span{font-size:10.5px}
#bt .nft-on .lab.core{opacity:0!important;transition:opacity .3s} /* the card's own line, not over the buyback label */
/* ---- HIS MOOD (2026-09-29): a chip under the title; the mood itself moves in his clips ---- */
#bt .mdc{--mc:#e8c465;--mb:rgba(240,185,11,.35);display:flex;width:max-content;align-items:center;gap:7px;margin-top:9px;padding:3px 10px 3px 5px;border-radius:999px;
  border:1px solid var(--mb);background:rgba(0,0,0,.4);color:var(--mc);font:700 .6rem var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:color 2s ease,border-color 2s ease,box-shadow 2s ease;cursor:default}
#bt .mdc[hidden]{display:none} /* hidden until his chart has loaded (readCombo); own rule, after the block */
#bt .mdc[data-mood=up]{--mc:#35e07a;--mb:rgba(53,224,122,.4)}
#bt .mdc[data-mood=pump]{--mc:#4dff94;--mb:rgba(53,224,122,.6);box-shadow:0 0 14px rgba(53,224,122,.25)}
#bt .mdc[data-mood=down]{--mc:#ff7a90;--mb:rgba(255,77,109,.4)}
#bt .mdc[data-mood=dump]{--mc:#ff5a76;--mb:rgba(255,77,109,.6);box-shadow:0 0 14px rgba(255,77,109,.25)}
#bt .mdc .mi{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--mc) 18%,transparent)}
#bt .mdc .mi svg{transition:transform 1.4s cubic-bezier(.3,1.4,.5,1)}
#bt .mdc .mk{color:var(--dim);font-weight:500}
#bt .mdc .mp{color:var(--dim);font-weight:500;letter-spacing:.06em}
#bt .mdc[data-mood=pump] .mi svg{transform:rotate(-90deg)}#bt .mdc[data-mood=up] .mi svg{transform:rotate(-45deg)}
#bt .mdc[data-mood=down] .mi svg{transform:rotate(45deg)}#bt .mdc[data-mood=dump] .mi svg{transform:rotate(90deg)}
#bt .mdc .mi{animation:bt-mflat 3.2s ease-in-out infinite}
#bt .mdc[data-mood=up] .mi{animation:bt-mup 1.8s ease-in-out infinite}#bt .mdc[data-mood=pump] .mi{animation:bt-mup .9s ease-in-out infinite}
#bt .mdc[data-mood=down] .mi{animation:bt-mdown 2.2s ease-in-out infinite}#bt .mdc[data-mood=dump] .mi{animation:bt-mdown 1.2s ease-in-out infinite}
#bt .mdc.turn{animation:bt-mturn 1.1s cubic-bezier(.3,1.5,.5,1)}
@keyframes bt-mflat{0%,100%{transform:translateX(-1px)}50%{transform:translateX(1.5px)}}
@keyframes bt-mup{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2.5px)}}
@keyframes bt-mdown{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2.5px)}}
@keyframes bt-mturn{0%{transform:scale(1)}35%{transform:scale(1.14);box-shadow:0 0 22px var(--mb)}100%{transform:scale(1)}}
/* phone and portrait windows: under the LIVE badge (MOMENTS and share sit top right), out of the way while his bubble takes the title row */
#bt .portrait .mdc{position:absolute;left:12px;top:63px;margin:0;font-size:8.5px;padding:2px 8px 2px 4px;gap:5px;transition:opacity .4s ease .3s,color 2s ease,border-color 2s ease} /* .3s: back to full only once his bubble has faded (.25s), not under its last frames (layout 412x915, 2026-10-17) */
#bt .portrait .mdc .mk{display:none}
#bt .portrait .mdc .mi{width:15px;height:15px}
#bt .mdc[data-act=quiet]{opacity:.82} /* quiet hours dim a little; BEFORE the two rules below (same weight): under his line and in a scene they win (2026-10-04) */
#bt .talking .mdc{opacity:.5;transition:opacity .25s ease} /* phone (operator 2026-09-30): while he speaks the mood chip and MOMENTS stay, half as visible, his bubble on top */
#bt .in-moment .mdc{opacity:0;transition:none}
#bt .portrait.talking .scn{opacity:.5;transition:opacity .25s ease}
/* in a scene his line is seen now (2026-10-17): MOMENTS steps back at once, not under the first letters (layout 360x640) */
#bt .portrait.talking.in-moment .scn{transition:none}
/* wide screen: his bubble over the mood chip (underBubble) is drawn above it, the chip steps back */
#bt .talk-over:not(.in-moment) .mdc{opacity:.5;transition:none}
#bt .talk-over .say{z-index:6}
#bt .portrait .say.top{z-index:6}
/* the chip lives inside the title row, which hides while he speaks: the row goes invisible, the chip alone stays at half */
#bt .portrait.talking .ttl{opacity:1;visibility:hidden}
#bt .portrait.talking .ttl .mdc{visibility:visible} /* above the HUD (z 5): the dimmed chip and MOMENTS lie under his line, never over it */
#bt .portrait .scn{transition:opacity .4s ease .3s} /* a scene of the chain has the stage: its title runs where the chip sits (2026-09-30) */
@media (prefers-reduced-motion:reduce){#bt .mdc .mi,#bt .mdc.turn{animation:none!important}}
/* loud hours glow and bounce quicker, quiet ones slow down and dim a little */
#bt .mdc[data-act=loud]{box-shadow:0 0 14px var(--mb)}
#bt .mdc[data-act=loud] .mi{animation-duration:.8s}
#bt .mdc[data-act=quiet] .mi{animation-duration:5s}

/* ===== HALLOWEEN (2026-10-05): the surroundings only — a layer of its own under BOBAI, the labels and every window,
 * and a few pieces around a destination's window. Nothing existing is restyled; with the switch off (or outside the
 * season) the terminal is as before. Motion obeys ?calm only, like the rest of the terminal (see REDUCED in terminal.js). */
#bt .hw{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
#bt .hw-on .hw{opacity:1;visibility:visible;transition:opacity .9s ease}
#bt .bt-win:not(.hw-on) .hw *{animation-play-state:paused!important}
#bt .hw-i{position:absolute;left:0;top:0;opacity:0;transition:opacity 1.2s ease}
#bt .hw-i.put{opacity:1}
#bt .hw-i:not(.put){transition-duration:.2s}
#bt .hw img,#bt .hw-d img,#bt .hw-dw img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
/* a small character: its frames lie on each other, one shows */
#bt .hw-s{display:block;position:relative}
#bt .hw-s img{opacity:0}
#bt .hw-s img + img{position:absolute;left:0;top:0}
#bt .hw-s img.on{opacity:1}
/* ground mist above the timeline */
#bt .hw-fog{position:absolute;left:-20%;right:-20%;bottom:112px;height:22%;opacity:.7;
  background:radial-gradient(38% 62% at 18% 100%,rgba(150,130,210,.2),transparent 70%),radial-gradient(34% 52% at 52% 100%,rgba(110,170,190,.13),transparent 70%),radial-gradient(40% 70% at 86% 100%,rgba(170,120,200,.17),transparent 70%);
  animation:bt-hw-fog 46s ease-in-out infinite alternate}
#bt .hw-fog.b{height:18%;opacity:.85;
  background:radial-gradient(30% 60% at 34% 100%,rgba(255,150,70,.08),transparent 70%),radial-gradient(42% 66% at 70% 100%,rgba(120,160,215,.17),transparent 70%);
  animation-duration:61s;animation-direction:alternate-reverse}
#bt .portrait .hw-fog{bottom:170px;height:16%}
@keyframes bt-hw-fog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
/* cobwebs in the top corners */
#bt .hw-web{position:absolute;top:0;width:clamp(110px,24%,280px);opacity:.5}
#bt .hw-web.l{left:0}
#bt .hw-web.r{right:0;transform:scaleX(-1)}
/* a chain of blocks hangs from the top and sways */
/* THE CHAIN SWINGS NOW AND THEN (operator, 2026-10-07: "swing more gently — but mine never swings"): ±3.5° over 12 s
   moved its end a pixel a second, so it looked still and still cost every frame (rule 14's largest piece). It hangs
   still now and, every 18-30 s, swings out once like a pendulum and comes to rest (the script adds .swing) */
#bt .hw-hc{transform-origin:50% 0}
#bt .hw-hc.swing{animation:bt-hw-pend 8s ease-in-out 1;will-change:transform}
@keyframes bt-hw-swing{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes bt-hw-pend{0%{transform:rotate(0)}12%{transform:rotate(4.5deg)}30%{transform:rotate(-3.4deg)}48%{transform:rotate(2.3deg)}64%{transform:rotate(-1.3deg)}80%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
/* the moon, a sticker like the rest */
#bt .hw-mo img{animation:bt-hw-bob 9s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px rgba(210,215,255,.28))}
/* the ghost drags a chain of blocks behind it */
#bt .hw-chn{position:absolute;top:58%;right:62%;width:150%!important;max-width:none;transform-origin:100% 50%;animation:bt-hw-drag 2.3s ease-in-out infinite alternate}
#bt .hw-gh.rtl .hw-chn{right:auto;left:62%;transform-origin:0 50%;animation-name:bt-hw-dragr}
@keyframes bt-hw-drag{from{transform:rotate(7deg)}to{transform:rotate(-5deg)}}
@keyframes bt-hw-dragr{from{transform:scaleX(-1) rotate(7deg)}to{transform:scaleX(-1) rotate(-5deg)}}
/* wax candles on the candle chart */
#bt .hw-cd i{position:absolute;left:5%;top:-12%;width:90%;height:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,90,.3),transparent);animation:bt-hw-flick 3.1s ease-in-out infinite}
#bt .hw-cd.shake img{animation:bt-hw-shake .11s linear infinite}
#bt .portrait .hw-web{width:34%;opacity:.42}
/* the stone platform under BOBAI: its foot fades into the mist (on a phone sooner — the buyback ring lies right below) */
#bt .hw-da img{-webkit-mask-image:linear-gradient(#000 74%,transparent 98%);mask-image:linear-gradient(#000 74%,transparent 98%)}
#bt .portrait .hw-da img{-webkit-mask-image:linear-gradient(#000 34%,transparent 72%);mask-image:linear-gradient(#000 34%,transparent 72%)}
/* the buyback ring, drawn in front of the stone with the scene's own colours and strength (terminal.js ringDraw, 2026-10-14) */
#bt .hw-rg{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none}
#bt .hw-rg circle,#bt .hw-rg path{fill:none;stroke-width:.12;stroke-opacity:.38}
#bt .hw-rg .b{stroke:#fff;stroke-opacity:.06}
/* far lightning, and the face that stands in the sky every third time */
#bt .hw-fl{position:absolute;inset:0;opacity:0;background:radial-gradient(95% 62% at 42% 0,rgba(205,218,255,.95),transparent 72%)}
#bt .hw-face{position:absolute;left:50%;top:8%;width:40%;transform:translateX(-50%);opacity:0;filter:saturate(.3) brightness(1.3) blur(.7px)}
#bt .portrait .hw-face{width:74%;top:13%}
/* the clown behind BOBAI: he rises behind him (this layer lies under the figure) and is gone the moment BOBAI moves */
#bt .hw-grab{position:absolute;left:0;top:0;opacity:0;transition:opacity .9s ease;will-change:opacity}
#bt .hw-grab.on{opacity:1;transition:opacity 1.6s ease}
#bt .hw-grab.fast{transition:opacity .7s ease}
#bt .hw-grabi{transform:translateY(24%) scale(.94);transform-origin:50% 100%;transition:transform 1s ease}
#bt .hw-grab.on .hw-grabi{transform:none;transition:transform 2.6s cubic-bezier(.2,.6,.3,1)}
#bt .hw-grab.on .hw-s{animation:bt-hw-loom 2.4s ease-in-out infinite alternate}
@keyframes bt-hw-loom{from{transform:translateY(0) rotate(-1.2deg)}to{transform:translateY(-5px) rotate(1.2deg)}}
/* the costumes: every station of the chain's work wears one, on its own light. Each breathes a little, out of step */
#bt .hw-o > *{animation:bt-hw-bob 4.3s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px rgba(0,0,0,.75)) drop-shadow(0 0 5px rgba(240,185,11,.22))}
#bt .hw-o:nth-of-type(2n) > *{animation-duration:5.1s;animation-delay:-1.7s}
#bt .hw-o:nth-of-type(3n) > *{animation-duration:3.7s;animation-delay:-2.9s}
#bt .hw-o.shake > *{animation:bt-hw-shake .11s linear infinite}
#bt .hw-ob{display:block}
#bt .hw-ob b{display:block;position:relative}
#bt .hw-ob img.d{position:absolute;left:0;top:0;animation:bt-hw-wd .34s steps(1) infinite}
#bt .hw-ob img:not(.d){animation:bt-hw-wu .34s steps(1) infinite}
#bt .hw-pk.a .hw-s{animation:bt-hw-bob 5.3s ease-in-out infinite alternate}
#bt .hw-pk.a.shake .hw-s{animation:bt-hw-shake .11s linear infinite}
/* they play together. The bat carries a trade to the brain pumpkin and comes back; the pumpkin takes it with a blink of light */
#bt .hw-o[data-k=src]{transition:transform 2.8s cubic-bezier(.4,0,.3,1),opacity 1.2s ease}
#bt .hw-o[data-k=src].fly{transform:translate(var(--fx,0),var(--fy,0)) scale(.8);transition:transform 2.6s cubic-bezier(.5,0,.4,1),opacity 1.2s ease}
#bt .hw-pk.a.blip::before{animation:none;opacity:1;transform:scale(1.25);transition:transform .25s ease,opacity .25s ease}
/* the spider at the DeFi agent lets itself down on its thread and climbs back */
#bt .hw-o[data-k=defi]::before{content:"";position:absolute;left:50%;top:6%;width:1px;height:0;background:linear-gradient(rgba(230,225,255,.1),rgba(230,225,255,.55));animation:bt-hw-sth 13s ease-in-out infinite}
#bt .hw-o[data-k=defi] > *{animation:bt-hw-sdn 13s ease-in-out infinite}
@keyframes bt-hw-sth{0%,52%,100%{height:0}66%,82%{height:46%}}
@keyframes bt-hw-sdn{0%,52%,100%{transform:translateY(0)}66%,82%{transform:translateY(42%)}74%{transform:translateY(42%) rotate(6deg)}}
#bt .hw-o[data-k=defi].shake > *{animation:bt-hw-shake .11s linear infinite}
/* the cauldron at the liquidity boost bubbles */
#bt .hw-o[data-k=liq]::before,#bt .hw-o[data-k=liq]::after{content:"";position:absolute;z-index:1;left:38%;top:16%;width:11%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(120,240,215,.75);background:rgba(90,230,200,.22);opacity:0;animation:bt-hw-bub 2.7s ease-in infinite}
#bt .hw-o[data-k=liq]::after{left:56%;width:8%;animation-duration:3.4s;animation-delay:-1.3s}
@keyframes bt-hw-bub{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:.9}100%{opacity:0;transform:translateY(-260%) scale(1.15)}}
/* (older) stickers */
#bt .hw-sk img{animation:bt-hw-bob 4.1s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px rgba(255,140,40,.55))}
#bt .hw-sk.put{opacity:.92}
#bt .hw-hs{position:absolute;top:8%;width:var(--hs,22px)}
#bt .hw-hs.a{left:26%}
#bt .hw-hs.b{left:66%;top:16%}
#bt .hw-hs u{display:block;width:1px;height:var(--tl,44px);margin:0 auto;background:linear-gradient(rgba(230,225,255,.05),rgba(230,225,255,.5));transform-origin:50% 0;animation:bt-hw-yoyo 7.3s ease-in-out infinite alternate}
#bt .hw-hs img{animation:bt-hw-yoyoi 7.3s ease-in-out infinite alternate}
#bt .hw-hs.b u,#bt .hw-hs.b img{animation-duration:9.7s;animation-delay:-3s}
#bt .hw-hs.a{--tl:52px}
#bt .hw-hs.b{--tl:34px}
@keyframes bt-hw-yoyo{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes bt-hw-yoyoi{from{transform:translateY(calc(var(--tl,44px)*-.55))}to{transform:translateY(0)}}
/* the cat: the two glowing eyes belong to somebody */
#bt .hw-cat .hw-s{filter:drop-shadow(0 0 4px rgba(150,130,255,.4))}
#bt .hw-cat::after{content:"";position:absolute;left:10%;right:10%;bottom:-3%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent)}
/* the skeleton hand behind the timeline's edge */
#bt .hw-hdi{position:absolute;left:0;bottom:0;width:100%;transform:translateY(106%);transition:transform .9s cubic-bezier(.5,0,.6,1)}
#bt .hw-hd.up .hw-hdi{transform:translateY(3%);transition:transform 1.3s cubic-bezier(.2,.7,.3,1)}
#bt .hw-hd.up .hw-s{transform-origin:50% 100%;animation:bt-hw-grope 1s ease-in-out infinite alternate}
@keyframes bt-hw-grope{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
/* bats: two frames of a wing beat */
#bt .hw-bat{position:absolute;left:0;top:var(--y);width:var(--s);transform:translate(-80px,0);animation:bt-hw-fly var(--d) linear var(--dl) infinite}
#bt .hw-bat.rv{animation-name:bt-hw-flyr}
#bt .hw-bat b,#bt .hw-burst b{display:block;position:relative;animation:bt-hw-wave 1.7s ease-in-out infinite alternate}
#bt .hw-bat img.d,#bt .hw-burst img.d{position:absolute;left:0;top:0;animation:bt-hw-wd .3s steps(1) infinite}
#bt .hw-bat img:not(.d),#bt .hw-burst img:not(.d){animation:bt-hw-wu .3s steps(1) infinite}
@keyframes bt-hw-wu{0%{opacity:1}50%{opacity:0}}
@keyframes bt-hw-wd{0%{opacity:0}50%{opacity:1}}
@keyframes bt-hw-fly{0%{transform:translate(-80px,0)}26%,100%{transform:translate(calc(var(--w,1400px) + 80px),-46px)}}
@keyframes bt-hw-flyr{0%{transform:translate(calc(var(--w,1400px) + 80px),0)}30%,100%{transform:translate(-80px,34px)}}
@keyframes bt-hw-wave{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
/* the ghost floats through (placed and moved by the script), bobbing */
#bt .hw-gh{position:absolute;left:0;top:0;opacity:0;will-change:transform}
#bt .hw-ghb{animation:bt-hw-bob 3.4s ease-in-out infinite alternate;filter:drop-shadow(0 0 7px rgba(190,200,255,.45))}
@keyframes bt-hw-bob{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(6px) rotate(3deg)}}
/* the spider lets itself down, has a look, and climbs back */
#bt .hw-sp u{position:absolute;left:50%;top:0;width:1px;height:var(--L,90px);margin-left:-.5px;background:linear-gradient(rgba(230,225,255,.08),rgba(230,225,255,.5));transform-origin:50% 0;transform:scaleY(0);animation:bt-hw-thr 33s ease-in-out 3s infinite}
#bt .hw-spb{position:relative;transform:translateY(-130%);animation:bt-hw-spi 33s ease-in-out 3s infinite}
@keyframes bt-hw-thr{0%,5%{transform:scaleY(0)}19%{transform:scaleY(1)}23%{transform:scaleY(.93)}27%,58%{transform:scaleY(1)}74%,100%{transform:scaleY(0)}}
@keyframes bt-hw-spi{0%,5%{transform:translateY(-130%)}19%{transform:translateY(var(--L,90px))}23%{transform:translateY(calc(var(--L,90px)*.93))}27%{transform:translateY(var(--L,90px)) rotate(0)}40%{transform:translateY(var(--L,90px)) rotate(6deg)}50%{transform:translateY(var(--L,90px)) rotate(-5deg)}58%{transform:translateY(var(--L,90px)) rotate(0)}74%,100%{transform:translateY(-130%)}}
/* pumpkins: a candle inside, so the light breathes; they shake when the clown shows */
#bt .hw-pk::before{content:"";position:absolute;inset:-34% -30% -18%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,140,40,.22),transparent);animation:bt-hw-flick 3.7s ease-in-out infinite}
#bt .hw-pk::after{content:"";position:absolute;left:6%;right:6%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,150,50,.36),transparent);filter:blur(4px)}
#bt .hw-pk .hw-s{z-index:1}
#bt .hw-pk i{position:absolute;z-index:2;left:14%;top:28%;width:72%;height:62%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,90,.26),transparent);animation:bt-hw-flick 2.9s ease-in-out -1.1s infinite}
#bt .hw-pk.b::before{animation-duration:4.3s;animation-delay:-2s}
#bt .hw-pk.b i{left:40%;top:0;width:60%;height:70%;animation-duration:3.3s}
#bt .hw-pk.shake .hw-s,#bt .hw-cat.shake .hw-s{animation:bt-hw-shake .11s linear infinite}
@keyframes bt-hw-flick{0%,100%{opacity:.55}18%{opacity:.95}31%{opacity:.6}47%{opacity:1}58%{opacity:.7}74%{opacity:.9}86%{opacity:.5}}
@keyframes bt-hw-shake{0%{transform:translate(-1.5px,0) rotate(-1.2deg)}50%{transform:translate(1.5px,-1px) rotate(1.2deg)}100%{transform:translate(-1.5px,0) rotate(-1.2deg)}}
/* the clown behind the log box: the balloon rises first, then he takes hold of the edge and looks over it */
#bt .hw-clip{position:absolute;inset:0;overflow:hidden;overflow-x:visible;overflow-y:clip} /* hides only what is still below the ground: the balloon swaying and the hand's groping fingers were cut at the box's right edge (operator, 2026-10-07). A browser without overflow:clip keeps hidden on both axes, as before */
#bt .hw-clo{position:absolute;left:0;bottom:0;width:var(--cw,70px);transform:translateY(106%);transition:transform 1.5s cubic-bezier(.5,0,.3,1)}
#bt .hw-cl.up1 .hw-clo{transform:translateY(56%);transition-duration:2s}
#bt .hw-cl.up2 .hw-clo{transform:translateY(3%);transition-duration:1s}
#bt .hw-ball{position:absolute;left:calc(var(--cw,70px)*.84);bottom:calc(var(--cw,70px)*.16);width:calc(var(--cw,70px)*.5);transform:translateY(125%);transition:transform 1.6s cubic-bezier(.5,0,.6,1)}
#bt .hw-cl.ball .hw-ball{transform:translateY(0);transition:transform 2.6s cubic-bezier(.2,.6,.3,1)}
#bt .hw-ball img{transform-origin:50% 100%;animation:bt-hw-sway 3.1s ease-in-out infinite alternate}
@keyframes bt-hw-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
/* bats burst out from behind the log when he shows */
#bt .hw-burst{position:absolute;left:calc(var(--cw,70px)*.5);bottom:10%;width:0;height:0}
#bt .hw-burst s{position:absolute;left:-16px;top:-10px;width:32px;opacity:0;text-decoration:none}
#bt .hw-burst.go s{animation:bt-hw-burst 2.4s cubic-bezier(.2,.6,.3,1) both}
#bt .hw-burst s:nth-child(1){--bx:-150px;--by:-190px}
#bt .hw-burst s:nth-child(2){--bx:120px;--by:-230px;animation-delay:.12s!important;width:26px}
#bt .hw-burst s:nth-child(3){--bx:-40px;--by:-270px;animation-delay:.22s!important;width:22px}
#bt .hw-burst s:nth-child(4){--bx:230px;--by:-150px;animation-delay:.3s!important;width:28px}
@keyframes bt-hw-burst{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(1.1)}}
/* a destination's window: somebody behind it, a spider under it, a web in its corner */
#bt .hw-d{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
#bt .hw-d.on{opacity:1;visibility:visible;transition:opacity .5s ease .3s}
#bt .hw-dp{position:absolute;overflow:hidden}
#bt .hw-dpi{position:absolute;left:0;top:0;width:var(--pw,54px);transform:translateX(-106%);transition:transform .5s ease}
#bt .hw-d.go .hw-dpi{transform:translateX(-44%);transition:transform 1.9s cubic-bezier(.5,0,.3,1) 1.1s}
#bt .hw-d.top .hw-dpi{transform:translateY(106%)}
#bt .hw-d.top.go .hw-dpi{transform:translateY(24%)}
#bt .hw-dpi .hw-s{display:none}
#bt .hw-d[data-who=ghost] .hw-dpi .hw-s[data-n=ghost],#bt .hw-d[data-who=clown] .hw-dpi .hw-s[data-n=clown]{display:block}
#bt .hw-d[data-who=ghost] .hw-dpi{filter:drop-shadow(0 0 6px rgba(190,200,255,.45))}
#bt .hw-ds{position:absolute;width:28px}
#bt .hw-ds u{display:block;width:1px;height:30px;margin:0 auto;background:linear-gradient(rgba(230,225,255,.15),rgba(230,225,255,.55));transform-origin:50% 0;transform:scaleY(0);transition:transform .3s ease}
#bt .hw-ds .hw-s{transform:translateY(-58px);opacity:0;transition:transform .3s ease,opacity .2s ease}
#bt .hw-d.go .hw-ds u{transform:scaleY(1);transition:transform 1.3s cubic-bezier(.3,1.3,.5,1) .5s}
#bt .hw-d.go .hw-ds .hw-s{transform:translateY(-4px);opacity:1;transition:transform 1.3s cubic-bezier(.3,1.3,.5,1) .5s,opacity .3s ease .5s}
#bt .hw-dw{position:absolute;z-index:7;width:92px;pointer-events:none;opacity:0;transform:scaleX(-1);transition:opacity .4s ease}
#bt .hw-dw.on{opacity:.42;transition:opacity .9s ease .4s}
#bt .portrait .hw-dw{z-index:8}
#bt .portrait .hw-d{z-index:6}
/* calm (?calm only): everything stands still; the spider stays in view, nobody flies or peeks */
#bt .hw-calm *,#bt .hw-calm *::before{animation:none!important}
#bt .hw-calm .hw-bat,#bt .hw-calm .hw-gh{display:none}
#bt .hw-calm .hw-sp u{transform:none}
#bt .hw-calm .hw-spb{transform:translateY(var(--L,90px))}
/* the switch: a small pumpkin badge at the right end of the LIVE pill (operator, 2026-10-05: "right beside LIVE, always in
 * sight, and it can always fold out"). The script pins it there (--sx/--sy) in both layouts, so it takes no room in the
 * title row; on a phone it steps down beside the mood chip while BOBAI's line lies over the pill's row. Its name folds
 * out beside it on a tap or under the mouse; switched off it is struck through and dashed, and stays where it is. */
#bt .hw-sw{--hf:#ff8a1e;--hs:#ffb469;--he:#1d1006;position:absolute;z-index:7;left:var(--sx,0);top:var(--sy,18px);opacity:0;display:flex;box-sizing:border-box;align-items:center;justify-content:center;height:22px;min-width:22px;margin:0;padding:0 3px;
  border-radius:999px;border:1px solid rgba(255,138,30,.7);background:rgba(8,6,10,.9);color:#ffb469;font:700 .56rem var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;pointer-events:auto;transition:border-color .3s ease}
#bt .bt-win:not(.portrait) .hw-sw{height:20px;min-width:20px;padding:0 2px;margin-top:1px}
#bt .hw-sw.hw-in{opacity:1;transition:opacity .5s ease,border-color .3s ease}
#bt .portrait .hw-sw.hw-in{transition:opacity .5s ease,border-color .3s ease,left .25s ease,top .25s ease} /* the step down beside the mood chip while he speaks */
#bt .hw-sw::after{content:"";position:absolute;inset:-8px}
#bt .hw-sw svg{flex:none;display:block;width:14px;height:14px;overflow:visible}
#bt .hw-sw .hw-x{display:none}
#bt .hw-sw[aria-pressed=false]{--hf:transparent;--hs:#ffb469;--he:#ffb469;border-style:dashed;border-color:#ffb469}
#bt .hw-sw[aria-pressed=false] .hw-x{display:block}
#bt .hw-sw:hover{border-color:#ffd9a8}
#bt .hw-sw:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
#bt .hw-sw .hw-t{position:absolute;z-index:2;left:calc(100% + 6px);top:50%;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,138,30,.55);background:rgba(10,7,12,.95);
  transform:translateY(-50%) scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
#bt .hw-sw .hw-t::after{content:attr(data-t)}
#bt .hw-sw.hw-say .hw-t,#bt .bt-win:not(.portrait) .hw-sw:hover .hw-t,#bt .hw-sw:focus-visible .hw-t{transform:translateY(-50%) scaleX(1);opacity:1}
/* CALM (operator, 2026-10-05: "far too nervous"): what stands, stands still. These rules come last and win. */
#bt .hw-o > *,#bt .hw-pk.a .hw-s,#bt .hw-mo img,#bt .hw-sk img,#bt .hw-pk i{animation:none}
#bt .hw-o[data-k=defi]::before{display:none}
#bt .hw-pk::before{animation-duration:8s}
#bt .hw-cd i{animation-duration:7s}
#bt .hw-ghb{animation-duration:5s}
#bt .hw-grab.on .hw-s{animation:none}
#bt .hw-ob img.d{animation:none;opacity:0}
#bt .hw-ob img:not(.d){animation:none;opacity:1}
#bt .hw-o.fly .hw-ob img.d{animation:bt-hw-wd .34s steps(1) infinite}
#bt .hw-o.fly .hw-ob img:not(.d){animation:bt-hw-wu .34s steps(1) infinite}
#bt .hw-o[data-k=liq]::before{animation-duration:6s}
#bt .hw-o[data-k=liq]::after{animation-duration:8s}
#bt .hw-o > *{filter:drop-shadow(0 0 7px rgba(0,0,0,.8)) drop-shadow(0 0 9px rgba(240,185,11,.3))}
/* the clown behind BOBAI steps out of the dark */
#bt .hw-grabi{transform:translateY(5%);transition:transform 1s ease}
#bt .hw-grab.on .hw-grabi{transform:none;transition:transform 2.4s ease}
/* the bots that circle the brain are small ghosts, each in its bot's colour */
/* the glow is drawn once behind the ghost (a soft disc in its bot's colour), not a filter: a drop-shadow on six pieces
 * that move every frame was redrawn every frame — the page fell from 21 to 8 frames a second (2026-10-06) */
#bt .hw-bg{position:absolute;left:0;top:0;width:var(--bg,22px);opacity:0;will-change:transform,opacity}
#bt .hw-bg::before{content:"";position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c,#fff) 55%,transparent),transparent);z-index:-1}
#bt .hw-bg img{position:relative}
/* the switch, easier to see: larger, with a slow glow; its name says what a click does */
#bt .hw-sw,#bt .bt-win:not(.portrait) .hw-sw{height:24px;min-width:24px;padding:0 3px;margin-top:0;border-width:1.5px;border-color:#ff9d3c}
#bt .hw-sw svg{width:16px;height:16px}
/* its slow glow is a ring that grows and fades (transform and opacity only: an animated box-shadow was painted anew on
   every frame — 2026-10-06, halloween.mjs rule 14 on a phone) */
#bt .hw-sw::before{content:"";position:absolute;inset:-1.5px;border-radius:999px;border:2px solid rgba(255,138,30,.6);pointer-events:none;opacity:0;animation:bt-hw-ring 3.6s ease-out infinite}
@keyframes bt-hw-ring{0%{transform:scale(1);opacity:1}60%,100%{transform:scale(1.55);opacity:0}}
#bt .hw-sw .hw-t{font-size:.6rem;color:#ffd9a8;box-shadow:0 6px 18px rgba(0,0,0,.6)}
/* a fright, not a hop (operator, 2026-10-05): the frightened face (script), and one short shiver as it starts */
#bt .hw-o.hw-sv > *,#bt .hw-pk.a.hw-sv .hw-s{animation:bt-hw-shiver .5s linear 1}
@keyframes bt-hw-shiver{0%,100%{transform:none}12%{transform:translate(-1.5px,0) rotate(-2deg)}25%{transform:translate(1.5px,-.5px) rotate(2deg)}38%{transform:translate(-1.2px,0) rotate(-1.5deg)}51%{transform:translate(1px,0) rotate(1.2deg)}64%{transform:translate(-.6px,0) rotate(-.6deg)}77%{transform:none}}
/* the bat's fright: wrapped in its wings (a third picture over the two of its wing beat) */
#bt .hw-o .hw-ob img.f{position:absolute;left:0;top:0;animation:none!important;opacity:0;transition:opacity .15s ease}
#bt .hw-o.hw-fr .hw-ob img:not(.f){opacity:0!important;animation:none!important}
#bt .hw-o.hw-fr .hw-ob img.f{opacity:1}
/* the switch, once more (operator, 2026-10-05: "larger, easier to see, further right — it cuts into LIVE — and it may
 * say on/off"): a pill with ON / OFF. Wide: a piece of the title row after LIVE where the row has the room (.hw-flow) */
#bt .hw-sw,#bt .bt-win:not(.portrait) .hw-sw{height:26px;min-width:26px;padding:0 8px 0 5px;gap:5px;font-size:.6rem;letter-spacing:.12em;background:rgba(20,10,2,.92)}
#bt .hw-sw .hw-oo{font-weight:800;color:#ffb469}
#bt .hw-sw[aria-pressed=false] .hw-oo{color:#ffd9a8}
#bt .hw-sw svg{width:17px;height:17px}
#bt .bt-win:not(.portrait) .hw-sw.hw-flow{position:relative;left:auto;top:auto;flex:none;margin:0 0 0 -4px}
/* the switch never slides and is there from the first moment; where the title row has no room for it (a 1280 screen)
 * it is the small badge on the pill's end, without the word */
#bt .hw-sw.hw-in,#bt .portrait .hw-sw.hw-in{transition:opacity .35s ease,border-color .3s ease}
#bt .bt-win:not(.portrait) .hw-sw.hw-min{height:22px;min-width:22px;padding:0 2px}
#bt .bt-win:not(.portrait) .hw-sw.hw-min .hw-oo{display:none}
#bt .bt-win:not(.portrait) .hw-sw.hw-min svg{width:15px;height:15px}

/* the switch's name folds out UNDER it on a wide screen (2026-10-05: beside it, it lay over MOMENTS and the clock) */
#bt .bt-win:not(.portrait) .hw-sw .hw-t{left:50%;top:calc(100% + 6px);transform:translateX(-50%) scaleY(0);transform-origin:50% 0;white-space:nowrap}
#bt .bt-win:not(.portrait) .hw-sw.hw-say .hw-t,#bt .bt-win:not(.portrait) .hw-sw:hover .hw-t,#bt .bt-win:not(.portrait) .hw-sw:focus-visible .hw-t{transform:translateX(-50%) scaleY(1)}
/* a phone: the skeleton hand that reaches down from the top and steals the moon */
#bt .hw-mh{position:absolute;left:0;top:0;opacity:0;will-change:transform;transition:opacity .5s ease}
#bt .hw-mh.on{opacity:1;transition:opacity .4s ease}
#bt .hw-mhi{transform:rotate(180deg);filter:drop-shadow(0 0 6px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(200,210,255,.25))}
/* a phone: the symbols' shadow is a soft disc on the moving piece, not a filter (two drop-shadows on six bobbing pieces
   were drawn again on every frame: 23 frames a second with the look on against 39 without — 2026-10-06, rule 14) */
#bt .bt-win.portrait .hw-ghb,#bt .bt-win.portrait .hw-cat .hw-s{filter:none}
#bt .bt-win.portrait .hw-o > *{filter:none;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(240,185,11,.08) 72%,transparent);border-radius:50%}

/* the clock keeps its width while it has no time yet (before the script runs), so the title row never shifts (2026-10-06) */
#bt .clk:empty::before{content:"00:00:00";visibility:hidden}
/* the MOMENTS count has room for two digits from the start: "0" turning "22" widened the button and the title row slid (2026-10-06) */
#bt .scn b{min-width:24px}
/* what is not seen does not move (2026-10-06, phone frame rate): the rising ghost and its chain, the clown's bats and a
   piece that is not placed kept animating at opacity 0 — every frame redrawn for nothing */
#bt .hw-gh:not(.run) *,#bt .hw-burst:not(.go) *,#bt .hw-i:not(.put) *,#bt .hw-i:not(.put)::before,#bt .hw-i:not(.put)::after{animation-play-state:paused}
/* the bat beats its wings for a moment where it hangs (2026-10-06); a fright (hw-fr) or its flight win over it */
#bt .hw-o.flap:not(.hw-fr) .hw-ob img.d{animation:bt-hw-wd .5s steps(1) infinite}
#bt .hw-o.flap:not(.hw-fr) .hw-ob img:not(.d):not(.f){animation:bt-hw-wu .5s steps(1) infinite}
/* THE MOON THROWN AT HIS HEAD (2026-10-06). The arm: the hand picture's own bare bones, stretched up past the top edge
   (mirrored like the hand, which hangs upside down). The flying moon and the stars of the hit lie in front of him. */
#bt .hw-mh .hw-arm{position:absolute;left:0;bottom:calc(100% - 3px);width:100%;height:1600px;object-fit:fill;transform:scaleX(-1);filter:drop-shadow(0 0 6px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(200,210,255,.25))}
#bt .hw-mo.hw-pan .hw-s{animation:bt-hw-shiver .45s linear infinite}
#bt .hw-fly{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
#bt .hw-flm{position:absolute;will-change:transform}
#bt .hw-flm img{display:block;width:100%;height:auto;user-select:none;filter:drop-shadow(0 0 10px rgba(210,215,255,.28))}
#bt .hw-flm .hw-s{display:block;position:relative}
#bt .hw-flm .hw-s img{opacity:0}
#bt .hw-flm .hw-s img + img{position:absolute;left:0;top:0}
#bt .hw-flm .hw-s img.on{opacity:1}
#bt .hw-pow{position:absolute;width:0;height:0}
#bt .hw-pow i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;background:radial-gradient(circle,#fff8d6 0 28%,#f0b90b 30% 60%,transparent 62%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:bt-hw-pow .95s ease-out forwards}
#bt .hw-pow i:nth-child(1){--a:-90deg}#bt .hw-pow i:nth-child(2){--a:-30deg}#bt .hw-pow i:nth-child(3){--a:30deg}#bt .hw-pow i:nth-child(4){--a:90deg}#bt .hw-pow i:nth-child(5){--a:150deg}#bt .hw-pow i:nth-child(6){--a:210deg}
@keyframes bt-hw-pow{0%{transform:rotate(var(--a)) translateX(4px) scale(.4);opacity:1}70%{opacity:1}100%{transform:rotate(var(--a)) translateX(38px) scale(1.1) rotate(90deg);opacity:0}}
/* the desktop's skeleton on its rope (2026-10-06): swings from the rope's top, in front of the moon it holds */
#bt .hw-skl{position:absolute;left:0;top:0;opacity:0;transform-origin:50% -600px;will-change:transform;transition:opacity .5s ease}
#bt .hw-skl.on{opacity:1}
#bt .hw-skl .hw-sklb{position:relative;filter:drop-shadow(0 0 6px rgba(0,0,0,.7)) drop-shadow(0 0 9px rgba(200,210,255,.22))}
#bt .hw-skl .hw-rope{position:absolute;left:0;bottom:calc(100% - 3px);width:100%;height:1600px;object-fit:fill}
#bt .hw-skl.hold .hw-sklb{animation:bt-hw-shiver .6s linear 1}
/* the big clown on tiptoe: a small rise and dip with every step while he creeps behind BOBAI (2026-10-06) */
#bt .hw-grab.sneak .hw-grabi{animation:bt-hw-tiptoe .62s ease-in-out infinite}
@keyframes bt-hw-tiptoe{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-1.6%) rotate(-1.2deg)}50%{transform:translateY(0) rotate(0deg)}75%{transform:translateY(-1.6%) rotate(1.2deg)}}
/* not in a scene, not drawn at all (2026-10-06: the skeleton's and the hand's tall rope and arm, kept at opacity 0 with
   will-change, were composited on every frame — rule 14 fell at 1440); they fade out first, then go */
#bt .hw-skl,#bt .hw-mh{visibility:hidden;transition:opacity .5s ease,visibility 0s .6s}
#bt .hw-skl.on,#bt .hw-mh.on{visibility:visible;transition:opacity .4s ease,visibility 0s 0s}
/* the front layer exists only while a moon flies or the stars of a hit burst (2026-10-06): an empty full-size layer over the
   3D canvas cost the page a quarter of its frames, with the look on or off */
#bt .hw-fly:empty{display:none}
/* the big clown's window ends at the stone's back rim; he moves inside it (2026-10-06) */
#bt .hw-grab{overflow:hidden}
#bt .hw-grabm{position:relative;will-change:transform}
#bt .hw-grabm .hw-grabi{height:100%}
/* one shadow on the moving skeleton, not two (2026-10-06, rule 14) */
#bt .hw-skl .hw-sklb{filter:drop-shadow(0 0 7px rgba(0,0,0,.7))}
/* the animated big clown (2026-10-06): the clip fills his window; the picture clown hides while it plays; tiptoe on the clip */
#bt .hw-clv{position:absolute;left:0;top:0;width:100%;height:100%;display:none}
#bt .hw-grab.vid .hw-clv{display:block}
#bt .hw-grab.vid .hw-grabi{display:none}
#bt .hw-grab.vid .hw-grabm{transform:none!important}
/* the bat's two wing pictures lie on each other (2026-10-06, operator: "odd wing movements on the phone"): in the wings-
   down picture its head and body sit 25 px of 145 higher, so every beat jumped the whole bat; now only the wings move */
#bt .hw-ob img.d,#bt .hw-bat img.d,#bt .hw-burst img.d{top:17.2%}

/* ================= BRAINROT (2026-11-05, terminal.js "BRAINROT") =================
 * Everything here lies under the figure (z 2), the labels (z 3) and every window (5+): z 1, no pointer events.
 * Only transform and opacity move, so the frame rate holds (halloween.mjs rule 14). */
#bt .br{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
#bt .br-on .br{opacity:1;visibility:visible;transition:opacity .6s ease}
#bt .br-caps{z-index:2}
/* BRAIN POP: the score chip (after the first pop, fades when the game rests) and the golden creature */
#bt .br-hud{position:absolute;z-index:2;left:50%;top:60px;transform:translateX(-50%) scale(.8);display:flex;gap:10px;align-items:baseline;padding:6px 14px;border-radius:999px;border:2px solid #000;background:rgba(10,4,16,.78);
  font:400 clamp(.95rem,1.8vw,1.3rem)/1 Impact,'Arial Black',sans-serif;letter-spacing:.03em;color:#7dff3a;pointer-events:none;opacity:0;transition:opacity .4s ease,transform .25s cubic-bezier(.2,1.6,.4,1);box-shadow:0 0 0 2px #ff3fd8}
#bt .br-on .br-hud.on{opacity:1;transform:translateX(-50%) scale(1)}
/* 6.11. (operator: "rank and score to share"): the chip's SHARE, the one part of it that takes a pointer, and only while it shows */
#bt .br-hud .br-shr{align-self:center;margin-left:2px;padding:5px 10px;border:2px solid #000;border-radius:999px;background:#ffe600;color:#000;font:inherit;font-size:.72em;letter-spacing:.06em;cursor:pointer;pointer-events:none;box-shadow:0 0 0 2px #ff3fd8}
#bt .br-on .br-hud.on .br-shr{pointer-events:auto}
#bt .br-hud .br-shr:hover{background:#7dff3a}
/* BRAIN POP DAILY (6.11.): the button in the scene (left, under the title row) and the game's window */
#bt .br-pbtn{display:none;position:absolute;z-index:6;left:12px;top:60px;padding:7px 12px;border:2px solid #000;border-radius:999px;background:#ff3fd8;color:#fff;font:400 clamp(.8rem,1.4vw,1rem)/1 Impact,'Arial Black',sans-serif;letter-spacing:.05em;cursor:pointer;box-shadow:0 0 0 2px #ffe600,0 6px 18px rgba(0,0,0,.45);animation:bt-br-pb 1.6s ease-in-out infinite alternate}
/* only in brainrot (operator 6.11.: "with ROT off, PLAY BRAIN POP still shows in the standard terminal"): the standard terminal
 * stays clean; the Ecosystem card's Brain Pop app and ?pop=play still open the game (they turn the look on) */
#bt .br-on .br-pbtn:not([hidden]){display:block}
#bt .br-pbtn:hover,#bt .br-pbtn:focus-visible{background:#7dff3a;color:#000;outline:none}
@keyframes bt-br-pb{0%{transform:rotate(-2deg) scale(1)}100%{transform:rotate(2deg) scale(1.05)}}
#bt .br-pp{position:absolute;inset:0;z-index:21;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(6,5,8,.7);pointer-events:auto}
#bt .br-pp[hidden]{display:none}
#bt .br-pp-c{width:min(440px,100%);max-height:100%;overflow:auto;padding:16px 18px;border-radius:16px;border:2px solid #ff3fd8;background:#140a1c;color:#f3eee6;font:400 .86rem/1.45 Inter,system-ui,sans-serif;box-shadow:0 0 0 2px #000,0 0 30px rgba(255,63,216,.35)}
#bt .br-pp-c>b{display:block;font:400 1.6rem/1.1 Impact,'Arial Black',sans-serif;letter-spacing:.03em;color:#ffe600;-webkit-text-stroke:1px #000;text-shadow:3px 3px 0 #ff3fd8;margin-bottom:8px}
#bt .br-pp-c p{margin:0 0 8px}
#bt .br-pp-me i{font-style:normal;font-weight:700;color:#7dff3a}
#bt .br-pp-re{margin-left:6px;padding:3px 8px;border:1px solid #2ef2ff;border-radius:8px;background:transparent;color:#2ef2ff;font:600 .75rem/1.2 Inter,system-ui,sans-serif;cursor:pointer}
#bt .br-pp-ch{padding:8px 10px;border-radius:10px;background:rgba(46,242,255,.12);border:1px solid rgba(46,242,255,.5)}
#bt .br-pp-ch b{color:#ffe600}
/* the next place (8.11.): the gap to the place above, the lead, the way into the top 10 */
#bt .br-pp-gap{margin:6px 0 2px;padding:7px 10px;border-radius:10px;background:rgba(255,63,216,.12);border:1px solid rgba(255,63,216,.45);font-size:.82rem}
#bt .br-pp-gap b{color:#7dff3a}
/* the daily streak (8.11.) */
#bt .br-pp-streak{margin:6px 0 2px;padding:6px 10px;border-radius:10px;background:rgba(255,140,0,.12);border:1px solid rgba(255,140,0,.45);font-size:.8rem}
#bt .br-pp-streak b{color:#ffb300}
#bt .br-pp-prize{font-size:.8rem;color:#cfc7dc}
#bt .br-pp-prize b{display:inline-block;font:400 1.05rem/1 Impact,'Arial Black',sans-serif;letter-spacing:.02em;color:#7dff3a;-webkit-text-stroke:.5px #000;text-shadow:2px 2px 0 #ff3fd8;transform:rotate(-2deg);word-break:break-all}
#bt .br-pp-prize small{color:#a8a2b4}
#bt .br-pp-prize b.one{color:#ffe600;text-shadow:2px 2px 0 #ff3fd8}
#bt .br-pp-days{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 6px;font:700 .74rem/1.2 Inter,system-ui,sans-serif;color:#2ef2ff;letter-spacing:.04em}
#bt .br-pp-days button{width:30px;height:26px;border:1px solid #2ef2ff;border-radius:8px;background:transparent;color:#2ef2ff;font:700 1rem/1 Inter,system-ui,sans-serif;cursor:pointer}
#bt .br-pp-days button:disabled{opacity:.3;cursor:default}
#bt .br-pp-code{color:#ffe600;letter-spacing:.08em}
#bt .br-pp-tabs{display:flex;gap:6px;margin:6px 0}
#bt .br-pp-tabs button{flex:1;padding:5px 6px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:#cfc7dc;font:700 .72rem/1.2 Inter,system-ui,sans-serif;cursor:pointer}
#bt .br-pp-tabs button.on{border-color:#ffe600;color:#ffe600}
#bt .br-pp-top{margin:0 0 8px;padding:0;list-style:none;counter-reset:pp}
#bt .br-pp-top li{display:flex;justify-content:space-between;gap:10px;padding:3px 2px;border-bottom:1px solid rgba(255,255,255,.07);counter-increment:pp}
#bt .br-pp-top li span::before{content:counter(pp) '. ';color:#a8a2b4}
#bt .br-pp-top li:first-child b{color:#ffe600}
#bt .br-pp-top li.me{background:rgba(125,255,58,.14);border-radius:6px;color:#7dff3a}
#bt .br-pp-next{color:#2ef2ff}
/* BOBAI DEFENDER (6.11.): the field lies over the live scene — no box, only a faint neon edge; pulling anywhere aims */
#bt .br-aim{position:absolute;z-index:7;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
#bt .br-aim[hidden],#bt .br-fld[hidden]{display:none}
#bt .br-fld{position:absolute;z-index:8;pointer-events:none;border-radius:16px;border:2px solid rgba(255,63,216,.55);box-shadow:0 0 22px rgba(255,63,216,.25),inset 0 0 30px rgba(46,242,255,.08);background:radial-gradient(circle at 50% 50%,rgba(10,2,16,0) 40%,rgba(10,2,16,.28))}
#bt .br-fld.slow{border-color:#2ef2ff;box-shadow:0 0 34px rgba(46,242,255,.6),inset 0 0 50px rgba(46,242,255,.25)}
#bt .br-fld.rush{border-color:#ffe600;box-shadow:0 0 34px rgba(255,230,0,.6),inset 0 0 50px rgba(255,230,0,.22)}
#bt .br-fld.armed{border-color:#ff5a1f;animation:bt-br-armed .35s steps(2) infinite}
#bt .br-fld .br-an{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
#bt .br-fld .br-an img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(255,63,216,.35))}
#bt .br-fld .br-an.rug img{filter:drop-shadow(0 0 12px rgba(255,40,60,.9))}
#bt .br-fld .br-an.gold img{filter:drop-shadow(0 0 12px #ffd400) brightness(1.15) saturate(1.4)}
#bt .br-fld .br-an em{position:absolute;left:50%;top:-6px;transform:translateX(-50%);padding:1px 6px;border:2px solid #000;border-radius:6px;background:#ff2840;color:#fff;font:400 .66rem/1.1 Impact,'Arial Black',sans-serif;letter-spacing:.05em}
#bt .br-fld .br-an.rug.safe em{background:#ffe600;color:#000}
#bt .br-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#bt .br-line polyline{fill:none;stroke:hsl(calc(130 - 130 * var(--pw,0)),100%,60%);stroke-width:5;stroke-dasharray:2 14;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(0,0,0,.9))}
#bt .br-ball{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;border-radius:50%;box-shadow:0 0 14px #7dff3a,0 0 4px #fff}
#bt .br-ball img{display:block;width:100%;height:100%;object-fit:contain}
#bt .br-ball.burn{box-shadow:0 0 22px #ff5a1f,0 0 8px #ffe600}
#bt .br-hp{position:absolute;transform:translate(-50%,-50%);pointer-events:none;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.65);color:#ff3fd8;font:700 .78rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap}
#bt .br-hp.out{color:#888;text-decoration:line-through}
#bt .br-core{position:absolute;left:50%;top:50%;width:14%;height:14%;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(255,230,0,.35);pointer-events:none}
#bt .br-ptx.bad{color:#ff5a6e}
#bt .br-run #bt-labs,#bt .br-run .lab{opacity:.18}
/* in the game nothing of the terminal's own lies on the field: his bubble, the joke button, the ring and the disco ball step out */
#bt .br-run .say,#bt .br-run .joke,#bt .br-run .br-stl .br-ring,#bt .br-run .br-stl .br-disco{opacity:0!important;pointer-events:none!important}
#bt .br-ctl{position:absolute;z-index:23;right:10px;bottom:10px;display:flex;gap:8px}
#bt .br-helper{position:absolute;width:12%;max-width:90px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 12px #7dff3a);animation:bt-br-helper .65s ease-out forwards}
@keyframes bt-br-helper{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-20deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}}
#bt .br-combo{position:absolute;left:0;right:0;top:auto;bottom:3%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,63,216,.55) 20%,rgba(46,242,255,.55) 80%,transparent);animation:bt-br-combo 1.8s cubic-bezier(.2,1.6,.4,1) forwards}
#bt .br-combo b{font:400 clamp(1.8rem,6vw,3.6rem)/1 Impact,'Arial Black',sans-serif;color:#ffe600;-webkit-text-stroke:2px #000;text-shadow:4px 4px 0 #ff3fd8;letter-spacing:.03em}
#bt .br-combo span{font:700 clamp(.7rem,1.6vw,1rem)/1.2 Inter,system-ui,sans-serif;color:#fff;text-shadow:0 2px 4px #000}
#bt .br-combo.mega{background:linear-gradient(90deg,transparent,rgba(125,255,58,.6) 20%,rgba(255,230,0,.6) 80%,transparent)}
#bt .br-combo.god{background:linear-gradient(90deg,transparent,rgba(255,215,0,.75) 20%,rgba(255,63,216,.7) 80%,transparent)}
#bt .br-combo.god b{color:#fff;text-shadow:4px 4px 0 #ffb300,0 0 30px #ffe600}
/* so close (8.11.): the streak broke one or two short of SUPER / MEGA / GOD */
#bt .br-combo.near{background:linear-gradient(90deg,transparent,rgba(255,77,109,.55) 20%,rgba(46,242,255,.45) 80%,transparent)}
#bt .br-combo.near b{color:#fff;text-shadow:4px 4px 0 #ff4d6d}
@keyframes bt-br-combo{0%{opacity:0;transform:scaleY(.2)}12%{opacity:1;transform:scaleY(1.1)}20%{transform:scaleY(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
/* in the game: the look's own creatures rest (they looked like foes), the log steps back, on a phone the title row too */
#bt .br-run .br > .br-r:not(.bit){display:none}
#bt .br-run .term{opacity:.3}
#bt .br-run.portrait > .hud{opacity:0;pointer-events:none}
#bt .br-ctl[hidden]{display:none}
#bt .br-ctl button{padding:8px 12px;border:2px solid #000;border-radius:10px;font:400 .95rem/1 Impact,'Arial Black',sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 0 0 2px #ff3fd8}
#bt .br-ctl .re{background:#7dff3a;color:#000}
#bt .br-ctl .qu{background:#2a1f33;color:#fff}
/* BRAIN POP 2.0 (6.11.): the arena — square, the same on every screen, over the scene; a tap in it is a shot */
#bt .br-arena{position:absolute;z-index:8;border-radius:18px;border:3px solid #ff3fd8;background:radial-gradient(circle at 50% 45%,rgba(10,2,16,0) 45%,rgba(10,2,16,.32));box-shadow:0 0 0 3px #000,0 0 28px rgba(255,63,216,.45),inset 0 0 40px rgba(46,242,255,.18);overflow:hidden;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
#bt .br-arena[hidden]{display:none}
#bt .br-ptx{position:absolute;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;font:400 clamp(.9rem,2.2vw,1.25rem)/1 Impact,'Arial Black',sans-serif;color:#7dff3a;-webkit-text-stroke:1px #000;text-shadow:2px 2px 0 #000;animation:bt-br-ptx .9s ease-out forwards}
#bt .br-ptx.gold{color:#ffe600}
#bt .br-ptx.big{font-size:clamp(1.2rem,3.4vw,2rem);color:#ff3fd8;text-shadow:3px 3px 0 #000}
@keyframes bt-br-ptx{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
#bt .br-arena.slow{border-color:#2ef2ff;box-shadow:0 0 0 3px #000,0 0 40px rgba(46,242,255,.7),inset 0 0 60px rgba(46,242,255,.35)}
#bt .br-arena.rush{border-color:#ffe600;box-shadow:0 0 0 3px #000,0 0 40px rgba(255,230,0,.7),inset 0 0 60px rgba(255,230,0,.3)}
#bt .br-arena.armed{border-color:#ff5a1f;animation:bt-br-armed .35s steps(2) infinite}
@keyframes bt-br-armed{50%{box-shadow:0 0 0 3px #000,0 0 50px rgba(255,90,31,.9),inset 0 0 70px rgba(255,90,31,.45)}}
#bt .br-arena.hammer{cursor:cell}
/* the CS2-style crosshair: small, static, four short lines with a gap, green with a black edge — the cursor itself */
#bt .br-arena{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%2300ff5a' stroke-width='2'/></svg>") 12 12,crosshair}
#bt .br-arena.xs1cg{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%2300ff5a' stroke-width='2'/></svg>") 12 12,crosshair}
#bt .br-arena.xs1cc{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%232ef2ff' stroke-width='2'/></svg>") 12 12,crosshair}
#bt .br-arena.xs1cy{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%23ffe600' stroke-width='2'/></svg>") 12 12,crosshair}
#bt .br-arena.xs1cp{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%23ff3fd8' stroke-width='2'/></svg>") 12 12,crosshair}
#bt .br-arena.xs1cr{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%23ff2840' stroke-width='2'/></svg>") 12 12,crosshair}
#bt .br-arena.xs1cw{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%23ffffff' stroke-width='2'/></svg>") 12 12,crosshair}
#bt .br-arena.xs2cg{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%2300ff5a' stroke-width='2'/><rect x='10.5' y='10.5' width='3' height='3' fill='%2300ff5a' stroke='%23000' stroke-width='1'/></svg>") 12 12,crosshair}
#bt .br-arena.xs2cc{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%232ef2ff' stroke-width='2'/><rect x='10.5' y='10.5' width='3' height='3' fill='%232ef2ff' stroke='%23000' stroke-width='1'/></svg>") 12 12,crosshair}
#bt .br-arena.xs2cy{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%23ffe600' stroke-width='2'/><rect x='10.5' y='10.5' width='3' height='3' fill='%23ffe600' stroke='%23000' stroke-width='1'/></svg>") 12 12,crosshair}
#bt .br-arena.xs2cp{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%23ff3fd8' stroke-width='2'/><rect x='10.5' y='10.5' width='3' height='3' fill='%23ff3fd8' stroke='%23000' stroke-width='1'/></svg>") 12 12,crosshair}
#bt .br-arena.xs2cr{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%23ff2840' stroke-width='2'/><rect x='10.5' y='10.5' width='3' height='3' fill='%23ff2840' stroke='%23000' stroke-width='1'/></svg>") 12 12,crosshair}
#bt .br-arena.xs2cw{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%23ffffff' stroke-width='2'/><rect x='10.5' y='10.5' width='3' height='3' fill='%23ffffff' stroke='%23000' stroke-width='1'/></svg>") 12 12,crosshair}
#bt .br-arena.xs3cg{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='3' fill='%2300ff5a' stroke='%23000' stroke-width='1.5'/></svg>") 8 8,crosshair}
#bt .br-arena.xs3cc{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='3' fill='%232ef2ff' stroke='%23000' stroke-width='1.5'/></svg>") 8 8,crosshair}
#bt .br-arena.xs3cy{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='3' fill='%23ffe600' stroke='%23000' stroke-width='1.5'/></svg>") 8 8,crosshair}
#bt .br-arena.xs3cp{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='3' fill='%23ff3fd8' stroke='%23000' stroke-width='1.5'/></svg>") 8 8,crosshair}
#bt .br-arena.xs3cr{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='3' fill='%23ff2840' stroke='%23000' stroke-width='1.5'/></svg>") 8 8,crosshair}
#bt .br-arena.xs3cw{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='3' fill='%23ffffff' stroke='%23000' stroke-width='1.5'/></svg>") 8 8,crosshair}
#bt .br-arena.xs4cg{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='11' fill='none' stroke='%23000' stroke-width='4'/><circle cx='16' cy='16' r='11' fill='none' stroke='%2300ff5a' stroke-width='2'/><circle cx='16' cy='16' r='2' fill='%2300ff5a' stroke='%23000' stroke-width='1'/></svg>") 16 16,crosshair}
#bt .br-arena.xs4cc{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='11' fill='none' stroke='%23000' stroke-width='4'/><circle cx='16' cy='16' r='11' fill='none' stroke='%232ef2ff' stroke-width='2'/><circle cx='16' cy='16' r='2' fill='%232ef2ff' stroke='%23000' stroke-width='1'/></svg>") 16 16,crosshair}
#bt .br-arena.xs4cy{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='11' fill='none' stroke='%23000' stroke-width='4'/><circle cx='16' cy='16' r='11' fill='none' stroke='%23ffe600' stroke-width='2'/><circle cx='16' cy='16' r='2' fill='%23ffe600' stroke='%23000' stroke-width='1'/></svg>") 16 16,crosshair}
#bt .br-arena.xs4cp{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='11' fill='none' stroke='%23000' stroke-width='4'/><circle cx='16' cy='16' r='11' fill='none' stroke='%23ff3fd8' stroke-width='2'/><circle cx='16' cy='16' r='2' fill='%23ff3fd8' stroke='%23000' stroke-width='1'/></svg>") 16 16,crosshair}
#bt .br-arena.xs4cr{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='11' fill='none' stroke='%23000' stroke-width='4'/><circle cx='16' cy='16' r='11' fill='none' stroke='%23ff2840' stroke-width='2'/><circle cx='16' cy='16' r='2' fill='%23ff2840' stroke='%23000' stroke-width='1'/></svg>") 16 16,crosshair}
#bt .br-arena.xs4cw{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='11' fill='none' stroke='%23000' stroke-width='4'/><circle cx='16' cy='16' r='11' fill='none' stroke='%23ffffff' stroke-width='2'/><circle cx='16' cy='16' r='2' fill='%23ffffff' stroke='%23000' stroke-width='1'/></svg>") 16 16,crosshair}
#bt .br-arena.hammer{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M16 3v9M16 20v9M3 16h9M20 16h9' stroke='%23000' stroke-width='4'/><path d='M16 4v8M16 20v8M4 16h8M20 16h8' stroke='%23ffe600' stroke-width='2'/></svg>") 16 16,crosshair}
#bt .br-xh{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;z-index:5;border:2px solid #00ff5a;border-radius:50%;box-shadow:0 0 0 1px #000}
#bt .br-xh[hidden]{display:none}
#bt .br-xh.shot{animation:bt-br-xh .3s ease-out forwards}
@keyframes bt-br-xh{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(1.4)}}
/* the stations' meters: a ring under each creature that fills with the hits; near full it glows; the number is what is left */
#bt .br-chg{display:none;position:absolute;left:50%;bottom:-12px;width:30px;height:30px;transform:translateX(-50%);border-radius:50%;background:conic-gradient(#7dff3a calc(var(--p,0) * 360deg),rgba(0,0,0,.6) 0);box-shadow:0 0 0 2px #000}
#bt .br-run .br-chg{display:block}
/* what is on now: one chip per active power, its picture, what it does, how long */
#bt .br-act{position:absolute;z-index:22;left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:94%;pointer-events:none}
#bt .br-act[hidden]{display:none}
#bt .br-act span{display:flex;align-items:center;gap:5px;padding:3px 10px 3px 3px;border:2px solid #000;border-radius:999px;background:rgba(20,10,28,.92);color:#fff;font:400 .82rem/1 Impact,'Arial Black',sans-serif;letter-spacing:.03em;box-shadow:0 0 0 2px #2ef2ff;animation:bt-br-act .9s ease-in-out infinite alternate}
#bt .br-act img{width:24px;height:24px;object-fit:contain}
#bt .br-act .slow{box-shadow:0 0 0 2px #2ef2ff}
#bt .br-act .gold,#bt .br-act .god{box-shadow:0 0 0 2px #ffe600;color:#ffe600}
#bt .br-act .ham{box-shadow:0 0 0 2px #ff9a1f}
#bt .br-act .help{box-shadow:0 0 0 2px #7dff3a;color:#7dff3a}
#bt .br-act .burn{box-shadow:0 0 0 2px #ff5a1f;color:#ff9a1f}
#bt .br-act .super{box-shadow:0 0 0 2px #ff3fd8;color:#ff9be8}
@keyframes bt-br-act{0%{transform:scale(1)}100%{transform:scale(1.05)}}
#bt .br-pp-pb{margin:0 0 6px;font:400 1rem/1.2 Impact,'Arial Black',sans-serif;color:#2ef2ff;letter-spacing:.03em}
#bt .br-pp-pb.new{color:#ffe600;font-size:1.3rem;text-shadow:2px 2px 0 #ff3fd8}
#bt .br-fly{position:absolute;left:-40px;top:-40px;width:80px;height:80px;object-fit:contain;pointer-events:none;z-index:6;filter:drop-shadow(0 0 14px #ffe600)}
#bt .br-chg i{position:absolute;inset:4px;border-radius:50%;background:#140a1c}
#bt .br-chg em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 .8rem/1 Impact,'Arial Black',sans-serif;font-style:normal;color:#fff}
#bt .br-chg.hot{animation:bt-br-hot .45s steps(2) infinite}
#bt .br-chg.hot em{color:#ffe600}
@keyframes bt-br-hot{50%{box-shadow:0 0 0 2px #000,0 0 14px 4px #ffe600}}
#bt .br-an{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
#bt .br-an img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
#bt .br-an i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(125,255,58,.75);box-shadow:0 0 10px rgba(125,255,58,.35)}
#bt .br-an.gold img{filter:drop-shadow(0 0 10px #ffd400) brightness(1.15) saturate(1.4)}
#bt .br-an.gold i{border-color:#ffe600}
#bt .br-an.rug i{border:2px solid rgba(255,40,60,.9);box-shadow:0 0 14px rgba(255,40,60,.6)}
#bt .br-an.rug em{position:absolute;left:50%;top:-4px;transform:translateX(-50%);padding:1px 6px;border:2px solid #000;border-radius:6px;background:#ff2840;color:#fff;font:400 .7rem/1.1 Impact,'Arial Black',sans-serif;letter-spacing:.05em}
#bt .br-an.rug.safe em{background:#ffe600;color:#000}
#bt .br-an.boss i{border-width:3px;border-color:#ff3fd8}
#bt .br-miss{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;animation:bt-br-miss .6s ease-out forwards}
#bt .br-miss::before,#bt .br-miss::after{content:"";position:absolute;left:11px;top:0;width:4px;height:26px;border-radius:2px;background:#ff2840;transform:rotate(45deg)}
#bt .br-miss::after{transform:rotate(-45deg)}
@keyframes bt-br-miss{0%{transform:scale(1.4);opacity:1}100%{transform:scale(.6);opacity:0}}
#bt .br-boom{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,230,0,.85),rgba(255,90,31,.6) 45%,rgba(255,63,216,0) 70%);animation:bt-br-boom .7s ease-out forwards}
@keyframes bt-br-boom{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(1.1);opacity:0}}
#bt .br-wban{position:absolute;z-index:22;left:50%;top:auto;bottom:16%;transform:translate(-50%,-50%) scale(.6);display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border:3px solid #000;border-radius:18px;background:#ffe600;color:#000;box-shadow:0 0 0 3px #ff3fd8,0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none}
#bt .br-wban[hidden]{display:none}
#bt .br-wban.on{animation:bt-br-ban 2.2s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes bt-br-ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}20%{transform:translate(-50%,-50%) scale(1) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(.95)}}
#bt .br-wban img{width:64px;height:64px;object-fit:contain}
#bt .br-wban span{display:flex;flex-direction:column;font:700 .8rem/1.2 Inter,system-ui,sans-serif}
#bt .br-wban b{font:400 1.5rem/1 Impact,'Arial Black',sans-serif;letter-spacing:.03em}
#bt .br-hud .br-pm{color:#ff7a7a}
/* the start window: how to play in five seconds, the prize pool */
#bt .br-pp-how{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 8px}
#bt .br-pp-how span{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.06);font-size:.76rem;line-height:1.25}
#bt .br-pp-how img{width:34px;height:34px;object-fit:contain;flex:none}
#bt .br-pp-how b{color:#ffe600}
#bt .br-pp-how .x{flex:none;width:34px;text-align:center;font-style:normal;font-size:1.3rem;color:#ff2840}
#bt .br-pp-how .pw{grid-column:1/-1;flex-wrap:wrap}
#bt .br-pp-how .pw img{width:26px;height:26px;margin-right:-4px}
#bt .br-pp-pool{margin:6px 0 8px;padding:10px 12px;border-radius:12px;border:2px solid #ffe600;background:rgba(255,230,0,.07)}
#bt .br-pp-pool p{margin:0 0 6px;font-size:.8rem}
#bt .br-pp-pool .amt{font:400 1.25rem/1 Impact,'Arial Black',sans-serif;color:#ffe600;letter-spacing:.02em}
#bt .br-pp-pool .usd{color:#cfc7dc}
#bt .br-pp-pool .bar{position:relative;height:16px;margin:4px 0 8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,230,0,.5)}
#bt .br-pp-pool .bar i{position:absolute;left:0;top:0;bottom:0;width:1.5%;background:linear-gradient(90deg,#ff3fd8,#ffe600,#7dff3a)}
#bt .br-pp-pool .bar span{position:absolute;right:8px;top:0;font:700 .66rem/16px Inter,system-ui,sans-serif;color:#fff}
#bt .br-pp-pool code{padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.4);color:#7dff3a}
#bt .br-pp-copy{margin-left:4px;padding:2px 8px;border:1px solid #7dff3a;border-radius:7px;background:transparent;color:#7dff3a;font:600 .72rem/1.2 Inter,system-ui,sans-serif;cursor:pointer}
#bt .br-pp-pool .warn{margin:0;padding:6px 8px;border-radius:8px;background:rgba(255,40,64,.14);color:#ffb3bd;font-size:.74rem}
#bt .br-pp-pool .warn b{color:#ff5a6e}
/* during a Brain Pop run (6.11., operator: "the brain.log must not grow during the game, no windows popping up"): the
 * log, the labels and the bots' names take no pointer, so nothing grows or opens; the chain's alerts still come */
#bt .br-run .term,#bt .br-run .lab,#bt .br-run #bt-labs,#bt .br-run .bg{pointer-events:none}
#bt .br-pp-bob{margin:8px 0 0;padding:8px 10px;border-radius:10px;border:1px solid rgba(240,185,11,.45);background:rgba(240,185,11,.08);font-size:.78rem;color:#e9e2d2}
#bt .br-pp-bob b{color:#f0b90b}
#bt .br-pp-bob a{display:inline-block;margin-top:4px;padding:4px 10px;border-radius:8px;background:#f0b90b;color:#120e04;font-weight:700;text-decoration:none;white-space:nowrap}
#bt .br-pp-own{margin-left:4px;padding:3px 8px;border:1px solid #ff3fd8;border-radius:8px;background:transparent;color:#ff3fd8;font:600 .75rem/1.2 Inter,system-ui,sans-serif;cursor:pointer}
#bt .br-pp-nm{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-2px 0 8px}
#bt .br-pp-nm[hidden]{display:none}
#bt .br-pp-nm input{flex:1 1 150px;min-width:0;padding:8px 10px;border:2px solid #2ef2ff;border-radius:10px;background:#0b0610;color:#fff;font:600 16px/1.2 Inter,system-ui,sans-serif;outline:none} /* 16px: iOS never zooms into it (6.11.) */
#bt .br-pp-nm input:focus{border-color:#7dff3a}
#bt .br-pp-rot{padding:8px 12px;border:2px solid #000;border-radius:10px;background:#ff3fd8;color:#fff;font:400 .95rem/1 Impact,'Arial Black',sans-serif;letter-spacing:.04em;cursor:pointer}
#bt .br-pp-nm small{flex-basis:100%;color:#a8a2b4;font-size:.72rem}
#bt .br-pp-nm small.bad{color:#ff7a7a}
#bt .br-pp-nmh{flex-basis:100%;font:400 1rem/1.1 Impact,'Arial Black',sans-serif;color:#2ef2ff;letter-spacing:.04em}
#bt .br-pp-none,#bt .br-pp-n{color:#a8a2b4;font-size:.76rem}
#bt .br-pp-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;position:sticky;bottom:-16px;z-index:2;padding:10px 0 14px;background:linear-gradient(180deg,rgba(20,10,28,0),#140a1c 30%)} /* PLAY always in sight (6.11.: it slid under the fold) */
#bt .br-pp-b button{flex:1 1 120px;padding:10px 12px;border:2px solid #000;border-radius:10px;background:#2a1f33;color:#f3eee6;font:700 .82rem/1.2 Inter,system-ui,sans-serif;cursor:pointer}
#bt .br-pp-b .br-pp-go,#bt .br-pp-b .br-pp-again{background:#7dff3a;color:#000;font:400 1.15rem/1 Impact,'Arial Black',sans-serif;letter-spacing:.05em}
#bt .br-pp-b .br-pp-share{background:#ffe600;color:#000}
#bt .br-pp-b .br-pp-dare{background:#ff3fd8;color:#fff}
#bt .br-pp-b button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#bt .br-hud .br-pt{color:#fff}
#bt .br-hud .br-pg{color:#a8a2b4}
#bt .br-hud i{font-style:normal;color:#ffe600}
#bt .br-hud s{text-decoration:none;color:#2ef2ff;font-size:.78em}
#bt .br-r.gold .br-b img{filter:sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 8px #ffd400)}
/* the stations and bots in costume: on their lights, bobbing; a jump when a station shouts, a spin when a bot ran */
#bt .br-stl .br-st,#bt .br-stl .br-bot{position:absolute;left:0;top:0;will-change:transform}
#bt .br-stl .br-stage{position:absolute;left:0;top:0}
#bt .br-stl .br-stage img{display:block;width:100%;height:auto}
/* the disco ball switches on: coloured beams turn out of it (the ball sits at 50 % / 80 % of the stage picture) */
/* 5.11. night (operator: "the disco ball should be seen"): its own picture over the painted one, drawn after the stations'
 * creatures; it sways and sparkles always, the beams turn out of its middle when it switches on */
#bt .br-stl .br-disco{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
/* 6.11. (operator: "the ring is needed at the next buyback; put the disco ball in the ring"): the buyback ring on this
 * layer, over the stage, brighter than the scene's (the cosmos behind it is loud), the ball in its middle */
#bt .br-stl .br-ring{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,255,255,.45))}
#bt .br-stl .br-ring circle,#bt .br-stl .br-ring path{fill:none;stroke-width:.12;stroke-opacity:.92}
#bt .br-stl .br-ring .b{stroke:#fff;stroke-opacity:.22}
#bt .br-stl .br-disco img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;animation:bt-br-ball 2.4s ease-in-out infinite alternate}
@keyframes bt-br-ball{0%{transform:rotate(-7deg)}100%{transform:rotate(7deg)}}
#bt .br-stl .br-disco b{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 28%,#fff 0 3%,transparent 9%),radial-gradient(circle at 68% 44%,#fff 0 2.5%,transparent 8%),radial-gradient(circle at 44% 72%,#fff 0 2%,transparent 7%);animation:bt-br-glint 1.3s steps(1) infinite}
@keyframes bt-br-glint{0%{opacity:1;transform:rotate(0deg)}33%{opacity:.35;transform:rotate(120deg)}66%{opacity:.8;transform:rotate(240deg)}}
#bt .br-stl .br-disco i{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;transition:opacity .6s ease}
#bt .br-stl .br-disco.on i{opacity:.55}
#bt .br-stl .br-disco i::before{content:"";position:absolute;left:-230px;top:-230px;width:460px;height:460px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,63,216,.55) 8deg 13deg,transparent 13deg 52deg,rgba(46,242,255,.55) 52deg 57deg,transparent 57deg 98deg,rgba(125,255,58,.55) 98deg 103deg,transparent 103deg 150deg,rgba(255,230,0,.55) 150deg 155deg,transparent 155deg 200deg,rgba(255,63,216,.55) 200deg 205deg,transparent 205deg 250deg,rgba(46,242,255,.55) 250deg 255deg,transparent 255deg 300deg,rgba(125,255,58,.55) 300deg 305deg,transparent 305deg 360deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 70%);mask:radial-gradient(circle,#000 8%,transparent 70%);animation:bt-br-disco 3s linear infinite}
@keyframes bt-br-disco{to{transform:rotate(360deg)}}
/* captions in changing colours: a change every 0.45 s (2.2 a second, under the WCAG line of three flashes) */
#bt .br-cap.rb{animation:bt-br-cap 1.7s cubic-bezier(.2,1.4,.4,1) both,bt-br-rb 2.25s steps(1) infinite}
#bt .br-cap.big.rb{animation:bt-br-cap 2.2s cubic-bezier(.2,1.4,.4,1) both,bt-br-rb 2.25s steps(1) infinite}
@keyframes bt-br-rb{0%{color:#7dff3a}20%{color:#ff3fd8}40%{color:#2ef2ff}60%{color:#ffe600}80%{color:#ff7a1a}}
/* the bob is written by the script into the costume's own transform (one moving layer each) */
#bt .br-stl .br-b img{filter:none}
#bt .br-stl .br-b img.a{animation:none;opacity:1}
#bt .br-stl .br-b img.z{animation:none;opacity:0}
#bt .br-stl .jump .br-b img.z,#bt .br-stl .spin .br-b img.z{opacity:1}
#bt .br-stl .jump .br-b img.a,#bt .br-stl .spin .br-b img.a{opacity:0}
@keyframes bt-br-bob{0%{transform:translateY(0) rotate(-6deg)}100%{transform:translateY(-14%) rotate(6deg)}}
#bt .br-stl .br-st.jump .br-b{animation:bt-br-jump .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes bt-br-jump{0%{transform:none}35%{transform:translateY(-90%) rotate(200deg) scale(1.45)}70%{transform:translateY(-20%) rotate(350deg) scale(1.1)}100%{transform:none}}
#bt .br-stl .br-bot.spin .br-b{animation:bt-br-spin .8s ease-out}
@keyframes bt-br-spin{0%{transform:none}50%{transform:scale(1.9) rotate(360deg)}100%{transform:rotate(720deg)}} /* the words: above him (after the figure), under the labels (3) and the windows */
#bt .br-flash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:overlay;background:radial-gradient(circle at 30% 40%,var(--c1,#ff3fd8),transparent 60%),radial-gradient(circle at 75% 65%,var(--c2,#2ef2ff),transparent 60%)}
#bt .br-r{position:absolute;left:0;top:0;will-change:transform}
#bt .br-r:not(.bit) img{pointer-events:auto;cursor:pointer} /* poke one: it pops (the layer itself takes no pointer) */
#bt .br-b{position:relative;display:block}
#bt .br-b.fl{transform:scaleX(-1)}
#bt .br-b img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none} /* no drop-shadow: a filter on 15 swapping pictures cost frames */
#bt .br-b img.z{position:absolute;inset:0;opacity:0;animation:bt-br-z var(--fr,.3s) steps(1) infinite}
#bt .br-b img.a{animation:bt-br-a var(--fr,.3s) steps(1) infinite}
@keyframes bt-br-z{0%{opacity:0}50%{opacity:1}}
@keyframes bt-br-a{0%{opacity:1}50%{opacity:0}}
#bt .br-cap{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));white-space:nowrap;font:400 clamp(1.3rem,3.4vw,2.6rem)/1 Impact,'Haettenschweiler','Arial Narrow Bold','Arial Black',sans-serif;letter-spacing:.02em;text-transform:uppercase;
  color:var(--c,#7dff3a);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000,-1px -1px 0 #ff3fd8;animation:bt-br-cap 1.7s cubic-bezier(.2,1.4,.4,1) both}
#bt .br-cap.big{font-size:clamp(2rem,6.4vw,4.8rem);-webkit-text-stroke:3px #000;animation-duration:2.2s}
#bt .br-cap.sm{font-size:clamp(.8rem,1.6vw,1.15rem);-webkit-text-stroke:1.2px #000;text-shadow:2px 2px 0 #000}
@keyframes bt-br-cap{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(3)}12%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.9)}20%{transform:translate(-50%,-50%) rotate(calc(var(--r,0deg) * -1)) scale(1.08)}30%,80%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.6)}}
/* the switch: the Halloween pumpkin's place and rules (.hw-sw), in brain pink */
#bt .br-sw{--hf:#ff7ae6;--hs:#ffc2f3;--he:#3a0a33;border-color:rgba(255,63,216,.8);color:#ffc2f3}
#bt .br-sw .hw-oo{color:#ffc2f3}
#bt .br-sw[aria-pressed=false]{--hf:transparent;--hs:#ffc2f3;--he:#ffc2f3;border-color:#ffc2f3}
#bt .br-sw:hover{border-color:#ffe3fa}
#bt .br-sw .hw-t{border-color:rgba(255,63,216,.6)}

/* the health notice before the brainrot look (2026-11-05): above everything in the window, calm, the safe choice first */
#bt .br-ask{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,5,8,.72);pointer-events:auto}
#bt .br-ask-c{max-width:420px;padding:18px 20px;border-radius:16px;border:1px solid rgba(240,185,11,.45);background:#121014;color:#f3eee6;font:400 .9rem/1.5 Inter,system-ui,sans-serif;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#bt .br-ask-c b{display:block;font:700 1.05rem/1.3 'Space Grotesk',Inter,sans-serif;color:var(--gold,#f0b90b);margin-bottom:8px}
#bt .br-ask-c p{margin:0 0 8px}
#bt .br-ask-w{color:#ffd9a8}
#bt .br-ask-b{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}
#bt .br-ask-b button{flex:1 1 160px;padding:10px 12px;border-radius:10px;font:700 .85rem/1.2 Inter,system-ui,sans-serif;cursor:pointer}
#bt .br-ask-no{border:1px solid var(--gold,#f0b90b);background:var(--gold,#f0b90b);color:#120e04} /* both choices equally in sight (operator: stay or switch) */
#bt .br-ask-yes{border:1px solid #ff3fd8;background:#ff3fd8;color:#1a0416}
#bt .br-ask-b button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#bt .br-ask-c small{display:block;color:#a8a2b4;font-size:.75rem}


/* the crosshair picker (desktop): shape and colour, the chosen ones lit */
#bt .br-pp-xh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 6px;font:700 .74rem/1.2 Inter,system-ui,sans-serif;color:#a8a2b4}
#bt .br-pp-xh b{min-width:78px;font-weight:700;color:#a8a2b4}
#bt .br-pp-xh button{width:40px;height:34px;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:#0b0610 center/26px 26px no-repeat;cursor:pointer}
#bt .br-pp-xh button.on{border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.45)}
#bt .br-pp-xh button.sw{width:28px;height:28px;border-radius:50%}
#bt .br-pp-xh button[data-xh="1"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%2300ff5a' stroke-width='2'/></svg>")}
#bt .br-pp-xh button[data-xh="2"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3v6M12 15v6M3 12h6M15 12h6' stroke='%23000' stroke-width='4'/><path d='M12 4v5M12 15v5M4 12h5M15 12h5' stroke='%2300ff5a' stroke-width='2'/><rect x='10.5' y='10.5' width='3' height='3' fill='%2300ff5a' stroke='%23000' stroke-width='1'/></svg>")}
#bt .br-pp-xh button[data-xh="3"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='3' fill='%2300ff5a' stroke='%23000' stroke-width='1.5'/></svg>")}
#bt .br-pp-xh button[data-xh="4"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='11' fill='none' stroke='%23000' stroke-width='4'/><circle cx='16' cy='16' r='11' fill='none' stroke='%2300ff5a' stroke-width='2'/><circle cx='16' cy='16' r='2' fill='%2300ff5a' stroke='%23000' stroke-width='1'/></svg>")}
#bt .br-pp-xh button[data-xc="g"]{background:#00ff5a}
#bt .br-pp-xh button[data-xc="c"]{background:#2ef2ff}
#bt .br-pp-xh button[data-xc="y"]{background:#ffe600}
#bt .br-pp-xh button[data-xc="p"]{background:#ff3fd8}
#bt .br-pp-xh button[data-xc="r"]{background:#ff2840}
#bt .br-pp-xh button[data-xc="w"]{background:#ffffff}

/* the start window in two columns on a wide screen (6.11.) */
#bt .br-pp-c{width:min(820px,100%)}
#bt .br-pp-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
#bt .br-pp-l,#bt .br-pp-r{min-width:0}
#bt .br-pp-hs{margin:0 0 6px;font:400 1.1rem/1 Impact,'Arial Black',sans-serif;color:#ffe600;letter-spacing:.03em}
#bt .br-pp-nmh .br-pp-re{margin-left:6px;vertical-align:middle}
@media (max-width:700px){#bt .br-pp-cols{grid-template-columns:1fr}}
#bt .portrait .br-pp-cols{grid-template-columns:1fr}
#bt .br-ctl button.sure{background:#ffe600;color:#000;animation:bt-br-hot .4s steps(2) infinite}

/* the start window's two pages: title left, PLAY in the middle, HOW TO PLAY right (6.11.) */
#bt .br-pp-hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:0 0 8px}
#bt .br-pp-hd>b{font:400 1.6rem/1.1 Impact,'Arial Black',sans-serif;letter-spacing:.03em;color:#ffe600;-webkit-text-stroke:1px #000;text-shadow:3px 3px 0 #ff3fd8}
#bt .br-pp-tab{padding:7px 14px;border:2px solid rgba(255,255,255,.25);border-radius:999px;background:#0b0610;color:#f3eee6;font:400 1rem/1 Impact,'Arial Black',sans-serif;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
#bt .br-pp-tab[data-tab="guide"]{justify-self:end}
#bt .br-pp-tab.on{border-color:#ffe600;color:#ffe600;box-shadow:0 0 12px rgba(255,230,0,.45)}
#bt .br-pp-guide{columns:2 320px;column-gap:22px}
#bt .br-pp-guide[hidden],#bt .br-pp-cols[hidden]{display:none}
#bt .br-pp-guide h4{margin:10px 0 6px;font:400 1.1rem/1 Impact,'Arial Black',sans-serif;color:#ffe600;letter-spacing:.03em;break-after:avoid}
#bt .br-pp-guide h4:first-child{margin-top:0}
#bt .br-pp-guide ul{margin:0 0 8px;padding-left:18px}
#bt .br-pp-guide li{margin:0 0 4px}
#bt .br-pp-guide b{color:#ffe600}
#bt .br-gd-r{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.06);break-inside:avoid}
#bt .br-gd-r img{width:40px;height:40px;object-fit:contain;flex:none}
#bt .br-gd-r p{margin:0;font-size:.8rem;line-height:1.3}
@media (max-width:700px){#bt .br-pp-hd{grid-template-columns:1fr 1fr}#bt .br-pp-hd>b{grid-column:1/-1;font-size:1.3rem}#bt .br-pp-tab,#bt .br-pp-tab[data-tab="guide"]{justify-self:stretch;font-size:.9rem}#bt .br-pp-guide{columns:1}}
#bt .portrait .br-pp-hd{grid-template-columns:1fr 1fr}
#bt .portrait .br-pp-hd>b{grid-column:1/-1}
#bt .portrait .br-pp-tab[data-tab="guide"]{justify-self:stretch}
#bt .portrait .br-pp-guide{columns:1}
#bt .br-pp-xh button.br-pp-snd{width:auto;padding:0 12px;color:#f3eee6;font:700 .8rem/1 Inter,system-ui,sans-serif}
#bt .br-pp-b .br-pp-shg{background:#ff3fd8;color:#fff}
/* THE HOLDER BADGE (7.11.): the wallet line in Brain Pop's start window and the badge next to a name on the board */
#bt .br-pp-wl{margin:6px 0 0;font-size:.78rem;line-height:1.45;color:#e9e2d2}
#bt .br-pp-wl:empty{display:none}
#bt .br-pp-wl button{padding:3px 8px;border:1px solid rgba(240,185,11,.6);border-radius:8px;background:rgba(240,185,11,.14);color:#ffe28a;font:inherit;font-weight:700;cursor:pointer}
#bt .br-pp-wl button.br-pp-unlink{font-weight:400;border-color:rgba(255,255,255,.2);background:none;color:#a8a2b4}
#bt .br-pp-wl small{display:block;color:#a8a2b4}
#bt .br-pp-wl a{color:#ffe28a}
#bt .br-pp-bdg{font-style:normal;margin-left:4px}
/* PHONES, A TOUCH SMALLER (7.11., operator: "on mobile the banners, combos and the bottom by the chart a little smaller,
   only minimally, so nothing sits in the middle of the screen; everywhere; don't spoil the brainrot"): portrait only,
   about 12-15 % smaller, the same colours, strokes and animations */
#bt .portrait .br-cap{font-size:clamp(1.1rem,3vw,2.2rem)}
#bt .portrait .br-cap.big{font-size:clamp(1.65rem,5.5vw,4rem);-webkit-text-stroke:2.5px #000}
#bt .portrait .br-combo{padding:9px 0;gap:3px}
#bt .portrait .br-combo b{font-size:clamp(1.5rem,5.1vw,3rem);-webkit-text-stroke:1.6px #000;text-shadow:3px 3px 0 #ff3fd8}
#bt .portrait .br-combo.god b{text-shadow:3px 3px 0 #ffb300,0 0 24px #ffe600}
#bt .portrait .br-combo span{font-size:clamp(.62rem,1.4vw,.9rem)}
#bt .portrait .br-ptx{font-size:clamp(.8rem,1.95vw,1.1rem)}
#bt .portrait .br-ptx.big{font-size:clamp(1.05rem,3vw,1.75rem)}
#bt .br-run.portrait .br-hud.on{transform:translateX(-50%) scale(.88)}
#bt .portrait .br-ctl button{padding:6px 10px;font-size:.84rem}
/* the effects list on a phone: one row across the field (left:50% had squeezed it to half the width, so the chips stood
   in a column over the middle), each chip a touch smaller; the power card ~20 % smaller, still above the score bar */
#bt .portrait .br-act{left:8px;right:8px;max-width:none;transform:none;gap:4px}
#bt .portrait .br-act span{padding:2px 8px 2px 2px;font-size:.72rem}
#bt .portrait .br-act img{width:19px;height:19px}
#bt .portrait .br-wban{gap:9px;padding:7px 13px 7px 7px;border-radius:14px}
#bt .portrait .br-wban img{width:48px;height:48px}
#bt .portrait .br-wban b{font-size:1.15rem}
#bt .portrait .br-wban span{font-size:.68rem}