:root{--bg-color: #EDE8E0;--bg-gradient: linear-gradient(180deg, #F3EFE9 0%, #ECE7DF 50%, #E2DBD0 100%);--panel-bg: rgba(255, 255, 255, .82);--panel-border: rgba(215, 205, 192, .65);--text-main: #36322d;--text-muted: #7c7468;--accent: #d86942;--accent-hover: #c45732;--symbol-active: #d86942;--shadow: 0 8px 32px rgba(80, 65, 45, .1);--modal-bg: rgba(248, 246, 242, .96);--btn-bg: rgba(255, 255, 255, .9);--btn-border: rgba(210, 200, 185, .7);--btn-active: #eae3d5}[data-theme=twilight]{--bg-color: #12141c;--bg-gradient: linear-gradient(180deg, #181B26 0%, #13151E 50%, #0E1017 100%);--panel-bg: rgba(24, 27, 38, .85);--panel-border: rgba(55, 62, 85, .6);--text-main: #e8ecf4;--text-muted: #8c96ac;--accent: #f27a6d;--accent-hover: #ff8e82;--symbol-active: #f27a6d;--shadow: 0 8px 32px rgba(0, 0, 0, .45);--modal-bg: rgba(20, 22, 32, .96);--btn-bg: rgba(30, 34, 48, .88);--btn-border: rgba(60, 68, 92, .65);--btn-active: #2b3145}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-main);transition:background .4s ease,color .4s ease}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:var(--bg-color);background-image:var(--bg-gradient);display:flex;align-items:center;justify-content:center;overflow:hidden}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;touch-action:none;z-index:1}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:16px}.top-bar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:720px;margin:0 auto;pointer-events:auto}.hud-pill{display:flex;align-items:center;gap:8px;background:var(--panel-bg);border:1px solid var(--panel-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:8px 16px;border-radius:9999px;box-shadow:var(--shadow);font-size:14px;font-weight:500;letter-spacing:.5px}.puzzle-selector-btn{background:none;border:none;font-size:15px;font-weight:700;color:var(--accent);cursor:pointer;display:flex;align-items:center;gap:4px}.puzzle-selector-btn:hover{color:var(--accent-hover)}.hud-actions{display:flex;gap:8px}.icon-btn{background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-main);box-shadow:var(--shadow);transition:all .2s cubic-bezier(.16,1,.3,1)}.icon-btn:hover{transform:translateY(-2px);background:var(--btn-active)}.icon-btn:active{transform:translateY(0)}.icon-btn.active{color:var(--accent);border-color:var(--accent)}.status-pill{position:absolute;top:76px;left:50%;transform:translate(-50%);background:var(--panel-bg);border:1px solid var(--panel-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:4px 14px;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--text-muted);box-shadow:var(--shadow);pointer-events:auto;transition:opacity .3s ease}.status-pill.error{color:#e54d42;border-color:#e54d4266}.bottom-tray-container{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:460px;margin:0 auto;pointer-events:auto}.brush-mode-indicator{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}.symbol-tray{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--panel-bg);border:1px solid var(--panel-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:10px 16px;border-radius:28px;box-shadow:var(--shadow);width:100%}.symbol-btn{flex:1;max-width:68px;height:60px;border-radius:18px;background:var(--btn-bg);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000000a;transition:all .2s cubic-bezier(.16,1,.3,1);position:relative}.symbol-btn:hover{transform:translateY(-3px);background:var(--btn-active)}.symbol-btn:active{transform:translateY(0)}.symbol-btn.selected{border-color:var(--symbol-active);background:var(--btn-active);box-shadow:0 4px 16px #d8694240}.symbol-btn svg{width:32px;height:32px}.symbol-key-hint{position:absolute;bottom:3px;font-size:10px;font-weight:700;color:var(--text-muted);opacity:.7}.symbol-btn.clear-btn svg{width:24px;height:24px;color:var(--text-muted)}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000059;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .25s ease;padding:20px}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal-dialog{background:var(--modal-bg);border:1px solid var(--panel-border);border-radius:28px;padding:28px;max-width:380px;width:100%;box-shadow:0 20px 60px #0000002e;display:flex;flex-direction:column;gap:20px;transform:scale(.95);transition:transform .25s cubic-bezier(.16,1,.3,1)}.modal-backdrop.open .modal-dialog{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:20px;font-weight:700;color:var(--text-main)}.close-btn{background:none;border:none;font-size:24px;color:var(--text-muted);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}.close-btn:hover{background:var(--btn-active)}.modal-body{display:flex;flex-direction:column;gap:16px}.input-group{display:flex;flex-direction:column;gap:6px}.input-label{font-size:13px;color:var(--text-muted);font-weight:600}.puzzle-input{width:100%;padding:14px 18px;border-radius:16px;border:1.5px solid var(--btn-border);background:var(--btn-bg);color:var(--text-main);font-size:20px;font-weight:700;text-align:center;outline:none;transition:border-color .2s ease}.puzzle-input:focus{border-color:var(--accent)}.quick-nav-row{display:flex;gap:8px}.quick-btn{flex:1;padding:10px 14px;border-radius:14px;background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-main);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.quick-btn:hover{background:var(--btn-active)}.action-btn{padding:14px;border-radius:16px;background:var(--accent);color:#fff;border:none;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px #d869424d;transition:all .2s ease}.action-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}.victory-icon{width:72px;height:72px;margin:0 auto;color:#f59e0b}.victory-time{font-size:28px;font-weight:800;text-align:center;color:var(--accent)}.victory-message{text-align:center;color:var(--text-muted);font-size:15px}