:root{--bg: #faf7f2;--card: #ffffff;--ink: #23202b;--ink-soft: #6f6a7d;--line: #ece7de;--brand: #6c5ce7;--brand-2: #fd79a8;--brand-grad: linear-gradient(135deg, #6c5ce7, #fd79a8);--good: #10b981;--good-soft: #d7f5ea;--bad: #ef4444;--bad-soft: #fde5e5;--tw: #0ea5e9;--tw-soft: #dff2fc;--cn: #f59e0b;--cn-soft: #fdf0d9;--radius: 18px;--shadow: 0 4px 18px rgba(60, 40, 120, .08);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans TC", "Noto Sans SC", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font-family:inherit;font-size:16px}img{display:block;max-width:100%}#root{min-height:100dvh;display:flex;flex-direction:column}.shell{width:100%;max-width:540px;margin:0 auto;padding:0 16px;flex:1;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 10px}.logo{font-weight:800;font-size:19px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}.logo .mark{font-size:24px}.lang-switch{display:flex;background:#efe9e0;border-radius:999px;padding:3px;gap:2px}.lang-switch button{padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}.lang-switch button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px #0000001f}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 18px;border-radius:14px;font-size:16px;font-weight:700;transition:transform .08s ease,opacity .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;pointer-events:none}.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 6px 16px #6c5ce759}.btn-ghost{background:#f1ece4;color:var(--ink)}.btn-danger{background:var(--bad);color:#fff}.btn-sm{width:auto;padding:9px 16px;font-size:14px;border-radius:11px}.input,select.input,textarea.input{width:100%;padding:13px 14px;border-radius:13px;border:1.5px solid var(--line);background:#fff;outline:none;transition:border-color .15s}.input:focus{border-color:var(--brand)}textarea.input{resize:vertical;min-height:74px}.label{display:block;font-size:13.5px;font-weight:700;margin:14px 0 6px}.hint{font-size:12.5px;color:var(--ink-soft);margin-top:4px}.error-text{color:var(--bad);font-size:13.5px;font-weight:600;margin-top:10px}.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}.chip-site{background:var(--tw-soft);color:#0369a1}.chip-dept{background:#efeafd;color:#5b4bc4}.chip-title{background:var(--cn-soft);color:#b45309}.chip-row{display:flex;gap:6px;flex-wrap:wrap}.filter-chip{padding:7px 14px;border-radius:999px;background:#efe9e0;font-size:13.5px;font-weight:600;color:var(--ink-soft)}.filter-chip.on{background:var(--ink);color:#fff}.gate{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:12vh}.gate .big-emoji{font-size:56px;text-align:center;margin-bottom:12px}.gate h1{font-size:28px;text-align:center;letter-spacing:-.5px}.gate .sub{text-align:center;color:var(--ink-soft);margin:10px 0 26px;line-height:1.5}.hero{margin:6px 0 18px}.hero h1{font-size:26px;letter-spacing:-.5px}.hero p{color:var(--ink-soft);margin-top:4px}.section-title{font-size:15px;font-weight:800;margin:20px 0 10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 14px;text-align:left;transition:transform .1s ease;display:flex;flex-direction:column;gap:6px;min-height:116px}.mode-card:active{transform:scale(.96)}.mode-card .icon{font-size:28px}.mode-card .name{font-weight:800;font-size:15.5px;letter-spacing:-.2px}.mode-card .desc{font-size:12.5px;color:var(--ink-soft);line-height:1.35}.mode-card.special{background:linear-gradient(135deg,#fff6e8,#ffe9f2)}.quiz-top{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:10px}.quiz-meta{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px}.pill{background:#fff;border-radius:999px;padding:6px 12px;box-shadow:var(--shadow);font-size:13.5px;font-weight:700}.pill.flame{color:#ea580c}.pill.timer{color:var(--brand);min-width:64px;text-align:center}.pill.timer.low{color:var(--bad);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.55}}.progress{height:6px;background:#ece5da;border-radius:999px;overflow:hidden;margin-bottom:14px}.progress>div{height:100%;background:var(--brand-grad);border-radius:999px;transition:width .3s ease}.q-prompt{text-align:center;margin-bottom:16px}.q-prompt h2{font-size:19px;letter-spacing:-.3px;margin-bottom:14px}.q-photo{width:min(58vw,240px);aspect-ratio:1;border-radius:24px;object-fit:cover;margin:0 auto;box-shadow:var(--shadow)}.q-fact{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;font-size:17px;line-height:1.55;font-weight:600;font-style:italic}.q-name-card{padding:10px 0 2px}.q-name-card .big-name{font-size:26px;font-weight:800;letter-spacing:-.4px}.opt-grid{display:grid;gap:10px}.opt-grid.faces{grid-template-columns:1fr 1fr}.opt{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:15px 14px;font-size:16px;font-weight:700;text-align:center;border:2.5px solid transparent;transition:transform .08s,border-color .15s,background .15s}.opt:active{transform:scale(.97)}.opt.face{padding:0;overflow:hidden;aspect-ratio:1}.opt.face img{width:100%;height:100%;object-fit:cover}.opt.correct{border-color:var(--good);background:var(--good-soft)}.opt.face.correct{border-color:var(--good)}.opt.wrong{border-color:var(--bad);background:var(--bad-soft);animation:shake .35s}.opt.face.wrong{border-color:var(--bad)}.opt.dim{opacity:.45}@keyframes shake{25%{transform:translate(-5px)}75%{transform:translate(5px)}}.reveal-bar{display:flex;align-items:center;gap:12px;margin-top:14px;background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px;animation:slide-up .25s ease}.reveal-bar img{width:46px;height:46px;border-radius:12px;object-fit:cover}.reveal-bar .who{font-weight:800;font-size:15px}.reveal-bar .sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px}@keyframes slide-up{0%{transform:translateY(10px);opacity:0}}.result{text-align:center;padding:26px 0}.result .score-ring{width:152px;height:152px;border-radius:50%;margin:18px auto;background:var(--brand-grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 30px #6c5ce766}.result .score-ring .big{font-size:44px;font-weight:800;line-height:1}.result .score-ring .small{font-size:14px;opacity:.9;margin-top:4px}.result h2{font-size:22px;letter-spacing:-.4px}.result .msg{color:var(--ink-soft);margin-top:6px;font-size:15.5px}.result .stat-row{display:flex;justify-content:center;gap:10px;margin:18px 0 22px}.result .actions{display:flex;flex-direction:column;gap:10px}.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}@media(min-width:460px){.dir-grid{grid-template-columns:repeat(4,1fr)}}.person-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;text-align:center;transition:transform .1s}.person-card:active{transform:scale(.95)}.person-card img{width:100%;aspect-ratio:1;object-fit:cover}.person-card .nm{font-size:12.5px;font-weight:700;padding:7px 6px 3px;line-height:1.25}.person-card .dp{padding-bottom:8px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#19122d8c;z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}@keyframes fade{0%{opacity:0}}.sheet{background:var(--bg);width:100%;max-width:540px;border-radius:26px 26px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));animation:slide-up .25s ease;max-height:86dvh;overflow-y:auto}.sheet .grabber{width:40px;height:4px;border-radius:4px;background:#d8d2c7;margin:-6px auto 16px}.profile-head{display:flex;gap:16px;align-items:center}.profile-head img{width:92px;height:92px;border-radius:22px;object-fit:cover;box-shadow:var(--shadow)}.profile-head h3{font-size:20px;letter-spacing:-.3px}.profile-head .full{color:var(--ink-soft);font-size:13.5px;margin:2px 0 7px}.contact-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}.contact-row{background:var(--card);border-radius:13px;box-shadow:var(--shadow);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}.contact-row .k{font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}.contact-row .v{font-size:14.5px;font-weight:600;word-break:break-all;text-align:right}.flash-stage{perspective:1100px;margin:18px 0}.flash-card{position:relative;width:100%;aspect-ratio:3/3.6;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}.flash-card.flipped{transform:rotateY(180deg)}.flash-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:24px;box-shadow:var(--shadow);overflow:hidden;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.flash-face.front img{width:100%;height:100%;object-fit:cover}.flash-face.back{transform:rotateY(180deg);padding:24px;text-align:center}.flash-face.back .nm{font-size:26px;font-weight:800;letter-spacing:-.4px}.flash-face.back .fact{color:var(--ink-soft);font-size:14.5px;font-style:italic;line-height:1.5;margin-top:8px}.flash-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}.tabs::-webkit-scrollbar{display:none}.rank-row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:11px 14px;margin-bottom:8px}.rank-row .pos{font-weight:800;font-size:15px;width:26px;color:var(--ink-soft)}.rank-row .pos.gold{color:#d97706;font-size:19px}.rank-row img{width:42px;height:42px;border-radius:11px;object-fit:cover}.rank-row .info{flex:1;min-width:0}.rank-row .nm{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-row .score{font-weight:800;font-size:17px;color:var(--brand)}.battle{text-align:center;padding:20px 16px}.battle .vs-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.battle .side{flex:1}.battle .side .pct{font-size:34px;font-weight:800;letter-spacing:-1px}.battle .side.tw .pct{color:var(--tw)}.battle .side.cn .pct{color:var(--cn)}.battle .vs{font-size:15px;font-weight:800;color:var(--ink-soft);padding:0 8px}.battle-bar{height:14px;border-radius:999px;overflow:hidden;display:flex;background:#ece5da}.battle-bar .tw-fill{background:var(--tw)}.battle-bar .cn-fill{background:var(--cn)}.battle .counts{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--ink-soft)}.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:14px 10px;text-align:center}.stat-card .v{font-size:22px;font-weight:800;letter-spacing:-.5px}.stat-card .k{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:3px}.blind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mode-stat-row{display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:13px;box-shadow:var(--shadow);padding:11px 14px;margin-bottom:8px;font-size:14px;font-weight:600}.mode-stat-row .m{display:flex;align-items:center;gap:8px}.bottom-nav{position:sticky;bottom:0;z-index:30;background:#ffffffeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom));margin:auto -16px 0}.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--ink-soft);min-width:68px;padding:4px 0}.bottom-nav button.on{color:var(--brand)}.bottom-nav .ico{font-size:22px;line-height:1}.cropper{display:flex;flex-direction:column;align-items:center;gap:10px}.cropper canvas{border-radius:20px;box-shadow:var(--shadow);touch-action:none;cursor:grab}.cropper input[type=range]{width:200px;accent-color:var(--brand)}.center{text-align:center}.muted{color:var(--ink-soft)}.mt{margin-top:14px}.mb{margin-bottom:14px}.spin{width:34px;height:34px;border:4px solid #e8e2d8;border-top-color:var(--brand);border-radius:50%;margin:40px auto;animation:rot .8s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}.confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:100}.webcam-video{width:100%;max-height:55dvh;border-radius:18px;background:#000;transform:scaleX(-1);object-fit:cover}.weekly-banner{width:100%;background:linear-gradient(120deg,#6c5ce7,#a55eea 55%,#fd79a8);color:#fff;border-radius:var(--radius);box-shadow:0 8px 22px #6c5ce766;padding:18px 16px;text-align:left;display:flex;align-items:center;gap:14px;margin:4px 0 6px;transition:transform .1s ease}.weekly-banner:active{transform:scale(.97)}.weekly-banner .wicon{font-size:34px}.weekly-banner .wname{font-weight:800;font-size:17px;letter-spacing:-.2px}.weekly-banner .wsub{font-size:12.5px;opacity:.9;margin-top:3px;line-height:1.4}.weekly-banner .wstate{margin-left:auto;background:#ffffff38;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:800;white-space:nowrap}.opt.duel{padding:0 0 12px;overflow:hidden}.opt.duel img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:9px}.page{flex:1;display:flex;flex-direction:column;padding-bottom:20px}.fade-in{animation:fade-in .25s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}}