/* TitanMC /sklep v2 — sk2-20261012a */
/* Zbrojownia Tytanów — the rank showroom (3D armour stand + UI). Scoped to .ta-armory. */
.ta-armory{--rk:180,109,255;--ta-ink:#EDE9E1;--ta-mute:rgba(237,233,225,.64);--ta-gold:#F5D061;position:relative;margin:8px 0 0}
.ta-armory button,.ta-armory a{-webkit-tap-highlight-color:transparent}
.ta-stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(620px,76vh,820px);overflow:hidden;isolation:isolate}
.ta-canvas,.ta-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the scene melts into the page instead of ending in a hard rectangle */
.ta-canvas,.ta-poster{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%)}
.ta-canvas{cursor:grab;opacity:0;transition:opacity .5s ease;touch-action:pan-y pinch-zoom}
.ta-canvas:active{cursor:grabbing}
.ta-armory.is-live .ta-canvas{opacity:1}
.ta-poster{object-fit:cover;object-position:50% 46%;opacity:0;transition:opacity .9s ease}
.ta-armory.show-poster .ta-poster,.ta-armory.no-3d .ta-poster{opacity:1}
.ta-armory.is-live .ta-poster{opacity:0}
.ta-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 92% at 50% 46%,transparent 52%,rgba(6,6,10,.82) 100%)}
.ta-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* left column: the rank */
.ta-info{position:absolute;z-index:2;left:max(24px,calc(50vw - 690px));top:50%;transform:translateY(-56%);width:min(32vw,440px);pointer-events:none}
.ta-kicker{display:flex;align-items:center;gap:10px;font:700 12px/1 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--rk));transition:color .6s ease}
.ta-kicker b{color:var(--ta-ink);font-weight:700}
.ta-sep{width:22px;height:1px;background:currentColor;opacity:.7}
.ta-name{position:relative;margin:16px 0 0;height:clamp(66px,8.4vw,128px);overflow:hidden;font:700 clamp(64px,8.2vw,124px)/1 'Cinzel Decorative',serif;letter-spacing:.01em}
.ta-name span{position:absolute;left:0;top:0;white-space:nowrap;background:linear-gradient(180deg,#fff 12%,rgb(var(--rk)) 135%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 26px rgba(var(--rk),.28))}
/* a reel: the old name leaves upward, the new one rises in a beat later — never on top of each other */
.ta-name span.in{animation:taNameIn .58s cubic-bezier(.22,1,.36,1) .1s both}
.ta-name span.out{animation:taNameOut .34s cubic-bezier(.55,0,.75,.2) both}
@keyframes taNameIn{from{transform:translateY(104%);opacity:0}to{transform:none;opacity:1}}
@keyframes taNameOut{to{transform:translateY(-104%);opacity:0}}
.ta-mat{margin-top:14px;font:700 13px/1.35 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ta-gold);text-wrap:balance}
.ta-desc{margin:16px 0 0;max-width:38ch;font:400 16px/1.6 'Chakra Petch','Rajdhani',sans-serif;color:var(--ta-mute);text-wrap:pretty}
.ta-hint{display:flex;align-items:center;gap:10px;margin-top:24px;font:600 11px/1.4 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,233,225,.42)}
.ta-hint span{text-wrap:balance}
.ta-hint i{width:18px;height:18px;flex:none;border:1px solid currentColor;border-radius:50%;position:relative}
.ta-hint i::after{content:"";position:absolute;left:50%;top:-4px;width:6px;height:6px;margin-left:-3px;background:currentColor;border-radius:50%;animation:taOrbit 3s linear infinite;transform-origin:3px 12px}
@keyframes taOrbit{to{transform:rotate(360deg)}}
@media (hover:none){
  .ta-hint i::after{top:50%;left:1px;margin:-3px 0 0;transform-origin:center;animation:taSwipeDot 2.4s cubic-bezier(.45,0,.2,1) infinite}
}
@keyframes taSwipeDot{0%,12%{transform:translateX(9px)}50%,62%{transform:translateX(0)}100%{transform:translateX(9px)}}
.ta-swap{transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.ta-swap.is-swapping{opacity:0;transform:translateY(8px)}
.ta-kicker .ta-swap,.ta-card-title.ta-swap{display:inline-block}

/* right column: perks, price, CTA — a Minecraft item tooltip (notched pixel corners, double border) */
.ta-card{position:absolute;z-index:2;right:max(24px,calc(50vw - 690px));top:50%;transform:translateY(-56%);width:min(29vw,368px);padding:18px 20px 20px;
  background:linear-gradient(180deg,rgba(20,8,30,.92),rgba(10,7,17,.95));
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  box-shadow:inset 0 0 0 2px rgba(12,4,20,.96),inset 0 0 0 4px rgba(var(--rk),.5),inset 0 0 0 5px rgba(36,6,56,.9),inset 0 18px 40px -26px rgba(var(--rk),.5);transition:box-shadow .6s ease}
.ta-settled .ta-card{box-shadow:inset 0 0 0 2px rgba(12,4,20,.96),inset 0 0 0 4px rgba(var(--rk),.95),inset 0 0 0 5px rgba(36,6,56,.9),inset 0 18px 44px -18px rgba(var(--rk),.85);transition-duration:.12s}
.ta-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.ta-card-title{font:700 16px/1.1 'Chakra Petch','Rajdhani',sans-serif;color:rgb(var(--rk));text-shadow:2px 2px 0 rgba(0,0,0,.55);transition:color .6s ease}
.ta-card-sub{font:700 10px/1 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(214,206,222,.5)}
.ta-perks{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ta-perks li{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:start;padding:7px 8px;border-radius:2px;transition:background-color .25s ease,transform .25s ease,opacity .25s ease}
.ta-perks li.hot{background:rgba(var(--rk),.14);transform:translateX(3px)}
.ta-perks svg{grid-row:1/3;width:20px;height:20px;margin-top:1px;color:rgb(var(--rk));filter:drop-shadow(0 0 6px rgba(var(--rk),.55));transition:color .6s ease}
.ta-perks b{font:700 15px/1.2 'Chakra Petch','Rajdhani',sans-serif;color:#F3EFE7}
.ta-perks span{font:400 13px/1.35 'Chakra Petch','Rajdhani',sans-serif;color:rgba(214,206,222,.72)}
.ta-perks li.in{animation:taPerkIn .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes taPerkIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* the perk icon assembles from its pixels, top-left first */
.ta-perks li.in svg rect,.ta-perks li.land svg rect{transform-box:fill-box;transform-origin:center;animation:taPx .32s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--d) * 9ms + var(--i) * 70ms)}
.ta-perks li.land svg rect{animation-delay:calc(var(--d) * 9ms)}
@keyframes taPx{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
/* during an equip each perk waits for its piece and lights up when it clanks into place */
.ta-perks li.pending{opacity:.3;transform:translateX(-6px)}
.ta-perks li.land{animation:taPerkLand .55s cubic-bezier(.16,1,.3,1) both}
@keyframes taPerkLand{0%{opacity:.3;transform:translateX(-6px);background-color:rgba(var(--rk),.32)}100%{opacity:1;transform:none;background-color:rgba(var(--rk),0)}}
.ta-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:16px 0 14px;padding-top:16px;border-top:1px solid rgba(var(--rk),.22)}
.ta-price-v{display:flex;align-items:flex-end;gap:8px}
.ta-num{display:inline-flex;font:700 54px/.9 'Cinzel Decorative',serif;color:#fff;font-variant-numeric:tabular-nums}
.ta-d{display:inline-block;height:1em;overflow:hidden;line-height:1}
.ta-d>span{display:block;transition:transform .72s cubic-bezier(.2,.85,.25,1)}
.ta-settled .ta-num{animation:taPricePop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes taPricePop{40%{transform:scale(1.07);text-shadow:0 0 22px rgba(var(--rk),.7)}}
.ta-price-v small{display:grid;gap:3px;font:700 11px/1.15 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.16em;color:var(--ta-gold);text-transform:uppercase;padding-bottom:4px;white-space:nowrap}
.ta-price-v em{font-style:normal;color:var(--ta-mute);letter-spacing:.06em}
.ta-per{display:block;margin-top:-6px;margin-bottom:10px;font:600 12px/1 'Chakra Petch','Rajdhani',sans-serif;color:rgba(124,252,154,.88);letter-spacing:.04em;height:12px;transition:opacity .3s}
.ta-bill{position:relative;display:grid;grid-template-columns:auto auto;padding:3px;border-radius:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.ta-bill i{position:absolute;top:3px;bottom:3px;left:3px;width:0;border-radius:3px;background:rgba(var(--rk),.2);box-shadow:inset 0 0 0 1px rgba(var(--rk),.4);transition:transform .35s cubic-bezier(.16,1,.3,1),width .35s cubic-bezier(.16,1,.3,1),background-color .6s}
.ta-bill button{position:relative;z-index:1;white-space:nowrap;font:700 11px/1 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.06em;color:var(--ta-mute);background:none;border:0;border-radius:3px;padding:10px 11px;cursor:pointer;transition:color .25s}
.ta-bill button[aria-checked="true"]{color:#fff}
.ta-bill button b{margin-left:5px;color:#7CFC9A}
.ta-bill button:focus-visible{outline:2px solid rgb(var(--rk));outline-offset:1px}
/* the CTA as a bevelled Minecraft button in gold. The page's link underline (`main a:not(.btn)…`
   animates background-image/-size on every link) must not reach it, hence the !important */
.ta-armory .ta-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:2px;overflow:hidden;text-decoration:none;font:700 14px/1 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#1a1003;
  background:linear-gradient(180deg,#FFE47F,#E9B53A 52%,#D59A1C)!important;background-size:auto!important;background-repeat:no-repeat!important;background-position:0 0!important;
  border:2px solid #1a1206;box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(110,60,0,.5),0 12px 30px rgba(212,160,23,.26);text-shadow:0 1px 0 rgba(255,236,170,.6);
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,filter .18s}
.ta-cta::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(90deg,transparent 0 22%,rgba(255,255,255,.55) 22% 40%,transparent 40% 52%,rgba(255,255,255,.35) 52% 60%,transparent 60%);transform:skewX(-18deg);animation:taShine 7s ease-in-out infinite;pointer-events:none}
@keyframes taShine{0%,70%{left:-60%}90%,100%{left:130%}}
.ta-settled .ta-cta::after{animation:taShineOnce .9s ease-out 1}
@keyframes taShineOnce{from{left:-60%}to{left:130%}}
@media (hover:hover){
  .ta-armory .ta-cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(110,60,0,.5),inset 0 0 0 2px #fff6ae,0 16px 38px rgba(212,160,23,.38)}
  .ta-rail button:hover{background:rgba(255,255,255,.05)}
  .ta-rail button:hover .ta-bust img{transform:translateY(-2px) scale(1.09) rotate(-3deg)}
}
.ta-armory .ta-cta:active{transform:translateY(2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 0 0 rgba(0,0,0,0),0 6px 18px rgba(212,160,23,.24)}
.ta-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ta-note{margin-top:10px;font:400 12px/1.4 'Chakra Petch','Rajdhani',sans-serif;color:rgba(214,206,222,.56);text-align:center}

/* floating label next to the hovered armour piece (an item tooltip with a lead line) */
.ta-label{position:absolute;z-index:3;left:0;top:0;display:flex;align-items:center;gap:8px;padding:7px 11px 7px 9px;border-radius:2px;pointer-events:none;white-space:nowrap;
  background:rgba(16,0,16,.94);box-shadow:inset 0 0 0 1px rgba(var(--rk),.7),inset 0 0 0 2px rgba(36,6,56,.9),0 10px 26px rgba(0,0,0,.5);opacity:0;transform:translate(18px,-50%) scale(.96);transition:opacity .18s ease,transform .18s ease}
.ta-label.on{opacity:1;transform:translate(26px,-50%) scale(1)}
.ta-label::before{content:"";position:absolute;right:100%;top:50%;width:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--rk),.9))}
.ta-label.flip{transform:translate(calc(-100% - 18px),-50%) scale(.96)}
.ta-label.flip.on{transform:translate(calc(-100% - 26px),-50%) scale(1)}
.ta-label.flip::before{right:auto;left:100%;background:linear-gradient(270deg,transparent,rgba(var(--rk),.9))}
.ta-label.above{transform:translate(-50%,calc(-100% - 8px)) scale(.96)}.ta-label.above.on{transform:translate(-50%,calc(-100% - 14px)) scale(1)}
.ta-label.below{transform:translate(-50%,8px) scale(.96)}.ta-label.below.on{transform:translate(-50%,14px) scale(1)}
.ta-label.above::before,.ta-label.below::before{right:auto;left:50%;width:1px;height:12px}
.ta-label.above::before{top:100%;background:linear-gradient(180deg,rgba(var(--rk),.9),transparent)}
.ta-label.below::before{top:auto;bottom:100%;background:linear-gradient(0deg,rgba(var(--rk),.9),transparent)}
.ta-label i{font:700 10px/1 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--rk));font-style:normal}
.ta-label b{font:700 14px/1 'Chakra Petch','Rajdhani',sans-serif;color:#fff}

/* rank rail with 3D busts, docked at the bottom of the stage */
.ta-rail{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);display:flex;justify-content:center;gap:6px;width:max-content;max-width:calc(100% - 24px);margin:0;padding:6px;border-radius:14px;background:rgba(9,9,14,.76);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.ta-rail button{position:relative;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:10px;border:0;background:none;color:var(--ta-ink);cursor:pointer;text-align:left;transition:background-color .3s,transform .15s ease}
.ta-rail button:active{transform:scale(.97)}
.ta-rail button[aria-pressed="true"]{background:rgba(var(--c),.13)}
.ta-rail .ta-bust{width:44px;height:44px;flex:none;border-radius:8px;background:radial-gradient(circle at 50% 38%,rgba(var(--c),.32),rgba(var(--c),.06) 70%);box-shadow:inset 0 0 0 1px rgba(var(--c),.3);overflow:hidden}
.ta-rail .ta-bust img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.ta-rail button[aria-pressed="true"] .ta-bust img{transform:scale(1.06)}
.ta-rail b{display:block;font:700 15px/1.15 'Cinzel Decorative',serif}
.ta-rail em{display:block;font:600 11px/1.3 'Chakra Petch','Rajdhani',sans-serif;font-style:normal;color:var(--ta-mute);letter-spacing:.04em;white-space:nowrap}
.ta-flag{position:absolute;top:-7px;right:6px;padding:2px 5px 1px;font:700 9px/1 'Chakra Petch','Rajdhani',sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:#160622;background:#b46dff;border-radius:2px;box-shadow:0 2px 8px rgba(180,109,255,.45)}
.ta-rail-ind{position:absolute;left:0;bottom:3px;height:2px;border-radius:2px;background:rgb(var(--rk));box-shadow:0 0 12px rgba(var(--rk),.9);transition:transform .45s cubic-bezier(.16,1,.3,1),width .45s cubic-bezier(.16,1,.3,1),background-color .6s}
.ta-rail button:focus-visible{outline:2px solid rgb(var(--c));outline-offset:2px}

.ta-trust{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1180px;margin:8px auto 0;padding:0 16px}
.ta-trust li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:4px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}
.ta-trust i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:4px;color:var(--ta-gold);background:rgba(212,160,23,.1);font-size:14px}
.ta-trust b{display:block;font:700 13px/1.2 'Chakra Petch','Rajdhani',sans-serif;color:var(--ta-ink)}
.ta-trust span{display:block;font:400 12px/1.35 'Chakra Petch','Rajdhani',sans-serif;color:var(--ta-mute)}

/* entrance: the UI rises in when the key light clunks on */
.ta-armory .ta-info>*,.ta-armory .ta-card,.ta-armory .ta-rail{transition:opacity .8s ease,translate 1s cubic-bezier(.16,1,.3,1)}
.ta-armory:not(.is-on) .ta-info>*,.ta-armory:not(.is-on) .ta-card,.ta-armory:not(.is-on) .ta-rail{opacity:0;translate:0 14px}
.ta-armory.is-on .ta-info>:nth-child(2){transition-delay:.08s}.ta-armory.is-on .ta-info>:nth-child(3){transition-delay:.16s}.ta-armory.is-on .ta-info>:nth-child(4){transition-delay:.22s}.ta-armory.is-on .ta-info>:nth-child(5){transition-delay:.3s}
.ta-armory.is-on .ta-card{transition-delay:.34s}.ta-armory.is-on .ta-rail{transition-delay:.5s}

@media(max-width:1100px){
  .ta-info{width:min(34vw,380px)}.ta-card{width:min(32vw,330px)}
  .ta-name{height:clamp(60px,8vw,96px);font-size:clamp(58px,7.6vw,92px)}
}
/* 901–1100: the card must end above the rail */
@media(min-width:901px) and (max-width:1100px){
  .ta-card{top:calc(50% - 48px);transform:translateY(-50%);padding:16px 18px}
  .ta-perks li{padding:5px 8px}
  .ta-price{margin:12px 0 10px;padding-top:12px}
  .ta-note{margin-top:8px}
}
/* short desktop screens (1280×720, 1366×768, 1440×900 minus browser chrome): the stage sits at its 620 px
   minimum — a tighter card, lifted so it ends above the rail */
@media(min-width:901px) and (max-height:880px){
  .ta-card{top:calc(50% - 46px);transform:translateY(-50%);padding:16px 18px}
  .ta-perks li{padding:5px 8px}
  .ta-price{margin:12px 0 10px;padding-top:12px}
  .ta-note{margin-top:8px}
}
/* stacked: canvas, rail (docked over the canvas foot), rank, card */
@media(max-width:900px){
  .ta-stage{height:auto;display:flex;flex-direction:column}
  .ta-canvas,.ta-poster{position:relative;height:clamp(380px,62vh,560px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 80%,transparent 100%)}
  .ta-poster{position:absolute;top:0;height:clamp(380px,62vh,560px)}
  .ta-vignette{display:none}
  .ta-rail{position:relative;left:auto;bottom:auto;transform:none;margin:-58px auto 0;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:8px}
  .ta-rail::-webkit-scrollbar{display:none}
  .ta-rail button{flex:none;padding:5px 12px 5px 5px;scroll-snap-align:center}.ta-rail .ta-bust{width:38px;height:38px}
  .ta-flag{top:2px;right:4px}
  .ta-info{position:relative;left:auto;top:auto;transform:none;width:auto;margin:20px 16px 0;text-align:center;pointer-events:none}
  .ta-kicker{justify-content:center}.ta-name span{left:50%;transform:translateX(-50%)}.ta-name span.in{animation-name:taNameInC}.ta-name span.out{animation-name:taNameOutC}
  .ta-desc{margin-inline:auto}.ta-hint{justify-content:center}
  .ta-card{position:relative;right:auto;top:auto;transform:none;width:auto;margin:22px 16px 0}
  .ta-trust{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
}
@keyframes taNameInC{from{transform:translate(-50%,104%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes taNameOutC{to{transform:translate(-50%,-104%);opacity:0}}
/* phones: all five ranks visible at once, one trust card per row, a tighter card, full-width billing */
@media(max-width:560px){
  .ta-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:auto;max-width:none;margin:-58px 12px 0;padding:5px;overflow:visible}
  .ta-rail button{flex-direction:column;justify-content:flex-start;gap:5px;padding:6px 0 9px;text-align:center;min-width:0}
  .ta-rail .ta-bust{width:44px;height:44px}
  .ta-rail b{font-size:12.5px;white-space:nowrap}
  .ta-rail em{font-size:10px;letter-spacing:0}
  .ta-flag{top:-6px;right:50%;transform:translateX(50%)}
  .ta-trust{grid-template-columns:1fr;gap:8px}.ta-trust li{padding:12px 14px}
  .ta-card{padding:16px 16px 18px}.ta-card-head{margin-bottom:8px}
  .ta-perks{gap:2px}.ta-perks li{padding:6px 4px;column-gap:9px}.ta-perks span{font-size:12.5px;line-height:1.3}
  .ta-price{flex-wrap:wrap;row-gap:12px;margin:12px 0 10px;padding-top:12px}.ta-num{font-size:48px}
  .ta-bill{flex:1 1 100%;grid-template-columns:1fr 1fr}.ta-bill button{padding:13px 10px}
  .ta-note{margin-top:8px;font-size:11.5px}
}
/* phones held sideways: the rank beside the stand, like the desktop layout */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  .ta-canvas,.ta-poster{height:calc(100svh - 10px);min-height:300px}
  .ta-info{position:absolute;left:max(20px,env(safe-area-inset-left));top:calc((100svh - 10px) * .5);transform:translateY(-50%);width:min(36vw,300px);margin:0;text-align:left}
  .ta-kicker,.ta-hint{justify-content:flex-start}
  .ta-name{height:58px;font-size:56px}
  .ta-name span{left:0;transform:none}.ta-name span.in{animation-name:taNameIn}.ta-name span.out{animation-name:taNameOut}
  .ta-mat{font-size:12px;margin-top:10px}.ta-desc{margin:10px 0 0;font-size:14px;line-height:1.5}.ta-hint{margin-top:14px}
  .ta-card{margin-top:14px}
}
/* very short landscape phones: the description gives way */
@media(max-width:900px) and (orientation:landscape) and (max-height:330px){
  .ta-desc{display:none}
  .ta-info{top:calc((max(300px,100svh - 10px) - 58px) * .5)}
}

/*
 * TitanMC /sklep v2 — Mennica VPLN without the coin (agent topup).
 * Replaces the homepage v14 coin stylesheet: the stage now holds the VAULT — the chosen amount built from
 * blocks of the tier's Minecraft material (miedź → żelazo → złoto → złoto królewskie → ametyst → diament),
 * rendered on a canvas by js/sklep-v2.js (same engine family as the homepage "Bloki"). Editorial type stays:
 * Georgia names and prices, a condensed heavy numeral, Chakra Petch micro-labels. Motion always plays
 * (site policy); the canvas only draws while something moves and while it is on screen.
 */

@property --m-hi { syntax: '<color>'; inherits: true; initial-value: #FFF6CF; }
@property --m-mid { syntax: '<color>'; inherits: true; initial-value: #F0B93A; }
@property --m-lo { syntax: '<color>'; inherits: true; initial-value: #8F5708; }
@property --m-glow { syntax: '<color>'; inherits: true; initial-value: #FFBE3B; }

#topup,
#skCheckout {
  --m-hi: #FFF6CF;
  --m-mid: #F0B93A;
  --m-lo: #8F5708;
  --m-glow: #FFBE3B;
  --vm-cream: #FFFAF0;
  --vm-text: rgba(239, 236, 229, 0.86);
  --vm-dim: rgba(239, 236, 229, 0.64);
  --vm-faint: rgba(239, 236, 229, 0.52);
  --vm-gold: #F5D16F;
  --vm-green: #7EE0A6;
  --vm-serif: Georgia, 'Times New Roman', serif;
  --vm-display: 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --vm-sans: 'Chakra Petch', 'Rajdhani', Arial, sans-serif;
  transition: --m-hi 0.6s ease, --m-mid 0.6s ease, --m-lo 0.6s ease, --m-glow 0.6s ease;
}
/* tier materials: miedź · żelazo · złoto · złoto królewskie · ametyst · diament (same colour family as the engine's blocks) */
:is(#topup, #skCheckout)[data-vm-tier="vpln-10"] { --m-hi: #FFD9BC; --m-mid: #D27A4C; --m-lo: #62311A; --m-glow: #E0905F; }
:is(#topup, #skCheckout)[data-vm-tier="vpln-25"] { --m-hi: #FFFFFF; --m-mid: #CDD3DA; --m-lo: #5B626E; --m-glow: #D8E0EA; }
:is(#topup, #skCheckout)[data-vm-tier="vpln-50"] { --m-hi: #FFF1BF; --m-mid: #D6A82E; --m-lo: #7E520C; --m-glow: #E6BE4A; }
:is(#topup, #skCheckout)[data-vm-tier="vpln-100"] { --m-hi: #FFF7CF; --m-mid: #F5C536; --m-lo: #8F5708; --m-glow: #FFBE3B; }
:is(#topup, #skCheckout)[data-vm-tier="vpln-200"] { --m-hi: #F3E4FF; --m-mid: #9758EE; --m-lo: #4B2380; --m-glow: #C69CFF; }
:is(#topup, #skCheckout)[data-vm-tier="vpln-500"] { --m-hi: #F4FFFF; --m-mid: #4FD6DF; --m-lo: #10677A; --m-glow: #8DEFF4; }

#topup .vm-sr,
#topup .tv6-denomination__copy small,
#topup .tv6-denomination__price small {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Header (showroom style) ───────────────────────────────────────────── */
#topup .vm-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: clamp(8px, 2vw, 18px);
}
#topup .vm-head__copy { max-width: 620px; }
#topup .vm-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: rgba(245, 209, 111, 0.78);
  font: 800 0.62rem/1 var(--vm-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
#topup .vm-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 209, 111, 0.8));
}
#topup .vm-title {
  margin: 0;
  color: var(--vm-cream);
  font: 500 clamp(2.5rem, 4.4vw, 3.7rem)/1.02 var(--vm-serif);
  letter-spacing: -0.045em;
}
#topup .vm-lead {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--vm-dim);
  font: 400 0.95rem/1.6 var(--vm-sans);
}

/* ── Stage: spec column · vault · price ────────────────────────────────── */
#topup .vm-stage {
  --vault: clamp(300px, 34vw, 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--vault) minmax(0, 1fr);
  grid-template-areas: "amount vault pay" "scale scale scale";
  align-items: center;
  column-gap: clamp(16px, 3vw, 44px);
  padding-top: clamp(6px, 1.4vw, 16px);
}
#topup .vm-amount { grid-area: amount; justify-self: start; min-width: 0; }
#topup .vm-vault { grid-area: vault; }
#topup .vm-pay { grid-area: pay; justify-self: end; }
#topup .vm-scale { grid-area: scale; }

#topup .vm-amount > p { margin: 0; }
#topup .vm-amount__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.5);
  font: 800 0.6rem/1 var(--vm-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#topup .vm-amount__badge { color: rgba(245, 209, 111, 0.85); }
#topup .vm-amount__badge::before { content: "·"; margin-right: 10px; color: rgba(255, 255, 255, 0.3); }
#topup .vm-amount__name {
  margin-top: 18px !important;
  color: var(--vm-cream);
  font: 500 clamp(1.7rem, 2.3vw, 2.25rem)/1.1 var(--vm-serif);
  letter-spacing: -0.03em;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#topup .vm-amount__mat {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px !important;
  color: var(--m-glow);
  font: 600 0.8rem/1.3 var(--vm-sans);
  letter-spacing: 0.06em;
  transition: opacity 0.22s ease, transform 0.22s ease, color 0.6s ease;
}
#topup .vm-amount__mat::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--m-hi), var(--m-mid) 52%, var(--m-lo));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in oklab, var(--m-glow) 45%, transparent);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
#topup .vm-amount__name.is-swap,
#topup .vm-amount__mat.is-swap { opacity: 0; transform: translateY(6px); }
/* the amount in words — the build above is the only hero; the number stays in the DOM as text */
#topup .vm-amount__row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 18px !important;
  color: var(--vm-dim);
  font: 600 0.86rem/1.3 var(--vm-sans);
}
#topup .vm-amount__value { color: var(--vm-cream); font: 800 1.15rem/1 var(--vm-sans); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
#topup .vm-amount__cur { color: var(--vm-gold); font: 800 0.66rem/1 var(--vm-sans); letter-spacing: 0.24em; }
#topup .vm-amount__bonus { margin-top: 6px !important; color: var(--vm-green); font: 600 0.86rem/1.3 var(--vm-sans); }
#topup .vm-amount__bonus.is-plain { color: var(--vm-faint); }

/* the vault: a canvas build on a blackstone plinth; a soft pool of the tier's light behind it (static layer) */
#topup .vm-vault {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 160px;
}
#topup .vm-vault::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -8%;
  top: -4%;
  bottom: -2%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--m-glow) 19%, transparent), color-mix(in oklab, var(--m-glow) 6%, transparent) 56%, transparent);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.6s ease;
  pointer-events: none;
}
#topup.is-in .vm-vault::before { opacity: 1; transform: none; }
#topup .vm-vault canvas { display: block; max-width: 100%; touch-action: manipulation; image-rendering: pixelated; }
#topup .vm-vault__cap {
  position: absolute;
  left: 50%;
  bottom: -2px;
  margin: 0;
  color: var(--vm-faint);
  font: 700 0.58rem/1 var(--vm-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.8s ease 1.4s;
}
#topup.is-in .vm-vault__cap { opacity: 1; }

/* price column */
#topup .vm-pay {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(100%, 320px);
  min-width: 0;
}
#topup .vm-pay > p { margin: 0; }
#topup .vm-pay__label {
  color: rgba(255, 255, 255, 0.5);
  font: 800 0.6rem/1 var(--vm-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#topup .vm-pay__value {
  margin-top: -4px !important;
  color: var(--m-glow);
  font: 500 clamp(2.3rem, 3.4vw, 3rem)/1 var(--vm-serif);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.6s ease;
}
#topup .vm-pay__rate {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--vm-faint);
  font: 500 0.8rem/1.3 var(--vm-sans);
}
#topup .vm-save { color: var(--vm-green); }
#topup .vm-save:empty { display: none; }
#topup .vm-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  margin-top: 4px;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 235, 170, 0.68);
  border-radius: 10px;
  background: linear-gradient(145deg, #FFE078, #D89C20 64%, #F3C951);
  box-shadow: 0 15px 34px rgba(212, 150, 23, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.56);
  color: #161005;
  font: 800 0.76rem/1.2 var(--vm-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
#topup .vm-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 0.75s ease;
  pointer-events: none;
}
#topup .vm-cta:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(212, 150, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
#topup .vm-cta:not(:disabled):hover::before { transform: translateX(120%); }
#topup .vm-cta:not(:disabled):active { transform: translateY(0) scale(0.99); }
#topup .vm-cta:focus-visible { outline: 2px solid var(--vm-gold); outline-offset: 3px; }
#topup .vm-cta__arrow { flex: none; width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
#topup .vm-cta:not(:disabled):hover .vm-cta__arrow { transform: translateX(4px); }
#topup .vm-cta:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: none;
  color: var(--vm-dim);
  letter-spacing: 0.1em;
  cursor: not-allowed;
}
#topup .vm-cta:disabled .vm-cta__arrow { display: none; }
#topup .vm-cta[aria-busy="true"]::before { background: linear-gradient(110deg, transparent 32%, rgba(245, 208, 97, 0.14) 50%, transparent 68%); animation: vmSheen 1.6s ease-in-out infinite; }
#topup .vm-hint { color: var(--vm-faint); font: 400 0.78rem/1.5 var(--vm-sans); }
#topup .vm-hint strong { color: var(--vm-gold); font-weight: 700; }

/* ── Denomination scale: track, knob, six radios with a block of their material ─────────── */
#topup .vm-scale {
  position: relative;
  margin-top: clamp(10px, 1.8vw, 22px);
  padding-top: 8px;
}
#topup .vm-scale__track {
  container-type: inline-size; /* the carrier moves in track widths (cqw) and stays 0 px wide: no overflow past the viewport */
  position: absolute;
  left: calc(100% / 12);
  right: calc(100% / 12);
  top: 8px;
  height: 2px;
  border-radius: 2px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 2px, transparent 2.5px) 0 50% / 20% 6px repeat-x,
    rgba(255, 255, 255, 0.08);
}
#topup .vm-scale__track::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
/* fill and knob move with transforms only (--k = 0..1, --p = the same as a percentage of the track) */
#topup .vm-scale__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--m-glow) 20%, transparent), var(--m-glow));
  box-shadow: 0 0 12px color-mix(in oklab, var(--m-glow) 55%, transparent);
  transform-origin: 0 50%;
  transform: scaleX(var(--k, 0.6));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.6s ease, box-shadow 0.6s ease;
  will-change: transform;
}
#topup .vm-scale__carrier {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateX(calc(var(--k, 0.6) * 100cqw));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  pointer-events: none;
}
#topup .vm-scale__knob {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #0B0B11;
  border-radius: 50%;
  background: var(--m-hi);
  box-shadow: 0 0 0 1px var(--m-glow), 0 0 16px var(--m-glow);
  transform: translate(-50%, -50%);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
#topup .vm-scale__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
#topup .tv6-denomination {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 22px 4px 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* the block of the denomination's material (inventory-icon isometric cube, drawn by the controller) */
/* two exact-size icons per denomination (rest 28×32, lit 34×38) crossfaded — never CSS-resampled */
#topup .tv6-ore {
  position: relative;
  display: block;
  width: 34px;
  height: 40px;
  margin-bottom: 2px;
  transform: translateY(2px);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#topup .tv6-ore canvas { position: absolute; bottom: 0; display: block; image-rendering: pixelated; transition: opacity 0.3s ease; }
#topup .tv6-ore__a { left: 3px; opacity: 0.78; }
#topup .tv6-ore__b { left: 0; opacity: 0; }
#topup .tv6-denomination:hover .tv6-ore { transform: translateY(0); }
#topup .tv6-denomination:hover .tv6-ore__a { opacity: 1; }
#topup .tv6-denomination[aria-checked="true"] .tv6-ore { transform: translateY(-3px); }
#topup .tv6-denomination[aria-checked="true"] .tv6-ore__a { opacity: 0; }
#topup .tv6-denomination[aria-checked="true"] .tv6-ore__b { opacity: 1; }
#topup .tv6-denomination__seal {
  color: rgba(239, 236, 229, 0.42);
  font: 900 clamp(1.8rem, 2.6vw, 2.5rem)/1 var(--vm-display);
  font-stretch: condensed;
  letter-spacing: -0.03em;
  transform-origin: 50% 100%;
  transition: color 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), text-shadow 0.3s ease;
}
#topup .tv6-denomination__copy { display: block; min-height: 1.1em; line-height: 1; }
#topup .tv6-denomination__copy > strong { font-size: 0; line-height: 0; }
#topup .tv6-denomination__bonus { color: var(--vm-green); font: 700 0.72rem/1 var(--vm-sans); letter-spacing: 0.02em; opacity: 0.75; }
#topup .tv6-denomination__price { display: block; line-height: 1; }
#topup .tv6-denomination__price strong { color: var(--vm-faint); font: 500 0.74rem/1 var(--vm-sans); white-space: nowrap; }
#topup .tv6-denomination:hover .tv6-denomination__seal { color: rgba(239, 236, 229, 0.7); }
#topup .tv6-denomination[aria-checked="true"] .tv6-denomination__seal {
  color: var(--m-glow);
  text-shadow: 0 0 28px color-mix(in oklab, var(--m-glow) 55%, transparent);
  transform: scale(1.3);
}
#topup .tv6-denomination[aria-checked="true"] .tv6-denomination__bonus { opacity: 1; }
#topup .tv6-denomination[aria-checked="true"] .tv6-denomination__price strong { color: var(--vm-text); }
#topup .tv6-denomination:focus-visible { outline: 2px solid var(--vm-gold); outline-offset: -2px; }

#topup .vm-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  color: var(--vm-faint);
  font: 500 0.76rem/1.4 var(--vm-sans);
}
#topup .vm-trust i { margin-right: 6px; color: rgba(245, 209, 111, 0.8); font-size: 0.72rem; }

/* ── Entrance (controller adds .vm-js, then .is-in on first view) ──────── */
#topup.vm-js .vm-head,
#topup.vm-js .vm-amount,
#topup.vm-js .vm-pay,
#topup.vm-js .vm-scale,
#topup.vm-js .vm-trust {
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
#topup.vm-js:not(.is-in) .vm-head,
#topup.vm-js:not(.is-in) .vm-amount,
#topup.vm-js:not(.is-in) .vm-pay,
#topup.vm-js:not(.is-in) .vm-scale,
#topup.vm-js:not(.is-in) .vm-trust { opacity: 0; transform: translateY(22px); }
#topup.vm-js .vm-amount { transition-delay: 0.25s; }
#topup.vm-js .vm-pay { transition-delay: 0.4s; }
#topup.vm-js .vm-scale { transition-delay: 0.55s; }
#topup.vm-js .vm-trust { transition-delay: 0.7s; }

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes vmSheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #topup .vm-stage { --vault: clamp(260px, 30vw, 380px); }
}
@media (max-width: 900px) {
  #topup .vm-head { flex-direction: column; align-items: flex-start; }
  #topup .vm-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "vault" "amount" "scale" "pay";
    row-gap: 10px;
  }
  #topup .vm-vault { justify-self: center; width: min(100%, 440px); }
  #topup .vm-amount { justify-self: center; text-align: center; margin-top: 16px; }
  #topup .vm-amount__meta,
  #topup .vm-amount__mat,
  #topup .vm-amount__row { justify-content: center; }
  #topup .vm-amount__name { margin-top: 12px !important; }
  #topup .vm-pay { justify-self: stretch; width: 100%; max-width: 460px; margin: 18px auto 0; text-align: center; }
  #topup .vm-pay__rate { justify-content: center; }
}
@media (max-width: 600px) {
  #topup .vm-title { font-size: 2.3rem; }
  #topup .vm-lead { font-size: 0.9rem; }
  #topup .vm-vault { width: 100%; }
  #topup .vm-amount__name { font-size: 1.6rem; }
  #topup .vm-scale { margin-top: 16px; }
  #topup .tv6-denomination { padding: 20px 2px 6px; gap: 4px; }
  #topup .tv6-ore { height: 26px; }
  #topup .tv6-denomination__seal { font-size: 1.3rem; }
  #topup .tv6-denomination[aria-checked="true"] .tv6-denomination__seal { transform: scale(1.22); }
  #topup .tv6-denomination__price { display: none; }
  #topup .tv6-denomination__bonus { font-size: 0.7rem; }
  #topup .vm-trust { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
}
/* lead polish 2026-10-19: no label under 10 px */
#topup .vm-pay__label, #topup .vm-kicker { font-size: 0.66rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   TitanMC /sklep v2 — page layer. Art direction = the homepage's Mennica and
   Zbrojownia: Georgia headings in sentence case, Chakra Petch UI, condensed
   heavy numerals, gold only where it means something, calm obsidian space.
   Motion is always on (site policy): entrances are transform/opacity only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── fonts (swap + preload: text never stays in a fallback for the visit) ── */
@font-face{font-family:'Chakra Petch';src:url(/fonts/chakra-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(/fonts/chakra-600.woff2) format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url(/fonts/chakra-700.woff2) format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
/* the nav/footer components ask for the site's historical aliases */
@font-face{font-family:'Rajdhani';src:url(/fonts/chakra-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Rajdhani';src:url(/fonts/chakra-600.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'Rajdhani';src:url(/fonts/chakra-700.woff2) format('woff2');font-weight:700 900;font-display:swap}
/* Cinzel Decorative = latin file + latin-ext file, so Polish capitals come from the same face */
@font-face{font-family:'Cinzel Decorative';src:url(/fonts/cinzel-700.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel Decorative';src:url(/fonts/cinzel-700-ext.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Orbitron';src:url(/fonts/cinzel-700.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Teko';src:url(/fonts/teko.woff2) format('woff2');font-weight:400 700;font-display:swap}

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root{
  --sk-bg:#07070A; --sk-bg2:#0B0B10; --sk-surface:#0E0E15; --sk-surface2:#12121A;
  --sk-line:rgba(255,255,255,.07); --sk-line2:rgba(255,255,255,.11); --sk-goldline:rgba(245,209,111,.18);
  --sk-cream:#FFFAF0; --sk-text:rgba(239,236,229,.86); --sk-dim:rgba(239,236,229,.64); --sk-faint:rgba(239,236,229,.52);
  --sk-gold:#F5D16F; --sk-gold2:#D4A017; --sk-amber:#E8920B; --sk-ok:#7EE0A6; --sk-err:#FF8B7A;
  --sk-serif:Georgia,'Times New Roman','Noto Serif',serif;
  --sk-sans:'Chakra Petch','Rajdhani',Arial,sans-serif;
  --sk-num:'Arial Narrow','Roboto Condensed','Helvetica Neue',Arial,sans-serif;
  --sk-r:12px; --sk-r2:18px; --sk-r3:24px;
  --sk-ease:cubic-bezier(.2,.7,.2,1);
  --sk-gold-grad:linear-gradient(145deg,#FFE078,#D89C20 64%,#F3C951);
  /* names the shared nav/footer components read */
  --gold:#D4A017; --gold-light:#F5D061; --amber:#E8920B; --obsidian:#08080D; --amethyst:#9B59B6;
  --text:rgba(239,236,229,.86); --text-light:#F4F1EA; --text-dim:rgba(239,236,229,.58); --glass-border:rgba(255,255,255,.1);
  color-scheme:dark;
}

/* ── base ────────────────────────────────────────────────────────────────── */
html.sk-doc{overflow-x:hidden;background:var(--sk-bg);scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
/* site/js/titan-effects.min.js injects html{overflow-x:hidden} body{overflow-x:hidden;overflow-y:auto}: body becomes a scroll
   container that never scrolls, so position:sticky can never engage. body.sk = clip + visible (no scroll container); the root
   keeps overflow-x:hidden on the viewport — a visible root let fixed/absolute escapees widen the phone layout to 523 px. */
body.sk{margin:0;min-height:100vh;background:var(--sk-bg);color:var(--sk-text);font:400 16px/1.6 var(--sk-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;overflow-y:visible}
.sk *,.sk *::before,.sk *::after{box-sizing:border-box}
.sk-main{display:block;position:relative;isolation:isolate}
.sk-main ::selection{background:rgba(245,209,111,.28);color:#fff}
:where(.sk-main) a{color:inherit}
.sk .titan-breadcrumb{display:none!important}
.sk-main :focus-visible{outline:2px solid rgba(245,209,111,.85);outline-offset:3px}
.sk-main :where(a:not([class])):focus-visible,.sk-linkbtn:focus-visible{border-radius:6px}
.sk-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sk-skip{position:fixed;left:16px;top:-60px;z-index:100100;padding:10px 16px;border-radius:10px;background:var(--sk-gold);color:#120c02;font:700 14px var(--sk-sans);text-decoration:none;transition:top .2s}
.sk-skip:focus{top:16px}
.sk-noscript{position:fixed;inset:auto 16px 16px;z-index:100000;padding:14px 18px;border-radius:12px;background:#1b1408;border:1px solid var(--sk-goldline);color:var(--sk-gold);font:600 14px var(--sk-sans)}
.sk-wrap{width:min(1240px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto;position:relative}

/* ── section frame ───────────────────────────────────────────────────────── */
.sk-sec{position:relative;padding:clamp(64px,7vw,104px) 0}
.sk-sec::before{content:"";position:absolute;top:0;left:50%;width:min(1240px,92%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(245,209,111,.15) 30%,rgba(245,209,111,.15) 70%,transparent)}
.sk-head{margin:0 0 clamp(28px,4vw,48px);max-width:720px}
.sk-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;max-width:none}
.sk-head--split>div{max-width:660px}
.sk-kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:rgba(245,209,111,.82);font:800 .66rem/1 var(--sk-sans);letter-spacing:.22em;text-transform:uppercase}
.sk-kicker::before{content:"";flex:none;width:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(245,209,111,.85))}
.sk-title{margin:0;color:var(--sk-cream);font:500 clamp(2.35rem,4.4vw,3.7rem)/1.03 var(--sk-serif);letter-spacing:-.045em;text-wrap:balance}
.sk-lead{max-width:58ch;margin:14px 0 0;color:var(--sk-dim);font:400 .98rem/1.65 var(--sk-sans);text-wrap:pretty}
.sk-lead a{color:var(--sk-gold);text-decoration:underline;text-decoration-color:rgba(245,209,111,.35);text-underline-offset:3px}
.sk-chip{display:inline-flex;align-items:center;gap:10px;flex:none;padding:10px 16px;border:1px solid var(--sk-line2);border-radius:999px;background:rgba(255,255,255,.025);color:var(--sk-dim);font:500 .84rem/1.2 var(--sk-sans);text-decoration:none;transition:border-color .25s,background .25s,color .25s}
.sk-chip i{color:var(--sk-gold)}
.sk-chip b{color:var(--sk-cream);font-weight:700}
.sk-chip:hover{border-color:rgba(245,209,111,.4);background:rgba(245,209,111,.06);color:var(--sk-text)}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.sk-btn{--h:52px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 24px;border:1px solid transparent;border-radius:12px;font:700 .95rem/1 var(--sk-sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .2s var(--sk-ease),box-shadow .25s,border-color .25s,background-color .25s,color .25s}
.sk-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-btn--gold{border-color:rgba(255,235,170,.7);background:var(--sk-gold-grad);color:#161005;box-shadow:0 14px 32px rgba(212,150,23,.22),inset 0 1px 0 rgba(255,255,255,.55)}
.sk-btn--gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%);transform:translateX(-120%);transition:transform .7s var(--sk-ease)}
.sk-btn--gold:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(212,150,23,.32),inset 0 1px 0 rgba(255,255,255,.6)}
.sk-btn--gold:hover::after{transform:translateX(120%)}
.sk-btn--ghost{border-color:var(--sk-line2);background:rgba(255,255,255,.03);color:var(--sk-cream)}
.sk-btn--ghost:hover{border-color:rgba(245,209,111,.45);background:rgba(245,209,111,.07)}
.sk-btn:active{transform:translateY(1px) scale(.99)}
.sk-btn--sm{--h:42px;padding:0 16px;border-radius:10px;font-size:.86rem}
.sk-btn[disabled],.sk-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.sk-btn.is-busy{pointer-events:none}
.sk-btn.is-busy>span{opacity:.0}
.sk-btn.is-busy::before{content:"";position:absolute;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:skSpin .7s linear infinite}
.sk-mini{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 14px;border:1px solid var(--sk-line2);border-radius:9px;background:rgba(255,255,255,.03);color:var(--sk-cream);font:700 .78rem/1 var(--sk-sans);cursor:pointer;transition:border-color .2s,background .2s}
.sk-mini:hover{border-color:rgba(245,209,111,.45);background:rgba(245,209,111,.08)}
.sk-mini--gold{border-color:rgba(255,235,170,.6);background:var(--sk-gold-grad);color:#161005}

/* ── entrances ───────────────────────────────────────────────────────────── */
.sk-in{animation:skIn .9s var(--sk-ease) both;animation-delay:calc(var(--d,0) * 85ms + 80ms)}
html.sk-js .sk-reveal{transition:opacity .8s var(--sk-ease),transform .8s var(--sk-ease)}
html.sk-js .sk-reveal:not(.is-in){opacity:0;transform:translateY(18px)}
@keyframes skIn{from{opacity:0;transform:translateY(16px)}}
@keyframes skSpin{to{transform:rotate(360deg)}}

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */
.sk-hero{position:relative;padding:clamp(118px,15vh,168px) 0 clamp(64px,9vh,104px);min-height:min(100svh,940px);display:flex;align-items:center;overflow:hidden}
.sk-hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 560px at 74% 42%,rgba(245,209,111,.085),transparent 62%),
  radial-gradient(760px 520px at 8% 100%,rgba(140,96,220,.06),transparent 62%),
  linear-gradient(180deg,#09090D 0%,var(--sk-bg) 70%)}
.sk-hero__bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,209,111,.22),transparent)}
.sk-hero__glow{position:absolute;right:8%;top:16%;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,206,92,.12),transparent);animation:skBreath 7s ease-in-out infinite}
.sk-hero__glow--b{right:auto;left:-140px;top:auto;bottom:-220px;width:620px;height:620px;background:radial-gradient(closest-side,rgba(120,90,210,.07),transparent);animation-delay:-3.5s}
.sk-hero__dust{display:none}
@keyframes skBreath{50%{transform:scale(1.08);opacity:.8}}
.sk-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,430px);grid-template-areas:"copy card" "more card";align-items:center;column-gap:clamp(40px,6vw,96px)}
.sk-hero__copy{grid-area:copy;align-self:end;min-width:0}
.sk-hero__more{grid-area:more;align-self:start;min-width:0}
.sk-player{grid-area:card;align-self:center}
.sk-hero__title{margin:0;color:var(--sk-cream);font:500 clamp(3rem,6vw,5.4rem)/.98 var(--sk-serif);letter-spacing:-.05em}
.sk-hero__title>span{display:block}
.sk-hero__gold{padding-bottom:.08em;background:linear-gradient(180deg,#FFF3CC 0%,#F5D16F 48%,#C78C1A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sk-hero__lead{max-width:47ch;margin:24px 0 0;color:var(--sk-dim);font:400 clamp(1rem,1.2vw,1.1rem)/1.65 var(--sk-sans)}
.sk-steps{display:flex;flex-wrap:wrap;gap:10px 0;margin:34px 0 0;padding:0;list-style:none}
.sk-steps li{display:flex;align-items:center;gap:12px;padding-right:22px;margin-right:22px;border-right:1px solid var(--sk-line2)}
.sk-steps li:last-child{border-right:0;margin-right:0;padding-right:0}
.sk-steps b{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(245,209,111,.45);color:var(--sk-gold);font:700 .8rem/1 var(--sk-sans);transition:background .35s,color .35s,border-color .35s}
.sk-steps span{display:flex;flex-direction:column;gap:2px}
.sk-steps strong{color:var(--sk-cream);font:700 .9rem/1.2 var(--sk-sans)}
.sk-steps em{color:var(--sk-faint);font:400 .76rem/1.2 var(--sk-sans);font-style:normal}
.sk-steps li.is-done b{background:var(--sk-gold);border-color:var(--sk-gold);color:#140e03}
.sk-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
/* #titanServerDeliveryNotice: text owned by titan-hotfix-v1.js (shared server model), look owned here */
.sk-hero .sk-status{position:static;display:flex;align-items:flex-start;gap:12px;max-width:52ch;margin:28px 0 0;padding:0;border:0;background:none;box-shadow:none;color:var(--sk-faint);font:500 .82rem/1.5 var(--sk-sans);text-align:left}
.sk-hero .sk-status::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#8a8a94;box-shadow:0 0 0 4px rgba(138,138,148,.12)}
.sk-hero .sk-status[data-titan-state="online"]{color:var(--sk-dim)}
.sk-hero .sk-status[data-titan-state="online"]::before{background:var(--sk-ok);box-shadow:0 0 0 4px rgba(126,224,166,.14);animation:skPulse 2.4s ease-in-out infinite}
.sk-hero .sk-status[data-titan-state="offline"]::before,.sk-hero .sk-status[data-titan-state="unknown"]::before{background:#f0a24b;box-shadow:0 0 0 4px rgba(240,162,75,.14)}
@keyframes skPulse{50%{box-shadow:0 0 0 7px rgba(126,224,166,0)}}

/* server-driven promotion (GET /api/vpln/products: is_on_sale + expires_in_seconds) */
.sk-sale{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 26px;padding:8px 8px 8px 10px;border:1px solid rgba(255,139,122,.35);border-radius:14px;background:linear-gradient(90deg,rgba(255,110,90,.12),rgba(255,110,90,.03));color:var(--sk-text);font:600 .84rem/1.2 var(--sk-sans);animation:skIn .7s var(--sk-ease) both}
.sk-sale[hidden]{display:none}
.sk-sale__tag{padding:6px 9px;border-radius:9px;background:#ff6e5a;color:#1a0703;font:800 .62rem/1 var(--sk-sans);letter-spacing:.14em;text-transform:uppercase}
.sk-sale__name{color:var(--sk-cream);font-weight:700}
.sk-sale__price s{color:var(--sk-faint);font-weight:500}
.sk-sale__price b{color:#ffb4a8}
.sk-sale__time{display:inline-flex;align-items:center;gap:6px;color:var(--sk-dim);font-variant-numeric:tabular-nums}
.sk-sale__time i{color:#ff8b7a}

/* ── player card ─────────────────────────────────────────────────────────── */
.sk-player{position:relative;border:1px solid var(--sk-goldline);border-radius:var(--sk-r3);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),var(--sk-surface);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;scroll-margin-top:110px}
.sk-player::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(140deg,rgba(255,232,170,.12),transparent 30%,transparent 70%,rgba(255,232,170,.05));mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.sk-player__stage{position:relative;height:300px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:radial-gradient(70% 60% at 50% 86%,rgba(245,209,111,.16),transparent 70%),linear-gradient(180deg,#101018 0%,#0A0A0F 100%);border-bottom:1px solid var(--sk-line)}
.sk-player__stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 48px);mask:radial-gradient(70% 80% at 50% 100%,#000,transparent 75%)}
.sk-player__halo{position:absolute;left:50%;bottom:6px;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,110,.22),rgba(255,214,110,.05) 60%,transparent);transition:opacity .6s}
.sk-player__beam{position:absolute;left:50%;bottom:28px;width:150px;height:300px;margin-left:-75px;background:linear-gradient(180deg,transparent 0%,rgba(255,236,180,.0) 15%,rgba(255,236,180,.32) 70%,rgba(255,236,180,.5) 100%);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);opacity:0;transform-origin:50% 100%;transform:scaleY(.2)}
.sk-player__figure{position:relative;z-index:2;height:214px;margin-bottom:30px;display:flex;align-items:flex-end;justify-content:center}
.sk-player__body{display:block;height:214px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));transform-origin:50% 100%;transition:opacity .5s,filter .6s}
.sk-player__body.is-ghost{opacity:.5;filter:grayscale(1) brightness(.32) contrast(1.1) drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.sk-player__body.is-summon{animation:skSummon .9s var(--sk-ease) both}
.sk-player.is-summoning .sk-player__beam{animation:skBeam 1.1s ease-out both}
.sk-player.is-summoning .sk-player__halo{animation:skHalo 1.1s ease-out both}
@keyframes skSummon{0%{opacity:0;transform:translateY(18px) scale(.94)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes skBeam{0%{opacity:0;transform:scaleY(.2)}30%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes skHalo{0%{opacity:.4}35%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
.sk-player__pedestal{position:absolute;left:50%;bottom:16px;z-index:1;width:210px;height:38px;margin-left:-105px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,209,111,.38),rgba(245,209,111,.1) 62%,transparent);box-shadow:inset 0 0 0 1px rgba(245,209,111,.22)}
.sk-player__pedestal::after{content:"";position:absolute;inset:9px 30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,236,180,.28)}
.sk-player__plate{position:absolute;top:20px;left:50%;z-index:3;transform:translateX(-50%);max-width:80%;padding:5px 11px 6px;border-radius:4px;background:rgba(0,0,0,.52);color:#fff;font:600 .9rem/1 var(--sk-sans);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:2px 2px 0 rgba(0,0,0,.35);transition:color .3s}
.sk-player.is-guest .sk-player__plate{color:rgba(255,255,255,.45)}
.sk-player__form{padding:22px 24px 24px}
.sk-player__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sk-player__head h2{margin:0;color:var(--sk-cream);font:500 1.35rem/1.1 var(--sk-serif);letter-spacing:-.02em}
.sk-player__auth{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--sk-line2);border-radius:999px;color:var(--sk-faint);font:700 .68rem/1 var(--sk-sans);letter-spacing:.08em;text-transform:uppercase}
.sk-player__auth i{width:6px;height:6px;border-radius:50%;background:currentColor}
.sk-player__auth[data-state="authed"]{border-color:rgba(126,224,166,.35);color:var(--sk-ok)}
.sk-label{display:block;margin:0 0 8px;color:var(--sk-faint);font:700 .68rem/1 var(--sk-sans);letter-spacing:.16em;text-transform:uppercase}
.sk-field{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;height:56px;border:1px solid var(--sk-line2);border-radius:var(--sk-r);background:rgba(255,255,255,.035);transition:border-color .25s,box-shadow .25s,background .25s}
.sk-field:focus-within{border-color:rgba(245,209,111,.6);box-shadow:0 0 0 4px rgba(245,209,111,.12);background:rgba(255,255,255,.05)}
.sk-field__icon{display:grid;place-items:center;height:100%;color:var(--sk-faint)}
.sk-field__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.sk-field__icon img{width:26px;height:26px;border-radius:5px;image-rendering:pixelated;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.sk-field__icon img:not([hidden])+svg{display:none}
.sk-field__input{width:100%;height:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--sk-cream);font:600 1.12rem/1 var(--sk-sans);letter-spacing:.02em}
.sk-field__input::placeholder{color:rgba(239,236,229,.28);font-weight:500}
.sk-field__input:focus-visible{outline:0}
.sk-field__ok{display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--sk-ease);color:var(--sk-ok)}
.sk-field__ok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sk-field[data-state="valid"],.sk-field[data-state="locked"]{border-color:rgba(126,224,166,.45)}
.sk-field[data-state="valid"] .sk-field__ok,.sk-field[data-state="locked"] .sk-field__ok{opacity:1;transform:none}
.sk-field[data-state="invalid"]{border-color:rgba(255,139,122,.6)}
.sk-field[data-state="locked"]{background:rgba(126,224,166,.05)}
.sk-field[data-state="locked"] .sk-field__input{cursor:default}
.sk-msg{min-height:1.35em;margin:9px 0 0;color:var(--sk-faint);font:500 .8rem/1.4 var(--sk-sans)}
.sk-msg[data-tone="ok"]{color:var(--sk-ok)}
.sk-msg[data-tone="err"]{color:var(--sk-err)}
.sk-player__login{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--sk-line);color:var(--sk-faint);font:500 .82rem/1.45 var(--sk-sans)}
.sk-player__login a{color:var(--sk-gold);font-weight:700;text-decoration:none}
.sk-player__login a:hover{text-decoration:underline}
.sk-player__codes{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--sk-faint);font:500 .8rem/1.3 var(--sk-sans);text-decoration:none;transition:color .2s}
.sk-player__codes:hover{color:var(--sk-gold)}

/* ═══ RANKS (Zbrojownia) ═════════════════════════════════════════════════ */
.sk-ranks .ta-armory{margin:0}
.sk-ranks .ta-cta{width:100%;border:0;cursor:pointer;font-family:var(--sk-sans)}
.sk-ranks .ta-note a{color:var(--sk-gold);font-weight:700;text-decoration:none}
.sk-ranks .ta-note a:hover{text-decoration:underline}
.sk-ranks .ta-per{min-height:1.2em}

/* ═══ COMPARE — „Wszystkie rangi obok siebie.” ═══════════════════════════
   One table, three readings: rank crowns (the armoury's busts), privilege rows drawn as thin tier-coloured lines that
   start at the rank which unlocks them (a pixel gem of that tier's material) and run through every higher rank, and a
   price row whose digits roll like the armoury's counter. Phones get a fisheye: the picked rank's column opens wide,
   the other ranks stay as a dotted mini-ladder. Markup + per-rank colour rules: src/hooks.mjs; behaviour: src/compare.js. */
.sk-compare{padding-top:0}
.sk-compare::before{display:none}
.sk-cmp{position:relative;border:1px solid var(--sk-line);border-radius:var(--sk-r2);background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 280px),var(--sk-bg2);overflow:clip;box-shadow:0 30px 80px rgba(0,0,0,.32)}
.sk-cmp .sk-table__scroll{position:relative;outline:0}
.sk-cmp .sk-table__scroll:focus-visible{box-shadow:inset 0 0 0 2px rgba(245,209,111,.55);border-radius:var(--sk-r2)}
/* display/overflow also beat titan-hotfix-v1.css (table{display:block;overflow-x:auto} at <=768px) */
.sk-cmp table{position:relative;z-index:1;display:table;width:100%;max-width:none;overflow:visible;table-layout:fixed;border-collapse:separate;border-spacing:0;font:500 .92rem/1.3 var(--sk-sans)}
.sk-cmp col.sk-cmp-c0{width:25%}
.sk-cmp th,.sk-cmp td{position:relative;height:54px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.045);text-align:center;vertical-align:middle;color:var(--sk-text)}
.sk-cmp tbody th{padding:0 14px 0 22px;text-align:left;font:600 .92rem/1.3 var(--sk-sans);transition:color .25s}
.sk-cmp tbody th::before{content:"";position:absolute;left:0;top:50%;width:3px;height:18px;margin-top:-9px;border-radius:0 3px 3px 0;background:transparent;transform:scaleY(0);transition:transform .3s var(--sk-ease)}
.sk-cmp-label code{padding:3px 6px 4px;border-radius:6px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.075);color:var(--sk-cream);font:700 .9em/1 var(--sk-sans);letter-spacing:.01em;white-space:nowrap}
.sk-cmp tbody tr:hover>th,.sk-cmp tbody tr:hover>td{background-color:rgba(255,255,255,.016)}
.sk-cmp[data-open="false"] tr.is-more{display:none}
/* crowns */
.sk-cmp thead th{height:auto;padding:30px 6px 20px;vertical-align:bottom;border-bottom:1px solid var(--sk-line)}
.sk-cmp thead .sk-cmp-corner{padding:0 14px 22px 22px;text-align:left}
.sk-cmp-legend{display:flex;flex-direction:column;gap:10px;margin:0 0 24px;color:var(--sk-faint);font:600 .74rem/1.2 var(--sk-sans);letter-spacing:.01em}
.sk-cmp-legend>span{display:flex;align-items:center;gap:10px}
.sk-cmp-legend__line{position:relative;flex:none;width:22px;height:2px;background:linear-gradient(90deg,rgba(53,224,255,.7),rgba(180,109,255,.7))}
.sk-cmp-legend__line::after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:rgb(180,109,255);box-shadow:0 0 0 2px var(--sk-bg2)}
.sk-cmp-legend .sk-meter{flex:none;width:25px;margin:0;--c:245,208,97}
.sk-cmp-corner__label{display:block;color:var(--sk-faint);font:700 .64rem/1 var(--sk-sans);letter-spacing:.2em;text-transform:uppercase}
.sk-crown{display:flex;flex-direction:column;align-items:center}
.sk-crown__stage{position:relative;display:block;width:100px;height:86px;margin:0 0 12px}
.sk-crown__glow{position:absolute;left:50%;bottom:-12px;width:132px;height:64px;margin-left:-66px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--c),.24),rgba(var(--c),.06) 58%,transparent);opacity:.7;transition:opacity .4s}
.sk-crown__bust{position:relative;z-index:1;display:block;width:86px;height:86px;margin:0 auto;-webkit-mask:linear-gradient(180deg,#000 56%,transparent 97%);mask:linear-gradient(180deg,#000 56%,transparent 97%);transform-origin:50% 100%;transition:transform .5s var(--sk-ease)}
.sk-crown__plinth{position:absolute;left:50%;bottom:-6px;width:80px;height:12px;margin-left:-40px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--c),.36)}
.sk-crown__name{display:block;padding:0 2px;background:linear-gradient(180deg,#fff 14%,rgb(var(--c)) 150%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font:700 1.34rem/1.05 'Cinzel Decorative',var(--sk-serif);letter-spacing:.01em;white-space:nowrap}
.sk-crown__kick{display:block;margin-top:6px;padding:4px 7px;border-radius:5px;color:rgba(var(--c),.9);font:800 .58rem/1 var(--sk-sans);letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.sk-crown__new{display:inline-block;margin-top:12px;padding:5px 9px;border:1px solid rgba(var(--c),.2);border-radius:999px;color:var(--sk-dim);font:600 .68rem/1 var(--sk-sans);white-space:nowrap;transition:border-color .3s,color .3s,background-color .3s}
.sk-cmp thead th.is-hit::before{content:"";position:absolute;left:22%;right:22%;top:0;height:2px;border-radius:0 0 2px 2px;background:rgb(var(--c))}
.sk-cmp thead th.is-hit .sk-crown__kick{margin-top:6px;padding:4px 7px;border-radius:5px;background:rgba(var(--c),.16)}
/* lines: unlock gem → line through every higher rank; the colour passes through each tier (stops at -50/50/150%) */
.sk-cmp td.is-yes::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(var(--cp),.6) -50%,rgba(var(--c),.6) 50%,rgba(var(--cn),.6) 150%);transform-origin:0 50%;pointer-events:none}
.sk-cmp td.is-unlock::before{left:calc(50% + 12px);background:linear-gradient(90deg,rgba(var(--c),.6),rgba(var(--cn),.6) 200%)}
.sk-cmp td.is-end::before{right:50%;background:linear-gradient(90deg,rgba(var(--cp),.6) -100%,rgba(var(--c),.6))}
.sk-cmp td.is-unlock.is-end::before{display:none}
.sk-cmp td.is-carry::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 0 3px var(--sk-bg2);pointer-events:none}
.sk-gem{position:relative;z-index:1;display:inline-block;width:16px;height:16px;vertical-align:middle;background:var(--gem) 50%/16px 16px no-repeat;image-rendering:pixelated}
.sk-cmp-legend .sk-gem{--gem:var(--gem-mvp);flex:none}
.sk-cmp-tick,.sk-cmp-chip,.sk-cmp-from{display:none}
.sk-cmp td.is-no::after{content:"";display:inline-block;width:10px;height:2px;border-radius:1px;background:rgba(255,255,255,.1);vertical-align:middle}
/* values: numeral + a segmented meter (10 cells, Minecraft XP-bar style) in the column's tier colour */
.sk-cmp-val{display:block;color:var(--sk-dim);font:700 1.02rem/1 var(--sk-sans);font-variant-numeric:tabular-nums;transition:color .25s}
.sk-cmp-val small{margin-right:1px;font-size:.8em}
.sk-cmp td.is-new .sk-cmp-val{color:var(--sk-cream)}
.sk-meter{position:relative;display:block;width:50px;height:4px;margin:8px auto 0;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 4px,transparent 4px 5px)}
.sk-meter::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgb(var(--c)) 0 4px,transparent 4px 5px);transform:translateX(calc((var(--f,1) - 1) * 100%))}
.sk-cmp td.is-num:not(.is-new) .sk-meter::before{opacity:.42}
.sk-cmp-kit{display:inline-block;padding:5px 9px 6px;border:1px solid rgba(var(--c),.32);border-radius:7px;color:rgb(var(--c));font:700 .76rem/1 var(--sk-sans);letter-spacing:.03em}
/* expand row */
.sk-cmp .sk-cmp-more td{height:auto;padding:0;border-bottom:0}
.sk-cmp .sk-table__more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:0 16px;border:0;background:rgba(255,255,255,.016);color:var(--sk-dim);font:700 .82rem/1 var(--sk-sans);letter-spacing:.03em;cursor:pointer;transition:color .2s,background-color .2s}
.sk-cmp .sk-table__more:hover{color:var(--sk-gold);background:rgba(245,209,111,.045)}
.sk-cmp .sk-table__more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--sk-ease)}
.sk-cmp[data-open="true"] .sk-table__more svg{transform:rotate(180deg)}
/* price row: counter drums (one strip per digit, --d = digit, 10 = blank) */
.sk-cmp tfoot th,.sk-cmp tfoot td{height:auto;border-bottom:0}
.sk-cmp .sk-cmp-price>th,.sk-cmp .sk-cmp-price>td{padding-top:24px;padding-bottom:6px;border-top:1px solid var(--sk-goldline);vertical-align:top}
.sk-cmp-price th{padding-left:22px;text-align:left}
.sk-cmp-price__label{display:block;margin:0 0 12px;color:var(--sk-faint);font:700 .64rem/1 var(--sk-sans);letter-spacing:.2em;text-transform:uppercase}
.sk-cmp-note{display:block;max-width:26ch;margin-top:12px;color:var(--sk-faint);font:500 .74rem/1.45 var(--sk-sans)}
.sk-price{display:inline-flex;align-items:baseline;justify-content:center;gap:7px}
.sk-price__num{display:inline-flex;color:var(--sk-cream);font:900 2.3rem/1 var(--sk-num);font-stretch:condensed;letter-spacing:-.01em}
.sk-drum{display:inline-block;height:1em;overflow:hidden;line-height:1}
.sk-drum.is-blank{width:0}
.sk-drum__strip{display:block;transform:translateY(calc(var(--d,0) * -1em));transition:transform .75s cubic-bezier(.2,.85,.25,1);transition-delay:calc(var(--k,0) * 70ms + var(--dd,0ms))}
.sk-drum__strip i{display:block;height:1em;font-style:normal}
.sk-price__unit{color:rgba(var(--c),.9);font:800 .62rem/1 var(--sk-sans);letter-spacing:.16em}
.sk-price__alt{display:block;margin-top:9px;color:var(--sk-faint);font:600 .74rem/1 var(--sk-sans)}
.sk-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--sk-line2);border-radius:11px;background:rgba(255,255,255,.025);isolation:isolate}
.sk-seg button{position:relative;z-index:1;min-height:34px;padding:0 13px;border:0;border-radius:8px;background:none;color:var(--sk-dim);font:700 .76rem/1 var(--sk-sans);letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:color .25s}
.sk-seg button:hover{color:var(--sk-text)}
.sk-seg button[aria-checked="true"]{color:var(--sk-cream)}
.sk-seg__ind{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));box-shadow:inset 0 0 0 1px rgba(245,209,111,.38),0 4px 14px rgba(0,0,0,.35);transition:transform .38s var(--sk-ease)}
.sk-cmp[data-dur="perm"] .sk-seg__ind{transform:translateX(100%)}
/* buy row */
.sk-cmp .sk-table__buy>th,.sk-cmp .sk-table__buy>td{padding-top:14px;padding-bottom:26px}
.sk-cmp-buy{display:inline-flex;align-items:center;justify-content:center;width:min(100%,136px);min-height:42px;padding:0 14px;border:1px solid rgba(var(--c),.38);border-radius:11px;background:rgba(var(--c),.06);color:var(--sk-cream);font:700 .84rem/1 var(--sk-sans);letter-spacing:.02em;cursor:pointer;transition:transform .2s var(--sk-ease),border-color .25s,background-color .25s,box-shadow .25s}
.sk-cmp-buy:hover{border-color:rgba(var(--c),.75);background:rgba(var(--c),.14);box-shadow:0 10px 24px rgba(0,0,0,.35);transform:translateY(-1px)}
.sk-cmp-buy:active{transform:translateY(1px) scale(.98)}
.sk-cmp-buy.is-hit{border-color:rgba(255,235,170,.7);background:var(--sk-gold-grad);color:#161005;box-shadow:0 12px 28px rgba(212,150,23,.2),inset 0 1px 0 rgba(255,255,255,.5)}
.sk-cmp-buy.is-hit:hover{box-shadow:0 16px 34px rgba(212,150,23,.3),inset 0 1px 0 rgba(255,255,255,.6)}
/* spotlight lens (desktop pointer / keyboard focus): one neutral light column slides, two panes dim the rest */
.sk-cmp-beam,.sk-cmp-dim{position:absolute;top:0;bottom:0;left:0;pointer-events:none;opacity:0}
.sk-cmp-beam{z-index:0;background:linear-gradient(180deg,rgba(255,250,240,.07),rgba(255,250,240,.026) 32%,rgba(255,250,240,.02) 76%,rgba(255,250,240,.05));box-shadow:inset 1px 0 0 rgba(255,250,240,.07),inset -1px 0 0 rgba(255,250,240,.07);transition:transform .42s var(--sk-ease),opacity .3s}
.sk-cmp-beam::before{content:"";position:absolute;left:24%;right:24%;top:0;height:2px;border-radius:0 0 2px 2px;background:rgb(var(--bc,245,209,111))}
.sk-cmp-dim{z-index:2;background:rgba(6,6,9,.52);transition:transform .42s var(--sk-ease),opacity .3s}
.sk-cmp-dim--l{transform-origin:0 0;transform:scaleX(0)}
.sk-cmp-dim--r{left:auto;right:0;transform-origin:100% 0;transform:scaleX(0)}
.sk-cmp[data-hover] .sk-cmp-beam,.sk-cmp[data-hover] .sk-cmp-dim{opacity:1}
.sk-cmp.is-enter .sk-cmp-beam{transition:opacity .3s}
/* phone parts (hidden on desktop) */
.sk-cmp-pick,.sk-cmp-dock{display:none}
/* choreography (JS only): crowns rise, each row fades in and its line draws from the gem as it scrolls in */
.sk-cmp.is-armed .sk-cmp-crowns:not(.is-lit) .sk-crown,.sk-cmp.is-armed .sk-cmp-crowns:not(.is-lit) .sk-cmp-legend,.sk-cmp.is-armed .sk-cmp-crowns:not(.is-lit) .sk-cmp-corner__label{opacity:0}
.sk-cmp.is-armed .sk-cmp-crowns.is-lit .sk-crown{animation:skCmpRise .8s var(--sk-ease) both;animation-delay:calc(var(--k,0) * 85ms)}
.sk-cmp.is-armed .sk-cmp-crowns.is-lit .sk-cmp-legend,.sk-cmp.is-armed .sk-cmp-crowns.is-lit .sk-cmp-corner__label{animation:skCmpFade .7s var(--sk-ease) .45s both}
/* (rows themselves never fade: a whole-row opacity layer per row doubled layerize/paint on a 4x-throttled phone) */
@media (min-width:720px){
  .sk-cmp.is-armed .sk-cmp-row:not(.is-lit) td.is-yes::before{transform:scaleX(0)}
  .sk-cmp.is-armed .sk-cmp-row:not(.is-lit) td.is-carry::after{transform:scale(0)}
  .sk-cmp.is-armed .sk-cmp-row:not(.is-lit) .sk-gem{opacity:0}
  .sk-cmp.is-armed .sk-cmp-row:not(.is-lit) .sk-meter::before{transform:translateX(-100%)}
  .sk-cmp.is-armed .sk-cmp-row.is-lit td.is-yes::before{animation:skCmpDraw .62s cubic-bezier(.35,.7,.2,1) both;animation-delay:calc(var(--rd,0ms) + 170ms + var(--k,0) * 75ms)}
  .sk-cmp.is-armed .sk-cmp-row.is-lit td.is-carry::after{animation:skCmpDot .42s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--rd,0ms) + 250ms + var(--k,0) * 75ms)}
  .sk-cmp.is-armed .sk-cmp-row.is-lit .sk-gem{animation:skCmpGem .55s cubic-bezier(.3,1.55,.5,1) both;animation-delay:calc(var(--rd,0ms) + 110ms + var(--k,0) * 75ms)}
  .sk-cmp.is-armed .sk-cmp-row.is-lit .sk-meter::before{animation:skCmpFill .9s var(--sk-ease) both;animation-delay:calc(var(--rd,0ms) + 160ms + var(--k,0) * 75ms)}
}
/* phones: rows are static (no per-row observer or restyles while scrolling); the motion there is the picker swap */
.sk-cmp.is-armed .sk-cmp-price:not(.is-lit) .sk-drum__strip{transform:translateY(0)}
@keyframes skCmpRise{from{opacity:0;transform:translateY(16px)}}
@keyframes skCmpFade{from{opacity:0}}
@keyframes skCmpDraw{from{transform:scaleX(0)}}
@keyframes skCmpDot{from{transform:scale(0)}}
@keyframes skCmpGem{from{opacity:0;transform:translateY(-6px) scale(.6)}}
@keyframes skCmpFill{from{transform:translateX(-100%)}}
@keyframes skCmpSwapL{from{opacity:0;transform:translateX(-14px)}}
@keyframes skCmpSwapR{from{opacity:0;transform:translateX(14px)}}
@media (max-width:1100px){
  .sk-cmp col.sk-cmp-c0{width:23%}
  .sk-crown__stage{width:84px;height:72px}
  .sk-crown__bust{width:72px;height:72px}
  .sk-crown__name{font-size:1.12rem}
  .sk-cmp-legend{font-size:.68rem}
  .sk-cmp-buy{padding:0 8px}
}
@media (max-width:900px){
  .sk-cmp tbody th{padding-left:16px;font-size:.84rem}
  .sk-crown__kick{letter-spacing:.1em;font-size:.52rem}
  .sk-crown__new{padding:4px 6px;font-size:.62rem}
  .sk-price__num{font-size:1.9rem}
  .sk-cmp-legend{display:none}
}
/* phone (<720px): fisheye — the picked rank's column is wide, the others are 18 px dot cells with the lines between */
@media (max-width:719px){
  .sk-cmp{border-radius:16px}
  .sk-cmp thead,.sk-cmp tfoot{display:none}
  .sk-cmp col.sk-cmp-c0{width:auto}
  .sk-cmp col[data-col]{width:18px}
  .sk-cmp col.is-pick{width:108px}
  .sk-cmp th,.sk-cmp td{height:52px}
  .sk-cmp tbody th{padding:6px 8px 6px 14px;font-size:.86rem;line-height:1.3}
  .sk-cmp tbody th::before{display:none}
  .sk-cmp .sk-table__scroll{touch-action:pan-y}
  .sk-cmp .sk-cmp-row>td:not(.is-pick){padding:0;font-size:0}
  .sk-cmp .sk-cmp-row>td:not(.is-pick)>.sk-sr,.sk-cmp .sk-cmp-row>td:not(.is-pick)>.sk-gem,.sk-cmp .sk-cmp-row>td:not(.is-pick)>.sk-cmp-tick,.sk-cmp .sk-cmp-row>td:not(.is-pick)>.sk-cmp-chip,.sk-cmp .sk-cmp-row>td:not(.is-pick)>.sk-cmp-from,.sk-cmp .sk-cmp-row>td:not(.is-pick)>.sk-cmp-val,.sk-cmp .sk-cmp-row>td:not(.is-pick)>.sk-meter,.sk-cmp .sk-cmp-row>td:not(.is-pick)>.sk-cmp-kit{display:none}
  .sk-cmp .sk-cmp-row>td:not(.is-pick).is-num::after,.sk-cmp .sk-cmp-row>td:not(.is-pick).is-text::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(var(--c),.85)}
  .sk-cmp .sk-cmp-row>td:not(.is-pick).is-unlock::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-4px 0 0 -4px;border-radius:1px;background:rgb(var(--c));transform:rotate(45deg)}
  .sk-cmp .sk-cmp-row>td:not(.is-pick).is-unlock::before{left:50%}
  .sk-cmp .sk-cmp-row>td.is-carry::after{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;box-shadow:0 0 0 2px var(--sk-bg2)}
  .sk-cmp .sk-cmp-row>td:not(.is-pick).is-no::after{width:5px;height:5px;border-radius:50%;background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
  .sk-cmp .sk-cmp-row>td.is-pick{padding:8px 6px;font-size:.88rem;background:rgba(var(--c),.075);box-shadow:inset 1px 0 0 rgba(var(--c),.24),inset -1px 0 0 rgba(var(--c),.24)}
  .sk-cmp .sk-cmp-row>td.is-pick::before,.sk-cmp .sk-cmp-row>td.is-pick.is-carry::after,.sk-cmp .sk-cmp-row>td.is-pick.is-no::after{display:none}
  .sk-cmp .sk-cmp-row>td.is-pick .sk-cmp-tick{display:inline-block;width:18px;height:18px;fill:none;stroke:rgb(var(--c));stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
  .sk-cmp .sk-cmp-row>td.is-pick.is-unlock .sk-cmp-tick{display:none}
  .sk-cmp .sk-cmp-row>td.is-pick .sk-cmp-chip{display:block;width:max-content;margin:6px auto 0;padding:3px 6px;border-radius:5px;background:rgba(var(--c),.16);color:rgb(var(--c));font:800 .54rem/1 var(--sk-sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase}
  .sk-cmp .sk-cmp-row>td.is-pick .sk-cmp-from{display:block;color:var(--sk-faint);font:600 .72rem/1.2 var(--sk-sans);font-style:normal}
  .sk-cmp .sk-cmp-row>td.is-pick .sk-meter{margin-top:6px}
  /* a new pick slides its column in: one animated cell per row; it restarts by itself because the cells gain .is-pick */
  .sk-cmp.is-swap-l .sk-cmp-row>td.is-pick{animation:skCmpSwapL .34s var(--sk-ease) both}
  .sk-cmp.is-swap-r .sk-cmp-row>td.is-pick{animation:skCmpSwapR .34s var(--sk-ease) both}
  .sk-cmp-beam,.sk-cmp-dim{display:none}
  /* picker: five busts, sticky under the nav while the list scrolls */
  .sk-cmp-pick{position:sticky;top:var(--sk-navh,64px);z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:10px 6px 0;background:linear-gradient(180deg,#101017,#0B0B10);border-bottom:1px solid var(--sk-line)}
  .sk-cmp-pick button{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:2px 0 10px;border:0;background:none;color:var(--sk-faint);font:700 .74rem/1 var(--sk-sans);letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s}
  .sk-cmp-pick__bust{display:block;width:42px;height:42px;border-radius:10px;background:radial-gradient(circle at 50% 38%,rgba(var(--c),.3),rgba(var(--c),.05) 70%);box-shadow:inset 0 0 0 1px rgba(var(--c),.22);overflow:hidden;opacity:.5;transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
  .sk-cmp-pick__bust img{display:block;width:100%;height:100%}
  .sk-cmp-pick button[aria-checked="true"]{color:var(--sk-cream)}
  .sk-cmp-pick button[aria-checked="true"] .sk-cmp-pick__bust{opacity:1;transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(var(--c),.6)}
  .sk-cmp-pick button:active .sk-cmp-pick__bust{transform:scale(.94)}
  .sk-cmp-pick__ind{position:absolute;left:6px;bottom:-1px;width:calc((100% - 12px) / 5);height:2px;border-radius:2px;background:rgb(var(--c,180,109,255));transform:translateX(calc(var(--i,3) * 100%));transition:transform .42s var(--sk-ease),background-color .3s}
  /* dock: the picked rank, its price, the period switch and the buy button */
  .sk-cmp-dock{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"bust info price" "seg seg seg" "buy buy buy";align-items:center;gap:12px;padding:16px 14px 16px;border-top:1px solid var(--sk-goldline);background:linear-gradient(180deg,rgba(var(--c),.06),transparent 70%)}
  .sk-cmp-dock__bust{grid-area:bust;display:block;width:48px;height:48px;border-radius:11px;overflow:hidden;background:radial-gradient(circle at 50% 38%,rgba(var(--c),.32),rgba(var(--c),.06) 70%);box-shadow:inset 0 0 0 1px rgba(var(--c),.35)}
  .sk-cmp-dock__bust img{display:block;width:100%;height:100%}
  .sk-cmp-dock__info{grid-area:info;display:flex;flex-direction:column;gap:6px;min-width:0}
  .sk-cmp-dock__name{background:linear-gradient(180deg,#fff 14%,rgb(var(--c)) 150%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font:700 1.2rem/1 'Cinzel Decorative',var(--sk-serif)}
  .sk-cmp-dock__kick{color:rgba(var(--c),.9);font:800 .56rem/1 var(--sk-sans);letter-spacing:.16em;text-transform:uppercase}
  .sk-cmp-dock__price{grid-area:price;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .sk-cmp-dock__price b{color:var(--sk-cream);font:900 2rem/1 var(--sk-num);font-stretch:condensed}
  .sk-cmp-dock__price small{color:var(--sk-faint);font:700 .6rem/1 var(--sk-sans);letter-spacing:.12em;text-transform:uppercase}
  .sk-cmp-dock .sk-seg{grid-area:seg;display:grid;width:100%}
  .sk-cmp-dock .sk-seg button{min-height:44px;font-size:.84rem}
  .sk-cmp-dock__buy{grid-area:buy;width:100%}
}

/* ═══ TOP-UP (Mennica) — shop additions ══════════════════════════════════ */
.sk-topup .vm-head{align-items:flex-end}
.sk-paytabs{position:relative;display:inline-flex;flex:none;padding:4px;border:1px solid var(--sk-line2);border-radius:14px;background:rgba(255,255,255,.025)}
.sk-paytabs button{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--sk-dim);font:700 .82rem/1 var(--sk-sans);cursor:pointer;transition:color .25s,background .25s,box-shadow .25s}
.sk-paytabs button i{color:inherit;opacity:.8}
.sk-paytabs button[aria-selected="true"]{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));color:var(--sk-cream);box-shadow:inset 0 0 0 1px rgba(245,209,111,.35),0 6px 18px rgba(0,0,0,.35)}
.sk-paytabs button[aria-selected="true"] i{color:var(--sk-gold);opacity:1}
.sk-paypanel[hidden]{display:none!important}
.sk-paypanel.is-entering{animation:skIn .55s var(--sk-ease) both}
#topup .vm-cta{width:100%;font-family:var(--sk-sans);cursor:pointer}
#topup .vm-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
/* ── SMS Premium: the green phone (the old shop's emerald phone, now a real phone that plays the thread and picks the
   package) + the ledger. Every state change animates opacity/transform of pre-painted layers only. ── */
.sk-sms{--em:#2ECC71;--em2:#1E9E56;--em-soft:#A6F5C5;--em-rgb:46,204,113;display:grid;grid-template-columns:minmax(230px,286px) minmax(0,1fr);gap:22px clamp(28px,4vw,60px);align-items:center}
.sk-sms__phone{display:grid;place-items:center;padding:18px 0 28px}
.sk-sms__main{min-width:0}
.sk-sms__fine{grid-column:1/-1;margin:6px 0 0;color:var(--sk-faint);font:500 .78rem/1.5 var(--sk-sans);text-align:center}
/* the three steps, highlighted in sync with the phone (lit layers crossfade; text colours are static) */
.sk-sms__how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px;padding:0;list-style:none}
.sk-sms__how li{position:relative;display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border:1px solid var(--sk-line);border-radius:14px;background:rgba(255,255,255,.02);color:var(--sk-dim)}
.sk-sms__how li::before{content:"";position:absolute;inset:-1px;border-radius:14px;border:1px solid rgba(var(--em-rgb),.42);background:rgba(var(--em-rgb),.06);opacity:0;transition:opacity .45s;will-change:opacity;pointer-events:none}
.sk-sms__how li.is-live::before{opacity:1}
.sk-sms__how b{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.05);color:var(--sk-faint);font:800 .74rem/1 var(--sk-sans)}
.sk-sms__how b::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--em);box-shadow:0 0 0 4px rgba(var(--em-rgb),.16);opacity:0;transform:scale(.8);transition:opacity .45s,transform .45s var(--sk-ease);will-change:opacity,transform}
.sk-sms__how b::after{content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center;color:#04120A;opacity:0;transition:opacity .45s;will-change:opacity}
.sk-sms__how li.is-live b::before{opacity:1;transform:scale(1.08)}
.sk-sms__how li.is-live b::after{opacity:1}
.sk-sms__how span{position:relative;z-index:1}
.sk-sms__how strong{display:block;color:var(--sk-cream);font:700 .86rem/1.25 var(--sk-sans)}
.sk-sms__how em{display:block;margin-top:3px;color:var(--sk-dim);font:500 .76rem/1.45 var(--sk-sans);font-style:normal}
.sk-sms__how code{padding:1px 6px;border-radius:5px;background:rgba(var(--em-rgb),.12);color:var(--em-soft);font:700 .82em/1.4 var(--sk-sans);letter-spacing:.04em}
.sk-dlg code{padding:2px 7px;border-radius:6px;background:rgba(245,209,111,.1);color:var(--sk-gold);font:700 .84em/1.4 var(--sk-sans);letter-spacing:.04em}
/* the ledger: six hairline rows (VPLN · price · number · flag · „Mam kod”) */
.sk-sms__grid{display:grid;border:1px solid var(--sk-line);border-radius:var(--sk-r2);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 60%),var(--sk-surface);overflow:hidden}
.sk-smsrow{position:relative;display:flex;align-items:center;gap:18px;margin:0;padding:11px 14px 11px 20px;border-bottom:1px solid var(--sk-line);transition:background .25s}
.sk-smsrow:last-child{border-bottom:0}
.sk-smsrow::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--em);opacity:0;transform:scaleY(.4);transition:opacity .3s,transform .4s var(--sk-ease)}
.sk-smsrow:hover,.sk-smsrow.is-picked{background:rgba(var(--em-rgb),.045)}
.sk-smsrow.is-picked::before{opacity:1;transform:none}
.sk-smsrow>p{margin:0}
.sk-smsrow__amount{display:flex;align-items:baseline;gap:6px;flex:0 0 92px}
.sk-smsrow__amount b{background:linear-gradient(180deg,#FFF6D8,#F0B93A 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font:900 2.1rem/.9 var(--sk-num);font-stretch:condensed;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sk-smsrow__amount span{color:var(--sk-faint);font:800 .62rem/1 var(--sk-sans);letter-spacing:.16em}
.sk-smsrow__cost{flex:0 0 128px;color:var(--sk-cream);font:500 1.25rem/1 var(--sk-serif);white-space:nowrap}
.sk-smsrow__cost small{color:var(--sk-faint);font:500 .7rem var(--sk-sans)}
.sk-smsrow__num{display:flex;align-items:baseline;gap:10px;flex:1 1 auto;min-width:0}
.sk-smsrow__num small{color:var(--sk-faint);font:700 .6rem/1 var(--sk-sans);letter-spacing:.14em;text-transform:uppercase}
.sk-smsrow__num b{color:var(--sk-cream);font:800 1rem/1 var(--sk-sans);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.sk-smsrow__flag{flex:none;padding:5px 9px;border-radius:999px;background:rgba(var(--em-rgb),.12);color:var(--em-soft);font:800 .58rem/1 var(--sk-sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.sk-smsrow__flag.is-none{display:none}
.sk-smsrow__btn{flex:none}
/* the phone */
.sk-phone{position:relative;width:min(100%,250px);aspect-ratio:250/506}
.sk-phone__pool{position:absolute;left:50%;bottom:-30px;width:170%;height:84px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--em-rgb),.38),rgba(var(--em-rgb),.1) 55%,transparent);transform:translateX(-50%);opacity:.7;pointer-events:none;will-change:transform,opacity}
.sk-phone__float{position:relative;height:100%;will-change:transform}
.sk-phone.is-live .sk-phone__float{animation:skPhoneFloat 5.6s ease-in-out infinite}
.sk-phone.is-live .sk-phone__pool{animation:skPhonePool 5.6s ease-in-out infinite}
.sk-phone__body{position:relative;height:100%;padding:9px;border-radius:42px;background:linear-gradient(165deg,#1E2622,#0A0D0B 55%,#141A17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 3px #050706,0 40px 70px rgba(0,0,0,.6),0 0 0 1px rgba(var(--em-rgb),.2)}
.sk-phone.is-buzz .sk-phone__body{animation:skPhoneBuzz .42s linear}
.sk-phone__body::before{content:"";position:absolute;inset:-1px;border-radius:43px;padding:1px;background:linear-gradient(160deg,rgba(166,245,197,.8),rgba(255,255,255,.06) 34%,rgba(var(--em-rgb),.08) 66%,rgba(var(--em-rgb),.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sk-phone__key{position:absolute;width:3px;border-radius:2px;background:#1F2522;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.sk-phone__key--power{right:-3px;top:128px;height:58px}
.sk-phone__key--up{left:-3px;top:112px;height:34px}
.sk-phone__key--down{left:-3px;top:154px;height:34px}
.sk-phone__screen{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:34px;background:radial-gradient(120% 46% at 50% -8%,rgba(var(--em-rgb),.16),transparent 62%),#0A100D;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.sk-phone__island{position:absolute;top:11px;left:50%;width:72px;height:21px;border-radius:12px;background:#000;transform:translateX(-50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.sk-phone__bar{display:flex;justify-content:space-between;padding:13px 20px 0;color:rgba(239,236,229,.72);font:700 .64rem/1 var(--sk-sans);letter-spacing:.04em}
.sk-phone__head{display:flex;align-items:center;gap:10px;margin:22px 14px 0;padding:0 2px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.sk-phone__ava{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#3DDC84,#1A8F4D);color:#04120A;font:700 .86rem/1 var(--sk-serif);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 6px 14px rgba(var(--em-rgb),.3)}
.sk-phone__who{display:block;min-width:0}
.sk-phone__to{display:block;color:var(--sk-cream);font:800 .96rem/1 var(--sk-sans);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.sk-phone__sub{display:block;margin-top:4px;color:var(--sk-faint);font:600 .58rem/1.2 var(--sk-sans);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-phone__thread{position:relative;display:flex;flex-direction:column;gap:16px;min-height:138px;padding:14px 12px 0}
.sk-phone__msg{position:relative;max-width:84%;margin:0;padding:8px 11px;border-radius:16px;font:600 .72rem/1.4 var(--sk-sans);opacity:0;transform:translateY(10px) scale(.92);transition:opacity .3s var(--sk-ease),transform .45s var(--sk-ease);will-change:transform,opacity}
.sk-phone__msg--out{align-self:flex-end;border-bottom-right-radius:5px;background:linear-gradient(145deg,#3DDC84,#1E9E56);color:#03130A;font-weight:800;letter-spacing:.06em;transform-origin:100% 100%;box-shadow:0 8px 20px rgba(var(--em-rgb),.25)}
.sk-phone__msg--in{align-self:flex-start;border-bottom-left-radius:5px;background:#182019;color:var(--sk-cream);transform-origin:0 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.sk-phone__msg--in b{display:block;margin:4px 0 2px;color:var(--em-soft);font:800 .88rem/1.2 var(--sk-sans);letter-spacing:.12em}
.sk-phone__msg--in .sk-phone__vpln{color:var(--em-soft);font-weight:800}
.sk-phone__msg em{position:absolute;right:4px;bottom:-15px;color:var(--sk-faint);font:600 .56rem/1 var(--sk-sans);font-style:normal;letter-spacing:.06em;white-space:nowrap;opacity:0;transition:opacity .3s;will-change:opacity}
.sk-phone__msg--in em{left:4px;right:auto}
.sk-phone__typing{position:absolute;left:12px;top:64px;display:flex;gap:4px;margin:0;padding:11px 12px;border-radius:16px;border-bottom-left-radius:5px;background:#182019;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s var(--sk-ease);will-change:transform,opacity}
.sk-phone__typing i{width:5px;height:5px;border-radius:50%;background:rgba(239,236,229,.5);will-change:transform,opacity}
/* the picker inside the screen: six packages; the pressed one is the thread's number */
.sk-phone__picker{margin:auto 12px 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.sk-phone__picklabel{margin:0 0 8px;color:var(--sk-faint);font:700 .56rem/1 var(--sk-sans);letter-spacing:.16em;text-transform:uppercase}
.sk-phone__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sk-phone__chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:44px;padding:7px 3px 6px;border:0;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--sk-cream);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sk-phone__chip::before{content:"";position:absolute;inset:0;border-radius:10px;background:rgba(var(--em-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--em-rgb),.6);opacity:0;transition:opacity .25s;will-change:opacity}
.sk-phone__chip[aria-pressed="true"]::before{opacity:1}
.sk-phone__chip b{position:relative;z-index:1;font:800 .84rem/1 var(--sk-sans);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.sk-phone__chip b small{margin-left:2px;color:var(--sk-faint);font:800 .48rem/1 var(--sk-sans);letter-spacing:.1em}
.sk-phone__chip em{position:relative;z-index:1;color:var(--sk-faint);font:600 .56rem/1 var(--sk-sans);font-style:normal;letter-spacing:.02em;white-space:nowrap}
.sk-phone__chip[aria-pressed="true"] em,.sk-phone__chip[aria-pressed="true"] b small{color:var(--em-soft)}
.sk-phone__chip:focus-visible{outline:2px solid var(--em);outline-offset:2px}
/* „Mam kod” — a real button for the shown package; lit at step 4 by a pre-painted layer */
.sk-phone__cta{position:relative;display:block;width:calc(100% - 24px);margin:10px 12px 14px;padding:12px;border:0;border-radius:13px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--sk-faint);text-align:center;font:800 .64rem/1 var(--sk-sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:transform .45s var(--sk-ease);will-change:transform;-webkit-tap-highlight-color:transparent}
.sk-phone__cta::before{content:"";position:absolute;inset:0;border-radius:13px;background:linear-gradient(145deg,#3DDC84,#1E9E56);box-shadow:0 10px 26px rgba(var(--em-rgb),.32);opacity:0;transition:opacity .45s;will-change:opacity}
.sk-phone__cta span{position:relative;z-index:1}
.sk-phone__cta i{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:#03130A;font-style:normal;opacity:0;transition:opacity .45s;will-change:opacity}
.sk-phone__cta:hover{transform:translateY(-1px)}
.sk-phone__cta:focus-visible{outline:2px solid var(--em);outline-offset:3px}
.sk-phone[data-step="4"] .sk-phone__cta{transform:translateY(-2px)}
.sk-phone[data-step="4"] .sk-phone__cta::before,.sk-phone[data-step="4"] .sk-phone__cta i{opacity:1}
/* the thread's states */
.sk-phone[data-step="1"] .sk-phone__msg--out,.sk-phone[data-step="2"] .sk-phone__msg--out,.sk-phone[data-step="3"] .sk-phone__msg--out,.sk-phone[data-step="4"] .sk-phone__msg--out{opacity:1;transform:none}
.sk-phone[data-step="2"] .sk-phone__msg--out em,.sk-phone[data-step="3"] .sk-phone__msg--out em,.sk-phone[data-step="4"] .sk-phone__msg--out em{opacity:1}
.sk-phone[data-step="2"] .sk-phone__typing{opacity:1;transform:none}
.sk-phone[data-step="2"] .sk-phone__typing i{animation:skDot 1s ease-in-out infinite}
.sk-phone[data-step="2"] .sk-phone__typing i:nth-child(2){animation-delay:.15s}
.sk-phone[data-step="2"] .sk-phone__typing i:nth-child(3){animation-delay:.3s}
.sk-phone[data-step="3"] .sk-phone__msg--in,.sk-phone[data-step="4"] .sk-phone__msg--in{opacity:1;transform:none}
.sk-phone[data-step="3"] .sk-phone__msg--in em,.sk-phone[data-step="4"] .sk-phone__msg--in em{opacity:1}
.sk-phone.is-reset .sk-phone__msg,.sk-phone.is-reset .sk-phone__typing{transition-duration:.25s}
@keyframes skPhoneFloat{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-10px) rotate(1.4deg)}}
@keyframes skPhonePool{0%,100%{transform:translateX(-50%) scale(1);opacity:.7}50%{transform:translateX(-50%) scale(.84);opacity:.48}}
@keyframes skPhoneBuzz{0%,100%{transform:translateX(0)}15%{transform:translateX(-2.5px)}30%{transform:translateX(2.5px)}45%{transform:translateX(-2px)}60%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
@keyframes skDot{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-3px);opacity:1}}

/* ═══ COSMETICS (inventory) ══════════════════════════════════════════════ */
.sk-cmd{display:flex;align-items:center;gap:12px;flex:none;margin:0;color:var(--sk-faint);font:600 .8rem/1 var(--sk-sans);letter-spacing:.04em}
.sk-cmd kbd{padding:10px 14px;border:1px solid rgba(245,209,111,.35);border-bottom-width:3px;border-radius:10px;background:rgba(245,209,111,.07);color:var(--sk-gold);font:800 1rem/1 var(--sk-sans);letter-spacing:.06em}
.sk-inv{border:1px solid var(--sk-line);border-radius:22px;background:linear-gradient(180deg,#13131B,#0C0C12);box-shadow:0 30px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);padding:clamp(14px,2vw,22px)}
.sk-inv__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 16px}
.sk-inv__title{color:var(--sk-cream);font:500 1.15rem/1 var(--sk-serif);letter-spacing:-.01em}
.sk-inv__meta{color:var(--sk-faint);font:600 .74rem/1 var(--sk-sans);letter-spacing:.08em;text-transform:uppercase}
.sk-inv__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.sk-slot{position:relative;display:flex;flex-direction:column;gap:14px;min-height:100%;padding:18px;border:1px solid rgba(255,255,255,.06);border-radius:16px;background:#0A0A0F;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -2px 0 rgba(0,0,0,.4);outline:0;transition:border-color .3s,transform .3s var(--sk-ease),background .3s}
.sk-slot__frame{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:12px;background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent),#07070B;box-shadow:inset 2px 2px 0 rgba(0,0,0,.55),inset -2px -2px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.05)}
.sk-slot__icon{width:48px;height:48px;image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45));transition:transform .45s var(--sk-ease)}
.sk-slot__text{display:flex;flex-direction:column;gap:6px}
.sk-slot__text b{color:var(--sk-cream);font:700 1rem/1.2 var(--sk-sans)}
.sk-slot__text span{color:var(--sk-dim);font:400 .84rem/1.45 var(--sk-sans)}
.sk-slot__price{display:inline-flex;align-items:center;gap:8px;margin-top:auto;color:var(--sk-gold);font:700 .8rem/1 var(--sk-sans);letter-spacing:.02em}
.sk-slot__price img{width:16px;height:16px;image-rendering:pixelated}
.sk-slot:hover,.sk-slot:focus-visible{border-color:rgba(245,209,111,.28);background:#0D0D13;transform:translateY(-3px)}
.sk-slot:hover .sk-slot__icon,.sk-slot:focus-visible .sk-slot__icon{transform:translateY(-4px) rotate(-4deg) scale(1.06)}
.sk-slot:focus-visible{box-shadow:0 0 0 2px rgba(245,209,111,.6)}

/* ═══ EXTRAS — „Dla siebie i dla znajomych.” ═════════════════════════════
   The title is the layout: „Dla siebie” (voucher = perforated ticket that gets stamped, creator code = a wax seal that
   is pressed when the code validates) and „Dla znajomych” (gift = an obsidian voxel box with a gold ribbon, referral =
   your head linked to a friend's). Success/error looks come from the controller's data-state / data-tone, the
   choreography from src/compare.js. Sprites (--gift-*) are generated by src/hooks.mjs. */
.sk-x{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:start}
.sk-x__col{display:flex;flex-direction:column;gap:14px;min-width:0}
.sk-x__label{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 4px;padding:0 2px}
.sk-x__label b{color:var(--sk-cream);font:500 1.3rem/1.1 var(--sk-serif);letter-spacing:-.02em}
.sk-x__label span{color:var(--sk-faint);font:600 .76rem/1.2 var(--sk-sans);letter-spacing:.02em}
.sk-xr{position:relative;scroll-margin-top:120px;border-radius:16px}
.sk-x.is-armed .sk-xr{transition:opacity .8s var(--sk-ease),transform .8s var(--sk-ease);transition-delay:calc(var(--xi,0) * 90ms)}
.sk-x.is-armed .sk-xr:not(.is-in){opacity:0;transform:translateY(18px)}
.sk-xr:target{box-shadow:0 0 0 2px rgba(245,209,111,.4)}
.sk-x__title{margin:0 0 8px;color:var(--sk-cream);font:500 1.45rem/1.1 var(--sk-serif);letter-spacing:-.02em}
.sk-x__lead{max-width:46ch;margin:0 0 18px;color:var(--sk-dim);font:400 .9rem/1.55 var(--sk-sans);text-wrap:pretty}
.sk-x__form{display:flex;gap:8px}
.sk-x__field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.sk-x__field input{width:100%;height:44px;padding:0 14px;border:1px solid var(--sk-line2);border-radius:10px;background:rgba(0,0,0,.28);color:var(--sk-cream);font:700 .92rem/1 var(--sk-sans);letter-spacing:.08em;text-transform:uppercase;outline:0;transition:border-color .2s,box-shadow .2s,background-color .2s}
.sk-x__field input::placeholder{color:rgba(239,236,229,.26);letter-spacing:.1em}
.sk-x__field input:focus{border-color:rgba(245,209,111,.55);box-shadow:0 0 0 3px rgba(245,209,111,.1);background:rgba(0,0,0,.38)}
.sk-x__field input[data-state="ok"]{border-color:rgba(126,224,166,.6);box-shadow:0 0 0 3px rgba(126,224,166,.08)}
.sk-x__field input[data-state="err"]{border-color:rgba(255,139,122,.65);box-shadow:0 0 0 3px rgba(255,139,122,.08)}
.sk-x__field--url svg{position:absolute;left:13px;width:16px;height:16px;fill:none;stroke:var(--sk-faint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sk-x__field--url input{padding-left:38px;color:var(--sk-dim);font-weight:600;letter-spacing:.01em;text-transform:none;text-overflow:ellipsis}
.sk-x__form .sk-btn{--h:44px;flex:none}
.sk-x__form .sk-btn.is-done{border-color:rgba(126,224,166,.55);background:rgba(126,224,166,.1);color:var(--sk-ok)}
.sk-xr .sk-msg{min-height:1.4em;margin-top:10px}
.sk-xr .sk-msg[data-tone]::before{content:"";display:inline-block;width:12px;height:12px;margin:0 7px -1px 0;background:currentColor;-webkit-mask:var(--ico) 50%/contain no-repeat;mask:var(--ico) 50%/contain no-repeat}
.sk-xr .sk-msg[data-tone="ok"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12.5 5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sk-xr .sk-msg[data-tone="err"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.sk-xr .sk-msg.is-new{animation:skXMsg .4s var(--sk-ease) both}
/* voucher: a dark foil ticket, notched at the perforation, stub on the right */
.sk-ticket{--stub:128px;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);background:repeating-linear-gradient(135deg,rgba(255,255,255,.011) 0 1px,transparent 1px 7px),linear-gradient(135deg,#18151f,#0f0e15 58%,#131019);box-shadow:inset 0 0 0 1px rgba(255,255,255,.075);
  -webkit-mask:radial-gradient(circle at calc(100% - var(--stub)) 0,transparent 11px,#000 11.5px) top/100% 51% no-repeat,radial-gradient(circle at calc(100% - var(--stub)) 100%,transparent 11px,#000 11.5px) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle at calc(100% - var(--stub)) 0,transparent 11px,#000 11.5px) top/100% 51% no-repeat,radial-gradient(circle at calc(100% - var(--stub)) 100%,transparent 11px,#000 11.5px) bottom/100% 51% no-repeat}
.sk-ticket__body{position:relative;min-width:0;padding:24px 26px 16px}
.sk-ticket__stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:18px 10px;border-left:2px dashed rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(245,209,111,.075),rgba(245,209,111,.015));transition:background-color .4s}
.sk-ticket__brand{color:rgba(245,209,111,.72);font:800 .56rem/1 var(--sk-sans);letter-spacing:.24em;text-transform:uppercase}
.sk-ticket__value{color:var(--sk-cream);font:900 2.7rem/1 var(--sk-num);font-stretch:condensed;letter-spacing:-.02em}
.sk-ticket__unit{color:var(--sk-faint);font:800 .62rem/1 var(--sk-sans);letter-spacing:.2em}
.sk-ticket:focus-within .sk-ticket__stub{background-color:rgba(245,209,111,.05)}
.sk-ticket.is-stamped .sk-ticket__value{color:var(--sk-ok);animation:skXPop .5s .2s cubic-bezier(.3,1.5,.5,1) both}
/* the stamp lands on the code field (the controller clears it on success), so it never covers text */
.sk-stamp{position:absolute;right:10px;top:50%;margin-top:-23px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 11px 5px;background:rgba(10,12,12,.55);border:2px solid currentColor;border-radius:6px;outline:1px solid currentColor;outline-offset:-6px;color:rgba(126,224,166,.9);font:900 .74rem/1 var(--sk-sans);letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:rotate(-11deg) scale(1.7);pointer-events:none;-webkit-mask:var(--gift-ink) 0 0/36px 36px repeat;mask:var(--gift-ink) 0 0/36px 36px repeat}
.sk-stamp i{font:900 1.15rem/1 var(--sk-num);font-style:normal;font-stretch:condensed;letter-spacing:.02em}
.sk-ticket.is-stamped .sk-stamp{animation:skTicketStamp .5s cubic-bezier(.2,1.3,.4,1) both}
.sk-ticket.is-stamped .sk-x__field input::placeholder{color:transparent}
.sk-ticket.is-stamped{animation:skThud .32s .16s ease-out both}
.sk-ticket.is-shake{animation:skShake .42s cubic-bezier(.36,.07,.19,.97) both}
/* creator code: an empty seal spot until the code validates, then the wax is pressed and the discount appears */
.sk-seal{display:grid;grid-template-columns:104px minmax(0,1fr);gap:22px;padding:24px 26px 16px;border:1px solid var(--sk-line);background:radial-gradient(120% 90% at 0 0,rgba(180,109,255,.07),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.025),transparent 60%),var(--sk-surface)}
.sk-seal__spot{position:relative;display:block;width:104px;height:104px}
.sk-seal__spot::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(180,109,255,.34);border-radius:50%;transition:opacity .3s}
.sk-seal__spot::after{content:"";position:absolute;inset:4px;background:var(--gift-seal) 50%/96px 96px no-repeat;image-rendering:pixelated;opacity:.07}
.sk-seal__wax{position:absolute;inset:4px;z-index:1;background:var(--gift-seal) 50%/96px 96px no-repeat;image-rendering:pixelated;opacity:0;transform:scale(1.5)}
.sk-seal__pct{position:absolute;left:50%;bottom:-4px;z-index:2;padding:4px 8px 5px;border-radius:6px;background:var(--sk-gold-grad);box-shadow:0 6px 16px rgba(0,0,0,.4);color:#161005;font:900 .95rem/1 var(--sk-num);font-stretch:condensed;white-space:nowrap;opacity:0;transform:translate(-50%,6px)}
.sk-seal.is-sealed .sk-seal__wax{animation:skSeal .55s cubic-bezier(.2,1.3,.4,1) both}
.sk-seal.is-sealed .sk-seal__spot::before{animation:skRing .7s .12s var(--sk-ease) both}
.sk-seal.is-sealed .sk-seal__spot::after{opacity:0}
.sk-seal.is-sealed .sk-seal__pct{animation:skPct .45s .32s var(--sk-ease) both}
.sk-seal.is-shake .sk-seal__spot{animation:skShake .42s cubic-bezier(.36,.07,.19,.97) both}
/* gift: obsidian voxel box (orthographic CSS 3D, 16-texel faces at --px), floats while visible */
.sk-gift{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:6px 24px;padding:20px 26px 20px 14px;border:1px solid rgba(245,209,111,.2);background:radial-gradient(70% 110% at 16% 55%,rgba(245,209,111,.085),transparent 64%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%),var(--sk-surface)}
.sk-gift__stage{position:relative;display:grid;place-items:center;align-content:end;height:212px;padding-bottom:30px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sk-gift__copy{min-width:0}
.sk-gift__copy .sk-btn{margin-top:2px}
.sk-gift__copy .sk-btn svg{transition:transform .25s var(--sk-ease)}
.sk-gift__copy .sk-btn:hover svg{transform:translateX(3px)}
.sk-gift__fine{margin:12px 0 0;color:var(--sk-faint);font:500 .76rem/1.45 var(--sk-sans)}
.sk-box{--px:6px;--s:calc(var(--px) * 16);--hs:calc(var(--px) * 8);--h:calc(var(--px) * 11);--lh:calc(var(--px) * 3);--top:calc(var(--px) * -7);--by:calc(var(--px) * -4);position:relative;z-index:2;width:var(--s);height:calc(var(--px) * 14)}
/* the float wrapper is flat on purpose: the rig keeps its own 3D context and is flattened into this one layer, so the idle
   float is a plain 2D compositor animation (as a preserve-3d context it re-transformed every face each frame: +400 ms
   main-thread per scroll window on a 4x-throttled phone) */
.sk-box__float{position:absolute;inset:0;animation:skBoxFloat 4.2s ease-in-out infinite}
/* rest mode is flat (faces painted with 2D matrices generated in src/hooks.mjs); .is-3d switches to the real 3D rig, and
   transitions exist only once .is-ready is set (one style pass later), so the switch itself never animates */
.sk-box__rig{position:absolute;left:50%;top:50%;width:0;height:0}
.sk-box.is-3d .sk-box__rig{transform-style:preserve-3d;transform:rotateX(var(--rx,-24deg)) rotateY(var(--ry,-38deg))}
.sk-box.is-3d.is-ready .sk-box__rig{transition:transform .45s var(--sk-ease)}
.sk-box__f{position:absolute;display:block;left:calc(var(--hs) * -1);width:var(--s);background-repeat:no-repeat;background-size:var(--s) var(--s);image-rendering:pixelated}
.sk-box__f--front,.sk-box__f--right,.sk-box__f--left,.sk-box__f--back{top:var(--by);height:var(--h)}
.sk-box__f--front{background-image:var(--gift-front)}
.sk-box__f--right{background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),var(--gift-side);background-size:100% 100%,var(--s) var(--s)}
.sk-box__f--left{background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),var(--gift-side);background-size:100% 100%,var(--s) var(--s);transform:translateX(calc(var(--hs) * -1)) rotateY(-90deg)}
.sk-box__f--back{background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),var(--gift-front);background-size:100% 100%,var(--s) var(--s);transform:translateZ(calc(var(--hs) * -1)) rotateY(180deg)}
.sk-box__glow{position:absolute;left:calc(var(--hs) * -1);top:calc(var(--hs) * -1);width:var(--s);height:var(--s);background:radial-gradient(closest-side,rgba(255,226,140,.95),rgba(255,176,46,.55) 58%,rgba(255,176,46,.08));transform:translateY(calc(var(--by) + var(--h) - 1px)) rotateX(90deg)}
.sk-box__lid{position:absolute;left:0;top:0;width:0;height:0}
.sk-box.is-3d .sk-box__lid{top:var(--top);transform-style:preserve-3d;transform:translateZ(calc(var(--hs) * -1)) rotateX(var(--open,0deg))}
.sk-box.is-3d.is-ready .sk-box__lid{transition:transform .62s cubic-bezier(.3,1.45,.5,1)}
.sk-box__f--ltop{height:var(--s);background-image:var(--gift-top)}
.sk-box__f--lfront,.sk-box__f--lright,.sk-box__f--lleft,.sk-box__f--lback{top:0;height:var(--lh)}
.sk-box__f--lfront{background-image:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)),var(--gift-lidfront);background-size:100% 100%,var(--s) var(--s)}
.sk-box__f--lright{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),var(--gift-lidside);background-size:100% 100%,var(--s) var(--s)}
.sk-box__f--lleft{background-image:var(--gift-lidside);transform:translate3d(calc(var(--hs) * -1),0,var(--hs)) rotateY(-90deg)}
.sk-box__f--lback{background-image:var(--gift-lidside);transform:rotateY(180deg)}
.sk-box__bow{position:absolute;width:var(--s);height:var(--s);background:var(--gift-bow) 0 0/var(--s) var(--s) no-repeat;image-rendering:pixelated}
.sk-box__bowh{position:absolute;width:var(--hs);height:var(--s);background:var(--gift-bow) 0 0/var(--s) var(--s) no-repeat;image-rendering:pixelated}
.sk-box__bowh--xb,.sk-box__bowh--fr{background-position:calc(var(--hs) * -1) 0}
.sk-box__shadow{position:absolute;left:50%;bottom:18px;z-index:1;width:132px;height:22px;margin-left:-66px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));animation:skBoxShadow 4.2s ease-in-out infinite}
.sk-gift__beam{position:absolute;left:50%;top:0;bottom:46%;z-index:0;width:120px;margin-left:-60px;background:linear-gradient(0deg,rgba(255,224,140,.42),rgba(255,224,140,0));clip-path:polygon(32% 100%,68% 100%,100% 0,0 0);opacity:0;transform:scaleY(.3);transform-origin:50% 100%;transition:opacity .45s,transform .7s var(--sk-ease)}
/* the VPLN note waits inside the box as a camera-facing plane (inverse of the rig rotation), so the walls hide it until it rises */
.sk-box__note{position:absolute;left:calc(var(--px) * -4.5);top:calc(var(--by) + var(--px) * 3);display:grid;place-items:center;width:calc(var(--px) * 9);height:calc(var(--px) * 4.5);border-radius:4px;background:var(--sk-gold-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(120,70,0,.35);color:#161005;font:900 .95rem/1 var(--sk-num);font-stretch:condensed;letter-spacing:.08em;transform:translate3d(0,var(--ny,0px),0) rotateY(calc(var(--ry,-38deg) * -1)) rotateX(calc(var(--rx,-24deg) * -1));transition:transform .8s cubic-bezier(.3,1.35,.5,1)}
.sk-gift.is-open .sk-box__lid{--open:104deg}
.sk-gift.is-open .sk-box__note{--ny:calc(var(--px) * -13);transition-delay:.16s}
.sk-gift.is-open .sk-gift__beam{opacity:1;transform:none;transition-delay:.12s}
.sk-gift.is-peek .sk-box__lid{--open:30deg}
.sk-gift:not(.is-open) .sk-box__f--left,.sk-gift:not(.is-open) .sk-box__f--back,.sk-gift:not(.is-open) .sk-box__glow,.sk-gift:not(.is-open) .sk-box__f--lleft,.sk-gift:not(.is-open) .sk-box__f--lback,.sk-box:not(.is-3d) .sk-box__note{display:none}
.sk-box__f--back::after,.sk-box__f--left::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,206,100,.6),rgba(255,206,100,.12) 55%,transparent 85%);opacity:0;transition:opacity .5s .1s}
.sk-gift.is-open .sk-box__f--back::after,.sk-gift.is-open .sk-box__f--left::after{opacity:1}
.sk-gift:not(.is-live) .sk-box__float,.sk-gift:not(.is-live) .sk-box__shadow{animation-play-state:paused}
.sk-x.is-armed .sk-gift:not(.is-in) .sk-box{opacity:0;transform:translateY(-70px)}
.sk-x.is-armed .sk-gift.is-in .sk-box{animation:skBoxDrop .9s cubic-bezier(.3,1.35,.5,1) both}
@media (hover:hover) and (pointer:fine){ .sk-gift:hover:not(.is-open) .sk-box.is-ready .sk-box__lid{--open:18deg} }
/* referral: your head and a friend's, one link between them */
.sk-invite{padding:22px 26px 16px;border:1px solid var(--sk-line);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%),var(--sk-surface)}
.sk-invite__pair{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 0 18px}
@media (min-width:601px){
  .sk-invite{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"title pair" "lead pair" "form form" "msg msg";column-gap:20px;align-items:start}
  .sk-invite>.sk-x__title{grid-area:title}
  .sk-invite>.sk-x__lead{grid-area:lead}
  .sk-invite>.sk-x__form{grid-area:form}
  .sk-invite>.sk-msg{grid-area:msg}
  .sk-invite__pair{grid-area:pair;gap:10px;margin:2px 0 0}
  .sk-invite__head{min-width:52px}
  .sk-invite__face{width:44px;height:44px}
  .sk-invite__face img{width:36px;height:36px}
}
.sk-invite__head{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px}
.sk-invite__face{display:block;width:52px;height:52px;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--sk-line2);transition:box-shadow .4s}
.sk-invite__face img{display:block;width:44px;height:44px;border-radius:4px;image-rendering:pixelated;transition:opacity .4s,filter .4s}
.sk-invite__head em{color:var(--sk-faint);font:700 .62rem/1 var(--sk-sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-invite__head b{color:var(--sk-gold);font:800 .8rem/1 var(--sk-sans)}
.sk-invite__head.is-you:not(.is-set) img,.sk-invite__head.is-friend img{opacity:.5;filter:grayscale(1)}
.sk-invite__head.is-you.is-set .sk-invite__face{box-shadow:inset 0 0 0 1px rgba(245,209,111,.45)}
.sk-invite__head.is-you.is-pop .sk-invite__face{animation:skXPop .5s cubic-bezier(.3,1.5,.5,1) both}
.sk-invite.is-sent .sk-invite__head.is-friend img{opacity:1;filter:none}
.sk-invite.is-sent .sk-invite__head.is-friend .sk-invite__face{box-shadow:inset 0 0 0 1px rgba(245,209,111,.45);animation:skXPop .5s .78s cubic-bezier(.3,1.5,.5,1) both}
.sk-invite__path{position:relative;height:4px;container-type:inline-size;background:repeating-linear-gradient(90deg,rgba(245,209,111,.32) 0 4px,transparent 4px 10px)}
.sk-invite__pulse{position:absolute;left:0;top:-3px;width:10px;height:10px;border-radius:2px;background:var(--sk-gold);opacity:0}
.sk-invite.is-sent .sk-invite__pulse{animation:skXPulse .9s cubic-bezier(.55,0,.3,1) both}
@keyframes skXMsg{from{opacity:0;transform:translateY(4px)}}
@keyframes skXPop{0%{transform:scale(.7)}60%{transform:scale(1.08)}100%{transform:none}}
@keyframes skTicketStamp{0%{opacity:0;transform:rotate(-11deg) scale(1.7)}60%{opacity:1;transform:rotate(-11deg) scale(.94)}100%{opacity:1;transform:rotate(-11deg) scale(1)}}
@keyframes skThud{40%{transform:translateY(2px)}}
@keyframes skShake{15%{transform:translateX(-7px)}35%{transform:translateX(6px)}55%{transform:translateX(-4px)}75%{transform:translateX(2px)}}
@keyframes skSeal{0%{opacity:0;transform:scale(1.6) rotate(-10deg)}55%{opacity:1;transform:scale(.92) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes skRing{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.3)}}
@keyframes skPct{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes skBoxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes skBoxShadow{0%,100%{transform:none;opacity:1}50%{transform:scale(.86);opacity:.7}}
@keyframes skBoxDrop{0%{opacity:0;transform:translateY(-70px)}55%{opacity:1;transform:translateY(4px)}75%{transform:translateY(-3px)}100%{opacity:1;transform:none}}
@keyframes skXPulse{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(calc(100cqw - 10px))}}
@media (max-width:1100px){
  .sk-gift{grid-template-columns:170px minmax(0,1fr)}
  .sk-box{--px:5px}
}
@media (max-width:900px){
  .sk-x{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .sk-x__label b{font-size:1.2rem}
  .sk-x__title{font-size:1.32rem}
  .sk-x__form{flex-direction:column}
  .sk-x__form .sk-btn{width:100%;--h:48px}
  .sk-x__field input{height:48px;font-size:16px}
  .sk-ticket{--stub:92px}
  .sk-ticket__body{padding:20px 18px 14px}
  .sk-ticket__value{font-size:2.2rem}
  .sk-seal{grid-template-columns:1fr;gap:6px;padding:20px 18px 14px}
  .sk-seal__spot{position:absolute;right:14px;top:14px;width:76px;height:76px}
  .sk-seal__spot::after,.sk-seal__wax{inset:6px;background-size:64px 64px}
  .sk-seal__main .sk-x__title,.sk-seal__main .sk-x__lead{padding-right:84px}
  .sk-gift{grid-template-columns:1fr;padding:22px 18px 20px}
  .sk-gift__stage{height:200px;padding-bottom:24px}
  .sk-gift__copy .sk-btn{width:100%}
  .sk-invite{padding:20px 18px 14px}
}

/* ═══ FUNDING ════════════════════════════════════════════════════════════ */
.sk-fund[hidden]{display:none}
.sk-fund__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px}
.sk-goal,.sk-top,.sk-feed{position:relative;padding:clamp(22px,2.6vw,32px);border:1px solid var(--sk-line);border-radius:var(--sk-r2);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 70%),var(--sk-surface)}
.sk-feed{grid-column:1/-1}
.sk-goal__label{margin:0 0 10px;color:rgba(245,209,111,.8);font:800 .64rem/1 var(--sk-sans);letter-spacing:.2em;text-transform:uppercase}
.sk-goal__title{margin:0 0 26px;color:var(--sk-cream);font:500 clamp(1.5rem,2.2vw,1.9rem)/1.15 var(--sk-serif);letter-spacing:-.03em}
.sk-goal__meter{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);overflow:hidden}
.sk-goal__meter i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;overflow:hidden;background:linear-gradient(90deg,#B9770F,#F5D16F 70%,#FFF1C4);box-shadow:0 0 18px rgba(245,209,111,.45);transition:width 1.6s var(--sk-ease)}
.sk-goal__meter i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:skSheen 3.2s ease-in-out infinite}
@keyframes skSheen{60%,100%{transform:translateX(100%)}}
.sk-goal__nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 26px}
.sk-goal__nums p{margin:0;display:flex;flex-direction:column;gap:6px}
.sk-goal__nums b{color:var(--sk-cream);font:900 clamp(1.7rem,2.6vw,2.3rem)/1 var(--sk-num);font-stretch:condensed;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sk-goal__nums span{color:var(--sk-faint);font:700 .64rem/1 var(--sk-sans);letter-spacing:.16em;text-transform:uppercase}
.sk-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;margin:8px 0 18px;padding:0;list-style:none}
.sk-podium li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 14px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--sk-line);text-align:center;min-width:0}
.sk-podium li[data-place="1"]{order:2;padding-top:22px;border-color:rgba(245,209,111,.35);background:radial-gradient(90% 70% at 50% 0,rgba(245,209,111,.12),transparent),rgba(255,255,255,.025)}
.sk-podium li[data-place="2"]{order:1}
.sk-podium li[data-place="3"]{order:3}
.sk-podium img{width:48px;height:48px;border-radius:9px;image-rendering:pixelated;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.4)}
.sk-podium li[data-place="1"] img{width:60px;height:60px}
.sk-podium b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sk-cream);font:700 .86rem/1.2 var(--sk-sans)}
.sk-podium span{color:var(--sk-gold);font:700 .76rem/1 var(--sk-sans)}
.sk-podium em{position:absolute;margin-top:-30px;font-style:normal}
.sk-podium .sk-place{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--sk-dim);font:800 .7rem/1 var(--sk-sans)}
.sk-podium li[data-place="1"] .sk-place{background:var(--sk-gold);color:#150f03}
.sk-podium li.is-ghost{opacity:.4}
.sk-toplist{margin:0;padding:0;list-style:none;counter-reset:top 3}
.sk-toplist li{display:flex;align-items:center;gap:12px;padding:9px 4px;border-top:1px solid var(--sk-line);counter-increment:top;color:var(--sk-text);font:600 .86rem/1.2 var(--sk-sans)}
.sk-toplist li::before{content:counter(top);width:22px;color:var(--sk-faint);font:700 .74rem/1 var(--sk-sans)}
.sk-toplist img{width:26px;height:26px;border-radius:6px;image-rendering:pixelated}
.sk-toplist b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sk-toplist span{color:var(--sk-gold);font-weight:700;font-size:.8rem}
.sk-top__empty{margin:6px 0 0;color:var(--sk-faint);font:500 .86rem/1.5 var(--sk-sans)}
.sk-feed__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 18px;margin:0;padding:0;list-style:none}
.sk-feed__list li{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 0;color:var(--sk-dim);font:500 .84rem/1.3 var(--sk-sans)}
.sk-feed__list img{flex:none;width:24px;height:24px;border-radius:5px;image-rendering:pixelated}
.sk-feed__list b{color:var(--sk-cream);font-weight:700}
.sk-feed__list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-skel{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:skSkel 1.4s ease-in-out infinite}
@keyframes skSkel{to{background-position:-200% 0}}

/* ═══ FAQ ════════════════════════════════════════════════════════════════ */
.sk-faq__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.sk-faq .sk-head{position:sticky;top:110px;margin:0}
.sk-faq__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.sk-faq__tabs button{min-height:40px;padding:0 16px;border:1px solid var(--sk-line2);border-radius:999px;background:transparent;color:var(--sk-dim);font:700 .8rem/1 var(--sk-sans);cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.sk-faq__tabs button:hover{color:var(--sk-cream);border-color:rgba(255,255,255,.2)}
.sk-faq__tabs button[aria-selected="true"]{border-color:rgba(245,209,111,.5);background:rgba(245,209,111,.1);color:var(--sk-gold)}
.sk-faq__panel[hidden]{display:none}
.sk-faq__panel.is-entering{animation:skIn .45s var(--sk-ease) both}
.sk-faq__item{border-bottom:1px solid var(--sk-line)}
.sk-faq__item:first-child{border-top:1px solid var(--sk-line)}
.sk-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;color:var(--sk-cream);font:600 1.02rem/1.4 var(--sk-sans);cursor:pointer;list-style:none;transition:color .2s}
.sk-faq__item summary::-webkit-details-marker{display:none}
.sk-faq__item summary:hover{color:var(--sk-gold)}
.sk-faq__item summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--sk-line2);transition:transform .35s var(--sk-ease),border-color .25s,background .25s}
.sk-faq__item summary i::before,.sk-faq__item summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;border-radius:2px;background:currentColor;transition:transform .35s var(--sk-ease)}
.sk-faq__item summary i::after{transform:rotate(90deg)}
.sk-faq__item[open] summary i{border-color:rgba(245,209,111,.5);background:rgba(245,209,111,.08);color:var(--sk-gold)}
.sk-faq__item[open] summary i::after{transform:rotate(0)}
.sk-faq__a{overflow:hidden}
.sk-faq__a p{margin:0;padding:0 44px 24px 2px;color:var(--sk-dim);font:400 .95rem/1.7 var(--sk-sans)}
.sk-faq__a strong{color:var(--sk-cream)}
.sk-faq__a a{color:var(--sk-gold)}
.sk-faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--sk-ease),content-visibility .4s allow-discrete}
.sk-faq__item[open]::details-content{block-size:auto}
.sk-faq{interpolate-size:allow-keywords}

/* ═══ TRUST ══════════════════════════════════════════════════════════════ */
.sk-trust{padding:clamp(48px,6vw,72px) 0 clamp(64px,8vw,104px);border-top:1px solid var(--sk-line)}
.sk-trust__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.sk-trust__list li{display:flex;gap:14px;align-items:flex-start}
.sk-trust__list i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.04);color:var(--sk-gold);font-size:.95rem}
.sk-trust__list b{display:block;color:var(--sk-cream);font:700 .9rem/1.3 var(--sk-sans)}
.sk-trust__list span{display:block;margin-top:3px;color:var(--sk-faint);font:500 .8rem/1.45 var(--sk-sans)}
.sk-trust__legal{max-width:760px;margin:36px auto 0;color:var(--sk-faint);font:500 .78rem/1.6 var(--sk-sans);text-align:center}
.sk-trust__legal a{color:var(--sk-dim)}

/* ═══ CHECKOUT DIALOG ════════════════════════════════════════════════════ */
.sk-dlg{position:fixed;inset:0;z-index:100060;display:grid;place-items:center;padding:16px}
.sk-dlg[hidden]{display:none}
.sk-dlg__backdrop{position:absolute;inset:0;background:rgba(3,3,6,.78);opacity:0;transition:opacity .28s}
.sk-dlg.is-open .sk-dlg__backdrop{opacity:1}
.sk-dlg__panel{position:relative;width:min(540px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;border:1px solid rgba(245,209,111,.2);border-radius:var(--sk-r3);background:radial-gradient(120% 60% at 50% 0,rgba(245,209,111,.07),transparent 60%),#0E0E15;box-shadow:0 50px 120px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);outline:0;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .28s var(--sk-ease),transform .34s var(--sk-ease)}
.sk-dlg.is-open .sk-dlg__panel{opacity:1;transform:none}
.sk-dlg__close{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.04);color:var(--sk-dim);cursor:pointer;transition:background .2s,color .2s}
.sk-dlg__close:hover{background:rgba(255,255,255,.09);color:var(--sk-cream)}
.sk-dlg__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sk-dlg__body{padding:30px 30px 26px}
.sk-dlg__top{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding-right:36px}
.sk-dlg__visual{position:relative;flex:none;display:grid;place-items:center;width:72px;height:72px}
.sk-cube{display:grid;place-items:center;width:72px;height:72px}
.sk-cube canvas{display:block;image-rendering:pixelated}
/* the SMS flow speaks emerald: block, total, kicker, primary button, code field */
#skCheckout[data-flow="sms"]{--m-hi:#C2FFD3;--m-mid:#2DC160;--m-lo:#0B5527;--m-glow:#3DDC84}
#skCheckout[data-flow="sms"] .sk-dlg__panel{border-color:rgba(46,204,113,.28);background:radial-gradient(120% 60% at 50% 0,rgba(46,204,113,.09),transparent 60%),#0E0E15}
#skCheckout[data-flow="sms"] .sk-dlg__kicker{color:rgba(166,245,197,.85)}
#skCheckout[data-flow="sms"] .sk-btn--gold{border-color:rgba(166,245,197,.6);background:linear-gradient(145deg,#4BE58F,#1E9E56 64%,#3DDC84);color:#03130A;box-shadow:0 14px 32px rgba(46,204,113,.22),inset 0 1px 0 rgba(255,255,255,.5)}
#skCheckout[data-flow="sms"] .sk-btn--gold:hover{box-shadow:0 18px 40px rgba(46,204,113,.3),inset 0 1px 0 rgba(255,255,255,.55)}
#skCheckout[data-flow="sms"] .sk-smsbox button:hover{border-color:rgba(46,204,113,.5);background:rgba(46,204,113,.06)}
#skCheckout[data-flow="sms"] .sk-codein:focus{border-color:rgba(46,204,113,.6);box-shadow:0 0 0 4px rgba(46,204,113,.12)}
#skCheckout[data-flow="sms"] code{background:rgba(46,204,113,.12);color:#A6F5C5}
/* the floating back-to-top button (global, #backToTop) steps aside while the top-up section is on screen */
@media (max-width:600px){html.sk-topup-in #titanBackToTop,html.sk-topup-in #backToTop,html.sk-topup-in .back-to-top{opacity:0!important;pointer-events:none!important;transform:translateY(14px)!important;transition:opacity .3s,transform .3s!important}}
.sk-dlg__visual img{width:72px;height:72px;border-radius:16px;object-fit:cover;box-shadow:0 0 0 1px rgba(var(--rk,245,209,97),.45),0 12px 24px rgba(0,0,0,.5)}
.sk-dlg__visual .sk-dlg__icon{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:rgba(245,209,111,.1);box-shadow:inset 0 0 0 1px rgba(245,209,111,.3);color:var(--sk-gold);font-size:1.5rem}
.sk-dlg__kicker{margin:0 0 6px;color:rgba(245,209,111,.82);font:800 .62rem/1 var(--sk-sans);letter-spacing:.2em;text-transform:uppercase}
.sk-dlg h2{margin:0;color:var(--sk-cream);font:500 1.75rem/1.08 var(--sk-serif);letter-spacing:-.035em}
.sk-dlg__rows{margin:0 0 18px;border-top:1px solid var(--sk-line)}
.sk-dlg__rows>div{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:10px 0;border-bottom:1px solid var(--sk-line)}
.sk-dlg__rows dt{color:var(--sk-faint);font:700 .68rem/1.2 var(--sk-sans);letter-spacing:.14em;text-transform:uppercase}
.sk-dlg__rows dd{margin:0;color:var(--sk-cream);font:600 .95rem/1.3 var(--sk-sans);text-align:right}
.sk-dlg__rows .is-total dd{background:linear-gradient(180deg,#FFF8E2,var(--m-glow,#F5D16F) 140%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font:900 2.2rem/1 var(--sk-num);font-stretch:condensed;letter-spacing:-.03em}
.sk-dlg__rows .is-price dd{color:var(--sk-gold);font:500 1.5rem/1 var(--sk-serif)}
.sk-dlg__rows .is-price dd small{display:block;margin-top:4px;color:var(--sk-faint);font:500 .72rem var(--sk-sans);-webkit-text-fill-color:currentColor}
.sk-acct{display:inline-flex;align-items:center;gap:10px}
.sk-acct img{width:28px;height:28px;border-radius:6px;image-rendering:pixelated;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.sk-acct button{padding:0;border:0;background:none;color:var(--sk-gold);font:700 .76rem var(--sk-sans);cursor:pointer}
.sk-acct-field{width:220px;max-width:100%}
.sk-acct-field .sk-field{height:46px;grid-template-columns:40px minmax(0,1fr) 34px}
.sk-acct-field .sk-field__input{font-size:.98rem}
.sk-acct-field .sk-msg{text-align:left;font-size:.74rem;margin-top:5px}
.sk-toggle{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 4px;padding:12px 0;border:0;background:none;color:var(--sk-text);font:600 .9rem/1.3 var(--sk-sans);text-align:left;cursor:pointer}
.sk-toggle i{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .25s}
.sk-toggle i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#e9e5dc;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .3s var(--sk-ease)}
.sk-toggle[aria-checked="true"] i{background:linear-gradient(90deg,#C88A16,#F5D16F)}
.sk-toggle[aria-checked="true"] i::after{transform:translateX(16px)}
.sk-toggle small{display:block;color:var(--sk-faint);font:500 .76rem/1.3 var(--sk-sans)}
.sk-sub{display:grid;gap:10px;margin:0 0 14px;padding:14px;border:1px solid var(--sk-line);border-radius:14px;background:rgba(255,255,255,.02);animation:skIn .35s var(--sk-ease) both}
.sk-sub[hidden]{display:none}
.sk-sub label{color:var(--sk-faint);font:700 .64rem/1 var(--sk-sans);letter-spacing:.14em;text-transform:uppercase}
.sk-sub input,.sk-sub textarea{width:100%;padding:11px 13px;border:1px solid var(--sk-line2);border-radius:10px;background:rgba(255,255,255,.035);color:var(--sk-cream);font:600 .92rem/1.35 var(--sk-sans);outline:0;resize:vertical;transition:border-color .2s,box-shadow .2s}
.sk-sub input:focus,.sk-sub textarea:focus{border-color:rgba(245,209,111,.55);box-shadow:0 0 0 3px rgba(245,209,111,.1)}
.sk-linkbtn{padding:0;border:0;background:none;color:var(--sk-dim);font:600 .82rem/1.3 var(--sk-sans);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px;cursor:pointer}
.sk-linkbtn:hover{color:var(--sk-gold)}
.sk-alert{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:13px 15px;border-radius:12px;border:1px solid rgba(240,162,75,.3);background:rgba(240,162,75,.07);color:#F6C88E;font:500 .84rem/1.5 var(--sk-sans)}
.sk-alert i{margin-top:2px}
.sk-alert a{color:var(--sk-gold);font-weight:700}
.sk-alert[data-tone="err"]{border-color:rgba(255,139,122,.35);background:rgba(255,139,122,.07);color:#FFB4A8}
.sk-alert[data-tone="ok"]{border-color:rgba(126,224,166,.35);background:rgba(126,224,166,.07);color:#B5F0CC}
.sk-alert[hidden]{display:none}
.sk-dlg__actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin-top:6px}
.sk-dlg__actions .sk-btn{width:100%}
.sk-dlg__fine{margin:16px 0 0;color:var(--sk-faint);font:500 .74rem/1.5 var(--sk-sans);text-align:center}
.sk-smsbox{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.sk-smsbox button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 15px;border:1px solid var(--sk-line2);border-radius:14px;background:rgba(255,255,255,.03);color:var(--sk-cream);cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.sk-smsbox button:hover{border-color:rgba(245,209,111,.45);background:rgba(245,209,111,.06)}
.sk-smsbox small{color:var(--sk-faint);font:700 .6rem/1 var(--sk-sans);letter-spacing:.14em;text-transform:uppercase}
.sk-smsbox b{font:800 1.25rem/1 var(--sk-sans);letter-spacing:.04em}
.sk-smsbox em{color:var(--sk-faint);font:500 .7rem/1 var(--sk-sans);font-style:normal}
.sk-codein{width:100%;height:54px;margin:0 0 12px;padding:0 16px;border:1px solid var(--sk-line2);border-radius:12px;background:rgba(255,255,255,.035);color:var(--sk-cream);font:700 1.15rem/1 var(--sk-sans);letter-spacing:.14em;text-align:center;text-transform:uppercase;outline:0}
.sk-codein:focus{border-color:rgba(245,209,111,.6);box-shadow:0 0 0 4px rgba(245,209,111,.12)}
.sk-success{text-align:center;padding:10px 0 4px}
.sk-success .sk-dlg__visual{margin:0 auto 18px;width:110px;height:110px}
.sk-success .sk-dlg__visual svg{width:110px;height:110px}
.sk-success .sk-cube{width:110px;height:110px}
.sk-success .sk-cube canvas{animation:skCubeWin 1.1s cubic-bezier(.2,.7,.2,1) both;will-change:transform,opacity}
.sk-success .sk-dlg__visual::before{content:"";position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--m-glow,#F5D16F) 36%,transparent),transparent);animation:skHalo 1.2s ease-out both}
@keyframes skCubeWin{0%{opacity:0;transform:translateY(-46px) scale(.72)}55%{opacity:1;transform:translateY(4px) scale(1.04)}75%{transform:translateY(-3px)}100%{transform:none}}
.sk-success h2{margin-bottom:10px}
.sk-success p{margin:0 auto 22px;max-width:36ch;color:var(--sk-dim);font:400 .95rem/1.6 var(--sk-sans)}
html.sk-lock,html.sk-lock body{overflow:hidden}

/* ═══ TOASTS ═════════════════════════════════════════════════════════════ */
.sk-toasts{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:100070;display:grid;gap:8px;width:min(440px,calc(100vw - 32px));transform:translateX(-50%);pointer-events:none}
.sk-toast{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--sk-line2);border-radius:14px;background:rgba(16,16,23,.96);box-shadow:0 20px 50px rgba(0,0,0,.55);color:var(--sk-text);font:500 .88rem/1.45 var(--sk-sans);pointer-events:auto;animation:skToast .4s var(--sk-ease) both}
.sk-toast i{margin-top:2px;color:var(--sk-ok)}
.sk-toast[data-tone="err"]{border-color:rgba(255,139,122,.35)}
.sk-toast[data-tone="err"] i{color:var(--sk-err)}
.sk-toast.is-out{animation:skToastOut .3s ease both}
@keyframes skToast{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes skToastOut{to{opacity:0;transform:translateY(8px)}}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .sk-inv__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-trust__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:960px){
  .sk-hero{min-height:0;padding-top:112px}
  .sk-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "card" "more";row-gap:36px}
  .sk-player{max-width:520px;width:100%;justify-self:center}
  .sk-head--split{flex-direction:column;align-items:flex-start}
  .sk-faq__grid{grid-template-columns:minmax(0,1fr)}
  .sk-faq .sk-head{position:static}
  .sk-fund__grid{grid-template-columns:minmax(0,1fr)}
  .sk-sms{grid-template-columns:minmax(0,1fr);gap:18px}
  .sk-sms__phone{padding:8px 0 30px}
  .sk-sms__how{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:900px){
  body.sk{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .sk-toasts{bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){
  .sk-hero__title{font-size:clamp(2.55rem,11vw,3.2rem)}
  .sk-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .sk-steps li{border-right:0;margin:0;padding:0}
  .sk-hero__actions .sk-btn{flex:1 1 100%}
  .sk-player__stage{height:262px}
  .sk-player__figure,.sk-player__body{height:196px}
  .sk-player__form{padding:20px 18px 20px}
  .sk-paytabs{width:100%}
  .sk-paytabs button{flex:1;justify-content:center;padding:0 10px;font-size:.76rem}
  .sk-inv__grid{grid-template-columns:minmax(0,1fr)}
  .sk-slot{flex-direction:row;align-items:center;gap:14px;padding:14px}
  .sk-slot__frame{width:60px;height:60px;flex:none}
  .sk-slot__icon{width:40px;height:40px}
  .sk-slot__text{flex:1;min-width:0}
  .sk-slot__price{position:absolute;top:14px;right:14px;margin:0;font-size:.7rem}
  .sk-slot__price img{width:12px;height:12px}
  .sk-slot__text b{padding-right:92px}
  .sk-phone{width:min(100%,236px)}
  .sk-phone__key--power{top:118px;height:52px}
  .sk-phone__key--up{top:104px;height:32px}
  .sk-phone__key--down{top:142px;height:32px}
  .sk-phone__chip b{font-size:.8rem}
  .sk-smsrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"amt cost btn" "num num btn" "flag flag btn";gap:0 12px;padding:12px 12px 12px 18px}
  .sk-smsrow__amount{grid-area:amt;flex:none}
  .sk-smsrow__cost{grid-area:cost;flex:none;font-size:1.1rem}
  .sk-smsrow__num{grid-area:num;margin-top:6px}
  .sk-smsrow__flag{grid-area:flag;justify-self:start;margin-top:8px;padding:4px 8px;font-size:.54rem;letter-spacing:.08em}
  .sk-smsrow__btn{grid-area:btn;align-self:center}
  .sk-trust__list{grid-template-columns:minmax(0,1fr)}
  .sk-goal__nums b{font-size:1.6rem}
  .sk-dlg{align-items:end;padding:0}
  .sk-dlg__panel{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;transform:translateY(40px)}
  .sk-dlg__body{padding:26px 20px calc(22px + env(safe-area-inset-bottom))}
  .sk-dlg h2{font-size:1.5rem}
  .sk-dlg__actions{grid-template-columns:minmax(0,1fr)}
  .sk-dlg__actions .sk-btn--ghost{order:2}
  .sk-acct-field{width:100%}
  .sk-dlg__rows>div.is-acct{flex-direction:column;align-items:stretch}
  .sk-dlg__rows>div.is-acct dd{text-align:left}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEL PASS (agent `feel`) — one block, appended so it merges as a unit.
   Micro-details + motion system + card = identity + hand-off into the checkout.
   Transform/opacity only; loops pause while off-screen (.is-away from one IO).
   Shared primitives touched here (see REPORT.md): tokens, .sk-in/.sk-reveal
   (entrance choreography + .sk-stagger), .sk-head, .sk-kicker, .sk-btn, .sk-mini,
   .sk-chip, .sk-field, .sk-dlg shell, .sk-toast, coarse-pointer sizes.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--sk-out:cubic-bezier(.16,1,.3,1);--sk-spring:cubic-bezier(.34,1.45,.64,1);--sk-rk:#F5D16F}

/* ── entrance system: expo-out, heads choreographed, staggered lists ─────── */
.sk-in{animation-duration:1s;animation-timing-function:var(--sk-out)}
html.sk-js .sk-reveal{transition-duration:.9s,.9s;transition-timing-function:var(--sk-out),var(--sk-out)}
html.sk-js .sk-reveal:not(.is-in){transform:translateY(22px)}
/* scroll-time rule (lead 23:35, rev-feel M3): every scroll-time entrance is exactly ONE compositor layer — the block's
   wrapper (`.sk-reveal`) moves, nothing inside it animates separately (no kicker rule, no lead fade, no icon pops).
   Children animate only when the user acts (FAQ tab switch, dialogs) or when they are the 3 podium places. */
.sk-faq__panel.is-entering{animation:none}
.sk-faq__panel.is-entering .sk-faq__item{animation:skIn .5s var(--sk-out) backwards}
.sk-faq__panel.is-entering .sk-faq__item:nth-child(2){animation-delay:.05s}.sk-faq__panel.is-entering .sk-faq__item:nth-child(3){animation-delay:.1s}.sk-faq__panel.is-entering .sk-faq__item:nth-child(4){animation-delay:.15s}.sk-faq__panel.is-entering .sk-faq__item:nth-child(5){animation-delay:.2s}.sk-faq__panel.is-entering .sk-faq__item:nth-child(6){animation-delay:.25s}
.sk-hero__lead,.sk-faq__a p,.sk-success p,.sk-dlg__fine,.sk-trust__legal,.sk-slot__text span,.sk-top__empty{text-wrap:pretty}

/* ── buttons: spring press, arrow nudge, readable focus on gold ──────────── */
.sk-btn{transition:transform .25s var(--sk-spring),box-shadow .25s,border-color .25s,background-color .25s,color .25s}
.sk-btn:active{transform:translateY(1px) scale(.98);transition-duration:.08s}
.sk-btn--gold:active{box-shadow:0 8px 20px rgba(212,150,23,.2),inset 0 1px 0 rgba(255,255,255,.4)}
.sk-btn svg{transition:transform .35s var(--sk-out)}
.sk-hero__actions .sk-btn--gold:hover svg{transform:translateY(2px)}
.sk-btn--ghost:hover{transform:translateY(-1px)}
.sk-btn:focus-visible,.sk-main .sk-btn--gold:focus-visible,.sk-dlg .sk-btn--gold:focus-visible{outline:2px solid rgba(255,250,240,.92);outline-offset:3px}
.sk-mini{transition:border-color .2s,background .2s,transform .2s var(--sk-spring)}
.sk-mini:active{transform:scale(.96)}
.sk-chip{transition:border-color .25s,background .25s,color .25s,transform .25s var(--sk-spring)}
.sk-chip:active{transform:scale(.98)}
.sk-dlg :focus-visible{outline:2px solid rgba(245,209,111,.85);outline-offset:3px}
.sk-dlg .sk-linkbtn:focus-visible,.sk-dlg .sk-acct button:focus-visible{border-radius:6px}

/* ── nick field: check draws, avatar pops, invalid nudges on commit ──────── */
.sk-field__ok svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s var(--sk-out) .08s}
.sk-field[data-state="valid"] .sk-field__ok svg path,.sk-field[data-state="locked"] .sk-field__ok svg path{stroke-dashoffset:0}
.sk-field__icon img{animation:skPopIn .45s var(--sk-spring) both}
.sk-field.is-nudge{animation:skNudge .42s var(--sk-ease)}
@keyframes skPopIn{from{opacity:0;transform:scale(.5)}}
@keyframes skNudge{20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}

/* ── hero steps as progress: current step lit, done steps pop into a check ─ */
.sk-steps b{transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.sk-steps li.is-now b{border-color:var(--sk-gold);box-shadow:0 0 0 4px rgba(245,209,111,.12)}
.sk-steps li.is-done b{color:transparent;background:var(--sk-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140e03' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;animation:skPop .55s var(--sk-spring)}
@keyframes skPop{40%{transform:scale(1.22)}}

/* ── loops pause off-screen; the figure idles; the card leans to the cursor ─ */
.sk-hero.is-away .sk-hero__glow,.sk-hero.is-away .sk-status::before,.sk-hero.is-away .sk-player__figure,.sk-goal.is-away .sk-goal__meter i::after,.sk-top.is-away .sk-skel{animation-play-state:paused}
.sk-player__figure{animation:skBob 5.5s ease-in-out infinite;translate:calc(var(--px,0) * 7px) calc(var(--py,0) * 3px);transition:translate .7s var(--sk-out)}
.sk-player__plate{translate:calc(var(--px,0) * 4px) calc(var(--py,0) * 2px);transition:color .3s,translate .7s var(--sk-out)}
.sk-player__halo{translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 5px);transition:opacity .6s,translate .8s var(--sk-out)}
.sk-player__pedestal{translate:calc(var(--px,0) * 5px) calc(var(--py,0) * 1px);transition:translate .8s var(--sk-out)}
@keyframes skBob{50%{transform:translateY(-3px)}}

/* ── card = identity: rank tint (instant colour, opacity cross-fades only — rev-feel m12), tab-list prefix ─ */
:is(.sk-player,.sk-dock)[data-rank="vip"]{--sk-rk:#2ecc71}:is(.sk-player,.sk-dock)[data-rank="vipplus"]{--sk-rk:#3b8bff}:is(.sk-player,.sk-dock)[data-rank="mvp"]{--sk-rk:#35e0ff}:is(.sk-player,.sk-dock)[data-rank="mvpplus"]{--sk-rk:#b46dff}:is(.sk-player,.sk-dock)[data-rank="mvppp"]{--sk-rk:#f5d061}
.sk-player__halo::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sk-rk) 24%,transparent),color-mix(in srgb,var(--sk-rk) 6%,transparent) 60%,transparent);opacity:0;transition:opacity .9s}
.sk-player[data-rank] .sk-player__halo::after{opacity:1}
.sk-player[data-rank] .sk-player__pedestal{background:radial-gradient(closest-side,color-mix(in srgb,var(--sk-rk) 40%,transparent),color-mix(in srgb,var(--sk-rk) 11%,transparent) 62%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sk-rk) 32%,transparent)}
.sk-player[data-rank] .sk-player__pedestal::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sk-rk) 36%,transparent)}
.sk-player__rank{display:inline-block;margin-right:7px;padding:2px 6px 2px;border-radius:3px;background:color-mix(in srgb,var(--sk-rk) 24%,rgba(0,0,0,.5));color:var(--sk-rk);font:800 .7rem/1.2 var(--sk-sans);letter-spacing:.06em;vertical-align:1px;text-shadow:none;animation:skPopIn .45s var(--sk-spring) both}
.sk-player__rank[hidden]{display:none}
.sk-player.is-guest .sk-player__rank{opacity:.7}
.sk-pick{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--sk-line);display:grid;gap:8px}
.sk-pick[hidden]{display:none}
.sk-pick__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;animation:skIn .5s var(--sk-out) backwards}
.sk-pick__row[hidden]{display:none}
.sk-pick__k{color:var(--sk-faint);font:700 .62rem/1 var(--sk-sans);letter-spacing:.16em;text-transform:uppercase}
.sk-pick__v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sk-cream);font:600 .86rem/1.3 var(--sk-sans)}
.sk-pick__v b{color:var(--sk-gold);font-weight:700}
.sk-pick__t{display:inline-block;animation:skSwap .45s var(--sk-out)}
/* identity dock: the nameplate travels to where the choice is made — docked under the header (desktop) / above the bottom
   nav, left of the back-to-top ring (phone); shown only while the card is off-screen and a choice exists; hidden while a
   dialog is open (html.sk-lock); transform/opacity only; it is also the origin of the checkout it opens */
.sk-dock{position:fixed;z-index:900;top:89px;right:max(16px,calc((100vw - 1240px) / 2));display:flex;align-items:center;gap:12px;max-width:min(460px,calc(100vw - 32px));padding:7px 7px 7px 10px;border:1px solid var(--sk-goldline);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),rgba(14,14,21,.97);box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);color:var(--sk-text);font:600 .84rem/1.2 var(--sk-sans);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .35s var(--sk-out),transform .5s var(--sk-out)}
.sk-dock.is-on{opacity:1;transform:none;pointer-events:auto}
html.sk-lock .sk-dock{opacity:0;transform:translateY(-6px);pointer-events:none}
.sk-dock__id{display:flex;align-items:center;gap:8px;min-width:0;flex:none}
.sk-dock__id img{width:26px;height:26px;border-radius:6px;image-rendering:pixelated;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.sk-dock__id img[hidden]{display:none}
.sk-dock__rank{display:none;padding:2px 6px;border-radius:3px;background:color-mix(in srgb,var(--sk-rk) 24%,rgba(0,0,0,.5));color:var(--sk-rk);font:800 .66rem/1.2 var(--sk-sans);letter-spacing:.06em}
.sk-dock[data-rank] .sk-dock__rank{display:inline-block}
.sk-dock__nick{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sk-cream);font-weight:700}
.sk-dock__pick{min-width:0;flex:1 1 auto;padding-left:12px;border-left:1px solid var(--sk-line);color:var(--sk-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-dock__pick b{color:var(--sk-gold)}
.sk-dock__pick.is-bought{color:var(--sk-ok)}
.sk-dock__stamp{display:inline-block;animation:skStamp .5s var(--sk-spring)}
.sk-dock .sk-pick__go{flex:none}
.sk-dock .sk-pick__go[hidden]{display:none}
.sk-pick__go{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px 0 12px;border:1px solid var(--sk-goldline);border-radius:9px;background:rgba(245,209,111,.06);color:var(--sk-gold);font:700 .74rem/1 var(--sk-sans);cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--sk-spring)}
.sk-pick__go:hover{background:rgba(245,209,111,.12);border-color:rgba(245,209,111,.45)}
.sk-pick__go:active{transform:scale(.97)}
.sk-pick__go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--sk-out)}
.sk-pick__go:hover svg{transform:translateX(2px)}
.sk-pick__go[hidden]{display:none}
.sk-pick__row.is-bought dd{color:var(--sk-ok)}
@keyframes skSwap{from{opacity:0;transform:translateY(6px)}}

/* ── cosmetics: /uc is a real button (copies the command), slots stagger ──── */
.sk-cmd{border:0;background:none;padding:0;cursor:pointer}
.sk-cmd kbd{transition:transform .15s var(--sk-ease),border-bottom-width .15s,background .2s}
.sk-cmd:hover kbd{background:rgba(245,209,111,.13)}
.sk-cmd:active kbd,.sk-cmd.is-pressed kbd{transform:translateY(2px);border-bottom-width:1px}
.sk-cmd:focus-visible{outline:0}
.sk-cmd:focus-visible kbd{outline:2px solid rgba(245,209,111,.85);outline-offset:3px}
.sk-slot{transition:border-color .3s,transform .35s var(--sk-spring),background .3s}
.sk-cmd small{display:inline-flex;align-items:center;gap:5px;margin-left:2px;color:var(--sk-faint);font:600 .68rem/1 var(--sk-sans);letter-spacing:.04em;transition:color .2s}
.sk-cmd small i{font-size:.72rem}
.sk-cmd:hover small{color:var(--sk-dim)}

/* ── fund: meter scales (no width animation), numbers/podium choreographed ── */
.sk-goal__meter i{width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform 1.6s var(--sk-out)}
/* podium: three small places rise 3 → 2 → 1 (winner last); the top list arrives as one layer */
html.sk-js .sk-top.sk-reveal:not(.is-in) :is(.sk-podium li,.sk-toplist){opacity:0}
.sk-top.is-in .sk-podium li{animation:skRise .8s var(--sk-out) backwards}
.sk-top.is-in .sk-podium li[data-place="3"]{animation-delay:.05s}.sk-top.is-in .sk-podium li[data-place="2"]{animation-delay:.18s}.sk-top.is-in .sk-podium li[data-place="1"]{animation-delay:.34s}
.sk-top.is-in .sk-toplist{animation:skIn .6s var(--sk-out) .4s backwards}
@keyframes skRise{from{opacity:0;transform:translateY(22px)}}
.sk-podium .is-skel .sk-place{background:rgba(255,255,255,.06)}
.sk-skel--av{width:48px;height:48px;border-radius:9px}
.sk-skel--av.is-big{width:60px;height:60px}
.sk-skel--t{display:block;width:64%;max-width:150px;height:12px;flex:0 1 auto}
.sk-skel--s{display:block;width:40%;max-width:80px;height:10px}
.sk-skel--mini{width:26px;height:26px;border-radius:6px}
.sk-toplist .is-skel{gap:12px}
.sk-toplist .is-skel .sk-skel--t{flex:1}

/* ── FAQ: question leans on hover, answer fades in ───────────────────────── */
.sk-faq__item summary span{transition:translate .3s var(--sk-out)}
.sk-faq__item summary:hover span{translate:3px 0}
.sk-faq__item[open] .sk-faq__a p{animation:skIn .45s var(--sk-out) .05s backwards}

/* ── checkout shell: grows from the trigger, rows settle in, account stamps ─ */
.sk-dlg__backdrop{transition:opacity .35s}
.sk-dlg__panel{transform-origin:var(--ox,50%) var(--oy,50%);transform:translateY(12px) scale(.9);transition:opacity .32s var(--sk-out),transform .55s var(--sk-out)}
.sk-dlg.is-open .sk-dlg__panel{transform:none}
.sk-dlg.is-closing .sk-dlg__panel{transition-duration:.2s,.26s;transform:translateY(6px) scale(.96)}
.sk-dlg.is-dragging .sk-dlg__panel,.sk-dlg.is-dragging .sk-dlg__backdrop{transition:none}
.sk-dlg__close{top:12px;right:12px;width:44px;height:44px;transition:background .2s,color .2s,transform .35s var(--sk-spring)}
.sk-dlg__close:hover{transform:rotate(90deg)}
.sk-dlg__close:active{transform:rotate(90deg) scale(.92)}
.sk-dlg__grab{display:none}
/* the body assembles in reading order: every direct child gets --i from its DOM position (set by renderDialog), so any
   view — including other agents' extra rows — builds top → bottom; the account row stamps a beat after its block */
.sk-dlg__body>*{animation:skIn .5s var(--sk-out) backwards;animation-delay:calc(var(--i,0) * 55ms + 40ms)}
.sk-dlg__body>.sk-success{animation:none}
.sk-acct{animation:skStamp .55s var(--sk-spring) backwards;animation-delay:calc(var(--i,0) * 55ms + 220ms)}
.sk-dlg.is-settled :is(.sk-dlg__body>*,.sk-acct){animation:none}
.sk-dlg__body{transition:opacity .12s}
.sk-dlg.is-swapping .sk-dlg__body{opacity:0}
.sk-alert:not([hidden]){animation:skIn .3s var(--sk-out)}
.sk-dlg__rows .is-total dd,.sk-dlg__rows .is-price dd,.sk-roll{font-variant-numeric:tabular-nums}
@keyframes skStamp{from{opacity:0;transform:scale(1.25)}}
/* duration switch: one sliding pill instead of a re-render */
.sk-dlg .sk-seg{position:relative;display:flex;margin:0 0 16px;padding:4px;border:1px solid var(--sk-line2);border-radius:14px;background:rgba(255,255,255,.025);isolation:isolate}
.sk-dlg .sk-seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;z-index:-1;width:calc(50% - 4px);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(245,209,111,.35),0 6px 18px rgba(0,0,0,.35);transform:translateX(var(--seg,0));transition:transform .45s var(--sk-out)}
.sk-dlg .sk-seg[data-on="2"]{--seg:100%}
.sk-dlg .sk-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--sk-dim);font:700 .82rem/1 var(--sk-sans);cursor:pointer;transition:color .25s}
.sk-seg button[aria-checked="true"]{color:var(--sk-cream)}
/* success: the visual rises on the card's beam + halo, a few crisp pixel sparks */
.sk-success{position:relative;padding:14px 0 4px}
.sk-success .sk-dlg__visual{animation:skRiseVis .9s var(--sk-out) .08s backwards}
.sk-success .sk-dlg__visual::before{inset:-36px;animation:skHalo 1.4s ease-out .08s both}
/* feathered light (rev-feel m4): a soft radial cone masked at both ends — no hard clip edges, no cut by the panel */
.sk-success__beam{position:absolute;left:50%;top:-6px;width:260px;height:220px;margin-left:-130px;background:radial-gradient(50% 60% at 50% 62%,rgba(255,236,180,.22),rgba(255,236,180,.08) 55%,transparent 80%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 35%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 35%,#000 70%,transparent 100%);opacity:0;transform-origin:50% 100%;transform:scaleY(.2);animation:skBeam 1.25s ease-out .02s both;pointer-events:none}
.sk-success__sparks{position:absolute;left:50%;top:78px;width:0;height:0;pointer-events:none}
.sk-success__sparks i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;background:var(--sk-gold);box-shadow:0 0 0 1px rgba(20,14,3,.55);opacity:0;animation:skSpark 1.15s var(--sk-out) var(--d,0s) both}
.sk-dlg[data-mode="success"] .sk-dlg__panel{display:flex;flex-direction:column}
.sk-dlg[data-mode="success"] .sk-dlg__body{flex:1;display:flex;flex-direction:column}
.sk-dlg[data-mode="success"] .sk-success{margin:auto 0}
.sk-success h2{animation:skIn .6s var(--sk-out) .34s backwards}
.sk-success p{animation:skIn .6s var(--sk-out) .44s backwards}
.sk-success .sk-btn{animation:skIn .6s var(--sk-out) .54s backwards}
@keyframes skRiseVis{from{opacity:0;transform:translateY(28px) scale(.9)}}
@keyframes skSpark{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1)}}

/* ── toasts: spring in, icon pops ─────────────────────────────────────────── */
.sk-toast{animation:skToast .5s var(--sk-spring) both}
.sk-toast i{animation:skPopIn .45s var(--sk-spring) .12s both}
.sk-toast.is-out{animation:skToastOut .28s var(--sk-ease) both}

/* ── mobile ergonomics: tap targets, bottom nav clearance, sheet + grabber ── */
@media (pointer:coarse){
  .sk-btn--sm{--h:46px}
  .sk-mini{min-height:44px}
  .sk-chip,.sk-faq__tabs button,.sk-paytabs button,.sk-cmd{min-height:44px}
  .sk-inline input{height:46px}
  .sk-player__codes{min-height:44px;margin-top:4px}
  .sk-player__login a,.sk-lead a,.sk-trust__legal a{display:inline-block;padding:13px 0;margin:-13px 0}
  .sk-acct button{padding:12px 8px;margin:-12px -8px}
  .sk-linkbtn{padding:12px 0;margin:-12px 0}
  .sk-pick__go{min-height:44px}
  /* the armoury card's own controls (shop-scoped override, armoury modules untouched): 30 dni / Na stałe / Doładuj saldo */
  .sk-ranks .ta-bill button{min-height:44px}
  .sk-ranks .ta-note a{display:inline-block;padding:13px 0;margin:-13px 0}
}
@media (max-width:900px){
  body.sk{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .sk-toasts{bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){
  .sk-dlg__panel{transform-origin:50% 100%;transform:translateY(48px)}
  .sk-dlg.is-closing .sk-dlg__panel{transform:translateY(40px)}
  .sk-dlg__grab{display:block;position:sticky;top:0;z-index:3;height:30px;margin-bottom:-14px;background:linear-gradient(180deg,#0E0E15 55%,transparent);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
  .sk-dlg__grab i{position:absolute;left:50%;top:10px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,255,255,.22)}
  .sk-dlg.is-dragging .sk-dlg__grab{cursor:grabbing}
  .sk-dlg__body{padding-top:18px}
  .sk-dlg__close{top:14px;right:12px}
  .sk-player__rank{font-size:.64rem}
  .sk-player__plate{top:10px}
  .sk-pick__row{grid-template-columns:auto minmax(0,1fr)}
  .sk-pick__go{grid-column:1/-1;justify-self:start}
  .sk-success__beam{top:-12px}
}
@media (max-width:900px){
  .sk-dock{top:auto;bottom:calc(92px + env(safe-area-inset-bottom));left:12px;right:84px;max-width:none;transform:translateY(10px)}
  .sk-dock__nick{max-width:96px}
}
/* lead (merge): phone dock — the nick lives on the card; the dock keeps avatar + rank badge + price, never a clipped label */
.sk-dock__stamp{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
@media (max-width:600px){.sk-dock__nick,.sk-dock__sub{display:none}}
/* lead (merge) — rev-topup N2–N4, N8 */
/* N2 the phone holds still under the hand (hover / focus / touch) so the chips and „Mam kod” are not moving targets */
.sk-phone:is(:hover,:focus-within) .sk-phone__float{animation-play-state:paused}
/* N3 + N4 in-phone „Mam kod”: 44 px tap target and a visibly enabled emerald state; the step-4 light stays the emphasis */
.sk-phone__cta{padding:17px 12px;color:var(--em-soft);box-shadow:inset 0 0 0 1px rgba(var(--em-rgb),.42)}
.sk-phone__cta span{transition:opacity .45s}
.sk-phone[data-step="4"] .sk-phone__cta span{opacity:0}
/* N8 the emerald SMS dialog has no gold focus ring left */
#skCheckout[data-flow="sms"] .sk-field:focus-within{border-color:rgba(46,204,113,.6);box-shadow:0 0 0 4px rgba(46,204,113,.14)}
/* lead (merge): the dock steps aside where it would cover the page's own controls — #topup has its own price + CTA, and a
   focused field (the phone keyboard pushes a bottom bar over the input) */
html.sk-topup-in .sk-dock,body:has(:is(input,textarea):focus) .sk-dock{opacity:0;transform:translateY(10px);pointer-events:none}
/* ═══ VISUAL POLISH 2026-10-19 (lead) ═══ */
/* funding: the goal and the activity feed share the left column, the supporters card the right one — no half-empty goal card */
@media (min-width:901px){
  .sk-fund__grid{grid-template-areas:"goal top" "feed top";grid-template-rows:auto minmax(0,1fr)}
  /* the feed takes only the height the supporters card leaves (size containment) and shows as many entries as fit */
  .sk-feed{display:flex;flex-direction:column;contain:size;min-height:212px}
  .sk-feed__list{flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
  .sk-goal{grid-area:goal}
  .sk-top{grid-area:top}
  .sk-feed{grid-area:feed;grid-column:auto}
  .sk-feed__list{grid-template-columns:minmax(0,1fr);gap:0}
  .sk-feed__list li{padding:9px 2px;border-top:1px solid var(--sk-line)}
  .sk-fund__grid:not(:has(>.sk-feed:not([hidden]))) .sk-goal{grid-row:1/-1;display:flex;flex-direction:column}
  .sk-fund__grid:not(:has(>.sk-feed:not([hidden]))) .sk-goal>.sk-btn{margin-top:auto;align-self:flex-start}
  .sk-fund__grid:has(>.sk-top[hidden]){grid-template-columns:minmax(0,1fr);grid-template-areas:"goal" "feed"}
}
/* supporters: the empty month keeps its podium (three free places) with the invitation centred under it */
.sk-top__empty{margin:4px 0 0;text-align:center;color:var(--sk-dim)}
/* creator code: the empty seal spot reads as an embossed impression instead of a 7 % ghost */
.sk-seal__spot::before{border-color:rgba(180,109,255,.5)}
.sk-seal__spot::after{opacity:0}
.sk-seal__spot::before{display:grid;place-items:center;content:"%";color:rgba(180,109,255,.62);font:900 1.7rem/1 var(--sk-num)}
/* voucher stub: an empty value is a muted dash until a code is redeemed */
.sk-ticket:not(.is-stamped) .sk-ticket__value{color:rgba(245,209,111,.5)}
/* referral: the friend is an open slot (dashed frame + plus) until the link is sent — no grey placeholder head */
.sk-invite__head.is-friend .sk-invite__face{position:relative;background:linear-gradient(rgba(245,209,111,.7),rgba(245,209,111,.7)) 50%/16px 2px no-repeat,linear-gradient(rgba(245,209,111,.7),rgba(245,209,111,.7)) 50%/2px 16px no-repeat,rgba(245,209,111,.03);box-shadow:none}
.sk-invite__head.is-friend .sk-invite__face::after{content:"";position:absolute;inset:0;border:1px dashed rgba(245,209,111,.42);border-radius:inherit;pointer-events:none;transition:opacity .4s}
.sk-invite__head.is-friend img{opacity:0}
.sk-invite.is-sent .sk-invite__head.is-friend .sk-invite__face{background:rgba(255,255,255,.04)}
.sk-invite.is-sent .sk-invite__head.is-friend .sk-invite__face::after{opacity:0}
/* checkout: the actions stay in reach when the dialog is taller than the screen (gift + creator code open) */
.sk-dlg__actions{position:sticky;bottom:0;z-index:3;margin:6px -30px 0;padding:14px 30px 16px;background:linear-gradient(180deg,rgba(14,14,21,0),#0E0E15 16px)}
@media (max-width:600px){.sk-dlg__actions{margin-inline:-20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom))}}
/* the floating back-to-top covered right-aligned amounts on phones and the armoury card on desktop */
@media (max-width:600px){#titanBackToTop,#backToTop,.back-to-top{display:none!important}.sk-dock{right:12px}}
html.sk-arm-in #titanBackToTop,html.sk-arm-in #backToTop,html.sk-arm-in .back-to-top{opacity:0!important;pointer-events:none!important;transition:opacity .3s!important}
/* armoury: readable hint; on phones the icon sits above the centred two-line text instead of far left */
.sk-ranks .ta-hint{color:rgba(237,233,225,.58)}
.sk-ranks .ta-rail em{color:rgba(237,233,225,.66)}
@media (max-width:600px){.sk-ranks .ta-hint{flex-direction:column;gap:8px;text-align:center}.sk-ranks .ta-rail em{font-size:11px}}
/* compare (phone): the sticky rank picker slides under the buy dock instead of covering its period switch */
.sk-cmp-dock{position:relative;z-index:6;background-color:var(--sk-surface)}
/* no label under 10 px */
.sk-cmp .sk-cmp-row>td.is-pick .sk-cmp-chip{font-size:.64rem}
.sk-cmp-dock__kick{font-size:.66rem}
@media (max-width:380px){.sk-paytabs button{padding:0 8px;font-size:.72rem;letter-spacing:0}}
/* supporters card: an invitation closes the list (bottom-aligned when the card is stretched) */
.sk-top{display:flex;flex-direction:column}
.sk-top__more{margin:auto 0 0;padding-top:16px;color:var(--sk-faint);font:500 .8rem/1.45 var(--sk-sans);text-align:center}
.sk-top__more a{color:var(--sk-gold);font-weight:700;text-decoration:underline;text-decoration-color:rgba(245,209,111,.35);text-underline-offset:3px}
.sk-top__more a:hover{text-decoration-color:currentColor}
.sk-top__empty:not([hidden])~.sk-top__more{display:none}
/* ═══ VISUAL POLISH 2026-10-19, part 2 ═══ */
/* the checkout scroller keeps focused fields and messages clear of the sticky actions */
.sk-dlg__panel{scroll-padding-bottom:96px}
@media (max-width:600px){.sk-dlg__panel{scroll-padding-bottom:150px}}
/* keyboard: the /uc copy button had no focus ring */
.sk-cmd:focus-visible{outline:2px solid var(--sk-gold);outline-offset:3px}
/* ═══ OPUS REVIEW FIXES 2026-10-19 ═══ */
@media (pointer:coarse){.sk-cmp .sk-seg button{min-height:44px}}
/* #2 armoury price: Cinzel's "1" is a bare serif I ("I 47") — the page's condensed price numerals instead */
.sk-ranks .ta-num{font-family:var(--sk-num);font-weight:900;font-stretch:condensed;letter-spacing:-.01em}
/* #3 the creator-code discount is visible at the money moment */
.sk-dlg__rows dt{white-space:nowrap}
.sk-dlg__rows .is-price dd s{margin-right:8px;color:var(--sk-faint);font-size:.62em;-webkit-text-fill-color:currentColor;text-decoration-thickness:1px}
/* #4 empty podium places = open slots (same language as the referral friend), not three grey Steve heads */
.sk-podium__slot{display:block;width:48px;height:48px;border:1px dashed rgba(245,209,111,.42);border-radius:9px;background:linear-gradient(rgba(245,209,111,.7),rgba(245,209,111,.7)) 50%/14px 2px no-repeat,linear-gradient(rgba(245,209,111,.7),rgba(245,209,111,.7)) 50%/2px 14px no-repeat,rgba(245,209,111,.03)}
.sk-podium li[data-place="1"] .sk-podium__slot{width:60px;height:60px}
.sk-podium li.is-free b{color:var(--sk-dim)}
.sk-podium li.is-free span:not(.sk-place){color:var(--sk-faint)}
/* #5 checkout creator-code row: field + button side by side */
.sk-inline{display:flex;gap:8px;align-items:stretch}
.sk-inline input{flex:1 1 0;min-width:0;width:auto}
.sk-inline .sk-btn{flex:none}
/* #6 author display rules must never resurrect a hidden funding card */
.sk-fund__grid>[hidden]{display:none!important}
/* #8 #9 focus: no ring around the whole panel on open, no second ring on fields that have their own */
.sk-dlg .sk-dlg__panel:focus-visible{outline:0}
.sk-dlg :is(input,textarea):focus-visible{outline:0}
.sk-sub textarea{resize:none}
/* #11 phones: the rank name's glow was clipped into a hard box */
@media (max-width:900px){.sk-ranks .ta-name span{filter:none}}
/* #12 armoury overlay, promise tiles and phone rail on the page grid (1240 px wrap + the page gutter) */
@media (min-width:901px){
  .sk-ranks .ta-info{left:max(clamp(16px,4vw,48px),calc(50% - 620px))}
  .sk-ranks .ta-card{right:max(clamp(16px,4vw,48px),calc(50% - 620px))}
}
.sk-ranks .ta-trust{max-width:none;width:auto;padding:0}   /* its parent is already the page wrap */
.sk-ranks .ta-trust li{border-radius:var(--sk-r)}
@media (max-width:560px){.sk-ranks .ta-rail{margin-inline:16px}}
@media (max-width:1100px){.sk-crown__kick{font-size:.6rem}}
/* #14 command chips wrap as whole units */
.sk-cmp-label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
/* #15 phone cosmetics: bar stacks, price under the text instead of squeezing the title */
@media (max-width:600px){
  .sk-inv__bar{flex-direction:column;align-items:flex-start;gap:6px}
  .sk-slot{flex-wrap:wrap}
  .sk-slot__price{position:static;flex-basis:100%;margin:-2px 0 0 74px}
  .sk-slot__text b{padding-right:0}
}
/* #16 phone FAQ tabs: two even rows instead of a lone last tab */
@media (max-width:600px){.sk-faq__tabs{display:grid;grid-template-columns:1fr 1fr}.sk-faq__tabs button{padding:0 10px}}
/* #17 narrow phones: funding stats and podium names fit */
@media (max-width:400px){.sk-goal__nums{gap:8px}.sk-goal__nums span{letter-spacing:.06em}.sk-podium{gap:6px}.sk-podium li{padding-inline:4px}.sk-podium b{font-size:.78rem}}
/* #18 phones: toasts at the top, never over the card that already confirms inline */
@media (max-width:600px){.sk-toasts{top:calc(70px + env(safe-area-inset-top));bottom:auto}}
/* #22 tablet: the player card aligns with the left-aligned hero copy */
@media (min-width:601px) and (max-width:960px){.sk-player{justify-self:start}}
/* #23 armoury hint breaks only at the separator; trust lines wrap evenly */
.sk-ranks .ta-hint em{font-style:normal;white-space:nowrap}
.sk-trust__list span{text-wrap:pretty}
/* #24 faint micro-labels at 11 px */
.sk-goal__nums span,.sk-goal__label,.sk-cmp-corner__label,.sk-cmp-price__label{font-size:.7rem}
.sk-ranks .ta-card-sub{font-size:11px}
/* the mini cart steps aside over the armoury too (its own CTA is right there; on desktop the dock sat on the perks card) */
html.sk-arm-in .sk-dock{opacity:0;transform:translateY(-6px);pointer-events:none}
@media (max-width:900px){html.sk-extras-in .sk-dock{opacity:0;transform:translateY(10px);pointer-events:none}}

/* compare: generated by src/hooks.mjs from data.mjs */
#compare tr>:nth-child(2){--c:46,204,113;--cp:46,204,113;--cn:59,139,255;--k:0;--gem:var(--gem-vip)}
.sk-cmp[data-hover="0"] tr[data-new~="0"]>th{color:var(--sk-cream)}
.sk-cmp[data-hover="0"] tr[data-new~="0"]>th::before{background:rgb(46,204,113);transform:none}
.sk-cmp[data-hover="0"] .sk-cmp-crowns>:nth-child(2) .sk-crown__bust{transform:translateY(-5px) scale(1.05)}
.sk-cmp[data-hover="0"] .sk-cmp-crowns>:nth-child(2) .sk-crown__glow{opacity:1}
.sk-cmp[data-hover="0"] .sk-cmp-crowns>:nth-child(2) .sk-crown__new{border-color:rgba(46,204,113,.55);background:rgba(46,204,113,.1);color:var(--sk-cream)}
#compare tr>:nth-child(3){--c:59,139,255;--cp:46,204,113;--cn:53,224,255;--k:1;--gem:var(--gem-vipplus)}
.sk-cmp[data-hover="1"] tr[data-new~="1"]>th{color:var(--sk-cream)}
.sk-cmp[data-hover="1"] tr[data-new~="1"]>th::before{background:rgb(59,139,255);transform:none}
.sk-cmp[data-hover="1"] .sk-cmp-crowns>:nth-child(3) .sk-crown__bust{transform:translateY(-5px) scale(1.05)}
.sk-cmp[data-hover="1"] .sk-cmp-crowns>:nth-child(3) .sk-crown__glow{opacity:1}
.sk-cmp[data-hover="1"] .sk-cmp-crowns>:nth-child(3) .sk-crown__new{border-color:rgba(59,139,255,.55);background:rgba(59,139,255,.1);color:var(--sk-cream)}
#compare tr>:nth-child(4){--c:53,224,255;--cp:59,139,255;--cn:180,109,255;--k:2;--gem:var(--gem-mvp)}
.sk-cmp[data-hover="2"] tr[data-new~="2"]>th{color:var(--sk-cream)}
.sk-cmp[data-hover="2"] tr[data-new~="2"]>th::before{background:rgb(53,224,255);transform:none}
.sk-cmp[data-hover="2"] .sk-cmp-crowns>:nth-child(4) .sk-crown__bust{transform:translateY(-5px) scale(1.05)}
.sk-cmp[data-hover="2"] .sk-cmp-crowns>:nth-child(4) .sk-crown__glow{opacity:1}
.sk-cmp[data-hover="2"] .sk-cmp-crowns>:nth-child(4) .sk-crown__new{border-color:rgba(53,224,255,.55);background:rgba(53,224,255,.1);color:var(--sk-cream)}
#compare tr>:nth-child(5){--c:180,109,255;--cp:53,224,255;--cn:245,208,97;--k:3;--gem:var(--gem-mvpplus)}
.sk-cmp[data-hover="3"] tr[data-new~="3"]>th{color:var(--sk-cream)}
.sk-cmp[data-hover="3"] tr[data-new~="3"]>th::before{background:rgb(180,109,255);transform:none}
.sk-cmp[data-hover="3"] .sk-cmp-crowns>:nth-child(5) .sk-crown__bust{transform:translateY(-5px) scale(1.05)}
.sk-cmp[data-hover="3"] .sk-cmp-crowns>:nth-child(5) .sk-crown__glow{opacity:1}
.sk-cmp[data-hover="3"] .sk-cmp-crowns>:nth-child(5) .sk-crown__new{border-color:rgba(180,109,255,.55);background:rgba(180,109,255,.1);color:var(--sk-cream)}
#compare tr>:nth-child(6){--c:245,208,97;--cp:180,109,255;--cn:245,208,97;--k:4;--gem:var(--gem-mvppp)}
.sk-cmp[data-hover="4"] tr[data-new~="4"]>th{color:var(--sk-cream)}
.sk-cmp[data-hover="4"] tr[data-new~="4"]>th::before{background:rgb(245,208,97);transform:none}
.sk-cmp[data-hover="4"] .sk-cmp-crowns>:nth-child(6) .sk-crown__bust{transform:translateY(-5px) scale(1.05)}
.sk-cmp[data-hover="4"] .sk-cmp-crowns>:nth-child(6) .sk-crown__glow{opacity:1}
.sk-cmp[data-hover="4"] .sk-cmp-crowns>:nth-child(6) .sk-crown__new{border-color:rgba(245,208,97,.55);background:rgba(245,208,97,.1);color:var(--sk-cream)}
@media (min-width:720px){.sk-cmp tbody tr>:nth-child(5),.sk-cmp tfoot tr>:nth-child(5){background-color:rgba(180,109,255,.03)}}
.sk-box.is-3d .sk-box__f--front{left:calc(var(--px) * -8);top:calc(var(--px) * -4);transform-origin:50% 50%;transform:translateZ(calc(var(--px) * 8))}
.sk-box:not(.is-3d) .sk-box__f--front{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * -11.2294),calc(var(--px) * -3.0934)) matrix(0.788,0.2504,0,0.9135,0,0)}
.sk-box.is-3d .sk-box__f--right{left:calc(var(--px) * -8);top:calc(var(--px) * -4);transform-origin:50% 50%;transform:translateX(calc(var(--px) * 8)) rotateY(90deg)}
.sk-box:not(.is-3d) .sk-box__f--right{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * 1.3788),calc(var(--px) * 0.9132)) matrix(0.6157,-0.3205,0,0.9135,0,0)}
.sk-box.is-3d .sk-box__f--ltop{left:calc(var(--px) * -8);top:calc(var(--px) * 0);transform-origin:50% 0%;transform:rotateX(90deg)}
.sk-box:not(.is-3d) .sk-box__f--ltop{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * -1.3788),calc(var(--px) * -10.9622)) matrix(0.788,0.2504,-0.6157,0.3205,0,0)}
.sk-box.is-3d .sk-box__f--lfront{left:calc(var(--px) * -8);top:calc(var(--px) * 0);transform-origin:50% 50%;transform:translateZ(calc(var(--px) * 16))}
.sk-box:not(.is-3d) .sk-box__f--lfront{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * -11.2294),calc(var(--px) * -5.834)) matrix(0.788,0.2504,0,0.9135,0,0)}
.sk-box.is-3d .sk-box__f--lright{left:calc(var(--px) * -8);top:calc(var(--px) * 0);transform-origin:50% 50%;transform:translate3d(calc(var(--px) * 8),0px,calc(var(--px) * 8)) rotateY(90deg)}
.sk-box:not(.is-3d) .sk-box__f--lright{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * 1.3788),calc(var(--px) * -1.8274)) matrix(0.6157,-0.3205,0,0.9135,0,0)}
.sk-box.is-3d .sk-box__bow{left:calc(var(--px) * -8);top:calc(var(--px) * -16);transform-origin:50% 50%;transform:translateZ(calc(var(--px) * 8))}
.sk-box:not(.is-3d) .sk-box__bow{display:none}
.sk-box.is-3d .sk-box__bow--x{left:calc(var(--px) * -8);top:calc(var(--px) * -16);transform-origin:50% 50%;transform:translateZ(calc(var(--px) * 8)) rotateY(90deg)}
.sk-box:not(.is-3d) .sk-box__bow--x{display:none}
.sk-box.is-3d .sk-box__bowh--fl{display:none}
.sk-box:not(.is-3d) .sk-box__bowh--fl{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * -6.3041),calc(var(--px) * -23.0148)) matrix(0.788,0.2504,0,0.9135,0,0)}
.sk-box.is-3d .sk-box__bowh--xb{display:none}
.sk-box:not(.is-3d) .sk-box__bowh--xb{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * 0),calc(var(--px) * -21.0115)) matrix(0.6157,-0.3205,0,0.9135,0,0)}
.sk-box.is-3d .sk-box__bowh--fr{display:none}
.sk-box:not(.is-3d) .sk-box__bowh--fr{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * 0),calc(var(--px) * -21.0115)) matrix(0.788,0.2504,0,0.9135,0,0)}
.sk-box.is-3d .sk-box__bowh--xf{display:none}
.sk-box:not(.is-3d) .sk-box__bowh--xf{left:0;top:0;transform-origin:0 0;transform:translate(calc(var(--px) * -4.9253),calc(var(--px) * -18.4474)) matrix(0.6157,-0.3205,0,0.9135,0,0)}
#compare{--gem-vip:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAZElEQVR42mNgoBXgtpL+j4xJ1pz0bvL/R//fgGnFQ1HEG4KuGWaAcIsVcYbADEDWTLQBuDTDDCBoCLIByJpJNgBd8xAzAKQIl2aiYwLdEKI1IxsAM4Qk27EZAtNIVn4gOzORAgBp2N/g/oTgdQAAAABJRU5ErkJggg==);--gem-vipplus:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAf0lEQVR42mNgGJSASzroPzomSbO0zTww1k26A8dEGQTTDNMUP/U/HCMbRLTmy48hGNkAkBqshiAb8OxwDIoLkL2C1QBc/kbGMENh6lAMQXc+zHZsBhFlAMz/2JyP1wB0Q9C9gFUzseGA03b01IduCLpGohITskFEa8SXH2ia8QCRVh/8iP2XlAAAAABJRU5ErkJggg==);--gem-mvp:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYUlEQVR42mNgGHSAw9n7Pz5MUPOi7//hAMQGYYs7r8BYdM5q3IYga4ZpRDcApyEwzbg0oRuAYQiIA5PApRFZM05XEGsA3nDAZQhBzfgMIVozNkNI1owtYEnWjJ4qGYY3AAC4Qv8cOQgpHQAAAABJRU5ErkJggg==);--gem-mvpplus:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeUlEQVR42mNgoBXQ4vP/D8Nkab6w4P//b6//g2mSDUE3YGHcJ+INwaaZKgZk6W4mzhCYAcia0Q3AGrjIgjBDsBkAk0MxANnZyNGHzQtYAxVdMS4DQBhnoGIzBJcBWAMUm63oGGYIztiAGYLuXBifoAHY8gE2zDCoAACiEijsrA3iqgAAAABJRU5ErkJggg==);--gem-mvppp:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAUklEQVR42mNgGAV4gZchy398mKDm/w+q/v//fh6CQWwkvKKEH7chKJrRNBKvGQcGacZpAEjwzW49vBinAcRohhlAkWacBsAkCWGcficWD8PkDgDwB+thSsDx6gAAAABJRU5ErkJggg==)}
#extras{--gift-front:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA4UlEQVR42oWTOw4CMQxE3SAkPgUIhISADmouwEWoOQ1H4CQcA4mT0NAGTaS3ml3AW3iddZzxjOPEanYo2HS0qH44GJfyurdMMe3Np5uyXR6raR0OoMB+farJ78elPG+7atfzpMZUgMPkB1X1A1AGQC7rAJFAHwMKNRL0Ieg9+AUgcHLkZYFu6GcMKEQjW010GZkEZChfxcIpKaDNfwB+A5wJFk4vk4B93YKqoysD8CFqSQBZm32D5D6gj88YeAOx6A5GxoAmO+Nw6n2j7MUaCUL1QeoD8BtrALqvLJNADs3/AFiel9tkuRL9AAAAAElFTkSuQmCC);--gift-side:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5UlEQVR42o2TMQpCMRBEtxFB/YWiCKK/09oLeBFrT+MRPInHEDyJjW1kAi9s8km+xZIl2ZnMTjZ23F1CN1uHVbdPMZ3MQ/g8s9Ce6sowAQ6bcwzIVPx93cL70ce4XxdxT7U63y5POYESEbDWCARUqAaceek6UEGNQAohgciUIB1pNQJqaFm5kYiEG1oteM+iAm0IqHVMgW8Vv5KJ/rClYPAK9I8KrS0PuGzwjN7IGgF+ZQQeTP6vB6o1LwsjWx7QKu0aksq/UFPgW0hzAHDMA397IoDRP9HYIPm5Sb+RKWwNUilfmB947JY2KcuPQAAAAABJRU5ErkJggg==);--gift-lidfront:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2ElEQVR42o1TQQrCMBDcSxGsPSiKINqbnv2AH/Hsa3xCX1XwL14jszBhGnCTwzZtszs7O5PYsN4nxG44+3rc3tKq69N3fqXPNHq8nxv/dzncPY+Bb8MLiq6nh68RAPZYjHw0NBaTCSICIEuyMaVTG4EMtZmxSJH/AZA6x0aYdqeYLQwIYjo/N2sA6oaViC0uIB+N3UY8EEov0kBzAZJFVDdqI3AM14DFFDISkfTZbOGCokdHmSd2AdAqIvLoQD6J5WWKRqDleqGMghA9cqEcNYuoM9VEVKZYf59UkNVsXu9HAAAAAElFTkSuQmCC);--gift-lidside:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA20lEQVR42o2TPQpCMRCEtxHBn0JRBFE7rb2AF7H2NB7BUwnexTYyCx9MhLy8YkmyLzszO28T6+WhnPe3sltdclVMJ/PyfT/K53XKeN4XmdMd7mvVOUguZ5tMKFoAFOmu9oo4bq9FMUYBRRBWAI461IIIqEkAZOkDID0P3Iug2L0YagFm3dM+YNUBoBaAt4pv1V8g2QLAZDxIBT4HyBvy4D8CVqQNeQCB//ZwtF4LEEFWeQBIb5C8OAF8jEEfo4C5CXpyL3om4kVOIkmX1XtMPtKVByhpAfiL5Un/AFyglQU5YC1aAAAAAElFTkSuQmCC);--gift-top:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAzUlEQVR42qWTPQpCMRCEtxFBfYWiCKKv09oLeBFrT+MRPInHEDyJje3KBD5Yn0ksUkz+djLZTSa2Wx190W19vzn5en7wbrL08Wjq78fFn7c+4XqepTXx4IsnGAts1rwkoJg4kWsaSAAR9TUBQdmSjbEZAaEkQJmRa9QT+1oG3BdjUyCHnEAOJmILjFOGUNBf94SYzRDtAqovh2GqJV77JUZ78r41K/P+X1aOC7W/EG0vJCcywUi1v0D85y8gQDn/MmBzKkFN9HithHgQIh/VQNfm1IT64gAAAABJRU5ErkJggg==);--gift-bow:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYElEQVR42mNgGAWjgNrAVo31PwiTJQ+S+H8z+///z0ewKgLLfz4CVoPVEJgBd5aq/J+TJYSiCMQGiYHkcBqArhBmCDYxguEAtw3k5M9HiNeMzbm4vIVXM0whcqijy8EAAHn5dQtdU7tHAAAAAElFTkSuQmCC);--gift-seal:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgElEQVR42mNgoDaQ4dL7D8LIbGQxghq95avAGJmNLIZsOIpmmKIq+wM4MTaDUAyAKVxR8gEnhhkENwDZ6TDN6E5HxhiGYNMMc8nXE15YvQEzhCgD0A0hywBkQ2jjAlyGEBUG6NFIcixgS0gkpQNcSRk5LHAlZ5z5AV9mIpipSAUANHSXcaI6njAAAAAASUVORK5CYII=);--gift-ink:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAcklEQVR42qWTUQrAMAhD3/0PkOt2MCgMZ9St/RK1MYkta36UJTFxd5mdo2hUA05WoGFiAYjUQmwlVRM18EdMnH7UyBisD7rLNbqtqOrDmKUB8KugROtIAj+e8WYNYSpGuxyoM0dmfVRb0OlvdL44n27AC5BQzi+YFHZbAAAAAElFTkSuQmCC)}