:root{--aia-red: #d31145;--aia-red-dark: #a30d36;--grass: #4caf50;--grass-dark: #388e3c;--sky: #87ceeb}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100vh;height:100svh;height:100dvh;overflow:hidden;font-family:-apple-system,PingFang TC,Microsoft JhengHei,Helvetica Neue,Arial,sans-serif;background:#000;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}#app{position:relative;width:100vw;height:100vh;height:100svh;height:100dvh;max-width:480px;margin:0 auto;overflow:hidden;background:linear-gradient(180deg,#ffd9e1,#ffa9bd);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;transition:opacity .4s ease,visibility 0s linear 0s}.screen.hidden{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}#langScreen{background:linear-gradient(180deg,#ffe6ec 0%,#ffa9bd 50%,var(--aia-red) 100%);justify-content:center;align-items:center;z-index:200;padding:0 24px}.lang-content{text-align:center;width:100%;max-width:340px;animation:titleJumpIn .7s cubic-bezier(.4,1.7,.55,1) backwards}.lang-mascot{font-size:64px;margin-bottom:8px;animation:ballSpin 2s linear infinite}.lang-title{font-size:28px;font-weight:900;color:#fff;letter-spacing:3px;margin-bottom:4px;text-shadow:-2px -2px 0 var(--aia-red),2px -2px 0 var(--aia-red),-2px 2px 0 var(--aia-red),2px 2px 0 var(--aia-red),0 5px 0 var(--aia-red-dark)}.lang-subtitle{color:#fff;font-size:14px;margin-bottom:28px;opacity:.9;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.lang-buttons{display:flex;flex-direction:column;gap:14px}.lang-btn{display:flex;align-items:center;gap:14px;padding:16px 22px;background:#fff;border:3px solid #fff;border-radius:16px;font-size:18px;font-weight:800;color:#333;cursor:pointer;box-shadow:0 6px #00000026,0 10px 20px #0003;transition:transform .12s,box-shadow .12s}.lang-btn:active{transform:translateY(4px);box-shadow:0 2px #00000026,0 6px 14px #0003}.lang-btn:hover{border-color:var(--aia-red)}.lang-flag{font-size:28px}.lang-name{letter-spacing:2px}.lang-switch-btn{position:absolute;top:14px;right:16px;background:#0000008c;color:#fff;border:2px solid #fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;box-shadow:0 3px 8px #0000004d}#preloadScreen{background:linear-gradient(180deg,var(--aia-red) 0%,var(--aia-red-dark) 100%);justify-content:center;align-items:center;z-index:100}.preload-content{text-align:center;color:#fff;padding:0 24px;width:100%;max-width:360px}.preload-mascot{font-size:64px;margin-bottom:12px;animation:ballSpin 1.4s linear infinite}@keyframes ballSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}.preload-title{font-size:22px;font-weight:900;letter-spacing:6px;margin-bottom:22px;animation:pulse 1.2s ease-in-out infinite}.preload-bar{width:100%;height:16px;background:#ffffff38;border-radius:999px;overflow:hidden;border:2px solid #fff;box-shadow:0 4px 10px #0000004d}.preload-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffd54f,#ff9800);transition:width .25s ease}.preload-text{margin-top:14px;font-size:14px;letter-spacing:3px;opacity:.9;font-weight:700}#startScreen{background-image:url(/assets/game-start-bg_v2_no-character.png);background-size:cover;background-position:center center;background-repeat:no-repeat;padding:0;justify-content:space-between}.start-bg-video,.scene-bg-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;background:#000}#startScreen:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(180deg,#0000002e,#0000 22%,#0000 70%,#00000040);pointer-events:none}.title-block{position:absolute;top:clamp(50px,8%,80px);left:0;right:0;z-index:2;text-align:center;padding:0 12px}.title-img{display:inline-block;width:clamp(220px,68vw,340px);max-height:24vh;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));transform-origin:center;animation:titleJumpIn .95s cubic-bezier(.4,1.7,.55,1) backwards,titleBob 2.4s ease-in-out .95s infinite}@keyframes titleJumpIn{0%{transform:translateY(-110vh) scale(.3) rotate(-22deg);opacity:0}55%{transform:translateY(28px) scale(1.18) rotate(9deg);opacity:1}72%{transform:translateY(-10px) scale(.94) rotate(-5deg)}86%{transform:translateY(5px) scale(1.03) rotate(2deg)}to{transform:translateY(0) scale(1) rotate(0)}}@keyframes titleBob{0%,to{transform:translateY(0) rotate(-1.8deg) scale(1)}50%{transform:translateY(-9px) rotate(1.8deg) scale(1.03)}}.start-bottom{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));z-index:5;display:flex;justify-content:center;padding:0 16px;pointer-events:none}.start-bottom>*{pointer-events:auto}.start-btn{background:linear-gradient(180deg,#ff2a5f 0%,var(--aia-red) 50%,var(--aia-red-dark) 100%);color:#fff;border:3px solid #fff;font-size:clamp(18px,5vw,22px);font-weight:900;padding:clamp(12px,3.5vw,16px) clamp(28px,9vw,44px);border-radius:999px;box-shadow:0 6px 0 var(--aia-red-dark),0 10px 20px #00000059;cursor:pointer;letter-spacing:clamp(3px,1.2vw,6px);transition:transform .08s;animation:btnPulse 1.5s ease-in-out infinite;white-space:nowrap}.start-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--aia-red-dark),0 6px 14px #00000059}@keyframes btnPulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}#characterScreen{background-image:url(/assets/football-match-game-background.png);background-size:cover;background-position:center center;background-color:#1d4d8a;justify-content:flex-start;padding:0 14px;overflow:hidden}#characterScreen:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(180deg,#0f28508c,#0f285040 35%,#0f28508c);pointer-events:none}.char-title{position:relative;z-index:2;margin-top:clamp(12px,2.4vh,30px);font-size:clamp(22px,6.5vw,32px);font-weight:900;letter-spacing:4px;text-align:center;color:#fff8d6;text-shadow:-2px -2px 0 #b34700,2px -2px 0 #b34700,-2px 2px 0 #b34700,2px 2px 0 #b34700,0 5px 0 #6a2a00,0 0 14px rgba(255,200,80,.6);font-style:italic;transform:perspective(400px) rotateX(10deg);font-family:Impact,Arial Black,-apple-system,sans-serif;animation:charTitleBob 2.4s ease-in-out infinite}@keyframes charTitleBob{0%,to{transform:perspective(400px) rotateX(10deg) translateY(0) scale(1)}50%{transform:perspective(400px) rotateX(10deg) translateY(-4px) scale(1.03)}}.char-showcase{position:relative;z-index:2;width:100%;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 0 6px;min-height:0;overflow:hidden}.char-showcase.is-empty .char-showcase-img{visibility:hidden}.char-showcase.is-empty .char-class,.char-showcase.is-empty .char-stats{display:none}.char-showcase.is-empty .char-showcase-name{font-size:clamp(20px,5.5vw,28px);letter-spacing:3px}.char-showcase-img{flex:0 1 auto;min-height:0;max-height:clamp(90px,20vh,200px);max-width:50%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,220,120,.55)) drop-shadow(0 10px 14px rgba(0,0,0,.45));animation:charShowcasePop .35s cubic-bezier(.4,1.7,.55,1)}@keyframes charShowcasePop{0%{transform:scale(.85) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.char-showcase-name{font-size:clamp(18px,5.4vw,26px);font-weight:900;letter-spacing:2px;margin-top:2px;color:#6bd6ff;font-style:italic;font-family:Impact,Arial Black,-apple-system,sans-serif;text-shadow:-2px -2px 0 #082d4a,2px -2px 0 #082d4a,-2px 2px 0 #082d4a,2px 2px 0 #082d4a,0 4px 0 #021622,0 0 12px rgba(107,214,255,.7);transform:perspective(400px) rotateX(8deg);text-align:center;max-width:100%;padding:0 10px;line-height:1.05;word-spacing:-2px}.char-class{font-size:clamp(11px,3vw,14px);letter-spacing:2px;font-weight:900;color:#ffd54f;text-shadow:-1.5px -1.5px 0 #6a2a00,1.5px -1.5px 0 #6a2a00,-1.5px 1.5px 0 #6a2a00,1.5px 1.5px 0 #6a2a00,0 3px 0 rgba(0,0,0,.4);text-align:center;min-height:1em;margin-top:0;line-height:1.1}.char-stats{display:grid;grid-template-columns:auto auto;gap:2px 8px;margin-top:4px;padding:5px 10px;background:#00000073;border:2px solid rgba(255,255,255,.6);border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:titleJumpIn .4s cubic-bezier(.4,1.7,.55,1) backwards}.char-stats[hidden]{display:none}.char-stat{display:contents}.char-stat-label{font-size:9px;letter-spacing:1px;font-weight:900;color:#fff;align-self:center;text-align:right;white-space:nowrap}.char-stat-bar{display:inline-flex;gap:2px;align-items:center}.char-stat-bar i{display:block;width:8px;height:8px;border-radius:50%;background:#ffffff2e;border:1px solid rgba(255,255,255,.4)}.char-stat-bar i.on{background:linear-gradient(180deg,#ffe26b,#ff9800);border-color:#fff;box-shadow:0 0 6px #ffc850b3}.char-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;max-width:260px;margin:4px auto 0;padding-bottom:clamp(74px,11vh,88px)}.char-card{position:relative;aspect-ratio:1 / 1;background:linear-gradient(180deg,#fff,#ffe1e8);border:3px solid #fff;border-radius:12px;padding:0;cursor:pointer;box-shadow:inset 0 0 0 2px #0000000d,0 4px 10px #0006;transition:transform .12s,box-shadow .12s,border-color .12s;outline:none}.char-card img{width:88%;height:88%;object-fit:contain;display:block;margin:6% auto}.char-card:active{transform:scale(.96)}.char-card.selected{border-color:#fff;box-shadow:0 0 0 3px #6bd6ff,0 0 16px 4px #6bd6ffb3,0 0 28px #ffc85066;animation:charCardGlow 1.2s ease-in-out infinite}@keyframes charCardGlow{0%,to{box-shadow:0 0 0 3px #6bd6ff,0 0 14px 3px #6bd6ff99,0 0 26px #ffc85059}50%{box-shadow:0 0 0 3px #ffd54f,0 0 20px 5px #ffc850d9,0 0 36px #6bd6ff8c}}.char-card-tag{position:absolute;top:-10px;left:50%;transform:translate(-50%);background:linear-gradient(180deg,#ff5a8e,#d31145);color:#fff;font-size:11px;font-weight:900;letter-spacing:2px;padding:3px 10px;border-radius:999px;border:2px solid #fff;box-shadow:0 3px 8px #0006;opacity:0;pointer-events:none;transition:opacity .15s;font-family:Impact,Arial Black,-apple-system,sans-serif}.char-card.selected .char-card-tag{opacity:1}.char-bottom{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;z-index:5;padding:0 16px}.char-confirm-btn{padding:10px 28px;font-size:clamp(16px,4.5vw,20px);letter-spacing:4px}.char-confirm-btn[disabled]{filter:grayscale(.6);opacity:.55;pointer-events:none;animation:none}.class-banner{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%) scale(.6);z-index:14;pointer-events:none;opacity:0;text-align:center;background:linear-gradient(180deg,#000000b3,#00000073);padding:14px 28px;border-radius:14px;border:3px solid #ffd54f;box-shadow:0 0 0 3px var(--aia-red),0 12px 26px #0000008c;white-space:nowrap}.class-banner.show{animation:classBannerPop 1.8s ease-out forwards}@keyframes classBannerPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-6deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}32%{transform:translate(-50%,-50%) scale(.95) rotate(-1deg)}46%{transform:translate(-50%,-50%) scale(1.02) rotate(0)}80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1.1) rotate(0)}}.class-banner-class{font-size:clamp(22px,6.5vw,30px);font-weight:900;letter-spacing:5px;color:#ffd54f;font-style:italic;font-family:Impact,Arial Black,-apple-system,sans-serif;text-shadow:-2px -2px 0 #6a2a00,2px -2px 0 #6a2a00,-2px 2px 0 #6a2a00,2px 2px 0 #6a2a00,0 4px 0 #2c1100}.class-banner-name{margin-top:2px;font-size:clamp(11px,3vw,14px);letter-spacing:2px;font-weight:800;color:#fff;opacity:.9;max-width:80vw;word-spacing:-2px}.match-start-banner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) scale(.4);z-index:16;pointer-events:none;opacity:0;text-align:center;padding:18px 32px;border-radius:18px;background:linear-gradient(180deg,var(--aia-red) 0%,var(--aia-red-dark) 100%);border:4px solid #ffd54f;box-shadow:0 0 0 3px var(--aia-red-dark),0 0 22px #ffc8508c,0 14px 30px #0000008c;white-space:nowrap}.match-start-banner.show{animation:matchStartPop 1.5s ease-out forwards}@keyframes matchStartPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-10deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(5deg)}34%{transform:translate(-50%,-50%) scale(.92) rotate(-2deg)}50%{transform:translate(-50%,-50%) scale(1.04) rotate(1deg)}78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1.15) rotate(0)}}.match-start-title{font-size:clamp(28px,8.5vw,40px);font-weight:900;letter-spacing:6px;color:#fff;font-style:italic;font-family:Impact,Arial Black,-apple-system,sans-serif;text-shadow:-2px -2px 0 #6a2a00,2px -2px 0 #6a2a00,-2px 2px 0 #6a2a00,2px 2px 0 #6a2a00,0 5px 0 #2c1100}.match-start-subtitle{margin-top:4px;font-size:clamp(12px,3.4vw,15px);letter-spacing:3px;font-weight:800;color:#ffd54f;opacity:.95}.tutorial-badge{position:absolute;top:56px;left:50%;transform:translate(-50%);background:linear-gradient(180deg,#ffd54f,#ff9800);color:#fff;font-size:12px;font-weight:900;letter-spacing:4px;padding:6px 16px;border-radius:999px;border:2px solid #fff;box-shadow:0 4px 10px #0006;z-index:6;display:none;animation:pulse 1.4s ease-in-out infinite}.tutorial-badge.show{display:block}.tutorial-skip-btn{position:absolute;top:12px;right:14px;background:#000000a6;color:#fff;border:2px solid #fff;font-size:11px;font-weight:800;letter-spacing:1px;padding:7px 12px;border-radius:999px;cursor:pointer;z-index:6;display:none;box-shadow:0 3px 8px #00000059}.tutorial-skip-btn.show{display:block}.tutorial-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:24px 18px;z-index:20}.tutorial-overlay.show{display:flex}.tutorial-card{width:100%;max-width:320px;background:linear-gradient(180deg,#fff,#ffe1e8);border:3px solid #fff;border-radius:18px;padding:20px 18px 18px;text-align:center;box-shadow:0 16px 40px #0000008c;animation:titleJumpIn .55s cubic-bezier(.4,1.7,.55,1) backwards}.tutorial-icon{font-size:44px;margin-bottom:4px;animation:ballSpin 2s linear infinite}.tutorial-step-title{font-size:22px;font-weight:900;letter-spacing:3px;color:var(--aia-red-dark);margin-bottom:14px}.tutorial-steps{list-style:none;text-align:left;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}.tutorial-steps li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#444;line-height:1.35}.tut-step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--aia-red);color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:0 3px 0 var(--aia-red-dark)}.tutorial-note{font-size:12px;color:#777;margin-bottom:14px;letter-spacing:1px}.tutorial-begin-btn{padding:12px 28px;font-size:16px;letter-spacing:3px}.lb-btn{background:#0000008c;color:#fff;border:2px solid #fff;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 3px 8px #0000004d;display:inline-flex;align-items:center;gap:6px}.lb-btn:active{transform:translateY(2px)}.lb-btn-fixed{position:absolute;top:14px;left:64px;z-index:10}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px 16px;z-index:80;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-overlay.show{opacity:1;pointer-events:auto}.modal-card{background:#fff;border-radius:18px;width:100%;max-width:360px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 50px #00000073;transform:scale(.85) translateY(20px);transition:transform .25s cubic-bezier(.5,1.6,.5,1)}.modal-overlay.show .modal-card{transform:scale(1) translateY(0)}.modal-header{background:linear-gradient(180deg,var(--aia-red) 0%,var(--aia-red-dark) 100%);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}.modal-title{font-weight:900;font-size:18px;letter-spacing:2px}.modal-close{background:#fff3;border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:grid;place-items:center}.modal-body{overflow-y:auto;padding:12px 14px}.lb-date-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #eee;background:#fafafa}.lb-date-arrow{width:32px;height:32px;border:1px solid #ddd;background:#fff;border-radius:8px;font-size:20px;font-weight:900;color:var(--aia-red);display:grid;place-items:center;cursor:pointer;transition:background .12s,border-color .12s,transform .08s;flex-shrink:0}.lb-date-arrow:hover:not(:disabled){border-color:var(--aia-red);background:#fff3f5}.lb-date-arrow:active:not(:disabled){transform:scale(.95)}.lb-date-arrow:disabled{opacity:.3;cursor:not-allowed}.lb-date-input{border:1px solid #ddd;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;color:#333;background:#fff;flex-shrink:0}.lb-date-input:focus{outline:none;border-color:var(--aia-red)}.lb-date-label{flex:1;text-align:center;font-size:13px;font-weight:800;color:var(--aia-red-dark);letter-spacing:1px;white-space:nowrap}.lb-row{display:grid;grid-template-columns:32px 1fr 38px 44px 60px;gap:8px;align-items:center;padding:10px 8px;border-radius:10px;font-size:14px;color:#333}.lb-row+.lb-row{border-top:1px dashed #eee}.lb-row.you{background:#4caf5026;border:1px solid rgba(76,175,80,.4)}.lb-rank{text-align:center;font-weight:900;font-size:18px;color:#999}.lb-row.top-1 .lb-rank{color:#f9a825}.lb-row.top-2 .lb-rank{color:#9e9e9e}.lb-row.top-3 .lb-rank{color:#ce8a4e}.lb-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-goals{font-weight:900;color:var(--aia-red);font-size:18px;text-align:right}.lb-acc{color:#888;font-size:12px;text-align:right}.lb-points{font-weight:800;color:#ff9800;font-size:11px;text-align:right;letter-spacing:.3px;white-space:nowrap}.lb-points-empty{color:#ccc;font-weight:400}.lb-empty{padding:40px 16px;text-align:center;color:#888}.name-input-wrap{padding:16px 18px 20px;display:flex;flex-direction:column;gap:14px;align-items:stretch}.name-input-wrap label{font-size:14px;color:#555;text-align:center}.name-input{width:100%;padding:12px 14px;font-size:18px;border:2px solid #ddd;border-radius:10px;text-align:center;font-weight:700;outline:none}.name-input:focus{border-color:var(--aia-red)}.name-buttons{display:flex;gap:10px}.name-btn{flex:1;padding:12px;border:none;border-radius:999px;font-weight:800;cursor:pointer;font-size:15px}.name-btn.primary{background:var(--aia-red);color:#fff;box-shadow:0 4px 0 var(--aia-red-dark)}.name-btn.skip{background:#eee;color:#666}.reward-badge{display:none;margin-top:4px;background:linear-gradient(135deg,#ffd54f,#ff9800);color:#fff;padding:6px 16px;border-radius:999px;font-weight:900;font-size:clamp(12px,3.4vw,15px);border:2px solid #fff;box-shadow:0 4px 12px #0006;z-index:4;white-space:nowrap;letter-spacing:1px;transform:scale(0);transition:transform .4s cubic-bezier(.5,1.8,.5,1)}.reward-badge.show{display:inline-block;transform:scale(1)}.sound-btn{position:absolute;top:14px;left:16px;width:40px;height:40px;border-radius:50%;border:none;background:#00000073;color:#fff;font-size:20px;cursor:pointer;z-index:10;display:grid;place-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#gameScreen{background-image:url(/assets/football-match-game-background.png);background-size:cover;background-position:center top;background-repeat:no-repeat;background-color:#4caf50}#gameCanvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;background:transparent;z-index:1}.hud{position:absolute;top:0;left:0;right:0;padding:12px;display:flex;justify-content:space-between;align-items:center;z-index:5;pointer-events:none}.hud-pill{background:#0000008c;color:#fff;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hud-pill .label{opacity:.75;margin-right:6px;font-weight:500}.hud-pill.urgent{background:#d31145d9;animation:urgentPulse .7s ease-in-out infinite}@keyframes urgentPulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.power-meter{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:26px;height:55%;max-height:320px;min-height:200px;background:linear-gradient(0deg,#ffc107 0%,#ffc107 var(--sweet-low, 45%),#4caf50 var(--sweet-low, 45%),#4caf50 var(--sweet-high, 85%),#f44336 var(--sweet-high, 85%),#f44336 100%);border:3px solid #fff;border-radius:999px;overflow:hidden;z-index:5;display:none;box-shadow:0 4px 12px #0000004d}.power-meter.active{display:block}.power-fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:#0000006b;border-top:3px solid #fff;box-shadow:0 -2px 6px #fffc;transition:height .05s linear}.power-meter:after{content:"";position:absolute;left:0;right:0;top:calc(100% - var(--sweet-high, 85%));height:calc(var(--sweet-high, 85%) - var(--sweet-low, 45%));border-top:2px dashed rgba(255,255,255,.85);border-bottom:2px dashed rgba(255,255,255,.85);pointer-events:none}.power-meter:before{content:"⚡";position:absolute;top:-22px;left:50%;transform:translate(-50%);font-size:14px;text-shadow:0 2px 4px rgba(0,0,0,.4)}.drag-zone{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:2;pointer-events:none;background:linear-gradient(180deg,#fff0,#ffffff0f 35%,#ffffff29);border-top:2px dashed rgba(255,255,255,.4);animation:dragZonePulse 2.4s ease-in-out infinite}@keyframes dragZonePulse{0%,to{border-top-color:#ffffff59}50%{border-top-color:#ffdc64d9}}.finger-hint{position:absolute;left:50%;bottom:36%;transform:translate(-50%);z-index:6;pointer-events:none;display:flex;flex-direction:column-reverse;align-items:center;gap:6px;transition:opacity .35s ease}.finger-hint.hidden{opacity:0}.finger-hint-icon{font-size:56px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));animation:fingerBob 1.1s ease-in-out infinite;transform-origin:50% 100%}@keyframes fingerBob{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.08)}}.finger-hint-text{color:#fff;background:#000000b3;border:2px solid #ffd54f;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:1px;white-space:nowrap;box-shadow:0 4px 10px #00000080}.hint{position:absolute;bottom:50px;left:50%;transform:translate(-50%);color:#fff;background:#0000008c;padding:8px 16px;border-radius:20px;font-weight:700;font-size:13px;line-height:1.4;z-index:5;text-align:center;max-width:calc(100% - 32px);width:max-content;white-space:normal;word-wrap:break-word;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}.result-banner{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:10;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .4s cubic-bezier(.5,1.8,.5,1)}.result-banner.show{transform:translate(-50%,-50%) scale(1)}.result-banner img{width:180px;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}.result-banner.success img{animation:successPop .9s ease-out}.result-banner.fail img{animation:failShake .6s ease-in-out}.result-banner .label{font-size:36px;font-weight:900;color:#fff;letter-spacing:4px;text-shadow:-3px -3px 0 var(--aia-red),3px -3px 0 var(--aia-red),-3px 3px 0 var(--aia-red),3px 3px 0 var(--aia-red),0 6px 0 var(--aia-red-dark)}.result-banner.fail .label{text-shadow:-3px -3px 0 #333,3px -3px 0 #333,-3px 3px 0 #333,3px 3px 0 #333,0 6px 0 #000}@keyframes successPop{0%{transform:scale(.3) rotate(-12deg)}40%{transform:scale(1.25) rotate(8deg)}60%{transform:scale(.9) rotate(-4deg)}to{transform:scale(1) rotate(0)}}@keyframes failShake{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-12px) rotate(-4deg)}40%{transform:translate(12px) rotate(4deg)}60%{transform:translate(-8px) rotate(-2deg)}80%{transform:translate(8px) rotate(2deg)}}.star-burst{position:absolute;pointer-events:none;font-size:36px;animation:starFly 1.1s ease-out forwards}@keyframes starFly{0%{transform:translate(0) scale(.4) rotate(0);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(1.2) rotate(360deg);opacity:0}}#endScreen{background-color:#ff9eb0;padding:0;justify-content:flex-end;overflow:hidden}.end-header{position:absolute;top:calc(8px + env(safe-area-inset-top));left:0;right:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;text-align:center;padding:0 16px}.end-trophy{font-size:clamp(38px,11vw,64px);line-height:1;filter:drop-shadow(0 0 12px rgba(255,220,120,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.45));animation:endTrophyBob 2.2s ease-in-out infinite;transform-origin:50% 100%}@keyframes endTrophyBob{0%,to{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-6px) rotate(2deg) scale(1.04)}}.end-title{font-size:clamp(22px,6.8vw,34px);font-weight:900;letter-spacing:3px;color:#ffd54f;font-style:italic;font-family:Impact,Arial Black,-apple-system,sans-serif;text-shadow:-2px -2px 0 #b34700,2px -2px 0 #b34700,-2px 2px 0 #b34700,2px 2px 0 #b34700,0 5px 0 #6a2a00,0 0 14px rgba(255,200,80,.55);line-height:1.05;max-width:100%}.end-stats-card{position:absolute;left:50%;top:calc(150px + env(safe-area-inset-top));transform:translate(-50%);z-index:3;width:min(82vw,320px);background:linear-gradient(180deg,#fff,#fff8e1);border:5px solid #ffc107;border-radius:22px;padding:14px 22px;display:flex;flex-direction:column;gap:6px;box-shadow:0 0 0 3px #ff9800,0 14px 28px #0006,inset 0 0 0 2px #fff;animation:endStatsPop .55s cubic-bezier(.4,1.7,.55,1) backwards}@keyframes endStatsPop{0%{opacity:0;transform:translate(-50%) translateY(-20px) scale(.85)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.end-stat{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:4px 0}.end-stat-divider{height:2px;background:linear-gradient(90deg,transparent 0%,#ffc107 25%,#ffc107 75%,transparent 100%);margin:2px 0;opacity:.65}.end-stat-label{font-size:clamp(15px,4vw,18px);font-weight:900;letter-spacing:2px;color:#2e7d32;text-shadow:0 1px 0 rgba(0,0,0,.08)}.end-stat-value{font-size:clamp(30px,8.5vw,42px);font-weight:900;color:var(--aia-red);line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.12);font-family:Impact,Arial Black,-apple-system,sans-serif}#fireworksCanvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.end-bottom{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px}@media (max-height: 640px){.title-block{top:4%}.title-img{width:clamp(180px,55vw,280px);max-height:18vh}.start-bottom{bottom:calc(14px + env(safe-area-inset-bottom))}}@media (max-height: 720px){.char-title{margin-top:8px;font-size:clamp(20px,5.5vw,28px)}.char-showcase{gap:2px;padding:2px 0 4px}.char-showcase-img{max-height:16vh;max-width:42%}.char-showcase-name{font-size:clamp(16px,4.6vw,22px)}.char-class{font-size:clamp(10px,2.6vw,12px)}.char-stats{padding:4px 8px;gap:1px 6px}.char-stat-label{font-size:8px;letter-spacing:.5px}.char-stat-bar i{width:7px;height:7px}.char-grid{max-width:240px;gap:6px;padding-bottom:68px}.char-bottom{bottom:calc(10px + env(safe-area-inset-bottom))}.end-header{top:calc(6px + env(safe-area-inset-top));gap:2px}.end-trophy{font-size:clamp(32px,9vw,50px)}.end-title{font-size:clamp(18px,5.6vw,26px);letter-spacing:2px}.reward-badge{padding:4px 12px;font-size:11px}.end-stats-card{top:calc(124px + env(safe-area-inset-top));padding:10px 16px;gap:4px;width:min(80vw,280px)}.end-stat-label{font-size:clamp(13px,3.6vw,15px);letter-spacing:1px}.end-stat-value{font-size:clamp(24px,7vw,34px)}.end-bottom{bottom:calc(10px + env(safe-area-inset-bottom))}}.end-note{margin-top:4px;font-size:clamp(11px,3vw,13px);font-weight:700;letter-spacing:1px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.45);max-width:88%;line-height:1.3}.end-return-btn{display:inline-block;margin-top:12px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);border-radius:999px;font-weight:800;font-size:13px;letter-spacing:1px;padding:8px 18px;cursor:pointer;text-decoration:none;box-shadow:0 4px 10px #00000059}.end-return-btn:active{transform:translateY(2px)}.quiz-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px 16px;background:#000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.quiz-overlay.show{display:flex}.quiz-card{width:100%;max-width:360px;max-height:88dvh;overflow-y:auto;background:linear-gradient(180deg,#fff,#fff8e1);border:4px solid #ffc107;border-radius:22px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 0 0 3px #ff9800,0 18px 36px #00000073;animation:endStatsPop .45s cubic-bezier(.4,1.7,.55,1)}.quiz-header{font-size:clamp(15px,4.2vw,18px);font-weight:900;letter-spacing:1px;color:var(--aia-red-dark);text-align:center;line-height:1.3}.quiz-note{font-size:12px;font-weight:600;color:#777;text-align:center;line-height:1.35}.quiz-note:empty{display:none}.quiz-question{font-size:clamp(14px,3.8vw,16px);font-weight:800;color:#333;line-height:1.4;margin:4px 0}.quiz-options{display:flex;flex-direction:column;gap:8px}.quiz-option{display:block;width:100%;text-align:left;background:#fff;border:2px solid #ddd;border-radius:12px;padding:11px 14px;font-size:14px;font-weight:700;color:#333;cursor:pointer;transition:border-color .12s,transform .12s,box-shadow .12s}.quiz-option:active{transform:scale(.98)}.quiz-option.selected{border-color:var(--aia-red);background:#d3114512;box-shadow:inset 0 0 0 2px var(--aia-red),0 4px 10px #d311452e;color:var(--aia-red-dark)}.quiz-footer{display:flex;gap:10px;margin-top:8px}.quiz-btn{flex:1;padding:11px 14px;border:none;border-radius:999px;font-weight:900;font-size:14px;letter-spacing:1px;cursor:pointer;transition:transform .1s,box-shadow .1s,opacity .15s}.quiz-btn-primary{background:linear-gradient(180deg,#ff2a5f 0%,var(--aia-red) 60%,var(--aia-red-dark) 100%);color:#fff;box-shadow:0 4px 0 var(--aia-red-dark),0 8px 14px #d3114559}.quiz-btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--aia-red-dark)}.quiz-btn-primary:disabled{opacity:.45;pointer-events:none;filter:grayscale(.4)}.quiz-btn-skip{background:#eee;color:#666;flex:0 0 auto;padding:11px 16px;font-size:12px}.quota-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px 18px;background:#000000c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.quota-overlay.show{display:flex}.quota-card{width:100%;max-width:320px;background:linear-gradient(180deg,#fff,#fff8e1);border:4px solid #ffc107;border-radius:22px;padding:22px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;box-shadow:0 0 0 3px #ff9800,0 18px 36px #00000073;animation:endStatsPop .45s cubic-bezier(.4,1.7,.55,1)}.quota-icon{font-size:52px;line-height:1}.quota-title{font-size:clamp(17px,4.6vw,20px);font-weight:900;color:var(--aia-red-dark);letter-spacing:1px}.quota-note{font-size:13px;font-weight:600;color:#666;line-height:1.4}.quota-card .quiz-btn{margin-top:4px;align-self:stretch}#disclaimerScreen{background:linear-gradient(180deg,var(--aia-red) 0%,var(--aia-red-dark) 100%);justify-content:center;align-items:center;padding:20px 16px;z-index:90}.disclaimer-card{width:100%;max-width:380px;max-height:88dvh;background:linear-gradient(180deg,#fff,#fff8e1);border:4px solid #ffc107;border-radius:20px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 0 0 3px #ff9800,0 18px 36px #00000080;animation:titleJumpIn .55s cubic-bezier(.4,1.7,.55,1) backwards}.disclaimer-title{font-size:clamp(20px,5.5vw,26px);font-weight:900;letter-spacing:2px;color:var(--aia-red-dark);text-align:center;margin:0}.disclaimer-body{flex:1 1 auto;overflow-y:auto;font-size:clamp(12px,3.4vw,14px);line-height:1.55;color:#444;padding:12px 14px;background:#fff;border:2px solid #ffe082;border-radius:12px;-webkit-overflow-scrolling:touch}.disclaimer-body b{color:var(--aia-red-dark)}.disclaimer-buttons{display:flex;gap:10px;align-items:stretch}.disclaimer-decline-btn,.disclaimer-agree-btn{flex:1;padding:12px 16px;border:none;border-radius:999px;font-weight:900;font-size:clamp(14px,4vw,16px);letter-spacing:2px;cursor:pointer;transition:transform .1s,box-shadow .1s}.disclaimer-decline-btn{background:#eee;color:#666;flex:0 0 38%}.disclaimer-decline-btn:active{transform:translateY(2px)}.disclaimer-agree-btn{background:linear-gradient(180deg,#ff2a5f 0%,var(--aia-red) 60%,var(--aia-red-dark) 100%);color:#fff;box-shadow:0 5px 0 var(--aia-red-dark),0 8px 16px #d3114559}.disclaimer-agree-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--aia-red-dark)}