/* futcoins.co.uk — "floodlit": a night match under the lights.
   Deep blue-black, floodlight gold, violet and teal glow, stadium-board type.
   Links are light blue and heavy, never lined; gold behind them on hover. */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/r/figtree-var.4ba7d3d096.woff2) format('woff2'); }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/r/bigshoulders-var.698f996092.woff2) format('woff2'); }

:root {
  --bg: #070912;
  --bg-2: #0b0f1d;
  --panel: #10152a;
  --panel-2: #161d38;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #eef1f8;
  --text-2: #c3c9d8;
  --mute: #8e97ad;
  --gold: #ffc93c;
  --gold-2: #ffb10f;
  --gold-ink: #1f1500;
  --violet: #7b5cff;
  --teal: #2ee6c5;
  --link: #93b6ff;
  --ok: #33d69f;
  --bad: #ff6b6b;
  --r: 18px;
  --head: 'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--body); }
img, svg { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; line-height: 1; text-wrap: balance; }
h1, h2 { font-family: var(--head); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
h3 { font-family: var(--body); font-weight: 700; font-size: 1.12rem; line-height: 1.3; }
b, strong { font-weight: inherit; }
a { color: var(--link); font-weight: 700; text-decoration: none; border-radius: 4px; }
a:hover { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--gold); color: var(--gold-ink); padding: 8px 14px; }
.skip:focus { left: 8px; top: 8px; }
.ico { width: 20px; height: 20px; flex: none; }
.ico--big { width: 28px; height: 28px; }
.ico--end { width: 18px; height: 18px; margin-left: 10px; }
[hidden] { display: none !important; }
.kicker, .label { margin: 0 0 10px; font: 800 .95rem/1.1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.label { color: var(--mute); font-size: .82rem; margin-bottom: 6px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: 14px; font: 800 1.2rem/1 var(--head); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .15s, background-color .15s, box-shadow .15s; }
.btn--gold { background: linear-gradient(180deg, #ffd65e, var(--gold) 45%, var(--gold-2)); color: var(--gold-ink); box-shadow: 0 8px 24px rgba(255, 186, 30, .28), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn--gold:hover { background: linear-gradient(180deg, #ffe08a, #ffd04f 45%, var(--gold)); color: var(--gold-ink); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255, 186, 30, .38), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn--line { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--line:hover { background: var(--panel-2); color: var(--text); border-color: var(--gold); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 1.05rem; border-radius: 12px; }
.btn--wide { width: 100%; }

/* ---------------------------------------------------------------- ticker */
.ticker { display: flex; align-items: center; height: 36px; background: linear-gradient(90deg, #1a1405, #120f06 30%, #0c0d14); border-bottom: 1px solid rgba(255, 201, 60, .25); overflow: hidden; font-size: .86rem; }
.ticker__tag { flex: none; margin: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--gold); color: var(--gold-ink); font: 900 .95rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; }
.ticker__tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); }
.ticker__track { display: flex; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__run { flex: none; display: flex; align-items: center; margin: 0; white-space: nowrap; animation: run 46s linear infinite; color: #e9e2c9; }
.ticker__item { padding: 0 14px; }
.ticker__num { color: var(--gold); font-weight: 700; }
.ticker__dot { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); opacity: .7; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------------------------------------------------------------- header */
.top { position: relative; z-index: 6; background: rgba(7, 9, 18, .82); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.top__in { display: flex; align-items: center; gap: 18px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 400; }
.brand:hover { background: none; color: var(--text); }
.logo-mark { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(255, 201, 60, .35)); }
.brand__word { font: 900 1.85rem/1 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.brand__tld { font: 700 .82rem/1 var(--body); text-transform: none; letter-spacing: 0; color: var(--gold); margin-left: 3px; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; }
.nav a { display: block; padding: 8px 11px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: .98rem; }
.nav a:hover { background: var(--panel-2); color: var(--text); }
.nav a[aria-current] { color: var(--gold); }
.top__price { margin: 0; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 12px; font-size: .9rem; color: var(--text-2); white-space: nowrap; }
.top__price span { color: var(--gold); font-weight: 800; }
@media (max-width: 1120px) { .nav { display: none; } .top__price { margin-left: auto; } }
@media (max-width: 520px) { .top__price { display: none; } .top__buy { margin-left: auto; } .brand__word { font-size: 1.6rem; } }

.crumbs { padding-top: 16px; font-size: .9rem; color: var(--mute); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: '›'; margin-right: 6px; }
.crumbs a { font-weight: 600; }

/* ---------------------------------------------------------------- stage (hero) */
.stage { position: relative; padding: 26px 0 26px; overflow: hidden; background:
  radial-gradient(60% 70% at 78% 30%, rgba(123, 92, 255, .22), transparent 70%),
  radial-gradient(50% 60% at 60% 60%, rgba(255, 201, 60, .14), transparent 70%),
  linear-gradient(180deg, #0a0d1a, var(--bg)); }
.stage::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 90px, rgba(255, 255, 255, .018) 90px 180px); pointer-events: none; }
.stage__grid { position: relative; display: grid; gap: 18px; }
.stage h1 { font-size: clamp(2.9rem, 11vw, 6.2rem); line-height: .9; }
.stage h1 .hl { display: block; background: linear-gradient(180deg, #fff1b0, var(--gold) 55%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stage__line { margin: 12px 0 18px; color: var(--text-2); font-weight: 500; }
.stage__lead { font-size: 1.12rem; color: var(--text-2); max-width: 38em; }
.stage__art { display: none; }
.stage--plain .stage__grid { gap: 10px; }
@media (min-width: 980px) {
  .stage { padding: 46px 0 40px; }
  .stage__grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-areas: 'copy art' 'more more'; column-gap: 40px; align-items: center; }
  .stage__copy { grid-area: copy; }
  .stage__art { display: block; position: relative; grid-area: art; margin: 0 -10px 0 10px; }
  .strip { display: none; }
  .stage__more { grid-area: more; }
  .stage--plain .stage__grid { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ---------------------------------------------------------------- order panel */
.buy { position: relative; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(22, 29, 56, .92), rgba(13, 17, 34, .95)); border: 1px solid rgba(255, 201, 60, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 20px 60px rgba(0, 0, 0, .45), 0 0 50px rgba(255, 186, 30, .08); }
.buy__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.buy__title { margin: 0; font: 900 1.45rem/1 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.buy__date { margin: 0; font-size: .82rem; color: var(--mute); }
.buy__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.buy__set + .buy__set { margin-top: 10px; }
.plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 14px; background: rgba(0, 0, 0, .3); }
.plat, .amt { position: relative; display: block; cursor: pointer; }
.plat input, .amt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.plat__box { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 6px 8px; border-radius: 10px; color: var(--text-2); font-weight: 700; font-size: .95rem; transition: background-color .15s, color .15s; }
.plat .hw { width: 22px; height: 22px; }
.plat input:checked + .plat__box { background: var(--gold); color: var(--gold-ink); box-shadow: 0 6px 18px rgba(255, 186, 30, .3); }
.plat:hover .plat__box { color: var(--text); }
.plat input:checked + .plat__box:hover { color: var(--gold-ink); }
.amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.amt__box { display: flex; flex-direction: column; align-items: center; padding: 7px 4px 8px; border: 1.5px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .02); transition: border-color .15s, background-color .15s; }
.amt__coins { font: 900 1.35rem/1 var(--head); letter-spacing: .02em; }
.amt__gbp { margin-top: 3px; font-size: .76rem; color: var(--mute); line-height: 1.15; }
.amt:hover .amt__box { border-color: rgba(255, 201, 60, .6); }
.amt input:checked + .amt__box { border-color: var(--gold); background: rgba(255, 201, 60, .12); box-shadow: inset 0 0 0 1px var(--gold); }
.amt input:checked + .amt__box .amt__gbp { color: var(--gold); }
.plat input:focus-visible + .plat__box, .amt input:focus-visible + .amt__box { outline: 3px solid var(--gold); outline-offset: 2px; }
.other { margin-top: 10px; }
.other__label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.other__hint { font-weight: 400; color: var(--mute); font-size: .85rem; }
.other__input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--gold); border-radius: 12px; background: rgba(0, 0, 0, .35); color: var(--text); font: 700 1.25rem var(--body); }
.other__err { margin: 6px 0 0; color: var(--bad); font-size: .9rem; }
.buy__foot { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.sum { display: flex; align-items: center; gap: 12px; }
.sum__gbp { margin: 0; font: 900 2.7rem/1 var(--head); color: var(--gold); text-shadow: 0 0 24px rgba(255, 201, 60, .35); }
.sum__note { margin: 0; font-size: .8rem; line-height: 1.35; color: var(--text-2); }
.buy__go { width: 100%; }
.buy__eta { display: flex; gap: 8px; margin: 12px 0 0; font-size: .86rem; line-height: 1.35; color: var(--text-2); }
.buy__eta .ico { color: var(--gold); }
.buy__live { display: block; color: var(--mute); }
.pre { display: flex; gap: 10px; margin: 14px 0 0; font-size: .86rem; line-height: 1.45; color: var(--mute); }
.pre .ico { color: var(--teal); margin-top: 1px; }
@media (min-width: 600px) {
  .buy { padding: 20px 22px 18px; }
}

/* perks */
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.perks li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.perks__ico { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 6px 14px rgba(255, 180, 20, .25)); }
.perks__t { display: block; font: 900 1.15rem/1.05 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.perks__s { display: block; font-size: .8rem; color: var(--mute); line-height: 1.3; margin-top: 2px; }
@media (min-width: 980px) { .perks { grid-template-columns: repeat(4, 1fr); gap: 14px; } .perks__ico { width: 56px; height: 56px; } }

/* ---------------------------------------------------------------- bands */
.band { position: relative; padding: 60px 0; }
.band--alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--glow { background: radial-gradient(70% 80% at 15% 0%, rgba(123, 92, 255, .16), transparent 70%), var(--bg); }
.band__head { max-width: 820px; margin-bottom: 30px; }
.band__head h2 { font-size: clamp(2.3rem, 7vw, 4.2rem); line-height: .95; }
.band__head h2 em { font-style: normal; color: var(--gold); }
.band__intro { margin: 14px 0 0; font-size: 1.08rem; color: var(--text-2); }
.band__after { margin: 24px 0 0; color: var(--text-2); }
.band__split { display: grid; gap: 30px; }
@media (min-width: 980px) { .band { padding: 90px 0; } .band__split { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 50px; } }

/* platforms */
.plays { display: grid; gap: 18px; }
.play { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
.play:hover { transform: translateY(-3px); border-color: rgba(255, 201, 60, .45); }
.play__art { position: relative; height: 230px; overflow: hidden; background: radial-gradient(70% 90% at 50% 100%, rgba(255, 255, 255, .06), transparent); }
.play--ps .play__art { background: radial-gradient(80% 90% at 50% 90%, rgba(91, 140, 255, .25), transparent 70%); }
.play--xbox .play__art { background: radial-gradient(80% 90% at 50% 90%, rgba(46, 230, 197, .22), transparent 70%); }
.play--pc .play__art { background: radial-gradient(80% 90% at 50% 90%, rgba(255, 122, 26, .22), transparent 70%); }
.play__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.play__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--panel-2) 100%); }
.play--ps .play__art::after { background: linear-gradient(180deg, rgba(91, 140, 255, .22), transparent 45%, transparent 60%, var(--panel-2)); }
.play--xbox .play__art::after { background: linear-gradient(180deg, rgba(46, 230, 197, .2), transparent 45%, transparent 60%, var(--panel-2)); }
.play--pc .play__art::after { background: linear-gradient(180deg, rgba(255, 122, 26, .22), transparent 45%, transparent 60%, var(--panel-2)); }
.play__hw { position: absolute; right: 14px; top: 14px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(7, 9, 18, .72); border: 1px solid var(--line-2); color: var(--gold); }
.play__hw .hw { width: 28px; height: 28px; }
.play__body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.play__top { display: flex; align-items: center; gap: 10px; }
.play__name { font: 900 2.1rem/1 var(--head); text-transform: uppercase; }
.play__dev { margin: -4px 0 0; color: var(--mute); font-size: .9rem; }
.tag { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: rgba(46, 230, 197, .14); color: var(--teal); font: 800 .78rem/1 var(--head); letter-spacing: .12em; text-transform: uppercase; }
.play__prices { margin: 4px 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.play__prices div { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.play__prices dt { font: 800 .8rem/1 var(--head); letter-spacing: .14em; color: var(--mute); }
.play__prices dd { margin: 4px 0 0; font: 900 1.8rem/1 var(--head); color: var(--gold); }
.play__more { margin: 2px 0 0; text-align: center; font-size: .95rem; }
@media (min-width: 820px) { .plays { grid-template-columns: repeat(3, 1fr); } }

/* tables */
.tablewrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.table caption { caption-side: bottom; text-align: left; padding: 12px 16px; font-size: .85rem; color: var(--mute); }
.table th, .table td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th:first-child { text-align: left; }
.table thead th { font: 800 .85rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.table td { color: var(--gold); font-weight: 700; }

/* ready check */
.check__list { display: grid; gap: 18px; }
.check__step { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--panel); border: 1.5px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.check__pic { background: radial-gradient(80% 100% at 50% 100%, rgba(123, 92, 255, .2), transparent 70%), #0c1022; border-bottom: 1px solid var(--line); }
.check__pic img { width: 100%; max-width: 320px; margin: 0 auto; }
.check__body { padding: 18px 20px 20px; }
.check__n { margin: 0 0 6px; font: 800 .85rem/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.check__q { font-size: 1.12rem; }
.check__btns { display: flex; gap: 8px; margin-top: 14px; }
.check__tip { margin-top: 12px; }
.check__tip summary { cursor: pointer; display: inline-block; font-weight: 700; color: var(--link); font-size: .95rem; list-style: none; border-radius: 4px; }
.check__tip summary::-webkit-details-marker { display: none; }
.check__tip summary:hover { background: var(--gold); color: var(--gold-ink); }
.check__tiptext { margin-top: 10px; font-size: .95rem; color: var(--text-2); }
.check__tiptext p:last-child { margin: 0; }
.check__step.is-yes { border-color: var(--ok); box-shadow: 0 0 30px rgba(51, 214, 159, .15); }
.check__step.is-no { border-color: var(--bad); box-shadow: 0 0 30px rgba(255, 107, 107, .12); }
.check__step.is-yes .check__n::after { content: ' · ready'; color: var(--ok); }
.check__step.is-no .check__n::after { content: ' · to sort out'; color: var(--bad); }
.check__step [data-answer][aria-pressed='true'] { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.check__result { margin-top: 20px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(90deg, rgba(255, 201, 60, .14), rgba(123, 92, 255, .14)); border: 1px solid rgba(255, 201, 60, .35); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.check__result p { margin: 0; font-weight: 600; }
@media (min-width: 900px) { .check__list { grid-template-columns: repeat(3, 1fr); } }

/* steps */
.steps { display: grid; gap: 16px; counter-reset: s; }
.steps__item { position: relative; padding: 22px 20px 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.steps__n { position: absolute; right: 16px; top: 12px; margin: 0; font: 900 4.6rem/.8 var(--head); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 201, 60, .4); }
.steps__ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 201, 60, .12); color: var(--gold); margin-bottom: 14px; }
.steps__item h3 { margin-bottom: 8px; font: 900 1.55rem/1 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.steps__item p { margin: 0; color: var(--text-2); font-size: .97rem; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.note { display: flex; gap: 12px; margin-top: 20px; padding: 14px 18px; border-radius: 14px; background: rgba(46, 230, 197, .07); border: 1px solid rgba(46, 230, 197, .25); font-size: .97rem; color: var(--text-2); }
.note .ico { color: var(--teal); margin-top: 2px; }
.note div > :last-child { margin-bottom: 0; }
.note--warn { background: rgba(255, 107, 107, .08); border-color: rgba(255, 107, 107, .3); }

/* UK clock */
.band--clock { background: radial-gradient(60% 80% at 85% 20%, rgba(255, 201, 60, .14), transparent 70%), radial-gradient(50% 70% at 10% 90%, rgba(46, 230, 197, .1), transparent 70%), var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clock { display: grid; gap: 16px; }
.clock__now { padding: 24px; border-radius: 22px; background: linear-gradient(180deg, #151b33, #0d1122); border: 1px solid rgba(255, 201, 60, .3); box-shadow: 0 0 40px rgba(255, 186, 30, .08); }
.clock__time { margin: 6px 0 4px; font: 900 5.2rem/1 var(--head); color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(255, 201, 60, .4); }
.clock__zone { margin: 0; color: var(--text-2); }
.clock__list { display: grid; gap: 12px; }
.clock__row { padding: 16px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.clock__what { margin: 0; font-weight: 700; }
.clock__when { margin: 4px 0; font: 900 1.7rem/1.1 var(--head); color: var(--gold); letter-spacing: .02em; }
.clock__note { margin: 0; font-size: .92rem; color: var(--mute); }
@media (min-width: 900px) { .clock { grid-template-columns: 340px 1fr; align-items: start; } }

/* prose */
.split { display: grid; gap: 28px; }
.prose { max-width: 70ch; }
.prose h3 { font: 900 1.7rem/1.05 var(--head); text-transform: uppercase; letter-spacing: .02em; margin: 30px 0 10px; color: var(--text); }
.prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-2); }
.aside { align-self: start; padding: 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.aside__h { margin: 0 0 12px; font: 800 .85rem/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.aside__fine { margin: 10px 0 0; font-size: .85rem; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 14px; border-radius: 999px; background: rgba(255, 201, 60, .08); border: 1px solid rgba(255, 201, 60, .3); color: #ffe7a3; font-weight: 600; }
.side-art { margin: 0; }
.side-art .pcard { width: 62%; max-width: 300px; margin: 10px auto 0; transform: rotate(3deg); }
@media (min-width: 980px) { .side-art .pcard { width: 100%; margin-top: 0; } }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) 320px; gap: 50px; } }

.mini li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); font-variant-numeric: tabular-nums; color: var(--text-2); }
.mini li span:last-child { font: 900 1.4rem/1.1 var(--head); color: var(--gold); }
.moves { display: grid; gap: 10px; }
.moves li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; }
.moves--yes .ico { color: var(--ok); }
.moves--no .ico { color: var(--bad); }
@media (min-width: 760px) { .moves { grid-template-columns: 1fr 1fr; } }

/* converter */
.conv { display: grid; gap: 14px; padding: 22px; border-radius: 22px; background: var(--panel); border: 1px solid rgba(255, 201, 60, .3); }
.conv__money { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 16px; border: 1.5px solid var(--gold); border-radius: 12px; background: rgba(0, 0, 0, .35); font: 900 1.9rem/1 var(--head); color: var(--gold); }
.conv__money input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--text); }
.conv__money input:focus { outline: none; }
.conv__money:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.conv select { width: 100%; height: 56px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: rgba(0, 0, 0, .35); color: var(--text); font: 700 1.05rem var(--body); }
.conv__out { padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 201, 60, .16), rgba(123, 92, 255, .14)); border: 1px solid rgba(255, 201, 60, .3); }
.conv__coins { margin: 2px 0; font: 900 3rem/1 var(--head); color: var(--gold); font-variant-numeric: tabular-nums; }
.conv__note { margin: 0; font-size: .88rem; color: var(--text-2); }
@media (min-width: 900px) { .conv { grid-template-columns: 1fr 1fr 1.3fr; align-items: end; } }

/* questions */
.band--faq { background: radial-gradient(60% 70% at 0% 30%, rgba(123, 92, 255, .14), transparent 70%), var(--bg); }
.faq { display: grid; gap: 26px; }
.faq__intro h2 { font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: .92; }
.faq__intro .side-art { display: none; }
.qas { display: grid; gap: 10px; }
.qa { border-radius: 16px; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s; }
.qa[open] { border-color: rgba(255, 201, 60, .45); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa__q { font-size: 1.05rem; }
.qa__pm { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 201, 60, .12); }
.qa__pm::before, .qa__pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--gold); transition: transform .2s; }
.qa__pm::after { transform: rotate(90deg); }
.qa[open] .qa__pm::after { transform: rotate(0); }
.qa__a { padding: 0 18px 4px; color: var(--text-2); }
@media (min-width: 980px) { .faq { grid-template-columns: 380px minmax(0, 1fr); gap: 60px; align-items: start; } .faq__intro { position: sticky; top: 20px; } .faq__intro .side-art { display: block; margin-top: 20px; } }

/* finale */
.finale { position: relative; overflow: hidden; background: radial-gradient(60% 90% at 30% 50%, rgba(255, 201, 60, .2), transparent 70%), linear-gradient(180deg, #120e05, #0b0c14); border-top: 1px solid rgba(255, 201, 60, .3); }
.finale__in { display: grid; gap: 10px; align-items: center; padding-top: 30px; padding-bottom: 46px; }
.finale__art .finale__card { width: 200px; margin: 0 auto; transform: rotate(-4deg); }
.finale__copy h2 { font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: .92; margin-bottom: 10px; }
.finale__copy p:not(.kicker) { color: var(--text-2); max-width: 34em; }
@media (min-width: 900px) { .finale__in { grid-template-columns: 360px 1fr; gap: 40px; padding-top: 40px; padding-bottom: 40px; } .finale__art .finale__card { width: 280px; margin: 10px 0; } }

/* footer */
.foot { background: #05060c; color: var(--mute); padding: 50px 0 96px; font-size: .95rem; border-top: 1px solid var(--line); }
.foot__grid { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; }
.foot__brand { grid-column: 1 / -1; }
.foot__brand .logo-mark { margin-bottom: 10px; }
.foot__name { margin: 0 0 8px; font: 900 1.7rem/1 var(--head); text-transform: uppercase; color: var(--text); }
.foot__name span { font: 700 .82rem var(--body); text-transform: none; color: var(--gold); }
.foot__h { margin: 0 0 10px; font: 800 .9rem/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.foot li { margin-bottom: 7px; }
.foot a { color: var(--text-2); font-weight: 500; }
.foot__legal { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .84rem; color: #6f788d; }
@media (min-width: 900px) { .foot { padding-bottom: 50px; } .foot__grid { grid-template-columns: 1.6fr repeat(4, 1fr); } .foot__brand { grid-column: auto; } }

/* mobile dock */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 12, 24, .96); border-top: 1px solid rgba(255, 201, 60, .35); box-shadow: 0 -10px 30px rgba(0, 0, 0, .4); backdrop-filter: blur(8px); }
.dock__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 640px; margin: 0 auto; }
.dock__sum { margin: 0; display: flex; flex-direction: column; line-height: 1.15; font-size: .82rem; color: var(--text-2); }
.dock__gbp { font: 900 1.6rem/1.05 var(--head); color: var(--gold); }
@media (min-width: 980px) { .dock { display: none !important; } }

/* phones: checkout button inside the first screen (390×844) */
@media (max-width: 599px) {
  .stage { padding-top: 16px; }
  .stage h1 { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .stage__line { margin: 8px 0 12px; font-size: .92rem; line-height: 1.4; }
  .buy { padding: 12px; }
  .buy__head { margin-bottom: 8px; }
  .buy__title { font-size: 1.2rem; }
  .plat__box { min-height: 40px; font-size: .88rem; gap: 5px; padding: 4px; }
  .plat .hw { width: 18px; height: 18px; }
  .amt__box { padding: 5px 2px 6px; }
  .amt__coins { font-size: 1.15rem; }
  .amt__gbp { font-size: .7rem; }
  .buy__foot { margin-top: 10px; padding-top: 10px; gap: 8px; }
  .sum__gbp { font-size: 2.2rem; }
  .buy__eta { margin-top: 10px; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .ticker__run { animation: none; } }

.faq__intro h2 em { font-style: normal; color: var(--gold); }
.stage h1 .hl { display: inline; }
.percoin { display: grid; gap: 10px; }
.percoin li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'ico name v' 'ico s s'; column-gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.percoin .hw { grid-area: ico; width: 30px; height: 30px; color: var(--gold); }
.percoin__name { grid-area: name; font-weight: 700; }
.percoin__v { grid-area: v; font: 900 1.6rem/1 var(--head); color: var(--gold); }
.percoin__s { grid-area: s; font-size: .85rem; color: var(--mute); }
@media (min-width: 980px) { .percoin { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .stage__art { margin: -10px -70px 0 20px; } }
.stage--compact h1 { font-size: clamp(2.5rem, 10vw, 4.6rem); }

/* ---------------------------------------------------------------- players (AI-drawn, fictional) */
.pcard { --c1: #fff1b8; --c2: var(--gold); --c3: #b8780a; --glow: rgba(255, 201, 60, .42); --pos: var(--gold);
  position: relative; margin: 0; aspect-ratio: 33 / 47; container-type: inline-size;
  filter: drop-shadow(0 0 26px var(--glow)) drop-shadow(0 26px 34px rgba(0, 0, 0, .5)); }
.pcard--teal { --c1: #bffff2; --c2: var(--teal); --c3: #0f6b73; --glow: rgba(46, 230, 197, .3); --pos: var(--teal); }
.pcard--violet { --c1: #e2dbff; --c2: #8b6bff; --c3: #3a22a8; --glow: rgba(123, 92, 255, .38); --pos: #b9a6ff; }
.pcard__frame { height: 100%; padding: 4px; background: linear-gradient(135deg, var(--c1), var(--c2) 50%, var(--c3)); clip-path: polygon(10% 0, 90% 0, 100% 7%, 100% 100%, 0 100%, 0 7%); }
.pcard__in { position: relative; height: 100%; overflow: hidden; background: #0b0d18; clip-path: polygon(9.4% 0, 90.6% 0, 100% 6.6%, 100% 100%, 0 100%, 0 6.6%); }
.pcard__in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.pcard__in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 16, 0) 60%, rgba(8, 8, 16, .94) 88%), linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .13) 48%, transparent 56%); }
.pcard__r { position: absolute; left: 7%; top: 5%; margin: 0; font: 900 60px/.85 var(--head); font-size: 19cqw; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .65); }
.pcard__r span { display: block; margin-top: .12em; font-size: .4em; letter-spacing: .08em; color: var(--pos); }
.pcard__n { position: absolute; left: 0; right: 0; bottom: 5.5%; margin: 0; text-align: center; font: 900 34px/1 var(--head); font-size: 11cqw; letter-spacing: .08em; text-transform: uppercase; color: #fff; }

/* desktop hero: three cards fanned, striker in front */
.fan { position: relative; width: 100%; aspect-ratio: 82 / 60; }
.fan .pcard { position: absolute; top: 13%; width: 35%; transform-origin: 50% 100%; }
.fan .fan__l { left: 4%; transform: rotate(-9deg); }
.fan .fan__r { right: 1%; transform: rotate(9deg); }
.fan .fan__m { top: 2%; left: 30%; width: 40%; z-index: 2; }
.stage__card { width: 64%; max-width: 330px; margin: 0 auto; transform: rotate(4deg); }

/* phones and tablets: a low bright strip under the H1 line, whole head in view */
.strip { position: relative; height: 104px; margin: 0 0 12px; border-radius: 16px; overflow: hidden; background: #0a0c18; border: 1px solid rgba(255, 201, 60, .55); box-shadow: 0 0 26px rgba(255, 201, 60, .22); }
.strip--violet { border-color: rgba(139, 107, 255, .65); box-shadow: 0 0 26px rgba(123, 92, 255, .3); }
.strip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 201, 60, .16), transparent 50%); pointer-events: none; }
.strip--violet::after { background: linear-gradient(90deg, rgba(123, 92, 255, .2), transparent 50%); }
.strip__img { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; }
.strip__info { position: absolute; left: 14px; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 14px; }
.strip__r { margin: 0; font: 900 2.3rem/.85 var(--head); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.strip__r span { display: block; margin-top: 4px; font-size: .42em; letter-spacing: .1em; color: var(--gold); }
.strip--violet .strip__r span { color: #b9a6ff; }
.strip--teal { border-color: rgba(46, 230, 197, .6); box-shadow: 0 0 26px rgba(46, 230, 197, .22); }
.strip--teal::after { background: linear-gradient(90deg, rgba(46, 230, 197, .16), transparent 50%); }
.strip--teal .strip__r span { color: var(--teal); }
.strip__price { margin: 0; padding-left: 14px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; line-height: 1.1; font-size: .78rem; color: var(--text-2); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.strip__from { font: 800 .72rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.strip__gbp { margin: 3px 0 2px; font: 900 1.7rem/1 var(--head); color: var(--gold); }

/* ---------------------------------------------------------------- tax calculator, price history, jumps */
.tax__list { margin: 10px 0 0; display: grid; gap: 4px; font-size: .92rem; color: var(--text-2); }
.tax__list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line-2); font-variant-numeric: tabular-nums; }
.tax__list li span:last-child { font-weight: 700; color: var(--text); }
.tax--loss { color: var(--bad) !important; }
.table--hist td { font-variant-numeric: tabular-nums; }
.jumps ul { display: flex; flex-wrap: wrap; gap: 8px; }
.jumps a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(147, 182, 255, .08); border: 1px solid rgba(147, 182, 255, .3); font-size: .92rem; }

/* ---------------------------------------------------------------- prose lists, tiles, spacing between blocks */
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 6px 0; padding-left: 4px; }
.prose li::marker { color: var(--gold); }
.tiles { display: grid; gap: 16px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { padding: 20px 22px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.tile h3 { font: 900 1.45rem/1.05 var(--head); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; }
.tile p { margin: 0; color: var(--text-2); }
.tile .tile__more { margin-top: 10px; font-size: .95rem; }
.tile > svg, .tile > img { margin-bottom: 12px; }
:is(.tablewrap, .moves, .mini, .note, .steps, .tiles, .plays, .conv, .check, .clock, .chips, .jumps) + :is(.prose, .tablewrap, .tiles, .note, .split, .steps, .conv, .moves, .mini) { margin-top: 24px; }
/* a table of words rather than prices */
.table--text th, .table--text td { text-align: left; white-space: normal; }
.table--text td { color: var(--text-2); font: 400 .97rem/1.45 var(--body); }
.prose + :is(.tablewrap, .tiles, .note, .steps, .moves, .mini, .conv) { margin-top: 24px; }
.conv.tax { align-items: start; }
/* order form, 29.10.2026: one total, one euro line, a full-width button */
.sum { align-items: center; }
.sum__note { font-size: .86rem; }
.amt__box { justify-content: center; min-height: 46px; }
/* home H1 always on two lines: "Buy Futcoins" / "for FC 27" (owner, 29.10.2026);
   on desktop the size keeps the first line inside the 560px column */
.h1__line { display: block; white-space: nowrap; }
@media (min-width: 980px) { .stage:not(.stage--compact) h1 { font-size: clamp(4.4rem, 6vw, 5.6rem); } }
.top__buy { white-space: nowrap; }
@media (max-width: 359px) { .brand__word { font-size: 1.35rem; } .top__buy { padding-left: 12px; padding-right: 12px; } }

/* ---------------------------------------------------------------- order form as the bright spot (owner, 29.10.2026:
   "everything is one colour, it must be obvious where to buy") — a light card on the dark page */
.buy { --ink: #141826; --ink-2: #4a4636; --cream-line: #e2d5b0;
  background: linear-gradient(180deg, #fffdf6, #fff3d4); color: var(--ink);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(255, 201, 60, .16), 0 26px 60px rgba(0, 0, 0, .55); }
.buy__title { color: var(--ink); }
.buy__date { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.buy__dot { width: 8px; height: 8px; border-radius: 50%; background: #1fbf75; box-shadow: 0 0 0 3px rgba(31, 191, 117, .2); }
.buy__step { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 7px; font: 800 .82rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.buy__num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--gold); font: 800 .74rem/1 var(--body); letter-spacing: 0; }
.buy .plats { background: #f0e6cc; }
.buy .plat__box { color: var(--ink-2); }
.buy .plat:hover .plat__box { color: var(--ink); }
.buy .plat input:checked + .plat__box, .buy .plat input:checked + .plat__box:hover { background: var(--ink); color: var(--gold); box-shadow: 0 6px 16px rgba(20, 24, 38, .25); }
.buy .amt__box { background: #fff; border-color: var(--cream-line); color: var(--ink); }
.buy .amt:hover .amt__box { border-color: var(--ink); }
.buy .amt input:checked + .amt__box { background: var(--ink); border-color: var(--ink); color: var(--gold); box-shadow: none; }
.buy .plat input:focus-visible + .plat__box, .buy .amt input:focus-visible + .amt__box { outline-color: var(--ink); }
.buy .other__label { color: var(--ink); }
.buy .other__hint { color: var(--ink-2); }
.buy .other__input { background: #fff; color: var(--ink); border-color: var(--ink); }
.buy .other__input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.buy .other__err { color: #b42318; font-weight: 600; }
.buy__foot { border-top-color: var(--cream-line); }
.buy .sum__gbp { color: var(--ink); text-shadow: none; }
.buy .sum__note { color: var(--ink-2); }
.buy .buy__go { min-height: 58px; font-size: 1.35rem; background: var(--ink); color: var(--gold); border-color: var(--ink); box-shadow: 0 12px 26px rgba(20, 24, 38, .35); }
.buy .buy__go:hover { background: #222842; color: #ffd65e; transform: translateY(-1px); }
.buy__eta { color: var(--ink-2); }
.buy__eta .ico { color: #b8780a; }
@media (max-width: 599px) {
  /* above the form on phones: kicker, H1 and the player strip only */
  .stage .kicker { font-size: .78rem; letter-spacing: .12em; margin-bottom: 6px; }
  .stage:not(.stage--plain) .stage__line { display: none; }
  .stage h1 + .strip, .stage h1 + .buy { margin-top: 12px; }
  .buy .buy__go { min-height: 54px; }
}