:root{--page-bg: #505050;--page-text: #eeeeee;--canvas-bg: #111111;--canvas-border: #888888;--grid-stroke: rgba(255, 255, 255, .06);--panel-bg: #6b6b6b;--panel-border: #333333;--accent: #6fa8dc;--overlay-bg: rgba(0, 0, 0, .6);--overlay-text: #ffffff;--touchbar-height: 74px;--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}.wrap{display:grid;grid-template-columns:auto 180px;gap:12px;height:100vh;align-items:center;justify-content:center;padding-bottom:var(--footer-height)}canvas{background:#444;border:1px solid var(--canvas-border)}#side{display:flex;flex-direction:column;gap:8px;padding:8px}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);padding:8px;border-radius:6px;font-size:14px}.title{font-weight:600;margin-bottom:6px}.btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#next{width:150px;height:150px;background:#222;border:1px solid #444}#overlay{position:fixed;inset:0;background:var(--overlay-bg);color:var(--overlay-text);display:none;align-items:center;justify-content:center;font-size:24px;text-align:center;pointer-events:none;z-index:50}#overlay.show{display:flex}#game{position:relative;z-index:5}.small{font-size:14px;opacity:.9}.touchbar{display:none}body.touch .touchbar{display:grid;position:fixed;left:0;right:0;bottom:calc(var(--footer-height) + env(safe-area-inset-bottom));z-index:100;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);align-items:center;justify-items:center;gap:6px;padding:2px;background:var(--panel-bg);border-top:1px solid var(--panel-border)}body.touch .touchbar .btn{min-width:44px;min-height:44px;padding:8px;font-size:18px;line-height:1;border-radius:8px;border:1px solid var(--panel-border);background:#2b2b2b;color:var(--page-text)}body.touch .touchbar .btn:active{transform:translateY(1px);filter:brightness(1.1)}body.touch .wrap{padding-bottom:calc(var(--touchbar-height) + var(--footer-height))}button[data-action=pause]{touch-action:manipulation}footer{position:fixed;left:0;right:0;bottom:0;height:var(--footer-height);display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;background:var(--panel-bg);color:var(--page-text);border-top:1px solid var(--panel-border);padding-bottom:env(safe-area-inset-bottom);z-index:90}footer a{color:var(--accent);text-decoration:none;margin:0 4px}footer a:hover{text-decoration:underline}@media (min-width: 900px){body.touch .touchbar{display:none!important}.wrap{padding-bottom:var(--footer-height)}}@media (max-width: 600px){.wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100dvh;padding-bottom:var(--touchbar-height);gap:4px}#side{display:none!important}#side .panel:has(#next){display:block!important;position:absolute;top:8px;right:8px;background:transparent;border:none;padding:0;z-index:10}#side .panel:has(#next) .title{display:none}#game{width:100vw;height:auto;aspect-ratio:1 / 2;max-height:calc(100dvh - var(--touchbar-height) - 4px);border:1px solid var(--canvas-border);background:#222}#next{position:absolute;top:8px;right:8px;width:80px!important;height:80px!important;background:#222;border:1px solid #555;z-index:10}.wrap{position:relative}#overlay{font-size:20px;padding:0 12px}@media (max-height: 670px){footer{display:none}}.touchbar{gap:3px;padding:1px}.touchbar .btn{min-width:44px;min-height:44px;font-size:16px}}