/* storefront.css: the Underground's storefront (static/storefront.js), the same front on /community, on /city's
 * Underground tab and on /doors (design pass, 2026-10-15: "the real storefront, appealing at a glance, listing your
 * own game the obvious first action"). An awning, a lettered fascia, a window whose first spot is always yours to
 * fill, and the games on the shelf as boxes. Every colour is a fink.css token (docs/AESTHETIC.md); it needs
 * nothing of site.css, because /doors does not link it. Classes are uf-, the Underground front's. */
.uf{--uf-gap:16px;position:relative;margin:0;background:var(--sheet);border:1px solid var(--ink);color:var(--ink)}
/* the awning: scalloped stripes in the city's brick and the sheet */
.uf-awning{height:34px;background:repeating-linear-gradient(90deg,var(--con) 0 44px,var(--sheet) 44px 88px);
  -webkit-mask:linear-gradient(black,black) top/100% 22px no-repeat,radial-gradient(22px 12px at 50% 0,black 98%,transparent) 0 22px/44px 12px repeat-x;
          mask:linear-gradient(black,black) top/100% 22px no-repeat,radial-gradient(22px 12px at 50% 0,black 98%,transparent) 0 22px/44px 12px repeat-x}
.uf-fascia{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;padding:14px 26px 16px;
  background:var(--ink);color:var(--sheet)}
.uf-name{font:700 clamp(26px,3.4vw,40px)/1.05 var(--serif);letter-spacing:.01em}
.uf-name::first-letter{color:var(--gold)}
.uf-tag{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rule)}
/* the window: your spot first, a banner across it, then the shelf */
.uf-window{display:grid;gap:var(--uf-gap);padding:22px;background:var(--paper);border-bottom:10px solid var(--sheet-2)}
.uf-list{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k b" "t b" "p s";gap:6px 28px;align-items:center;
  padding:22px 26px;background:var(--con);color:var(--sheet);text-decoration:none;box-shadow:inset 0 0 0 1px var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.uf-list:hover{transform:translateY(-2px);color:var(--sheet)}
.uf-list:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.uf-list-k{grid-area:k;font:700 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.uf-list-t{grid-area:t;font:700 clamp(28px,3.2vw,42px)/1.02 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.uf .uf-list-p{grid-area:p;margin:0;max-width:36em;font:400 16.5px/1.45 var(--serif)}
.uf-btn{grid-area:b;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;background:var(--sheet);
  color:var(--ink);font:700 16px/1.2 var(--sans);letter-spacing:.02em;white-space:nowrap}
.uf-btn .arr{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.uf-list:hover .uf-btn .arr{transform:translateX(4px)}
.uf-list-s{grid-area:s;justify-self:center;font:600 12px/1.3 var(--sans);opacity:.9}
.uf-shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--uf-gap);align-content:start}
.uf-shelf>li{min-width:0;display:flex}
.uf-box{position:relative;display:flex;flex-direction:column;width:100%;background:var(--sheet);border:1px solid var(--rule);
  text-decoration:none;color:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .3s}
.uf-box:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 14px 24px -18px var(--ink);color:var(--ink)}
.uf-box:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.uf-cover{position:relative;display:grid;place-items:center;aspect-ratio:4/3;padding:28px 14px 14px;overflow:hidden;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--sheet) 22%,transparent) 1px,transparent 1.5px) 0 0/12px 12px,var(--c,var(--ink))}
.uf .uf-cover img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0}
.uf-cover b{position:relative;font:700 clamp(19px,1.9vw,25px)/1.1 var(--serif);color:var(--sheet);text-align:center;text-wrap:balance;
  text-shadow:0 1px 0 color-mix(in srgb,var(--ink) 40%,transparent)}
.uf-rank{position:absolute;top:8px;left:8px;z-index:1;padding:2px 7px;background:var(--sheet);font:700 12.5px/1.3 var(--serif)}
.uf-meta{display:flex;flex-direction:column;gap:6px;flex:1;padding:11px 13px 13px}
.uf-t{font:700 18px/1.2 var(--serif)}
.uf-by{font:italic 400 14.5px/1.3 var(--serif);color:var(--ink-2)}
.uf-chips{display:flex;flex-wrap:wrap;gap:5px}
/* update 82: a game's own words on its card, and the warning above them */
.uf-d{font:400 14px/1.45 var(--sans);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.uf-warn{display:flex;align-items:center;gap:6px;align-self:flex-start;padding:3px 8px;background:var(--warn-wash);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  color:var(--warn);font:600 11.5px/1.3 var(--sans)}
.warn-i{width:14px;height:14px;flex:none}
.uf-mins{margin-top:auto;font:600 12px/1.3 var(--sans);color:var(--ink-2)}
/* the most played wears a ribbon */
.uf-top .uf-rank{background:var(--gold);color:var(--ink)}
.uf-open{display:grid;place-items:center;width:100%;min-height:150px;border:1px dashed var(--ink-3);background:transparent;
  font:italic 400 15px/1.3 var(--serif);color:var(--ink-3);text-decoration:none}
a.uf-open:hover{border-color:var(--ink);color:var(--ink)}
.uf-sill{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding:14px 22px 16px}
.uf-sill a{color:var(--ink);font:600 13.5px/1.3 var(--sans);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.uf-sill a:hover{color:var(--link)}
.uf-sill .uf-count{margin-left:auto;font:400 13px/1.3 var(--sans);color:var(--ink-2)}
/* small: on /city's Underground tab, your spot and the top three in one row */
.uf--mini .uf-awning{height:22px}
.uf--mini .uf-fascia{padding:10px 18px 12px}
.uf--mini .uf-name{font-size:24px}
.uf--mini .uf-window{padding:16px}
.uf--mini .uf-list{padding:16px 18px;gap:4px 18px}
.uf--mini .uf-list-p{font-size:15px}
.uf--mini .uf-btn{padding:12px 18px;font-size:14.5px}
.uf--mini .uf-list-t{font-size:26px}
.uf--mini .uf-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.uf--mini .uf-cover{aspect-ratio:16/10;padding:22px 8px 8px}
.uf--mini .uf-cover b{font-size:15px}
.uf--mini .uf-meta{padding:8px 9px 10px}
.uf--mini .uf-t{font-size:15px}
.uf--mini .uf-chips,.uf--mini .uf-by{display:none}
.uf--mini .uf-sill{padding:10px 16px 12px}
/* every game, on /doors: the window first, the whole shelf under it */
.uf--all .uf-shelf{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.uf-sort{display:flex;gap:6px}
.uf-sort button{padding:6px 11px;font:600 12px/1.2 var(--sans);background:var(--sheet);color:var(--ink);border:1px solid var(--rule);border-radius:2px;cursor:pointer}
.uf-sort button[aria-pressed="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
@media (max-width:980px){ .uf-shelf{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){
  .uf-list{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "t" "p" "b" "s";gap:8px}
  .uf-btn{justify-self:stretch;margin-top:6px}
  .uf-list-s{justify-self:start}
  .uf-shelf,.uf--all .uf-shelf,.uf--mini .uf-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:560px){
  .uf-fascia{padding:12px 16px 14px}
  .uf-window{padding:14px}
  .uf-list{padding:18px}
  .uf-sill{padding:12px 14px 14px}
  .uf-sill .uf-count{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){ .uf-list,.uf-box,.uf-btn .arr{transition:none} }