:root{font-family:ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;color:#1c3053;background:#f5f8ff;font-synthesis:none;--blue:#2857da;--ink:#1c3053;--muted:#62718b;--yellow:#ffd454}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}button:disabled{cursor:default}button:focus-visible,label:has(input:focus-visible){outline:3px solid #173eb0;outline-offset:5px}[hidden]{display:none!important}.app{min-height:100svh;display:grid;place-items:center;padding:28px 20px 36px}.start-screen{width:min(100%,460px);text-align:center}.brand-mark{display:flex;justify-content:center;gap:9px;margin-bottom:18px}.brand-mark i{width:21px;height:21px;background:var(--blue);border-radius:50%;box-shadow:0 3px 0 #bdccf8}.brand-mark i:nth-child(2){background:var(--yellow);transform:translateY(-9px);box-shadow:0 3px 0 #edb739}.brand-mark i:last-child{background:transparent;border:2px dashed #9caed5;box-shadow:none}.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:800;color:var(--blue);margin:0 0 10px}h1{font-size:clamp(28px,7vw,38px);letter-spacing:.04em;margin:0 0 16px;line-height:1.4}.intro{font-size:16px;line-height:1.9;margin:0 0 30px;color:#52627d}.picker-card{background:white;border:1px solid #e3eaf8;border-radius:26px;padding:26px;box-shadow:0 12px 40px #233c6a08}fieldset{border:0;padding:0;margin:0}legend{text-align:left;font-size:16px;font-weight:700;margin-bottom:18px}.peg-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.peg-option{position:relative;display:grid;place-items:center;min-height:44px;border:1px solid #e4eaf5;border-radius:12px;background:#f5f8fd;font-size:18px;font-weight:700;cursor:pointer;transition:background .12s,transform .12s}.peg-option input{position:absolute;opacity:0;width:1px;height:1px}.peg-option:has(input:checked){background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 3px 0 #163fb5;transform:translateY(-2px)}.button{min-height:48px;border:0;border-radius:14px;padding:12px 16px;font-weight:700;font-size:16px;transition:background .15s,transform .15s}.button:active:not(:disabled){transform:translateY(2px)}.primary{background:var(--blue);color:white;box-shadow:0 3px 0 #1d43b4}.primary:hover:not(:disabled){background:#1e49c3}.primary:disabled{background:#a0b2e3;box-shadow:none}.secondary{background:white;color:var(--ink);border:1px solid #dce4f2}.secondary:hover:not(:disabled){background:#edf2ff}.secondary:disabled{color:#a8b3c6;background:#f8faff}.start-button{width:100%;margin-top:24px}.load-status{font-size:14px;color:#a13737;line-height:1.6;margin:12px 0 0}.load-status:empty{display:none}.start-note{font-size:14px;color:var(--muted);margin:22px 0 0}.game-screen{width:min(100%,520px)}.game-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.back-button{background:none;border:0;color:#536681;font-size:14px;padding:10px 0}.back-button span{font-size:24px;vertical-align:-1px;margin-right:3px}.wordmark{font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--blue)}.scorebar{display:flex;align-items:center;justify-content:center;gap:30px}.scorebar>div{display:flex;align-items:baseline;gap:7px}.stat-label{font-size:14px;color:var(--muted)}.scorebar strong{font-size:34px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}.unit{font-size:14px}.score-divider{height:30px;width:1px;background:#d6deee}.message{text-align:center;min-height:84px;display:flex;flex-direction:column;justify-content:center;padding:12px 0}.message h2{font-size:18px;line-height:1.5;margin:0;font-weight:700}.message p{font-size:14px;color:var(--muted);line-height:1.5;margin:4px 0 0}.message.clear h2{font-size:26px;letter-spacing:.08em;color:var(--blue)}.message.stuck h2{color:#97511f}.board-wrap{padding:16px;background:#e5edfc;border:1px solid #d8e3f7;border-radius:32px;box-shadow:0 5px 0 #d4dff4,0 16px 35px #2f50830a}.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));aspect-ratio:1;gap:5px;position:relative}.hole{width:100%;height:100%;padding:0;border:none;border-radius:50%;background:none;position:relative;display:grid;place-items:center}.hole::before{content:"";position:absolute;inset:9%;border-radius:50%;background:#c5d2eb;box-shadow:inset 0 3px 3px #8c9dc538;transition:background .12s}.hole.center::after{content:"+";position:absolute;color:#6f85b1;font-size:24px;line-height:1}.peg{position:absolute;inset:6%;border-radius:50%;background:var(--blue);box-shadow:inset 0 2px 0 #ffffff38,0 4px 0 #1840aa,0 5px 7px #25489026;z-index:1;transition:background .12s,transform .12s}.hole.selected .peg{background:var(--yellow);box-shadow:inset 0 2px 0 #ffffff80,0 4px 0 #d5a126,0 0 0 3px white;transform:translateY(-2px)}.hole.target::before{background:#f8fbff;border:3px dashed var(--blue);box-shadow:none}.hole.target::after{content:"";height:8px;width:8px;border-radius:50%;background:var(--blue);z-index:1}.hole:not(:disabled):hover .peg{filter:brightness(1.08)}.hole:focus-visible{outline-offset:0}.jump-peg{position:fixed;border-radius:50%;background:var(--yellow);box-shadow:0 4px 0 #d5a126;z-index:10;pointer-events:none}.legend{display:flex;justify-content:center;gap:22px;margin:18px 0;color:var(--muted);font-size:12px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:12px;height:12px;border-radius:50%;display:inline-block}.legend-peg{background:var(--yellow);border:1px solid #d5a126}.legend-target{border:2px dashed var(--blue)}.game-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.game-actions .button span{margin-right:4px}.next-button{grid-column:1/-1}.noscript{text-align:center;color:#a13737}.clear .board-wrap{border-color:#b6c9ff}
@media(min-width:800px){.game-screen{width:500px}.board-wrap{padding:20px}.start-screen{margin-top:-20px}}
@media(max-width:400px){.app{padding:18px 12px 26px}.picker-card{padding:20px 14px}.peg-picker{gap:5px}.peg-option{border-radius:10px}.board-wrap{padding:10px;border-radius:24px}.board{gap:3px}.scorebar{gap:20px}.scorebar>div{gap:5px}.wordmark{font-size:10px}.game-header{margin-bottom:12px}}
@media(max-height:760px){.game-screen{max-width:440px}.app{padding-top:12px;padding-bottom:18px}.game-header{margin-bottom:8px}.message{min-height:74px}.legend{margin:14px 0}.scorebar strong{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}