:root{--paper:#f5f2e8;--green:#153e32;--lime:#dcff65;--ink:#143e31;--muted:#758178;--coral:#ff805d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:4px solid var(--coral);outline-offset:5px}a{color:inherit;text-decoration:none}.page{max-width:1280px;margin:auto;padding:0 58px}header{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #153e3227}.brand{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800;letter-spacing:1px}.brand-icon{font-size:29px;display:grid;place-items:center;background:var(--green);border-radius:50%;width:48px;height:48px}.brand small{display:block;font-size:8px;letter-spacing:1.7px;margin-top:5px;font-weight:500}.status{font-size:11px;letter-spacing:1px;display:flex;align-items:center;gap:8px}.status i{width:7px;height:7px;border-radius:50%;background:#678b32}main{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:54px 0 36px}.eyebrow{display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:2px}.eyebrow span{font-size:10px;border:1px solid #153e3270;padding:5px 8px;font-weight:700;letter-spacing:1px}h1{font-size:clamp(42px,4.7vw,62px);font-weight:900;letter-spacing:-3px;line-height:1.22;margin:29px 0 20px;position:relative}h1>span:first-child{position:relative;display:inline-block;z-index:0}h1>span:first-child:before{content:'';position:absolute;z-index:-1;left:-5px;right:-5px;bottom:4px;height:23px;background:var(--lime);transform:rotate(-3deg)}.heading-star{font-size:52px;color:#f0815d;display:inline-block;margin-left:15px;vertical-align:middle}.subtitle{font-size:14px;line-height:1.9;color:#6d7c73;margin:0 0 31px}.countdown{display:flex;align-items:flex-start;gap:15px}.countdown div{display:flex;flex-direction:column;align-items:center;gap:7px}.countdown strong{font-family:Impact,'Arial Narrow',sans-serif;letter-spacing:1px;font-size:clamp(40px,4.3vw,55px);font-weight:500;font-variant-numeric:tabular-nums;line-height:1}.countdown span{font-size:10px;color:var(--muted)}.countdown b{font-size:24px;line-height:1.7;font-weight:400;color:#abb3a5}.match-time{display:flex;align-items:center;gap:12px;font-size:11px;margin:23px 0}.match-time>span{background:#e5e8db;padding:5px 7px;font-size:9px}.match-time time{font-weight:700;letter-spacing:1px}.match-time small{font-size:9px;color:var(--muted)}.desktop-note{margin-top:48px;position:relative;width:280px;border-top:1px solid #153e3226;padding-top:15px}.desktop-note>span:first-child{font-size:9px;color:var(--muted);letter-spacing:1.5px}.desktop-note p{font-size:12px;line-height:1.7;margin:10px 0 0}.note-arrow{position:absolute;right:0;top:22px;font-size:45px;font-family:Arial;font-weight:400}.play{min-width:0}.court{position:relative;height:430px;background:var(--green);border-radius:4px;overflow:hidden;padding:42px;isolation:isolate}.court-inner{position:absolute;inset:25px;border:1px solid #f8f9df46;z-index:-1}.court-inner:before,.court-inner:after{content:'';position:absolute;top:0;bottom:0;width:1px;background:#f8f9df35}.court-inner:before{left:23%}.court-inner:after{right:23%}.court-mid{position:absolute;left:25px;right:25px;top:50%;height:1px;background:#f8f9df46;z-index:-1}.court-mark{position:absolute;font-size:7px;letter-spacing:2.4px;color:#f6f9e37e;left:40px}.court-mark.top{top:14px}.court-mark.bottom{bottom:13px}.photo-wrap{position:relative;background:#f9f5e6;width:250px;margin:0 auto;padding:10px 10px 0;transform:rotate(-5deg);box-shadow:5px 10px 0 #061d2255}.photo-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;padding:0 0 9px;font-weight:700}.photo-label span{opacity:.6}.portrait-button{border:0;display:block;padding:0;width:100%;height:260px;position:relative;background:#e5dec8;cursor:pointer;overflow:hidden}.portrait-button img{width:100%;height:100%;object-fit:cover;object-position:center 43%;display:block;transform:scale(1.08)}.photo-bottom{height:49px;display:flex;align-items:center;justify-content:space-between;gap:4px}.photo-bottom strong{font-size:15px}.photo-bottom>span{font-size:8px;max-width:145px}.photo-shade{position:absolute;inset:0;background:linear-gradient(0deg,#003d1320,transparent 50%);pointer-events:none}.speech{position:absolute;top:49px;right:12px;background:var(--lime);padding:12px 14px;color:#153e32;font-size:11px;font-weight:700;transform:rotate(7deg);box-shadow:2px 3px 0 #0b221c}.speech:after{content:'';position:absolute;bottom:-9px;left:20px;border-width:10px 8px 0 0;border-style:solid;border-color:var(--lime) transparent transparent transparent}.racket{position:absolute;width:145px;height:255px;bottom:-22px;right:-4px;transform-origin:70% 95%;transform:rotate(25deg);pointer-events:none;filter:drop-shadow(3px 5px 0 #06281c80)}.racket svg{width:100%;height:100%}.shuttle{position:absolute;left:22px;bottom:54px;font-size:42px;transform:rotate(-30deg);pointer-events:none}.court-pill{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);background:#f6f8e916;border:1px solid #f6f8e943;border-radius:20px;color:#ebf3d7;padding:6px 13px;font-size:9px;white-space:nowrap;letter-spacing:1.5px}.court-pill span{padding:0 5px;color:var(--lime)}.hit-button{display:flex;align-items:center;width:100%;border:0;border-radius:4px;background:var(--lime);color:var(--green);margin-top:16px;text-align:left;padding:14px 20px;cursor:pointer;box-shadow:0 4px 0 #bfd953;transition:transform .15s,box-shadow .15s}.hit-button:hover{transform:translateY(-2px);box-shadow:0 6px 0 #bfd953}.hit-button:active{transform:translateY(3px);box-shadow:0 1px 0 #bfd953}.hit-icon{font-size:27px;margin-right:14px}.hit-button>span:nth-child(2){font-size:18px;font-weight:900;letter-spacing:1px}.hit-button small{display:block;font-size:9px;letter-spacing:.5px;font-weight:500;opacity:.7;margin-top:4px}.button-arrow{margin-left:auto;font-size:33px;font-weight:400}.feedback{font-size:9px;text-align:center;color:#7e877c;margin:13px 0 0;min-height:14px}.scoreboard{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;border-top:1px solid #153e3227;border-bottom:1px solid #153e3227;padding:25px 0;align-items:center;gap:16px}.score-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}.score-title small{display:block;font-size:9px;font-weight:400;margin-top:5px;color:var(--muted)}.score-dot{width:8px;height:8px;background:#75973a;border-radius:50%;box-shadow:0 0 0 5px #e5eacc}.score-number{border-left:1px solid #153e3220;padding-left:28px}.score-number strong{font:32px Impact,'Arial Narrow',sans-serif;letter-spacing:1px}.score-number>span{display:block;font-size:9px;color:var(--muted);margin-top:5px}.score-tag{font-size:10px;text-align:right}.score-tag strong{display:inline-block;border:1px solid #cbd6b8;border-radius:10px;font-size:9px;padding:3px 7px;margin-left:2px}.score-tag>span{display:block;font-size:18px;margin-top:7px}footer{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.6px;color:#869083;padding:24px 0 30px;line-height:1.8}.mobile-br{display:none}.cry-face{display:none;position:absolute;inset:0;z-index:2;pointer-events:none}.tear{position:absolute;top:40%;width:17px;height:82px;background:linear-gradient(#ccfaff,#71dafa);border:2px solid #e4fcff;border-radius:5px 5px 50% 50%;transform:rotate(-10deg);box-shadow:1px 2px 0 #083e5080}.tear.left{left:31%}.tear.right{left:62%;top:30%;height:90px}.cry-mouth{position:absolute;left:45%;top:62%;font-size:51px;font-weight:900;color:#133729;text-shadow:0 2px #f4dcc9;transform:rotate(-12deg)}.impact{display:none;position:absolute;top:140px;left:8px;z-index:5;font-size:65px;font-weight:900;color:var(--lime);transform:rotate(-15deg);-webkit-text-stroke:2px #153e32;filter:drop-shadow(3px 4px 0 #f6f2df)}.crying .cry-face{display:block}.crying .portrait-button img{filter:saturate(.7)}.smashing .photo-wrap{animation:shake .46s ease-in-out}.smashing .racket{animation:swing .45s ease-in-out}.smashing .impact{display:block;animation:pop .6s ease-out both}.smashing .shuttle{animation:fly .45s ease-out}.smashing .speech{animation:bounce .4s ease-out}@keyframes shake{0%,100%{transform:rotate(-5deg)}20%{transform:translateX(-9px) rotate(-11deg)}40%{transform:translateX(9px) rotate(4deg)}60%{transform:translateX(-6px) rotate(-8deg)}80%{transform:translateX(3px) rotate(-3deg)}}@keyframes swing{0%{transform:rotate(25deg)}35%{transform:rotate(-70deg) translate(-20px,-12px)}100%{transform:rotate(25deg)}}@keyframes pop{0%{opacity:0;scale:.3}20%{opacity:1;scale:1.2}60%{opacity:1;scale:1}100%{opacity:0;scale:1.1}}@keyframes fly{0%{transform:translate(0,0) rotate(-30deg)}50%{transform:translate(130px,-120px) rotate(70deg)}100%{transform:translate(0,0) rotate(-30deg)}}@keyframes bounce{0%{scale:.8}70%{scale:1.1}100%{scale:1}}@media(min-width:1250px){main{gap:70px}.court{height:453px}.photo-wrap{width:265px}.portrait-button{height:275px}.racket{right:3px;bottom:-18px}}@media(max-width:900px){.page{padding:0 28px}main{gap:26px}.court{padding:42px 20px;height:417px}.photo-wrap{width:228px}.portrait-button{height:247px}.speech{right:6px;font-size:10px}.racket{width:123px;right:-12px}.scoreboard{grid-template-columns:1.2fr 1fr 1fr}.score-tag{display:none}.score-number{padding-left:20px}.desktop-note{margin-top:30px}.heading-star{font-size:37px;margin-left:10px}}@media(max-width:650px){.page{padding:0 22px}header{height:83px}.brand{font-size:12px;gap:8px}.brand-icon{width:36px;height:36px;font-size:21px}.brand small{font-size:6px;letter-spacing:1px;margin-top:4px}.status{font-size:8px;letter-spacing:0;gap:4px}.status i{width:5px;height:5px}main{display:flex;flex-direction:column;gap:24px;padding-top:31px;padding-bottom:25px}.eyebrow{font-size:10px;letter-spacing:1px;gap:10px}.eyebrow span{font-size:8px;padding:4px 6px}h1{font-size:45px;line-height:1.22;letter-spacing:-2.4px;margin:20px 0 15px}.heading-star{position:absolute;right:6px;bottom:5px;font-size:55px;transform:rotate(8deg)}.subtitle{font-size:11px;line-height:1.8;margin:0 0 23px}.subtitle br{display:none}.countdown{gap:17px}.countdown strong{font-size:45px}.countdown b{font-size:23px}.countdown span{font-size:9px}.match-time{gap:8px;font-size:10px;margin:19px 0 0}.match-time small{font-size:8px}.match-time>span{font-size:8px}.desktop-note{display:none}.court{height:398px;padding:38px 20px}.photo-wrap{width:239px}.portrait-button{height:244px}.photo-label{font-size:8px}.photo-bottom{height:46px}.court-inner{inset:21px}.court-mid{left:21px;right:21px}.court-mark{font-size:6px;left:31px}.court-pill{bottom:29px}.speech{top:42px;right:7px;font-size:10px;padding:10px 11px}.racket{width:130px;right:-2px;bottom:-30px}.shuttle{left:9px;bottom:48px}.hit-button{margin-top:13px;padding:14px 17px}.hit-button>span:nth-child(2){font-size:17px}.scoreboard{grid-template-columns:1fr 1fr;padding:20px 0;gap:19px 0}.score-title{grid-column:1/-1;font-size:11px;gap:9px}.score-title small{display:inline;margin-left:8px;font-size:8px}.score-number{padding-left:0;border-left:none}.score-number.personal{border-left:1px solid #153e3220;padding-left:25px}.score-number strong{font-size:31px}.score-number>span{font-size:9px;margin-top:4px}footer{font-size:7px;padding:19px 0 24px;gap:8px}.mobile-br{display:block}footer>span:last-child{text-align:right;font-size:6px;max-width:98px;align-self:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.impact{display:none!important}}

/* Thumb-friendly match mode */
.action-dock{position:relative}.hit-button[aria-busy="true"]{cursor:wait;filter:saturate(.7)}.combo{position:absolute;top:75px;left:13px;z-index:7;padding:5px 8px;transform:rotate(-10deg);background:var(--coral);color:#153e32;border:2px solid #f6f2df;font-size:15px;font-weight:900;opacity:0;pointer-events:none;box-shadow:2px 3px 0 #143e31}.combo.visible{opacity:1;animation:combo-pop .35s cubic-bezier(.17,.89,.33,1.5)}.combo small{font-size:8px;display:block;letter-spacing:1px}.hit-float{position:absolute;z-index:9;left:50%;top:38%;font-size:45px;font-weight:900;color:var(--lime);text-shadow:2px 2px #143e31,-1px -1px #143e31;pointer-events:none;animation:float-up .9s ease-out forwards}.hit-particle{position:absolute;left:50%;top:45%;z-index:8;width:8px;height:12px;background:var(--particle);pointer-events:none;border-radius:2px;animation:particle-burst .75s cubic-bezier(.15,.55,.35,1) forwards}.score-bump{animation:number-pop .35s ease-out}.crying .tear{animation:tear-stream .7s linear infinite}.crying .tear.right{animation-delay:.28s}.smashing .photo-wrap{animation:elastic-hit .55s cubic-bezier(.22,.61,.36,1)}
@keyframes float-up{0%{opacity:0;transform:translate(-50%,15px) scale(.5) rotate(-9deg)}20%{opacity:1;transform:translate(-50%,-4px) scale(1.2) rotate(-9deg)}100%{opacity:0;transform:translate(-50%,-95px) scale(.8) rotate(4deg)}}@keyframes particle-burst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.3)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1)}}@keyframes combo-pop{0%{transform:rotate(-10deg) scale(.4)}100%{transform:rotate(-10deg) scale(1)}}@keyframes number-pop{40%{transform:scale(1.25);color:#719a13}100%{transform:scale(1)}}@keyframes tear-stream{0%{transform:translateY(-4px) rotate(-10deg) scaleY(.85)}75%{transform:translateY(5px) rotate(-10deg) scaleY(1.08)}100%{transform:translateY(-4px) rotate(-10deg) scaleY(.85)}}@keyframes elastic-hit{0%,100%{transform:rotate(-5deg) scale(1)}20%{transform:translate(-10px,4px) rotate(-13deg) scale(.93,1.04)}45%{transform:translate(8px,-3px) rotate(5deg) scale(1.04,.96)}70%{transform:translate(-3px,1px) rotate(-8deg) scale(.99,1.01)}}
@media(max-width:650px){
body{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}.page{padding:0 19px}header{height:65px}.brand{font-size:11px}.brand-icon{width:31px;height:31px;font-size:18px}.status{font-size:7px}main{padding-top:22px;gap:20px}.intro{position:relative}.eyebrow{font-size:9px}.eyebrow span{font-size:7px;padding:3px 5px}h1{font-size:37px;line-height:1.15;margin:14px 0 12px;letter-spacing:-1.7px;max-width:290px}h1 br{display:none}.heading-star{font-size:35px;right:3px;bottom:auto;top:40px}.subtitle{font-size:10px;margin-bottom:17px;line-height:1.6}.countdown{gap:13px}.countdown strong{font-size:37px}.countdown b{font-size:18px;line-height:1.8}.countdown div{gap:4px}.countdown span{font-size:8px}.match-time{margin-top:12px;gap:7px;font-size:9px}.match-time>span{font-size:7px;padding:4px 5px}.match-time small{font-size:7px}.court{height:354px;padding-top:30px}.court-inner{inset:19px}.court-mid{left:19px;right:19px}.photo-wrap{width:225px}.portrait-button{height:222px}.photo-bottom{height:43px}.photo-bottom strong{font-size:14px}.photo-bottom>span{font-size:7px}.speech{top:36px;right:6px;font-size:9px;padding:10px}.court-pill{bottom:22px;font-size:8px;padding:5px 11px}.court-mark{font-size:5px}.racket{height:230px;width:121px;right:-9px;bottom:-25px}.shuttle{font-size:34px;left:10px;bottom:35px}.action-dock{position:fixed;bottom:0;left:0;right:0;padding:10px 19px calc(9px + env(safe-area-inset-bottom,0px));z-index:50;background:#f5f2e8f2;border-top:1px solid #153e321b;box-shadow:0 -10px 30px #143e3109;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.action-dock .hit-button{max-width:520px;margin:0 auto;padding:12px 17px;min-height:59px;box-shadow:0 3px 0 #bfd953;border-radius:9px}.action-dock .hit-button>span:nth-child(2){font-size:17px}.action-dock .hit-button small{font-size:8px}.action-dock .feedback{margin:8px 0 0;font-size:8px;min-height:12px}.combo{top:59px;left:7px;font-size:13px;padding:5px}.scoreboard{margin-top:-3px}.impact{font-size:58px;top:115px}.hit-float{font-size:39px}footer{padding-bottom:10px}
}
@media(max-width:360px){h1{font-size:33px;max-width:260px}.subtitle{font-size:9px}.heading-star{font-size:29px}.status{font-size:6px}.court{height:329px}.photo-wrap{width:207px}.portrait-button{height:207px}.court-pill{bottom:19px}.racket{width:109px}.speech{font-size:8px;padding:8px}.countdown strong{font-size:33px}}
@media(prefers-reduced-motion:reduce){.hit-particle{display:none}.hit-float{animation:none;opacity:1}.combo.visible{animation:none}.crying .tear,.smashing .photo-wrap,.score-bump{animation:none}}

@media(max-width:650px){h1{font-size:clamp(28px,8.8vw,35px);white-space:nowrap;max-width:none;margin:15px 0 11px;letter-spacing:-1.8px}.heading-star{display:none}.subtitle{margin-bottom:16px}}