/* Copyright (c) 2026 Zack Abrams. All rights reserved. Not licensed for reuse; see LICENSE. */
:root{
  --oak-grain:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'380'%20height%3D'380'%3E%3Cfilter%20id%3D't'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.22%200.008'%20numOctaves%3D'4'%20seed%3D'7'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.24%200%200%200%200%200.12%200%200%200%200%200.04%201.35%200%200%200%20-0.55'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23t)'%2F%3E%3C%2Fsvg%3E");
  --felt-tex:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%3E%3Cfilter%20id%3D't'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.95'%20numOctaves%3D'2'%20seed%3D'11'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200.55%200%200%200%20-0.22'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23t)'%2F%3E%3C%2Fsvg%3E");
  --linen-tex:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%3E%3Cfilter%20id%3D't'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.75'%20numOctaves%3D'2'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.35%200%200%200%200%200.28%200%200%200%200%200.18%200.5%200%200%200%20-0.2'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23t)'%2F%3E%3C%2Fsvg%3E");
  --cork-tex:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D't'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.55'%20numOctaves%3D'3'%20seed%3D'9'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.36%200%200%200%200%200.2%200%200%200%200%200.07%202.2%200%200%200%20-0.98'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23t)'%2F%3E%3C%2Fsvg%3E");
  --paper-tex:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cfilter%20id%3D't'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.8'%20numOctaves%3D'2'%20seed%3D'14'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.5%200%200%200%200%200.42%200%200%200%200%200.3%200.25%200%200%200%20-0.1'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23t)'%2F%3E%3C%2Fsvg%3E");
  --speckle:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'90'%20height%3D'90'%3E%3Cfilter%20id%3D't'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'1.4'%20numOctaves%3D'1'%20seed%3D'12'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%200.45%200%200%200%200%200.35%200%200%200%200%200.2%200.4%200%200%200%20-0.17'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23t)'%2F%3E%3C%2Fsvg%3E");
}
/* Themes. Each table sets the same tokens: colors, the table and mat surfaces, the tile material, and
   which way the light falls (shadow offsets as fractions of a tile). Light and Dark are the plain originals.
   Every table starts from Light's tokens, so a picker swatch never borrows one its table leaves out from the page's table. */
:root,[data-theme]{
  color-scheme:light;
  --table:#dfe4ee;--table-hi:#f0f3f8;--mat:#cdd5e5;--mat-edge:#b6c1d7;--line:#a9b5cc;--panel:#f3f5f9;
  --ink:#191e2b;--muted:#59637d;--accent:#284be8;--accent-ink:#fff;--accent-soft:rgba(40,75,232,.13);
  --easy:#1b7445;--easy-bg:#e2f4e9;--easy-line:#a6d8b9;
  --medium:#3e2c03;--medium-bg:#f3bf52;--medium-line:#a17413;
  --hard:#a3213f;--hard-bg:#fbe7ed;--hard-line:#eeb2c2;
  --shadow:rgba(22,30,52,.25);--shadow-lift:rgba(22,30,52,.3);
  --tile-top:#fdf7ea;--tile-mid:#f4e9cf;--tile-low:#e7d6b0;--tile-edge:#c4ae82;--tile-ink:#221d14;--tile-art:none;
  --tsx-k:0;--tsy-k:.1;--lsx-k:0;--lsy-k:.5;
  --table-art:radial-gradient(130% 55% at 50% -8%,var(--table-hi),transparent 70%);
  --mat-art:var(--mat);--mat-shadow:inset 0 2px 9px var(--shadow);
  --btn-bg:transparent;--btn-ink:var(--ink);--btn-border:var(--line);--btn-shadow:none;
}
@media (prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark;--table:#121827;--table-hi:#1b2439;--mat:#1b2540;--mat-edge:#2b3959;--line:#3a4868;--panel:#171f33;--ink:#edf0fa;--muted:#a0aac2;--accent:#9aafff;--accent-ink:#0e173b;--accent-soft:rgba(154,175,255,.15);--easy:#8fdcaf;--easy-bg:#173828;--easy-line:#2f6a4b;--medium:#211805;--medium-bg:#d6a544;--medium-line:#f1cb74;--hard:#ff9ab2;--hard-bg:#3a1a25;--hard-line:#6e3447;--shadow:rgba(0,0,0,.5);--shadow-lift:rgba(0,0,0,.55)}}
[data-theme=dark]{color-scheme:dark;--table:#121827;--table-hi:#1b2439;--mat:#1b2540;--mat-edge:#2b3959;--line:#3a4868;--panel:#171f33;--ink:#edf0fa;--muted:#a0aac2;--accent:#9aafff;--accent-ink:#0e173b;--accent-soft:rgba(154,175,255,.15);--easy:#8fdcaf;--easy-bg:#173828;--easy-line:#2f6a4b;--medium:#211805;--medium-bg:#d6a544;--medium-line:#f1cb74;--hard:#ff9ab2;--hard-bg:#3a1a25;--hard-line:#6e3447;--shadow:rgba(0,0,0,.5);--shadow-lift:rgba(0,0,0,.55)}

/* Kitchen table: honey-oak planks in window light, a stitched felt placemat, answers on a sheet of lined paper. */
[data-theme=oak]{color-scheme:light;
  --table:#c68b49;--mat:#2f6a4e;--mat-edge:transparent;--line:rgba(70,35,10,.38);--panel:#fbf5e8;
  --ink:#34200f;--muted:#553519;--accent:#8a2f1b;--accent-ink:#fff8ec;--accent-soft:rgba(138,47,27,.12);
  --shadow:rgba(60,28,6,.42);--shadow-lift:rgba(60,28,6,.34);
  --tile-top:#fff8e8;--tile-mid:#f5e7c7;--tile-low:#e7d2a6;--tile-edge:#c2a877;--tile-ink:#231a10;--tile-art:var(--speckle);
  --tsx-k:.06;--tsy-k:.12;--lsx-k:.3;--lsy-k:.6;
  --table-art:radial-gradient(110% 70% at 8% -5%,rgba(255,244,214,.55),transparent 55%),repeating-linear-gradient(90deg,transparent 0 92px,rgba(60,28,8,.32) 92px 93.5px,rgba(255,225,180,.18) 93.5px 94.5px,transparent 94.5px 187px),var(--oak-grain),linear-gradient(90deg,#c88f4e 0 25%,#c28545 25% 50%,#cd9656 50% 75%,#c48947 75%);
  --mat-art:var(--felt-tex),radial-gradient(120% 90% at 30% 0%,#3f7d5d,#2c6247 70%);
  --mat-shadow:0 12px 20px rgba(60,28,6,.4),0 2px 3px rgba(60,28,6,.35),inset 0 1px 0 rgba(255,255,255,.15);
  --btn-bg:radial-gradient(circle at 35% 30%,#e3b574,#b07638);--btn-ink:#3a2312;--btn-border:transparent;--btn-shadow:inset 0 1px 0 rgba(255,240,210,.55),0 2px 4px rgba(60,28,6,.4);
}
/* Linen & cork: a woven tablecloth, a cork trivet, answers typed on an index card. */
[data-theme=linen]{color-scheme:light;
  --table:#e6dfd2;--table-hi:#f4efe7;--mat:#c49563;--mat-edge:transparent;--line:rgba(80,62,35,.3);--panel:#fdfbf6;
  --ink:#27241f;--muted:#6a6358;--accent:#b8452f;--accent-ink:#fff;--accent-soft:rgba(184,69,47,.1);
  --shadow:rgba(70,50,20,.3);--shadow-lift:rgba(70,50,20,.26);
  --tile-top:#ffffff;--tile-mid:#f8f4ea;--tile-low:#ebe2cf;--tile-edge:#bfae8c;--tile-ink:#27241f;--tile-art:var(--speckle);
  --table-art:radial-gradient(90% 60% at 50% 0%,rgba(255,255,255,.55),transparent 70%),repeating-linear-gradient(0deg,rgba(110,90,60,.08) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(110,90,60,.07) 0 1px,transparent 1px 3px),var(--linen-tex);
  --mat-art:radial-gradient(100% 80% at 30% 10%,rgba(255,236,200,.35),transparent 60%),var(--cork-tex),#c49563;
  --mat-shadow:inset 0 0 0 1px rgba(90,55,20,.25),inset 0 2px 6px rgba(90,55,20,.25),0 14px 26px rgba(80,60,30,.2);
  --btn-bg:rgba(255,255,255,.5);--btn-border:rgba(39,36,31,.22);
}
/* Drafting table: a blueprint at night. Blue paper ruled in a faint grid, the mat drawn in dashed white,
   answers lettered on a strip of tracing paper the grid shows through. */
[data-theme=blueprint]{color-scheme:dark;
  --table:#1b3a67;--table-hi:#24497d;--mat:#152f55;--mat-edge:transparent;--line:rgba(222,234,255,.34);--panel:#172f52;
  --ink:#eef3fb;--muted:#a9bddb;--accent:#e8f0ff;--accent-ink:#15305a;--accent-soft:rgba(232,240,255,.14);--easy:#8fdcaf;--easy-bg:#173828;--easy-line:#2f6a4b;--medium:#211805;--medium-bg:#d6a544;--medium-line:#f1cb74;--hard:#ff9ab2;--hard-bg:#3a1a25;--hard-line:#6e3447;
  --shadow:rgba(4,14,36,.55);--shadow-lift:rgba(4,14,36,.5);
  --tile-top:#fdf7e6;--tile-mid:#f3e7c9;--tile-low:#e2d1a8;--tile-edge:#b39c6e;--tile-ink:#1c2a44;--tile-art:var(--speckle);
  --tsx-k:0;--tsy-k:.1;--lsx-k:0;--lsy-k:.45;
  --table-art:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(6,18,44,.45) 100%),
    repeating-linear-gradient(0deg,rgba(226,238,255,.1) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(226,238,255,.1) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,rgba(226,238,255,.028) 0 1px,transparent 1px 11px),repeating-linear-gradient(90deg,rgba(226,238,255,.028) 0 1px,transparent 1px 11px),
    var(--paper-tex),linear-gradient(170deg,#21457a,#17325b);
  --mat-art:var(--paper-tex),#152f55;
  --mat-shadow:inset 0 0 0 1px rgba(8,22,50,.4),0 6px 14px rgba(4,14,36,.35);
  --btn-bg:rgba(232,240,255,.06);--btn-ink:#eef3fb;--btn-border:rgba(232,240,255,.62);--btn-shadow:none;
}
/* Card table: green baize inside a wooden rail, found answers standing in tile racks. */
[data-theme=felt]{color-scheme:dark;
  --table:#1c5a40;--table-hi:#2a7353;--mat:#18503a;--mat-edge:transparent;--line:rgba(240,230,190,.3);--panel:#17402e;
  --ink:#f2ead0;--muted:#bccbb8;--accent:#e2c173;--accent-ink:#1c2a1f;--accent-soft:rgba(226,193,115,.15);--easy:#8fdcaf;--easy-bg:#173828;--easy-line:#2f6a4b;--medium:#211805;--medium-bg:#d6a544;--medium-line:#f1cb74;--hard:#ff9ab2;--hard-bg:#3a1a25;--hard-line:#6e3447;
  --shadow:rgba(0,20,8,.55);--shadow-lift:rgba(0,20,8,.45);
  --tile-top:#fff8e6;--tile-mid:#f3e6c6;--tile-low:#e2cfa2;--tile-edge:#b39a66;--tile-ink:#1f1a10;--tile-art:var(--speckle);
  --tsy-k:.12;--lsy-k:.55;
  --table-art:radial-gradient(100% 70% at 50% 45%,rgba(120,200,150,.18),transparent 70%),var(--felt-tex);
  --mat-art:radial-gradient(90% 70% at 50% 30%,rgba(140,220,170,.12),transparent 70%),var(--felt-tex),#18503a;
  --mat-shadow:inset 0 3px 10px rgba(0,0,0,.35);
  --btn-bg:#f2ead0;--btn-ink:#1c5a40;--btn-border:transparent;--btn-shadow:inset 0 0 0 3px #f2ead0,inset 0 0 0 4.5px rgba(28,90,64,.55),0 2px 4px rgba(0,0,0,.4);
}

/* The fonts ship with the site (Latin subsets; SIL Open Font License, see fonts/LICENSE.txt). Tiles and
   handwriting wait briefly for theirs rather than flash a stand-in; both are preloaded. */
@font-face{font-family:"Rubik";font-weight:600;font-display:block;src:url(fonts/rubik.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-weight:400 700;font-display:block;src:url(fonts/caveat.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/plex-mono.woff2) format("woff2")}
*{box-sizing:border-box}
html,body{height:100%}
/* No double-tap zoom anywhere (a pinch still works, so a zoom can always be undone). */
html,body,dialog,::backdrop{touch-action:manipulation}
body{margin:0;background:var(--table-art),var(--table);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.app{max-width:440px;min-height:100%;margin:0 auto;padding-inline:16px;padding-block:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
:is(button,a,.tile,.home,.word[role=button]):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font:700 28px/1 Georgia,"Times New Roman",serif;letter-spacing:-1.2px;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.tools{display:flex;gap:8px}
.icon-btn{width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow);display:grid;place-items:center;cursor:pointer;font-weight:650;font-size:18px}
.icon-btn svg{width:18px;height:18px}

.no-js{margin:0;padding:10px 4px;text-align:center;font-weight:600;line-height:1.4}
.board-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat{display:flex;align-items:center;gap:9px;min-width:0}
.cat strong{font:700 19px/1.2 Georgia,"Times New Roman",serif;white-space:nowrap}
.chip{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid}
.chip[data-level=tricky]{color:var(--hard);background:var(--hard-bg);border-color:var(--hard-line)}
.nav{display:flex;align-items:center;gap:2px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nav button{width:34px;height:40px;padding:0;border:0;background:transparent;font-size:19px;cursor:pointer;border-radius:8px}
.nav button:disabled{opacity:.3;cursor:default}

.play-area{position:relative;display:flex;flex-direction:column;gap:16px}
.play-area.waiting .shelf .tile{cursor:default}
.start-overlay{position:absolute;inset:-2px;z-index:10;display:grid;place-items:center;border-radius:20px;background:transparent}
.start-button{min-width:176px;padding:15px 24px;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:17px;font-weight:700;box-shadow:0 10px 30px var(--shadow);cursor:pointer;transition:transform .16s,box-shadow .16s}
.start-button:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--shadow-lift)}
.start-button:active{transform:translateY(1px)}
.tray{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.found{height:40px;padding-inline:6px;border-radius:9px;border:1.5px dashed var(--line);border:1.5px dashed color-mix(in srgb,var(--line) 55%,transparent);display:flex;align-items:center;justify-content:center;overflow:hidden}
.found.filled{border:1.5px solid transparent;background:var(--accent-soft);cursor:pointer}
.found.revealed{background:transparent;border:1.5px dashed var(--line)}
.found.revealed .answer{opacity:.55}
/* Hints and reveals used, above the answers: quiet at zero (on the same soft fill as the message line), lit in the hint and clue colors once used. */
/* At zero a counter is a faint ghost of the filled badge it becomes once used. */
.usage{display:flex;justify-content:center;gap:8px}
.use{display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 8px;border-radius:99px;border:1px solid color-mix(in srgb,var(--line) 45%,transparent);background:color-mix(in srgb,var(--panel) 25%,transparent);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.use i{font-style:normal}
.eye,.bulb{width:1.15em;height:1.15em;margin-right:.3em;vertical-align:-.22em}
.use .eye,.use .bulb{width:14px;height:14px;margin:0}
.use.on{border-color:transparent;color:#3a2a08}
.use.hint.on{background:linear-gradient(165deg,#fde6a8,#f6cf6c 55%,#e8b546);box-shadow:0 1.5px 0 #b0812a}
.use.reveal.on{color:#4d4d49;background:linear-gradient(165deg,#e6e6e4,#d5d5d2 55%,#c1c1bd);box-shadow:0 1.5px 0 #8f8f8a}
.clue{margin:-2px 0 0;min-height:3.1em;font-size:13px;line-height:1.55;color:var(--muted);text-align:center;text-wrap:balance}
/* A soft highlight behind the definition, line by line, so it reads clearly over wood grain, felt and blueprint grid.
   Translucent, and padded just enough that wrapped lines meet without overlapping into a darker seam. */
.message .note{line-height:1.55}
.pill.soft{background:color-mix(in srgb,var(--panel) 50%,transparent);color:var(--ink)}
.clue>span,.message .note,.a2hs-after{padding:.2em .55em;border-radius:6px;background:color-mix(in srgb,var(--panel) 50%,transparent);color:color-mix(in srgb,var(--muted) 55%,var(--ink));-webkit-box-decoration-break:clone;box-decoration-break:clone}
.clue b{color:var(--ink);font-weight:700;letter-spacing:.03em;margin-right:.4em}

.shelf{position:relative;display:grid;grid-template-columns:auto auto auto;justify-content:space-evenly;gap:16px 12px;padding-block:4px}
/* A shallow tray under each column, pressed into the table. */
.bed{margin:-8px -10px calc(-8px - var(--shelf-s,34px) * .07);border-radius:14px;background:color-mix(in srgb,var(--shadow) 22%,transparent);box-shadow:inset 0 2px 7px var(--shadow),inset 0 -1px 0 rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.14)}
.shelf.finished .bed{display:none}
@media (max-height:700px){.bed{margin-block:-5px calc(-5px - var(--shelf-s,34px) * .07)}}   /* short screens: clear of the definition line above, and even */.home:nth-child(odd){grid-column:1}
.home:nth-child(even){grid-column:3}
/* A finished board shows a check where its words were (gray if the answers were shown). */
.shelf.finished::after,.mat.finished::after{content:"✓";position:absolute;inset:0;margin:auto;--ck:min(88px,calc(var(--shelf-s,34px)*2.6));width:var(--ck);height:var(--ck);border-radius:50%;display:grid;place-items:center;font:700 calc(var(--ck)*.57)/1 system-ui,sans-serif;color:var(--accent);background:var(--accent-soft);border:3px solid var(--accent);animation:check-in .5s cubic-bezier(.2,1.35,.45,1)}
.given-up.finished::after{color:var(--muted);border-color:var(--muted);background:transparent}
.mat.finished::after{display:none}
@keyframes check-in{from{scale:.4;opacity:0}to{scale:1;opacity:1}}
/* Relax mode hides the timer (it keeps counting quietly, in case you switch back). */
.relaxed .stats{visibility:hidden}
.mode-demo{display:flex;align-items:center}
.mode-demo .icon-btn.as-icon{vertical-align:0}
.icon-btn.as-icon{display:inline-grid;width:26px;height:26px;margin-right:.3em;vertical-align:-8px;pointer-events:none}
.icon-btn.as-icon svg{width:15px;height:15px}
.home{justify-self:center;display:flex;border-radius:9px;width:calc(var(--n)*var(--shelf-s,34px) + (var(--n) - 1)*3px);height:var(--shelf-s,34px)}
.home.empty{outline:1.5px dashed var(--line);outline:1.5px dashed color-mix(in srgb,var(--line) 70%,transparent);outline-offset:5px;cursor:pointer}
.home.empty:hover{outline-color:var(--accent)}
.home.done{visibility:hidden}

.word{--s:34px;--gap:4px;display:flex;gap:var(--gap);position:relative;transition:opacity .16s}
.shelf .word{--s:var(--shelf-s,34px);--gap:3px}
.word.leaving{opacity:.4}
.shelf[data-dim="0"] .home[data-col="0"]>.word:not(.lifted,:focus-within),.shelf[data-dim="1"] .home[data-col="1"]>.word:not(.lifted,:focus-within){opacity:.38}
@media (hover:hover){.shelf[data-dim] .home>.word:hover{opacity:1}}
.gap{flex:none;width:calc(var(--s)*.45)}
.tile{width:var(--s);height:var(--s);flex:none;display:grid;place-items:center;border-radius:calc(var(--s)*.17);
  background:var(--tile-art),linear-gradient(165deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low));color:var(--tile-ink);
  font:600 calc(var(--s)*.66)/1 "Rubik",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;text-shadow:0 1px 0 rgba(255,255,255,.7);
  /* The contact shadow falls the way the room's light does. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(150,120,70,.25),0 calc(var(--s)*.07) 0 var(--tile-edge),calc(var(--s)*var(--tsx-k) + var(--tsx-px,0px)) calc(var(--s)*var(--tsy-k) + var(--tsy-px,0px)) calc(var(--s)*.2) var(--shadow);
  rotate:var(--r,0deg);z-index:var(--tz,auto);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:rotate .25s,translate .16s,scale .16s,box-shadow .16s}
/* Clues and hints tint a tile: amber means swap this letter, gray means leave it. */
/* The right column's tiles are pebble-shaped, and keep that shape wherever they go, so a traded letter shows where it came from. */
.tile[data-col="1"]{border-radius:calc(var(--s)*.4)}
.tile[data-status=swap]{--tile-top:#fde6a8;--tile-mid:#f6cf6c;--tile-low:#e8b546;--tile-edge:#b0812a}
.tile[data-status=stay]{--tile-top:#e6e6e4;--tile-mid:#d5d5d2;--tile-low:#c1c1bd;--tile-edge:#8f8f8a;--tile-ink:#4d4d49}
.lifted{z-index:30}
.tile.lifted,.lifted .tile,.tile.picked{cursor:grabbing;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(150,120,70,.25),0 calc(var(--s)*.07) 0 var(--tile-edge),calc(var(--s)*var(--lsx-k) + var(--lsx-px,0px)) calc(var(--s)*var(--lsy-k) + var(--lsy-px,0px)) calc(var(--s)*.5) var(--shadow-lift)}
.tile.picked{translate:0 -6px}
.tile.previewed{translate:0 -3px;outline:2.5px solid var(--accent);outline-offset:2px}
.tile.target{z-index:20;transition:translate .2s cubic-bezier(.2,1.25,.45,1),rotate .25s,scale .16s,box-shadow .16s}
/* The glow wraps the whole tile, its thick bottom edge included. */
.solved .tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 calc(var(--s)*.07) 0 var(--tile-edge),0 0 0 2px var(--accent),0 calc(var(--s)*.07) 0 2px var(--accent),0 6px 14px var(--shadow)}

.side{display:contents}
/* The bottom padding adds the depth of a tile's edge (.07 of its size), so the room above and below the tiles looks even. */
.mat{position:relative;display:grid;gap:12px;padding:18px 14px calc(18px + var(--mat-s,50px) * .07);border-radius:20px;background:var(--mat-art);border:1px solid var(--mat-edge);box-shadow:var(--mat-shadow);transition:box-shadow .16s}
/* Breathing room between the table's words and the mat, so there's space to pull a word back. */
.mat{margin-top:clamp(10px,4.5dvh,40px)}
.mat.ready{box-shadow:var(--mat-shadow),0 0 0 3px var(--accent)}
.slot{min-height:calc(var(--mat-s,50px) + 20px);display:flex;align-items:center;justify-content:center;border-radius:12px;border:1.5px dashed var(--line)}
.slot.full{border-color:transparent}
.mat .slot.slot.aim{border-color:var(--accent);background:var(--accent-soft)}
.slot .word{--s:var(--mat-s,50px);--gap:6px}
.slot .tile,.merged .tile{rotate:0deg}
.mat.merging .slot{display:none}
/* Flip: the bottom word's slot moves above the top one. The button shows once both words are down. */
.mat.flipped .slot:first-of-type{order:2}
.mat-flip{position:absolute;right:-13px;top:50%;translate:0 -50%;z-index:3;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.mat-flip svg{width:16px;height:16px}
.mat.pair .mat-flip{opacity:1;pointer-events:auto}
.mat.merging .mat-flip{opacity:0;pointer-events:none}
.merged{justify-self:center;align-self:center}
/* A solved word, fused into one tile: the same face and edge as a letter tile, one letter per tile-width. */
.wordtile{display:grid;grid-auto-flow:column;grid-auto-columns:var(--s);height:var(--s);place-items:center;border-radius:calc(var(--s)*.24);
  background:var(--tile-art),linear-gradient(165deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low));color:var(--tile-ink);
  font:600 calc(var(--s)*.66)/1 "Rubik",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;text-shadow:0 1px 0 rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 calc(var(--s)*.07) 0 var(--tile-edge),0 0 0 2px var(--accent),0 calc(var(--s)*.07) 0 2px var(--accent),0 6px 14px var(--shadow)}
.found .wd{display:contents}
.found .answer{color:var(--ink);font:600 clamp(15px,4.4vw,18px)/1.1 "Rubik",system-ui,sans-serif;letter-spacing:.015em;text-transform:uppercase;white-space:nowrap}

.message{min-height:44px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;text-align:center;color:var(--muted);font-size:14px;text-wrap:balance}
.message b{color:var(--ink);font-weight:700;letter-spacing:.03em}
.pill{border:1px solid var(--line);border-radius:99px;padding:10px 18px;background:transparent;font-weight:650;font-size:14px;line-height:1;cursor:pointer}
.pill.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.pill.full{width:100%;padding-block:13px}
.bottom{margin-top:clamp(6px,calc((100dvh - 700px) * .15),24px);display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px}
/* The timer (and any misses and hints) wears the same finish as the buttons beside it. */
.stats{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 15px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow);border-radius:999px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
#tally{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:500;opacity:.8}
#tally:empty{display:none}
.actions{display:flex;flex:none;gap:8px}
/* Hint and Give up wear the same finish as the round buttons up top, so every table shows them clearly. */
.text-btn{border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow);padding:8px 15px;font-size:14px;font-weight:650;line-height:1.2;white-space:nowrap;cursor:pointer;border-radius:999px}
@media (max-width:400px){.stats,.text-btn{padding-inline:12px}.actions{gap:6px}.message .pill{padding-inline:14px}}
.text-btn:disabled{opacity:.4;cursor:default}

dialog{width:calc(100% - 32px);max-width:420px;--pad-x:22px;--pad-b:24px;max-height:88dvh;overflow-y:auto;padding:22px var(--pad-x) var(--pad-b);border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 24px 70px var(--shadow)}
dialog::backdrop{background:rgba(8,14,35,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog[open]{animation:dialog-in .2s ease-out}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
dialog h2{margin:0;font:700 24px/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.02em}
dialog p{margin:10px 0;line-height:1.5}
.close-button{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;font-size:26px;cursor:pointer}
.rules{margin:6px 0 2px;padding-left:0;list-style:none;line-height:1.5;font-size:min(15px,3.6vw)}
.rules li{margin:3px 0}
.examples{position:relative;margin:4px 0 6px}
/* The written examples stay for screen readers; everyone else watches them play out on a little mat in the table's own tiles. */
.example{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.demo{height:94px;display:grid;place-content:center;justify-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:var(--mat-art);border:1px solid var(--mat-edge);box-shadow:0 1px 2px rgba(0,0,0,.14),inset 0 1px 6px rgba(0,0,0,.2)}
.demo .tile{pointer-events:none}
.demo-note{position:absolute;left:0;right:0;top:72px;text-align:center;pointer-events:none}
.demo-note span{display:inline-block;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.45);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.example-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.example-track::-webkit-scrollbar{display:none}
.example-card{position:relative;flex:0 0 100%;margin:0;scroll-snap-align:center;display:grid;gap:2px}
.example-card figcaption{min-height:22px;display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.example-arrow{position:absolute;bottom:-3px;width:44px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
#example-prev{left:0}
#example-next{right:0}
.example-arrow:disabled{opacity:.25;cursor:default}
.example{padding:14px 6px;border-radius:12px;background:var(--accent-soft);display:grid;grid-template-columns:1fr 1fr;font-weight:650;letter-spacing:.05em;font-size:min(15px,3.8vw)}
.ex{display:grid;justify-items:center;align-content:start;gap:6px;white-space:nowrap}
.ex+.ex{border-left:1px solid var(--line);border-left:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.ex em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.example b{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.example strong{color:var(--accent)}
/* One statement per line (the categories; Hint and Reveal). Like the rules, they shrink a touch on narrow phones. */
.lines{font-size:min(15px,3.6vw)}
.lines>span{display:block;text-wrap:pretty}
/* The three categories each fit on one line: the type shrinks a touch with the dialog's width (no smaller than 12.5px).
   On a narrower phone a line wraps instead, evenly, so none ends on a lone word or two. */
#help-dialog{container-type:inline-size}
.lines.cats{font-size:clamp(12.5px,calc(100cqw / 26.9),15px)}
.lines.cats>span{text-wrap:balance}
.lines.cats>span+span{margin-top:4px}
.fine{font-size:13px;color:var(--muted)}
/* Links in the fine print stay quiet: the text's own color, with a soft underline. */
.fine a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.18em}
.fine.privacy{margin:14px 0 0;line-height:1.45}
#help-dialog .fine{line-height:1.4;margin:10px 0 0;text-align:center}
/* How to play may run a little taller than other sheets, so the buttons get room to breathe below the fine print. */
#help-dialog{max-height:96dvh;--pad-b:18px}
#help-dialog .help-actions{margin-top:14px}
/* On a short screen How to play's Tip steps aside. */
@media (max-height:700px){#help-dialog .tip{display:none}}
/* A menu that runs past the screen (Settings, Archive, Stats, How to play on a small phone) shows a soft fade with a small arrow at its foot
   while there is more to scroll, and clears at the end. It overlaps the last 46px rather than adding height. */
dialog::after{content:'';display:block;position:sticky;bottom:calc(-1 * var(--pad-b));height:46px;margin:-46px calc(-1 * var(--pad-x)) 0;pointer-events:none;opacity:0;transition:opacity .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238d93a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center 20px/22px no-repeat,linear-gradient(to bottom,transparent,var(--panel) 62%)}
dialog[data-more]::after{opacity:1}
.fine.privacy strong{color:var(--ink);font-weight:600}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
#share-text{width:100%;margin:12px 0 16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--table);color:var(--ink);font:inherit;line-height:1.5;resize:vertical}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- the tables' own pieces ---------- */
[data-theme=oak] :is(.board-bar,.clue,.message,.bottom){text-shadow:0 1px 0 rgba(255,232,196,.35)}
[data-theme=oak] .mat{--shadow:rgba(10,30,18,.55)}
[data-theme=oak] .mat::before{content:"";position:absolute;inset:8px;border:1.6px dashed rgba(245,232,196,.6);border-radius:12px;pointer-events:none}
[data-theme=oak] .slot:not(.full){border-color:rgba(245,232,196,.35)}
[data-theme=oak] .tray{--row:30px;row-gap:0;column-gap:12px;padding:7px 14px 6px 40px;rotate:-1deg;border-radius:2px;
  background:linear-gradient(90deg,transparent 30px,rgba(214,88,80,.5) 30px 31.5px,transparent 31.5px),repeating-linear-gradient(transparent 0 calc(var(--row) - 1px),rgba(120,160,205,.5) calc(var(--row) - 1px) var(--row)) 0 7px/100% calc(100% - 13px) no-repeat,var(--paper-tex),#fffcf2;
  box-shadow:0 1px 1px rgba(60,28,6,.14),0 10px 18px rgba(60,28,6,.32)}
[data-theme=oak] .found{height:var(--row);overflow:visible;padding:0;border:0;border-radius:0;background:transparent;justify-content:flex-start}
[data-theme=oak] .found .answer{font:600 24px/1 "Caveat",cursive;color:#233c86;text-transform:none;letter-spacing:0}
[data-theme=oak] .found.revealed .answer{color:#77736b;opacity:1}

[data-theme=linen] .slot:not(.full){border-color:rgba(90,55,20,.35)}
[data-theme=linen] .tray{--row:28px;row-gap:0;column-gap:14px;padding:13px 14px 6px;border-radius:3px;
  background:linear-gradient(#e0625a,#e0625a) 0 9px/100% 1.5px no-repeat,repeating-linear-gradient(transparent 0 calc(var(--row) - 1px),rgba(92,142,196,.32) calc(var(--row) - 1px) var(--row)) 0 13px/100% calc(100% - 19px) no-repeat,#fffdf7;
  box-shadow:0 1px 2px rgba(80,60,30,.14),0 10px 22px rgba(80,60,30,.16)}
[data-theme=linen] .found{height:var(--row);overflow:visible;padding:0 2px;border:0;border-radius:0;background:transparent;justify-content:flex-start}
[data-theme=linen] .found .answer{font:500 14px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;color:#2e2a24}

[data-theme=blueprint] .mat::before{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(236,243,255,.75);border-radius:10px;pointer-events:none}
[data-theme=blueprint] .slot:not(.full){border-color:rgba(222,234,255,.3)}
/* The trays are solid sheets laid on the grid, so no tile ever sits across a grid line. */
[data-theme=blueprint] .bed{background:var(--paper-tex),#183460;box-shadow:inset 0 0 0 1px rgba(222,234,255,.2),0 4px 10px rgba(4,14,36,.3)}
[data-theme=blueprint] .tray{--row:30px;row-gap:0;column-gap:12px;padding:8px 14px;border-radius:2px;background:linear-gradient(rgba(228,238,250,.86),rgba(214,228,245,.86));
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 8px 18px rgba(4,14,36,.4)}
[data-theme=blueprint] .found{height:var(--row);overflow:visible;padding:0 2px;border:0;border-radius:0;background:transparent;justify-content:center}
[data-theme=blueprint] .found .answer{font:500 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.16em;color:#1b3a67;text-transform:uppercase}
[data-theme=blueprint] .found.revealed .answer{color:#5d7394;opacity:1}

[data-theme=felt] body{box-shadow:inset 0 0 0 8px #5b361a,inset 0 0 0 9.5px #3b2210,inset 0 0 0 10.5px rgba(255,210,150,.18),inset 0 18px 26px rgba(0,0,0,.35)}
[data-theme=felt] .app{padding-inline:max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-right));padding-block:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-bottom))}
[data-theme=felt] .mat::after{content:"";position:absolute;inset:3px;border:1.5px solid rgba(226,193,115,.55);border-radius:17px;pointer-events:none}
[data-theme=felt] .slot:not(.full){border-color:rgba(226,193,115,.3)}
[data-theme=felt] .found{height:38px;padding:0 2px 5px;border:0;border-radius:0;background:transparent;align-items:flex-end;position:relative;overflow:visible;container-type:inline-size}
[data-theme=felt] .found::after{content:"";position:absolute;inset:auto 0 0 0;height:7px;border-radius:2px 2px 3px 3px;background:linear-gradient(#8a5a2e,#5e3a1a 60%,#4a2c12);box-shadow:0 4px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,210,160,.35)}
/* Letters fill most of each tile: as large as 20px, scaled down so a long answer still fits its rack. */
[data-theme=felt] .found .answer{display:flex;justify-content:center;gap:1px;width:100%;font:600 16px/1 "Rubik",system-ui,sans-serif;font-size:min(20px,calc(100cqw / var(--n,8) * 1.08));letter-spacing:0;text-transform:uppercase}
/* Each found word stands in the rack as one long tile. */
[data-theme=felt] .found .wd{display:flex;flex:var(--len) 1 0;max-width:calc(var(--len)*25px);min-width:0;height:29px;border-radius:5px;color:var(--tile-ink);
  background:var(--tile-art),linear-gradient(162deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low));box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 0 var(--tile-edge);transform:perspective(200px) rotateX(7deg);transform-origin:bottom}
[data-theme=felt] .found .ch{flex:1 1 0;min-width:0;display:grid;place-items:center}
[data-theme=felt] .found .sp{flex:0 0 5px}
[data-theme=felt] .found.revealed .answer{opacity:.6}
/* On phones the felt's frame, padding and racks give back some height, so its tiles stay as big as the other tables' (a 4-letter board has room to spare). */
@media (max-width:600px){
  [data-theme=felt] .app{padding-block:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-bottom))}
  [data-theme=felt] .tray{row-gap:4px}
  [data-theme=felt] .found{height:34px}
  [data-theme=felt] .found .wd{height:26px}
}
@media (max-width:360px){[data-theme=felt] .app{padding-inline:max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-right))}}

/* ---------- the table picker ---------- */
#theme-dialog{margin:auto auto max(12px,env(safe-area-inset-bottom))}
/* Settings has four rows now (the last only on phones), so it may run as tall as How to play before it scrolls, with its rows a touch tighter. */
#theme-dialog{max-height:96dvh}
#theme-dialog .setting{padding-block:9px}
/* The privacy note is two lines; its type shrinks a little with the sheet's width so the longer line stays on one line (it wraps only on the narrowest phones). */
#theme-dialog{container-type:inline-size}
#theme-dialog .fine.privacy{font-size:clamp(10.5px,calc(100cqw / 30.2),13px)}
#theme-dialog::backdrop{background:rgba(0,0,0,.1);-webkit-backdrop-filter:none;backdrop-filter:none}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin-top:12px}
.swatch{display:grid;gap:6px;padding:0;border:0;background:transparent;color:var(--ink);font-size:13px;font-weight:650;cursor:pointer}
.swatch-art{position:relative;height:72px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--table-art),var(--table);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swatch-art .tile{--s:26px;position:relative;z-index:1;rotate:-5deg;pointer-events:none}
.swatch-mat{position:absolute;left:12%;right:12%;bottom:-20px;height:36px;border-radius:10px;background:var(--mat-art);box-shadow:var(--mat-shadow)}
.swatch[aria-pressed=true] .swatch-art{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:600px), (orientation:landscape) and (max-height:500px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  .app{height:100dvh;min-height:0;overflow:hidden;gap:clamp(6px,1dvh,10px);padding-inline:12px;padding-block:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-bottom));touch-action:none;touch-action:pinch-zoom}
  .play-area{gap:clamp(6px,1dvh,10px);min-height:0}
  .shelf{row-gap:clamp(8px,1.3dvh,12px);column-gap:8px;padding-block:0;margin-top:clamp(3px,1dvh,7px)}   /* room for a dashed empty spot beside its neighbours, and for the tray clear of the definition line */
  .bed{margin-inline:-7px}
  .home.empty{outline-offset:2px}
  .clue{margin-top:clamp(0px,.3dvh,2px)}
  .bottom{padding-top:clamp(0px,.5dvh,4px)}
  .mat{gap:8px;padding:13px 12px calc(13px + var(--mat-s,50px) * .07);border-radius:16px}
  .slot{min-height:calc(var(--mat-s,50px) + 8px)}
  .found{height:36px}
  .message{min-height:39px;font-size:13px}   /* room for a pill (38.1px tall), so Peek appearing never moves the tiles */
  .bottom{flex:none}
  
  #share-text{font-size:16px}
  dialog{width:calc(100% - 20px);--pad-x:16px}
}
@media (max-width:600px) and (max-height:650px){
  .mat{margin-top:clamp(6px,2dvh,14px)}
  .app{gap:5px;padding-block:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-bottom))}
  .play-area{gap:5px}
  .shelf{row-gap:8px}
  .mat{gap:5px;padding:9px 10px calc(9px + var(--mat-s,50px) * .07)}
  .mat .word{--s:min(var(--mat-s,50px),42px)}
  .clue{min-height:1.3em}
  .use{padding-block:0;font-size:11px}
  .slot{min-height:50px}
}
@media (max-width:600px) and (max-height:730px){   /* phones with the browser's bars showing: the mat gives back some height so the table's tiles stay readable */
  .mat .word{--s:min(var(--mat-s,50px),44px)}
  .slot{min-height:50px}
  .found{height:34px}
  .mat{gap:6px;padding:11px 12px calc(11px + var(--mat-s,50px) * .07)}
}
@media (max-width:600px) and (max-height:700px){
  .mat .word{--s:min(var(--mat-s,50px),38px)}
  .slot{min-height:44px}
  .found{height:32px}
  .mat{gap:5px;padding:9px 10px calc(9px + var(--mat-s,50px) * .07)}
}
@media (max-width:600px) and (max-height:600px){
  .mat .word{--s:min(var(--mat-s,50px),34px)}
  .slot{min-height:40px}
  .found{height:30px}
  .mat{gap:4px;padding:8px 10px calc(8px + var(--mat-s,50px) * .07)}
}
/* A phone turned sideways: still one screen, with the table on the left and the mat on the right.
   The timer and buttons sit under the mat, so the table gets the whole height of its side. */
@media (orientation:landscape) and (max-height:500px){
  [data-theme] .app{max-width:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:10px 32px;
    padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));padding-block:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-bottom))}
  .board-bar{grid-column:2}
  .play-area{grid-column:1 / -1;grid-row:2 / 4;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr;gap:6px 32px}
  .usage,.tray,.clue,.shelf{grid-column:1}
  .shelf{align-self:start}
  .side{grid-column:2;grid-row:1 / -1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding-bottom:28px}
  .mat{margin-top:0}
  .start-overlay{grid-column:1;grid-row:1 / -1}
  .bottom{grid-column:2;grid-row:3;margin-top:0}
}
/* A wide screen: the mat sits between the two columns of words, and the game, with its timer and buttons,
   sits as one block in the middle of the window. Answers are bigger and centered. Narrower windows keep the phone layout. */
@media (min-width:1000px) and (min-height:600px){
  .app{max-width:1320px;--matw:clamp(360px,34vw,520px)}
  .play-area{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:auto}
  .bottom{margin:4px 0 auto;justify-content:center}
  .is-done .play-area{margin-bottom:auto}   /* the bar under the game is gone once solved: keep the game centered, not sunk to the bottom */
  .tray{width:min(100%,680px);justify-self:center;column-gap:16px}
  .clue{min-height:1.3em;font-size:15px}
  .message{font-size:15px}
  .shelf{grid-row:4;grid-column:1;grid-template-columns:minmax(0,1fr) var(--matw) minmax(0,1fr);gap:14px 32px;align-content:center}
  .shelf.finished::after{display:none}
  .mat.finished::after{display:grid;position:absolute;inset:0;margin:auto}
  .home:nth-child(odd){grid-column:1;justify-self:end}
  .home:nth-child(even){grid-column:3;justify-self:start}
  /* The mat and the line under it share a cell with the table, whose box spans it: sit above it, or the table takes their clicks. */
  .side{grid-row:4;grid-column:1;justify-self:center;align-self:center;display:flex;flex-direction:column;gap:10px;width:var(--matw);position:relative;z-index:1}
  .mat{margin-top:0}
  [data-theme] .found{justify-content:center}
  .found{height:48px}
  .found .answer{font-size:22px}
  [data-theme=oak] .tray{--row:40px}
  [data-theme=oak] .found .answer{font-size:31px}
  [data-theme=blueprint] .tray{--row:38px}
  [data-theme=blueprint] .found .answer{font-size:19px}
  [data-theme=linen] .tray{--row:36px}
  [data-theme=linen] .found .answer{font-size:18px}
  [data-theme=felt] .found{height:48px}
  [data-theme=felt] .found .wd{max-width:calc(var(--len)*32px);height:37px}
  [data-theme=felt] .found .answer{font-size:min(25px,calc(100cqw / var(--n,8) * 1.08))}
}
/* A tall desktop window: a roomier answer sheet with larger writing. */
@media (min-width:1000px) and (min-height:950px){
  .tray{width:min(100%,780px)}
  .found .answer{font-size:26px}
  .found{height:54px}
  [data-theme=oak] .tray{--row:46px}
  [data-theme=oak] .found .answer{font-size:36px}
  [data-theme=blueprint] .tray{--row:44px}
  [data-theme=blueprint] .found .answer{font-size:22px}
  [data-theme=linen] .tray{--row:40px}
  [data-theme=linen] .found .answer{font-size:21px}
  .clue,.message{font-size:16px}
}
/* First visit only: the title card for a moment. Its navy is the card's own, so the picture has no edges.
   On a tall phone it runs a little past the sides, trimming the card's empty margins so the words read bigger. */
.splash{position:fixed;inset:0;z-index:100;overflow:hidden;background:#121927;transition:opacity .4s ease}
.splash img{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(100vw,1000px,calc((100dvh - 24px)*2000/1050));max-width:none;height:auto;opacity:0;scale:.97;transition:opacity .5s ease,scale .8s cubic-bezier(.2,.8,.2,1)}
.splash.shown img{opacity:1;scale:1}
.splash.leaving{opacity:0;pointer-events:none}
/* "sticky" and "swappy" in How to play wear the gray and amber a clue paints on tiles, and act the part now and then. */
/* Hint and Reveal appear in How to play as small copies of the real buttons. */
.controls{line-height:1.5}
.controls>span+span{margin-top:8px}
/* Each line is a row: a button (or icon) in a fixed column, its words beside it. The words hang, so a second line
   starts under the first, not back under the button. The two icon rows center their words on the icon. */
.lines.controls>.hang,.lines.controls>.mode-demo,.lines.controls>.settings-note{display:flex}
.hang{align-items:baseline;gap:.5em}
.hang>.as-label{flex:none;min-width:calc(4em + 22px);text-align:center}
.hang>.what{text-wrap:pretty}
.lines.controls>.mode-demo,.lines.controls>.settings-note{align-items:center}
.lines.controls>.mode-demo .mode-text,.lines.controls>.settings-note>span:last-child{position:relative;top:-.5px}   /* the words' middle sits with the icon's, as the pills' words do */
.as-label{display:inline-block;padding:3px 10px;font-size:.9em;line-height:1.2;vertical-align:1px;pointer-events:none;cursor:default}
/* Card table's buttons draw a double ring inside the edge; on the smaller How to play label it's drawn finer, with a little more room. */
[data-theme=felt] .icon-btn.as-icon{box-shadow:inset 0 0 0 1.5px #f2ead0,inset 0 0 0 2.5px rgba(28,90,64,.55),0 1px 2px rgba(0,0,0,.35)}
[data-theme=felt] .text-btn.as-label{padding:4px 11px;box-shadow:inset 0 0 0 2px #f2ead0,inset 0 0 0 3px rgba(28,90,64,.55),0 1px 3px rgba(0,0,0,.35)}
/* In the game, Peek's soft fill sits on the table; here it sits on the dialog, so mix in the table's color to match. */
.pill.soft.as-label{background:color-mix(in srgb,var(--panel) 50%,var(--table))}
.together{white-space:nowrap}
.tint{display:inline-block;padding:0 .32em;border-radius:5px;font-weight:650;line-height:1.35}
.tint.swap{color:#3a2a08;background:linear-gradient(165deg,#fde6a8,#f6cf6c 55%,#e8b546);box-shadow:0 1.5px 0 #b0812a;animation:swappy 3.6s ease-in-out .8s infinite}
.tint.stay{color:#4d4d49;background:linear-gradient(165deg,#e6e6e4,#d5d5d2 55%,#c1c1bd);box-shadow:0 1.5px 0 #8f8f8a;animation:sticky 3.6s ease-in-out 2.6s infinite}
@keyframes swappy{0%,72%,100%{transform:none}78%{transform:translateY(-3px) rotate(-7deg)}86%{transform:translateY(-3px) rotate(7deg)}93%{transform:none}}
@keyframes sticky{0%,74%,100%{transform:none}80%{transform:scale(1.08,.86)}88%{transform:scale(.97,1.04)}94%{transform:none}}
@media (max-width:360px){.tools{gap:5px}.icon-btn{width:33px;height:33px}.brand{font-size:24px}}
@media (prefers-reduced-motion: reduce){.shelf.finished::after{animation:none}.splash img{scale:1}.tint{animation:none}}
@media (prefers-reduced-motion: reduce){.tile,.word{transition-duration:.12s}.tile.target{transition-timing-function:ease-out}dialog[open]{animation:none}}

/* ---------- Settings, Archive and Statistics ---------- */
/* Small capitals label a section, as the category does under How to play's examples. */
.section-label{margin:20px 0 8px;font:700 11px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
dialog.sheet{max-width:440px}
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.setting>span{display:grid;gap:2px}
.setting small{color:var(--muted);font-size:13px}
/* With the mat above the tiles, the line under it (instructions, Peek) sits between the mat and the trays, so the mat needs less air
   above it and the trays get some below the line. The option is meaningless where the mat sits between or beside the tile columns. */
.mat-top .mat{margin-top:clamp(0px,.5dvh,4px);z-index:2}   /* above the trays, so a word flying up to it is not hidden behind them */
.mat-top .shelf{margin-top:clamp(6px,1.6dvh,14px)}
@media (min-width:1000px) and (min-height:600px), (orientation:landscape) and (max-height:500px){#mat-setting,.mat-only{display:none}}
.setting .icon-btn{flex:none}
.tile-face{background:var(--tile-art),linear-gradient(165deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 var(--tile-edge)}

/* Archive: a month of days. Each playable day is a tile; pips under the date count the answers found. */
.month-nav{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px}
.month-nav strong{font:700 18px/1.2 Georgia,"Times New Roman",serif}
.month-nav button{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:19px;cursor:pointer}
.month-nav button:disabled{opacity:.3;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.cal-head{text-align:center;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.cal-day{position:relative;aspect-ratio:1;display:grid;place-content:center;justify-items:center;gap:4px;padding:0;border:0;border-radius:22%;background:transparent;color:var(--muted);font:600 15px/1 "Rubik",system-ui,sans-serif;cursor:pointer}
.cal-day.none{cursor:default;opacity:.4}
.cal-day:not(.none){background:var(--tile-art),linear-gradient(165deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low));color:var(--tile-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 var(--tile-edge),0 5px 9px var(--shadow)}
.cal-day:not(.none):hover{translate:0 -2px}
.cal-day.solved{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 var(--tile-edge),0 0 0 2px var(--accent),0 3px 0 2px var(--accent),0 5px 9px var(--shadow)}
.cal-day.shown{filter:grayscale(1);opacity:.62}
.cal-day.today::after{content:"";position:absolute;inset:-5px;border:2px dashed var(--accent);border-radius:26%}
.pips{display:flex;gap:2px}
.pips i{width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1.3px currentColor;opacity:.5}
.pips i.on{background:currentColor;opacity:.85}
.cal-lock svg{width:14px;height:14px}
.cal-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:16px;font-size:12px;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.leg{width:13px;height:13px;border-radius:4px;background:var(--tile-art),linear-gradient(165deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low));box-shadow:0 1.5px 0 var(--tile-edge)}
.leg.solved{box-shadow:0 0 0 2px var(--accent)}
.leg.shown{filter:grayscale(1);opacity:.62}
.leg.today{background:none;box-shadow:none;border:2px dashed var(--accent)}
.cal-legend .pips{color:var(--ink)}
.cal-summary{margin:10px 0 0;text-align:center;font-size:13px;color:var(--muted)}

/* Statistics */
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.stat{display:grid;justify-items:center;gap:8px;text-align:center}
.stat>span{font-size:11.5px;line-height:1.2;color:var(--muted)}
.stat-tiles{--s:clamp(18px,6vw,27px);--gap:2px}
.stat-tiles .tile{cursor:default;rotate:0deg}
#stats-body .sub{margin:0 0 10px;font-size:13px;color:var(--muted)}
#stats-body .sub b{color:var(--ink)}
.hbars{display:grid;gap:5px}
.hbar{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.hbar .track{display:block}
.hbar .fill{display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;width:calc(24px + (100% - 24px) * var(--w));height:20px;padding:0 7px;border-radius:5px;background:color-mix(in srgb,var(--muted) 28%,transparent);color:var(--ink);font-size:11.5px}
.hbar.mine .fill{background:var(--accent);color:var(--accent-ink)}
.hbar.mine>span:first-child{color:var(--ink);font-weight:700}
.trend{display:block;width:100%;height:auto;overflow:visible}
.trend polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trend circle{fill:var(--panel);stroke:var(--accent);stroke-width:2}
.trend circle.last{fill:var(--accent)}
.trend .typical{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4}
.trend .faster{fill:var(--muted);font:600 10px/1 system-ui,sans-serif}
.axis{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:11px;color:var(--muted)}
.empty{font-size:13px;color:var(--muted)}
/* Hints and reveals: each column is a tall tile, so no help at all is the tallest one you want. */
.vcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;height:132px}
.vcol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;font-size:12px}
.vcol .stack{width:min(46px,100%);height:calc(8px + 84px * var(--h));border-radius:7px;background:var(--tile-art),linear-gradient(165deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 var(--tile-edge)}
.vcol .lab{color:var(--muted)}
/* Twelve weeks, a column a week: a clean solve is a tile, a helped one wears a pip, answers shown is an empty outline. */
.heat{display:grid;grid-template-rows:repeat(7,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px}
.heat i,.heat-legend i{display:block;aspect-ratio:1;border-radius:22%;background:color-mix(in srgb,var(--line) 32%,transparent)}
.heat i.clean,.heat i.helped,.heat-legend i.clean,.heat-legend i.helped{background:var(--tile-art),linear-gradient(165deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low));box-shadow:0 1.5px 0 var(--tile-edge)}
.heat i.helped,.heat-legend i.helped{background:radial-gradient(circle,var(--tile-ink) 0 17%,transparent 21%),linear-gradient(165deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-low))}
.heat i.gaveup,.heat-legend i.gaveup{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}
.heat i.started{background:linear-gradient(to top,var(--tile-mid) 50%,color-mix(in srgb,var(--line) 32%,transparent) 50%)}
.heat i.future{visibility:hidden}
.heat i.today{outline:2px solid var(--accent);outline-offset:1px}
.heat-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--muted)}
.heat-legend span{display:inline-flex;align-items:center;gap:6px}
.heat-legend i{width:12px}
.heat-legend i.today{background:none;outline:2px solid var(--accent);outline-offset:-1px}
.cat-head,.cat-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 40px 44px;align-items:center;gap:8px}
.cat-head{font-size:11px;color:var(--muted);text-align:right}
.cat-row{padding:5px 0;font-size:13.5px}
.cat-row .num{text-align:right;font-variant-numeric:tabular-nums}
.cat-row .track{height:8px;border-radius:4px;background:color-mix(in srgb,var(--line) 40%,transparent);overflow:hidden}
.cat-row .fill{display:block;width:calc(100% * var(--w));height:100%;border-radius:4px;background:var(--accent)}

/* The solved line: the time and the wait for tomorrow, then Share, Stats and Archive. */
.done-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;flex-basis:100%}
.done-actions .pill{flex:none}
/* The narrowest phones: a smaller title and closer arrows, so the category and the date share the line. */
@media (max-width:360px){.cat strong{font-size:16px}.nav button{width:28px}.chip{font-size:10px;letter-spacing:.06em;padding:3px 7px}.cat{gap:7px}.board-bar{gap:6px}}
.done-actions .pill>svg{width:1.1em;height:1.1em;margin-right:.35em;vertical-align:-.2em}
.message .note .countdown{color:var(--muted);font-variant-numeric:tabular-nums}

/* How to play points to Settings, with the gear inline. */
/* Centered on the words around it, not sitting on their baseline. */
.settings-note{display:flex;align-items:center}
.settings-note .icon-btn.as-icon{margin-inline:0 .3em;vertical-align:0}

/* ---------- The practice puzzle's coach ---------- */
.practicing .bottom .stats{visibility:hidden}
.help-actions{display:grid;gap:10px}
#help-dialog .help-actions{grid-template-columns:1fr 1.15fr}   /* Practice and Play share a row */
.coach{position:fixed;z-index:60;left:50%;top:auto;bottom:max(14px,env(safe-area-inset-bottom));translate:-50% 0;transition:top .3s ease;width:min(calc(100% - 24px),400px);display:grid;gap:8px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:0 14px 40px var(--shadow);font-size:15px;line-height:1.45}
.coach[style*="top"]{bottom:auto}
.coach.centered{top:50%;bottom:auto;translate:-50% -50%}
.coach strong{font:700 20px/1.2 Georgia,"Times New Roman",serif}
.coach p{margin:0;text-wrap:pretty}
.coach-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.coach-actions:empty{display:none}
/* The spotlight: everything else dims, and a ring pulses around what to touch next. Clicks pass straight through. */
/* The dimming stays still; only a thin ring breathes, by opacity alone, so the browser never repaints the dim. */
.coach-ring{position:fixed;z-index:55;left:0;top:0;border-radius:16px;pointer-events:none;box-shadow:0 0 0 200vmax rgba(8,12,24,.42)}
.coach-ring::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:3px solid var(--accent);animation:coach-pulse 1.8s ease-in-out infinite;will-change:opacity}
.coach-finger{position:fixed;z-index:58;left:0;top:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.85);box-shadow:0 0 0 2px rgba(0,0,0,.25),0 6px 14px rgba(0,0,0,.35)}
@keyframes coach-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.coach-ring::after{animation:none}.coach{transition:none}}
.coach-lift{position:relative;z-index:56}
.coach p .icon-btn.as-icon{margin-inline:.1em;vertical-align:-.35em}
.coach-keys{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
/* Each icon centers on its item's first line, so a two-line item keeps its icon beside the start of the text. */
.coach-keys li{display:flex;align-items:flex-start;gap:8px;line-height:20px}
.coach-keys .icon-btn.as-icon{flex:none;margin:-3px 0 0;vertical-align:0}

/* A phone held sideways has too little height for the board, so a mat of tiles asks for portrait and the clock waits. */
.rotate{display:none}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  .rotate{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,5dvh,24px);padding:12px 24px;background:var(--table-art),var(--table);color:var(--ink);--rs:min(46px,calc((100vw - 120px)/13.6),calc(100dvh/8.5))}
  [data-theme=felt] .rotate{box-shadow:inset 0 0 0 8px #5b361a,inset 0 0 0 9.5px #3b2210,inset 0 0 0 10.5px rgba(255,210,150,.18),inset 0 18px 26px rgba(0,0,0,.35)}
  .rotate .mat{margin:0;gap:calc(var(--rs)*.3);justify-items:center}
  .rotate .word{--s:var(--rs);--gap:calc(var(--rs)*.12)}
  .rotate p{margin:0;font:600 clamp(18px,6dvh,24px)/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;text-wrap:balance}
}

/* Browsers without color-mix() (iOS and iPadOS before 16.2, Chrome before 111, Firefox before 113) drop every rule above that uses it
   (a value with var() inside is only checked when it is applied, so a plain line written before it would not save it).
   These plain equivalents keep text on a readable background and keep the borders. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .found{border:1.5px dashed var(--line)}
  .use{border-color:var(--line);background:transparent}
  .pill.soft,.pill.soft.as-label{background:var(--panel)}
  .clue>span,.message .note,.a2hs-after{background:var(--panel);color:var(--ink)}
  .bed{background:rgba(0,0,0,.14)}
  .home.empty{outline:1.5px dashed var(--line)}
  .ex+.ex{border-left:1px solid var(--line)}
  .setting{border-bottom:1px solid var(--line)}
  .hbar .fill{background:var(--line)}
  .heat i,.heat-legend i,.cat-row .track{background:var(--line)}
  .heat i.started{background:linear-gradient(to top,var(--tile-mid) 50%,var(--line) 50%)}
}

/* Add to Home Screen: a card under the solved line (after a first solve), and its steps. */
.a2hs{flex:none;width:100%;box-sizing:border-box;margin:0;padding:12px 12px 12px 14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px;text-align:left;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--ink);box-shadow:0 8px 22px -12px var(--shadow)}
.a2hs-icon{width:44px;height:44px;border-radius:11px;box-shadow:0 1px 3px rgba(0,0,0,.3);display:block}
.a2hs-text{display:grid;gap:1px;font-size:14px;line-height:1.3;color:var(--muted)}
.a2hs-text strong{color:var(--ink);font-size:15px}
.a2hs .pill{white-space:nowrap}
.a2hs-no{flex:none;margin:0 auto;border:0;background:transparent;color:var(--muted);font-size:13px;padding:6px 10px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);cursor:pointer}

/* The Add to Home Screen guide: big numbered steps, each with a little picture of what to look for. */
.a2hs-lead{margin:6px 0 0;font-size:16px;line-height:1.4}
.howto{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.howto li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.howto .n{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 17px/1 system-ui}
.howto .what{display:grid;gap:3px;font-size:14.5px;line-height:1.35;color:var(--muted)}
.howto .what strong{font-size:17px;line-height:1.25;color:var(--ink)}
.art{display:flex;align-items:center;box-sizing:border-box;margin-top:6px;padding:9px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:16px;font-weight:600;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 38%,transparent)}
.art svg{width:24px;height:24px;flex:none}
.art-icon{justify-content:center;gap:10px;width:max-content;min-width:88px}
.art-row{justify-content:space-between;gap:12px}
.art-add{gap:12px}
.art-add img{width:34px;height:34px;border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.art-add span{flex:1}
.art-add b{color:var(--accent);font-weight:700}
.a2hs-got{margin-top:14px}
.howto .look{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.howto .look+.art{margin-top:0;pointer-events:none}
.art-bar{justify-content:space-between;gap:12px;border-radius:999px;padding:9px 18px}
.art-bar span{flex:1;text-align:center}
#a2hs-dialog{max-height:96dvh}
.a2hs-after{flex:none;max-width:300px;text-wrap:balance;font-size:14px;line-height:1.5;text-align:center}
.a2hs-after svg{width:16px;height:16px;vertical-align:-3px;margin:0 1px}
.a2hs-wrap{position:absolute;left:0;right:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:440px;margin-inline:auto}
.has-a2hs .shelf.finished::after{opacity:0}
/* On an iPhone Home Screen app, iOS 26 puts the page below the status bar (the notch insets read 0 there) and blurs about 50px at the top of it. Nothing on a page turns that off, so the game starts below it, and keeps 16px clear at the bottom for the home indicator. */
.home-app .app{padding-top:calc(env(safe-area-inset-top) + 54px)!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important}