/* Purchase flow: insufficient-balance sheet, checkout processing/success, gem perks */
.nsfbg { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; transition: opacity .25s; }
.nsfbg.show { opacity: 1; pointer-events: auto; }
.nsf { --nc: #ffd166; position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-width: 460px; margin: 0 auto; padding: 30px 22px max(22px, env(safe-area-inset-bottom)); text-align: center; color: #fff;
  background: linear-gradient(180deg, #131c18, #0a100d); border-radius: 28px 28px 0 0; box-shadow: 0 -1px 0 rgba(255,255,255,.1), 0 -24px 60px rgba(0,0,0,.6); transform: translateY(105%); transition: transform .35s cubic-bezier(.2,.9,.25,1); }
.nsf.gem { --nc: #5cc8ff; }
.nsf.show { transform: none; }
.nsf::before { content: ""; position: absolute; left: 50%; top: 9px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255,255,255,.18); }
.nsfx { position: absolute; right: 12px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 22px; cursor: pointer; }
.nsfic { width: 84px; height: 84px; margin: 6px auto 16px; border-radius: 26px; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--nc) 28%, #1b2723), #0b1310 80%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--nc) 60%, transparent), 0 10px 30px color-mix(in srgb, var(--nc) 22%, transparent); }
.nsfic svg { width: 42px; height: 42px; } .nsfic .hcoin { width: 40px; height: 40px; }
.nsfic::after { content: "!"; position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: #ff5d6c; color: #fff; font: 900 15px/26px var(--ui); box-shadow: 0 0 0 3px #0a100d; }
.nsf.show .nsfic { animation: nsfShake .5s .25s; }
.nsf h3 { margin: 0 0 6px; font: 400 28px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.nsf p { margin: 0 auto 18px; max-width: 290px; font: 500 14.5px/1.45 var(--ui); color: #a9b8b0; }
.nsfbar { height: 10px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; } .nsfbar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, color-mix(in srgb, var(--nc) 70%, #000), var(--nc)); }
.nsfrow { display: flex; justify-content: space-between; margin: 8px 2px 20px; font: 600 12px var(--ui); color: #7d8c84; } .nsfrow b { color: #fff; font-weight: 800; }
.nsfbtns { display: flex; gap: 10px; }
.nsfb { flex: 1; min-height: 54px; border: 0; border-radius: 16px; font: 800 15px var(--ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: #07100c; background: linear-gradient(180deg, color-mix(in srgb, var(--nc) 82%, #fff), var(--nc)); box-shadow: 0 4px 0 color-mix(in srgb, var(--nc) 55%, #000); }
.nsfb:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--nc) 55%, #000); }
.nsfb.ghost { color: #fff; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
@keyframes nsfShake { 0%,100% { transform: none; } 20% { transform: translateX(-7px) rotate(-3deg); } 40% { transform: translateX(7px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
/* checkout processing / success */
.wsheet.pay { overflow-y: auto; max-height: 92vh !important; }
.payov { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: rgba(8,13,11,.96); }
.payov.show { display: flex; animation: celIn .25s ease-out; }
.payov b { font: 400 24px var(--display); text-transform: uppercase; margin-top: 12px; } .payov small { font: 600 12px var(--ui); color: #7d8c84; }
.payring { width: 92px; height: 92px; } .payring svg { width: 100%; height: 100%; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.payring circle { stroke: #14f195; stroke-dasharray: 138; stroke-dashoffset: 100; transform-origin: 50% 50%; animation: paySpin 1s linear infinite; }
.payring path { stroke: #14f195; stroke-dasharray: 40; stroke-dashoffset: 40; }
.payov.ok .payring circle { animation: payDraw .5s ease-out forwards; stroke-dashoffset: 0; } .payov.ok .payring path { animation: payChk .45s .3s ease-out forwards; }
.payov.ok small { visibility: hidden; }
@keyframes paySpin { to { transform: rotate(360deg); } } @keyframes payDraw { from { stroke-dashoffset: 138; } to { stroke-dashoffset: 0; } } @keyframes payChk { to { stroke-dashoffset: 0; } }
/* celebration extras */
.celbtn2 { width: 100%; min-height: 50px; margin-top: 10px; border: 0; border-radius: 16px; font: 800 14px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #fff; cursor: pointer; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.celchip.dim { font-weight: 700; font-size: 12.5px; color: #a9b8b0; }
.celhex .hcoin.big { width: 56px; height: 56px; }
/* gem vault */
.bst.perk .pips { display: flex; gap: 5px; margin-top: 6px; } .pips i { width: 22px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.14); } .pips i.on { background: #bd82ff; box-shadow: 0 0 8px #bd82ff; }