/* Palania — sky blue, cloud white, warm gold and orange. */

:root {
  color-scheme: light;
  --ink: #173b58;
  --ink-soft: #486980;
  --muted: #607b91;
  --canvas: #eaf6ff;
  --canvas-warm: #f8fcff;
  --surface-air: rgba(255, 255, 255, .64);
  --surface: rgba(255, 255, 255, .84);
  --surface-deep: rgba(255, 255, 255, .96);
  --surface-solid: #ffffff;
  --line: rgba(29,91,137, .11);
  --line-strong: rgba(29,91,137, .17);
  --glass-edge: rgba(255, 255, 255, .9);
  --gold: #ffc65c;
  --gold-soft: #ffdc8f;
  --orange: #f5a044;
  --gold-ink: #946020;
  --on-gold: #49300f;
  --action-fill: linear-gradient(120deg, var(--gold-soft), var(--gold) 48%, var(--orange));
  --action-hover: linear-gradient(120deg, #ffe7b0, var(--gold-soft) 48%, #ffb65f);
  --cloud: rgba(255, 255, 255, .82);
  --sky: #63c5f5;
  --sky-deep: #147aa8;
  --sky-bright: #49ace3;
  --sky-ink: #176b99;
  --danger: #bf3d50;
  --success: #187d60;
  --font-display: "Bricolage Grotesque", Inter, sans-serif;
  --font-body: Inter, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 58px);
  --rail: 60px;
  --nav-ease: cubic-bezier(.22, .61, .36, 1);
  --radius-xl: 20px;
  --radius-lg: 15px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-air: 0 3px 0 rgba(37,104,156, .07), 0 22px 55px -38px rgba(32,91,140, .35);
  --shadow: 0 5px 0 rgba(37,104,156, .10), 0 34px 72px -44px rgba(32,91,140, .48);
  --shadow-deep: 0 7px 0 rgba(37,104,156, .12), 0 46px 90px -48px rgba(32,91,140, .58);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0f8ff;
  --ink-soft: #b7cee0;
  --muted: #91aec5;
  --canvas: #0b192b;
  --canvas-warm: #10243a;
  --surface-air: rgba(29,56,86, .42);
  --surface: rgba(23,46,73, .64);
  --surface-deep: rgba(20,43,68, .83);
  --surface-solid: #142c45;
  --line: rgba(191,225,250, .10);
  --line-strong: rgba(191,225,250, .16);
  --glass-edge: rgba(192,226,250, .17);
  --sky-deep: #7dd3fc;
  --sky-ink: #9adfff;
  --gold-ink: #ffce7c;
  --cloud: rgba(148, 201, 245, .07);
  --danger: #ff8193;
  --success: #60d8b1;
  --shadow-air: 0 3px 0 rgba(0, 0, 0, .22), 0 22px 55px -38px #000;
  --shadow: 0 5px 0 rgba(0, 0, 0, .25), 0 34px 72px -42px #000;
  --shadow-deep: 0 7px 0 rgba(0, 0, 0, .28), 0 46px 90px -44px #000;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; padding-left: calc(var(--rail) + 24px); overflow-x: hidden; color: var(--ink); background: radial-gradient(ellipse at 90% 2%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 35%), linear-gradient(155deg, var(--canvas-warm), var(--canvas) 48%, color-mix(in srgb, var(--sky) 15%, var(--canvas))); font: 400 16px/1.62 var(--font-body); -webkit-font-smoothing: antialiased; }
body::after { position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none; opacity: .018; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img, svg { max-width: 100%; }
button, input, select, textarea { color: inherit; font: inherit; }
button, [role="button"] { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
::selection { color: var(--on-gold); background: var(--gold); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 106px; z-index: 999; padding: 10px 14px; border-radius: 7px; color: var(--on-gold); background: var(--gold); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.ambient-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient-bg__grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(#000, rgba(0,0,0,.7) 52%, transparent 94%); }
.ambient-bg__orb { position: absolute; display: block; filter: blur(105px); will-change: transform; }
.ambient-bg__orb--gold { width: min(48vw, 760px); height: min(48vw, 760px); top: -24vw; right: 4vw; background: rgba(255,184,64,.22); animation: prism-gold 19s ease-in-out infinite alternate; }
.ambient-bg__orb--sky { width: min(56vw, 850px); height: min(56vw, 850px); top: 22vh; left: -32vw; background: rgba(99,197,245,.20); animation: prism-aqua 23s ease-in-out infinite alternate; }
.ambient-bg__orb--blend { width: min(440px, 48vw); height: 160px; top: 13%; right: -5%; border-radius: 50%; background: var(--cloud); filter: blur(24px); box-shadow: -160px 35px 0 5px var(--cloud), -50px -32px 0 0 var(--cloud); animation: block-drift 18s ease-in-out infinite alternate; }
@keyframes prism-gold { to { transform: translate3d(-5vw,7vh,0) scale(1.08); } }
@keyframes prism-aqua { to { transform: translate3d(8vw,-5vh,0) scale(.92); } }
@keyframes block-drift { to { transform: translate3d(-16px,19px,0) rotate(4deg); } }

.container { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.narrow { --container: 880px; }
.section { position: relative; padding-block: clamp(68px, 7vw, 108px); }
.section--tight { padding-block: clamp(38px, 5vw, 70px); }
.stack { display: grid; gap: 14px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.split { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); gap: clamp(20px, 4vw, 50px); align-items: start; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); font-weight: 800; line-height: .96; letter-spacing: -.045em; text-wrap: balance; }
h1 { font-size: clamp(3.6rem, 6.8vw, 7rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.75rem); }
h3 { font-size: clamp(1.12rem, 1.8vw, 1.48rem); }
p { color: var(--ink-soft); }
small { color: var(--muted); }
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font: 600 .64rem/1.25 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.kicker::before, .eyebrow::before { width: 7px; height: 7px; flex: 0 0 7px; content: ""; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.lede, .page-hero__lead { max-width: 650px; margin-top: 22px; color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.7; }

.glass, .glass-panel, .panel, .card, [data-surface="glass"] { border: 1px solid var(--line); border-top-color: var(--glass-edge); border-left-color: var(--glass-edge); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-deep) 58%, transparent), var(--surface)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.2); backdrop-filter: blur(24px) saturate(165%); -webkit-backdrop-filter: blur(24px) saturate(165%); }
.card { background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 70%, transparent), var(--surface-air)); box-shadow: var(--shadow-air), inset 0 1px rgba(255,255,255,.18); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); }
.panel, .card { position: relative; border-radius: var(--radius-lg); }
.panel { padding: clamp(20px, 3vw, 34px); }
.panel::after, .card::after { position: absolute; inset: 0; content: ""; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, rgba(255,255,255,.22), transparent 24%, transparent 78%, rgba(99,197,245,.035)); mask-image: linear-gradient(#000, transparent 34%); }
.panel > *, .card > * { position: relative; z-index: 1; }
.cut-corner { clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }

.button, .btn { display: inline-flex; min-height: 48px; padding: 11px 20px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: 8px; background: var(--surface-air); font: 650 .78rem/1 var(--font-body); transition: transform .35s var(--ease), background .25s, box-shadow .25s, border-color .25s; }
.button:hover, .btn:hover { transform: translateY(-3px); }
.button:active, .btn:active { transform: translateY(1px); border-bottom-width: 1px; }
.button--primary, .btn--primary { color: var(--on-gold); border-color: #e5a03a; background: var(--action-fill); box-shadow: 0 3px 0 #ba731f, 0 18px 34px -22px rgba(255,184,64,.85); }
.button--primary:hover, .btn--primary:hover { background: var(--action-hover); }
.button--quiet, .btn--quiet { background: color-mix(in srgb, var(--surface-deep) 56%, transparent); }
.button--quiet:hover, .btn--quiet:hover { border-color: color-mix(in srgb, var(--sky-deep) 48%, transparent); background: color-mix(in srgb, var(--sky) 11%, var(--surface)); }
.button--danger { color: #fff; border-color: #a93646; background: #bf3d50; }
.button--sm { min-height: 38px; padding: 8px 13px; border-radius: 6px; font-size: .72rem; }
.button--block { width: 100%; }
.button[disabled], .button[aria-disabled="true"] { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }
.text-link { color: var(--sky-ink); font-size: .8rem; font-weight: 750; }
:root[data-theme="dark"] .text-link { color: var(--sky); }
.text-link::after { content: " →"; }
.icon-button { display: grid; width: 42px; height: 42px; padding: 0; flex: 0 0 42px; place-items: center; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 7px; background: var(--surface-air); transition: transform .3s var(--ease), background .2s, border-color .2s; }
.icon-button:hover { border-color: rgba(255,184,64,.38); background: rgba(255,184,64,.12); transform: translateY(-2px); }
.icon-button svg { width: 19px; height: 19px; }
.badge, .tag, .chip { display: inline-flex; min-height: 25px; padding: 5px 9px; align-items: center; justify-content: center; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 5px; background: var(--surface-air); font: 600 .6rem/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.badge--success { color: var(--success); border-color: color-mix(in srgb, var(--success) 31%, transparent); }
.badge--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.badge--accent { color: var(--on-gold); border-color: #e5a03a; background: var(--gold); }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 2px; background: var(--muted); }
.status-dot--online { background: var(--success); box-shadow: 0 0 0 2px rgba(26,165,117,.16); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { width: 100%; min-height: 48px; padding: 11px 14px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; background: color-mix(in srgb, var(--surface-deep) 64%, transparent); box-shadow: inset 0 1px var(--glass-edge); transition: border-color .2s, background .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--sky-deep); background: var(--surface-deep); box-shadow: 0 0 0 4px rgba(99,197,245,.12), inset 0 1px var(--glass-edge); }
textarea { min-height: 140px; resize: vertical; }
label { color: var(--ink); font-size: .79rem; font-weight: 700; }
.form-field { display: grid; gap: 7px; }
.field-help { color: var(--muted); font-size: .76rem; }
.input-group { display: flex; align-items: stretch; gap: 7px; }
.input-group input { min-width: 0; }

/* Desktop hotbar: compact by default, readable when hovered or focused. */
.site-header { position: fixed; inset: 18px auto 18px 18px; z-index: 200; display: flex; width: var(--rail); padding: 8px; flex-direction: column; gap: 5px; overflow: visible; border: 1px solid var(--line); border-top-color: var(--glass-edge); border-left-color: var(--glass-edge); border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-deep) 90%, transparent), color-mix(in srgb, var(--surface) 80%, transparent)); box-shadow: var(--shadow-deep), inset 0 1px rgba(255,255,255,.35); backdrop-filter: blur(28px) saturate(175%); -webkit-backdrop-filter: blur(28px) saturate(175%); transition: width .32s var(--nav-ease); }
.site-header:hover, .site-header:focus-within { width: 218px; }
.site-header__inner, .header-actions { display: flex; min-width: 0; width: 100%; align-items: stretch; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.site-header__inner { min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 5px; }
.brand { display: flex; width: 100%; height: 48px; padding: 8px 10px; flex: 0 0 48px; align-items: center; gap: 13px; overflow: hidden; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 800; }
.brand__mark { display: block; width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(20,100,170,.2)); }
.brand__mark::after { content: none; }
.brand__name { opacity: 0; font-size: .95rem; letter-spacing: -.03em; white-space: nowrap; transform: translateX(-8px); transition: opacity .25s .04s, transform .35s var(--ease); }
.site-header:hover .brand__name, .site-header:focus-within .brand__name { opacity: 1; transform: translateX(0); }
.primary-nav { display: flex; min-height: 0; width: 100%; flex: 1 1 auto; flex-direction: column; gap: 3px; overflow-y: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav a { position: relative; display: flex; width: 100%; min-height: 42px; padding: 0 11px; flex: 0 0 42px; align-items: center; gap: 14px; overflow: hidden; border: 1px solid transparent; border-radius: 7px; color: var(--ink-soft); transition: color .2s, background .25s, border-color .25s, transform .3s var(--ease); }
.primary-nav a:hover { color: var(--ink); background: var(--surface-air); transform: translateX(2px); }
.primary-nav a[aria-current="page"] { color: var(--sky-ink); border-color: color-mix(in srgb, var(--sky) 48%, var(--line)); background: color-mix(in srgb, var(--sky) 16%, var(--surface)); box-shadow: inset 3px 0 var(--orange); }
.primary-nav a svg { width: 19px; height: 19px; flex: 0 0 19px; }
.primary-nav__label { opacity: 0; font: 600 .76rem/1 var(--font-mono); white-space: nowrap; transform: translateX(-8px); transition: opacity .22s .04s, transform .35s var(--ease); }
.site-header:hover .primary-nav__label, .site-header:focus-within .primary-nav__label { opacity: 1; transform: translateX(0); }
.primary-nav__separator { width: calc(100% - 18px); height: 1px; margin: 4px 9px; flex: 0 0 1px; background: var(--line); }
.header-actions { padding-top: 6px; flex: 0 0 auto; flex-direction: column; gap: 5px; border-top: 1px solid var(--line); }
.locale-control { display: flex; width: 100%; height: 42px; flex: 0 0 42px; align-items: center; gap: 7px; overflow: hidden; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 7px; background: var(--surface-air); transition: border-color .2s, background .2s; }
.locale-control:hover { border-color: rgba(255,184,64,.38); background: rgba(255,184,64,.12); }
.locale-control__icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; }
.locale-control__icon svg { width: 19px; height: 19px; }
.locale-switcher { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0; transform: translateX(-8px); transition: opacity .22s .04s, transform .35s var(--ease); }
.site-header:hover .locale-switcher, .site-header:focus-within .locale-switcher { opacity: 1; transform: translateX(0); }
.locale-switcher .button { min-width: 0; min-height: 31px; padding: 6px 5px; overflow: hidden; border-bottom-width: 2px; font-size: .62rem; }
.locale-switcher .button[aria-current="true"] { color: var(--on-gold); border-color: #e5a03a; background: var(--gold); }
.header-actions > .icon-button { display: flex; width: 100%; padding-left: 11px; align-items: center; justify-content: flex-start; }
.account-link { display: flex; width: 100%; height: 42px; padding: 5px; flex: 0 0 42px; align-items: center; gap: 11px; overflow: hidden; color: var(--ink-soft); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 7px; background: color-mix(in srgb, var(--surface-deep) 56%, transparent); transition: color .2s, border-color .2s, background .2s, transform .3s var(--ease); }
.account-link:hover { color: var(--ink); border-color: color-mix(in srgb, var(--sky-deep) 48%, transparent); background: color-mix(in srgb, var(--sky) 11%, var(--surface)); transform: translateY(-2px); }
.account-link__avatar { display: block; width: 30px; height: 30px; flex: 0 0 30px; object-fit: cover; image-rendering: pixelated; border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: 2px 2px rgba(23,59,88,.11); }
.account-link__label { min-width: 0; overflow: hidden; font: 650 .7rem/1 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity .22s .04s, transform .35s var(--ease); }
.site-header:hover .account-link__label, .site-header:focus-within .account-link__label { opacity: 1; transform: translateX(0); }
.header-actions > .keep-mobile { width: 100%; height: 0; min-height: 0; opacity: 0; max-height: 0; padding-block: 0; overflow: hidden; border-width: 0; transition: opacity .2s, height .35s var(--ease), max-height .35s var(--ease); }
.site-header:hover .header-actions > .keep-mobile, .site-header:focus-within .header-actions > .keep-mobile { height: 42px; min-height: 42px; max-height: 42px; opacity: 1; padding-block: 0; border-width: 1px 1px 3px; }
.menu-toggle { display: none; }
.mobile-nav { position: fixed; z-index: 190; display: none; }

.page-main { position: relative; z-index: 1; }
.home-hero { min-height: 100svh; display: flex; padding-block: 112px 72px; align-items: center; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .76fr); gap: clamp(42px, 6vw, 88px); align-items: center; }
.home-hero h1 { max-width: 8.9ch; margin-top: 24px; font-size: clamp(3.8rem, 7.15vw, 7.35rem); }
.home-hero h1 > span, .home-hero h1 > mark { display: block; }
.home-hero h1 > mark { width: max-content; max-width: 100%; margin-top: .08em; padding: .025em .13em .095em; color: var(--on-gold); background: var(--gold); box-shadow: .09em .09em 0 var(--sky-ink); font-size: .79em; transform: rotate(-1deg); clip-path: polygon(0 7%,5% 7%,5% 0,95% 0,95% 7%,100% 7%,100% 93%,95% 93%,95% 100%,5% 100%,5% 93%,0 93%); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.home-hero__meta { display: flex; width: max-content; max-width: 100%; margin-top: 38px; border-top: 1px dashed var(--line-strong); }
.home-hero__meta > span { display: flex; padding: 13px 17px 0; align-items: center; gap: 8px; color: var(--muted); border-right: 1px dashed var(--line); font: 500 .61rem/1.4 var(--font-mono); white-space: nowrap; }
.home-hero__meta > span:first-child { padding-left: 0; }
.home-hero__meta > span:last-child { border-right: 0; }
.server-console { min-height: 475px; padding: 24px; overflow: visible; border-radius: 17px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-deep) 94%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); box-shadow: var(--shadow-deep), inset 0 2px rgba(255,255,255,.48); transform: rotate(.55deg); }
.server-console::before { position: absolute; width: 50px; height: 50px; top: -25px; right: 30px; z-index: -1; content: ""; border: 1px solid rgba(23,107,153,.2); background: linear-gradient(var(--sky-bright) 0 28%, #ffffff 28% 39%, #f5a044 39%); box-shadow: 7px 7px rgba(67,45,27,.11); transform: rotate(7deg); }
.server-console::after { position: absolute; width: 46px; height: 46px; bottom: -19px; left: 10px; z-index: -1; content: ""; border: 2px solid rgba(99,197,245,.38); border-radius: 3px; background: rgba(99,197,245,.22); transform: rotate(-8deg); }
.server-console__head { display: flex; padding-bottom: 18px; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px dashed var(--line); }
.server-console h2 { max-width: 8ch; margin-top: 8px; font-size: clamp(1.8rem, 3vw, 2.75rem); }
.server-console__body { display: grid; padding-block: 9px; }
.server-console__row { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; min-height: 57px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.server-console__index { color: var(--muted); font: 600 .63rem/1 var(--font-mono); }
.server-console__row strong { overflow: hidden; font-family: var(--font-mono); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.server-address { display: flex; width: 100%; min-height: 64px; padding: 13px 16px; align-items: center; justify-content: space-between; gap: 14px; color: var(--canvas); border: 0; border-radius: 8px; background: var(--ink); box-shadow: 0 5px rgba(0,0,0,.25); transition: transform .3s var(--ease), box-shadow .3s; }
.server-address:hover { transform: translateY(-3px); box-shadow: 0 8px rgba(0,0,0,.22); }
.server-address code { font: 700 .86rem/1 var(--font-mono); }
.server-address span { color: var(--gold); font-size: .67rem; font-weight: 700; }
.live-ribbon { position: relative; z-index: 2; overflow: hidden; padding: 16px 0; border-block: 2px solid var(--line); background: color-mix(in srgb, var(--surface-air) 76%, transparent); backdrop-filter: blur(18px); }
.live-ribbon__track { display: flex; width: max-content; animation: ribbon 34s linear infinite; }
.live-ribbon__track span { display: inline-flex; padding-inline: 25px; align-items: center; gap: 25px; color: var(--ink); font: 650 clamp(.72rem, 1vw, .88rem)/1 var(--font-mono); letter-spacing: -.02em; }
.live-ribbon__track span::after { width: 9px; height: 9px; content: ""; border-radius: 2px; background: var(--sky-bright); box-shadow: inset -2px -2px rgba(51,85,29,.24); }
@keyframes ribbon { to { transform: translateX(-50%); } }

.home-manifesto__statement { max-width: 17ch; font-size: clamp(2.5rem, 5.4vw, 5.4rem); }
.home-manifesto__statement em { color: var(--sky-ink); font-style: normal; }
:root[data-theme="dark"] .home-manifesto__statement em { color: var(--sky); }
.home-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 42px; }
.home-feature { min-height: 210px; display: flex; padding: 23px; flex-direction: column; border-bottom: 5px solid var(--sky-bright); }
.home-feature:nth-child(2) { border-bottom-color: var(--gold); }
.home-feature:nth-child(3) { border-bottom-color: var(--sky-deep); }
.home-feature > span { color: var(--muted); font: 600 .62rem/1 var(--font-mono); }
.home-feature h3 { margin-top: auto; }
.home-feature p { margin-top: 10px; font-size: .86rem; }

.section-head { display: flex; margin-bottom: clamp(24px, 3.5vw, 43px); padding-top: 18px; align-items: end; justify-content: space-between; gap: 20px; border-top: 1px dashed var(--line-strong); }
.section-head h2 { max-width: 14ch; margin-top: 9px; }
.section-head > span, .section-head > a { color: var(--muted); font-size: .78rem; }
.game-index { display: grid; grid-template-columns: repeat(12, 1fr); gap: 11px; }
.game-entry { position: relative; display: flex; min-height: 190px; padding: 22px; grid-column: span 4; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-top-color: var(--glass-edge); border-bottom: 5px solid #f5a044; border-radius: 13px; background: linear-gradient(135deg, var(--surface), var(--surface-air)); box-shadow: var(--shadow-air), inset 0 1px rgba(255,255,255,.3); backdrop-filter: blur(18px) saturate(155%); transition: transform .4s var(--ease), box-shadow .3s; }
.game-entry:nth-child(3n+2) { border-bottom-color: var(--sky-bright); }
.game-entry:nth-child(3n+3) { border-bottom-color: var(--sky-deep); }
.game-entry:nth-child(1), .game-entry:nth-child(5) { grid-column: span 5; }
.game-entry:nth-child(2), .game-entry:nth-child(4) { grid-column: span 7; }
.game-entry:hover { z-index: 2; box-shadow: var(--shadow); transform: translateY(-5px) rotate(-.2deg); }
.game-entry__number { color: var(--muted); font: 600 .64rem/1 var(--font-mono); }
.game-entry__name { max-width: 12ch; margin-top: auto; font-size: clamp(1.55rem, 2.3vw, 2.25rem); }
.game-entry__description { margin-top: 10px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.game-entry > .button, .game-entry > .cluster { width: max-content; margin-top: 17px; }
.match-list { display: grid; gap: 7px; }
.match-card { display: grid; grid-template-columns: 1fr auto 1fr minmax(115px, auto); min-height: 78px; padding: 15px 17px; align-items: center; gap: 15px; }
.match-card__team:last-of-type { text-align: right; }
.match-score { display: flex; gap: 8px; font: 700 1rem/1 var(--font-mono); }
.match-meta { display: grid; justify-items: end; gap: 5px; color: var(--muted); font-size: .66rem; }
.home-team-list { gap: 8px; }
.team-card, .player-card, .champion, .news-card, .package-card { transition: transform .38s var(--ease), box-shadow .3s, border-color .3s; }
.team-card:hover, .player-card:hover, .champion:hover, .news-card:hover, .package-card:hover { z-index: 2; border-color: rgba(23,107,153,.22); box-shadow: var(--shadow); transform: translateY(-3px); }
.team-card { display: block; padding: 17px; border-bottom: 4px solid rgba(239,155,59,.34); }
.team-card__head { display: flex; align-items: center; gap: 13px; }
.team-card__head > span:last-child { display: grid; min-width: 0; }
.team-crest { display: grid; width: 50px; aspect-ratio: 1; flex: 0 0 50px; place-items: center; color: var(--on-gold); border: 1px solid rgba(23,107,153,.2); border-radius: 7px; background: linear-gradient(135deg, rgba(73,172,227,.32), rgba(255,184,64,.25), rgba(255,255,255,.44)); box-shadow: 3px 3px rgba(29,91,137,.09); font-family: var(--font-display); font-weight: 800; }
.team-crest--large { width: 108px; flex-basis: 108px; border-radius: 11px; font-size: 1.65rem; }
.team-card__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 16px; overflow: hidden; border-radius: 7px; background: var(--line); }
.team-card__stats > span { padding: 10px; background: var(--surface-air); }
.team-card__stats strong { display: block; font-family: var(--font-mono); }
.team-card__stats small { font-size: .61rem; }
.teams-showcase { padding-top: 42px; }
.team-directory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.team-directory-card.card { min-height: 206px; padding: 0; overflow: hidden; border-bottom: 5px solid var(--sky-bright); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-deep) 82%, transparent), color-mix(in srgb, var(--sky) 7%, var(--surface))); }
.team-directory-card:nth-child(2n) { border-bottom-color: var(--gold); }
.team-directory-card__main { display: grid; min-height: 129px; padding: 22px 24px; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 17px; }
.team-directory-card__position { align-self: start; color: var(--muted); font: 650 .65rem/1 var(--font-mono); letter-spacing: .04em; }
.team-directory-card__crest { width: 66px; flex-basis: 66px; border-radius: 10px; font-size: 1.05rem; transition: transform .45s var(--ease), box-shadow .3s; }
.team-directory-card__identity { display: grid; min-width: 0; gap: 5px; }
.team-directory-card__identity small { color: var(--sky-ink); font: 650 .63rem/1 var(--font-mono); letter-spacing: .08em; }
:root[data-theme="dark"] .team-directory-card__identity small { color: var(--sky); }
.team-directory-card__identity strong { overflow: hidden; font: 800 clamp(1.5rem,2.5vw,2.35rem)/1 var(--font-display); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.team-directory-card__arrow { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-air); font-size: 1.05rem; transition: color .25s, background .25s, transform .4s var(--ease); }
.team-directory-card__metrics { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-air) 72%, transparent); }
.team-directory-card__metrics > div { min-width: 0; padding: 13px 20px 15px; border-right: 1px solid var(--line); }
.team-directory-card__metrics > div:last-child { border-right: 0; }
.team-directory-card__metrics dt { color: var(--muted); font: 600 .61rem/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.team-directory-card__metrics dd { margin-top: 7px; overflow: hidden; font: 700 1.15rem/1 var(--font-mono); text-overflow: ellipsis; }
.team-directory-card:hover .team-directory-card__crest { box-shadow: 7px 7px rgba(29,91,137,.10); transform: translateY(-3px) rotate(-2deg); }
.team-directory-card:hover .team-directory-card__arrow { color: var(--on-gold); border-color: var(--gold); background: var(--gold); transform: translate(3px,-3px) rotate(5deg); }
.teams-results { border-top: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 5%, transparent), transparent 38%); }
.news-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 11px; }
.news-card { min-height: 260px; padding: 23px; border-bottom: 5px solid var(--sky-bright); }
.news-card:first-child { grid-row: span 2; min-height: 530px; border-bottom-color: var(--gold); background: linear-gradient(145deg, rgba(255,184,64,.13), var(--surface) 52%, rgba(99,197,245,.09)); }
.news-card time { color: var(--muted); font: 500 .63rem/1 var(--font-mono); }
.news-card h3 { margin-block: 23px 11px; font-size: clamp(1.65rem,2.8vw,2.65rem); }

.page-hero { min-height: 350px; display: flex; padding-block: 106px 48px; align-items: center; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,390px); align-items: center; gap: clamp(32px,6vw,92px); }
.page-hero h1 { max-width: 12ch; margin-top: 16px; font-size: clamp(3.25rem,5.8vw,6rem); }
.page-hero .panel h2 { margin-block: 8px 12px; font-size: clamp(1.6rem,2.5vw,2.35rem); }
.filter-bar { display: flex; padding: 13px; flex-wrap: wrap; align-items: end; gap: 9px; border: 1px solid var(--line); border-top-color: var(--glass-edge); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-air); backdrop-filter: blur(20px); }
.filter-bar .form-field { min-width: 170px; flex: 1; }
.tabs { display: inline-flex; max-width: 100%; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-air); }
.tab { min-height: 38px; padding: 8px 14px; flex: 0 0 auto; color: var(--muted); border: 0; border-radius: 6px; background: transparent; font: 650 .72rem/1 var(--font-mono); }
.tab.is-active, .tab[aria-selected="true"], .tab[aria-pressed="true"] { color: var(--ink); background: rgba(255,184,64,.17); box-shadow: inset 0 0 0 2px rgba(255,184,64,.22); }
.tab-panel { padding-top: 22px; }
.player-grid, .team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.player-card { display: flex; min-width: 0; min-height: 88px; padding: 14px; align-items: center; gap: 13px; border-bottom: 3px solid rgba(239,155,59,.28); }
.player-card:nth-child(3n+2) { border-bottom-color: rgba(73,172,227,.48); }
.player-card:nth-child(3n+3) { border-bottom-color: rgba(20,122,168,.42); }
.player-card__identity { display: grid; min-width: 0; flex: 1; }
.player-card__identity strong, .player-card__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players-network { position: relative; padding-top: 8px; }
.players-network__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,360px); align-items: stretch; gap: 12px; }
.players-network__main { display: grid; min-width: 0; align-content: start; gap: 12px; }
.network-stats { position: relative; display: grid; min-height: 210px; padding: clamp(24px,3vw,36px); overflow: hidden; grid-template-columns: minmax(210px,.72fr) minmax(0,1.4fr); align-items: center; gap: clamp(20px,3vw,44px); border-top: 4px solid var(--sky-deep); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-deep) 88%, transparent), color-mix(in srgb, var(--surface) 84%, transparent) 58%, rgba(99,197,245,.1)); isolation: isolate; }
.network-stats::before { position: absolute; width: 300px; height: 300px; top: -210px; right: -80px; z-index: -1; content: ""; border: 38px solid rgba(99,197,245,.1); border-radius: 50%; box-shadow: 0 0 0 36px rgba(73,172,227,.05); }
.network-stats__head { text-align: left; }
.network-stats__head h2 { max-width: 9ch; margin-top: 8px; font-size: clamp(1.8rem,3vw,3rem); letter-spacing: -.055em; }
.network-stats__metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.network-stats__metrics > div { position: relative; display: grid; min-width: 0; padding-inline: clamp(9px,2vw,24px); justify-items: center; gap: 10px; text-align: center; }
.network-stats__metrics > div + div::before { position: absolute; top: 4px; bottom: 4px; left: 0; content: ""; border-left: 1px dashed var(--line-strong); }
.network-stats__metrics dt { color: var(--muted); font: 650 .65rem/1.25 var(--font-mono); letter-spacing: .065em; text-transform: uppercase; }
.network-stats__metrics dd { color: var(--ink); font: 780 clamp(2rem,4vw,3.7rem)/.9 var(--font-display); letter-spacing: -.055em; }
.network-stats__metrics > div:nth-child(2) dd { color: var(--sky-ink); }
.network-stats__metrics > div:nth-child(3) dd { color: var(--danger); }
.network-stats__signal { position: absolute; width: 7px; height: 7px; right: 19px; bottom: 18px; border-radius: 50%; background: var(--sky-bright); box-shadow: 0 0 0 5px rgba(73,172,227,.13), 0 0 18px rgba(73,172,227,.7); animation: network-signal 2.4s ease-in-out infinite; }
@keyframes network-signal { 50% { opacity: .55; box-shadow: 0 0 0 9px rgba(73,172,227,.05), 0 0 10px rgba(73,172,227,.45); } }
.star-roster { display: grid; min-height: 126px; padding: clamp(20px,2.5vw,28px); overflow: visible; grid-template-columns: minmax(190px,.7fr) minmax(0,1.3fr); align-items: center; gap: 24px; border-top: 4px solid var(--gold); background: linear-gradient(140deg, color-mix(in srgb, var(--surface-deep) 91%, transparent), color-mix(in srgb, var(--gold) 10%, var(--surface))); }
.star-roster__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.star-roster__head h2 { margin-top: 6px; font-size: clamp(1.45rem,2.5vw,2.15rem); }
.star-roster__head > .staff-rank__count { display: none; }
.star-roster__members { display: flex; min-height: 56px; padding-left: 24px; flex-wrap: wrap; align-items: center; gap: 10px; border-left: 1px dashed var(--line-strong); }
.star-roster__members .staff-head .avatar { width: 50px; }
.star-roster__empty { color: var(--muted); font-size: .75rem; }
.featured-roster { position: relative; min-width: 0; padding: clamp(22px,3vw,30px); overflow: visible; border-top: 4px solid var(--sky-bright); background: linear-gradient(155deg, color-mix(in srgb, var(--surface-deep) 91%, transparent), color-mix(in srgb, var(--sky-bright) 7%, var(--surface)) 145%); }
.featured-roster__head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.featured-roster__head h2 { margin-top: 7px; font-size: clamp(1.65rem,2.5vw,2.35rem); letter-spacing: -.04em; }
.featured-roster__groups { display: grid; }
.featured-rank { min-width: 0; padding-block: 20px; border-bottom: 1px dashed var(--line-strong); }
.featured-rank:last-child { padding-bottom: 2px; border-bottom: 0; }
.featured-rank__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
.featured-rank__prefix { display: flex; min-width: 0; flex-wrap: wrap; gap: .04em; font-size: 1.05rem; letter-spacing: -.025em; }
.featured-rank__prefix span { color: var(--rank-color, var(--ink)); text-shadow: 0 1px rgba(255,255,255,.18); }
.featured-rank__members { display: flex; min-height: 54px; padding-top: 15px; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.featured-rank__members .staff-head .avatar { width: 50px; }
.featured-roster__empty { padding-top: 22px; color: var(--muted); font-size: .78rem; }
.staff-directory { display: grid; gap: 14px; }
.staff-rank { padding: clamp(20px,3vw,30px); overflow: visible; }
.staff-rank__head { display: flex; padding-bottom: 18px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px dashed var(--line-strong); }
.staff-rank__prefix { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .05em; font-size: clamp(1.65rem,3vw,2.7rem); letter-spacing: -.035em; }
.staff-rank__prefix span { color: var(--rank-color, var(--ink)); text-shadow: 0 1px rgba(255,255,255,.18); }
.staff-rank__count { flex: 0 0 auto; color: var(--muted); font: 600 .66rem/1 var(--font-mono); }
.staff-rank__members { display: flex; min-height: 78px; padding-top: 22px; flex-wrap: wrap; align-items: flex-start; gap: 13px; }
.staff-head { position: relative; display: block; border: 2px solid transparent; border-radius: 8px; transition: transform .38s var(--ease), border-color .25s, filter .25s; }
.staff-head .avatar { width: 58px; pointer-events: none; transition: transform .38s var(--ease), box-shadow .3s; }
.staff-head:hover, .staff-head:focus-visible { z-index: 5; border-color: var(--sky-deep); outline: 0; filter: drop-shadow(0 12px 16px rgba(30,60,56,.18)); transform: translateY(-5px); }
.staff-head:hover .avatar, .staff-head:focus-visible .avatar { box-shadow: 5px 6px rgba(23,59,88,.12); transform: scale(1.045) rotate(-1.5deg); }
.staff-head__status { position: absolute; right: -3px; bottom: -3px; z-index: 2; border: 2px solid var(--surface-solid); }
.staff-head__tooltip { position: absolute; left: 50%; bottom: calc(100% + 11px); z-index: 6; width: max-content; max-width: min(300px,80vw); padding: 8px 11px; overflow: hidden; color: var(--surface-solid); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: var(--ink); box-shadow: var(--shadow); font: 650 .7rem/1 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%,6px) scale(.97); transform-origin: 50% 100%; transition: opacity .18s, transform .3s var(--ease); }
.staff-head:hover .staff-head__tooltip, .staff-head:focus-visible .staff-head__tooltip { opacity: 1; transform: translate(-50%,0) scale(1); }
.minecraft-name > span { color: var(--rank-color, inherit); }
.avatar { display: block; aspect-ratio: 1; object-fit: cover; image-rendering: pixelated; border: 2px solid rgba(23,59,88,.13); border-radius: 5px; background: rgba(73,172,227,.13); box-shadow: 3px 3px rgba(23,59,88,.11); }
.avatar--sm { width: 38px; }
.avatar--md { width: 54px; }
.avatar--xl { width: clamp(108px,11vw,148px); border-radius: 8px; }
.avatar-fallback { display: grid; place-items: center; color: var(--muted); font-family: var(--font-mono); font-weight: 700; }

.profile-hero { display: flex; padding-block: 32px 20px; align-items: center; }
.profile-hero + .section { padding-top: 0; }
.profile-identity { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: clamp(22px,4vw,48px); }
.profile-identity--banned { grid-template-columns: auto minmax(0,1fr) 230px; column-gap: clamp(22px,3vw,36px); }
.player-ban-status { display: flex; min-width: 0; padding-left: 26px; flex-direction: column; justify-content: center; gap: 14px; border-left: 1px solid color-mix(in srgb,var(--danger) 22%,var(--line)); text-align: left; }
.player-ban-status__header { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font: 500 .61rem/1.5 var(--font-mono); letter-spacing: .035em; text-transform: uppercase; }
.player-ban-status__icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; color: var(--danger); border: 1px solid color-mix(in srgb,var(--danger) 22%,transparent); border-radius: 10px; background: color-mix(in srgb,var(--danger) 8%,transparent); }
.player-ban-status__icon svg { width: 19px; height: 19px; }
.player-ban-status__body h2 { margin: 0; color: var(--ink); font: 650 1rem/1.4 var(--font-body); letter-spacing: -.025em; overflow-wrap: anywhere; }
.player-ban-status__duration { margin: 7px 0 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.65; }
.player-ban-status__reason { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .profile-identity--banned { grid-template-columns: auto minmax(0,1fr); }
  .player-ban-status { display: grid; width: 100%; grid-column: 1 / -1; grid-template-columns: minmax(140px,.6fr) minmax(0,1fr); align-items: center; padding: 20px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb,var(--danger) 22%,var(--line)); gap: 12px 20px; }
  .player-ban-status__reason { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .player-ban-status { grid-template-columns: 1fr; }
}
.profile-hero .profile-identity { position: relative; min-height: 270px; padding: clamp(25px,4vw,48px); overflow: hidden; border: 1px solid var(--line); border-top: 5px solid var(--sky-bright); border-radius: var(--radius-xl); background: linear-gradient(125deg, color-mix(in srgb, var(--surface-deep) 88%, transparent), color-mix(in srgb, var(--surface) 82%, transparent) 56%, rgba(99,197,245,.13)); box-shadow: var(--shadow-deep), inset 0 2px var(--glass-edge); backdrop-filter: blur(30px) saturate(175%); }
.profile-hero .profile-identity::after { position: absolute; width: 290px; height: 290px; right: -150px; bottom: -170px; content: ""; border: 34px solid rgba(99,197,245,.12); border-radius: 50%; box-shadow: 0 0 0 31px rgba(255,184,64,.065), 0 0 0 62px rgba(73,172,227,.04); }
.profile-identity > * { position: relative; z-index: 1; }
.profile-skull { display: grid; width: clamp(108px,11vw,148px); aspect-ratio: 1; place-items: center; isolation: isolate; perspective: 500px; }
.profile-skull::before, .profile-skull::after { position: absolute; content: ""; pointer-events: none; }
.profile-skull::before { inset: -10px; z-index: 0; border: 1px solid color-mix(in srgb, var(--sky-deep) 62%, transparent); border-radius: 12px; box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--sky-deep) 70%, transparent); animation: skull-outline-float 4.8s ease-in-out infinite; }
.profile-skull::after { inset: -17px; z-index: 0; border: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent); border-radius: 15px; animation: skull-outline-drift 6.5s ease-in-out infinite; }
.profile-skull .avatar--xl { position: relative; z-index: 1; width: 100%; transition: transform .65s var(--ease), border-color .3s, box-shadow .4s, filter .4s; transform-style: preserve-3d; }
.profile-skull:hover::before { border-color: var(--sky); box-shadow: 0 17px 38px -16px color-mix(in srgb, var(--sky-deep) 82%, transparent); animation-duration: 2.3s; }
.profile-skull:hover::after { border-color: color-mix(in srgb, var(--gold) 78%, transparent); animation-duration: 3s; }
.profile-skull:hover .avatar--xl { border-color: color-mix(in srgb, var(--gold) 72%, transparent); box-shadow: 7px 10px rgba(23,59,88,.11), 0 24px 38px -24px var(--sky-deep); filter: saturate(1.12) contrast(1.04); transform: translate3d(0,-7px,18px) rotateX(3deg) rotateY(-5deg) scale(1.035); }
@keyframes skull-outline-float { 0%,100% { transform: translate3d(-3px,-4px,0) rotate(-1.2deg); } 50% { transform: translate3d(4px,5px,0) rotate(1.4deg); } }
@keyframes skull-outline-drift { 0%,100% { transform: translate3d(4px,2px,0) rotate(1deg); } 50% { transform: translate3d(-4px,-5px,0) rotate(-1.5deg); } }
.profile-identity h1 { max-width: 22ch; margin-top: 8px; font-size: clamp(1.8rem,3.2vw,3.4rem); line-height: 1.04; overflow-wrap: anywhere; }
.player-name-row { display: flex; margin-top: 8px; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.profile-identity .player-name-row h1 { min-width: 0; margin: 0; }
:root:not([data-theme="dark"]) .profile-identity h1.minecraft-name span { color: color-mix(in srgb,var(--rank-color,var(--ink)) 62%,#173b58); }
:root:not([data-theme="dark"]) .profile-identity h1.minecraft-name span[style*="#ffffff"] { color: var(--ink); }
.player-team-tag { display: inline-block; color: var(--sky-deep); font: 550 clamp(1rem,1.6vw,1.4rem)/1.3 var(--font-body); letter-spacing: -.035em; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; overflow-wrap: anywhere; transition: color .2s, text-decoration-color .2s, transform .25s var(--ease); }
.player-team-tag:hover, .player-team-tag:focus-visible { color: var(--ink); text-decoration-color: var(--sky-deep); transform: translateY(-1px); }
.profile-identity__facts { display: flex; margin-top: 14px; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font: 500 .69rem/1.45 var(--font-mono); }
.profile-identity__facts span { display: inline-flex; align-items: center; gap: 7px; }
.profile-team-ref { display: inline-flex; min-height: 27px; padding: 3px 8px 3px 4px; align-items: center; gap: 7px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; background: var(--surface-air); transition: color .2s, border-color .2s, background .2s, transform .3s var(--ease); }
a.profile-team-ref:hover { color: var(--ink); border-color: color-mix(in srgb, var(--sky-deep) 42%, transparent); background: color-mix(in srgb, var(--sky) 9%, var(--surface)); transform: translateY(-2px); }
.profile-team-ref__crest { display: grid !important; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; color: var(--on-gold); border-radius: 4px; background: linear-gradient(135deg, rgba(73,172,227,.46), rgba(255,184,64,.34)); font: 800 .43rem/1 var(--font-display); }
.profile-team-ref strong { max-width: 150px; overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-identity__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.profile-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,330px); gap: 11px; align-items: start; }
.profile-sidebar { position: sticky; top: 20px; }
.player-dashboard { display: grid; gap: 18px; }
.player-profile-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,280px); align-items: start; gap: 18px; }
.player-profile-grid > .stack { min-width: 0; gap: 18px; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); box-shadow: var(--shadow-air); }
.metric { min-width: 0; min-height: 108px; padding: 16px; border-bottom: 4px solid rgba(239,155,59,.24); background: var(--surface); }
.metric:nth-child(2n) { border-bottom-color: rgba(73,172,227,.46); }
.metric--accent { border-bottom-color: var(--gold); }
.metric__label { display: block; margin-bottom: 9px; color: var(--muted); font-size: .67rem; }
.metric__value { display: block; max-width: 100%; overflow: hidden; font: 650 clamp(1.2rem,2vw,1.8rem)/1 var(--font-mono); letter-spacing: -.045em; white-space: nowrap; }
.metric__value--date { font-size: clamp(.95rem,1.5vw,1.3rem); }
.metric-grid.player-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); border-radius: 14px; }
.player-metrics .metric { min-height: 104px; padding: 20px 24px; border-bottom: 0; }
.player-metrics .metric__value { margin-top: 16px; }
.player-profile-grid .panel { min-width: 0; min-height: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-air), inset 0 1px var(--glass-edge); }
.player-profile-grid [id] { scroll-margin-top: 24px; }
.player-panel-heading { display: flex; min-height: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; }
.player-panel-heading h2 { display: flex; min-width: 0; margin: 0; align-items: center; gap: 10px; font: 600 1.08rem/1.4 var(--font-body); letter-spacing: -.025em; }
.player-panel-heading h2 svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--sky-deep); }
.player-panel-meta { color: var(--muted); font-size: .68rem; }
.player-performance-card { background: linear-gradient(145deg, color-mix(in srgb,var(--sky) 5%,var(--surface)),var(--surface) 65%); }
.player-performance-card .chart { margin-top: 24px; color: var(--sky-deep); }
.player-performance-card .chart svg { display: block; width: 100%; max-height: 250px; overflow: visible; }
.chart-grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; }
.chart-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.player-profile-grid .empty-state { display: grid; min-height: 130px; margin: 18px 0 0; padding: 20px; place-content: center; border: 0; border-radius: 10px; background: var(--surface-air); text-align: center; }
.player-profile-grid .empty-state p { max-width: 38ch; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.player-games-card .table-wrap { margin-top: 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.player-games-card .player-game-table { min-width: 480px; font-size: .84rem; font-variant-numeric: tabular-nums; }
.player-game-table thead th { padding: 12px 10px; border-bottom: 1px solid var(--line); font: 500 .66rem/1.4 var(--font-body); text-transform: none; letter-spacing: 0; }
.player-game-table tbody th { padding: 17px 10px; border-bottom: 1px solid var(--line); color: var(--ink); font: 550 .85rem/1.4 var(--font-body); text-transform: none; letter-spacing: 0; }
.player-game-table td { padding: 17px 10px; color: var(--ink-soft); }
.player-game-table th:not(:first-child), .player-game-table td { text-align: right; }
.player-game-table tr > :first-child { padding-left: 0; }
.player-game-table tr > :last-child { padding-right: 0; }
.player-game-table tbody tr:last-child > * { border-bottom: 0; }
.player-friends-panel { background: linear-gradient(150deg,color-mix(in srgb,var(--gold) 5%,var(--surface)),var(--surface) 70%); }
.player-friends-panel .player-panel-heading h2 svg { color: var(--ink-soft); }
.player-friend-count { min-width: 25px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font: 500 .68rem/1.3 var(--font-body); text-align: center; }
.player-friends-panel .friend-heads { margin-top: 22px; padding-top: 18px; gap: 10px; border-top: 1px solid var(--line); }
.player-friends-panel .friend-head .avatar { width: 40px; border-width: 1px; border-radius: 7px; box-shadow: none; }
.friend-heads { display: flex; margin-top: 16px; flex-wrap: wrap; gap: 9px; list-style: none; }
.friend-head { position: relative; display: block; border: 2px solid transparent; border-radius: 7px; transition: transform .3s var(--ease), border-color .2s, filter .2s; }
.friend-head:hover, .friend-head:focus-visible { z-index: 3; border-color: var(--sky-deep); outline: 0; filter: drop-shadow(0 9px 14px rgba(30,60,56,.18)); transform: translateY(-3px); }
.friend-head .avatar { pointer-events: none; }
.friend-head__tooltip { position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 4; max-width: 190px; padding: 7px 10px; overflow: hidden; color: var(--surface-solid); border-radius: 6px; background: var(--ink); box-shadow: var(--shadow-air); font: 650 .68rem/1 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .18s, transform .25s var(--ease); }
.friend-head__tooltip::after { position: absolute; top: 100%; left: 50%; width: 8px; height: 8px; content: ""; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
.friend-head:hover .friend-head__tooltip, .friend-head:focus-visible .friend-head__tooltip { opacity: 1; transform: translate(-50%, 0); }
.roster { display: grid; margin-top: 14px; gap: 4px; list-style: none; }
.roster > * { display: flex; min-width: 0; padding: 8px; align-items: center; gap: 10px; border-radius: 7px; background: var(--surface-air); }
.team-dossier { padding-block: 112px 30px; }
.team-profile-card.panel { display: grid; min-height: 252px; padding: clamp(24px,4vw,46px); overflow: hidden; grid-template-columns: minmax(0,1fr) minmax(430px,.82fr); align-items: center; gap: clamp(30px,5vw,76px); border-top: 5px solid var(--sky-bright); background: linear-gradient(125deg, color-mix(in srgb, var(--surface-deep) 90%, transparent), color-mix(in srgb, var(--surface) 78%, transparent) 58%, rgba(255,184,64,.10)); }
.team-profile-card::before { position: absolute; width: 250px; height: 250px; right: -118px; top: -134px; content: ""; border: 32px solid rgba(99,197,245,.10); border-radius: 50%; box-shadow: 0 0 0 27px rgba(255,184,64,.055); pointer-events: none; }
.team-profile-card__identity { display: flex; min-width: 0; align-items: center; gap: clamp(20px,3vw,34px); }
.team-profile-card .team-crest--large { width: clamp(98px,10vw,126px); flex-basis: clamp(98px,10vw,126px); box-shadow: 7px 8px rgba(29,91,137,.10), 0 28px 42px -29px var(--sky-ink); font-size: clamp(1.35rem,2vw,1.9rem); transform: rotate(-1.5deg); }
.team-profile-card__title { min-width: 0; }
.team-profile-card__title h1 { max-width: 14ch; margin-top: 11px; overflow: hidden; font-size: clamp(2.4rem,4.5vw,4.8rem); text-overflow: ellipsis; white-space: nowrap; }
.team-profile-card__meta { display: flex; margin-top: 16px; flex-wrap: wrap; align-items: center; gap: 9px; }
.team-profile-card__metrics { display: grid; overflow: hidden; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 11px; background: var(--line); box-shadow: var(--shadow-air); }
.team-profile-card__metrics > div { min-width: 0; min-height: 91px; padding: 17px; background: color-mix(in srgb, var(--surface-deep) 76%, transparent); }
.team-profile-card__metrics dt { color: var(--muted); font: 600 .61rem/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.team-profile-card__metrics dd { margin-top: 12px; overflow: hidden; font: 700 clamp(1.1rem,1.7vw,1.55rem)/1 var(--font-mono); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.team-tabs-shell > .tabs { box-shadow: var(--shadow-air); backdrop-filter: blur(20px); }
.team-tab-panel { padding-top: 18px; }
.team-overview-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(340px,.92fr); gap: 12px; }
.team-identity-card, .team-honours { min-height: 360px; overflow: hidden; }
.team-identity-card h2, .team-honours h2 { margin-top: 8px; font-size: clamp(2.1rem,3.7vw,3.55rem); }
.team-owner-card { display: grid; margin-top: 30px; padding: 13px; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-air); transition: border-color .25s, background .25s, transform .4s var(--ease); }
a.team-owner-card:hover { border-color: color-mix(in srgb, var(--sky-deep) 46%, transparent); background: color-mix(in srgb, var(--sky) 8%, var(--surface)); transform: translateY(-3px); }
.team-owner-card > span { display: grid; min-width: 0; gap: 3px; }
.team-owner-card small { font: 600 .61rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.team-owner-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-owner-card__arrow { display: block; color: var(--muted); }
.team-fact-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.team-fact-grid > div { padding: 15px; background: var(--surface-air); }
.team-fact-grid dt { color: var(--muted); font: 600 .61rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.team-fact-grid dd { margin-top: 8px; font-weight: 750; }
.team-honours { border-top: 4px solid var(--gold); background: linear-gradient(145deg, rgba(255,184,64,.11), var(--surface) 54%, rgba(99,197,245,.065)); }
.team-honours__head { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.team-honours__total { display: grid; flex: 0 0 auto; justify-items: end; }
.team-honours__total strong { font: 750 clamp(2.1rem,4vw,3.6rem)/.9 var(--font-mono); letter-spacing: -.08em; }
.team-honours__total span { margin-top: 8px; color: var(--muted); font: 600 .58rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.team-record-bar { display: flex; height: 9px; margin-top: 48px; overflow: hidden; border-radius: 999px; background: var(--line-strong); box-shadow: inset 0 1px 2px rgba(23,59,88,.12); }
.team-record-bar > span { width: var(--record-share); min-width: 0; transition: width .7s var(--ease); }
.team-record-bar__wins { background: var(--success); }
.team-record-bar__draws { background: var(--gold); }
.team-record-bar__losses { background: var(--danger); }
.team-record-breakdown { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 14px; overflow: hidden; border-radius: 9px; background: var(--line); }
.team-record-breakdown > div { position: relative; padding: 16px; background: var(--surface-air); }
.team-record-breakdown > div::before { position: absolute; width: 5px; height: 5px; top: 17px; right: 16px; content: ""; border-radius: 2px; background: var(--record-color); }
.team-record-breakdown__wins { --record-color: var(--success); }
.team-record-breakdown__draws { --record-color: var(--gold); }
.team-record-breakdown__losses { --record-color: var(--danger); }
.team-record-breakdown dt { color: var(--muted); font: 600 .59rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.team-record-breakdown dd { margin-top: 11px; font: 750 clamp(1.35rem,2.5vw,2.1rem)/1 var(--font-mono); }
.team-relations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.relation-panel { border-top: 4px solid var(--sky-deep); }
.relation-panel--enemy { border-color: var(--danger); }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-top-color: var(--glass-edge); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-air); backdrop-filter: blur(20px); }
.data-table, .rank-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.data-table th, .rank-table th { padding: 13px 15px; color: var(--muted); border-bottom: 1px dashed var(--line-strong); font: 600 .61rem/1 var(--font-mono); letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.data-table td, .rank-table td { padding: 14px 15px; border-bottom: 1px solid var(--line); }
.data-table tbody tr, .rank-table tbody tr { transition: background .2s; }
.data-table tbody tr:hover, .rank-table tbody tr:hover { background: rgba(73,172,227,.06); }
.champions-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.champion { min-height: 195px; padding: 20px; border-bottom: 5px solid var(--gold); }
.champion:nth-child(2) { border-bottom-color: var(--sky-bright); }
.champion:nth-child(3) { border-bottom-color: var(--sky-deep); }
.champion__rank { display: block; margin-bottom: 25px; color: var(--muted); font: 600 1.35rem/1 var(--font-mono); }

.shop-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,360px); gap: 11px; align-items: start; }
.shop-hero, .custom-hero { min-height: 300px; padding-bottom: 32px; }
.shop-catalog-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(275px,320px); align-items: start; gap: 12px; }
.shop-catalog { min-width: 0; }
.shop-catalog > .alert { margin-bottom: 18px; }
.shop-catalog__head { display: flex; margin-bottom: 20px; align-items: end; justify-content: space-between; gap: 30px; }
.shop-catalog__head h2 { margin-top: 7px; font-size: clamp(2rem,3.6vw,3.6rem); }
.shop-catalog__head > p { max-width: 330px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.recipient-picker { overflow: visible; }
.recipient-selected { display: flex; min-width: 0; margin-top: 12px; padding: 10px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-air); }
.recipient-selected > div { display: grid; min-width: 0; flex: 1; }
.billing-row { display: flex; margin: 31px 0 17px; align-items: end; justify-content: space-between; gap: 18px; }
.billing-row h2 { margin-top: 7px; }
.package-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.package-card { display: flex; min-height: 220px; padding: 20px; flex-direction: column; justify-content: space-between; align-items: stretch; color: var(--ink); text-align: left; border-bottom: 5px solid rgba(239,155,59,.28); }
.shop-package-grid .package-card { min-height: 190px; }
.package-card:nth-child(3n+2) { border-bottom-color: rgba(73,172,227,.52); }
.package-card:nth-child(3n+3) { border-bottom-color: rgba(20,122,168,.48); }
.package-card.is-selected { border-color: var(--gold); background: linear-gradient(145deg, rgba(255,184,64,.16), var(--surface)); box-shadow: var(--shadow), inset 0 2px var(--glass-edge); }
.package-card.is-selected::after { position: absolute; width: 18px; height: 18px; top: 14px; left: 14px; content: "✓"; display: grid; place-items: center; color: var(--on-gold); border-radius: 50%; background: var(--gold); font: 800 .65rem/1 var(--font-mono); }
.package-card__credits { display: block; margin-top: 8px; font: 800 clamp(1.9rem,3.6vw,3rem)/1 var(--font-display); letter-spacing: -.05em; }
.package-card__price { display: block; font: 650 1.04rem/1 var(--font-mono); }
.package-card__bonus { display: block; color: var(--success); font-size: .7rem; font-weight: 700; }
.package-card__ribbon { position: absolute; top: 13px; right: 13px; }
.order-summary { position: sticky; top: 18px; padding: 26px; border-radius: 15px; background: linear-gradient(135deg, var(--surface-deep), var(--surface)); box-shadow: var(--shadow-deep); }
.order-summary h2 { margin-block: 8px 20px; }
.order-summary__line, .order-summary__total { display: flex; padding-block: 12px; justify-content: space-between; gap: 18px; border-bottom: 1px dashed var(--line); }
.order-summary__total { margin-block: 8px 17px; align-items: end; border: 0; }
.order-summary__total strong { font: 650 1.35rem/1 var(--font-mono); }
.purchase-builder { margin-top: 14px; padding: clamp(22px,3vw,34px); overflow: visible; border-top: 4px solid var(--gold); }
.purchase-builder[hidden] { display: none; }
.purchase-builder__head { display: flex; padding-bottom: 20px; align-items: end; justify-content: space-between; gap: 20px; border-bottom: 1px dashed var(--line-strong); }
.purchase-builder__head h2 { margin-top: 7px; font-size: clamp(1.8rem,3vw,2.8rem); }
.purchase-builder__grid { display: grid; padding-block: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.purchase-step { position: relative; min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-air); }
.purchase-step[hidden] { display: none; }
.purchase-step__number { display: inline-grid; width: 31px; height: 24px; margin-bottom: 16px; place-items: center; color: var(--on-gold); border-radius: 5px; background: var(--gold); font: 700 .59rem/1 var(--font-mono); }
.purchase-step h3 { font-size: 1.35rem; }
.purchase-step p { min-height: 38px; margin-top: 6px; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.purchase-step > label { display: block; margin-top: 18px; margin-bottom: 7px; }
.purchase-type, .billing-periods { display: grid; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-air); }
.purchase-type { margin-top: 18px; grid-template-columns: repeat(2,1fr); }
.billing-periods { margin-top: 8px; grid-template-columns: repeat(3,1fr); }
.purchase-type .tab, .billing-periods .tab { width: 100%; padding-inline: 7px; }
.purchase-summary { display: grid; padding: 17px; grid-template-columns: repeat(4,minmax(0,1fr)) auto; align-items: center; gap: 1px; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.purchase-summary > div { display: grid; min-height: 53px; padding: 8px 13px; align-content: center; background: color-mix(in srgb, var(--surface-deep) 84%, transparent); }
.purchase-summary span { color: var(--muted); font: 600 .57rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.purchase-summary strong { margin-top: 7px; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.purchase-summary__total strong { color: var(--sky-ink); font: 750 1rem/1 var(--font-mono); }
.purchase-summary .button { margin-left: 13px; white-space: nowrap; }
.purchase-builder__legal { margin-top: 13px; text-align: right; }
.top-buyers { position: sticky; top: 18px; padding: 25px; border-top: 4px solid var(--sky-deep); }
.top-buyers h2 { margin-top: 7px; font-size: clamp(1.7rem,2.7vw,2.4rem); }
.top-buyers header p { margin-top: 9px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.top-buyers__list { display: grid; margin-top: 22px; gap: 2px; list-style: none; }
.top-buyers__list li { display: grid; padding-block: 10px; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 8px; border-bottom: 1px dashed var(--line); }
.top-buyers__position { color: var(--muted); font: 650 .62rem/1 var(--font-mono); }
.top-buyers__list a { display: flex; min-width: 0; align-items: center; gap: 10px; }
.top-buyers__list a > span { display: grid; min-width: 0; }
.top-buyers__list strong, .top-buyers__list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-buyers__list strong { font-size: .78rem; }
.top-buyers__list small { margin-top: 4px; color: var(--muted); font: 500 .58rem/1 var(--font-mono); }
.top-buyers__empty { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 10px; color: var(--muted); text-align: center; }
.top-buyers__empty > span { color: var(--gold); font-size: 2rem; }
.top-buyers__empty p { max-width: 22ch; font-size: .75rem; }
.autocomplete { position: relative; }
.autocomplete__results { position: absolute; top: calc(100% + 7px); right: 0; left: 0; z-index: 60; max-height: 320px; padding: 6px; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--sky-deep) 28%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--surface-solid) 94%, transparent); box-shadow: 0 22px 55px -22px rgba(23,59,88,.48), inset 0 1px var(--glass-edge); backdrop-filter: blur(24px) saturate(170%); }
.autocomplete.is-open .autocomplete__results { animation: autocomplete-pop .28s var(--ease) both; }
@keyframes autocomplete-pop { from { opacity: 0; transform: translateY(-7px) scale(.985); } }
.autocomplete__option { display: flex; width: 100%; padding: 9px; align-items: center; gap: 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; }
.autocomplete__option:hover, .autocomplete__option[aria-selected="true"] { background: rgba(255,184,64,.12); }
.autocomplete__option > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.autocomplete__option strong, .autocomplete__option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autocomplete__option small { margin-top: 3px; color: var(--muted); font-size: .62rem; }

.auth-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(340px,.55fr); gap: clamp(30px,6vw,96px); align-items: center; }
.auth-story { padding-block: 76px; }
.auth-card { padding: clamp(23px,4vw,39px); border-radius: 17px; background: linear-gradient(135deg, var(--surface-deep), var(--surface)); box-shadow: var(--shadow-deep); }
.definition-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--line); }
.definition-list > div { padding: 13px; background: var(--surface); }
.definition-list dt { color: var(--muted); font-size: .67rem; }
.definition-list dd { margin-top: 4px; font-weight: 700; }
.steps { display: grid; gap: 9px; counter-reset: step; }
.step { display: grid; grid-template-columns: 47px minmax(0,1fr); padding: 18px; gap: 15px; border: 1px solid var(--line); border-bottom: 4px solid rgba(239,155,59,.25); border-radius: 11px; background: var(--surface); counter-increment: step; backdrop-filter: blur(18px); }
.step::before { display: grid; width: 40px; height: 40px; content: counter(step,decimal-leading-zero); place-items: center; color: var(--on-gold); border-radius: 5px; background: var(--gold); box-shadow: 3px 3px rgba(163,103,35,.18); font: 700 .67rem/1 var(--font-mono); }
.customizer { display: grid; grid-template-columns: minmax(0,.9fr) minmax(320px,.65fr); gap: 11px; align-items: start; }
.customizer-preview { position: sticky; top: 18px; min-height: 420px; display: grid; padding: 30px; place-items: center; border-radius: 17px; background: linear-gradient(145deg, rgba(73,172,227,.14), var(--surface) 54%, rgba(99,197,245,.13)); box-shadow: var(--shadow-deep); }
.nameplate-preview { display: inline-flex; padding: 13px 19px; align-items: center; gap: 8px; border-radius: 7px; color: #f0f8ff; background: #10243a; box-shadow: 5px 5px rgba(0,0,0,.2); font: 600 1.04rem/1 var(--font-mono); }
.color-grid, .emoji-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.emoji-option { width: 43px; height: 43px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 7px; background: var(--surface); }
.switch { display: inline-flex; align-items: center; gap: 9px; }
.custom-studio { display: grid; gap: 12px; }
.custom-live-preview { display: grid; min-height: 150px; padding: clamp(23px,3vw,34px); overflow: hidden; grid-template-columns: minmax(190px,.55fr) minmax(270px,1fr) minmax(180px,.65fr); align-items: center; gap: 28px; border-top: 4px solid var(--sky-deep); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-deep) 87%, transparent), rgba(99,197,245,.09)); }
.custom-live-preview h2 { margin-top: 7px; font-size: clamp(1.6rem,2.8vw,2.5rem); }
.custom-live-preview > p { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.nameplate-preview__prefix { display: inline-flex; letter-spacing: .01em; }
.custom-editor { padding: clamp(23px,3.5vw,38px); border-top: 4px solid var(--gold); }
.custom-editor > .alert { margin-bottom: 22px; }
.custom-editor__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(28px,5vw,72px); }
.custom-editor__section { min-width: 0; }
.custom-editor__section > header { display: grid; min-height: 64px; margin-bottom: 25px; grid-template-columns: 36px minmax(0,1fr); gap: 13px; }
.custom-editor__section > header h2 { font-size: 1.55rem; }
.custom-editor__section > header p { margin-top: 5px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.custom-editor__step { display: grid; width: 32px; height: 25px; place-items: center; color: var(--on-gold); border-radius: 5px; background: var(--gold); font: 700 .58rem/1 var(--font-mono); }
.custom-editor__section .form-field + .form-field { margin-top: 22px; }
.custom-emoji-picker input[type="hidden"] { display: none; }
.emoji-option[aria-pressed="true"] { border-color: var(--gold); background: rgba(255,184,64,.18); box-shadow: inset 0 0 0 2px rgba(255,184,64,.2); transform: translateY(-2px); }
.custom-color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.custom-color-grid label { display: flex; min-width: 0; padding: 9px; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-air); cursor: pointer; }
.custom-color-grid label[hidden] { display: none; }
.custom-color-grid input[type="color"] { width: 100%; height: 49px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.custom-color-grid label span { overflow: hidden; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.custom-advanced { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
.custom-advanced[hidden] { display: none; }
.custom-advanced__grid { display: grid; margin-top: 20px; grid-template-columns: repeat(3,1fr); gap: 20px; }
.custom-editor__footer { display: flex; margin-top: 27px; padding-top: 20px; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px dashed var(--line-strong); }
.custom-editor__footer p { max-width: 620px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.custom-editor__footer .button { flex: 0 0 auto; }

.forum-layout, .sidebar-layout, .legal-layout { display: grid; grid-template-columns: minmax(220px,.3fr) minmax(0,1fr); gap: 11px; align-items: start; }
.forum-sidebar, .settings-nav, .legal-toc { position: sticky; top: 18px; }
.forum-category { padding: 20px; }
.forum-category__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.topic-list, .post-list { display: grid; gap: 6px; }
.topic-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(140px,auto); min-height: 74px; padding: 13px 16px; align-items: center; gap: 17px; border-bottom: 1px dashed var(--line); }
.topic-row__title { font-weight: 750; }
.topic-row__meta, .topic-row__last { color: var(--muted); font-size: .69rem; }
.forum-post { display: grid; grid-template-columns: 175px minmax(0,1fr); min-height: 205px; padding: 0; }
.forum-post__author { padding: 20px; border-right: 1px dashed var(--line); background: rgba(73,172,227,.04); }
.forum-post__body { min-width: 0; padding: 22px; }
.forum-post__meta, .forum-post__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.forum-post__content { margin-block: 19px; }
.forum-signature, .quoted-reply { padding: 11px 13px; color: var(--muted); border-left: 3px solid var(--sky-bright); border-radius: 0 7px 7px 0; background: rgba(73,172,227,.06); }
.forum-reactions { display: flex; flex-wrap: wrap; gap: 6px; }
.reaction-chip { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-air); }
.composer { overflow: visible; }
.composer__count { color: var(--muted); font: 500 .63rem/1 var(--font-mono); text-align: right; }
.prose { color: var(--ink-soft); }
.prose > * + * { margin-top: 1.12em; }
.prose h2, .prose h3 { margin-top: 1.55em; }
.prose a { color: var(--sky-ink); text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .prose a { color: var(--sky); }
.prose ul, .prose ol { padding-left: 1.4em; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .71rem; }
.alert { display: flex; padding: 13px 15px; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 9px; background: var(--surface-deep); box-shadow: var(--shadow); }
.alert--danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--surface-deep) 90%, var(--danger)); }
.alert--success { border-left-color: var(--success); }
.empty-state { padding: 26px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface-air); text-align: center; }
.empty-state h2 { margin-bottom: 9px; font-size: 1.5rem; }
.error-page { min-height: 100svh; display: flex; padding-block: 90px 50px; align-items: center; }
.error-page__content { isolation: isolate; min-height: 450px; display: flex; flex-direction: column; justify-content: flex-end; }
.error-code { position: absolute; top: -18px; left: 15px; z-index: -1; color: rgba(255,184,64,.15); font: 800 clamp(9rem,24vw,19rem)/.8 var(--font-display); letter-spacing: -.1em; }
.pagination { display: flex; margin-top: 27px; align-items: center; justify-content: center; gap: 6px; }
.pagination__pages { display: flex; gap: 4px; }
.pagination__page { display: grid; min-width: 39px; height: 39px; padding: 0 8px; place-items: center; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; background: var(--surface-air); }
.pagination__page.is-current { color: var(--on-gold); border-color: #e5a03a; background: var(--gold); }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: grid; gap: 7px; }
.toast { padding: 12px 15px; color: var(--on-gold); border-radius: 7px; background: var(--gold); box-shadow: var(--shadow); }
.site-footer { position: relative; z-index: 1; margin-top: 60px; padding-block: 62px 22px; border-top: 3px solid var(--gold); background: color-mix(in srgb, var(--surface-air) 70%, transparent); backdrop-filter: blur(18px); }
.site-footer__grid { display: grid; grid-template-columns: minmax(280px,1.6fr) repeat(3,1fr); gap: clamp(26px,5vw,66px); }
.site-footer__grid > .stack { max-width: 390px; }
.site-footer h2 { margin-bottom: 16px; font: 700 .73rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.site-footer ul { display: grid; gap: 8px; list-style: none; }
.site-footer li a { color: var(--muted); font-size: .8rem; transition: color .2s; }
.site-footer li a:hover { color: var(--sky-ink); }
.site-footer .server-address { max-width: 340px; }
.site-footer__bottom { display: flex; margin-top: 46px; padding-top: 18px; justify-content: space-between; gap: 20px; color: var(--muted); border-top: 1px dashed var(--line); font-size: .65rem; }

.page-main > * { animation: page-reveal .78s var(--ease) both; }
.page-main > *:nth-child(2) { animation-delay: .06s; }
.page-main > *:nth-child(3) { animation-delay: .11s; }
@keyframes page-reveal { from { opacity: 0; transform: translateY(18px); } }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--sky-deep) 72%, white); outline-offset: 3px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }

@media (max-width: 1120px) {
  .home-hero__grid, .page-hero__grid, .auth-layout { grid-template-columns: 1fr; }
  .home-hero { min-height: auto; padding-block: 118px 78px; }
  .server-console { width: min(620px,100%); min-height: 430px; }
  .page-hero { min-height: auto; padding-block: 104px 54px; }
  .profile-layout, .shop-layout, .customizer { grid-template-columns: 1fr; }
  .shop-catalog-layout { grid-template-columns: minmax(0,1fr) 280px; }
  .purchase-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .purchase-summary .button { min-height: 53px; margin-left: 0; }
  .profile-sidebar, .order-summary, .customizer-preview { position: static; }
  .package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .player-grid, .team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .players-network__grid { grid-template-columns: minmax(0,1fr) minmax(280px,320px); }
  .staff-rank__members { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-profile-card.panel { grid-template-columns: 1fr; }
  .team-profile-card__metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer__grid > :last-child { grid-column: 2; }
}
@media (max-width: 860px) {
  body { padding-left: 0; padding-bottom: 82px; }
  .site-header { inset: auto 12px 12px; width: auto; height: 62px; padding: 7px; flex-direction: row; align-items: center; border-radius: 13px; transition: none; }
  .site-header:hover, .site-header:focus-within { width: auto; }
  .site-header__inner { flex: 1 1 auto; flex-direction: row; align-items: center; }
  .brand { width: auto; height: 46px; padding: 8px; flex-basis: auto; border: 0; }
  .brand__name { display: none; }
  .primary-nav { display: none; }
  .header-actions { width: auto; padding: 0; flex: 0 0 auto; flex-direction: row; align-items: center; border: 0; }
  .locale-control { display: none; }
  .account-link { width: 42px; padding: 5px; flex-basis: 42px; }
  .account-link__label { display: none; }
  .header-actions > .keep-mobile { width: auto; height: 42px; min-height: 42px; max-height: 42px; padding: 0 12px; opacity: 1; border-width: 1px 1px 3px; }
  .header-actions > .icon-button { margin-left: 0; }
  .header-actions > .icon-button { width: 42px; padding-left: 0; justify-content: center; }
  .menu-toggle { display: grid; }
  .mobile-nav { right: 12px; bottom: 83px; left: 12px; padding: 10px; border-radius: 13px; background: var(--surface-deep); box-shadow: var(--shadow-deep); backdrop-filter: blur(26px) saturate(170%); }
  .mobile-nav[data-open="true"] { display: grid; animation: menu-in .4s var(--ease) both; }
  .mobile-nav > a { padding: 11px 13px; border-radius: 7px; font-weight: 700; }
  .mobile-nav > a[aria-current="page"] { background: rgba(255,184,64,.16); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
  .skip-link { left: 12px; }
  .home-hero { padding-top: 82px; }
  .team-overview-grid { grid-template-columns: 1fr; }
  .player-profile-grid { grid-template-columns: 1fr; }
  .shop-catalog-layout { grid-template-columns: 1fr; }
  .top-buyers { position: static; }
  .top-buyers__list { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
  .custom-live-preview { grid-template-columns: minmax(180px,.6fr) minmax(0,1fr); }
  .custom-live-preview > p { grid-column: 1 / -1; }
  .players-network__grid { grid-template-columns: 1fr; }
  .featured-roster__groups { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 26px; }
}
@media (max-width: 720px) {
  :root { --gutter: 17px; }
  .section { padding-block: 60px; }
  .home-hero h1 { font-size: clamp(3.2rem,15vw,5.2rem); }
  .home-hero__meta { width: 100%; flex-wrap: wrap; }
  .home-hero__meta > span { flex: 1 1 auto; }
  .page-hero h1 { font-size: clamp(3rem,13vw,4.7rem); }
  .network-stats { grid-template-columns: 1fr; }
  .network-stats__head { text-align: center; }
  .network-stats__head h2 { max-width: none; }
  .network-stats__metrics { margin-top: 22px; }
  .split, .forum-layout, .sidebar-layout, .legal-layout { grid-template-columns: 1fr; }
  .shop-catalog__head, .purchase-builder__head, .custom-editor__footer { align-items: flex-start; flex-direction: column; }
  .purchase-builder__grid, .custom-editor__grid { grid-template-columns: 1fr; }
  .custom-live-preview { grid-template-columns: 1fr; text-align: center; }
  .custom-live-preview .nameplate-preview { justify-self: center; }
  .custom-live-preview > p { max-width: 420px; justify-self: center; }
  .forum-sidebar, .settings-nav, .legal-toc { position: static; }
  .section-head { align-items: start; flex-direction: column; }
  .game-index { grid-template-columns: 1fr; }
  .game-entry, .game-entry:nth-child(n) { grid-column: auto; min-height: 175px; }
  .match-card { grid-template-columns: 1fr auto 1fr; }
  .match-meta { grid-column: 1 / -1; justify-items: start; }
  .profile-identity { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .player-name-row { justify-content: center; }
  .profile-identity__facts, .profile-identity__actions { justify-content: center; }
  .player-metrics .metric { min-height: 90px; padding: 16px 10px; }
  .player-metrics .metric__value { margin-top: 12px; }
  .player-profile-grid .panel { padding: 20px; }
  .player-profile-grid [id] { scroll-margin-top: 130px; }
  .player-panel-heading h2 { font-size: 1rem; }
  .team-directory-grid { grid-template-columns: 1fr; }
  .team-profile-card__metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .champions-strip, .team-relations, .home-features { grid-template-columns: 1fr; }
  .forum-post { grid-template-columns: 1fr; }
  .forum-post__author { border-right: 0; border-bottom: 1px dashed var(--line); }
  .topic-row { grid-template-columns: minmax(0,1fr) auto; }
  .topic-row__last { display: none; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid > .stack { grid-column: 1 / -1; }
  .site-footer__grid > :last-child { grid-column: auto; }
  .site-footer__bottom { flex-direction: column; }
}
@media (max-width: 520px) {
  .home-hero__actions { display: grid; }
  .home-hero__actions > * { width: 100%; }
  .server-console { min-height: 410px; padding: 20px; }
  .server-console__head { flex-direction: column; }
  .server-console__row { grid-template-columns: 27px minmax(0,1fr); }
  .server-console__row .badge { grid-column: 2; width: max-content; }
  .server-address { align-items: flex-start; flex-direction: column; }
  .player-grid, .team-grid, .package-grid, .news-grid { grid-template-columns: 1fr; }
  .shop-package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shop-package-grid .package-card { min-height: 170px; padding: 16px; }
  .purchase-summary { grid-template-columns: 1fr 1fr; }
  .purchase-summary .button { grid-column: 1 / -1; }
  .top-buyers__list { grid-template-columns: 1fr; }
  .custom-color-grid { grid-template-columns: 1fr 1fr; }
  .custom-advanced__grid { grid-template-columns: 1fr; }
  .staff-rank__head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .staff-rank__members { grid-template-columns: 1fr; }
  .network-stats { min-height: 0; padding-inline: 18px; }
  .network-stats__metrics { margin-top: 30px; }
  .network-stats__metrics > div { padding-inline: 8px; }
  .network-stats__metrics dt { font-size: .55rem; letter-spacing: .025em; }
  .network-stats__metrics dd { font-size: clamp(1.8rem,11vw,3rem); }
  .star-roster { grid-template-columns: 1fr; gap: 18px; }
  .star-roster__members { padding-top: 18px; padding-left: 0; border-top: 1px dashed var(--line-strong); border-left: 0; }
  .featured-roster__groups { grid-template-columns: 1fr; }
  .team-directory-card__main { padding-inline: 16px; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; }
  .team-directory-card__position { display: none; }
  .team-directory-card__metrics > div { padding-inline: 12px; }
  .team-profile-card.panel { padding: 24px 18px; }
  .team-profile-card__identity { align-items: flex-start; flex-direction: column; }
  .team-profile-card__title h1 { font-size: clamp(2.25rem,12vw,3.3rem); }
  .team-honours__head { align-items: flex-start; flex-direction: column; }
  .team-honours__total { justify-items: start; }
  .team-record-bar { margin-top: 28px; }
  .team-record-breakdown > div { padding-inline: 11px; }
  .news-card:first-child { grid-row: auto; min-height: 300px; }
  .billing-row { align-items: start; flex-direction: column; }
  .tabs { width: 100%; }
  .input-group { display: grid; }
  .error-page__content { min-height: 410px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media print {
  body { padding: 0; color: #000; background: #fff; }
  .site-header, .mobile-nav, .site-footer, .ambient-bg, .button, .filter-bar { display: none !important; }
  .container { width: 100%; }
  .panel, .card, .glass-panel { color: #000; background: #fff; box-shadow: none; }
}

/* Compact page headings and consistent navigation controls. */
h1, .page-hero h1, .home-hero h1, .profile-identity h1, .team-profile-card__title h1 {
  max-width: none; margin-top: 8px; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.12; letter-spacing: -.035em;
}
.page-hero, .shop-hero, .custom-hero { min-height: 0; padding-block: 30px 18px; }
.page-hero__lead, .lede { margin-top: 10px; max-width: 760px; font-size: .92rem; line-height: 1.55; }
.page-hero + .section { padding-top: 16px; }
.home-hero { min-height: 0; padding-block: 40px; }
.home-hero h1 { max-width: 20ch; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.home-hero__grid { align-items: start; }
.header-actions > .icon-button, .primary-nav a { height: 42px; min-height: 42px; flex: 0 0 42px; padding: 0 11px; gap: 14px; border-radius: 7px; overflow: hidden; }
.header-actions > .icon-button svg, .primary-nav a svg { width: 19px; height: 19px; flex: 0 0 19px; }
.nav-control__label { opacity: 0; white-space: nowrap; font: 600 .72rem/1 var(--font-mono); transition: opacity .2s; }
.site-header:hover .nav-control__label, .site-header:focus-within .nav-control__label { opacity: 1; }
.site-dialog { width: min(480px, calc(100vw - 32px)); max-height: min(80dvh, 680px); margin: auto; padding: 22px; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--ink); background: var(--surface-solid); box-shadow: var(--shadow-deep); }
.site-dialog::backdrop { background: rgba(6,16,20,.45); backdrop-filter: blur(9px); }
.site-dialog[open] { animation: dialog-appear .22s var(--ease); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dialog-heading h2 { font-size: 1.45rem; }
.dialog-heading .icon-button { flex-shrink: 0; font-size: 1.5rem; }
.language-options { display: grid; gap: 8px; }
.language-options a { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-air); }
.language-options a[aria-current="true"], .language-options a:hover { border-color: var(--sky-deep); background: color-mix(in srgb, var(--sky) 12%, var(--surface)); }
@keyframes dialog-appear { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.shop-catalog__head { margin-bottom: 14px; }
.shop-catalog__head h2 { font-size: 1.55rem; }
.shop-package-grid .package-card { min-height: 148px; padding: 16px; }
.package-card__credits { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.shop-catalog > .alert { margin-bottom: 12px; padding: 12px 16px; font-size: .75rem; }
.custom-live-preview { min-height: 82px; padding: 16px 20px; grid-template-columns: minmax(140px,.6fr) minmax(0,1fr); gap: 16px; }
.custom-live-preview h2 { font-size: 1.1rem; }
.custom-live-preview > p { display: none; }
.custom-editor { padding: 20px; }
.custom-editor__section > header { min-height: 0; margin-bottom: 14px; }
.custom-editor__section > header h2 { font-size: 1.25rem; }
.custom-editor__section > header p { display: none; }
.custom-editor__section .form-field + .form-field { margin-top: 14px; }
.custom-editor fieldset { border: 0; padding: 0; margin-inline: 0; }
.custom-editor__footer { margin-top: 16px; padding-top: 14px; }
.custom-emoji-input { display: flex; align-items: center; gap: 8px; }
.custom-emoji-input input { max-width: 88px; text-align: center; font-size: 1.4rem; }
.custom-emoji-picker .emoji-grid { display: flex; gap: 5px; overflow-x: auto; padding-block: 4px; }
.custom-emoji-picker .emoji-option { flex: 0 0 32px; width: 32px; min-height: 32px; }
.emoji-dialog { width: min(650px, calc(100vw - 32px)); }
.emoji-dialog[open] { display: flex; flex-direction: column; gap: 10px; }
.emoji-dialog .dialog-heading { margin-bottom: 0; }
.emoji-catalog { display: grid; grid-template-columns: repeat(auto-fill,minmax(38px,1fr)); gap: 5px; overflow-y: auto; min-height: 150px; max-height: 45dvh; align-content: start; }
.emoji-catalog .emoji-option { width: 100%; min-height: 40px; font-size: 1.4rem; content-visibility: auto; contain-intrinsic-size: 40px; }
@media (max-width: 860px) {
  .site-header { position: sticky; top: 8px; inset-inline: auto; margin: 8px 10px; width: calc(100% - 20px); height: auto; min-height: 58px; flex-wrap: wrap; padding: 6px; gap: 4px; }
  .site-header__inner { width: 100%; flex: 1 1 100%; min-width: 0; }
  .site-header .brand { flex: 0 0 42px; padding: 4px; }
  .primary-nav { display: flex; flex: 1 1 auto; width: 0; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 3px; }
  .primary-nav a { width: 42px; justify-content: center; padding: 0; }
  .primary-nav__label { display: none; }
  .header-actions { width: 100%; justify-content: flex-end; gap: 5px; }
  .header-actions > .icon-button { width: auto; flex: 0 1 auto; padding-inline: 10px; gap: 7px; }
  .nav-control__label { opacity: 1; font-size: .65rem; }
  .account-link { margin-left: 0; }
  body { padding-bottom: 0; }
  .page-hero, .shop-hero, .custom-hero { padding-block: 20px 10px; }
  .home-hero { padding-block: 25px; }
  .shop-catalog-layout { grid-template-columns: minmax(0,1fr); }
  .custom-live-preview { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .custom-live-preview > div:first-child { display: none; }
  .custom-live-preview .nameplate-preview { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .site-dialog[open] { animation: none; }
}
.shop-catalog > .alert { margin-top: 14px; }

/* Guided shop: one decision at a time, in the same visual position. */
.shop-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; scroll-margin-top: 125px; }
.shop-progress button { display: flex; flex: 1; align-items: center; gap: 9px; min-height: 40px; padding: 8px 10px; border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--muted); text-align: left; font-size: .76rem; }
.shop-progress button span { font: 500 .66rem var(--font-mono); }
.shop-progress button[aria-current="step"] { border-color: var(--gold); color: var(--ink); }
.shop-progress button:disabled { cursor: default; opacity: .6; }
.shop-catalog .purchase-builder { margin-top: 0; padding: 22px; border-top: 1px solid var(--glass-edge); }
.shop-catalog .purchase-builder__head { padding-bottom: 16px; align-items: center; }
.shop-catalog .purchase-builder__head h2 { font-size: 1.4rem; line-height: 1.15; }
.shop-catalog .purchase-builder__grid { display: block; padding: 20px 0 0; }
.shop-catalog .purchase-step { padding: 0; background: none; border: 0; }
.shop-catalog .purchase-step h3 { font-size: 1.4rem; line-height: 1.2; }
.shop-catalog .purchase-step > div > p { margin-top: 8px; font-size: .85rem; }
.recipient-search-field { position: relative; margin-top: 22px; }
.recipient-search-field label { display: block; margin-bottom: 8px; }
.recipient-picker { min-height: 235px; }
.recipient-picker [data-player-continue] { margin-top: 16px; }
.shop-recipient-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: .8rem; }
.shop-recipient-summary strong { margin-left: 8px; }
.shop-catalog .purchase-type { margin-top: 20px; }
.shop-catalog .purchase-type .tab { min-height: 52px; font-size: .86rem; }
.shop-catalog .purchase-summary { grid-template-columns: 1fr 1fr; margin-top: 22px; }
.shop-catalog .purchase-summary > div:not(.purchase-summary__total) { display: none; }
.shop-catalog .purchase-summary__total { border-radius: 8px; }
.shop-catalog .purchase-builder__legal { text-align: left; }
[data-shop-stage][hidden], [data-game-card][hidden], [data-game-empty][hidden] { display: none !important; }
.autocomplete.is-open { z-index: 100; }
.purchase-builder:has(.autocomplete.is-open), .shop-catalog:has(.autocomplete.is-open) { position: relative; z-index: 101; }
.autocomplete__results[popover] { color: var(--ink); inset: auto; }
.autocomplete__results[popover]::backdrop { display: none; }

/* Team directory: compact rows, server pagination and a separate activity rail. */
.teams-directory-layout { display: grid; grid-template-columns: minmax(0,1fr) 285px; align-items: start; gap: 22px; }
.teams-directory-main { min-width: 0; }
.directory-toolbar { display: flex; gap: 12px; align-items: end; padding: 16px; box-shadow: var(--shadow-air); }
.directory-toolbar > div { min-width: 0; }
.directory-toolbar__search { flex: 1; }
.directory-toolbar label { display: block; margin-bottom: 6px; font-size: .72rem; }
.directory-toolbar input, .directory-toolbar select { width: 100%; min-height: 43px; padding: 10px 12px; }
.directory-toolbar .button { min-height: 43px; padding: 10px 15px; font-size: .75rem; }
.directory-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 24px 0 12px; }
.directory-caption h2 { font-size: 1.25rem; }
.directory-caption > span { font-size: .72rem; color: var(--muted); }
.team-ledger { padding: 0 16px; box-shadow: var(--shadow-air); }
.team-ledger__header, .team-ledger__row { display: grid; grid-template-columns: 28px minmax(110px,1fr) 76px 48px 58px 18px; gap: 12px; align-items: center; }
.team-ledger__header { min-height: 42px; color: var(--muted); font: 500 .61rem var(--font-mono); }
.team-ledger__header > :nth-child(n+3) { text-align: right; }
.team-ledger__list { list-style: none; }
.team-ledger__row { min-height: 73px; padding: 12px 0; border-top: 1px solid var(--line); font-size: .82rem; transition: background .2s; }
.team-ledger__row:hover { background: color-mix(in srgb, var(--sky) 7%, transparent); }
.team-ledger__position { color: var(--muted); font: 500 .65rem var(--font-mono); }
.team-ledger__identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.team-ledger__identity > span:last-child { min-width: 0; }
.team-ledger__identity strong { display: block; overflow-wrap: anywhere; line-height: 1.3; }
.team-ledger__identity small { display: block; margin-top: 3px; font-size: .65rem; }
.team-ledger__crest { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--sky) 10%, var(--surface-air)); font: 700 .8rem var(--font-display); }
.team-ledger__points, .team-ledger__level, .team-ledger__members { text-align: right; font-variant-numeric: tabular-nums; }
.team-ledger__row > span > small { display: none; }
.team-ledger__points { font-weight: 700; }
.team-ledger__arrow { color: var(--muted); }
.teams-match-feed { padding: 20px; }
.teams-match-feed .section-head { margin-bottom: 18px; }
.teams-match-feed .section-head h2 { margin-top: 8px; font-size: 1.3rem; line-height: 1.2; }
.teams-match-feed .match-list { gap: 0; }
.teams-match-feed .match-card { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 17px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.teams-match-feed .match-card__team { min-width: 0; font-size: .73rem; overflow-wrap: anywhere; }
.teams-match-feed .match-card__team:nth-child(3) { text-align: right; }
.teams-match-feed .match-score { font-size: .85rem; gap: 4px; }
.teams-match-feed .match-meta { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; font-size: .6rem; }
.teams-match-feed .match-meta .badge { padding: 4px 7px; font-size: .55rem; }
.teams-match-feed .empty-state { padding: 18px 0; border: 0; background: none; box-shadow: none; min-height: 0; }

/* Games: every mode stays attached to its game, with a quiet card hierarchy. */
.games-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; }
.games-toolbar > p { font-size: .8rem; }
.games-search { width: min(320px,60%); }
.games-search input { width: 100%; }
.games-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: start; }
.game-tile { display: flex; flex-direction: column; min-width: 0; min-height: 275px; padding: 24px; border-radius: 16px; box-shadow: var(--shadow-air); transition: border-color .2s, transform .3s var(--ease); }
.game-tile:hover { border-color: color-mix(in srgb, var(--sky-deep) 45%, var(--line)); transform: translateY(-3px); }
.game-tile__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.game-tile__emblem { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--sky) 12%, var(--surface)); font: 800 1.1rem var(--font-display); }
.game-tile:nth-child(3n+2) .game-tile__emblem { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.game-tile:nth-child(3n+3) .game-tile__emblem { background: color-mix(in srgb, var(--sky-bright) 12%, var(--surface)); }
.game-tile h2 { font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; }
.game-tile__description { margin-top: 12px; font-size: .82rem; line-height: 1.7; overflow-wrap: anywhere; }
.game-tile__modes { margin-top: 20px; border-top: 1px solid var(--line); font-size: .76rem; }
.game-tile__modes summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; }
.game-tile__modes summary::-webkit-details-marker { display: none; }
.game-tile__modes summary > span { transition: transform .2s; }
.game-tile__modes[open] summary > span { transform: rotate(45deg); }
.game-tile__modes ul { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; list-style: none; }
.game-tile__modes li { padding: 4px 8px; background: var(--surface-air); border-radius: 5px; color: var(--ink-soft); font-size: .7rem; }
.game-tile__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; font-size: .69rem; }
.game-tile__footer > span { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.game-tile__footer a { font-weight: 600; }
.game-tile__footer a:hover { color: var(--sky-deep); }
@media (max-width: 1180px) {
  .teams-directory-layout { grid-template-columns: minmax(0,1fr); }
  .teams-match-feed .match-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
  .games-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .shop-progress { gap: 4px; }
  .shop-progress button { gap: 6px; padding-inline: 4px; font-size: .68rem; }
  .shop-catalog .purchase-builder { padding: 17px; }
  .shop-catalog .purchase-builder__head { gap: 12px; }
  .shop-catalog .purchase-builder__head h2 { font-size: 1.2rem; }
  .shop-catalog .purchase-summary { grid-template-columns: 1fr; }
  .directory-toolbar { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .directory-toolbar__search { flex-basis: 100%; }
  .directory-toolbar > div:not(.directory-toolbar__search) { flex: 1; }
  .team-ledger { padding: 0 12px; }
  .team-ledger__header { display: none; }
  .team-ledger__row { grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px 12px; padding-block: 14px; }
  .team-ledger__identity { grid-column: 2; gap: 9px; }
  .team-ledger__points { grid-column: 3; grid-row: 1; }
  .team-ledger__level { grid-column: 2; text-align: left; }
  .team-ledger__members { grid-column: 3; }
  .team-ledger__row > span > small { display: inline; margin-right: 5px; font-size: .62rem; }
  .team-ledger__points > small { display: block !important; }
  .team-ledger__arrow { display: none; }
  .teams-match-feed .match-list, .games-catalog { grid-template-columns: minmax(0,1fr); }
  .game-tile { min-height: 0; padding: 22px; }
  .games-toolbar { gap: 12px; }
  .games-toolbar > p { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .game-tile:hover { transform: none; } }

/* Shared rhythm for the welcome, onboarding and account pages. */
body:has(.welcome) .ambient-bg__grid, body:has(.account-entry) .ambient-bg__grid { opacity: .16; }
.players-inline-search { width: 100%; margin-bottom: 6px; }
.players-inline-search__field { position: relative; display: flex; align-items: center; gap: 10px; }
.players-inline-search__field > svg { position: absolute; left: 17px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.players-inline-search .players-inline-search__field input[data-player-input][type="search"] { width: 100%; min-width: 0; min-height: 54px; padding-left: 48px; padding-right: 125px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-air); }
.profile-hero > .container > .players-inline-search { margin: 0 0 18px; }
.players-inline-search__field .button { position: absolute; right: 7px; min-height: 39px; padding: 8px 12px; font-size: .75rem; }
.welcome { padding: 32px 0 0; }
.welcome__stage { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; padding: 0; overflow: hidden; border-radius: 24px; background: radial-gradient(ellipse at 92% 12%,color-mix(in srgb,var(--gold) 20%,transparent),transparent 38%),linear-gradient(115deg,var(--surface-deep) 30%,color-mix(in srgb,var(--sky) 24%,var(--surface))); box-shadow: var(--shadow-air); }
.welcome__copy { position: relative; z-index: 1; padding: clamp(28px,4vw,54px); padding-right: 0; }
.welcome__copy h1 { margin-top: 23px; font-size: clamp(2rem,3.3vw,3.2rem); line-height: 1.09; letter-spacing: -.045em; text-wrap: initial; }
.welcome__copy h1 > span { color: var(--sky-deep); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: .09em; text-underline-offset: .13em; }
:root[data-theme="dark"] .welcome__copy h1 > span { color: #8ed8ff; }
.welcome__copy > p { max-width: 440px; margin-top: 21px; font-size: .95rem; line-height: 1.8; }
.welcome__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 28px; font-size: .8rem; }
.welcome .text-link::after, .home-discover .text-link::after, .home-paths .text-link::after, .account-entry .text-link::after { content: none; }
.welcome__compatibility { display: block; margin-top: 20px; color: var(--muted); font-size: .69rem; }
.welcome__art { position: relative; display: flex; flex-direction: column; align-items: center; padding: 28px 24px 30px; isolation: isolate; }
.welcome__art::before { position: absolute; z-index: -1; top: 48%; left: 50%; width: 82%; aspect-ratio: 1; content: ""; border: 1px solid color-mix(in srgb, var(--sky) 22%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--surface-deep) 78%, transparent), color-mix(in srgb, var(--sky) 12%, transparent) 55%, transparent 72%); transform: translate(-50%, -50%); }
.welcome__logo { display: block; width: min(100%, 320px); height: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(34,114,189,.2)); }
.welcome__wordmark { margin-top: -8px; color: var(--ink); font: 800 clamp(2rem,3vw,2.7rem)/1.1 var(--font-display); letter-spacing: -.05em; }
.portal-art { display: block; width: 100%; height: auto; }
.portal-art__island { animation: portal-float 7s ease-in-out infinite; }
.portal-art__spark { animation: portal-spark 5s ease-in-out infinite; }
@keyframes portal-float { 50% { transform: translateY(-9px); } }
@keyframes portal-spark { 50% { opacity: .25; } }
.welcome__art-caption { display: block; margin-top: 12px; text-align: center; font: 500 .55rem var(--font-mono); letter-spacing: .2em; color: var(--muted); }
.welcome__numbers { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); padding: 22px 30px; border-top: 1px solid var(--line); background: var(--surface-air); }
.welcome__numbers > div { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.welcome__numbers > div + div { border-left: 1px solid var(--line); }
.welcome__numbers dt { color: var(--muted); font-size: .72rem; }
.welcome__numbers dd { display: flex; align-items: center; gap: 8px; order: -1; font: 650 1.25rem var(--font-display); }
.home-discover, .home-community { padding-block: 48px; }
.home-discover .section-head, .home-community .section-head { margin-bottom: 22px; align-items: end; gap: 18px; }
.home-discover .section-head h2, .home-community .section-head h2 { margin-top: 8px; font-size: clamp(1.4rem,2vw,1.85rem); line-height: 1.15; }
.home-discover .section-head > a, .home-community .section-head > a { font-size: .76rem; flex-shrink: 0; }
.home-game-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.home-game-link { display: grid; grid-template-columns: 46px minmax(0,1fr) 18px; gap: 18px; align-items: center; padding: 23px; box-shadow: none; transition: background .2s,border-color .2s,transform .3s var(--ease); }
.home-game-link:hover { border-color: var(--sky-deep); transform: translateY(-3px); background: var(--surface); }
.home-game-link__mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--sky) 10%,var(--surface)); font: 800 .85rem var(--font-display); }
.home-game-link:nth-child(3n+2) .home-game-link__mark { background: color-mix(in srgb,var(--gold) 12%,var(--surface)); }
.home-game-link:nth-child(3n) .home-game-link__mark { background: color-mix(in srgb,var(--sky-bright) 12%,var(--surface)); }
.home-game-link strong { display: block; font: 700 1.12rem var(--font-display); }
.home-game-link strong + span { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .73rem; line-height: 1.7; }
.home-game-link__arrow { color: var(--muted); }
.home-paths { padding-block: 6px 24px; }
.home-paths > .container { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--line); }
.home-paths a { display: block; padding: 30px 24px; }
.home-paths a + a { border-left: 1px solid var(--line); }
.home-paths h2 { margin-top: 12px; font-size: 1.3rem; line-height: 1.2; }
.home-paths p { margin-top: 12px; font-size: .8rem; line-height: 1.7; }
.home-paths .text-link { display: inline-block; margin-top: 17px; font-size: .72rem; }
.home-community__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; }
.home-community .empty-state { min-height: 0; padding: 24px; font-size: .85rem; }
.home-community .team-card { padding: 16px 20px; box-shadow: none; }
.home-community .team-crest { width: 40px; height: 40px; flex-basis: 40px; font-size: .8rem; }
.home-community .home-team-card strong { font-size: .95rem; }
.home-community .match-card { padding: 16px; box-shadow: none; }

.play-experience { --container: 1050px; }
.play-intro { --container: 1050px; }
.play-choice-heading { margin-bottom: 20px; }
.play-choice-heading h2 { font-size: 1.4rem; line-height: 1.2; }
.play-choice-heading p { margin-top: 8px; font-size: .82rem; }
.play-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.play-choice { display: flex; min-width: 0; min-height: 175px; align-items: center; padding: 28px; gap: 20px; box-shadow: var(--shadow-air); transition: border-color .25s,background .25s,transform .3s var(--ease),min-height .3s,padding .3s; }
.play-choice:hover { border-color: var(--sky-deep); transform: translateY(-3px); }
.play-choice--premium:hover { border-color: var(--gold); }
.play-choice__icon { display: grid; place-items: center; flex: 0 0 58px; height: 64px; color: var(--sky-deep); border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb,var(--sky) 9%,var(--surface)); }
.play-choice__icon svg { width: 32px; height: 32px; }
.play-choice--premium .play-choice__icon { color: #ad7a23; background: color-mix(in srgb,var(--gold) 12%,var(--surface)); }
:root[data-theme="dark"] .play-choice--premium .play-choice__icon { color: #e0be78; }
.play-choice__copy { flex: 1; min-width: 0; }
.play-choice__copy strong { display: block; font: 750 1.6rem var(--font-display); }
.play-choice__copy > span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .78rem; line-height: 1.6; }
.play-choice__arrow { align-self: start; color: var(--muted); }
.play-choice[aria-pressed="true"] { border-color: var(--sky-deep); background: color-mix(in srgb,var(--sky) 7%,var(--surface)); }
.play-choice--premium[aria-pressed="true"] { border-color: #c09b50; background: color-mix(in srgb,var(--gold) 6%,var(--surface)); }
.has-choice .play-choice { min-height: 94px; padding: 16px 22px; }
.has-choice .play-choice__icon { flex-basis: 40px; height: 44px; border-radius: 10px; }
.has-choice .play-choice__icon svg { width: 26px; height: 26px; }
.has-choice .play-choice__copy strong { font-size: 1.15rem; }
.has-choice .play-choice__copy > span { font-size: .7rem; margin-top: 4px; }
.play-route { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; padding: 30px; margin-top: 24px; scroll-margin-top: 130px; box-shadow: var(--shadow-air); }
.play-route[hidden] { display: none; }
.play-route__intro h2 { margin-top: 12px; font-size: 1.7rem; line-height: 1.15; }
.play-route__intro > p { margin-top: 15px; font-size: .83rem; }
.play-server { margin-top: 24px; }
.play-server > span { color: var(--muted); font-size: .67rem; }
.play-server .server-address { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 14px; min-width: 0; width: 100%; border-radius: 10px; }
.play-server code { font-size: .85rem; overflow-wrap: anywhere; }
.play-server [data-copy-label] { font-size: .65rem; }
.play-route__intro .play-route__privacy { margin-top: 24px; font-size: .7rem; color: var(--muted); }
.play-checklist { display: grid; gap: 24px; list-style: none; padding-left: 28px; border-left: 1px solid var(--line); }
.play-checklist li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 14px; }
.play-checklist__number { color: var(--sky-deep); padding-top: 4px; font: 600 .7rem var(--font-mono); }
.play-checklist h3 { font-size: 1.08rem; line-height: 1.3; }
.play-checklist p { margin-top: 8px; font-size: .78rem; line-height: 1.7; }
.play-checklist .button { margin-top: 12px; }
.play-help { margin-top: 26px; color: var(--ink-soft); font-size: .8rem; }
.play-help summary { cursor: pointer; padding-block: 12px; }
.play-help p { max-width: 760px; padding: 12px 0; line-height: 1.8; }

.account-entry { --container: 1000px; padding-block: 55px; }
.account-entry__shell { display: grid; grid-template-columns: .9fr 1.1fr; padding: 0; overflow: hidden; box-shadow: var(--shadow-air); border-radius: 22px; }
.account-entry__story { display: flex; flex-direction: column; padding: 36px; border-right: 1px solid var(--line); background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--gold) 18%, transparent), transparent 55%), linear-gradient(155deg,color-mix(in srgb,var(--sky) 20%,var(--surface)),var(--surface)); }
.account-entry__story h2 { margin-top: 22px; font-size: 1.85rem; line-height: 1.15; }
.account-entry__story > p { margin-top: 16px; font-size: .84rem; line-height: 1.8; }
.account-entry__art { max-width: 260px; width: 100%; margin: auto; }
.account-entry__logo { display: block; width: min(100%, 220px); height: auto; margin: 20px auto; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(34,114,189,.18)); }
.account-entry__story > a { margin-top: 8px; font-size: .75rem; }
.account-entry__form { padding: clamp(25px,4vw,48px); align-self: center; }
.account-entry__form h1 { margin-top: 12px; font-size: 2.1rem; line-height: 1.1; }
.account-entry__lead { margin-top: 16px; font-size: .83rem; }
.account-entry__form form { margin-top: 26px; gap: 19px; }
.account-entry__form .form-field label { font-size: .78rem; }
.account-entry__form .auth-password-help { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.account-entry__form .input-group { position: relative; display: block; }
.account-entry__form .input-group input { padding-right: 50px; width: 100%; }
.account-entry__form .input-group .icon-button { position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; border: 0; background: transparent; }
.account-entry__form .field-help { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .72rem; }
.account-heading { padding-top: 30px; }
.account-banner { display: grid; grid-template-columns: 82px minmax(0,1fr) auto; gap: 26px; padding: 30px 34px; align-items: center; box-shadow: var(--shadow-air); background: radial-gradient(ellipse at 5% 100%,color-mix(in srgb,var(--sky) 11%,transparent),transparent 65%),linear-gradient(120deg,var(--surface-deep),var(--surface-air)); }
.account-banner .profile-skull { width: 76px; height: 76px; }
.account-banner .profile-skull .avatar { width: 76px; height: 76px; }
.account-banner__identity { min-width: 0; }
.account-banner h1.minecraft-name { display: block; margin-top: 9px; padding: 0; border: 0; background: none; font-size: clamp(1.05rem,1.8vw,1.5rem); line-height: 1.65; overflow-wrap: anywhere; white-space: normal; text-shadow: none; }
.account-banner__facts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: .73rem; color: var(--muted); }
.account-banner__actions { display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.account-banner__actions .button { width: 100%; font-size: .72rem; }
.account-settings { padding-top: 24px; }
.account-tabs { display: flex; gap: 6px; padding: 0 0 13px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; scrollbar-width: thin; }
.account-tabs a { flex-shrink: 0; padding: 10px 17px; font-size: .79rem; color: var(--ink-soft); border-radius: 8px; }
.account-tabs a[aria-selected="true"] { color: var(--ink); background: var(--surface-deep); box-shadow: inset 0 -2px var(--sky-deep); }
.account-panels > .panel { padding: 28px; box-shadow: var(--shadow-air); scroll-margin-top: 130px; }
.account-panels > .panel[hidden] { display: none; }
.account-panels h2 { margin-top: 10px; font-size: 1.5rem; line-height: 1.2; }
.account-panels > .panel > p { margin-top: 12px; font-size: .85rem; }
.account-panels .section-head { align-items: center; margin-bottom: 22px; padding-top: 0; border: 0; }
.account-panels .section-head h2 { max-width: none; }
.account-overview { display: block; margin-top: 25px; }
.account-overview .definition-list { border: 0; background: none; gap: 0; }
.account-overview .definition-list > div { padding: 14px 0; border-bottom: 1px solid var(--line); background: none; }
.account-overview .definition-list > div:first-child { padding-top: 0; }
.account-overview .definition-list dd { font-size: .86rem; overflow-wrap: anywhere; }
.account-overview .definition-list code { font-size: .74rem; }
.account-personalize { padding: 24px; border-radius: 13px; background: color-mix(in srgb,var(--gold) 6%,var(--surface-air)); border: 1px solid var(--line); }
.account-personalize__symbol { display: block; margin-bottom: 18px; color: #b68b40; font-size: 1.8rem; line-height: 1; }
.account-personalize h3 { font-size: 1.15rem; }
.account-personalize p { margin-block: 12px 18px; font-size: .79rem; }
.account-panels form.stack { max-width: 620px; margin-top: 24px; gap: 18px; }
.account-panels form.stack .button { justify-self: start; }
.account-panels .empty-state { min-height: 0; padding: 28px 0; text-align: left; align-items: start; font-size: .85rem; }
.account-panels .empty-state .button { margin-top: 15px; }
@media (max-width: 980px) {
  .welcome__copy h1 { font-size: 2.2rem; }
  .welcome__copy { padding: 30px; padding-right: 0; }
  .welcome__logo { width: 240px; }
  .account-banner { grid-template-columns: 76px minmax(0,1fr); }
  .account-banner__actions { grid-column: 1/-1; flex-direction: row; }
  .account-banner__actions > * { flex: 1; }
  .play-route { gap: 24px; padding: 24px; }
}
@media (max-width: 720px) {
  .welcome__stage { grid-template-columns: 1fr; }
  .welcome__copy { padding: 28px; }
  .welcome__copy h1 { font-size: 2rem; }
  .welcome__art { order: -1; padding: 22px 24px 0; }
  .welcome__art::before { width: 200px; }
  .welcome__logo { width: 150px; }
  .welcome__wordmark { font-size: 1.85rem; }
  .welcome__art-caption { margin-top: 8px; }
  .welcome__numbers { padding: 18px 10px; }
  .welcome__numbers > div { flex-direction: column; align-items: center; gap: 5px; }
  .welcome__numbers dt { font-size: .62rem; }
  .welcome__numbers dd { font-size: 1.1rem; }
  .home-game-grid, .home-community__grid { grid-template-columns: minmax(0,1fr); }
  .home-discover, .home-community { padding-block: 32px; }
  .home-game-link { padding: 18px; gap: 13px; }
  .home-paths > .container { grid-template-columns: 1fr; }
  .home-paths a { padding: 23px 0; }
  .home-paths a + a { border-left: 0; border-top: 1px solid var(--line); }
  .play-choices { gap: 12px; }
  .play-choice { padding: 20px; flex-wrap: wrap; min-height: 205px; gap: 14px; }
  .play-choice__copy { flex-basis: 100%; }
  .play-choice__copy strong { font-size: 1.25rem; }
  .play-choice__arrow { display: none; }
  .has-choice .play-choice { padding: 14px; min-height: 86px; flex-wrap: nowrap; gap: 10px; }
  .has-choice .play-choice__copy > span { display: none; }
  .play-route { grid-template-columns: 1fr; }
  .play-checklist { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--line); }
  .account-entry { padding-block: 25px; }
  .account-entry__shell { grid-template-columns: 1fr; }
  .account-entry__story { padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .account-entry__story h2 { margin-top: 12px; font-size: 1.4rem; }
  .account-entry__art, .account-entry__story > p { display: none; }
  .account-entry__story > a { margin-top: 12px; }
  .account-overview { grid-template-columns: 1fr; gap: 24px; }
  .account-banner { padding: 22px; gap: 18px; grid-template-columns: 56px minmax(0,1fr); }
  .account-banner .profile-skull, .account-banner .profile-skull .avatar { width: 54px; height: 54px; }
  .account-banner__facts { gap: 8px; }
  .account-panels > .panel { padding: 22px; }
  .account-tabs a { padding: 10px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-art__island, .portal-art__spark { animation: none; }
  .play-choice, .home-game-link { transition: none; }
}
.custom-prefix-help { display: flex; justify-content: space-between; gap: 12px; }
.custom-command-dialog { width: min(560px,calc(100vw - 32px)); padding: clamp(22px,4vw,32px); }
.custom-command-dialog .dialog-heading { margin-bottom: 12px; }
.custom-command-dialog .dialog-heading h2 { font: 600 1.35rem/1.3 var(--font-body); letter-spacing: -.03em; }
.custom-command-dialog > p { color: var(--ink-soft); font-size: .88rem; line-height: 1.65; }
.custom-command-dialog [data-command-value] { width: 100%; min-height: 82px; margin-top: 22px; padding: 16px; resize: none; border: 1px solid color-mix(in srgb,var(--sky-deep) 35%,var(--line)); border-radius: 12px; background: color-mix(in srgb,var(--sky) 5%,var(--surface)); font: 500 .88rem/1.6 var(--font-mono); overflow-wrap: anywhere; word-break: break-all; }
.custom-command-actions { display: flex; margin-top: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.custom-command-actions .button { gap: 9px; min-height: 42px; border-width: 1px; box-shadow: none; }
.custom-command-actions svg { width: 17px; height: 17px; }
.custom-command-expiry { max-width: 30ch; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.custom-command-dialog .custom-command-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; }
.custom-command-error { margin-top: 14px; padding: 12px 16px; border: 1px solid color-mix(in srgb,var(--danger) 35%,var(--line)); border-radius: 9px; color: var(--danger); font-size: .82rem; }
.custom-command-fallback code { display: block; margin-block: 16px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .shop-catalog__head { margin-bottom: 12px; }
  .shop-catalog__head .eyebrow, .shop-catalog__head > p { display: none; }
  .shop-catalog__head h2 { margin-top: 0; font-size: 1.25rem; }
  .shop-hero .page-hero__lead { font-size: .84rem; }
  .shop-package-grid .package-card { padding: 12px; min-height: 146px; }
  .package-card__ribbon { position: static; align-self: flex-start; margin-bottom: 5px; font-size: .5rem; }
}
 
/* Account history, compact rank studio and shared rail geometry. */
:root:not([data-theme="dark"]) .account-banner h1.minecraft-name span { color: color-mix(in srgb, var(--rank-color, var(--ink)) 62%, #173b58); }
:root:not([data-theme="dark"]) .account-banner h1.minecraft-name span[style*="#ffffff"] { color: var(--ink); }
.site-header .primary-nav a, .site-header .header-actions > .icon-button, .site-header .account-link {
  height: 42px; min-height: 42px; flex: 0 0 42px; padding: 0 10px; gap: 12px;
  align-items: center; justify-content: flex-start; border-width: 1px; box-shadow: none;
}
.site-header .header-actions > .icon-button, .site-header .account-link { border-color: transparent; background: transparent; }
.site-header .header-actions > .icon-button:hover, .site-header .account-link:hover { background: var(--surface-air); border-color: var(--line); transform: none; }
.site-header .primary-nav a svg, .site-header .header-actions > .icon-button svg { width: 20px; height: 20px; flex: 0 0 20px; }
.site-header .account-link__avatar { width: 24px; height: 24px; flex: 0 0 24px; margin-inline: -2px; border-radius: 4px; box-shadow: none; }
.site-header .header-actions { gap: 3px; padding-top: 8px; }
@media (min-width: 861px) {
  /* Keep the icon column fixed during both transitions; only the rail and labels move. */
  .site-header :is(.primary-nav a, .header-actions > .icon-button, .account-link, .brand) { display: grid; grid-template-columns: 40px minmax(0,1fr); padding-inline: 0; column-gap: 10px; justify-content: start; }
  .site-header .brand { grid-template-columns: 42px minmax(0,1fr); }
  .site-header :is(.primary-nav a, .header-actions > .icon-button, .account-link, .brand) > :is(svg, img, .brand__mark) { justify-self: center; }
  .site-header .primary-nav a:hover { transform: none; }
  .site-header :is(.primary-nav__label, .nav-control__label, .account-link__label, .brand__name) { display: block; min-width: 0; justify-self: stretch; overflow: hidden; text-align: left; text-overflow: ellipsis; opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .24s var(--nav-ease); }
  .site-header:is(:hover, :focus-within) :is(.primary-nav__label, .nav-control__label, .account-link__label, .brand__name) { opacity: 1; transform: translateX(0); transition-delay: .07s; }
}
.account-banner__actions .button { min-height: 38px; border-width: 1px; background: transparent; box-shadow: none; }
.account-banner__actions form .button { color: var(--muted); border-color: transparent; }
.account-banner__facts { margin-top: 9px; }
.account-overview .definition-list { display: grid; grid-template-columns: .8fr 1.5fr 1fr; gap: 24px; }
.account-overview .definition-list > div { display: grid; gap: 9px; padding: 0; border: 0; }
.account-overview .definition-list dt { font-size: .73rem; color: var(--muted); }
.history-count { display: inline-grid; min-width: 28px; height: 26px; margin-left: 6px; padding: 0 7px; vertical-align: middle; place-items: center; border-radius: 7px; background: var(--surface-air); border: 1px solid var(--line); font: 600 .7rem/1 var(--font-body); color: var(--muted); }
.history-intro { margin-top: 10px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.account-history { display: grid; }
.account-history .purchase-row, .account-history .sanction-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 18px; padding: 22px 0; align-items: center; border-top: 1px solid var(--line); }
.history-symbol { display: grid; width: 42px; height: 42px; place-items: center; align-self: start; border: 1px solid var(--line); border-radius: 12px; color: var(--sky-deep); background: color-mix(in srgb,var(--sky) 7%,transparent); }
.history-symbol svg { width: 23px; height: 23px; }
.sanction-row[data-active="true"] .history-symbol { color: var(--danger); background: color-mix(in srgb,var(--danger) 5%,transparent); }
.history-description { min-width: 0; }
.history-description h3 { font-size: .94rem; font-weight: 650; }
.history-description p { margin-top: 6px; color: var(--ink-soft); font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.history-description > time, .sanction-dates { display: block; margin-top: 7px; font-size: .69rem; color: var(--muted); }
.sanction-dates { display: flex; flex-wrap: wrap; gap: 5px 18px; line-height: 1.7; }
.history-outcome { display: grid; justify-items: end; gap: 10px; }
.history-amount { font: 650 1.05rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.account-history .badge { text-transform: none; font-family: var(--font-body); font-size: .7rem; letter-spacing: 0; border-radius: 20px; padding-inline: 10px; }
.history-empty { display: flex; gap: 20px; align-items: center; min-height: 190px; padding: 28px; border: 1px dashed var(--line-strong); border-radius: 13px; background: var(--surface-air); }
.history-empty__symbol { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border-radius: 50%; color: var(--sky-deep); background: color-mix(in srgb,var(--sky) 9%,transparent); font-size: 1.5rem; }
.history-empty h3 { font-size: 1rem; }
.history-empty p { margin-top: 8px; max-width: 54ch; font-size: .8rem; color: var(--muted); line-height: 1.6; }
.history-empty .button { margin-top: 17px; }
.history-empty--clear .history-empty__symbol { color: var(--success); background: color-mix(in srgb,var(--success) 8%,transparent); }
.history-support { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 5px 8px; font-size: .73rem; color: var(--muted); }
.history-support a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.custom-hero { padding-block: 22px 12px; }
.custom-hero .page-hero__lead { max-width: none; font-size: .82rem; }
.custom-section { padding-top: 8px; }
.custom-studio { grid-template-columns: minmax(250px,.8fr) minmax(0,1.7fr); gap: 20px; align-items: start; }
.custom-live-preview { position: sticky; top: 28px; grid-template-columns: minmax(0,1fr); gap: 24px; padding: 26px; min-height: 0; text-align: left; border-top-width: 1px; }
.custom-live-preview .custom-preview-heading { display: block; }
.custom-live-preview h2 { margin-top: 8px; font-size: 1.35rem; }
.custom-live-preview .nameplate-preview { width: 100%; min-width: 0; justify-self: stretch; justify-content: flex-start; flex-wrap: wrap; font-size: 1.02rem; line-height: 1.8; padding: 20px 16px; border-radius: 10px; overflow-wrap: anywhere; }
.custom-preview-name { border-top: 1px solid var(--line); padding-top: 20px; }
.custom-preview-name label { font-size: .75rem; }
.custom-preview-name small { font-size: .68rem; color: var(--muted); line-height: 1.6; }
.custom-editor { padding: 24px; border-top-width: 1px; }
.custom-editor__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; }
.custom-editor__section > header { gap: 9px; grid-template-columns: 28px minmax(0,1fr); margin-bottom: 18px; align-items: center; }
.custom-editor__section > header h2 { font-size: 1.1rem; }
.custom-editor__step { width: 25px; height: 23px; background: var(--surface-air); color: var(--muted); border: 1px solid var(--line); }
.custom-editor .form-field { gap: 6px; }
.custom-editor .form-field label, .custom-editor legend { font-size: .76rem; }
.custom-editor .custom-prefix-help, .custom-editor #emoji-help { font-size: .64rem; line-height: 1.6; color: var(--muted); }
.custom-editor .custom-emoji-input { flex-wrap: wrap; }
.custom-editor .custom-emoji-input .button { min-height: 40px; padding: 8px 10px; font-size: .68rem; border-width: 1px; }
.custom-editor .custom-color-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.custom-editor .custom-color-grid label { padding: 8px; }
.custom-editor .custom-color-grid input { height: 32px; }
.custom-editor .custom-color-grid span { font-size: .65rem; }
.custom-editor .custom-advanced { margin-top: 12px; padding-top: 10px; }
.custom-editor__footer { margin-top: 18px; padding-top: 16px; gap: 18px; flex-direction: row; align-items: center; }
.custom-editor__footer p { font-size: .65rem; max-width: 38ch; }
.custom-editor__footer .button { min-height: 44px; font-size: .74rem; }
@media (max-width: 1100px) and (min-width: 861px) {
  .custom-studio { grid-template-columns: minmax(220px,.65fr) minmax(0,1.4fr); gap: 14px; }
  .custom-editor { padding: 18px; }
  .custom-editor__grid { gap: 16px; }
  .custom-editor__footer { align-items: stretch; flex-direction: column; }
  .custom-editor__footer p { max-width: none; }
}
@media (max-width: 860px) {
  .site-header .primary-nav a { flex: 0 0 42px; padding: 0; justify-content: center; }
  .site-header .header-actions > .icon-button, .site-header .account-link { flex: 0 1 auto; width: auto; padding: 0 10px; gap: 8px; }
  .site-header .header-actions { padding-top: 0; }
  .custom-studio { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .custom-live-preview { position: static; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; }
  .custom-live-preview .custom-preview-heading { display: none; }
  .custom-preview-name { padding: 0; border: 0; }
  .custom-preview-name small { display: none; }
  .account-overview .definition-list { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 540px) {
  .account-banner { padding: 24px 20px; }
  .account-history .purchase-row, .account-history .sanction-row { grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; padding-block: 20px; }
  .history-symbol { width: 32px; height: 32px; border-radius: 8px; }
  .history-symbol svg { width: 19px; height: 19px; }
  .sanction-history .sanction-row > .badge { grid-column: 2/-1; justify-self: start; }
  .history-empty { padding: 20px 16px; gap: 15px; align-items: start; }
  .history-empty__symbol { width: 34px; height: 34px; flex-basis: 34px; font-size: 1.1rem; }
  .history-description h3 { font-size: .8rem; }
  .history-amount { font-size: .9rem; }
  .custom-live-preview { grid-template-columns: 1fr; gap: 12px; }
  .custom-live-preview .nameplate-preview { padding: 12px; }
  .custom-editor { padding: 18px; }
  .custom-editor__grid { grid-template-columns: 1fr; gap: 22px; }
  .custom-editor__footer { position: sticky; bottom: 10px; z-index: 4; margin-inline: -10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); box-shadow: var(--shadow-air); }
  .custom-editor__footer p { font-size: .6rem; }
  .custom-editor__footer .button { padding-inline: 12px; font-size: .7rem; }
}
.legal-heading .legal-version { margin-top: 15px; font-size: .7rem; color: var(--muted); }
.legal-layout .prose { padding: clamp(24px,4vw,48px); }
.legal-layout .prose > section { scroll-margin-top: 32px; }
.legal-layout .prose > section + section { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-layout .prose h2 { margin: 0 0 16px; font-size: 1.35rem; line-height: 1.35; color: var(--ink); }
.legal-layout .prose p + p { margin-top: 16px; }
.legal-layout .prose p { font-size: .9rem; line-height: 1.9; }
.legal-layout { grid-template-columns: minmax(250px,290px) minmax(0,1fr); gap: clamp(18px,2.4vw,32px); }
.legal-toc.panel { position: sticky; top: 28px; min-width: 0; padding: 0; border-radius: 16px; box-shadow: var(--shadow-air), inset 0 1px var(--glass-edge); background: linear-gradient(140deg,color-mix(in srgb,var(--sky) 4%,var(--surface)),var(--surface) 65%); }
.legal-toc__heading { display: flex; min-height: 78px; padding: 18px; align-items: center; gap: 12px; cursor: pointer; list-style: none; border-radius: 16px; }
.legal-toc__heading::-webkit-details-marker { display: none; }
.legal-toc__symbol { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--sky-deep); background: var(--surface-air); }
.legal-toc__symbol svg { width: 19px; height: 19px; }
.legal-toc__title { display: grid; min-width: 0; gap: 3px; }
.legal-toc__title strong { color: var(--ink); font: 600 .94rem/1.35 var(--font-body); letter-spacing: -.02em; }
.legal-toc__title small { color: var(--muted); font-size: .65rem; }
.legal-toc__chevron { width: 18px; height: 18px; margin-left: auto; flex: 0 0 18px; color: var(--muted); transition: transform .25s var(--ease); }
.legal-toc[open] .legal-toc__chevron { transform: rotate(180deg); }
.legal-toc nav { margin-inline: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.legal-toc__list { display: grid; max-height: calc(100dvh - 155px); margin: 0; padding: 0 0 10px; gap: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; list-style: none; }
.legal-toc__list li { min-width: 0; }
.legal-toc__link { position: relative; display: grid; min-height: 44px; padding: 10px 11px; grid-template-columns: 22px minmax(0,1fr) 13px; gap: 9px; align-items: center; color: var(--ink-soft); border: 1px solid transparent; border-radius: 9px; transition: color .2s, background .2s, border-color .2s; }
.legal-toc__number { align-self: start; padding-top: 2px; color: var(--muted); font: 500 .64rem/1.55 var(--font-mono); font-variant-numeric: tabular-nums; }
.legal-toc__label { font: 500 .75rem/1.55 var(--font-body); overflow-wrap: anywhere; }
.legal-toc__arrow { width: 13px; height: 13px; opacity: 0; transform: translate(-2px,2px); transition: transform .2s, opacity .2s; }
.legal-toc__link:hover { color: var(--ink); background: var(--surface-air); }
.legal-toc__link[aria-current="location"] { color: var(--ink); border-color: color-mix(in srgb,var(--sky-deep) 22%,var(--line)); background: color-mix(in srgb,var(--sky) 9%,var(--surface)); }
.legal-toc__link[aria-current="location"]::before { position: absolute; left: -1px; top: 25%; width: 2px; height: 50%; content: ""; border-radius: 3px; background: var(--sky-deep); }
.legal-toc__link[aria-current="location"] .legal-toc__number { color: var(--sky-deep); }
.legal-toc__link[aria-current="location"] .legal-toc__label { font-weight: 650; }
.legal-toc__link:hover .legal-toc__arrow, .legal-toc__link[aria-current="location"] .legal-toc__arrow { opacity: 1; transform: none; }
.legal-toc__link:focus-visible, .legal-toc__heading:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: -3px; }
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; gap: 18px; }
  .legal-toc.panel { position: static; }
  .legal-toc__heading { min-height: 68px; padding: 14px 18px; }
  .legal-toc__list { max-height: min(55dvh,340px); }
  .legal-layout .prose > section { scroll-margin-top: 140px; }
}
@media print { .site-header, .site-footer, .legal-toc { display: none; } body { padding: 0; background: white; color: black; } .legal-layout { display: block; } .legal-layout .prose { background: none; border: 0; box-shadow: none; } .legal-layout .prose p { font-size: 10pt; } }