:root{--bg:#0f1724;--panel:#071025;--accent:#ffd166;--muted:#94a3b8;--white:#e6eef8;--card:rgba(2,6,23,0.7)}*{box-sizing:border-box}body,html{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--bg);color:var(--white)}main{padding:12px}.container{gap:16px;align-items:stretch;width:100%;min-height:100vh;padding:12px}.canvasWrap,.container{display:flex;justify-content:center}.canvasWrap{position:relative;flex:1 1 75%;min-width:360px;height:calc(100vh - 24px);background:linear-gradient(180deg,#071025,#00101a);border-radius:10px;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.03);align-items:center;overflow:hidden}canvas{width:100%!important;height:100%!important;max-width:none;max-height:none;border-radius:8px;display:block}.overlayControls{left:5%;background:var(--card);padding:10px;width:min(320px,34%);color:var(--white);box-shadow:0 6px 18px rgba(0,0,0,.5)}.overlayControls,.playfieldInfo{position:absolute;top:5%;z-index:30;border-radius:8px;border:1px solid rgba(255,255,255,.04)}.playfieldInfo{right:5%;background:rgba(2,6,23,.55);padding:8px;width:min(320px,32%);color:var(--muted);font-size:.9rem;box-shadow:0 6px 18px rgba(0,0,0,.35)}.celebration{position:absolute;left:50%;top:12%;transform:translateX(-50%);z-index:40;font-size:1.4rem;color:#34d399;font-weight:700;pointer-events:none;text-shadow:0 4px 12px rgba(0,0,0,.6)}.overlayControls label{display:block;font-size:.95rem;color:var(--muted);margin-top:6px}.overlayControls input[type=number]{width:100%;margin-top:6px;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--white)}.overlayControls .row{display:flex;gap:8px;margin-top:10px}.overlayControls .btn{padding:8px 10px;border-radius:6px;background:var(--accent);color:#071025;border:none;cursor:pointer;font-weight:700}@media (max-width:900px){.overlayControls{width:44%}.playfieldInfo{width:40%;font-size:.85rem}}