:root{color:#28251f;font-synthesis:none;--paper:#fff8e8;--ink:#28251f;--red:#e9684b;--blue:#497caf;--yellow:#ffd84b;background:#f4efdf;font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;font-weight:600}*{box-sizing:border-box}body{margin:0}button,input,select,summary{font:inherit}button,summary{cursor:pointer}button{color:inherit}button:disabled{cursor:default;opacity:.45}button,a,input,select,summary{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.court:focus-visible,.move-pad:focus-visible{outline:3px solid #275d91}button{touch-action:manipulation}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,h3,p{margin:0}button{border:0}#app{max-width:1360px;margin:auto;padding:30px 44px 20px}.masthead{justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px;display:flex}.brand{align-items:center;gap:16px;display:flex}.brand small{letter-spacing:.08em;font-size:12px}.brand h1{letter-spacing:-.065em;font-size:clamp(28px,3.5vw,44px);font-weight:950;line-height:1.35}.brand-mark{border:3px solid var(--ink);background:var(--yellow);width:61px;height:64px;box-shadow:3px 4px 0 var(--ink);border-radius:15px;display:block;position:relative;transform:rotate(-7deg)}.brand-mark i{border-left:6px solid var(--red);width:19px;height:43px;filter:drop-shadow(-2px 0 var(--ink));position:absolute;top:7px;left:10px;transform:skew(-10deg)}.brand-mark b{color:var(--ink);font-size:27px;position:absolute;top:18px;right:5px}.top-actions{align-items:center;gap:10px;display:flex}.icon-button,.settings summary{border:2px solid var(--ink);background:var(--paper);border-radius:6px;min-height:44px;padding:10px 15px;font-size:12px;font-weight:800;list-style:none}.settings{z-index:20;position:relative}.settings summary::-webkit-details-marker{display:none}.settings[open] summary{background:var(--yellow)}.settings-sheet{background:var(--paper);border:2px solid var(--ink);border-radius:7px;width:265px;padding:20px;position:absolute;top:54px;right:0;box-shadow:5px 5px #28251f22}.settings-sheet label{align-items:center;gap:8px;min-height:28px;margin-bottom:16px;font-size:13px;display:flex}.settings-sheet input{width:20px;height:20px;accent-color:var(--red)}.settings-sheet p{color:#6d6556;font-size:11px;line-height:1.8}.game-layout{grid-template-columns:minmax(0,1fr) 330px;align-items:start;gap:29px;display:grid}.court-column{min-width:0}.scoreboard{justify-content:space-between;align-items:center;gap:10px;height:72px;padding:0 5px 11px;display:flex}.competitor{white-space:nowrap;align-items:center;gap:9px;font-size:13px;display:flex}.competitor strong{font-family:Impact,Arial Black,sans-serif;font-size:46px;font-weight:900;line-height:1}.you strong{margin-left:6px}.cpu strong{margin-right:6px}.team-dot{background:var(--red);border:2px solid var(--ink);border-radius:50%;width:11px;height:11px}.cpu .team-dot{background:var(--blue)}.match-label{text-align:center;flex-direction:column;align-items:center;gap:7px;font-size:11px;line-height:1.5;display:flex}.ticket{background:var(--yellow);border:1.5px solid var(--ink);padding:3px 13px;font-size:11px;font-weight:900;display:inline-block;transform:rotate(-3deg)}.court-frame{border:3px solid var(--ink);background:var(--paper);border-radius:9px;position:relative;overflow:hidden;box-shadow:5px 6px #28251f}.court-label{z-index:2;white-space:nowrap;letter-spacing:.1em;color:#8a7d65;pointer-events:none;font-size:9px;position:absolute;top:9px;left:50%;transform:translate(-50%)}.court{aspect-ratio:5/3;touch-action:none;width:100%;position:relative}.court canvas{display:block}.pause-button{border:2px solid var(--ink);background:var(--paper);z-index:4;border-radius:50%;width:40px;height:40px;font-size:19px;font-weight:900;position:absolute;top:15px;right:16px}.rally-tools{flex-direction:column;gap:18px;margin-top:25px;display:flex}.angle-controls{justify-content:center;align-items:center;gap:10px;min-height:44px;display:flex}.angle-controls label{white-space:nowrap;font-size:12px}.angle-step{background:var(--paper);border:2px solid var(--ink);border-radius:6px;min-width:40px;min-height:42px;font-size:20px}.angle-controls input{width:min(180px,28vw);height:36px;accent-color:var(--red);cursor:pointer}.angle-controls output{text-align:right;width:35px;font-family:Arial,sans-serif;font-size:14px;font-weight:900}.button{border:2px solid var(--ink);width:100%;min-height:53px;box-shadow:3px 4px 0 var(--ink);border-radius:7px;justify-content:center;align-items:center;gap:12px;padding:12px 17px;font-size:14px;font-weight:850;transition:transform .12s,box-shadow .12s;display:flex}.button:hover:not(:disabled){box-shadow:3px 6px 0 var(--ink);transform:translateY(-2px)}.button:active:not(:disabled){box-shadow:1px 1px 0 var(--ink);transform:translate(2px,3px)}.primary{background:var(--yellow)}.primary span{font-size:25px;line-height:1}.secondary{background:var(--paper);box-shadow:2px 3px 0 var(--ink)}.start-button{max-width:420px;margin:auto;font-size:16px}.move-pad{color:#8d8169;touch-action:none;-webkit-user-select:none;user-select:none;border-top:1px dashed #b7aa8e;border-bottom:1px dashed #b7aa8e;justify-content:center;align-items:center;gap:14px;min-height:65px;margin-top:24px;font-size:12px;display:flex}.move-pad.active{color:var(--ink);cursor:ns-resize;background:#eee5ce;border:2px dashed #b7aa8e;border-radius:8px}.pad-arrow{font-size:30px;line-height:1}.pad-grip{font-size:24px;font-weight:900;transform:rotate(90deg)}.court-help{text-align:center;color:#796e5c;max-width:480px;margin:15px auto 0;font-size:11px;line-height:1.9}.workbench{border:2px solid var(--ink);background:var(--paper);border-radius:6px;padding:25px 23px 20px;position:relative;box-shadow:4px 5px #c8bea6}.workbench:before{content:"";background:#e4d5ad99;width:62px;height:18px;position:absolute;top:-9px;left:calc(50% - 31px);transform:rotate(-4deg)}.bench-heading{align-items:center;gap:12px;display:flex}.step-number{color:var(--red);border:2px solid var(--red);padding:9px 5px;font:900 28px/1 Impact,Arial Black,sans-serif;transform:rotate(-6deg)}.bench-heading small{color:#83745d;font-size:10px}.bench-heading h2{letter-spacing:-.06em;margin-top:3px;font-size:20px;font-weight:900}.record-description{color:#6b604f;margin-top:20px;font-size:12px;line-height:1.9}.voice-preview{background:#f7efdb;border:1px solid #d3c6ab;border-radius:5px;margin-top:17px;padding:5px 10px 10px;position:relative}.voice-preview svg{width:100%;height:72px;display:block}.wave-caption{color:#756a57;justify-content:space-between;align-items:center;gap:9px;font-size:9px;display:flex}.wave-caption span:first-child{text-overflow:ellipsis;white-space:nowrap;max-width:180px;overflow:hidden}.wave-caption span:last-child{white-space:nowrap}.record-button{background:var(--red);color:#fff8e8;min-height:57px;margin-top:17px}.record-dot{background:#fff8e8;border:1px solid #fff8e8;border-radius:50%;flex-shrink:0;width:11px;height:11px}.recording{background:#bb3c2d}.recording .record-dot{border-radius:1px}.voice-actions{flex-direction:column;align-items:center;gap:6px;margin-top:15px;display:flex}.voice-actions span{color:#8c7c60;font-size:9px}.text-button{text-underline-offset:4px;background:0 0;min-height:40px;padding:8px 3px;font-size:11px;text-decoration:underline}.text-button:hover{color:#b5442e}.alternate-input{flex-direction:column;justify-content:center;align-items:center;gap:0;margin-top:15px;display:flex}.alternate-input .text-button{color:#6f6452;min-height:34px;font-size:10px}.privacy-note{text-align:center;color:#8d816b;margin-top:9px;font-size:9px}.record-error{color:#973321;background:#f9e3d8;border-radius:5px;margin-top:15px;padding:10px;font-size:11px;line-height:1.8}.level-meter{background:#e0d4b8;border-radius:6px;height:6px;margin:10px 0 0;overflow:hidden}.level-meter span{width:calc(var(--level,0)*100%);background:var(--red);height:100%;display:block}.match-options{border-top:1px dashed #d3c6ab;justify-content:space-between;align-items:center;margin-top:20px;padding-top:17px;font-size:11px;display:flex}.match-options select{background:var(--paper);border:1px solid #b5a78c;border-radius:4px;min-height:40px;padding:7px 10px}.howto{border-top:1px dashed #d3c6ab;margin-top:20px;padding-top:18px}.howto h3{margin-bottom:13px;font-size:11px}.howto ol{counter-reset:steps;gap:11px;margin:0;padding:0;list-style:none;display:grid}.howto li{counter-increment:steps;grid-template-columns:18px auto;align-items:baseline;column-gap:7px;display:grid}.howto li:before{content:counter(steps);text-align:center;width:16px;height:16px;color:var(--paper);background:#28251f;border-radius:50%;grid-row:1/3;font:700 10px/16px Arial}.howto b{font-size:11px}.howto li span{color:#8b7a60;font-size:10px;line-height:1.8}.page-foot{color:#8a7f69;border-top:1px solid #dbd1ba;justify-content:space-between;gap:20px;margin-top:28px;padding-top:18px;font-size:10px;display:flex}.is-match .game-layout{grid-template-columns:minmax(0,1fr)}.is-match .workbench{display:none}.is-match .court-column{width:100%;max-width:1010px;margin:auto}.is-match .masthead{margin-bottom:8px}.is-match .brand h1{font-size:28px}.is-match .brand small{font-size:10px}.is-match .brand-mark{width:45px;height:45px;box-shadow:2px 2px 0 var(--ink)}.is-match .brand-mark i{height:28px;top:5px;left:7px}.is-match .brand-mark b{font-size:19px;top:12px;right:3px}.is-match .rally-tools{margin-top:15px}.is-match .rally-tools:empty{display:none}.is-match .move-pad{min-height:55px;margin-top:15px}.is-match .page-foot{display:none}.game-dialog{border:3px solid var(--ink);background:var(--paper);text-align:center;width:min(440px,100vw - 34px);box-shadow:7px 8px 0 var(--ink);color:var(--ink);border-radius:12px;padding:30px}.game-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#28251f99}.dialog-stamp{letter-spacing:.14em;background:var(--yellow);border:1.5px solid var(--ink);margin-bottom:17px;padding:4px 12px;font:900 11px/1.5 Arial,sans-serif;display:inline-block;transform:rotate(-4deg)}.game-dialog h2{letter-spacing:-.06em;font-size:32px;font-weight:950}.game-dialog p{color:#73654e;margin:15px 0 24px;font-size:12px;line-height:1.9}.game-dialog .button+.button{margin-top:14px}.result-score{justify-content:center;align-items:center;gap:26px;margin:15px 0;font:900 80px/1.1 Impact,Arial Black,sans-serif;display:flex}.result-score span:first-child{color:var(--red)}.result-score span:last-child{color:var(--blue)}.result-score i{color:#a8997c;font:900 40px Arial}.result-stats{justify-content:center;gap:40px;margin:0 0 27px;display:flex}.result-stats div{flex-direction:column;gap:5px;display:flex}.result-stats span{color:#817159;font-size:10px}.result-stats b{font-size:22px}.thump{animation:.22s ease-out thump}@keyframes thump{0%{transform:translate(-4px)}25%{transform:translate(3px)}60%{transform:translate(-1px)}to{transform:none}}.reduced-motion *{transition:none!important;animation:none!important}@media (width>=1050px) and (height<=850px){#app.is-match{max-width:1040px;padding-top:15px}.is-match .court-column{max-width:820px}.is-match .court-help{margin-top:7px}.is-match .scoreboard{height:62px}}@media (width<=1000px){#app{padding:23px 25px}.game-layout{grid-template-columns:minmax(0,1fr) 300px;gap:22px}.workbench{padding:23px 18px}.brand h1{font-size:35px}.competitor{gap:6px;font-size:11px}.competitor strong{font-size:39px}.match-label{font-size:10px}.bench-heading h2{font-size:18px}.court-label{font-size:8px}.angle-controls{gap:7px}}@media (width<=760px){#app{padding:18px 18px 24px}.masthead{gap:12px;margin-bottom:18px}.brand{gap:11px}.brand h1{font-size:30px}.brand small{font-size:9px}.brand-mark{width:45px;height:48px;box-shadow:2px 3px 0 var(--ink);border-radius:10px}.brand-mark i{height:30px;top:6px;left:6px}.brand-mark b{font-size:22px;top:12px;right:3px}.top-actions{gap:6px}.icon-button,.settings summary{padding:8px 10px;font-size:10px}.game-layout{flex-direction:column;gap:27px;display:flex}.court-column{order:1;width:100%}.workbench{order:0;width:100%;padding:21px 20px}.bench-heading h2{font-size:23px}.bench-heading small{font-size:9px}.record-description{margin-top:13px;font-size:11px}.record-description br{display:none}.voice-preview{margin-top:12px}.voice-preview svg{height:55px}.record-button{margin-top:12px}.alternate-input{flex-flow:wrap;gap:14px;margin-top:12px}.privacy-note{margin-top:4px}.match-options{margin-top:13px;padding-top:11px}.howto{display:none}.scoreboard{height:65px;padding-bottom:12px}.competitor{font-size:12px}.competitor strong{font-size:43px}.match-label{max-width:180px;font-size:9px}.court-label{font-size:7px;top:6px}.court-frame{box-shadow:3px 4px 0 var(--ink)}.rally-tools{gap:13px;margin-top:21px}.start-button{font-size:15px}.move-pad{gap:9px;min-height:58px;margin-top:20px;font-size:10px}.keyboard-hint{display:none}.court-help{font-size:10px;line-height:1.8}.page-foot{flex-direction:column;gap:6px;font-size:9px;line-height:1.7}.is-match .court-column{order:0}.is-match .brand h1{font-size:24px}.is-match .brand small{font-size:8px}.is-match .scoreboard{height:66px}.is-match .court{aspect-ratio:5/3}.is-match .move-pad{min-height:90px;margin-top:17px}.is-match .rally-tools{margin-top:18px}.pause-button{width:35px;height:35px;font-size:17px;top:12px;right:10px}.settings-sheet{right:-2px}.game-dialog{padding:26px 22px}.game-dialog h2{font-size:29px}}@media (width<=390px){#app{padding-left:13px;padding-right:13px}.brand h1{font-size:25px}.brand-mark{width:39px;height:43px}.brand small{font-size:8px}.top-actions .icon-button,.settings summary{padding:8px}.bench-heading h2{font-size:21px}.angle-controls{gap:6px}.angle-controls label{font-size:11px}.angle-step{min-width:35px}.competitor{font-size:10px}.competitor strong{font-size:35px}.match-label{font-size:8px}}@media (height<=520px) and (orientation:landscape){#app.is-match{padding:8px 18px}.is-match .masthead{margin-bottom:1px}.is-match .brand small,.is-match .brand-mark,.is-match .court-help{display:none}.is-match .brand h1{font-size:21px}.is-match .top-actions button,.is-match .settings summary{min-height:34px;padding:5px 11px}.is-match .court-column{max-width:580px}.is-match .scoreboard{height:45px}.is-match .competitor strong{font-size:30px}.is-match .ticket{padding:1px 10px;font-size:8px}.is-match .match-label{gap:2px}.is-match .court-frame{max-width:calc(166.67dvh - 183.337px);margin:auto}.is-match .move-pad{display:none}.is-match .rally-tools{gap:5px;margin-top:9px}.is-match .angle-controls{min-height:34px}.is-match .angle-step{min-height:31px;font-size:16px}.is-match .angle-controls input{height:25px}.is-match .start-button{max-width:320px;min-height:39px;padding:6px 14px;font-size:12px}.is-match:has(.angle-controls:not([hidden])) .court-frame{max-width:calc(166.67dvh - 295.006px)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width>=761px){.is-match .rally-tools{flex-direction:row;justify-content:center;align-items:center;gap:24px}.is-match .start-button{max-width:270px;margin:0}.is-match .angle-controls{flex:1;max-width:420px}.is-match:has(#angle-controls:not([hidden])) .move-pad{display:none}}.is-match .rally-tools:not(:has(>:not([hidden]))){display:none}.court canvas{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0!important}@media (width>=1050px) and (height<=850px){.is-match .court-column{max-width:min(1010px,166.67dvh - 441.676px)}}@media (width<=760px){.icon-button,.settings summary,.angle-step{min-width:44px}.alternate-input .text-button{min-height:44px}}@media (height<=520px) and (orientation:landscape){.game-dialog{max-height:calc(100dvh - 24px);padding:18px}.game-dialog h2{font-size:26px}.game-dialog .dialog-stamp{margin-bottom:10px}.game-dialog p{margin:10px 0 16px;font-size:11px}.game-dialog .button{min-height:42px}.result-dialog[open]{grid-template-columns:1fr 1fr;gap:8px 22px;width:min(650px,100vw - 44px);padding:16px 24px;display:grid}.result-dialog .dialog-stamp{grid-column:1/-1;justify-self:center;margin:0}.result-dialog h2{grid-column:1/-1;font-size:26px}.result-dialog .result-score{grid-area:3/1/5;margin:4px 0;font-size:76px}.result-dialog #result-description{grid-area:3/2;margin:4px 0;font-size:11px}.result-dialog .result-stats{grid-area:4/2;gap:28px;margin:0}.result-dialog .result-stats b{font-size:19px}.result-dialog #rematch{grid-area:5/1}.result-dialog #rerecord{grid-area:5/2;margin:0}}
