@font-face{font-family:Lalezar;src:url(../fonts/Lalezar-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Readex Pro';src:url(../fonts/ReadexPro.woff2) format('woff2');font-weight:160 700;font-display:swap}
@font-face{font-family:Changa;src:url(../fonts/Changa.woff2) format('woff2');font-weight:200 800;font-display:swap}

:root{--navy:#2a1f4a;--y:#ffe600;--pk:#e8327c;--tq:#1fb5c0;--mut:#cdb9ef;--glass:rgba(255,255,255,.1);--line:rgba(255,255,255,.18)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;background:#2c0754}
body.skrew{font-family:'Readex Pro',system-ui,sans-serif;color:#fff;direction:rtl;
  background:radial-gradient(ellipse 120% 70% at 50% 18%,#8a1cc4 0%,#5a0d94 45%,#2c0754 100%) fixed}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block;max-width:100%}
.app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:24px}
.app.has-book{padding-bottom:104px}
.view{display:none;padding:0 18px;animation:fade .25s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.muted{color:var(--mut);font-size:13px}
.h{font-family:Lalezar;font-weight:400;font-size:30px;line-height:1.1}
.t3{font-family:Lalezar;font-weight:400;color:#fff;
  text-shadow:0 1px 0 #d9ccf2,0 2px 0 #c2b0e6,0 3px 0 #ab95da,0 4px 0 #937bcd,0 5px 0 #7b61c0,0 6px 0 #6347b2,0 12px 14px rgba(0,0,0,.45)}
.t3y{font-family:Lalezar;font-weight:400;color:#fff;
  text-shadow:0 2px 0 #f2c300,0 4px 0 #e0a800,0 6px 0 #cc8e00,0 8px 0 #b77400,0 10px 0 #9a5c00,0 20px 24px rgba(0,0,0,.5)}
.num{font-family:Changa;font-weight:800}

/* bars */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0 10px;position:sticky;top:0;z-index:5;
  background:linear-gradient(#5a0d94 70%,rgba(90,13,148,0))}
.sq{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.sq.ghost{visibility:hidden}
.bar-logo{width:64px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;font-weight:700;font-size:16px;height:52px;width:100%;transition:transform .1s}
.btn:active{transform:scale(.97)}
.by{background:var(--y);color:var(--navy)}
.bp{background:var(--pk);color:#fff}
.bw{background:var(--glass);border:1.5px solid rgba(255,255,255,.3)}
.btn[disabled]{opacity:.4}

/* home */
.hero{position:relative;height:318px}
.hero-cards img{position:absolute;width:92px;border-radius:9px;box-shadow:0 10px 20px rgba(0,0,0,.45);transition:transform .6s cubic-bezier(.2,.9,.3,1.3)}
.hero-logo{position:absolute;width:56%;left:22%;top:128px;filter:drop-shadow(0 12px 16px rgba(0,0,0,.5));animation:pop .7s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes pop{from{transform:scale(.6) rotate(-6deg);opacity:0}}
.hero-title{text-align:center;font-size:31px;margin-top:4px}
.hero-sub{text-align:center;color:#efe6ff;font-size:15px;margin-top:8px}
.tiles{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.tile{display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;background:var(--glass);border:1.5px solid var(--line);transition:transform .12s}
.tile:active{transform:scale(.98)}
.tile b{display:block;font-family:Lalezar;font-weight:400;font-size:23px;line-height:1.1}
.tile small{display:block;font-size:12.5px;color:var(--mut);margin-top:3px}
.ic{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:Lalezar;font-size:26px;flex:none}
.ic-y{background:var(--y);color:var(--navy)}.ic-p{background:var(--pk)}.ic-t{background:var(--tq)}
.sign{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px auto 0;width:max-content;background:#14082a;border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:7px 16px;font-size:12px;color:#e6dcf7}
.sign img{height:20px;width:auto}

/* booking bar */
.book{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));width:calc(100% - 28px);max-width:452px;height:62px;border-radius:19px;background:#fff;color:var(--navy);
  display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 16px;box-shadow:0 12px 30px rgba(0,0,0,.4);z-index:20}
.book-txt b{display:block;font-family:Lalezar;font-weight:400;font-size:21px;line-height:1}
.book-txt small{font-size:11.5px;color:#6a5a8f}
.book-go{display:flex;align-items:center;gap:6px;background:var(--pk);color:#fff;border-radius:14px;padding:8px 10px;font-weight:700;font-size:13.5px}
.book-go a{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.book-go img{width:22px;height:22px}
.book-go span{padding:0 4px}

/* learn */
.dots{display:flex;gap:6px}.dots i{width:26px;height:6px;border-radius:6px;background:rgba(255,255,255,.25)}.dots i.on{background:var(--y)}
.learn{min-height:calc(100vh - 230px)}
.ls-kick{font-size:13px;color:var(--y);font-weight:700;margin-top:34px}
.ls-title{font-size:38px;margin-top:4px;line-height:1.15}
.ls-art{position:relative;height:240px;margin:12px 0}
.ls-art img{position:absolute;border-radius:9px;box-shadow:0 10px 20px rgba(0,0,0,.45)}
.ls-text{display:flex;flex-direction:column;gap:10px}
.li{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:18px;background:var(--glass);border:1.5px solid var(--line);font-size:14.5px;line-height:1.65}
.li .n{width:30px;height:30px;border-radius:10px;background:var(--y);color:var(--navy);font-family:Lalezar;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none;padding-top:3px}
.li b{color:var(--y)}
.learn-nav{display:flex;gap:10px;margin-top:22px}
.learn-nav .by{flex:2}.learn-nav .bw{flex:1}
.tag{position:absolute;background:var(--pk);font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px}

/* cards */
.search input{width:100%;height:46px;border-radius:14px;border:0;background:rgba(255,255,255,.12);color:#fff;padding:0 16px;font:inherit;font-size:15px;outline:none}
.search input::placeholder{color:var(--mut)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:8px 14px;border-radius:30px;font-size:13px;font-weight:600;background:rgba(255,255,255,.12)}
.chip.on{background:var(--y);color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 0}
.gc{display:block;transition:transform .15s}
.gc:active{transform:scale(.95)}
.gc img{width:100%;border-radius:9px;box-shadow:0 6px 12px rgba(0,0,0,.35);aspect-ratio:63/88;object-fit:cover}
.gc span{display:block;font-size:12px;text-align:center;margin-top:6px;font-weight:600}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:40px 0}

.cd-card{perspective:900px;display:flex;justify-content:center;margin-top:10px}
.cd-card img{width:200px;border-radius:14px;box-shadow:0 24px 40px rgba(0,0,0,.5);animation:flip .6s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes flip{from{transform:rotateY(90deg)}to{transform:rotateY(-10deg) rotateZ(-2deg)}}
.cd-card img{transform:rotateY(-10deg) rotateZ(-2deg)}
.cd-name{text-align:center;font-size:44px;margin-top:20px}
.stats{display:flex;gap:10px;margin-top:18px}
.stat{flex:1;padding:12px;border-radius:18px;background:var(--glass);border:1.5px solid var(--line);text-align:center}
.stat small{display:block;font-size:12px;color:var(--mut)}
.stat b{display:block;font-size:28px;margin-top:2px}
.stat .lz{font-family:Lalezar;font-weight:400;font-size:20px;margin-top:6px}
.desc{margin-top:12px;padding:16px;border-radius:18px;background:var(--glass);border:1.5px solid var(--line)}
.desc b{font-size:15px}.desc p{font-size:14.5px;line-height:1.75;color:#efe6ff;margin-top:4px}
.cd-nav{display:flex;gap:10px;margin-top:16px}

/* calc */
.setup .li{display:block}
.pl{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.pl input{flex:1;height:50px;border-radius:14px;border:1.5px solid var(--line);background:rgba(255,255,255,.1);color:#fff;padding:0 14px;font:inherit;font-size:16px;outline:none}
.pl input:focus{border-color:var(--y)}
.pl .x{width:44px;height:50px;border-radius:14px;background:rgba(255,255,255,.08);font-size:18px}
.lbl{font-size:13px;color:var(--mut);margin:16px 0 8px}
.tbl{width:100%;border-collapse:separate;border-spacing:0 6px;table-layout:fixed}
.tbl th{font-size:12.5px;color:var(--mut);font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.tbl th.rn{width:31%}
.tbl td{background:rgba(255,255,255,.1);text-align:center;height:46px;font-weight:700;font-size:17px;cursor:pointer}
.tbl td.rn{border-radius:0 12px 12px 0;text-align:right;padding-right:10px;font-size:12.5px;font-weight:600;color:#efe6ff;cursor:default}
.tbl td:last-child{border-radius:12px 0 0 12px}
.tbl td.cur{outline:2px solid var(--y);outline-offset:-2px;background:rgba(255,230,0,.14)}
.tbl tr.tot td{background:var(--navy);font-family:Changa;font-weight:800;font-size:20px;cursor:default}
.tbl tr.tot td.rn{background:none;color:#fff;font-family:'Readex Pro';font-size:13px}
.tbl tr.tot td.best{color:var(--y)}
.badge{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:20px;margin-right:4px;font-weight:700;background:var(--pk);color:#fff}
.badge.y{background:var(--y);color:var(--navy)}
.rinfo{font-size:12.5px;color:var(--mut);background:rgba(255,255,255,.07);border-radius:14px;padding:10px 12px;margin-top:6px;line-height:1.6}
.rinfo b{color:var(--y)}
.calc-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}

/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(10,0,25,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:30}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:100%;max-width:480px;max-height:88vh;overflow:auto;background:#fff;color:var(--navy);
  border-radius:28px 28px 0 0;padding:14px 18px calc(20px + env(safe-area-inset-bottom));transition:transform .3s cubic-bezier(.2,.9,.3,1);z-index:31}
.sheet.on{transform:translate(-50%,0)}
.grab{width:44px;height:5px;border-radius:5px;background:#ddd;margin:0 auto 12px}
.sh-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sh-head b{font-family:Lalezar;font-weight:400;font-size:22px;line-height:1.1}
.sh-sum{font-family:Changa;font-weight:800;font-size:28px;color:var(--pk);white-space:nowrap}
.sh-hint{font-size:12.5px;color:#7a6a9f;margin:4px 0 10px}
.picked{display:flex;flex-wrap:wrap;gap:6px;min-height:30px;margin-bottom:10px}
.picked button{background:#f1ecf8;border-radius:20px;padding:4px 10px;font-size:13px;font-weight:700;color:var(--navy)}
.picked button i{font-style:normal;color:var(--pk);margin-right:4px}
.kb{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.kb button{position:relative;padding:0}
.kb img{width:100%;border-radius:6px;aspect-ratio:63/88;object-fit:cover;box-shadow:0 3px 6px rgba(0,0,0,.2)}
.kb button:active img{transform:scale(.92)}
.kb .cnt{position:absolute;top:-6px;left:-6px;background:var(--pk);color:#fff;border-radius:50%;min-width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sh-row{display:flex;gap:8px;align-items:center;margin-top:12px}
.sh-row input{flex:1;height:48px;border-radius:14px;border:1.5px solid #e2dbef;padding:0 14px;font:inherit;font-size:16px;color:var(--navy);outline:none;text-align:center}
.pen{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:10px 12px;border-radius:14px;background:#fff0f6;font-size:14px;font-weight:600}
.pen .step{display:flex;align-items:center;gap:8px}
.pen .step button{width:34px;height:34px;border-radius:10px;background:var(--pk);color:#fff;font-size:18px}
.sheet .btn{margin-top:14px}
.sheet .bw{background:#f1ecf8;border:0;color:var(--navy)}
.menu .btn{margin-top:10px}

/* result */
.res-head{text-align:center;padding-top:22px}
.res-head .t3{font-size:40px}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;height:240px;margin-top:10px}
.pod{text-align:center;width:31%}
.pod .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .blk{border-radius:16px 16px 0 0;margin-top:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.14);animation:grow .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}}
.pod.first .blk{background:var(--y);color:var(--navy)}
.pod.first .nm{color:var(--y);font-weight:800}
.crown{font-size:30px;animation:pop .8s .4s cubic-bezier(.2,.9,.3,1.6) both}
.loser{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px;border-radius:20px;background:rgba(232,50,124,.22);border:1.5px solid var(--pk)}
.loser img{width:52px;border-radius:6px;transform:rotate(-8deg)}
.loser b{display:block;font-family:Lalezar;font-weight:400;font-size:21px}
.loser small{color:#ffd6e6;font-size:12.5px}
.rank{display:flex;justify-content:space-between;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.1);margin-top:8px;font-weight:600}
.res-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.story-prev{margin-top:16px;border-radius:18px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.story-prev img{width:100%}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#14082a;color:#fff;padding:10px 18px;border-radius:30px;font-size:14px;white-space:nowrap;z-index:40;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}