:root{color:#f4eddb;background:#102c36;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}main{width:min(100%,1400px);height:100dvh;padding:max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));grid-template-rows:auto minmax(100px,1fr);grid-template-columns:minmax(0,1fr) 220px;gap:10px;margin:auto;display:grid}header{flex-wrap:wrap;grid-column:1/-1;align-items:baseline;gap:16px;display:flex}h1{margin:0;font-size:22px}p{margin:8px 0}header p,.note{color:#bcced0;font-size:13px}#game{width:100%;min-width:0;height:100%;min-height:0;overflow:hidden}#game canvas{touch-action:none;display:block}#controls{min-height:0;overflow-y:auto}#input-status,#placement-status{font-size:14px}.rotation-guide{display:none}.placement-controls{flex-direction:column;gap:8px;margin:8px 0;display:flex}.placement-controls button{color:#f4eddb;min-height:44px;font:inherit;cursor:pointer;background:#234754;border:1px solid #839b9d;border-radius:6px;padding:8px 12px}.placement-controls button[aria-pressed=true]{background:#3e6370;border-color:#e3c98a}.placement-controls button:focus-visible{outline-offset:-3px;outline:3px solid #e3c98a}@media (orientation:landscape) and (height<=500px){main{grid-template-columns:minmax(0,1fr) 190px;gap:6px}h1{font-size:18px}#controls p{margin:5px 0;font-size:12px}.placement-controls{gap:4px}}@media (orientation:portrait){main{grid-template-rows:auto minmax(100px,1fr) auto;grid-template-columns:minmax(0,1fr)}header{gap:4px 12px}#controls{max-height:36dvh}.placement-controls{flex-flow:wrap}}@media (orientation:portrait) and (pointer:coarse){main{height:calc(100dvh - 70px)}.rotation-guide{background:#274957;border-top:1px solid #7b9a9e;padding:12px;font-size:13px;display:block}}#game{touch-action:none;-webkit-user-select:none;user-select:none;position:relative}#virtual-stick{z-index:2;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#173d4baa;border:2px solid #d8dec3;border-radius:50%;justify-content:center;align-items:center;width:112px;height:112px;display:none;position:absolute;bottom:16px;left:16px}#stick-knob{pointer-events:none;background:#e3c98acc;border-radius:50%;width:40px;height:40px}@media (pointer:coarse){#virtual-stick{display:flex}}