/* Self-hosted fonts (Latin subset, from Google Fonts, SIL Open Font Licence) */
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ZillaSlab-500.woff2) format("woff2");}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ZillaSlab-700.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/IBMPlexSans-var.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600.woff2) format("woff2");}

/* ---------- tokens (unchanged from the original scoresheet) ---------- */
:root{
  --board:#1E4D3B;--ground:#EDE4D0;--panel:#F7F1E3;--tile:#F2E7CE;
  --ink:#231F1A;--ink-soft:#5C554A;--rule:#D6C9AC;--accent:#B5473A;
  --accent-2:#1E4D3B;--gold:#A97C21;--gold-text:#7E5C14;--field:#FFFBF0;
  --shadow:0 1px 0 rgba(35,31,26,.18), 0 2px 6px rgba(35,31,26,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --board:#0F2A21;--ground:#12211C;--panel:#182E26;--tile:#20382E;
    --ink:#EDE4D0;--ink-soft:#A3B3A9;--rule:#2C4A3D;--accent:#E0705F;
    --accent-2:#7FC0A0;--gold:#D9A63C;--gold-text:#D9A63C;--field:#0C1C16;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --board:#0F2A21;--ground:#12211C;--panel:#182E26;--tile:#20382E;
  --ink:#EDE4D0;--ink-soft:#A3B3A9;--rule:#2C4A3D;--accent:#E0705F;
  --accent-2:#7FC0A0;--gold:#D9A63C;--gold-text:#D9A63C;--field:#0C1C16;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size:15px;line-height:1.55;
}
a{color:var(--accent-2);text-underline-offset:3px;text-decoration-thickness:1px;}
::selection{background:color-mix(in srgb, var(--gold) 35%, transparent);color:var(--ink);}
input,textarea{caret-color:var(--accent);}
html{scrollbar-color:var(--rule) transparent;}
a:hover{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;}
.skip{position:absolute;left:-9999px;top:0;}
.skip:focus{left:12px;top:12px;z-index:10;background:var(--panel);padding:8px 12px;}

/* ---------- site bar ---------- */
.sitebar{background:var(--board);color:#F2E7CE;}
.sitebar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;}
.brand{display:flex;align-items:center;gap:10px;color:#F2E7CE;text-decoration:none;
  font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:19px;letter-spacing:-.005em;}
.brand:hover{color:#fff;}
.brand-tile{width:26px;height:26px;border-radius:3px;background:#F2E7CE;color:#231F1A;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;position:relative;
  box-shadow:0 1px 0 rgba(0,0,0,.35);}
.brand-tile sub{position:absolute;right:2px;bottom:0;font-family:"IBM Plex Mono",monospace;font-size:7px;}
.sitenav{display:flex;gap:4px 18px;flex-wrap:wrap;font-size:14px;}
@media (max-width:760px){
  .sitebar .wrap{flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:6px;padding-bottom:0;}
  .sitenav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:0 20px 8px;font-size:14.5px;gap:20px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 28px),transparent);}
  .sitenav::-webkit-scrollbar{display:none;}
  .sitenav a{white-space:nowrap;padding:6px 0;}
}
.sitenav a{color:#F2E7CE;text-decoration:none;opacity:.82;padding:4px 0;border-bottom:2px solid transparent;}
.sitenav a:hover{opacity:1;color:#fff;}
.sitenav a[aria-current="page"]{opacity:1;border-bottom-color:var(--gold);}
.sitenav a:focus-visible{outline-color:#F2E7CE;}
/* language picker: a small dropdown at the end of the bar (beside the brand on phones) */
.sitenav{order:1;margin-left:auto;}
.sitebar .langnav{order:2;position:relative;font-size:14px;}
.sitebar .langnav summary{list-style:none;display:flex;align-items:center;gap:5px;cursor:pointer;color:#F2E7CE;opacity:.85;
  padding:5px 8px;border-radius:6px;font:600 12.5px/1 "IBM Plex Mono",monospace;letter-spacing:.04em;}
.sitebar .langnav summary::-webkit-details-marker{display:none;}
.sitebar .langnav .flag{width:20px;height:13px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15);flex-shrink:0;}
.sitebar .langnav-menu a{display:flex;align-items:center;gap:10px;}
.sitebar .langnav summary::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;margin-left:1px;}
.sitebar .langnav summary:hover,.sitebar .langnav[open] summary{opacity:1;background:rgba(242,231,206,.12);}
.sitebar .langnav summary:focus-visible{outline:2px solid #F2E7CE;outline-offset:2px;}
.sitebar .langnav-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:150px;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.sitebar .langnav-menu a{color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:6px;}
.sitebar .langnav-menu a:hover{background:color-mix(in srgb, var(--gold) 12%, var(--panel));}
.sitebar .langnav-menu a[aria-current="page"]{font-weight:600;background:color-mix(in srgb, var(--gold) 16%, var(--panel));}
.sitebar .langnav{border-bottom:0;}
/* two rows at every width: brand and language picker, then the main nav */
.sitebar .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;}
.brand{grid-column:1;grid-row:1;}
.sitebar .langnav{grid-column:2;grid-row:1;}
.sitenav{grid-column:1 / -1;grid-row:2;margin-left:0;padding-bottom:2px;}
@media (max-width:760px){
  .sitebar .langnav summary{padding:9px 8px;}
  .sitenav{margin-left:-20px;}
}
/* one-time offer of the page in the visitor's own language */
.lang-offer{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 16px;
  background:color-mix(in srgb, var(--gold) 14%, var(--panel));border-bottom:1px solid var(--rule);font-size:14.5px;}
.lang-offer a{font-weight:600;color:var(--accent-2);}
.lang-offer button{background:transparent;border:0;font-size:20px;line-height:1;padding:4px 8px;color:var(--ink-soft);cursor:pointer;}

/* ---------- text pages ---------- */
main.page{padding:32px 0 56px;}
.prose{max-width:720px;}
.prose h1{font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:clamp(30px,4.4vw,44px);
  line-height:1.1;margin:0 0 10px;letter-spacing:-.01em;text-wrap:balance;}
.prose .lede{font-size:17px;color:var(--ink-soft);margin:0 0 28px;}
.prose h2{font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:24px;line-height:1.2;
  margin:36px 0 10px;padding-top:14px;border-top:2px solid var(--rule);}
.prose h3{font-size:16px;font-weight:600;margin:22px 0 6px;}
.prose p,.prose li{font-size:16px;}
.prose ul,.prose ol{padding-left:22px;}
.prose li{margin-bottom:6px;}
.prose .note{background:color-mix(in srgb, var(--gold) 9%, var(--panel));border:1px solid color-mix(in srgb, var(--gold) 35%, var(--rule));
  padding:12px 16px;border-radius:6px;font-size:15px;}
.prose .note p{margin:0;}
.prose table{border-collapse:collapse;width:100%;margin:12px 0 20px;font-size:15px;background:var(--panel);}
.prose th,.prose td{border:1px solid var(--rule);padding:7px 10px;text-align:left;vertical-align:top;}
.prose th{background:var(--tile);font-weight:600;}
.prose td.num,.prose th.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;}
.table-scroll{overflow-x:auto;}
.updated{font-size:13px;color:var(--ink-soft);}
.toc{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:12px 18px;margin:0 0 8px;}
.toc p{margin:0 0 4px;font-weight:600;font-size:14px;}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;}
.toc li{font-size:14.5px;margin:0 0 3px;}
@media (max-width:560px){.toc ol{columns:1;}}
.cta{display:inline-block;margin-top:6px;background:var(--board);color:#F2E7CE;text-decoration:none;
  padding:9px 16px;border-radius:3px;font-weight:500;box-shadow:var(--shadow);}
.cta:hover{color:#fff;}

/* word lists drawn as tiles */
.wordgroup{margin:0 0 14px;}
.wordgroup h3{font-family:"Zilla Slab",Georgia,serif;font-size:18px;margin:16px 0 8px;}
.words{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.words li{margin:0;}
.word{display:inline-flex;gap:2px;}
.word span{width:28px;height:28px;border-radius:3px;background:var(--tile);border:1px solid var(--rule);
  box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;
  font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:14px;}
.word.new span{border-color:var(--gold);}
dl.defs{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15.5px;}
dl.defs dt{font-family:"IBM Plex Mono",monospace;font-weight:600;}
dl.defs dd{margin:0;color:var(--ink-soft);}

/* ---------- ad slots ----------
   Rules: never above the score sheet, never inside dialogs, the timer dock or print;
   every slot reserves its full size before an ad loads so nothing on the page moves.
   Hidden until ads are switched on (html.ads-on) or previewed with ?ads=preview. */
.ad-slot{display:none;}
html.ads-on .ad-slot,html.ads-preview .ad-slot{
  display:flex;flex-direction:column;align-items:stretch;
  width:100%;max-width:336px;min-height:280px;margin:28px auto;contain:layout paint;overflow:hidden;
}
html.ads-on .ad-slot.wide,html.ads-preview .ad-slot.wide{max-width:728px;min-height:90px;}
@media (max-width:760px){html.ads-on .ad-slot.wide,html.ads-preview .ad-slot.wide{max-width:336px;min-height:280px;}}
.ad-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px;text-align:center;}
.ad-slot > ins,.ad-slot > .ad-box{flex:1;width:100%;border-radius:6px;
  background:color-mix(in srgb, var(--panel) 70%, transparent);}
html.ads-preview .ad-slot .ad-box{border:1px dashed var(--rule);display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:12.5px;}
.rail .ad-slot{margin:0 auto;}
@media print{.ad-slot{display:none !important;}}
/* ---------- footer ---------- */
.sitefoot{border-top:2px solid var(--rule);margin-top:24px;padding:24px 0 40px;font-size:13.5px;color:var(--ink-soft);}
.sitefoot .wrap{display:grid;gap:12px;}
.footnav{display:flex;flex-wrap:wrap;gap:6px 18px;}
.footnav a{color:var(--ink);}
.footnav button{font:inherit;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;box-shadow:none;}
.disclaimer{max-width:760px;margin:0;}

/* ---------- printable score sheet ---------- */
.prose.printable{max-width:820px;}
.sheet-print{background:#fff;color:#111;border:1px solid var(--rule);padding:18px 20px;border-radius:4px;}
.sheet-title{font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:18px;margin:0 0 10px;}
.prose table.paper{background:#fff;font-size:13px;margin:0 0 10px;}
.prose table.paper th,.prose table.paper td{border:1px solid #999;padding:0 8px;height:22px;color:#111;background:#fff;}
.prose table.paper th{background:#eee;height:30px;}
.prose table.paper td.num,.prose table.paper th.num{width:96px;}
.prose table.paper td.num{font-size:12px;color:#555;}
.prose table.paper tr.adj td,.prose table.paper tr.total td{font-weight:600;font-size:12px;white-space:nowrap;}
.prose table.paper tr.total td{border-top:2px solid #111;height:28px;}
.sheet-tiles{font-size:11.5px;line-height:1.5;margin:0 0 6px;}
.sheet-foot{font-size:10.5px;color:#666;margin:0;}
@media print{
  @page{margin:12mm;}
  body{background:#fff;}
  .sitebar,.sitefoot,.no-print,.skip,.ad-slot{display:none !important;}
  main.page{padding:0;}
  .wrap{padding:0;max-width:none;}
  .sheet-print{border:0;padding:0;}
}
.sheet-options{display:flex;flex-wrap:wrap;gap:12px 22px;background:var(--panel);border:1px solid var(--rule);
  border-radius:4px;padding:12px 16px;margin:0 0 6px;}
.sheet-options fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
.sheet-options legend{font-weight:600;font-size:14px;padding:0;margin:0 0 4px;width:100%;}
.sheet-options label{font-size:15px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.sheet-options .names input{width:120px;padding:6px 8px;font:inherit;font-size:14px;background:var(--field);
  color:var(--ink);border:1px solid var(--rule);border-radius:3px;}
.sheet-options .names input[hidden]{display:none;}
.sheet-hint{font-size:14px;color:var(--ink-soft);margin:0 0 18px;}
.prose table.paper tr.sub th{font-size:11px;font-weight:500;height:20px;color:#444;}
.prose table.paper.running td:nth-child(odd):not(:first-child){background:#f6f6f6;}

/* visually hidden, still read by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

@media (max-width:400px){
  .prose table.paper td.num,.prose table.paper th.num{width:58px;}
  .prose table.paper th,.prose table.paper td{padding:0 4px;}
  .prose table.paper tr.adj td,.prose table.paper tr.total td{white-space:normal;font-size:11px;}
  .sheet-print{padding:12px 10px;}
}
@media (max-width:760px){.sitenav a{padding:12px 0;}}

/* ---------- facts and tips carousel (fills the ad slots while ads are off) ---------- */
.fact-slot{position:relative;width:100%;max-width:336px;height:196px;margin:28px auto;padding:16px 18px 14px;
  display:flex;flex-direction:column;border-radius:4px;overflow:hidden;box-shadow:var(--shadow);
  background:color-mix(in srgb, var(--gold) 7%, var(--panel));border:1px solid color-mix(in srgb, var(--gold) 28%, var(--rule));}
.fact-slot.wide{max-width:728px;height:176px;}
@media (max-width:760px){.fact-slot.wide{max-width:336px;height:196px;}}
.rail .fact-slot{margin:0 auto;}
.fact-kind{margin:0 0 6px;font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:15px;color:var(--gold-text);}
.fact-text{margin:0;flex:none;font-size:15px;line-height:1.5;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  transition:opacity .18s ease, transform .18s ease;}
.fact-slot.wide .fact-text{-webkit-line-clamp:3;}
.fact-slot.swap .fact-text,.fact-slot.swap .fact-kind{opacity:0;transform:translateY(3px);}
.fact-kind{transition:opacity .18s ease;}
.fact-nav{display:flex;justify-content:flex-end;gap:6px;margin-top:auto;padding-top:6px;}
.fact-nav button{flex-shrink:0;width:44px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--rule);border-radius:3px;background:var(--panel);color:var(--ink-soft);cursor:pointer;}
.fact-nav button:hover{color:var(--ink);border-color:var(--ink-soft);}
.fact-nav .icon{width:16px;height:16px;display:block;}
/* product cards: our own tile art, the product name and a button through to Amazon */
.fact-art{display:none;gap:4px;margin:2px 0 10px;}
.art-tile{position:relative;width:30px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  font:700 16px/1 "Zilla Slab",Georgia,serif;color:var(--ink);background:var(--tile);border:1px solid var(--rule);
  border-radius:4px;box-shadow:0 1px 0 var(--rule);}
.art-tile sub{position:absolute;right:2px;bottom:1px;font:600 8px/1 "IBM Plex Mono",monospace;color:var(--ink-soft);}
.fact-slot.is-pick .fact-art{display:flex;}
.fact-slot.is-pick .fact-text{-webkit-line-clamp:2;font-size:14.5px;}
.fact-slot.is-pick .fact-text strong{display:block;font-size:15px;}
.fact-slot.wide.is-pick .fact-body{display:flex;align-items:center;gap:16px;}
.fact-slot.wide.is-pick .fact-art{margin:0;flex-shrink:0;}
@media (max-width:760px){.fact-slot.wide.is-pick .fact-body{display:block;}.fact-slot.wide.is-pick .fact-art{margin:2px 0 10px;}}
.fact-link{display:none;margin-right:auto;align-self:center;white-space:nowrap;
  padding:8px 14px;border-radius:3px;font-size:14px;font-weight:600;text-decoration:none;
  background:var(--accent-2);color:var(--panel);}
.fact-slot.is-pick .fact-link,.fact-slot.is-buy .fact-link{display:inline-block;}
.fact-link::after{content:" \2197";}
.fact-link:hover{color:var(--panel);filter:brightness(1.08);}
.fact-slot:not(.ready) .fact-nav{visibility:hidden;}
/* while real ads are on or previewed, the carousel steps aside */
html.ads-on .fact-slot,html.ads-preview .fact-slot{display:none;}
@media print{.fact-slot{display:none !important;}}
@media (prefers-reduced-motion: reduce){.fact-text,.fact-kind{transition:none;}}
/* with ads on: if AdSense marks a unit unfilled, hide the empty slot and show a fact in its place */
html.ads-on .ad-slot:has(ins[data-ad-status="unfilled"]){display:none;}
html.ads-on .ad-slot:has(ins[data-ad-status="unfilled"]) + .fact-slot{display:flex;}

/* ---------- guides: our own tile artwork and Amazon product cards ---------- */
.hero-tiles{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 22px;}
.hero-tiles .art-tile{width:44px;height:48px;font-size:24px;border-radius:4px;box-shadow:0 2px 0 var(--rule);}
.hero-tiles .art-tile sub{font-size:10px;right:4px;bottom:3px;}
.hero-tiles .art-gap{width:16px;}
@media (max-width:600px){.hero-tiles{gap:4px;}.hero-tiles .art-tile{width:34px;height:38px;font-size:19px;}}
.product-card{display:flex;gap:16px;align-items:center;margin:18px 0 22px;padding:16px 18px;border-radius:4px;box-shadow:var(--shadow);
  background:color-mix(in srgb, var(--gold) 7%, var(--panel));border:1px solid color-mix(in srgb, var(--gold) 28%, var(--rule));}
.pc-art{display:flex;flex-wrap:nowrap;gap:3px;flex-shrink:0;}
.pc-art .art-tile{width:26px;height:28px;font-size:14px;}
.pc-body{min-width:0;}
.prose .pc-kind{margin:0 0 2px;font:700 13px/1.2 "Zilla Slab",Georgia,serif;color:var(--gold-text);}
.prose .pc-name{margin:0;font-weight:600;font-size:17px;line-height:1.3;}
.prose .pc-line{margin:2px 0 10px;font-size:15px;color:var(--ink-soft);}
.prose .pc-buy{display:inline-block;padding:8px 16px;border-radius:3px;font-size:14px;font-weight:600;text-decoration:none;
  background:var(--accent-2);color:var(--panel);}
.prose .pc-buy::after{content:" \2197";}
.prose .pc-buy:hover{color:var(--panel);filter:brightness(1.08);}
@media (max-width:520px){.product-card{flex-direction:column;align-items:flex-start;}.pc-art{width:auto;justify-content:flex-start;}}
.prose .guide-list{display:grid;gap:16px;padding:0;list-style:none;}
@media (min-width:760px){.prose .guide-list{grid-template-columns:repeat(2,minmax(0,1fr));}.prose .guide-list li:first-child{grid-column:1 / -1;}}
.guide-list li{margin:0;padding:18px 20px;border:1px solid var(--rule);border-radius:4px;background:var(--panel);box-shadow:var(--shadow);}
.guide-list a{font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:19px;text-decoration:none;color:var(--ink);}
.guide-list a:hover{color:var(--accent-2);}
.guide-list p{margin:6px 0 0;font-size:15px;color:var(--ink-soft);}
.disclosure{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 20px;}
/* guides home: the list uses the full page width; intro text keeps a readable line length */
.prose:has(> .guide-list){max-width:none;}
.prose:has(> .guide-list) > :not(.guide-list){max-width:720px;}
@media (min-width:980px){.prose .guide-list{grid-template-columns:repeat(4,minmax(0,1fr));}
  .prose .guide-list li:first-child{grid-column:1 / -1;}}
.prose .guide-list li:first-child{background:color-mix(in srgb, var(--gold) 9%, var(--panel));}
/* "Keep reading" links at the foot of a page */
.related{margin:40px 0 8px;padding-top:20px;border-top:1px solid var(--rule);}
.related h2{margin:0 0 12px;font:700 13px/1 "Zilla Slab",Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.related a{display:block;height:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:4px;background:var(--panel);
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:16px;line-height:1.3;}
.related a:hover{color:var(--accent-2);border-color:var(--accent-2);}
.related a::after{content:" \2192";color:var(--accent-2);}
/* dark mode: main buttons need contrast against dark panels */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) button.primary,:root:not([data-theme="light"]) .sheet-actions .finish{background:var(--accent-2);border-color:var(--accent-2);color:#12211C;}}
:root[data-theme="dark"] button.primary,:root[data-theme="dark"] .sheet-actions .finish{background:var(--accent-2);border-color:var(--accent-2);color:#12211C;}
/* phones: comfortable tap targets in the header and the language offer */
@media (max-width:760px){
  .sitenav a{padding:12px 0;}
  .sitebar .langnav summary{min-height:44px;padding:0 10px;}
  .lang-offer button{min-width:44px;min-height:44px;}
}
/* tiles drawn by CSS (letters live in data attributes, not in the page text) */
.word span[data-l]::before,.art-tile[data-l]::before{content:attr(data-l);}
.art-tile[data-v]::after{content:attr(data-v);position:absolute;right:2px;bottom:1px;font:600 8px/1 "IBM Plex Mono",monospace;color:var(--ink-soft);}
.hero-tiles .art-tile[data-v]::after{font-size:10px;right:4px;bottom:3px;}
/* guide breadcrumb and date */
.prose .crumbs{margin:0 0 6px;font-size:14px;color:var(--ink-soft);}
.prose .crumbs a{color:var(--ink-soft);}
/* links inside tips */
.fact-text a.fact-inline{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px;}
.fact-text a.fact-inline:hover{color:var(--accent);}
.fact-slot.is-buy .fact-text{-webkit-line-clamp:3;}
/* not-found page: tiles tumble onto the board */
.nf{max-width:640px;margin:48px auto 72px;text-align:left;}
.nf .hero-tiles{margin-bottom:28px;}
.nf .hero-tiles .art-tile{animation:nf-drop .7s cubic-bezier(.2,.9,.3,1.25) both;}
.nf .hero-tiles .art-tile:nth-child(1){animation-delay:.05s;--r:-8deg;}
.nf .hero-tiles .art-tile:nth-child(2){animation-delay:.15s;--r:6deg;}
.nf .hero-tiles .art-tile:nth-child(3){animation-delay:.25s;--r:-4deg;}
.nf .hero-tiles .art-tile:nth-child(4){animation-delay:.35s;--r:9deg;}
.nf .hero-tiles .art-tile:nth-child(5){animation-delay:.45s;--r:-6deg;}
.nf .hero-tiles .art-tile:nth-child(6){animation-delay:.55s;--r:5deg;}
.nf .hero-tiles .art-tile:hover{transform:rotate(var(--r,0)) translateY(-4px);transition:transform .15s ease;}
@keyframes nf-drop{0%{opacity:0;transform:translateY(-120px) rotate(calc(var(--r,0deg) * -3));}
  70%{opacity:1;transform:translateY(6px) rotate(var(--r,0deg));}100%{transform:translateY(0) rotate(var(--r,0deg));}}
.nf h1{font-size:clamp(30px,5vw,44px);line-height:1.1;margin:0 0 12px;}
.nf-play{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:20px 0 24px;padding:12px 16px;
  border:1px dashed var(--rule);border-radius:4px;background:var(--panel);font-size:14px;color:var(--ink-soft);}
.nf-path{font:600 15px/1.3 "IBM Plex Mono",monospace;color:var(--ink);text-decoration:line-through;text-decoration-color:var(--accent);
  text-decoration-thickness:2px;word-break:break-all;}
.nf-score{margin-left:auto;font:600 14px "IBM Plex Mono",monospace;color:var(--accent);}
.nf-links{color:var(--ink-soft);}
@media (prefers-reduced-motion:reduce){.nf .hero-tiles .art-tile{animation:none;transform:rotate(var(--r,0deg));}}
.nf h1{font-family:"Zilla Slab",Georgia,serif;font-weight:700;}
.nf .hero-tiles{gap:10px;}
.nf .hero-tiles .art-tile{width:64px;height:64px;font-size:34px;border-radius:6px;border:1px solid var(--rule);box-shadow:0 4px 0 var(--rule),0 8px 18px rgba(35,31,26,.12);}
.nf .hero-tiles .art-tile[data-v]::after{font-size:12px;right:5px;bottom:4px;}
@media (max-width:480px){.nf .hero-tiles .art-tile{width:46px;height:46px;font-size:25px;}}
/* guide photos */
.guide-photo{margin:8px 0 28px;}
.guide-photo img{display:block;width:100%;height:auto;aspect-ratio:1200/669;object-fit:cover;border-radius:4px;background:var(--tile);}
.guide-photo figcaption{margin-top:6px;font-size:12px;color:var(--ink-soft);text-align:right;}
/* cookie choice bar: equal-weight buttons, sits over the page so nothing shifts */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:640px;margin:0 auto;padding:14px 16px;
  background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:4px;box-shadow:0 8px 28px rgba(0,0,0,.18);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14px;line-height:1.45;}
.consent[hidden]{display:none;}
.consent p{margin:0;flex:1 1 280px;}
.consent a{color:inherit;}
.consent-btns{display:flex;gap:8px;flex:0 0 auto;}
.consent-btns button{min-width:104px;min-height:40px;padding:0 16px;border-radius:3px;font-weight:600;
  background:var(--field);color:var(--ink);border:1.5px solid var(--ink);}
.consent-btns button:hover{background:var(--tile);}
@media (max-width:480px){.consent-btns{width:100%;}.consent-btns button{flex:1;}}
button.linkish{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;min-height:0;}
@media print{.consent{display:none;}}