:root{font-family:system-ui,sans-serif;color:#173f36;background:#f6f1e7;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;min-height:44px;border:1px solid #a6b9ad;border-radius:10px;padding:8px 12px;background:#fff;color:#173f36}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #a35017;outline-offset:3px}#app{max-width:650px;margin:auto;padding:16px 20px 30px}header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}h1{font-family:Georgia,serif;font-size:1.75rem;margin:.6em auto .6em 0}a{color:inherit}header a{font-size:.9rem}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.toolbar label{font-weight:600}.toolbar select{flex:1;min-width:150px}.stats{display:flex;justify-content:space-between;gap:8px;font-weight:700}.stats p{margin:16px 0 6px}#cue{margin:8px 0 14px;font-size:.95rem}#board{display:grid;grid-template-columns:repeat(var(--size),1fr);gap:3px;padding:7px;background:#163d34;border:3px solid #163d34;border-radius:14px;width:min(100%,480px,max(230px,calc(100svh - 390px)));aspect-ratio:1;margin:0 auto 16px}.cell{display:flex;align-items:center;justify-content:center;font-size:clamp(16px,5vw,29px);border-radius:5px;color:#182c29;position:relative}.cell.basin{box-shadow:inset 0 0 0 3px #fff}.cell.origin:after{content:'';position:absolute;top:5px;left:5px;width:0;height:0;border-top:9px solid #173f36;border-right:9px solid transparent}.colour-0{background:#eeafb1}.colour-1{background:#f0ce6d}.colour-2{background:#86c5b6}.colour-3{background:#c2b0e2}#colours{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}#colours button{min-height:64px;padding:6px 2px;border:2px solid #173f36;font-weight:650}#colours button[aria-pressed=true]{border-style:dashed}#colours .symbol{display:block;font-size:1.3rem}#colours small{font-size:.8rem}#outcome{font-size:1.1rem;font-weight:700;min-height:1.5em;margin-bottom:8px}#notice,#record{font-size:.9rem}#notice:empty{display:none}#save-alert{background:#fff0cd;border:1px solid #8b671e;padding:12px;border-radius:10px}#save-alert button{margin:4px}dialog{max-width:min(550px,calc(100% - 24px));border:2px solid #173f36;border-radius:16px;padding:22px;background:#fffdf6;color:#173f36}dialog::backdrop{background:#122d25aa}dialog p{line-height:1.55}dialog button{margin-right:8px}dialog h2{margin-top:0}#next{background:#173f36;color:white}#record{color:#425c52}[hidden]{display:none!important}@media(max-width:360px){#app{padding:10px 12px 24px}h1{font-size:1.4rem}header{gap:8px}.toolbar{gap:6px}.toolbar label{font-size:.9rem}#colours{gap:5px}#colours small{font-size:.72rem}#board{gap:2px;padding:5px}.cell.basin{box-shadow:inset 0 0 0 2px #fff}}

.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:420px){header{gap:8px}header h1{font-size:1.3rem}header a{font-size:.8rem}header button{font-size:.85rem;padding:8px 9px}.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;position:relative}.toolbar label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}.toolbar select,.toolbar button{font-size:.85rem;padding:8px 6px}.toolbar select{min-width:0;width:100%}#challenge{margin:10px 0}#cue{font-size:.85rem}}