.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 20px; }
.footer-social > span { color: var(--ink, #2C2A5E); font-weight: 700; margin-inline-end: 4px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px;
  border: 2px solid var(--line, rgba(44,42,94,.18)); border-radius: 999px; background: var(--card, #FFFFFF);
  color: var(--ink, #2C2A5E); font-weight: 700; text-decoration: none; line-height: 1.3; }
.footer-social a:hover { border-color: var(--link, #5C52FF); color: var(--link, #5C52FF); text-decoration: none; }
.footer-social a::before { content: ""; width: 1.15em; height: 1.15em; flex: none; background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }

.soc-x { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'/%3E%3C/svg%3E"); }
.soc-bluesky { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026'/%3E%3C/svg%3E"); }
.soc-mastodon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E"); }
.soc-instagram { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); }

.soc-threads { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z'/%3E%3C/svg%3E"); }

.ext { display: inline-block; width: .8em; height: .8em; margin-inline-start: .3em; vertical-align: -.05em;
  background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v4.5A1.5 1.5 0 0 1 16.5 20h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v4.5A1.5 1.5 0 0 1 16.5 20h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10'/%3E%3C/svg%3E") no-repeat center / contain; }

.card .footer-social, .release .footer-social { margin: 12px 0 0; }
/* --hint marks the light table cells in every theme, --hint-line the frames on the page's own background. */
:root { --bg:#fff4ea; --ink:#2c2a5a; --soft:#5f5d85; --panel:#ffffff; --card:var(--panel); --line:#d9d4e8; --cell:#fbeedd; --wood:#b98a5e; --accent:#4b46b0; --link:#4b46b0; --pick:#ff9d6c; --ok:#1f7a45; --bad:#b3261e; --cell-ink:#2c2a5a; --mark:#b3261e; --on-accent:#ffffff; --hint:#1558b0; --hint-line:#1558b0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1d1c33; --ink:#f2eefc; --soft:#b9b6d6; --panel:#2a2948; --line:#4a4870; --cell:#efe2cf; --wood:#8a6644; --accent:#6a64d6; --link:#c7c3ff; --pick:#ff9d6c; --ok:#5fcf8f; --bad:#ff8a80; --hint-line:#7db4ff; color-scheme:dark; } }
:root[data-theme="dark"] { --bg:#1d1c33; --ink:#f2eefc; --soft:#b9b6d6; --panel:#2a2948; --line:#4a4870; --cell:#efe2cf; --wood:#8a6644; --accent:#6a64d6; --link:#c7c3ff; --pick:#ff9d6c; --ok:#5fcf8f; --bad:#ff8a80; --hint-line:#7db4ff; color-scheme:dark; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.3 system-ui,"Segoe UI",Roboto,sans-serif; }
main { max-width:560px; margin:0 auto; padding-block:10px 28px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
button { font:inherit; cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; }
button:focus-visible, a:focus-visible { outline:3px solid var(--pick); outline-offset:1px; }
a { color:var(--link); }
.hero { margin:6px 0 10px; }
.hero h1 { margin:0; font-size:clamp(23px, 6.4vw, 34px); line-height:1.15; font-weight:800; letter-spacing:-.01em; }
.lead { margin:6px 0 0; max-width:62ch; color:var(--soft); font-size:15px; line-height:1.4; }
.ico { display:block; width:100%; height:100%; }
.top { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 8px; }
.top small { color:var(--soft); font-size:14px; }
.days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:8px 0; }
.days button { min-width:0; min-height:44px; padding:2px 0; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-size:13px; line-height:1.15; }
.days button span { display:block; min-height:1.15em; font-weight:700; color:var(--ok); }
.days button.today { border:2px solid var(--pick); }
.days button.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.days button.on span { color:var(--on-accent); }
.days button.today.on { border-color:var(--pick); }
.days button:disabled { background:transparent; color:var(--soft); border-style:dashed; }
.gentle { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 8px; font-size:14px; color:var(--soft); }
.gentle button { min-height:36px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-size:14px; }
/* A table, not a grid: wood with a little light on it, standing a little above the page. */
.board { display:grid; gap:4px; padding:8px; border-radius:12px; background:var(--wood); background:linear-gradient(145deg, color-mix(in srgb, var(--wood) 82%, #fff), var(--wood) 55%, color-mix(in srgb, var(--wood) 84%, #000)); box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 14px rgb(60 35 10 / .22); touch-action:manipulation; }
.board:empty { aspect-ratio:1; } /* the first table is on its way: its place is kept, so nothing jumps when it comes */
.cell { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; min-width:0; padding:8%; border:0; border-radius:6px; background:var(--cell); color:var(--cell-ink); box-shadow:0 1px 1px rgb(60 35 10 / .25); }
.cell.mark::after { content:"✕"; position:absolute; font-size:clamp(16px,6vw,28px); line-height:1; color:var(--mark); opacity:.8; }
.cell.held { outline:3px solid var(--pick); outline-offset:-3px; }
/* What a hint points at. A cross and a frame, not only a colour. */
.cell.hint-x, .cell.hint-at { outline:3px solid var(--hint); outline-offset:-3px; }
.cell.hint-x::after { content:"✕"; position:absolute; font-size:clamp(16px,6vw,28px); line-height:1; font-weight:700; color:var(--hint); }
.hint { margin:8px 0; padding:10px 12px; border:2px solid var(--hint-line); border-radius:10px; background:var(--panel); font-size:15px; }
.hint p { margin:0; }
.hint p.left { margin-top:8px; }
.hint p .ico { display:inline-block; width:1.5em; height:1.5em; margin:-.25em 0; vertical-align:-.25em; background:var(--cell); border-radius:4px; padding:.1em; }
.hint ul { display:grid; gap:4px; margin:8px 0 0; padding:0; list-style:none; }
.hint li { padding:5px 7px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.hint .acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.hint button { flex:1 1 auto; min-height:44px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-size:14px; }
.hint button.main { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tray { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; min-height:48px; }
/* Light under every drawing, in dark mode too: the glasses and the cup have dark lines. */
.tray button { width:46px; height:46px; padding:5px; border:1px solid var(--line); border-radius:8px; background:var(--cell); color:var(--cell-ink); font-size:22px; line-height:1; }
.tray button.on { border:3px solid var(--pick); padding:3px; }
/* A placed object leaves its slot empty, so the others stay where the finger expects them. */
.tray .slot { width:46px; height:46px; border:1px dashed var(--line); border-radius:8px; }
.count { margin:0 0 6px; font-size:14px; color:var(--soft); }
.count b { font-weight:700; }
.count .g { color:var(--ok); }
.count .r { color:var(--bad); }
.tools { display:flex; gap:6px; margin:6px 0 10px; }
.tools button { flex:1; min-width:0; min-height:44px; padding:0 4px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-size:14px; }
.tools button.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tools button:disabled { color:var(--soft); opacity:.6; }
.tip { min-height:2.6em; margin:0 0 8px; color:var(--soft); font-size:14px; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:0; padding:0; list-style:none; }
.cards li { min-width:0; display:flex; justify-content:space-between; gap:4px; min-height:40px; padding:6px 7px; border:2px solid var(--line); border-radius:8px; background:var(--panel); font-size:14px; }
.cards li.s1 { border-color:var(--ok); }
.cards li.s2 { border-color:var(--bad); }
.cards li.dim { opacity:.45; }
.cards li.hl { outline:3px solid var(--hint-line); outline-offset:1px; opacity:1; }
.cards b { flex:none; width:1em; text-align:right; font-weight:700; } /* its place is kept, so a tick never re-wraps a note */
.cards li.s1 b { color:var(--ok); }
.cards li.s2 b { color:var(--bad); }
.cards .say { min-width:0; overflow-wrap:anywhere; }
/* The line is taller than a chip, so chips on two lines of one note never touch and read as one blot. */
.cards .ico, .hint li .ico { display:inline-block; width:1.7em; height:1.7em; margin:0 .08em; padding:.08em; vertical-align:middle; background:var(--cell); border-radius:4px; }
.cards .say, .cards b, .hint li { line-height:2; }
.win { margin:0 0 10px; padding:12px; border:2px solid var(--ok); border-radius:10px; background:var(--panel); }
.win h2 { margin:0 0 4px; font-size:18px; }
.win pre { margin:8px 0; font:15px/1.25 system-ui,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.win p { margin:8px 0 0; font-size:14px; }
.win .acts { display:flex; flex-wrap:wrap; gap:8px; }
.win button { min-height:44px; padding:0 14px; border:0; border-radius:8px; background:var(--accent); color:var(--on-accent); font-size:15px; }
.win button.quiet { border:1px solid var(--line); background:var(--panel); color:var(--ink); }
/* ---- The site around the game: the same header and footer on every page ---- */
.sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
header.site, footer.site { max-width:560px; margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
header.site { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 8px; padding-top:6px; background:var(--bg); }
.brand { display:inline-flex; align-items:center; gap:7px; min-height:40px; color:var(--ink); font-weight:700; text-decoration:none; }
.brand img { display:block; width:24px; height:24px; }
header.site nav { display:flex; gap:2px; margin-inline-end:-7px; }
header.site nav a { display:inline-flex; align-items:center; min-height:40px; padding:0 7px; border-radius:8px; color:var(--ink); font-size:14px; text-decoration:none; }
header.site nav a:hover { text-decoration:underline; }
header.site nav a[aria-current] { background:var(--accent); color:var(--on-accent); }
footer.site { padding-top:14px; padding-bottom:24px; color:var(--soft); font-size:13px; line-height:1.45; }
footer.site p { margin:0 0 8px; }
.footer-social { margin:10px 0 4px; font-size:13px; gap:6px; }
.footer-social > span { color:inherit; font-weight:400; }
.footer-social a { padding:3px 10px; font-size:12px; font-weight:500; border-width:1px; }
/* Below the game: what it is, and where to go next */
.about { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.about h2 { margin:0 0 12px; font-size:21px; line-height:1.2; }
.why { display:grid; gap:10px; }
.why > div { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.why .chip { display:block; width:42px; height:42px; margin-bottom:8px; padding:5px; border-radius:8px; background:var(--cell); }
.why h3 { margin:0 0 4px; font-size:16px; line-height:1.25; }
.why p { margin:0; font-size:14px; line-height:1.45; }
.sleuth { display:grid; gap:12px; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.sleuth img { display:block; width:100%; height:auto; border-radius:8px; }
.sleuth h2 { margin:0 0 6px; font-size:18px; }
.sleuth p { margin:0 0 10px; font-size:14px; line-height:1.45; }
.sleuth p:last-child { margin-bottom:0; }
.who { margin:14px 0 0; color:var(--soft); font-size:13px; line-height:1.45; }
.go { display:inline-block; padding:10px 16px; border-radius:8px; background:var(--accent); color:var(--on-accent); font-weight:600; text-decoration:none; }
@media (min-width:600px) {
  .why { grid-template-columns:1fr 1fr; }
  .sleuth { grid-template-columns:minmax(0, 320px) minmax(0, 1fr); align-items:center; }
}
/* The text pages */
.doc { max-width:640px; }
.win .others { font-weight:600; }
.doc h1 { font-size:24px; line-height:1.2; margin:12px 0 10px; }
.doc h2 { font-size:18px; margin:22px 0 6px; }
.doc p, .doc li { line-height:1.5; }
.doc p { margin:0 0 10px; }
.doc ul, .doc ol { margin:0 0 10px; padding-inline-start:22px; }
.doc li { margin-bottom:5px; }
.doc .card { margin:18px 0; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.doc .card h2 { margin-top:0; }
.doc .soft { color:var(--soft); font-size:14px; }
.week { width:100%; border-collapse:collapse; margin:0 0 10px; font-size:14px; }
.week th, .week td { padding:5px 8px; border:1px solid var(--line); text-align:start; }
/* A wide screen: the table on the left, everything else beside it, so a laptop needs no scrolling between them. */
@media (min-width:900px) {
  main, header.site, footer.site { max-width:1200px; }
  main.doc { max-width:640px; }
  /* The header stays in view on a computer. The scrolling stops below it, so it never covers the table. */
  html { scroll-padding-top:56px; }
  header.site { position:sticky; top:0; z-index:5; padding-bottom:4px; }
  .play { display:grid; grid-template-columns:minmax(330px, min(560px, calc(100vh - 320px))) minmax(0, 1fr); gap:20px; align-items:start; }
  .tray { margin-top:0; }
  .days button { display:flex; align-items:center; justify-content:center; gap:6px; }
  .days button span { min-height:0; }
  .why { grid-template-columns:repeat(4, 1fr); }
  .cards, .hint ul { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
}