:root{--bg: #1a1410;--panel: #241c15;--ink: #f2e6d6;--muted: #b59a7e;--accent: #b9772e;--accent2: #e0a050;--target: #4fb0c8;--got: #6fcf6f;--line: #3a2e22}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at 50% 0%,#2a2017,var(--bg));color:var(--ink);-webkit-tap-highlight-color:transparent}#app{max-width:560px;margin:0 auto;padding:18px 14px 40px}header h1{margin:4px 0 2px;letter-spacing:3px;font-size:28px;color:var(--accent2);text-shadow:0 2px 0 #00000040}.sub{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.4}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}.seg button{background:transparent;border:0;color:var(--muted);padding:7px 11px;font-size:13px;cursor:pointer}.seg button.on{background:var(--accent);color:#1a1410;font-weight:700}.primary{background:var(--accent);color:#1a1410;border:0;border-radius:9px;padding:8px 16px;font-weight:700;cursor:pointer;margin-left:auto}.primary:hover{background:var(--accent2)}.stats{display:flex;flex-wrap:wrap;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px;color:var(--muted);margin-bottom:14px}.stats b{color:var(--ink)}#dialWrap{display:flex;justify-content:center}#dial{position:relative;width:300px;height:300px;margin:6px auto 18px}.node{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#2e241b;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:transform .12s ease,background .12s ease}.node.start{border-color:var(--accent)}.node.target{background:#173943;border-color:var(--target);color:#cfeef6;box-shadow:0 0 10px #4fb0c870}.node.got{background:#1f3d20;border-color:var(--got);color:#d8f5d8}.node.pointer{background:var(--accent);border-color:var(--accent2);color:#1a1410;transform:scale(1.18);box-shadow:0 0 14px var(--accent2);z-index:3}.hub{position:absolute;left:150px;top:150px;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:var(--panel);border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center}.hubpos{font-size:34px;font-weight:800;color:var(--accent2);line-height:1}.hublbl{font-size:11px;color:var(--muted);letter-spacing:1px}.steps{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}.step{background:var(--panel);border:1px solid var(--accent);border-radius:12px;color:var(--ink);min-width:84px;padding:12px 10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}.step:hover:not(:disabled){background:#30251a}.step:disabled{opacity:.4;cursor:not-allowed}.step .lbl{font-size:22px;font-weight:800;color:var(--accent2)}.step .key{font-size:11px;color:var(--muted)}.actions{display:flex;justify-content:center;gap:10px;margin:6px 0 4px}.actions button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:7px 14px;cursor:pointer;font-size:13px}.actions button:disabled{opacity:.4;cursor:not-allowed}.msg{text-align:center;min-height:22px;margin:10px 4px 0;font-size:14px;color:var(--muted)}.msg.win{color:var(--got);font-weight:700}.msg.lose{color:#e08a6a;font-weight:700}