@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#30372f;background:#faf8f0;font-synthesis:none;--green:#344d3d;--pink:#ed7391;--purple:#8c7bdd}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #dc963c;outline-offset:4px}button{transition:background .18s,transform .18s}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.4}.shell{max-width:1400px;margin:auto;padding:0 54px}.topbar{height:101px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e4d9}.brand{text-decoration:none;color:var(--green);font-family:Outfit,sans-serif;font-size:25px;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;gap:10px}.brand-icon{font-size:41px;color:#ee917c}.brand-dot{color:#ee917c;margin-left:-9px}.summer-tag{font-size:10px;letter-spacing:2px;color:#838679;display:flex;gap:15px;align-items:center}.summer-tag span{font-size:24px;color:#d69e4d}.icon-button{border:1px solid #dfdfd2;border-radius:30px;background:transparent;padding:10px 14px;color:#66745f;font-size:17px}#sound-label{font-size:11px}.intro{display:flex;justify-content:space-between;align-items:center;padding:40px 0 32px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#7b826e;display:flex;align-items:center;gap:8px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#94a17b}h1{font-family:Outfit,sans-serif;font-size:clamp(34px,4vw,52px);font-weight:600;letter-spacing:-2px;margin:12px 0 8px;line-height:1.13}h1>span{color:#e18876}.intro p{margin:0;font-size:14px;color:#87877c}.intro-sticker{position:relative;margin-right:35px;transform:rotate(10deg);border:1px solid #d5d9bd;border-radius:50%;width:102px;height:102px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eef0db;font-family:Outfit,sans-serif;font-size:27px;line-height:1.1;color:#788452}.intro-sticker small{font:10px 'DM Sans',sans-serif}.intro-sticker>span{position:absolute;right:-14px;top:0;font-size:37px;color:#d6a255}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:25px;align-items:start}.court-column{border:1px solid #e1e3d4;border-radius:20px;overflow:hidden;background:#fffdf7;box-shadow:0 8px 24px #51533306}.scoreboard{display:flex;align-items:center;justify-content:space-between;height:98px;padding:18px 26px}.team{display:flex;gap:12px;align-items:center}.team strong{display:block;font-family:Outfit,sans-serif;font-size:18px;font-weight:600}.team small{display:block;font-size:8px;color:#9a998c;letter-spacing:1.4px;margin-top:5px}.team-right{text-align:right}.jelly-avatar{width:36px;height:32px;border-radius:50% 50% 35% 35%;position:relative;box-shadow:inset 3px 3px 0 #ffffff40}.jelly-avatar:after{content:'• •';position:absolute;top:8px;left:10px;font-size:12px;color:#593e52;white-space:pre}.pink{background:#f48baa}.purple{background:#a594e6}.score-center{text-align:center}.scores{display:flex;gap:20px;align-items:center;justify-content:center;font:600 36px Outfit,sans-serif;line-height:1}.score-divider{color:#c4c5b6;font-size:22px}.score-caption{display:block;font-size:7px;color:#939a85;letter-spacing:1px;margin-top:9px}.court-wrap{position:relative;aspect-ratio:1000/550;overflow:hidden;background:#baece7}canvas{display:block;width:100%;height:100%}.touch-count{position:absolute;top:18px;display:flex;gap:6px;align-items:center;color:#648a83}.touch-count.left{left:22px}.touch-count.right{right:22px}.touch-count>span{font-size:8px;letter-spacing:1.3px;margin-right:3px}.touch-count i{height:7px;width:7px;border:1px solid #77a49b;border-radius:50%;background:#ffffff55}.touch-count.left i.used{background:var(--pink);border-color:var(--pink)}.touch-count.right i.used{background:var(--purple);border-color:var(--purple)}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#edf9edb8;backdrop-filter:blur(4px);text-align:center;padding:20px}.overlay[hidden]{display:none}.welcome-symbol{font-size:48px;color:#e9b555;line-height:1.2;margin-bottom:14px}.overlay-eyebrow{font-size:9px;letter-spacing:2px;color:#718778}.overlay h2{font:600 clamp(22px,2.5vw,33px) Outfit,sans-serif;letter-spacing:-.8px;margin:10px 0;color:var(--green)}.overlay p{font-size:12px;margin:0 0 22px;color:#728272}.primary-button{border:0;border-radius:11px;color:#fffdf5;background:var(--green);padding:15px 26px;min-width:185px;font-size:14px;box-shadow:0 5px 0 #233a2c1a}.primary-button:hover{background:#496650}.primary-button span{margin-left:22px}.overlay>small{font-size:9px;color:#869582;margin-top:18px}.court-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:51px;padding:10px 21px;font-size:10px;color:#89907e}.court-toolbar>span{display:flex;align-items:center;gap:7px}.live-dot{width:6px;height:6px;background:#91ad83;border-radius:50%}.court-toolbar button{background:none;border:0;color:#747f6a;font-size:16px;margin-left:10px;padding:5px}.court-toolbar button span{font-size:10px;margin-left:4px}.settings{border:1px solid #e1e3d4;background:#fffdf6;border-radius:20px;padding:24px 23px}.settings-heading{display:flex;justify-content:space-between;align-items:center;color:#979c87;font-size:8px;letter-spacing:1.5px}.settings-heading>span+span{color:#bcad76;font-size:20px}.settings h2{font:500 24px Outfit,sans-serif;margin:10px 0 18px;letter-spacing:-.7px}.mode-options{display:grid;gap:9px}.mode{display:flex;align-items:center;gap:12px;border:1px solid #e6e6da;border-radius:11px;padding:12px;background:transparent;text-align:left;color:#65715e}.mode.selected{border-color:#a9b596;background:#f0f3e6}.mode-icon{font-size:27px;color:#8b9b78;min-width:27px;letter-spacing:-7px}.mode strong{display:block;font-size:12px;font-weight:600}.mode small{display:block;margin-top:5px;font-size:9px;color:#9a9f8b}.mode i{border:1px solid #d1d7c4;border-radius:50%;width:13px;height:13px;margin-left:auto;flex-shrink:0}.mode.selected i{background:#7c916e;border:3px solid #f0f3e6;outline:1px solid #7c916e}.settings h3{font-size:11px;font-weight:500;margin:22px 0 12px}.difficulty-options{display:flex;background:#f3f2e9;padding:4px;border-radius:10px;gap:3px}.difficulty-options button{flex:1;border:1px solid transparent;border-radius:7px;background:none;padding:9px 0;font-size:11px;color:#8f947f}.difficulty-options button.selected{background:#fffdf7;border-color:#e5e5d8;color:#536e47;box-shadow:0 2px 4px #41452a07}.difficulty-options span{display:block;font-size:8px;color:#a0a28e;margin-top:4px}.settings-divider{height:1px;background:#e9e8dc;margin-top:23px}.control-row{display:flex;justify-content:space-between;align-items:center;margin:15px 0;font-size:10px}.control-name{display:flex;align-items:center;gap:5px}.control-name i{width:6px;height:6px;border-radius:50%}.pink-dot{background:var(--pink)}.purple-dot{background:var(--purple)}.control-row>div{display:flex;align-items:center;gap:4px}.control-row>div>span{font-size:8px;color:#a3a38e;margin:0 3px}kbd{font:10px 'DM Sans',sans-serif;background:#f9f8ef;border:1px solid #e3e3d6;border-bottom-width:2px;border-radius:4px;display:inline-flex;width:21px;height:22px;justify-content:center;align-items:center;color:#7c826d}.keyboard-note{font-size:9px;color:#a4a38f;margin-top:19px}.tip-card{display:flex;gap:9px;border-radius:11px;background:#f7efd9;padding:14px 12px;margin-top:22px;color:#93804c}.tip-card>span{font-size:21px}.tip-card strong{font-size:10px;font-weight:600}.tip-card p{font-size:10px;line-height:1.7;margin:5px 0 0;color:#a09064}footer{display:flex;justify-content:space-between;padding:26px 2px;color:#a2a58f;font-size:10px}.footer-flower{font-size:17px;color:#d9a893;margin-left:6px}.rally-message{position:absolute;top:22%;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:30px;background:#fffdf3eb;color:#596b51;font-size:13px;white-space:nowrap;pointer-events:none}.rally-message:empty{display:none}.mobile-controls{display:none;padding:10px 18px;justify-content:space-between}.mobile-controls>div{display:flex;gap:8px}.mobile-controls button{touch-action:none;border:1px solid #dddacb;background:#f8efe7;border-radius:9px;padding:10px 16px;color:#9b667a}#right-touch button{background:#f0ecfa;color:#7c6da2}.settings.locked .mode-options,.settings.locked #difficulty-section{opacity:.6}@media(min-width:1500px){.shell{padding-top:15px}.intro{padding-top:48px;padding-bottom:40px}}@media(max-width:1050px){.shell{padding:0 25px}.game-layout{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.settings{padding:20px 17px}.scoreboard{padding:15px}.team{gap:8px}.team strong{font-size:15px}.overlay>small{font-size:8px}.welcome-symbol{font-size:34px;margin-bottom:7px}.overlay p{margin-bottom:14px}}@media(max-width:800px){.shell{padding:0 20px}.topbar{height:78px}.summer-tag{display:none}.intro{padding:28px 0}.intro-sticker{width:80px;height:80px;font-size:23px;margin-right:5px}.intro-sticker small{font-size:8px}.game-layout{grid-template-columns:1fr}.settings{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.settings-heading,.settings h2,.mode-options,#difficulty-section{grid-column:1}.settings-divider{display:none}.settings>h3{grid-column:2;grid-row:1/3;margin:10px 0}.control-row{grid-column:2;margin:8px 0}.control-row:nth-of-type(5){grid-row:3}.keyboard-note{grid-column:2}.tip-card{grid-column:2;grid-row:5/8;align-self:start;margin-top:10px}footer{font-size:9px}.mobile-controls{display:flex}.court-wrap{min-height:0}.welcome-symbol{font-size:45px}.overlay h2{font-size:30px}}@media(max-width:480px){.shell{padding:0 12px}.brand{font-size:21px}.brand-icon{font-size:33px}.intro-sticker{display:none}.intro p{font-size:11px}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:35px}.scoreboard{height:81px;padding:12px}.team strong{font-size:13px}.jelly-avatar{width:28px;height:27px}.jelly-avatar:after{left:7px;top:6px}.scores{font-size:28px;gap:13px}.score-caption{font-size:6px;letter-spacing:.3px}.team small{font-size:6px}.overlay{padding:12px}.welcome-symbol{display:none}.overlay h2{font-size:24px;margin:8px 0}.overlay-eyebrow{font-size:7px}.overlay p{font-size:10px;margin-bottom:12px}.primary-button{padding:11px 21px;font-size:12px;min-width:155px}.overlay>small{margin-top:10px;font-size:7px}.touch-count{top:11px}.touch-count.left{left:12px}.touch-count.right{right:12px}.touch-count>span{font-size:6px}.touch-count i{width:6px;height:6px}.settings{display:block;padding:20px}.settings h2{font-size:23px}.settings>h3{margin-top:24px}.settings-divider{display:block}.control-row{justify-content:flex-start;gap:24px;margin:14px 0}.control-name{min-width:60px}.tip-card{margin-top:18px}.court-toolbar{padding:8px 10px;font-size:8px}.court-toolbar button{margin-left:5px}footer{display:block;text-align:center;line-height:2}footer>span{display:block}.rally-message{font-size:10px;padding:7px 12px}}