/* Final polish (17 Oct 2026), loaded last on every client page by add_credit.py.
   The bag's lines (Ruben: "the bag section is weird with quantity on mobile"): Remove floated alone at the far right while the quantity sat
   under the price. Now: the picture on the left, the name, the game and the line total, then the quantity and Remove on one row. */
.dl li{grid-template-columns:64px auto 1fr;grid-template-areas:"pic name name" "pic meta meta" "pic qty rm";column-gap:16px;row-gap:6px;align-items:start}
.dl li > div{display:contents}
.dl li .sw{grid-area:pic;width:64px;height:86px;align-self:start;justify-self:start;margin-top:2px}
.dl li b{grid-area:name;min-width:0}
.dl li .m{grid-area:meta}
.dl li .qty{grid-area:qty;margin-top:8px;align-self:center}
.dl li .rm{grid-area:rm;justify-self:start;align-self:center;margin:8px 0 0 16px;padding:.6rem .2rem;text-decoration:underline;text-underline-offset:3px}
.dl li .qty button{width:40px;height:40px}
@media (max-width:420px){.dl li{grid-template-columns:56px auto 1fr;column-gap:14px}.dl li .sw{width:56px;height:76px}}
/* Footer, standard web hierarchy (18 Oct, Ruben: "footer is so big ... title is small, it doesn't make sense"): each column's title is
   bigger and brighter than its links, as on most shop sites. Titles 16px bold white; links 14px regular, soft white, white on hover;
   no rule under every link. Phones: links 16px with a 44px tap height. */
footer.foot .flinks .flab{font:700 16px/1.2 var(--body)!important;color:#fff!important;padding-bottom:.75rem;margin-bottom:.5rem}
footer.foot .flinks a{padding:.38rem 0;border-bottom:0;font:500 14px/1.35 var(--body);color:#C9D0E8}
footer.foot .flinks a:hover,footer.foot .flinks a:focus-visible{color:#fff}
footer.foot .fbrand p{font-size:14px}
footer.foot .fwm{font-size:clamp(3rem,8vw,8.5rem)!important}   /* the faint TOP CHASE GROUP at the bottom: about half its old height */
@media (max-width:700px){footer.foot .flinks a{min-height:44px;padding:0;font-size:16px}}
/* long product names on shop cards could run 3-6px past the card edge on phones (18 Oct text check): let them break */
.pc-name{overflow-wrap:anywhere}
/* the bag's item count sits on the button's top-right corner (18 Oct final pass: a later rule set it back to position:relative, so the
   number sat inside the round button and pushed the bag icon sideways) */
button.bag{position:relative}
button.bag b{position:absolute!important;top:-5px!important;right:-5px;margin:0}
/* form fields at 16px on phones: under 16px, iPhone Safari zooms the page in when a field is tapped (the shop's price and sort fields
   were 13-14px; 18 Oct final pass) */
@media (max-width:700px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}
/* product page: no small "Authentic and factory sealed / Free pickup ..." lines under Add to bag (18 Oct, Ruben: too close to the button) */
.pdp-trust{display:none!important}
.pdp-buy{margin-bottom:22px}   /* the room the hidden lines used to give, so Details does not sit on the button */
/* Product cards on every shop page (18 Oct, Ruben: the stock and the line under the name looked "spaced out weird").
   The type line ("Booster box · Chinese") had 10px gaps either side of its dot and wrapped on phones, which left holes in the cards
   beside it. Now: one line with a normal " · ", and even 4-6px steps from the name to the stock, then the price. */
.pc .pc-meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .pc-meta span{display:inline}
.pc .pc-meta span+span::before{margin:0 .4em}
.pc .pc-body{gap:4px;padding-bottom:6px}
.pc .pc-stock{margin-top:2px}
.pc .pc-foot{padding-top:10px}
/* phones: the category buttons (All, Booster boxes, Packs ...) in one row you swipe, not three rows of big buttons */
@media (max-width:700px){
  .ts-content{min-width:0}   /* without this the one-row buttons widened the whole column past the screen */
  .ts-qf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .ts-qf::-webkit-scrollbar{display:none}
  .ts-qf button{flex:none;min-height:40px;padding:0 13px;font-size:14px}
}
/* Studio standard for body text and section headings (18 Oct, Ruben: "apply", after a side by side with studio-built sites; his
   laptop runs Windows at 125%, as most do, so these were judged at that scale). Titles in Archivo capitals, prices, buttons, labels,
   cards and the footer are untouched.
   Eyebrows ("COMING SOON"): 12px bold capitals, 0.14em tracking, 12px above the heading.
   Section headings: 38px (phones 28px), extra bold, -0.02em tracking, line height 1.1, 16px above the text.
   Paragraphs: 16px regular, line height 1.65, 14px between paragraphs; on the dark info pages a softer white. Fine print 14px.
   Intros under a page title: 18px regular, line height 1.5. */
.mono-l{display:block;margin:0 0 12px!important;font:700 12px/1.2 var(--body)!important;letter-spacing:.14em!important;text-transform:uppercase!important}
.pdp-kind{font-size:12px!important;letter-spacing:.12em!important}
.in-beat h2,.in-sec > h2,.in-cta h2{margin:0 0 16px!important;font:800 38px/1.1 var(--body)!important;letter-spacing:-.02em!important;text-transform:none!important;font-stretch:100%!important}
.in-pol h2{font-size:24px!important;line-height:1.25!important}
.in-beat p,.in-a p,.in-pol p,.acc-b p,.in-center p,.in-sub,.in-note,ol.in-steps li p,.in-card ol li,.in-dl dd{font-size:16px!important;font-weight:400!important;line-height:1.65!important;letter-spacing:0!important}
.ts-info .in-beat p,.ts-info .in-a p,.ts-info .in-pol p,.ts-info .in-center p,.ts-info .in-sub{color:#C3CBE3}
.in-beat p + p,.in-a p + p,.acc-b p + p{margin-top:14px!important}
.in-fine,.in-beat p.in-fine,.in-card p.in-fine,.in-pol p.in-fine{font-size:14px!important;font-weight:400!important;line-height:1.55!important}
.in-faqg summary{font-size:18px!important}
.in-faqg > h2{margin-bottom:6px!important;font:800 22px/1.2 var(--body)!important;letter-spacing:-.01em!important;color:#fff!important}   /* a category title over its questions: bigger than them (18 Oct hierarchy check) */
#story .sh-card h3.sh-lbl,.sh-card h3.sh-lbl{font-size:18px!important;font-weight:700!important}   /* "What's on" over the events: bigger than their names */
.in-lede,.soon-rep,.sh-lede{font-size:18px!important;font-weight:400!important;line-height:1.5!important}
.hero2 .lede{font-size:20px!important}
@media (max-width:700px){
  .in-faqg > h2{font-size:20px!important}
  .in-beat h2,.in-sec > h2,.in-cta h2{font-size:28px!important}
  .hero2 .lede{font-size:17px!important}
  .in-lede,.soon-rep,.sh-lede{font-size:16px!important}
}
/* Footer, themed (18 Oct, Ruben: "go"). On a computer: a brand bar on top (logo and tagline left, description right), then
   Shop / Store / Coming soon and the Visit card. The Visit card, at every width: the crew at the real counter (the About page's scene;
   polish.js plays its loop once the footer is near, a still for reduced motion), with the address below on solid navy. It replaces
   the drawn map. */
@media (min-width:1101px){
  footer.foot .fwrap{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr)!important;row-gap:36px!important}
  footer.foot .flft{display:contents!important}
  footer.foot .fcols .flinks:nth-child(1){grid-column:1!important;grid-row:2!important}
  footer.foot .fcols .flinks:nth-child(2){grid-column:2!important;grid-row:2!important}
  footer.foot .fcols .flinks.fsoon{grid-column:3!important;grid-row:2!important}
  footer.foot .fmap{grid-column:4!important;grid-row:2!important}
  footer.foot .fbrand{grid-column:1/-1!important;grid-row:1!important;display:grid!important;grid-template-columns:auto auto 1fr;align-items:center;column-gap:28px;padding-bottom:30px;border-bottom:1px solid rgba(248,248,248,.12)}
  footer.foot .fbrand .logo{grid-column:1;grid-row:1;width:112px!important;margin:0!important}
  footer.foot .fbrand h2{grid-column:2;grid-row:1;margin:0!important;font-size:26px!important;line-height:1!important}
  footer.foot .fbrand p{grid-column:3;grid-row:1;justify-self:end;text-align:right;max-width:24rem!important;font-size:16px!important;color:#C9D0E8!important;margin:0!important}
}
footer.foot .fmap{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;background:#0f1838!important}
footer.foot .fmap-art{display:block!important;position:relative!important;inset:auto!important;flex:none!important;height:230px!important;opacity:1!important;background:#0a1130 url(/crew/realcounter-960-poster.webp) center 12%/cover no-repeat!important}
footer.foot .fmap-art > i{display:none!important}
footer.foot .fmap-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%}
footer.foot .fmap .info{position:static!important;inset:auto!important;transform:none!important;margin:0!important;padding:18px 22px 22px!important;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (max-width:700px){footer.foot .fmap-art{height:200px!important}}
/* the shop's phone in the footer's Visit card, under the hours (19 Oct 2026) */
footer.foot .ftel{margin:.5rem 0 0}
footer.foot .ftel a{color:#fff;font:600 16px/1.4 var(--body);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
footer.foot .ftel a:hover,footer.foot .ftel a:focus-visible{text-decoration-color:#fff}
@media (max-width:700px){footer.foot .ftel a{display:inline-block;padding:10px 0}}
/* Header call button (19 Oct 2026, Ruben: "add phone number to header"): a round button like search and the bag; on computers the
   number shows beside the handset. Hidden while searching. Very narrow phones (under 380px) drop the profile button to make room;
   Sign in is in the menu. */
.pill>.tel{order:0;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;height:var(--hb);min-width:var(--hb);margin:0;padding:0;
  border:1.5px solid rgba(248,248,248,.55);border-radius:999px;background:none;color:var(--white,#F8F8F8);text-decoration:none;font:600 16px/1 var(--body);white-space:nowrap;transition:background .2s,border-color .2s}
.pill>.tel svg{width:20px;height:20px;display:block;flex:none}
.pill>.tel .tel-n{display:none}
.pill>.tel:hover,.pill>.tel:focus-visible{background:rgba(248,248,248,.14);border-color:var(--white,#F8F8F8)}
.pill>.tel:focus-visible{outline:2px solid var(--white,#F8F8F8);outline-offset:3px}
.pill.searching>.tel{display:none!important}
@media (min-width:1100px){.pill>.tel{padding:0 16px 0 13px}.pill>.tel .tel-n{display:inline}}
@media (max-width:379px){.pill .acct{display:none!important}}
/* The full menu's store block (19 Oct): label, address, hours, today's status on its own line, then Call and Directions together.
   Phones keep the two buttons side by side when they fit and stack when they do not. */
.sheet .foot2.sh-visit{display:flex!important;flex-direction:column!important;align-items:flex-start!important;flex-wrap:nowrap!important;gap:4px!important}
.sheet .sh-visit .sh-h{margin:0 0 4px!important}
.sheet .sh-visit address{flex-basis:auto!important;margin:0!important;font:600 16px/1.4 var(--body)!important;color:#fff!important;font-style:normal}
.sheet .sh-visit .sh-hrs{margin:0!important;font:400 16px/1.4 var(--body)!important;color:#C9D0E8!important}
.sheet .sh-visit .sh-status{margin:6px 0 0!important}
.sheet .sh-acts{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin-top:14px}
.sheet .sh-acts .btn{flex:1 1 auto;justify-content:center;min-height:48px!important;padding:0 20px;font-size:16px}
.sheet .sh-acts .sh-call{background:#fff!important;color:#0A1128!important;border-color:#fff!important}
.sheet .sh-acts .sh-call:hover,.sheet .sh-acts .sh-call:focus-visible{background:#E8ECF8!important}
.sheet .sh-acts .btn{font-weight:600!important}
/* phones: with the call button in the header, the section name the header shows while scrolling ("Games", "About") no longer fits
   beside the buttons on a 390px screen (Menu was cut off), so phones show the logo and buttons only in that state */
@media (max-width:429px){.pill[data-state=label] .st[data-s=label] .lab{display:none!important}}
/* the sign-up's consent line (19 Oct 2026) */
footer.foot .fb-fine{grid-column:1/-1;margin:6px 0 0;font:400 14px/1.4 var(--body);color:#0A1128;opacity:.8}