/* Hallmark · component: pip-tile · genre: playful · theme: Hum · states: default hover focus active disabled(n/a) loading error success · contrast: pass */
/* tiles.css — the one home for the pip-tile family (docs/GAMES_DISPLAY.md §C
 * + the v2 "Console" addendum).
 * Loaded by / (index.html), by the 110 skeleton game pages (link added by
 * tools/apply-game-frame.mjs) and injected by similar-games.js v3 on the 14
 * custom pages. Those custom pages load neither tokens.css nor site.css, and two
 * of them (pocket-pipes, nonogram) define their OWN --color-* names, so every
 * token below is scoped through a --pip-* alias that inherits whatever the host
 * defines and otherwise falls back to a literal copied VERBATIM from tokens.css.
 * The fallbacks are a mirror, not a second home: check-ship asserts each oklch
 * literal here equals its tokens.css value. catalog.css re-points the same
 * --pip-* aliases at the console tokens under body.pip-home, so ONE tile
 * drawing serves the dark dashboard on / and the light (or paper-counter)
 * shelves on the game pages.
 *
 * v2 tile = a console tile: a square (1:1) rounded cover (14px) with the title
 * beneath it in a small label. No border, no band box — the cover is the tile.
 * Hover / focus = scale 1.06 + a 3px ring + a lifted cast; :active presses.
 * No @import. No colors or fonts beyond tokens.css. The accent (--pip-accent,
 * set inline per tile from the game's theme-color) is used ONLY as the cast
 * shadow — never on text.
 */

/* ---------- 1. Scoped tokens (every literal = tokens.css) ---------- */
.pip-tile,.pip-shelf,.pip-rail,.pip-spotlight{--pip-ink:var(--color-ink,oklch(22% 0.06 300));--pip-well:var(--color-well,oklch(98% 0.03 95));--pip-paper-2:var(--color-paper-2,oklch(96% 0.08 95));--pip-muted:var(--color-muted,oklch(28% 0.06 300 / 0.62));--pip-accent-deep:var(--color-accent-deep,oklch(72% 0.2 85));--pip-focus:var(--color-focus,oklch(52% 0.2 250));--pip-butter:var(--color-accent,oklch(86% 0.22 95));--pip-on-butter:var(--color-ink,oklch(22% 0.06 300));--pip-console:var(--color-console,oklch(17% 0.025 290));--pip-console-text:var(--color-console-text,oklch(96% 0.02 95));--pip-ring:var(--pip-ink);--pip-radius:14px}

/* ---------- 2. The tile ---------- */
/* The cast: the game's own accent, clamped through accent-deep so pale
 * (#FFE6F2 vcrush, #88D9F6 pocket-pipes) and near-black (#1C1917 go-five,
 * #0F172A space-lander) accents still cast a visible glow under a lifted tile. */
.pip-tile{--pip-cast:color-mix(in oklch, var(--pip-accent, var(--pip-ink)) 62%, var(--pip-accent-deep));list-style:none;margin:0;padding:0;min-width:0}
.pip-tile[hidden]{display:none}

.pip-tile__link{display:grid;grid-template-rows:auto auto;align-content:start;gap:8px;box-sizing:border-box;height:100%;margin:0;padding:0;text-decoration:none;color:var(--pip-ink);min-height:44px;outline:0;-webkit-tap-highlight-color:transparent}

/* The cover IS the tile: a 1:1 rounded crop of the game's own screenshot.
 * object-position 50% <focal> (absent = 100% = the board at the bottom of an
 * 800×1000 shot) plus a 1.1 zoom about that same focal point, which trims the
 * repeated title block above a skeleton board. --pip-focal (inline, only when
 * the manifest has `focal`) moves the crop for the hand-built shots.
 * Loading = the paper-2 fill until decode; error = the same fill; no shimmer,
 * no letter, no monogram, no gradient. */
.pip-tile__shot{display:block;position:relative;isolation:isolate;aspect-ratio:1/1;overflow:hidden;margin:0;background:var(--pip-paper-2);border-radius:var(--pip-radius);box-shadow:0 1px 0 0 color-mix(in oklch, var(--pip-ink) 14%, transparent);transition:transform 200ms cubic-bezier(0.16, 1, 0.3, 1),box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1)}
.pip-tile__shot img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;display:block;object-fit:cover;object-position:50% var(--pip-focal,100%);transform:none}
/* A board-only capture (tile.js data-crop="board": shot.w ≠ 800, no focal)
 * has no title block to trim: center it, no zoom. */
.pip-tile[data-crop="board"] .pip-tile__shot img{object-position:50% 50%;transform:none}

.pip-tile__band{display:grid;gap:3px;padding:0 2px;margin:0;min-width:0}
.pip-tile__title{font:600 var(--text-sm,0.875rem)/1.25 var(--font-display,"Plus Jakarta Sans", Geist, ui-rounded, "Segoe UI", sans-serif);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;min-width:0;color:var(--pip-ink)}
.pip-tile__cat{font:500 11px/1 var(--font-label,"JetBrains Mono", ui-monospace, monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--pip-muted);margin:0}
/* The category label is dropped ONLY inside a category row on / (every tile
 * there shares the row's category). Recent and game-page shelves mix
 * categories and keep it. */
.pip-booth .pip-rail .pip-tile__cat{display:none}

/* ---------- 2b. Hero modifier (the two spotlight tiles on /) ---------- */
/* Full-bleed cover behind a bottom scrim in the console ground; the band
 * (category · title · one-line blurb · Play) sits over it, bottom-left. The
 * crop is the plain object-position (no zoom): a hero shows the whole board. */
.pip-tile--poster .pip-tile__link{display:block;position:relative;isolation:isolate;overflow:hidden;border-radius:var(--pip-radius-hero,20px);background:var(--pip-console);transition:box-shadow var(--dur-micro,120ms) var(--ease-out,cubic-bezier(0.16, 1, 0.3, 1))}
.pip-tile--poster .pip-tile__shot{aspect-ratio:4/3;border-radius:0;box-shadow:none;isolation:auto;transition:none}
.pip-tile--poster .pip-tile__shot img{transform:none;transform-origin:50% 50%;transition:transform var(--dur-long,420ms) var(--ease-out,cubic-bezier(0.16, 1, 0.3, 1))}
.pip-tile--poster .pip-tile__band{position:absolute;inset:auto 0 0 0;z-index:1;display:grid;gap:4px;grid-template-columns:minmax(0,1fr);grid-template-areas:"cat" "title" "blurb" "go";padding:72px 16px 16px;margin:0;background:linear-gradient(to top, var(--pip-console) 0%, color-mix(in oklch, var(--pip-console) 78%, transparent) 52%, transparent 100%);color:var(--pip-console-text)}
.pip-tile--poster .pip-tile__cat{grid-area:cat;color:var(--pip-console-text);opacity:.78}
.pip-tile--poster .pip-tile__title{grid-area:title;font:800 var(--text-xl,1.75rem)/1.05 var(--font-display,"Plus Jakarta Sans", Geist, ui-rounded, "Segoe UI", sans-serif);letter-spacing:-.025em;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;color:var(--pip-console-text)}
.pip-tile__blurb{grid-area:blurb;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;margin:0;font:500 var(--text-sm,0.875rem)/1.4 var(--font-body,"Plus Jakarta Sans", Geist, ui-rounded, "Segoe UI", sans-serif);color:var(--pip-console-text);opacity:.85;overflow-wrap:anywhere}
/* The only pill on any tile: decoration inside the one link (aria-hidden). */
.pip-tile__go{grid-area:go;justify-self:start;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;padding:0 24px;margin:8px 0 0;font:700 var(--text-md,1.0625rem)/1 var(--font-body,"Plus Jakarta Sans", Geist, ui-rounded, "Segoe UI", sans-serif);color:var(--pip-on-butter);background:var(--pip-butter);border-radius:var(--radius-pill,999px);box-shadow:0 3px 0 0 var(--pip-accent-deep);white-space:nowrap}

/* ---------- 3. States ---------- */
/* default: above · hover: scale 1.06 + ring + lifted cast · focus: the same
 * ring (the link's own outline is off; the ring IS the focus indicator) ·
 * active: press · disabled: n/a (links) · loading / error: the paper-2 fill in
 * .pip-tile__shot · success (played): a text chip, not color. */
@media (hover:hover){
  .pip-tile__link:hover .pip-tile__shot{transform:translateY(-3px);box-shadow:0 0 0 3px var(--pip-ring),0 12px 24px -8px var(--pip-cast)}
  .pip-tile--poster .pip-tile__link:hover{box-shadow:0 0 0 3px var(--pip-ring),0 24px 48px -16px var(--pip-cast)}
  .pip-tile--poster .pip-tile__link:hover .pip-tile__shot{transform:none;box-shadow:none}
  .pip-tile--poster .pip-tile__link:hover .pip-tile__shot img{transform:scale(1.02)}
}
.pip-tile__link:focus-visible .pip-tile__shot{transform:translateY(-3px);box-shadow:0 0 0 3px var(--pip-ring),0 12px 24px -8px var(--pip-cast)}
.pip-tile--poster .pip-tile__link:focus-visible{box-shadow:0 0 0 3px var(--pip-ring),0 24px 48px -16px var(--pip-cast)}
.pip-tile--poster .pip-tile__link:focus-visible .pip-tile__shot{transform:none;box-shadow:none}
.pip-tile__link:active .pip-tile__shot{transform:translateY(1px);box-shadow:0 0 0 3px var(--pip-ring),0 4px 10px -6px var(--pip-cast);transition-duration:90ms;transition-timing-function:cubic-bezier(0.2, 0.7, 0.3, 1)}
.pip-tile--poster .pip-tile__link:active{box-shadow:0 0 0 3px var(--pip-ring)}
.pip-tile--poster .pip-tile__link:active .pip-tile__shot{transform:none;box-shadow:none}
.pip-tile.is-played .pip-tile__shot::after{content:"played";position:absolute;z-index:1;top:8px;left:8px;font:500 11px/1 var(--font-label,"JetBrains Mono", ui-monospace, monospace);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;background:var(--pip-butter);color:var(--pip-on-butter);border-radius:var(--radius-pill,999px)}

/* ---------- 4. Rail (rows on /, the recent shelf, the game-page shelf) ---------- */
/* A horizontal, snapping, thumb-scrollable rail at every width (a console
 * row) that bleeds to the page edges (negative gutter margin, matching gutter
 * padding) so the next tile always peeks. 8px top padding = room for the
 * scaled tile + ring inside the scroll clip. contain:inline-size keeps the
 * rail's intrinsic width from blowing a flex host out sideways. */
.pip-rail{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--page-gutter,clamp(1rem, 4vw, 2.5rem));contain:inline-size;padding:8px var(--page-gutter,clamp(1rem, 4vw, 2.5rem)) 12px;margin:0 calc(-1*var(--page-gutter,clamp(1rem, 4vw, 2.5rem)));scrollbar-width:thin;scrollbar-color:color-mix(in oklch, var(--pip-muted) 55%, transparent) transparent}
.pip-rail>.pip-tile{scroll-snap-align:start}
@media (max-width:359px){
  .pip-rail{grid-auto-columns:112px}
}

/* ---------- 5. Shelf (recent on /, "More <Category> games" on game pages) ---------- */
.pip-shelf{width:100%;box-sizing:border-box;max-width:1080px;margin:var(--space-xl,2.5rem) auto;padding:0 var(--page-gutter,clamp(1rem, 4vw, 2.5rem))}
/* Game-page shelf = a paper counter: the well band with ink rules top and
 * bottom (a bordered card from 768), so the heading and link read on any host
 * ground — six of the hand-built pages are dark. Added by similar-games.js. */
.pip-shelf--counter{padding-top:var(--space-lg,1.5rem);padding-bottom:var(--space-lg,1.5rem);background:var(--pip-well);color:var(--pip-ink);border-top:3px solid var(--pip-ink);border-bottom:3px solid var(--pip-ink)}
.pip-shelf[hidden]{display:none}
.pip-shelf__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 var(--space-2xs,0.25rem)}
.pip-shelf__h{font:700 var(--text-lg,1.25rem)/1.15 var(--font-display,"Plus Jakarta Sans", Geist, ui-rounded, "Segoe UI", sans-serif);letter-spacing:-.02em;margin:0 0 var(--space-sm,0.75rem);color:var(--pip-ink)}
.pip-shelf__head .pip-shelf__h{margin:0}
.pip-shelf__all{margin:var(--space-sm,0.75rem) 0 0;padding:0}
.pip-shelf__link{display:inline-block;min-height:44px;line-height:44px;color:var(--pip-ink);text-decoration:underline;text-underline-offset:3px}
.pip-shelf__link:focus-visible{outline:3px solid var(--pip-ring);outline-offset:3px}
/* Clear (recent shelf): a 44px pill on the host's raised surface. */
.pip-shelf__clear{--pip-rule:var(--color-rule,oklch(78% 0.1 35));display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;margin:0;padding:0.55rem 0.95rem;font:600 var(--text-sm,0.875rem)/1 var(--font-body,"Plus Jakarta Sans", Geist, ui-rounded, "Segoe UI", sans-serif);color:var(--pip-ink);background:var(--pip-paper-2);border:0;border-radius:var(--radius-pill,999px);box-shadow:0 3px 0 0 var(--pip-rule);cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none;transition:transform var(--dur-micro,120ms) var(--ease-press,cubic-bezier(0.2, 0.7, 0.3, 1)),box-shadow var(--dur-micro,120ms) var(--ease-press,cubic-bezier(0.2, 0.7, 0.3, 1))}
@media (hover:hover){
  .pip-shelf__clear:hover{transform:translateY(-2px);box-shadow:0 5px 0 0 var(--pip-rule)}
}
.pip-shelf__clear:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--pip-rule);transition-duration:70ms}
.pip-shelf__clear:focus-visible{outline:3px solid var(--pip-ring);outline-offset:3px}

/* ---------- 6. Breakpoints ---------- */
@media (min-width:768px){
  .pip-rail{grid-auto-columns:160px;gap:16px}
  /* The game-page shelf holds six tiles: a static grid from 768, nothing
   * scrolls sideways there. Rows on / keep scrolling at every width. */
  .pip-shelf--counter .pip-rail{overflow:visible;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:0;padding:8px 0}
  .pip-shelf--counter{border:3px solid var(--pip-ink);border-radius:var(--radius-card,20px)}
  .pip-tile--poster .pip-tile__shot{aspect-ratio:16/10}
  .pip-tile--poster .pip-tile__band{padding:88px 20px 20px}
}
@media (min-width:1280px){
  .pip-rail{grid-auto-columns:168px}
}

/* ---------- 7. Motion ---------- */
/* @keyframes pip-rise and the recent-shelf entrance live in catalog.css (home
 * only); this file only silences tile motion under reduced-motion. The 1.1
 * crop zoom on a row cover is static framing, not motion, and stays. */
@media (prefers-reduced-motion:reduce){
  .pip-tile__link,.pip-tile__shot,.pip-tile--poster .pip-tile__shot img,.pip-shelf__clear{transition:none}
  .pip-tile__link:hover .pip-tile__shot,.pip-tile__link:focus-visible .pip-tile__shot,.pip-tile__link:active .pip-tile__shot,.pip-shelf__clear:hover,.pip-shelf__clear:active{transform:none}
  .pip-tile--poster .pip-tile__link:hover .pip-tile__shot img,.pip-tile--poster .pip-tile__link:focus-visible .pip-tile__shot img{transform:none}
  .pip-tile,.pip-tile__link,.pip-tile__shot,.pip-rail,.pip-shelf{animation:none}
}