.app{max-width:1040px;margin:0 auto;padding:clamp(1rem,3vw,2rem);display:flex;flex-direction:column;gap:1.5rem}.app__header{text-align:center;padding-top:.25rem}.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);line-height:1}.brand__mark{height:clamp(30px,4.4vw,38px);width:auto;color:var(--ink);display:block;transform:translateY(-1px)}.brand__name{font-size:clamp(1.7rem,5vw,2.6rem);font-weight:600;letter-spacing:-.01em;color:var(--ink)}.app__tagline{color:var(--ink-dim);font-size:1rem;margin-top:.5rem}.app__main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.1rem;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.1rem,2.6vw,1.6rem);box-shadow:var(--shadow-md)}.app__side{position:sticky;top:1rem;display:flex;flex-direction:column;gap:1.1rem}.panel--controls{display:flex;flex-direction:column;gap:1.1rem}.lock{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:.4rem 0 1.3rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}.lock__shackle{width:46px;height:30px;border:5px solid var(--ink);border-bottom:none;border-radius:24px 24px 0 0;margin-bottom:-4px;transform-origin:bottom right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.lock--open .lock__shackle{transform:translate(5px,-6px) rotate(-22deg)}.lock__body{position:relative;background:#fff;border:5px solid var(--ink);border-radius:16px;padding:.65rem .75rem;box-shadow:var(--shadow-sm)}.lock__window{display:flex;align-items:center;justify-content:center;gap:.5rem}.lock__dot{width:clamp(20px,5vw,26px);height:clamp(20px,5vw,26px);border-radius:50%;background:var(--well);box-shadow:inset 0 1px 2px #00000024}.lock__dot--shown{box-shadow:var(--dot-shadow);animation:dot-pop .42s cubic-bezier(.2,.8,.2,1) backwards}.lock__caption{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--ink-dim)}.lock__caption:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-faint)}.lock--won .lock__caption{color:var(--win)}.lock--won .lock__caption:before{background:var(--win)}.lock--lost .lock__caption{color:var(--loss)}.lock--lost .lock__caption:before{background:var(--loss)}.result{text-align:center}.result__msg{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:1rem;padding:.5rem 1rem .5rem .55rem;border-radius:999px;margin-bottom:.8rem;animation:pop-in .3s ease}.result__msg--win{color:var(--win);background:var(--win-soft)}.result__msg--loss{color:var(--loss);background:var(--loss-soft)}.result__sigil{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;font-size:.85rem;color:#fff}.result__msg--win .result__sigil{background:var(--win)}.result__msg--loss .result__sigil{background:var(--loss)}.board{list-style:none;padding:0;display:flex;flex-direction:column;gap:.35rem;width:fit-content;margin-inline:auto}.guess-row{display:grid;grid-template-columns:auto auto auto;align-items:center;column-gap:.85rem;padding:.28rem .4rem;border-radius:var(--radius-sm);border:1px solid transparent;transition:background .2s ease}.guess-row--active{border-color:#3b7ff059;background:#3b7ff00f}.guess-row__num{justify-self:end;font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600;color:var(--ink-faint)}.guess-row--active .guess-row__num{color:var(--accent)}.slots{display:flex;gap:.45rem}.guess-row__feedback{justify-self:start}.dot{width:clamp(26px,2.4vw,32px);height:clamp(26px,2.4vw,32px);border-radius:50%;border:none;padding:0}.dot--empty{background:var(--well);box-shadow:inset 0 1px 3px #0000001a}button.dot{transition:transform .12s ease,box-shadow .12s ease}button.dot.dot--empty{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line-strong)}button.dot:hover{transform:translateY(-1px)}button.dot.dot--empty:hover{box-shadow:inset 0 0 0 2px var(--accent)}.dot--filled{box-shadow:var(--dot-shadow);animation:dot-pop .18s ease}.feedback{display:flex;align-items:center;gap:.5rem;justify-content:flex-start;animation:fade-in .35s ease}.pips{display:inline-flex;gap:3px}.pip{width:9px;height:9px;border-radius:50%;box-sizing:border-box;flex:none}.pip--exact{background:var(--ink);border:1px solid var(--ink)}.pip--near{background:#fff;border:1.5px solid var(--ink-dim)}.pip--none{background:transparent;border:1px solid var(--line-strong);transform:scale(.7)}.feedback__counts{display:none}.fb b{color:var(--ink);font-variant-numeric:tabular-nums}.palette{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;gap:.7rem .6rem}.swatch{width:clamp(38px,9vw,48px);height:clamp(38px,9vw,48px);border-radius:50%;border:none;padding:0;position:relative;box-shadow:var(--dot-shadow);transition:transform .13s ease,box-shadow .13s ease,opacity .13s ease,filter .13s ease}.swatch:not(:disabled):hover{transform:translateY(-3px) scale(1.04);box-shadow:inset 0 2px 3px #fff6,0 9px 18px #141e3238}.swatch:not(:disabled):active{transform:translateY(0) scale(1)}.swatch--selected{outline:3px solid var(--accent);outline-offset:3px}.swatch--used{opacity:.34;filter:saturate(.7)}.swatch__used{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-size:1.05rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.45)}.actions{display:flex;flex-wrap:wrap;gap:.55rem}.actions--ended .btn--primary{flex:1 1 100%}.actions__hint{font-size:.8rem;color:var(--ink-faint);text-align:center}.btn{flex:1 1 auto;font-family:var(--font-display);font-weight:600;font-size:.92rem;padding:.7rem 1.1rem;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .12s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}.btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn:not(:disabled):active{transform:translateY(0)}.btn:disabled{opacity:.5;box-shadow:none}.btn--primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn--primary:not(:disabled):hover{background:#1f2733}.btn--primary:disabled{background:var(--surface-2);border-color:var(--line);color:var(--ink-faint);opacity:1}.btn--ghost{background:var(--surface)}.btn--link{flex:0 0 auto;background:none;border:none;box-shadow:none;color:var(--accent);font-family:var(--font-ui);font-weight:600;font-size:.85rem;padding:.35rem .3rem;text-decoration:underline;text-underline-offset:3px}.btn--link:not(:disabled):hover{color:var(--accent-strong);transform:none;box-shadow:none}.controls__head{display:flex;align-items:stretch;gap:.6rem}.controls__head .attempt{flex:1}.controls__newgame{flex:0 0 auto;padding-inline:1rem}.attempt{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);padding:.7rem .95rem;display:flex;align-items:baseline;justify-content:space-between}.attempt__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);font-weight:600}.attempt__value{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1}.attempt__max{font-size:1rem;color:var(--ink-faint);font-weight:600}.how-to{width:min(30rem,calc(100% - 2rem));max-height:calc(100% - 2rem);padding:0;border:none;border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);overflow:hidden;margin:auto}.how-to[open]{animation:how-to-in .18s ease-out}.how-to::backdrop{background:#141e3273}.how-to[open]::backdrop{animation:fade-in .18s ease}.how-to__panel{display:flex;flex-direction:column;max-height:calc(100vh - 2rem)}.how-to__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}.how-to__head h2{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--ink)}.how-to__close{flex:none;width:2rem;height:2rem;border:none;border-radius:50%;background:var(--surface-2);color:var(--ink-dim);display:grid;place-items:center;font-size:.85rem;transition:background .15s ease,color .15s ease}.how-to__close:hover{background:var(--line);color:var(--ink)}.how-to__body{overflow-y:auto;padding:1.1rem 1.25rem 1.35rem}.help-fab{position:fixed;top:.85rem;right:.85rem;z-index:var(--z-sticky);display:none;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);font-family:var(--font-display);font-weight:600;font-size:.85rem;line-height:1;box-shadow:var(--shadow-sm)}.help-fab:hover{color:var(--ink)}.rules-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1rem,2vw,1.3rem);box-shadow:var(--shadow-md)}.rules-box__title{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:.7rem}.rules-content{display:flex;flex-direction:column;gap:.85rem;font-size:.92rem;color:var(--ink-dim);line-height:1.55}.rules-content strong{color:var(--ink)}.rules-content h3{margin-top:.25rem;font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--ink)}.rules-content kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8em;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:5px;padding:.05em .4em;color:var(--ink)}.rules-pegs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}.rules-pegs li{display:flex;align-items:flex-start;gap:.7rem}.rules-pegs .pip{flex:none;width:16px;height:16px;margin-top:.18rem}.rules-note{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .85rem;font-size:.88rem}@keyframes how-to-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dot-pop{0%{transform:scale(.6);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes pop-in{0%{transform:translateY(-4px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes fade-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.app{gap:.9rem;padding:.85rem}.app__main{grid-template-columns:1fr;gap:.8rem}.panel{padding:1rem;border-radius:15px}.app__side{position:static;gap:.8rem}.panel--controls{gap:.85rem}.app__tagline{font-size:.92rem}.help-fab{display:grid}.rules-box{display:none}.board{flex-direction:column-reverse}}@media(max-width:520px){.app{gap:.45rem;padding:.45rem .55rem}.app__main{gap:.5rem}.brand{gap:.4rem}.brand__mark{height:24px;width:auto}.brand__name{font-size:1.4rem}.app__tagline{display:none}.panel{padding:.6rem .7rem;border-radius:14px;box-shadow:var(--shadow-sm)}.lock{gap:.25rem;padding:0 0 .4rem;margin-bottom:.45rem}.lock__shackle{width:34px;height:20px;border-width:4px}.lock__body{padding:.32rem .42rem;border-width:4px;border-radius:11px}.lock__window{gap:.38rem}.lock__dot{width:14px;height:14px}.lock__caption{font-size:.7rem}.board{gap:.22rem}.guess-row{grid-template-columns:auto auto auto;column-gap:.55rem;padding:.08rem .2rem}.guess-row__num{font-size:.68rem}.slots{gap:.3rem}.dot{width:21px;height:21px}.feedback{gap:.3rem}.pip{width:8px;height:8px}.palette{grid-template-columns:repeat(8,1fr);gap:.35rem}.swatch{width:100%;height:auto;aspect-ratio:1;max-width:38px}.swatch__used{font-size:.78rem}.attempt{padding:.5rem .7rem}.attempt__value{font-size:1.3rem}.btn{padding:.52rem .7rem;font-size:.85rem}.actions{gap:.45rem}}*,*:before,*:after{box-sizing:border-box}*{margin:0}:root{--bg: #f4f6f9;--surface: #ffffff;--surface-2: #eef1f6;--well: #e9edf3;--line: #e3e8ef;--line-strong: #d3dae3;--ink: #2a3340;--ink-dim: #5a6573;--ink-faint: #97a1b0;--accent: #3b7ff0;--accent-strong: #2f6fe0;--win: #1f9d57;--win-soft: #e7f6ee;--loss: #e0483a;--loss-soft: #fdedeb;--radius: 18px;--radius-md: 14px;--radius-sm: 11px;--shadow-sm: 0 1px 2px rgba(20, 30, 50, .06), 0 1px 3px rgba(20, 30, 50, .08);--shadow-md: 0 6px 18px rgba(20, 30, 50, .08);--shadow-lg: 0 16px 40px rgba(20, 30, 50, .1);--dot-shadow: inset 0 2px 3px rgba(255, 255, 255, .4), inset 0 -3px 5px rgba(0, 0, 0, .12), 0 2px 5px rgba(20, 30, 50, .18);--font-display: "Poppins", system-ui, sans-serif;--font-ui: "Inter", system-ui, -apple-system, sans-serif;--z-base: 1;--z-sticky: 100;--z-toast: 700;color-scheme:light}html,body,#root{min-height:100%}body{font-family:var(--font-ui);color:var(--ink);background-color:var(--bg);background-image:radial-gradient(120% 70% at 50% -10%,rgba(59,127,240,.05),transparent 60%);background-attachment:fixed;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,h3{line-height:1.1;text-wrap:balance}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}::selection{background:#3b7ff02e}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}