:root{color-scheme:light;--background:#e9d9e5;--stone:#c6b0ce;--paper:#f5eced;--path:#ded0df;--accent:#755e88;background:var(--background);color:#584660;font-family:system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:relative;height:100dvh;background:var(--background)}#table{position:absolute;inset:80px 0 calc(100px + env(safe-area-inset-bottom));touch-action:none;user-select:none}nav{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:clamp(10px,4vw,26px);height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}aside{position:absolute;top:calc(18px + env(safe-area-inset-top));right:12px;display:flex;gap:2px}button{display:grid;place-items:center;width:42px;height:42px;border:0;outline:0;border-radius:50%;padding:11px;background:#fff5;color:var(--accent);cursor:pointer;touch-action:manipulation;transition:background .15s,opacity .15s,transform .15s}button:hover,button:focus-visible{background:#ffffff9c;box-shadow:0 0 0 2px var(--accent)}button:active{transform:scale(.92)}button:disabled{opacity:.3;cursor:default}button svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}aside button{width:30px;height:34px;padding:6px;background:none}aside button svg{width:19px;height:19px}button[aria-pressed=true]{background:#ffffff80}#play{width:64px;height:64px;background:var(--accent);color:var(--paper);box-shadow:0 8px 22px #67536e20}#play svg{width:29px;height:29px}#play.ready{animation:ready 1.5s ease-in-out infinite}@keyframes ready{50%{box-shadow:0 0 0 9px #ffffff55}}#sound{position:absolute;bottom:calc(105px + env(safe-area-inset-bottom));right:15px;width:30px;height:30px;padding:7px;background:none}#sound[aria-pressed=false]{opacity:.35}
#objective{position:absolute;left:22px;top:calc(19px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:8px;pointer-events:none}.swatches{display:flex;align-items:center;gap:9px}#goal,#actual{width:35px;height:35px;border-radius:50%;box-shadow:inset 0 2px 3px #ffffff75,0 4px 10px #564e6715}#actual{width:25px;height:25px}#progress{display:flex;gap:5px;height:5px}#progress i{width:4px;height:4px;border-radius:50%;background:#594b6526}#progress i.current{background:var(--accent);transform:scale(1.6)}#progress i.won{background:var(--dot)}#recipe{display:flex;gap:7px}#recipe span{display:flex;gap:2px}#recipe i{width:5px;height:7px;border-radius:60% 60% 60% 10%;background:var(--pigment);transform:rotate(-45deg)}#energy{position:absolute;bottom:calc(96px + env(safe-area-inset-bottom));left:24px;right:58px;display:flex;justify-content:center;align-items:center;pointer-events:none;gap:22px}.energy-player{display:flex;align-items:center;gap:6px}.energy-player svg{width:20px;height:20px;fill:var(--pigment)}.energy-player svg .eye{fill:#51435b}.energy-bar{width:clamp(36px,12vw,80px);height:5px;background:#ffffff65;border-radius:5px;overflow:hidden}.energy-bar i{display:block;height:100%;background:var(--pigment);transition:width .2s}#gesture{position:fixed;width:30px;height:38px;pointer-events:none;transform:translate(-8px,-4px);filter:drop-shadow(0 3px 4px #4f376a40)}#gesture svg{fill:#ffffffcc;stroke:var(--accent);stroke-width:1.5}#gesture[data-rotate=true]{transform:translate(-8px,-4px) rotate(35deg)}dialog{border:0;border-radius:24px;background:var(--paper);color:var(--accent);width:min(88vw,540px);min-height:160px;padding:60px 28px 32px;box-shadow:0 22px 100px #45394a30}dialog::backdrop{background:#3f35495a;backdrop-filter:blur(8px)}#close-collection{position:absolute;right:12px;top:12px}#collection-items{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}#collection-items canvas{width:100%;image-rendering:pixelated;background:#fff5;border-radius:12px;padding:7px}#collection.has-items:after{content:'';position:absolute;width:5px;height:5px;background:var(--accent);border-radius:50%;transform:translate(12px,-12px)}@media(min-width:700px){aside{right:25px;gap:8px}aside button{width:40px;height:40px}#objective{left:32px;top:27px}#goal{width:44px;height:44px}#table{inset:65px 0 105px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#recipe span{display:block;width:7px;height:19px;position:relative;background:#ffffff60;border-radius:3px;overflow:hidden}#recipe i{display:block;position:absolute;bottom:0;width:100%;border-radius:2px;transform:none}.energy-bar{position:relative;overflow:visible}.energy-bar b{position:absolute;top:-3px;height:11px;width:1px;background:var(--accent);opacity:.75}
.energy-bar{background:#ffffffa0;box-shadow:0 1px 0 #5b416524}.energy-player svg{filter:drop-shadow(0 1px 0 #5b416530)}
#energy{gap:12px}.energy-player{padding:5px 7px;border-radius:12px;background:#ffffff70}#recipe span{box-shadow:0 0 0 2px #ffffff65}

@media(pointer:coarse){#tile,#orbit,#pan{display:none}aside button{width:40px;height:40px;padding:9px}aside{gap:3px}}

#startup-status{position:absolute;left:25px;right:25px;top:42%;text-align:center;color:var(--accent);font-size:16px;line-height:1.5;pointer-events:none}body[data-boot=error] #play{opacity:1}

#startup-status:empty{display:none}#startup-status{z-index:100;pointer-events:auto;background:var(--paper);padding:20px;border-radius:16px;box-shadow:0 10px 35px #412a4230}#startup-status p{margin:0 0 10px}#startup-status small{display:block;overflow-wrap:anywhere;opacity:.85}#startup-status>div{display:flex;justify-content:center;gap:10px;margin-top:18px}#startup-status a,#startup-status button{font:inherit;width:auto;height:auto;padding:12px 16px;border-radius:12px;background:var(--accent);color:var(--paper);text-decoration:none}
body[data-boot=error] #table{pointer-events:none}

#rotate-piece{position:absolute;z-index:8;transform:translate(-50%,-50%);width:46px;height:46px;background:var(--accent);color:var(--paper);box-shadow:0 4px 14px #30213835}#rotate-piece[hidden]{display:none}#rotate:not(:disabled){background:var(--accent);color:var(--paper)}body[data-boot=error] #rotate-piece{display:none}
/* Keep the prototype tabs separate from desktop camera tools on narrow screens. */
@media (max-width:760px) and (pointer:fine){aside{top:65px}}