:root{color-scheme:dark;--ink: #f0e9dc;--muted: #8e8474;--gold: #e6b76a;--panel: rgba(16, 14, 20, .58);--border: rgba(240, 233, 220, .16)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#08070c;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink)}#app{position:fixed;top:0;right:0;bottom:0;left:0}#app canvas{display:block}#hud{position:fixed;top:18px;left:20px;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:0 1px 10px rgba(0,0,0,.8)}#hud h1{margin:0;font-size:15px;font-weight:700;letter-spacing:.26em}#hud .sub{margin:5px 0 0;font-size:11px;letter-spacing:.04em;color:var(--muted)}#deck{position:fixed;left:50%;bottom:22px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:11px;padding:12px 18px;background:var(--panel);border:1px solid var(--border);border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.move-label{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.bar{display:flex;gap:4px;width:268px}.bar .seg{position:relative;height:5px;border-radius:3px;background:#f0e9dc29;overflow:hidden;cursor:pointer}.bar .seg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3px;background:var(--gold);transform:scaleX(var(--fill, 0));transform-origin:left}.controls{display:flex;gap:8px}.controls button{min-width:34px;height:28px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:#f0e9dc0f;color:var(--ink);font-size:12px;cursor:pointer;transition:background .2s ease,border-color .2s ease}.controls button:hover{background:#e6b76a2e;border-color:#e6b76a80}.controls button.on{background:#e6b76a3d;border-color:#e6b76a99}