:root{color-scheme:light;--paper:#f4efe6;--card:#fffdf8;--ink:#2a2f3a;--muted:#6f6878;--line:#e2dccd;--green:#1f6b4b;--amber:#c27f22;--gold:#e7c25a;--re-bg:var(--card);--re-ink:var(--ink);--re-muted:var(--muted);--re-line:var(--line);--re-accent:var(--green)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif}[hidden]{display:none!important}button,select{font:inherit;color:inherit;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--card);padding:8px 12px}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:3px}a{color:var(--green)}
.shell{max-width:1280px;margin:auto;padding:24px 32px 10px}header{display:flex;gap:12px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px}.brand{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:800;letter-spacing:2px;text-decoration:none;color:var(--ink)}.brand span{color:var(--amber)}.utilities{display:flex;gap:6px;flex-wrap:wrap}.utilities button{font-size:13px}.heading{margin:30px 0 22px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--green);font-weight:800}h1{font-size:clamp(36px,6vw,60px);letter-spacing:-2px;margin:0;line-height:1.1}h1 span{color:var(--green)}.howto{color:var(--muted);line-height:1.5}.layout{max-width:1140px;margin:auto}.lab{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--card);padding:20px;box-shadow:0 12px 40px #3a2f1a08}
.game-area{scroll-margin-top:76px;width:min(100%,480px);margin:auto}.toolbar{display:flex;align-items:end;gap:10px}.toolbar label{flex:1;min-width:0;font-size:13px;font-weight:700}.toolbar select{display:block;width:100%;margin-top:5px}#pick[aria-pressed="true"]{background:var(--gold)}.hud{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0;padding:10px 0;border-block:1px solid var(--line);text-align:center}.hud small{font-size:12px;color:var(--muted)}.hud strong{display:block;font-size:22px;font-variant-numeric:tabular-nums;margin-top:4px}
/* The board is drawn in CSS: a walnut tray, round sockets and faceted gem pegs. Its height comes from its width, so switching boards never shifts the page more than the board itself. */
.field{position:relative;border-radius:18px;background:radial-gradient(120% 90% at 50% 20%,#5b3a24,#3a2416 70%);padding:10px;box-shadow:inset 0 0 0 3px #b98a3e,inset 0 0 0 5px #5c4524,0 10px 24px #3a241640}
.board{--cols:5;--h:4.464;--dy:.866;position:relative;width:100%;aspect-ratio:5/4.464;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.board[data-board="english"]{--cols:7;--h:7;--dy:1;aspect-ratio:1}
.hole{--x:0;--y:0;position:absolute;left:calc(var(--x) * 100% / var(--cols));top:calc(var(--y) * var(--dy) * 100% / var(--h));width:calc(100% / var(--cols));height:calc(100% / var(--h));min-height:0;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.hole::before{content:"";grid-area:1/1;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#1b100a,#2c1b11 60%,#4a301d);box-shadow:inset 0 3px 6px #000a,0 1px 0 #ffffff26}
.hole::after{content:"";grid-area:1/1;width:62%;aspect-ratio:1;border-radius:50%;transform:scale(0);transition:transform .14s ease-out;background:var(--gem-bg);box-shadow:0 3px 0 #0006,inset 0 -3px 5px #0005,inset 0 2px 3px #fff8}
.hole[data-gem="0"]{--gem-bg:conic-gradient(from 30deg,#1fb5a3,#7ef0de,#138878,#2fd2bd,#0f6e62,#1fb5a3)}.hole[data-gem="1"]{--gem-bg:conic-gradient(from 30deg,#e09a2b,#ffd98a,#b8741a,#f2b649,#99600f,#e09a2b)}.hole[data-gem="2"]{--gem-bg:conic-gradient(from 30deg,#8a4fd0,#d2b0ff,#6534a8,#a874eb,#4f2585,#8a4fd0)}
.hole[data-peg="true"]::after{transform:scale(1)}.hole[data-movable="true"]{cursor:pointer}.hole[data-selected="true"]::after{transform:scale(1.12) translateY(-6%);box-shadow:0 0 0 3px var(--gold),0 0 14px var(--gold),0 6px 0 #0006}
.hole[data-target="true"]{cursor:pointer}.hole[data-target="true"]::before{box-shadow:inset 0 3px 6px #000a,0 0 0 3px var(--gold),0 0 16px #ffd76acc;animation:pulse 1.1s ease-in-out infinite alternate}@keyframes pulse{to{box-shadow:inset 0 3px 6px #000a,0 0 0 3px #fff2b0,0 0 22px #ffe08a}}
.hole[data-last="true"][data-peg="true"]::after{animation:land .3s ease-out}@keyframes land{from{transform:scale(1.25)}}
.hole .num{grid-area:1/1;position:relative;z-index:1;align-self:end;justify-self:end;margin:0 4% 4% 0;font-size:10px;font-weight:700;color:#f3dcb4b0;font-variant-numeric:tabular-nums;pointer-events:none}
.hole:focus-visible{outline:3px solid var(--gold);outline-offset:-2px}
body[data-phase="pick"] .hole{cursor:pointer}body[data-phase="pick"] .hole::after{opacity:.8}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tools{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:8px}.tools a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}.small,.instructions{font-size:13px;color:var(--muted);line-height:1.65}#status{font-size:14px;line-height:1.5;min-height:42px;margin-bottom:4px}.small{margin:0}.instructions{margin:14px 4px}
.result-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#result-undo{background:none;border:0;color:var(--green);text-decoration:underline}
@media(max-width:600px){.shell{padding:12px 12px 4px}header{position:sticky;top:0;z-index:3;background:var(--paper);padding:6px 0 12px;gap:6px}.utilities{flex-wrap:nowrap}.lab{padding:12px}.heading{margin:16px 0 12px}.howto{font-size:14px;margin:8px 0}.eyebrow{letter-spacing:1px}.brand{font-size:12px;letter-spacing:1px}.utilities button{padding:6px 8px}.hud{margin:10px 0;padding:8px 0}.hud strong{font-size:18px;margin-top:2px}.field{padding:6px}.toolbar button{font-size:13px;padding:8px 10px}.board[data-board="english"] .hole::before{width:80%}.board[data-board="english"] .hole::after{width:68%}}
.game-help-links{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 4px}.game-help-links button,.game-help-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}.game-help-links button{border:0;background:none;color:var(--green);padding:0}#help-panel{width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink)}#help-panel::backdrop{background:#17271fd9}#help-panel[open]{display:flex;flex-direction:column}.help-body{overflow:auto;padding:20px;line-height:1.65}.help-body h2{margin-top:0}.help-actions{padding:12px 20px;border-top:1px solid var(--line)}.help-actions button{width:100%}
@media(prefers-reduced-motion:reduce){.hole::after{transition:none}.hole[data-target="true"]::before,.hole[data-last="true"][data-peg="true"]::after{animation:none}}