:root{--cream:#fff9ee;--paper:#fffdf7;--ink:#354155;--muted:#7a8478;--mint:#8bb3d7;--mint-light:#eaf1fa;--coral:#e788a0;--coral-light:#fff0f5;--yellow:#f4cf71;--line:#e8e7d9;--font:ui-rounded,"SF Pro Rounded","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);font-family:var(--font);font-synthesis:none;background:var(--cream)}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #417e72;outline-offset:4px}button{transition:transform .15s,background .15s,box-shadow .15s}button:active{transform:translateY(2px)}button svg,svg.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.home-view{min-height:100svh;background-image:radial-gradient(#a5ac8d22 .7px,transparent .7px);background-size:9px 9px}.site-header{max-width:1100px;margin:auto;padding:25px 34px 15px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:16px;letter-spacing:.5px}.brand img{border-radius:13px}.brand small{font-size:10px;color:var(--muted);display:block;margin-top:3px;font-weight:500;letter-spacing:1px}.header-actions{display:flex;align-items:center;gap:8px}.icon-button{width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fffdf5b8}.icon-button:hover{background:#f1efdf}.home-main{max-width:1060px;margin:auto;padding:0 34px 24px}.hero{display:grid;grid-template-columns:40% 60%;align-items:center;padding:28px 0 34px;min-height:330px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;display:flex;align-items:center;gap:7px}.live-dot{height:6px;width:6px;border-radius:50%;background:var(--coral)}h1{font-size:58px;line-height:1.17;letter-spacing:-3px;margin:18px 0 16px;font-weight:900}h1>span{display:block;color:var(--coral)}.title-dot{color:var(--ink)}.hero-description{font-size:15px;line-height:1.9;color:#737e70;letter-spacing:.5px;margin:0}.feature-tags{display:flex;gap:12px;margin-top:19px}.feature-tags>span{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;border:1px solid #e5e5d3;background:#fffaf0;border-radius:20px;padding:6px 10px}.feature-tags svg{width:16px;height:16px;fill:none;stroke:#6f998b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.two-dots{display:flex;gap:2px}.two-dots i{height:8px;width:8px;background:var(--coral);border-radius:50%}.two-dots i+ i{background:var(--mint)}.hero-art{position:relative;align-self:center}.hero-art>img{width:100%;height:auto;transform:rotate(-3deg)}.art-caption{position:absolute;right:22px;top:-3px;z-index:1;transform:rotate(7deg);background:var(--yellow);padding:10px 15px;border-radius:7px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;box-shadow:0 3px 0 #d4ac5333}.art-caption svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}.art-note{display:block;text-align:center;font-size:10px;letter-spacing:2px;color:#7e9585;margin-top:-4px;transform:rotate(-3deg)}.setup-card{border:1px solid var(--line);border-radius:27px;background:var(--paper);box-shadow:0 6px 0 #e9e6d64a,0 14px 35px #6f725209;padding:25px 28px 18px}.setup-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px}.setup-heading h2{font-size:18px;margin:0;font-weight:850}.setup-heading>span{color:var(--muted);font-size:11px}.team-pickers{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center}.team-label{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:750;margin-bottom:10px}.team-label small{margin-left:auto;color:#a0a391;font-weight:400;font-size:10px}.team-dot{width:7px;height:7px;background:var(--coral);border-radius:50%}.bottom-team .team-dot{background:#759fc5}.animal-options{display:flex;gap:10px}.animal-option{border:1.5px solid var(--line);border-radius:17px;display:flex;flex:1;align-items:center;padding:3px 12px 3px 4px;position:relative;gap:4px;background:#fffef9;min-height:76px}.animal-option img{width:65px;height:65px;object-fit:contain}.animal-option>span{font-size:12px;white-space:nowrap;font-weight:700}.animal-option.selected{border-color:#eaa1b3;background:var(--coral-light)}.bottom-team .animal-option.selected{border-color:#91b5d4;background:#edf4fc}.selection-dot{position:absolute;right:9px;top:9px;border:1px solid #d9dacd;border-radius:50%;width:12px;height:12px;background:#fff}.selected .selection-dot{background:var(--coral);border-color:var(--coral);box-shadow:inset 0 0 0 3px #fff}.bottom-team .selected .selection-dot{background:#759fc5;border-color:#759fc5}.versus{font-weight:900;font-style:italic;font-size:20px;text-align:center;color:#a9b3a2;padding-top:15px}.versus span{display:block;font-size:8px;font-style:normal;font-weight:400;letter-spacing:1px;margin-top:4px}.match-options{display:flex;justify-content:space-between;border-top:1px dashed var(--line);margin-top:21px;padding-top:18px;gap:12px}.option-group{display:flex;align-items:center;gap:13px}.option-label{font-size:11px;color:var(--muted)}.segmented{display:flex;border-radius:12px;background:#f1f2e9;padding:4px;gap:3px}.segmented button{border-radius:9px;background:transparent;padding:8px 14px;font-size:11px;color:#7c8878;display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px}.segmented button.active{background:#fffdf7;color:var(--ink);box-shadow:0 2px 4px #59634612;font-weight:750}.segmented svg{width:15px;height:15px}.primary-button{background:var(--coral);color:#fffdf5;min-height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:17px;font-weight:800;box-shadow:0 4px 0 #c87089;width:100%;padding:13px 20px}.primary-button:hover{background:#dc7892}.start-button{margin-top:21px;justify-content:space-between;padding:10px 15px 10px 24px;min-height:62px;font-size:19px;letter-spacing:1px}.start-button>span:first-child{display:flex;align-items:center;gap:13px}.start-button small{font-size:10px;letter-spacing:1px;font-weight:500;opacity:.85}.button-arrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff6e632}.button-arrow svg{width:20px;height:20px}.table-tip{font-size:10px;color:#929785;display:flex;align-items:center;justify-content:center;gap:7px;margin:15px 0 0;letter-spacing:.5px}.table-tip svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none}.home-footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.5px;color:#99a08e;margin-top:23px}.game-view{position:fixed;inset:0;z-index:10;background:var(--cream);overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.game-toolbar{height:57px;display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:auto;padding:5px 17px;gap:10px}.game-toolbar .icon-button{width:39px;height:39px}.game-toolbar .header-actions{gap:6px}.match-title{font-size:12px;font-weight:750;letter-spacing:1px;display:flex;align-items:center;gap:7px}.match-dot{width:5px;height:5px;background:var(--mint);border-radius:50%}.timer-pill{background:#fffdf8;border:1px solid var(--line);border-radius:20px;min-width:83px;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;font-variant-numeric:tabular-nums}.timer-pill #time-value{font-size:20px;font-weight:850}.timer-pill small{font-size:10px;color:var(--muted)}.timer-indicator{border:2px solid var(--mint);width:11px;height:11px;border-radius:50%}.timer-pill.ending{color:var(--coral);background:#fff0e8}.game-stage{display:flex;align-items:center;justify-content:center;gap:55px;height:calc(100% - 57px);padding:0 10px 10px}.court{position:relative;aspect-ratio:4/7;height:100%;max-height:100%;max-width:100%;border-radius:25px;background:#dfebdc;overflow:hidden;box-shadow:0 4px 0 #b6cbb750,0 12px 30px #536d5410;flex-shrink:0;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none}.desktop-note{display:flex;align-items:center;flex-direction:column;color:#859784;gap:9px;font-size:11px;max-width:150px;line-height:1.6;text-align:center}.desktop-note img{width:100px;height:100px}.desktop-note strong{font-size:15px;color:var(--ink)}.desktop-note small{font-size:10px;opacity:.75}.court-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:#edf4e126;color:var(--ink);gap:7px}.court-message>span{font-size:13px;font-weight:700;background:#fff9eae8;border:1px solid #e5e5d2;border-radius:20px;padding:10px 17px}.court-message strong{font-size:100px;font-weight:900;line-height:1.2;color:var(--coral);text-shadow:0 5px 0 #fffbed}.court-message small{font-size:11px;color:#68836c}.goal-message{position:absolute;top:40%;left:12%;width:76%;padding:18px 12px;display:flex;align-items:center;justify-content:center;gap:9px;background:#fff9eef2;border:1px solid #f0dca8;border-radius:20px;box-shadow:0 7px 0 #aec3ac33;pointer-events:none}.goal-message svg{width:25px;height:25px;fill:var(--yellow);stroke:#cba94e;stroke-width:1.2}.goal-message strong{font-size:17px}.goal-message>span{font-size:25px;font-weight:900;color:var(--coral)}.dialog{border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:27px;width:calc(100% - 38px);max-width:395px;padding:33px 27px 25px;text-align:center;box-shadow:0 20px 90px #23443d33;max-height:calc(100dvh - 40px);overflow-y:auto}.dialog::backdrop{background:#233f3b66;backdrop-filter:blur(6px)}.dialog h2{font-size:27px;letter-spacing:-.5px;margin:9px 0 18px;font-weight:850}.dialog p{color:#85907d;font-size:13px;line-height:1.8}.dialog-eyebrow{font-size:10px;letter-spacing:2px;color:#80947d}.dialog-close{position:absolute;right:10px;top:10px;width:33px;height:33px;background:transparent;border:0}.dialog-close svg{width:18px;height:18px}.dialog .primary-button{margin-top:17px}.secondary-button{border:1px solid #d9dfcf;background:#f0f2e7;display:flex;align-items:center;justify-content:center;gap:8px;min-height:47px;border-radius:14px;width:100%;font-size:13px;font-weight:650;padding:11px 16px;margin-top:13px}.secondary-button svg{width:18px;height:18px}.text-button{background:transparent;color:#83927e;padding:13px 4px 3px;font-size:12px;margin-top:4px;min-height:40px}.how-step{display:flex;gap:12px;text-align:left;margin:23px 0;align-items:flex-start}.step-number{background:#e3ecd9;color:#6a8872;border-radius:50%;width:29px;height:29px;flex-shrink:0;display:grid;place-items:center;font-size:13px;font-weight:800}.how-step strong{font-size:13px}.how-step p{font-size:11px;margin:5px 0 0;line-height:1.7}.rest-illustration{position:relative;width:140px;margin:-9px auto 5px}.rest-illustration>span{position:absolute;right:0;top:12px;color:#8aa597;font-size:14px;letter-spacing:5px;transform:rotate(-10deg)}.result-confetti{display:block;font-size:28px;letter-spacing:13px;color:#d4ae57;margin-bottom:14px}.result-scores{display:flex;justify-content:center;align-items:center;gap:13px}.result-scores>div{display:flex;align-items:center;flex-direction:column;gap:2px}.result-scores img{width:88px;height:88px}.result-scores div>span{font-size:11px;color:#83907b}.result-scores strong{font-size:39px;font-weight:900;line-height:1.4}.result-scores>div:first-child strong{color:var(--coral)}.result-scores>div:last-child strong{color:#759fc5}.score-colon{font-size:24px;color:#aab29d;margin-top:85px}.rotate-notice{position:absolute;inset:0;z-index:30;background:var(--cream);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-align:center}.rotate-notice h2{font-size:22px;margin:9px 0 0}.rotate-notice p{font-size:13px;color:var(--muted)}.rotate-notice small{font-size:10px;color:var(--muted)}.phone-shape{width:38px;height:65px;border:3px solid var(--mint);border-radius:10px;position:relative}.phone-shape::after{content:"";position:absolute;bottom:5px;left:12px;width:8px;height:3px;background:var(--mint);border-radius:2px}.toast{position:fixed;z-index:100;bottom:calc(25px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream);padding:12px 19px;border-radius:15px;box-shadow:0 5px 25px #0002;font-size:12px;max-width:90vw;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1250px){.home-main{padding-top:10px}.hero{padding-top:38px;padding-bottom:42px}.setup-card{padding:27px 34px 20px}}
@media(max-width:760px){.site-header{padding:17px 22px 8px}.home-main{padding:0 22px 21px}.hero{grid-template-columns:1fr;position:relative;padding:22px 0 12px;min-height:0}.hero-copy{position:relative;z-index:1}.eyebrow{font-size:9px;letter-spacing:1px}h1{font-size:43px;letter-spacing:-2px;margin:12px 0 10px}h1>span{display:inline;margin-left:3px}.hero-description{font-size:12px;line-height:1.8}.hero-description br{display:none}.feature-tags{margin-top:12px;gap:8px}.feature-tags>span{font-size:9px;padding:5px 9px}.hero-art{width:100%;margin:8px 0 3px}.hero-art>img{max-height:225px;object-fit:contain;transform:rotate(-2deg)}.art-caption{right:0;top:5px;font-size:9px;padding:7px 10px;transform:rotate(6deg)}.art-caption svg{width:12px;height:12px}.art-note{font-size:9px;margin-top:-14px;letter-spacing:1px}.setup-card{padding:18px 17px 14px;border-radius:22px}.setup-heading{margin-bottom:14px}.setup-heading h2{font-size:15px}.setup-heading>span{font-size:9px}.team-pickers{grid-template-columns:1fr 29px 1fr}.team-label{font-size:10px;margin-bottom:8px;gap:5px}.team-label small{display:none}.team-dot{width:6px;height:6px}.animal-options{gap:5px}.animal-option{padding:4px 2px 7px;min-height:88px;flex-direction:column;gap:0;border-radius:12px}.animal-option img{width:52px;height:52px}.animal-option>span{font-size:10px}.selection-dot{width:9px;height:9px;top:5px;right:5px}.selected .selection-dot{box-shadow:inset 0 0 0 2px #fff}.versus{font-size:13px;padding-top:15px}.versus span{display:none}.match-options{margin-top:16px;padding-top:13px;gap:10px}.option-group{flex-direction:column;gap:7px;align-items:flex-start}.option-label{font-size:10px}.segmented{padding:3px;border-radius:10px}.segmented button{font-size:10px;padding:7px 11px;min-height:32px;border-radius:8px;gap:3px}.segmented svg{width:13px;height:13px}.start-button{margin-top:17px;min-height:55px;font-size:17px;padding:9px 12px 9px 18px;border-radius:14px}.start-button small{font-size:9px}.table-tip{font-size:9px;margin-top:13px;gap:5px}.home-footer{font-size:9px;margin-top:18px}.desktop-note{display:none}.game-stage{padding:0 6px 6px}.court{border-radius:20px}.game-toolbar{height:52px;padding:4px 12px}.game-stage{height:calc(100% - 52px)}.game-toolbar .icon-button{height:37px;width:37px}.goal-message strong{font-size:15px}}
@media(max-width:360px){.site-header{padding-left:17px;padding-right:17px}.home-main{padding-left:15px;padding-right:15px}h1{font-size:38px}.hero-art>img{max-height:175px}.setup-card{padding-left:13px;padding-right:13px}.segmented button{padding-left:8px;padding-right:8px}.brand{font-size:14px}.setup-heading>span{font-size:8px}.hero-description{font-size:11px}.art-caption{top:-3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}