@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700 900;font-display:swap}
:root{--ink:#0f172a;--muted:#64748b;--sky:#075985;--cyan:#06b6d4;--blue:#2563eb;--gold:#fbbf24;--green:#16a34a;--red:#ef4444;--purple:#7c3aed;--paper:#f8fafc;--glass:rgba(255,255,255,.88);--safe-top:max(16px,env(safe-area-inset-top));--safe-bottom:max(14px,env(safe-area-inset-bottom));font-family:Vazirmatn,Tahoma,Arial,sans-serif;color:var(--ink);background:#073b4c;font-synthesis:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% 0,#0e7490,#075985 45%,#082f49);touch-action:manipulation}
button,input{font:inherit}
button{border:0;cursor:pointer;color:inherit}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid #fbbf24;outline-offset:3px}
#app{position:relative;width:100%;height:100%;max-width:520px;margin:auto;overflow:hidden;background:#eef9ff;box-shadow:0 0 80px rgba(0,0,0,.32)}
.boot-loader{height:100%;display:grid;place-content:center;gap:24px;justify-items:center;background:linear-gradient(165deg,#083344,#075985 52%,#06b6d4)}
.boot-loader img{filter:drop-shadow(0 16px 28px rgba(0,0,0,.25));animation:bootPulse 1.25s ease-in-out infinite}
.boot-loader span{width:110px;height:5px;border-radius:10px;background:rgba(255,255,255,.24);overflow:hidden;position:relative}
.boot-loader span:after{content:"";position:absolute;inset:0;width:45%;border-radius:inherit;background:#fbbf24;animation:loading 1s ease-in-out infinite}
@keyframes bootPulse{50%{transform:translateY(-8px) rotate(-3deg)}}@keyframes loading{0%{transform:translateX(-120%)}100%{transform:translateX(250%)}}
.app-shell{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(#dff8ff,#f8fafc 45%)}
.screen{position:absolute;inset:0;display:none;overflow:hidden;padding:max(18px,var(--safe-top)) 18px var(--safe-bottom);isolation:isolate}
.screen.is-active{display:flex;flex-direction:column;animation:screenIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.scroll-screen{overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(92px + var(--safe-bottom))}
.ambient{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;z-index:-1}.ambient.a{width:240px;height:240px;right:-90px;top:-80px;background:#67e8f9}.ambient.b{width:190px;height:190px;left:-90px;bottom:8%;background:#fde68a}
.icon-btn{min-width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.82);box-shadow:0 8px 22px rgba(15,23,42,.1);font-size:21px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;position:relative;z-index:4}
.topbar h1{font-size:20px;margin:0;line-height:1.25}.topbar p{margin:2px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;gap:8px}.coin-pill,.record-pill{height:42px;padding:0 13px;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 8px 24px rgba(15,23,42,.09);display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px}.coin-dot{width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#fde68a,#f59e0b);border:2px solid #fff3;box-shadow:inset 0 -3px 0 #d97706;display:grid;place-items:center;font-size:12px}
.brand-block{text-align:center;margin:clamp(10px,4vh,34px) auto 8px}.brand-block img{width:clamp(90px,25vw,126px);filter:drop-shadow(0 14px 18px rgba(8,47,73,.24))}.brand-block h1{margin:8px 0 0;font-size:clamp(29px,8vw,42px);letter-spacing:-1px;color:#083344}.brand-block p{margin:2px 0;color:#0e7490;font-size:13px;font-weight:700}
.selected-hero{height:150px;border-radius:28px;margin:10px 0 14px;position:relative;overflow:hidden;background:linear-gradient(125deg,#0e7490,#2563eb);box-shadow:0 18px 38px rgba(14,116,144,.24);color:#fff;display:flex;align-items:center;padding:20px}.selected-hero:before{content:"";position:absolute;width:190px;height:190px;border:30px solid rgba(255,255,255,.1);border-radius:50%;left:-50px;top:-70px}.selected-hero img{height:178px;width:119px;object-fit:contain;align-self:flex-end;filter:drop-shadow(0 10px 10px rgba(0,0,0,.25));z-index:1}.selected-copy{z-index:1;flex:1}.selected-copy small{opacity:.75}.selected-copy h2{margin:2px 0 4px;font-size:24px}.selected-copy span{font-size:12px;opacity:.9}.hero-change{position:absolute;bottom:14px;inset-inline-end:14px;height:38px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.17);color:#fff;font-size:12px;font-weight:800;backdrop-filter:blur(6px)}
.primary-btn{min-height:58px;border-radius:18px;padding:0 22px;background:linear-gradient(135deg,#fbbf24,#f97316);color:#422006;font-weight:900;font-size:18px;box-shadow:0 12px 0 #c2410c,0 20px 35px rgba(194,65,12,.22);transition:transform .12s,box-shadow .12s;display:flex;align-items:center;justify-content:center;gap:10px}.primary-btn:active{transform:translateY(7px);box-shadow:0 5px 0 #c2410c,0 10px 20px rgba(194,65,12,.18)}.primary-btn.small{min-height:50px;font-size:15px;box-shadow:0 7px 0 #c2410c}.primary-btn.blue{background:linear-gradient(135deg,#22d3ee,#2563eb);color:white;box-shadow:0 8px 0 #1d4ed8}.secondary-btn{min-height:50px;border-radius:16px;background:#fff;color:#0f172a;font-weight:800;box-shadow:0 8px 20px rgba(15,23,42,.09);padding:0 18px}.danger-btn{color:#dc2626;background:#fee2e2}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:23px}.menu-tile{min-height:76px;border-radius:19px;background:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(15,23,42,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:800}.menu-tile .emoji{font-size:25px;line-height:1}
.legal-note{text-align:center;color:#64748b;font-size:10px;margin:auto 0 2px;padding-top:12px}.home-top{display:flex;justify-content:space-between;align-items:center}
.screen-title{margin:14px 0 3px;font-size:28px;line-height:1.25}.screen-subtitle{margin:0 0 17px;color:var(--muted);font-size:13px}
.card{background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:24px;box-shadow:0 12px 34px rgba(15,23,42,.09);padding:18px}
.character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.character-card{position:relative;height:218px;border-radius:24px;padding:10px;overflow:hidden;background:linear-gradient(160deg,#fff,#dbeafe);border:3px solid transparent;box-shadow:0 10px 24px rgba(15,23,42,.1);text-align:start}.character-card[data-character="striker"]{background:linear-gradient(160deg,#fff,#fee2e2)}.character-card[data-character="tsubasa"]{background:linear-gradient(160deg,#fff,#dbeafe)}.character-card[data-character="kakeru"]{background:linear-gradient(160deg,#fff,#ffedd5)}.character-card.is-selected{border-color:#f59e0b;box-shadow:0 0 0 4px #fef3c7,0 12px 28px rgba(245,158,11,.22)}.character-card img{position:absolute;width:124px;height:186px;object-fit:contain;bottom:4px;inset-inline-end:-2px;filter:drop-shadow(0 8px 7px rgba(15,23,42,.2))}.character-card h3{position:relative;margin:4px 0 0;font-size:17px;z-index:1}.character-card p{position:relative;margin:2px 0;color:var(--muted);font-size:10px;z-index:1;max-width:70px}.character-card .check{display:none;position:absolute;top:10px;inset-inline-end:10px;width:28px;height:28px;border-radius:50%;background:#f59e0b;color:#fff;place-items:center;font-weight:900;z-index:2}.character-card.is-selected .check{display:grid}.start-sticky{position:sticky;bottom:0;padding:18px 0 4px;background:linear-gradient(transparent,#f8fafc 30%);z-index:3}.start-sticky .primary-btn{width:100%}
.back-row{display:flex;align-items:center;gap:12px}.back-row .icon-btn{flex:none}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.stat-card{border-radius:22px;background:#fff;padding:18px;box-shadow:0 9px 24px rgba(15,23,42,.08)}.stat-card strong{display:block;font-size:28px;color:#0369a1}.stat-card span{font-size:12px;color:var(--muted)}
.setting-row{min-height:62px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-row:last-child{border-bottom:0}.setting-row label{font-weight:800}.setting-row small{display:block;color:var(--muted);font-size:11px}.toggle{width:54px;height:31px;border-radius:20px;background:#cbd5e1;padding:3px;transition:.2s}.toggle:after{content:"";display:block;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0002;transition:.2s}.toggle.is-on{background:#16a34a}.toggle.is-on:after{transform:translateX(-23px)}[dir="ltr"] .toggle.is-on:after{transform:translateX(23px)}
.language-switch{display:flex;background:#e2e8f0;border-radius:13px;padding:3px}.language-switch button{height:35px;padding:0 13px;border-radius:10px;background:transparent;font-weight:800;font-size:12px}.language-switch button.is-active{background:#fff;box-shadow:0 3px 8px #0f172a1a;color:#0369a1}
.help-step{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}.help-step .num{width:34px;height:34px;flex:none;border-radius:12px;background:#cffafe;color:#0e7490;display:grid;place-items:center;font-weight:900}.help-step h3{margin:0 0 3px;font-size:15px}.help-step p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}.mini-field{height:165px;border-radius:22px;background:linear-gradient(#7dd3fc 0 36%,#16a34a 36%);position:relative;overflow:hidden;margin-bottom:16px}.mini-field:after{content:"";position:absolute;inset:50% 18% auto;height:3px;background:#ffffffbb;box-shadow:0 26px #ffffff77,0 52px #ffffff77}.mini-goal{position:absolute;width:58%;height:44%;left:21%;top:20%;border:5px solid white;border-bottom:0}.mini-ball{position:absolute;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 24%,#111 25% 34%,#fff 35% 52%,#111 53% 65%,#fff 66%);left:calc(50% - 14px);bottom:15px;animation:demoShot 2s ease-in-out infinite}@keyframes demoShot{0%,22%{transform:none}65%,80%{transform:translate(55px,-100px) scale(.55)}100%{transform:none}}
.skin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.skin-card{height:155px;border-radius:23px;background:#fff;padding:14px;box-shadow:0 8px 22px rgba(15,23,42,.08);position:relative;text-align:center;border:3px solid transparent}.skin-card.is-selected{border-color:#22c55e}.skin-ball{width:68px;height:68px;margin:2px auto 8px;border-radius:50%;background:var(--ball-bg);box-shadow:inset -8px -10px 16px #0002,0 8px 16px #0f172a20}.skin-card h3{margin:0;font-size:14px}.skin-card p{margin:2px 0;color:#b45309;font-size:11px;font-weight:800}.skin-card .lock{position:absolute;top:10px;inset-inline-end:10px}.skin-classic{--ball-bg:radial-gradient(circle at 35% 28%,#fff 0 26%,#111 27% 37%,#fff 38% 57%,#111 58% 68%,#fff 69%)}.skin-gold{--ball-bg:radial-gradient(circle at 35% 30%,#fef3c7,#f59e0b 55%,#92400e)}.skin-neon{--ball-bg:radial-gradient(circle at 35% 30%,#ecfeff,#22d3ee 42%,#7c3aed 76%,#111827)}.skin-fire{--ball-bg:radial-gradient(circle at 35% 30%,#fff7ed,#fb923c 40%,#dc2626 72%,#450a0a)}
.wheel-wrap{display:grid;place-items:center;margin:16px auto 25px;position:relative;width:260px;height:270px}.wheel-pointer{position:absolute;top:0;width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:36px solid #ef4444;z-index:2;filter:drop-shadow(0 5px 3px #0003)}.wheel{width:245px;height:245px;border-radius:50%;border:10px solid #fff;box-shadow:0 18px 34px #0f172a26;background:conic-gradient(#fbbf24 0 60deg,#22d3ee 60deg 120deg,#a78bfa 120deg 180deg,#fb7185 180deg 240deg,#34d399 240deg 300deg,#60a5fa 300deg);display:grid;place-items:center;transition:transform 3.2s cubic-bezier(.12,.72,.12,1)}.wheel:after{content:"⚽";width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:30px;box-shadow:0 5px 12px #0003}.wheel-labels{position:absolute;inset:0;pointer-events:none}.wheel-labels span{position:absolute;font-weight:900;color:#0f172a;font-size:12px}.wheel-labels span:nth-child(1){top:38px;left:111px}.wheel-labels span:nth-child(2){top:80px;right:23px}.wheel-labels span:nth-child(3){bottom:70px;right:30px}.wheel-labels span:nth-child(4){bottom:26px;left:110px}.wheel-labels span:nth-child(5){bottom:70px;left:29px}.wheel-labels span:nth-child(6){top:80px;left:23px}
.milestones{position:relative;padding:6px 0}.milestones:before{content:"";position:absolute;top:30px;bottom:30px;inset-inline-start:28px;width:5px;border-radius:9px;background:#cbd5e1}.milestone{position:relative;display:flex;gap:15px;align-items:center;margin:0 0 15px;min-height:64px}.milestone-dot{width:61px;height:61px;border-radius:20px;background:#e2e8f0;display:grid;place-items:center;font-weight:900;z-index:1;border:5px solid #f8fafc}.milestone.is-done .milestone-dot{background:linear-gradient(145deg,#4ade80,#16a34a);color:white}.milestone-copy{flex:1;background:#fff;border-radius:17px;padding:12px 15px;box-shadow:0 7px 18px #0f172a12}.milestone-copy h3{margin:0;font-size:14px}.milestone-copy p{margin:1px 0;color:var(--muted);font-size:11px}.achievement{display:flex;gap:12px;align-items:center;margin-bottom:10px;background:#fff;border-radius:19px;padding:13px;opacity:.56}.achievement.is-earned{opacity:1;box-shadow:0 8px 20px #0f172a12}.achievement-icon{font-size:26px;width:45px;height:45px;border-radius:15px;background:#fef3c7;display:grid;place-items:center}.achievement h3{margin:0;font-size:14px}.achievement p{margin:2px 0 0;color:var(--muted);font-size:11px}
.toast{position:absolute;z-index:100;left:50%;bottom:calc(24px + var(--safe-bottom));transform:translate(-50%,130px);min-width:210px;max-width:88%;padding:13px 18px;border-radius:16px;background:#0f172a;color:#fff;text-align:center;font-size:13px;font-weight:700;box-shadow:0 14px 34px #0005;transition:.28s;pointer-events:none}.toast.is-visible{transform:translate(-50%,0)}
.overlay{position:absolute;z-index:80;inset:0;display:none;place-items:center;background:rgba(8,47,73,.65);backdrop-filter:blur(7px);padding:20px var(--safe-bottom)}.overlay.is-open{display:grid;animation:fadeIn .2s}.dialog{width:min(100%,410px);max-height:92%;overflow-y:auto;background:#fff;border-radius:30px;padding:24px;text-align:center;box-shadow:0 28px 60px #0005;animation:dialogIn .28s cubic-bezier(.2,.9,.3,1.3)}@keyframes fadeIn{from{opacity:0}}@keyframes dialogIn{from{transform:translateY(20px) scale(.9);opacity:0}}.dialog-icon{width:78px;height:78px;border-radius:25px;background:#fef3c7;display:grid;place-items:center;margin:-5px auto 10px;font-size:38px}.dialog h2{margin:5px 0;font-size:25px}.dialog p{margin:0 0 18px;color:var(--muted);font-size:13px}.result-score{font-size:58px;line-height:1;font-weight:900;color:#0369a1}.result-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.result-meta div{background:#f1f5f9;border-radius:16px;padding:10px}.result-meta strong{display:block;font-size:18px}.result-meta span{font-size:10px;color:var(--muted)}.dialog-actions{display:grid;gap:11px}.dialog-actions.two{grid-template-columns:repeat(2,1fr)}
.settings-dialog{text-align:start}.settings-dialog h2{text-align:center}.copyright-note{font-size:10px!important;line-height:1.7;background:#fff7ed;padding:10px;border-radius:12px;color:#9a3412!important}
@media(max-height:700px){.brand-block{margin:3px auto 2px}.brand-block img{width:76px}.brand-block h1{font-size:27px}.selected-hero{height:128px}.selected-hero img{height:150px}.menu-grid{margin-top:16px}.menu-tile{min-height:64px}.legal-note{display:none}.character-card{height:190px}.character-card img{height:160px;width:107px}}
@media(max-width:350px){.screen{padding-inline:12px}.menu-grid{gap:6px}.menu-tile{border-radius:15px}.character-grid{gap:8px}.character-card{height:194px}.selected-hero{padding:15px}.screen-title{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.toggle{position:relative}.toggle:after{position:absolute;left:3px;top:3px;display:block}.toggle.is-on:after,[dir="ltr"] .toggle.is-on:after{transform:translateX(23px)}
.selected-hero img,.character-card img{object-fit:cover}