:root{color-scheme:dark;--ink:#080e18;--gold:#ffe2a4}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#ddcda6;font:14px/1.5 ui-monospace,SFMono-Regular,monospace;overscroll-behavior:none}main{max-width:1120px;margin:auto;padding:18px 24px}header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px}.eyebrow{font-size:10px;letter-spacing:2px;color:#bd9660}h1{font-size:20px;margin:3px 0;color:var(--gold)}button{font:inherit;border:1px solid #725b3c;border-radius:6px;background:#1e2734;color:var(--gold);padding:9px 12px;cursor:pointer;min-height:44px;touch-action:manipulation}button:hover,button:focus-visible{background:#37455a}button:disabled{opacity:.5;cursor:wait}a{color:#caa976}.header-actions{display:flex;align-items:center;gap:16px}#player{display:flex;align-items:center;justify-content:center;gap:12px}#stage{width:min(calc(100% - 132px),calc((100dvh - 170px)*4/3));position:relative;flex-shrink:0;background:#000;box-shadow:0 12px 70px #000;border:1px solid #443e34;aspect-ratio:4/3}canvas{display:block;width:100%!important;height:100%!important;aspect-ratio:4/3;image-rendering:pixelated;outline:none;touch-action:none;-webkit-touch-callout:none;user-select:none}#controls{display:grid;gap:8px;width:120px;flex-shrink:0}#launch{position:absolute;inset:0;background:#080e18;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}#launch[hidden]{display:none}#launch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#launch:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#080e18 90%)}.launch-bottom{position:absolute;z-index:1;bottom:10px;width:100%;text-align:center;padding:0 14px}.launch-bottom p{margin:8px 0;font-size:12px}.launch-bottom button{font-weight:bold;background:#a84c22;color:#fff1c9;border-color:#f3b85f;min-width:200px;font-size:16px}.launch-bottom small{display:block;margin-top:7px;font-size:10px;color:#c7b89c}.help{text-align:center;color:#b1a58e;font-size:12px;margin:14px 0 8px}.quick-verbs{display:none;gap:6px;justify-content:center}.quick-verbs button{padding:5px 10px;font-size:12px}footer{font-size:10px;color:#857f73;margin-top:14px;display:flex;justify-content:space-between}#rotate{display:none;position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,#192442,#080e18 70%);z-index:100;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#rotate h2{font:26px/1.3 Georgia,serif;color:var(--gold);max-width:270px}#rotate p{font-size:15px}#rotate small{font-size:10px;color:#aa9876;max-width:240px;margin-top:25px}.phone-icon{font:100px/1 system-ui;color:#eebc6c;animation:rotate-phone 2.6s ease-in-out infinite}@keyframes rotate-phone{0%,15%{transform:rotate(0)}50%,85%{transform:rotate(90deg)}100%{transform:rotate(0)}}dialog{max-width:440px;width:calc(100% - 32px);border:1px solid #b79455;border-radius:12px;background:#121d2e;color:#e2d2b1;padding:24px;line-height:1.6}dialog::backdrop{background:#000b}dialog h2{font:25px/1.2 Georgia,serif;color:var(--gold)}.close{position:absolute;right:8px;top:6px;border:0;background:none;font-size:24px}#update{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:40;background:#23324a;border:1px solid #be985d;padding:10px 16px;border-radius:8px;font-size:12px;white-space:nowrap}#update[hidden]{display:none}.immersive main{position:fixed;inset:0;max-width:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;flex-direction:column;justify-content:center;background:var(--ink)}.immersive header,.immersive footer,.immersive .help{display:none}.immersive #stage{width:min(calc(100vw - 154px),calc((100dvh - 8px)*4/3))}.immersive #player{gap:10px}.immersive .quick-verbs{display:none}
@media(pointer:coarse){.quick-verbs{display:flex}.help span{display:none}button{-webkit-tap-highlight-color:transparent}}
@media(max-height:600px) and (orientation:landscape){main{padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}header,footer,.help{display:none}#player{gap:10px}#stage{width:min(calc(100vw - 145px),calc((100dvh - 65px)*4/3))}#controls{gap:5px;width:115px}#controls button{min-height:42px;padding:5px 7px;font-size:11px}.quick-verbs{margin-top:6px;display:flex}.quick-verbs button{min-height:42px;font-size:11px;padding:5px 9px}.launch-bottom{bottom:7px}.launch-bottom small{display:none}.launch-bottom button{min-height:42px;font-size:14px}.launch-bottom p{margin:5px 0}.immersive #stage{width:min(calc(100vw - 145px),calc((100dvh - 12px)*4/3))}#install-dialog{max-height:90dvh;overflow:auto}}
@media(orientation:portrait) and (max-width:900px){#rotate{display:flex}body{overflow:hidden}}
@media(prefers-reduced-motion:reduce){.phone-icon{animation:none;transform:rotate(90deg)}}
@media(max-height:600px) and (orientation:landscape){#controls{grid-template-columns:repeat(2,1fr);width:176px;gap:6px}#stage{width:min(calc(100vw - 206px),calc((100dvh - 65px)*4/3))}.immersive #stage{width:min(calc(100vw - 206px),calc((100dvh - 12px)*4/3))}.immersive #controls{width:176px}#controls button{font-size:11px;padding:6px 5px}}

#update{top:8px;bottom:auto;max-width:calc(100vw - 16px);padding:4px 8px;font-size:10px;white-space:normal}#update button{font-size:10px;padding:3px 7px;min-height:32px}#dismiss-update{border:0;background:transparent;font-size:20px!important}
#launch img{image-rendering:pixelated}

@media(max-height:600px) and (orientation:landscape){#controls button,.quick-verbs button{min-height:44px}.immersive .quick-verbs{display:flex}.immersive #stage{width:min(calc(100vw - 206px),calc((100dvh - 65px)*4/3))}}