:root{--background:#b99a70;--surface:#f8f1e5;--ink:#17130e;--muted:#211a12;--accent:#181818;--border:#705839;--radius:0}
*{-webkit-tap-highlight-color:transparent}
main{position:relative}
#sound{position:absolute;top:4px;right:8px;width:44px;height:44px;padding:11px;border:0;background:transparent;color:#292218}
#sound svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#sound[aria-pressed="true"] .sound-off,#sound[aria-pressed="false"] .sound-on{display:none}
body{min-height:100svh;background-image:url('assets/sand.svg'),radial-gradient(ellipse at 50% 32%,#c0a27a 0%,#b99a70 60%,#ad8d64 100%);background-size:240px 240px,100% 100%}
main{width:min(100%,420px);padding:32px 24px 28px}
/* Pale limestone plaque with recessed lettering, following the author's reference. */
h1{display:table;min-width:166px;margin:0 auto;padding:9px 20px 12px 31px;border:1px solid #c7b99e;border-top-color:#f2ead8;border-radius:11px;background-image:url('assets/limestone.svg'),linear-gradient(150deg,#eee6d3,#d8cbb1);background-size:100% 100%;color:#302719;font:600 40px/1.15 'Yu Mincho','Hiragino Mincho ProN',serif;letter-spacing:.26em;text-shadow:0 1px 0 #fff6df,0 -1px 0 #756449;box-shadow:inset 0 2px 1px #fff8e3b3,inset 0 -3px 1px #95856c80,0 4px 0 #8d795a66,0 10px 14px -5px #49371c66}
#game{width:min(100%,336px);margin:auto}
.hint{display:flex;align-items:center;justify-content:center;gap:16px;margin:36px auto 36px}
.hint-piece{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border:2px solid currentColor;font-size:23px;line-height:1}
.equals{display:grid;place-items:center;width:22px;height:34px;flex-shrink:0;font:600 28px/1 Arial,sans-serif;color:#2d251b}
.black{--piece-fill:#181818;--piece-border:#181818;color:#fff}.gray{--piece-fill:#888;--piece-border:#888;color:#fff}.white{--piece-fill:#fff;--piece-border:#d0d0d0;color:#d0d0d0}
.hint-piece{background:var(--piece-fill);border-color:var(--piece-border)}
#board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));width:100%;aspect-ratio:1}
.piece{display:grid;place-items:center;align-self:stretch;justify-self:stretch;min-width:0;min-height:0;margin:2px;padding:0;border:2px solid var(--piece-border);border-radius:0;background:var(--piece-fill);font-size:clamp(22px,6vw,28px);line-height:1}
button.piece:disabled{opacity:1;cursor:default}
button.piece:focus-visible{outline:2px solid #4483a1;outline-offset:-6px}
@media(hover:hover){button.piece:not(:disabled):hover{filter:brightness(1.15)}}
#answers{display:flex;justify-content:center;gap:8.333333%;margin-top:34px}
.answer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:33.333333%;aspect-ratio:1;outline:1px solid var(--border);outline-offset:0;background:#776047;box-shadow:inset 0 2px 6px #49372326}
.answer .piece{position:relative;z-index:1;background:#776047;border:5px solid var(--piece-border);color:#fff;box-shadow:0 0 0 1px #f3ead7,inset 0 0 0 1px #f3ead7;text-shadow:none}
#board .piece.excavated{opacity:1}
#board .piece{position:relative}
#restart{color:#17130e;font-size:14px;font-weight:700;letter-spacing:.12em;margin-top:28px;padding:8px 14px;border:0;min-height:44px}
#reopen{color:#17130e;font-size:13px;font-weight:600;border:0;margin-top:20px}
#restart + #reopen{margin-top:4px}
.wrong{animation:shake .25s}.wrong .answer{outline:2px solid #b74545}
@keyframes shake{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:360px){main{padding:28px 18px 20px}.hint{margin:24px auto 28px}#answers{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.wrong{animation:none}}