:root{--ink:#183a51;--blue:#187fc1;--green:#169568;--yellow:#fff1a5;--paper:#fffdf7}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#dff5ff,#eaf8dd);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif}main{max-width:1080px;margin:auto;padding:20px}h1{margin:0;font-size:clamp(1.25rem,2.15vw,1.9rem);line-height:1.15;white-space:nowrap;letter-spacing:0}button{border:0;border-radius:11px;padding:11px 13px;background:white;color:var(--ink);font:700 1rem inherit;cursor:pointer;box-shadow:0 3px 0 #b8d3dc}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}button:disabled{cursor:not-allowed;opacity:.48;filter:grayscale(.2);box-shadow:0 2px 0 #c7d2d8}.game-layout{display:grid;grid-template-columns:minmax(380px,600px) 1fr;gap:20px;align-items:start}.court-box{position:relative;border:6px solid #d2ecf2;border-radius:18px;overflow:hidden;box-shadow:0 7px 0 #b7d9d8;align-self:start}canvas{display:block;width:100%;height:auto;background:#2f5d4a}.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;background:rgba(11,52,72,.45);color:white;font-size:1.55rem;font-weight:900;text-shadow:0 2px 3px #123;transition:.25s}.overlay.hidden{opacity:0;pointer-events:none}aside{display:grid;gap:12px;align-content:start;max-height:calc(100vh - 40px);overflow-y:auto;padding-right:6px;overscroll-behavior:contain}.title-panel{display:grid;gap:11px;background:rgba(255,253,247,.82);border-radius:15px;padding:14px 16px;box-shadow:0 5px 0 #c7dfe2;overflow:hidden}.header-actions{display:flex;gap:8px;flex-wrap:wrap}.header-actions button{flex:1;min-width:118px}.score{display:block!important;text-align:center;background:var(--paper);padding:15px;border-radius:15px;box-shadow:0 5px 0 #c7dfe2;font-size:1.2rem}.score>span{font-weight:800;font-size:.86rem;color:#4f7183}.score b{font-size:1.8rem;color:var(--green)}.score i{font-style:normal}.score-call{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:7px}.score-call div{min-width:58px}.score-call em{display:block;font-style:normal;font-size:.68rem;line-height:1.15;color:#537181}.score-call b{display:block;font-size:2rem;color:#169568;line-height:1.15}.score-call i{font-style:normal;font-size:1.5rem;color:#557789}.card,.message{border-radius:15px;padding:14px 16px;background:var(--paper);box-shadow:0 5px 0 #c7dfe2}.card h2{font-size:1rem;margin:0 0 9px}.card p{margin:5px 0;line-height:1.45}.message{background:var(--yellow);font-weight:800;line-height:1.55;border-left:6px solid #f0c62b}.message.learn{background:#e8f2ff;border-color:#187fc1;color:#17435d}.message.fault{background:#ffe3e0;border-color:#df5955;color:#9d302b}.message.good{background:#daf6e7;border-color:#25a873;color:#08724b}.choices{display:flex;gap:7px}.choices button{flex:1;padding:9px 5px;font-size:.86rem}.choices .selected{background:var(--blue);color:#fff}.choices .selected:disabled{opacity:.62;color:#fff}.setting-card{position:relative;border:2px solid rgba(37,168,115,.22)}.setting-card.locked{background:#eef4f6;border-color:#c8d7dd;color:#6f8794}.setting-card.locked::after{content:"スタート待ち中のみ変更可";display:block;margin-top:8px;font-size:.74rem;font-weight:800;color:#6b7f89}.rules{border-top:6px solid #e9c630}.keyrule{background:#eef6ff;border-left:6px solid #187fc1}.keyrule h2{color:#17435d}.keyrule p{font-size:.9rem}.controls{font-size:.9rem;color:#47677a}.foot{text-align:center;color:#557789;font-size:.9rem}#practiceCard,#speedCard,#modeCard{padding:10px 12px}#practiceCard h2,#speedCard h2,#modeCard h2{margin-bottom:6px}#practiceCard p,#speedCard p{font-size:.76rem;line-height:1.3;color:#47677a;margin:6px 0 0}#modeCard .choices{display:grid;grid-template-columns:repeat(2,1fr)}#speedCard .choices button,#modeCard .choices button{padding:7px 4px;font-size:.78rem}#practiceCard [data-practice]{font-size:.9rem;padding:8px 5px;min-width:64px}@media(max-width:800px){main{padding:13px}.game-layout{grid-template-columns:1fr}.court-box{max-width:600px;margin:auto;width:100%}aside{grid-template-columns:repeat(2,1fr);max-height:none;overflow:visible;padding-right:0}.title-panel,.score,.message{grid-column:1/-1}}@media(max-width:500px){h1{font-size:clamp(1.05rem,6vw,1.35rem)}aside{grid-template-columns:1fr}.header-actions{display:grid;grid-template-columns:1fr 1fr}}
#onlineCard .online-note{font-size:.74rem;color:#6b7f89;margin:0 0 8px}#onlineCard .online-form{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}#onlineCard .online-form input{flex:1;min-width:110px;border:2px solid #cfe3e7;border-radius:9px;padding:8px 10px;font:700 .95rem inherit;color:var(--ink)}#onlineCard .online-form button{padding:8px 10px;font-size:.84rem}#onlineStatus{font-size:.8rem;font-weight:800;color:#17435d;margin:4px 0}.online-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.slot-btn{padding:8px 6px;font-size:.78rem}.slot-btn.slot-mine{background:var(--green);color:#fff}.slot-btn.slot-taken{opacity:.5}.setting-card.locked::after{content:attr(data-lock-reason)}