/* SkyWars V2. Phone first: the base rules are the phone layout, wider screens add to it.
   The look follows the final designs: chrome lettering, cut-corner frames with lit edges,
   neon status colours on deep navy. */

@font-face { font-family: 'Russo One'; src: url('../fonts/russo-one.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }

:root {
	--bg: #070c1c;
	--bg-raised: #0c1428;
	--hero-bg: #0a0e1b;
	--panel: #111a34;
	--line: #263257;
	--text: #ffffff;
	--text-dim: #b9c3e0;
	--text-muted: #8591b6;
	--cyan: #35d6ee;
	--blue: #2a86ff;
	--purple: #a070ff;
	--gold: #f3b23c;
	--bronze: #e08a4c;
	--silver: #c8d0e6;
	--steel: linear-gradient(180deg, #ffffff 0%, #d3d9ea 42%, #97a2c0 56%, #dfe4f3 100%);

	--font-ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'Barlow', system-ui, sans-serif;
	--font-display: 'Russo One', 'Barlow Condensed', sans-serif;

	--bar-top: 58px;
	--bar-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	--gutter: 14px;
	--notch-w: 132px;
	--notch-d: 7px;
	--overlap: 0px;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--grain: url('../img/grain.png');
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); color-scheme: dark; scrollbar-color: #33427a var(--bg); -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100dvh;
	padding-bottom: var(--bar-bottom);
	background:
		var(--grain),
		radial-gradient(90% 50% at 85% 0%, rgba(84, 52, 190, 0.22), transparent 60%),
		radial-gradient(70% 40% at 0% 55%, rgba(24, 96, 150, 0.16), transparent 70%),
		linear-gradient(180deg, #0b1228, var(--bg) 46%);
	color: var(--text);
	font: 400 1rem/1.45 var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

::selection { background: var(--purple); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { width: 1.25em; height: 1.25em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.steel { color: var(--silver); }

/* ---------- Frames ----------
   A frame is two layers behind the content: ::before is the lit edge, ::after the face set
   just inside it. --cut is the corner cut; --shape/--shape-in can swap in another outline. */

.frame {
	--c: var(--cyan);
	--cut: 12px;
	--bw: 1.5px;
	--hi: color-mix(in srgb, var(--c) 30%, #fff);
	--shape: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
	--cut-in: calc(var(--cut) - 0.6 * var(--bw));
	--shape-in: polygon(var(--cut-in) 0, calc(100% - var(--cut-in)) 0, 100% var(--cut-in), 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, var(--cut-in) 100%, 0 calc(100% - var(--cut-in)), 0 var(--cut-in));
	--face-a: color-mix(in srgb, var(--c) 24%, #0b1326);
	--face-b: color-mix(in srgb, var(--c) 8%, #090f20);
	/* The glow is a rounded box; this radius makes its corner run along the cut corner. */
	--glow-r: calc(var(--cut) * 1.7);
	position: relative;
	isolation: isolate;
	border-radius: var(--glow-r);
	box-shadow: 0 0 20px -7px var(--c), 0 18px 26px -20px #000;
}
.frame::before, .frame::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.frame::before {
	inset: 0;
	clip-path: var(--shape);
	background:
		linear-gradient(90deg, transparent, var(--hi) 50%, transparent) 50% 0 / 62% 2px no-repeat,
		linear-gradient(90deg, transparent, var(--hi) 50%, transparent) 50% 100% / 62% 2px no-repeat,
		linear-gradient(180deg, transparent, var(--hi) 50%, transparent) 0 50% / 2px 46% no-repeat,
		linear-gradient(180deg, transparent, var(--hi) 50%, transparent) 100% 50% / 2px 46% no-repeat,
		linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff), color-mix(in srgb, var(--c) 62%, #05070f));
}
.frame::after {
	inset: var(--bw);
	clip-path: var(--shape-in);
	background:
		var(--grain),
		linear-gradient(var(--c), var(--c)) 26px 0 / 44px 3px no-repeat,
		linear-gradient(var(--c), var(--c)) calc(100% - 26px) 0 / 44px 3px no-repeat,
		radial-gradient(70% 46% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 72%),
		radial-gradient(60% 34% at 50% 100%, color-mix(in srgb, var(--c) 16%, transparent), transparent 72%),
		linear-gradient(158deg, var(--face-a), var(--face-b) 68%);
}
[data-tone='purple'], [data-status='upcoming'], [data-period='daily'] { --c: var(--purple); }
[data-tone='gold'], [data-status='live'], [data-period='weekly'] { --c: var(--gold); }
[data-tone='silver'] { --c: var(--silver); }

/* ---------- Top bar ---------- */

.topbar {
	position: sticky; top: 0; z-index: 30;
	height: var(--bar-top);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
	padding: 0 var(--gutter);
	background: var(--grain), linear-gradient(180deg, #0a1022, #0c152d);
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9);
}
/* The lit line under the bar, with a dip under the logo. */
.topbar::before, .topbar::after {
	content: ''; position: absolute; bottom: 0; height: 2px; pointer-events: none;
	box-shadow: 0 0 10px rgba(53, 214, 238, 0.55);
}
.topbar::before { left: 0; right: calc(50% + var(--notch-w) / 2); background: linear-gradient(90deg, rgba(42, 134, 255, 0.25), var(--blue) 55%, var(--cyan)); transform-origin: right; }
.topbar::after { right: 0; left: calc(50% + var(--notch-w) / 2); background: linear-gradient(270deg, rgba(42, 134, 255, 0.25), var(--blue) 55%, var(--cyan)); transform-origin: left; }
.topbar__notch {
	position: absolute; left: 50%; top: calc(100% - 2px);
	width: var(--notch-w); height: calc(var(--notch-d) + 2px); margin-left: calc(var(--notch-w) / -2);
	overflow: visible; pointer-events: none;
	filter: drop-shadow(0 2px 5px rgba(53, 214, 238, 0.5));
}
.topbar__notch-fill { fill: none; }
.topbar__notch-face {
	position: absolute; left: 50%; top: calc(100% - 2px);
	width: var(--notch-w); height: calc(var(--notch-d) + 2px); margin-left: calc(var(--notch-w) / -2);
	background: var(--grain), #0c152d;
	clip-path: polygon(0 0, 100% 0, 94.67% 100%, 5.33% 100%);
	pointer-events: none;
}
.topbar__notch-line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; }

.topbar__side { display: flex; align-items: center; gap: 4px; min-width: 0; }
.topbar__side--end { justify-content: flex-end; }
.iconbtn { width: 44px; height: 44px; margin-left: -8px; display: grid; place-items: center; border-radius: 8px; }
.iconbtn svg { width: 30px; height: 30px; }
.topbar__logo { position: relative; display: block; align-self: start; margin-top: 3px; z-index: 1; }
.topbar__logo img { position: relative; display: block; height: calc(var(--bar-top) + var(--notch-d) - 5px); width: auto; filter: drop-shadow(0 2px 8px rgba(64, 60, 220, 0.55)); }
.topbar__logo::before {
	content: ''; position: absolute; left: -45%; right: -45%; top: 52%; height: 2px;
	background: radial-gradient(closest-side, rgba(120, 190, 255, 0.95), rgba(42, 134, 255, 0.5) 45%, transparent);
	filter: blur(0.6px);
}
.topbar__logo::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%) 130% 0 / 320% 100% no-repeat;
	-webkit-mask: url('../img/logo.webp') center / 100% 100% no-repeat; mask: url('../img/logo.webp') center / 100% 100% no-repeat;
	animation: logo-sheen 9s ease-in-out 1.2s infinite;
}
.wallet { display: flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 8px; text-align: left; }
.wallet svg { width: 32px; height: 32px; color: var(--silver); }
.wallet__text { display: grid; line-height: 1; }
.wallet__label { font: 600 0.72rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.wallet__amount { font: 700 1.3rem/1.05 var(--font-ui); font-variant-numeric: tabular-nums; }

.sound {
	width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
	color: var(--silver);
	background: rgba(12, 20, 44, 0.9);
	box-shadow: inset 0 0 0 1.5px rgba(160, 112, 255, 0.75), 0 4px 12px -6px var(--purple);
}
.sound svg { width: 21px; height: 21px; grid-area: 1 / 1; }
.sound__off, .sound[aria-pressed='true'] .sound__on { display: none; }
.sound[aria-pressed='true'] .sound__off { display: block; }
.sound[aria-pressed='true'] { color: var(--text-muted); box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- Hero ---------- */

.hero {
	--set-h: 236px;
	--set-right: -30px;
	position: relative;
	min-height: calc(300px + var(--overlap));
	padding-bottom: var(--overlap);
	background: var(--hero-bg);
	isolation: isolate;
}
.hero__stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* The video box keeps the film's 16:9 shape and hangs off the right. The wall to its left is
   the film's own left edge, mirrored, so the hangar carries on behind the title. */
.hero__set {
	position: absolute; right: var(--set-right); bottom: var(--set-bottom, 0px);
	height: var(--set-h); aspect-ratio: 16 / 9;
	background: url('../img/hero-still-960.webp') center / cover no-repeat;
}
.hero__wall {
	position: absolute; right: calc(100% - 1px); top: 0; height: 100%; aspect-ratio: 1500 / 1080;
	background: url('../img/hangar-wall.webp') right center / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%);
	transition: opacity 1.8s ease-out;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity 0.5s linear; }
.hero__video.is-on { opacity: 1; }
/* Hides the film's left edge while the doors are still shut. */
.hero__edge {
	position: absolute; z-index: 2; left: -1px; top: 0; bottom: 0; width: 34%;
	background: linear-gradient(90deg, var(--hero-bg) 4%, transparent);
	opacity: 0; transition: opacity 1.8s ease-out;
}
/* Shade for the copy on the left, a fade at the top where the film does not reach, and the
   blend into the page at the bottom. */
.hero__stage::before {
	content: ''; position: absolute; inset: 0; z-index: 3;
	background:
		linear-gradient(180deg, var(--hero-bg) 0, var(--hero-bg) calc(100% - var(--set-h) - 2px), transparent calc(100% - var(--set-h) + 74px)),
		linear-gradient(90deg, rgba(7, 11, 24, 0.78), rgba(7, 11, 24, 0.3) 46%, transparent 64%);
}
.hero__stage::after {
	content: ''; position: absolute; inset: auto 0 0 0; height: calc(64px + var(--overlap) * 1.4); z-index: 4;
	background: linear-gradient(180deg, transparent, rgba(7, 12, 28, 0.72) 62%, var(--bg));
}

/* Intro: until the doors open the hangar is dark and the copy is held back. */
.js-intro .hero__set { background-image: none; background-color: #04060c; }
.js-intro .hero.is-still .hero__set, .js-intro .hero.is-lit .hero__set { background-image: url('../img/hero-still-960.webp'); }
.js-intro .hero:not(.is-lit) .hero__wall { opacity: 0; }
.js-intro .hero:not(.is-lit) .hero__edge { opacity: 1; }
.js-intro .hero:not(.is-lit) .hero__copy { visibility: hidden; }

.hero__inner {
	position: relative;
	display: flex; flex-direction: column;
	padding: 14px var(--gutter) 26px;
}
.hero__copy { margin-top: 26px; max-width: 60%; }

/* My World | SkyWars Arena: a cut-ended rail with a steel plate on the active side. */
.worlds {
	--tip: 15px;
	position: relative; align-self: center;
	display: flex; isolation: isolate;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.worlds::before, .worlds::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%); }
.worlds::before { inset: 0; background: linear-gradient(180deg, #a3b0cf, #4d5c84 50%, #8492b6); }
.worlds::after { inset: 1.5px; --tip: 14.2px; background: url('../img/grain.png') 0 0 / 48px, linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 22%, transparent 75%, rgba(0, 0, 0, 0.35)), linear-gradient(180deg, #232d4e, #151c36); }
.worlds__btn {
	position: relative; isolation: isolate;
	min-height: 42px; padding: 0 24px;
	font: 700 1.02rem/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
	color: #aeb7d0;
	transition: color 0.2s;
}
.worlds__btn span { text-shadow: 0 2px 0 rgba(6, 9, 24, 0.85), 0 3px 6px rgba(0, 0, 0, 0.6); }
.worlds__btn.is-on { color: #fff; }
.worlds__btn.is-on span { text-shadow: 0 2px 0 rgba(4, 12, 40, 0.95), 0 4px 8px rgba(0, 0, 0, 0.65), 0 0 14px rgba(150, 200, 255, 0.4); }
.worlds__btn:active { filter: brightness(1.25); }
/* The plate sits just inside the rail: a light purple edge, then a worn, bevelled face. */
.worlds__btn.is-on::before, .worlds__btn.is-on::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%); }
.worlds__btn.is-on::before { inset: 3px; --tip: 13.5px; background: linear-gradient(100deg, #c9a6ff 0%, #8f6cff 30%, #4f9dff 62%, #35d6ee 100%); }
.worlds__btn.is-on::after {
	inset: 4.5px; --tip: 12.8px;
	background:
		url('../img/grain.png') 0 0 / 48px, url('../img/grain.png') 17px 9px / 71px,
		linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.04) 12%, transparent 30%, transparent 72%, rgba(2, 6, 24, 0.45) 100%),
		radial-gradient(70% 130% at 8% 50%, rgba(150, 110, 255, 0.3), transparent 60%),
		radial-gradient(70% 130% at 96% 60%, rgba(53, 214, 238, 0.22), transparent 60%),
		linear-gradient(180deg, #1a3d70 0%, #133260 48%, #0e2850 52%, #123161 100%);
}

/* Chrome lettering: violet body and glow at the back, the polished face, then a lit rim. */
.hero__title {
	position: relative;
	font: italic 400 clamp(1.3rem, 5.9vw, 2.6rem)/1.08 var(--font-display);
	letter-spacing: 0.012em;
	text-transform: uppercase;
}
.chrome {
	position: relative; display: block; width: fit-content; max-width: 100%;
	padding-right: 0.16em;
	color: #6a3ff0;
	-webkit-text-stroke: 0.062em #7b54ff;
	paint-order: stroke fill;
	text-shadow: 0 0.035em 0 #6a3ff0, 0 0.07em 0 #4f27bc, 0 0.105em 0 #32168a, 0 0 0.38em rgba(134, 92, 255, 0.6), 0 0.22em 0.32em rgba(2, 2, 16, 0.9);
}
.chrome::before, .chrome::after {
	content: attr(data-text); content: attr(data-text) / '';
	position: absolute; inset: 0; padding-right: 0.16em;
	color: transparent; text-shadow: none; pointer-events: none;
}
.chrome::before {
	-webkit-text-stroke: 0;
	background:
		linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%) 130% 0 / 320% 100% no-repeat,
		linear-gradient(180deg, #ffffff 0%, #f3f5fd 26%, #c4cae6 46%, #8a93bd 53%, #d9def3 60%, #f7f8ff 78%, #c3bff0 100%) 0 0 / 100% 1.08em repeat-y;
	-webkit-background-clip: text; background-clip: text;
}
.chrome::after {
	-webkit-text-stroke: 0.03em rgba(255, 255, 255, 0.92);
	-webkit-mask: linear-gradient(180deg, #000 0 40%, rgba(0, 0, 0, 0.35) 100%) 0 0 / 100% 1.08em repeat-y;
	mask: linear-gradient(180deg, #000 0 40%, rgba(0, 0, 0, 0.35) 100%) 0 0 / 100% 1.08em repeat-y;
}
.chrome--big { font-size: 1.04em; }
/* The home title is supplied artwork. Its own speed streaks replace the drawn ones, and the
   sheen is cut to the lettering's shape. */
.hero__art { position: relative; display: block; width: min(74vw, 310px); margin-left: -5%; }
.hero__art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(2, 2, 16, 0.7)); }
.hero__art::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%) 130% 0 / 320% 100% no-repeat;
	-webkit-mask: url('../img/title-home-760.webp') center / 100% 100% no-repeat; mask: url('../img/title-home-760.webp') center / 100% 100% no-repeat;
}
.hero__title.has-art::before { display: none; }
.hero__copy:has(.hero__art) { max-width: none; }
.hero.is-lit .hero__art { animation: forge 0.8s var(--ease) backwards; }
.hero.is-lit .hero__art::after { animation: sheen-art 1.1s ease-in-out 0.55s backwards, sheen-art-loop 9s ease-in-out 6s infinite; }
.hero__copy.is-swap .hero__art, .hero__copy.is-swap .hero__art::after { animation: none; }
/* Speed streaks trailing off the first line. */
.hero__title::before {
	content: ''; position: absolute; right: calc(100% - 0.1em); top: 0.34em; width: 2.2em; height: 0.34em; z-index: -1;
	background:
		linear-gradient(90deg, transparent, #2a86ff 60%, #bfe3ff) 0 0 / 100% 2px no-repeat,
		linear-gradient(90deg, transparent, #2a86ff 70%, #8fd0ff) 100% 50% / 62% 2px no-repeat,
		linear-gradient(90deg, transparent, #5a3df0 70%, #b9a0ff) 100% 100% / 82% 1.5px no-repeat;
	filter: drop-shadow(0 0 4px rgba(42, 134, 255, 0.9));
	transform-origin: right;
}
.hero__sub {
	position: relative;
	margin-top: 12px; padding-left: 14px;
	font: italic 500 clamp(0.74rem, 3vw, 0.95rem)/1.35 var(--font-body);
	letter-spacing: 0.045em; text-transform: uppercase;
	color: #fff; text-shadow: 0 2px 10px rgba(4, 6, 24, 0.95);
	max-width: 12.8em;
}
.hero__sub::before {
	content: ''; position: absolute; left: 2px; top: 0.1em; width: 4px; height: 1.15em;
	background: linear-gradient(180deg, #c8a8ff, #7a43f2);
	transform: skewX(-16deg);
	box-shadow: 0 0 10px rgba(160, 112, 255, 0.9);
}

/* ---------- Page blocks ---------- */

.page { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 0 var(--gutter); margin-top: calc(-1 * var(--overlap)); }
.block { padding-top: 26px; }
.block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.block__title {
	position: relative; padding-left: 18px; width: fit-content;
	font: 700 1.75rem/1 var(--font-ui); letter-spacing: 0.015em; text-transform: uppercase;
	color: transparent; background: var(--steel); -webkit-background-clip: text; background-clip: text;
	filter: drop-shadow(0 2px 3px rgba(2, 4, 16, 0.8));
}
.block__title::before {
	content: ''; position: absolute; left: 1px; top: 0.1em; bottom: 0.1em; width: 7px;
	background: linear-gradient(180deg, #9af0fb, var(--cyan));
	transform: skewX(-16deg);
	box-shadow: 0 0 12px 1px rgba(53, 214, 238, 0.7);
}
.block__sub { margin: 4px 0 0 18px; color: var(--text-dim); font-size: 0.95rem; }
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cyan); font: 600 1rem/1 var(--font-ui); letter-spacing: 0.03em; text-transform: uppercase; }
.more svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }

/* Which blocks show in which view. On wide screens Home shows everything (see below). */
body[data-view='home'] [data-on]:not([data-on~='home']),
body[data-view='tournaments'] [data-on]:not([data-on~='tournaments']),
body[data-view='rankings'] [data-on]:not([data-on~='rankings']),
body[data-view='community'] [data-on]:not([data-on~='community']),
body[data-view='profile'] [data-on]:not([data-on~='profile']) { display: none; }
body[data-view='tournaments'] .block__head--tournaments,
body[data-view='rankings'] .block--rankings > .block__head { display: none; }
/* On the Tournaments view the tabs sit on the hangar floor, as in the design. */
body[data-view='tournaments'] { --overlap: 50px; }
body[data-view='tournaments'] .block--tournaments { padding-top: 0; }
/* On phones the first block sits close under the hero. */
@media (max-width: 599px) {
	.hero { --set-bottom: -16px; min-height: calc(284px + var(--overlap)); }
	.page > .block:first-of-type, .page > .soon + .block { padding-top: 4px; }
}

/* SkyWars Arena has nothing in it yet: the page gives way to one notice. */
.soon { display: none; --c: var(--purple); margin-top: 26px; padding: 30px 22px 28px; text-align: center; }
.soon__title { font: 700 1.9rem/1 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; }
.soon__text { max-width: 44ch; margin: 10px auto 18px; color: var(--text-dim); }
.soon .btn { --b: var(--purple); min-width: 200px; }
body[data-world='arena'][data-view] { --overlap: 0px; }
body[data-world='arena'] .page > .block { display: none; }
body[data-world='arena'] .soon { display: block; }
body[data-world='arena'] .page { max-width: 760px; margin-inline: auto; }

/* ---------- Community and Profile ---------- */
.comm, .prof, .prof-out { display: grid; gap: 28px; }
.comm__main, .comm__side, .prof__side, .prof__main { display: grid; gap: 28px; align-content: start; min-width: 0; }
.group { display: grid; gap: 0; min-width: 0; }
.stack { display: grid; gap: 12px; }
.panel { padding: 16px 14px; }
.panel__title { font: 700 1.2rem/1.1 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; }
.panel__text { margin: 6px 0 12px; color: var(--text-dim); font-size: 0.94rem; }
.panel__text--top { margin-top: 0; }
.avatar {
	flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
	font: 700 0.92rem/1 var(--font-ui); letter-spacing: 0.03em; color: #fff;
	background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--cyan)) 60%, #0b1326), #0f1a38);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, var(--cyan)) 78%, #fff), 0 0 12px -4px var(--c, var(--cyan));
}
.avatar--big { width: 68px; height: 68px; font-size: 1.5rem; }
.avatar svg { width: 34px; height: 30px; }
.feed__row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; box-shadow: inset 0 -1px 0 rgba(140, 156, 200, 0.22); }
.feed__text { min-width: 0; font: 600 1.05rem/1.2 var(--font-ui); letter-spacing: 0.01em; }
.feed__text b { font-weight: 700; text-transform: uppercase; color: color-mix(in srgb, var(--c, var(--cyan)) 70%, #fff); }
.feed__time { display: block; margin-top: 3px; color: var(--text-muted); font: 500 0.84rem/1 var(--font-ui); }
.field {
	width: 100%; min-width: 0; min-height: 44px; padding: 0 12px;
	font: 600 1rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
	background: rgba(5, 9, 22, 0.6); border: 1px solid var(--line); border-radius: 8px;
}
.field::placeholder { color: var(--text-muted); }
.field:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.linkrow { display: flex; align-items: center; gap: 10px; }
.linkrow .btn { flex: none; }
#invite-link { font: 400 0.92rem/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.panel .chips { margin-top: 12px; }
.chip-btn {
	min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 8px;
	font: 600 0.96rem/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
	background: rgba(12, 20, 44, 0.7); box-shadow: inset 0 0 0 1px var(--line);
	transition: color 0.2s, box-shadow 0.2s;
}
.pilot { display: flex; align-items: center; gap: 14px; }
.pilot__name { font: 700 1.5rem/1 var(--font-ui); letter-spacing: 0.01em; text-transform: uppercase; }
.pilot__since { margin-top: 4px; color: var(--text-dim); font-size: 0.9rem; }
.pilot .btn { margin-left: auto; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; perspective: 700px; }
.stat { --c: #53628f; --cut: 9px; display: grid; justify-items: center; gap: 4px; padding: 14px 6px 12px; box-shadow: none; }
.stat__value { font: 700 1.6rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.stat__label { font: 600 0.74rem/1 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.walletcard { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.walletcard__bal { margin-right: auto; display: grid; gap: 3px; }
.walletcard__label { font: 600 0.74rem/1 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.walletcard__amount { font: 700 1.8rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.setlist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; box-shadow: inset 0 -1px 0 rgba(140, 156, 200, 0.22); font: 600 1.08rem/1 var(--font-ui); letter-spacing: 0.02em; }
.setlist__go { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: space-between; font: inherit; letter-spacing: inherit; text-align: left; }
.setlist__go svg { width: 18px; height: 18px; color: var(--text-muted); }
.switch { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: #1c2748; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 0.25s, box-shadow 0.25s; }
.switch::after { content: ''; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #8f9bc0; transition: transform 0.25s var(--ease), background-color 0.25s; }
.switch[aria-pressed='true'] { background: color-mix(in srgb, var(--cyan) 40%, #0b1326); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 12px -4px var(--cyan); }
.switch[aria-pressed='true']::after { transform: translateX(20px); background: #fff; }
.flights { perspective: 700px; }
.flights li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; box-shadow: inset 0 -1px 0 rgba(140, 156, 200, 0.22); }
.flights__name { display: block; font: 700 1.08rem/1.1 var(--font-ui); letter-spacing: 0.01em; text-transform: uppercase; }
.flights__when { display: block; margin-top: 4px; color: var(--text-muted); font: 500 0.84rem/1 var(--font-ui); }
.flights__pts { font: 700 1.12rem/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cyan); }
.signup { --c: var(--purple); display: grid; justify-items: center; gap: 12px; padding: 28px 18px; text-align: center; }
.signup .avatar { --c: var(--purple); }
.signup__title { font: 700 1.8rem/1 var(--font-ui); letter-spacing: 0.01em; text-transform: uppercase; }
.signup__text { max-width: 40ch; color: var(--text-dim); }
.signup .btn { width: 100%; max-width: 340px; min-height: 48px; }
.benefit { --cut: 10px; display: flex; align-items: center; gap: 14px; padding: 13px 14px; }
.benefit svg { width: 30px; height: 30px; flex: none; color: var(--c); stroke: currentColor; }
.benefit__name { font: 700 1.12rem/1.1 var(--font-ui); text-transform: uppercase; }
.benefit__text { margin-top: 2px; color: var(--text-dim); font-size: 0.92rem; }
.btn--ghost { background: linear-gradient(180deg, #a3b0cf, #4d5c84); }
.btn--ghost::before { background: linear-gradient(180deg, #1c2748, #111a34); }
.block--community .block__head, .block--profile .block__head { min-height: 44px; align-items: center; }
#mylist .tcard:nth-child(n + 3) { display: none; }

/* ---------- Video popup ---------- */
.player {
	width: min(94vw, 1080px); max-width: none; max-height: 92dvh;
	padding: 0; border: 0; background: none; color: inherit; overflow: visible;
}
.player::backdrop { background: rgba(3, 5, 14, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.player[open] { animation: player-in 0.45s var(--ease); }
.player[open]::backdrop { animation: fade-in 0.35s ease-out; }
.player__box { --cut: 14px; padding: 8px; }
.player__bar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px 10px; }
.player__title { flex: 1; min-width: 0; font: 700 1.25rem/1.1 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; }
.player__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: var(--silver); transition: color 0.2s, background-color 0.2s; }
.player__btn svg { width: 24px; height: 24px; }
.player__video { display: block; width: 100%; max-height: calc(92dvh - 80px); aspect-ratio: 16 / 9; background: #000; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.player__video:fullscreen { clip-path: none; max-height: none; }
@keyframes player-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Entry gate ----------
   Shown only when the browser will not start sound by itself: one tap starts the film and
   the music together. */
.gate {
	position: fixed; inset: 0; z-index: 100;
	display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px;
	background: var(--grain), radial-gradient(70% 55% at 50% 42%, #151d44, #05070f 78%);
	transition: opacity 0.6s ease-out;
}
.gate.is-leaving { opacity: 0; pointer-events: none; }
.gate__logo { position: relative; display: block; width: min(72vw, 440px); margin-bottom: 10px; filter: drop-shadow(0 6px 24px rgba(90, 70, 240, 0.6)); animation: logo-in 0.9s var(--ease) backwards; }
.gate__logo img { display: block; width: 100%; height: auto; }
.gate__logo::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%) 130% 0 / 320% 100% no-repeat;
	-webkit-mask: url('../img/logo.webp') center / 100% 100% no-repeat; mask: url('../img/logo.webp') center / 100% 100% no-repeat;
	animation: gate-sheen 3.4s ease-in-out 0.8s infinite;
}
.gate .btn { --b: #9466ff; min-height: 54px; min-width: 230px; font-size: 1.35rem; }
.gate__quiet { min-height: 44px; padding: 0 12px; color: var(--text-dim); font: 500 1rem/1 var(--font-ui); letter-spacing: 0.03em; text-decoration: underline; text-underline-offset: 4px; }
body.is-gated { overflow: hidden; }

/* ---------- How to play ---------- */

/* Phones: a row to swipe, with the third card peeking in. The padding and negative margins
   give the cards' glow room inside the scrolling box and let the row run to the screen edge. */
.videos {
	display: flex; gap: 12px;
	margin: -14px calc(-1 * var(--gutter)); padding: 14px var(--gutter);
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.videos::-webkit-scrollbar { display: none; }
.videos > .video { flex: 0 0 44%; scroll-snap-align: start; }
.video { --cut: 10px; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; text-align: left; padding: 5px; transition: transform 0.3s var(--ease); }
.video__thumb {
	display: grid; place-items: center; aspect-ratio: 16 / 9;
	background: linear-gradient(180deg, rgba(7, 12, 28, 0.05), rgba(7, 12, 28, 0.6)), url('../img/howto-1.webp') center / cover;
	clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
}
.video__thumb { position: relative; overflow: hidden; }
.video__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.video__clip.is-on { opacity: 1; }
.video__play { position: relative; }
.video__thumb--b { background-image: linear-gradient(180deg, rgba(7, 12, 28, 0.05), rgba(7, 12, 28, 0.6)), url('../img/howto-2.webp'); }
.video__thumb--c { background-image: linear-gradient(180deg, rgba(7, 12, 28, 0.05), rgba(7, 12, 28, 0.6)), url('../img/howto-3.webp'); }
.video__play {
	width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
	background: rgba(7, 12, 28, 0.66); color: #fff;
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 5px rgba(255, 255, 255, 0.12), 0 6px 16px rgba(0, 0, 0, 0.6);
	transition: transform 0.3s var(--ease), background-color 0.3s;
}
.video__play svg { width: 22px; height: 22px; margin-left: 2px; }
.video__cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 7px 6px; }
.video__name { min-width: 0; font: 700 1rem/1.1 var(--font-ui); letter-spacing: 0.01em; text-transform: uppercase; }
.video__time { flex: none; font: 600 0.82rem/1 var(--font-ui); padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 4px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- Tabs ---------- */

.tabs {
	position: relative;
	display: flex; justify-content: space-between; gap: 14px;
	margin-bottom: 16px;
	overflow-x: auto; scrollbar-width: none;
	box-shadow: inset 0 -1px 0 rgba(140, 156, 200, 0.32);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
	flex: none; min-height: 48px; padding: 2px 2px 6px;
	font: 700 1rem/1 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
	color: #8f9bc0;
	text-shadow: 0 1px 6px rgba(4, 7, 20, 0.9);
	transition: color 0.25s;
}
.tabs__tab.is-on { color: #fff; }
.tabs__ink {
	position: absolute; left: 0; bottom: 0; width: var(--ink-w, 0); height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, #1fa9d6, #7df0ff 50%, #1fa9d6);
	box-shadow: 0 0 12px rgba(53, 214, 238, 0.95), 0 0 2px #fff;
	transform: translateX(var(--ink-x, 0));
	transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}

/* ---------- Tournament cards ---------- */

.tlist { display: grid; gap: 12px; }
.tcard {
	--b: var(--c);
	display: grid;
	grid-template-columns: auto 1px minmax(0, 1fr) 1px auto;
	grid-template-areas: 'count ra tag rb prize' 'count ra name rb prize' 'count ra meta rb view' 'count ra date rb view';
	column-gap: 10px; row-gap: 1px; align-items: center;
	padding: 12px 12px 12px 10px;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tcard[data-btn='cyan'] { --b: var(--cyan); }
.tcard[data-btn='purple'] { --b: var(--purple); }
.tcard[data-btn='gold'] { --b: var(--gold); }

.tcard__rule { align-self: stretch; margin-block: 2px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 60%, transparent) 22%, color-mix(in srgb, var(--c) 60%, transparent) 78%, transparent); }
.tcard__rule--a { grid-area: ra; }
.tcard__rule--b { grid-area: rb; }

.tcard__count {
	grid-area: count; align-self: stretch;
	display: grid; align-content: center; justify-items: center; gap: 5px;
	min-width: 84px; padding: 8px 7px;
	border-radius: 8px;
	background:
		linear-gradient(90deg, transparent, var(--hi) 50%, transparent) 50% 0 / 70% 1px no-repeat,
		linear-gradient(90deg, transparent, var(--hi) 50%, transparent) 50% 100% / 70% 1px no-repeat,
		rgba(5, 9, 22, 0.5);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent), inset 0 8px 14px -8px rgba(0, 0, 0, 0.7);
}
.tcard__count-label { font: 600 0.78rem/1 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, #cfd8ee); }
.tcard__time { font: 700 1.36rem/1 var(--font-ui); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }

.tcard__tag {
	grid-area: tag; justify-self: start;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 8px 2px; margin-bottom: 3px;
	border: 1px solid var(--c); border-radius: 5px;
	font: 700 0.74rem/1.1 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase;
	color: color-mix(in srgb, var(--c) 62%, #fff);
	background: color-mix(in srgb, var(--c) 16%, transparent);
	box-shadow: inset 0 0 8px -2px color-mix(in srgb, var(--c) 60%, transparent);
}
.tcard__name { grid-area: name; font: 700 1.2rem/1.02 var(--font-ui); letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: break-word; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55); }
.tcard__meta { grid-area: meta; color: #dfe5f5; font-size: 0.88rem; line-height: 1.3; }
.tcard__date { grid-area: date; display: flex; align-items: center; gap: 6px; color: #dfe5f5; font: 500 0.9rem/1.15 var(--font-ui); letter-spacing: 0.03em; text-transform: uppercase; }
.tcard__date svg { width: 16px; height: 16px; color: var(--silver); }
.tcard__date-text { display: flex; flex-wrap: wrap; column-gap: 0.35em; }
.tcard__date-text span { white-space: nowrap; }
.tcard__prize { grid-area: prize; justify-self: stretch; display: grid; gap: 1px; padding-left: 2px; }
.tcard__prize-label { font: 600 0.74rem/1 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: #a9b4d2; }
.tcard__amount { font: 700 1.55rem/1 var(--font-ui); font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(180deg, #fff 30%, #c9d0e6); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.tcard__view { grid-area: view; justify-self: stretch; align-self: end; }

/* Live: a steady gold glow and a slow blink on the tag. */
.tcard[data-status='live'] { box-shadow: 0 0 0 1px rgba(243, 178, 60, 0.22), 0 0 30px -9px var(--c), 0 0 70px -30px var(--c), 0 18px 26px -20px #000; }
.tcard[data-status='live'] .tcard__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: blink 1.8s ease-in-out infinite alternate; }
/* Hologram: scan lines and a slow scan bar over each card, a faint colour split on the big
   text, and a refocus when the pointer lands on the card. */
.tcard__holo, .holo {
	position: absolute; inset: var(--bw); overflow: hidden; pointer-events: none;
	clip-path: var(--shape-in);
	background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, 0.5)) 0 1px, transparent 1px 3px);
	opacity: 0.11;
	animation: holo-flicker 6s steps(1) calc(var(--i, 0) * -1.7s) infinite;
	transition: opacity 0.5s var(--ease);
}
.tcard__holo::before, .holo::before {
	content: ''; position: absolute; left: 0; right: 0; top: 0; height: 38%;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 70%, #fff));
	box-shadow: 0 1px 0 #fff;
	animation: holo-scan 6.5s linear calc(var(--i, 0) * -1.9s) infinite;
}
.tcard__time, .tcard__name, .podium__points, .period__prize, .race__name, .board__title { text-shadow: -0.6px 0 rgba(255, 70, 150, 0.4), 0.6px 0 rgba(70, 225, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.55); }
.board__panel > .holo { opacity: 0.08; animation: none; }
.tcard__time.is-urgent { color: color-mix(in srgb, var(--c) 45%, #fff); animation: tick 1s ease-out infinite; }

/* The button: a slanted plate with a lit edge and a glossy face. */
.btn {
	--b: var(--cyan);
	--slant: 11px;
	--btn-shape: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
	position: relative; display: inline-grid; place-items: center; isolation: isolate; overflow: hidden;
	min-height: 40px; min-width: 96px; padding: 0 20px;
	font: 700 1.08rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	background: linear-gradient(180deg, color-mix(in srgb, var(--b) 40%, #fff), var(--b) 45%, color-mix(in srgb, var(--b) 60%, #fff));
	clip-path: var(--btn-shape);
	transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn[data-btn='cyan'], [data-btn='cyan'] > .btn { --b: #2bb8dc; }
[data-btn='purple'] > .btn { --b: #9466ff; }
[data-btn='gold'] > .btn { --b: #f0aa32; }
.btn::before {
	content: ''; position: absolute; inset: 1.5px; z-index: -2;
	clip-path: polygon(calc(var(--slant) - 0.5px) 0, 100% 0, calc(100% - var(--slant) + 0.5px) 100%, 0 100%);
	background:
		radial-gradient(64% 5px at 50% 100%, color-mix(in srgb, var(--b) 30%, #fff), transparent),
		linear-gradient(180deg, color-mix(in srgb, var(--b) 62%, #0b1428) 0%, color-mix(in srgb, var(--b) 44%, #0b1428) 48%, color-mix(in srgb, var(--b) 28%, #080e20) 52%, color-mix(in srgb, var(--b) 40%, #0b1428) 100%);
}
/* A sheen that crosses the plate on hover and on press. */
.btn::after {
	content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: translateX(0) skewX(-18deg);
	transition: transform 0s;
}
.btn:active { transform: translateY(1px) scale(0.975); filter: brightness(1.25); }
.btn:active::after { transform: translateX(480%) skewX(-18deg); transition: transform 0.5s var(--ease); }
.btn--wide { width: 100%; min-height: 46px; margin-top: 12px; }
.btn--small { min-height: 36px; min-width: 0; padding: 0 16px; font-size: 0.94rem; letter-spacing: 0.03em; }
.btn--small span { display: inline-flex; align-items: center; gap: 6px; }
.btn--small svg { width: 16px; height: 16px; }

/* Home on a phone: the first three, with the full list one tap away. */
@media (max-width: 899px) {
	body[data-view='home'] .tcard:nth-child(n + 4) { display: none; }
	body[data-view='home'] .board { display: none; }
	body[data-view='rankings'] .races { display: none; }
}

.empty { --c: var(--line); --cut: 10px; padding: 30px 18px; color: var(--text-dim); text-align: center; box-shadow: none; }

/* ---------- Race rows ---------- */

.races { display: grid; gap: 12px; }
.race {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 11px 12px;
}
.race__icon { width: 38px; height: 38px; color: var(--c); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)); }
.race__name { font: 700 1.22rem/1.05 var(--font-ui); text-transform: uppercase; }
.race__prize { font: 600 1rem/1.2 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; color: var(--gold); }
.race__date { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--text-dim); font: 500 0.86rem/1.2 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; }
.race__date svg { width: 14px; height: 14px; }
.race .btn { --b: var(--c); }

/* ---------- Leaderboard ---------- */

.periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.period {
	--c: #53628f; --cut: 9px;
	display: grid; justify-items: center; gap: 2px; padding: 11px 4px 10px;
	box-shadow: none;
	transition: transform 0.3s var(--ease);
}
.period svg { width: 26px; height: 26px; color: var(--silver); }
.period__name { font: 700 1rem/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 6px; width: 78%; text-align: center; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c) 60%, transparent); }
.period__prize { font: 700 1.5rem/1.1 var(--font-ui); font-variant-numeric: tabular-nums; margin-top: 5px; }
.period__note { font: 600 0.72rem/1 var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.period.is-on { --c: var(--cyan); box-shadow: 0 0 20px -7px var(--c), 0 18px 26px -20px #000; }
.period.is-on svg, .period.is-on .period__note { color: var(--cyan); }
.period.is-on svg { filter: drop-shadow(0 0 6px rgba(53, 214, 238, 0.8)); }

.board__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.board__title { font: 700 1.45rem/1 var(--font-ui); letter-spacing: 0.01em; text-transform: uppercase; }
.chip {
	position: relative; isolation: isolate;
	padding: 8px 16px 7px; white-space: nowrap;
	font: 700 0.92rem/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums;
	color: #fff; background: linear-gradient(180deg, #8ceaf7, var(--cyan));
	clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.chip::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; background: linear-gradient(180deg, #14506c, #0b2946); clip-path: polygon(8.5px 0, 100% 0, calc(100% - 8.5px) 100%, 0 100%); }
.board__range { display: flex; align-items: center; gap: 6px; margin: 9px 0 11px; color: var(--text-dim); font: 500 0.9rem/1.2 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; }
.board__range svg { width: 16px; height: 16px; }
.board__panel { --cut: 14px; padding: 14px 12px 12px; }
.board__panel.frame::after { background: var(--grain), radial-gradient(70% 30% at 50% 0%, rgba(53, 214, 238, 0.14), transparent 72%), linear-gradient(180deg, #111b38, #0b1226); }

.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 8px; align-items: end; margin-bottom: 10px; }
.podium__place {
	--c: var(--silver); --cut: 8px;
	display: grid; justify-items: center; gap: 2px; padding: 11px 4px 10px;
	box-shadow: 0 0 16px -8px var(--c);
}
.podium__place[data-rank='1'] { --c: var(--gold); padding-block: 19px 18px; }
.podium__place[data-rank='3'] { --c: var(--bronze); }
.podium__rank { font: 700 1.35rem/1 var(--font-ui); text-transform: uppercase; color: var(--c); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.podium__name { font: 600 0.92rem/1.1 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; }
.podium__points { font: 700 1.22rem/1.1 var(--font-ui); color: var(--c); font-variant-numeric: tabular-nums; }

.ranks { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-family: var(--font-ui); }
.ranks th { padding: 0 10px; font: 600 0.78rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); text-align: left; }
.ranks td { padding: 9px 10px; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; background: rgba(5, 9, 22, 0.55); border-block: 1px solid var(--line); }
.ranks td:first-child { width: 44px; font-weight: 700; color: var(--cyan); border-left: 1px solid var(--line); border-radius: 7px 0 0 7px; }
.ranks td:last-child { border-right: 1px solid var(--line); border-radius: 0 7px 7px 0; }
.ranks .num { text-align: right; font-variant-numeric: tabular-nums; }

.footnote { display: flex; align-items: center; gap: 14px; margin: 28px var(--gutter) 20px; color: #c3cbe2; font: 500 0.86rem/1.3 var(--font-ui); letter-spacing: 0.03em; text-align: center; }
.footnote::before, .footnote::after { content: ''; flex: 1; min-width: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgba(53, 150, 220, 0.75)); }
.footnote::after { transform: scaleX(-1); }
.footnote span { flex: 0 1 auto; }

/* ---------- Bottom nav ---------- */

.tabbar {
	position: fixed; inset: auto 0 0 0; z-index: 30;
	height: var(--bar-bottom); padding-bottom: env(safe-area-inset-bottom, 0px);
	display: grid; grid-template-columns: repeat(4, 1fr);
	background: var(--grain), linear-gradient(180deg, #0e162f, #080d1e);
	box-shadow: inset 0 1px 0 rgba(150, 165, 205, 0.4), 0 -12px 30px -14px rgba(0, 0, 0, 0.95);
}
.tabbar__item {
	position: relative; display: grid; place-content: center; justify-items: center; gap: 4px;
	font: 700 0.8rem/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase;
	color: #b3bdd8;
	transition: color 0.25s;
}
.tabbar__item + .tabbar__item::after { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, rgba(120, 136, 180, 0.6), transparent); }
.tabbar__item svg { width: 34px; height: 26px; fill: url(#steel); stroke: url(#steel); }
.tabbar__item[aria-current='page'] {
	color: #fff;
	background: radial-gradient(90% 100% at 50% 0%, rgba(30, 130, 190, 0.5), rgba(14, 60, 110, 0.18) 60%, transparent);
}
.tabbar__item[aria-current='page'] svg { filter: drop-shadow(0 0 6px rgba(120, 220, 255, 0.7)); }
/* The lit bar on top of the active item, and the short one under its label. */
.tabbar__item[aria-current='page']::before {
	content: ''; position: absolute; inset: -1px 0 auto 0; height: 3px;
	background: linear-gradient(90deg, #1b8fd0, #8af1ff 50%, #1b8fd0);
	box-shadow: 0 0 14px 1px rgba(53, 214, 238, 0.9);
	animation: nav-on 0.5s var(--ease);
}
.tabbar__item[aria-current='page'] span { position: relative; }
.tabbar__item[aria-current='page'] span::after { content: ''; position: absolute; left: 22%; right: 22%; top: calc(100% + 5px); height: 2px; border-radius: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* ---------- Motion ----------
   One authored moment: the hangar lights up and the page flows in behind it. After that, motion
   only answers a tap or marks something live. */

@keyframes flow-in { from { opacity: 0; transform: translateY(22px); filter: blur(5px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-90px) skewX(-6deg); filter: blur(6px); } 70% { filter: none; } }
@keyframes slot-in {
	0% { opacity: 0; transform: translateY(-70%) rotateX(88deg); filter: blur(4px) brightness(1.8); }
	45% { opacity: 1; filter: blur(1px) brightness(1.3); }
	72% { transform: translateY(5%) rotateX(-9deg); filter: none; }
	100% { transform: none; }
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes rise-in { from { transform: translateY(100%); } }
@keyframes draw-in { from { transform: scaleX(0); opacity: 0; } }
@keyframes logo-in { from { opacity: 0; transform: scale(0.86); filter: brightness(2.4) blur(4px); } }
@keyframes forge { from { opacity: 0; transform: translateX(-34px) skewX(-10deg); clip-path: inset(-20% 100% -40% -10%); filter: brightness(2.6); } to { opacity: 1; transform: none; clip-path: inset(-20% -10% -40% -10%); filter: none; } }
@keyframes sheen { from { background-position: 130% 0, 0 0; } to { background-position: -40% 0, 0 0; } }
@keyframes sheen-loop { 0%, 86% { background-position: 130% 0, 0 0; } 100% { background-position: -40% 0, 0 0; } }
@keyframes logo-sheen { 0% { background-position: 130% 0; } 14%, 100% { background-position: -40% 0; } }
@keyframes sheen-art { from { background-position: 130% 0; } to { background-position: -40% 0; } }
@keyframes sheen-art-loop { 0%, 86% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
@keyframes gate-sheen { 0% { background-position: 130% 0; } 40%, 100% { background-position: -40% 0; } }
@keyframes streak { from { transform: scaleX(0); opacity: 0; } }
@keyframes holo-scan { from { transform: translateY(-105%); } to { transform: translateY(275%); } }
@keyframes holo-flicker { 0%, 100% { opacity: 0.11; } 47% { opacity: 0.06; } 49% { opacity: 0.16; } 51% { opacity: 0.11; } 83% { opacity: 0.07; } 85% { opacity: 0.11; } }
@keyframes refocus {
	0% { filter: blur(4px) brightness(1.9); transform: translateX(-5px) skewX(-6deg); opacity: 0.5; }
	30% { filter: blur(1.5px) brightness(1.4); transform: translateX(3px) skewX(3deg); opacity: 1; }
	55% { filter: blur(0.5px) brightness(1.2); transform: translateX(-1px); }
	100% { filter: none; transform: none; }
}
@keyframes live-bob { 0%, 6.7%, 11.1%, 17.8%, 22.2%, 28.9%, 33.3%, 100% { transform: translateY(0); } 3.3%, 14.4%, 25.5% { transform: translateY(-5px); } 8.9%, 20%, 31.1% { transform: translateY(-3px); } }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.25; } }
@keyframes tick { 0% { text-shadow: 0 0 14px var(--c), 0 2px 4px rgba(0, 0, 0, 0.6); } 100% { text-shadow: 0 0 0 transparent, 0 2px 4px rgba(0, 0, 0, 0.6); } }
@keyframes nav-on { from { transform: scaleX(0); opacity: 0; } }
@keyframes edge-trace { from { background-position: -40% 0, 140% 100%, 0 140%, 100% -40%, 0 0; } }

.topbar::before, .topbar::after { animation: draw-in 0.9s var(--ease) 0.15s backwards; }
.topbar__logo img { animation: logo-in 0.9s var(--ease) 0.1s backwards; }
.worlds { animation: drop-in 0.7s var(--ease) 0.35s backwards; }
.tabbar { animation: rise-in 0.7s var(--ease) 0.2s backwards; }

/* Arriving on scroll (see site.js). Items wait out of sight until they scroll into view;
   --d staggers the ones that arrive together. Without the intro class (reduced motion, or no
   script) nothing is hidden. */
.js-intro .reveal:not(.is-in) { opacity: 0; }
.js-intro tr.reveal:not(.is-in) { opacity: 1; }
.js-intro tr.reveal:not(.is-in) td { opacity: 0; }
.reveal--slide.is-in { animation: slide-in 1.2s var(--ease) var(--d, 0ms) backwards; }
.reveal--slot.is-in { animation: slot-in 1.3s var(--ease) var(--d, 0ms) backwards; transform-origin: 50% 0; }
tr.reveal--slot.is-in { animation: none; }
tr.reveal--slot.is-in td { animation: slot-in 1.3s var(--ease) var(--d, 0ms) backwards; transform-origin: 50% 0; }
.podium, .periods, .races, .ranks tbody { perspective: 700px; }
/* The live card slides in, then hops for three seconds out of every nine to draw the eye. */
.tcard[data-status='live'].reveal.is-in { animation: slide-in 1.2s var(--ease) var(--d, 0ms) backwards, live-bob 9s ease-in-out calc(var(--d, 0ms) + 2.4s) infinite; }
.reveal.is-in.frame::before { animation: edge-trace 1.1s var(--ease) calc(var(--d, 0ms) + 150ms) backwards; }

.hero.is-lit .chrome { animation: forge 0.8s var(--ease) backwards; }
.hero.is-lit .chrome--big { animation-delay: 0.12s; }
.hero.is-lit .chrome::before { animation: sheen 1.1s ease-in-out 0.55s backwards, sheen-loop 9s ease-in-out 6s infinite; }
.hero.is-lit .chrome--big::before { animation-delay: 0.7s, 6.15s; }
.hero.is-lit .hero__title::before { animation: streak 0.6s var(--ease) 0.25s backwards; }
.hero.is-lit .hero__sub { animation: flow-in 0.7s var(--ease) 0.45s backwards; }
/* Re-run the title when the view changes. */
.hero__copy.is-swap .chrome, .hero__copy.is-swap .chrome::before, .hero__copy.is-swap .hero__sub, .hero__copy.is-swap .hero__title::before { animation: none; }

@media (hover: hover) {
	.tcard:hover, .video:hover, .period:hover { transform: translateY(-3px); }
	.tcard:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 34px -5px var(--c), 0 22px 28px -20px #000; }
	.tcard:hover > :not(.tcard__holo):not(.tcard__rule) { animation: refocus 0.55s var(--ease); }
	.tcard:hover .tcard__holo, .race:hover > .holo, .period:hover > .holo, .podium__place:hover > .holo { opacity: 0.045; animation: none; }
	.race:hover > :not(.holo), .period:hover > :not(.holo), .podium__place:hover > :not(.holo) { animation: refocus 0.55s var(--ease); }
	.video:hover .video__play { transform: scale(1.1); background: color-mix(in srgb, var(--c) 45%, rgba(7, 12, 28, 0.6)); }
	.btn:hover { filter: brightness(1.2); }
	.btn:hover::after { transform: translateX(480%) skewX(-18deg); transition: transform 0.6s var(--ease); }
	.more:hover svg { transform: translateX(4px); }
	.player__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
	.chip-btn:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--cyan); }
	.tabs__tab:hover, .tabbar__item:hover, .worlds__btn:hover { color: #fff; }
}

/* ---------- Wider screens ---------- */

@media (min-width: 600px) {
	:root { --gutter: 24px; --notch-w: 190px; }
	.hero { --set-h: 300px; --set-right: 0px; min-height: calc(340px + var(--overlap)); }
	.hero__copy { max-width: 50%; }
	.hero__sub { max-width: none; }
	.hero__art { width: min(60vw, 470px); }
	.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
	.videos > .video { flex: none; }
	.tabs { justify-content: flex-start; gap: 44px; }
	.tabs__tab { font-size: 1.12rem; }
	.tcard { padding: 14px 18px 14px 14px; column-gap: 16px; }
	.tcard__count { min-width: 108px; }
	.tcard__time { font-size: 1.6rem; }
	.tcard__name { font-size: 1.5rem; }
	.btn { min-width: 120px; }
}

@media (min-width: 900px) {
	:root { --bar-top: 72px; --bar-bottom: 72px; --gutter: clamp(28px, 3.4vw, 64px); --notch-w: clamp(220px, 19vw, 330px); --notch-d: 9px; }
	.iconbtn svg { width: 36px; height: 36px; }
	.wallet { gap: 12px; }
	.wallet svg { width: 42px; height: 42px; color: var(--cyan); filter: drop-shadow(0 0 6px rgba(53, 214, 238, 0.5)); }
	.wallet__label { font-size: 0.9rem; }
	.wallet__amount { font-size: 1.7rem; }
	.sound { width: 42px; height: 42px; margin-left: 6px; }

	.hero { min-height: clamp(340px, 26.4vw, 520px); }
	.hero__set { right: 0; top: -17%; bottom: auto; height: 117%; background-image: url('../img/hero-still-1600.webp'); }
	.js-intro .hero.is-still .hero__set, .js-intro .hero.is-lit .hero__set { background-image: url('../img/hero-still-1600.webp'); }
	.hero__stage::before { background: linear-gradient(90deg, rgba(7, 11, 24, 0.8), rgba(7, 11, 24, 0.34) 40%, transparent 58%); }
	.hero__stage::after { height: calc(90px + var(--overlap)); }
	.hero__inner { padding: 22px calc(var(--gutter) + 1.2vw) 40px; }
	.hero__copy { margin-top: clamp(18px, 2.5vw, 48px); max-width: 48%; }
	.hero__title { font-size: clamp(2.1rem, 3.95vw, 4.7rem); }
	.chrome--big { font-size: 1.16em; }
	.hero__art { width: clamp(400px, 45vw, 860px); margin-left: -4.2%; }
	.hero__sub { max-width: none; margin-top: clamp(14px, 1.5vw, 26px); padding-left: 22px; font-size: clamp(0.9rem, 1.32vw, 1.5rem); }
	.hero__sub::before { width: 5px; }
	.worlds { --tip: 20px; }
	.worlds::after { --tip: 19px; }
	.worlds__btn { min-height: clamp(46px, 3.6vw, 56px); padding: 0 clamp(34px, 3.4vw, 60px); font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
	.worlds__btn.is-on::before { --tip: 18px; }
	.worlds__btn.is-on::after { --tip: 17.2px; }

	.block { padding-top: 40px; }
	.block__title { font-size: 2.1rem; }
	.tabs { gap: clamp(40px, 4.4vw, 76px); margin-bottom: 22px; }
	.tabs__tab { min-height: 60px; font-size: clamp(1.2rem, 1.42vw, 1.5rem); padding-bottom: 10px; }
	.tabs__ink { height: 4px; }

	.tabbar { padding-inline: var(--gutter); }
	.tabbar__item { grid-auto-flow: column; align-items: center; gap: 16px; font-size: 1.22rem; }
	.tabbar__item svg { width: 40px; height: 30px; }
	.tabbar__item[aria-current='page'] { background: linear-gradient(180deg, rgba(20, 110, 160, 0.62), rgba(12, 52, 96, 0.3) 70%, rgba(12, 52, 96, 0.12)); }
	.tabbar__item[aria-current='page'] span::after { display: none; }
	.footnote { margin-block: 34px 26px; font-size: 1.02rem; }
	.footnote::before, .footnote::after { max-width: 320px; }
	.footnote { justify-content: center; }

	/* The Tournaments view: upright cards, four across, with rounded double edges as in the design. */
	body[data-view='tournaments'] { --overlap: 62px; }
	body[data-view='tournaments'] .tlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px); }
	body[data-view='tournaments'] .tcard {
		container-type: inline-size;
		--cut: 16px; --bw: 2px;
		--shape: inset(0 round 16px); --shape-in: inset(0 round 14px); --glow-r: 16px;
		grid-template-columns: minmax(0, 1.45fr) 1px minmax(0, 1fr);
		grid-template-areas: 'tag rb prize' 'count rb prize' 'name rb .' 'meta rb .' 'date rb view';
		grid-template-rows: auto auto auto 1fr auto;
		column-gap: 4.6%; row-gap: 4px; align-items: start;
		padding: 5.2% 6.2% 6.2% 7.4%;
	}
	/* One hundredth of the card's inner width, capped for very wide cards. */
	body[data-view='tournaments'] .tcard > * { --u: min(1cqw, 3.5px); }
	body[data-view='tournaments'] .tcard.frame::after {
		border-radius: 14px;
		box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--c) 9%, #0a1022), inset 0 0 0 6px color-mix(in srgb, var(--c) 46%, transparent), inset 0 0 34px -8px color-mix(in srgb, var(--c) 50%, transparent);
		background:
			var(--grain),
			radial-gradient(70% 46% at 50% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 72%),
			radial-gradient(60% 34% at 50% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 72%),
			linear-gradient(158deg, var(--face-a), var(--face-b) 68%);
	}
	body[data-view='tournaments'] .tcard__rule--a { display: none; }
	body[data-view='tournaments'] .tcard__rule--b { grid-row: 1 / -1; margin-block: 2px; }
	body[data-view='tournaments'] .tcard__count { justify-items: start; gap: calc(var(--u) * 1.6); padding: 0; margin-top: calc(var(--u) * 4.2); min-width: 0; background: none; box-shadow: none; border-radius: 0; }
	body[data-view='tournaments'] .tcard__count-label { font-size: calc(var(--u) * 6.4); letter-spacing: 0.04em; color: color-mix(in srgb, var(--c) 78%, #fff); }
	body[data-view='tournaments'] .tcard__time { font-size: calc(var(--u) * 9.7); }
	body[data-view='tournaments'] .tcard[data-status='registering'] .tcard__time, .tcard[data-status='live'] .tcard__time { color: color-mix(in srgb, var(--c) 82%, #fff); }
	body[data-view='tournaments'] .tcard__tag { font-size: calc(var(--u) * 5.4); padding: calc(var(--u) * 1.7) calc(var(--u) * 3.4) calc(var(--u) * 1.3); border-width: 1.5px; border-radius: 7px; margin: 0; }
	body[data-view='tournaments'] .tcard__name { font-size: calc(var(--u) * 8.5); min-height: 2.04em; margin-top: calc(var(--u) * 1.4); }
	body[data-view='tournaments'] .tcard__meta { font-size: calc(var(--u) * 5.9); }
	body[data-view='tournaments'] .tcard__date { font-size: calc(var(--u) * 5.3); align-self: end; line-height: 1.25; align-items: flex-start; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3); }
	body[data-view='tournaments'] .tcard__date svg { width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); margin-top: 0.1em; }
	body[data-view='tournaments'] .tcard__prize { gap: calc(var(--u) * 1.4); padding-left: 0; margin-top: calc(var(--u) * 1.8); }
	body[data-view='tournaments'] .tcard__prize-label { font-size: calc(var(--u) * 5); }
	body[data-view='tournaments'] .tcard__amount { font-size: calc(var(--u) * 10.2); }
	body[data-view='tournaments'] .tcard .btn { --btn-shape: inset(0 round 7px); min-height: calc(var(--u) * 12.3); min-width: 0; padding: 0; font-size: calc(var(--u) * 7.2); border-radius: 7px; }
	body[data-view='tournaments'] .tcard .btn::before { clip-path: inset(0 round 5.5px); }

	/* Home, as in the desktop wireframe: the three videos across the top, then Tournaments on the left and rankings on the right. */
	body[data-view='home'] .page {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
		grid-template-areas: 'howto howto' 'tour rank'; column-gap: clamp(28px, 3.4vw, 60px); align-items: start;
		max-width: 1680px; margin-inline: auto;
	}
	body[data-view='home'] .block--tournaments { grid-area: tour; }
	body[data-view='home'] .block--howto { grid-area: howto; }
	body[data-view='home'] .block--rankings { grid-area: rank; }
	body[data-view='home'] .block--howto, body[data-view='home'] .block--rankings { padding-top: 26px; }
	body[data-view='home'] .races { display: none; }
	.video { --cut: 14px; padding: 7px; }
	.video__play { width: 54px; height: 54px; }
	.video__play svg { width: 26px; height: 26px; }
	.video__cap { padding: 13px 10px 9px; }
	.video__name { font-size: 1.15rem; }
	.video__time { font-size: 0.95rem; }

	body[data-view='tournaments'] .page { max-width: 1680px; margin-inline: auto; }
	body[data-view='rankings'] .page { max-width: 860px; margin-inline: auto; }
	body[data-view='community'] .page, body[data-view='profile'] .page { max-width: 1400px; margin-inline: auto; }
	.comm { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); column-gap: clamp(28px, 3.4vw, 60px); align-items: start; }
	.prof { grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); column-gap: clamp(28px, 3.4vw, 60px); align-items: start; }
	.prof-out { max-width: 620px; margin-inline: auto; }
	body[data-view='rankings'] .races { display: none; }
}

@media (max-width: 359px) {
	.hero__art { width: 79vw; }
}

@media (min-width: 900px) and (max-width: 1180px) {
	.hero__art { width: 42vw; }
	.hero__set { height: 100%; top: 0; }
	.hero__copy { max-width: 44%; }
	.hero__title { font-size: 3.5vw; }
}

@media (min-width: 1240px) {
	body[data-view='tournaments'] .tlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

/* ================= Version 2 =================
   Home shows only the hero and How to play. Tournaments and Rankings & Races are their own
   views, each with its own tab, so the nav has five tabs. */

.tabbar { grid-template-columns: repeat(5, 1fr); }
.block--tournaments .block__head--tournaments { display: none; }
/* Rankings is one screen now: the race cards and the leaderboard, never the "View rankings" rows. */
.races { display: none; }
body[data-view='rankings'] .board, body[data-view='home'] .board { display: block; }

@media (max-width: 599px) {
	.tabbar__item { font-size: 0.68rem; letter-spacing: 0.03em; }
	.tabbar__item svg { width: 30px; height: 24px; }
	/* The home screen is just the videos, so they stack at full width. */
	.videos { flex-direction: column; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
	.videos > .video { flex: none; }
	.video__play { width: 58px; height: 58px; }
	.video__play svg { width: 28px; height: 28px; }
	.video__name { font-size: 1.15rem; }
}

@media (min-width: 900px) {
	body[data-view='home'] .page { display: block; max-width: 1680px; margin-inline: auto; }
	body[data-view='home'] .block--howto { padding-top: 26px; }
	.tabbar__item { gap: 12px; font-size: 1.12rem; }
}