:root{--page-bg: #505050;--page-text: #eeeeee;--canvas-bg: #111111;--canvas-border: #888888;--grid-stroke: rgba(255, 255, 255, .06);--panel-border: #333333;--panel-bg: #6c6c6c;--accent: #dffdff;--footer-height: 36px}html,body{margin:0;background:var(--page-bg);color:var(--page-text);height:100%;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif}body,main,.wrap{padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom))}body{overflow:hidden}main{height:calc(100dvh - var(--footer-height) - env(safe-area-inset-bottom));overflow:auto}.wrap{display:grid;grid-template-rows:min-content max-content min-content;align-content:center;justify-items:center;gap:24px;min-height:100vh}canvas{background:#444;border:1px solid var(--canvas-border);touch-action:none;pointer-events:auto;z-index:5}.small{font-size:14px;opacity:.9;text-align:center;z-index:2}button.small{appearance:none;font:inherit;font-weight:600;border-radius:8px;border:1px solid var(--panel-border);background:transparent;color:var(--accent);padding:8px 14px;min-height:44px;min-width:88px;cursor:pointer;transition:background-color .2s ease}button.small:hover{background:#333}button.small:focus-visible{outline:2px solid #ffffff;outline-offset:2px}#restart-btn,#clear-data{margin:6px 0}#restart-btn{background:var(--panel-bg);border-color:var(--panel-border)}#restart-btn:hover{background:#333}#clear-data{background:transparent}button.small:active{transform:translateY(1px)}button.small:disabled{opacity:.6;cursor:not-allowed}footer{text-align:center;font-size:14px;padding-bottom:env(safe-area-inset-bottom);background:var(--panel-bg);color:var(--page-text);border-top:1px solid var(--panel-border);position:fixed;bottom:0;left:0;right:0;height:var(--footer-height);width:100%;z-index:3}footer a{margin:0 4px;color:var(--accent);text-decoration:underline;font-weight:600}footer a:hover{text-decoration-thickness:2px}footer a:focus-visible{outline:2px solid #ffffff;outline-offset:2px;border-radius:2px}@media (prefers-reduced-motion: reduce){#clear-data{transition:none}}@media (max-width: 400px){canvas{width:90vw;height:auto}}@media (max-height: 700px){.wrap{gap:6px}#hud{font-size:14px}.small{font-size:13px}}