/* ゲームの枠と横並びを保ち、Web用の操作は盤面の外に置く。 */
.input-label{font-size:13px;margin:14px 0 8px}.input-label span{font-size:11px;margin-left:12px;color:#c3cedb}.input-board{position:relative;aspect-ratio:1024/300;background:#f5f5f5;border:3px solid #7a8791}.input-board canvas{width:100%;height:100%;display:block}.input-board .dial{top:8%;height:84%;width:24%;}.input-board .dial:nth-of-type(1){left:14.58%}.input-board .dial:nth-of-type(2){left:39.1%}.input-board .dial:nth-of-type(3){left:63.4%}
*{box-sizing:border-box}body{margin:0;background:#171e28;color:#eff3f8;font:15px/1.7 'Yu Gothic',Meiryo,system-ui,sans-serif}header{max-width:1100px;margin:auto;padding:18px 22px;display:flex;justify-content:space-between;gap:15px;font-size:12px}a{color:#c9e7ff}main{max-width:1100px;margin:auto;padding:0 16px 40px}.notice{font-size:12px;color:#c3cedb}.stage{position:relative;width:100%;aspect-ratio:1024/600;background:#fff}.stage canvas{display:block;width:100%;height:100%}.dial{position:absolute;width:19.5%;height:34.8%;top:41.6%;background:transparent;border:0;border-radius:50%;touch-action:none;cursor:grab;padding:0}.dial:nth-of-type(1){left:16.83%}.dial:nth-of-type(2){left:41.35%}.dial:nth-of-type(3){left:65.65%}.dial:active{cursor:grabbing}.dial:disabled{cursor:default}.dial:focus-visible{outline:4px solid #008de5;outline-offset:3px}.controls{padding:20px 4px}.setup{display:flex;align-items:center;gap:12px;flex-wrap:wrap}select,button{font:inherit;border-radius:6px;border:1px solid #748293;background:#253344;color:white;padding:10px 16px}button{cursor:pointer;min-height:44px}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #54cfff;outline-offset:3px}.buttons{display:flex;gap:14px;margin:15px 0}.red{background:#c42e32;border:2px solid #ff9290;box-shadow:0 4px 0 #671317;min-width:180px;font-weight:700}#status{margin:18px 0 4px;min-height:26px}.targets{color:#c9e7ff;margin:0;font-size:13px}.fine-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:700px}.fine-controls>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.fine-controls span{display:block;width:100%;font-size:12px}.fine-controls button{min-width:48px}details{margin-top:28px;border-top:1px solid #455365;padding-top:18px;font-size:13px}summary{cursor:pointer}li{margin-bottom:8px}#result{padding:20px;background:#243445;border:1px solid #526678;margin-top:22px}#result h2{margin:0 0 12px;font-size:23px}table{width:100%;border-collapse:collapse;text-align:center}th,td{padding:8px 4px;border-bottom:1px solid #4b5d70;font-size:13px}#result:focus{outline:2px solid #54cfff}main:fullscreen{overflow:auto;background:#171e28;max-width:none;padding:12px 20px}.stage{max-width:1100px;margin:auto}main:fullscreen .stage{width:min(100%,calc((100vh - 150px)*1.7067))}main:fullscreen .controls{max-width:1100px;margin:auto}@media(max-width:600px){body{font-size:13px}main{padding-inline:8px}header{padding:12px 10px;font-size:10px}.notice{font-size:10px}.fine-controls{gap:8px}.fine-controls button{padding:6px 12px}.setup{gap:8px}.setup select{max-width:165px}button,select{font-size:12px}.red{min-width:150px}.controls{padding-top:14px}table th,table td{font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* 画面・入力盤・赤ボタンを同時に見渡せる大きさで置く。元画面の比率は保つ。 */
main{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:0 22px}.notice{grid-column:1/-1;margin:0 0 10px}.game-shell{width:min(100%,calc((100dvh - 190px)*1.1377));margin:auto}.controls{padding:0 0 20px}.input-label{margin:6px 0;font-size:11px}.input-label span{font-size:10px;margin-left:6px}.buttons{margin:10px 0;gap:8px}.buttons button{padding:8px 12px}.red{min-width:150px;flex:1}.setup{gap:6px}.setup select{max-width:180px;padding:8px}.setup button{padding:8px;font-size:12px}#status{margin-top:12px}.fine-controls{gap:6px}.fine-controls>div{gap:4px}.fine-controls button{padding:6px;min-width:38px}.fine-controls span{font-size:11px}details{margin-top:16px;padding-top:12px}main:fullscreen{padding-top:8px}main:fullscreen .stage{width:100%}main:fullscreen .controls{margin:0}main:fullscreen .game-shell{width:min(100%,calc((100dvh - 140px)*1.1377))}
@media(max-width:700px){main{display:block}.game-shell{width:100%}.controls{padding-top:12px}.input-label span{display:inline}.setup{flex-wrap:nowrap}.setup select{max-width:150px}.fine-controls button{min-width:44px}.fine-controls span{font-size:12px}.buttons{margin:8px 0}.buttons button{font-size:12px}main:fullscreen .game-shell{width:min(100%,calc((100dvh - 150px)*1.1377))}}