/* THC Games: the Fun hub ([thc_fun]) and "Whose Range Is This?" ([thc_game_range]).
   Same palette tokens, buttons and chips as THC Anatomy (the child theme's tokens with the same fallbacks).
   Dark follows THC Core's Display switch: Core flips the palette tokens on html[data-thc-theme="dark"], and the few
   literal colours below (the map's) are restated for that attribute. The device's own dark setting is left alone,
   as everywhere else on the site. Sizes are relative so Core's text-size and typeface switches carry through. */

.thc-gm {
  --gm-canvas: var(--wp--preset--color--base, #f7f1e4);
  --gm-raised: var(--wp--preset--color--accent-5, #fcf8ef);
  --gm-muted: var(--wp--preset--color--accent-4, #ece4d9);
  --gm-border: var(--wp--preset--color--accent-6, #d9d0bc);
  --gm-text: var(--wp--preset--color--contrast, #332d25);
  --gm-leaf: var(--wp--preset--color--accent-1, #5e7d53);
  --gm-deep: var(--wp--preset--color--accent-3, #3f5c3b);
  --gm-sage: var(--wp--preset--color--accent-2, #a8b79a);
  --gm-stroke: var(--wp--preset--color--control-stroke, #8a7f66);
  --gm-warn: #8a5a1f;
  --gm-radius: 12px;
  /* map colours (read by range-map.js) */
  --gm-water: #d3e0e1;
  --gm-land: #fcf8ef;
  --gm-other: #ebe4d6;
  --gm-inner: #b3a78e;
  --gm-coast: #7d725b;
  --gm-dot: #2f5a2c;
  --gm-pick: #b2470f;
  --gm-halo: #fcf8ef;
  --gm-label: #332d25;
  color: var(--gm-text);
  margin-block: var(--wp--preset--spacing--md, 1rem) 0;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .thc-gm, :root[data-thc-theme="dark"] .thc-gm {
  --gm-warn: #d8b35a;
  --gm-water: #131b1e;
  --gm-land: #2e2a24;
  --gm-other: #24211c;
  --gm-inner: #5f574a;
  --gm-coast: #a79d88;
  --gm-dot: #a9d79a;
  --gm-pick: #f2a65e;
  --gm-halo: #2e2a24;
  --gm-label: #efe8da;
}
:root[data-thc-contrast="high"] .thc-gm { --gm-inner: #7d725b; --gm-coast: #332d25; --gm-dot: #1d401b; }
:root[data-thc-contrast="high"][data-thc-theme="dark"] .thc-gm { --gm-inner: #a79d88; --gm-coast: #efe8da; --gm-dot: #c6f0b5; }
.thc-gm *, .thc-gm *::before, .thc-gm *::after { box-sizing: border-box; }
.thc-gm [hidden], .thc-gm[hidden] { display: none !important; }
.thc-gm__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.thc-gm__lead { margin: 0 0 var(--wp--preset--spacing--md, 1rem); font-size: var(--wp--preset--font-size--large, 1.25rem); }
.thc-gm a { color: var(--gm-deep); }
.thc-gm button, .thc-gm select { font: inherit; }
.thc-gm button:focus-visible, .thc-gm a:focus-visible, .thc-gm select:focus-visible, .thc-gm summary:focus-visible { outline: 2px solid var(--gm-leaf); outline-offset: 2px; }
.thc-gm [tabindex="-1"]:focus { outline: none; }
.thc-gm summary:focus:not(:focus-visible) { outline: none; }
.thc-gm [tabindex="-1"]:focus-visible { outline: 2px solid var(--gm-leaf); outline-offset: 3px; border-radius: 4px; }
.thc-gm__small { font-size: var(--wp--preset--font-size--small, .9rem); color: var(--gm-deep); }
.thc-gm__notice { padding: .7rem .9rem; border: 1px solid var(--gm-border); border-left: 4px solid var(--gm-warn); border-radius: 8px; background: var(--gm-raised); }

/* ---------- buttons and chips (as THC Anatomy) ---------- */
.thc-gm__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; border: 1px solid var(--gm-leaf); background: var(--gm-leaf); color: #fff; border-radius: 999px; padding: .5em 1.2em; cursor: pointer; text-decoration: none; text-align: center; max-width: 100%; }
.thc-gm a.thc-gm__btn:not(.thc-gm__btn--ghost) { color: #fff; }
.thc-gm__btn:hover { background: var(--gm-deep); border-color: var(--gm-deep); }
.thc-gm__btn--ghost { background: transparent; color: var(--gm-deep); border-color: var(--gm-stroke); }
.thc-gm__btn--ghost:hover { background: var(--gm-muted); color: var(--gm-deep); }
:root[data-theme="dark"] .thc-gm .thc-gm__btn:not(.thc-gm__btn--ghost), :root[data-thc-theme="dark"] .thc-gm .thc-gm__btn:not(.thc-gm__btn--ghost) { color: #15130f; }
.thc-gm__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.thc-gm__chip, .thc-gm__tool { min-height: 44px; padding: .35em .9em; border: 1px solid var(--gm-border); background: var(--gm-canvas); color: var(--gm-text); border-radius: 999px; cursor: pointer; }
.thc-gm .thc-gm__chip:hover, .thc-gm .thc-gm__tool:hover, .thc-gm .thc-gm__chip:focus, .thc-gm .thc-gm__tool:focus { border-color: var(--gm-stroke); background: var(--gm-muted); color: var(--gm-text); }
.thc-gm .thc-gm__choice:hover, .thc-gm .thc-gm__choice:focus, .thc-gm .thc-gm__segbtn:hover, .thc-gm .thc-gm__segbtn:focus { color: var(--gm-text); }
.thc-gm .thc-gm__chip[aria-pressed="true"] { background: var(--gm-deep); border-color: var(--gm-deep); color: var(--gm-raised); font-weight: 600; }
.thc-gm__chip[aria-pressed="true"]::before, .thc-gm__tool[aria-pressed="true"]::before { content: "\2713\00a0"; }
.thc-gm__tool { min-height: 40px; padding: .2em .75em; font-size: .88em; white-space: nowrap; }
.thc-gm .thc-gm__tool[aria-pressed="true"] { background: var(--gm-muted); border-color: var(--gm-deep); color: var(--gm-deep); font-weight: 600; }

/* ---------- THC 2026-10-01: the Fun page ([thc_fun]): featured game, more games, in the works (0.4.0) ---------- */
.thc-gm--hub { container: thc-fun / inline-size; }
.thc-gm__feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem 1.6rem; align-items: center; background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); padding: 1rem; }
.thc-gm__feature-art .thc-gm__art { max-height: none; aspect-ratio: 240 / 140; }
.thc-gm__feature-text { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.thc-gm__feature-title { margin: 0; font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; }
.thc-gm__feature-title a, .thc-gm__card-title a { text-decoration: none; color: var(--gm-text); }
.thc-gm__feature-title a:hover, .thc-gm__card-title a:hover { text-decoration: underline; text-underline-offset: .12em; }
.thc-gm__feature-pitch { margin: 0; font-size: 1.08rem; }
@container thc-fun (min-width: 40rem) {
  .thc-gm__feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: 1.25rem; }
}
/* Play, and this device's best score beside it (filled in by fun.js; one line, so nothing moves when it appears). */
.thc-gm__go { display: flex; flex-wrap: nowrap; align-items: center; gap: .9rem; margin: .35rem 0 0; min-width: 0; }
.thc-gm__go .thc-gm__btn { flex: none; min-width: 7.5rem; }
.thc-gm__mine { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 600; color: var(--gm-deep); }
.thc-gm__mine:empty { display: none; }
.thc-gm__h { margin: 1.8rem 0 .7rem; font-size: 1.35rem; line-height: 1.2; }

.thc-gm__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1rem; }
.thc-gm__card { background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.thc-gm__card--soon { background: var(--gm-canvas); border-style: dashed; }
.thc-gm__card-title { margin: .2rem 0 0; font-size: 1.3rem; line-height: 1.25; }
.thc-gm__card-text { margin: 0; }
.thc-gm__card-meta { margin: 0; font-size: .9rem; color: var(--gm-deep); }
.thc-gm__card-go { margin: .4rem 0 0; }
.thc-gm__card .thc-gm__badge { align-self: flex-start; margin: 0; }

/* In the works: names and one line each, quieter than the playable games (dashed, no button). */
.thc-gm__soonlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: .7rem; }
.thc-gm__soonitem { margin: 0; padding: .75rem .9rem; border: 1px dashed var(--gm-stroke); border-radius: var(--gm-radius); background: var(--gm-canvas); min-width: 0; }
.thc-gm__soontitle { margin: 0; font-weight: 700; color: var(--gm-deep); }
.thc-gm__soontext { margin: .2rem 0 0; font-size: .95rem; }
.thc-gm__art { display: block; width: 100%; height: auto; max-height: 11rem; border-radius: 10px; }
.thc-gm__art-water { fill: var(--gm-water); }
.thc-gm__art-land { fill: var(--gm-land); stroke: var(--gm-coast); stroke-width: 1.5; stroke-linejoin: round; }
.thc-gm__art-line { fill: none; stroke: var(--gm-inner); stroke-width: 1; }
.thc-gm__art-dot { fill: var(--gm-dot); stroke: var(--gm-halo); stroke-width: 1.2; }
.thc-gm__art-q { fill: var(--gm-deep); font-size: 34px; font-weight: 700; font-family: inherit; }

/* ---------- game: settings ---------- */
.thc-gm__settings { display: grid; gap: .45rem; background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); padding: .6rem .75rem; margin: 0 0 .8rem; }
/* Level: always visible, one row. Place and animals: one collapsed disclosure whose summary says the current choice. */
.thc-gm__chips--level { flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.thc-gm__chips--level .thc-gm__chip { flex: 1 1 auto; min-width: 0; padding-inline: .6em; white-space: nowrap; }
.thc-gm__where { border-top: 1px solid var(--gm-border); padding-top: .35rem; }
.thc-gm__wsum { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .15rem; border-radius: 6px; cursor: pointer; list-style: none; }
.thc-gm__wsum::-webkit-details-marker { display: none; }
.thc-gm__wsum::marker { content: ""; }
.thc-gm__wnow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.thc-gm__wchange { flex: none; color: var(--gm-deep); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.thc-gm__wchange::after { content: " \25BE"; text-decoration: none; display: inline-block; margin-left: .2em; }
.thc-gm__where[open] .thc-gm__wchange::after { content: " \25B4"; }
.thc-gm__wbody { display: grid; gap: .55rem; padding: .2rem 0 .3rem; }
.thc-gm__set { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; }
.thc-gm__setlabel { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gm-deep); min-width: 5.2rem; }
.thc-gm__select { min-height: 44px; max-width: 100%; flex: 1 1 14rem; padding: .35em .6em; border: 1px solid var(--gm-stroke); border-radius: 10px; background: var(--gm-canvas); color: var(--gm-text); }
.thc-gm__note { margin: .6rem 0 0; padding: .45rem .7rem; border-left: 4px solid var(--gm-warn); background: var(--gm-canvas); border-radius: 6px; font-size: .92rem; }
.thc-gm__how, .thc-gm__describe { background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); padding: .1rem .9rem; margin: 0 0 .8rem; }
.thc-gm__how { margin-top: .9rem; }
.thc-gm__how > summary, .thc-gm__describe > summary { cursor: pointer; font-weight: 600; color: var(--gm-deep); min-height: 44px; display: flex; align-items: center; }
.thc-gm__how ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.thc-gm__how li { margin: .2rem 0; }
.thc-gm__describe { margin-top: .9rem; }
.thc-gm__describe p { margin: .2rem 0 .5rem; }
.thc-gm__regions { margin: 0 0 .6rem; padding-left: 1.2rem; }
.thc-gm__regions li { margin: .25rem 0; }

/* ---------- game: map ---------- */
.thc-gm__progress { margin: 0 0 .4rem; font-weight: 700; font-size: 1.05rem; }
.thc-gm__map { margin: 0; }
.thc-gm__maptitle { margin: 0 0 .4rem; font-size: clamp(1.15rem, 3vw, 1.4rem); line-height: 1.25; min-height: 1.25em; }
.thc-gm__box { position: relative; width: 100%; max-width: 720px; aspect-ratio: 4 / 3; border: 1px solid var(--gm-coast); border-radius: 10px; overflow: hidden; background: var(--gm-water); }
@supports not (aspect-ratio: 4 / 3) { .thc-gm__box { height: 0; padding-bottom: 75%; } }
.thc-gm__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.thc-gm__maptools { display: flex; flex-wrap: wrap; gap: .4rem; margin: .45rem 0 .15rem; }
.thc-gm__caption { margin: .2rem 0 0; font-size: .92rem; line-height: 1.4; min-height: 1.4em; }
.thc-gm__fb { font-weight: 700; color: var(--gm-warn); }
.thc-gm__legend { color: var(--gm-text); }
.thc-gm__attrib { margin: .7rem 0 0; font-size: .78rem; color: var(--gm-deep); line-height: 1.4; }

/* ---------- game: question ---------- */
.thc-gm__ask { margin-top: .6rem; }
.thc-gm__choices { display: grid; grid-template-columns: 1fr; gap: .5rem; min-height: calc(4 * 56px + 3 * .5rem); }
@media (min-width: 560px) { .thc-gm__choices { grid-template-columns: 1fr 1fr; min-height: calc(2 * 56px + .5rem); } }
.thc-gm .thc-gm__choice { display: flex; align-items: center; justify-content: flex-start; gap: .7rem; width: 100%; min-height: 56px; text-align: left; padding: .5em .8em; border: 1px solid var(--gm-stroke); background: var(--gm-raised); color: var(--gm-text); border-radius: 12px; cursor: pointer; }
.thc-gm__choice:hover { background: var(--gm-muted); border-color: var(--gm-deep); }
.thc-gm__key { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 999px; border: 1px solid var(--gm-stroke); font-weight: 700; font-size: .85rem; color: var(--gm-deep); background: var(--gm-canvas); }
.thc-gm__ctext { display: flex; flex-direction: column; min-width: 0; }
.thc-gm__cname { font-weight: 700; line-height: 1.25; }
.thc-gm__csci { font-style: italic; font-size: .9rem; color: var(--gm-deep); line-height: 1.3; }
.thc-gm__keys { display: none; margin: .5rem 0 0; font-size: .82rem; color: var(--gm-deep); }
/* Keyboard hints: only where a hardware keyboard is likely (a fine pointer that hovers), or once a key was pressed. */
@media (hover: hover) and (pointer: fine) { .thc-gm__keys { display: block; } .thc-gm__nextrow .thc-gm__keys { display: inline; } }
.thc-gm.has-keys .thc-gm__keys { display: block; }
.thc-gm.has-keys .thc-gm__nextrow .thc-gm__keys { display: inline; }

/* ---------- game: result ---------- */
.thc-gm__result { margin-top: .8rem; background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); padding: .8rem .95rem .9rem; }
.thc-gm__verdict { display: flex; align-items: center; gap: .55rem; margin: 0 0 .4rem; font-size: 1.35rem; line-height: 1.2; }
.thc-gm__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.65em; height: 1.65em; border-radius: 999px; font-size: .9em; font-weight: 700; flex: none; }
.thc-gm__verdict.is-right .thc-gm__icon { background: var(--gm-leaf); color: #fff; }
.thc-gm__verdict.is-wrong .thc-gm__icon { background: transparent; color: var(--gm-warn); border: 2px solid var(--gm-warn); }
:root[data-theme="dark"] .thc-gm .thc-gm__verdict.is-right .thc-gm__icon, :root[data-thc-theme="dark"] .thc-gm .thc-gm__verdict.is-right .thc-gm__icon { color: #15130f; }
.thc-gm__picked { margin: 0 0 .6rem; }
.thc-gm__compare { margin: .2rem 0 .8rem; padding: .7rem .75rem; border: 1px solid var(--gm-border); border-radius: 10px; background: var(--gm-canvas); }
.thc-gm__ck { margin: 0 0 .45rem; font-weight: 700; }
.thc-gm__seg { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.thc-gm .thc-gm__segbtn { display: flex; align-items: center; justify-content: flex-start; gap: .55rem; min-height: 56px; padding: .4em .7em; text-align: left; border: 1px solid var(--gm-border); border-radius: 10px; background: var(--gm-raised); color: var(--gm-text); cursor: pointer; min-width: 0; }
.thc-gm__segbtn:hover { border-color: var(--gm-stroke); background: var(--gm-muted); }
.thc-gm .thc-gm__segbtn[aria-pressed="true"] { border: 2px solid var(--gm-deep); background: var(--gm-muted); box-shadow: inset 0 -3px 0 var(--gm-deep); }
.thc-gm .thc-gm__segbtn--pick[aria-pressed="true"] { border-color: var(--gm-pick); box-shadow: inset 0 -3px 0 var(--gm-pick); }
.thc-gm__segtext { display: flex; flex-direction: column; min-width: 0; }
.thc-gm__seglabel { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gm-deep); }
.thc-gm__segbtn[aria-pressed="true"] .thc-gm__seglabel::after { content: " \00b7  on the map"; text-transform: none; letter-spacing: 0; font-weight: 600; }
.thc-gm__segname { font-weight: 600; line-height: 1.25; }
.thc-gm__swatch { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 999px; }
.thc-gm__swatch--answer { background: var(--gm-dot); box-shadow: 0 0 0 2px var(--gm-halo), 0 0 0 3px var(--gm-dot); }
.thc-gm__swatch--pick { background: transparent; border: 4px solid var(--gm-pick); }
.thc-gm__cwhy { margin: .55rem 0 0; font-size: .95rem; }
.thc-gm__species { border-top: 1px solid var(--gm-border); padding-top: .6rem; }
.thc-gm__species p { margin: .1rem 0; }
.thc-gm__sname { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.thc-gm__ssci { font-style: italic; color: var(--gm-deep); }
.thc-gm__k { font-weight: 600; }
.thc-gm__sline { margin-top: .35rem !important; }
.thc-gm__badges { margin-top: .45rem !important; font-size: .92rem; }
.thc-gm__badge { display: inline-block; padding: .12em .65em; border: 1.5px solid var(--gm-warn); border-radius: 999px; color: var(--gm-warn); font-weight: 700; font-size: .85rem; background: var(--gm-canvas); }
.thc-gm__links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .7rem 0 .2rem; }
.thc-gm__links a { display: inline-block; padding: .55rem 0; line-height: 1.35; font-weight: 600; }
.thc-gm__links a::after { content: "\2197"; font-size: .85em; margin-left: .25em; }
.thc-gm__nextrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .5rem 0 0; }
.thc-gm__nextrow .thc-gm__keys { margin: 0; }
.thc-gm__next { min-width: 9rem; }

/* ---------- game: end ---------- */
.thc-gm__end { background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); padding: 1rem 1.1rem; }
.thc-gm__endh { margin: 0 0 .3rem; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; }
.thc-gm__kind { margin: 0 0 .4rem; font-size: 1.1rem; }
.thc-gm__endrow { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .3rem; }
.thc-gm__sharestatus { min-height: 1.4em; margin: .2rem 0; font-size: .92rem; }
.thc-gm__courses { margin: .6rem 0 0; font-size: .92rem; color: var(--gm-deep); }
.thc-gm__error { margin: .8rem 0; padding: .6rem .8rem; border-left: 4px solid var(--gm-warn); background: var(--gm-raised); border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

@media (max-width: 560px) {
  .thc-gm--range .thc-gm__lead { font-size: 1.05rem; margin-bottom: .6rem; }
  .thc-gm__wsum { gap: .45rem; font-size: .92rem; }
  .thc-gm__wchange::after { margin-left: .1em; }
  .thc-gm__settings { padding: .5rem .6rem; }
  .thc-gm__setlabel { min-width: 0; width: 100%; }
  /* The level chips explain themselves; their label stays for screen readers only, so the row fits 360 px. */
  .thc-gm__set--level .thc-gm__setlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .thc-gm__result { padding: .7rem .7rem .8rem; }
  .thc-gm__seg { grid-template-columns: 1fr; }
  .thc-gm__select { flex-basis: 100%; font-size: .94rem; }
  .thc-gm__caption { min-height: 2.8em; } /* two lines reserved, so the choices do not move when the caption arrives */
}
/* No animated transitions when the device or THC Core's Display panel asks for reduced motion (the theme's own
   button and link transitions included). The game itself never animates. */
@media (prefers-reduced-motion: reduce) { .thc-gm, .thc-gm * { transition: none !important; animation: none !important; } }
:root[data-thc-motion="reduce"] .thc-gm, :root[data-thc-motion="reduce"] .thc-gm * { transition: none !important; animation: none !important; }
@media print {
  .thc-gm__settings, .thc-gm__maptools, .thc-gm__choices, .thc-gm__nextrow { display: none !important; }
}

/* ======================================================================================================
   0.2.0: "Decode the Description" ([thc_game_words]). Drawings (words-draw.js) use --gw-* tokens.
   ====================================================================================================== */
.thc-gm {
  --gw-ground: #ecdcbc;
  --gw-belly: #fcf7ea;
  --gw-mark: #3b3127;
  --gw-mid: #a58b67;
  --gw-line: #332d25;
  --gw-eye: #2b241c;
  --gw-hl: #0d6b88;
  --gw-hlbg: rgba(13, 107, 136, .16);
  --gw-skin: #f6eedd;
}
:root[data-theme="dark"] .thc-gm, :root[data-thc-theme="dark"] .thc-gm {
  --gw-ground: #c2ae8b;
  --gw-belly: #e6dccb;
  --gw-mark: #211b14;
  --gw-mid: #806b4f;
  --gw-line: #17130f;
  --gw-eye: #17130f;
  --gw-hl: #7fd3ef;
  --gw-hlbg: rgba(127, 211, 239, .22);
  --gw-skin: #d9ccb4;
}
:root[data-thc-contrast="high"] .thc-gm { --gw-mid: #8a7050; --gw-hl: #00546e; }
.thc-gw__svg { display: block; width: 100%; height: auto; overflow: visible; }
.thc-gw__svg path, .thc-gw__svg circle, .thc-gw__svg ellipse { stroke-linejoin: round; stroke-linecap: round; }
.thc-gw__ground { fill: var(--gw-ground); stroke: none; }
.thc-gw__skin { fill: var(--gw-skin); stroke: var(--gw-line); stroke-width: .9; }
.thc-gw__belly { fill: var(--gw-belly); stroke: none; }
.thc-gw__plate { fill: none; stroke: var(--gw-line); stroke-width: .55; opacity: .55; }
.thc-gw__vent { fill: none; stroke: var(--gw-line); stroke-width: 1.4; }
.thc-gw__edge { fill: none; stroke: var(--gw-line); stroke-width: .8; }
.thc-gw__outline { fill: none; stroke: var(--gw-line); stroke-width: 1.5; }
.thc-gw__mk { fill: var(--gw-mark); stroke: none; }
.thc-gw__mid { fill: var(--gw-mid); stroke: none; }
.thc-gw__bord { stroke: var(--gw-mark); stroke-width: 2.2; }
.thc-gw__pale { fill: var(--gw-ground); stroke: none; }
.thc-gw__lip { fill: var(--gw-skin); stroke: none; }
.thc-gw__seam { fill: none; stroke: var(--gw-line); stroke-width: .7; }
.thc-gw__mouth { fill: none; stroke: var(--gw-line); stroke-width: 1.2; }
.thc-gw__eye { fill: var(--gw-eye); stroke: none; }
.thc-gw__scale { fill: var(--gw-ground); stroke: var(--gw-line); stroke-width: .8; }
.thc-gw__keel { fill: none; stroke: var(--gw-line); stroke-width: 1.7; }
.thc-gw__keel--weak { stroke-width: 1.1; opacity: .7; }
.thc-gw__frame { fill: none; stroke: var(--gw-line); stroke-width: 1.3; }
.thc-gw__leader { fill: none; stroke: var(--gm-text); stroke-width: .9; stroke-dasharray: 2 2; }
.thc-gw__dot { fill: var(--gm-text); }
.thc-gw__hl { fill: var(--gw-hlbg); stroke: var(--gw-hl); stroke-width: 2.4; stroke-dasharray: 5 3; }
.thc-gw__hatchbg { fill: none; }
.thc-gw__hatchln { stroke: var(--gw-hl); stroke-width: 1.6; }
.thc-gw__hlg { pointer-events: none; }
.thc-gw__eye--ring { stroke: var(--gw-ground); stroke-width: .9; }
.thc-gw__core { fill: var(--gw-skin); stroke: var(--gw-line); stroke-width: .6; }
.thc-gw__cut { fill: none; stroke: var(--gm-text); stroke-width: 1; stroke-dasharray: 2.5 2; }
.thc-gw__plate2 { fill: var(--gw-skin); stroke: var(--gw-line); stroke-width: 1.1; }
.thc-gw__open { fill: var(--gw-mid); stroke: none; opacity: .5; }
.thc-gw__seam2 { fill: none; stroke: var(--gw-line); stroke-width: 1.4; }
.thc-gw__hlfill { stroke: none; }
.thc-gw__hl--edge { fill: none; }
.thc-gw__hl--line { fill: none; stroke-width: 4; }
.thc-gw__rowline { fill: none; stroke: var(--gw-line); stroke-width: .5; opacity: .35; stroke-dasharray: 1 3; }
.thc-gw__tag { fill: var(--gm-text); font-size: 9px; font-weight: 700; font-family: inherit; }
.thc-gw__granule { fill: var(--gw-skin); stroke: var(--gw-line); stroke-width: .7; }
.thc-gw__gland { fill: var(--gw-mid); stroke: var(--gw-line); stroke-width: 1.1; }
.thc-gw__ridge { fill: var(--gw-belly); stroke: var(--gw-line); stroke-width: 1.1; }
.thc-gw__tymp { fill: var(--gw-belly); stroke: var(--gw-line); stroke-width: 1.4; }
.thc-gw__wart { fill: var(--gw-mid); stroke: var(--gw-line); stroke-width: .8; }
.thc-gw__lid { fill: none; stroke: var(--gw-line); stroke-width: 1.2; }
.thc-gw__web { fill: var(--gw-belly); stroke: var(--gw-line); stroke-width: .9; }
.thc-gw__toe { fill: none; stroke: var(--gw-line); stroke-width: 2.6; }
.thc-gw__pad { fill: var(--gw-skin); stroke: var(--gw-line); stroke-width: 1.2; }
.thc-gw__groove { fill: none; stroke: var(--gw-line); stroke-width: 1.3; }
.thc-gw__vent2 { fill: none; stroke: var(--gw-eye); stroke-width: 3; }
.thc-gw__keel--big { stroke-width: 2.6; }
.thc-gw__keel--weak.thc-gw__keel--big { stroke-width: 1.7; }
.thc-gw__outline--thin { stroke-width: 1; }
.thc-gw__halo { fill: none; stroke: var(--gm-raised, #fcf8ef); stroke-width: 5.5; opacity: .9; }
.thc-gw__callout { fill: none; stroke: var(--gw-hl); stroke-width: 2.6; stroke-dasharray: 5 3; }

/* ---------- Decode the Description: frame ---------- */
.thc-gm__madeup { margin: 0 0 .7rem; padding: .45rem .7rem; border-left: 4px solid var(--gm-sage); background: var(--gm-raised); border-radius: 6px; font-size: .9rem; }
.thc-gm__q { margin: 0; }
.thc-gm__qtitle { margin: 0 0 .4rem; font-size: clamp(1.1rem, 3vw, 1.35rem); line-height: 1.25; }
.thc-gm__qline { margin: 0 0 .3rem; font-weight: 600; }
.thc-gm__stage { margin: 0 0 .1rem; }
.thc-gm__fig { display: block; min-width: 0; }
.thc-gm__fig--stage .thc-gw__svg { max-height: 9.5rem; width: auto; max-width: 100%; }
.thc-gm__fig--animal .thc-gw__svg { max-height: 14rem; }
.thc-gm__choices--pics .thc-gw__svg { max-height: 9rem; margin: 0 auto; }
.thc-gm__cfig .thc-gw__svg { max-height: 12rem; margin: 0 auto; }
.thc-gm__fig--stage { max-width: 30rem; margin: 0 auto; display: flex; justify-content: center; padding: .35rem; background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: 10px; }
.thc-gm__desc { margin: 0 0 .2rem; padding: .55rem .8rem; background: var(--gm-raised); border: 1px solid var(--gm-border); border-left: 4px solid var(--gm-deep); border-radius: 8px; font-size: 1.02rem; line-height: 1.45; }
.thc-gm__desc p { margin: 0; }
.thc-gm__choices--words { min-height: 0; }
.thc-gm__choices--pics { grid-template-columns: 1fr 1fr; gap: .45rem; }
.thc-gm__choices--text { grid-template-columns: 1fr 1fr; gap: .45rem; }
.thc-gm--words[data-round="D"] .thc-gm__choices--text { grid-template-columns: 1fr; }
@media (min-width: 640px) { .thc-gm--words[data-round="D"] .thc-gm__choices--text { grid-template-columns: 1fr 1fr; } }
.thc-gm .thc-gm__choices--text .thc-gm__choice { min-height: 52px; padding: .4em .6em; gap: .5rem; }
.thc-gm .thc-gm__choices--pics .thc-gm__choice { position: relative; display: block; padding: .3rem; min-height: 0; }
.thc-gm__choices--pics .thc-gm__key { position: absolute; bottom: .25rem; left: .25rem; z-index: 1; width: 1.6em; height: 1.6em; }
.thc-gm__choices--pics .thc-gm__fig { width: 100%; }
.thc-gm .thc-gm__choice:disabled { cursor: default; opacity: 1; }
.thc-gm .thc-gm__choice.is-answer { border: 2px solid var(--gm-leaf); box-shadow: inset 0 0 0 1px var(--gm-leaf); }
.thc-gm .thc-gm__choice.is-picked { border: 2px dashed var(--gm-warn); }
.thc-gm__ctag { display: inline-block; margin-left: .4rem; padding: .05em .5em; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--gm-canvas); border: 1px solid var(--gm-stroke); color: var(--gm-deep); white-space: nowrap; }
.thc-gm__choice .thc-gm__ctag { position: absolute; top: -.7em; right: .4rem; margin: 0; }
/* Text choices: the tag gets its own line at the top of the button, so it never covers the words (round 2). */
.thc-gm .thc-gm__choices--text .thc-gm__choice.is-answer, .thc-gm .thc-gm__choices--text .thc-gm__choice.is-picked { padding-top: 1.85rem; }
.thc-gm__choices--text .thc-gm__choice .thc-gm__ctag { top: .3rem; right: .4rem; line-height: 1.3; }
.thc-gm .thc-gm__choices--words .thc-gm__choice { position: relative; }
.thc-gm__choices--words { row-gap: .75rem; }
.thc-gm__choice.is-answer .thc-gm__ctag { border-color: var(--gm-leaf); }
.thc-gm__choice.is-picked .thc-gm__ctag { border-color: var(--gm-warn); color: var(--gm-warn); }
.thc-gm__choices--text .thc-gm__ctext { line-height: 1.35; }
.thc-gm__dlist { margin: 0 0 .7rem; padding-left: 1.2rem; }
.thc-gm__dlist li { margin: .25rem 0; }
/* ---------- reveal ---------- */
.thc-gm__whyh { margin: .2rem 0 .4rem; font-weight: 600; }
.thc-gm__whyk { margin: .6rem 0 .25rem; font-weight: 700; font-size: .95rem; }
.thc-gm__why, .thc-gm__tlist { margin: 0 0 .4rem; padding-left: 1.2rem; }
.thc-gm__why li, .thc-gm__tlist li { margin: .3rem 0; }
.thc-gm__tsrc { font-size: .88rem; }
.thc-gm__tsee { font-size: .88rem; }
.thc-gm__hedge { margin: .5rem 0; padding: .4rem .65rem; border-left: 3px solid var(--gm-warn); background: var(--gm-canvas); border-radius: 6px; font-size: .92rem; }
.thc-gm__roundwords { border-top: 1px solid var(--gm-border); margin-top: .6rem; padding-top: .2rem; }
.thc-gm__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.thc-gm__cfig { margin: 0; padding: .3rem; background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: 8px; min-width: 0; }
.thc-gm__cfig--pick { border: 2px dashed var(--gm-warn); }
.thc-gm__cfig--answer { border: 2px solid var(--gm-leaf); }
.thc-gm__cfig figcaption { font-size: .85rem; font-weight: 600; margin-top: .2rem; }
/* ---------- glossary ---------- */
.thc-gm__words { background: var(--gm-raised); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); padding: .1rem .9rem; margin: 0 0 .8rem; }
.thc-gm__words > summary { cursor: pointer; font-weight: 600; color: var(--gm-deep); min-height: 44px; display: flex; align-items: center; }
.thc-gm__wfam { margin: .9rem 0 .3rem; font-size: 1.05rem; color: var(--gm-deep); }
.thc-gm__wlist { margin: 0 0 .6rem; }
.thc-gm__wterm { padding: .45rem 0; border-top: 1px solid var(--gm-border); }
.thc-gm__wterm dt { font-weight: 700; }
.thc-gm__wgloss { font-weight: 400; color: var(--gm-deep); }
.thc-gm__wterm dd { margin: .15rem 0 0; }
.thc-gm__wterm dd p { margin: .15rem 0; }
.thc-gm__whedge, .thc-gm__walso, .thc-gm__wsrc, .thc-gm__wsee { font-size: .88rem; }
.thc-gm__whedge { color: var(--gm-warn); }
.thc-gm__art-snake { fill: var(--gm-land); stroke: var(--gm-coast); stroke-width: 1.5; stroke-linejoin: round; }
.thc-gm__art-band { fill: var(--gm-deep); }
.thc-gm__art-eye { fill: var(--gm-label); }
.thc-gm__art-word { fill: var(--gm-deep); font-size: 15px; font-style: italic; font-family: inherit; }
@media (max-width: 560px) {
  .thc-gm--words .thc-gm__lead { font-size: 1.02rem; margin-bottom: .4rem; line-height: 1.4; }
  .thc-gm__madeup { font-size: .8rem; line-height: 1.4; padding: .3rem .5rem; margin-bottom: .55rem; }
  .thc-gm--words .thc-gm__qtitle { font-size: 1.08rem; margin-bottom: .3rem; }
  .thc-gm--words .thc-gm__progress { font-size: .95rem; margin-bottom: .2rem; }
  .thc-gm__desc { font-size: .95rem; padding: .4rem .6rem; line-height: 1.4; }
  .thc-gm .thc-gm__choices--text .thc-gm__choice { font-size: .95rem; min-height: 48px; }
  .thc-gm--words .thc-gm__settings { margin-bottom: .55rem; gap: .3rem; }
  .thc-gm--words .thc-gm__where { padding-top: .15rem; }
  .thc-gm__fig--stage .thc-gw__svg { max-height: 8.2rem; }
  .thc-gm__fig--stage { padding: .2rem; }
  .thc-gm__choices--words { row-gap: .5rem; gap: .4rem; }
  .thc-gm .thc-gm__choices--pics .thc-gm__choice { padding: .2rem; }
  .thc-gm__choices--pics .thc-gw__svg { max-height: 7.6rem; } /* tall drawings (shells, the vent) never push the second row down */
}
@media (min-width: 700px) { .thc-gm__choices--pics { grid-template-columns: repeat(4, 1fr); } .thc-gm__choices--pics .thc-gw__svg { max-height: 10rem; } }