/* Self-hosted fonts (no request to Google before cookie consent). From Fontsource, SIL Open Font License. */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/manrope-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/manrope-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/manrope-greek-400-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/manrope-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/manrope-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/manrope-greek-500-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/manrope-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/manrope-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/manrope-greek-600-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/manrope-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/manrope-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/manrope-greek-700-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/manrope-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/manrope-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/manrope-greek-800-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Saira Semi Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/saira-semi-condensed-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Semi Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/saira-semi-condensed-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Saira Semi Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/saira-semi-condensed-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Semi Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/saira-semi-condensed-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Pack Theory — site styles. One dark theme by design. */
:root {
  color-scheme: dark;
  --ink: #0b0b0c;          /* page ground, matches the logo's black */
  --panel: #131315;        /* raised surfaces */
  --panel-2: #1a1a1d;
  --line: #28282c;
  --line-strong: #3a3a40;
  --text: #f2efe8;         /* the logo's warm white */
  --muted: #a29e96;
  --faint: #6f6c66;
  --gold: #f0ad18;         /* THEORY yellow, sampled from the logo */
  --gold-soft: #f6c451;
  --red: #cf211a;          /* logo red, used only for stock warnings */
  --display: "Saira Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --cut: 14px;             /* chamfer size, echoes the logo's shield */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p a, .prose a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: .01em; }
p { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* chamfered corners — the one signature shape */
.cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }

/* preview strip */
.preview { background: var(--panel-2); color: var(--muted); font-size: 13px; text-align: center; padding: 7px var(--gutter); border-bottom: 1px solid var(--line); }
.preview strong { color: var(--gold-soft); font-weight: 600; }

/* header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(11,11,12,.97); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand img { height: 50px; width: auto; }
.nav { display: flex; gap: 22px; margin-right: auto; }
.nav a { font-size: 14.5px; color: var(--muted); padding-block: 8px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-color: var(--gold); }
.icon-link { position: relative; display: grid; place-items: center; width: 42px; height: 42px; color: var(--text); border: 1px solid var(--line); background: none; cursor: pointer; }
.icon-link:hover { border-color: var(--line-strong); }
.icon-link svg { width: 19px; height: 19px; }
.basket-count { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; border-radius: 10px; }
.basket-count[data-n="0"] { display: none; }
.menu-btn { display: none; }
.head-actions { display: flex; gap: 10px; }

@media (max-width: 1180px) {
  .bar { gap: 14px; min-height: 64px; }
  .brand img { height: 42px; }
  .menu-btn { display: grid; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--ink); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 18px; }
  .nav.open { display: flex; }
  .nav a { font-size: 17px; padding-block: 13px; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-color: var(--line); color: var(--gold-soft); }
  .head-actions { margin-left: auto; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; font: 700 15px/1 var(--body); letter-spacing: .02em; cursor: pointer; border: 0; transition: background .15s, color .15s; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--text); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 70% at 50% 38%, rgba(240,173,24,.10), transparent 70%),
  linear-gradient(180deg, transparent 60%, rgba(255,255,255,.015)); pointer-events: none; }
.hero-inner { position: relative; display: grid; justify-items: center; text-align: center; padding-block: clamp(40px, 7vw, 84px) clamp(44px, 7vw, 80px); gap: 22px; }
.hero h1 { display: grid; justify-items: center; gap: 18px; }
.hero h1 img { width: min(460px, 82vw); height: auto; }
.hero h1 .line { font-size: clamp(26px, 4.2vw, 44px); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--text); }
.hero p { max-width: 54ch; color: var(--muted); font-size: 17px; }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

/* section heads */
.section { padding-block: clamp(52px, 7vw, 88px); }
.section + .section { border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); text-transform: uppercase; letter-spacing: .04em; }
.sec-head p { color: var(--muted); max-width: 52ch; margin-top: 8px; }
.sec-head .more { color: var(--gold-soft); font-weight: 600; font-size: 15px; white-space: nowrap; }
.sec-head .more:hover { color: var(--gold); }

/* category grid */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cat { position: relative; background: var(--ink); padding: 28px 26px 26px; min-height: 176px; display: flex; flex-direction: column; gap: 8px; transition: background .2s; }
.cat:hover { background: var(--panel); }
.cat::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--gold); transition: width .25s; }
.cat:hover::after { width: 100%; }
.cat h3 { font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
.cat p { color: var(--muted); font-size: 14.5px; max-width: 34ch; }
.cat .meta { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--faint); }
.cat .meta .go { color: var(--gold-soft); font-weight: 600; }
.cat.soon .meta .go { color: var(--muted); }
@media (max-width: 860px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } .cat { min-height: 0; } }

/* product cards */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid, .grid[data-cols="3"], .grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid, .grid[data-cols] { grid-template-columns: 1fr; gap: 16px; }
  .grid[data-mcols="2"] { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s; }
.card:hover { border-color: var(--line-strong); }
.card[hidden] { display: none; }
.art { position: relative; aspect-ratio: 5 / 4; background:
  radial-gradient(70% 70% at 50% 45%, #1d1d21, #111113 75%); color: var(--gold); display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.art svg { width: 58%; height: auto; }
.art .tags { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; background: rgba(11,11,12,.8); color: var(--muted); border: 1px solid var(--line); }
.tag.new { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.tag.low { color: #ffb3ad; border-color: rgba(207,33,26,.6); }
.card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card .kicker { font-size: 12.5px; color: var(--muted); }
.card h3 { font-family: var(--body); font-weight: 700; font-size: 16.5px; line-height: 1.3; letter-spacing: 0; }
.card h3 a:hover { color: var(--gold-soft); }
.card .row { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-family: var(--display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
.add { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.grid[data-cols="2"] .card h3 { font-size: 19px; }
.grid[data-cols="2"] .price { font-size: 28px; }
.grid[data-cols="2"] .card-body { padding: 20px 22px 22px; }
@media (max-width: 640px) {
  .grid[data-mcols="2"] .card-body { padding: 12px; }
  .grid[data-mcols="2"] .card h3 { font-size: 14px; }
  .grid[data-mcols="2"] .price { font-size: 20px; }
  .grid[data-mcols="2"] .add { padding: 0 10px; font-size: 12.5px; min-height: 36px; }
  .grid[data-mcols="2"] .kicker { font-size: 11.5px; }
  .grid[data-mcols="2"] .tag { font-size: 10px; padding: 4px 6px; }
}

/* games row */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.game { position: relative; padding: 30px 28px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.game::before { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border: 1px solid var(--line-strong); transform: rotate(45deg); opacity: .6; transition: border-color .25s; }
.game:hover::before { border-color: var(--gold); }
.game h3 { font-size: 30px; text-transform: uppercase; }
.game p { color: var(--muted); max-width: 36ch; }
.game .go { margin-top: auto; color: var(--gold-soft); font-weight: 600; }
.game.soon { background: transparent; border-style: dashed; }
.game.soon h3 { color: var(--muted); }

/* promise list */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.promise { border-top: 2px solid var(--gold); padding-top: 18px; }
.promise h3 { font-size: 22px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.promise p { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .promises { grid-template-columns: 1fr; gap: 26px; } }

/* page header (category, info pages) */
.crumbs { font-size: 13.5px; color: var(--faint); display: flex; gap: 8px; flex-wrap: wrap; padding-top: 28px; }
.crumbs a:hover { color: var(--text); }
.page-head { padding-block: 18px 34px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(38px, 6vw, 64px); text-transform: uppercase; letter-spacing: .02em; }
.page-head p { color: var(--muted); max-width: 62ch; margin-top: 12px; font-size: 16.5px; }

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-block: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 0 15px; background: transparent; border: 1px solid var(--line-strong); color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 600; }
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--ink); border-color: var(--text); }
.toolbar .spacer { flex: 1; }
.select { min-height: 38px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); font-size: 14px; }
.search { min-height: 38px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); font-size: 14.5px; width: min(260px, 100%); }
.search::placeholder { color: var(--faint); }
.view { display: flex; border: 1px solid var(--line-strong); }
.view button { width: 38px; height: 36px; display: grid; place-items: center; background: none; border: 0; color: var(--faint); cursor: pointer; }
.view button[aria-pressed="true"] { background: var(--text); color: var(--ink); }
.view svg { width: 16px; height: 16px; }
.view.mobile { display: none; }
@media (max-width: 640px) { .view.desktop { display: none; } .view.mobile { display: flex; } .search { width: 100%; } }
.result-count { color: var(--faint); font-size: 14px; }
.empty { padding: 40px 0; color: var(--muted); }

/* coming soon */
.soon-panel { margin-block: 40px 20px; padding: clamp(28px, 5vw, 52px); background: var(--panel); border: 1px solid var(--line); display: grid; gap: 16px; max-width: 760px; }
.soon-panel h2 { font-size: clamp(26px, 3.4vw, 36px); text-transform: uppercase; }
.soon-panel p { color: var(--muted); }

/* product page */
.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); padding-block: 26px 60px; align-items: start; }
.product .art { aspect-ratio: 1; border: 1px solid var(--line); }
.product .art svg { width: 55%; }
.product h1 { font-size: clamp(32px, 4.4vw, 50px); text-transform: uppercase; margin-top: 6px; }
.product .kicker { color: var(--muted); font-size: 15px; }
.product .price { font-size: 40px; margin-block: 18px 6px; display: block; }
.stock-line { font-size: 14.5px; color: var(--muted); }
.stock-line.low { color: #ffb3ad; }
.specs { margin: 26px 0; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs dt { color: var(--faint); }
.specs dd { margin: 0; }
.qty-row { display: flex; gap: 12px; flex-wrap: wrap; }
.qty { display: flex; border: 1px solid var(--line-strong); }
.qty button { width: 44px; background: none; border: 0; color: var(--text); cursor: pointer; font-size: 20px; }
.qty input { width: 48px; text-align: center; background: none; border: 0; font-weight: 700; }
.assurances { margin-top: 26px; display: grid; gap: 10px; color: var(--muted); font-size: 14.5px; }
.assurances li { display: flex; gap: 10px; }
.assurances li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; background: var(--gold); transform: rotate(45deg); }
.assurances ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (max-width: 820px) { .product { grid-template-columns: 1fr; } .specs div { grid-template-columns: 120px 1fr; } }

/* prose pages */
.prose { max-width: 68ch; padding-block: 36px 70px; display: grid; gap: 16px; }
.prose h2 { font-size: 26px; text-transform: uppercase; margin-top: 18px; }
.prose p, .prose li { color: #cfcac1; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.note { border-left: 3px solid var(--gold); padding: 12px 16px; background: var(--panel); color: var(--muted); font-size: 14.5px; }

/* email block */
.email-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); }
.email-box .addr { font-family: var(--display); font-size: 24px; font-weight: 700; user-select: all; }
.copy { min-height: 38px; padding: 0 14px; font-size: 13.5px; }

/* newsletter */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.signup h2 { font-size: clamp(28px, 3.6vw, 40px); text-transform: uppercase; }
.signup p { color: var(--muted); margin-top: 10px; }
.signup form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input { flex: 1; min-width: 200px; min-height: 48px; padding: 0 16px; background: var(--panel); border: 1px solid var(--line-strong); }
.form-msg { width: 100%; font-size: 14px; color: var(--muted); min-height: 1.4em; }
@media (max-width: 760px) { .signup { grid-template-columns: 1fr; } }

/* basket */
.basket { display: grid; grid-template-columns: 1fr 340px; gap: 36px; padding-block: 30px 70px; align-items: start; }
.line-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line-item .mini { aspect-ratio: 1; background: var(--panel); border: 1px solid var(--line); color: var(--gold); display: grid; place-items: center; }
.line-item .mini svg { width: 70%; }
.line-item h3 { font-family: var(--body); font-size: 16px; letter-spacing: 0; }
.line-item .sub { color: var(--muted); font-size: 13.5px; }
.line-item .controls { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.linkish { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 13.5px; text-decoration: underline; padding: 0; }
.summary { background: var(--panel); border: 1px solid var(--line); padding: 22px; display: grid; gap: 12px; position: sticky; top: 96px; }
.summary .r { display: flex; justify-content: space-between; color: var(--muted); font-variant-numeric: tabular-nums; }
.summary .total { color: var(--text); font-size: 20px; font-weight: 700; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 860px) { .basket { grid-template-columns: 1fr; } .summary { position: static; } }

/* footer */
.site-footer { border-top: 1px solid var(--line); background: #09090a; padding-block: 56px 28px; font-size: 14.5px; }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot img { width: 150px; height: auto; margin-bottom: 14px; }
.foot p { color: var(--muted); max-width: 32ch; }
.foot h2 { font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }
.legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint); font-size: 12.5px; }
.legal p { max-width: 80ch; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; background: var(--text); color: var(--ink); padding: 12px 18px; font-weight: 700; font-size: 14.5px; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* two-per-row keeps the art shorter so cards don't tower */
@media (min-width: 641px) {
  .grid[data-cols="2"] .art { aspect-ratio: 16 / 9; }
  .grid[data-cols="2"] .art svg { width: 30%; }
}

/* ---------------------------------------------------------------
   Readability pass: larger, heavier small text and higher contrast
   --------------------------------------------------------------- */
:root { --muted: #c4c0b8; --faint: #9a968f; }
body { font-size: 16.5px; font-weight: 500; }
.preview { font-size: 14px; font-weight: 500; }
.nav a { font-size: 15.5px; font-weight: 600; color: #d6d2ca; }
.hero p, .page-head p, .sec-head p { font-weight: 500; }
.cat p, .game p, .promise p { font-size: 15.5px; font-weight: 500; }
.cat .meta { font-size: 14.5px; font-weight: 600; }
.tag { font-size: 12.5px; font-weight: 800; }
.card .kicker { font-size: 14px; font-weight: 600; }
.card h3 { font-size: 17.5px; font-weight: 800; }
.add { font-size: 14.5px; font-weight: 800; }
.chip, .select, .search { font-size: 15px; font-weight: 600; }
.result-count, .crumbs { font-size: 14.5px; font-weight: 600; }
.product .kicker { font-size: 16px; font-weight: 600; }
.specs div, .stock-line, .assurances { font-size: 16px; font-weight: 500; }
.specs dt { font-weight: 600; }
.prose p, .prose li { color: #dcd8d0; font-weight: 500; }
.note { font-size: 15.5px; font-weight: 500; }
.line-item .sub, .linkish { font-size: 14.5px; font-weight: 600; }
.site-footer { font-size: 15.5px; }
.foot p, .foot a { font-weight: 500; }
.foot h2 { font-size: 13.5px; font-weight: 800; }
.legal { font-size: 13.5px; font-weight: 500; }
.form-msg { font-size: 15px; font-weight: 500; }
@media (max-width: 640px) {
  .grid[data-mcols="2"] .card h3 { font-size: 15px; }
  .grid[data-mcols="2"] .kicker { font-size: 12.5px; }
  .grid[data-mcols="2"] .tag { font-size: 11px; }
  .grid[data-mcols="2"] .add { font-size: 13px; }
}

/* ---------------------------------------------------------------
   Foil sheen: a slow band of warm light that sweeps across the
   whole site behind the content, like light moving over foil.
   --------------------------------------------------------------- */
.fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx span {
  position: absolute; top: -60%; left: 0; width: 38vw; min-width: 320px; height: 220%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240,173,24,.045) 25%,
    rgba(246,196,81,.10) 45%,
    rgba(255,238,200,.14) 50%,
    rgba(246,196,81,.10) 55%,
    rgba(240,173,24,.045) 75%,
    transparent 100%);
  transform: translateX(-70vw) rotate(20deg);
  animation: pt-sheen 12s cubic-bezier(.45,0,.3,1) infinite;
  will-change: transform;
}
.fx span + span { width: 14vw; min-width: 120px; opacity: .6; animation-delay: .9s; }
@keyframes pt-sheen {
  0%        { transform: translateX(-70vw) rotate(20deg); }
  60%, 100% { transform: translateX(140vw) rotate(20deg); }
}
main, .site-footer { position: relative; z-index: 1; }
.site-footer { background: rgba(9,9,10,.82); }
@media (prefers-reduced-motion: reduce) { .fx { display: none; } }
/* let the sheen glint faintly through surfaces without hurting legibility */
.cat { background: rgba(11,11,12,.86); }
.cat:hover { background: rgba(19,19,21,.9); }
.cat-grid { background: rgba(40,40,44,.9); }
.card, .game, .soon-panel, .summary, .email-box { background-color: rgba(19,19,21,.9); }
.game.soon { background: rgba(11,11,12,.5); }

/* product photos (uploaded from the admin panel) */
.art.photo { background: #0f0f11; }
.art.photo img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.product .art.photo img { padding: 8%; }
.product-desc { color: #d6d2ca; margin-top: 16px; max-width: 60ch; }
.tag[hidden] { display: none; }
.card .add[disabled] { background: var(--panel-2); color: var(--muted); }
.preview a { color: var(--gold-soft); font-weight: 700; margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   Social links: Whatnot live streams, Instagram, Facebook
   --------------------------------------------------------------- */
.head-social { display: flex; gap: 6px; }
.soc-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--muted); border: 1px solid var(--line); transition: color .15s, border-color .15s; }
.soc-icon svg { width: 20px; height: 20px; }
.soc-icon:hover { color: var(--text); border-color: var(--line-strong); }
.soc-icon.whatnot { color: var(--gold); border-color: rgba(240,173,24,.45); }
.soc-icon.whatnot:hover { background: var(--gold); color: var(--ink); }
.nav-social { display: none; }
@media (max-width: 1180px) {
  .head-social { display: none; }
  .nav-social { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
}
/* (header tweaks for mid widths are at the end of the file) */

.soc-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); color: var(--text) !important; font-weight: 700; font-size: 15px; text-decoration: none; transition: border-color .15s, background .15s; }
.soc-btn svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.soc-btn:hover { border-color: var(--gold); background: rgba(240,173,24,.06); }
.foot-social { display: grid; gap: 8px; justify-items: start; }
.foot-h2b { margin-top: 26px; }
.nav .soc-btn { border-bottom: 1px solid var(--line-strong); padding-block: 0; font-size: 15px; }

.live-sec { position: relative; }
.live { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.live-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px; }
.live-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(207,33,26,.6); animation: pt-live 1.8s infinite; }
@keyframes pt-live { 0% { box-shadow: 0 0 0 0 rgba(207,33,26,.6); } 70% { box-shadow: 0 0 0 10px rgba(207,33,26,0); } 100% { box-shadow: 0 0 0 0 rgba(207,33,26,0); } }
.live h2 { font-size: clamp(30px, 4vw, 46px); text-transform: uppercase; letter-spacing: .03em; }
.live-copy p:not(.live-badge) { color: var(--muted); margin-top: 14px; max-width: 52ch; }
.live-links { display: grid; gap: 12px; }
.soc-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: rgba(19,19,21,.9); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .2s; }
.soc-card svg { width: 30px; height: 30px; color: var(--gold); flex: none; }
.soc-card span { font-family: var(--display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.soc-card::after { content: "→"; margin-left: auto; color: var(--gold-soft); font-weight: 700; font-size: 20px; }
.soc-card:hover { border-color: var(--gold); transform: translateX(4px); }
.soc-card.whatnot { background: var(--gold); border-color: var(--gold); }
.soc-card.whatnot svg, .soc-card.whatnot span, .soc-card.whatnot::after { color: var(--ink); }
@media (max-width: 760px) { .live { grid-template-columns: 1fr; } }
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid rgba(240,173,24,.55); color: var(--gold-soft); font-weight: 800; font-size: 14px; letter-spacing: .02em; white-space: nowrap; transition: background .15s, color .15s; }
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pt-live 1.8s infinite; }
.live-pill:hover { background: var(--gold); color: var(--ink); }

/* ---------------------------------------------------------------
   Photo hero: shop scene with the sign, fading into the page
   --------------------------------------------------------------- */
.hero-photo .hero-img { position: relative; display: block; }
.hero-photo .hero-img img { width: 100%; height: clamp(320px, 50vw, 720px); object-fit: cover; object-position: 50% 30%; }
.hero-photo .hero-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(11,11,12,.35) 0%, transparent 18%, transparent 48%, rgba(11,11,12,.75) 76%, var(--ink) 94%),
  linear-gradient(90deg, rgba(11,11,12,.55) 0%, transparent 16%, transparent 84%, rgba(11,11,12,.55) 100%); }
.hero-photo .hero-inner { margin-top: clamp(-150px, -9vw, -56px); padding-top: 0; position: relative; z-index: 1; }
.hero-photo h1 .line { text-shadow: 0 2px 18px rgba(0,0,0,.8); }
.hero-photo p { text-shadow: 0 1px 10px rgba(0,0,0,.9); }
@media (max-width: 640px) {
  .hero-photo .hero-img img { height: 62vw; min-height: 260px; object-position: 50% 25%; }
  .hero-photo .hero-inner { margin-top: -36px; }
}

/* category grid: games on the first row, product types and new releases on the second */
.cat-grid { grid-template-columns: repeat(12, 1fr); }
.cat { grid-column: span var(--span, 4); }
@media (max-width: 860px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } .cat { grid-column: auto; } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } }
@media (max-width: 1180px) { .live-pill { padding: 0 12px; } }

/* ---------------------------------------------------------------
   Poster hero: launch poster beside the intro copy
   --------------------------------------------------------------- */
.hero-poster { position: relative; overflow: hidden; }
.hero-poster .poster-bg { position: absolute; inset: -40px; background: url("../img/poster-blur.jpg") center / cover no-repeat; opacity: .35; filter: saturate(1.1); }
.hero-poster .poster-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(11,11,12,.85) 45%, rgba(11,11,12,.55) 100%), linear-gradient(180deg, transparent 70%, var(--ink) 100%); }
.poster-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(40px, 6vw, 72px); }
.poster-copy { display: grid; gap: 22px; justify-items: start; text-align: left; }
.poster-copy h1 { display: block; }
.poster-copy h1 .line { font-size: clamp(38px, 5.4vw, 68px); letter-spacing: .06em; line-height: 1.02; font-weight: 700; display: block; }
.poster-copy p { color: var(--muted); font-size: 17.5px; max-width: 46ch; }
.poster-copy .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.poster-img { display: block; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(240,173,24,.25); --cut: 22px; }
.poster-img img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .poster-grid { grid-template-columns: 1fr; gap: 26px; padding-block: 20px 44px; }
  .poster-img { order: -1; max-width: 460px; width: 100%; justify-self: center; }
  .poster-copy { justify-items: center; text-align: center; }
  .poster-copy .actions { justify-content: center; }
}

/* ---------------------------------------------------------------- language, account, wishlist */
.lang-switch { display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 8px; font: 700 13px/1 var(--display); letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line-strong); }
.lang-switch:hover { color: var(--text); border-color: var(--text); }
.icon-link { position: relative; }
.acct-dot { position: absolute; top: 6px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); }
.acct-dot[hidden] { display: none; }

.art-wrap { position: relative; }
.wish { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; background: rgba(11,11,12,.72); border: 1px solid var(--line-strong); color: var(--text); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.wish svg { width: 19px; height: 19px; }
.wish:hover { border-color: var(--text); }
.wish.on { color: var(--gold); border-color: var(--gold); }
.wish.on svg { fill: currentColor; }
.wish-lg { position: static; width: auto; height: 48px; padding: 0 16px; gap: 10px; display: inline-flex; align-items: center; font: 700 14.5px/1 var(--body); background: transparent; }
.wish-lg svg { width: 20px; height: 20px; }

.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.form-small { width: 100%; font-size: 13px; line-height: 1.5; color: var(--faint); font-weight: 500; }
.form-small a { color: var(--muted); text-decoration: underline; }
.f-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--muted); margin-bottom: -4px; }
.summary .select { width: 100%; min-height: 44px; }
.optin { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--muted); font-weight: 500; cursor: pointer; }
.optin input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--gold); }

/* account page */
.account { padding-block: 10px 70px; }
.acc-demo { margin-bottom: 22px; }
.acc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
.acc-panel { background: rgba(19,19,21,.9); border: 1px solid var(--line); padding: clamp(20px, 4vw, 34px); }
.acc-narrow { max-width: 520px; }
.acc-panel h2, .acc-block h2 { font-size: 22px; text-transform: uppercase; margin-bottom: 12px; }
.acc-why ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.acc-why li { padding-left: 26px; position: relative; font-weight: 600; }
.acc-why li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.acc-why p { color: var(--muted); font-size: 14.5px; }
.acc-switch { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); margin-bottom: 22px; }
.acc-switch button, .acc-tabs button { background: none; border: 0; color: var(--muted); font: 700 14.5px/1 var(--body); min-height: 44px; padding: 0 14px; cursor: pointer; }
.acc-switch button[aria-selected="true"] { background: var(--text); color: var(--ink); }
.acc-form { display: grid; gap: 16px; }
.acc-form .btn { justify-self: start; }
.acc-field { display: grid; gap: 6px; min-width: 0; }
.acc-field label { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.acc-field input, .acc-field select { width: 100%; min-height: 46px; padding: 0 14px; background: var(--ink); border: 1px solid var(--line-strong); color: var(--text); font-size: 16px; }
.acc-field input:focus { border-color: var(--gold); outline: none; }
.acc-field small { color: var(--faint); font-size: 13px; font-weight: 500; }
.acc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
.acc-alt { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.acc-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.acc-top p { color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.acc-flash { padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--panel); margin-bottom: 18px; font-weight: 600; }
.acc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.acc-tabs button { white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.acc-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--gold); }
.acc-pane { max-width: 820px; }
.acc-order { background: rgba(19,19,21,.9); border: 1px solid var(--line); padding: 20px; margin-bottom: 16px; }
.acc-order header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 12px; }
.acc-order h3 { font-size: 19px; }
.acc-date { color: var(--muted); font-size: 14px; font-weight: 600; }
.acc-status { margin-left: auto; font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border: 1px solid var(--line-strong); color: var(--muted); }
.acc-status.s-shipped { color: var(--gold); border-color: var(--gold); }
.acc-status.s-cancelled, .acc-status.s-refunded { color: var(--faint); }
.acc-order ul { list-style: none; padding: 0; margin: 0; }
.acc-order li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.acc-order li a:hover { color: var(--gold); }
.acc-order li span { color: var(--muted); }
.acc-order footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 14.5px; }
.acc-order footer strong { color: var(--text); font-size: 17px; margin-left: 6px; }
.acc-track { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--gold); overflow-wrap: anywhere; }
.acc-details { max-width: 560px; }
.acc-kicker { font-size: 12.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.acc-wish .line-item .controls { display: flex; gap: 18px; margin-top: 6px; }
.line-item .mini.photo img { width: 100%; height: 100%; object-fit: cover; }
.acc-block { padding-block: 4px 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; justify-items: start; }
.acc-block p { color: var(--muted); max-width: 60ch; }
.acc-news { font-weight: 600; }
.acc-del { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #e3322a; }
@media (max-width: 760px) {
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-order li { grid-template-columns: minmax(0, 1fr) auto; }
  .acc-order li strong { grid-column: 2; }
  .acc-order li span { grid-column: 2; grid-row: 1; }
  .acc-row { grid-template-columns: minmax(0, 1fr); }
}

/* header fit: the logo never shrinks; the language switch matches the icon buttons */
.brand { flex: none; }
.lang-switch { height: 42px; min-width: 42px; align-self: center; }

/* header: a little wider than the page so the full menu fits in both languages */
.site-header .wrap { max-width: calc(1320px + 2 * var(--gutter)); }
@media (min-width: 1181px) and (max-width: 1399px) {
  .bar { gap: 18px; }
  .nav { gap: 16px; }
  .head-social { display: none; }  /* Instagram and Facebook stay in the footer and on the homepage */
}

/* ---------------------------------------------------------------- coming-soon strip and popup */
.soon-strip { color: var(--text); font-size: 14px; font-weight: 600; }
.soon-strip strong { color: var(--gold); font-weight: 800; }
.strip-btn { background: none; border: 0; padding: 0; margin-left: 6px; color: var(--gold); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.strip-btn:hover { color: var(--gold-soft); }

.cs-modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: clamp(26px, 5vw, 40px); margin: auto;
  background: #0b0b0c; color: var(--text); border: 1px solid var(--line-strong); text-align: center; }
.cs-modal::backdrop { background: rgba(5,5,6,.86); }
.cs-modal[open] { display: grid; justify-items: center; gap: 12px; animation: cs-in .35s ease-out; }
@keyframes cs-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.cs-logo { width: min(210px, 56vw); height: auto; margin-bottom: 4px; }
.cs-kicker { font: 700 12.5px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.cs-modal h2 { font-size: clamp(32px, 7vw, 46px); text-transform: uppercase; letter-spacing: .06em; line-height: 1; }
.cs-text { color: var(--muted); font-weight: 500; max-width: 42ch; }
.cs-modal form { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; text-align: left; }
.cs-modal form input[type=email] { flex: 1; min-width: 200px; min-height: 48px; padding: 0 16px; background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); font-size: 16px; }
.cs-modal form input[type=email]:focus { border-color: var(--gold); outline: none; }
.cs-modal .form-msg { color: var(--gold-soft); font-weight: 700; }
.cs-foot { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.cs-foot:only-child, .cs-foot > :only-child { margin-inline: auto; }
.cs-lang { font-weight: 700; font-size: 14px; color: var(--muted); border: 1px solid var(--line-strong); padding: 7px 12px; }
.cs-lang:hover { color: var(--text); border-color: var(--text); }
.cs-foot .linkish { font-size: 14px; color: var(--muted); font-weight: 700; }
.cs-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; background: none; border: 1px solid var(--line); color: var(--muted); font-size: 16px; cursor: pointer; }
.cs-x:hover { color: var(--text); border-color: var(--text); }
@media (max-width: 480px) { .cs-modal form .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cs-modal[open] { animation: none; } }
.cs-modal h2:focus { outline: none; }
/* locked coming-soon mode: the page behind is only a dim backdrop */
html.cs-locked, html.cs-locked body { overflow: hidden; }
html.cs-locked .cs-modal::backdrop { background: rgba(5,5,6,.98); }
/* popup language switch (Greek first) */
.cs-switch { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); }
.cs-switch button { min-height: 38px; padding: 0 16px; background: none; border: 0; color: var(--muted); font: 700 14px/1 var(--body); cursor: pointer; }
.cs-switch button[aria-pressed="true"] { background: var(--text); color: var(--ink); }
.cs-switch button:hover:not([aria-pressed="true"]) { color: var(--text); }
.cs-block { display: grid; justify-items: center; gap: 12px; width: 100%; }
.cs-block[hidden] { display: none; }
.cs-browse { margin-top: 4px; font-size: 14px; color: var(--muted); font-weight: 700; }
.cs-modal h2:focus-visible { outline: none; }
.cs-modal:focus { outline: none; }
.cs-switch { margin-bottom: 6px; }
.pv-bar { background: #2a1f05; color: var(--text); border-bottom-color: rgba(240,173,24,.4); }
.pv-bar strong { color: var(--gold); }
.pv-bar a { color: var(--gold); font-weight: 700; text-decoration: underline; }

/* SEO copy under game and category grids */
.seo-copy { border-top: 1px solid var(--line); }
.seo-copy .prose { max-width: 760px; }
.seo-copy h2 { font-size: clamp(22px, 2.6vw, 28px); text-transform: uppercase; }
.seo-copy h2.seo-q { margin-top: 30px; }
.seo-copy h3 { font-family: var(--body); font-size: 16.5px; letter-spacing: 0; margin-top: 18px; color: var(--text); }
.seo-copy p { color: var(--muted); }

/* Speed: blurring the whole screen while the sheen animates behind it makes slower devices redraw the
   entire page every frame. The popup uses a plain dark backdrop instead, and the sheen stops while it's open. */
html.cs-locked .fx, body:has(.cs-modal[open]) .fx { display: none; }

/* empty catalogue */
.stock-soon { margin-inline: auto; text-align: left; }
.stock-soon form { display: flex; flex-wrap: wrap; gap: 10px; }
.stock-soon form input[type=email] { flex: 1; min-width: 200px; min-height: 48px; padding: 0 16px; background: var(--ink); border: 1px solid var(--line-strong); color: var(--text); font-size: 16px; }
.stock-soon-line { color: var(--muted); font-weight: 600; padding: 26px; border: 1px dashed var(--line-strong); }
.stock-soon-line a { color: var(--gold); white-space: nowrap; }
/* welcome popup */
.cs-go { width: 100%; margin-top: 4px; min-height: 50px; font-size: 16px; }
.cs-modal[data-mode="welcome"] .form-small { margin-top: -2px; }

/* client legal documents */
.legal-doc h3 { font-size: 1.02rem; margin: 1.4em 0 .4em; }
.legal-doc .legal-copy { color: var(--faint); font-size: 13px; margin-top: 2em; }
.legal-updated { color: var(--faint); font-size: 13.5px; margin-top: 6px; }
.legal .legal-links a { color: inherit; }

/* pre-orders */
.preorder-box { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--gold); font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.preorder-box strong { color: var(--text); margin-right: 4px; }
.preorder-box a { white-space: nowrap; }

/* games dropdown in the header */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; font: inherit; font-size: 15.5px; font-weight: 600; color: #d6d2ca; cursor: pointer; white-space: nowrap; }
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { color: var(--text); }
.nav-dd-btn.on { color: var(--text); border-color: var(--gold); }
.nav-dd-btn svg { width: 12px; height: 12px; transition: transform .15s; }
.nav-dd.open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-menu { display: none; position: absolute; top: 100%; left: -16px; min-width: 220px; padding: 8px; background: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 30; flex-direction: column; }
.nav-dd-menu a { padding: 10px 12px !important; border-bottom: 0 !important; }
.nav-dd-menu a:hover { background: rgba(255,255,255,.04); }
.nav-dd-menu a[aria-current="page"] { color: var(--gold-soft); }
.nav-dd-menu .nav-dd-all { margin-top: 4px; border-top: 1px solid var(--line) !important; color: var(--gold-soft) !important; font-size: 14.5px !important; }
.nav-dd.open .nav-dd-menu { display: flex; }
@media (min-width: 1181px) and (hover: hover) {
  .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: flex; }
  .nav-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; } /* keeps hover alive between button and menu */
}
@media (max-width: 1180px) {
  .nav-dd { flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line); }
  .nav-dd-btn { font-size: 17px; padding: 13px 0; justify-content: space-between; border-bottom: 0; }
  .nav-dd-btn.on { color: var(--gold-soft); }
  .nav-dd-menu { position: static; box-shadow: none; border: 0; padding: 0 0 10px 14px; min-width: 0; background: none; }
  .nav-dd-menu a { font-size: 16px !important; padding: 9px 0 !important; }
}

/* social icons in their brand colours */
.soc-icon.instagram svg, .soc-btn.instagram svg, .soc-card.instagram svg { color: #FF0069; }
.soc-icon.facebook svg, .soc-btn.facebook svg, .soc-card.facebook svg { color: #0866FF; }
.soc-icon.instagram:hover svg, .soc-icon.facebook:hover svg { filter: brightness(1.15); }
.soc-icon.whatnot { color: inherit; border-color: var(--line); }
.soc-icon.whatnot:hover { background: none; border-color: var(--line-strong); }

/* cookie consent banner */
.ck { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.ck[hidden] { display: none; }
.ck-box { pointer-events: auto; width: 100%; max-width: 760px; background: var(--panel, #131315); color: var(--text); border: 1px solid var(--line-strong); border-top: 3px solid var(--gold);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 20px 22px 18px; }
.ck-box h2 { font-size: 18px; margin: 0 0 8px; letter-spacing: .02em; }
.ck-box p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ck-box p a { color: var(--gold-soft); white-space: nowrap; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.ck-actions .btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.ck-actions [data-ck-reject], .ck-actions [data-ck-accept] { min-width: 170px; }
.ck-settings { margin-top: 14px; border-top: 1px solid var(--line); }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.ck-row b { display: block; font-size: 15px; }
.ck-row small { display: block; color: var(--faint); font-size: 13px; margin-top: 2px; }
.ck-row input { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .ck { left: 0; right: 0; bottom: 0; }
  .ck-box { border-left: 0; border-right: 0; padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; }
  .ck-actions { justify-content: stretch; }
  .ck-actions .btn { flex: 1 1 100%; min-width: 0; }
  .ck-actions [data-ck-settings] { order: 3; }
}
.ck [hidden] { display: none !important; }

/* ---------------------------------------------------------------
   Holo hero: a dealt hand of three Pack Theory cards. The front card
   carries the logo under a holographic foil that follows the pointer.
   --------------------------------------------------------------- */
.hero-holo { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-holo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(42% 60% at 72% 48%, rgba(240,173,24,.16), transparent 70%),
  radial-gradient(30% 40% at 80% 70%, rgba(207,33,26,.10), transparent 70%); }
/* looping space video behind the hero text and cards; darkened so the copy stays readable */
.holo-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050507; }
.holo-bg video { width: 100%; height: 100%; object-fit: cover; opacity: .85; filter: saturate(1.05); }
.holo-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,11,12,.86) 0%, rgba(11,11,12,.6) 30%, rgba(11,11,12,.12) 62%, rgba(11,11,12,.18) 100%),
              linear-gradient(0deg, rgba(11,11,12,.9) 0%, transparent 28%), linear-gradient(180deg, rgba(11,11,12,.55) 0%, transparent 18%); }
.hero-holo:has(.holo-bg)::before { z-index: 1; }
.holo-bg ~ .holo-grid { z-index: 2; }
@media (max-width: 860px) {
  .holo-bg::after { background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.2) 35%, rgba(11,11,12,.8) 60%, rgba(11,11,12,.95) 100%); }
}
.holo-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  min-height: clamp(520px, 64vh, 680px); padding-block: clamp(40px, 6vw, 72px); }
.holo-copy h1 { font-size: clamp(40px, 4.4vw, 66px); line-height: .95; letter-spacing: .005em; text-transform: uppercase; font-weight: 700; color: var(--text); }
.holo-copy p { margin-top: 22px; max-width: 46ch; color: var(--muted); font-size: 17.5px; line-height: 1.6; }
.holo-copy .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; justify-content: flex-start; }
.holo-facts { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 9px; font-size: 15px; color: var(--muted); }
.holo-facts li { display: flex; align-items: center; gap: 10px; }
.holo-facts svg { width: 16px; height: 16px; color: var(--gold); flex: none; }

.holo-stage { position: relative; height: clamp(400px, 46vw, 560px); perspective: 1400px; }
.pcard { position: absolute; top: 50%; left: 50%; width: clamp(220px, 24vw, 320px); aspect-ratio: 63 / 88; border-radius: 4.6% / 3.3%;
  transform-origin: 50% 85%; box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4); }
/* card backs: deep red with a gold lattice and the brand mark */
.pback { background:
    repeating-linear-gradient(45deg, rgba(246,196,81,.16) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(246,196,81,.16) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 50% 50%, #8e1712, #4c0b09 75%);
  border: 6px solid #141416; outline: 1px solid rgba(246,196,81,.45); outline-offset: -11px; }
.pback-mark { position: absolute; inset: 0; margin: auto; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: #141416 url("../img/logo-160.webp") center / 82% auto no-repeat; box-shadow: 0 0 0 2px rgba(246,196,81,.6), 0 0 0 7px #141416; }
.b1 { transform: translate(-50%, -50%) translate(-34%, 4%) rotate(-14deg); }
.b2 { transform: translate(-50%, -50%) translate(30%, 2%) rotate(11deg); }
/* front card */
.pfront { transform: translate(-50%, -50%) translateY(-3%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); cursor: pointer;
  transition: transform .5s cubic-bezier(.2,.8,.2,1); box-shadow: none; }
.pfront-inner { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d;
  background: linear-gradient(150deg, #f6c451, #b07a0c 40%, #f6c451 60%, #8a5e06); padding: 7px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4); }
.pfront-face, .pfront .foil, .pfront .glare { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pfront-back { position: absolute; inset: 0; border-radius: inherit; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(246,196,81,.16) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(246,196,81,.16) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 50% 50%, #8e1712, #4c0b09 75%);
  border: 6px solid #141416; outline: 1px solid rgba(246,196,81,.45); outline-offset: -11px; }
.pfront.is-flipping .pfront-inner { animation: card-flip .9s cubic-bezier(.45,.05,.3,1); }
@keyframes card-flip { 0% { transform: rotateY(0) translateZ(0); } 50% { transform: rotateY(180deg) translateZ(40px) scale(1.04); } 100% { transform: rotateY(360deg) translateZ(0); } }
.pfront.is-tilting { transition: transform .08s linear; }
.pfront-face { position: relative; height: 100%; z-index: 1; border-radius: 3.6% / 2.6%; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(90% 70% at 50% 38%, #24201a, #0d0d0f 70%); padding: 12%; }
.pfront-face img { width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.pfront-rule { width: 40%; height: 1px; background: linear-gradient(90deg, transparent, rgba(246,196,81,.8), transparent); }
.pfront-line { font-family: var(--display); font-weight: 600; font-size: clamp(11px, 1.05vw, 14px); letter-spacing: .14em; text-transform: uppercase; color: #d9cfbd; text-align: center; }
/* holographic foil + glare, positioned by --mx / --my */
.pfront .foil, .pfront .glare { position: absolute; inset: 7px; border-radius: 3.6% / 2.6%; pointer-events: none; }
.pfront .foil { mix-blend-mode: screen; opacity: .14; transition: opacity .4s; background:
    linear-gradient(115deg, transparent 20%, rgba(255,72,120,.55) 32%, rgba(255,214,90,.55) 40%, rgba(90,255,170,.5) 48%, rgba(70,190,255,.55) 56%, rgba(180,110,255,.55) 64%, transparent 76%),
    repeating-linear-gradient(25deg, rgba(255,255,255,0) 0 5px, rgba(255,255,255,.07) 5px 6px);
  background-size: 260% 260%, 100% 100%; background-position: var(--mx, 50%) var(--my, 50%), 0 0; }
.pfront .glare { mix-blend-mode: overlay; opacity: .5; transition: opacity .4s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), rgba(255,255,255,.08) 30%, transparent 60%); }

/* one orchestrated moment: the hand is dealt, then the foil catches the light once */
@media (prefers-reduced-motion: no-preference) {
  .b1 { animation: deal-b1 .9s cubic-bezier(.2,.8,.2,1) .15s both; }
  .b2 { animation: deal-b2 .9s cubic-bezier(.2,.8,.2,1) .25s both; }
  .pfront { animation: deal-front .9s cubic-bezier(.2,.8,.2,1) .35s both; }
  .pfront .foil { animation: foil-sweep 1.6s ease-in-out 1.1s both; }
  .pfront.is-tilting .foil { animation: none; }
  .pfront.dealt .foil { animation: none; }
}
@keyframes deal-b1 { from { opacity: 0; transform: translate(-50%, -40%) rotate(0deg); } }
@keyframes deal-b2 { from { opacity: 0; transform: translate(-50%, -40%) rotate(0deg); } }
@keyframes deal-front { from { opacity: 0; transform: translate(-50%, -38%) scale(.94); } }
@keyframes foil-sweep { 0% { background-position: 0% 0%, 0 0; opacity: .14; } 50% { opacity: .45; } 100% { background-position: 100% 100%, 0 0; opacity: .14; } }

@media (max-width: 860px) {
  .holo-grid { grid-template-columns: 1fr; min-height: 0; padding-block: 20px 44px; gap: 8px; }
  .holo-stage { order: -1; height: clamp(300px, 92vw, 420px); }
  .pcard { width: clamp(170px, 46vw, 240px); }
  .holo-copy { text-align: center; display: grid; justify-items: center; }
  .holo-copy h1 { font-size: clamp(38px, 11vw, 60px); max-width: none; }
  .holo-copy .actions { justify-content: center; }
  .holo-facts { justify-items: start; text-align: left; }
}
/* Phones: a shorter hero so the next section peeks in at the bottom and it's obvious the page scrolls */
@media (max-width: 700px) {
  .holo-grid { padding-block: 6px 42px; gap: 4px; }
  .holo-stage { height: clamp(210px, 58vw, 270px); }
  .pcard { width: clamp(118px, 33vw, 165px); }
  .holo-copy h1 { font-size: clamp(32px, 9.6vw, 44px); }
  .holo-copy p { margin-top: 12px; font-size: 15.5px; line-height: 1.5; }
  .holo-copy .actions { margin-top: 18px; }
  .holo-facts { display: none; }
}
.pfront.is-tilting .foil { opacity: .42; }
.pfront.is-tilting .glare { opacity: 1; }

/* idle life once the hand is dealt: the fan floats, the backs sway, hovering spreads the hand,
   and a glint crosses the foil every few seconds while nobody is touching the card */
.holo-fan { position: absolute; inset: 0; perspective: 1400px; }
.pfront { perspective: 1600px; }
.holo-stage.dealt .pcard { animation: none; }
.holo-stage.dealt .pback { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: no-preference) {
  .holo-stage.dealt .holo-fan { animation: fan-float 7s ease-in-out infinite; }
  .holo-stage.dealt .b1 { animation: sway-b1 9s ease-in-out infinite; }
  .holo-stage.dealt .b2 { animation: sway-b2 9s ease-in-out infinite; }
  .holo-stage.dealt .pfront:not(.is-tilting) .foil { animation: foil-glint 8s ease-in-out 1s infinite; }
}
.holo-stage.dealt:hover .b1 { transform: translate(-50%, -50%) translate(-46%, 6%) rotate(-19deg); }
.holo-stage.dealt:hover .b2 { transform: translate(-50%, -50%) translate(42%, 4%) rotate(16deg); }
@keyframes fan-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes sway-b1 { 0%, 100% { rotate: 0deg; } 50% { rotate: -1.6deg; } }
@keyframes sway-b2 { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.4deg; } }
@keyframes foil-glint { 0%, 70%, 100% { background-position: 0% 0%, 0 0; opacity: .14; } 82% { opacity: .42; } 94% { background-position: 100% 100%, 0 0; opacity: .14; } }

/* Shop by category on phones: two compact tiles per row, name + status only */
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cat { grid-column: auto !important; min-height: 0; padding: 18px 16px 16px; gap: 6px; }
  .cat h3 { font-size: clamp(14px, 4.3vw, 19px); letter-spacing: .01em; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .cat p { display: none; }
  .cat .meta { padding-top: 10px; font-size: 12.5px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .cat .meta .go { font-size: 14px; }
}

/* ---------------------------------------------------------------
   Hero carousel: the holo card hand, then slides from the admin panel.
   Native swipe (scroll snap), arrows, dots, auto-advance every 6s.
   --------------------------------------------------------------- */
.hero-carousel { position: relative; border-bottom: 1px solid var(--line); }
.hc-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.hc-track::-webkit-scrollbar { display: none; }
.hc-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; }
.hc-slide.hero-holo { border-bottom: 0; }
.hc-media { background: #000; }
.hc-media picture { display: contents; }
.hc-media-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hc-blur { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(34px) brightness(.45) saturate(1.2); transform: translateZ(0); }
.hc-media.has-text::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,12,.82) 0%, rgba(11,11,12,.45) 40%, transparent 70%), linear-gradient(0deg, rgba(11,11,12,.7), transparent 45%); }
.hc-cover { position: absolute; inset: 0; z-index: 1; }
.hc-text { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px;
  padding-block: 40px clamp(64px, 8vw, 96px); }
.hc-text h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: .98; text-transform: uppercase; max-width: 16ch; color: var(--text); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.hc-text p { max-width: 46ch; color: #e4dfd6; font-size: 17px; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.hc-text .btn { margin-top: 6px; }
.hc-arrow { position: absolute; top: 50%; z-index: 5; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; cursor: pointer;
  background: rgba(11,11,12,.6); color: var(--text); border: 1px solid var(--line-strong); backdrop-filter: blur(4px); transition: border-color .15s, background .15s; }
.hc-arrow:hover { border-color: var(--gold); background: rgba(11,11,12,.85); }
.hc-arrow svg { width: 20px; height: 20px; }
.hc-prev { left: 16px; } .hc-next { right: 16px; }
.hc-dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.hc-dot { pointer-events: auto; width: 28px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hc-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(242,239,232,.35); transition: background .2s; }
.hc-dot[aria-current="true"]::before { background: var(--gold); }
.hc-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 860px) {
  .hc-arrow { display: none; }
  .hc-text { justify-content: flex-end; padding-bottom: 64px; }
}
/* Automatic motion for every uploaded slide (nothing to set up in the admin):
   the picture slowly pushes in and drifts (direction alternates slide to slide), the blurred fill drifts the other way,
   a gold light sweeps across once, and the headline, line and button rise in one after another.
   Restarts each time the slide comes round; switched off for visitors who prefer reduced motion. */
.hc-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hc-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,214,120,.06) 35%, rgba(255,236,190,.38) 50%, rgba(255,214,120,.06) 65%, transparent);
  transform: skewX(-18deg); mix-blend-mode: screen; }
.hc-anim .hc-media .hc-media-el, .hc-anim .hc-media .hc-blur { will-change: transform; }
.hc-anim .hc-media.is-active:not(.is-video) .hc-fg .hc-media-el { animation: hc-push 7.5s cubic-bezier(.25,.1,.25,1) both; }
.hc-anim .hc-media.is-active.alt:not(.is-video) .hc-fg .hc-media-el { animation-name: hc-push-alt; }
.hc-anim .hc-media.is-active .hc-blur { animation: hc-drift 9s ease-in-out both; }
.hc-anim .hc-media.is-active .hc-shine::before { animation: hc-sweep 1.6s cubic-bezier(.4,0,.2,1) .35s both; }
.hc-anim .hc-media .hc-text > * { opacity: 0; transform: translateY(22px); }
.hc-anim .hc-media.is-active .hc-text > * { animation: hc-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hc-anim .hc-media.is-active .hc-text > :nth-child(1) { animation-delay: .25s; }
.hc-anim .hc-media.is-active .hc-text > :nth-child(2) { animation-delay: .42s; }
.hc-anim .hc-media.is-active .hc-text > :nth-child(3) { animation-delay: .6s; }
@keyframes hc-push { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.2%, -.6%, 0); } }
@keyframes hc-push-alt { from { transform: scale(1.06) translate3d(1.2%, .6%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
@keyframes hc-drift { from { transform: scale(1) translate3d(2%, 0, 0); } to { transform: scale(1.08) translate3d(-2%, 0, 0); } }
@keyframes hc-sweep { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
@keyframes hc-rise { to { opacity: 1; transform: none; } }

/* Phones: the picture sits full width at its own shape (nothing cut off, never stretched),
   the headline and button go right under it, and a blurred copy of the picture fills the rest.
   Works for any upload: landscape, square or a portrait phone version. */
@media (max-width: 700px) {
  .hc-media { display: flex; flex-direction: column; justify-content: center; }
  .hc-media .hc-fg { display: block; position: relative; z-index: 1; flex: 0 1 auto; min-height: 0; }
  .hero-carousel { --hc-h: clamp(540px, 74svh, 640px); }
  .hc-slide { height: var(--hc-h); }
  .hc-holo .holo-grid { height: 100%; align-content: center; }
  .hc-media .hc-media-el { position: relative; inset: auto; display: block; width: 100%; height: auto; max-height: calc(var(--hc-h) - 70px); object-fit: contain; }
  .hc-media.has-text .hc-media-el { max-height: calc(var(--hc-h) - 260px); }
  .hc-media video.hc-media-el { aspect-ratio: 16 / 9; position: relative; z-index: 1; }
  .hc-media .hc-text { height: auto; flex: 0 0 auto; width: 100%; padding-block: 18px 56px; gap: 10px; }
  .hc-media .hc-blur { filter: blur(30px) brightness(.55) saturate(1.25); }
  .hc-media .hc-fg .hc-media-el { -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
  .hc-media .hc-text h2 { font-size: clamp(30px, 9vw, 40px); }
  .hc-media .hc-text p { font-size: 15.5px; }
  .hc-media.has-text::after { background: linear-gradient(0deg, rgba(11,11,12,.75), transparent 55%); }
  .hc-media .hc-cover { z-index: 2; }
}

/* footer credit */
.legal .credit { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.legal .credit a { font-weight: 700; }
.legal .credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242,239,232,.25); }
.legal .credit a:hover { color: var(--gold); text-decoration-color: currentColor; }

/* Phones with a hero video: the video fills the whole hero behind the headline and buttons, lightly dimmed.
   The hero is exactly the video's shape (16:9), so it fills the whole background and nothing is cut off:
   the hero has the video's own 16:9 shape, so the whole picture shows. The card hand is left out so it doesn't cover the video. */
@media (max-width: 700px) {
  .hero-carousel:has(.holo-bg) { --hc-h: calc(100vw * 9 / 16); }
  section.hero-holo:has(.holo-bg) { height: calc(100vw * 9 / 16); }
  .hero-holo .holo-bg video { opacity: 1; filter: none; object-fit: cover; }
  .hero-holo .holo-bg::after { background: linear-gradient(0deg, rgba(11,11,12,.8) 0%, rgba(11,11,12,.35) 40%, rgba(11,11,12,0) 65%); }
  .holo-bg ~ .holo-grid .holo-stage { display: none; }
  .hero-holo .holo-bg ~ .holo-grid { height: 100%; min-height: 0; align-content: end; padding-block: 8px 26px; gap: 0; }
  .holo-bg ~ .holo-grid .holo-copy h1 { font-size: clamp(20px, 6.2vw, 30px); white-space: nowrap; text-shadow: 0 2px 14px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.7); }
  .holo-bg ~ .holo-grid .holo-copy h1 br { display: none; }
  .holo-bg ~ .holo-grid .holo-copy h1 + .actions { margin-top: 10px; gap: 8px; }
  .holo-bg ~ .holo-grid .holo-copy .actions .btn { min-height: 38px; padding-inline: 16px; font-size: 14px; }
  .hero-carousel:has(.holo-bg) .hc-dots { bottom: 4px; }
  /* other slides in the same (shorter) carousel: the picture fits inside, a blurred copy fills round it,
     and the headline and button sit over the bottom */
  .hero-carousel:has(.holo-bg) .hc-media { display: block; }
  .hero-carousel:has(.holo-bg) .hc-media .hc-fg { display: contents; }
  .hero-carousel:has(.holo-bg) .hc-media .hc-media-el { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; -webkit-mask-image: none; mask-image: none; }
  .hero-carousel:has(.holo-bg) .hc-media .hc-text { position: absolute; left: 0; right: 0; bottom: 0; height: auto; padding-block: 8px 24px; gap: 6px; }
  .hero-carousel:has(.holo-bg) .hc-media .hc-text p { font-size: 13px; }
  .hero-carousel:has(.holo-bg) .hc-media .hc-text .btn { min-height: 36px; padding-inline: 14px; font-size: 13.5px; }
  .hero-carousel:has(.holo-bg) .hc-media.has-text::after { background: linear-gradient(0deg, rgba(11,11,12,.88) 0%, rgba(11,11,12,.4) 40%, transparent 65%); }
  .hero-carousel:has(.holo-bg) .hc-media .hc-text h2 { font-size: clamp(18px, 5.6vw, 26px); }
}
}
}
}

/* trust strip under the hero */
.trust-strip { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(240,173,24,.05), transparent); }
.trust-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; padding-block: 22px; }
.trust-p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.trust-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.trust-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); max-width: 190px; line-height: 1.3; }
.trust-list svg { width: 26px; height: 26px; flex: none; color: var(--gold); }
@media (max-width: 1100px) { .trust-inner { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .trust-inner { padding-block: 18px; gap: 14px; }
  .trust-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .trust-list li { flex-direction: column; text-align: center; gap: 6px; font-size: 12.5px; max-width: none; }
  .trust-p { font-size: 14px; text-align: center; margin-inline: auto; }
}
/* hero is now just the headline and buttons */
.holo-copy h1 + .actions { margin-top: 28px; }
@media (max-width: 700px) { .holo-copy h1 + .actions { margin-top: 18px; } }

/* brighter video on computers: a soft shadow keeps the headline crisp on top of it */
.holo-bg ~ .holo-grid .holo-copy h1 { text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5); }

/* two tiles per row: an odd one out at the end takes the full row */
@media (max-width: 860px) { .cat-grid > .cat:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } }

/* shop page: links to every game page (helps crawlers and shoppers, even before stock is listed) */
.shop-games{margin-top:28px;margin-bottom:28px}
.shop-games ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.shop-games a{display:inline-block;padding:9px 16px;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.shop-games a:hover{border-color:var(--gold);color:var(--gold)}

/* tables inside the legal pages (service providers, retention periods) */
.legal-doc .legal-table { overflow-x: auto; margin: 1em 0 1.4em; }
.legal-doc .legal-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.legal-doc .legal-table th, .legal-doc .legal-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.legal-doc .legal-table th { color: var(--text); font-weight: 700; background: var(--panel); border-bottom-color: var(--line-strong); }
.legal-doc .legal-table td:first-child { color: var(--text); width: 42%; }

/* ---------- Pre-orders page */
.po-head { position: relative; }
.po-badge { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); padding: 5px 12px; margin-bottom: 14px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.po-how { padding-block: 34px 8px; }
.po-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: none; }
.po-steps li { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 22px 22px 24px 22px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.po-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--gold); color: var(--gold);
  font-family: var(--display); font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.po-steps h3 { font-size: 20px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.po-steps p { color: var(--muted); font-size: 15px; }
.po-policy { margin-top: 16px; font-weight: 600; }
.po-policy a { color: var(--gold); }
.po-policy a:hover { color: var(--gold-soft); }
@media (max-width: 760px) { .po-steps { grid-template-columns: 1fr; gap: 12px; } .po-steps li { padding: 18px; } }
/* the Pre-orders link in the header stands out a little */
.nav a.nav-po { color: var(--gold); }

/* basket: pre-order shipping choice and policy acceptance */
.po-ship { border: 1px solid var(--line-strong); padding: 12px 14px 14px; margin: 4px 0 2px; display: grid; gap: 10px; }
.po-ship legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.po-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.45; }
.po-opt input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--gold); }
.po-opt b { display: block; color: var(--text); }
.po-opt small { display: block; color: var(--muted); font-size: 12.5px; }
.po-opt:has(input:checked) b { color: var(--gold); }
.po-ack a { color: var(--gold); text-decoration: underline; }

/* basket: delivery details (myPOS) and test-mode banner */
.ship-details { border: 0; padding: 0; margin: 6px 0 4px; display: grid; gap: 4px; min-width: 0; }
.ship-details legend { font-weight: 700; color: var(--text); font-size: 14px; margin-bottom: 6px; padding: 0; }
.ship-details .d-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ship-details .d-row > * { min-width: 0; }
.ship-details .d-row label + input { margin-bottom: 0; }
.ship-details .d-row { align-items: end; }
.ship-details input { width: 100%; }
.pay-test { background: rgba(240, 173, 24, .12); border: 1px dashed var(--gold); color: var(--gold-soft); font-size: 13px; font-weight: 600; padding: 9px 12px; }
/* these boxes are display:grid/flex, which would otherwise override the hidden attribute */
.po-ship[hidden], .optin[hidden], .ship-details[hidden], .pay-test[hidden], .stock-line[hidden] { display: none !important; }
/* summary rows: keep a gap between the label and a long value (Greek) */
.summary .r { gap: 12px; }
.summary .r > span:last-child { text-align: right; }

/* ---- product photo zoom: magnifier on hover (desktop), full-screen viewer on click/tap */
.product .art.zoomable { cursor: zoom-in; overflow: hidden; position: relative; }
/* The photo is laid over the square frame, so tall or wide photos always fit whole (object-fit: contain). */
.product .art.zoomable img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .15s ease-out; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .product .art.zoomable.lens img { transform: scale(2.2); transition: none; } }
.zoom-btn { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(15,15,17,.8); color: #fff; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.zoom-btn svg { width: 20px; height: 20px; }
.zoom-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(8,8,10,.98); display: flex; flex-direction: column; }
.zoom-ov[hidden] { display: none !important; }
.zoom-stage { flex: 1; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: zoom-in; }
.zoom-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .2s ease-out; user-select: none; -webkit-user-drag: none; }
.zoom-ov.zoomed .zoom-stage { cursor: zoom-out; }
.zoom-ov.zoomed .zoom-stage img { transition: none; }
.zoom-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; color: #cfcac0; font-size: 13px; }
.zoom-close { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 8px 14px; font: inherit; cursor: pointer; }
body.zoom-lock { overflow: hidden; }