/* "Shop mapped": the full-screen moment after one of your photos maps a shop (public/mapped-moment.js). Game surfaces: rounded shapes are owner-approved
   (DESIGN.md "Game surfaces"). Gold means points; orange is never used. Both themes come from the --salt-* / --h-* / --tk-gold* tokens; no gradients.
   Loaded after game-ui.css (uses .tk-stamp). Class names carry the tk-mm- prefix and nothing an ad blocker's generic rules hide. */
.tk-mm{--mm-bg:var(--salt-bg);--mm-card:var(--salt-paper);--mm-rule:var(--salt-rule);
  position:fixed;inset:0;z-index:3000;overflow-y:auto;overscroll-behavior:contain;background:var(--mm-bg);color:var(--h-text);font-family:var(--h-font);
  padding:max(14px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));-webkit-overflow-scrolling:touch}
html.tk-mm-open{overflow:hidden}
.tk-mm-in{box-sizing:border-box;min-height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}

.tk-mm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.tk-mm-tag{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;border-radius:20px;background:var(--mm-card);box-shadow:0 0 0 1px var(--mm-rule);color:var(--h-success,var(--h-brand));font:600 15px/1 var(--h-font)}
.tk-mm-tag .h-ic{width:16px;height:16px;flex:none;stroke-width:3}
.h-button.tk-btn.is-quiet.is-icon.tk-mm-x{--bh:44px;flex:none;border-radius:50%}

.tk-mm-l,.tk-mm-r{display:flex;flex-direction:column;gap:14px;min-width:0}
.tk-mm-head{text-align:center}
.tk-mm-name{margin:0;font:700 clamp(26px,7.4vw,34px)/1.1 var(--h-font);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.tk-mm-sub{margin:6px 0 0;font:500 16px/1.3 var(--h-font);color:var(--h-muted)}
.tk-mm-count{display:flex;justify-content:center;padding:2px 0 0}
.tk-mm-big{display:block;font:700 clamp(84px,27vw,132px)/.95 var(--h-font);letter-spacing:-.045em;color:var(--tk-gold-text);font-variant-numeric:tabular-nums;white-space:nowrap}

.tk-mm-rcpt{list-style:none;margin:0;padding:0;border-radius:var(--tk-g-r-card,18px);background:var(--mm-card);box-shadow:0 0 0 1px var(--mm-rule);overflow:hidden}
.tk-mm-rcpt li{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;padding:6px 18px;font:500 17px/1.25 var(--h-font)}
.tk-mm-rcpt li+li{border-top:2px dashed var(--mm-rule)}
.tk-mm-rcpt li>span{min-width:0;overflow-wrap:anywhere}
.tk-mm-rcpt li>b,.tk-mm-mono{flex:none;font:700 21px/1 var(--h-font);font-variant-numeric:tabular-nums;color:var(--tk-gold-text)}
.tk-mm-rcpt .tk-mm-run{color:var(--h-muted);min-height:52px}
.tk-mm-rcpt .tk-mm-run>b{font-size:24px}

.tk-mm-card{display:flex;align-items:center;gap:16px;box-sizing:border-box;padding:16px 18px;border-radius:var(--tk-g-r-card,18px);background:var(--mm-card);box-shadow:0 0 0 1px var(--mm-rule)}
.tk-mm-stampcard{--tk-stamp-bg:var(--mm-card);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:12px}
.tk-mm-stampcard>.tk-mm-stamps{grid-column:1/-1}
.tk-mm-bigstamp{width:84px;height:84px;margin:0 4px 8px 4px}
.tk-mm-bigstamp .h-ic{width:36px;height:36px}
.tk-mm-sinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tk-mm-k{font:700 13px/1.2 var(--h-font);letter-spacing:.08em;text-transform:uppercase;color:var(--h-muted);overflow-wrap:anywhere}
.tk-mm-sc{font:700 20px/1.2 var(--h-font)}
.tk-mm-stamps .tk-stamps{flex-wrap:nowrap;justify-content:space-between;gap:6px}
.tk-mm-stamps .tk-stamp{--tk-stamp-bg:var(--mm-card)}
.tk-mm-thumbs{display:flex;gap:8px;flex:none}
.tk-mm-thumbs img{display:block;width:64px;height:72px;object-fit:cover;border-radius:10px;background:var(--mm-bg);box-shadow:0 0 0 1px var(--mm-rule)}
.tk-mm-ptxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.tk-mm-ptxt b{font:600 17px/1.2 var(--h-font)}
.tk-mm-ptxt span{font:500 15px/1.3 var(--h-muted-font,var(--h-font));color:var(--h-muted)}

.tk-mm-acts{position:sticky;bottom:0;display:flex;flex-direction:column;gap:6px;margin-top:auto;margin-inline:-4px;padding:12px 4px max(14px,env(safe-area-inset-bottom,0px));background:var(--mm-bg)}
.tk-mm-acts .h-button.tk-btn.is-key{margin-bottom:var(--key-d,5px)}
.tk-mm-acts .h-button.tk-btn{gap:10px}
.tk-mm-done{--bh:48px}
.tk-mm-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* entrance: the receipt lines print one after another, the stamp lands last (the script adds .is-anim and .is-new; reduced motion shows everything at once) */
.tk-mm.is-anim .tk-mm-tag,.tk-mm.is-anim .tk-mm-head,.tk-mm.is-anim .tk-mm-rcpt li,.tk-mm.is-anim .tk-mm-card:not(.tk-mm-stampcard),.tk-mm.is-anim .tk-mm-acts{animation:tk-mm-in .42s var(--tk-g-ease,ease) both}
.tk-mm.is-anim .tk-mm-head{animation-delay:.05s}
.tk-mm.is-anim .tk-mm-rcpt li{animation-delay:calc(.9s + var(--i,0) * .14s)}
.tk-mm.is-anim .tk-mm-rcpt .tk-mm-run{animation-delay:1.5s}
.tk-mm.is-anim .tk-mm-stampcard .tk-mm-sinfo,.tk-mm.is-anim .tk-mm-stampcard{animation:tk-mm-in .42s var(--tk-g-ease,ease) .8s both}
.tk-mm.is-anim .tk-mm-card:not(.tk-mm-stampcard){animation-delay:1.1s}
.tk-mm.is-anim .tk-mm-acts{animation-delay:1.3s}
.tk-mm.is-anim .tk-mm-bigstamp:not(.is-new){opacity:0}
@keyframes tk-mm-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tk-mm *{animation:none!important}.tk-mm.is-anim .tk-mm-bigstamp:not(.is-new){opacity:1}}

/* wide: designed as two columns, the receipt and the number on the left, the stamp, photos and the buttons on the right */
@media (min-width:900px){
  .tk-mm{padding-top:max(28px,env(safe-area-inset-top,0px))}
  .tk-mm-in{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-rows:auto 1fr;column-gap:40px;row-gap:8px;align-content:center}
  .tk-mm-top{grid-column:1/-1}
  .tk-mm-l{grid-column:1;grid-row:2;justify-content:center}
  .tk-mm-r{grid-column:2;grid-row:2;justify-content:center}
  .tk-mm-head{text-align:left}
  .tk-mm-name{font-size:clamp(34px,3.4vw,46px)}
  .tk-mm-sub{font-size:18px}
  .tk-mm-count{justify-content:flex-start}
  .tk-mm-big{font-size:clamp(130px,13vw,184px)}
  .tk-mm-acts{position:static;margin:6px 0 0;padding:0}
}
@media (max-width:380px){.tk-mm-bigstamp{width:76px;height:76px}.tk-mm-card{padding:14px}.tk-mm-thumbs img{width:54px;height:62px}.tk-mm-rcpt li{padding:8px 14px;font-size:16px}}