.hanoi-area { max-width:680px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.disc-group, .actions { display:flex; gap:8px; flex-wrap:wrap; }
.disc-btn.active { border-color:var(--blue); color:var(--blue); background:var(--bluewash); }
.stats { color:var(--muted); font-size:14px; }
.stats b { color:var(--ink); font-size:17px; }
.board { position:relative; height:300px; border:1px solid var(--rule); background:var(--panel); border-radius:6px; }
.peg { position:absolute; bottom:0; top:0; width:14px; left:0; transform:translateX(-50%); background:var(--rule); cursor:pointer; }
.peg[data-peg="0"] { left:16.66%; }
.peg[data-peg="1"] { left:50%; }
.peg[data-peg="2"] { left:83.33%; }
.peg .base { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:180px; height:8px; background:var(--rule); border-radius:3px; }
.peg.selected { background:var(--blue); }
.disc { position:absolute; height:22px; border-radius:4px; z-index:2; transition:left .16s ease, bottom .16s ease, background .12s; }
.disc.d0 { background:var(--blue); }
.disc.d1 { background:var(--cyan); }
.disc.d2 { background:var(--orange); }
.disc.d3 { background:#9b6cff; }
.disc.d4 { background:#f5b642; }
.disc.d5 { background:#e8564a; }
.disc.d6 { background:#4cb944; }
.disc.d7 { background:#3d7bfd; }
.disc.topmost { box-shadow:0 0 0 2px var(--orange); }
.win-panel { max-width:360px; margin:18px auto 0; padding:24px; text-align:center; }
.win-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.win-panel p { color:var(--muted); font-size:14px; margin:0 0 14px; }
@media (max-width:780px) { .board { height:240px; } .disc { height:18px; } .controls { flex-direction:column; align-items:stretch; } .stats { text-align:center; } .disc-group, .actions { justify-content:center; } }