.peg{--accent:#d9a441}.peg-board{display:flex;align-items:center;justify-content:center;position:relative;padding:16px}.peg-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;width:min(66vh,100%,500px);aspect-ratio:1}.pg-void{pointer-events:none}.pg-cell{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;padding:0;touch-action:manipulation}.pg-cell i{display:block;width:100%;height:100%;border-radius:50%;transition:transform .12s,box-shadow .12s,background .15s}.pg-cell.hole i{background:rgba(10,16,28,.85);box-shadow:inset 0 3px 8px #000000b3,inset 0 -1px 2px #d9a44124}.pg-cell.peg1 i{background:radial-gradient(circle at 34% 30%,#ffd98f,#d9a441 55%,#7a5216);box-shadow:0 3px 7px #0000008c}.pg-cell.peg1:hover i{transform:scale(1.08)}.pg-cell.sel i{transform:scale(1.12);box-shadow:0 0 0 3px var(--accent),0 4px 10px #0009}.pg-cell.tgt i{box-shadow:inset 0 3px 8px #000000b3,0 0 0 2px #5bd68acc}.pg-cell.hint i{box-shadow:0 0 0 3px #6aa8f0,0 3px 7px #00000080}.pg-cell.hole.hint i{box-shadow:inset 0 3px 8px #000000b3,0 0 0 3px #6aa8f0}.pg-cell.center.hole i:after{content:"";position:absolute;inset:38%;border-radius:50%;background:rgba(217,164,65,.5)}.peg-over[hidden]{display:none}.peg-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(6,10,18,.78);backdrop-filter:blur(4px);border-radius:16px;z-index:5;pointer-events:none}.peg-over b{font-size:52px;line-height:1}.peg-over span{font:700 15px/1.5 var(--font-sans);color:#dfe9ff;text-align:center;max-width:80%}