:root{--bg:#f4f1ea;--card:#fffdf8;--ink:#3d4a4f;--soft:#8fa9a3;--sage:#b9cbbd;--blue:#b7c7d6;--sand:#e6d8bf;--rose:#dcc2bd}
*{box-sizing:border-box}html,body{margin:0;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:20px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.cbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--card);border-bottom:2px solid var(--sage)}
.cbar a.home{color:var(--ink);font-weight:700;text-decoration:none}
.cbar .ctl{display:flex;gap:8px;flex-wrap:wrap}
button,.btn{font:inherit;min-height:56px;min-width:56px;padding:10px 18px;border-radius:16px;border:2px solid var(--soft);background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:focus-visible,.btn:focus-visible{outline:4px solid #6f8f88;outline-offset:2px}
.done{background:var(--sand);font-weight:700}
main{max-width:860px;margin:0 auto;padding:16px}
h1{font-size:1.5em;margin:.3em 0;text-align:center}
.ft{display:flex;gap:10px;justify-content:center;align-items:center;margin:8px 0 16px;flex-wrap:wrap}
.ft div{background:var(--card);border:2px solid var(--sage);border-radius:16px;padding:8px 14px;text-align:center}
.ft b{display:block;font-size:.8em;color:#5d6d70}
.say{font-size:1.2em;text-align:center;min-height:2em;margin:10px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.tile{font-size:1em;min-height:120px;flex-direction:column;background:var(--card)}
.tile .e{font-size:2.6em;line-height:1}
.tile.sel{border-color:#6f8f88;border-width:4px}
.tile.ok{background:var(--sage)}
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.hub a{background:var(--card);border:2px solid var(--sage);border-radius:20px;padding:18px;color:var(--ink);text-decoration:none;text-align:center}
.hub .e{font-size:3em}
.note{background:var(--card);border-left:6px solid var(--blue);padding:12px 16px;border-radius:12px;font-size:.85em;margin-top:24px}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.slot{min-height:90px;border:3px dashed var(--soft);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.75em;text-align:center}
.slot .e{font-size:2em}
.circle-wrap{height:300px;display:flex;align-items:center;justify-content:center}
.circle{width:120px;height:120px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:2.5em;transition:transform 4s ease-in-out}
.circle.big{transform:scale(2.1)}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.bin{min-height:110px;border-radius:18px;border:3px solid var(--soft);flex-direction:column}
.pond{position:relative;height:380px;background:#e8eef0;border-radius:20px;overflow:hidden;touch-action:manipulation}
.bub{position:absolute;width:80px;height:80px;border-radius:50%;border:3px solid #a9bfc9;background:rgba(255,255,255,.6);min-height:0;padding:0;font-size:1.6em}
.bub.pop{opacity:0;transform:scale(1.3);transition:all .6s}
.alldone{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;z-index:9}
.alldone.on{display:flex}.alldone .e{font-size:4em}
body.calm *,body.calm *::before{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:520px){body{font-size:18px}.slots{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}