.sf-trigger-fly{position:fixed;z-index:45;pointer-events:none;margin:0}
.sf-trigger-fly .sfc-icon{width:66%;height:auto;aspect-ratio:1}

.sf{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 16px;
  color:var(--text);
  font-family:var(--font-body);
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.sf-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,2.2vh,20px);
  width:min(92vw,1020px);
}
.sf-head,
.sf-foot,
.sf-sum{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease .2s,transform .4s var(--ease) .2s;
}
.sf.in .sf-head,
.sf.in .sf-foot,
.sf.in .sf-sum{opacity:1;transform:none}
.sf.is-ending .sf-foot,
.sf.is-won .sf-foot,
.sf.is-auto .sf-foot{opacity:0;pointer-events:none;transition-delay:0s}
.sf-title{
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:34px;
  padding:0 16px;
  border-radius:99px;
  border:1px solid rgba(190,150,255,.3);
  background:rgba(164,107,255,.09);
  color:#cdb2ff;
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.sf-icon{width:17px;height:17px;flex:none}
.sf-title b{
  margin-left:4px;
  padding-left:11px;
  border-left:1px solid rgba(190,150,255,.3);
  font-family:var(--font-num);
  font-size:.92rem;
  letter-spacing:.04em;
  color:#efe6ff;
}
html.reduced-borders .sf-title b{border-left-width:0!important;padding-left:4px}
.sf-hint{
  min-height:1.3em;
  max-width:min(92vw,640px);
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.1rem;
  line-height:1.3;
  text-align:center;
}
.sf-hint.good{color:#ffd9a8}

.sf-rail{
  --mw:clamp(92px,11vw,124px);
  --pw:calc(var(--mw) * .8);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:calc(var(--mw) * 1.27);
}
.sf-rail .sf-plus{position:absolute;left:calc(50% + var(--mw) / 2 + 9px);top:50%;transform:translateY(-50%)}
.sf-rail .sf-pend{position:absolute;left:calc(50% + var(--mw) / 2 + 32px);top:50%;margin-top:calc(var(--pw) * -.635)}
.sf-rail:not(.has-pair) .sf-plus,
.sf-rail .sf-pend.is-empty{visibility:hidden}
.sf-slot,
.sf-fly{--rc:#4b69ff}
.sf-slot{
  position:relative;
  flex:none;
  width:var(--pw);
  height:calc(var(--pw) * 1.27);
  border-radius:var(--r-sm);
}
.sf-slot.sf-main{width:var(--mw);height:calc(var(--mw) * 1.27)}
.sf-slot.is-empty{background:rgba(255,255,255,.04);box-shadow:inset 0 8px 18px rgba(0,0,0,.5)}
.sf-slot.is-empty .sf-card{display:none}
.sf-plus{
  font-style:normal;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color:var(--muted);
}
.sf-card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 4%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 64%),
    linear-gradient(180deg,#171a22,#101218);
  box-shadow:inset 0 -3px 0 var(--rc),inset 0 1px 0 rgba(255,255,255,.05),0 12px 26px -12px rgba(0,0,0,.8);
  font-size:calc(7px + var(--pw) * .045);
}
.sf-main .sf-card{font-size:calc(7px + var(--mw) * .045)}
.sf-card-top{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin:6px 0 0 7px;
  font-family:var(--font-num);
  font-weight:700;
  font-size:1.05em;
  line-height:1;
  color:var(--text);
}
.sf-card-top img[src*="RazeCoin"]{width:1em;height:1em;transform:none}
.sf-card-img{
  width:94%;
  flex:1 1 auto;
  min-height:0;
  object-fit:contain;
  padding:2px 6px;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));
}
.sf-card-name{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding:0 6px 9px;
  line-height:1.2;
  text-align:center;
}
.sf-card-name .w{max-width:100%;font-size:.78em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-card-name .s{max-width:100%;font-family:var(--font-display);font-weight:600;font-size:.95em;color:color-mix(in srgb,var(--rc) 52%,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-merge-flash{
  position:absolute;
  inset:-6px;
  z-index:3;
  border-radius:var(--r-md);
  pointer-events:none;
  background:radial-gradient(circle at 50% 45%,#fff,color-mix(in srgb,var(--rc) 60%,#fff) 40%,transparent 72%);
}
.sf-fly{position:fixed;z-index:44;pointer-events:none}
.sf-out{z-index:44}

.sf-sum{
  flex-direction:row;
  gap:7px;
  min-height:28px;
  font-size:.86rem;
  color:var(--text-2);
}
.sf-sum img[src*="RazeCoin"]{width:16px;height:16px;transform:none}
.sf-sum b{font-family:var(--font-num);font-weight:700;font-size:1.12rem;color:var(--text);font-variant-numeric:tabular-nums}
.sf-tray{display:inline-flex;gap:4px}
.sf-tray:empty{display:none}
.sf-chip{
  --rc:#4b69ff;
  display:inline-flex;
  width:34px;
  height:26px;
  border-radius:6px;
  background:linear-gradient(180deg,#1b1f29,#12141b);
  box-shadow:inset 0 -2px 0 var(--rc);
}
.sf-chip img{width:100%;height:100%;object-fit:contain;padding:2px;transform:none}

.sf-board{display:flex;justify-content:center;width:100%}
.sf-board.wait .sf-grid{visibility:hidden}
.sf-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap,16px);
}
.sf-safe{
  position:relative;
  flex:none;
  width:var(--sw,120px);
  height:var(--sw,120px);
  border-radius:calc(var(--sw,120px) * .1);
  background:linear-gradient(160deg,#2c313c 0%,#1d2029 55%,#16181f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 0 rgba(0,0,0,.45),0 16px 28px -16px rgba(0,0,0,.9);
  cursor:default;
  outline:none;
  transition:transform .22s var(--ease),filter .22s ease,opacity .3s ease;
}
.sf-grid.live:not(.is-busy) .sf-safe:not(.is-open){cursor:pointer}
@media (hover:hover){
  .sf-grid.live:not(.is-busy) .sf-safe:not(.is-open):hover{transform:translateY(-4px);filter:brightness(1.12)}
  .sf-grid.live:not(.is-busy) .sf-safe:not(.is-open):hover .sf-wheel{rotate:-14deg}
}
.sf-grid.live .sf-safe:not(.is-open):focus-visible{box-shadow:0 0 0 2px var(--accent),0 16px 28px -16px rgba(0,0,0,.9)}
.sf-in{
  position:absolute;
  inset:9%;
  border-radius:calc(var(--sw,120px) * .06);
  overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#151820,#07080b 72%);
  box-shadow:inset 0 8px 16px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.6);
}
.sf-loot{
  --rc:#4b69ff;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--rc) 34%,transparent),transparent 62%);
  opacity:0;
}
.sf-safe.is-loot .sf-loot,
.sf-safe.is-dud .sf-loot{opacity:1}
.sf-loot img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.sf-loot .fa-bomb{font-size:calc(var(--sw,120px) * .3);color:#ff8a5c}
.sf-safe.is-dud .sf-loot{background:radial-gradient(circle at 50% 55%,rgba(255,110,60,.22),transparent 62%)}
.sf-safe.is-empty .sf-in{opacity:.7}
.sf-safe.is-rest{opacity:.5}
.sf-door{
  position:absolute;
  inset:6%;
  z-index:2;
  border-radius:calc(var(--sw,120px) * .07);
  transform-origin:0 50%;
  background:linear-gradient(155deg,#3a404d 0%,#2b303a 55%,#22262f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.35),2px 0 6px rgba(0,0,0,.35);
}
.sf-door svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sf-bevel{fill:none;stroke:rgba(0,0,0,.38);stroke-width:1.4}
.sf-hinge{fill:#1a1d24}
.sf-bolt{fill:#5d6576}
.sf-no{font-family:var(--font-num);font-weight:700;font-size:11px;fill:#7d8597;letter-spacing:.04em}
.sf-dial{transform-box:fill-box;transform-origin:50% 50%}
.sf-dial-face{fill:#1b1f27;stroke:#69717f;stroke-width:1.4}
.sf-dial-ticks line{stroke:#69717f;stroke-width:.8}
.sf-dial-hand{stroke:#d6dbe6;stroke-width:1.6;stroke-linecap:round}
.sf-ring{fill:none;stroke:#1a1d24;stroke-width:5}
.sf-wheel{transform-box:view-box;transform-origin:50px 55px;transition:rotate .25s var(--ease)}
.sf-wheel line{stroke:#9aa3b5;stroke-width:3.6;stroke-linecap:round}
.sf-knob{fill:#aab2c3}
.sf-hub{fill:#b9c0cf;stroke:#2a2f39;stroke-width:1.2}
.sf-safe.is-armed{z-index:1}
.sf-safe.is-armed .sf-door{background:linear-gradient(155deg,#4a3a36 0%,#33292a 55%,#271f21 100%)}
.sf-leak{
  position:absolute;
  inset:3%;
  z-index:1;
  border-radius:calc(var(--sw,120px) * .08);
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 50%,#ffd2a0 0%,#ff6a2a 46%,#e8261a 78%,#a3120c 100%);
}
.sf-safe.is-blown{background:linear-gradient(160deg,#2a1d18,#160f0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 calc(var(--sw,120px) * .18) rgba(0,0,0,.85),0 16px 28px -16px rgba(0,0,0,.9)}
.sf-safe.is-blown .sf-in{background:radial-gradient(circle at 50% 50%,#3a1a0c,#090505 72%)}
.sf-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 62%,rgba(255,170,80,.95),rgba(255,90,30,.55) 30%,rgba(120,30,10,.25) 55%,transparent 75%);
}

.sf-fire{
  position:fixed;
  opacity:0;
  z-index:46;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#fff1c1 14%,#ffb347 32%,rgba(255,110,30,.75) 50%,rgba(255,70,20,.25) 62%,transparent 70%);
}
.sf-fire.b{background:radial-gradient(circle,#ffe9b0 0%,#ffa040 26%,rgba(255,96,24,.7) 46%,rgba(200,50,16,.25) 60%,transparent 70%)}
.sf-fire.c{z-index:45;background:radial-gradient(circle,rgba(255,200,120,.9) 0%,rgba(255,120,40,.6) 28%,rgba(150,50,20,.35) 50%,rgba(60,30,24,.2) 62%,transparent 72%)}
.sf-rays{
  position:fixed;
  z-index:47;
  pointer-events:none;
  border-radius:50%;
  opacity:0;
  background:repeating-conic-gradient(from 4deg,rgba(255,236,190,0) 0deg 10deg,rgba(255,232,180,.38) 11.5deg 12.5deg,rgba(255,236,190,0) 14deg 26deg);
  -webkit-mask:radial-gradient(circle,#000 12%,rgba(0,0,0,.6) 34%,transparent 66%);
  mask:radial-gradient(circle,#000 12%,rgba(0,0,0,.6) 34%,transparent 66%);
}
.sf-core{
  position:fixed;
  opacity:0;
  z-index:48;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,252,240,.95) 28%,rgba(255,236,190,.45) 50%,transparent 70%);
}
.sf-wave{
  position:fixed;
  opacity:0;
  z-index:46;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,transparent 50%,rgba(255,236,200,.5) 60%,rgba(255,170,90,.22) 67%,transparent 74%);
}
.sf-door-fly{position:fixed;inset:auto;z-index:47;pointer-events:none;transform-origin:50% 50%;background:linear-gradient(155deg,#4a3a36 0%,#33292a 55%,#271f21 100%)}
.sf-shard{
  position:fixed;
  opacity:0;
  z-index:47;
  pointer-events:none;
  background:linear-gradient(135deg,#7a8191 0%,#3b404b 45%,#1c1f26 100%);
  clip-path:polygon(0 18%,72% 0,100% 64%,30% 100%);
}
.sf-shard.k1{clip-path:polygon(10% 0,100% 30%,64% 100%,0 70%)}
.sf-shard.k2{clip-path:polygon(0 0,100% 44%,18% 100%)}
.sf-ember{
  position:fixed;
  opacity:0;
  z-index:47;
  width:4px;
  height:4px;
  margin:-2px 0 0 -2px;
  border-radius:50%;
  pointer-events:none;
  background:#ffd890;
  box-shadow:0 0 6px 2px rgba(255,140,40,.75);
}
.sf-smoke{
  position:fixed;
  opacity:0;
  z-index:45;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(82,84,92,.85),rgba(60,62,70,.4) 45%,transparent 70%);
}
.sf-smoke.dark{background:radial-gradient(circle,rgba(34,34,38,.9),rgba(28,28,32,.45) 45%,transparent 70%)}

.sf-foot .sf-auto{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 18px;
  border-radius:99px;
  border:1px solid var(--border);
  background:rgba(17,19,26,.72);
  color:var(--text-2);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.86rem;
  cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.sf-auto:hover{color:#fff;background:var(--surface2)}
.sf-auto i{font-size:.8rem;color:#cdb2ff}
.sf-auto kbd{padding:2px 6px;border-radius:5px;background:var(--surface3);color:var(--muted);font-family:var(--font-body);font-size:.68rem;font-weight:600}
@media (pointer:coarse){.sf-auto kbd{display:none!important}}

.sf.is-won .sf-board,
.sf.is-won .sf-rail > :not(.sf-main),
.sf.is-won .sf-sum{opacity:.0;transition:opacity .35s ease}
.sf.is-won .sf-head{opacity:1}

@media (max-width:768px){
  .sf{padding:14px 10px}
  .sf-stage{width:100%}
  .sf-rail{--mw:86px;--pw:66px}
  .sf-rail .sf-pend{left:calc(50% + var(--mw) / 2 + 26px)}
  .sf-rail .sf-plus{left:calc(50% + var(--mw) / 2 + 7px)}
  .sf-plus{font-size:1rem}
  .sf-hint{font-size:.98rem}
  .sf-title{height:30px;font-size:.7rem}
}