@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--accent:#f5a623}*{box-sizing:border-box;margin:0;padding:0}html,body{color:#f3f4f6;-webkit-font-smoothing:antialiased;background:#0a0710;width:100%;height:100%;font-family:Outfit,Consolas,Courier New,monospace;overflow:hidden}#app{flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:24px;display:flex;position:relative}.hud-bar{-webkit-backdrop-filter:blur(12px);pointer-events:none;z-index:20;background:#140c1c99;border:1px solid #ffffff14;border-radius:16px;justify-content:space-between;align-items:center;width:100%;max-width:520px;margin-bottom:22px;padding:14px 28px;display:flex;box-shadow:0 10px 30px #0006}.hud-bar.hidden{display:none}.hud-bar__moves,.hud-bar__discs,.hud-bar__time{letter-spacing:1.5px;color:#fff9;text-transform:uppercase;font-size:12px;font-weight:700}.hud-bar__discs{color:var(--accent);text-shadow:0 0 8px #f5a6234d}.board-wrapper{z-index:10;justify-content:center;align-items:center;width:100%;max-width:560px;display:flex;position:relative}.hanoi-board{--discs:3;-webkit-backdrop-filter:blur(14px);background:#100a18b8;border:1px solid #f5a62329;border-radius:20px;align-items:flex-end;gap:clamp(10px,3vw,26px);width:clamp(300px,92vw,540px);height:clamp(280px,52vh,420px);padding:18px 14px 0;display:flex;box-shadow:0 16px 40px #0009,0 0 30px #f5a6230d,inset 0 0 20px #f5a6230a}.hanoi-board.hidden{display:none}.peg{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:12px;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:100%;transition:background .15s;display:flex;position:relative}.peg:hover{background:#ffffff08}.peg__rod{z-index:1;background:linear-gradient(#ffffff40,#ffffff14);border-radius:6px 6px 0 0;width:9px;height:calc(100% - 14px);transition:box-shadow .15s,background .15s;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.peg--target .peg__rod{background:linear-gradient(#ffd76a,#ffc83c59);box-shadow:0 0 16px #ffc83c8c}.peg--target .peg__base{background:linear-gradient(#ffd76a,#ffc83c66);box-shadow:0 0 14px #ffc83c66}.peg--selected .peg__rod{background:linear-gradient(180deg, var(--accent), #f5a62366);box-shadow:0 0 18px #f5a62399}.peg--target.peg--selected .peg__rod{background:linear-gradient(#ffe08a,#ffc83c80);box-shadow:0 0 20px #ffd25abf}.peg__base{z-index:1;background:linear-gradient(#ffffff2e,#ffffff0f);border-radius:7px;width:92%;height:14px;position:absolute;bottom:0;left:4%}.peg__stack{z-index:2;flex-direction:column-reverse;align-items:center;gap:4px;width:100%;padding-bottom:14px;display:flex;position:relative}.disc{color:#000000a6;text-shadow:0 1px 1px #ffffff40;border-radius:8px;justify-content:center;align-items:center;height:clamp(20px,4vh,30px);font-size:12px;font-weight:700;transition:transform .14s cubic-bezier(.25,1,.5,1),box-shadow .14s;display:flex;box-shadow:0 3px 8px #0006,inset 0 1px #ffffff59}.disc--lifted{cursor:grab;transform:translateY(-12px);box-shadow:0 8px 18px #00000080,0 0 16px #f5a62380,inset 0 1px #ffffff59}.disc--dragging{z-index:40;pointer-events:none;cursor:grabbing;transition:none;box-shadow:0 12px 26px #0000008c,0 0 20px #f5a62399,inset 0 1px #ffffff59}.overlay{-webkit-backdrop-filter:blur(20px);z-index:40;text-align:center;background:#0a0710db;flex-direction:column;justify-content:center;align-items:center;padding:32px;display:flex;position:absolute;inset:0}.overlay.hidden{display:none!important}.overlay__title{letter-spacing:3px;background:linear-gradient(135deg, #fff 30%, var(--accent) 100%);-webkit-text-fill-color:transparent;text-shadow:0 10px 30px #f5a62340;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:clamp(30px,7.5vw,50px);font-weight:700}.overlay__subtitle{letter-spacing:1px;color:#fff9;max-width:440px;margin-bottom:28px;font-size:15px;font-weight:300;line-height:1.5}.overlay__score{letter-spacing:1px;color:#fff;margin-bottom:12px;font-size:22px;font-weight:600;line-height:1.6}.overlay__rating{letter-spacing:2px;text-transform:uppercase;border-radius:9999px;margin-bottom:28px;padding:6px 18px;font-size:12px;font-weight:700;box-shadow:0 4px 15px #00000040}.rating-divine{background:linear-gradient(135deg, var(--accent), #8b5cf6);color:#fff;box-shadow:0 0 20px #f5a62366}.rating-ultra{color:#1a1206;background:#f5a623;box-shadow:0 0 20px #f5a62366}.rating-fast{color:#fff;background:#10b981;box-shadow:0 0 20px #10b98166}.rating-average{color:#fff;background:#64748b;box-shadow:0 0 20px #64748b4d}.overlay__disc-selector{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:24px;display:flex}.disc-btn{color:#ffffffb3;cursor:pointer;background:#ffffff08;border:1px solid #ffffff26;border-radius:12px;width:52px;height:52px;font-size:18px;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1)}.disc-btn:hover{color:#fff;background:#ffffff14;border-color:#ffffff4d}.disc-btn.active{background:var(--accent);border-color:var(--accent);color:#1a1206;box-shadow:0 0 20px #f5a62366}.overlay__vote{flex-direction:column;gap:10px;width:100%;max-width:320px;margin-bottom:22px;display:flex}.vote-btn{color:#fff;font:inherit;cursor:pointer;background:#ffffff08;border:1px solid #ffffff26;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;font-size:16px;font-weight:600;transition:all .15s;display:flex}.vote-btn:hover{border-color:#f5a62399;transform:translateY(-2px)}.vote-btn.mine{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#f5a62324}.vote-btn__count{color:#ffffff8c;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;font-weight:600}.overlay__bests{letter-spacing:1.5px;color:#ffffff80;margin-bottom:32px;font-size:13px;font-weight:500;line-height:1.7}.overlay__optimal{color:var(--accent);font-weight:600}.overlay__hint{letter-spacing:2px;color:#fff6;text-transform:uppercase;font-size:12px;font-weight:500}.countdown{pointer-events:none;z-index:45;letter-spacing:4px;color:#fff;text-shadow:0 0 40px #f5a62366,0 10px 40px #0009;opacity:0;justify-content:center;align-items:center;font-size:160px;font-weight:700;display:flex;position:absolute;inset:0}.countdown.is-shown{animation:.75s cubic-bezier(.25,1,.5,1) countdown-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.1)}45%{transform:scale(1)}85%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.2)}}