:root{--bg: #1a140e;--panel: #2a2018;--panel-2: #352a20;--ink: #ece3d2;--muted: #b3a489;--gold: #e7c34a;--accent: #c8843a;--good: #6fbf73;--bad: #d35b5b;--border: #4a3a28;--shadow: rgba(0, 0, 0, .45);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:var(--bg);color:var(--ink);overflow:hidden}button{font-family:inherit;cursor:pointer;color:var(--ink);background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px;transition:background .12s,transform .05s}button:hover:not(:disabled){background:#46362a}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#1a140e;font-weight:700;border-color:#8a5a26}.btn-primary:hover:not(:disabled){background:#d9954a}.app{display:flex;flex-direction:column;height:100%}.stage{position:relative;flex:1;min-height:0;display:flex}.canvas-wrap{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#241a12,#120d09)}.canvas-wrap canvas{display:block;image-rendering:pixelated}.hud{display:flex;align-items:center;gap:14px;padding:8px 14px;background:linear-gradient(#33271c,#221a12);border-bottom:2px solid var(--border);box-shadow:0 2px 8px var(--shadow);flex-wrap:wrap;z-index:5}.hud .stat{display:flex;flex-direction:column;line-height:1.1;min-width:54px}.hud .stat .label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.hud .stat .value{font-size:18px;font-weight:700}.hud .value.gold{color:var(--gold)}.title{font-size:18px;font-weight:800;color:var(--gold);letter-spacing:.03em;margin-right:4px}.spacer{flex:1}.rep-bar{width:90px;height:7px;background:#1c140d;border-radius:4px;overflow:hidden;margin-top:3px}.rep-bar>div{height:100%}.chip{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:12px}.chip.event{background:#4a2f1a;border-color:var(--accent);color:#f0c489}.music-toggle{min-width:62px;padding:4px 9px;border-radius:999px;font-size:12px;background:var(--panel-2)}.music-toggle[aria-pressed=true]{color:var(--muted)}.panel{width:320px;background:var(--panel);border-left:2px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:4}.panel h3{margin:0;padding:10px 12px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border)}.tabs{display:flex;border-bottom:1px solid var(--border)}.tabs button{flex:1;border:none;border-radius:0;background:transparent;padding:9px 4px;font-size:12px}.tabs button.active{background:var(--panel-2);color:var(--gold);box-shadow:inset 0 -2px 0 var(--accent)}.panel-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.panel-foot{padding:10px;border-top:1px solid var(--border)}.panel-foot button{width:100%;padding:11px;font-size:15px}.row{background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:8px 10px}.row.clickable:hover{border-color:var(--accent)}.row.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}.row .row-top{display:flex;justify-content:space-between;align-items:center;gap:6px}.row .name{font-weight:700;font-size:13px}.row .desc{font-size:11px;color:var(--muted);margin-top:3px}.cost{color:var(--gold);font-weight:700;font-size:13px;white-space:nowrap}.cost.bad{color:var(--bad)}.lvldots{display:inline-flex;gap:3px}.lvldots i{width:8px;height:8px;border-radius:50%;background:#1c140d;border:1px solid var(--border)}.lvldots i.on{background:var(--gold);border-color:var(--gold)}.tag{font-size:10px;padding:1px 7px;border-radius:999px;background:#2c3a28;color:var(--good);border:1px solid #3c5236}.float{position:absolute;z-index:6}.open-controls{left:14px;bottom:14px;display:flex;gap:6px;background:#1a140ed9;padding:8px;border-radius:10px;border:1px solid var(--border)}.open-controls button.active{background:var(--accent);color:#1a140e}.inspector{right:14px;top:14px;width:230px;background:#1a140eed;border:1px solid var(--border);border-radius:10px;padding:12px;box-shadow:0 6px 16px var(--shadow)}.inspector .ititle{font-weight:800;color:var(--gold);margin-bottom:6px}.inspector .iline{font-size:12px;color:var(--ink);margin:2px 0}.hint{font-size:11px;color:var(--muted)}.toast{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#4a2222;border:1px solid var(--bad);color:#ffd9d9;padding:8px 16px;border-radius:8px;z-index:9;font-size:13px}.modal-backdrop{position:absolute;inset:0;background:#080604b8;display:flex;align-items:center;justify-content:center;z-index:10}.modal{width:420px;max-width:92%;background:var(--panel);border:2px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 12px 40px var(--shadow)}.modal h2{margin:0 0 4px;color:var(--gold)}.modal .sub{color:var(--muted);font-size:13px;margin-bottom:14px}.ledger{display:flex;flex-direction:column;gap:4px;margin:8px 0 14px}.ledger .lr{display:flex;justify-content:space-between;padding:5px 8px;border-radius:6px;font-size:14px}.ledger .lr:nth-child(odd){background:var(--panel-2)}.ledger .lr .pos{color:var(--good)}.ledger .lr .neg{color:var(--bad)}.ledger .lr.total{border-top:1px solid var(--border);margin-top:4px;font-weight:800;font-size:15px}.modal button{width:100%;padding:12px;font-size:16px}.modal-actions{display:flex;gap:8px}.modal-actions button{flex:1}.session-summary{margin-bottom:14px}.win{color:var(--good)}.lose{color:var(--bad)}