/* ===== Portal theme 4: points, achievements, wheel ===== */

/* ---------- points hero ---------- */
.points-hero.pts{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;margin-bottom:22px}
.balance-card.bal{background:linear-gradient(135deg,#e6ebfb,#d9e2fb);min-height:320px}
.balance-card.bal .big-number{font-size:84px;margin-top:22px}
.balance-card.bal .big-number span{font-variant-numeric:tabular-nums}
.coins{position:absolute;right:26px;top:30px;width:150px;height:150px;pointer-events:none}
.coins i{position:absolute;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#c7d6ff 62%,#9fb5f3);border:5px solid #fff;box-shadow:inset 0 -6px 10px #4261ee22,0 14px 24px -10px #4261ee66;animation:floaty 5s ease-in-out infinite}
.coins i:nth-child(1){right:0;top:0;animation-delay:-.6s}
.coins i:nth-child(2){left:8px;top:48px;width:74px;height:74px;animation-delay:-2s}
.coins i:nth-child(3){right:22px;bottom:-6px;width:48px;height:48px;animation-delay:-3.4s}
.coins i:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:var(--blue);font-size:22px}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
.next-reward{margin-top:22px;max-width:420px}
.next-reward p{margin:0}
.afford{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 18px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;background:#fff;font-size:11px;border:1px solid #d6e0fb;transition:background-color .3s,color .3s,border-color .3s}
.chip b{font-weight:500;color:var(--blue);transition:color .3s}
.chip:hover{background:var(--blue);color:#fff;border-color:var(--blue)}.chip:hover b{color:#fff}
.balance-card.bal .button{margin-top:auto}
.lvl{display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .4s}
.lvl:hover{box-shadow:0 24px 44px -26px #3a9c88aa}
.lvl-row{display:flex;align-items:center;gap:22px;margin:22px 0 18px}
.lvl-name{font-size:32px;letter-spacing:-1.2px;line-height:1.05;margin-bottom:10px}
.lvl-foot{margin-top:auto;padding-top:14px;border-top:1px solid #c9e0d5;align-items:center}
.lvl-foot b{font-size:26px;font-weight:400;margin-right:8px}
.ring-wrap{position:relative;width:132px;height:132px;flex:none}
.ring-wrap.sm{width:104px;height:104px}
.ring-wrap svg{width:100%;height:100%}
.ring-bg{fill:none;stroke:#ffffffb0;stroke-width:9}
.ring-fg{fill:none;stroke:var(--blue);stroke-width:9;stroke-linecap:round;stroke-dashoffset:289;transition:stroke-dashoffset 1.8s var(--ease2)}
.ring-wrap.go .ring-fg{stroke-dashoffset:var(--off)}
.ring-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-num span{font-size:34px;letter-spacing:-1.5px;line-height:1;font-variant-numeric:tabular-nums}
.ring-num small{font-size:9px;color:var(--muted);margin-top:4px;letter-spacing:.5px}
.ring-wrap.sm .ring-num span{font-size:28px}
@media(max-width:900px){.points-hero.pts{grid-template-columns:1fr}.balance-card.bal .big-number{font-size:66px}}

/* ---------- achievements ---------- */
.ach-top{display:flex;align-items:center;gap:26px;margin-bottom:22px;background:linear-gradient(135deg,#eef2ff,#e3ecfb)}
.ach-top h2{font-size:26px;letter-spacing:-.8px;margin:0 0 8px}
.ach-top p{margin:0}
.ach-top .button{margin-left:auto}
.badge-card{position:relative;overflow:hidden;cursor:pointer;padding:26px;border-radius:26px;transition:border-color .3s,box-shadow .4s,background-color .3s,transform .5s var(--spring)}
.badge-card:focus-visible{outline:3px solid #4660ee;outline-offset:4px}
.badge-card.done{background:#fff;border:1px solid #d6e0fb}
.badge-card.done:before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffcc,transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.badge-card.done .badge-symbol{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 14px 26px -12px #4261ee99}
.badge-card.locked{background:#eef1f5;border:1px dashed #cdd6de}
.badge-card.locked .badge-symbol{background:#fff;color:#9aa8b2;border-color:#dde4ea}
.badge-card:hover{border-color:#b9c8f7;box-shadow:0 22px 40px -24px #4261ee77}
.badge-card:hover .badge-symbol{rotate:-8deg;scale:1.08}
.badge-card .badge-symbol{transition:rotate .5s var(--spring),scale .5s var(--spring),background-color .3s}
.badge-got,.badge-lock{position:absolute;top:24px;right:24px;font-size:10px;padding:6px 11px;border-radius:999px}
.badge-got{background:#e3f1e9;color:#397967}
.badge-lock{background:#fff;color:#8c9aa2;display:grid;place-items:center;width:30px;height:30px;padding:0}
.badge-lock svg{width:15px;height:15px}
.ach-grid .progress i{transition:width 1.4s var(--ease2)}

/* ---------- wheel ---------- */
.wheel-stage{background:linear-gradient(160deg,#e9eef9,#dfe8fb)}
.wheel-wrap{width:380px;height:380px;margin:30px auto 26px}
.wheel{border:0;border-radius:50%;width:100%;height:100%;inset:0;background:conic-gradient(#7f9cf0 0 180deg,#bfe0d4 180deg 288deg,#c7cdf3 288deg);box-shadow:0 0 0 14px #fff,0 0 0 15px #d9e3f7,0 26px 50px -18px #3c5c8b66;transition:transform 5.2s cubic-bezier(.1,.72,.06,1)}
.wheel:before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#ffffff55 0 .6deg,transparent .6deg 7.5deg),radial-gradient(circle at 34% 28%,#ffffff55,transparent 55%)}
.wheel:after{display:none}
.wheel-ico{position:absolute;width:38px;height:38px;border-radius:50%;background:#ffffffd9;display:grid;place-items:center;color:var(--blue);box-shadow:0 8px 16px -8px #2a4a6a66}
.wheel-ico svg{width:19px;height:19px}
.wheel-ico.a{right:46px;top:100px}
.wheel-ico.b{left:92px;bottom:50px}
.wheel-ico.c{left:118px;top:36px}
.wheel-label{font-size:13px;font-weight:500;color:#1c2f4d}
.wheel-label.a{right:38px;top:150px}
.wheel-label.b{left:40px;bottom:94px}
.wheel-label.c{left:34px;top:88px}
.wheel-hub{position:absolute;left:50%;top:50%;translate:-50% -50%;width:112px;height:112px;border-radius:50%;background:#fff;color:var(--ink);font-size:11px;letter-spacing:1.2px;font-weight:500;box-shadow:0 10px 26px -10px #2a4a6a88,inset 0 0 0 6px #eef2ff;z-index:3;transition:scale .4s var(--spring),box-shadow .3s,color .3s,background-color .3s}
.wheel-hub:not(:disabled):hover{scale:1.08;color:#fff;background:var(--blue);box-shadow:0 16px 30px -10px #4261ee99,inset 0 0 0 6px #ffffff33}
.wheel-hub:not(:disabled):active{scale:.95}
.wheel-hub:disabled{opacity:1;color:#9aa8b2;cursor:default}
.wheel-pointer{top:-14px;left:calc(50% - 16px);width:32px;height:44px;background:var(--ink);filter:drop-shadow(0 6px 8px #0003);z-index:4;transform-origin:50% 0}
.wheel-wrap.spinning .wheel-pointer{animation:tick .16s ease-in-out infinite}
@keyframes tick{0%,100%{rotate:0deg}50%{rotate:-14deg}}
.wheel-lights{position:absolute;inset:-8px;z-index:2;pointer-events:none}
.wheel-lights i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #c9d6f6;transform:rotate(var(--a)) translateY(-198px);animation:blink 1.6s ease-in-out infinite;animation-delay:var(--d)}
.wheel-wrap.spinning .wheel-lights i{animation-duration:.25s}
@keyframes blink{0%,100%{background:#fff;box-shadow:0 0 0 2px #c9d6f6}50%{background:#ffd56b;box-shadow:0 0 12px 3px #ffd56b99}}
.prize-row{transition:translate .4s var(--ease)}
.prize-row:hover{translate:6px 0}
.win-card{display:flex;align-items:center;gap:18px;margin:6px 0 16px}
.win-card img{width:130px;height:104px;object-fit:cover;border-radius:16px;flex:none}
.win-card h3{margin:8px 0 6px}
.win-card p{margin:0;font-size:12px}
.win-card.pts .badge-symbol{width:84px;height:84px;border-radius:26px;background:var(--blue);color:#fff;border-color:var(--blue)}
@media(max-width:760px){.wheel-wrap{width:300px;height:300px}.wheel-lights i{transform:rotate(var(--a)) translateY(-158px)}.wheel-ico.a{right:34px;top:78px}.wheel-ico.b{left:70px;bottom:36px}.wheel-ico.c{left:92px;top:26px}.wheel-label{font-size:11px}.wheel-label.a{right:26px;top:118px}.wheel-label.b{left:28px;bottom:74px}.wheel-label.c{left:26px;top:68px}.wheel-hub{width:92px;height:92px;font-size:10px}.win-card{flex-direction:column;align-items:flex-start}.ach-top{flex-wrap:wrap}.ach-top .button{margin-left:0}}

/* following asides */
.split>aside[data-follow]{will-change:top}

.split>aside[data-follow]{align-self:start}

.wheel-hint{margin:0 0 12px;font-size:12px;color:var(--blue);animation:rise .6s var(--ease) both}
.wheel-hub:not(:disabled){animation:hubPulse 2s ease-in-out infinite}
@keyframes hubPulse{0%,100%{box-shadow:0 10px 26px -10px #2a4a6a88,inset 0 0 0 6px #eef2ff,0 0 0 0 #4261ee55}50%{box-shadow:0 10px 26px -10px #2a4a6a88,inset 0 0 0 6px #eef2ff,0 0 0 16px #4261ee00}}

/* v15 */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-row.mt{margin-top:18px}
.profile-split>section.panel:first-child{position:sticky;top:24px;align-self:start}
@media(max-width:900px){.profile-split>section.panel:first-child{position:static}}
.photo-banner.low .banner-copy{display:flex;flex-direction:column;align-items:flex-start;min-height:309px;height:100%;box-sizing:border-box}
.photo-banner.low .banner-copy h2{margin-top:auto;margin-bottom:12px}
.photo-banner.low .banner-copy p{margin:0 0 20px}
/* clickable list rows: soft highlight instead of a cut-off shadow band */
.mini-event{padding:17px 12px;margin-inline:-12px;border-bottom:0;border-radius:18px;background-image:linear-gradient(var(--line),var(--line));background-size:calc(100% - 24px) 1px;background-position:center bottom;background-repeat:no-repeat;transition:background-color .3s}
.mini-event:first-child{padding-top:17px}
.mini-event:last-child{background-image:none;padding-bottom:17px}
.mini-event.clk:hover{box-shadow:none;border-color:transparent;background-color:#f3f6ff;background-image:none}
/* header buttons: same size as on the landing page */
.public-header .button{min-height:0;height:40px;padding:5px 6px 5px 16px;font-size:14px;gap:12px}
.public-header .button svg{width:28px;height:28px}
/* compact submit buttons on the sign-in / sign-up forms */
.auth-form form>.button.dark[type=submit],.auth-form form .button.dark.mt[type=submit]{width:auto;min-width:210px;align-self:flex-start}
.auth-form form{display:flex;flex-direction:column;align-items:flex-start}
.auth-form form>label.field,.auth-form form>.field{width:100%}
/* header identical to the landing page: same offset, no page-to-page jump */
.public-header{padding-top:16px;box-sizing:border-box;animation:none}
.public-header nav a{font-size:clamp(12px,1vw,14px)}