/* Padel-Ollivander - styles taken from the approved design (design/project/*.dc.html) */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:300 700;src:url(../fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:300 700;src:url(../fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy:#0E1B2C; --card:#16273D; --card2:#1D3350; --line:#2A4060; --track:#22364F;
  --ink:#F4F6F2; --ink2:#C9D2DD; --ink3:#A9B4C2; --ball:#D4F24A; --ball2:#E6FF7A; --orange:#FF8A3D; --teal:#5BD1C3;
  --head:"Space Grotesk","Inter",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--ball)}a:hover{color:var(--ball2)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--ball);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.screen{max-width:440px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:20px 24px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.grow{flex-grow:1}
.top{display:flex;align-items:center;gap:12px;min-height:44px}
.iconbtn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:12px;border:0;background:var(--card);text-decoration:none}
.progress{flex-grow:1;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.progress>div{height:6px;background:var(--ball);transition:width .3s}
.count{font-size:13px;color:var(--ink3);min-width:40px;text-align:right}
.langs{display:flex;gap:4px;background:var(--card);border-radius:999px;padding:4px}
.langs button{border:0;border-radius:999px;background:transparent;color:var(--ink2);font-weight:600;font-size:13px;width:40px;height:32px}
.langs button[aria-pressed=true]{background:var(--ball);color:var(--navy)}
.langs.sm{padding:3px}.langs.sm button{width:36px;height:28px;font-size:12px}
.logo{font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:-.2px}
.logo span{color:var(--ball)}

.eyebrow{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ball)}
.title{margin:0;font-family:var(--head);font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.5px}
.sub{margin:0;font-size:15px;line-height:1.45;color:var(--ink2)}
.small{font-size:12px;line-height:1.45;color:var(--ink3)}
.qhead{margin-top:28px;display:flex;flex-direction:column;gap:10px}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:16px;border:0;background:var(--ball);color:var(--navy);font-weight:600;font-size:17px;text-decoration:none;width:100%}
.btn:hover{color:var(--navy);background:var(--ball2)}
.btn[disabled]{opacity:.35;cursor:default}
.btn.outline{height:48px;background:transparent;border:1.5px solid var(--ball);color:var(--ball);font-size:15px}
.btn.quiet{height:46px;background:var(--card2);color:var(--ink);font-size:15px}
.btn.ghost{height:46px;background:transparent;border:1px solid var(--line);color:var(--ink);font-size:15px}
.btn.sm{height:40px;border-radius:12px;font-size:14px}
.stack{display:flex;flex-direction:column;gap:8px}

.opt{display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:54px;padding:10px 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink)}
.opt .dot{width:20px;height:20px;flex-shrink:0;border-radius:50%;border:2px solid var(--line)}
.opt.multi .dot{border-radius:6px}
.opt[aria-pressed=true]{border-color:var(--ball)}
.opt[aria-pressed=true] .dot{border-color:var(--ball);background:var(--ball)}
.opt .l{font-size:15px;font-weight:600}.opt .h{font-size:12px;color:var(--ink2);margin-top:2px}
.opts{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:0 14px;height:40px;font-weight:500;font-size:14px}
.chip[aria-pressed=true]{background:var(--ball);border-color:var(--ball);color:var(--navy)}
.whybox{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:12px;padding:10px 12px;margin:18px 0 14px}
.whybox span{font-size:12px;line-height:1.45;color:var(--ink2)}

/* level */
.levelcard{margin-top:28px;background:var(--card);border-radius:20px;padding:24px 20px 18px;display:flex;flex-direction:column;gap:12px}
.levelnum{text-align:center;font-family:var(--head);font-weight:700;font-size:72px;line-height:1;color:var(--ball)}
input[type=range]{width:100%;accent-color:var(--ball);height:28px}
.ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3)}

/* side */
.court{width:220px;height:150px;border:2px solid var(--ink2);border-radius:6px;display:flex;position:relative;background:#1B3A5C;margin:44px auto 0}
.court>div{flex:1 1 0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-size:13px;font-weight:600;color:var(--ink3)}
.court>div.on{background:rgba(212,242,74,.35);color:var(--ink)}
.court>div:first-child{border-right:1px dashed var(--ink2)}
.court .net{position:absolute;left:-2px;right:-2px;top:-10px;height:4px;background:var(--ink);border-radius:2px;padding:0}
.court .netl{position:absolute;left:0;right:0;top:-30px;text-align:center;font-size:11px;color:var(--ink3);padding:0;display:block}

/* racket picker */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-size:12px;line-height:1.25;text-align:center}
.mcard img{height:96px;width:auto;object-fit:contain}
.mcard[aria-pressed=true]{border-color:var(--ball)}
.search{width:100%;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 14px;font-size:15px}
.linkbtn{border:0;background:none;color:var(--ball);font-weight:600;font-size:14px;padding:8px 0;text-align:left}
.picked{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:10px 14px;border:2px solid var(--ball)}
.picked img{height:70px;width:auto}

/* budget */
.budget{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:62px;padding:0 18px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink)}
.budget b{font-family:var(--head);font-size:22px}.budget span{font-size:13px;color:var(--ink2)}
.budget[aria-pressed=true]{background:var(--ball);border-color:var(--ball);color:var(--navy)}
.budget[aria-pressed=true] span{color:var(--navy)}

/* loading */
.loading{justify-content:center;align-items:center;text-align:center;gap:24px}
.shuffle{display:flex;gap:14px;align-items:flex-end}
.bignum{font-family:var(--head);font-size:56px;font-weight:700;line-height:1;color:var(--ball)}
.bar220{width:220px;height:6px;border-radius:3px;background:var(--track);overflow:hidden}.bar220>div{height:6px;background:var(--ball)}
.reveal-cta{display:flex;align-items:center;height:60px;padding:0 34px;border-radius:999px;background:var(--ball);color:var(--navy);font-weight:700;font-size:18px;border:0}

/* result */
.stage{position:relative;height:clamp(220px,37vh,380px);display:flex;align-items:center;justify-content:center}
.stage img.hero{display:block;height:calc(clamp(220px,37vh,380px) * .87);width:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
.a-rays{position:absolute;width:640px;height:640px;pointer-events:none}
.rays{position:absolute;left:0;top:0;width:640px;height:640px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(212,242,74,.22) 0deg 5deg,rgba(212,242,74,0) 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%)}
.flash{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(212,242,74,.6) 35%,rgba(212,242,74,0) 70%);opacity:0}
.ball{position:absolute;border-radius:50%;background:var(--ball);box-shadow:0 0 12px rgba(212,242,74,.8);opacity:0}
.rname{margin:0;font-family:var(--head);font-weight:700;font-size:32px;line-height:1.05;letter-spacing:-.6px;text-align:center}
.prices{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.price{font-family:var(--head);font-weight:700;font-size:26px;color:var(--ball)}
.was{font-size:15px;color:var(--ink3);text-decoration:line-through}
.off{font-size:13px;font-weight:600;color:var(--orange)}
.bars{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.barrow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.barrow .lab{width:96px}.barrow .val{width:28px;font-weight:600;text-align:right;color:var(--ink)}
.barrow .trk{flex-grow:1;height:7px;border-radius:4px;background:var(--track);overflow:hidden}.barrow .trk>div{height:7px;border-radius:4px;background:var(--ball)}
.share{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;border:0;background:var(--card);font-weight:600;font-size:14px}
.textbtn{display:flex;align-items:center;height:44px;padding:0 12px;color:var(--ink3);font-size:13px;border:0;background:none}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flash{0%{opacity:0;transform:scale(.2)}25%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
@keyframes rise{0%{opacity:0;transform:translateY(120px) scale(.55) rotate(-30deg)}60%{opacity:1;transform:translateY(-12px) scale(1.06) rotate(-6deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(-10deg)}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes ballfly{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fill{from{width:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes shuffle{0%,100%{opacity:.25;transform:scale(.92)}50%{opacity:.95;transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(212,242,74,.55)}100%{box-shadow:0 0 0 22px rgba(212,242,74,0)}}
@keyframes slam{0%{opacity:0;transform:scale(2.8) rotate(var(--r))}70%{opacity:1;transform:scale(.94) rotate(var(--r))}100%{opacity:1;transform:scale(1) rotate(var(--r))}}
@keyframes thud{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,4px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes away{to{opacity:0;transform:translateX(-470px) rotate(-28deg)}}

/* reveal timeline; --d shifts everything (the joke screen starts the real reveal 7.8 s later) */
.rv{--d:0s}
.rv .a-rays{animation:fadein 1.6s ease-out calc(var(--d) + .9s) both}.rv .rays{animation:spin 18s linear infinite}
.rv .flash{animation:flash 1.6s ease-out calc(var(--d) + .2s) both}
.rv .a-rise{animation:rise 2.2s cubic-bezier(.2,.9,.25,1.12) calc(var(--d) + 1.1s) both}
.rv .a-float{animation:floaty 3.6s ease-in-out calc(var(--d) + 3.4s) infinite}
.rv .ball{animation:ballfly 2s cubic-bezier(.1,.7,.3,1) calc(var(--d) + var(--bd)) both}
.rv .u0{animation:fadein .8s ease-out calc(var(--d) + 2.5s) both}
.rv .u1{animation:up .9s ease-out calc(var(--d) + 2.7s) both}.rv .u2{animation:up .9s ease-out calc(var(--d) + 3.1s) both}
.rv .u3{animation:up .9s ease-out calc(var(--d) + 3.5s) both}.rv .u4{animation:up .9s ease-out calc(var(--d) + 3.9s) both}
.rv .trk>div{animation:fill 1.4s ease-out calc(var(--d) + 4.1s) both}
.rv.joke{--d:7.8s}
.sh1{animation:shuffle 1.2s ease-in-out infinite}.sh2{animation:shuffle 1.2s ease-in-out .4s infinite}.sh3{animation:shuffle 1.2s ease-in-out .8s infinite}
.pulse{animation:pulse 1.6s ease-out infinite}.in{animation:up .8s ease-out both}

.jk{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;padding:84px 24px 0;pointer-events:none;animation:away .9s cubic-bezier(.6,0,.8,.4) 7.2s forwards}
.jk .t1{animation:thud .35s ease-out 2.7s;width:100%}.jk .t2{animation:thud .4s ease-out 4.05s}
.jk .stage img{display:block;height:calc(clamp(220px,37vh,380px) * .87);width:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55));animation:rise 1.8s cubic-bezier(.2,.9,.25,1.12) .3s both}
.jk .flash{animation:flash 1.4s ease-out .1s both}
.jk .ja{animation:up .7s ease-out 1.3s both}.jk .jb{animation:up .7s ease-out 1.6s both}.jk .jc{animation:up .7s ease-out 4.2s both}
.stamp-price{position:absolute;right:14px;bottom:40px;padding:6px 14px;border:4px solid var(--orange);border-radius:10px;color:var(--orange);background:rgba(14,27,44,.82);font-family:var(--head);font-weight:700;font-size:40px;letter-spacing:-1px;line-height:1;--r:-14deg;animation:slam .45s cubic-bezier(.3,1.4,.5,1) 2.3s both}
.stamp-kid{position:absolute;top:34%;padding:10px 18px;border:5px double var(--ball);border-radius:12px;color:var(--ball);background:rgba(14,27,44,.9);font-family:var(--head);font-weight:700;font-size:44px;letter-spacing:1px;line-height:1;white-space:nowrap;box-shadow:0 10px 40px rgba(0,0,0,.5);--r:9deg;animation:slam .5s cubic-bezier(.3,1.4,.5,1) 3.6s both}

/* more / detail */
.tabs{margin-top:16px;display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--card)}
.tabs button{flex:1 1 0;height:40px;border:0;border-radius:10px;background:transparent;color:var(--ink2);font-weight:600;font-size:14px;padding:0 6px;line-height:1.15}
.tabs button[aria-selected=true]{background:var(--ball);color:var(--navy)}
.card{background:var(--card);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card .row{display:flex;gap:14px}
.card .ph{width:84px;flex-shrink:0;display:flex;justify-content:center;align-items:center}
.card .ph img{height:136px;width:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
.tag{align-self:flex-start;color:var(--navy);border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700}
.cname{font-family:var(--head);font-size:20px;font-weight:700;line-height:1.1}
.cprice{font-family:var(--head);font-size:22px;font-weight:700;color:var(--ball)}
.mini{background:var(--card);border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center}
.mini img{width:60px;height:104px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.dashed{height:44px;border:1px dashed var(--line);border-radius:14px;background:transparent;color:var(--ball);font-weight:600;font-size:14px}
.box{background:var(--card);border-radius:16px;padding:14px 16px}
.box h2{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ball)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;margin-top:8px}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.specs div{background:var(--card);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.specs span{font-size:12px;color:var(--ink3)}.specs b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.badge{background:var(--orange);color:var(--navy);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:700}
.foot{margin-top:18px;text-align:center}.foot a{color:var(--ink3);font-size:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ball);color:var(--navy);padding:10px 18px;border-radius:999px;font-weight:600;z-index:50}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .jk{display:none}
}
@media (min-width:600px){body{background:radial-gradient(circle at 50% 0,#16273D 0,#0E1B2C 60%)}.screen{background:var(--navy);box-shadow:0 0 80px rgba(0,0,0,.35)}}