/* RazeGrade — the upgrader page (#upgrade-page.up-page), ported from UpgradePrototype/css/styles.css.
   Every rule is scoped to .up-page; the accent comes from the site theme. */
.up-page{
  --bg:#0d0f15;--bg2:#12141c;
  --surface:#171a23;--surface2:#1d212c;--surface3:#272c39;
  --panel:linear-gradient(180deg,#1a1d27 0%,#14161e 100%);
  --border:#272c38;--border-soft:#20242f;--border-strong:#373d4c;
  --text:#edeff5;--text-2:#b6bccc;--muted:#80879a;
  
  --coin:#bd8cff;--coin-rgb:167,110,255;
  --ok:#38d18a;--ok-rgb:56,209,138;--danger:#ff5c5c;--danger-rgb:255,92,92;
  --magic:#7472f2;--magic-rgb:116,114,242;
  --r-xs:6px;--r-sm:9px;--r-md:12px;--r-lg:16px;--r-xl:20px;
  --ease:cubic-bezier(.22,.68,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --sh-2:0 12px 34px -14px rgba(0,0,0,.6);--sh-3:0 30px 70px -26px rgba(0,0,0,.75);
  --hair:inset 0 1px 0 rgba(255,255,255,.05);
  --font-display:'Jost',sans-serif;--font-body:'Exo 2',sans-serif;--font-num:'Rajdhani',sans-serif;
  --shell:1360px;--gutter:24px;
  --stage-h:clamp(360px,52vh,470px);
  --ctl-h:68px;      
}

:where(.up-page) :where(button,.up-page input,.up-page select){font:inherit;color:inherit}
:where(.up-page) :where(button){cursor:pointer}



.up-page .rc,.up-page .rc-num{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-num);font-weight:700;color:var(--coin);
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1;--cap:.62}   
.up-page .rc-icon{width:15px;height:15px;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(var(--coin-rgb),.3));
  vertical-align:baseline;align-self:baseline;transform:translateY(calc(50% - .5em * var(--cap,.64)))}
.up-page .beta-badge{display:inline-flex;align-items:center;padding:3px 7px;background:rgba(var(--accent-rgb),.14);
  border:1px solid rgba(var(--accent-rgb),.32);color:var(--accent);font-family:var(--font-body);font-size:.58rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;border-radius:var(--r-xs);line-height:1;margin-left:10px;align-self:center}
.up-page .muted-count{font-family:var(--font-num);font-weight:700;color:var(--muted);font-size:.95rem;margin-left:6px}
.up-page .icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;color:var(--muted);font-size:.95rem;transition:all .2s var(--ease)}
.up-page .icon-btn:hover{color:var(--text);background:var(--surface)}
.up-page .icon-btn[aria-pressed="true"]{color:var(--accent)}
.up-page #up-fast[aria-pressed="true"]{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.35)}
.up-page .mode-switch{position:relative;display:inline-flex;margin-left:8px;padding:3px;gap:2px;border-radius:99px;background:var(--bg2);border:1px solid var(--border)}
.up-page .mode-switch button{position:relative;z-index:1}
.up-page .mode-sep{width:1px;align-self:stretch;margin:6px 3px;background:var(--border)}

.up-page .mode-roll{position:absolute;left:0;top:3px;height:30px;width:0;border-radius:99px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:rgba(var(--accent-rgb),.15);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 0 16px -4px rgba(var(--accent-rgb),.55)}
.up-page .mode-roll.landed{animation:rollLand .5s ease-out}
@keyframes rollLand{30%{background:rgba(var(--accent-rgb),.3);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),1),0 0 26px rgba(var(--accent-rgb),.9)}}
.up-page .mode-switch.rolling button:disabled{opacity:1}
.up-page .mode-switch button.picked{color:var(--accent)}

.up-page .mode-switch button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border:0;border-radius:99px;background:transparent;
  color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.04em;transition:all .22s var(--ease)}
.up-page .mode-switch button:hover:not(:disabled){color:var(--text)}
.up-page .mode-switch button.on{color:var(--on-accent,#0a0a12);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent-dark));box-shadow:0 6px 16px -8px rgba(var(--accent-rgb),.9)}
.up-page .mode-switch button:disabled{cursor:not-allowed;opacity:.6}
.up-page .tool-btn{height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--muted);font-size:.82rem;
  transition:all .2s var(--ease);flex-shrink:0}
.up-page .tool-btn:hover{color:var(--text);border-color:var(--border-strong)}
.up-page .tool-btn:disabled{opacity:.45;cursor:not-allowed}
.up-page .tool-btn[aria-pressed="true"]{color:var(--accent);border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.08)}
.up-page .search-wrap{position:relative;flex:1;min-width:100px}
.up-page .search-wrap>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.75rem;pointer-events:none}
.up-page .search-input{width:100%;height:36px;padding:0 12px 0 32px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:.84rem;outline:none;transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.up-page .search-input::placeholder{color:var(--muted)}
.up-page .search-wrap.has-value .search-input{padding-right:34px}
.up-page .search-clear{position:absolute;right:5px;top:5px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  padding:0;background:transparent;border:0;border-radius:var(--r-sm);color:var(--muted);font-family:inherit;font-size:.8rem;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility 0s .16s,color .16s var(--ease),background-color .16s var(--ease)}
.up-page .search-wrap.has-value .search-clear{opacity:1;visibility:visible;transition:opacity .16s var(--ease),visibility 0s,color .16s var(--ease),background-color .16s var(--ease)}
.up-page .search-clear:hover{color:var(--text);background:var(--surface2)}
.up-page .search-clear:focus-visible{outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:-2px;color:var(--text)}
.up-page .search-input:hover{border-color:var(--border-strong)}
.up-page .search-input:focus,.up-page .price-range:focus-within{border-color:rgba(var(--accent-rgb),.6);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}
.up-page .price-range{display:flex;align-items:center;height:36px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);flex-shrink:0}
.up-page .price-range input{width:62px;height:100%;background:transparent;border:0;outline:0;text-align:center;font-family:var(--font-num);font-weight:600;font-size:.9rem}
.up-page .price-range input::placeholder{font-family:var(--font-body);font-weight:400;font-size:.78rem;color:var(--muted)}
.up-page .price-range span{color:var(--muted);font-size:.8rem}


.up-page{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;padding:18px var(--gutter) 56px}
.up-page .up-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.up-page .up-tools{display:flex;align-items:center;gap:2px}
.up-page .mode-ico{width:18px;height:18px;display:block;flex-shrink:0}


.up-page .up-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);gap:16px;align-items:stretch}

.up-page .up-slot{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border-soft);border-radius:var(--r-xl);
  background:var(--panel);box-shadow:var(--sh-2),var(--hair);overflow:hidden;position:relative;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.up-page .slot-head{padding:16px 18px 0;text-align:center;position:relative;z-index:1}
.up-page .slot-title{font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.3}
.up-page .slot-sub{color:var(--muted);font-size:.8rem;margin-top:3px;min-height:1.2em}
.up-page .slot-body{flex:1;display:flex;align-items:stretch;justify-content:center;min-height:200px;position:relative;isolation:isolate}
.up-page .slot-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 18px;border-top:1px solid var(--border-soft);
  background:rgba(0,0,0,.12);min-height:48px}
.up-page .slot-foot .rc{font-size:1.2rem}
.up-page .slot-foot .rc-icon{width:17px;height:17px}
.up-page .slot-count{font-family:var(--font-num);font-weight:700;font-size:.9rem;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.up-page #up-to-lock i{transform:translateY(.1em)}
.up-page #up-to-lock{font-family:var(--font-body);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.up-page .up-slot.won{border-color:rgba(var(--ok-rgb),.6);box-shadow:0 0 44px -6px rgba(var(--ok-rgb),.42),inset 0 0 34px rgba(var(--ok-rgb),.08)}
.up-page .up-slot.lost{border-color:rgba(var(--danger-rgb),.45);box-shadow:0 0 30px -8px rgba(var(--danger-rgb),.32)}
.up-page .up-slot.to::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),inset 0 0 34px -10px rgba(var(--accent-rgb),.55)}
.up-page .up-stage.rolling .up-slot.to::after{animation:slotPulse 1.2s ease-in-out infinite}
@keyframes slotPulse{50%{opacity:1}}


.up-page .slot-art{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;--from:-16px;--to:18px}
.up-page .slot-art.up{--from:16px;--to:-18px}
.up-page .slot-art::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.16),transparent 42%)}
.up-page .slot-art b{display:block;position:relative}
.up-page .slot-art i{display:block;font-size:3.4rem;line-height:.62;color:var(--accent);text-shadow:0 0 14px rgba(var(--accent-rgb),.55);animation:chev 1.6s ease-in-out infinite}
.up-page .slot-art b:nth-child(2) i{opacity:.65;animation-delay:.15s}
.up-page .slot-art.down b:nth-child(1) i{opacity:.3}
.up-page .slot-art.down b:nth-child(3) i{animation-delay:.3s}
.up-page .slot-art.up i{animation-name:chevUp}
.up-page .slot-art.up b:nth-child(1) i{animation-delay:.3s}
.up-page .slot-art.up b:nth-child(3) i{opacity:.3}

.up-page .slot-art.enter::before{animation:fadeIn .6s ease-out both}
.up-page .slot-art.enter b{animation:chevIn .5s cubic-bezier(.2,.9,.3,1.25) both}
.up-page .slot-art.down.enter b:nth-child(2),.up-page .slot-art.up.enter b:nth-child(2){animation-delay:.08s}
.up-page .slot-art.down.enter b:nth-child(3),.up-page .slot-art.up.enter b:nth-child(1){animation-delay:.16s}
.up-page .slot-art.leave::before{animation:fadeOut .3s ease-in forwards}
.up-page .slot-art.leave b{animation:chevOut .24s cubic-bezier(.55,0,.8,.3) forwards}
.up-page .slot-art.down.leave b:nth-child(2),.up-page .slot-art.up.leave b:nth-child(2){animation-delay:.03s}
.up-page .slot-art.down.leave b:nth-child(1),.up-page .slot-art.up.leave b:nth-child(3){animation-delay:.06s}
@keyframes chevIn{from{opacity:0;transform:translateY(var(--from)) scale(.8)}}
@keyframes chevOut{to{opacity:0;transform:translateY(var(--to)) scale(.85)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes chev{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes chevUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.up-page .slot-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;position:relative;min-width:0}
.up-page .slot-item::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 42% at 50% 44%,color-mix(in srgb,var(--rc) 9%,transparent),transparent 72%)}
.up-page .slot-item::after{content:'';position:absolute;left:24%;right:24%;bottom:0;height:2px;border-radius:2px;background:var(--rc);box-shadow:0 0 16px var(--rc)}
.up-page .slot-item::before,.up-page .slot-item::after{transition:opacity .35s}
.up-page .slot-item.coin{--rc:var(--coin)}
.up-page .slot-media{width:100%;height:150px;position:relative;--hole-w:58%;--hole-h:20px;--hole-b:8px;--sink:150px}   

.up-page .slot-hole,.up-page .slot-lip{position:absolute;left:50%;bottom:var(--hole-b);width:var(--hole-w);height:var(--hole-h);transform:translateX(-50%);border-radius:50%;pointer-events:none}
.up-page .slot-hole{z-index:0;
  background:
    radial-gradient(ellipse 46% 42% at 50% 62%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,0) 76%)}
.up-page .slot-hole::before{content:'';position:absolute;inset:0;border-radius:50%;
  border-top:1px solid color-mix(in srgb,var(--rc) 70%,transparent);box-shadow:0 -6px 16px -8px var(--rc)}
.up-page .slot-hole::after{content:'';position:absolute;left:-22%;right:-22%;top:-40%;bottom:-110%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 34%,transparent),transparent);opacity:.85}
.up-page .slot-lip{z-index:2;border-bottom:1px solid color-mix(in srgb,var(--rc) 28%,transparent)}
.up-page .slot-pit{position:absolute;left:0;right:0;top:-34px;bottom:calc(var(--hole-b) + var(--hole-h) / 2);clip-path:inset(-120px -120px 0 -120px);z-index:1;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}

.up-page .pit-float{position:absolute;inset:0;transform:translateY(-4px);animation:floaty 6s ease-in-out 1.2s infinite;will-change:transform;pointer-events:none}
@keyframes floaty{0%,100%{transform:translateY(-4px)}50%{transform:translateY(-7px)}}
.up-page .pit-img{position:absolute;inset:0;margin:auto;width:86%;height:112px;object-fit:contain;will-change:transform;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.55));pointer-events:none}
.up-page .slot-item.coin .pit-img{height:92px}

.up-page .slot-item.coin .pit-img,.up-page .slot-mini.coin img{transform:none}

.up-page .slot-item.coin .pit-img{animation:coinFlip 6s ease-in-out 2s infinite;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(var(--coin-rgb),.45))}
.up-page .slot-item.coin .pit-img.in{animation:coinIn 1s cubic-bezier(.16,1,.3,1) both,coinFlip 6s ease-in-out 2.4s infinite}
.up-page .slot-item.coin .pit-img.in.late{animation-delay:.2s,2.6s}
.up-page .slot-item.coin.opening .pit-img{animation:coinIn 1s cubic-bezier(.16,1,.3,1) .24s both,coinFlip 6s ease-in-out 2.6s infinite}
.up-page .slot-item.coin .pit-img.out{animation:coinOut .4s cubic-bezier(.55,0,.85,.35) forwards;transform-origin:50% 50%}
@keyframes coinIn{from{transform:translateY(var(--sink)) scale(.72) rotateY(-540deg);opacity:.3}55%{opacity:1}to{transform:translateY(0) scale(1) rotateY(0deg);opacity:1}}
@keyframes coinOut{to{transform:translateY(var(--sink)) scale(.74) rotateY(360deg)}}
@keyframes coinFlip{0%,84%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
.up-page .slot-media.bump .slot-pit{animation:coinBump .4s cubic-bezier(.2,.9,.3,1.5)}
@keyframes coinBump{40%{transform:scale(1.08)}}
.up-page .pit-img.in{animation:pitIn .7s cubic-bezier(.16,1,.3,1) both}
.up-page .pit-img.in.late{animation-delay:.2s}
.up-page .pit-img.out{animation:pitOut .58s linear forwards;transform-origin:50% 50%}
@keyframes pitIn{from{transform:translateY(var(--sink)) scale(.72);opacity:.3}55%{opacity:1}to{transform:translateY(0) scale(1);opacity:1}}

@keyframes pitOut{
  0%{transform:translateY(-0.00px) rotate(-0.0deg) scale(1.000)}
  5%{transform:translateY(-2.85px) rotate(-6.2deg) scale(1.000)}
  10%{transform:translateY(-5.50px) rotate(-12.1deg) scale(0.998)}
  15%{transform:translateY(-7.78px) rotate(-17.8deg) scale(0.996)}
  20%{transform:translateY(-9.53px) rotate(-23.2deg) scale(0.994)}
  25%{transform:translateY(-10.63px) rotate(-28.3deg) scale(0.990)}
  30%{transform:translateY(-11.00px) rotate(-33.2deg) scale(0.986)}
  35%{transform:translateY(calc(var(--sink) * 0.0023 - 10.97px)) rotate(-37.8deg) scale(0.980)}
  40%{transform:translateY(calc(var(--sink) * 0.0114 - 10.87px)) rotate(-42.1deg) scale(0.974)}
  45%{transform:translateY(calc(var(--sink) * 0.0289 - 10.68px)) rotate(-46.1deg) scale(0.968)}
  50%{transform:translateY(calc(var(--sink) * 0.0561 - 10.38px)) rotate(-49.9deg) scale(0.960)}
  55%{transform:translateY(calc(var(--sink) * 0.0937 - 9.97px)) rotate(-53.4deg) scale(0.952)}
  60%{transform:translateY(calc(var(--sink) * 0.1424 - 9.43px)) rotate(-56.5deg) scale(0.942)}
  65%{transform:translateY(calc(var(--sink) * 0.2031 - 8.77px)) rotate(-59.4deg) scale(0.932)}
  70%{transform:translateY(calc(var(--sink) * 0.2761 - 7.96px)) rotate(-62.0deg) scale(0.922)}
  75%{transform:translateY(calc(var(--sink) * 0.3620 - 7.02px)) rotate(-64.2deg) scale(0.910)}
  80%{transform:translateY(calc(var(--sink) * 0.4612 - 5.93px)) rotate(-66.1deg) scale(0.898)}
  85%{transform:translateY(calc(var(--sink) * 0.5743 - 4.68px)) rotate(-67.7deg) scale(0.884)}
  90%{transform:translateY(calc(var(--sink) * 0.7015 - 3.28px)) rotate(-68.9deg) scale(0.870)}
  95%{transform:translateY(calc(var(--sink) * 0.8433 - 1.72px)) rotate(-69.7deg) scale(0.856)}
  100%{transform:translateY(calc(var(--sink) * 1.0000 - 0.00px)) rotate(-70.0deg) scale(0.840)}}
.up-page .slot-item.gulp .slot-hole{animation:holeGulp .7s ease-out}
@keyframes holeGulp{30%{filter:brightness(1.7);transform:translateX(-50%) scale(1.05,1.12)}}

.up-page .slot-item.opening .slot-hole,.up-page .slot-item.opening .slot-lip{animation:holeOpen .42s cubic-bezier(.2,.9,.3,1.2) both}
.up-page .slot-item.opening .pit-img{animation:pitIn .7s cubic-bezier(.16,1,.3,1) .24s both}
.up-page .slot-item.opening .slot-name{animation:nameSwap .45s var(--ease-out) .3s both}
.up-page .slot-item.opening .slot-ov{animation:fadeIn .4s .36s both}
.up-page .slot-item.opening::before,.up-page .slot-item.opening::after{animation:fadeIn .5s ease-out both}

.up-page .slot-item.leaving .slot-name,.up-page .slot-item.leaving .slot-ov{opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.up-page .slot-item.closing .slot-hole,.up-page .slot-item.closing .slot-lip{animation:holeClose .38s cubic-bezier(.55,0,.8,.3) forwards}
.up-page .slot-item.closing::before,.up-page .slot-item.closing::after{opacity:0}
@keyframes holeOpen{from{transform:translateX(-50%) scale(.04,.3);opacity:0}}
@keyframes holeClose{0%{transform:translateX(-50%) scale(1.05,1.1);filter:brightness(1.5)}100%{transform:translateX(-50%) scale(.04,.3);opacity:0}}

.up-page .sink-hole{--hole-w:50%;--hole-h:22px;--hole-b:22px;--rc:var(--accent);z-index:-1;
  animation:holeOpen .3s cubic-bezier(.2,.9,.3,1.2) both,holeClose .34s cubic-bezier(.55,0,.8,.3) var(--close-at,600ms) forwards}
.up-page .sink-hole.gulping{filter:brightness(1.6)}
.up-page .slot-mini.suck{animation:tileSuck .44s cubic-bezier(.55,0,.75,.4) var(--d,0ms) forwards;pointer-events:none}
@keyframes tileSuck{22%{transform:translate(calc(var(--dx) * .06),calc(var(--dy) * .06 - 10px)) scale(1.04);opacity:1}70%{opacity:.9}100%{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}
.up-page .slot-mini.new{animation:tileIn .42s cubic-bezier(.2,.9,.3,1.3) var(--d,0ms) both}
@keyframes tileIn{from{opacity:0;transform:translateY(14px) scale(.7)}}
.up-page .slot-mini.gone{animation:tileGone .2s ease-in forwards;pointer-events:none}
@keyframes tileGone{to{opacity:0;transform:scale(.6)}}

.up-page .pit-img.pop{animation:pitPop .7s cubic-bezier(.2,.9,.25,1.2)}
@keyframes pitPop{30%{transform:translateY(-14%) scale(1.12);filter:drop-shadow(0 14px 16px rgba(0,0,0,.55)) drop-shadow(0 0 18px var(--rc))}}
.up-page .pit-img.sink{animation:pitSink .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pitSink{to{transform:translateY(16%) scale(.94)}}

.up-page .up-slot.to .pit-img,.up-page .up-slot.to .slot-name{transition:opacity .2s,filter .2s}
.up-page .up-slot.pending .pit-img{opacity:.4;filter:drop-shadow(0 14px 16px rgba(0,0,0,.55)) grayscale(.5)}
.up-page .up-slot.pending .slot-name{opacity:.5}
.up-page .slot-name.swap{animation:nameSwap .45s var(--ease-out)}
@keyframes nameSwap{from{opacity:0;transform:translateY(6px)}}
@keyframes itemIn{from{opacity:0;transform:translateY(8px) scale(.94)}}
.up-page .slot-ov{position:absolute;inset:0;pointer-events:none;z-index:3}
.up-page .slot-ov>*{pointer-events:auto}
.up-page .slot-name{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;max-width:100%;position:relative}
.up-page .slot-name .w{font-size:.76rem;color:var(--muted);font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-page .slot-name .s{font-family:var(--font-display);font-weight:600;font-size:1.05rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-page .slot-mult{position:absolute;top:10px;right:12px;font-family:var(--font-num);font-weight:700;font-size:.95rem;color:var(--accent);
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);padding:2px 9px;border-radius:99px;line-height:1.3}
.up-page .slot-remove{position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:var(--r-xs);border:1px solid var(--border);
  background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:all .2s var(--ease)}
.up-page .slot-remove:hover{color:var(--danger);border-color:rgba(var(--danger-rgb),.45);background:rgba(var(--danger-rgb),.08)}
.up-page .slot-stamp{position:absolute;top:10px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;animation:stampIn .5s cubic-bezier(.2,.9,.3,1.5)}
.up-page .slot-stamp.win{color:var(--ok);background:rgba(var(--ok-rgb),.12);border:1px solid rgba(var(--ok-rgb),.45)}
.up-page .slot-stamp.loss{color:var(--danger);background:rgba(var(--danger-rgb),.1);border:1px solid rgba(var(--danger-rgb),.4)}
.up-page .up-slot.to.lost .pit-img{filter:drop-shadow(0 18px 26px rgba(0,0,0,.6)) grayscale(.85) brightness(.6);transition:opacity .2s,filter 1.3s cubic-bezier(.3,.05,.25,1) .12s}
@keyframes stampIn{from{opacity:0;transform:scale(.7)}}

.up-page .slot-multi{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:14px;align-content:center}
.up-page .slot-multi.n2{grid-template-columns:1fr;max-width:230px;margin:0 auto;width:100%}
.up-page .slot-multi.n2 .slot-mini img{height:92px}
.up-page .slot-multi.n3 .slot-mini img,.up-page .slot-multi.n4 .slot-mini img{height:78px}
.up-page .slot-multi.n3 .slot-mini:first-child{grid-column:1/-1}
.up-page .slot-multi.n7 .slot-mini:last-child{grid-column:1/-1}
.up-page .slot-mini{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 6px 6px;
  min-height:70px;background:radial-gradient(ellipse 60% 50% at 50% 45%,color-mix(in srgb,var(--rc) 16%,transparent),transparent 75%),linear-gradient(180deg,var(--surface2),var(--bg2));border:1px solid var(--border-soft);
  border-bottom:2px solid var(--rc);border-radius:var(--r-sm);transition:border-color .2s var(--ease);overflow:hidden}
.up-page .slot-mini img{width:100%;height:56px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.up-page .slot-mini .rc-mini{flex-shrink:0}
.up-page .slot-mini.coin img{height:34px}
.up-page .slot-mini .rc-mini{font-family:var(--font-num);font-weight:700;font-size:.82rem;color:var(--coin)}
.up-page .slot-mini>i{position:absolute;top:5px;right:6px;font-size:.62rem;opacity:0;transition:opacity .2s}
.up-page .slot-multi .slot-mini.coin img{height:40px;width:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(var(--coin-rgb),.45));animation:coinFlip 6s ease-in-out 1.5s infinite}
.up-page .slot-multi.n2 .slot-mini.coin img{height:58px}
.up-page .slot-mini.coin .rc-mini{font-size:.9rem}
.up-page .slot-mini:hover{border-color:rgba(var(--danger-rgb),.45)}
.up-page .slot-mini:hover>i{opacity:1;color:var(--danger)}


.up-page .up-center{min-width:0;display:flex}
.up-page .board-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:10px;
  border:1px solid var(--border-soft);border-radius:var(--r-xl);overflow:hidden;
  background:
    radial-gradient(ellipse 75% 45% at 50% 0%,rgba(var(--accent-rgb),.10),transparent 70%),
    radial-gradient(ellipse 60% 35% at 50% 100%,rgba(var(--accent-rgb),.06),transparent 70%),
    radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.4px) 0 0/22px 22px,
    linear-gradient(180deg,#1b1f2b 0%,#141720 100%);
  box-shadow:var(--sh-2),var(--hair),inset 0 0 60px rgba(0,0,0,.25);transition:box-shadow .35s,border-color .35s}
.up-page .board-wrap::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
.up-page .board-wrap.win-glow{border-color:rgba(var(--ok-rgb),.55);box-shadow:0 0 42px rgba(var(--ok-rgb),.3),var(--hair)}
.up-page .board-wrap.loss-glow{border-color:rgba(var(--danger-rgb),.45);box-shadow:0 0 30px rgba(var(--danger-rgb),.24),var(--hair)}
.up-page .board-wrap.win-glow::after{box-shadow:inset 0 0 110px rgba(var(--ok-rgb),.5);animation:boardFlash 1.3s ease-out forwards}
.up-page .board-wrap.loss-glow::after{box-shadow:inset 0 0 90px rgba(var(--danger-rgb),.4);animation:boardFlash 1s ease-out forwards}
@keyframes boardFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.up-page .board-box{position:relative;z-index:1;width:min(100%,var(--bw),calc(var(--stage-h) * var(--ar)));aspect-ratio:var(--ar)}
.up-page #up-board{position:absolute;display:block;left:calc(-1 * var(--padx));top:calc(-1 * var(--pady));width:calc(100% + 2 * var(--padx));
  height:calc(100% + 2 * var(--pady));cursor:ew-resize;touch-action:pan-y}
.up-page .up-stage.rolling #up-board{cursor:pointer}


.up-page .board-overlay{position:absolute;left:0;right:0;top:20%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
.up-page .board-wrap.staged .board-overlay{opacity:0;transform:translateY(-18px) scale(.95)}
.up-page .ov-chance{font-size:clamp(3rem,6vw,4.4rem);line-height:.95;letter-spacing:-.01em;color:var(--surface3);text-shadow:0 0 34px currentColor;transition:color .25s}
.up-page .ov-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.up-page .ov-mult{margin-top:10px;font-size:1.2rem;color:var(--accent);padding:2px 12px;border-radius:99px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.25)}
.up-page .ov-mult:empty{display:none}
.up-page .ov-mult.bad{color:var(--danger);background:rgba(var(--danger-rgb),.08);border-color:rgba(var(--danger-rgb),.3)}
.up-page .ov-label.warn{color:var(--danger);pointer-events:auto;cursor:default;animation:ovWarnIn .3s var(--ease-out)}
.up-page .ov-label.warn::before{content:'\f071';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.72rem;letter-spacing:0;margin-right:7px}
@keyframes ovWarnIn{from{opacity:0;transform:translateY(-4px)}}
.up-page .ov-fix{margin-top:10px;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:99px;pointer-events:auto;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:.84rem;color:var(--text);background:rgba(255,255,255,.07);border:1px solid var(--border);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.9);transition:background-color .18s,color .18s,border-color .18s,transform .18s;animation:ovWarnIn .3s var(--ease-out)}
.up-page .ov-fix i{font-size:.78rem;color:var(--accent);transition:color .18s}
.up-page .ov-fix:hover{color:var(--on-accent,#0a0a12);background:var(--accent);border-color:var(--accent)}
.up-page .ov-fix:hover i{color:inherit}
.up-page .ov-fix:active{transform:scale(.96)}
.up-page .ov-fix[hidden]{display:none}
.up-page .ov-result{margin-top:8px;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;display:inline-flex;gap:6px;align-items:center}
.up-page .ov-result.win{color:var(--ok)}

.up-page .ov-result i{transform:translateY(.13em)}
.up-page .slot-stamp i{transform:translateY(.15em)}
.up-page .ov-result.loss{color:var(--danger)}
.up-page .up-board-logo{position:absolute;left:12px;bottom:8px;z-index:0;height:30px;width:auto;opacity:.26;pointer-events:none;transition:opacity .3s var(--ease)}
.up-page .board-wrap.staged .up-board-logo{opacity:0}
.up-page .board-hint{position:absolute;bottom:10px;left:0;right:0;z-index:2;text-align:center;font-size:.72rem;color:var(--muted);pointer-events:none;transition:opacity .25s}
.up-page .board-wrap.staged .board-hint,.up-page .up-stage.rolling .board-hint,.up-page .board-wrap.wheel-roll .board-hint{opacity:0}
.up-page .board-wrap.wheel-roll .board-overlay{transition:none}
.up-page .board-wrap.wheel-roll .ov-mult,.up-page .board-wrap.wheel-roll .ov-result{opacity:var(--ov-sub,1)}


.up-page .board-overlay{will-change:opacity}
.up-page .board-wrap.revealing .board-overlay{opacity:0;transform:scale(.94)}
.up-page .mode-reveal{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-start;justify-content:center;padding-top:calc(20% + 1.2rem);pointer-events:none;opacity:0}
.up-page .mode-reveal::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 40% at 50% 32%,rgba(9,10,15,.9),rgba(9,10,15,.45) 65%,transparent)}
.up-page .mode-reveal.show{animation:mrFade 1.1s ease forwards}
@keyframes mrFade{0%{opacity:0}10%,72%{opacity:1}100%{opacity:0}}
.up-page .mr-word{position:relative;display:flex;padding-left:.16em;font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,6vw,4.4rem);
  letter-spacing:.16em;line-height:1;filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),.5))}
.up-page .mr-word span{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,#fff) 0%,color-mix(in srgb,var(--accent) 78%,#fff) 46%,var(--accent-dark) 100%);
  background-size:320% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0;
  animation:mrIn .55s cubic-bezier(.2,.9,.3,1.25) calc(var(--i) * 45ms) both,mrShine .7s ease-in-out calc(.32s + var(--i) * 40ms) both}
@keyframes mrIn{from{opacity:0;transform:translateY(-30px) scale(1.6)}}
@keyframes mrShine{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}
.up-page .mr-word::after{content:'';position:absolute;left:-10%;right:-10%;bottom:-16px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 86%,#fff) 30%,color-mix(in srgb,var(--accent) 25%,#fff) 50%,color-mix(in srgb,var(--accent) 86%,#fff) 70%,transparent);transform:scaleX(0);animation:mrLine .6s var(--ease-out) .18s forwards}
@keyframes mrLine{to{transform:scaleX(1)}}
.up-page .mode-reveal.show .mr-word{animation:mrLift .32s ease-in .8s forwards}
@keyframes mrLift{to{transform:translateY(-14px) scale(1.05);opacity:0;letter-spacing:.24em}}


.up-page .ctl{min-width:0}
.up-page .ctl-balance{display:flex;flex-direction:column;justify-content:center;gap:6px;height:var(--ctl-h);box-sizing:border-box;padding:9px 12px 9px 16px;border:1px solid var(--border-soft);
  border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--hair)}
.up-page .bal-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.78rem;color:var(--muted)}
.up-page .bal-amt{display:inline-flex;align-items:baseline;gap:7px}
.up-page .bal-amt .rc-num{font-size:1.05rem}
.up-page .bal-amt .rc-num b{font-weight:inherit}
.up-page .bal-amt .rc-icon{width:16px;height:16px}
.up-page .bal-amt .amt-typed{cursor:text;text-decoration:underline dotted rgba(var(--coin-rgb),.45);text-decoration-thickness:1px;text-underline-offset:4px}
.up-page .bal-amt .amt-typed:hover{text-decoration-color:var(--coin)}
.up-page .amt-field{box-sizing:content-box;min-width:2ch;height:1.15em;padding:1px 5px 1px 3px;margin:-2px -6px -2px -4px;border:1px solid rgba(var(--coin-rgb),.45);
  border-radius:6px;background:rgba(var(--coin-rgb),.12);color:var(--coin);caret-color:var(--coin);font:inherit;font-variant-numeric:inherit;letter-spacing:inherit;
  line-height:1;text-align:right;outline:none;-webkit-appearance:none;appearance:none}
.up-page .amt-field::placeholder{color:rgba(var(--coin-rgb),.45)}
.up-page .bal-row em{font-style:normal;font-size:.72rem}
.up-page .bal-range{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;height:22px;padding:8px 0;margin:-8px 0;border-radius:3px/11px;outline:none;cursor:pointer;
  touch-action:none;background:linear-gradient(90deg,var(--coin) 0 var(--fill,0%),var(--surface3) var(--fill,0%) 100%) content-box}
.up-page .bal-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--coin);box-shadow:0 0 0 4px rgba(var(--coin-rgb),.18)}
.up-page .bal-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--coin)}
.up-page .bal-range:disabled{opacity:.45;cursor:not-allowed}

.up-page .ctl-go{position:relative;display:flex;gap:8px}
.up-page .up-go{position:relative;overflow:hidden;height:var(--ctl-h);flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:var(--r-lg);font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:var(--on-accent,#0a0a12);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent-dark));
  box-shadow:0 14px 32px -14px rgba(var(--accent-rgb),.95),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .22s var(--ease),box-shadow .25s var(--ease),opacity .2s}
.up-page .up-go::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-150%) skewX(-18deg);transition:transform .75s var(--ease-out)}
.up-page .up-go:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(var(--accent-rgb),1),inset 0 1px 0 rgba(255,255,255,.36)}
.up-page .up-go:hover:not(:disabled)::after{transform:translateX(325%) skewX(-18deg)}
.up-page .up-go:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.up-page .up-go i{font-size:.95rem;transform:translateY(.05em)}
.up-page #up-go-label{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.up-page #up-go-label small{font-family:var(--font-body);font-size:.66rem;font-weight:600;opacity:.72;letter-spacing:.04em;margin-top:3px}

/* «Magic»: a guaranteed skin from a ladder around the stake; the board shows a «?» while the button is hovered */
.up-page .up-magic{position:relative;overflow:hidden;flex:0 0 auto;height:var(--ctl-h);min-width:118px;padding:0 22px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid rgba(var(--magic-rgb),.32);border-radius:var(--r-lg);font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;letter-spacing:.05em;color:#c4c2ff;background:linear-gradient(180deg,#232147 0%,#16152c 100%);
  box-shadow:0 14px 30px -18px rgba(var(--magic-rgb),.75),inset 0 1px 0 rgba(196,194,255,.14);
  transition:transform .22s var(--ease),box-shadow .25s var(--ease),color .2s,opacity .2s}
.up-page .up-magic::after{content:'';position:absolute;top:0;left:0;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(196,194,255,.16),transparent);transform:translateX(-150%) skewX(-18deg);transition:transform .75s var(--ease-out)}
.up-page .up-magic:hover:not(:disabled){transform:translateY(-2px);color:#e4e3ff;box-shadow:0 20px 38px -16px rgba(var(--magic-rgb),.9),inset 0 1px 0 rgba(196,194,255,.2)}
.up-page .up-magic:hover:not(:disabled)::after{transform:translateX(260%) skewX(-18deg)}
.up-page .up-magic:active:not(:disabled){transform:translateY(0) scale(.97)}
.up-page .up-magic:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.up-page .up-magic.casting{opacity:1;color:#e4e3ff}
.up-page .up-magic.casting::after{animation:magicShine 1.4s ease-in-out infinite}
.up-page .up-magic[hidden]{display:none}
@keyframes magicShine{0%{transform:translateX(-150%) skewX(-18deg)}60%,100%{transform:translateX(260%) skewX(-18deg)}}
.up-page .ov-magic{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding-bottom:4%;
  pointer-events:none;opacity:0;transform:scale(.9);transition:opacity .25s var(--ease),transform .4s var(--ease-out)}
.up-page .om-q{font-family:var(--font-display);font-weight:700;font-size:clamp(5.4rem,11vw,7.6rem);line-height:.9;color:var(--magic);
  text-shadow:0 0 38px rgba(var(--magic-rgb),.75),0 0 90px rgba(var(--magic-rgb),.35)}
.up-page .om-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--text-2)}
.up-page .om-sub{min-height:1.2em;font-size:.8rem;color:var(--muted)}
.up-page .om-sub.range{font-family:var(--font-num);font-weight:700;font-size:1.15rem;color:var(--magic)}
.up-page .board-wrap.magic-peek .ov-magic{opacity:1;transform:none}
.up-page .board-wrap.magic-peek .om-q{animation:omFloat 2.4s ease-in-out infinite}
.up-page .board-wrap.magic-peek .board-overlay,.up-page .board-wrap.magic-peek .board-hint{opacity:0}
.up-page .board-box{transition:opacity .3s var(--ease)}
.up-page .board-wrap.magic-peek .board-box{opacity:.12}
.up-page .board-wrap.magic-cast .ov-magic{animation:omCast .95s ease-out forwards}
.up-page .board-wrap.magic-cast .om-label,.up-page .board-wrap.magic-cast .om-sub{opacity:0}
.up-page .board-wrap.magic-cast .board-overlay{animation:omHold .95s step-end}
@keyframes omHold{0%{opacity:0}}
@keyframes omFloat{50%{transform:translateY(-6px)}}
@keyframes omCast{0%{opacity:0;transform:scale(.6)}22%{opacity:1;transform:scale(1.08)}55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.up-page .board-wrap.magic-glow{border-color:rgba(var(--magic-rgb),.55);box-shadow:0 0 42px rgba(var(--magic-rgb),.3),var(--hair)}
.up-page .board-wrap.magic-glow::after{box-shadow:inset 0 0 110px rgba(var(--magic-rgb),.45);animation:boardFlash 1.3s ease-out forwards}
.up-page .up-slot.magic-got{border-color:rgba(var(--magic-rgb),.6);box-shadow:0 0 44px -6px rgba(var(--magic-rgb),.42),inset 0 0 34px rgba(var(--magic-rgb),.08)}
.up-page .slot-stamp.magic{color:var(--magic);background:rgba(var(--magic-rgb),.12);border:1px solid rgba(var(--magic-rgb),.45)}
.up-page .slot-mult.up{color:var(--ok);background:rgba(var(--ok-rgb),.1);border-color:rgba(var(--ok-rgb),.3)}
.up-page .slot-mult.down{color:var(--magic);background:rgba(var(--magic-rgb),.1);border-color:rgba(var(--magic-rgb),.32)}
.up-page .ov-result.magic{color:var(--magic)}
.up-page .board-wrap.magic-run{border-color:rgba(var(--magic-rgb),.4);box-shadow:var(--sh-2),var(--hair),inset 0 0 60px rgba(0,0,0,.25),0 0 38px -10px rgba(var(--magic-rgb),.55)}
.up-page .om-stage{position:relative;display:inline-block}
.up-page .om-spark,.up-page .mg-spark{background:radial-gradient(circle,#fff 0 16%,#a9c6ff 38%,rgba(var(--magic-rgb),.6) 55%,transparent 72%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.up-page .om-spark{position:absolute;left:var(--x);top:var(--y);width:var(--w,14px);height:var(--w,14px);opacity:0}
.up-page .board-wrap.magic-peek .om-spark{animation:omTwinkle 1.7s ease-in-out var(--d,0s) infinite}
@keyframes omTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.up-page .mg-burst{position:absolute;left:50%;top:42%;width:0;height:0;z-index:4;pointer-events:none}
.up-page .mg-flash{position:absolute;left:-70px;top:-70px;width:140px;height:140px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(var(--magic-rgb),.5),rgba(var(--magic-rgb),.16) 45%,transparent 70%);animation:mgFlash .6s ease-out forwards}
.up-page .mg-burst.big .mg-flash{left:-100px;top:-100px;width:200px;height:200px}
.up-page .mg-spark{position:absolute;left:-8px;top:-8px;width:16px;height:16px;opacity:0;animation:mgSpark .85s cubic-bezier(.2,.8,.3,1) var(--d,0ms) forwards}
@keyframes mgFlash{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes mgSpark{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--s,1)) rotate(120deg)}}
html.reduce-motion .up-page .board-wrap.magic-peek .om-q,html.reduce-motion .up-page .up-magic.casting::after,
html.reduce-motion .up-page .board-wrap.magic-peek .om-spark{animation:none}

.up-page .ctl-chips{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-content:center}
.up-page .ctl-chips button{height:var(--ctl-h);background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--r-md);color:var(--text-2);
  font-family:var(--font-num);font-weight:700;font-size:1rem;transition:all .2s var(--ease);box-shadow:var(--hair)}
.up-page .ctl-chips button:hover:not(:disabled){border-color:var(--border-strong);color:var(--text);transform:translateY(-1px)}
.up-page .ctl-chips .pc.lo{border-color:rgba(var(--danger-rgb),.35)}
.up-page .ctl-chips .pc.mid{border-color:rgba(var(--accent-rgb),.35)}
.up-page .ctl-chips .pc.hi{border-color:rgba(var(--ok-rgb),.35)}
.up-page .ctl-chips button.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.1)}
.up-page .ctl-chips button:disabled{opacity:.4;cursor:not-allowed}


.up-page .up-lists{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.up-page .up-panel{min-width:0;display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:var(--r-xl);
  background:var(--panel);box-shadow:var(--sh-2),var(--hair);overflow:hidden}
.up-page .panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--border-soft);background:rgba(0,0,0,.12)}
.up-page .panel-icon{width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--text-2);font-size:.9rem}
.up-page .panel-icon.accent{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent-dark));color:var(--on-accent,#0a0a12)}
.up-page .panel-title{font-family:var(--font-display);font-weight:600;font-size:1.02rem;display:flex;align-items:baseline}
.up-page .panel-tools{display:flex;gap:6px;align-items:center;margin-left:auto;flex:1;justify-content:flex-end;min-width:0;max-width:440px}
.up-page .up-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));grid-auto-rows:max-content;gap:8px;
  max-height:560px;overflow-y:auto;padding:12px;align-content:start}
.up-page #up-cat-grid{height:560px}
.up-page .grid-empty{grid-column:1/-1;padding:40px 10px;text-align:center;color:var(--muted);font-size:.85rem;
  border:1px dashed var(--border);border-radius:var(--r-md)}

.up-page .up-card{position:relative;display:flex;flex-direction:column;min-width:0;text-align:left;padding:0;
  background:linear-gradient(180deg,#1d212c 0%,#161922 100%);
  border:1px solid color-mix(in srgb,var(--rc) 14%,var(--border-soft));border-bottom:2px solid var(--rc);
  border-radius:var(--r-md);overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),opacity .25s}
.up-page .up-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--rc) 55%,var(--border-strong));box-shadow:var(--sh-2);z-index:2}
.up-page .up-card-top{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:7px 8px 0;position:relative;z-index:1}
.up-page .up-card-top .rc{font-size:.84rem;--cap:.52}
.up-page .up-card-top .rc-icon{width:12px;height:12px}
.up-page .up-card-tr{display:flex;align-items:center;gap:5px;min-width:0}
.up-page .up-card-wear{font-family:var(--font-num);font-size:.7rem;font-weight:700;line-height:1;letter-spacing:.06em;color:var(--muted)}
.up-page .up-card:hover .up-card-wear{color:var(--text-2)}
.up-page .up-card-badge{font-family:var(--font-num);font-size:.72rem;font-weight:700;line-height:1;padding:3px 6px;border-radius:99px;
  border:1px solid var(--border);background:rgba(8,9,13,.7);color:var(--text-2)}
.up-page .up-card-badge.chance{color:var(--ok);border-color:rgba(var(--ok-rgb),.3)}
.up-page .up-card-badge.check{color:var(--on-accent,#0a0a12);background:var(--accent);border-color:var(--accent);padding:3px 5px;font-size:.62rem}
.up-page .up-card-badge.new{font-family:var(--font-body);font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ok);border-color:rgba(var(--ok-rgb),.4);background:rgba(var(--ok-rgb),.1);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.up-page .up-card-badge.new.gone{opacity:0;transform:scale(.6)}

.up-page .up-card::before{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  background:linear-gradient(0deg,color-mix(in srgb,var(--rc) 13%,transparent),transparent)}
.up-page .up-card-media{height:78px;display:flex;align-items:center;justify-content:center;padding:4px 10px;position:relative}
.up-page .up-card-media::before{content:'';position:absolute;left:50%;top:55%;width:72%;height:62%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 30%,transparent),transparent);opacity:.55;
  transition:opacity .3s var(--ease),transform .35s var(--ease)}
.up-page .up-card:hover .up-card-media::before{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
.up-page .up-card-media img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5));transition:transform .3s var(--ease-out)}
.up-page .up-card:hover .up-card-media img{transform:scale(1.07)}
.up-page .up-card-name{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 8px 9px;min-width:0}
.up-page .up-card-name .w{font-size:.62rem;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-page .up-card-name .s{font-family:var(--font-display);font-weight:600;font-size:.78rem;color:var(--text-2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-page .up-card:hover .up-card-name .s{color:var(--text)}
.up-page .up-card.sel{border-color:var(--accent);border-bottom-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 0 24px -8px rgba(var(--accent-rgb),.8)}
.up-page .up-card.dim,.up-page .up-inv-roll>.up-card{opacity:.35;filter:grayscale(.6)}
.up-page .up-card.dim:hover,.up-page .up-inv-roll>.up-card:hover{opacity:.7;transform:none;box-shadow:none}
.up-page .up-no-tr>.up-card{transition:none}
.up-page .up-card.locked{pointer-events:none}
.up-page .up-card.selling{animation:sellOut .26s var(--ease) forwards;pointer-events:none}
@keyframes sellOut{to{opacity:0;transform:scale(.86) translateY(6px)}}
.balance-chip.bal-bump{animation:balBump .55s var(--ease)}
@keyframes balBump{35%{transform:scale(1.07);box-shadow:0 0 0 4px rgba(var(--coin-rgb),.22),0 0 26px rgba(var(--coin-rgb),.45)}}
.up-page .up-card.fresh{box-shadow:0 0 0 1px rgba(var(--ok-rgb),.4),0 0 10px -1px rgba(var(--ok-rgb),.55)}

.up-page .up-card.incoming .up-card-media img{opacity:0}
.up-page .up-card.arrive{animation:cardArrive .9s var(--ease-out)}
.up-page .up-card.arrive .up-card-media img{animation:imgLand .5s cubic-bezier(.2,.9,.3,1.5)}
@keyframes cardArrive{0%{border-color:var(--ok);box-shadow:0 0 0 2px rgba(var(--ok-rgb),.9),0 0 9px rgba(var(--ok-rgb),.85),inset 0 0 28px rgba(var(--ok-rgb),.45)}}
@keyframes imgLand{40%{transform:scale(1.08)}}   
.up-page .muted-count{display:inline-block}
.up-page .muted-count.bump{animation:countBump .55s var(--ease)}
@keyframes countBump{35%{color:var(--ok);transform:scale(1.3)}}
.fly-skin{position:fixed;z-index:500;object-fit:contain;pointer-events:none;will-change:transform;transform-origin:50% 50%;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(56,209,138,.55))}


.up-page .sell-btn{gap:7px;padding:0 12px}
.up-page .sell-btn .sb-l{font-size:.8rem;font-weight:600}
.up-page .sell-btn .rc{font-size:.92rem}
.up-page .sell-btn .rc-icon{width:13px;height:13px}
.up-page .sell-btn.ready{color:var(--accent);border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.1)}
.up-page .sell-btn.ready:hover:not(:disabled){color:var(--accent);background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.8)}
.up-page .pit-img.sold,.up-page .slot-mini.sold{animation:soldPoof .34s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none}
@keyframes soldPoof{35%{transform:scale(1.12);filter:brightness(1.9);opacity:1}100%{transform:scale(.45);opacity:0}}
.up-page .up-card.nope{animation:nope .32s}
@keyframes nope{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}


.up-page .up-tools{position:relative}
.up-page .info-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:min(380px,calc(100vw - 24px));padding:16px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#1c202b,#151821);border:1px solid var(--border);box-shadow:var(--sh-3),var(--hair);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s .25s}
.up-page .info-pop.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .25s var(--ease)}
.up-page .ip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-family:var(--font-display);font-weight:600;font-size:1.02rem}
.up-page .ip-close{width:28px;height:28px;border-radius:var(--r-xs);border:1px solid var(--border);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.75rem}
.up-page .ip-close:hover{color:var(--text);border-color:var(--border-strong)}
.up-page .ip-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:st}
.up-page .ip-steps li{display:grid;grid-template-columns:24px 1fr;column-gap:10px;counter-increment:st;font-size:.8rem;line-height:1.4;color:var(--text-2)}
.up-page .ip-steps li::before{content:counter(st);grid-row:1/3;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.4);color:var(--accent);font-family:var(--font-num);font-weight:700;font-size:.85rem}
.up-page .ip-steps b{color:var(--text);font-weight:600;font-size:.86rem}
.up-page .ip-steps em,.up-page .ip-tips b{font-style:normal;color:var(--text)}
.up-page .ip-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 12px;padding-top:12px;border-top:1px solid var(--border-soft)}
.up-page .ip-modes div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--r-sm);background:rgba(0,0,0,.18);border:1px solid var(--border-soft)}
.up-page .ip-modes b{font-size:.78rem;color:var(--accent);font-weight:700;letter-spacing:.04em}
.up-page .ip-modes span{font-size:.72rem;color:var(--muted);line-height:1.35}
.up-page .ip-tips{display:flex;flex-direction:column;gap:7px;font-size:.76rem;color:var(--muted);line-height:1.4}
.up-page .ip-tips div{display:flex;gap:9px;align-items:baseline}
.up-page .ip-tips i{color:var(--accent);width:14px;text-align:center;font-size:.75rem}
.up-page .ip-link{color:var(--accent);text-decoration:none;white-space:nowrap}
.up-page .ip-link:hover{text-decoration:underline}


.up-page .m-dock{display:none}


.up-page .dev-tools{margin-top:28px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px dashed var(--border);
  border-radius:var(--r-md);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.up-page .dev-tools span{margin-right:6px;font-weight:700}
.up-page .dev-tools button{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:var(--r-xs);padding:6px 10px;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.up-page .dev-tools button:hover{color:var(--text);border-color:var(--accent)}


@media(max-width:1100px){
  .up-page .up-stage{grid-template-columns:1fr 1fr}
  .up-page .up-center{grid-column:1/-1;order:3}
  .up-page .up-slot.from{order:1}.up-page .up-slot.to{order:2}
  .up-page .ctl-go{grid-column:1/-1;order:4}
  .up-page .ctl-balance{order:5}.up-page .ctl-chips{order:6}
  .up-page .slot-body{min-height:200px}
  .up-page .slot-media{height:120px;--sink:122px}
  .up-page .pit-img{height:84px}.up-page .slot-item.coin .pit-img{height:70px}
  .up-page .board-box{width:min(100%,var(--bw))}
}
@media(max-width:860px){
  .up-page .up-lists{grid-template-columns:1fr}
  .up-page .up-grid{max-height:440px}
  .up-page #up-cat-grid{height:440px}
}
@media(max-width:640px){
  .up-page{--gutter:12px}
  .up-page .up-stage{gap:10px}
  .up-page .ctl-balance,.up-page .ctl-chips{grid-column:1/-1}
  .up-page .slot-head{padding:14px 10px 0}
  .up-page .slot-title{font-size:.88rem}
  .up-page .slot-sub{font-size:.72rem}
  .up-page .slot-body{min-height:160px}
  .up-page .slot-media{height:90px;--hole-h:18px;--hole-b:4px;--sink:100px}
  .up-page .pit-img{height:58px}.up-page .slot-item.coin .pit-img{height:50px}
  .up-page .slot-name .s{font-size:.86rem}
  .up-page .slot-art i{font-size:2.4rem}
  .up-page .slot-foot{padding:10px 12px}
  .up-page .slot-foot .rc{font-size:1rem}
  .up-page .up-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .up-page .up-top .back-btn{padding:6px 11px 6px 9px;font-size:.8rem}
  .up-page .up-tools .icon-btn{width:30px}
  .up-page .mode-switch{margin-left:4px}
  .up-page .mode-switch span{display:none}
  
  .up-page{padding-bottom:96px}
  .up-page .up-top{margin-bottom:12px}
  .up-page .board-wrap{padding:4px;border-radius:var(--r-lg)}
  .up-page .ov-chance{font-size:2.7rem}
  .up-page .up-board-logo{left:8px;bottom:6px;height:24px}
  .up-page .ov-mult{font-size:1rem;margin-top:6px}
  .up-page .up-slot{border-radius:var(--r-lg)}
  .up-page .slot-remove,.up-page .slot-mult{top:8px;right:8px}
  .up-page .slot-mult{font-size:.8rem;padding:1px 7px}
  .up-page .slot-stamp{top:8px;left:8px;padding:3px 8px;font-size:.58rem;letter-spacing:.1em}
  .up-page .slot-multi{gap:5px;padding:10px}
  .up-page .slot-mini{min-height:54px;padding:6px 4px 4px}
  .up-page .slot-mini img{height:40px}
  .up-page .slot-multi.n2 .slot-mini img{height:56px}
  .up-page .slot-multi.n2 .slot-mini.coin img{height:44px}
  .up-page .slot-multi .slot-mini.coin img{height:32px}
  .up-page .slot-multi.n3 .slot-mini img,.up-page .slot-multi.n4 .slot-mini img{height:46px}
  .up-page{--ctl-h:54px}
  .up-page .up-go{font-size:1.05rem}
  
  .up-page .ctl-chips{grid-template-columns:repeat(7,1fr);gap:4px}
  .up-page .ctl-chips button{font-size:.88rem;border-radius:var(--r-sm)}
  .up-page .ctl-balance{height:auto;min-height:var(--ctl-h);padding:9px 12px 10px 14px;gap:8px}
  
  .up-page .up-lists{margin-top:14px;gap:12px}
  .up-page .up-grid{max-height:62vh;padding:10px;gap:6px}
  .up-page #up-cat-grid{height:62vh}
  .up-page .panel-head{padding:10px 12px}
  .up-page .sell-btn .sb-l{display:none}
  .up-page .mr-word{font-size:2.3rem;letter-spacing:.12em}
  .up-page .info-pop{position:fixed;top:auto;left:12px;right:12px;width:auto;bottom:12px;transform-origin:bottom center;z-index:300}
  
  .up-page .m-dock{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:90;align-items:center;gap:12px;
    padding:7px 7px 7px 16px;border-radius:16px;background:rgba(20,22,30,.97);border:1px solid var(--border);
    box-shadow:0 18px 40px -10px rgba(0,0,0,.85),var(--hair);transform:translateY(150%);opacity:0;pointer-events:none;
    transition:transform .35s var(--ease),opacity .25s}
  .up-page .m-dock.show{transform:none;opacity:1;pointer-events:auto}
  .up-page .md-info{display:flex;flex-direction:column;line-height:1.05;min-width:0}
  .up-page .md-info b{font-size:1.45rem;font-family:var(--font-num);font-weight:700}
  .up-page .md-info span{font-size:.82rem;color:var(--accent);font-family:var(--font-num);font-weight:700}
  .up-page .md-info span.warn{color:var(--danger);font-family:var(--font-body);font-size:.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .up-page .md-go{margin-left:auto;height:46px;padding:0 22px;border:0;border-radius:12px;display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--on-accent,#0a0a12);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,#fff),var(--accent-dark));
    box-shadow:0 10px 24px -12px rgba(var(--accent-rgb),.95),inset 0 1px 0 rgba(255,255,255,.3)}
  .up-page .md-go:disabled{opacity:.45}
  .up-page .md-magic{flex:0 0 auto;height:46px;padding:0 14px;margin-left:auto;border:1px solid rgba(var(--magic-rgb),.32);border-radius:12px;display:inline-flex;align-items:center;
    justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:.04em;color:#c4c2ff;
    background:linear-gradient(180deg,#232147 0%,#16152c 100%);box-shadow:0 10px 24px -14px rgba(var(--magic-rgb),.8),inset 0 1px 0 rgba(196,194,255,.14)}
  .up-page .md-magic:disabled{opacity:.45}
  .up-page .md-magic[hidden]{display:none}
  .up-page .md-magic:not([hidden])+.md-go{margin-left:0}
  .up-page .up-magic{min-width:0;padding:0 16px;font-size:.92rem}
  .up-page .mode-switch button{padding:0 10px}
  .up-page .beta-badge{display:none}
  .up-page .board-hint{display:none}
  .up-page .panel-tools{max-width:none;flex-basis:100%;flex-wrap:wrap}
}

/* ---------- site integration ---------- */
/* .page-container always carries a transform, which would turn the fixed mobile dock into a page-relative box */
#upgrade-page{transform:none}
#upgrade-page.page-hidden{transform:translateY(10px)}
.up-page .up-heading{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:.01em;color:var(--text)}
.up-page .up-heading i{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-size:.95rem;color:var(--on-accent,#0a0a12);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent-dark));box-shadow:0 6px 16px -8px rgba(var(--accent-rgb),.9)}
.up-page .grid-empty.guest{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-2)}
.up-page .grid-empty.guest>i{font-size:1.8rem;color:#66c0f4}
.up-page .up-login{height:38px;padding:0 16px;border-radius:var(--r-sm);border:1px solid rgba(102,192,244,.4);background:rgba(102,192,244,.1);color:#cfe9fb;font-weight:600}
.up-page .up-login:hover{background:rgba(102,192,244,.2)}
.up-page .up-card-badge.lock{color:var(--muted);padding:3px 5px;font-size:.6rem}
.up-page .up-card.is-locked{cursor:not-allowed}
@media(max-width:640px){.up-page .up-heading{font-size:1.1rem}.up-page .up-heading span{display:none}}

/* ---------- RazeCase <-> RazeGrade: the floating mode toggle ---------- */
.mode-toggle{position:fixed;left:22px;bottom:22px;z-index:95;display:flex;align-items:center;gap:2px;padding:4px;border-radius:99px;
  background:#12141c;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.9),0 0 0 1px rgba(var(--accent-rgb),.07),inset 0 1px 0 rgba(255,255,255,.05);
  transition:opacity .3s ease,transform .4s cubic-bezier(.2,.9,.3,1.2),bottom .35s ease}
.mode-toggle.hidden{opacity:0;transform:translateY(18px) scale(.96);pointer-events:none}
.mode-toggle .mt-knob{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:99px;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent-dark));
  box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.95),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .5s cubic-bezier(.3,1.35,.5,1),width .5s cubic-bezier(.3,1.35,.5,1)}
.mode-toggle .mt-knob.no-anim{transition:none}
.mode-toggle .mt-opt{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:99px;
  background:transparent;color:#8a91a5;font-family:'Jost',sans-serif;font-weight:600;font-size:.88rem;letter-spacing:.01em;cursor:pointer;transition:color .3s ease}
.mode-toggle .mt-opt i{font-size:.85rem}
.mode-toggle .mt-opt:hover:not(.on){color:#edeff5}
.mode-toggle .mt-opt.on{color:var(--on-accent,#0a0a12)}
.mode-toggle.nope{animation:mtNope .36s}
@keyframes mtNope{20%,60%{translate:-4px 0}40%,80%{translate:4px 0}}
@media(max-width:640px){
  .mode-toggle{left:12px;bottom:12px}
  .mode-toggle .mt-opt{height:36px;padding:0 13px;gap:0}
  .mode-toggle .mt-opt span{display:none}
  .mode-toggle.on-grade{bottom:84px}
}

/* ---------- header logo: Case / Grade / Lol roll on the same mascot ---------- */
.logo .rc-logo{display:block;height:var(--logo-h,32px);--logo-h:32px;overflow:hidden;filter:drop-shadow(0 2px 10px rgba(var(--accent-rgb),.22));
  transition:width .55s cubic-bezier(.3,1.25,.5,1)}
.logo .rc-logo.no-anim{transition:none}
.logo.has-svg #header-logo-img{display:none!important}
html.accent-rgb .logo .rc-logo{filter:hue-rotate(var(--accent-hue,0deg)) drop-shadow(0 2px 10px rgba(var(--accent-rgb),.22))}
/* a seasonal mark (Js/Season.js) is fixed-colour art: the brand word takes the accent instead of a hue-rotated logo */
.rc-logo.has-mark .lg-brand path{fill:var(--accent)}
html.accent-rgb .logo .rc-logo.has-mark{filter:drop-shadow(0 2px 10px rgba(var(--accent-rgb),.22))}
.rc-logo .lg-word{opacity:0;transform:translateY(30px)}
.rc-logo .lg-word.cur{opacity:1;transform:none}
.rc-logo .lg-word.in{animation:lgIn .55s cubic-bezier(.2,.9,.3,1.25) .16s both}
.rc-logo .lg-word.out{animation:lgOut .26s cubic-bezier(.55,0,.8,.4) forwards}
@keyframes lgIn{from{opacity:0;transform:translateY(30px)}45%{opacity:1}to{opacity:1;transform:none}}
@keyframes lgOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-30px)}}
.rc-logo .lg-base{transform-box:fill-box;transform-origin:30% 70%}
.logo.lg-switching .rc-logo .lg-base{animation:lgHop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes lgHop{30%{transform:translateY(-3px) rotate(-4deg) scale(1.04)}}
/* the glint runs across the glyphs only: it is masked by the logo's own shapes */
.rc-logo mask path{fill:#fff}
.rc-logo .lg-glint{opacity:0}
.logo.lg-switching .rc-logo .lg-glint{animation:lgGlint .85s cubic-bezier(.4,0,.3,1) .18s}
@keyframes lgGlint{0%{transform:translateX(0);opacity:1}100%{transform:translateX(200px);opacity:1}}
@media(max-width:520px){.logo .rc-logo{display:none!important}}
html.reduce-motion .rc-logo .lg-word,html.reduce-motion .logo .rc-logo{animation:none!important;transition:none!important}
@media(max-width:640px){html.site-grade #global-scroll-top{bottom:84px}}
/* Settings > borders off (html.reduced-borders zeroes every border): keep the ones that carry meaning,
   the same way Base.css keeps the rarity edge of .content-item */
html.reduced-borders .up-page .up-card,html.reduced-borders .up-page .slot-mini{border-bottom-style:solid!important;border-bottom-width:2px!important}
html.reduced-borders .up-page .ctl-chips .pc,html.reduced-borders .up-page .ctl-chips button.on,html.reduced-borders .up-page .slot-stamp,
html.reduced-borders .up-page .ov-mult{border-style:solid!important;border-width:1px!important}
html.reduced-borders .up-page .slot-lip{border-bottom-style:solid!important;border-bottom-width:1px!important}
.up-page .grid-more{grid-column:1/-1;height:1px}