/* =====================================================================
   TOPPU SEAL GUM 3 (1998) — LOCKED PAGE-SCOPED LAYOUT (mobile first)
   Loaded only by pages/pokemon-toppu-seal-gum-3-1998.html (body.tsg3-page).
   ---------------------------------------------------------------------
   This set is a PUZZLE: the three stickers of an evolution family are
   printed as one continuous picture (a flower field runs straight through
   #010 Caterpie / #011 Metapod / #012 Butterfree, and again through
   #013 Weedle / #014 Kakuna / #015 Beedrill). The checklist is laid out
   3 across in dex order precisely so each row IS one family, so the three
   pieces of a row must butt up against each other with no seam, and the
   entry number + name must sit in the caption box underneath the row.

   Why this file exists / why it is ID-scoped
   -----------------------------------------
   The rules used to live in the page's inline <style>, which loses to the
   two shared sheets the page loads AFTER it (mobile.css, ht-set-grid.css).
   Measured symptoms of that loss, before this file existed:
     desktop 768/1280 — 15.00px gap between adjacent pieces, and the name
       rendered to the RIGHT of the photo instead of underneath it. Cause:
       ht-set-grid.css sets `.sets-wrap .sets-grid .set-tile { flex-wrap:wrap }`
       and `.set-tile > .snm { flex:1 1 100% }`; in the page's column-direction
       tile a 100% flex-basis is 100% of the HEIGHT, so the name wrapped into
       a second COLUMN beside the sticker and was clipped at the tile edge.
     phones 320/390/412 — mobile.css reclaimed the tile completely: the slot
       collapsed to 34x84px (ratio 0.41, 10.7% of the viewport), adjacent
       pieces sat 59-75px apart, and the back slot overlapped the front.

   THE LOCK: every layout rule below is anchored on the grid IDs
   (#tsg3-grid-grey / #tsg3-grid-blue / #tsg3-grid-prism, added to the
   markup for this purpose), so it outranks any number of classes in a
   shared stylesheet. Keep these rules in THIS file — do not merge them
   into mobile.css / ht-set-grid.css, do not move them back inline, and do
   not remove the grid IDs.

   Targets (measured, not eyeballed):
     - puzzle pieces touch: 0.00px between adjacent fronts in a row
     - piece width >= 28% of viewport at 320 / 390 / 412
     - entry number >= 13px, name >= 16px, wrapping on word boundaries,
       never ellipsised, always UNDER the sticker and never over it
     - "+ Photo" / credit tap targets >= 44px tall
     - no horizontal overflow; desktop 768/1280 not regressed

   WHY THE SLOT IS NOT SQUARE (--tsg3-piece-ratio)
   -----------------------------------------------
   The old slot was `aspect-ratio:1/1` + `background-size:contain`, which is
   why the pieces did not touch: a square box holding a slightly landscape
   photo letterboxes it left and right, and those two dead strips are the
   gap the owner can see. Switching to `cover` would close the gap but crop
   the sticker instead. Both are avoidable once the BOX matches the PHOTO.
   All 78 photos on this page plus the 66 on the sibling Topsun Gum 3 (1998)
   page were measured from the live /photos route:
     w/h  min 0.9744 · p10 1.00 · median 1.0175 · p90 1.05 · max 1.087
   Near-square with a slight landscape lean, and the spread is real (these
   are individually cropped user photos), so no single box ratio matches
   every photo exactly. We take the safe end of the range:

     --tsg3-piece-ratio = 0.974   (= the smallest measured photo ratio)

   With `background-size:100% auto` the photo ALWAYS spans the full slot
   width, so adjacent pieces touch at 0.00px whatever ratio a future upload
   has. Because the box is at least as tall as the tallest-relative photo
   needs, `100% auto` never has to crop: every sticker shows whole. The only
   cost is a thin dark band above/below the widest photos (<=10%, typically
   ~4%) INSIDE their own box — the boxes still touch, so the flower field
   still reads straight across the row. Deliberate trade-off: show the whole
   sticker rather than force a tighter shared box.
   ===================================================================== */

:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) {
  /* smallest measured photo ratio across both Topsun/Toppu Gum 3 1998 pages */
  --tsg3-piece-ratio: 0.974;
}

/* ---------------------------------------------------------------------
   1. The puzzle grid — 3 across at every width, columns flush
   --------------------------------------------------------------------- */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) {
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  align-items:start !important;
  column-gap:0 !important;          /* pieces in a row touch */
  row-gap:14px !important;          /* consecutive rows are different families */
  margin:0 !important;
  padding:0 !important;
}

/* one sticker = one column: the piece, then its caption underneath */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile {
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;      /* beats ht-set-grid.css, which wrapped
                                       the name into a second column */
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:0 !important;                 /* beats mobile.css 6-8px */
  box-sizing:border-box !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 0 8px !important;       /* no side inset, so pieces stay flush;
                                       beats ht-set-grid padding-bottom:46px */
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
  position:relative !important;
  text-align:center !important;
}
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile:hover {
  background:transparent !important;
  border:0 !important;
}

/* ---------------------------------------------------------------------
   2. THE PUZZLE PIECE — flush on all four sides, whole sticker visible
   --------------------------------------------------------------------- */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .ph-f {
  display:flex !important;
  order:0 !important;
  flex:none !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:var(--tsg3-piece-ratio) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background-color:rgba(8,15,17,0.6) !important;
  /* full-bleed WIDTH always => adjacent pieces can never gap apart; height
     follows the photo's own ratio, so nothing is cropped */
  background-size:100% auto !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  cursor:zoom-in !important;
  transform:none !important;
}
/* hairline INSIDE the box so an empty row still reads as three pieces
   without pushing the filled ones apart */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .ph-f:not(.has-img) {
  box-shadow:inset 0 0 0 1px var(--line) !important;
  padding:6px !important;
}
/* backs stay hidden on this page, as before this change */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .ph-b {
  display:none !important;
}
/* banner-anvil-cart.js renderThumb() paints a canvas thumbnail over the slot
   that is CENTRE-CROPPED to the slot box (it only skips slots carrying a
   data-side attribute, which this page's markup does not use). On a puzzle
   piece that crop is exactly what we are avoiding — it shaves the left and
   right edges off the artwork and breaks the picture across the seam. Hide
   it and let the background image (already the sharp full-size photo) be the
   single source of truth. */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile .ph-f canvas.ht-thumb-canvas,
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile .ph-b canvas.ht-thumb-canvas {
  display:none !important;
}
/* no hover-zoom: scaling one piece tears the picture away from its neighbours */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .ph-f:hover {
  transform:none !important;
  box-shadow:none !important;
  z-index:auto !important;
}
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .ph-f:not(.has-img):hover {
  box-shadow:inset 0 0 0 1px var(--line) !important;
}

/* ---------------------------------------------------------------------
   3. The caption box under the row — number, then name
   --------------------------------------------------------------------- */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .sn {
  display:block !important;
  order:1 !important;
  flex:none !important;              /* beats ht-set-grid `flex:1 1 100%` */
  width:100% !important;
  min-width:0 !important;
  margin:6px 0 0 !important;
  padding:0 2px !important;
  color:var(--bronze-bright) !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0.06em !important;
  line-height:1.3 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .snm {
  display:block !important;
  order:2 !important;
  flex:none !important;              /* beats ht-set-grid `flex:1 1 100%`,
                                        which pushed the name to the RIGHT */
  width:100% !important;
  min-width:0 !important;
  margin:2px 0 0 !important;
  padding:0 2px !important;
  color:var(--ink) !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:16px !important;         /* readable name, never below 16px */
  font-weight:600 !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;     /* never ellipsised */
  overflow-wrap:break-word !important;  /* last resort only; never eager */
  word-break:normal !important;
  hyphens:none !important;
}
/* the border group is already named by the section heading + variant tabs */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .sty {
  display:none !important;
}

/* ---------------------------------------------------------------------
   4. Contributor credit + upload / anvil controls
   --------------------------------------------------------------------- */
/* banner-anvil-cart.js pins .ht-credit absolutely just under its slot, which
   in a flush band lands on top of the caption. Put it back in flow, under
   the name, and give it a real tap target. */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile .ht-credit {
  position:static !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  order:3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  -webkit-line-clamp:none !important;
  width:100% !important;
  min-height:44px !important;        /* tap target */
  margin:2px 0 0 !important;
  padding:4px 2px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  text-align:center !important;
  overflow:visible !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile .ht-addphoto {
  box-sizing:border-box !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:44px !important;        /* tap target */
  padding:8px 8px !important;
  font-size:13px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}
/* the anvil control stays hidden on this page, as before this change */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile .anvil-ctl {
  display:none !important;
}

/* ---------------------------------------------------------------------
   4b. Page chrome: the Grey / Blue / Prism variant switcher
       (measured at 61x34 and 69x34 - below the 44px touch minimum)
   --------------------------------------------------------------------- */
body.tsg3-page .variant-jump a,
body.tsg3-page .variant-jump button {
  min-height:44px !important;
  min-width:44px !important;
  font-size:13px !important;
}

/* ---------------------------------------------------------------------
   5. Very narrow phones (<=360px): keep 3 pieces across, trim the chrome
   --------------------------------------------------------------------- */
@media (max-width: 360px) {
  :is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .sn { padding:0 1px !important; }
  :is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .snm { padding:0 !important; }
}

/* ---------------------------------------------------------------------
   6. Tablet / desktop: same 3-up puzzle rows, just centred and capped so a
      single sticker never becomes a poster
   --------------------------------------------------------------------- */
@media (min-width: 601px) {
  :is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) {
    max-width:720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    row-gap:18px !important;
  }
  :is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .snm { font-size:17px !important; }
  :is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .sn { font-size:14px !important; }
}

/* Variant tabs (Grey / Blue / Prism). These were bare <button> elements at
   ~12px in a 34px box - below the 44px tap minimum and visibly not part of the
   site. They now carry the shared .btn .btn-secondary classes; this block only
   sizes and spaces them so they read as real controls on a phone. */
.variant-jump .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 6px 12px;
}
.tg3-variant-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 11px 20px;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.tg3-variant-btn[aria-pressed="true"] {
  border-color: #c9a968;
  color: #f0e2bd;
  box-shadow: inset 0 0 0 1px rgba(201,169,104,0.45);
}
@media (max-width: 400px) {
  .tg3-variant-btn { padding: 11px 14px; font-size: 13px; letter-spacing: 0.1em; }
}

/* ----------------------------------------------------------------------
   ADD-PHOTO BUTTON
   banner-anvil-cart.js injects .ht-addphoto with position:absolute and
   top:100% - hanging BELOW the slot - relying on the slot being
   overflow:visible. This page sets overflow:hidden on .ph-f so the puzzle
   pieces stay flush with no gap, and that clipped the button away.
   Nobody could upload to this set: the control was there, just invisible.

   The overflow rule is load-bearing and stays. The button is re-anchored
   to the bottom edge INSIDE the slot, where nothing clips it and it costs
   the row no height. Same fix as the HSC1 credit chip.
   ---------------------------------------------------------------------- */
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .ph-f,
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile > .ph-b {
  position:relative !important;
}
:is(#tsg3-grid-grey, #tsg3-grid-blue, #tsg3-grid-prism) > .set-tile .ht-addphoto {
  position:absolute !important;
  top:auto !important;
  bottom:4px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  margin-top:0 !important;
  z-index:6 !important;
  background:rgba(5,10,11,0.88) !important;
}