@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+JP:wght@400;600;800&display=swap";:root{--bg-color:#0f172a;--panel-bg:#1e293bb3;--panel-border:#ffffff1a;--text-main:#f8fafc;--text-muted:#94a3b8;--accent-blue:#3b82f6;--accent-green:#10b981;--accent-red:#f43f5e;--accent-yellow:#fbbf24}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);background-image:radial-gradient(at 0 0,#3b82f626 0,#0000 50%),radial-gradient(at 100% 100%,#10b9811a 0,#0000 50%);background-attachment:fixed;justify-content:center;min-height:100vh;font-family:Noto Sans JP,sans-serif;display:flex}.app-container{flex-direction:column;gap:2rem;width:100%;max-width:1200px;padding:2rem;display:flex}.app-header{text-align:center;background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:16px;padding:2rem;animation:.8s forwards fadeInDown;box-shadow:0 8px 32px #0000004d}.app-header h1{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#60a5fa,#34d399);-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:1.5rem;font-weight:800}.app-header p{color:var(--text-muted);font-size:.85rem}.app-main{flex-direction:column;gap:2rem;display:flex}@media (width>=900px){.app-main{flex-direction:row;align-items:flex-start}}.court-section{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:16px;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:1.5rem;display:flex;box-shadow:0 8px 32px #0000004d}.court-caption{text-align:center;color:var(--text-muted);letter-spacing:.05em;margin:.5rem 0;font-size:.75rem;font-weight:600}.court-container{aspect-ratio:1097/2377;border-radius:4px;width:100%;max-width:500px;transition:transform .3s;position:relative;overflow:hidden;box-shadow:0 4px 20px #00000080}.court-container:hover{transform:scale(1.02)}.court-svg{-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:100%;display:block}.cursor-grab{cursor:grab;transition:r .2s cubic-bezier(.175,.885,.32,1.275),stroke-width .2s,fill .2s}.cursor-grab:hover{r:32;stroke-width:8px;fill:#fde047}.cursor-grab:active,.active\:cursor-grabbing{r:28;stroke-width:6px;fill:#facc15;cursor:grabbing!important}.controls-section{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:16px;width:100%;padding:2rem;box-shadow:0 8px 32px #0000004d}@media (width>=900px){.controls-section{width:350px;position:sticky;top:2rem}}.controls-title{border-bottom:1px solid var(--panel-border);color:var(--text-main);margin-bottom:1.5rem;padding-bottom:.5rem;font-size:1.25rem;font-weight:600}.control-group{margin-bottom:1.5rem}.control-label{color:var(--text-main);margin-bottom:.75rem;font-size:.95rem;font-weight:600;display:block}.control-slider{appearance:none;background:#fff3;border-radius:4px;outline:none;width:100%;height:6px;transition:background .2s}.control-slider:hover{background:#ffffff4d}.control-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-blue);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:transform .2s,background .2s;box-shadow:0 0 10px #3b82f6cc}.control-slider::-webkit-slider-thumb:hover{background:#60a5fa;transform:scale(1.2)}.helper-text{color:var(--text-muted);margin-top:.5rem;font-size:.75rem;line-height:1.4}.legend-panel{border-top:1px solid var(--panel-border);margin-top:2rem;padding-top:1.5rem}.legend-title{color:var(--text-main);margin-bottom:1rem;font-size:1rem;font-weight:600}.legend-list{color:var(--text-muted);flex-direction:column;gap:.75rem;font-size:.85rem;list-style:none;display:flex}.legend-list li{align-items:center;gap:.5rem;display:flex}.legend-col{font-size:1rem}.legend-line{border-bottom-style:dashed;border-bottom-width:2px;width:20px;display:inline-block}.legend-area{background:#fff3;border-radius:2px;width:16px;height:16px;display:inline-block}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}path{transition:d .1s ease-out}circle,line:not([stroke=white]){transition:cx .1s ease-out,cy .1s ease-out,x1 .1s,y1 .1s,x2 .1s,y2 .1s}text{transition:x .1s ease-out,y .1s ease-out}