/* The home card "Map the city" (owner-approved design A with C's stamps, 2026-10-30). Markup and logic: lightup-card.js. Load after game-ui.css and run.css.
   A game surface, so rounded (DESIGN.md "Game surfaces"); colours come from the game tokens in both themes; gold means points, orange is not used.
   The card lays itself out from its own width (container query), not the window: one column in a phone-wide slot, map beside the copy from 560 px up.
   Class names: lc-* (and tk-lc on the section); nothing an ad blocker hides. */
.tk-lc{container:lc / inline-size;--lc-bg:color-mix(in srgb,var(--h-brand) 11%,var(--tk-g-panel));--lc-line:color-mix(in srgb,var(--h-brand) 22%,transparent);--lc-line-2:color-mix(in srgb,var(--h-brand) 36%,transparent);
  display:block;box-sizing:border-box;max-width:920px;margin:14px 0 6px;overflow:hidden;border-radius:28px;background:var(--tk-g-panel);color:var(--h-text);box-shadow:0 0 0 1px var(--tk-g-rule),0 18px 36px -24px var(--tk-g-shadow)}
.tk-lc[hidden]{display:none}
.lc-in{display:flex;flex-direction:column}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tk-lc{--lc-bg:color-mix(in srgb,var(--tk-g-panel) 72%,#000);--lc-line:rgba(160,190,220,.1);--lc-line-2:rgba(160,190,220,.2)}}
:root[data-theme="dark"] .tk-lc{--lc-bg:color-mix(in srgb,var(--tk-g-panel) 72%,#000);--lc-line:rgba(160,190,220,.1);--lc-line-2:rgba(160,190,220,.2)}
body.is-searching .tk-lc{display:none}

/* ---- the mini-map ---- */
.lc-map{position:relative;flex:none;height:176px;overflow:hidden;background:var(--lc-bg)}
.lc-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.lc-bg{fill:var(--lc-bg)}
.lc-ring{fill:none;stroke:var(--lc-line);stroke-width:1}
.lc-ring.is-5{stroke:var(--lc-line-2)}
.lc-lit{fill:var(--tk-gold);opacity:.9}
.lc-dark{fill:var(--lc-bg);stroke:var(--h-brand);stroke-width:2}
.lc-hold{fill:none;stroke:var(--h-muted);stroke-width:1.5;stroke-dasharray:2 3.2}
.lc-darkdot{fill:var(--h-muted)}
.lc-path{fill:none;stroke:var(--tk-gold);stroke-width:4.2;stroke-linecap:round;stroke-dasharray:.1 10.5;animation:lc-march 1.4s linear infinite}
.lc-tgt-c{fill:var(--tk-gold);stroke:var(--lc-bg);stroke-width:3}
.lc-tgt-ic{fill:none;stroke:#16212B;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.lc-tgt-pulse{fill:none;stroke:var(--tk-gold);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:lc-ping 2.4s var(--tk-g-ease) infinite}
.lc-me-halo{fill:color-mix(in srgb,var(--h-brand) 22%,transparent)}
.lc-me-c{fill:#fff;stroke:var(--h-brand);stroke-width:4.5}
.lc-chip{position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);min-height:36px;padding:0 14px 0 12px;font-size:14px;gap:6px}
.lc-chip b{font-variant-numeric:tabular-nums}
.lc-chip-pos{gap:8px}
.lc-chip-pos span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-chip .h-ic{width:18px;height:18px;color:var(--h-brand)}
@keyframes lc-march{to{stroke-dashoffset:-10.6}}
@keyframes lc-ping{0%{transform:scale(.9);opacity:.7}100%{transform:scale(2.1);opacity:0}}

/* ---- copy, points and the key ---- */
.lc-body{display:flex;flex-direction:column;gap:16px;min-width:0;padding:16px 18px 18px}
.lc-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.lc-k{display:block;font:700 13px/1 var(--h-font);letter-spacing:.09em;text-transform:uppercase;color:var(--tk-gold-text)}
.lc-h{margin:0;font:700 clamp(22px,6.4vw,25px)/1.2 var(--h-font);letter-spacing:-.01em;text-wrap:balance}
.lc-n{font-weight:800;color:var(--tk-gold-text);font-variant-numeric:tabular-nums}
.lc-p{margin:0;font-size:15px;line-height:1.4;color:var(--h-muted)}
.lc-p b{font-weight:600;color:var(--h-text)}
.lc-act{display:flex;align-items:flex-end;gap:14px;min-width:0}
.lc-go{flex:1;min-width:0;justify-content:center;gap:10px}
.lc-go .h-ic{width:24px;height:24px}
.lc-pts{flex:none;display:flex;flex-direction:column;gap:5px;min-width:0;padding-bottom:var(--lc-key,5px)}
.lc-ptsl{font:500 13.5px/1.1 var(--h-font);color:var(--h-muted)}
.lc-ptsv{display:flex;align-items:center;gap:8px}
.lc-ptsv .tk-coin{width:24px;height:24px}
.lc-ptsv .tk-coin i{left:7px;top:4px;width:3px;height:11px}
.lc-ptsv .tk-coin::after{inset:4px}
.lc-ptsv b{font:800 24px/1 var(--h-font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---- stamps of shops you mapped first (hidden when there are none) ---- */
.lc-stampbox{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--tk-g-rule)}
.lc-stamph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:600 13px/1.2 var(--h-font);letter-spacing:.05em;text-transform:uppercase;color:var(--h-muted)}
.lc-stampn{letter-spacing:0;text-transform:none;font-weight:500;font-size:14px}
.lc-stamps{flex-wrap:nowrap;gap:10px;overflow:hidden;padding:4px 2px}
.lc-stamp{--tk-stamp-bg:var(--tk-g-panel);text-decoration:none}
a.lc-stamp{cursor:pointer}
a.lc-stamp:hover{transform:rotate(-4deg) scale(1.06)}
a.lc-stamp:focus-visible{outline:2px solid var(--h-brand);outline-offset:3px}
.lc-stamp{transition:transform .15s var(--tk-g-ease)}
.lc-stamp.is-new{transition:none}
.lc-more{flex:none;margin-left:2px;font:700 15px/1 var(--h-font);color:var(--h-muted);font-variant-numeric:tabular-nums}
@container lc (max-width:379px){.lc-stamps{gap:8px}.lc-body{padding-inline:16px}}

/* ---- wide slot: the map beside the copy, designed for its own width ---- */
@container lc (min-width:560px){
  .lc-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
  .lc-map{height:auto;min-height:300px}
  .lc-chip{left:16px;top:16px}
  .lc-body{justify-content:center;gap:20px;padding:26px 28px 24px}
  .lc-h{font-size:clamp(26px,3.4cqw,32px)}
  .lc-p{font-size:16px}
  .lc-stampbox{margin-top:auto}
}

@media (prefers-reduced-motion:reduce){.lc-path,.lc-tgt-pulse{animation:none}.lc-tgt-pulse{opacity:0}.lc-stamp{transition:none}a.lc-stamp:hover{transform:rotate(-8deg)}}