/* Paint your name tag (tagpick.js): the window beside your miner, its preview over the lake, the swatches, and your
   own name over your miner drawn in its colours. The tags themselves are canvases, shown pixel for pixel. */
.tp-cv { display: block; image-rendering: pixelated; }

/* your name over your miner: no plaque any more, just the letters; press it to paint it */
.hero-tag.tp-tag { padding: 0; background: none; box-shadow: none; clip-path: none; text-shadow: none; line-height: 0; }
.hero-tag.tp-press { pointer-events: auto; cursor: pointer; }
.hero-tag.tp-press::after { content: ""; position: absolute; inset: -12px -8px; }      /* a fingertip-sized target: 44px+ tall */
.hero-tag.tp-press:focus-visible { outline: var(--u, 2px) solid var(--gold); outline-offset: 3px; }

/* ---------- the window: beside your miner, standing on the ground line ---------- */
.tp { position: absolute; z-index: 5; translate: var(--dx, 64px) -100%; pointer-events: auto; display: grid; gap: 6px; width: min(calc(372px * var(--ui, 1)), calc(100vw - 24px));
  max-height: calc(100vh - 80px); overflow: auto; padding: 10px 12px 12px;
  background: var(--wood-tex) 0 0 / 128px, var(--win); color: var(--win-ink); font: 600 0.95rem/1.3 var(--f-text); clip-path: var(--notch);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--win-hi); }   /* the camp window's wood (the Lantern UI) */
.tp.left { translate: calc(-100% - var(--dx, 64px)) -100%; }
.tp[hidden] { display: none; }
#app:not([data-screen="surface"]) .tp { display: none; }
.tp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp-h { margin: 0; font: 700 1.05rem/1.2 var(--f-label); color: var(--gold); text-shadow: var(--ol1); }
.tp .tp-done { min-height: 36px; padding: 5px 14px; }
/* the preview: the lake behind your tag, by day or by night */
.tp-view { position: relative; display: grid; align-items: center; min-height: 100px; padding: 34px 12px 8px; overflow: hidden; clip-path: var(--notch);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge); }
.tp-view::before { content: ""; position: absolute; inset: 0; background: url("art/world/lake/back-summer.webp") center 64% / cover no-repeat, #7ec4f0; image-rendering: pixelated; }
.tp-view.night::before { filter: brightness(0.32) saturate(0.7) hue-rotate(12deg); }
.tp-tags { position: relative; display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; flex-wrap: wrap; }
.tp-fig { margin: 0; display: grid; justify-items: center; gap: 4px; }
.tp-fig figcaption { font: 700 0.75rem/1 var(--f-label); color: #fff; text-shadow: var(--ol1); }
.tp-sky { position: absolute; right: 6px; top: 5px; display: flex; gap: 4px; }
.tp-sky-b { min-height: 26px; padding: 3px 9px; border: 0; cursor: pointer; clip-path: var(--notch); background: rgba(40, 14, 5, 0.78); color: var(--ink-dim); font: 700 0.78rem/1 var(--f-label); }
.tp-sky-b.on { background: var(--amber); color: var(--win-ink); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge); }
.tp-sky-b:focus-visible { outline: var(--u) solid var(--gold); outline-offset: 1px; }
.tp-l { margin: 4px 0 0; color: var(--ink-dim); }
.tp-l b { font: 700 0.95rem/1.2 var(--f-label); color: var(--win-ink); margin-right: 4px; }

/* ---------- swatches: nine to a row; gold ring = yours; a light slash = wouldn't read ---------- */
.tp-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.tp-sw { position: relative; aspect-ratio: 1; min-width: 0; min-height: 30px; padding: 0; border: 0; cursor: pointer; background: var(--c, #222); clip-path: var(--notch);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) rgba(255, 241, 214, 0.2); }
.tp-sw:hover, .tp-sw:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--u) var(--gold), inset 0 0 0 calc(var(--u) * 2) var(--win-edge); }
.tp-sw.on { box-shadow: inset 0 0 0 var(--u) var(--gold), inset 0 0 0 calc(var(--u) * 2) var(--win-edge); }
.tp-sw.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 1rem/1 var(--f-label); color: #fff; text-shadow: var(--ol1); }
.tp-sw.rb { background: linear-gradient(135deg, #ff6a6a, #ffc46a, #fff36a, #7cff8a, #6ad8ff, #8a8cff, #e07aff); }
.tp-sw.dawn { background: linear-gradient(135deg, #ffb3c8, #ffc9a3, #ffe08a, #d9b8ff); }
.tp-sw.no { cursor: not-allowed; opacity: 0.55; }
.tp-sw.no::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 43%, #f2f4ff 43%, #f2f4ff 57%, transparent 57%); }
.tp-sw.locked { display: grid; place-items: center; background: var(--well, #5f321d); color: var(--gold); font: 700 1rem/1 var(--f-label); text-shadow: var(--ol1); cursor: help; }
.tp-sw.shake { animation: tp-shake .25s steps(4) 1; }
@keyframes tp-shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
html[data-motion="reduce"] .tp-sw.shake { animation: none; }
.tp-msg { margin: 6px 0 0; min-height: 2.6em; font: 400 0.9rem/1.35 var(--f-text); color: var(--ink-dim); }
.tp-riddle { margin: 0; font: 400 0.9rem/1.35 var(--f-text); font-style: italic; color: var(--ink-faint); }

/* while you pick: the logo, the dig buttons and the touch pad step aside (you don't walk mid-pick) */
html.tp-open :is(.hero .wordmark, .hero-line, .hero-dock) { opacity: 0; visibility: hidden; }
html.tp-open .touch-pad { visibility: hidden; }

/* ---------- on a phone: docked along the bottom, so the miner and its tag stay in sight above ---------- */
@media (max-width: 560px) {
  #wpins > .tp { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); width: auto; max-height: 62vh;
    transform: none !important; translate: none; margin: 0 !important; padding: 8px 10px 10px; gap: 4px; }
  .tp-view, .tp-riddle { display: none; }
  .tp-msg { min-height: 0; margin-top: 2px; }
}

/* the one-time hint at the lake, on the ground under you */
.tp-hint button { pointer-events: none; }
html[data-input="touch"] .tp-hint button { text-decoration: none; }

.tp-real { zoom: calc(1 / var(--ui, 1)); }   /* "actual size" stays the size the world draws it, whatever the UI scale */