/* The reward reveals (src/rewardshow.js, owner 2026-10-17: Brawl Stars' box opening and character unlock in
   Block Heroes style): one full-screen layer, the backdrop in CSS (the screen's colour, a slow fan of rays,
   the crown pattern drifting), the 3D stage's transparent canvas on top, the words over it. Sizes follow
   the menu's scale (--bh-k: 1 at 1920 x 1080). Then the level-up popup and the level road
   (src/rewardlevel.js), in the design system's panels (bh-ui.css). */
#rfx.rw{--k:var(--bh-k,1);--c1:#1d2a5c;--c2:#070a12;--ray:#fc25c3;--pat:.07;position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;user-select:none;
 -webkit-tap-highlight-color:transparent;color:#fff;font-family:var(--font-ui,"Barlow Condensed",sans-serif);background:var(--c2)}
#rfx .rw-bg{position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 52%, var(--c1), var(--c2) 100%)}
#rfx .rw-pattern{position:absolute;inset:-160px;opacity:var(--pat);transform:rotate(-12deg);will-change:transform;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M18 32l14 12 12-19 12 19 14-12-5 30H23z'/%3E%3Cpath d='M98 112l14 12 12-19 12 19 14-12-5 30h-42z'/%3E%3C/g%3E%3C/svg%3E");
 background-size:calc(160px * var(--k)) calc(160px * var(--k));animation:rw-drift 14s linear infinite}
@keyframes rw-drift{to{transform:rotate(-12deg) translate(calc(160px * var(--k)), calc(160px * var(--k)))}}
#rfx .rw-rays{position:absolute;left:50%;top:52%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);opacity:.42;pointer-events:none;will-change:transform;
 background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ray) 34%, transparent) 0deg 8deg, transparent 8deg 22deg);
 -webkit-mask:radial-gradient(circle, #000 0, rgba(0,0,0,.55) 16%, transparent 44%);mask:radial-gradient(circle, #000 0, rgba(0,0,0,.55) 16%, transparent 44%);
 animation:rw-spin 26s linear infinite;transition:opacity .4s}
@keyframes rw-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#rfx .rw-glow{position:absolute;left:50%;top:54%;width:120vmin;height:90vmin;transform:translate(-50%,-50%);pointer-events:none;opacity:.4;
 background:radial-gradient(ellipse, color-mix(in srgb, var(--ray) 70%, transparent), transparent 62%)}
#rfx .rw-c3d{position:absolute;inset:0;width:100%;height:100%;display:block}
#rfx .rw-wipe{position:absolute;top:-10%;bottom:-10%;left:-30%;right:-30%;transform:translateX(-130%) skewX(-14deg);z-index:5;pointer-events:none;
 box-shadow:0 0 0 calc(14px * var(--k)) rgba(11,12,16,.9)}
#rfx .rw-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
/* the words */
#rfx .rw-head{position:absolute;left:50%;top:7%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--k));pointer-events:none;z-index:2;white-space:nowrap}
#rfx .rw-kicker{font:800 calc(22px * var(--k))/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);text-shadow:0 2px 0 rgba(0,0,0,.5)}
#rfx .rw-title{margin:0;font:900 calc(92px * var(--k))/.95 var(--font-ui);letter-spacing:.02em;text-transform:uppercase;color:#fff;
 -webkit-text-stroke:calc(4px * var(--k)) #0b0c10;paint-order:stroke fill;text-shadow:0 calc(7px * var(--k)) 0 rgba(0,0,0,.45)}
#rfx .rw-amount{position:absolute;left:50%;top:68%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--k));pointer-events:none;z-index:2;
 font:900 calc(96px * var(--k))/1 var(--font-ui);letter-spacing:.01em;-webkit-text-stroke:calc(4px * var(--k)) #0b0c10;paint-order:stroke fill;text-shadow:0 calc(7px * var(--k)) 0 rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
#rfx .rw-amount small{font:800 calc(24px * var(--k))/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;-webkit-text-stroke:0;color:rgba(255,255,255,.75)}
#rfx .rw-rar{padding:calc(6px * var(--k)) calc(16px * var(--k));background:var(--rar);color:#0b0c10;-webkit-text-stroke:0;text-shadow:none;border-radius:6px;
 font:900 calc(30px * var(--k))/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 0 rgba(0,0,0,.4)}
/* the wallet, where the top bar's is (rewardshow.js placeWallet; top right without a menu) */
#rfx .rw-wallet{position:absolute;right:calc(24px * var(--k));top:calc(24px * var(--k));display:flex;align-items:center;gap:.6em;font-size:calc(28px * var(--k));z-index:3;pointer-events:none}
#rfx .rw-w{display:inline-flex;align-items:center;gap:.4em;height:100%;min-height:1.9em;padding:0 .7em;background:rgba(8,11,16,.82);border:1px solid rgba(255,255,255,.14);border-radius:8px;
 font:800 1em/1 var(--font-ui);opacity:.55;transition:opacity .2s}
#rfx .rw-w.is-on{opacity:1;border-color:rgba(253,224,43,.6)}
#rfx .rw-w[data-k="gems"].is-on{border-color:rgba(28,196,252,.7)}
#rfx .rw-w .bh-i{font-size:1.15em}
#rfx .rw-fly,.rw-fly{position:fixed;pointer-events:none;z-index:80;font-size:calc(44px * var(--bh-k,1));line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
/* how many are left, the taps left, the hint */
#rfx .rw-left{position:absolute;right:calc(36px * var(--k));bottom:calc(30px * var(--k));display:none;align-items:center;gap:calc(10px * var(--k));z-index:3;pointer-events:none;
 font:800 calc(20px * var(--k))/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)}
#rfx .rw-left.is-on{display:flex}
#rfx .rw-left b{min-width:1.6em;padding:.25em .4em;text-align:center;background:#e50d96;border:2px solid #0b0c10;border-radius:6px;font-size:1.3em;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.4)}
#rfx .rw-hint{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:3;pointer-events:none;opacity:0;white-space:nowrap;
 font:800 calc(26px * var(--k))/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.55)}
#rfx .rw-hint.is-on{opacity:1;animation:rw-blink 1.3s ease-in-out infinite}
@keyframes rw-blink{50%{opacity:.4}}
/* a cosmetic: its card in the middle */
#rfx .rw-centre{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
#rfx .rw-cos{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:calc(8px * var(--k));width:calc(300px * var(--k));height:calc(340px * var(--k));padding:calc(18px * var(--k));box-sizing:border-box;
 background:linear-gradient(180deg, color-mix(in srgb, var(--rar) 35%, #181f2a), #0c1016 75%);border:calc(4px * var(--k)) solid var(--rar);border-radius:12px;
 box-shadow:0 0 0 calc(6px * var(--k)) #0b0c10, 0 0 70px color-mix(in srgb, var(--rar) 60%, transparent)}
#rfx .rw-cos b{font:900 calc(40px * var(--k))/1 var(--font-ui);text-transform:uppercase;text-align:center}
#rfx .rw-cos small{font:800 calc(18px * var(--k))/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
#rfx .rw-cos em{position:absolute;top:calc(-14px * var(--k));right:calc(-14px * var(--k));padding:.2em .5em;background:#fde02b;color:#0b0c10;border:2px solid #0b0c10;border-radius:6px;
 font:900 calc(22px * var(--k))/1 var(--font-ui);font-style:normal;text-transform:uppercase;transform:rotate(8deg)}
#rfx .rw-cos-art{flex:1;align-self:stretch;background:center/contain no-repeat;border-radius:8px}
#rfx .rw-cos-frame{flex:none;align-self:center;width:calc(160px * var(--k));height:calc(160px * var(--k));border-radius:14px;background:#11161f}
#rfx .rw-cos-text{display:grid;place-items:center;font:900 calc(34px * var(--k))/1 var(--font-ui);color:var(--rar);text-transform:uppercase}
/* the champion unlock: the card on the right */
#rfx.is-unlock .rw-pattern{opacity:0}
#rfx.is-unlock .rw-rays{opacity:.15}
#rfx.is-unlock.is-revealed .rw-pattern{opacity:var(--pat)}
#rfx.is-unlock.is-revealed .rw-rays{opacity:.5}
#rfx .rw-card{position:absolute;right:8%;top:50%;transform:translate(0,-50%);width:calc(600px * var(--k));display:none;flex-direction:column;gap:calc(10px * var(--k));z-index:2;pointer-events:none;
 padding:calc(26px * var(--k)) calc(30px * var(--k));box-sizing:border-box;background:rgba(8,11,22,.9);border:calc(3px * var(--k)) solid var(--tint,#fc25c3);border-radius:12px;
 box-shadow:0 0 0 calc(6px * var(--k)) #0b0c10, 0 calc(12px * var(--k)) 40px rgba(0,0,0,.45)}
#rfx.is-revealed .rw-card{display:flex}
#rfx .rw-card-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.4em;padding:.3em .7em;background:#e50d96;border-radius:6px;font:900 calc(20px * var(--k))/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase}
#rfx .rw-card h3{margin:0;font:900 calc(110px * var(--k))/.9 var(--font-ui);text-transform:uppercase;color:var(--tint,#fff);-webkit-text-stroke:calc(4px * var(--k)) #0b0c10;paint-order:stroke fill;text-shadow:0 calc(6px * var(--k)) 0 rgba(0,0,0,.45)}
#rfx .rw-card-role{font:800 calc(26px * var(--k))/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:#fde02b}
#rfx .rw-card p{margin:0;font:600 calc(24px * var(--k))/1.3 "Barlow", var(--font-ui);color:rgba(255,255,255,.88)}
#rfx .rw-card-art{height:calc(220px * var(--k));background:left center/contain no-repeat}
/* the summary: YOU GOT, a tile each */
#rfx .rw-summary{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(22px * var(--k));width:min(92vw, calc(1500px * var(--k)));z-index:2;pointer-events:none}
#rfx .rw-tile{display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--k));width:calc(230px * var(--k));padding:calc(14px * var(--k)) calc(12px * var(--k)) calc(16px * var(--k));box-sizing:border-box;
 background:linear-gradient(180deg, color-mix(in srgb, var(--rar) 28%, #181f2a), #0c1016 80%);border:calc(3px * var(--k)) solid var(--rar);border-radius:10px;box-shadow:0 0 0 calc(5px * var(--k)) #0b0c10}
#rfx .rw-tile-art{display:grid;place-items:center;width:calc(170px * var(--k));height:calc(150px * var(--k));background:center/contain no-repeat;font-size:calc(90px * var(--k))}
#rfx .rw-tile-art.is-portrait{border-radius:8px;background-size:cover;background-position:center 20%}
#rfx .rw-tile b{font:900 calc(30px * var(--k))/1 var(--font-ui);text-transform:uppercase;text-align:center}
#rfx .rw-tile small{font:900 calc(36px * var(--k))/1 var(--font-ui);color:#fde02b;-webkit-text-stroke:calc(2px * var(--k)) #0b0c10;paint-order:stroke fill;text-transform:uppercase}
#rfx .rw-tile-gems small{color:#7ef4ff}
#rfx .rw-tile small.is-rar{font-size:calc(22px * var(--k));color:var(--rar);letter-spacing:.08em}
@media (prefers-reduced-motion: reduce){#rfx .rw-rays,#rfx .rw-pattern,#rfx .rw-hint.is-on{animation:none}}

/* ---- the level-up popup (docs/ui-refs/2026-10-17/level-up.webp) ---- */
.rwlv,.rwroad{--k:var(--bh-k,1);position:fixed;inset:0;z-index:58;font-family:var(--font-ui,"Barlow Condensed",sans-serif);color:#fff}
.rwlv-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%, rgba(10,13,22,.62), rgba(5,7,12,.86))}
.rwlv-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(1000px * var(--k));max-width:96vw;max-height:98vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;
 padding:calc(22px * var(--k)) calc(44px * var(--k)) calc(32px * var(--k));background:linear-gradient(180deg,#1a2130,#11161f 40%,#0e131b);border:calc(3px * var(--k)) solid #3a4258;border-radius:14px;
 box-shadow:0 0 0 calc(5px * var(--k)) #080b10, 0 30px 80px rgba(0,0,0,.6)}
/* round 2 (owner 18/10): the head (crown, the big number, NEW LEVEL) over the body (the rewards, TAKE REWARDS); a phone puts them side by side */
.rwlv-head{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.rwlv-body{display:flex;flex-direction:column;align-items:center;width:100%}
.rwroad-x{position:absolute;z-index:3;top:calc(14px * var(--k));right:calc(14px * var(--k));width:calc(44px * var(--k));height:calc(44px * var(--k));display:grid;place-items:center;padding:0;cursor:pointer;
 color:var(--ink-2);background:none;border:0;border-radius:8px}
.rwroad-x:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.rwroad-x svg{width:calc(24px * var(--k));height:calc(24px * var(--k))}
.rwlv-top{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:calc(6px * var(--k))}
.rwlv-crown{position:relative;z-index:2;width:calc(120px * var(--k));height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.rwlv-glow{position:absolute;left:50%;top:58%;width:calc(440px * var(--k));height:calc(440px * var(--k));transform:translate(-50%,-50%);background:radial-gradient(circle, rgba(253,190,40,.55), rgba(253,160,20,.15) 45%, transparent 68%)}
.rwlv-n{position:relative;z-index:2;margin-top:calc(-14px * var(--k));font:900 calc(300px * var(--k))/.86 var(--font-ui);color:#fff;font-variant-numeric:tabular-nums;
 -webkit-text-stroke:calc(20px * var(--k)) #fc25c3;paint-order:stroke fill;filter:drop-shadow(0 0 0 #0b0c10) drop-shadow(calc(6px * var(--k)) calc(6px * var(--k)) 0 #0b0c10) drop-shadow(calc(-3px * var(--k)) calc(-3px * var(--k)) 0 #0b0c10)}
.rwlv-bits{position:absolute;inset:0;pointer-events:none}
.rwlv-bits i{position:absolute;left:50%;top:55%;width:calc((22px + var(--i) * 3px) * var(--k));height:calc((22px + var(--i) * 3px) * var(--k));background:#fc25c3;border:2px solid rgba(0,0,0,.35);
 box-shadow:inset -4px -4px 0 rgba(0,0,0,.2), inset 3px 3px 0 rgba(255,255,255,.35);animation:rwlv-float 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -0.4s)}
.rwlv-bits i:nth-child(even){background:#fde02b}
.rwlv-bits i:nth-child(3n){width:calc(12px * var(--k));height:calc(12px * var(--k))}
.rwlv-bits i:nth-child(1){transform:translate(calc(-330px * var(--k)), calc(-120px * var(--k))) rotate(18deg)}
.rwlv-bits i:nth-child(2){transform:translate(calc(-260px * var(--k)), calc(-190px * var(--k))) rotate(-12deg)}
.rwlv-bits i:nth-child(3){transform:translate(calc(-200px * var(--k)), calc(-40px * var(--k))) rotate(30deg)}
.rwlv-bits i:nth-child(4){transform:translate(calc(-390px * var(--k)), calc(-10px * var(--k))) rotate(8deg)}
.rwlv-bits i:nth-child(5){transform:translate(calc(-160px * var(--k)), calc(-160px * var(--k))) rotate(-30deg)}
.rwlv-bits i:nth-child(6){transform:translate(calc(-300px * var(--k)), calc(50px * var(--k))) rotate(40deg)}
.rwlv-bits i:nth-child(7){transform:translate(calc(-450px * var(--k)), calc(-90px * var(--k))) rotate(-8deg)}
.rwlv-bits i:nth-child(8){transform:translate(calc(250px * var(--k)), calc(-200px * var(--k))) rotate(14deg)}
.rwlv-bits i:nth-child(9){transform:translate(calc(320px * var(--k)), calc(-110px * var(--k))) rotate(-22deg)}
.rwlv-bits i:nth-child(10){transform:translate(calc(170px * var(--k)), calc(-60px * var(--k))) rotate(28deg)}
.rwlv-bits i:nth-child(11){transform:translate(calc(380px * var(--k)), calc(10px * var(--k))) rotate(-14deg)}
.rwlv-bits i:nth-child(12){transform:translate(calc(140px * var(--k)), calc(-170px * var(--k))) rotate(36deg)}
.rwlv-bits i:nth-child(13){transform:translate(calc(260px * var(--k)), calc(60px * var(--k))) rotate(-34deg)}
.rwlv-bits i:nth-child(14){transform:translate(calc(440px * var(--k)), calc(-150px * var(--k))) rotate(10deg)}
@keyframes rwlv-float{50%{translate:0 calc(-12px * var(--k))}}
.rwlv-title{position:relative;z-index:2;margin:0;font:900 calc(56px * var(--k))/1 var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:#fde02b;
 -webkit-text-stroke:calc(4px * var(--k)) #0b0c10;paint-order:stroke fill;text-shadow:0 calc(5px * var(--k)) 0 rgba(0,0,0,.5)}
.rwlv-title small{margin-left:.3em;padding:.1em .35em;background:#e50d96;border-radius:6px;font-size:.6em;letter-spacing:.02em;color:#fff;-webkit-text-stroke:0;vertical-align:middle}

.rwlv-cards{display:flex;justify-content:center;gap:calc(24px * var(--k));width:100%;margin-top:calc(22px * var(--k))}
.rwlv-card{--glow:#fdbe28;flex:1;max-width:calc(300px * var(--k));display:flex;flex-direction:column;align-items:center;gap:calc(2px * var(--k));padding:calc(8px * var(--k)) calc(10px * var(--k)) calc(16px * var(--k));
 background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--glow) 42%,transparent), transparent 64%), linear-gradient(180deg,#121826,#0a0e15);
 border:calc(3px * var(--k)) solid color-mix(in srgb,var(--glow) 70%,#2d3346);border-radius:12px;box-shadow:0 0 calc(28px * var(--k)) color-mix(in srgb,var(--glow) 30%,transparent), inset 0 calc(-4px * var(--k)) 0 rgba(0,0,0,.35)}
.rwlv-art{display:flex;align-items:center;justify-content:center;width:100%;height:calc(200px * var(--k))}
.rwlv-art img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 calc(8px * var(--k)) 0 rgba(0,0,0,.4))}
.rwlv-art .bh-i{font-size:calc(130px * var(--k))}
.rwlv-card b{font:800 calc(24px * var(--k))/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#c9cede}
.rwlv-x-n{font:900 calc(64px * var(--k))/1 var(--font-ui);color:#fff;-webkit-text-stroke:calc(4px * var(--k)) #0b0c10;paint-order:stroke fill;text-shadow:0 calc(4px * var(--k)) 0 rgba(0,0,0,.45)}
.rwlv-champs{display:flex;align-items:center;gap:.5em;margin-top:calc(16px * var(--k));padding:.4em .9em;background:#2c102e;border:2px solid #e50d96;border-radius:8px;
 font:900 calc(28px * var(--k))/1 var(--font-ui);text-transform:uppercase;letter-spacing:.04em}
.rwlv-champs .bh-i{color:#fde02b}
.rwlv-note{margin-top:calc(14px * var(--k));font:700 calc(22px * var(--k))/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#aab0c4;text-align:center}
.rwlv-take{margin-top:calc(26px * var(--k));width:calc(420px * var(--k));max-width:100%;height:calc(72px * var(--k));justify-content:center;gap:.5em;font-size:calc(34px * var(--k))}
.rwlv-take .bh-i{font-size:1.1em}

/* ---- the level road ---- */
.rwroad-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(1500px * var(--k));max-width:96vw;box-sizing:border-box;padding:calc(26px * var(--k)) calc(30px * var(--k)) calc(24px * var(--k));
 background:#11161f;border:2px solid #3a4258;border-radius:14px;box-shadow:0 0 0 5px #080b10, 0 30px 80px rgba(0,0,0,.6)}
.rwroad-head{display:flex;align-items:center;gap:calc(20px * var(--k));padding-right:calc(70px * var(--k))}
.rwroad-head h2{margin:0;font:900 calc(52px * var(--k))/1 var(--font-ui);text-transform:uppercase}
.rwroad-head small{display:block;margin-top:calc(8px * var(--k));font:700 calc(18px * var(--k))/1.2 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:#818a9c}
.rwroad-lv{transform:scale(1.4);transform-origin:left center;margin-right:calc(20px * var(--k))}
.rwroad-xp{display:flex;align-items:center;gap:calc(12px * var(--k));margin-top:calc(8px * var(--k));font:700 calc(20px * var(--k))/1 var(--font-ui);color:#aab0c4;text-transform:uppercase}
.rwroad-xp .bh-bar{width:calc(320px * var(--k))}
.rwroad-xp b{color:#fff}
.rwroad-x{top:calc(22px * var(--k));right:calc(22px * var(--k))}
.rwroad-track{display:flex;gap:calc(12px * var(--k));margin-top:calc(22px * var(--k));padding:calc(6px * var(--k)) calc(4px * var(--k)) calc(16px * var(--k));overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}
.rwroad-node{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--k));width:calc(150px * var(--k));padding:calc(12px * var(--k)) calc(8px * var(--k)) calc(12px * var(--k));
 box-sizing:border-box;background:#0c1016;border:2px solid #2d3346;border-radius:10px;opacity:.82}
/* every 5th level and every 10th (they pay more coins): blue, brighter on the 10th */
.rwroad-node.is-big{border-color:#2f6dff}
.rwroad-node[data-level$="0"].is-big{border-color:#03dfff}
.rwroad-node.is-done{opacity:.55}
.rwroad-node.is-next{opacity:1;border-color:#fde02b;box-shadow:0 0 0 2px #fde02b, 0 0 24px rgba(253,224,43,.35)}
.rwroad-n{display:flex;align-items:center;gap:.2em;font:900 calc(40px * var(--k))/1 var(--font-ui)}
.rwroad-n .bh-i{font-size:.6em;color:#fde02b}
.rwroad-art{display:flex;flex-direction:column;align-items:center;font:800 calc(16px * var(--k))/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#aab0c4}
.rwroad-art img{width:calc(96px * var(--k));height:calc(80px * var(--k));object-fit:contain}
.rwroad-champ{position:relative;width:calc(96px * var(--k));height:calc(96px * var(--k));background:#222837 center 20%/cover no-repeat;border:2px solid #e50d96;border-radius:8px}
.rwroad-champ em{position:absolute;left:50%;bottom:calc(-10px * var(--k));transform:translateX(-50%);padding:.1em .4em;background:#e50d96;border-radius:4px;font:900 calc(15px * var(--k))/1 var(--font-ui);font-style:normal;white-space:nowrap}
.rwroad-r{display:flex;align-items:center;gap:.3em;font:800 calc(22px * var(--k))/1 var(--font-ui)}
.rwroad-node small{font:700 calc(15px * var(--k))/1 var(--font-ui);color:#646b88}
.rwroad-ok{position:absolute;top:calc(8px * var(--k));right:calc(8px * var(--k));color:#4cf45c;font-size:calc(20px * var(--k))}
.rw-roadbtn{margin-left:auto;gap:.4em}
/* B373 (owner 02/11: the ready pictures, not the 3D bodies). A skin won or bought: the skin's picture (the STORE's), standing between
   the title and the rarity tag where the body stood */
#rfx .rw-skin-art{display:block;height:min(40vh, calc(470px * var(--k)));aspect-ratio:480 / 640;background:center bottom/contain no-repeat;
 filter:drop-shadow(0 0 calc(18px * var(--k)) color-mix(in srgb, var(--rar, #fde02b) 45%, transparent)) drop-shadow(0 calc(10px * var(--k)) 0 rgba(0,0,0,.35))}
/* a short screen (a phone in landscape): the title takes more of its height, so the picture is smaller and a little lower */
@media (max-height:500px){#rfx .rw-skin-art{height:30vh;margin-top:5vh}}
/* a champion unlocked: after the silhouette's run, its full-body picture where the body would pose, centred in the room left of the
   card (right: 8 %, 600 × --k wide) and never wider than that room less 4 vw (a small phone shrinks it, never under the card) */
#rfx .rw-unlock-pic{--free:calc(92vw - 600px * var(--k));--aw:min(calc(70vh * .75), calc(525px * var(--k)), calc(var(--free) - 4vw));
 position:absolute;left:calc((var(--free) - var(--aw)) / 2);top:52%;transform:translateY(-50%);width:var(--aw);aspect-ratio:480 / 640;z-index:2;pointer-events:none;
 background:center bottom/contain no-repeat;filter:drop-shadow(0 0 calc(26px * var(--k)) color-mix(in srgb, var(--tint, #fc25c3) 60%, transparent))}
/* LEGENDARY (owner 02/11: «deve avere un feeling molto più premium, è la cosa più leggendaria del gioco»): gold from the design
   system (--yellow #fde02b, --rarity-legendary #e4a12a, --on-yellow), a light that runs across it, a short pop; still with
   prefers-reduced-motion. Three variants for the review (rewardshow.js LEGEND_V): 1 gold letters, 2 a gold plate (the game's),
   3 a dark plate with a gold rim. The base and variant 2 are shared with INSPECT (B390, src/inspect.js: #bhInspect sizes it) */
:is(#rfx,#bhInspect) .rw-rar.is-legendary{position:relative;overflow:hidden;isolation:isolate;animation:rw-leg-pop .5s cubic-bezier(.2,.9,.3,1.3) both}
:is(#rfx,#bhInspect) .rw-rar.is-legendary b{position:relative;z-index:1;font:inherit}
:is(#rfx,#bhInspect) .rw-rar.is-legendary::after{content:"";position:absolute;inset:-20% auto -20% 0;width:40%;z-index:2;pointer-events:none;will-change:transform;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.85) 50%,transparent);transform:translateX(-150%) skewX(-20deg);animation:rw-leg-shine 2.6s ease-in-out .5s infinite}
@keyframes rw-leg-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes rw-leg-shine{0%{transform:translateX(-150%) skewX(-20deg)}45%,100%{transform:translateX(330%) skewX(-20deg)}}   /* (transform: no layout per frame) */
@keyframes rw-leg-glow{0%,100%{box-shadow:0 0 0 calc(3px * var(--k)) #0b0c10,0 0 calc(18px * var(--k)) rgba(253,224,43,.45)}50%{box-shadow:0 0 0 calc(3px * var(--k)) #0b0c10,0 0 calc(34px * var(--k)) rgba(253,224,43,.8)}}
/* 1 · gold letters: no plate, the word in a gold gradient with a dark outline */
#rfx .rw-rar.is-legendary[data-v="1"]{background:none;box-shadow:none;padding:0 calc(10px * var(--k));font-size:calc(56px * var(--k));letter-spacing:.12em}
#rfx .rw-rar.is-legendary[data-v="1"] b{background:linear-gradient(180deg,#fff7c6 0%,var(--yellow) 42%,var(--rarity-legendary) 62%,#a8650a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:calc(3px * var(--k)) #0b0c10;paint-order:stroke fill;filter:drop-shadow(0 calc(4px * var(--k)) 0 rgba(0,0,0,.5)) drop-shadow(0 0 calc(14px * var(--k)) rgba(253,224,43,.55))}
#rfx .rw-rar.is-legendary[data-v="1"]::after{display:none}
/* (variant 1: the light runs inside the letters, a band of the gradient moving across them) */
#rfx .rw-rar.is-legendary[data-v="1"] b{background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 150% 0/250% 100% no-repeat,linear-gradient(180deg,#fff7c6 0%,var(--yellow) 42%,var(--rarity-legendary) 62%,#a8650a 100%);
 -webkit-background-clip:text;background-clip:text;animation:rw-leg-text 2.6s ease-in-out .5s infinite}
@keyframes rw-leg-text{0%{background-position:150% 0,0 0}45%,100%{background-position:-50% 0,0 0}}
@media (prefers-reduced-motion: reduce){#rfx .rw-rar.is-legendary[data-v="1"] b{animation:none}}
/* 2 · a gold plate: bevelled gold, dark letters and rim, a glow, a light running across (recommended: the most readable on a phone) */
:is(#rfx,#bhInspect) .rw-rar.is-legendary[data-v="2"]{padding:calc(10px * var(--k)) calc(30px * var(--k));font-size:calc(40px * var(--k));letter-spacing:.16em;color:var(--on-yellow);border-radius:calc(10px * var(--k));
 background:linear-gradient(180deg,#fff2a8 0%,var(--yellow) 38%,var(--rarity-legendary) 62%,#b8740f 100%);
 box-shadow:inset 0 calc(3px * var(--k)) 0 rgba(255,255,255,.75),inset 0 calc(-4px * var(--k)) 0 rgba(110,55,0,.55),0 0 0 calc(3px * var(--k)) #0b0c10,0 0 calc(26px * var(--k)) rgba(253,224,43,.6),0 calc(6px * var(--k)) 0 rgba(0,0,0,.45)}
:is(#rfx,#bhInspect) .rw-rar.is-legendary[data-v="2"] b::before,:is(#rfx,#bhInspect) .rw-rar.is-legendary[data-v="2"] b::after{content:"✦";font-size:.6em;vertical-align:.25em;margin:0 .55em;color:#7a3f00}
/* 3 · a dark plate with a gold rim: gold letters, the glow breathing */
#rfx .rw-rar.is-legendary[data-v="3"]{padding:calc(10px * var(--k)) calc(28px * var(--k));font-size:calc(40px * var(--k));letter-spacing:.16em;border-radius:calc(10px * var(--k));
 background:linear-gradient(180deg,#1b1606,#0b0c10);border:calc(3px * var(--k)) solid var(--yellow);animation:rw-leg-pop .5s cubic-bezier(.2,.9,.3,1.3) both,rw-leg-glow 2.2s ease-in-out .5s infinite}
#rfx .rw-rar.is-legendary[data-v="3"] b{background:linear-gradient(180deg,#fff7c6,var(--yellow) 50%,var(--rarity-legendary));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion: reduce){:is(#rfx,#bhInspect) .rw-rar.is-legendary,:is(#rfx,#bhInspect) .rw-rar.is-legendary::after{animation:none}}