top:92px;width:46px;height:46px;border-radius:50%;}
#dpad-left{position:absolute;left:0;top:46px;width:46px;height:46px;border-radius:50%;}
#dpad-right{position:absolute;left:92px;top:46px;width:46px;height:46px;border-radius:50%;}
#codebtn{position:fixed;left:14px;bottom:14px;width:46px;height:46px;border-radius:50%;z-index:10;
background:rgba(20,12,4,0.72);border:1px solid rgba(255,215,0,0.55);color:#ffd700;
font:600 20px/46px Georgia,serif;text-align:center;cursor:pointer;padding:0;
box-shadow:0 0 10px rgba(255,215,0,0.25), inset 0 0 8px rgba(255,215,0,0.12);}
/* the code writes over the view — no box; shrinks when idle */
#codetext{position:fixed;top:108px;left:50%;transform:translateX(-50%);max-width:88%;z-index:8;
text-align:center;opacity:0;transition:opacity .4s, transform .9s;pointer-events:none;}
#codetext.show{opacity:1;}
#codetext.idle{transform:translateX(-50%) scale(.7);opacity:.4;}
#codetext-code{color:#ffd700;font:16px/1.5 ui-monospace,Menlo,monospace;text-shadow:0 2px 8px #000;
white-space:pre-wrap;word-break:break-word;}
#codetext-code .dim{opacity:.4;}
#codetext-status{color:#caa64b;font:12px/1.4 Georgia,serif;margin-top:6px;opacity:0;transition:opacity .5s;
text-shadow:0 2px 6px #000;}
/* the ruby-count readout: a small fading numeral where the shape stands */
#rubicount{position:fixed;z-index:7;pointer-events:none;color:#ffd700;opacity:0;
font:600 15px/1 Georgia,serif;text-shadow:0 0 8px rgba(0,0,0,0.9),0 0 3px #000;
transform:translate(-50%,-100%);transition:opacity 0.6s;}
#shapepanel{position:fixed;right:76px;bottom:188px;display:none;flex-direction:row;gap:10px;z-index:6;
max-width:calc(100vw - 100px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px;}
#shapepanel::-webkit-scrollbar{display:none;}
#shapepanel.open{display:flex;}
#shapepanel button{width:46px;height:46px;flex:0 0 auto;border-radius:50%;
background:rgba(20,14,6,0.85);border:1px solid #8a6a1c;cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;}
#shapepanel button.sel{background:#d8a920;border-color:#d8a920;}
#shapepanel button svg{width:24px;height:24px;display:block;}
#shape-btn svg{width:24px;height:24px;display:block;}
#solidbar{position:fixed;top:40px;left:10px;right:64px;z-index:20;display:flex;gap:6px;}
#solidinput{flex:1;height:28px;border-radius:14px;border:1px solid #ffd700;background:rgba(0,0,0,0.6);color:#ffd700;padding:0 10px;font-size:12px;}
#solidsend{height:28px;padding:0 12px;border-radius:14px;border:1px solid #ffd700;background:#ffd700;color:#000;font-weight:bold;font-size:12px;}
☕️
The Creator
Loading...