/* Bandit Pass: our mountain pass, caravan, guards and bandits on a transparent stage. */
html.tt-shell .gift-copy small { display:block; color:var(--muted); font-size:14px; margin-top:5px; }
.source-page #bx-stage { position:absolute; width:1080px; height:1920px; transform-origin:top left; color:#fff9e9; font-family:system-ui,sans-serif; font-weight:900; -webkit-text-stroke:6px #25263e; paint-order:stroke fill; text-shadow:none; overflow:hidden; }
.source-page #bx-stage * { box-sizing:border-box; paint-order:stroke fill; stroke-linejoin:round; }
html.source-page[data-transparent="0"] body { background:#16181b; }
#bx-stage [hidden] { display:none !important; }
#bx-stage p, #bx-stage h2 { margin:0; }
.bx-art-library { position:absolute; width:0; height:0; overflow:hidden; }
.bx-scene { position:absolute; inset:0; width:1080px; height:1920px; }
.bx-prop { position:absolute; overflow:visible; }
.bx-top { position:absolute; top:34px; left:48px; right:48px; display:flex; justify-content:space-between; z-index:4; }
.bx-brand { color:#ffd43b; font-size:23px; letter-spacing:3px; }
.bx-top h1 { font-size:88px; line-height:1.1; letter-spacing:-3px; margin:10px 0 0; }
.bx-top h1 span { color:#ffd43b; }
.bx-clock { text-align:right; font-variant-numeric:tabular-nums; }
.bx-clock strong { display:block; font-size:76px; line-height:1; color:#ffd43b; }
.bx-clock span { display:block; font-size:23px; letter-spacing:3px; margin-top:14px; }
.bx-sides { position:absolute; top:186px; left:40px; right:40px; display:grid; grid-template-columns:1fr 300px 1fr; gap:14px; align-items:start; z-index:4; }
.bx-side { display:grid; gap:4px; }
.bx-side b { font-size:30px; }
.bx-side span { font-size:23px; color:#ffd43b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-side.guards b { color:#7ee3e7; }
.bx-side.bandits { text-align:right; }
.bx-side.bandits b { color:#ff8a8e; }
.bx-road { text-align:center; }
.bx-road b { display:block; font-size:28px; color:#ffd43b; }
.bx-road i { display:block; height:24px; margin-top:8px; border:4px solid #25263e; border-radius:12px; background:#fff0db; overflow:hidden; }
.bx-road em { display:block; height:100%; width:0; background:linear-gradient(90deg,#4dc9ce,#ffd43b); }
.bx-gate { position:absolute; left:745px; top:285px; width:250px; text-align:center; z-index:2; }
.bx-gate svg { width:230px; height:190px; display:block; margin:0 auto; overflow:visible; }
.bx-gate p, .bx-hideout p { font-size:22px; letter-spacing:3px; color:#fff9e9; margin-top:-4px !important; }
.bx-gate strong { display:block; font-size:28px; color:#7ee3e7; }
.bx-hideout { position:absolute; left:30px; top:300px; width:270px; text-align:center; z-index:2; }
.bx-hideout svg { width:250px; height:188px; display:block; margin:0 auto; overflow:visible; }
.bx-hideout strong { display:block; font-size:28px; color:#ff8a8e; }
.bx-legend { position:absolute; top:610px; left:70px; right:70px; background:transparent; z-index:7; }
.bx-legend h2 { font-size:32px; color:#ffd43b; text-align:center; margin-bottom:16px !important; letter-spacing:2px; }
#legend-rows { display:grid; gap:12px; }
.bx-row { display:grid; grid-template-columns:58px 1fr auto; gap:16px; align-items:center; border:4px solid #7ee3e7; border-radius:20px; padding:8px 18px; min-height:72px; font-size:30px; background:transparent; }
.bx-row.bandits { border-color:#ff8a8e; }
.bx-row small { font-size:19px; letter-spacing:2px; color:#7ee3e7; }
.bx-row.bandits small { color:#ff8a8e; }
.bx-row .icon { display:flex; justify-content:center; }
.bx-row img, .bx-row svg { width:52px; height:52px; object-fit:contain; }
.bx-legend-note { text-align:center; font-size:27px; color:#ffd43b; margin-top:16px !important; }
.bx-result { position:absolute; top:600px; left:60px; right:60px; background:transparent; text-align:center; z-index:9; }
.bx-banner { background:transparent; font-size:84px; color:#ffd43b; text-align:center; line-height:1.05; }
.bx-result[data-winner="guards"] .bx-banner { color:#7ee3e7; }
.bx-result[data-winner="bandits"] .bx-banner { color:#ff8a8e; }
#result-score { font-size:42px; margin:14px 0 22px !important; }
.bx-cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.bx-card { border:5px solid #7ee3e7; border-radius:24px; padding:18px 12px; background:transparent; }
.bx-card.bandits { border-color:#ff8a8e; }
.bx-card h2 { font-size:26px; color:#ffd43b; letter-spacing:1px; }
.bx-card p { font-size:40px; margin-top:8px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#result-detail { font-size:30px; color:#ffd43b; margin-top:22px !important; }
#result-next { font-size:24px; margin-top:10px !important; }
#convoy, #guard-layer, #sacks { position:absolute; inset:0; pointer-events:none; }
#convoy { z-index:5; }
#guard-layer { z-index:6; }
.bx-ox, .bx-cart, .bx-guard { position:absolute; left:0; top:0; transform-origin:50% 100%; will-change:transform; }
.bx-ox { width:150px; height:106px; }
.bx-ox svg, .bx-cart > svg { width:100%; height:100%; overflow:visible; }
.bx-cart { width:160px; height:107px; }
.bx-gold { position:absolute; left:28px; top:-8px; width:104px; height:46px; transform-origin:50% 100%; transition:transform .3s, opacity .3s; }
.bx-gold svg { width:100%; height:100%; }
.bx-cart-gold { position:absolute; left:0; right:0; top:-44px; text-align:center; font-size:30px; color:#ffd43b; transform:scaleX(var(--flip,1)); }
.bx-cart.empty .bx-cart-gold { color:#ff8a8e; }
.bx-guard { width:62px; height:90px; }
.bx-guard svg { width:100%; height:100%; animation:bx-march .5s ease-in-out infinite alternate; animation-delay:var(--d,0s); }
@keyframes bx-march { to { translate:0 -6px; } }
.bx-more { position:absolute; left:0; top:0; width:240px; text-align:center; font-size:26px; color:#7ee3e7; z-index:7; }
.bx-boulders { position:absolute; left:0; top:0; width:260px; height:150px; z-index:7; }
.bx-boulders svg { position:absolute; width:110px; height:90px; animation:bx-fall .6s ease-in both; }
.bx-boulders svg:nth-child(1) { left:10px; top:50px; }
.bx-boulders svg:nth-child(2) { left:90px; top:30px; animation-delay:.12s; }
.bx-boulders svg:nth-child(3) { left:150px; top:60px; width:90px; height:74px; animation-delay:.24s; }
.bx-boulders b { position:absolute; left:-40px; right:-40px; top:-34px; text-align:center; font-size:32px; color:#ffd43b; }
@keyframes bx-fall { from { translate:0 -240px; opacity:0; } 60% { opacity:1; } }
.bx-dust { position:absolute; left:0; top:0; width:300px; height:200px; z-index:4; }
.bx-dust svg { position:absolute; width:150px; height:88px; animation:bx-puff .5s ease-out infinite alternate; }
.bx-dust svg:nth-child(1) { left:0; top:90px; }
.bx-dust svg:nth-child(2) { left:110px; top:110px; animation-delay:-.25s; }
.bx-dust b { position:absolute; left:-20px; right:-20px; top:-96px; text-align:center; font-size:44px; color:#ffd43b; }
@keyframes bx-puff { to { scale:1.15; opacity:.8; } }
.bx-clash { position:absolute; left:0; top:0; width:340px; height:240px; z-index:8; }
.bx-clash svg { position:absolute; }
.clash-guard { left:20px; top:70px; width:100px; height:144px; }
.clash-bandit { right:20px; top:70px; width:100px; height:144px; transform:scaleX(-1); }
.clash-star { left:100px; top:50px; width:140px; height:140px; animation:bx-pop .4s ease-out both; }
#clash-label { position:absolute; left:-80px; right:-80px; top:0; text-align:center; font-size:40px; color:#7ee3e7; }
@keyframes bx-pop { from { scale:.2; rotate:-40deg; } }
.bx-sack { position:absolute; width:160px; height:170px; z-index:8; animation:bx-run 2.6s ease-in-out both; }
.bx-sack > svg:first-child { position:absolute; left:20px; top:30px; width:84px; height:122px; }
.bx-sack .sack { position:absolute; left:80px; top:30px; width:64px; height:64px; }
.bx-sack b { position:absolute; left:-60px; right:-60px; top:-12px; text-align:center; font-size:32px; color:#ff8a8e; white-space:nowrap; }
@keyframes bx-run { 0% { transform:translate(0,0); } 15% { transform:translate(0,-40px); } 100% { transform:translate(var(--dx),var(--dy)) scale(.7); opacity:.85; } }
.bx-minus { position:absolute; width:180px; text-align:center; font-size:38px; color:#ff8a8e; z-index:9; animation:bx-minus 3s ease-out both; }
@keyframes bx-minus { 0% { translate:0 20px; opacity:0; } 15% { translate:0 0; opacity:1; } 80% { opacity:1; } 100% { translate:0 -40px; opacity:0; } }
.bx-hire { position:absolute; left:0; top:0; width:460px; text-align:center; font-size:34px; color:#7ee3e7; z-index:8; }
.bx-bulk { position:absolute; top:1180px; left:60px; right:60px; z-index:9; font-size:46px; border:4px dashed #ffd43b; border-radius:24px; padding:14px; }
.bx-banked { position:absolute; top:290px; left:60px; right:60px; text-align:center; font-size:28px; color:#ffd43b; z-index:7; }
.bx-floaters { position:absolute; top:1760px; left:40px; right:40px; text-align:center; z-index:8; }
.bx-floaters span { display:block; font-size:28px; color:#ffd43b; line-height:1.3; }
.bx-callout { position:absolute; top:1812px; left:40px; right:40px; text-align:center; color:#fff9e9; font-size:26px; line-height:1.2; z-index:8; }
.bx-prompt { position:absolute; top:1730px; left:55px; right:55px; font-size:30px; text-align:center; color:#ffd43b; z-index:7; }
#bx-stage[data-phase="journey"] .bx-prompt { top:288px; font-size:24px; }
.bx-footer { position:absolute; top:1882px; left:25px; right:25px; font-size:20px; text-align:center; -webkit-text-stroke:5px #25263e; }
.bx-mode { position:absolute; top:8px; left:48px; font-size:18px; color:#ffd43b; letter-spacing:4px; }
#bx-stage .tt-core-overlay-status { position:absolute; left:48px; top:1700px; width:984px; max-width:none; transform:none; margin:0; background:transparent; border:0; z-index:9; }
.source-page #bx-stage .tt-core-notice { font-size:21px; font-weight:900; padding:0; background:transparent; border:0; box-shadow:none; }
.source-page #bx-stage .tt-core-notice strong { font-size:23px; }
.source-page #bx-stage .tt-core-pill { font-size:20px; font-weight:900; background:transparent; border:0; }
#bx-stage:has(.tt-core-status[data-mode="live"][data-connected="false"]) .bx-callout { display:none; }
html[data-reduced-motion="1"] #bx-stage * { animation:none !important; }