/* ==========================================================
   playfora · Aurora glass
   ========================================================== */
:root {
  --bg: #f7f8ff;
  --ink: #1b1840;
  --ink2: #55527e;
  --ink3: #8b88b0;
  --pink: #ff5fc8;
  --cyan: #29d3ff;
  --mint: #5cf2b0;
  --sun: #ffd75e;
  --pinkD: #c9268f;
  --cyanD: #0782b3;
  --mintD: #0b8f5a;
  --sunD: #a97800;
  --glass: rgba(255, 255, 255, .58);
  --glass2: rgba(255, 255, 255, .78);
  --line: rgba(255, 255, 255, .95);
  --hair: rgba(27, 24, 64, .08);
  --sh: 0 24px 60px -28px rgba(56, 38, 140, .35), 0 2px 6px rgba(27, 24, 64, .04);
  --sh-s: 0 10px 30px -16px rgba(56, 38, 140, .35);
  --r: 30px;
  --r2: 20px;
  --r3: 14px;
  --head: 'Lexend', system-ui, sans-serif;
  --body: 'Nunito Sans', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --aur: linear-gradient(110deg, var(--pink), #b17bff 35%, var(--cyan) 65%, var(--mint));
  --ease: cubic-bezier(.2, .9, .25, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 var(--body); overflow-x: hidden; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.08; margin: 0; letter-spacing: -.025em; font-weight: 800; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 10px; }
.wrap { width: min(1220px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--ink2); }
.mono { font-family: var(--mono); }
.skip { position: fixed; left: 12px; top: 12px; transform: translateY(-200%); z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
.skip:focus { transform: none; }
.grad { background: var(--aur); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Aurora backdrop ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--bg) 60%); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.aurora .b1 { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: var(--pink); animation: drift1 26s ease-in-out infinite alternate; opacity: .38; }
.aurora .b2 { width: 46vmax; height: 46vmax; right: -16vmax; top: -6vmax; background: var(--cyan); animation: drift2 30s ease-in-out infinite alternate; opacity: .42; }
.aurora .b3 { width: 40vmax; height: 40vmax; left: 20vw; bottom: -22vmax; background: var(--mint); animation: drift3 34s ease-in-out infinite alternate; opacity: .4; }
.aurora .b4 { width: 26vmax; height: 26vmax; right: 12vw; bottom: 8vh; background: var(--sun); animation: drift4 22s ease-in-out infinite alternate; opacity: .45; }
.aurora .b5 { width: 22vmax; height: 22vmax; left: 38vw; top: 28vh; background: #b17bff; animation: drift2 38s ease-in-out infinite alternate-reverse; opacity: .2; }
@keyframes drift1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vw, 20vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-12vw, -18vh) scale(1.2); } }
@keyframes drift4 { to { transform: translate(-22vw, -26vh) scale(1.1); } }

/* ---------- Glass primitives ---------- */
.glass {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: var(--sh), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.glass.pad { padding: 26px; }
.box { padding: 24px; margin-bottom: 16px; }
.box > h3, .box-h { font: 700 1.12rem/1.2 var(--head); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.step { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .86rem; color: #fff; background: var(--ink); box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 6px 16px -4px rgba(255, 95, 200, .6); }

/* ---------- Buttons ---------- */
.btn {
  --bh: 50px; height: var(--bh); padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 .96rem/1 var(--head); letter-spacing: -.01em; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s, background .25s; position: relative; isolation: isolate;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.97); }
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 14px 30px -14px rgba(27, 24, 64, .7); }
.btn-ink::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: var(--aur); z-index: -1; opacity: 0; filter: blur(12px); transition: opacity .3s; }
.btn-ink:hover::before { opacity: .75; }
.btn-ink:hover { transform: translateY(-2px); }
.btn-glass { background: rgba(255, 255, 255, .7); border: 1px solid #fff; box-shadow: var(--sh-s); color: var(--ink); }
.btn-glass:hover { background: #fff; transform: translateY(-2px); }
.btn-aur { background: var(--aur); background-size: 200% 100%; color: var(--ink); box-shadow: 0 14px 30px -14px rgba(255, 95, 200, .8); animation: aurShift 6s linear infinite; }
.btn-aur:hover { transform: translateY(-2px); }
@keyframes aurShift { 50% { background-position: 100% 0; } }
.btn-sm { --bh: 40px; padding: 0 16px; font-size: .86rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.ibtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; background: rgba(255, 255, 255, .65); border: 1px solid #fff; box-shadow: var(--sh-s); transition: transform .2s var(--ease), background .2s; flex: none; }
.ibtn:hover { background: #fff; transform: translateY(-1px); }
.ibtn svg { width: 21px; height: 21px; }
.dotn { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--pink); color: #fff; font: 700 .7rem/20px var(--head); text-align: center; box-shadow: 0 0 0 2px #fff; }
.dotn.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1px solid #fff; font: 600 .86rem/1 var(--head); color: var(--ink); transition: background .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.chip:hover { background: #fff; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 10px 22px -12px rgba(27, 24, 64, .8); }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--pink)); }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 700 .7rem/1 var(--head); letter-spacing: .02em; background: #fff; color: var(--ink); }
.badge.pk { background: #ffe3f5; color: var(--pinkD); }
.badge.cy { background: #dcf6ff; color: var(--cyanD); }
.badge.mt { background: #d9fbea; color: var(--mintD); }
.badge.sn { background: #fff3cc; color: var(--sunD); }
.badge.ink { background: var(--ink); color: #fff; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; padding: 12px 0; transition: padding .3s; }
.hdr-in { display: flex; align-items: center; gap: 14px; height: 66px; padding: 0 12px 0 22px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid #fff; -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--sh-s); }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 800 1.5rem/1 var(--head); letter-spacing: -.055em; color: var(--ink); flex: none; }
.logo-dot { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 200deg, var(--pink), var(--sun), var(--mint), var(--cyan), var(--pink)); box-shadow: 0 0 0 3px #fff, 0 6px 18px -4px rgba(255, 95, 200, .7); animation: spin 9s linear infinite; position: relative; }
.logo-dot::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.logo-w { padding-bottom: 3px; }
.nav { display: flex; gap: 2px; margin-left: 10px; }
.nav a { height: 40px; padding: 0 14px; border-radius: 999px; display: flex; align-items: center; font: 600 .9rem/1 var(--head); color: var(--ink2); transition: color .2s, background .2s; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.nav a.on { color: var(--ink); background: #fff; box-shadow: var(--sh-s); }
.nav a.nav-hot { color: var(--pinkD); }
.nav a.nav-hot::after { content: '−8%'; margin-left: 6px; font: 700 .64rem/1 var(--mono); background: var(--sun); color: var(--ink); padding: 3px 5px; border-radius: 6px; }
.srch { position: relative; flex: 1; min-width: 0; max-width: 300px; margin-left: auto; }
.srch-ic { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink3); z-index: 1; pointer-events: none; }
.srch input { width: 100%; min-width: 0; height: 44px; border-radius: 999px; border: 1px solid #fff; background: rgba(255, 255, 255, .7); padding: 0 16px 0 40px; outline: 0; font-size: .92rem; transition: box-shadow .2s, background .2s; }
.srch input:focus { background: #fff; box-shadow: 0 0 0 4px rgba(41, 211, 255, .25); }
.hdr-act { display: flex; gap: 8px; align-items: center; }
.burger { display: none; }

/* ---------- Mobile sheet ---------- */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(27, 24, 64, .22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.msheet { position: fixed; z-index: 90; left: 12px; right: 12px; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 18px; border-radius: 28px; background: rgba(255, 255, 255, .86); border: 1px solid #fff; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--sh); transform: translateY(-20px) scale(.97); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .35s var(--ease), opacity .25s, visibility 0s .35s; }
.msheet.on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .35s var(--ease), opacity .25s; }
.msheet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.srch.m { max-width: none; margin: 0 0 10px; }
.msheet-n { display: grid; gap: 4px; }
.msheet-n a { padding: 13px 16px; border-radius: 16px; font: 600 1.05rem/1.2 var(--head); display: flex; justify-content: space-between; align-items: center; }
.msheet-n a:hover, .msheet-n a.on { background: #fff; }
.msheet-n em { font: 700 .7rem/1 var(--mono); font-style: normal; background: var(--sun); padding: 4px 7px; border-radius: 7px; }

/* ---------- Page ---------- */
main { display: block; min-height: 70vh; outline: 0; }
.page { animation: pageIn .55s var(--ease) both; padding-bottom: 40px; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } }
.ph { padding: 26px 0 22px; }
.crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--ink3); margin-bottom: 12px; font-weight: 600; }
.crumb a:hover { color: var(--ink); }
.crumb span::before, .crumb a + a::before { content: '/'; margin-right: 6px; color: var(--ink3); }
.ph h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; }
.ph p { color: var(--ink2); margin-top: 10px; max-width: 620px; font-size: 1.04rem; }
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.sec { padding: 54px 0 0; }
.sh { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sh small { font: 700 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pinkD); display: block; margin-bottom: 10px; }
.sh h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; }
.sh p { color: var(--ink2); margin-top: 8px; max-width: 520px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.two > * { min-width: 0; }
.sum { position: sticky; top: 104px; }

/* ---------- Hero / orbit ---------- */
.hero { position: relative; padding: 18px 0 0; }
.hero-st { position: relative; height: clamp(620px, 80vh, 740px); border-radius: 44px; overflow: hidden; background: rgba(255, 255, 255, .35); border: 1px solid #fff; box-shadow: var(--sh); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-st::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(255, 255, 255, .85), transparent 70%); pointer-events: none; }
.orbit-ring { position: absolute; left: 50%; top: 50%; width: 86%; height: 62%; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px dashed rgba(27, 24, 64, .14); pointer-events: none; }
.orbit-ring.r2 { width: 64%; height: 40%; border-style: solid; border-color: rgba(255, 255, 255, .9); }
.orb { position: absolute; left: 50%; top: 50%; width: var(--w, 170px); margin-left: calc(var(--w, 170px) / -2); margin-top: calc(var(--w, 170px) / -2); aspect-ratio: 1; display: grid; place-items: center; will-change: transform; transition: filter .3s; }
.orb .media { width: 100%; height: 100%; }
.orb:hover { filter: drop-shadow(0 14px 30px rgba(255, 95, 200, .5)); }
.orb .orb-l { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 .72rem/1 var(--head); background: #fff; padding: 6px 10px; border-radius: 999px; box-shadow: var(--sh-s); opacity: 0; transition: opacity .2s; }
.orb:hover .orb-l, .orb:focus-visible .orb-l { opacity: 1; }
.hero-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, 88%); text-align: center; z-index: 30; pointer-events: none; }
.hero-c > * { pointer-events: auto; }
.hero-c .kick { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid #fff; box-shadow: var(--sh-s); font: 600 .82rem/1 var(--head); }
.hero-c .kick b { background: var(--mint); padding: 5px 8px; border-radius: 999px; font-size: .7rem; }
.hero-c h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); font-weight: 900; letter-spacing: -.055em; line-height: .95; margin: 18px 0 14px; text-shadow: 0 2px 30px rgba(255, 255, 255, .9); }
.hero-c h1 .grad { display: inline-block; padding: 0 .04em .08em; }
.hero-c p { font-size: 1.08rem; color: var(--ink2); max-width: 470px; margin: 0 auto; font-weight: 600; text-shadow: 0 0 20px #fff; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.hero-ctl { position: absolute; bottom: 18px; right: 18px; z-index: 31; display: flex; gap: 8px; }
.hero-stats { position: absolute; left: 18px; bottom: 18px; z-index: 31; display: flex; gap: 8px; flex-wrap: wrap; }
.hero-stats span { background: rgba(255, 255, 255, .8); border: 1px solid #fff; border-radius: 999px; padding: 8px 14px; font: 600 .8rem/1 var(--head); box-shadow: var(--sh-s); }
.hero-stats b { font-family: var(--mono); color: var(--pinkD); margin-right: 4px; }

/* ---------- Media frames ---------- */
.media { position: relative; display: grid; place-items: center; }
.media img { width: 100%; height: 100%; }
.media.cut img { object-fit: contain; filter: drop-shadow(0 18px 22px rgba(27, 24, 64, .28)); }
.media.framed { background: #fff; padding: 7px; border-radius: 22px; box-shadow: 0 16px 34px -16px rgba(27, 24, 64, .45), 0 0 0 1px rgba(27, 24, 64, .04); }
.media.framed img { object-fit: cover; border-radius: 16px; background: var(--matte, #eee); }
.media.framed.contain img { object-fit: contain; }

/* ---------- Product card with tilt ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pc { perspective: 900px; min-width: 0; }
.pc-in {
  position: relative; height: 100%; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sh); padding: 12px 12px 16px; display: flex; flex-direction: column;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .4s;
}
.pc.tilting .pc-in { transition: transform .08s linear, box-shadow .4s; }
.pc:hover .pc-in { box-shadow: 0 30px 60px -26px var(--glow, rgba(255, 95, 200, .55)), 0 2px 6px rgba(27, 24, 64, .05); }
.pc-in::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light; }
.pc:hover .pc-in::after { opacity: 1; }
.pc-m { position: relative; aspect-ratio: 1 / .86; border-radius: 22px; display: grid; place-items: center; padding: 16px; background: radial-gradient(80% 80% at 50% 40%, rgba(255, 255, 255, .95), var(--tint, #ffe3f5)); overflow: hidden; transform: translateZ(30px); }
.pc-m .media { width: 100%; height: 100%; transition: transform .5s var(--ease); }
.pc-m .media.framed { width: 88%; height: 88%; transform: rotate(-2deg); }
.pc:hover .pc-m .media { transform: scale(1.05) translateY(-4px); }
.pc:hover .pc-m .media.framed { transform: rotate(0) scale(1.03); }
.pc-tags { position: absolute; left: 10px; top: 10px; display: flex; gap: 5px; flex-wrap: wrap; z-index: 2; }
.heart { position: absolute; right: 10px; top: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); border: 1px solid #fff; box-shadow: var(--sh-s); color: var(--ink2); transition: transform .25s var(--ease), color .2s; }
.heart svg { width: 19px; height: 19px; }
.heart:hover { transform: scale(1.1); }
.heart.on { color: var(--pink); }
.heart.on svg { fill: var(--pink); }
.heart.pop { animation: bump .5s var(--ease); }
.pc-b { padding: 14px 6px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pc-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--ink3); font-weight: 700; }
.pc-meta .st { color: var(--sunD); }
.pc-b h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.pc-b h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); }
.pc-f { margin-top: auto; padding-top: 10px; display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.price { font: 800 1.12rem/1.1 var(--head); letter-spacing: -.03em; display: block; }
.was { font-size: .8rem; color: var(--ink3); text-decoration: line-through; display: block; font-weight: 600; }
.addb { position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 16px; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .25s var(--ease), background .25s; flex: none; box-shadow: 0 10px 20px -10px rgba(27, 24, 64, .8); }
.addb svg { width: 20px; height: 20px; }
.addb:hover { transform: rotate(90deg); }
.addb.ok { background: var(--mintD); transform: none; }
.tn-pink { --tint: #ffe0f4; --glow: rgba(255, 95, 200, .55); }
.tn-cyan { --tint: #d8f5ff; --glow: rgba(41, 211, 255, .55); }
.tn-sun { --tint: #fff2c7; --glow: rgba(255, 199, 50, .6); }
.tn-mint { --tint: #d6fbe9; --glow: rgba(60, 220, 150, .55); }

/* ---------- Home sections ---------- */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cat { position: relative; overflow: hidden; padding: 20px; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--r); background: linear-gradient(150deg, rgba(255, 255, 255, .85), var(--tint)); border: 1px solid #fff; box-shadow: var(--sh); transition: transform .35s var(--ease); }
.cat:hover { transform: translateY(-5px); }
.cat h3 { font-size: 1.24rem; }
.cat p { font-size: .86rem; color: var(--ink2); margin-top: 6px; max-width: 52%; }
.cat > div { position: relative; z-index: 1; }
.cat .n { font: 700 .74rem/1 var(--mono); color: var(--ink2); }
.cat .media { position: absolute; right: -6px; bottom: -6px; width: 46%; aspect-ratio: 1; }
.cat .media.framed { width: 44%; right: 12px; bottom: 12px; transform: rotate(6deg); }
.bb-promo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 36px; overflow: hidden; position: relative; }
.bb-promo h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 900; }
.bb-promo p { color: var(--ink2); margin: 12px 0 20px; max-width: 460px; }
.tiers { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.tier { padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .8); border: 1px solid #fff; font: 600 .8rem/1.2 var(--head); }
.tier b { display: block; font: 700 1.3rem/1 var(--mono); margin-top: 3px; }
.tier:nth-child(1) b { color: var(--cyanD); } .tier:nth-child(2) b { color: var(--pinkD); } .tier:nth-child(3) b { color: var(--mintD); }
.stack { position: relative; height: 300px; }
.stack .media { position: absolute; transition: transform .6s var(--ease); }
.stack .s1 { width: 58%; aspect-ratio: 1; left: 20%; top: 0; }
.stack .s2 { width: 38%; aspect-ratio: 1.2; left: 0; bottom: 6px; transform: rotate(-9deg); }
.stack .s3 { width: 36%; aspect-ratio: 1.2; right: 0; bottom: 18px; transform: rotate(8deg); }
.stack .tag-pl { position: absolute; right: 8%; top: 8%; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--sun); font: 800 1.2rem/1 var(--head); box-shadow: 0 0 0 6px rgba(255, 255, 255, .8), var(--sh-s); transform: rotate(12deg); z-index: 3; }
.stack .tag-pl small { display: block; font-size: .6rem; font-weight: 600; }
.bb-promo:hover .stack .s2 { transform: rotate(-4deg) translate(10px, -6px); }
.bb-promo:hover .stack .s3 { transform: rotate(3deg) translate(-10px, -6px); }
.games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.gt { position: relative; padding: 16px; border-radius: 24px; background: rgba(255, 255, 255, .62); border: 1px solid #fff; box-shadow: var(--sh-s); display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), box-shadow .3s; overflow: hidden; min-width: 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gt:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px var(--gc); }
.gt::before { content: ''; position: absolute; width: 120px; height: 120px; right: -50px; top: -50px; border-radius: 50%; background: var(--gc); opacity: .18; filter: blur(8px); }
.gt .gm { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--gc); color: #fff; font: 700 .8rem/1 var(--mono); box-shadow: 0 10px 20px -10px var(--gc); }
.gt b { font: 700 .95rem/1.2 var(--head); }
.gt small { color: var(--ink2); font-size: .78rem; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vc { position: relative; padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, .7); border: 1.5px dashed rgba(27, 24, 64, .18); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vc::before, .vc::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); margin-top: -9px; }
.vc::before { left: -10px; } .vc::after { right: -10px; }
.vc .badge { align-self: start; }
.vc code { font: 700 1.1rem/1 var(--mono); letter-spacing: .04em; }
.vc p { font-size: .84rem; color: var(--ink2); flex: 1; }
.vc button { align-self: start; }
.warga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wq { padding: 22px; }
.wq p { font-size: 1rem; font-weight: 600; }
.wq .who { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: .86rem; }
.wq .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem/1 var(--head); background: var(--c); color: var(--ink); }
.wq .who small { display: block; color: var(--ink3); }
.marq { overflow: hidden; margin-top: 54px; padding: 16px 0; background: var(--ink); color: #fff; transform: rotate(-1.2deg); width: calc(100% + 40px); margin-left: -20px; }
.marq-t { display: flex; gap: 36px; width: max-content; animation: marq 32s linear infinite; font: 700 1.1rem/1 var(--head); white-space: nowrap; }
.marq-t span::after { content: '✦'; margin-left: 36px; color: var(--sun); }
@keyframes marq { to { transform: translateX(-50%); } }
.marq-clip { overflow: hidden; padding: 10px 0; }

/* ---------- Shop ---------- */
.shop { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.shop > * { min-width: 0; }
.filt { position: sticky; top: 104px; padding: 20px; display: grid; gap: 18px; }
.filt h4 { font: 700 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 10px; }
.filt .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filt .chip { height: 34px; padding: 0 12px; font-size: .8rem; }
.range { width: 100%; accent-color: var(--pink); }
.range-v { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 700; margin-top: 4px; }
.tgl { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.tgl input { width: 18px; height: 18px; accent-color: var(--ink); }
.bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.bar .srch { max-width: none; margin: 0; flex: 1 1 220px; }
.bar .cnt { font-weight: 700; font-size: .9rem; color: var(--ink2); }
.sel { height: 44px; border-radius: 999px; border: 1px solid #fff; background: rgba(255, 255, 255, .75); padding: 0 38px 0 16px; font-weight: 700; font-size: .88rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1840' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; max-width: 100%; }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fbtn { display: none; }
.empty { text-align: center; padding: 50px 24px; }
.empty .em-ic { width: 90px; height: 90px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 90deg, var(--pink), var(--sun), var(--mint), var(--cyan), var(--pink)); font: 800 1.8rem/1 var(--head); position: relative; }
.empty .em-ic span { position: relative; z-index: 1; }
.empty .em-ic::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.empty h3 { font-size: 1.5rem; }
.empty p { color: var(--ink2); margin: 8px auto 20px; max-width: 420px; }
.empty .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Product detail ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.pd > * { min-width: 0; }
.gal { padding: 18px; position: sticky; top: 104px; }
.gal-m { aspect-ratio: 1 / .9; border-radius: 24px; display: grid; place-items: center; padding: 30px; background: radial-gradient(70% 70% at 50% 45%, #fff, var(--tint)); position: relative; overflow: hidden; }
.gal-m .media { width: 100%; height: 100%; }
.gal-m .media.framed { width: 86%; height: 86%; }
.gal-m .media img { animation: imgIn .5s var(--ease); }
@keyframes imgIn { from { opacity: 0; transform: scale(.94); } }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs button { width: 72px; height: 72px; border-radius: 18px; padding: 6px; background: rgba(255, 255, 255, .7); border: 2px solid transparent; }
.thumbs button.on { border-color: var(--ink); background: #fff; }
.thumbs img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.pd-i { padding: 28px; }
.pd-i h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin: 12px 0 10px; }
.pd-rate { display: flex; gap: 12px; flex-wrap: wrap; font-size: .88rem; font-weight: 700; color: var(--ink2); }
.pd-rate b { color: var(--sunD); }
.pd-p { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 6px; flex-wrap: wrap; }
.pd-p .price { font-size: 2.1rem; }
.pd-p .off { font: 700 .8rem/1 var(--mono); background: var(--pink); color: #fff; padding: 5px 8px; border-radius: 8px; }
.pd-cicil { font-size: .86rem; color: var(--ink2); }
.pd-desc { margin: 18px 0; color: var(--ink2); }
.optg { margin: 18px 0; }
.optg > b { font: 700 .86rem/1 var(--head); display: block; margin-bottom: 10px; }
.optg .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.optg .chip small { font-family: var(--mono); font-size: .7rem; opacity: .75; }
.buyrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.buyrow .btn { flex: 1 1 160px; }
.qty { display: inline-flex; align-items: center; height: 50px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid #fff; box-shadow: var(--sh-s); }
.qty button { width: 44px; height: 100%; font: 700 1.2rem/1 var(--head); border-radius: 999px; }
.qty button:hover { background: #fff; }
.qty output { min-width: 30px; text-align: center; font: 700 1rem/1 var(--mono); }
.qty.sm { height: 38px; }
.qty.sm button { width: 34px; font-size: 1rem; }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.perk { padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .65); font-size: .8rem; font-weight: 600; color: var(--ink2); }
.perk b { display: block; color: var(--ink); font-family: var(--head); font-size: .86rem; margin-bottom: 2px; }
.specs { margin-top: 18px; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .55); }
.specs div { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 12px; padding: 12px 16px; font-size: .9rem; }
.specs div:nth-child(odd) { background: rgba(255, 255, 255, .6); }
.specs span { color: var(--ink2); font-weight: 600; }
.bb-hint { margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(100deg, #fff3cc, #ffe0f4); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; font-weight: 600; }

/* ---------- Top-up ---------- */
.games.big { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.games.big .gt { padding: 20px; min-height: 150px; }
.tu { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.tu > * { min-width: 0; }
.g-head { display: flex; gap: 16px; align-items: center; }
.g-head .gm { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--gc); color: #fff; font: 700 1rem/1 var(--mono); flex: none; box-shadow: 0 16px 30px -14px var(--gc); }
.g-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld.full { grid-column: 1 / -1; }
.fld label { font: 600 .84rem/1.2 var(--head); }
.fld input, .fld select, .fld textarea { width: 100%; min-width: 0; height: 50px; border-radius: 16px; border: 1.5px solid rgba(27, 24, 64, .1); background: rgba(255, 255, 255, .85); padding: 0 16px; outline: 0; font-size: .96rem; transition: border-color .2s, box-shadow .2s; }
.fld textarea { height: 88px; padding: 12px 16px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(41, 211, 255, .2); }
.fld .err { display: none; font-size: .8rem; font-weight: 700; color: #d6265f; }
.fld.bad input, .fld.bad select { border-color: #ff4f8b; background: #fff5f9; }
.fld.bad .err { display: block; }
.whois { margin-top: 14px; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 18px; background: #d9fbea; color: var(--mintD); font-weight: 700; animation: imgIn .4s var(--ease); }
.whois svg { width: 22px; height: 22px; flex: none; }
.whois b { color: var(--ink); font-family: var(--mono); }
.noms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nom { position: relative; text-align: left; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .7); border: 2px solid transparent; display: grid; gap: 4px; transition: transform .2s var(--ease), border-color .2s, background .2s; min-width: 0; }
.nom:hover { transform: translateY(-2px); background: #fff; }
.nom.on { border-color: var(--ink); background: #fff; box-shadow: 0 14px 30px -16px rgba(255, 95, 200, .8); }
.nom b { font: 700 .95rem/1.2 var(--head); }
.nom small { font-size: .74rem; color: var(--ink3); }
.nom .p { font: 700 .9rem/1 var(--mono); color: var(--pinkD); margin-top: 4px; }
.nom .tg { position: absolute; top: -8px; right: 10px; font: 700 .62rem/1 var(--head); background: var(--sun); padding: 4px 7px; border-radius: 7px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .92rem; }
.kv > span { color: var(--ink2); min-width: 0; }
.kv > b { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kv.minus b { color: var(--mintD); }
.kv.tot { border-top: 1.5px dashed rgba(27, 24, 64, .15); margin-top: 8px; padding-top: 14px; font-size: 1.05rem; }
.kv.tot b { font: 800 1.4rem/1 var(--head); letter-spacing: -.03em; }

/* ---------- Cart ---------- */
.cl { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); transition: opacity .3s, transform .3s; }
.cl:last-child { border-bottom: 0; }
.cl.bye { opacity: 0; transform: translateX(30px); }
.th { width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(#fff, var(--tint, #f0f0ff)); padding: 8px; overflow: hidden; }
.th img { width: 100%; height: 100%; object-fit: contain; }
.th.framed img { object-fit: cover; border-radius: 12px; }
.th.gmc { background: var(--gc); color: #fff; font: 700 .8rem/1 var(--mono); }
.cl b.n { font: 700 .98rem/1.25 var(--head); display: block; }
.cl small { display: block; color: var(--ink3); font-size: .8rem; margin-top: 2px; overflow-wrap: anywhere; }
.cl .pr { font: 700 .92rem/1 var(--head); margin-top: 6px; display: block; }
.cl .pr s { color: var(--ink3); font-weight: 600; font-size: .8rem; margin-right: 6px; }
.cl .r { display: flex; flex-direction: column; align-items: end; gap: 8px; }
.lnk { font: 700 .8rem/1 var(--head); color: var(--ink3); text-decoration: underline; text-underline-offset: 3px; }
.lnk:hover { color: #d6265f; }
.bgrp { border-radius: 24px; padding: 4px 16px; margin: 10px 0; background: linear-gradient(120deg, rgba(255, 243, 204, .7), rgba(255, 224, 244, .7)); border: 1px solid #fff; }
.bgrp-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 4px; flex-wrap: wrap; }
.bgrp-h b { font: 800 .95rem/1 var(--head); display: flex; align-items: center; gap: 8px; }
.bgrp .cl { border-color: rgba(27, 24, 64, .06); }

/* ---------- Mini-cart pill & panel ---------- */
.pill { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 22px 0 8px; border-radius: 999px; background: rgba(27, 24, 64, .92); color: #fff; box-shadow: 0 20px 40px -14px rgba(27, 24, 64, .6), 0 0 0 1px rgba(255, 255, 255, .2) inset; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .35s var(--ease), opacity .3s; }
.pill::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; background: var(--aur); z-index: -1; filter: blur(10px); opacity: .55; animation: aurShift 6s linear infinite; background-size: 200% 100%; }
.pill:hover { transform: translateY(-3px); }
.pill-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); }
.pill-ic svg { width: 21px; height: 21px; }
.pill-ic b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px; background: var(--pink); color: #fff; font: 700 .7rem/20px var(--head); text-align: center; }
.pill-t { font: 700 1rem/1 var(--head); letter-spacing: -.02em; }
.pill.shake { animation: shake .55s var(--ease); }
@keyframes shake { 20% { transform: translateY(-8px) rotate(-3deg); } 45% { transform: translateY(0) rotate(2deg); } 70% { transform: translateY(-3px); } }
.pill.gone { transform: translateY(120px); opacity: 0; pointer-events: none; }
.mc { position: fixed; right: 20px; bottom: 92px; z-index: 85; width: min(400px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 130px)); display: flex; flex-direction: column; border-radius: 30px; background: rgba(255, 255, 255, .8); border: 1px solid #fff; -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); box-shadow: 0 40px 80px -30px rgba(56, 38, 140, .5); transform-origin: 90% 100%; transform: scale(.4) translateY(40px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .45s var(--ease), opacity .25s, visibility 0s .45s; }
.mc.on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .45s var(--ease), opacity .25s; }
.mc-h { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 10px 22px; }
.mc-h small { font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pinkD); }
.mc-h h3 { font-size: 1.3rem; margin-top: 4px; }
.mc-b { overflow: auto; padding: 0 22px; flex: 1; min-height: 60px; }
.mc-b .cl { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; }
.mc-b .th { width: 56px; height: 56px; border-radius: 16px; padding: 5px; }
.mc-b .cl b.n { font-size: .86rem; }
.mc-f { padding: 14px 22px 20px; border-top: 1px solid var(--hair); }
.mc-f .acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.mc-empty { text-align: center; padding: 24px 0 30px; color: var(--ink2); }
.mc-empty b { display: block; font: 700 1.1rem/1.2 var(--head); color: var(--ink); margin-bottom: 4px; }

/* ---------- Checkout ---------- */
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .7); border: 2px solid transparent; cursor: pointer; transition: border-color .2s, background .2s; min-width: 0; }
.opt:hover { background: #fff; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:checked) { border-color: var(--ink); background: #fff; box-shadow: 0 12px 26px -16px rgba(255, 95, 200, .8); }
.opt:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.opt .t { min-width: 0; flex: 1; }
.opt b { display: block; font: 700 .9rem/1.2 var(--head); }
.opt small { display: block; color: var(--ink3); font-size: .78rem; }
.opt .side { font: 700 .86rem/1 var(--head); white-space: nowrap; }
.opt .pm { width: 46px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 700 .64rem/1 var(--mono); color: #fff; background: var(--pc); flex: none; }
.opt .rd { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(27, 24, 64, .25); flex: none; position: relative; }
.opt:has(input:checked) .rd { border-color: var(--ink); }
.opt:has(input:checked) .rd::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--pink); }
.oi { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; font-size: .88rem; }
.oi .th { width: 52px; height: 52px; border-radius: 14px; padding: 5px; }
.oi b.n { font: 700 .86rem/1.25 var(--head); display: block; }
.oi small { color: var(--ink3); display: block; font-size: .76rem; }
.vbox { display: flex; gap: 8px; margin-top: 14px; }
.vbox input { flex: 1; min-width: 0; height: 46px; border-radius: 999px; border: 1.5px dashed rgba(27, 24, 64, .25); background: rgba(255, 255, 255, .85); padding: 0 16px; font: 700 .9rem/1 var(--mono); text-transform: uppercase; outline: 0; }
.vbox input:focus { border-color: var(--pink); }
.vhint { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: .78rem; color: var(--ink3); align-items: center; }
.vhint button { font: 700 .72rem/1 var(--mono); padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px dashed rgba(27, 24, 64, .25); color: var(--ink); }
.vhint button:hover { border-color: var(--pink); color: var(--pinkD); }
.von { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: #d9fbea; font-size: .84rem; font-weight: 700; color: var(--mintD); }
.vmsg { font-size: .8rem; font-weight: 700; color: #d6265f; margin-top: 8px; min-height: 0; }

/* Slide-to-pay */
.s2p-w { margin-top: 18px; }
.s2p { position: relative; height: 66px; border-radius: 999px; background: var(--ink); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; box-shadow: 0 18px 34px -18px rgba(27, 24, 64, .9); }
.s2p-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * (100% - 66px) + 66px); background: var(--aur); border-radius: inherit; }
.s2p-lbl { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 60px; color: #fff; font: 700 .95rem/1 var(--head); letter-spacing: .01em; opacity: calc(1 - var(--p, 0) * 1.6); pointer-events: none; }
.s2p-lbl span { background: linear-gradient(90deg, rgba(255, 255, 255, .45), #fff, rgba(255, 255, 255, .45)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
.s2p-knob { position: absolute; left: 5px; top: 5px; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: grab; transform: translateX(var(--x, 0px)); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); z-index: 2; }
.s2p-knob svg { width: 24px; height: 24px; }
.s2p-knob:active { cursor: grabbing; }
.s2p.back .s2p-knob { transition: transform .45s var(--ease); }
.s2p.back .s2p-fill { transition: width .45s var(--ease); }
.s2p.done .s2p-lbl { opacity: 1; padding: 0 60px 0 0; }
.s2p-help { font-size: .76rem; color: var(--ink3); text-align: center; margin-top: 8px; }

/* Pay overlay */
.payo { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(247, 248, 255, .7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.payo.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s; }
.payo-c { text-align: center; padding: 34px 40px; border-radius: 34px; background: rgba(255, 255, 255, .85); border: 1px solid #fff; box-shadow: var(--sh); width: min(360px, calc(100vw - 32px)); }
.payo-ring svg { width: 120px; height: 120px; margin: 0 auto 16px; }
.payo-ring circle { fill: none; stroke-width: 9; }
.payo-ring .trk { stroke: rgba(27, 24, 64, .08); }
.payo-ring .arc { stroke: url(#pg); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset 1.6s cubic-bezier(.5, 0, .3, 1); }
.payo-ring .ok { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset .4s .1s var(--ease); }
.payo.go .arc { stroke-dashoffset: 0; }
.payo.ok .ok { stroke-dashoffset: 0; }
.payo h3 { font-size: 1.3rem; }
.payo p { color: var(--ink2); margin-top: 6px; font-size: .9rem; }

/* ---------- Order ---------- */
.yay { text-align: center; padding: 30px 20px 10px; }
.yay .big { font: 900 clamp(2.4rem, 7vw, 4.6rem)/1 var(--head); letter-spacing: -.05em; }
.yay p { color: var(--ink2); max-width: 560px; margin: 12px auto 0; font-weight: 600; }
.oc { margin-bottom: 16px; overflow: hidden; }
.oc-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.oc-h b { font: 700 .82rem/1 var(--mono); letter-spacing: .06em; }
.oc-b { padding: 10px 22px 20px; }
.codebox { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 18px; background: repeating-linear-gradient(135deg, #fff 0 10px, #f6f4ff 10px 20px); border: 1.5px dashed rgba(27, 24, 64, .2); margin: 4px 0 8px; min-width: 0; }
.codebox small { display: block; font: 700 .64rem/1 var(--mono); color: var(--ink3); letter-spacing: .1em; margin-bottom: 5px; }
.codebox code { font: 700 1rem/1.2 var(--mono); overflow-wrap: anywhere; word-break: break-all; }
.trk { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 6px; }
.trk::before, .trk .pg { content: ''; position: absolute; left: 12.5%; top: 17px; height: 4px; border-radius: 4px; background: rgba(27, 24, 64, .1); width: 75%; }
.trk .pg { background: var(--aur); width: 0; transition: width 1s var(--ease); z-index: 1; }
.trk div { position: relative; z-index: 2; text-align: center; font: 600 .78rem/1.2 var(--head); color: var(--ink3); display: grid; justify-items: center; gap: 8px; }
.trk i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid rgba(27, 24, 64, .12); font: 700 .8rem/1 var(--mono); font-style: normal; transition: background .4s, border-color .4s; }
.trk div.ok { color: var(--ink); }
.trk div.ok i { background: var(--ink); color: #fff; border-color: var(--ink); }
.trk div.cur i { box-shadow: 0 0 0 6px rgba(255, 95, 200, .25); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 95, 200, .05); } }
.ol { display: grid; gap: 12px; }
.olr { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; transition: transform .25s var(--ease); }
.olr:hover { transform: translateX(4px); }
.olr .id { font: 700 .95rem/1 var(--mono); }
.olr .ims { display: flex; margin-top: 10px; }
.olr .ims .th { width: 42px; height: 42px; border-radius: 12px; padding: 4px; margin-right: -8px; box-shadow: 0 0 0 2px #fff; }
.cf { position: fixed; z-index: 130; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; top: 0; left: 0; }

/* ---------- Bundle builder ---------- */
.bb { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.bb > * { min-width: 0; }
.bb-sec { padding: 22px; margin-bottom: 16px; }
.bb-sec .box-h { justify-content: space-between; flex-wrap: wrap; }
.bb-sec .box-h > span { display: flex; gap: 10px; align-items: center; }
.bb-sec .hint { font: 600 .82rem/1 var(--body); color: var(--ink3); }
.picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pk { position: relative; text-align: left; padding: 10px 10px 12px; border-radius: 22px; background: rgba(255, 255, 255, .65); border: 2px solid transparent; transition: transform .25s var(--ease), border-color .2s, background .2s, box-shadow .25s; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pk:hover { transform: translateY(-3px); background: #fff; }
.pk.on { border-color: var(--ink); background: #fff; box-shadow: 0 16px 30px -18px rgba(255, 95, 200, .9); }
.pk .pk-m { aspect-ratio: 1 / .8; border-radius: 16px; display: grid; place-items: center; padding: 10px; background: radial-gradient(#fff, var(--tint)); }
.pk .media { width: 100%; height: 100%; }
.pk .media.framed { width: 90%; height: 90%; padding: 4px; border-radius: 14px; }
.pk .media.framed img { border-radius: 10px; }
.pk b { font: 700 .82rem/1.25 var(--head); }
.pk .p { font: 700 .78rem/1 var(--mono); color: var(--pinkD); }
.pk .ck { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid rgba(27, 24, 64, .15); display: grid; place-items: center; color: #fff; z-index: 2; }
.pk.on .ck { background: var(--ink); border-color: var(--ink); }
.pk .ck svg { width: 14px; height: 14px; }
.pk.dim { opacity: .5; }
.vpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vp { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .65); border: 2px solid transparent; text-align: left; min-width: 0; transition: border-color .2s, background .2s; }
.vp:hover { background: #fff; }
.vp.on { border-color: var(--ink); background: #fff; }
.vp .gm { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--gc); color: #fff; font: 700 .66rem/1 var(--mono); flex: none; }
.vp b { font: 700 .82rem/1.2 var(--head); display: block; }
.vp small { font-size: .72rem; color: var(--ink3); }
.vnoms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bsum { padding: 22px; }
.bsum h3 { font-size: 1.3rem; margin-bottom: 4px; }
.bslots { display: grid; gap: 8px; margin: 14px 0; }
.bslot { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .7); min-height: 64px; }
.bslot.emp { border: 1.5px dashed rgba(27, 24, 64, .18); background: transparent; color: var(--ink3); font-size: .84rem; font-weight: 600; grid-template-columns: 48px minmax(0, 1fr); }
.bslot .th { width: 48px; height: 48px; border-radius: 14px; padding: 4px; }
.bslot.emp .th { background: rgba(27, 24, 64, .04); color: var(--ink3); font: 700 1.2rem/1 var(--head); }
.bslot b { font: 700 .82rem/1.25 var(--head); display: block; }
.bslot small { color: var(--ink3); font-size: .74rem; }
.bslot .pr { font: 700 .82rem/1 var(--mono); }
.tierbar { margin: 16px 0 10px; }
.tierbar .tb { position: relative; height: 12px; border-radius: 999px; background: rgba(27, 24, 64, .08); overflow: hidden; }
.tierbar .tb i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--aur); border-radius: inherit; transition: width .6s var(--ease); }
.tierbar .tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; font: 700 .7rem/1.2 var(--mono); color: var(--ink3); text-align: center; }
.tierbar .tl span.on { color: var(--pinkD); }
.tierbar p { font-size: .84rem; font-weight: 700; margin-top: 10px; text-align: center; }
.saveb { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--sun); font: 700 .78rem/1.2 var(--head); }
.bsel { margin-top: 8px; }
.bsel select { height: 36px; border-radius: 999px; border: 1px solid rgba(27, 24, 64, .12); background: #fff; padding: 0 12px; font-size: .78rem; font-weight: 700; max-width: 100%; }

/* ---------- Credits ---------- */
.cred { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cred > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; font-size: .84rem; }
.cred .th { width: 64px; height: 64px; }
.cred b { font-family: var(--head); display: block; }
.cred a { color: var(--cyanD); text-decoration: underline; overflow-wrap: anywhere; }
.cred span { color: var(--ink2); }

/* ---------- Footer ---------- */
.ftr { padding: 60px 0 100px; }
.ftr-card { padding: 34px; border-radius: 36px; background: rgba(27, 24, 64, .94); color: #e9e7ff; position: relative; overflow: hidden; }
.ftr-card::before { content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -200px; border-radius: 50%; background: var(--pink); filter: blur(90px); opacity: .45; }
.ftr-card::after { content: ''; position: absolute; width: 360px; height: 360px; left: -100px; bottom: -220px; border-radius: 50%; background: var(--cyan); filter: blur(90px); opacity: .35; }
.ftr-g { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 26px; }
.ftr .logo { color: #fff; }
.ftr .logo-dot { box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.ftr .logo-dot::after { background: #2a2660; }
.ftr p { color: #bdb9e8; font-size: .9rem; margin: 14px 0; max-width: 360px; }
.mono-chip { display: inline-block; font: 700 .76rem/1 var(--mono); padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.ftr h4 { font-size: .9rem; color: #fff; margin-bottom: 12px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr ul a { color: #bdb9e8; font-size: .9rem; }
.ftr ul a:hover { color: var(--sun); }
.ftr-b { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; color: #9b97cc; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 150; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(420px, calc(100vw - 24px)); }
.toast { pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(27, 24, 64, .94); color: #fff; font: 600 .9rem/1.3 var(--head); box-shadow: 0 18px 40px -16px rgba(27, 24, 64, .6); animation: tIn .4s var(--ease); max-width: 100%; }
.toast i { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); flex: none; box-shadow: 0 0 10px var(--mint); }
.toast.err i { background: #ff4f8b; box-shadow: 0 0 10px #ff4f8b; }
.toast.out { animation: tOut .3s forwards; }
@keyframes tIn { from { opacity: 0; transform: translateY(-14px) scale(.95); } }
@keyframes tOut { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav a { padding: 0 10px; }
  .srch { max-width: 220px; }
  .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .nav, .hdr .srch { display: none; }
  .burger { display: grid; }
  .hdr-act { margin-left: auto; }
  .two, .tu, .bb, .pd { grid-template-columns: minmax(0, 1fr); }
  .sum, .gal { position: static; }
  .shop { grid-template-columns: minmax(0, 1fr); }
  .filt { position: static; display: none; }
  .filt.on { display: grid; }
  .fbtn { display: inline-flex; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-promo { grid-template-columns: minmax(0, 1fr); }
  .warga { grid-template-columns: minmax(0, 1fr); }
  .ftr-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftr-brand { grid-column: 1 / -1; }
  .games.big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .hdr { padding: 10px 0; }
  .hdr-in { height: 58px; padding: 0 8px 0 16px; }
  .logo { font-size: 1.32rem; }
  .logo-dot { width: 22px; height: 22px; }
  .logo-dot::after { inset: 6px; }
  .ibtn { width: 40px; height: 40px; }
  .hdr-act { gap: 6px; }
  .grid, .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pc-in { padding: 8px 8px 12px; border-radius: 24px; }
  .pc-m { border-radius: 18px; padding: 10px; }
  .pc-b { padding: 10px 4px 0; }
  .pc-b h3 { font-size: .88rem; }
  .pc-meta { font-size: .7rem; flex-direction: column; gap: 2px; }
  .price { font-size: .98rem; }
  .addb { width: 40px; height: 40px; border-radius: 14px; }
  .heart { width: 34px; height: 34px; right: 6px; top: 6px; }
  .heart svg { width: 16px; height: 16px; }
  .pc-tags { left: 6px; top: 6px; }
  .pc-tags .badge { height: 20px; font-size: .6rem; padding: 0 7px; }
  .hero-st { height: auto; border-radius: 32px; padding-bottom: 104px; }
  .hero-c { position: static; transform: none; width: auto; padding: 0 18px; }
  .hero-c .kick { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .76rem; z-index: 31; }
  .hero-c h1 { font-size: 2.45rem; height: 400px; margin: 0; display: grid; place-content: center; pointer-events: none; position: relative; z-index: 20; }
  .hero-c p { font-size: .96rem; position: relative; z-index: 31; }
  .hero-cta { position: relative; z-index: 31; }
  .hero-cta .btn { flex: 1 1 100%; }
  .orbit-ring { width: 92%; height: 300px; }
  .orbit-ring.r2 { width: 66%; height: 190px; }
  .hero-stats { left: 12px; right: 12px; bottom: 14px; justify-content: center; }
  .hero-stats span { padding: 7px 10px; font-size: .72rem; }
  .hero-ctl { display: none; }
  .cats { gap: 10px; }
  .cat { min-height: 160px; padding: 16px; border-radius: 24px; }
  .cat p { display: none; }
  .cat h3 { font-size: 1.05rem; }
  .bb-promo { padding: 22px; }
  .stack { height: 230px; }
  .games, .games.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .sec { padding-top: 40px; }
  .noms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .opts { grid-template-columns: minmax(0, 1fr); }
  .box { padding: 18px; }
  .glass.pad { padding: 18px; }
  .pd-i { padding: 20px; }
  .perks { grid-template-columns: minmax(0, 1fr); }
  .specs div { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
  .cl { grid-template-columns: 60px minmax(0, 1fr); }
  .cl .th { width: 60px; height: 60px; }
  .cl .r { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vpick { grid-template-columns: minmax(0, 1fr); }
  .cred { grid-template-columns: minmax(0, 1fr); }
  .ftr-card { padding: 24px; border-radius: 28px; }
  .pill { right: 12px; bottom: 12px; height: 54px; padding-right: 18px; }
  .pill-ic { width: 40px; height: 40px; }
  .mc { right: 12px; bottom: 76px; }
  .olr { flex-direction: column; align-items: start; }
  .codebox code { font-size: .86rem; word-break: normal; white-space: nowrap; }
  .trk div { font-size: .68rem; }
  .bb-promo .tiers .tier { padding: 8px 10px; }
  .marq-t { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}