:root{--bg: #f3f6fb;--panel: #ffffff;--accent: #3178c6;--muted: #6b7280;--glass: rgba(255,255,255,.6)}html,body,#app{height:100%;margin:0;background:linear-gradient(180deg,#eef6ff 0%,var(--bg) 60%);font-family:Inter,ui-sans-serif,system-ui,Arial}#app{display:flex;min-height:100vh}#game-canvas{flex:1;display:block;width:100%;height:100vh}#ui{width:340px;padding:16px;box-sizing:border-box}.ui-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.ui-header h1{font-size:18px;margin:0;color:#0f172a}.ui-header button{background:transparent;border:0;font-size:20px}.panel{background:linear-gradient(180deg,var(--glass),var(--panel));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:14px;box-shadow:0 8px 24px #10182814}.controls .field{margin-bottom:10px}label{display:block;margin:2px 0 6px;font-size:13px;color:var(--muted)}select,input{width:100%;margin-top:6px;padding:8px;border-radius:8px;border:1px solid #e6eef8;box-sizing:border-box}.buttons{display:flex;gap:8px;margin-top:12px}button{flex:1;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:var(--accent);color:#fff;cursor:pointer}button.primary{background:#1b64b7}#pause-btn{background:#6b7280}.status{margin-top:12px;font-weight:700;color:#111}@media (max-width: 800px){#app{flex-direction:column}#game-canvas{height:52vh}#ui{width:100%;padding:12px}.ui-header h1{font-size:16px}}@media (max-width: 480px){#game-canvas{height:60vh}#ui{position:fixed;left:12px;right:12px;bottom:12px;margin:0}.panel{padding:10px}.ui-header button{font-size:18px}.buttons{gap:6px}}.hidden{display:none}.hint{margin-top:8px;font-size:12px;color:var(--muted)}