:root{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang HK","Microsoft JhengHei",sans-serif;color:#202059;--ink:#22225c;--purple:#7253ec;--cyan:#19c9eb;--gold:#ffbd20}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{background:#171654}.page{width:100%;height:100%;min-height:100dvh;display:flex;justify-content:center;align-items:center}.game-shell{position:relative;overflow:hidden;width:min(100vw,calc(100dvh * 1.85));height:100dvh;max-height:1100px;background:#7ad5ff;isolation:isolate;touch-action:none}.arena,.arena-shade,#court{position:absolute;inset:0;width:100%;height:100%}.arena{background:url("assets/arena.webp") center center / cover no-repeat}.arena-shade{pointer-events:none;background:linear-gradient(180deg,rgba(28,28,118,.14),transparent 25%,transparent 72%,rgba(87,37,105,.16));z-index:1}#court{z-index:2;display:block;touch-action:none;outline:none}.topbar{position:absolute;z-index:5;top:max(13px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:flex;gap:9px;align-items:center;color:white;text-shadow:0 2px 5px #343374b5}.brand span:last-child{display:flex;flex-direction:column;line-height:1.18}.brand strong{font-size:clamp(12px,1.7vw,17px);letter-spacing:.03em}.brand small{font-size:clamp(10px,1.25vw,13px);font-weight:800}.brand-ball{display:grid;place-items:center;background:linear-gradient(145deg,#ffcf63,#ff8d10);border:2px solid #fff9;border-radius:13px;width:42px;height:42px;font-size:25px;box-shadow:0 5px 12px #4b2c9877}.icon-button{pointer-events:auto;border:2px solid #ffffffc7;color:#fff;background:#6a4cdebb;box-shadow:0 4px 12px #39268b66;border-radius:14px;font-weight:900;font-size:22px;width:42px;height:42px;cursor:pointer}.hud{position:absolute;z-index:4;top:13px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;color:#fff;pointer-events:none}.hud-card{min-width:123px;height:64px;border:2px solid #ffffffb5;border-radius:16px;background:linear-gradient(145deg,#5650e9ee,#302aaaeb);box-shadow:0 5px 0 #27207899,0 9px 20px #342c9166;text-align:center;padding:5px 12px;position:relative}.hud-card span,.time-card span{display:block;color:#dceaff;font-size:10px;font-weight:900;letter-spacing:.08em}.hud-card strong{display:block;font-size:31px;font-weight:1000;line-height:1.05;text-shadow:0 2px 0 #201b87}.hud-card em{position:absolute;right:7px;bottom:6px;border-radius:8px;background:#ffbc2b;color:#6d3702;font-style:normal;font-size:10px;font-weight:900;padding:2px 5px}.time-card{width:80px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(150deg,#ffcf5d,#ff8e0c);border:4px solid #fff;border-radius:50%;box-shadow:0 5px 0 #bd6208,0 9px 18px #52338c88;color:#623087}.time-card span{color:#793b08;font-size:10px}.time-card strong{font-size:32px;line-height:.95}.time-card small{font-size:8px;font-weight:900;color:#804215}.time-card.urgent{animation:urgent .55s infinite alternate;background:linear-gradient(145deg,#ff8765,#ff4a61)}@keyframes urgent{to{transform:scale(1.08)}}.timer-track{position:absolute;top:105px;left:50%;transform:translateX(-50%);width:min(340px,45%);height:7px;border-radius:30px;background:#34207870;z-index:4;overflow:hidden;pointer-events:none}.timer-track span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#76e9ff,#fff77f);transition:width .2s linear}.status-pill{position:absolute;z-index:4;top:120px;left:50%;transform:translateX(-50%);background:#ffffffd9;color:#5444a0;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 3px 10px #29217a33;pointer-events:none;transition:opacity .25s}.status-pill.hide{opacity:0}.controls{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:4;white-space:nowrap;border:1px solid #fff8;border-radius:99px;color:#fff;background:#35318ab0;box-shadow:0 4px 14px #3c2f8060;padding:7px 16px;font-size:clamp(11px,1.3vw,14px);font-weight:800;pointer-events:none}.swipe-icon{font-size:20px;line-height:0;color:#ffdf60}.dot{padding:0 5px;color:#b9efff}.burst-label{position:absolute;z-index:8;left:50%;top:35%;transform:translate(-50%,-50%) scale(.7);text-align:center;white-space:nowrap;opacity:0;pointer-events:none;color:#fff;font-weight:1000;font-size:clamp(27px,5.5vw,68px);line-height:1;text-shadow:0 3px 0 #9a46ca,0 6px 0 #7437ad,0 9px 20px #30248b99;-webkit-text-stroke:1px #fff4}.burst-label.show{animation:burst .95s both}@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-8deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(2deg)}32%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%) scale(1.06)}}.countdown{position:absolute;z-index:30;top:48%;left:50%;transform:translate(-50%,-50%);font-size:clamp(100px,22vw,240px);font-weight:1000;color:#fff;text-shadow:0 8px 0 #6b3bd2,0 18px 35px #21127399;pointer-events:none}.countdown:not([hidden]){display:block;animation:count .8s ease-out infinite}@keyframes count{0%{transform:translate(-50%,-50%) scale(1.5);opacity:.4}45%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.overlay{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:14px;background:linear-gradient(140deg,#13155dbd,#4034ae91);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow-y:auto;touch-action:pan-y}.overlay.visible{display:flex}.home-card,.quiz-card,.result-card,.leader-card{position:relative;width:min(510px,94vw);max-height:100%;overflow-y:auto;background:linear-gradient(160deg,#fff,#effaff 85%,#eef1ff);border:3px solid #fff;border-radius:27px;box-shadow:0 12px 0 #4033a9a8,0 20px 55px #22145c88;padding:19px 30px;text-align:center;color:var(--ink);scrollbar-width:thin}.home-card{z-index:2;padding-top:19px}.eyebrow{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:5px 12px;background:#eee9ff;color:#7355d4;font-size:11px;font-weight:900;letter-spacing:.03em}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#ffb62e}h1,h2,p{margin:0}.home-card h1{font-size:clamp(27px,4.2vw,43px);line-height:1.1;letter-spacing:-.03em;margin:8px 0;color:#4a35b0;text-shadow:0 3px 0 #dfd8ff}.home-card h1 span{font-size:.47em;letter-spacing:.06em;color:#5669b7}.home-sub{font-size:14px;line-height:1.45;color:#7d7ba4;font-weight:700}.home-sub strong{color:#5154a6}.heroes{height:86px;display:flex;align-items:center;justify-content:center;margin:1px 0 -2px}.heroes img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 5px 4px #5640ad42)}.heroes img:nth-child(1){transform:rotate(-9deg) translateX(8px)}.heroes img:nth-child(2){width:100px;height:100px;z-index:1}.heroes img:nth-child(3){transform:rotate(9deg) translateX(-8px)}.instructions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2px 0 10px}.instructions span{background:#f0efff;border-radius:12px;color:#695abb;padding:6px 2px;font-size:11px;font-weight:900}.instructions b{color:#ffad18;font-size:10px;margin-right:3px}.name-label{display:block;text-align:left;margin:0 2px 5px;color:#655c99;font-size:12px;font-weight:900}.name-label small{font-weight:600;color:#9b99ba}input{width:100%;height:40px;border-radius:12px;border:2px solid #e6e2fb;background:#fafaff;padding:0 12px;outline:none;color:#32266d;font-size:14px;font-weight:700}input:focus{border-color:#8b6cf4;box-shadow:0 0 0 3px #dfd5ff}.primary-button{display:flex;width:100%;justify-content:center;gap:20px;align-items:center;min-height:47px;margin-top:10px;padding:9px 16px;border:2px solid #fff7;border-radius:14px;box-shadow:0 5px 0 #c76706,0 9px 18px #f69a1e55;background:linear-gradient(180deg,#ffd455,#ff9e15);color:#793400;font-family:inherit;font-size:17px;font-weight:1000;cursor:pointer}.primary-button:active{transform:translateY(3px);box-shadow:0 2px 0 #c76706}.primary-button b{font-size:18px}.link-button{border:0;background:none;color:#7368b3;font-family:inherit;font-size:12px;font-weight:900;padding:10px 14px 0;cursor:pointer}.deck{position:absolute;bottom:9%;left:2%;right:2%;display:flex;justify-content:space-between;pointer-events:none}.deck img{width:clamp(55px,7.5vw,105px);filter:drop-shadow(0 6px 3px #3719758c);animation:bob 2.4s infinite ease-in-out}.deck img:nth-child(even){animation-delay:-1.1s}@keyframes bob{50%{transform:translateY(-10px) rotate(4deg)}}
.quiz-card{width:min(610px,94vw);text-align:left;padding:22px 24px}.quiz-top{display:flex;align-items:center;justify-content:space-between}.quiz-tag{color:#6a45c8;font-weight:1000;font-size:16px}.quiz-count{display:grid;place-items:center;width:38px;height:38px;background:#fff0c4;color:#ad5d00;border-radius:50%;font-size:20px;font-weight:1000}.quiz-meter{height:7px;margin:8px 0 14px;background:#ece8ff;border-radius:30px;overflow:hidden}.quiz-meter span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8560ed,#25ccef);transition:width .1s linear}.quiz-intro{display:flex;align-items:center;gap:16px}.quiz-intro img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 4px 3px #49348c33)}.quiz-intro span{display:block;color:#8a7cb7;font-size:12px;font-weight:900;margin-bottom:5px}.quiz-intro h2{font-size:clamp(19px,2.5vw,26px);line-height:1.35;color:#29205f}.quiz-options{display:grid;gap:9px;margin-top:15px}.answer-button{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;text-align:left;border:2px solid #e7e3fa;border-radius:13px;background:#fff;padding:8px 12px;color:#4d4783;font:800 15px/1.35 inherit;cursor:pointer}.answer-button .answer-key{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#eee9ff;color:#7254d9;font-weight:1000}.answer-button:hover{border-color:#9f83f5}.answer-button.correct{background:#e8fff4;border-color:#53d5a1}.answer-button.wrong{background:#fff0ec;border-color:#ffac97}.answer-button:disabled{cursor:default}.quiz-feedback{margin-top:12px;padding:11px 13px;border-radius:12px;background:#edf9ff;color:#454784;font-size:14px;line-height:1.45;font-weight:800}.quiz-feedback strong{display:block;font-size:17px;color:#4a35b0;margin-bottom:2px}.quiz-note{font-size:11px;color:#938db2;font-weight:800;margin-top:11px;text-align:center}
.result-card,.leader-card{width:min(520px,94vw);padding:18px 27px}.result-stars{color:#ffb72e;font-size:22px;line-height:1}.result-card h2,.leader-card h2{font-size:30px;color:#4b35b2;margin:5px 0 1px}.result-name,.leader-card>p{color:#9991ba;font-size:12px;font-weight:800}.result-score{display:flex;justify-content:center;align-items:baseline;gap:9px;color:#e18a0e}.result-score span{font-size:12px;font-weight:900}.result-score strong{font-size:clamp(48px,7vw,75px);line-height:1.1;color:#ff9e10;text-shadow:0 3px 0 #ffe5a0}.result-score small{font-weight:1000}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.result-stats div{background:#f1efff;border-radius:12px;padding:7px 3px}.result-stats strong,.result-stats span{display:block}.result-stats strong{font-size:19px;color:#5f45c3}.result-stats span{font-size:10px;color:#9690b8;font-weight:900}.leader-heading{display:flex;justify-content:space-between;align-items:center;margin:13px 1px 4px;color:#5a4a9d;font-size:13px}.leader-heading span{font-size:10px;color:#aaa2c4;font-weight:800}.leader-list{list-style:none;margin:0;padding:0}.leader-list li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #ece8f9;padding:5px 3px;color:#5d5687;font-size:12px;font-weight:800}.leader-list li b{color:#ed9b24}.leader-list li.empty{justify-content:center;color:#aaa3c2;padding:14px}.result-actions{display:grid;grid-template-columns:2fr 1fr;gap:9px}.secondary-button{margin-top:10px;border:2px solid #e1dafa;border-radius:14px;background:#f4f1ff;color:#755dc5;font:900 14px inherit;cursor:pointer}.safety-tip{font-size:10px;line-height:1.5;color:#8f8aa9;margin-top:10px}.safety-tip a{color:#6554c9;font-weight:900}.leader-card>p{margin-bottom:10px}.big-list{min-height:80px}.big-list li{font-size:14px;padding:9px 3px}
@media(max-height:620px){.home-card{padding:12px 25px}.home-card h1{font-size:clamp(24px,4vw,34px);margin:4px}.heroes{height:65px}.heroes img{width:65px;height:65px}.heroes img:nth-child(2){width:76px;height:76px}.home-sub{font-size:12px}.instructions{margin:1px 0 6px}.primary-button{min-height:40px}.result-card{padding:10px 25px}.result-score strong{font-size:48px}.result-stars{font-size:17px}.result-stats div{padding:3px}.leader-heading{margin-top:6px}.leader-list li{padding:3px}.result-card h2{font-size:24px}}
@media(max-width:630px){.brand-ball{width:32px;height:32px;border-radius:10px;font-size:20px}.brand small{display:none}.brand strong{font-size:10px}.topbar{top:10px;left:10px;right:10px}.icon-button{width:34px;height:34px;font-size:19px}.hud{top:52px;gap:5px}.hud-card{min-width:86px;height:50px;border-radius:12px;padding:4px}.hud-card span{font-size:8px}.hud-card strong{font-size:24px}.time-card{width:61px;height:61px;border-width:3px}.time-card strong{font-size:25px}.time-card span{font-size:8px}.timer-track{top:122px;width:55%}.status-pill{top:134px;font-size:10px}.quiz-intro img{width:84px;height:84px}.quiz-card{padding:18px}.quiz-intro h2{font-size:18px}.deck img{width:50px}.deck{bottom:6%}.home-card{padding:14px 18px}.home-card h1{font-size:30px}.result-card{padding:13px 19px}.controls{bottom:max(15px,env(safe-area-inset-bottom))}}
@media(max-width:630px) and (orientation:landscape){.brand{display:none}.hud{top:5px}.timer-track{top:72px}.status-pill{top:82px}.overlay{padding:6px}.home-card{max-height:96%;}.home-card h1{font-size:23px}.heroes{height:50px}.heroes img{width:55px;height:55px}.heroes img:nth-child(2){width:65px;height:65px}.instructions span{padding:3px;font-size:9px}.home-sub{font-size:11px}.name-label{display:none}input{height:32px}.primary-button{margin-top:5px;min-height:34px;padding:4px;font-size:14px}.link-button{padding-top:4px}.quiz-intro img{width:65px;height:65px}.quiz-card{padding:10px 15px}.quiz-meter{margin:3px 0}.quiz-options{margin-top:5px;gap:4px}.answer-button{min-height:33px}.quiz-note{margin-top:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.answer-button{font-family:inherit;font-size:15px;font-weight:800;line-height:1.35}
.secondary-button{font-family:inherit;font-size:14px;font-weight:900}
.game-shell{width:100vw;height:100dvh;max-height:none}
.arena{background-image:url('assets/arena-victoria-v2.webp');background-position:center center;background-size:cover}
.landmark-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.practice-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:42px;margin-top:11px;padding:8px 13px;border:2px solid #d9d2ff;border-radius:14px;background:linear-gradient(120deg,#f2eefe,#e6faff);color:#593ab1;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #c9c1ee}
.practice-button b{white-space:nowrap;color:#8b70c9;font-size:11px}.practice-button:active{transform:translateY(2px);box-shadow:0 1px 0 #c9c1ee}
.practice-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:12px}.practice-actions[hidden]{display:none}
.practice-actions button{min-height:42px;border:0;border-radius:12px;padding:8px 12px;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer}
.practice-next{color:white;background:linear-gradient(135deg,#7859ee,#6350d5);box-shadow:0 3px 0 #44309d}.practice-next:disabled{opacity:.45;cursor:default;box-shadow:none}
.practice-start-game{color:#713b00;background:linear-gradient(135deg,#ffdd71,#ffac27);box-shadow:0 3px 0 #dc8710}.practice-exit{color:#777095;background:#efedf7}
.practice-button:focus-visible,.practice-actions button:focus-visible,.answer-button:focus-visible{outline:3px solid #21a5ed;outline-offset:2px}
.quiz-feedback.success{background:linear-gradient(110deg,#dffff1,#f0fffc);border:2px solid #82e6bf;box-shadow:0 0 20px #72e8b75c;animation:quiz-answer-pop .45s ease-out}.quiz-feedback.success strong{color:#118764}
.quiz-feedback.incorrect{background:#fff4ec;border:2px solid #ffc5a4}.quiz-feedback.incorrect strong{color:#b45a3d}
.quiz-card.quiz-success{animation:quiz-card-pop .55s ease-out}.quiz-card.quiz-success:after{content:'✦　✧　★　✧　✦';pointer-events:none;position:absolute;top:8px;right:54px;color:#ffbf27;font-size:19px;opacity:0;animation:quiz-sparkles 1s ease-out}
@keyframes quiz-answer-pop{0%{transform:scale(.94);opacity:.4}60%{transform:scale(1.035)}100%{transform:scale(1);opacity:1}}
@keyframes quiz-card-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.02)}}
@keyframes quiz-sparkles{0%{opacity:0;transform:translateY(8px) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1.15)}}
@media(max-height:620px){.practice-button{min-height:34px;margin-top:7px;padding:5px 12px;font-size:12px}.practice-actions{margin-top:7px}.practice-actions button{min-height:36px;font-size:12px;padding:5px 8px}}
@media(max-width:480px){.practice-actions{grid-template-columns:1fr 1fr}.practice-exit{grid-column:1/-1}}
.game-shell.shake{animation:impact .24s ease-out}
@keyframes impact{0%,100%{transform:translate(0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}