@import url('/fonts.css');
:root{--navy:#18364b;--muted:#7b8c98;--line:#e1eaf0;--blue:#149fd2;--teal:#16b7aa;--orange:#ff885b;--paper:#f4f8fb;--white:#fff;--shadow:0 12px 40px #163a4b06;font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--navy);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.48;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #5cc5f4;outline-offset:3px}input:focus,select:focus{outline:2px solid #a3deef;border-color:var(--blue)}
.topbar{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;max-width:1200px;margin:auto;padding:0 32px}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;letter-spacing:1px}.brand-icon{background:var(--teal);width:31px;height:31px;display:grid;place-items:center;border-radius:10px;color:#fff;font-size:25px;transform:rotate(-8deg)}.brand-dot{width:6px;height:6px;background:var(--orange);border-radius:50%;margin-left:-4px;margin-top:-14px}.top-note{font-size:12px;color:var(--muted)}.tag{font-size:10px;font-weight:800;letter-spacing:2px;margin-left:auto;color:#7a929f}.footer{max-width:1136px;margin:64px auto 0;padding:25px 0 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.tiny-shuttle{color:var(--teal);margin-left:14px}
main{max-width:1136px;margin:auto;min-height:65vh}.hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:center;padding:49px 0 37px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--teal);display:flex;align-items:center;gap:8px}.eyebrow:before{content:"";height:6px;width:6px;background:var(--teal);border-radius:50%}.hero h1{font-size:45px;letter-spacing:-1.5px;line-height:1.3;margin:16px 0 14px;font-weight:900}.hero h1 em{font-style:normal;color:var(--blue)}.hero p{color:var(--muted);font-size:13px;line-height:1.9;margin:0}.hero-logo{width:100%;transform:rotate(-3deg);filter:drop-shadow(0 15px 8px #0a64800b)}.hero-art{position:relative;padding:18px 0}.hero-art:before{content:"";position:absolute;width:70%;height:80%;left:12%;top:6%;background:#def4fc;border-radius:50%;filter:blur(28px);z-index:-1}.scribble{display:block;text-align:right;font-size:11px;font-weight:600;color:#82a7b8;margin-top:18px;letter-spacing:1px}.steps{display:flex;gap:0;margin:10px 0 29px;align-items:center}.step{display:flex;gap:9px;align-items:center;font-size:12px;color:#9aabb5;white-space:nowrap}.step span{height:25px;width:25px;display:grid;place-items:center;background:#e9eff3;border-radius:50%;font-size:11px;font-weight:800}.step.active{color:var(--navy);font-weight:700}.step.active span{color:#fff;background:var(--navy)}.step-line{height:1px;width:54px;background:var(--line);margin:0 16px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}.create-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:24px}.intro-card{background:#eaf7fc;border-color:#d4eaf4;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:35px}.intro-card:after{content:"+";position:absolute;right:-30px;bottom:-100px;font-size:330px;line-height:1;color:#d9f0f8;font-weight:300;transform:rotate(-15deg);pointer-events:none}.section-code{font-size:10px;letter-spacing:2px;color:var(--blue);font-weight:800}.intro-card h2{font-size:27px;line-height:1.5;margin:18px 0}.intro-card p{max-width:280px;font-size:13px;line-height:1.9;color:#6991a4;margin:0}.feature-list{display:grid;gap:18px;margin:30px 0 8px;position:relative;z-index:1}.feature-list div{display:flex;align-items:center;gap:12px;font-size:13px}.feature-icon{width:30px;height:30px;border-radius:9px;background:#fff;color:var(--blue);display:grid;place-items:center;font-size:17px}.pill{padding:5px 10px;background:#ecf9f5;color:#169781;font-size:10px;border-radius:20px;font-weight:700;display:inline-flex;align-items:center;gap:5px}.pill.orange{background:#fff1e9;color:#d77c48}.pill.blue{background:#ebf6fe;color:#249dcc}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}.section-head h2{font-size:19px;letter-spacing:-.4px;margin:0}.section-head p{font-size:12px;color:var(--muted);margin:7px 0 0}.form-grid{display:grid;gap:21px}.field{display:flex;flex-direction:column;gap:9px;font-size:12px;font-weight:700}.field input,.field select{width:100%;height:46px;border-radius:11px;border:1px solid var(--line);background:#f9fbfc;padding:0 14px;color:var(--navy);font-weight:400;min-width:0}.field small{color:var(--muted);font-size:11px;font-weight:400;line-height:1.7}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.primary,.secondary,.ghost,.danger{border-radius:11px;min-height:45px;padding:10px 19px;font-weight:700;font-size:13px;display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent}.primary{background:var(--navy);color:#fff;box-shadow:0 4px 9px #15364a12}.primary:hover{background:#244f68}.primary.teal{background:var(--teal)}.secondary{background:#fff;border-color:var(--line);color:var(--navy)}.secondary:hover{background:#f4f9fc}.ghost{background:transparent;color:var(--blue);min-height:32px;padding:5px 8px;font-size:12px}.danger{background:#fff0ee;color:#cb5c4f}.full{width:100%}.fineprint{font-size:11px;color:var(--muted);text-align:center;line-height:1.8;margin:12px 0 0}.rule-note{font-size:11px;line-height:1.9;color:#7993a1;background:#f2f8fb;border-radius:10px;padding:13px 15px}.rule-note strong{color:#4c7186}.subtitle{font-size:12px;color:var(--muted);line-height:1.8}.divider{border:0;border-top:1px solid var(--line);margin:24px 0}.error-state{max-width:600px;margin:80px auto;text-align:center}.loading{padding:100px;text-align:center;color:var(--muted)}
.room-head{padding:35px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.room-title h1{font-size:31px;letter-spacing:-1px;margin:10px 0 8px}.room-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted)}.room-logo{width:290px}.room-code{font-family:monospace;letter-spacing:1px;color:#7393a3}.room-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}.main-column,.side-column{display:grid;gap:22px;min-width:0}.invite{display:flex;align-items:center;gap:18px;padding:21px 24px}.invite-qr{width:94px;height:94px;border:1px solid var(--line);border-radius:12px;padding:3px;flex-shrink:0}.invite h3{margin:0 0 7px;font-size:16px}.invite p{font-size:11px;color:var(--muted);line-height:1.8;margin:0 0 8px}.invite-actions{display:flex;gap:8px}.invite-actions button{font-size:11px;min-height:32px;padding:6px 11px}.member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.member{border:1px solid var(--line);border-radius:14px;padding:15px 11px;display:flex;align-items:center;gap:10px;min-width:0;position:relative}.avatar{height:38px;width:38px;flex-shrink:0;display:grid;place-items:center;background:#e6f4fc;color:#389ec5;border-radius:12px;font-weight:800;font-size:16px}.avatar.female{background:#fff0e8;color:#df8c66}.avatar.unknown{background:#eaf4f2;color:#6ca59e}.member-info{min-width:0}.member-name{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}.member-gender{font-size:10px;color:var(--muted);margin-top:5px}.member-actions{position:absolute;right:5px;top:4px;display:flex}.member-actions button{font-size:10px;padding:2px 4px;min-height:22px;color:#7190a1}.empty-seat{min-height:71px;border:1px dashed #cfdee7;border-radius:14px;color:#acc0cc;display:flex;gap:8px;align-items:center;justify-content:center;font-size:11px}.statusline{font-size:10px;display:flex;gap:6px;align-items:center;color:#8ca1ad}.statusline:before{content:"";width:5px;height:5px;background:var(--teal);border-radius:50%}.statusline.offline:before{background:var(--orange)}.settings h3{font-size:16px;margin:0 0 20px}.settings .form-grid{gap:16px}.settings .field{font-size:11px}.settings .field input,.settings .field select{height:42px}.side-note{padding:21px 23px;border:1px dashed #d7e4eb;border-radius:16px;font-size:11px;color:#7d96a4;line-height:1.9}.side-note strong{display:block;color:#587b8e;margin-bottom:5px}.progress-card{display:flex;align-items:center;gap:20px;padding:23px 27px}.progress-numbers{font-size:28px;font-weight:800;white-space:nowrap}.progress-numbers small{font-size:13px;font-weight:400;color:#a1b1bc}.progress-text{font-size:12px;font-weight:600}.progress-track{height:6px;background:#eaf0f4;border-radius:10px;overflow:hidden;margin-top:10px;width:180px;max-width:100%}.progress-bar{height:100%;background:var(--teal);width:var(--progress,0%);border-radius:10px}.schedule-list{display:grid;gap:21px}.round-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}.round-header h3{margin:0;font-size:14px}.rest-note{font-size:10px;color:#91a4af;text-align:right;max-width:70%;line-height:1.7}.match-card{background:white;border:1px solid var(--line);border-radius:16px;padding:17px 20px;margin-top:10px}.match-top{display:flex;justify-content:space-between;font-size:10px;color:#9aadb8;margin-bottom:13px}.match-body{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:12px}.team{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;font-weight:700;line-height:1.8}.team.right{justify-content:flex-end;text-align:right}.team span{display:inline-flex;align-items:center;gap:4px}.gender-symbol{font-size:10px;color:#49a5c7}.gender-symbol.female{color:#eb957b}.vs{text-align:center;font-size:11px;font-weight:900;font-style:italic;color:#b2c6d2;letter-spacing:1px}.match-score{text-align:center;font-size:20px;font-weight:900;white-space:nowrap}.match-score small{display:block;font-size:9px;color:#9aafb9;font-weight:400;margin-top:4px}.match-bottom{display:flex;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:1px dashed #edf1f4}.mini-table{width:100%;border-collapse:collapse;font-size:11px}.mini-table th{text-align:left;font-size:10px;font-weight:400;color:var(--muted);padding:0 0 12px}.mini-table td{padding:11px 0;border-top:1px solid #edf2f5}.mini-table td:last-child,.mini-table th:last-child{text-align:right}.rank-no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#f2f6f9;color:#86a0af;font-size:10px}.rank-no.first{background:#fff0db;color:#d99735}.start-note{margin-top:13px;color:#a1adb4;font-size:10px;line-height:1.8;text-align:center}.settle-panel{background:#e9f8f5;border:1px solid #d5eee8;border-radius:18px;padding:23px}.settle-panel h3{font-size:17px;margin:0 0 9px}.settle-panel p{font-size:12px;color:#76a094;line-height:1.8;margin:0 0 16px}.summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:23px}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}.stat strong{font-size:26px;font-weight:800;display:block}.stat span{display:block;font-size:10px;color:var(--muted);margin-top:6px}.mvp-card{position:relative;overflow:hidden;background:linear-gradient(120deg,#e3f6ff,#eafaf5);border-color:#cce8ed;padding:30px}.mvp-caption{font-size:10px;font-weight:800;letter-spacing:3px;color:#4a9fb8}.mvp-card h2{font-size:30px;margin:13px 0 9px;max-width:85%;overflow-wrap:anywhere}.mvp-card p{font-size:12px;line-height:1.8;color:#6e9ba6;margin:0}.mvp-trophy{position:absolute;right:25px;top:33px;font-size:61px;transform:rotate(12deg);filter:drop-shadow(0 8px 5px #749aa320)}.report-table{width:100%;border-collapse:collapse;font-size:12px}.report-table th{font-size:10px;color:var(--muted);font-weight:400;text-align:left;padding:12px 7px;background:#f8fafc}.report-table td{padding:15px 7px;border-bottom:1px solid #edf2f5}.report-table .winner-row{color:#198aab;font-weight:700}.report-scroll{overflow-x:auto}.report-actions{display:flex;gap:10px;flex-wrap:wrap}.back-link{font-size:11px;color:#809ba9}.accent-orange{color:var(--orange)}
dialog{border:0;border-radius:22px;padding:32px;width:min(460px,calc(100% - 30px));color:var(--navy);box-shadow:0 25px 100px #0f34452b;max-height:90vh;overflow:auto}dialog::backdrop{background:#12344a66;backdrop-filter:blur(5px)}dialog h2{font-size:22px;letter-spacing:-.5px;margin:0 30px 12px 0}.dialog-close{position:absolute;right:16px;top:12px;background:transparent;border:0;font-size:27px;color:#8ba0ae;padding:5px 9px}.dialog-actions{display:flex;gap:10px;margin-top:22px}.dialog-actions button{flex:1}.recovery-code{background:#f0f7fb;border:1px dashed #a7d8e9;border-radius:10px;padding:16px;font-family:monospace;font-size:12px;overflow-wrap:anywhere;user-select:all;line-height:1.8;margin:18px 0}.score-team-labels{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:11px;background:#f1f8fb;border-radius:10px;padding:12px;margin:15px 0}.score-game{display:grid;grid-template-columns:40px 1fr 15px 1fr;gap:10px;align-items:center;margin:14px 0}.score-game span{font-size:11px;color:#8ca4b1}.score-game input{height:53px;width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;text-align:center;font-size:24px;font-weight:800;color:var(--navy)}.form-error{color:#cc6759;font-size:12px;line-height:1.7;min-height:0}.export-image{width:100%;display:block;border-radius:12px;margin:20px 0 8px}.export-link{display:block;color:var(--blue);font-size:12px;text-align:center;margin:10px 0 20px}#toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%,20px);background:#17374bee;color:#fff;padding:12px 20px;border-radius:12px;box-shadow:0 5px 20px #15374b22;font-size:12px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:9999;max-width:90vw;line-height:1.7}#toast.visible{opacity:1;transform:translate(-50%,0)}
.reveal{width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:0;background:radial-gradient(ellipse at 50% 35%,#245d7e,#102e45 70%);color:#fff;overflow:hidden}.reveal-content{position:relative;z-index:1;min-height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:65px 25px;overflow-y:auto;max-height:100dvh}.reveal-content .bird-crop{width:190px;height:180px;overflow:hidden;animation:bird-in .8s cubic-bezier(.16,1.7,.5,1) both}.bird-crop img{height:180px;width:auto;max-width:none}.reveal-eyebrow{font-size:12px;letter-spacing:7px;color:#80d5f5;animation:fade-up .7s .6s both}.reveal-content h2{font-size:44px;margin:18px 0;letter-spacing:1px;animation:fade-up .7s 1.2s both;max-width:650px;overflow-wrap:anywhere}.reveal-content p{font-size:12px;color:#abc7d7;line-height:1.9;animation:fade-up .6s 1.6s both}.reveal-content .trophy{font-size:66px;margin:10px 0;animation:trophy-in .8s .8s cubic-bezier(.2,1.5,.5,1) both}.reveal-content .primary{margin-top:25px;background:#87dded;color:#14354a;animation:fade-up .6s 2.4s both}.skip{position:absolute;top:25px;right:23px;border:1px solid #ffffff30;background:#ffffff0a;color:#bad4e2;padding:9px 14px;border-radius:20px;font-size:11px;z-index:3}#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.flying-shuttle{position:absolute;top:38%;left:-80px;font-size:55px;animation:shuttle-fly 1s .5s both;filter:drop-shadow(-20px 0 15px #8be7ff)}
@keyframes bird-in{from{opacity:0;transform:translateY(120px) scale(.3) rotate(-20deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(-5deg)}}@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes trophy-in{from{opacity:0;transform:scale(0) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(5deg)}}@keyframes shuttle-fly{from{transform:translateX(0) rotate(-30deg);opacity:1}to{transform:translateX(120vw) rotate(30deg);opacity:0}}
@media(min-width:1400px){.hero{padding-top:60px;padding-bottom:45px}.hero h1{font-size:51px}.create-grid{grid-template-columns:1fr 1.3fr}}
@media(max-width:900px){main{padding:0 24px}.topbar{padding:0 24px}.footer{margin:45px 24px 0}.hero h1{font-size:36px}.room-layout{grid-template-columns:1fr 290px;gap:18px}.card{padding:23px}.member-grid{grid-template-columns:repeat(2,1fr)}.member-name{max-width:100px}.room-logo{width:240px}.progress-track{width:110px}.intro-card{padding:27px}.intro-card h2{font-size:24px}}
@media(max-width:650px){.topbar{height:65px;padding:0 20px}.brand{font-size:18px}.top-note,.tag{display:none}.topbar:after{content:"快乐上场 ↗";margin-left:auto;font-size:11px;color:#82a4b4}.hero{grid-template-columns:1fr;padding:28px 0 15px;gap:7px}.hero h1{font-size:36px;margin:12px 0 10px}.hero h1 br{display:none}.hero h1 em{display:block}.hero p{font-size:12px}.hero-art{padding:14px 3px 0;max-width:390px;margin:auto}.hero-logo{transform:rotate(-2deg)}.scribble{font-size:9px;margin:6px 10px 0}.hero .eyebrow{font-size:9px}.create-grid{grid-template-columns:1fr}.intro-card{display:none}main{padding:0 18px}.steps{margin:15px 0 22px;justify-content:center}.step{font-size:10px;gap:6px}.step span{height:22px;width:22px;font-size:10px}.step-line{width:16px;margin:0 9px}.card{padding:22px;border-radius:18px}.section-head{margin-bottom:21px}.section-head h2{font-size:18px}.footer{margin:35px 18px 0;padding:20px 0 26px;font-size:9px;gap:10px}.footer span:last-child{max-width:180px;text-align:right}.room-head{padding:25px 0 19px;align-items:start}.room-title h1{font-size:26px;max-width:250px;overflow-wrap:anywhere}.room-head .room-logo{display:none}.room-layout{grid-template-columns:1fr}.side-column{order:0}.room-layout.lobby-layout .side-column{order:1}.main-column{gap:17px}.room-meta{gap:8px;font-size:10px}.member-grid{grid-template-columns:repeat(2,1fr);gap:10px}.member{padding:14px 10px}.member-name{max-width:90px}.invite{padding:17px;gap:14px}.invite-qr{width:83px;height:83px}.invite h3{font-size:14px}.invite p{font-size:10px}.invite-actions button{padding:6px 9px;font-size:10px}.room-head+.steps{justify-content:start}.side-column .side-note{display:none}.room-layout:not(.lobby-layout) .side-column{order:1}.progress-card{padding:20px;gap:18px}.progress-track{width:160px}.progress-numbers{font-size:27px}.round-header h3{font-size:13px}.rest-note{font-size:10px}.match-card{padding:15px}.match-body{grid-template-columns:1fr 67px 1fr;gap:6px}.team{font-size:11px;gap:4px;flex-direction:column;align-items:flex-start}.team.right{align-items:flex-end}.match-score{font-size:19px}.summary-stats{gap:9px}.stat{padding:15px}.stat strong{font-size:23px}.mvp-card h2{font-size:25px;max-width:80%}.mvp-trophy{font-size:47px;right:18px;top:35px}.report-table{font-size:11px}.report-table td,.report-table th{padding-left:5px;padding-right:5px}.report-table th{font-size:9px}.reveal-content h2{font-size:33px}.reveal-content .bird-crop{width:155px;height:145px}.bird-crop img{height:145px}.loading{padding:70px 15px}.dialog-actions{gap:8px}dialog{padding:27px 23px}.report-actions button{flex:1}.rule-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.flying-shuttle{display:none}}

progress.progress-track{appearance:none;border:0;display:block}progress::-webkit-progress-bar{background:#eaf0f4;border-radius:10px}progress::-webkit-progress-value{background:var(--teal);border-radius:10px}progress::-moz-progress-bar{background:var(--teal);border-radius:10px}