/* Home previews /test1 ... /test9 (owner 2026-10-30): loaded only by those hidden pages, never by the real site. */
html { overflow-x: clip; }
.hx-bleed { margin-inline: calc(50% - 50vw); }
/* ---- shared preview components (/test1-9, owner 2026-10-30) ---- */
.hx-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); gap: 28px 40px;
  align-items: center; padding: 44px 40px 0; border: 1px solid var(--line); border-radius: 22px; background: #0d0d0c; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.hx-hero-bg[data-hx-map] { }
.hx-hero-bg { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(900px 420px at 12% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(31, 127, 138, .22), transparent 70%),
    linear-gradient(90deg, rgba(13, 13, 12, .96) 30%, rgba(13, 13, 12, .55)),
    var(--hx-map, none) 72% 40% / 900px auto no-repeat, #0d0d0c; filter: saturate(.9); }
.hx-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, #0d0d0c); }
.hx-hero-main { min-width: 0; display: grid; gap: 16px; padding-bottom: 8px; }
.hx-kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.hx-kicker-txt { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.hx-name img { width: clamp(260px, 36vw, 440px); height: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .6)); }
.hx-tagline { margin: 0; max-width: none; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; color: #e9e6dc; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.hx-play { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 12px; font-weight: 800; font-size: 1.05rem; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #f0703c, var(--accent)); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s, box-shadow .15s; }
.hx-play:hover, .hx-play:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); color: #fff; }
.hx-ghost { display: inline-flex; align-items: center; padding: 13px 20px; border-radius: 12px; font-weight: 700; color: var(--fg); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); background: rgba(255, 255, 255, .04); transition: border-color .15s, background .15s; }
.hx-ghost:hover, .hx-ghost:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.hx-map { margin: 0; color: var(--muted); font-size: .9rem; }
.hx-map a { color: var(--accent-text); }
/* the live panel */
.hx-live { align-self: stretch; display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 18px; margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(22, 22, 20, .62); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.hx-live-head { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8fe0a3; }
.hx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: hx-pulse 2s infinite; }
@keyframes hx-pulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hx-live-item { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(13, 13, 12, .55); color: inherit; }
.hx-live-item .label { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.hx-big { font-size: 2rem; font-weight: 800; line-height: 1.05; }
.hx-live-item .value[data-sm] { font-size: 1.15rem; font-weight: 800; }
.hx-live-item.raid-on { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); background: color-mix(in srgb, var(--ok) 12%, rgba(13, 13, 12, .55)); }
.hx-live-item.raid-off { border-color: color-mix(in srgb, #d4503e 55%, var(--line)); background: color-mix(in srgb, #d4503e 10%, rgba(13, 13, 12, .55)); }
.hx-live-item .tlight { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); height: 44px; width: auto; }
.hx-faces { display: flex; align-items: center; margin-top: 6px; min-height: 30px; }
.hx-face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #161614; margin-left: -8px; background: var(--surface-2); }
.hx-face:first-child { margin-left: 0; }
.hx-more { display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: var(--muted); }
.hx-count { display: flex; gap: 6px; margin-top: 6px; }
.hx-cd { display: grid; justify-items: center; min-width: 46px; padding: 6px 4px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.hx-cd b { font-size: 1.2rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hx-cd i { font-style: normal; font-size: .64rem; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.hx-count-live { color: var(--gold); font-weight: 800; }
/* the ticker */
.hx-ticker { grid-column: 1 / -1; margin: 6px -40px 0; padding: 12px 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .35);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hx-ticker-track { display: flex; gap: 34px; width: max-content; animation: hx-scroll var(--hx-dur, 60s) linear infinite; }
.hx-ticker:hover .hx-ticker-track { animation-play-state: paused; }
.hx-ticker-track.is-still { animation: none; }
@keyframes hx-scroll { to { transform: translateX(-50%); } }
.hx-tk { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .88rem; color: var(--muted); }
.hx-tk b { color: var(--fg); font-weight: 700; }
.hx-tk-w { color: var(--faint); }
/* the wipe in numbers */
.hx-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.hx-num { display: grid; gap: 2px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 60%); }
.hx-num-v { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hx-num-l { color: var(--muted); font-size: .86rem; font-weight: 600; }
/* team spotlight */
.hx-team-card { display: grid; gap: 16px; padding: 18px; height: 100%; background: radial-gradient(400px 140px at 0 0, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--surface); }
.hx-team-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.hx-team-ico { grid-row: 1 / span 2; font-size: 1.8rem; }
.hx-team-head h3 { margin: 0; font-size: 1.3rem; }
.hx-team-meta { color: var(--muted); font-size: .85rem; }
.hx-team-card .tm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-team-mem { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.hx-mem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); min-width: 0; text-decoration: none; }
.hx-mem img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--line); }
.hx-mem.is-leader img { border-color: var(--gold); }
.hx-mem-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-weight: 700; font-size: .88rem; }
.hx-mem.plink:hover, .hx-mem.plink:focus-visible { border-color: var(--accent); color: inherit; }
/* community band */
.hx-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 56px; padding: 30px 32px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, #5865f2 40%, var(--line)); background: radial-gradient(600px 200px at 100% 0, rgba(88, 101, 242, .25), transparent 70%), var(--surface); }
.hx-join h2 { margin: 0 0 6px; font-size: 1.4rem; }
.hx-join p { margin: 0; color: var(--muted); }
.hx-join-txt { flex: 1 1 380px; }
.hx-join-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-discord { background: linear-gradient(135deg, #7b86ff, #5865f2); box-shadow: 0 10px 30px rgba(88, 101, 242, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
.hx-discord:hover, .hx-discord:focus-visible { box-shadow: 0 16px 40px rgba(88, 101, 242, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
@media (max-width: 960px) {
  .hx-hero { grid-template-columns: 1fr; padding: 30px 22px 0; }
  .hx-ticker { margin: 6px -22px 0; }
  .hx-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: none) and (pointer: coarse) { .hx-cta .hx-play { display: none; } }  /* phones cannot start Steam, like the real home */
@media (prefers-reduced-motion: reduce) { .hx-dot { animation: none; } .hx-ticker-track { animation: none; } .hx-play, .hx-ghost { transition: none; } .hx-play:hover { transform: none; } }

/* star player (covers) */
.hx-star { display: grid; justify-items: center; text-align: center; gap: 10px; }
.hx-star-kick { font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.hx-star-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 15%, transparent), 0 20px 50px rgba(0, 0, 0, .5); }
.hx-star-name { margin: 4px 0 0; font-size: 1.8rem; line-height: 1.1; cursor: pointer; text-decoration: none; }
.hx-star-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0; }
.hx-star-nums { margin: 0; color: var(--muted); font-size: .92rem; }

/* ===== 2 · Minimal ===== */
.v2 .card, .v2 .rec, .v2 .top-tile { background: transparent; box-shadow: none; border-radius: 0; border: 0; border-top: 1px solid var(--line); }
.v2-hero { padding: 72px 0 48px; display: grid; gap: 22px; max-width: 900px; }
.v2-status { display: flex; align-items: center; gap: 14px; margin: 0; }
.v2-dim { color: var(--faint); font-size: .85rem; letter-spacing: .04em; }
.v2 .hx-name img { width: clamp(280px, 40vw, 520px); }
.v2 .hx-tagline { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.4; font-weight: 300; color: var(--fg); letter-spacing: -.01em; }
.v2 .hx-play { background: var(--fg); color: #111; box-shadow: none; border-radius: 999px; }
.v2 .hx-play:hover { color: #111; background: #fff; }
.v2 .hx-ghost { border-radius: 999px; border-color: var(--line); background: none; }
.v2-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v2-live .hx-live-item { background: none; border: 0; border-radius: 0; padding: 22px 20px 22px 0; }
.v2-live .hx-live-item + .hx-live-item { border-left: 1px solid var(--line); padding-left: 22px; }
.v2-live .label { color: var(--faint); letter-spacing: .14em; }
.v2-live .tlight, .v2-live .meter, .v2 .hx-count { display: none; }
.v2 .sec-title h2 { font-weight: 500; font-size: 1.4rem; }
.v2 .hx-join { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 40px 0; }

/* ===== 3 · Esport ===== */
.v3-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 30px; align-items: end; padding: 54px 44px 44px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%); background: #0a0a0f; overflow: hidden; }
.v3-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(10, 10, 15, .97) 35%, rgba(224, 89, 42, .3)),
  radial-gradient(closest-side at 72% 50%, transparent 55%, #0a0a0f 100%), var(--hx-map, none) 72% 50% / 820px auto no-repeat, #0a0a0f; }
.v3-bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 12px); }
.v3-main { display: grid; gap: 16px; }
.v3-kick { display: flex; gap: 12px; align-items: center; margin: 0; font-weight: 800; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: #6ff3ff; }
.v3-shout { margin: 0; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .92; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-style: italic; }
.v3-shout em { color: var(--accent); text-shadow: 0 0 40px rgba(224, 89, 42, .6); }
.v3 .hx-name img { width: 240px; opacity: .9; }
.v3 .hx-play { clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); border-radius: 0; text-transform: uppercase; letter-spacing: .08em; }
.v3 .hx-ghost { clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); border-radius: 0; border-color: #6ff3ff; color: #6ff3ff; text-transform: uppercase; }
.v3-live { display: grid; gap: 10px; }
.v3-live .hx-live-item { border-radius: 0; background: rgba(10, 10, 15, .8); border: 1px solid rgba(111, 243, 255, .35); box-shadow: 0 0 24px rgba(111, 243, 255, .12), inset 3px 0 0 #6ff3ff;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.v3-live .label { color: #6ff3ff; }
.v3 .hx-numbers .hx-num { border-radius: 0; background: #0f0f16; border-color: rgba(224, 89, 42, .4); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.v3 .hx-num-v { color: var(--accent); text-shadow: 0 0 24px rgba(224, 89, 42, .5); font-style: italic; }
.v3 .sec-title h2 { text-transform: uppercase; font-style: italic; letter-spacing: .02em; font-size: 1.6rem; }
.v3 .sec-head { border-bottom: 2px solid var(--accent); }
.v3 .hx-ticker { margin: 0; border: 0; background: var(--accent); mask-image: none; }
.v3 .hx-ticker .hx-tk, .v3 .hx-ticker .hx-tk b, .v3 .hx-ticker .hx-tk-w { color: #120c0a; }

/* ===== 4 · Editorial ===== */
.v4 { --serif: Georgia, "Times New Roman", serif; }
.v4-cover { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 0; border-top: 6px solid var(--fg); border-bottom: 1px solid var(--line); margin-top: 10px; }
.v4-left { padding: 34px 40px 34px 0; display: grid; gap: 16px; border-right: 1px solid var(--line); }
.v4-right { padding: 34px 0 34px 40px; display: grid; align-content: center; background: radial-gradient(300px 260px at 50% 40%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%); }
.v4-issue { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--serif); font-style: italic; color: var(--muted); }
.v4-head { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: -.02em; }
.v4 .hx-tagline { font-family: var(--serif); font-size: 1.15rem; color: var(--muted); }
.v4 .hx-name img { width: 200px; }
.v4 .hx-star-name, .v4 .sec-title h2 { font-family: var(--serif); }
.v4 .sec-title h2 { font-size: 1.7rem; font-weight: 700; }
.v4-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.v4-strip .hx-live-item { border: 0; border-radius: 0; background: none; padding: 20px 20px 20px 0; }
.v4-strip .hx-live-item + .hx-live-item { border-left: 1px solid var(--line); padding-left: 20px; }
.v4 .hx-numbers .hx-num { background: none; border: 0; border-left: 3px solid var(--fg); border-radius: 0; }
.v4 .hx-num-v { font-family: var(--serif); }
.v4 .hx-play { border-radius: 2px; background: var(--fg); color: #111; box-shadow: none; }

/* ===== 5 · HUD militare ===== */
.v5 { --hud: #9be37a; --hud-dim: rgba(155, 227, 122, .35); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.v5-hud { position: relative; padding: 18px; border: 1px solid var(--hud-dim); background: linear-gradient(180deg, #10140e, #0b0d0a); box-shadow: inset 0 0 80px rgba(155, 227, 122, .05); }
.v5-hud::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
.v5-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dashed var(--hud-dim); }
.v5-code { color: var(--hud); font-size: .78rem; letter-spacing: .12em; }
.v5-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; }
.v5-panel { position: relative; padding: 14px; border: 1px solid var(--hud-dim); background: rgba(155, 227, 122, .03); }
.v5-panel::before, .v5-panel::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--hud); }
.v5-panel::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.v5-panel::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.v5-label { margin: 0 0 8px; color: var(--hud); font-size: .74rem; letter-spacing: .14em; }
.v5 .hx-name img { width: 230px; filter: sepia(.3) hue-rotate(40deg) saturate(1.2); }
.v5 .hx-tagline { font-size: .9rem; color: #c9d6c0; }
.v5 .hx-live-item { background: none; border: 0; padding: 0; }
.v5 .label { color: var(--hud) !important; }
.v5 .hx-big, .v5 .value, .v5 .hx-num-v { color: #e8ffd9; font-family: inherit; }
.v5 .hx-cd { border-color: var(--hud-dim); background: rgba(0, 0, 0, .3); }
.v5 .hx-play { border-radius: 0; background: var(--hud); color: #0b0d0a; box-shadow: 0 0 20px rgba(155, 227, 122, .35); font-family: inherit; text-transform: uppercase; }
.v5 .hx-play:hover { color: #0b0d0a; }
.v5 .hx-ghost { border-radius: 0; border-color: var(--hud-dim); color: var(--hud); font-family: inherit; }
.v5 .hx-ticker { margin: 14px -18px -18px; border-top: 1px dashed var(--hud-dim); background: rgba(0, 0, 0, .3); }
.v5 .hx-tk b { color: var(--hud); }
.v5 .hx-numbers .hx-num { border-radius: 0; background: #0d100b; border-color: var(--hud-dim); }
.v5 .sec-title h2::before { content: "// "; color: var(--hud); }
.v5 .sec-title h2 { font-family: inherit; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; }
.v5 .card { border-radius: 0; }

/* ===== 6 · Giovane ===== */
.v6-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 30px; align-items: center;
  padding: 50px 44px; border-radius: 36px; background: linear-gradient(135deg, #2a1640, #1a1030 50%, #12202e); }
.v6-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); opacity: .7; }
.v6-blob.b1 { width: 380px; height: 380px; background: #ff7a3d; top: -120px; left: -80px; }
.v6-blob.b2 { width: 320px; height: 320px; background: #3dd6c6; bottom: -140px; right: 10%; }
.v6-main { display: grid; gap: 16px; }
.v6-sticker { justify-self: start; margin: 0; padding: 8px 16px; border-radius: 999px; background: #ffd23f; color: #2a1640; font-weight: 900; transform: rotate(-3deg); box-shadow: 0 6px 0 #c99a00; }
.v6 .hx-tagline { font-size: 1.2rem; font-weight: 600; }
.v6 .hx-play { border-radius: 999px; background: linear-gradient(135deg, #ff9a3d, #ff4f8a); box-shadow: 0 8px 0 #a3315a; }
.v6 .hx-play:hover { transform: translateY(2px); box-shadow: 0 6px 0 #a3315a; }
.v6 .hx-ghost { border-radius: 999px; border-width: 2px; border-color: #3dd6c6; color: #3dd6c6; }
.v6-status { margin: 0; }
.v6-cards { display: grid; gap: 14px; }
.v6-cards .hx-live-item { border-radius: 24px; border: 0; padding: 18px 20px; transition: transform .2s; }
.v6-cards .hx-live-item:nth-child(1) { background: #ff7a3d; transform: rotate(-1.5deg); }
.v6-cards .hx-live-item:nth-child(2) { background: #3dd6c6; transform: rotate(1deg); }
.v6-cards .hx-live-item:nth-child(3) { background: #8e6bff; transform: rotate(-.8deg); }
.v6-cards .hx-live-item:hover { transform: rotate(0) scale(1.02); }
.v6-cards .hx-live-item, .v6-cards .hx-live-item .label, .v6-cards .hx-live-item .sub, .v6-cards .value { color: #14101f !important; }
.v6-cards .meter { background: rgba(0, 0, 0, .2); }
.v6-cards .hx-cd { background: rgba(255, 255, 255, .4); border: 0; }
.v6-cards .hx-cd i { color: #14101f; }
.v6 .card { border-radius: 24px; }
.v6 .hx-numbers .hx-num { border-radius: 24px; border: 0; }
.v6 .hx-num:nth-child(1) { background: linear-gradient(135deg, #ff7a3d33, transparent); }
.v6 .hx-num:nth-child(2) { background: linear-gradient(135deg, #ff4f8a33, transparent); }
.v6 .hx-num:nth-child(3) { background: linear-gradient(135deg, #3dd6c633, transparent); }
.v6 .hx-num:nth-child(4) { background: linear-gradient(135deg, #8e6bff33, transparent); }
.v6 .hx-join { border-radius: 36px; }

/* ===== 7 · Cinematografica ===== */
.v7-hero { position: relative; min-height: 680px; display: grid; align-items: end; padding: 90px 0 54px;
  background: linear-gradient(90deg, rgba(13, 13, 12, .92) 20%, rgba(13, 13, 12, .35) 75%), linear-gradient(180deg, rgba(13, 13, 12, .3), rgba(13, 13, 12, .4) 50%, #0d0d0c), var(--hx-map, none) center 35% / cover no-repeat, #0d0d0c; }
.v7-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; display: grid; gap: 16px; }
.v7-kick { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.v7 .hx-name img { width: clamp(300px, 46vw, 600px); filter: drop-shadow(0 10px 40px #000); }
.v7 .hx-tagline { font-size: 1.3rem; max-width: 700px; text-shadow: 0 2px 20px #000; }
.v7-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.v7-live .hx-live-item { background: rgba(13, 13, 12, .55); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .12); }
.v7 .hx-ticker { margin: 0; }
.v7-band { position: relative; margin-top: 56px; padding: 40px 0 56px;
  background: linear-gradient(90deg, rgba(13, 13, 12, .95) 25%, rgba(13, 13, 12, .7)), var(--hx-banner, none) right center / cover no-repeat, #0d0d0c;
  border-block: 1px solid rgba(255, 255, 255, .06); }
.v7-band .sec { margin-top: 0; }
.v7-band .card { background: rgba(22, 22, 20, .72); backdrop-filter: blur(8px); }

/* ===== 8 · Bento ===== */
.v8-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); gap: 14px; margin-top: 8px; }
.v8-tile { position: relative; overflow: hidden; border-radius: 26px; border: 1px solid var(--line); background: var(--surface); padding: 22px; }
.v8-hero { grid-column: span 8; grid-row: span 3; display: grid; align-content: end; gap: 14px; padding: 34px;
  background: linear-gradient(180deg, rgba(22, 22, 20, .3), rgba(22, 22, 20, .96) 70%), var(--hx-map, none) center 30% / cover no-repeat, var(--surface); }
.v8-hero > .pill { justify-self: start; }
.v8-a, .v8-b, .v8-c { grid-column: span 4; }
.v8-a .hx-live-item, .v8-b .hx-live-item, .v8-c .hx-live-item { background: none; border: 0; padding: 0; }
.v8-star { grid-column: span 4; grid-row: span 2; display: grid; align-content: center; background: radial-gradient(260px 200px at 50% 30%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--surface); }
.v8-team { grid-column: span 8; grid-row: span 2; padding: 0; }
.v8-team .hx-team-card { border: 0; border-radius: 0; height: 100%; }
.v8-nums { grid-column: span 12; padding: 0; background: none; border: 0; }
.v8-nums .hx-numbers { margin: 0; }
.v8-nums .hx-num { border-radius: 26px; }
.v8-tick { grid-column: span 12; padding: 0; }
.v8 .hx-ticker { margin: 0; border: 0; }
.v8 .card { border-radius: 22px; }
.v8 .hx-play, .v8 .hx-ghost { border-radius: 999px; }

/* ===== 9 · Premium ===== */
.v9 { --gold-l: #e9c46a; --serif: "Didot", "Bodoni MT", Georgia, serif; }
.v9-hero { display: grid; justify-items: center; text-align: center; gap: 20px; padding: 90px 20px 70px; background: radial-gradient(700px 360px at 50% 0, rgba(233, 196, 106, .12), transparent 70%); }
.v9-kick { margin: 0; color: var(--gold-l); font-size: .74rem; letter-spacing: .4em; text-transform: uppercase; }
.v9 .hx-name img { width: clamp(300px, 44vw, 560px); }
.v9-line { width: 120px; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, var(--gold-l), transparent); }
.v9 .hx-tagline { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); font-style: italic; color: #e8e2cf; max-width: 760px; }
.v9 .hx-cta { justify-content: center; }
.v9 .hx-play { background: linear-gradient(135deg, #f3d98b, #b98b2c); color: #17130a; border-radius: 2px; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; box-shadow: 0 10px 40px rgba(233, 196, 106, .25); }
.v9 .hx-play:hover { color: #17130a; }
.v9 .hx-ghost { border-radius: 2px; border-color: rgba(233, 196, 106, .45); color: var(--gold-l); letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; }
.v9-live { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 0; margin-top: 30px; border-block: 1px solid rgba(233, 196, 106, .25); }
.v9-live .hx-live-item { background: none; border: 0; border-radius: 0; padding: 22px; text-align: center; justify-items: center; }
.v9-live .hx-live-item + .hx-live-item { border-left: 1px solid rgba(233, 196, 106, .2); }
.v9-live .label { color: var(--gold-l) !important; letter-spacing: .24em; }
.v9-live .tlight, .v9-live .meter { display: none; }
.v9-status { margin: 0; }
.v9-feature { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 30px; align-items: center; padding: 40px; border: 1px solid rgba(233, 196, 106, .2);
  background: linear-gradient(135deg, rgba(233, 196, 106, .06), transparent 60%); }
.v9-feature .hx-numbers { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v9 .hx-num { background: none; border: 0; border-left: 1px solid rgba(233, 196, 106, .35); border-radius: 0; }
.v9 .hx-num-v { font-family: var(--serif); color: var(--gold-l); font-weight: 400; }
.v9 .sec-title h2 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; letter-spacing: .02em; }
.v9 .sec-head { border-bottom-color: rgba(233, 196, 106, .25); }
.v9 .card { border-color: rgba(233, 196, 106, .14); }
.v9 .hx-join { border-color: rgba(233, 196, 106, .3); background: radial-gradient(600px 200px at 100% 0, rgba(233, 196, 106, .12), transparent 70%), var(--surface); }
.v9 .hx-discord { background: linear-gradient(135deg, #f3d98b, #b98b2c); color: #17130a; }

/* ===== phones and tablets: every variant stacks ===== */
@media (max-width: 960px) {
  .v3-hero, .v4-cover, .v6-hero, .v9-feature { grid-template-columns: 1fr; }
  .v4-left { border-right: 0; padding-right: 0; }
  .v4-right { padding-left: 0; }
  .v2-live, .v4-strip, .v7-live, .v9-live { grid-template-columns: 1fr; }
  .v2-live .hx-live-item + .hx-live-item, .v4-strip .hx-live-item + .hx-live-item, .v9-live .hx-live-item + .hx-live-item { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .v5-grid { grid-template-columns: 1fr; }
  .v8-bento { grid-template-columns: 1fr; }
  .v8-tile { grid-column: auto !important; grid-row: auto !important; }
  .v3-hero, .v6-hero { padding: 30px 20px; }
  .v7-hero { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .v6-cards .hx-live-item { transform: none !important; transition: none; } }
/* corner arrows off where they collide with centred labels or the traffic light */
.v5 .stat-link::after, .v9-live .stat-link::after { display: none; }
.v9-live { grid-template-columns: repeat(3, minmax(0, 280px)); }

/* shared by 10-20: the three live tiles in a row */
.hx-live3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* ===== 10 · Synthwave ===== */
.v10-hero { position: relative; isolation: isolate; overflow: hidden; padding: 70px 0 40px; min-height: 720px; display: grid; align-items: end;
  background: linear-gradient(180deg, #0b0221 0%, #2b0a4f 40%, #7a1f6b 62%, #ff6b3d 74%, #12001f 74.2%); }
.v10-sky { position: absolute; inset: 0; z-index: -1; }
.v10-sun { position: absolute; left: 50%; top: 22%; width: 380px; height: 380px; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(180deg, #ffe66d, #ff6b9d 55%, #b23bff); box-shadow: 0 0 120px rgba(255, 107, 157, .6);
  mask-image: repeating-linear-gradient(180deg, #000 0 22px, transparent 22px 28px, #000 28px 40px); }
.v10-grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 40%; transform-origin: top; transform: perspective(300px) rotateX(60deg);
  background: linear-gradient(transparent 0 97%, #ff3df5 97%) 0 0 / 100% 40px, linear-gradient(90deg, transparent 0 97%, #ff3df5 97%) 0 0 / 60px 100%;
  filter: drop-shadow(0 0 6px #ff3df5); animation: v10-move 2.5s linear infinite; opacity: .75; }
@keyframes v10-move { to { background-position: 0 40px, 0 0; } }
.v10-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; display: grid; gap: 16px; justify-items: center; text-align: center; }
.v10-kick { display: flex; gap: 12px; align-items: center; margin: 0; color: #7df9ff; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .76rem; text-shadow: 0 0 10px #7df9ff; }
.v10 .hx-name img { width: clamp(300px, 46vw, 600px); filter: drop-shadow(0 0 18px #ff3df5) drop-shadow(0 0 40px #7a1f6b); }
.v10 .hx-tagline { color: #ffe9ff; text-shadow: 0 2px 12px #000; max-width: 720px; }
.v10 .hx-cta { justify-content: center; }
.v10 .hx-play { background: linear-gradient(90deg, #ff3df5, #7df9ff); color: #12001f; box-shadow: 0 0 30px #ff3df5; }
.v10 .hx-ghost { border-color: #7df9ff; color: #7df9ff; }
.v10-live { width: 100%; margin-top: 10px; }
.v10-live .hx-live-item { background: rgba(18, 0, 31, .72); border-color: #ff3df5; box-shadow: 0 0 20px rgba(255, 61, 245, .35); text-align: left; }
.v10-live .label { color: #7df9ff; }
.v10 .hx-num { background: linear-gradient(160deg, rgba(255, 61, 245, .18), #12001f); border-color: rgba(255, 61, 245, .45); }
.v10 .hx-num-v { color: #ffe66d; text-shadow: 0 0 16px rgba(255, 107, 157, .8); }
.v10 .sec-title h2 { color: #ff9df5; text-shadow: 0 0 12px rgba(255, 61, 245, .6); }

/* ===== 11 · Brutalista ===== */
.v11 { --y: #ffe600; }
.v11-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 20px; margin-top: 10px; }
.v11-box { border: 4px solid #fff; background: #000; padding: 26px; box-shadow: 10px 10px 0 var(--y); }
.v11-main { display: grid; gap: 14px; }
.v11-tag { margin: 0; justify-self: start; background: var(--y); color: #000; padding: 4px 10px; font-weight: 900; letter-spacing: .1em; }
.v11-big { margin: 0; font-size: clamp(3rem, 8vw, 6.4rem); line-height: .86; font-weight: 900; letter-spacing: -.04em; color: #fff; }
.v11 .hx-name img { width: 220px; }
.v11 .hx-tagline { font-size: 1.1rem; font-weight: 700; }
.v11 .hx-play { border-radius: 0; background: var(--y); color: #000; box-shadow: 6px 6px 0 #fff; border: 3px solid #000; }
.v11 .hx-play:hover { color: #000; transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #fff; }
.v11 .hx-ghost { border-radius: 0; border: 3px solid #fff; background: #000; }
.v11-side { display: grid; gap: 16px; }
.v11-side .hx-live-item, .v11 .card, .v11 .hx-num, .v11 .hx-join { border-radius: 0; border: 3px solid #fff; background: #000; box-shadow: 8px 8px 0 var(--y); }
.v11-side .label, .v11 .label { color: var(--y) !important; }
.v11 .hx-num-v { color: var(--y); }
.v11 .hx-ticker { margin: 26px 0 0; background: var(--y); border: 3px solid #000; mask-image: none; }
.v11 .hx-ticker .hx-tk, .v11 .hx-ticker b, .v11 .hx-ticker .hx-tk-w { color: #000; }
.v11 .sec-title h2 { text-transform: uppercase; font-weight: 900; font-size: 1.8rem; letter-spacing: -.02em; }
.v11 .sec-head { border-bottom: 4px solid #fff; }

/* ===== 12 · Aurora ===== */
.v12-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; padding: 60px 44px 44px; border-radius: 30px; background: #050b16; }
.v12-aurora { position: absolute; inset: -20%; z-index: -1; filter: blur(60px); }
.v12-aurora span { position: absolute; width: 60%; height: 60%; border-radius: 50%; opacity: .55; animation: v12-float 16s ease-in-out infinite alternate; }
.v12-aurora span:nth-child(1) { background: #2cf0b0; left: 0; top: 0; }
.v12-aurora span:nth-child(2) { background: #3d6cff; right: 0; top: 10%; animation-delay: -5s; }
.v12-aurora span:nth-child(3) { background: #b03dff; left: 25%; bottom: 0; animation-delay: -10s; }
@keyframes v12-float { 50% { transform: translate(8%, -6%) scale(1.15); } 100% { transform: translate(-6%, 8%) scale(.95); } }
.v12-glass { border-radius: 24px; padding: 30px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(18px) saturate(160%); }
.v12-main { display: grid; gap: 14px; }
.v12-kick { display: flex; gap: 12px; align-items: center; margin: 0; color: #bff7e6; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; font-weight: 800; }
.v12 .hx-play { background: linear-gradient(135deg, #2cf0b0, #3d6cff); color: #04101e; box-shadow: 0 10px 30px rgba(44, 240, 176, .35); border-radius: 999px; }
.v12 .hx-ghost { border-radius: 999px; border-color: rgba(255, 255, 255, .3); }
.v12-live .hx-live-item, .v12 .card, .v12 .hx-num { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(12px); border-radius: 20px; }
.v12 .label { color: #8ff5d6 !important; }
.v12 .hx-num-v { background: linear-gradient(90deg, #2cf0b0, #8ea8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== 13 · Progetto tecnico ===== */
.v13 { --bp: #8fd3ff; }
.v13-sheet { margin-top: 10px; padding: 0 0 22px; border: 2px solid var(--bp); color: #e8f6ff;
  background: linear-gradient(rgba(143, 211, 255, .12) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(143, 211, 255, .12) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(rgba(143, 211, 255, .25) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(143, 211, 255, .25) 1px, transparent 1px) 0 0 / 120px 120px, #0b3b6e; }
.v13-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 18px; border-bottom: 2px solid var(--bp); font: 700 .78rem ui-monospace, monospace; letter-spacing: .12em; color: var(--bp); }
.v13-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 20px; padding: 24px 22px; }
.v13-main { display: grid; gap: 10px; }
.v13-note { margin: 0; font: italic .8rem ui-monospace, monospace; color: var(--bp); }
.v13 .hx-name img { filter: brightness(0) invert(1); width: 320px; }
.v13 .hx-tagline { color: #e8f6ff; }
.v13-plan { position: relative; min-height: 300px; border: 2px dashed var(--bp); background: var(--hx-map, none) center / contain no-repeat; filter: grayscale(1) sepia(1) hue-rotate(170deg) saturate(3) brightness(1.1); opacity: .8; }
.v13-dim { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font: 700 .76rem ui-monospace, monospace; color: var(--bp); border-top: 1px solid var(--bp); padding-top: 4px; filter: none; }
.v13-live { padding: 22px 22px 0; }
.v13-live .hx-live-item, .v13 .card, .v13 .hx-num { border-radius: 0; background: rgba(11, 59, 110, .7); border: 1px solid var(--bp); }
.v13 .label { color: var(--bp) !important; font-family: ui-monospace, monospace; }
.v13 .hx-play { border-radius: 0; background: #e8f6ff; color: #0b3b6e; box-shadow: none; }
.v13 .hx-ghost { border-radius: 0; border-color: var(--bp); }

/* ===== 14 · Fumetto ===== */
.v14 { --ink: #111; }
.v14-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; margin-top: 10px; }
.v14-panel { position: relative; padding: 30px; border: 5px solid var(--ink); border-radius: 6px; box-shadow: 8px 8px 0 var(--ink);
  background: radial-gradient(circle, rgba(0, 0, 0, .18) 1.5px, transparent 1.8px) 0 0 / 10px 10px, #ffd23f; color: var(--ink); }
.v14-main { display: grid; gap: 14px; }
.v14-boom { position: absolute; top: -26px; right: -14px; padding: 26px 30px; font: 900 1.6rem/1 Impact, "Arial Black", sans-serif; color: #fff; background: #e8202a; transform: rotate(10deg);
  clip-path: polygon(50% 0, 61% 30%, 98% 18%, 72% 45%, 100% 62%, 66% 64%, 74% 100%, 50% 74%, 25% 100%, 32% 64%, 0 62%, 28% 45%, 2% 18%, 39% 30%); -webkit-text-stroke: 1px var(--ink); }
.v14 .hx-name img { width: 320px; filter: drop-shadow(3px 3px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)); }
.v14-bubble { position: relative; padding: 16px 20px; border: 4px solid var(--ink); border-radius: 26px; background: #fff; }
.v14-bubble::after { content: ""; position: absolute; left: 40px; bottom: -22px; border: 12px solid transparent; border-top: 16px solid var(--ink); }
.v14 .hx-tagline { color: var(--ink); font-weight: 800; }
.v14 .hx-map, .v14 .hx-map a { color: var(--ink); }
.v14 .hx-play { background: #e8202a; border: 4px solid var(--ink); border-radius: 8px; box-shadow: 5px 5px 0 var(--ink); text-transform: uppercase; font-family: Impact, "Arial Black", sans-serif; letter-spacing: .05em; }
.v14 .hx-ghost { background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 8px; box-shadow: 5px 5px 0 var(--ink); }
.v14-strip { display: grid; gap: 14px; }
.v14-strip .hx-live-item { border: 5px solid var(--ink); border-radius: 6px; box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.v14-strip .hx-live-item:nth-child(1) { background: #3dc6f2; } .v14-strip .hx-live-item:nth-child(2) { background: #fff; } .v14-strip .hx-live-item:nth-child(3) { background: #ff8fb1; }
.v14-strip .hx-live-item *, .v14-strip .label { color: var(--ink) !important; }
.v14 .hx-num { border: 4px solid #fff; border-radius: 6px; background: radial-gradient(circle, rgba(255, 255, 255, .08) 1.5px, transparent 1.8px) 0 0 / 10px 10px, #1d1d2b; }
.v14 .hx-num-v { color: #ffd23f; -webkit-text-stroke: 1px #000; font-family: Impact, "Arial Black", sans-serif; }
.v14 .hx-ticker { margin: 22px 0 0; background: #e8202a; border: 4px solid var(--ink); mask-image: none; }
.v14 .hx-ticker .hx-tk, .v14 .hx-ticker b, .v14 .hx-ticker .hx-tk-w { color: #fff; }
.v14 .sec-title h2 { font-family: Impact, "Arial Black", sans-serif; letter-spacing: .03em; font-size: 1.9rem; color: #ffd23f; }

/* ===== 15 · Ruggine e lamiera ===== */
.v15-hero { display: grid; gap: 16px; margin-top: 10px; }
.v15-hazard { height: 22px; background: repeating-linear-gradient(-45deg, #f2b705 0 22px, #111 22px 44px); border: 2px solid #111; }
.v15-plate { position: relative; padding: 34px; border-radius: 4px; display: grid; gap: 14px;
  background: radial-gradient(ellipse at 20% 30%, rgba(160, 70, 20, .55), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(120, 50, 15, .5), transparent 50%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 6px), linear-gradient(160deg, #5b4a3e, #3a2d24 60%, #2a211b); box-shadow: inset 0 0 60px rgba(0, 0, 0, .6); }
.v15-plate::before { content: ""; position: absolute; inset: 10px; pointer-events: none;
  background: radial-gradient(circle, #b9b2a6 3px, #4a4038 4px, transparent 5px) 0 0 / 100% 100% no-repeat, radial-gradient(circle at 0 0, #b9b2a6 3px, transparent 4px),
  radial-gradient(circle at 100% 0, #b9b2a6 3px, transparent 4px), radial-gradient(circle at 0 100%, #b9b2a6 3px, transparent 4px), radial-gradient(circle at 100% 100%, #b9b2a6 3px, transparent 4px); }
.v15-stencil { margin: 0; font: 900 1rem/1 Impact, "Arial Black", sans-serif; letter-spacing: .3em; color: #f2b705; text-transform: uppercase; }
.v15 .hx-name img { width: 360px; filter: sepia(.4) contrast(1.1) drop-shadow(2px 2px 0 #000); }
.v15 .hx-tagline { font-weight: 700; color: #f0e2cc; text-shadow: 1px 1px 0 #000; }
.v15 .hx-play { border-radius: 2px; background: #f2b705; color: #111; text-transform: uppercase; font-family: Impact, "Arial Black", sans-serif; letter-spacing: .1em; box-shadow: 4px 4px 0 #000; }
.v15 .hx-ghost { border-radius: 2px; border: 2px solid #f2b705; color: #f2b705; background: rgba(0, 0, 0, .4); }
.v15-live .hx-live-item, .v15 .card, .v15 .hx-num { border-radius: 2px; border: 2px solid #6b5848; background: linear-gradient(160deg, #3a2f27, #221b16); }
.v15 .label { color: #f2b705 !important; letter-spacing: .2em; }
.v15 .hx-num-v { color: #f2b705; font-family: Impact, "Arial Black", sans-serif; }
.v15 .sec-title h2 { font-family: Impact, "Arial Black", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #f0e2cc; }

/* ===== 16 · Quotidiano (chiaro) ===== */
.v16-paper { --bg: #f3ecdc; --bg-2: #ebe2cc; --surface: #f8f3e6; --surface-2: #ece3cd; --line: #cbbf9f; --fg: #1d1a14; --muted: #4e463a; --faint: #6f6553;
  --accent-text: #9a2d0c; --accent-soft: rgba(154, 45, 12, .1); background: var(--bg); color: var(--fg); padding: 30px 0 50px; margin-top: -28px; }
.v16-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.v16-mast { text-align: center; border-bottom: 3px double var(--fg); padding-bottom: 14px; }
.v16-date { margin: 0; display: flex; justify-content: center; align-items: center; gap: 10px; font: italic .9rem Georgia, serif; color: var(--muted); }
.v16-title { margin: 6px 0; font: 900 clamp(2.2rem, 6vw, 4.6rem)/1 "Old English Text MT", "UnifrakturMaguntia", Georgia, serif; letter-spacing: -.01em; }
.v16-motto { margin: 0; font: italic 1rem Georgia, serif; color: var(--muted); }
.v16-front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 0; border-bottom: 1px solid var(--fg); }
.v16-lead { padding: 22px 26px 22px 0; border-right: 1px solid var(--fg); display: grid; gap: 14px; }
.v16-head { margin: 0; font: 900 clamp(1.8rem, 3.6vw, 2.8rem)/1.05 Georgia, serif; }
.v16 .hx-tagline { color: var(--fg); font-family: Georgia, serif; columns: 2; column-gap: 26px; }
.v16-col { padding: 22px 0 22px 26px; }
.v16 .hx-star-img { filter: grayscale(1) contrast(1.2); border-color: var(--fg); box-shadow: none; }
.v16-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--fg); }
.v16-boxes .hx-live-item { border: 0; border-radius: 0; background: none; padding: 16px 16px 16px 0; }
.v16-boxes .hx-live-item + .hx-live-item { border-left: 1px solid var(--fg); padding-left: 16px; }
.v16 .card, .v16 .hx-num, .v16 .hx-join { background: var(--surface); border-color: var(--line); box-shadow: none; border-radius: 0; }
.v16 .hx-play { background: var(--fg); color: var(--bg); border-radius: 0; box-shadow: none; font-family: Georgia, serif; }
.v16 .hx-play:hover { color: var(--bg); }
.v16 .hx-ghost { border-radius: 0; border-color: var(--fg); color: var(--fg); }
.v16 .sec-title h2 { font: 900 1.7rem Georgia, serif; }
.v16 .hx-num-v { font-family: Georgia, serif; }
.v16 .server-tags .chip, .v16 .pill { background: var(--surface-2); color: var(--fg); }

/* ===== 17 · Terminale CRT ===== */
.v17 { --g: #33ff66; }
.v17-crt { position: relative; margin-top: 10px; padding: 30px 34px; border-radius: 22px; background: radial-gradient(ellipse at center, #062a10, #010a03 80%); color: var(--g);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; box-shadow: inset 0 0 120px rgba(0, 0, 0, .9), 0 0 40px rgba(51, 255, 102, .12); text-shadow: 0 0 6px rgba(51, 255, 102, .7); }
.v17-crt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); }
.v17-line { margin: 6px 0; }
.v17-line b { color: #b6ffc8; }
.v17-out { display: grid; gap: 8px; }
.v17 .hx-name img { width: 300px; filter: grayscale(1) brightness(2) sepia(1) hue-rotate(80deg) saturate(5) drop-shadow(0 0 8px var(--g)); }
.v17 .hx-tagline { color: var(--g); font-size: 1rem; }
.v17-desc { display: flex; gap: 8px; }
.v17-cursor { display: inline-block; width: 10px; height: 1.1em; margin-left: 4px; vertical-align: text-bottom; background: var(--g); animation: v17-blink 1s steps(1) infinite; }
@keyframes v17-blink { 50% { opacity: 0; } }
.v17-live .hx-live-item, .v17 .card, .v17 .hx-num { border-radius: 0; background: rgba(0, 20, 6, .85); border: 1px solid rgba(51, 255, 102, .5); font-family: ui-monospace, monospace; }
.v17 .label, .v17 .hx-num-v, .v17 .value { color: var(--g) !important; }
.v17 .hx-play { border-radius: 0; background: var(--g); color: #001a07; box-shadow: 0 0 20px rgba(51, 255, 102, .5); font-family: inherit; text-shadow: none; }
.v17 .hx-ghost { border-radius: 0; border-color: var(--g); color: var(--g); font-family: inherit; }
.v17 .sec-title h2 { font-family: ui-monospace, monospace; color: var(--g); }
.v17 .sec-title h2::before { content: "$ "; }

/* ===== 18 · Isola selvaggia ===== */
.v18-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 20px; padding: 56px 46px 40px; border-radius: 42px 42px 42px 8px;
  background: radial-gradient(800px 400px at 100% 100%, #c9a46a55, transparent 60%), linear-gradient(160deg, #0f2e1d, #163f28 55%, #0b2216); }
.v18-leaf { position: absolute; z-index: -1; width: 260px; height: 130px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #2f7a46, #1b5232); opacity: .55; }
.v18-leaf.l1 { top: -30px; right: 8%; transform: rotate(25deg); }
.v18-leaf.l2 { bottom: 10%; right: -60px; transform: rotate(-40deg); width: 320px; height: 160px; }
.v18-leaf.l3 { top: 40%; left: -90px; transform: rotate(60deg); opacity: .35; }
.v18-main { display: grid; gap: 14px; max-width: 760px; }
.v18-kick { display: flex; gap: 12px; align-items: center; margin: 0; color: #e3c48a; font-style: italic; }
.v18 .hx-tagline { color: #eef5e7; }
.v18 .hx-play { border-radius: 999px; background: linear-gradient(135deg, #e3c48a, #b98a45); color: #13301f; box-shadow: 0 10px 30px rgba(227, 196, 138, .3); }
.v18 .hx-ghost { border-radius: 999px; border-color: #e3c48a; color: #e3c48a; }
.v18-live .hx-live-item, .v18 .card, .v18 .hx-num { border-radius: 26px 26px 26px 6px; background: rgba(11, 34, 22, .75); border-color: #2f6b45; }
.v18 .label { color: #e3c48a !important; }
.v18 .hx-num-v { color: #a8e0b4; }
.v18 .sec-title h2 { color: #e3c48a; }

/* ===== 19 · Artico (chiaro) ===== */
.v19-ice { --bg: #eaf4fb; --bg-2: #dceaf5; --surface: #ffffff; --surface-2: #e6f1f9; --line: #bcd5e8; --fg: #0d2436; --muted: #3a5870; --faint: #5d7a91;
  --accent-text: #0a6db0; --accent-soft: rgba(10, 109, 176, .1); position: relative; isolation: isolate; color: var(--fg); padding: 30px 0 50px; margin-top: -28px;
  background: linear-gradient(180deg, #d6ebf8, #eaf4fb 40%, #f7fbfe); }
.v19-snow { position: absolute; inset: 0; z-index: -1; opacity: .7;
  background: radial-gradient(circle, #fff 1.5px, transparent 2px) 0 0 / 60px 60px, radial-gradient(circle, #fff 1px, transparent 1.5px) 30px 20px / 40px 40px; animation: v19-fall 18s linear infinite; }
@keyframes v19-fall { to { background-position: 0 600px, 30px 420px; } }
.v19-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.v19-hero { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 50px 0 20px; }
.v19-kick { display: flex; gap: 12px; align-items: center; margin: 0; color: var(--accent-text); letter-spacing: .2em; text-transform: uppercase; font-weight: 800; font-size: .76rem; }
.v19 .hx-name img { width: clamp(300px, 44vw, 560px); filter: drop-shadow(0 8px 20px rgba(13, 36, 54, .35)) brightness(.8) contrast(1.3); }
.v19 .hx-tagline { color: var(--fg); max-width: 720px; }
.v19 .hx-cta { justify-content: center; }
.v19 .hx-play { background: linear-gradient(135deg, #4fb6f0, #0a6db0); border-radius: 14px; box-shadow: 0 10px 30px rgba(10, 109, 176, .3); }
.v19 .hx-ghost { color: var(--fg); border-color: var(--line); background: #fff; }
.v19-live { width: 100%; margin-top: 10px; text-align: left; }
.v19-live .hx-live-item, .v19 .card, .v19 .hx-num, .v19 .hx-join { background: rgba(255, 255, 255, .8); border-color: var(--line); box-shadow: 0 10px 30px rgba(13, 36, 54, .08); }
.v19 .label { color: var(--accent-text) !important; }
.v19 .hx-num-v { color: #0a6db0; }
.v19 .server-tags .chip, .v19 .pill { background: #fff; color: var(--fg); }
.v19 .hx-cd { background: #fff; }

/* ===== 20 · Svizzero (chiaro) ===== */
.v20-swiss { --bg: #ffffff; --bg-2: #f2f2f2; --surface: #ffffff; --surface-2: #f2f2f2; --line: #111; --fg: #111; --muted: #333; --faint: #555; --accent-text: #e30613;
  --accent-soft: rgba(227, 6, 19, .08); background: #fff; color: #111; padding: 0 0 50px; margin-top: -28px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.v20-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.v20-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0; border-bottom: 2px solid #111; }
.v20-red { background: #e30613; color: #fff; padding: 40px 30px; display: grid; align-content: space-between; min-height: 460px; }
.v20-num { margin: 0; font-size: 1rem; font-weight: 700; }
.v20-word { margin: 0; font-size: clamp(3.4rem, 8vw, 7.5rem); line-height: .86; font-weight: 800; letter-spacing: -.05em; }
.v20-txt { padding: 40px 0 30px 34px; display: grid; gap: 16px; align-content: end; }
.v20 .hx-name img { width: 260px; filter: brightness(0); }
.v20 .hx-tagline { font-size: 1.3rem; font-weight: 500; color: #111; letter-spacing: -.01em; }
.v20 .hx-play { background: #111; color: #fff; border-radius: 0; box-shadow: none; }
.v20 .hx-play:hover { color: #fff; background: #e30613; }
.v20 .hx-ghost { border-radius: 0; border: 2px solid #111; color: #111; }
.v20-live { margin-top: 0; gap: 0; border-bottom: 2px solid #111; }
.v20-live .hx-live-item { border: 0; border-radius: 0; background: none; padding: 22px 20px 22px 0; }
.v20-live .hx-live-item + .hx-live-item { border-left: 2px solid #111; padding-left: 20px; }
.v20 .label { color: #e30613 !important; letter-spacing: .06em; }
.v20 .value, .v20 .hx-big { color: #111; }
.v20 .hx-num, .v20 .card, .v20 .hx-join { background: #fff; border: 2px solid #111; border-radius: 0; box-shadow: none; }
.v20 .hx-num-v { color: #e30613; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.04em; }
.v20 .sec-title h2 { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.v20 .sec-head { border-bottom: 2px solid #111; }
.v20 .server-tags .chip, .v20 .pill { background: #f2f2f2; color: #111; border-radius: 0; }

@media (max-width: 960px) {
  .hx-live3, .v16-boxes, .v20-live { grid-template-columns: 1fr; }
  .v11-hero, .v13-body, .v14-hero, .v16-front, .v20-hero { grid-template-columns: 1fr; }
  .v16-lead { border-right: 0; padding-right: 0; }
  .v16-col { padding-left: 0; }
  .v16 .hx-tagline { columns: 1; }
  .v16-boxes .hx-live-item + .hx-live-item, .v20-live .hx-live-item + .hx-live-item { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .v12-hero, .v18-hero { padding: 30px 20px; }
  .v20-red { min-height: 260px; }
  .v20-txt { padding-left: 0; }
  .v10-sun { width: 260px; height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .v10-grid, .v12-aurora span, .v17-cursor, .v19-snow { animation: none; } }
/* fixes after review */
.v14-strip .hx-cd { background: #fff; border: 3px solid var(--ink); }
.v19 .hx-name img { filter: invert(1) hue-rotate(180deg) drop-shadow(0 8px 18px rgba(13, 36, 54, .25)); }

/* ===== 30 · Cosmo ===== */
.v30-space { position: relative; isolation: isolate; overflow: hidden; padding: 70px 0 50px; margin-top: -28px;
  background: radial-gradient(600px 400px at 20% 30%, rgba(122, 60, 255, .35), transparent 70%), radial-gradient(700px 500px at 85% 70%, rgba(255, 70, 140, .25), transparent 70%),
  radial-gradient(500px 300px at 60% 10%, rgba(40, 180, 255, .2), transparent 70%), #04030c; }
.v30-stars { position: absolute; inset: 0; z-index: -1; opacity: .9;
  background: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 30%, #fff, transparent),
  radial-gradient(1px 1px at 90% 60%, #cfe, transparent), radial-gradient(1px 1px at 50% 50%, #fff, transparent), radial-gradient(1.5px 1.5px at 15% 70%, #ffd, transparent),
  radial-gradient(1px 1px at 80% 10%, #fff, transparent), radial-gradient(1px 1px at 40% 15%, #ddf, transparent);
  background-size: 300px 300px, 250px 250px, 400px 400px, 350px 350px, 200px 200px, 450px 450px, 280px 280px, 330px 330px; animation: v30-twinkle 6s ease-in-out infinite alternate; }
@keyframes v30-twinkle { to { opacity: .45; } }
.v30-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 30px; align-items: center; }
.v30-inner + .v30-inner { display: block; margin-top: 30px; }
.v30-main { display: grid; gap: 16px; }
.v30-kick { display: flex; gap: 12px; align-items: center; margin: 0; color: #b9a6ff; letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; font-weight: 800; }
.v30-planet { position: relative; justify-self: center; width: min(380px, 80vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, transparent 40%, rgba(4, 3, 12, .85) 72%), var(--hx-map, none) center / 150% no-repeat, #0b3b4a;
  box-shadow: 0 0 60px rgba(122, 60, 255, .55), 0 0 140px rgba(40, 180, 255, .3), inset -30px -30px 80px rgba(0, 0, 0, .8); animation: v30-spin 120s linear infinite; }
.v30-ring { position: absolute; left: -18%; right: -18%; top: 44%; height: 12%; border-radius: 50%; border: 3px solid rgba(255, 200, 140, .5); transform: rotate(-16deg);
  box-shadow: 0 0 20px rgba(255, 200, 140, .4); animation: v30-spin 120s linear infinite reverse; }
@keyframes v30-spin { to { background-position: 100% center; } }
.v30 .hx-play { border-radius: 999px; background: linear-gradient(135deg, #b46bff, #ff4f9a); box-shadow: 0 0 30px rgba(180, 107, 255, .6); }
.v30 .hx-ghost { border-radius: 999px; border-color: rgba(185, 166, 255, .5); }
.v30-live .hx-live-item, .v30 .card, .v30 .hx-num { background: rgba(10, 8, 30, .7); border-color: rgba(185, 166, 255, .25); backdrop-filter: blur(6px); }
.v30 .label { color: #b9a6ff !important; }
.v30 .hx-num-v { color: #fff; text-shadow: 0 0 20px rgba(180, 107, 255, .8); }

/* ===== 31 · Vetrata gotica ===== */
.v31-window { margin-top: 10px; padding: 14px; border-radius: 300px 300px 18px 18px; background: #0c0c0c; box-shadow: 0 0 0 6px #2a2a2a, 0 30px 80px rgba(0, 0, 0, .6); }
.v31-arch { border-radius: 290px 290px 10px 10px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 8px; background: #111; padding: 8px; }
.v31-glass { padding: 120px 36px 36px; display: grid; gap: 14px; justify-items: start;
  background: conic-gradient(from 200deg at 50% 0, #6c1d8e 0 30deg, #1f4fa8 30deg 70deg, #127a52 70deg 110deg, #b8860b 110deg 150deg, #a3192b 150deg 200deg, #1f4fa8 200deg 360deg);
  box-shadow: inset 0 0 0 6px #111, inset 0 0 80px rgba(255, 255, 255, .15); position: relative; }
.v31-glass::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .35), transparent 50%),
  repeating-conic-gradient(from 0deg at 50% 0, transparent 0 14deg, #111 14deg 15deg); mix-blend-mode: normal; opacity: .6; pointer-events: none; }
.v31-glass > * { position: relative; }
.v31 .hx-name img { filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000); }
.v31 .hx-tagline { background: rgba(0, 0, 0, .55); padding: 10px 14px; border-radius: 8px; }
.v31-panes { display: grid; gap: 8px; }
.v31-panes .hx-live-item { border-radius: 0; border: 6px solid #111; box-shadow: inset 0 0 40px rgba(255, 255, 255, .15); }
.v31-panes .hx-live-item:nth-child(1) { background: linear-gradient(135deg, #a3192b, #6c1d8e); }
.v31-panes .hx-live-item:nth-child(2) { background: linear-gradient(135deg, #1f4fa8, #127a52); }
.v31-panes .hx-live-item:nth-child(3) { background: linear-gradient(135deg, #b8860b, #a3192b); }
.v31-panes .label { color: #ffe9b0 !important; }
.v31 .hx-play { background: linear-gradient(135deg, #f0c64a, #b8860b); color: #1a1205; border-radius: 4px; }
.v31 .hx-num { border: 5px solid #111; border-radius: 0; background: linear-gradient(135deg, #1f4fa855, #6c1d8e55); }

/* ===== 32 · Origami (chiaro) ===== */
.v32-paper { --bg: #f4efe6; --surface: #fffaf2; --surface-2: #f0e8da; --bg-2: #efe6d6; --line: #dccfb8; --fg: #2b2620; --muted: #5d5346; --faint: #857a6b; --accent-text: #c4572a; --accent-soft: rgba(196, 87, 42, .1);
  background: linear-gradient(135deg, #f7f2ea, #efe6d6); color: var(--fg); padding: 40px 0 50px; margin-top: -28px; }
.v32-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.v32-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 26px; align-items: center; }
.v32-sheet { position: relative; padding: 40px; display: grid; gap: 14px; background: linear-gradient(135deg, #fffdf8 0 50%, #f3eadb 50%);
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%); box-shadow: 0 30px 60px rgba(80, 60, 30, .18); }
.v32-sheet::after { content: ""; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: linear-gradient(225deg, transparent 50%, #e2d4bb 50%); box-shadow: -4px 4px 10px rgba(0, 0, 0, .1); }
.v32-kick { display: flex; gap: 12px; align-items: center; margin: 0; font-style: italic; color: var(--muted); }
.v32 .hx-name img { filter: invert(1) hue-rotate(180deg) saturate(1.3); }
.v32 .hx-tagline { color: var(--fg); }
.v32-fold { display: grid; gap: 16px; }
.v32-fold .hx-live-item { border: 0; border-radius: 4px; color: var(--fg); background: linear-gradient(160deg, #ffffff 0 55%, #f1e7d6 55%); box-shadow: 0 14px 30px rgba(80, 60, 30, .15); transform: skewY(-2deg); }
.v32-fold .hx-live-item:nth-child(2) { transform: skewY(2deg); background: linear-gradient(200deg, #fff1e6 0 55%, #f7dcc8 55%); }
.v32-fold .hx-live-item:nth-child(3) { background: linear-gradient(160deg, #eaf4ee 0 55%, #d5e8dc 55%); }
.v32 .hx-play { background: #c4572a; border-radius: 4px; box-shadow: 0 10px 20px rgba(196, 87, 42, .3); }
.v32 .hx-ghost { color: var(--fg); border-color: var(--line); background: #fff; }
.v32 .card, .v32 .hx-num, .v32 .hx-join { background: #fffaf2; box-shadow: 0 12px 26px rgba(80, 60, 30, .12); border-color: var(--line); }
.v32 .hx-num-v { color: #c4572a; }
.v32 .server-tags .chip, .v32 .pill { background: #fff; color: var(--fg); }

/* ===== 33 · Tokyo di notte ===== */
.v33-city { position: relative; isolation: isolate; overflow: hidden; padding: 70px 0 50px; margin-top: -28px;
  background: linear-gradient(180deg, #050512 0%, #0d0b25 50%, #1a0d2e 75%, #050512), #050512; }
.v33-city::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(255, 46, 136, .15)), repeating-linear-gradient(90deg, rgba(0, 240, 255, .08) 0 2px, transparent 2px 30px); filter: blur(1px); }
.v33-rain { position: absolute; inset: 0; z-index: -1; opacity: .35;
  background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(180, 220, 255, .5) 18px 19px, transparent 19px 40px); background-size: 200px 200px; animation: v33-rain .6s linear infinite; }
@keyframes v33-rain { to { background-position: -40px 200px; } }
.v33-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; display: grid; gap: 16px; position: relative; }
.v33-signs { position: absolute; right: 0; top: -20px; display: grid; gap: 12px; justify-items: end; }
.v33-signs span { font: 900 1.6rem/1 "Hiragino Sans", "Noto Sans JP", sans-serif; padding: 8px 12px; border: 2px solid currentColor; border-radius: 6px; writing-mode: vertical-rl; }
.v33-signs span:nth-child(1) { color: #ff2e88; text-shadow: 0 0 12px #ff2e88; box-shadow: 0 0 20px #ff2e8866; }
.v33-signs span:nth-child(2) { color: #00f0ff; text-shadow: 0 0 12px #00f0ff; box-shadow: 0 0 20px #00f0ff66; writing-mode: horizontal-tb; }
.v33-signs span:nth-child(3) { color: #ffe14a; text-shadow: 0 0 12px #ffe14a; box-shadow: 0 0 20px #ffe14a66; writing-mode: horizontal-tb; animation: v33-flicker 3s infinite; }
@keyframes v33-flicker { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: .2; } }
.v33-kick { display: flex; gap: 12px; align-items: center; margin: 0; color: #00f0ff; text-shadow: 0 0 8px #00f0ff; letter-spacing: .16em; text-transform: uppercase; font-size: .76rem; font-weight: 800; }
.v33 .hx-name img { filter: drop-shadow(0 0 10px #ff2e88) drop-shadow(0 18px 30px rgba(255, 46, 136, .4)); }
.v33 .hx-play { background: #ff2e88; box-shadow: 0 0 30px #ff2e88; border-radius: 4px; }
.v33 .hx-ghost { border-color: #00f0ff; color: #00f0ff; border-radius: 4px; box-shadow: 0 0 14px #00f0ff55; }
.v33-live .hx-live-item, .v33 .card, .v33 .hx-num { background: rgba(10, 8, 30, .75); border: 1px solid rgba(0, 240, 255, .35); box-shadow: 0 0 18px rgba(255, 46, 136, .12); }
.v33 .label { color: #ff7ab8 !important; }
.v33 .hx-num-v { color: #00f0ff; text-shadow: 0 0 14px #00f0ff; }

/* ===== 34 · Museo barocco ===== */
.v34-hall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr); gap: 34px; align-items: center; padding: 50px 40px; margin-top: 10px; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 210, 140, .25), transparent 60%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 14px), linear-gradient(180deg, #5c0f16, #2e070b); }
.v34-intro { display: grid; gap: 14px; }
.v34-kick { margin: 0; font: italic 1rem Georgia, serif; color: #f2d59b; letter-spacing: .06em; }
.v34 .hx-tagline { font-family: Georgia, serif; color: #f6e9d0; }
.v34-frame { margin: 0; padding: 22px; background: linear-gradient(135deg, #f7e19a, #a7741f 30%, #f3d27a 50%, #7a5212 75%, #e8c56a);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 4px #5a3b0b, inset 0 0 0 10px #d8b45b, inset 0 0 20px 12px rgba(0, 0, 0, .4); }
.v34-canvas { aspect-ratio: 4 / 3; background: var(--hx-map, none) center / cover no-repeat, #2e3a2a; box-shadow: inset 0 0 40px rgba(0, 0, 0, .7); filter: sepia(.35) contrast(1.05) saturate(.9); }
.v34-plaque { display: grid; gap: 2px; justify-items: center; margin: 16px auto -6px; padding: 8px 18px; width: max-content; max-width: 100%; text-align: center;
  background: linear-gradient(135deg, #e9cf86, #a77c2a); color: #2a1a05; border-radius: 3px; font-family: Georgia, serif; font-size: .82rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.v34-plaque .hx-map, .v34-plaque .hx-map a { color: #2a1a05; font-size: .76rem; }
.v34-plaques { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v34-plaques .hx-live-item { background: linear-gradient(160deg, #3b0a10, #22060a); border: 2px solid #c9a24f; border-radius: 3px; }
.v34 .label { color: #e9cf86 !important; font-family: Georgia, serif; letter-spacing: .1em; }
.v34 .hx-play { background: linear-gradient(135deg, #f3d27a, #a7741f); color: #2a1a05; border-radius: 2px; font-family: Georgia, serif; }
.v34 .hx-ghost { border-color: #c9a24f; color: #f2d59b; border-radius: 2px; }
.v34 .hx-num { background: #2e070b; border: 2px solid #c9a24f; border-radius: 2px; }
.v34 .hx-num-v { font-family: Georgia, serif; color: #f2d59b; }
.v34 .sec-title h2 { font-family: Georgia, serif; color: #f2d59b; }

/* ===== 35 · Fuoco ===== */
.v35-fire { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; padding: 60px 44px 44px; border-radius: 22px;
  background: radial-gradient(900px 400px at 50% 120%, #ff5a00, #b3170a 35%, #3a0705 65%, #120302); }
.v35-embers { position: absolute; inset: 0; z-index: -1; }
.v35-embers span { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: #ffcf5c; box-shadow: 0 0 10px #ff8a00, 0 0 20px #ff5a00; animation: v35-rise 6s linear infinite; }
.v35-embers span:nth-child(odd) { width: 4px; height: 4px; animation-duration: 8s; }
.v35-embers span:nth-child(1) { left: 5%; animation-delay: -1s; } .v35-embers span:nth-child(2) { left: 12%; animation-delay: -4s; } .v35-embers span:nth-child(3) { left: 20%; animation-delay: -2s; }
.v35-embers span:nth-child(4) { left: 28%; animation-delay: -5s; } .v35-embers span:nth-child(5) { left: 35%; animation-delay: -3s; } .v35-embers span:nth-child(6) { left: 43%; animation-delay: -6s; }
.v35-embers span:nth-child(7) { left: 50%; animation-delay: -1.5s; } .v35-embers span:nth-child(8) { left: 58%; animation-delay: -4.5s; } .v35-embers span:nth-child(9) { left: 66%; animation-delay: -2.5s; }
.v35-embers span:nth-child(10) { left: 73%; animation-delay: -5.5s; } .v35-embers span:nth-child(11) { left: 80%; animation-delay: -.5s; } .v35-embers span:nth-child(12) { left: 87%; animation-delay: -3.5s; }
.v35-embers span:nth-child(13) { left: 93%; animation-delay: -6.5s; } .v35-embers span:nth-child(14) { left: 98%; animation-delay: -2.2s; }
@keyframes v35-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(40px, -620px); opacity: 0; } }
.v35-main { display: grid; gap: 14px; max-width: 780px; }
.v35-kick { display: flex; gap: 12px; align-items: center; margin: 0; color: #ffd38a; letter-spacing: .18em; text-transform: uppercase; font-size: .76rem; font-weight: 800; }
.v35 .hx-name img { filter: drop-shadow(0 0 20px #ff6a00) drop-shadow(0 0 4px #000); }
.v35 .hx-tagline { color: #fff1e0; text-shadow: 0 2px 10px #000; }
.v35 .hx-play { background: linear-gradient(135deg, #ffd34a, #ff6a00); color: #2a0a00; box-shadow: 0 0 40px #ff6a00; }
.v35 .hx-ghost { border-color: #ffb36b; color: #ffe2c4; background: rgba(0, 0, 0, .3); }
.v35-live .hx-live-item, .v35 .card, .v35 .hx-num { background: rgba(25, 4, 2, .7); border-color: rgba(255, 120, 40, .4); }
.v35 .label { color: #ffb36b !important; }
.v35 .hx-num-v { color: #ffcf5c; text-shadow: 0 0 18px #ff6a00; }

/* ===== 36 · Bauhaus (chiaro) ===== */
.v36-bau { --bg: #f2ede3; --surface: #fbf8f1; --surface-2: #ece5d6; --bg-2: #e9e2d2; --line: #1b1b1b; --fg: #1b1b1b; --muted: #333; --faint: #555; --accent-text: #d6231e; --accent-soft: rgba(214, 35, 30, .08);
  background: #f2ede3; color: #1b1b1b; padding: 40px 0 50px; margin-top: -28px; font-family: "Futura", "Century Gothic", "Avenir", sans-serif; }
.v36-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.v36-hero { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.2fr); gap: 34px; align-items: center; border: 4px solid #1b1b1b; padding: 30px; background: #fbf8f1; }
.v36-geo { position: relative; aspect-ratio: 1; }
.v36-geo .c { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: #d6231e; left: 0; top: 0; }
.v36-geo .t { position: absolute; width: 0; height: 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 160px solid #f0b400; right: 6%; top: 8%; }
.v36-geo .q { position: absolute; width: 44%; aspect-ratio: 1; background: #1d4fa3; right: 0; bottom: 0; }
.v36-geo .b { position: absolute; height: 14px; width: 80%; background: #1b1b1b; left: 6%; bottom: 30%; transform: rotate(-12deg); }
.v36-txt { display: grid; gap: 14px; }
.v36 .hx-name img { filter: brightness(0); width: 340px; }
.v36 .hx-tagline { font-size: 1.25rem; font-weight: 600; color: #1b1b1b; }
.v36 .hx-play { background: #d6231e; border-radius: 0; box-shadow: 6px 6px 0 #1b1b1b; }
.v36 .hx-ghost { border-radius: 999px; border: 3px solid #1b1b1b; color: #1b1b1b; }
.v36-live { margin-top: 20px; }
.v36-live .hx-live-item { border: 4px solid #1b1b1b; border-radius: 0; color: #1b1b1b; }
.v36-live .hx-live-item:nth-child(1) { background: #f0b400; } .v36-live .hx-live-item:nth-child(2) { background: #fbf8f1; } .v36-live .hx-live-item:nth-child(3) { background: #1d4fa3; }
.v36-live .hx-live-item:nth-child(3) *, .v36-live .hx-live-item:nth-child(3) .label { color: #fff !important; }
.v36 .label { color: #1b1b1b !important; }
.v36 .card, .v36 .hx-num, .v36 .hx-join { border: 3px solid #1b1b1b; border-radius: 0; background: #fbf8f1; box-shadow: none; }
.v36 .hx-num:nth-child(1) .hx-num-v { color: #d6231e; } .v36 .hx-num:nth-child(2) .hx-num-v { color: #1d4fa3; } .v36 .hx-num:nth-child(3) .hx-num-v { color: #f0b400; }
.v36 .server-tags .chip, .v36 .pill { background: #fff; color: #1b1b1b; border-radius: 0; }

/* ===== 37 · Lavagna ===== */
.v37 { --chalk: #f1f1e8; --hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
.v37-board { position: relative; display: grid; gap: 14px; margin-top: 10px; padding: 40px 46px; border-radius: 6px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, .04), transparent 50%), #23382d;
  border: 18px solid #6b4a2b; box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 20px 50px rgba(0, 0, 0, .5); font-family: var(--hand); color: var(--chalk); }
.v37-date { margin: 0; font-size: 1.1rem; text-decoration: underline wavy rgba(241, 241, 232, .5); text-underline-offset: 6px; }
.v37 .hx-name img { filter: grayscale(1) brightness(2.2) contrast(.8) drop-shadow(0 0 1px #fff); opacity: .9; }
.v37-arrow { margin: 0; font-size: 1rem; color: #ffe08a; transform: rotate(-3deg); }
.v37 .hx-tagline { font-family: var(--hand); color: var(--chalk); font-size: 1.25rem; }
.v37 .hx-map, .v37 .hx-map a { color: #cde; font-family: var(--hand); }
.v37 .hx-play { background: none; border: 3px dashed #ffe08a; color: #ffe08a; box-shadow: none; font-family: var(--hand); }
.v37 .hx-ghost { border: 3px dashed var(--chalk); color: var(--chalk); background: none; font-family: var(--hand); }
.v37-live .hx-live-item { background: none; border: 2px dashed rgba(241, 241, 232, .6); border-radius: 14px 4px 14px 4px; font-family: var(--hand); }
.v37 .label { color: #ffe08a !important; }
.v37-note { position: absolute; right: 30px; bottom: 16px; margin: 0; transform: rotate(-4deg); color: #ff9e9e; font-size: 1rem; }
.v37 .hx-num { background: #23382d; border: 2px dashed rgba(241, 241, 232, .4); font-family: var(--hand); }
.v37 .hx-num-v { color: var(--chalk); font-family: var(--hand); }
.v37 .sec-title h2 { font-family: var(--hand); }

/* ===== 38 · Olografica ===== */
.v38-holo { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 20px; padding: 50px 40px 40px; border-radius: 28px; background: #0b0b12; }
.v38-foil { position: absolute; inset: -50%; z-index: -1; opacity: .55; filter: blur(30px) saturate(1.6);
  background: conic-gradient(from 0deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7dffd9, #fff59e, #ff6ad5); animation: v38-turn 14s linear infinite; }
@keyframes v38-turn { to { transform: rotate(360deg); } }
.v38-card { padding: 34px; border-radius: 22px; display: grid; gap: 14px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .14) 60%, rgba(255, 255, 255, .03)), rgba(12, 12, 20, .55);
  border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(14px); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.v38-kick { display: flex; gap: 12px; align-items: center; margin: 0; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .74rem;
  background: linear-gradient(90deg, #ff6ad5, #94d0ff, #7dffd9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v38 .hx-play { background: linear-gradient(120deg, #ff6ad5, #ad8cff, #94d0ff, #7dffd9); color: #10101a; border-radius: 999px; background-size: 200% 100%; animation: v38-shine 4s ease-in-out infinite alternate; }
@keyframes v38-shine { to { background-position: 100% 0; } }
.v38 .hx-ghost { border-radius: 999px; border-color: rgba(255, 255, 255, .45); }
.v38-live .hx-live-item, .v38 .card, .v38 .hx-num { background: rgba(14, 14, 24, .6); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(10px); border-radius: 18px; }
.v38 .hx-num-v { background: linear-gradient(90deg, #ff6ad5, #ad8cff, #7dffd9); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== 39 · Pixel art ===== */
.v39 { --px: "Press Start 2P", "Courier New", monospace; }
.v39-arcade { display: grid; gap: 16px; justify-items: center; text-align: center; margin-top: 10px; padding: 40px 30px; background: #0f0a2b;
  box-shadow: 0 0 0 4px #000, 0 0 0 8px #fff, 0 0 0 12px #000, 0 0 0 16px #ff004d; image-rendering: pixelated;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 50%, transparent 50%); background-size: 100% 4px; }
.v39-score { margin: 0; font: 700 .9rem var(--px); color: #ffec27; letter-spacing: .1em; }
.v39 .hx-name img { image-rendering: pixelated; filter: drop-shadow(4px 4px 0 #ff004d) drop-shadow(-2px -2px 0 #29adff); }
.v39-start { margin: 0; font: 900 1.4rem var(--px); color: #fff; animation: v17-blink 1s steps(1) infinite; }
.v39 .hx-tagline { font-family: var(--px); color: #c2c3c7; font-size: .95rem; }
.v39 .hx-cta { justify-content: center; }
.v39 .hx-play { border-radius: 0; background: #00e436; color: #000; font-family: var(--px); box-shadow: 4px 4px 0 #000, 0 0 0 3px #fff; }
.v39 .hx-ghost { border-radius: 0; border: 3px solid #fff; font-family: var(--px); }
.v39-live { width: 100%; text-align: left; }
.v39-live .hx-live-item, .v39 .card, .v39 .hx-num { border-radius: 0; background: #1d2b53; border: 4px solid #fff; box-shadow: 4px 4px 0 #000; font-family: var(--px); }
.v39 .label { color: #ffec27 !important; }
.v39 .hx-num-v { color: #29adff; font-family: var(--px); }
.v39 .sec-title h2 { font-family: var(--px); color: #ffec27; }

/* ===== 40 · Mappa del tesoro (chiaro) ===== */
.v40-parch { --bg: #efe0bd; --surface: #f6ead0; --surface-2: #e6d3a8; --bg-2: #e3cfa2; --line: #a8895a; --fg: #3b2a14; --muted: #5e4626; --faint: #7d6340; --accent-text: #a3221a; --accent-soft: rgba(163, 34, 26, .1);
  color: var(--fg); padding: 40px 0 50px; margin-top: -28px; font-family: Georgia, serif;
  background: radial-gradient(ellipse at 10% 10%, rgba(120, 80, 30, .35), transparent 40%), radial-gradient(ellipse at 90% 90%, rgba(120, 80, 30, .35), transparent 40%), radial-gradient(ellipse at center, #f3e5c4, #e2c993); }
.v40-inner { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.v40-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 30px; align-items: center; }
.v40-main { display: grid; gap: 14px; }
.v40-kick { display: flex; gap: 12px; align-items: center; margin: 0; font-style: italic; color: var(--accent-text); font-size: 1.05rem; }
.v40 .hx-name img { filter: sepia(1) brightness(.45) contrast(1.4); }
.v40 .hx-tagline { color: var(--fg); font-family: Georgia, serif; font-size: 1.2rem; }
.v40-chart { position: relative; aspect-ratio: 1; border: 3px double var(--line); border-radius: 8px; background: repeating-linear-gradient(45deg, rgba(120, 80, 30, .06) 0 2px, transparent 2px 18px); }
.v40-rose { position: absolute; left: 12%; top: 12%; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--fg);
  background: conic-gradient(from 0deg, var(--fg) 0 8deg, transparent 8deg 82deg, var(--fg) 82deg 98deg, transparent 98deg 172deg, var(--fg) 172deg 188deg, transparent 188deg 262deg, var(--fg) 262deg 278deg, transparent 278deg 352deg, var(--fg) 352deg); opacity: .7; }
.v40-path { position: absolute; left: 30%; top: 40%; width: 50%; height: 40%; border: 4px dashed #a3221a; border-color: transparent #a3221a #a3221a transparent; border-radius: 0 0 80% 0; }
.v40-x { position: absolute; right: 12%; bottom: 10%; font: 900 3.4rem/1 Georgia, serif; color: #a3221a; transform: rotate(-8deg); }
.v40 .hx-play { background: #a3221a; border-radius: 4px; font-family: Georgia, serif; box-shadow: 0 8px 20px rgba(80, 40, 10, .3); }
.v40 .hx-ghost { color: var(--fg); border: 2px solid var(--fg); background: none; font-family: Georgia, serif; }
.v40-live { margin-top: 24px; }
.v40-live .hx-live-item, .v40 .card, .v40 .hx-num, .v40 .hx-join { background: rgba(246, 234, 208, .8); border: 2px solid var(--line); box-shadow: 0 8px 20px rgba(80, 40, 10, .15); }
.v40 .label { color: var(--accent-text) !important; font-family: Georgia, serif; }
.v40 .hx-num-v { font-family: Georgia, serif; color: #6e3d10; }
.v40 .sec-title h2 { font-family: Georgia, serif; }
.v40 .server-tags .chip, .v40 .pill { background: #f6ead0; color: var(--fg); }

@media (max-width: 960px) {
  .v30-inner, .v31-arch, .v32-hero, .v34-hall, .v36-hero, .v40-hero { grid-template-columns: 1fr; }
  .v34-plaques { grid-template-columns: 1fr; }
  .v31-window, .v31-arch { border-radius: 120px 120px 14px 14px; }
  .v31-glass { padding-top: 70px; }
  .v33-signs { display: none; }
  .v35-fire, .v38-holo, .v37-board { padding: 30px 20px; }
  .v36-geo { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .v30-stars, .v30-planet, .v30-ring, .v33-rain, .v33-signs span, .v35-embers span, .v38-foil, .v38 .hx-play, .v39-start { animation: none; } }

/* ===== 70-89 · Cinematografica, venti linguaggi (owner 2026-11-04 v2: "troppo uguali"): same markup as test7 (.v7); each page adds .vx7 + .vNN + fx-*
   (effects in /assets/js/previews-fx.js). Palettes scoped with :root:has(.vNN) so header and footer follow; text contrasts >= 4.5:1 (make_v7fx.py). Effect elements: .fx-ripple-dot, .fx-progress-bar, .fx-ember-box (never the fx-* switch names). ===== */
.vx7 { --ease: cubic-bezier(.2, .7, .2, 1); }
.vx7 .v7-hero { background: linear-gradient(90deg, rgba(var(--g0), .93) 18%, rgba(var(--g0), .38) 74%), linear-gradient(180deg, rgba(var(--g0), .28), rgba(var(--g0), .42) 50%, var(--bg)), var(--hx-map, none) center 35% / cover no-repeat, var(--bg); }
.vx7 .v7-band { background: linear-gradient(90deg, rgba(var(--g0), .95) 25%, rgba(var(--g0), .66)), var(--hx-banner, none) right center / cover no-repeat, var(--bg); border-block: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); }
.vx7 .v7-live .hx-live-item { background: rgba(var(--g0), .55); border-color: color-mix(in srgb, var(--fg) 12%, transparent); }
.vx7 .v7-band .card { background: color-mix(in srgb, var(--surface) 74%, transparent); }
.vx7 .hx-play { background: linear-gradient(135deg, var(--btn-1), var(--btn-2)); color: #fff; }
.vx7 .hx-play:hover, .vx7 .hx-play:focus-visible { color: #fff; }
.vx7 .card, .vx7 .stat, .vx7 .hx-num, .vx7 .hx-live-item, .vx7 .hx-join { border-radius: var(--radius); }
.vx7 .hx-ticker { background: var(--bg-2); border-block: 1px solid var(--line); }
.vx7 ::selection { background: color-mix(in srgb, var(--accent) 70%, transparent); color: #fff; }
/* image layer of the hero as its own element (Ken Burns, parallax) */
.vx7.fx-layer .v7-hero { background: var(--bg); overflow: hidden; isolation: isolate; }
.vx7.fx-layer .v7-hero::before { content: ""; position: absolute; inset: -8%; z-index: -2; background: var(--hx-map, none) center 35% / cover no-repeat; transform-origin: 60% 40%; }
.vx7.fx-layer .v7-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--g0), .93) 18%, rgba(var(--g0), .38) 74%), linear-gradient(180deg, rgba(var(--g0), .28), rgba(var(--g0), .42) 50%, var(--bg)); }
/* entrance on scroll (previews-fx.js adds .fx-armed, then .fx-in): each variant sets --fx-from / --fx-filter / --fx-dur / --fx-ease */
.vx7.fx-armed :is(.v7-band, .hx-numbers, .card, .hx-num, .sec-row > .sec):not(.fx-in) { opacity: 0; transform: var(--fx-from, translateY(24px)); filter: var(--fx-filter, none); }
.vx7.fx-armed :is(.v7-band, .hx-numbers, .card, .hx-num, .sec-row > .sec) { transition: opacity var(--fx-dur, .75s) var(--fx-ease, var(--ease)), transform var(--fx-dur, .75s) var(--fx-ease, var(--ease)), filter var(--fx-dur, .75s) var(--fx-ease, var(--ease)), border-color .35s, box-shadow .35s, background-position .6s; transition-delay: calc(var(--fx-i, 0) * 70ms); }
.vx7.fx-armed :is(.card, .hx-num).fx-in:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .vx7 *, .vx7 *::before, .vx7 *::after { animation: none !important; transition: none !important; } .fx-progress-bar { display: none; } }

/* ---- 70 · Ken Burns (fx-layer fx-reveal) ---- */
:root:has(.v70) { --bg: #121110; --bg-2: #181715; --surface: #1e1c1a; --surface-2: #262421; --line: #33302c; --fg: #eeebe5; --muted: #a8a399; --faint: #918c82; --accent: #e2622d; --accent-2: #f28a4f; --btn-1: #e2622d; --btn-2: #c25427; --accent-text: #f2814f; --accent-soft: rgba(226, 98, 45, .14); --g0: 18, 17, 16; }
.v70 .v7-hero::before { animation: v70-kb 38s ease-in-out infinite alternate; }
@keyframes v70-kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.16) translate(-3%, 2%); } }
.v70 .hx-play { position: relative; overflow: hidden; }
.v70 .hx-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.v70 .hx-play:hover::after, .v70 .hx-play:focus-visible::after { transform: translateX(120%); }
.v70 .card { transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.v70 .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }
.v70 { --fx-from: translateY(28px); }
/* ---- 71 · Aurora di vetro (fx-reveal) ---- */
:root:has(.v71) { --bg: #0c0f14; --bg-2: #11151b; --surface: #161b22; --surface-2: #1e242d; --line: #2a313c; --fg: #e9ecf1; --muted: #a0a8b4; --faint: #8a929e; --accent: #ff7a3d; --accent-2: #ffb067; --btn-1: #e96f37; --btn-2: #c85f2f; --accent-text: #ff9561; --accent-soft: rgba(255, 122, 61, .14); --g0: 12, 15, 20; }
.v71 .v7-hero { overflow: hidden; isolation: isolate; }
.v71 .v7-hero::after { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .55; filter: blur(40px);
  background: radial-gradient(40% 35% at 30% 40%, rgba(255, 122, 61, .55), transparent 70%), radial-gradient(35% 30% at 70% 30%, rgba(45, 212, 191, .4), transparent 70%),
  radial-gradient(30% 30% at 55% 70%, rgba(168, 85, 247, .32), transparent 70%); animation: v71-aur 22s ease-in-out infinite alternate; }
@keyframes v71-aur { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6%, -4%) rotate(12deg); } 100% { transform: translate(-5%, 5%) rotate(-8deg); } }
.v71 .v7-inner { position: relative; }
.v71 .card, .v71 .hx-live-item, .v71 .hx-num { background: rgba(255, 255, 255, .045) !important; backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .09);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.v71 .card:hover, .v71 .hx-live-item:hover, .v71 .hx-num:hover { transform: translateY(-4px); border-color: rgba(255, 149, 97, .55);
  box-shadow: 0 0 0 1px rgba(255, 149, 97, .25), 0 20px 50px -20px rgba(255, 122, 61, .55); }
.v71 .hx-play, .v71 .hx-ghost { border-radius: 999px; }
.v71 .hx-play { background: linear-gradient(120deg, #c2481a, #e0621f 40%, #b8501c); background-size: 200% 100%; transition: background-position .6s var(--ease), transform .2s, box-shadow .3s; }
.v71 .hx-play:hover { background-position: 100% 0; box-shadow: 0 10px 40px -8px rgba(255, 122, 61, .8); }
.v71 .hx-ghost { background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); }
.v71 { --fx-from: scale(.965); }
/* ---- 72 · Neon (fx-reveal) ---- */
:root:has(.v72) { --bg: #0a0a0b; --bg-2: #101012; --surface: #151517; --surface-2: #1c1c1f; --line: #28282c; --fg: #ededf0; --muted: #a3a3ab; --faint: #8c8c94; --accent: #ff6a1f; --accent-2: #ff9452; --btn-1: #f0641d; --btn-2: #ce5619; --accent-text: #ff8a4c; --accent-soft: rgba(255, 106, 31, .14); --g0: 10, 10, 11; }
@property --v72a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.v72 .hx-play { position: relative; overflow: hidden; isolation: isolate; background: transparent !important; color: var(--accent-text) !important; border: 1.5px solid var(--accent);
  box-shadow: 0 0 18px -4px var(--accent), inset 0 0 12px -6px var(--accent); transition: color .3s, box-shadow .3s; }
.v72 .hx-play::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-1); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.v72 .hx-play:hover, .v72 .hx-play:focus-visible { color: #fff !important; box-shadow: 0 0 34px -2px var(--accent); }
.v72 .hx-play:hover::before, .v72 .hx-play:focus-visible::before { transform: scaleX(1); }
.v72 .card { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box,
  conic-gradient(from var(--v72a), var(--line) 0 70%, var(--accent) 82%, var(--line) 94%) border-box; }
.v72 .card:hover { animation: v72-spin 2.4s linear infinite; }
@keyframes v72-spin { to { --v72a: 360deg; } }
.v72 .sec-head h2 { text-shadow: 0 0 18px rgba(255, 106, 31, .55); }
.v72 .hx-name img { filter: drop-shadow(0 0 22px rgba(255, 106, 31, .45)); }
.v72 :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255, 106, 31, .18); }
.v72 { --fx-from: translateY(16px); }
/* ---- 73 · Riflettore (fx-spot fx-cursor) ---- */
:root:has(.v73) { --bg: #0f0f10; --bg-2: #141415; --surface: #19191b; --surface-2: #212123; --line: #2d2d30; --fg: #ececee; --muted: #a5a5ab; --faint: #8e8e94; --accent: #ef6b2e; --accent-2: #f79056; --btn-1: #ef6b2e; --btn-2: #ce5c28; --accent-text: #f58a59; --accent-soft: rgba(239, 107, 46, .14); --g0: 15, 15, 16; }
.v73 .v7-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 380px at calc(var(--px, .3) * 100%) calc(var(--py, .4) * 100%), rgba(239, 107, 46, .16), transparent 70%); transition: background .1s; }
.v73 .v7-inner { position: relative; z-index: 1; }
.v73 .card, .v73 .stat, .v73 .hx-num { position: relative; isolation: isolate; overflow: hidden; }
.v73 .card::before, .v73 .stat::before, .v73 .hx-num::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(239, 107, 46, .16), transparent 65%); }
.v73 .card::after, .v73 .stat::after, .v73 .hx-num::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  padding: 1px; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 170, 120, .9), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.v73 :is(.card, .stat, .hx-num):hover::before, .v73 :is(.card, .stat, .hx-num):hover::after { opacity: 1; }
.v73 .hx-play { transition: transform .2s var(--ease), box-shadow .3s; } .v73 .hx-play:active { transform: scale(.97); }
.v73 .hx-ghost:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
/* ---- 74 · Parallasse (fx-layer fx-parallax fx-reveal) ---- */
:root:has(.v74) { --bg: #10110e; --bg-2: #151612; --surface: #1b1c17; --surface-2: #22241e; --line: #30322a; --fg: #ebebe2; --muted: #a6a796; --faint: #8f907f; --accent: #d9682b; --accent-2: #eb8f52; --btn-1: #d9682b; --btn-2: #bb5925; --accent-text: #ec8650; --accent-soft: rgba(217, 104, 43, .14); --g0: 16, 17, 14; }
.v74 .v7-hero::before { transform: translateY(calc(var(--sy, 0) * .35px)) scale(1.08); will-change: transform; }
@media (hover: hover) and (pointer: fine) { .v74 .v7-band { background-attachment: scroll, fixed, scroll; background-size: auto, cover, auto; background-position: 0 0, center, 0 0; } }
.v74 .sec-row > .sec:nth-child(1), .v74 .top-grid > .card:nth-child(odd), .v74 .rec-grid > *:nth-child(odd) { --fx-from: translateX(-40px); }
.v74 .sec-row > .sec:nth-child(2), .v74 .top-grid > .card:nth-child(even), .v74 .rec-grid > *:nth-child(even) { --fx-from: translateX(40px); }
.v74 { --fx-from: translateY(30px); }
.v74 .hx-play, .v74 .hx-ghost { border-radius: 3px; }
.v74 .hx-ghost::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform .3s var(--ease); }
.v74 .hx-ghost:hover::after { transform: translateX(6px); }
.v74 .sec-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); text-decoration: none; }
.v74 .sec-link:hover { background-size: 100% 1px; }
/* ---- 75 · Pellicola (fx-reveal) ---- */
:root:has(.v75) { --bg: #100e0b; --bg-2: #16130f; --surface: #1c1813; --surface-2: #241f19; --line: #342c23; --fg: #f0e9de; --muted: #ada291; --faint: #968b7b; --accent: #e8821f; --accent-2: #f6a94e; --btn-1: #da7a1d; --btn-2: #bb6919; --accent-text: #f39a45; --accent-soft: rgba(232, 130, 31, .14); --g0: 16, 14, 11; }
.v75 .v7-hero { overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #000 0 44px, transparent 44px calc(100% - 44px), #000 calc(100% - 44px)),
  linear-gradient(90deg, rgba(var(--g0), .9) 18%, rgba(var(--g0), .3) 74%), linear-gradient(180deg, transparent 55%, var(--bg)),
  linear-gradient(rgba(150, 95, 30, .42), rgba(150, 95, 30, .42)), var(--hx-map, none) center 35% / cover no-repeat, var(--bg);
  background-blend-mode: normal, normal, normal, color, normal, normal; }
.v75 .v7-hero::before { content: ""; position: absolute; inset: -50%; z-index: 0; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(circle at 17% 32%, rgba(255, 240, 210, .05) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 73% 61%, rgba(0, 0, 0, .2) 0 1px, transparent 1px 4px);
  animation: v75-grain .9s steps(5) infinite; }
@keyframes v75-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }
.v75 .v7-inner { position: relative; z-index: 1; }
.v75 .v7-kick, .v75 .hx-name, .v75 .hx-tagline { animation: v75-wipe 1.4s var(--ease) both; }
.v75 .hx-name { animation-delay: .25s; } .v75 .hx-tagline { animation-delay: .5s; }
@keyframes v75-wipe { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.v75 .hx-play, .v75 .hx-ghost { text-transform: uppercase; letter-spacing: .14em; font-size: .86rem; border-radius: 2px; transition: letter-spacing .4s var(--ease), background .3s, box-shadow .3s; }
.v75 .hx-play:hover, .v75 .hx-ghost:hover { letter-spacing: .22em; }
.v75 .v7-band { background-blend-mode: normal, luminosity, normal; }
.v75 .v7-band:hover { background-blend-mode: normal, normal, normal; }
.v75 .sec-head h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-style: italic; letter-spacing: .01em; }
.v75 { --fx-from: translateY(12px); --fx-filter: sepia(1) brightness(.6); }
/* ---- 76 · Duotono (fx-reveal) ---- */
:root:has(.v76) { --bg: #0f0c0b; --bg-2: #151110; --surface: #1b1513; --surface-2: #231b18; --line: #35271f; --fg: #efe8e4; --muted: #ab9e96; --faint: #95887f; --accent: #e0532a; --accent-2: #f07a47; --btn-1: #e0532a; --btn-2: #c14724; --accent-text: #ef7a52; --accent-soft: rgba(224, 83, 42, .14); --g0: 15, 12, 11; }
.v76 .v7-hero { background: linear-gradient(90deg, rgba(var(--g0), .9) 18%, rgba(var(--g0), .25) 74%), linear-gradient(180deg, transparent 55%, var(--bg)),
  linear-gradient(#e0532a, #7a1d08), var(--hx-map, none) center 35% / cover no-repeat, var(--bg); background-blend-mode: normal, normal, multiply, luminosity; }
.v76 .v7-band { background-blend-mode: normal, luminosity, normal; position: relative; isolation: isolate; transition: background-color .8s; }
.v76 .v7-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 30%, rgba(224, 83, 42, .38)); mix-blend-mode: multiply; transition: opacity .8s; }
.v76 .v7-band:hover::before { opacity: 0; }
.v76 { --radius: 4px; }
.v76 .hx-play, .v76 .hx-ghost { border-radius: 3px; border: 2px solid #000; transition: transform .12s, box-shadow .12s; }
.v76 .hx-play { box-shadow: 5px 5px 0 #000; } .v76 .hx-ghost { box-shadow: 5px 5px 0 rgba(224, 83, 42, .8); background: var(--surface); }
.v76 .hx-play:hover, .v76 .hx-ghost:hover { transform: translate(-2px, -2px); } .v76 .hx-play:hover { box-shadow: 7px 7px 0 #000; } .v76 .hx-ghost:hover { box-shadow: 7px 7px 0 rgba(224, 83, 42, .9); }
.v76 .hx-play:active, .v76 .hx-ghost:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #000; }
.v76 .card { transition: transform .15s, box-shadow .15s; } .v76 .card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 rgba(224, 83, 42, .75); }
.v76 .sec-head h2 { text-transform: uppercase; letter-spacing: .06em; font-weight: 900; }
.v76 { --fx-from: translateY(0) scale(.98); }
/* ---- 77 · Braci (fx-embers) ---- */
:root:has(.v77) { --bg: #110b09; --bg-2: #170f0c; --surface: #1e1410; --surface-2: #271a15; --line: #3a271e; --fg: #f2e8e2; --muted: #b09f95; --faint: #998880; --accent: #e4502a; --accent-2: #f7a03a; --btn-1: #e4502a; --btn-2: #c44524; --accent-text: #f27d4f; --accent-soft: rgba(228, 80, 42, .14); --g0: 17, 11, 9; }
.v77 .v7-hero { overflow: hidden; isolation: isolate; }
.v77 .v7-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 100% at 50% 100%, rgba(228, 80, 42, .28), transparent 70%); animation: v77-heat 5s ease-in-out infinite alternate; }
@keyframes v77-heat { from { opacity: .6; } to { opacity: 1; } }
.v77 .v7-inner { position: relative; z-index: 1; }
.fx-ember-box { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-ember-box i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #ffb35a;
  box-shadow: 0 0 8px 2px rgba(255, 120, 40, .8); animation: v77-rise var(--d) linear var(--dl) infinite; }
@keyframes v77-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx), -680px); opacity: 0; } }
.v77 .hx-play { background: linear-gradient(135deg, var(--btn-1), #a82c18) !important; animation: v77-pulse 2.4s ease-out infinite; }
@keyframes v77-pulse { 0% { box-shadow: 0 0 0 0 rgba(228, 80, 42, .6); } 70% { box-shadow: 0 0 0 16px rgba(228, 80, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(228, 80, 42, 0); } }
.v77 .hx-num-v, .v77 .sec-head h2 { background: linear-gradient(180deg, #ffc46b, #e4502a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v77 .card { transition: box-shadow .4s, border-color .4s; } .v77 .card:hover { border-color: rgba(228, 80, 42, .5); box-shadow: inset 0 -40px 60px -40px rgba(228, 80, 42, .5); }
/* ---- 78 · Profondità 3D (fx-tilt fx-magnet) ---- */
:root:has(.v78) { --bg: #0c0c0d; --bg-2: #121214; --surface: #17171a; --surface-2: #1f1f23; --line: #2b2b30; --fg: #ececef; --muted: #a4a4ac; --faint: #8d8d96; --accent: #ff7a1a; --accent-2: #ffa04d; --btn-1: #e96f17; --btn-2: #c85f14; --accent-text: #ff9447; --accent-soft: rgba(255, 122, 26, .14); --g0: 12, 12, 13; }
.v78 .v7-inner, .v78 .top-grid, .v78 .rec-grid, .v78 .hx-numbers { perspective: 900px; }
.v78 .card, .v78 .hx-live-item, .v78 .hx-num { position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .25s var(--ease), box-shadow .3s; }
.v78 .card:hover, .v78 .hx-live-item:hover, .v78 .hx-num:hover { box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 122, 26, .3); }
.v78 .card::after, .v78 .hx-live-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(115deg, transparent calc(var(--gx, 50%) - 30%), rgba(255, 255, 255, .08) var(--gx, 50%), transparent calc(var(--gx, 50%) + 30%)); }
.v78 .card:hover::after, .v78 .hx-live-item:hover::after { opacity: 1; }
.v78 .hx-play, .v78 .hx-ghost { transform: translate(var(--tx, 0), var(--ty, 0)); transition: transform .25s var(--ease), box-shadow .3s; border-radius: 14px; }
.v78 .hx-play:hover { box-shadow: 0 20px 40px -12px rgba(255, 122, 26, .7); }
.v78 .hx-name img { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .8)); }
/* ---- 79 · Minimal assoluto (fx-reveal) ---- */
:root:has(.v79) { --bg: #000000; --bg-2: #070707; --surface: #0c0c0c; --surface-2: #141414; --line: #222222; --fg: #f2f2f2; --muted: #a0a0a0; --faint: #8a8a8a; --accent: #ff5f1f; --accent-2: #ff8c4d; --btn-1: #f75c1e; --btn-2: #d44f1a; --accent-text: #ff8247; --accent-soft: rgba(255, 95, 31, .14); --g0: 0, 0, 0; }
.v79 .v7-hero { background: linear-gradient(90deg, #000 22%, rgba(0, 0, 0, .55) 74%), linear-gradient(180deg, transparent 55%, #000), var(--hx-map, none) center 35% / cover no-repeat, #000;
  background-blend-mode: normal, normal, luminosity; }
.v79 .v7-band { background-blend-mode: normal, luminosity, normal; border-block-color: #1a1a1a; }
.v79 .card, .v79 .hx-live-item, .v79 .hx-num { background: transparent !important; box-shadow: none; border-color: #222; transition: border-color .4s; }
.v79 .card:hover, .v79 .hx-live-item:hover, .v79 .hx-num:hover { border-color: var(--accent); }
.v79 .sec-head h2 { font-weight: 300; font-size: 1.7rem; letter-spacing: -.01em; }
.v79 .hx-tagline { font-weight: 300; }
.v79 .hx-play { background: #fff !important; color: #000 !important; border-radius: 0; box-shadow: none; transition: background .35s, color .35s; }
.v79 .hx-play:hover, .v79 .hx-play:focus-visible { background: var(--btn-1) !important; color: #fff !important; }
.v79 .hx-ghost { border: 0; border-radius: 0; padding-inline: 4px; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease); }
.v79 .hx-ghost:hover { background-size: 100% 2px; border: 0; }
.v79 ::selection { background: var(--accent); color: #000; }
.v79 { --radius: 0px; --fx-from: none; --fx-dur: 1.1s; }
/* ---- 80 · HUD tattico (fx-reveal) ---- */
:root:has(.v80) { --bg: #0b1012; --bg-2: #101618; --surface: #141c1f; --surface-2: #1b2528; --line: #263336; --fg: #e6eff0; --muted: #9aabad; --faint: #869799; --accent: #ff7a2e; --accent-2: #ffa25e; --btn-1: #e96f2b; --btn-2: #c85f25; --accent-text: #ff9358; --accent-soft: rgba(255, 122, 46, .14); --g0: 11, 16, 18; }
.v80 .v7-hero { overflow: hidden; isolation: isolate; }
.v80 .v7-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.v80 .v7-hero::after { content: ""; position: absolute; left: 0; right: 0; height: 120px; top: -120px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 122, 46, .12), transparent); animation: v80-scan 6s linear infinite; }
@keyframes v80-scan { to { top: 110%; } }
.v80 .v7-inner { position: relative; z-index: 1; }
.v80 .v7-kick, .v80 .label, .v80 .hx-num-l, .v80 .sec-head p { font-family: var(--mono); letter-spacing: .08em; }
.v80 .card, .v80 .hx-live-item, .v80 .hx-num { position: relative; border-radius: 2px; background: rgba(20, 28, 31, .82) !important; }
.v80 .card::before, .v80 .hx-live-item::before, .v80 .hx-num::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: 2px; transition: inset .3s var(--ease);
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / 14px 2px, linear-gradient(var(--accent), var(--accent)) 0 0 / 2px 14px,
  linear-gradient(var(--accent), var(--accent)) 100% 100% / 14px 2px, linear-gradient(var(--accent), var(--accent)) 100% 100% / 2px 14px; background-repeat: no-repeat; }
.v80 :is(.card, .hx-live-item, .hx-num):hover::before { inset: -6px; }
.v80 .hx-play, .v80 .hx-ghost { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.v80 .hx-name:hover img { animation: v80-glitch .5s steps(2) 2; }
@keyframes v80-glitch { 0% { filter: drop-shadow(3px 0 0 rgba(255, 0, 60, .7)) drop-shadow(-3px 0 0 rgba(0, 220, 255, .7)); transform: translateX(2px); }
  50% { filter: drop-shadow(-3px 0 0 rgba(255, 0, 60, .7)) drop-shadow(3px 0 0 rgba(0, 220, 255, .7)); transform: translateX(-2px); } 100% { filter: none; transform: none; } }
.v80 { --fx-from: translateY(0); --fx-filter: brightness(2.2) contrast(.6); --fx-dur: .5s; }
/* ---- 81 · Tramonto (fx-reveal) ---- */
:root:has(.v81) { --bg: #0e0c14; --bg-2: #13111b; --surface: #191622; --surface-2: #211d2c; --line: #2e293c; --fg: #efecf5; --muted: #aaa4b8; --faint: #938da3; --accent: #ff6d3a; --accent-2: #ff4f8a; --btn-1: #f06736; --btn-2: #ce592e; --accent-text: #ff8a62; --accent-soft: rgba(255, 109, 58, .14); --g0: 14, 12, 20; }
.v81 .v7-hero { overflow: hidden; isolation: isolate; }
.v81 .v7-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .85;
  background: linear-gradient(120deg, #ff6d3a, #ff4f8a, #8b5cf6, #ff6d3a); background-size: 300% 300%; animation: v81-shift 18s ease-in-out infinite; }
@keyframes v81-shift { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.v81 .v7-inner { position: relative; z-index: 1; }
.v81 .sec-head h2 { background: linear-gradient(90deg, #ffb27a, #ff6d8f, #b79cff, #ffb27a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: v81-text 8s linear infinite; }
@keyframes v81-text { to { background-position: 200% 0; } }
.v81 .hx-play, .v81 .hx-ghost { border-radius: 999px; }
.v81 .hx-play { background: linear-gradient(90deg, #c9461d, #c2305f, #c9461d) !important; background-size: 200% 100% !important; transition: background-position .7s var(--ease), box-shadow .4s; }
.v81 .hx-play:hover { background-position: 100% 0 !important; box-shadow: 0 12px 34px -8px rgba(255, 79, 138, .7); }
.v81 .hx-ghost { border: 1.5px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, #ff6d3a, #ff4f8a, #8b5cf6) border-box; }
.v81 .card { transition: transform .4s var(--ease), box-shadow .4s; } .v81 .card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -18px rgba(255, 79, 138, .6); }
.v81 { --radius: 18px; --fx-from: translateY(20px) scale(.98); }
/* ---- 82 · Colore che scorre (fx-progress fx-reveal) ---- */
:root:has(.v82) { --bg: #0e0e0e; --bg-2: #141414; --surface: #1a1a1a; --surface-2: #222222; --line: #2f2f2f; --fg: #f2f2f2; --muted: #a8a8a8; --faint: #919191; --accent: #e8572a; --accent-2: #f48352; --btn-1: #e8572a; --btn-2: #c84b24; --accent-text: #f37a52; --accent-soft: rgba(232, 87, 42, .14); --g0: 14, 14, 14; }
.v82 { --dyn: hsl(calc(14 + var(--fx-p, 0) * 30) 88% 56%); counter-reset: v82s; }
.fx-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: calc(var(--fx-p, 0) * 100%); z-index: 1000; pointer-events: none;
  background: linear-gradient(90deg, hsl(14 88% 52%), hsl(calc(14 + var(--fx-p, 0) * 30) 90% 56%)); box-shadow: 0 0 12px hsl(calc(14 + var(--fx-p, 0) * 30) 90% 56%); }
.v82 .sec-head h2::before { counter-increment: v82s; content: counter(v82s, decimal-leading-zero); margin-right: 12px; font-size: .8em; font-weight: 900; color: var(--dyn); font-variant-numeric: tabular-nums; }
.v82 .sec-link, .v82 .label { color: var(--dyn); transition: color .3s; }
.v82 .hx-play { background: hsl(calc(14 + var(--fx-p, 0) * 20) 78% 44%) !important; transition: background .3s, transform .2s; }
.v82 .hx-play:hover { transform: translateY(-2px); }
.v82 .card:hover, .v82 .hx-num:hover { border-color: var(--dyn); }
.v82 .card { transition: border-color .3s; }
.v82 { --fx-from: translateY(24px); }
/* ---- 83 · Metallo (fx-reveal) ---- */
:root:has(.v83) { --bg: #0e1012; --bg-2: #131518; --surface: #181b1f; --surface-2: #202429; --line: #2e3339; --fg: #ebeef1; --muted: #a3aab3; --faint: #8d949d; --accent: #c8693a; --accent-2: #e09060; --btn-1: #c8693a; --btn-2: #ac5a32; --accent-text: #e5915f; --accent-soft: rgba(200, 105, 58, .14); --g0: 14, 16, 18; }
.v83 .card, .v83 .hx-live-item, .v83 .hx-num { position: relative; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px), linear-gradient(180deg, #1d2126, #15181c) !important;
  border-color: #353b42; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 20px -10px rgba(0, 0, 0, .8); }
.v83 .card::after, .v83 .hx-live-item::after, .v83 .hx-num::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .09) 45%, rgba(255, 220, 190, .14) 50%, transparent 62%); transition: transform 1s var(--ease); }
.v83 :is(.card, .hx-live-item, .hx-num):hover::after { transform: translateX(130%); }
.v83 .hx-play { background: linear-gradient(180deg, #d27a48, #9d4c22) !important; border: 1px solid #6e3414; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 6px 14px -6px rgba(0, 0, 0, .9) !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); }
.v83 .hx-play:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5) !important; transform: translateY(1px); }
.v83 .hx-ghost { background: linear-gradient(180deg, #262b31, #1a1e22); border: 1px solid #3a4048; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.v83 .hx-num-v { background: linear-gradient(180deg, #f3f5f7, #8f99a3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v83 { --radius: 8px; --fx-from: translateY(14px); }
/* ---- 84 · Messa a fuoco (fx-reveal) ---- */
:root:has(.v84) { --bg: #111417; --bg-2: #161a1e; --surface: #1c2126; --surface-2: #242a30; --line: #323a42; --fg: #edf0f3; --muted: #a8b0b8; --faint: #929aa3; --accent: #ff7b3a; --accent-2: #ffa36a; --btn-1: #e97034; --btn-2: #c8602d; --accent-text: #ff935f; --accent-soft: rgba(255, 123, 58, .14); --g0: 17, 20, 23; }
.v84 { --fx-from: scale(1.02); --fx-filter: blur(12px); --fx-dur: .9s; }
.v84 .top-grid:has(.card:hover) .card:not(:hover), .v84 .rec-grid:has(> :hover) > :not(:hover), .v84 .v7-live:has(.hx-live-item:hover) .hx-live-item:not(:hover),
.v84 .hx-numbers:has(.hx-num:hover) .hx-num:not(:hover) { opacity: .45; filter: saturate(.3) blur(1px); }
.v84 .card, .v84 .hx-live-item, .v84 .hx-num, .v84 .rec-grid > * { transition: opacity .35s, filter .35s, transform .35s var(--ease); }
.v84 .card:hover, .v84 .hx-live-item:hover, .v84 .hx-num:hover { transform: scale(1.02); }
.v84 .hx-play, .v84 .hx-ghost { outline: 2px solid transparent; outline-offset: 0; transition: outline-offset .3s var(--ease), outline-color .3s; border-radius: 10px; }
.v84 .hx-play:hover, .v84 .hx-play:focus-visible { outline-color: rgba(255, 123, 58, .55); outline-offset: 5px; }
.v84 .hx-ghost:hover, .v84 .hx-ghost:focus-visible { outline-color: rgba(237, 240, 243, .35); outline-offset: 5px; }
/* ---- 85 · Elastico (fx-ripple fx-reveal) ---- */
:root:has(.v85) { --bg: #101012; --bg-2: #151518; --surface: #1b1b1f; --surface-2: #232328; --line: #303036; --fg: #eeeef1; --muted: #a6a6af; --faint: #8f8f99; --accent: #ff6b4a; --accent-2: #ff9a74; --btn-1: #f06546; --btn-2: #ce573c; --accent-text: #ff8a6e; --accent-soft: rgba(255, 107, 74, .14); --g0: 16, 16, 18; }
.v85 { --radius: 22px; --spring: cubic-bezier(.34, 1.56, .64, 1); --fx-from: scale(.85); --fx-ease: cubic-bezier(.34, 1.56, .64, 1); }
.v85 .card, .v85 .hx-live-item, .v85 .hx-num { position: relative; overflow: hidden; transition: transform .45s var(--spring), box-shadow .3s; }
.v85 .card:hover, .v85 .hx-live-item:hover, .v85 .hx-num:hover { transform: scale(1.035); box-shadow: 0 18px 40px -20px rgba(255, 107, 74, .6); }
.v85 .hx-play, .v85 .hx-ghost { position: relative; overflow: hidden; border-radius: 999px; transition: transform .4s var(--spring); }
.v85 .hx-play:hover, .v85 .hx-ghost:hover { transform: scale(1.07); } .v85 .hx-play:active, .v85 .hx-ghost:active { transform: scale(.94); }
.fx-ripple-dot { position: absolute; left: var(--x0); top: var(--y0); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .35); animation: fx-ripple .7s ease-out forwards; }
@keyframes fx-ripple { to { transform: scale(40); opacity: 0; } }
/* ---- 86 · Gradiente vivo (fx-reveal) ---- */
:root:has(.v86) { --bg: #0b1112; --bg-2: #101718; --surface: #141e20; --surface-2: #1b2729; --line: #263638; --fg: #e7eeee; --muted: #9eacad; --faint: #889798; --accent: #f07a32; --accent-2: #f9a05c; --btn-1: #e2722f; --btn-2: #c26228; --accent-text: #f69a5c; --accent-soft: rgba(240, 122, 50, .14); --g0: 11, 17, 18; }
.v86 .v7-band { isolation: isolate; overflow: hidden; background-blend-mode: normal, overlay, normal; }
.v86 .v7-band::before { content: ""; position: absolute; inset: -40%; z-index: -1; opacity: .55; filter: blur(30px);
  background: radial-gradient(30% 40% at 20% 30%, rgba(240, 122, 50, .55), transparent 70%), radial-gradient(30% 40% at 80% 60%, rgba(20, 184, 166, .45), transparent 70%),
  radial-gradient(25% 30% at 50% 90%, rgba(59, 130, 246, .3), transparent 70%); animation: v86-mesh 26s ease-in-out infinite alternate; }
@keyframes v86-mesh { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(8%, -6%) rotate(25deg); } }
.v86 .v7-hero { background-blend-mode: normal, normal, normal, normal; }
.v86 .card, .v86 .hx-live-item { background: rgba(20, 30, 32, .6) !important; backdrop-filter: blur(12px); transition: transform .35s var(--ease), border-color .35s; }
.v86 .card:hover, .v86 .hx-live-item:hover { transform: translateY(-3px); border-color: rgba(20, 184, 166, .55); }
.v86 .hx-play { border-radius: 10px; transition: box-shadow .4s; } .v86 .hx-play:hover { box-shadow: 0 0 0 4px rgba(20, 184, 166, .35), 0 12px 30px -10px rgba(240, 122, 50, .7); }
.v86 .hx-ghost:hover { border-color: #14b8a6; background: rgba(20, 184, 166, .1); }
.v86 { --fx-from: translateY(18px); }
/* ---- 87 · Oro (fx-reveal) ---- */
:root:has(.v87) { --bg: #0f0f10; --bg-2: #141415; --surface: #1a1a1c; --surface-2: #222224; --line: #2f2f32; --fg: #eeede9; --muted: #a8a6a0; --faint: #918f89; --accent: #e9772b; --accent-2: #e8b04f; --btn-1: #e2732a; --btn-2: #c26324; --accent-text: #f0904f; --accent-soft: rgba(233, 119, 43, .14); --g0: 15, 15, 16; }
.v87 .v7-kick span:last-child { background: linear-gradient(90deg, #a87b2c, #f6d78a, #a87b2c); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: v87-shimmer 4s linear infinite; }
@keyframes v87-shimmer { to { background-position: 200% 0; } }
.v87 .sec-head h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: .02em; }
.v87 .sec { position: relative; }
.v87 .v7-band .sec::before { content: ""; position: absolute; inset: -16px -18px; border: 1px solid rgba(232, 176, 79, .45); border-radius: 4px; pointer-events: none;
  clip-path: inset(0 100% 100% 0); transition: clip-path 1.6s var(--ease) .2s; }
.v87 .v7-band.fx-in .sec::before, .v87:not(.fx-armed) .v7-band .sec::before { clip-path: inset(0 0 0 0); }
.v87 .hx-play { background: transparent !important; color: #f0c56a !important; border: 1px solid #c9a04a; border-radius: 2px; box-shadow: none !important; transition: background .4s, color .4s; }
.v87 .hx-play:hover, .v87 .hx-play:focus-visible { background: linear-gradient(135deg, #f0c56a, #b88a35) !important; color: #1a1205 !important; }
.v87 .hx-ghost { border-radius: 2px; border-color: rgba(232, 176, 79, .3); }
.v87 .hx-num { border-color: rgba(232, 176, 79, .25); } .v87 .hx-num-v { color: #f0c56a; }
.v87 .card:hover { border-color: rgba(232, 176, 79, .5); } .v87 .card { transition: border-color .4s; }
.v87 { --radius: 4px; --fx-from: translateY(10px); --fx-dur: 1.2s; }
/* ---- 88 · Tagli diagonali (fx-reveal) ---- */
:root:has(.v88) { --bg: #111111; --bg-2: #171717; --surface: #1d1d1d; --surface-2: #252525; --line: #333333; --fg: #f0f0f0; --muted: #a9a9a9; --faint: #929292; --accent: #ff6a2a; --accent-2: #ff9a5c; --btn-1: #f06428; --btn-2: #ce5622; --accent-text: #ff8a57; --accent-soft: rgba(255, 106, 42, .14); --g0: 17, 17, 17; }
.v88 .v7-hero { overflow: hidden; }
.v88 .v7-hero::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--btn-1); transform-origin: right; animation: v88-curtain 1.1s cubic-bezier(.77, 0, .18, 1) .15s both; pointer-events: none; }
@keyframes v88-curtain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.v88 .v7-band { clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%); padding-block: 80px 96px; margin-top: 30px; }
.v88 .hx-play, .v88 .hx-ghost { transform: skewX(-12deg); border-radius: 0; transition: transform .25s var(--ease), background .25s; }
.v88 .hx-play:hover, .v88 .hx-ghost:hover { transform: skewX(-12deg) translateX(4px); }
.v88 .card { position: relative; overflow: hidden; transition: transform .3s var(--ease); }
.v88 .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease); }
.v88 .card:hover::before { transform: scaleY(1); } .v88 .card:hover { transform: translateX(4px); }
.v88 .sec-head h2 { text-transform: uppercase; font-style: italic; font-weight: 900; letter-spacing: .02em; }
.v88 { --radius: 0px; --fx-from: translateX(-30px) skewX(-4deg); }
/* ---- 89 · Verde petrolio e arancio (fx-layer fx-reveal) ---- */
:root:has(.v89) { --bg: #0a1315; --bg-2: #0f1a1c; --surface: #132124; --surface-2: #1a2b2e; --line: #243a3d; --fg: #e6f0f0; --muted: #9cb0b1; --faint: #86999a; --accent: #ff7a33; --accent-2: #ffa463; --btn-1: #e96f2f; --btn-2: #c85f28; --accent-text: #ff9a5f; --accent-soft: rgba(255, 122, 51, .14); --g0: 10, 19, 21; }
.v89 .v7-hero::before { filter: saturate(.8) contrast(1.1); animation: v89-kb 50s ease-in-out infinite alternate; }
@keyframes v89-kb { from { transform: scale(1.05) translate(2%, 0); } to { transform: scale(1.18) translate(-2%, -2%); } }
.v89 .v7-hero::after { background: radial-gradient(120% 90% at 40% 40%, transparent 40%, rgba(0, 0, 0, .65)), linear-gradient(rgba(10, 70, 75, .35), rgba(10, 70, 75, .35)),
  linear-gradient(90deg, rgba(var(--g0), .9) 18%, rgba(var(--g0), .3) 74%), linear-gradient(180deg, transparent 55%, var(--bg)); }
.v89 .v7-band { background-blend-mode: normal, luminosity, normal; position: relative; isolation: isolate; }
.v89 .v7-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 30%, rgba(20, 120, 125, .35)); mix-blend-mode: color; }
.v89 .server-tags .tag, .v89 .pill { border-color: rgba(45, 180, 185, .4); }
.v89 .hx-play { border-radius: 10px; transition: box-shadow .35s, transform .2s; }
.v89 .hx-play:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(255, 122, 51, .8), 0 0 0 3px rgba(45, 180, 185, .35); }
.v89 .card { transition: border-color .35s, transform .35s var(--ease); } .v89 .card:hover { border-color: rgba(45, 180, 185, .55); transform: translateY(-2px); }
.v89 { --fx-from: translateY(22px); }
/* ---- 90 · Mix 85 · 88 · 89 (owner 2026-11-04): spring + ripple (85, prevalent), diagonal cuts + skewed buttons + accent bar (88),
   teal/orange grade + slow Ken Burns + vignette (89). No names ticker; Discord always blue; the header menu speaks the same language ---- */
:root:has(.v90) { --bg: #0a1315; --bg-2: #0f1a1c; --surface: #132124; --surface-2: #1a2b2e; --line: #243a3d; --fg: #e6f0f0; --muted: #9cb0b1; --faint: #86999a;
  --accent: #ff7a33; --accent-2: #ffa463; --btn-1: #e96f2f; --btn-2: #c85f28; --accent-text: #ff9a5f; --accent-soft: rgba(255, 122, 51, .14); --g0: 10, 19, 21;
  --teal: 45, 180, 185; --spring: cubic-bezier(.34, 1.56, .64, 1); --discord-1: #7b86ff; --discord-2: #5865f2; }
.v90 { --radius: 4px; --fx-from: scale(.88) translateY(18px); --fx-ease: cubic-bezier(.34, 1.56, .64, 1); --fx-dur: .8s; }
.v90 .hx-ticker { display: none; }
/* hero: map in slow Ken Burns, teal grade + vignette (owner: never an intro transition) */
.v90 .v7-hero::before { filter: saturate(.8) contrast(1.1); animation: v90-kb 50s ease-in-out infinite alternate; }
@keyframes v90-kb { from { transform: scale(1.05) translate(2%, 0); } to { transform: scale(1.18) translate(-2%, -2%); } }
.v90 .v7-hero::after { background: radial-gradient(120% 90% at 40% 40%, transparent 40%, rgba(0, 0, 0, .65)), linear-gradient(rgba(10, 70, 75, .35), rgba(10, 70, 75, .35)),
  linear-gradient(90deg, rgba(var(--g0), .9) 18%, rgba(var(--g0), .3) 74%), linear-gradient(180deg, transparent 55%, var(--bg)); }
/* bands: diagonal cuts with the teal grade */
.v90 .v7-band { clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%); padding-block: 80px 96px; margin-top: 30px;
  background-blend-mode: normal, luminosity, normal; position: relative; isolation: isolate; }
.v90 .v7-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 30%, rgba(20, 120, 125, .35)); mix-blend-mode: color; }
/* owner 2026-11-04: movement on every image. Band banners on their own layer with a slow Ken Burns (each band its own path), news art floating */
.v90 .v7-band { background: var(--bg); overflow: hidden; }
.v90 .v7-band::after { content: ""; position: absolute; inset: -7%; z-index: -2; pointer-events: none; background: var(--hx-banner, none) right center / cover no-repeat;
  filter: saturate(.55) brightness(.92); animation: v90-band-a 42s ease-in-out infinite alternate; }
.v90 .v7-band::before { mix-blend-mode: normal; background: linear-gradient(90deg, rgba(var(--g0), .95) 25%, rgba(var(--g0), .62)), linear-gradient(90deg, transparent 30%, rgba(20, 120, 125, .28)); }
.v90 .v7-band.b2::after { animation-name: v90-band-b; animation-duration: 48s; }
.v90 .v7-band.b3::after { animation-name: v90-band-c; animation-duration: 45s; }
@keyframes v90-band-a { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-3%, 2%); } }
@keyframes v90-band-b { from { transform: scale(1.14) translate(-2%, -1%); } to { transform: scale(1.03) translate(2%, 1%); } }
@keyframes v90-band-c { from { transform: scale(1.04) translate(2%, 2%); } to { transform: scale(1.15) translate(-1%, -2%); } }
.v90 .news-art { animation: v90-float 7s ease-in-out infinite; }
@keyframes v90-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-2deg); } }
.v90 .sec-head h2 { text-transform: uppercase; font-style: italic; font-weight: 900; letter-spacing: .02em; }
.v90 .server-tags .tag, .v90 .pill { border-color: rgba(var(--teal), .4); }
/* buttons: skewed, spring on hover, pressed on click, ripple from the click point */
.v90 .hx-play, .v90 .hx-ghost { position: relative; overflow: hidden; border-radius: 0; transform: skewX(-12deg); transition: transform .45s var(--spring), box-shadow .35s; }
.v90 .hx-play:hover, .v90 .hx-ghost:hover, .v90 .hx-play:focus-visible, .v90 .hx-ghost:focus-visible { transform: skewX(-12deg) scale(1.07); }
.v90 .hx-play:active, .v90 .hx-ghost:active { transform: skewX(-12deg) scale(.94); transition-duration: .12s; }
.v90 .hx-play:hover { box-shadow: 0 12px 30px -10px rgba(255, 122, 51, .8), 0 0 0 3px rgba(var(--teal), .35); }
/* Discord: always blue, whatever the variant does to .hx-play */
.v90 .hx-play.hx-discord { background: linear-gradient(135deg, var(--discord-1), var(--discord-2)); color: #fff; box-shadow: 0 10px 28px -10px rgba(88, 101, 242, .7); }
.v90 .hx-play.hx-discord:hover, .v90 .hx-play.hx-discord:focus-visible { box-shadow: 0 14px 34px -10px rgba(88, 101, 242, .9), 0 0 0 3px rgba(123, 134, 255, .35); }
/* cards: spring scale, accent bar that grows, teal border */
.v90 .card, .v90 .hx-live-item, .v90 .hx-num { position: relative; overflow: hidden; }
.vx7.v90.fx-armed :is(.card, .hx-num).fx-in, .v90 .hx-live-item { transition: transform .45s var(--spring), border-color .35s, box-shadow .35s; }
.v90 .card:hover, .v90 .hx-live-item:hover, .v90 .hx-num:hover { transform: scale(1.035); border-color: rgba(var(--teal), .55); box-shadow: 0 18px 40px -20px rgba(255, 122, 51, .55); }
.v90 .card:not(.tm-card, .pl-card, .sh-card, .bio)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--accent), rgb(var(--teal))); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--spring); }
.v90 .card:not(.tm-card, .pl-card, .sh-card, .bio):hover::before { transform: scaleY(1); }
.v90 .fx-ripple-dot { background: rgba(255, 255, 255, .32); }
/* header menu: teal glass, a gradient line under it, links with a skewed bar that springs in (no pills); Discord stays blue */
:root:has(.v90) .site-header { background: rgba(10, 19, 21, .78); border-bottom: 0; box-shadow: 0 1px 0 rgba(var(--teal), .18); }
:root:has(.v90) .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, rgb(var(--teal)) 70%, transparent); opacity: .7; }
:root:has(.v90) .brand span { font-style: italic; font-weight: 900; }
:root:has(.v90) .site-header .wrap { gap: 18px; }
:root:has(.v90:not(.mx)) .nav a { padding-inline: 10px; }
/* menu items = the same skewed ghost buttons as "Guide" / "Come entrare": hover and the current page get the accent border + soft fill, spring and press */
:root:has(.v90:not(.mx)) .nav { gap: 4px; }
:root:has(.v90:not(.mx)) .nav a:not(.nav-ext) { position: relative; overflow: hidden; border-radius: 0; transform: skewX(-12deg); color: var(--muted); background: transparent;
  box-shadow: inset 0 0 0 1px transparent; transition: transform .45s var(--spring), box-shadow .25s, background .25s, color .25s; }
:root:has(.v90:not(.mx)) .nav a:not(.nav-ext)::before { display: none; }
:root:has(.v90:not(.mx)) .nav a:not(.nav-ext):hover, :root:has(.v90:not(.mx)) .nav a:not(.nav-ext):focus-visible { color: var(--fg); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent); transform: skewX(-12deg) scale(1.07); }
:root:has(.v90:not(.mx)) .nav a[aria-current="page"] { color: var(--fg); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
:root:has(.v90:not(.mx)) .nav a:not(.nav-ext):active { transform: skewX(-12deg) scale(.94); transition-duration: .12s; }
:root:has(.v90:not(.mx)) .nav a.nav-ext { border-radius: 0; transform: skewX(-12deg); margin-left: 2px; color: #fff;
  background: linear-gradient(135deg, var(--discord-1), var(--discord-2)); box-shadow: 0 6px 18px -8px rgba(88, 101, 242, .8); animation: none; transition: transform .45s var(--spring), box-shadow .35s; }
:root:has(.v90:not(.mx)) .nav a.nav-ext::before { display: none; }
:root:has(.v90:not(.mx)) .nav a.nav-ext:hover, :root:has(.v90:not(.mx)) .nav a.nav-ext:focus-visible { color: #fff; transform: skewX(-12deg) scale(1.07); box-shadow: 0 10px 24px -8px rgba(88, 101, 242, 1); }
:root:has(.v90:not(.mx)) .nav-mobile nav a.nav-ext { color: #fff; background: linear-gradient(135deg, var(--discord-1), var(--discord-2)); animation: none; border-radius: 0; }
:root:has(.v90:not(.mx)) .nav-mobile nav a:not(.nav-ext)::before { background: rgb(var(--teal)); border-radius: 0; }
:root:has(.v90:not(.mx)) .lang-switch a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
/* owner 2026-11-04: photos (map + banners) as wide as the site's frames (the .wrap content, same as the news/number boxes), not full-bleed,
   with parallax on scroll (--pp from previews-fx.js fx-pplx; `translate` so it adds to the Ken Burns `transform`) */
.v90 .v7-hero, .v90 .v7-band { margin-inline: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent); }
.v90 .v7-hero { overflow: hidden; }
.v90 .v7-inner { width: calc(100% - 48px); }
.v90 .v7-hero::before { inset: -16% -6%; translate: 0 calc(var(--pp, 0) * -.14px); will-change: transform, translate; }
.v90 .v7-band::after { inset: -20% -6%; translate: 0 calc(var(--pp, 0) * -.16px); will-change: transform, translate; }
@media (max-width: 640px) { .v90 .v7-inner { width: calc(100% - 28px); } }
/* the four wipe numbers inside the hero, under the site name (owner 2026-11-04): compact glass tiles, not clickable */
.v90 .v7-hero .hx-numbers { margin: 4px 0 6px; gap: 14px; max-width: none; } /* full row, as wide as the live cards (owner) */
.v90 .v7-hero .hx-num { padding: 18px 22px; background: rgba(var(--g0), .55); backdrop-filter: blur(6px); border-color: rgba(var(--teal), .28); cursor: default; }
.v90 .v7-hero .hx-num:hover { transform: none; box-shadow: none; }
.v90 .v7-hero .hx-num-v { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.v90 .v7-hero .hx-num-l { font-size: .86rem; }
/* photos v2 (owner 2026-11-04 "miglioriamo movimento e transizione, sfumiamo meno a sinistra"): a slow drift through four points that loops
   without the stop of an alternate Ken Burns, each photo with its own path, length and phase (negative delay: already moving at load);
   parallax eased so it trails the scroll; lighter shading on the left */
.v90 .v7-hero::before { filter: saturate(.85) contrast(1.08); animation: v90-drift-h 84s cubic-bezier(.45, .05, .55, .95) -20s infinite; transition: translate .9s cubic-bezier(.2, .7, .2, 1); }
.v90 .v7-band::after { filter: saturate(.7) brightness(.96); animation: v90-drift-a 72s cubic-bezier(.45, .05, .55, .95) -12s infinite; transition: translate .9s cubic-bezier(.2, .7, .2, 1); }
.v90 .v7-band.b2::after { animation-name: v90-drift-b; animation-duration: 88s; animation-delay: -40s; }
.v90 .v7-band.b3::after { animation-name: v90-drift-c; animation-duration: 78s; animation-delay: -27s; }
@keyframes v90-drift-h { 0%, 100% { transform: scale(1.06) translate3d(1.5%, 0, 0); } 25% { transform: scale(1.12) translate3d(-1%, -1.5%, 0); }
  50% { transform: scale(1.17) translate3d(-2.5%, .5%, 0); } 75% { transform: scale(1.11) translate3d(.5%, 1.5%, 0); } }
@keyframes v90-drift-a { 0%, 100% { transform: scale(1.04) translate3d(0, 0, 0); } 30% { transform: scale(1.12) translate3d(-2.5%, 1.5%, 0); }
  60% { transform: scale(1.15) translate3d(1%, -1.5%, 0); } 80% { transform: scale(1.08) translate3d(2%, .5%, 0); } }
@keyframes v90-drift-b { 0%, 100% { transform: scale(1.14) translate3d(-2%, -1%, 0); } 35% { transform: scale(1.05) translate3d(1.5%, 1%, 0); }
  65% { transform: scale(1.1) translate3d(2.5%, -1%, 0); } 85% { transform: scale(1.16) translate3d(-.5%, 1.5%, 0); } }
@keyframes v90-drift-c { 0%, 100% { transform: scale(1.06) translate3d(2%, 2%, 0); } 25% { transform: scale(1.15) translate3d(-1%, -2%, 0); }
  55% { transform: scale(1.09) translate3d(-2.5%, 0, 0); } 80% { transform: scale(1.13) translate3d(1%, -1%, 0); } }
.v90 .v7-hero::after { background: radial-gradient(120% 90% at 45% 40%, transparent 45%, rgba(0, 0, 0, .55)), linear-gradient(rgba(10, 70, 75, .28), rgba(10, 70, 75, .28)),
  linear-gradient(90deg, rgba(var(--g0), .78) 10%, rgba(var(--g0), .22) 70%), linear-gradient(180deg, transparent 55%, var(--bg)); }
.v90 .v7-band::before { background: linear-gradient(90deg, rgba(var(--g0), .84) 15%, rgba(var(--g0), .48)), linear-gradient(90deg, transparent 30%, rgba(20, 120, 125, .24)); }
/* online faces (owner 2026-11-04): normal size at rest; on hover they grow like the macOS Dock (the face under the pointer most, the
   neighbours less), with a slow zoom in and out. Scale --dk from previews-fx.js fx-dock */
.v90 .hx-faces { min-height: 30px; margin-top: 6px; }
.v90 .hx-face { position: relative; border: 2px solid var(--surface); transform-origin: 50% 100%; transform: scale(var(--dk, 1));
  transition: transform .5s cubic-bezier(.25, .8, .25, 1), box-shadow .5s; will-change: transform; }
.v90 .hx-faces.is-docked .hx-face { transition-duration: .32s; }
.v90 .hx-face:hover { box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .7); }
/* raid traffic light (owner 2026-11-04): +50 % (44 → 66 px) and a bit more to the left */
.v90 .hx-live-item .tlight { height: 66px; right: 38px; }
.v90 .stat.has-tlight.hx-live-item { padding-right: 96px; }
/* one picture across all bands (fx-strip): the layer is the whole virtual box, shifted up by the band's offset; same drift for every slice,
   so the pieces stay aligned; a soft parallax shared by the group (JS --pp) */
.vx7.fx-strip .v7-band::after, .vx7.fx-strip .v7-band.b2::after, .vx7.fx-strip .v7-band.b3::after { inset: auto -4%; top: calc(var(--st-top, 0px) * -1); height: var(--st-h, 100%);
  background: var(--hx-banner, none) center / cover no-repeat; transform-origin: 50% 50%;
  animation: v90-drift-s 90s cubic-bezier(.45, .05, .55, .95) -30s infinite; translate: 0 calc(var(--pp, 0) * -.08px); }
@keyframes v90-drift-s { 0%, 100% { transform: scale(1.01) translate3d(0, 0, 0); } 33% { transform: scale(1.04) translate3d(-1.2%, .4%, 0); }
  66% { transform: scale(1.03) translate3d(1.2%, -.4%, 0); } }
/* map a bit lighter (owner 2026-11-04) */
.v90 .v7-hero::before { filter: saturate(.9) contrast(1.06) brightness(1.12); }
.v90 .v7-hero::after { background: radial-gradient(120% 90% at 45% 40%, transparent 50%, rgba(0, 0, 0, .42)), linear-gradient(rgba(10, 70, 75, .2), rgba(10, 70, 75, .2)),
  linear-gradient(90deg, rgba(var(--g0), .7) 10%, rgba(var(--g0), .12) 70%), linear-gradient(180deg, transparent 60%, var(--bg)); }
/* map with even less filter (owner 2026-11-04) */
.v90 .v7-hero::before { filter: saturate(.95) contrast(1.04) brightness(1.2); }
.v90 .v7-hero::after { background: radial-gradient(120% 90% at 45% 40%, transparent 55%, rgba(0, 0, 0, .3)), linear-gradient(rgba(10, 70, 75, .12), rgba(10, 70, 75, .12)),
  linear-gradient(90deg, rgba(var(--g0), .62) 10%, rgba(var(--g0), .05) 70%), linear-gradient(180deg, transparent 62%, var(--bg)); }
/* every box of the page = the "Novità" box (owner 2026-11-04): solid surface, the site line, same radius and shadow, no glass */
.v90 :is(.card, .hx-live-item, .hx-num, .hx-join), .vx7.v90 .v7-band .card, .vx7.v90 .v7-live .hx-live-item, .v90 .v7-hero .hx-num {
  background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: none; }
/* the bar on the left of a box on hover: the Italian flag (green, white, red) instead of orange/teal */
.v90 .card:not(.tm-card, .pl-card, .sh-card, .bio)::before, .v90 .hx-live-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1; pointer-events: none;
  background: linear-gradient(#009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%) !important; opacity: 1 !important; inset: 0 auto 0 0; border-radius: 0;
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--spring); } /* full colours: the site's hover tint on ::before used opacity .22 */
.v90 .card:not(.tm-card, .pl-card, .sh-card, .bio):hover::before, .v90 .hx-live-item:hover::before, .v90 .card:not(.tm-card, .pl-card, .sh-card, .bio):focus-visible::before, .v90 .hx-live-item:focus-visible::before { transform: scaleY(1); }
.v90 .card:hover, .v90 .hx-live-item:hover { border-color: color-mix(in srgb, var(--fg) 22%, var(--line)); }
/* "Entra nella community" built like "Novità" (owner 2026-11-04): section title above, a normal box below with the text and the buttons */
.v90 .hx-join90 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 18px 22px; position: relative; overflow: hidden; }
.v90 .hx-join90 > p { margin: 0; flex: 1 1 380px; color: var(--muted); }
.v90 .sec-join { margin-top: 56px; } .v90 .sec-join .sec-title p:empty { display: none; }
/* owner 2026-11-04: boxes that are not clickable have no hover effect (no zoom, no bar, no glow) */
.v90 :is(.card, .hx-live-item):not(a[href], button, [role="button"], [role="link"], [tabindex="0"], .rec-click, [data-expand]):hover {
  transform: none; box-shadow: var(--shadow); border-color: var(--line); cursor: default; }
.v90 :is(.card:not(.tm-card, .pl-card, .sh-card, .bio), .hx-live-item):not(a[href], button, [role="button"], [role="link"], [tabindex="0"], .rec-click, [data-expand])::before { display: none; }
/* owner 2026-11-04: one column for everything. Every box and table has the same width and the same left/right edges: the sections
   outside the photos are inset like the content inside the photos (24 px; 14 px on phones); photos stay the frame around them */
#hx.v90 > :not(.v7-hero):not(.v7-band) { margin-inline: 24px; }
@media (max-width: 640px) { #hx.v90 > :not(.v7-hero):not(.v7-band) { margin-inline: 14px; } }
#hx.v90 .sec-row { align-items: stretch; }
#hx.v90 .sec-row > .sec { display: flex; flex-direction: column; } #hx.v90 .sec-row > .sec > .card { flex: 1; }
/* owner 2026-11-04: tried photos as wide as the tables, reverted ("riallarga le foto": the flag bar of the boxes was no longer visible) */
/* map: much less fade at the bottom (owner 2026-11-04): it starts lower and never reaches the full page colour */
.v90 .v7-hero::after { background: radial-gradient(120% 90% at 45% 40%, transparent 55%, rgba(0, 0, 0, .3)), linear-gradient(rgba(10, 70, 75, .12), rgba(10, 70, 75, .12)),
  linear-gradient(90deg, rgba(var(--g0), .62) 10%, rgba(var(--g0), .05) 70%), linear-gradient(180deg, transparent 80%, rgba(var(--g0), .55)); }
/* team of the moment (owner 2026-11-04): trophy above the team name, everything centred; members exactly like /players/team */
.hx-team-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.hx-team-ico { grid-row: auto; font-size: 2.2rem; line-height: 1; }
.hx-team-head h3 { font-size: 1.45rem; }
.hx-team-card { text-align: center; }
.hx-team-card .tm-stats dt, .hx-team-card .tm-stats dd { text-align: center; }
.hx-team-card .tm-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 8px; }
.hx-team-card .tm-m { width: 110px; }
.v90 .hx-team-card .tm-m.plink { transition: background .3s, transform .45s var(--spring); }
.v90 .hx-team-card .tm-m.plink:hover, .v90 .hx-team-card .tm-m.plink:focus-visible { transform: translateY(-3px) scale(1.05); }
.v90 .hx-team-card .tm-m.plink:active { transform: scale(.95); transition-duration: .12s; }
/* the flag bar grows at the same speed on EVERY box (owner 2026-11-04: on "Ultime kill" it was instant). site.css (loaded later) gives
   [data-expand].expandable::before the same weight and only "transition: opacity", so the bar jumped: force the one timing everywhere */
.v90 :is(.card:not(.tm-card, .pl-card, .sh-card, .bio), .hx-live-item)::before { transition: transform .45s var(--spring) !important; transform-origin: top !important; }
.v90 :is(.card:not(.tm-card, .pl-card, .sh-card, .bio), .hx-live-item):is(:hover, :focus-visible)::before { transform: scaleY(1) !important; }
/* team of the moment: the trophy shines (gold glow that breathes, a slow sway) and sparkles (two twinkling stars) (owner 2026-11-04) */
.hx-team-ico { position: relative; display: inline-block; font-size: 2.6rem; line-height: 1; padding: 6px 10px;
  animation: cup-glow 2.8s ease-in-out infinite, cup-sway 5.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes cup-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 204, 77, .45)) brightness(1); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 204, 77, .95)) drop-shadow(0 0 28px rgba(255, 170, 40, .45)) brightness(1.18); } }
@keyframes cup-sway { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.06); } }
.hx-team-ico::before, .hx-team-ico::after { content: "✦"; position: absolute; color: #fff4c2; text-shadow: 0 0 6px #ffd24d, 0 0 12px #ffb52e; pointer-events: none;
  font-size: .42em; opacity: 0; animation: cup-spark 2.4s ease-in-out infinite; }
.hx-team-ico::before { top: 2px; right: 0; }
.hx-team-ico::after { bottom: 14px; left: 0; font-size: .32em; animation-delay: 1.2s; }
@keyframes cup-spark { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1.15) rotate(90deg); } 70% { opacity: 0; transform: scale(.4) rotate(160deg); } }
@media (prefers-reduced-motion: reduce) { .hx-team-ico { animation: none; filter: drop-shadow(0 0 10px rgba(255, 204, 77, .7)); } .hx-team-ico::before, .hx-team-ico::after { animation: none; opacity: .8; } }
/* side-by-side sections: titles in one row, boxes in the next, so the two boxes start and end at the same height even when one
   subtitle wraps on two lines (subgrid; the old browsers that lack it keep the plain layout) */
@supports (grid-template-rows: subgrid) {
  #hx.v90 .sec-row { grid-template-rows: auto 1fr; }
  #hx.v90 .sec-row > .sec { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
@media (prefers-reduced-motion: reduce) { :root:has(.v90) .nav a, :root:has(.v90) .nav a::before { transition: none !important; } }

/* ===== 100-110 · menu tests (owner 2026-11-04: "alcuni si lamentano del menu", the IT/EN switch disliked): test90 page, only the header menu
   and the language switch change. Every page has .mx + .m1NN (100 keeps the test90 menu and changes only the language switch) ===== */
:root:has(.mx) .nav a:not(.nav-ext) { position: relative; transform: none; border-radius: 0; background: none; box-shadow: none; color: var(--muted); transition: color .3s, background .3s, box-shadow .3s; }
:root:has(.mx) .nav a:not(.nav-ext)::before { display: none; }
:root:has(.mx) .nav a:not(.nav-ext):hover, :root:has(.mx) .nav a:not(.nav-ext):focus-visible, :root:has(.mx) .nav a[aria-current="page"] { color: var(--fg); background: none; box-shadow: none; }
:root:has(.mx) .nav a.nav-ext, :root:has(.mx) .nav-mobile nav a.nav-ext { color: #fff; background: linear-gradient(135deg, var(--discord-1), var(--discord-2)); animation: none;
  box-shadow: 0 6px 16px -8px rgba(88, 101, 242, .8); border-radius: 8px; transition: transform .3s, box-shadow .3s; }
:root:has(.mx) .nav a.nav-ext::before, :root:has(.mx) .nav-mobile nav a.nav-ext::before { display: none; }
:root:has(.mx) .nav a.nav-ext:hover, :root:has(.mx) .nav a.nav-ext:focus-visible { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(88, 101, 242, 1); }
:root:has(.mx) .lang-switch, :root:has(.m100) .lang-switch { border: 0; background: none; padding: 0; gap: 6px; }
:root:has(.mx) .lang-switch a, :root:has(.m100) .lang-switch a { background: none; box-shadow: none; transition: opacity .3s, color .3s, box-shadow .3s, filter .3s; }
/* round flags only (100, 103, 108) */
:root:has(:is(.m100, .m103, .m108, .m113)) .site-header .lang-switch a { font-size: 0; gap: 0; padding: 0; width: 28px; height: 28px; border-radius: 50%; justify-content: center; opacity: .5; }
:root:has(:is(.m100, .m103, .m108, .m113)) .site-header .lang-switch img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
:root:has(:is(.m100, .m103, .m108, .m113)) .site-header .lang-switch a:hover, :root:has(:is(.m100, .m103, .m108, .m113)) .site-header .lang-switch a:focus-visible { opacity: 1; background: none; }
:root:has(:is(.m100, .m103, .m108, .m113)) .site-header .lang-switch a[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); background: none; }
/* text only IT / EN (101, 105, 107) */
:root:has(:is(.m101, .m105, .m107, .m112, .m115)) .site-header .lang-switch img { display: none; }
:root:has(:is(.m101, .m105, .m107, .m112, .m115)) .site-header .lang-switch a { padding: 4px 6px; border-radius: 0; color: var(--faint); font-size: .82rem; }
:root:has(:is(.m101, .m105, .m107, .m112, .m115)) .site-header .lang-switch a:hover { color: var(--fg); background: none; }
:root:has(:is(.m101, .m105, .m107, .m112, .m115)) .site-header .lang-switch a[aria-current="true"] { color: var(--accent-text); background: none; box-shadow: none; }
:root:has(:is(.m101, .m105)) .site-header .lang-switch a + a { border-left: 1px solid var(--line); }
/* one button with the OTHER language only (104, 110) */
:root:has(:is(.m104, .m110, .m111, .m114)) .site-header .lang-switch a[aria-current="true"] { display: none; }

/* ---- 100 · menu di test90 (tasti inclinati), lingua a bandiere tonde ---- */
/* ---- 101 · Sottolineatura ---- */
:root:has(.m101) .site-header .nav a:not(.nav-ext)::before { display: block; content: ""; position: absolute; inset: auto 10px 2px; height: 2px; border-radius: 2px; opacity: 1;
  background: var(--accent); transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
:root:has(.m101) .site-header .nav a:not(.nav-ext):hover::before, :root:has(.m101) .site-header .nav a:not(.nav-ext):focus-visible::before, :root:has(.m101) .site-header .nav a[aria-current="page"]::before { transform: scaleX(1); }
/* ---- 102 · Segmenti ---- */
:root:has(.m102) .site-header .nav { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px; gap: 2px; align-items: center; }
:root:has(.m102) .site-header .nav a:not(.nav-ext) { border-radius: 7px; padding: 7px 10px; }
:root:has(.m102) .site-header .nav a:not(.nav-ext):hover { background: var(--surface-2); }
:root:has(.m102) .site-header .nav a[aria-current="page"] { background: linear-gradient(135deg, var(--btn-1), var(--btn-2)); color: #fff; }
:root:has(.m102) .site-header .nav a.nav-ext { border-radius: 7px; padding: 7px 12px; }
:root:has(.m102) .site-header .lang-switch { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px; gap: 2px; }
:root:has(.m102) .site-header .lang-switch a { border-radius: 7px; padding: 5px 9px; }
:root:has(.m102) .site-header .lang-switch a[aria-current="true"] { background: var(--surface-2); color: var(--fg); }
/* ---- 103 · Vetro maiuscolo ---- */
:root:has(.m103) .site-header { background: rgba(var(--g0), .45); backdrop-filter: blur(16px) saturate(1.4); }
:root:has(.m103) .site-header .nav a:not(.nav-ext) { text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; }
:root:has(.m103) .site-header .nav a:not(.nav-ext):hover { color: var(--accent-text); }
:root:has(.m103) .site-header .nav a:not(.nav-ext)::before { display: block; content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; opacity: 0;
  background: var(--accent); transform: scale(0); transition: transform .3s, opacity .3s; }
:root:has(.m103) .site-header .nav a[aria-current="page"]::before { opacity: 1; transform: scale(1); }
:root:has(.m103) .site-header .nav a.nav-ext { text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; border-radius: 99px; }
/* ---- 104 · Linguetta ---- */
:root:has(.m104) .site-header .nav { align-self: stretch; align-items: stretch; }
:root:has(.m104) .site-header .nav a:not(.nav-ext) { display: flex; align-items: center; padding: 0 11px; }
:root:has(.m104) .site-header .nav a:not(.nav-ext):hover { box-shadow: inset 0 3px 0 color-mix(in srgb, var(--fg) 35%, transparent); }
:root:has(.m104) .site-header .nav a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--accent); background: linear-gradient(var(--accent-soft), transparent 80%); }
:root:has(.m104) .site-header .nav a.nav-ext { align-self: center; }
:root:has(.m104) .site-header .lang-switch a { border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; color: var(--muted); }
:root:has(.m104) .site-header .lang-switch a:hover { color: var(--fg); border-color: var(--accent); background: none; }
/* ---- 105 · Separatori ---- */
:root:has(.m105) .site-header .nav { gap: 0; align-items: center; }
:root:has(.m105) .site-header .nav a:not(.nav-ext) { padding: 4px 11px; }
:root:has(.m105) .site-header .nav a:not(.nav-ext) + a:not(.nav-ext) { border-left: 1px solid var(--line); }
:root:has(.m105) .site-header .nav a:not(.nav-ext):hover { color: var(--accent-text); }
:root:has(.m105) .site-header .nav a[aria-current="page"] { color: var(--accent-text); font-weight: 800; }
:root:has(.m105) .site-header .nav a.nav-ext { margin-left: 10px; }
/* ---- 106 · Neon sottile ---- */
:root:has(.m106) .site-header .nav a:not(.nav-ext):hover, :root:has(.m106) .site-header .nav a:not(.nav-ext):focus-visible { color: var(--accent-2); text-shadow: 0 0 12px rgba(255, 122, 51, .75); }
:root:has(.m106) .site-header .nav a[aria-current="page"] { color: var(--accent-text); text-shadow: 0 0 10px rgba(255, 122, 51, .6); }
:root:has(.m106) .site-header .nav a.nav-ext { background: none; color: #a6adff; box-shadow: inset 0 0 0 1px rgba(123, 134, 255, .6), 0 0 14px -2px rgba(88, 101, 242, .7); border-radius: 99px; }
:root:has(.m106) .site-header .nav a.nav-ext:hover { color: #fff; background: rgba(88, 101, 242, .35); }
:root:has(.m106) .site-header .lang-switch a { padding: 4px; color: var(--faint); filter: grayscale(1); opacity: .6; }
:root:has(.m106) .site-header .lang-switch a:hover { opacity: 1; filter: none; background: none; }
:root:has(.m106) .site-header .lang-switch a[aria-current="true"] { filter: none; opacity: 1; color: var(--fg); background: none; box-shadow: none; text-shadow: 0 0 10px rgba(255, 255, 255, .4); }
/* ---- 107 · Militare ---- */
:root:has(.m107) .site-header .nav a, :root:has(.m107) .site-header .lang-switch a { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; text-transform: uppercase; font-size: .74rem; letter-spacing: .04em; }
:root:has(.m107) .site-header .nav a:not(.nav-ext) { padding-inline: 8px; }
:root:has(.m107) .site-header .nav a:not(.nav-ext):hover { color: var(--accent-text); }
:root:has(.m107) .site-header .nav a[aria-current="page"] { color: var(--accent-text); }
:root:has(.m107) .site-header .nav a[aria-current="page"]::before { display: inline; content: "["; position: static; margin-right: 3px; background: none; opacity: 1; }
:root:has(.m107) .site-header .nav a[aria-current="page"]::after { content: "]"; margin-left: 3px; }
:root:has(.m107) .site-header .nav a.nav-ext { border-radius: 0; }
:root:has(.m107) .site-header .lang-switch a[aria-current="true"]::before { content: "["; } :root:has(.m107) .site-header .lang-switch a[aria-current="true"]::after { content: "]"; }
/* ---- 108 · Capsula ---- */
:root:has(.m108) .site-header .nav { background: rgba(var(--g0), .6); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; align-items: center; box-shadow: 0 10px 30px -14px #000; }
:root:has(.m108) .site-header .nav a:not(.nav-ext) { border-radius: 999px; padding: 7px 11px; }
:root:has(.m108) .site-header .nav a:not(.nav-ext):hover { background: var(--surface-2); }
:root:has(.m108) .site-header .nav a[aria-current="page"] { background: var(--fg); color: var(--bg); }
:root:has(.m108) .site-header .nav a.nav-ext { border-radius: 999px; padding: 7px 13px; }
/* ---- 109 · Tricolore ---- */
:root:has(.m109) .site-header .nav a:not(.nav-ext)::before { display: block; content: ""; position: absolute; inset: auto 10px 1px; height: 3px; opacity: 1; border-radius: 2px;
  background: linear-gradient(90deg, #009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
:root:has(.m109) .site-header .nav a:not(.nav-ext):hover::before, :root:has(.m109) .site-header .nav a:not(.nav-ext):focus-visible::before, :root:has(.m109) .site-header .nav a[aria-current="page"]::before { transform: scaleX(1); }
:root:has(.m109) .site-header .lang-switch a { border-radius: 0; padding: 4px 6px; color: var(--faint); opacity: .7; }
:root:has(.m109) .site-header .lang-switch a:hover { opacity: 1; background: none; }
:root:has(.m109) .site-header .lang-switch a[aria-current="true"] { opacity: 1; color: var(--fg); background: none; box-shadow: inset 0 -2px 0 var(--accent); }
/* ---- 110 · Minimal ---- */
:root:has(.m110) .site-header .nav a:not(.nav-ext) { color: var(--faint); }
:root:has(.m110) .site-header .nav a:not(.nav-ext):hover { color: var(--fg); }
:root:has(.m110) .site-header .nav a[aria-current="page"] { color: var(--fg); font-weight: 800; }
:root:has(.m110) .site-header .nav a.nav-ext { background: none; box-shadow: none; color: #9aa3ff; padding-inline: 10px; }
:root:has(.m110) .site-header .nav a.nav-ext:hover { color: #c5caff; transform: none; box-shadow: none; }
:root:has(.m110) .site-header .lang-switch a { padding: 4px 6px; color: var(--muted); }
:root:has(.m110) .site-header .lang-switch a:hover { color: var(--fg); background: none; }
@media (prefers-reduced-motion: reduce) { :root:has(.mx) .nav a, :root:has(.mx) .nav a::before, :root:has(.mx) .lang-switch a { transition: none !important; } }

/* ===== 100-115 · page buttons in the same language as the menu (owner 2026-11-04: "crea coerenza anche con gli altri tasti della pagina").
   Buttons: .hx-play (Gioca ora, Discord), .hx-ghost (Come entrare, Guide, Privacy), .sec-link (Tutte le novità →). 100 = test90, unchanged ===== */
.v90.mx .hx-play, .v90.mx .hx-ghost { transform: none; border-radius: 8px; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, background .3s, color .3s, border-color .3s; }
.v90.mx .hx-play:hover, .v90.mx .hx-ghost:hover, .v90.mx .hx-play:focus-visible, .v90.mx .hx-ghost:focus-visible { transform: translateY(-2px); }
.v90.mx .hx-play:active, .v90.mx .hx-ghost:active { transform: scale(.97); transition-duration: .1s; }
.v90.mx .sec-link { transition: color .3s, background .3s, box-shadow .3s; }
/* 101 sottolineatura: rounded buttons, ghost and section links with the same orange line that grows */
.mx.m101 .hx-ghost, .mx.m101 .sec-link { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 2px; background-position: 50% 100%; background-repeat: no-repeat; text-decoration: none; }
.mx.m101 .hx-ghost:hover, .mx.m101 .hx-ghost:focus-visible, .mx.m101 .sec-link:hover, .mx.m101 .sec-link:focus-visible { background-size: calc(100% - 24px) 2px; }
.mx.m101 .sec-link:hover, .mx.m101 .sec-link:focus-visible { background-size: 100% 2px; }
.v90.mx.m101 .hx-ghost { border-color: transparent; background-color: transparent; transition: background-size .35s cubic-bezier(.2, .7, .2, 1), color .3s; }
.v90.mx.m101 .hx-ghost:hover { transform: none; color: var(--fg); }
/* 102 segmenti: buttons are segments (7 px), ghost on the menu's surface, primary filled */
.v90.mx.m102 .hx-play, .v90.mx.m102 .hx-ghost { border-radius: 7px; }
.v90.mx.m102 .hx-ghost { background: var(--surface); border: 1px solid var(--line); }
.v90.mx.m102 .hx-ghost:hover { background: var(--surface-2); border-color: var(--line); }
/* 103 vetro maiuscolo: pill buttons in uppercase, ghost in glass, a dot before the section links */
.v90.mx.m103 .hx-play, .v90.mx.m103 .hx-ghost { border-radius: 99px; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.v90.mx.m103 .hx-ghost { background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .14); }
.v90.mx.m103 .hx-ghost:hover { background: rgba(255, 255, 255, .12); }
.mx.m103 .sec-link { text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; }
/* 104 linguetta: buttons with a tab bar on top, like the active menu item */
.v90.mx.m104 .hx-play, .v90.mx.m104 .hx-ghost { border-radius: 4px; }
.v90.mx.m104 .hx-ghost { border: 1px solid var(--line); background: transparent; }
.v90.mx.m104 .hx-ghost:hover, .v90.mx.m104 .hx-ghost:focus-visible { box-shadow: inset 0 3px 0 var(--accent); background: linear-gradient(var(--accent-soft), transparent 80%); transform: none; }
.v90.mx.m104 .hx-play:not(.hx-discord) { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
/* 105 separatori: square-ish buttons, thin frames, links that only change colour */
.v90.mx.m105 .hx-play, .v90.mx.m105 .hx-ghost { border-radius: 3px; box-shadow: none; }
.v90.mx.m105 .hx-ghost { border: 1px solid var(--line); background: transparent; }
.v90.mx.m105 .hx-ghost:hover { border-color: var(--accent); color: var(--accent-text); transform: none; }
/* 106 neon sottile: outlined pills that glow */
.v90.mx.m106 .hx-play, .v90.mx.m106 .hx-ghost { border-radius: 99px; }
.v90.mx.m106 .hx-play:not(.hx-discord) { background: rgba(255, 122, 51, .12); color: var(--accent-2); box-shadow: inset 0 0 0 1px rgba(255, 122, 51, .7), 0 0 18px -4px rgba(255, 122, 51, .7); text-shadow: 0 0 10px rgba(255, 122, 51, .6); }
.v90.mx.m106 .hx-play:not(.hx-discord):hover { background: rgba(255, 122, 51, .25); color: #fff; box-shadow: inset 0 0 0 1px var(--accent), 0 0 28px -2px rgba(255, 122, 51, .9); }
.v90.mx.m106 .hx-play.hx-discord { background: rgba(88, 101, 242, .15); color: #a6adff; box-shadow: inset 0 0 0 1px rgba(123, 134, 255, .6), 0 0 18px -4px rgba(88, 101, 242, .8); }
.v90.mx.m106 .hx-play.hx-discord:hover { background: rgba(88, 101, 242, .35); color: #fff; }
.v90.mx.m106 .hx-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .2); }
.v90.mx.m106 .hx-ghost:hover { border-color: rgba(255, 255, 255, .5); text-shadow: 0 0 10px rgba(255, 255, 255, .5); box-shadow: 0 0 16px -4px rgba(255, 255, 255, .4); }
.mx.m106 .sec-link:hover { text-shadow: 0 0 10px rgba(255, 122, 51, .7); }
/* 107 militare: mono uppercase, square, the ghost in brackets on hover */
.v90.mx.m107 .hx-play, .v90.mx.m107 .hx-ghost, .mx.m107 .sec-link { font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
.v90.mx.m107 .hx-play, .v90.mx.m107 .hx-ghost { border-radius: 0; font-size: .82rem; box-shadow: none; }
.v90.mx.m107 .hx-ghost { background: transparent; border: 1px solid var(--line); }
.v90.mx.m107 .hx-ghost:hover { border-color: var(--accent); color: var(--accent-text); transform: none; }
.mx.m107 .sec-link { font-size: .76rem; }
.mx.m107 .sec-link::before { content: "[ "; } .mx.m107 .sec-link::after { content: " ]"; }
/* 108 capsula: everything is a capsule, the ghost turns white like the active menu item */
.v90.mx.m108 .hx-play, .v90.mx.m108 .hx-ghost { border-radius: 999px; }
.v90.mx.m108 .hx-ghost { background: rgba(var(--g0), .6); border: 1px solid var(--line); }
.v90.mx.m108 .hx-ghost:hover, .v90.mx.m108 .hx-ghost:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* 109 tricolore: the flag line grows under the ghost buttons and the section links */
.v90.mx.m109 .hx-play, .v90.mx.m109 .hx-ghost { border-radius: 6px; }
.v90.mx.m109 .hx-ghost, .mx.m109 .sec-link { background-image: linear-gradient(90deg, #009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%); background-size: 0 3px; background-position: 0 100%; background-repeat: no-repeat; text-decoration: none; transition: background-size .4s cubic-bezier(.2, .7, .2, 1), color .3s, transform .3s; }
.v90.mx.m109 .hx-ghost:hover, .v90.mx.m109 .hx-ghost:focus-visible, .mx.m109 .sec-link:hover, .mx.m109 .sec-link:focus-visible { background-size: 100% 3px; }
.v90.mx.m109 .hx-ghost { background-color: var(--surface); border: 1px solid var(--line); }
/* 110 minimal: flat primary without glow, ghost = text with an arrow that moves */
.v90.mx.m110 .hx-play, .v90.mx.m110 .hx-ghost { border-radius: 6px; box-shadow: none; }
.v90.mx.m110 .hx-play:hover { box-shadow: none; filter: brightness(1.1); }
.v90.mx.m110 .hx-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.v90.mx.m110 .hx-ghost:hover { color: var(--fg); transform: translateX(3px); }

/* ===== 111-115 · totally different menus AND page buttons (owner 2026-11-04) ===== */
/* ---- 111 · Brutale: thick frames, hard offset shadows, press = the shadow disappears ---- */
:root:has(.m111) .site-header { background: var(--bg); box-shadow: 0 2px 0 #000; }
:root:has(.m111) .site-header::after { display: none; }
:root:has(.m111) .site-header .nav { gap: 7px; align-items: center; }
:root:has(.m111) .site-header .nav a:not(.nav-ext), :root:has(.m111) .site-header .nav a.nav-ext, :root:has(.m111) .site-header .lang-switch a {
  border: 2px solid var(--fg); border-radius: 0; padding: 4px 8px; font-size: .84rem; color: var(--fg); box-shadow: 3px 3px 0 #000; transition: transform .12s, box-shadow .12s, background .12s; }
:root:has(.m111) .site-header .nav a:not(.nav-ext):hover, :root:has(.m111) .site-header .lang-switch a:hover { background: var(--surface-2); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
:root:has(.m111) .site-header .nav a[aria-current="page"] { background: var(--accent); color: #111; border-color: #111; }
:root:has(.m111) .site-header .nav a.nav-ext { background: var(--discord-2); border-color: #111; color: #fff; }
:root:has(.m111) .site-header .nav a.nav-ext:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
:root:has(.m111) .site-header .nav a:active, :root:has(.m111) .site-header .lang-switch a:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000; }
.v90.mx.m111 .hx-play, .v90.mx.m111 .hx-ghost { border-radius: 0; border: 3px solid #111; box-shadow: 5px 5px 0 #000; transition: transform .12s, box-shadow .12s, background .12s; }
.v90.mx.m111 .hx-play:not(.hx-discord) { background: var(--accent); color: #111; }
.v90.mx.m111 .hx-play.hx-discord { background: var(--discord-2); }
.v90.mx.m111 .hx-ghost { background: var(--fg); color: #111; }
.v90.mx.m111 .hx-play:hover, .v90.mx.m111 .hx-ghost:hover, .v90.mx.m111 .hx-play:focus-visible, .v90.mx.m111 .hx-ghost:focus-visible { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #000; }
.v90.mx.m111 .hx-play:active, .v90.mx.m111 .hx-ghost:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #000; }
.mx.m111 .sec-link { border: 2px solid var(--accent); padding: 2px 8px; box-shadow: 3px 3px 0 #000; }
.mx.m111 .sec-link:hover { background: var(--accent); color: #111; }
/* ---- 112 · HUD: chamfered corners like a game interface, uppercase, a light that sweeps on hover ---- */
:root:has(.m112) .site-header { background: rgba(6, 14, 16, .9); }
:root:has(.m112) .site-header .nav { gap: 4px; align-items: center; }
:root:has(.m112) .site-header .nav a:not(.nav-ext), :root:has(.m112) .site-header .nav a.nav-ext {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border-radius: 0; padding: 7px 11px; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em;
  background: rgba(var(--teal), .07) linear-gradient(100deg, transparent 30%, rgba(var(--teal), .35) 50%, transparent 70%) no-repeat -120% 0 / 60% 100%; color: #9fd6d8; transition: background-position .6s, color .3s, background-color .3s; }
:root:has(.m112) .site-header .nav a:not(.nav-ext):hover, :root:has(.m112) .site-header .nav a:not(.nav-ext):focus-visible { background-position: 220% 0; color: #fff; background-color: rgba(var(--teal), .16); }
:root:has(.m112) .site-header .nav a[aria-current="page"] { background-color: rgba(255, 122, 51, .22); color: var(--accent-2); }
:root:has(.m112) .site-header .nav a.nav-ext { background-color: var(--discord-2); color: #fff; box-shadow: none; }
:root:has(.m112) .site-header .nav a.nav-ext:hover { background-position: 220% 0; transform: none; }
:root:has(.m112) .site-header .lang-switch a { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.v90.mx.m112 .hx-play, .v90.mx.m112 .hx-ghost { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; box-shadow: none;
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); background-repeat: no-repeat; background-size: 60% 100%; background-position: -120% 0; transition: background-position .7s, color .3s, background-color .3s; }
.v90.mx.m112 .hx-play:not(.hx-discord) { background-color: var(--btn-1); color: #fff; }
.v90.mx.m112 .hx-play.hx-discord { background-color: var(--discord-2); }
.v90.mx.m112 .hx-ghost { background-color: rgba(var(--teal), .14); color: #bfe6e7; border: 0; }
.v90.mx.m112 .hx-play:hover, .v90.mx.m112 .hx-ghost:hover, .v90.mx.m112 .hx-play:focus-visible, .v90.mx.m112 .hx-ghost:focus-visible { background-position: 220% 0; transform: none; }
.v90.mx.m112 .hx-ghost:hover { background-color: rgba(var(--teal), .26); color: #fff; }
.mx.m112 .sec-link { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: #9fd6d8; }
.mx.m112 .sec-link:hover { color: #fff; }
/* ---- 113 · Bordo sfumato: an orange-to-teal gradient frame on the active item and on every button ---- */
:root:has(.m113) .site-header .nav { gap: 4px; align-items: center; }
:root:has(.m113) .site-header .nav a:not(.nav-ext) { border: 1.5px solid transparent; border-radius: 10px; padding: 6px 11px; }
:root:has(.m113) .site-header .nav a:not(.nav-ext):hover { background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, rgba(255, 122, 51, .5), rgba(var(--teal), .5)) border-box; color: var(--fg); }
:root:has(.m113) .site-header .nav a[aria-current="page"] { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, var(--accent), rgb(var(--teal))) border-box; color: var(--fg); }
:root:has(.m113) .site-header .nav a.nav-ext { border-radius: 10px; }
.v90.mx.m113 .hx-play, .v90.mx.m113 .hx-ghost { border-radius: 12px; }
.v90.mx.m113 .hx-play:not(.hx-discord) { background: linear-gradient(110deg, var(--btn-1), #d9662d 55%, rgb(var(--teal)) 140%); }
.v90.mx.m113 .hx-ghost { border: 1.5px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, var(--accent), rgb(var(--teal))) border-box; }
.v90.mx.m113 .hx-ghost:hover, .v90.mx.m113 .hx-ghost:focus-visible { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(90deg, var(--accent-2), rgb(var(--teal))) border-box;
  box-shadow: 0 10px 24px -12px rgba(var(--teal), .8); }
.mx.m113 .sec-link { background: linear-gradient(90deg, var(--accent-2), rgb(var(--teal))); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---- 114 · Lamiera: riveted steel plates (Rust), stencil-like uppercase; the active one painted orange ---- */
:root:has(.m114) .site-header { background: #0b1214; }
:root:has(.m114) .site-header .nav { gap: 5px; align-items: center; }
:root:has(.m114) .site-header .nav a:not(.nav-ext), :root:has(.m114) .site-header .lang-switch a {
  --plate: linear-gradient(#3a4547, #222b2d); --rv: radial-gradient(circle at 4px 4px, #8a9799 0 1.3px, transparent 1.8px), radial-gradient(circle at calc(100% - 4px) 4px, #8a9799 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 4px calc(100% - 4px), #8a9799 0 1.3px, transparent 1.8px), radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #8a9799 0 1.3px, transparent 1.8px);
  background: var(--rv), var(--plate); border: 1px solid #101719; border-radius: 3px; padding: 6px 12px; text-transform: uppercase; font-size: .72rem; font-weight: 800; letter-spacing: .07em; color: #c8d2d3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 #050909; text-shadow: 0 -1px 0 #000; transition: filter .2s, transform .12s; }
:root:has(.m114) .site-header .nav a:not(.nav-ext):hover, :root:has(.m114) .site-header .lang-switch a:hover { filter: brightness(1.25); color: #fff; }
:root:has(.m114) .site-header .nav a[aria-current="page"] { --plate: linear-gradient(#e0732f, #9c4419); color: #fff; }
:root:has(.m114) .site-header .nav a:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
:root:has(.m114) .site-header .nav a.nav-ext { border-radius: 3px; text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; font-weight: 800; background: linear-gradient(#7380ff, #4652d6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 #1b2160; }
.v90.mx.m114 .hx-play, .v90.mx.m114 .hx-ghost {
  --plate: linear-gradient(#3a4547, #222b2d); --rv: radial-gradient(circle at 6px 6px, #8a9799 0 1.6px, transparent 2.1px), radial-gradient(circle at calc(100% - 6px) 6px, #8a9799 0 1.6px, transparent 2.1px),
    radial-gradient(circle at 6px calc(100% - 6px), #8a9799 0 1.6px, transparent 2.1px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #8a9799 0 1.6px, transparent 2.1px);
  background: var(--rv), var(--plate); border: 1px solid #101719; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #dbe3e4; text-shadow: 0 -1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 0 #050909, 0 10px 20px -10px #000; transition: filter .2s, transform .12s, box-shadow .12s; }
.v90.mx.m114 .hx-play:not(.hx-discord) { --plate: linear-gradient(#e8793a, #a2461a); color: #fff; }
.v90.mx.m114 .hx-play.hx-discord { --plate: linear-gradient(#7380ff, #4652d6); color: #fff; }
.v90.mx.m114 .hx-play:hover, .v90.mx.m114 .hx-ghost:hover, .v90.mx.m114 .hx-play:focus-visible, .v90.mx.m114 .hx-ghost:focus-visible { filter: brightness(1.15); transform: translateY(-1px); }
.v90.mx.m114 .hx-play:active, .v90.mx.m114 .hx-ghost:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 #050909; }
.mx.m114 .sec-link { text-transform: uppercase; letter-spacing: .07em; font-size: .76rem; font-weight: 800; }
/* ---- 115 · Riempimento: editorial uppercase, the colour fills the item from the left on hover ---- */
:root:has(.m115) .site-header .nav { gap: 2px; align-items: center; }
:root:has(.m115) .site-header .nav a:not(.nav-ext) { text-transform: uppercase; font-size: .72rem; letter-spacing: .14em; font-weight: 600; padding: 7px 10px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 0 100%; transition: background-size .35s cubic-bezier(.7, 0, .2, 1), color .35s; }
:root:has(.m115) .site-header .nav a:not(.nav-ext):hover, :root:has(.m115) .site-header .nav a:not(.nav-ext):focus-visible { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 100% 100%; color: #111; }
:root:has(.m115) .site-header .nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
:root:has(.m115) .site-header .nav a.nav-ext { border-radius: 0; text-transform: uppercase; font-size: .72rem; letter-spacing: .14em; }
.v90.mx.m115 .hx-play, .v90.mx.m115 .hx-ghost { border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; box-shadow: none;
  background-repeat: no-repeat; background-position: 0 0; background-size: 0 100%; transition: background-size .4s cubic-bezier(.7, 0, .2, 1), color .4s, border-color .4s; }
.v90.mx.m115 .hx-play:not(.hx-discord) { background-color: var(--btn-1); background-image: linear-gradient(var(--fg), var(--fg)); color: #fff; }
.v90.mx.m115 .hx-play:not(.hx-discord):hover, .v90.mx.m115 .hx-play:not(.hx-discord):focus-visible { color: #111; }
.v90.mx.m115 .hx-play.hx-discord { background-color: var(--discord-2); background-image: linear-gradient(#fff, #fff); }
.v90.mx.m115 .hx-play.hx-discord:hover { color: var(--discord-2); }
.v90.mx.m115 .hx-ghost { background-color: transparent; background-image: linear-gradient(var(--fg), var(--fg)); border: 1.5px solid var(--fg); color: var(--fg); }
.v90.mx.m115 .hx-ghost:hover, .v90.mx.m115 .hx-ghost:focus-visible { color: #111; }
.v90.mx.m115 .hx-play:hover, .v90.mx.m115 .hx-ghost:hover, .v90.mx.m115 .hx-play:focus-visible, .v90.mx.m115 .hx-ghost:focus-visible { background-size: 100% 100%; transform: none; }
.mx.m115 .sec-link { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .v90.mx :is(.hx-play, .hx-ghost, .sec-link), :root:has(.mx) .site-header .nav a { transition: none !important; } }

/* side-by-side section titles start at the top, so "Online ora" and "Ultime kill" titles are on the same line */
#hx.v90 .sec-row > .sec > .sec-head { align-items: flex-start; align-content: flex-start; }
/* ===== "Gioca ora" that asks to be clicked (owner 2026-11-04): bigger, a flame gradient that flows, a glow that pulses and rings out,
   a shine that crosses it every few seconds. Hover: it grows, revs with a short wiggle, the flame runs fast, the shine loops.
   Only `scale`/`rotate` are animated, so every variant keeps its own shape (skew, chamfer, plates...) ===== */
.v90 .hx-play.join-steam { padding: 17px 34px; font-size: 1.16rem; isolation: isolate; overflow: hidden;
  animation: gp-pulse 2.4s ease-in-out infinite; transition: scale .45s var(--spring), filter .3s, box-shadow .3s; }
.v90:not(.mx) .hx-play.join-steam, .v90.m101 .hx-play.join-steam, .v90.m102 .hx-play.join-steam, .v90.m103 .hx-play.join-steam, .v90.m104 .hx-play.join-steam,
.v90.m105 .hx-play.join-steam, .v90.m108 .hx-play.join-steam, .v90.m109 .hx-play.join-steam, .v90.m110 .hx-play.join-steam, .v90.m113 .hx-play.join-steam {
  background: linear-gradient(110deg, #ff8f45, #e8612a 30%, #ffab5c 50%, #e8612a 70%, #ff8f45) 0 0 / 250% 100%;
  animation: gp-pulse 2.4s ease-in-out infinite, gp-flow 7s linear infinite; }
@keyframes gp-pulse { 0%, 100% { box-shadow: 0 10px 28px -10px rgba(255, 122, 51, .85), 0 0 0 0 rgba(255, 122, 51, .55); }
  70% { box-shadow: 0 14px 38px -8px rgba(255, 122, 51, 1), 0 0 0 16px rgba(255, 122, 51, 0); } }
@keyframes gp-flow { to { background-position: -250% 0; } }
.v90 .hx-play.join-steam::after { content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); transform: translateX(-130%); animation: gp-shine 3.6s ease-in-out infinite 1s; }
@keyframes gp-shine { 0% { transform: translateX(-130%); } 28%, 100% { transform: translateX(130%); } }
.v90 .hx-play.join-steam:hover, .v90 .hx-play.join-steam:focus-visible { scale: 1.1; filter: brightness(1.1) saturate(1.15);
  animation: gp-rev .55s ease-in-out, gp-hot 1.1s ease-in-out infinite .55s, gp-flow 1.6s linear infinite; }
.v90:not(.mx) .hx-play.join-steam:hover, .v90:not(.mx) .hx-play.join-steam:focus-visible { transform: skewX(-12deg); }
.v90 .hx-play.join-steam:hover::after, .v90 .hx-play.join-steam:focus-visible::after { animation: gp-shine 1.1s ease-in-out infinite; }
@keyframes gp-rev { 0%, 100% { rotate: 0deg; } 20% { rotate: -3deg; } 40% { rotate: 3deg; } 60% { rotate: -2deg; } 80% { rotate: 1deg; } }
@keyframes gp-hot { 0%, 100% { box-shadow: 0 16px 40px -8px rgba(255, 122, 51, 1), 0 0 0 3px rgba(var(--teal), .45), 0 0 34px 4px rgba(255, 150, 60, .55); }
  50% { box-shadow: 0 20px 48px -6px rgba(255, 140, 60, 1), 0 0 0 5px rgba(var(--teal), .6), 0 0 52px 10px rgba(255, 150, 60, .75); } }
.v90 .hx-play.join-steam:active { scale: .95; transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) { .v90 .hx-play.join-steam, .v90 .hx-play.join-steam::after { animation: none !important; } .v90 .hx-play.join-steam::after { display: none; } }

/* team of the moment v2 (owner 2026-11-04): the trophy stays STILL (no sway, no sparkles, no flashing); only a soft golden light
   behind it that fades in and out slowly. Order: trophy + name, members, numbers */
.hx-team-ico { animation: none; filter: drop-shadow(0 0 10px rgba(255, 204, 77, .75)); transform: none; }
.hx-team-ico::after { display: none; }
.hx-team-ico::before { content: ""; position: absolute; inset: -14px -10px; z-index: -1; top: auto; right: auto; font-size: inherit; text-shadow: none; transform: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 96, .85), rgba(255, 176, 48, .4) 55%, transparent);
  filter: blur(6px); opacity: .5; animation: cup-halo 6s ease-in-out infinite; inset: -22px -18px; }
.hx-team-ico { isolation: isolate; }
@keyframes cup-halo { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.hx-team-card .tm-members { border-top: 0; padding-top: 2px; }
.hx-team-card .tm-stats { border-top: 1px solid var(--line); padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { .hx-team-ico::before { animation: none; opacity: .6; } }
/* "Gioca ora" never moves "Come entrare" (owner 2026-11-04): on hover only visual changes (scale, glow), never width; the button sits above its neighbour */
.v90 .hx-play.join-steam:hover, .v90 .hx-play.join-steam:focus-visible { z-index: 2; }  /* never touch letter-spacing here: the variants set their own and a hover value changed the width */
/* team of the moment v3 (owner 2026-11-04: "con tutta quella luminosità fa schifo"): no halo disc at all; the trophy only has a thin
   golden glow on its own outline that fades softly in and out */
.hx-team-ico::before { display: none; }
.hx-team-ico { animation: cup-soft 6s ease-in-out infinite; }
@keyframes cup-soft { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 204, 77, .3)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 204, 77, .55)); } }
@media (prefers-reduced-motion: reduce) { .hx-team-ico { animation: none; filter: drop-shadow(0 0 5px rgba(255, 204, 77, .45)); } }

/* ---- 116 · HUD + tricolore (owner 2026-11-04: the buttons of 112 with the flag underline of 109). The page carries m112 AND m116:
   everything of 112, plus the green-white-red line that grows under the menu items, the ghost buttons and the section links ---- */
:root:has(.m116) .site-header .nav a:not(.nav-ext)::before { display: block; content: ""; position: absolute; inset: auto 10px 2px 10px; height: 2px; opacity: 1; border-radius: 0;
  background: linear-gradient(90deg, #009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .2, 1); z-index: 1; }
:root:has(.m116) .site-header .nav a:not(.nav-ext):hover::before, :root:has(.m116) .site-header .nav a:not(.nav-ext):focus-visible::before,
:root:has(.m116) .site-header .nav a[aria-current="page"]::before { transform: scaleX(1); }
:root:has(.m116) .site-header .nav a[aria-current="page"] { background-color: rgba(var(--teal), .16); color: #fff; }
:root:has(.m116) .site-header .lang-switch a[aria-current="true"] { box-shadow: inset 0 -2px 0 #009246; color: var(--fg); }
.v90.m116 .hx-ghost::before { content: ""; position: absolute; inset: auto 16px 6px 16px; height: 3px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.v90.m116 .hx-ghost:hover::before, .v90.m116 .hx-ghost:focus-visible::before { transform: scaleX(1); }
.mx.m116 .sec-link { background-image: linear-gradient(90deg, #009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%); background-size: 0 2px; background-position: 0 100%;
  background-repeat: no-repeat; padding-bottom: 3px; transition: background-size .4s cubic-bezier(.2, .7, .2, 1), color .3s; }
.mx.m116 .sec-link:hover, .mx.m116 .sec-link:focus-visible { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) { :root:has(.m116) .site-header .nav a::before, .v90.m116 .hx-ghost::before { transition: none; } }
/* 116 v2 (owner 2026-11-04): in the top menu NO flag line; the selected item is simply orange (as in 112). The flag stays on page buttons and links */
:root:has(.m116) .site-header .nav a:not(.nav-ext)::before { display: none; }
:root:has(.m116) .site-header .nav a[aria-current="page"] { background-color: rgba(255, 122, 51, .22); color: var(--accent-2); }
:root:has(.m116) .site-header .lang-switch a[aria-current="true"] { box-shadow: none; color: var(--accent-text); }
/* 116 language switch (owner 2026-11-04): each choice is a chamfered chip like the menu items, with its flag as the background.
   Selected = flag bright and in full colour; the other = flag dark and desaturated (lights up a little on hover) */
:root:has(.m116) .site-header .lang-switch { gap: 4px; }
:root:has(.m116) .site-header .lang-switch a { position: relative; isolation: isolate; overflow: hidden; border-radius: 0; padding: 7px 12px; min-width: 44px; justify-content: center;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); color: #fff; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .7); background: none; box-shadow: none; }
:root:has(.m116) .site-header .lang-switch a img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; z-index: -1;
  filter: grayscale(.7) brightness(.4); transition: filter .35s; }
:root:has(.m116) .site-header .lang-switch a:hover img, :root:has(.m116) .site-header .lang-switch a:focus-visible img { filter: grayscale(.3) brightness(.62); }
:root:has(.m116) .site-header .lang-switch a[aria-current="true"] img { filter: saturate(1.1) brightness(.82); }
:root:has(.m116) .site-header .lang-switch a[aria-current="true"] { color: #fff; box-shadow: none; }
:root:has(.m116) .site-header .lang-switch a:not([aria-current="true"]) { color: rgba(255, 255, 255, .7); }
/* 116 language chips v2 (owner 2026-11-04): much smaller and compact, flag only, no text (the link text stays for screen readers) */
:root:has(.m116) .site-header .lang-switch { gap: 3px; padding: 0; }
:root:has(.m116) .site-header .lang-switch a { font-size: 0; gap: 0; padding: 0; width: 26px; min-width: 0; height: 18px; text-shadow: none;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
:root:has(.m116) .site-header .lang-switch a[aria-current="true"] img { filter: saturate(1.15) brightness(1.05); }
:root:has(.m116) .site-header .lang-switch a:not([aria-current="true"]) img { filter: grayscale(.75) brightness(.42); }
:root:has(.m116) .site-header .lang-switch a:not([aria-current="true"]):hover img { filter: grayscale(.2) brightness(.75); }

/* ===== SITE LOOK 116 on every page (owner 2026-11-04: "applica 116 ovunque… coerenza totale"). <body class="v90 mx m112 m116 fx-ripple">.
   The controls of the inner pages speak the HUD language of the menu: chamfered corners, uppercase with spacing, a light that sweeps
   on hover, teal for the secondary ones, orange for the primary ones and for "selected"; the flag line on secondary buttons and links.
   Clip-path hides outlines, so the keyboard focus is an inset white frame. Hover never changes size (no layout shift). ===== */
body.v90 { --hud-cut: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  --hud-cut-s: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --hud-sweep: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  --flag: linear-gradient(90deg, #009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%); }
/* page titles in the brand's voice */
body.v90 main h1 { font-style: italic; font-weight: 900; letter-spacing: -.01em; }
body.v90 .eyebrow, body.v90 .kicker { letter-spacing: .14em; }
/* segmented filters and toggles (period, chart type, sort…) */
body.v90 .seg { border-radius: 0; clip-path: var(--hud-cut); background: rgba(var(--teal), .06); border-color: rgba(var(--teal), .22); padding: 4px; gap: 3px; }
body.v90 .seg button { border-radius: 0; clip-path: var(--hud-cut-s); text-transform: uppercase; letter-spacing: .07em; font-size: .74rem; font-weight: 700; color: #9fd6d8;
  padding: 7px 12px; background: transparent var(--hud-sweep) no-repeat -120% 0 / 60% 100%; transition: background-position .6s, background-color .3s, color .3s; }
body.v90 .seg button:hover { background-position: 220% 0; background-color: rgba(var(--teal), .14); color: #fff; }
body.v90 .seg button[aria-pressed="true"], body.v90 .seg button[aria-selected="true"] { background-color: rgba(255, 122, 51, .22); color: var(--accent-2); box-shadow: none; }
body.v90 .seg.sm button { font-size: .68rem; padding: 5px 9px; }
/* primary buttons (orange) and secondary buttons (teal) */
body.v90 .join-btn, body.v90 .btn, body.v90 .unlock-cta a, body.v90 .pl-more, body.v90 .detail-close, body.v90 .ach-own-btn {
  border-radius: 0; clip-path: var(--hud-cut); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 800; border: 0;
  background-image: var(--hud-sweep); background-repeat: no-repeat; background-size: 60% 100%; background-position: -120% 0;
  transition: background-position .7s, background-color .3s, color .3s, filter .3s; position: relative; }
body.v90 .join-btn, body.v90 .btn, body.v90 .unlock-cta a { background-color: var(--btn-1); color: #fff; box-shadow: none; }
body.v90 .join-btn.join-copy, body.v90 .pl-more, body.v90 .detail-close, body.v90 .ach-own-btn { background-color: rgba(var(--teal), .14); color: #bfe6e7; }
body.v90 :is(.join-btn, .btn, .unlock-cta a, .pl-more, .detail-close, .ach-own-btn):hover { background-position: 220% 0; filter: none; }
body.v90 :is(.join-btn.join-copy, .pl-more, .detail-close, .ach-own-btn):hover { background-color: rgba(var(--teal), .26); color: #fff; border-color: transparent; }
body.v90 .join-btn.is-done, body.v90 .join-btn.join-copy.is-done { background-color: var(--ok); color: #fff; }
body.v90 :is(.join-btn.join-copy, .pl-more, .ach-own-btn)::after { content: ""; position: absolute; inset: auto 14px 5px 14px; height: 2px; pointer-events: none;
  background: var(--flag); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
body.v90 :is(.join-btn.join-copy, .pl-more, .ach-own-btn):hover::after { transform: scaleX(1); }
body.v90 .join-btn.join-steam { animation: gp-pulse 2.4s ease-in-out infinite; }
body.v90 .join-btn.join-steam::before { display: none; }
/* keyboard focus on chamfered things: an inset frame (an outline would be cut off) */
body.v90 :is(.seg button, .join-btn, .btn, .unlock-cta a, .pl-more, .detail-close, .ach-own-btn, .site-header .nav a, .site-header .lang-switch a, .hx-play, .hx-ghost):focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px #fff; }
/* section links and "show all" links: like the home (uppercase, flag line that grows) */
body.v90 .link-more { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: #9fd6d8; background-image: var(--flag); background-repeat: no-repeat;
  background-size: 0 2px; background-position: 20px calc(100% - 8px); transition: background-size .4s cubic-bezier(.2, .7, .2, 1), color .3s; }
body.v90 .link-more:hover, body.v90 .link-more:focus-visible { color: #fff; background-size: calc(100% - 40px) 2px; }
body.v90 .sec-link { color: #9fd6d8; }
body.v90 .sec-link:hover, body.v90 .sec-link:focus-visible { color: #fff; }
/* the big tab cards (Classifiche, Players): boxes like the others; the page we are on = orange, the flag bar on hover */
body.v90 .tabs a { border-radius: var(--radius); background: var(--surface); border-color: var(--line); transition: border-color .35s, background-color .35s; }
body.v90 .tabs a::before { inset: 0 auto 0 0; width: 4px; z-index: 1; opacity: 1; background: linear-gradient(#009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%);
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--spring); }
body.v90 .tabs a:hover::before, body.v90 .tabs a:focus-visible::before { opacity: 1; transform: scaleY(1); }
body.v90 .tabs a[aria-current="page"] { background: linear-gradient(rgba(255, 122, 51, .16), rgba(255, 122, 51, .16)), var(--surface); border-color: var(--accent); }
body.v90 .tabs a[aria-current="page"]::before, body.v90 .tabs a[aria-current="page"]:hover::before { opacity: 1; }
body.v90 .tabs a[aria-current="page"] .tab-name { color: var(--accent-2); }
body.v90 .tabs .tab-name { text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; font-weight: 800; }
body.v90 .tabs .tab-ico { border-radius: 0; clip-path: var(--hud-cut-s); background: rgba(var(--teal), .1); }
/* previous / next at the bottom of the guides */
body.v90 .pager a { border-radius: var(--radius); }
/* search fields */
body.v90 .tb-search input, body.v90 .search input, body.v90 input[type="search"] { border-radius: var(--radius); border-color: rgba(var(--teal), .25); background-color: rgba(var(--teal), .05); }
body.v90 .tb-search input:focus, body.v90 .search input:focus, body.v90 input[type="search"]:focus { border-color: rgb(var(--teal)); outline: none; box-shadow: 0 0 0 3px rgba(var(--teal), .2); }
/* phone menu: the same HUD items, the page we are on in orange */
body.v90 .nav-mobile summary { border-radius: 0; clip-path: var(--hud-cut-s); background: rgba(var(--teal), .1); border-color: rgba(var(--teal), .3); color: #cdeeee; }
body.v90 .nav-mobile nav a:not(.nav-ext) { border-radius: 0; clip-path: var(--hud-cut-s); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; font-weight: 700;
  color: #9fd6d8; background: rgba(var(--teal), .07); }
body.v90 .nav-mobile nav a:not(.nav-ext)::before { display: none; }
body.v90 .nav-mobile nav a[aria-current="page"] { background: rgba(255, 122, 51, .22); color: var(--accent-2); }
body.v90 .nav-mobile nav a.nav-ext { border-radius: 0; clip-path: var(--hud-cut-s); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; background: var(--discord-2); color: #fff; }
@media (prefers-reduced-motion: reduce) { body.v90 :is(.seg button, .join-btn, .pl-more, .link-more, .tabs a, .tabs a::before) { transition: none; } body.v90 .join-btn.join-steam { animation: none; } }

/* player and shame cards keep their own top glow on ::before; the flag bar comes on ::after for them (clickable profiles) */
body.v90 :is(.pl-card, .sh-card).plink::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; z-index: 1; pointer-events: none;
  background: linear-gradient(#009246 0 33.34%, #f4f5f0 33.34% 66.67%, #ce2b37 66.67%); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--spring); }
body.v90 :is(.pl-card, .sh-card).plink:is(:hover, :focus-visible)::after { transform: scaleY(1); }

/* ===== site 116 · finishing touches (design best practice, 2026-11-04) ===== */
/* text selection and scrollbars in the palette */
body.v90 ::selection { background: rgba(255, 122, 51, .35); color: #fff; }
html:has(body.v90) { scrollbar-color: rgba(var(--teal), .45) var(--bg); scrollbar-width: thin; }
/* links inside texts: readable underline, orange on hover */
body.v90 main :is(p, li, td, .prose) a:not([class]) { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(255, 154, 95, .45); text-underline-offset: 3px;
  transition: text-decoration-color .25s, color .25s; }
body.v90 main :is(p, li, td, .prose) a:not([class]):hover { color: var(--accent-2); text-decoration-color: currentColor; }
/* footer: the same orange→teal line as the header */
body.v90 .site-footer { position: relative; border-top: 0; }
body.v90 .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 30%, rgb(var(--teal)) 70%, transparent); opacity: .55; }
body.v90 .site-footer a:hover { color: var(--accent-2); }
/* table headers: the small uppercase labels of the cards */
body.v90 main th { letter-spacing: .08em; }
/* the main action buttons of the inner pages have the same weight as on the home */
body.v90 .join-btn { padding: 12px 22px; }
/* big numbers on phones: never split "5 novembre" or a long seed in an odd place */
@media (max-width: 640px) { body.v90 .stat .value { font-size: clamp(1.3rem, 6.6vw, 1.9rem); overflow-wrap: normal; word-break: normal; } }
/* step chips, tags and small pills: the square-ish corners of the cards (no round pills next to HUD buttons) */
body.v90 .steps li { border-radius: var(--radius); background: rgba(var(--teal), .08); box-shadow: inset 0 0 0 1px rgba(var(--teal), .22); }
body.v90 :is(.tag, .server-tags .tag, .pill, .badge-live) { border-radius: var(--radius); }
body.v90 .steps .n, body.v90 .steps li > b:first-child { border-radius: 3px; }
/* every label, chip and badge with the card corners; progress bars nearly square (one shape language with the HUD buttons) */
body.v90 :is(.how-step, .grade, .chip, .tier, .subtabs a, .news-state, .wall-chip, .cmd-badge, .pf-chip, .ac-chips li, .voc-badge, .bio-chip, .tm-tag, .pl-lead,
  .rk-here, .pf-team, .sh-level, .map-mark, .wall-n) { border-radius: var(--radius); }
body.v90 :is(.meter, .bar, .pct-bar, .tier-bar, .vs-bar, .rr-bar, .pf-bar, .rk-bar), body.v90 :is(.meter, .bar, .pct-bar, .rr-bar, .pf-bar, .rk-bar) > * { border-radius: 2px; }
body.v90 .subtabs a[aria-current="page"] { background: rgba(255, 122, 51, .22); color: var(--accent-2); border-color: transparent; }