:root{--yellow:#f3b925;--red:#b92d22;--blue:#216cad}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050505;touch-action:none;font-family:Arial,sans-serif}
#cabinet{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#28210d,#050505 66%)}
#screen-wrap{position:relative;width:min(100vw,calc((100vh - 88px)*1.125));aspect-ratio:1.125;background:#000;border:2px solid #6e5312;box-shadow:0 0 0 4px #111,0 12px 40px #000}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#07101a}
#controls{width:min(100vw,720px);height:88px;display:flex;justify-content:space-between;align-items:center;padding:8px 16px calc(8px + env(safe-area-inset-bottom));user-select:none}
.cluster{display:flex;gap:12px}
button{width:66px;height:62px;border:2px solid var(--yellow);border-radius:13px;background:#1a1a18;color:#fff;font-size:27px;font-weight:900;box-shadow:0 5px 0 #624700;touch-action:none}
button.round{border-radius:50%}.red{background:var(--red)}.blue{background:var(--blue)}
button.held{transform:translateY(4px);box-shadow:0 1px 0 #624700}
#rotate-note{display:none;position:absolute;left:10px;right:10px;bottom:8px;padding:6px;color:#f3b925;background:rgba(0,0,0,.75);text-align:center;font-size:9px;font-weight:800;letter-spacing:.08em}
@media(orientation:portrait) and (max-width:700px){#cabinet{justify-content:flex-start;padding-top:max(12px,env(safe-area-inset-top))}#screen-wrap{width:100vw;margin-top:8vh}#rotate-note{display:block}#controls{margin-top:12px}}