*{box-sizing:border-box}body{margin:0;color:#263b39;background:#eaf0e7;font:16px system-ui,sans-serif}main{max-width:650px;margin:auto;padding:38px 24px}header{text-align:center}.eyebrow{letter-spacing:.16em;font-size:10px;font-weight:700;color:#536d62}h1{font-family:Georgia,serif;font-weight:400;font-size:64px;margin:12px 0 8px;line-height:1}h1 span{display:block;font:italic 23px Georgia,serif;margin-top:8px;color:#647568}header p{color:#647568}.panel{background:#fafbf4;border:1px solid #c6d2bf;box-shadow:0 12px 32px #243d3020;border-radius:24px;padding:24px;margin-top:28px}.top,.readout{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:#596959}select{font:inherit;background:#edf0e5;border:1px solid #bac8b4;border-radius:8px;padding:7px}#rule{text-align:center;font-size:14px;min-height:20px}#board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:360px;margin:18px auto}button{font:inherit;cursor:pointer;touch-action:manipulation;border:1px solid #c1cdb8;background:#edf1e6;color:#293f34;border-radius:10px;padding:10px 14px}button:hover{background:#dbe6d1}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #bc7546;outline-offset:3px}.tile{position:relative;aspect-ratio:1;padding:0;font:38px Georgia,serif;background:#e8eddb;border:2px solid #d5dfc7;border-radius:15px}.tile small{position:absolute;right:9px;top:6px;font:11px system-ui;color:#617456}.tile.dark{background:#3b544a;color:#fcfff1;border-color:#3b544a}.tile.dark small{color:#cad6c8}.tile.selected{outline:3px solid #bd784b;outline-offset:2px;box-shadow:inset 0 0 0 3px #faf5df}.tile.selected:after{content:'◆';font:10px system-ui;position:absolute;bottom:5px;left:calc(50% - 5px);color:#ba784b}.readout{max-width:360px;margin:auto}#message{text-align:center;min-height:44px;margin:16px 0 6px;color:#75502e;font-size:14px}#directions{display:flex;justify-content:center;gap:8px;margin:8px 0 14px}#directions button{font-size:24px;width:52px;padding:6px}.tools{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;font-size:13px}#next{background:#3d5947;color:#fff}details{padding:20px 5px;color:#526252;line-height:1.6;font-size:14px}summary{cursor:pointer}footer{text-align:center;font-size:11px;color:#667765;line-height:1.6}a{color:inherit}footer p{margin:4px}button:disabled{opacity:.45;cursor:default}@media(max-width:460px){main{padding:22px 16px}h1{font-size:48px}.panel{padding:18px 14px;margin-top:20px}#board{gap:9px}.tile{font-size:34px}#journal{font-size:11px}.top{gap:5px}}