*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#3fc4c9;font-family:Vazirmatn,sans-serif;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.scr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 24px);pointer-events:none;color:#fff}
.scr.show{display:flex}
.scr button{pointer-events:auto}
.grow{flex:1}
#loading{background:radial-gradient(circle at 50% 30%,#7fe6e0,#1e9aa6);justify-content:center;gap:18px;pointer-events:auto}
.logoimg{width:70%;max-width:360px}
.bar{width:60%;max-width:280px;height:14px;border-radius:9px;background:#0d5f69;overflow:hidden;border:2px solid #fff}
.bar i{display:block;height:100%;width:0;background:linear-gradient(#ffc93a,#ff8a1c);transition:width .2s}
.logo{display:flex;flex-direction:column;align-items:center;margin-top:22px;animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
.title{font-family:Lalezar,Vazirmatn;font-size:clamp(54px,17vw,84px);line-height:1.15;color:#fff;-webkit-text-stroke:3px #1d2a5c;paint-order:stroke fill;text-shadow:0 6px 0 #1d2a5c;transform:rotate(-3deg)}
.title .y{color:#ffd23a}
.sub{margin-top:-6px;background:linear-gradient(#ff5fb0,#d61f7c);border:3px solid #fff;box-shadow:0 4px 0 #1d2a5c;border-radius:10px;padding:2px 18px;font-weight:900;font-size:17px;line-height:1.7;transform:rotate(-3deg)}
.play{font-family:Lalezar,Vazirmatn;font-size:36px;line-height:1.5;color:#fff;-webkit-text-stroke:2px #8a3200;paint-order:stroke fill;min-width:220px;padding:6px 40px;border-radius:40px;border:4px solid #4a1d00;background:linear-gradient(#ffb23f 0%,#ff7a12 55%,#e85a00 100%);box-shadow:inset 0 4px 0 #ffd88c,0 7px 0 #4a1d00;cursor:pointer;animation:pulse 1.3s ease-in-out infinite}
.play:active{transform:translateY(4px) scale(.97);box-shadow:inset 0 4px 0 #ffd88c,0 3px 0 #4a1d00}
.sec,.skin{font-family:Vazirmatn;font-weight:900;font-size:18px;color:#fff;padding:8px 26px;border-radius:30px;border:3px solid #0d3e60;background:linear-gradient(#4fd6ff,#1e8fe0);box-shadow:0 5px 0 #0d3e60;margin-bottom:14px;cursor:pointer;line-height:1.7}
.ib{width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:#1fa5b0;box-shadow:0 4px 0 #0b5d66;display:grid;place-items:center;cursor:pointer;pointer-events:auto}
.ib img{width:32px;height:32px}
.mute{position:absolute;inset-inline-end:14px;bottom:calc(env(safe-area-inset-bottom) + 18px);z-index:5}
.top{display:flex;width:100%;gap:8px;align-items:center;justify-content:space-between}
.pill{background:rgba(13,50,80,.65);border:2px solid #fff;border-radius:20px;padding:2px 14px;font-weight:900;font-size:17px;line-height:1.7;display:flex;gap:6px;align-items:center}
.pill img{width:22px}
.prog{width:70%;height:10px;border-radius:6px;background:rgba(0,0,0,.3);margin-top:10px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:#9cff4a}
.big{margin-top:22vh;font-family:Lalezar,Vazirmatn;font-size:clamp(40px,13vw,64px);line-height:1.4;-webkit-text-stroke:3px #1d2a5c;paint-order:stroke fill;text-shadow:0 5px 0 #1d2a5c;text-align:center;opacity:0;transform:scale(.5);transition:all .25s cubic-bezier(.3,1.6,.5,1)}
.big.on{opacity:1;transform:scale(1)}
.hint{margin-top:auto;margin-bottom:70px;background:rgba(13,50,80,.6);padding:6px 16px;border-radius:16px;font-weight:700;line-height:1.7;transition:opacity .4s}
.dim{background:rgba(10,40,60,.55);justify-content:center;pointer-events:auto}
.card{background:linear-gradient(#ffffff,#d9f6f7);color:#1d2a5c;border:4px solid #1d2a5c;border-radius:26px;padding:22px 26px;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(86vw,340px);box-shadow:0 8px 0 #1d2a5c;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.card h2{font-family:Lalezar,Vazirmatn;font-size:38px;line-height:1.5}
.card p{font-weight:700;font-size:18px;line-height:1.7;text-align:center}
.card img{width:84px}
.card .play{font-size:28px;min-width:200px;margin:8px 0}
.card .sec{margin-bottom:4px}
.hd{font-family:Lalezar,Vazirmatn;font-size:40px;-webkit-text-stroke:2px #1d2a5c;paint-order:stroke fill;text-shadow:0 4px 0 #1d2a5c;line-height:1.5}
.nm{font-family:Lalezar,Vazirmatn;font-size:32px;-webkit-text-stroke:2px #1d2a5c;paint-order:stroke fill;line-height:1.4}
.sw{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:320px;margin:8px 0}
.sw button{width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 0 #1d2a5c;cursor:pointer}
.sw button.on{outline:4px solid #ffd23a;transform:scale(1.12)}
.row{display:flex;gap:14px;align-items:center;font-weight:900;margin-bottom:14px;line-height:1.7}
.arrow{width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:#ff7a12;color:#fff;font-size:28px;font-weight:900;box-shadow:0 3px 0 #4a1d00;cursor:pointer;line-height:1}
@keyframes pulse{50%{transform:scale(1.05)}}
@keyframes pop{from{transform:scale(.4);opacity:0}}