/* Arenyze page styles: the page art per page, then each page's own blocks. */
@layer components {
  .page-home { --page-art: url("/assets/bg/net-0.webp?v=1"); }
  .page-premium, .page-user { --page-art: url("/assets/bg/net-1.webp?v=1"); }
  .page-contact, .page-404 { --page-art: url("/assets/bg/net-2.webp?v=1"); }
  .page-legal, .page-auth { --page-art: url("/assets/bg/net-3.webp?v=1"); }
}

/* ---- home ---------------------------------------------------------------- */
@layer components {
  .hero { position: relative; padding: 44px 0 26px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 660px); gap: 40px; align-items: center; }
  .hero-title { margin: 8px 0 16px; text-transform: uppercase; line-height: .9; font-weight: 900; }
  .hero-title span { display: block; font-family: var(--f-display); font-stretch: 122%; }
  .hero-title .t1 { font-size: clamp(42px, 5.2vw, 76px); letter-spacing: -.015em; background: linear-gradient(180deg, #fff 35%, #ffe2b0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgb(var(--acc-rgb) / .3)); }
  .hero-title .t2 { font-size: clamp(20px, 2.6vw, 34px); margin-top: 8px; color: var(--acc); letter-spacing: .02em; }
  .hero-title .t2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.4px var(--ink-2); }
  .hero-sub { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 560px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .hero-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; color: var(--ink-3); font-size: 12.5px; }
  .hero-ticks > span { display: inline-flex; align-items: center; gap: 6px; }
  .hero-ticks .i { color: var(--acc); font-size: 15px; }

  /* Live trackers: one card per game, its art in the game's colour. The
     card leans toward the pointer (js/home-cards.js), the art drifts the
     other way and a glare follows the cursor. */
  .gc-wrap { display: flex; flex-direction: column; gap: 12px; }
  .gc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; perspective: 1100px; }
  .gc {
    --g: var(--acc); --rx: 0deg; --ry: 0deg; --mx: 0; --my: 0; --lift: 0px;
    position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 392px; overflow: hidden;
    border-radius: var(--r-lg); background: var(--s1);
    box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -28px #000;
    transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d; will-change: transform;
    transition: transform .6s var(--ease-out), box-shadow .35s;
    animation: gc-in .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms);
  }
  .gc[data-game="r6"] { --g: #ff8a3d; }
  .gc[data-game="arknightsendfield"] { --g: #f5c400; }
  .gc[data-game="thefinals"] { --g: #ff3b6b; }
  @keyframes gc-in { from { opacity: 0; transform: translateY(22px) rotateX(10deg); } }
  .gc.is-tilting { transition: transform .12s linear, box-shadow .35s; }
  .gc:hover { --lift: -6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 55%, transparent), 0 34px 60px -30px color-mix(in srgb, var(--g) 70%, transparent); }

  /* Art: the game's imagery fading into the card, plus a colour wash. */
  .gc-art { position: absolute; inset: -14px -14px auto; height: 68%; z-index: -2;
    background: var(--art) center / cover; opacity: .62;
    transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)) scale(1.04);
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent);
    transition: transform .8s var(--ease-out), opacity .4s; }
  .gc.is-tilting .gc-art { transition: transform .15s linear, opacity .4s; }
  .gc:hover .gc-art { opacity: .8; transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)) scale(1.12); }
  .gc::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--g) 34%, transparent), transparent 62%), linear-gradient(180deg, transparent 40%, var(--s1) 66%); }
  .gc-glare { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), #ffffff26, transparent 46%); mix-blend-mode: overlay; }
  .gc:hover .gc-glare { opacity: 1; }

  .gc-live { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 8px;
    border-radius: 0; clip-path: var(--lean); background: #000000a6; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font: 700 9.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--up, #3ddc84); }
  .gc-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: gc-pulse 1.8s ease-in-out infinite; }
  @keyframes gc-pulse { 50% { opacity: .35; } }

  .gc-logo { position: relative; z-index: 2; display: grid; place-items: center; width: 92px; height: 92px; margin: 74px auto 0;
    transform: translateZ(40px); transition: transform .5s var(--spring, var(--ease-out)); filter: drop-shadow(0 14px 22px #000a); }
  .gc-logo svg, .gc-logo img { width: 84px; height: 84px; object-fit: contain; }
  .gc:hover .gc-logo { transform: translateZ(40px) scale(1.1) rotate(-4deg); }

  .gc-body { position: relative; z-index: 2; margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 16px; transform: translateZ(20px); }
  .gc-name { font: 850 20px/1.05 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
  .gc-meta { color: var(--ink-3); font-size: 12px; line-height: 1.45; min-height: 2.9em; }
  .gc-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm);
    background: #ffffff09; box-shadow: inset 0 0 0 1px #ffffff0a; }
  .gc-stat b { font: 850 24px/1 var(--f-display); font-stretch: var(--num-stretch); font-variant-numeric: tabular-nums; color: var(--ink); }
  .gc-stat small { font: 700 9.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
  .gc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 650; font-size: 13px; color: var(--g); }
  .gc-go .i { font-size: 15px; transition: transform .3s var(--ease-out); }
  .gc:hover .gc-go .i { transform: translateX(4px); }
  .gc:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }

  .gc-soon { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: var(--r); background: #ffffff06; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-size: 12.5px; }

  @media (prefers-reduced-motion: reduce) { .gc { animation: none; transform: none !important; } .gc-art { transform: none !important; } }

  .home-kpis { --n: 4; margin-top: 6px; }
  .page-home #network, .page-home #features { margin-top: 38px; }

  .net-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .net-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
  .net-top { display: flex; align-items: center; gap: 12px; }
  .net-top .trk-logo { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--s3); overflow: hidden; }
  .net-top .trk-logo img { width: 100%; height: 100%; object-fit: cover; }
  .net-top b { display: block; font: 800 15px/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; }
  .net-top small { color: var(--ink-4); font: 500 11.5px/1.3 var(--f-mono); }
  .net-num { margin-top: 6px; font: 850 46px/1 var(--f-display); font-stretch: var(--num-stretch); font-variant-numeric: tabular-nums; }
  .net-label { font: 700 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
  .net-share { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .net-share .bar-track { width: 100%; height: 6px; border-radius: 3px; }
  .net-share .bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--hi)); transition: width .8s var(--ease-out); }
  .net-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-3); }
  .net-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .net-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 13px; color: var(--acc); }
  .net-link .i { font-size: 15px; }

  .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .feat { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-lg); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
  .feat-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgb(var(--acc-rgb) / .14); color: var(--acc); }
  .feat-ic .i { font-size: 19px; }
  .feat h3 { font: 800 15px/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; margin: 2px 0 6px; }
  .feat p { color: var(--ink-3); font-size: 13px; line-height: 1.55; margin: 0; }

  .cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin: 34px 0 10px; padding: 30px 32px; border-radius: var(--r-lg); clip-path: var(--cut-tr);
    background: radial-gradient(60% 140% at 0% 0%, rgb(var(--acc-rgb) / .16), transparent 60%), var(--stripes), var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
  .cta-text { max-width: 640px; }
  .cta-text h2 { margin: 10px 0 8px; font: 850 clamp(24px, 3vw, 34px)/1 var(--f-display); font-stretch: var(--display-stretch); text-transform: uppercase; }
  .cta-text p { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

  @media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
  @media (max-width: 900px) { .net-grid, .feat-grid { grid-template-columns: minmax(0, 1fr); } .home-kpis { --n: 2; } }
  @media (max-width: 720px) {
    .hero { padding-top: 26px; }
    .gc-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .gc { min-height: 0; flex-direction: row; align-items: center; }
    .gc-art { inset: 0; height: auto; opacity: .4; -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 75%); mask-image: linear-gradient(90deg, #000 20%, transparent 75%); }
    .gc::before { background: radial-gradient(80% 120% at 0% 50%, color-mix(in srgb, var(--g) 30%, transparent), transparent 70%); }
    .gc-logo { width: 64px; height: 64px; margin: 0 0 0 14px; flex: none; }
    .gc-logo svg, .gc-logo img { width: 54px; height: 54px; }
    .gc-live { top: 8px; right: 8px; }
    .gc-body { flex: 1; min-width: 0; padding: 14px 14px 14px 12px; }
    .gc-meta { min-height: 0; }
    .gc-stat { margin-top: 8px; padding: 7px 10px; }
    .gc-go { display: none; }
    .cta-band { padding: 24px 20px; }
    .cta-actions, .cta-actions .btn, .hero-actions .btn { width: 100%; justify-content: center; }
  }
}

/* ---- page heads built on the old markup (.banner, the plans intro) -------- */
@layer components {
  .banner { position: relative; padding-block: 34px 22px; background: none; border: 0; }
  .banner::before, .banner::after { content: none; }
  .banner-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
  .banner h1, .plans-intro h1 { margin: 12px 0 0; font: 850 clamp(30px, 4.4vw, 52px)/.95 var(--f-display); font-stretch: var(--display-stretch); letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
  .banner h1 mark, .plans-intro h1 mark { background: none; color: var(--acc); padding: 0; }
  .banner-lead, .plans-intro > p { margin-top: 12px; max-width: 640px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
  .banner-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
  .plans-intro { padding-block: 34px 22px; }

  /* Form fields with a label above the control. */
  .field:has(> label), .field:has(> .field-label) { flex-direction: column; align-items: stretch; gap: 7px; }
  .field > label, .field-label { text-align: left; font: 600 12.5px/1.2 var(--f-ui); color: var(--ink-2); }
  .pw-wrap { position: relative; display: block; width: 100%; }
}

/* Section titles on the old markup take the hexagon marker of .lt-title. */
@layer components {
  .sec-title { align-items: center; }
  .sec-title::before, .content-section .sec-title::before { content: ''; width: 12px; height: 11px; border-radius: 0; background: var(--acc); clip-path: var(--hex); transform: none; flex: none; }
}

/* Phones: a section title's note goes under it instead of beside it. */
@layer components {
  @media (max-width: 720px) {
    .lt-title { flex-wrap: wrap; row-gap: 6px; }
    .lt-title small { flex-basis: 100%; padding-left: 22px; }
  }
}

/* Games menu: each tracker with its logo and address. */
@layer components {
  .mega-game img { width: 30px; height: 30px; border-radius: 8px; flex: none; object-fit: cover; }
  .mega-game > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mega-game b { font-weight: 650; color: var(--ink); }
  .mega-game small { font: 500 11px/1.2 var(--f-mono); color: var(--ink-4); }
  .mega-game .mega-ext { margin-left: auto; width: 15px; height: 15px; padding: 0; background: none; color: var(--ink-4); }
  .mega-game:hover .mega-ext { color: var(--acc); background: none; }
  .mega-arz { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); width: min(640px, calc(100vw - 32px)); }
  .mega-game small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mega-soon { display: flex; align-items: center; gap: 8px; padding: 8px; color: var(--ink-4); font-size: 12.5px; }
  .drawer-game img { width: 22px; height: 22px; border-radius: 6px; }
  .drawer-game .drawer-ext { margin-left: auto; color: var(--ink-4); width: 15px; height: 15px; }
}

/* Auth pages: the state icon above the title (it was a ligature span). */
@layer components {
  .auth-head > .i { width: 52px; height: 52px; padding: 13px; margin-bottom: 14px; border-radius: 14px; background: rgb(var(--acc-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .2); color: var(--acc); }
}

/* Icons boxed into tiles by the old rules: the svg fills its box, so it gets
   the inset the glyph used to have. */
@layer components {
  .topic > .i { padding: 8px; }
  .pt-state .i { padding: 3px; }
}