/* Motion layer: restrained, visible feedback for navigation and controls. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root { --motion-ease: cubic-bezier(.23, 1, .32, 1); }

/* Deep neutral theme: darker canvas with clearer UI contrast. */
:root {
  --bg: #07090c;
  --panel: #101319;
  --panel2: #151a22;
  --line: #252b35;
  --text: #f3f5f8;
  --muted: #9aa3b2;
  --purple: #a78bfa;
  --violet: #7557e8;
}
html, body { background: #080a0d !important; color: var(--text); }
.ambient, .ambient-one, .ambient-two { display: none !important; opacity: 0 !important; }
.topbar { background: rgba(7,9,12,.9); border-bottom-color: rgba(255,255,255,.1); }
.nav-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; transition: color 200ms ease, background 200ms ease, transform 200ms var(--motion-ease), box-shadow 200ms ease; }
.nav-icon { width: 16px; height: 16px; flex: 0 0 auto; filter: brightness(0) saturate(100%) invert(67%) sepia(7%) saturate(486%) hue-rotate(179deg) brightness(94%) contrast(88%); transition: filter 200ms ease, transform 200ms var(--motion-ease); }
.nav-links a:hover { color: #e8c45e !important; background: rgba(232,196,94,.08); transform: translateY(-1px); }
.nav-links a.active { color: #f0ca5d !important; background: rgba(240,202,93,.1); box-shadow: inset 0 0 0 1px rgba(240,202,93,.14), 0 6px 18px rgba(0,0,0,.16); }
.nav-links a:hover .nav-icon, .nav-links a.active .nav-icon { filter: brightness(0) saturate(100%) invert(82%) sepia(56%) saturate(590%) hue-rotate(348deg) brightness(101%) contrast(89%) drop-shadow(0 0 5px rgba(240,202,93,.3)); transform: scale(1.05); }
.secondary-btn, .search, .tab.active, .tab:hover { background-color: rgba(16,19,25,.94); }
.secondary-btn:hover, .icon-btn:hover { border-color: rgba(167,139,250,.62); color: #fff; }
.player-row { background: rgba(15,18,24,.9); }
.player-row:hover { background: #171c25; }
.how { background: linear-gradient(145deg, #11151d, #0c0f14) !important; }
.section-heading h2, .how h2, .rules-list h2, .guide-copy h2 { color: #f3f5f8; font-weight: 700; }
.player strong, .step strong, .account-menu strong { color: #f3f5f8; }
.tab, .secondary-btn, .primary-btn, .discord-btn, .search { box-shadow: inset 0 1px rgba(255,255,255,.035); }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body, button, input { font-family: 'Space Grotesk', Manrope, Arial, sans-serif; }
 .brand-logo { width: 32px !important; height: 32px !important; min-width: 32px; display: block; border-radius: 50% !important; object-fit: cover; object-position: center; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 0 3px rgba(185,163,255,.08), 0 5px 18px rgba(0,0,0,.3); }
time, .time, .rank, .tier, .eyebrow, footer { font-family: 'DM Mono', monospace; }
.hero h1, .section-heading h2, .how h2, .faq h2, .guide-page h1, .admin-page h1 { font-family: 'Space Grotesk', Manrope, Arial, sans-serif; letter-spacing: -.045em; }
body.page-exit { opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms var(--motion-ease); }

/* Compact Telegram glass pill. It stays secondary to the hero instead of becoming a banner. */
.telegram-top {
  position: relative;
  width: min(600px, calc(100% - 36px));
  margin: 14px auto 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(110deg, rgba(32,31,43,.76), rgba(14,15,18,.52)) !important;
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 12px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  animation: telegram-in 520ms var(--motion-ease) both;
}
.telegram-top::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,.1), transparent 34%); opacity: .7; }
.telegram-top:hover { border-color: rgba(255,255,255,.22) !important; box-shadow: 0 16px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12); transform: translateY(-2px); }
.telegram-top .telegram-dot { width: 30px; height: 30px; border-radius: 50%; background: #171226 url('assets/elarion-logo-mini.webp') center / 165% no-repeat; border: 1px solid rgba(255,255,255,.28); font-size: 0; box-shadow: none; transition: transform 260ms var(--motion-ease); }
.telegram-top .telegram-dot::before { content: none !important; display: none !important; }
.telegram-top:hover .telegram-dot { transform: scale(1.03); box-shadow: none; }
.telegram-top small { font-size: 9px !important; }
.telegram-top .telegram-arrow { font-size: 15px; transition: transform 260ms var(--motion-ease); }
.telegram-top:hover .telegram-arrow { transform: translate(2px, -2px); }
@keyframes telegram-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.hero-actions a { animation: action-in 420ms var(--motion-ease) both; }
.hero-actions a:nth-child(2) { animation-delay: 70ms; }
@keyframes action-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.scroll-focus { animation: destination-focus 900ms var(--motion-ease) both; }
@keyframes destination-focus { 0% { box-shadow: 0 0 0 0 rgba(185,163,255,0); } 35% { box-shadow: 0 0 0 8px rgba(185,163,255,.14); } 100% { box-shadow: 0 0 0 0 rgba(185,163,255,0); } }

/* Rules page: a clear editorial layout instead of an unstyled text column. */
.rules-page { width: min(1000px, 100%); max-width: 1000px; margin: 0 auto; padding: 86px 28px 110px; }
.rules-page > .eyebrow { justify-content: center; }
.rules-page h1 { font-family: 'Press Start 2P', monospace !important; text-align: center; font-size: clamp(36px, 6vw, 64px); line-height: 1.35; letter-spacing: -.035em; margin: 28px 0 48px; text-shadow: 4px 4px 0 rgba(71,46,132,.42); }
.rules-page h1 em { color: var(--purple); font-style: normal; }
.server-card { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 0; margin-bottom: 38px; border: 0; background: transparent; }
.server-option { display: grid; gap: 9px; padding: 19px 20px; border: 1px solid rgba(185,163,255,.22); border-radius: 14px; background: linear-gradient(135deg, rgba(29,27,40,.78), rgba(14,15,18,.62)); backdrop-filter: blur(16px) saturate(125%); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.16); transition: transform 220ms var(--motion-ease), border-color 220ms ease, box-shadow 220ms ease; }
.server-option:hover { transform: translateY(-3px); border-color: rgba(185,163,255,.46); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 16px 34px rgba(0,0,0,.24), 0 0 24px rgba(185,163,255,.1); }
.server-option small { color: var(--muted); font-size: 11px; }
.server-option strong { font: 600 15px 'DM Mono', monospace; overflow-wrap: anywhere; }
.server-option button { justify-self: start; margin: 2px 0 0; }
.server-card small { color: var(--muted); font-size: 11px; }
.server-card strong { font-size: 16px; letter-spacing: .08em; }
.server-card button { margin-left: auto; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; color: var(--text); background: rgba(255,255,255,.04); font: 12px 'DM Mono', monospace; cursor: pointer; transition: transform 180ms var(--motion-ease), border-color 180ms ease, background 180ms ease; }
.server-card button:hover { transform: translateY(-2px); border-color: var(--purple); background: rgba(185,163,255,.12); }
.rules-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; counter-reset: rules; }
.rules-list li { counter-increment: rules; position: relative; padding: 24px 26px 24px 76px; border: 1px solid var(--line); border-radius: 12px; background: rgba(16,17,20,.72); transition: transform 220ms var(--motion-ease), border-color 220ms ease, background 220ms ease; }
.rules-list li::before { content: counter(rules, decimal-leading-zero); position: absolute; left: 25px; top: 26px; color: var(--purple); font: 12px 'DM Mono', monospace; }
.rules-list li:hover { transform: translateX(5px); border-color: rgba(185,163,255,.4); background: rgba(26,22,37,.8); }
.rules-list h2 { margin: 0 0 9px; font-size: 18px; line-height: 1.35; }
.rules-list p, .rules-note { margin: 0; max-width: 820px; color: #aab1bd; font-size: 13px; line-height: 1.78; }
.rules-note { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.guide-grid-wide { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.guide-step a { display: inline-block; margin-top: 14px; color: var(--purple); font-size: 12px; text-decoration: none; transition: transform 180ms var(--motion-ease), color 180ms ease; }
.guide-step a:hover { color: #fff; transform: translateX(3px); }
.guide-step code { color: #ded7ff; background: rgba(185,163,255,.1); border: 1px solid rgba(185,163,255,.15); border-radius: 5px; padding: 2px 5px; font: 11px 'DM Mono', monospace; }
.guide-callout { display: flex; gap: 14px; align-items: baseline; margin: 24px 0; padding: 16px 18px; border-left: 2px solid var(--purple); border-radius: 0 10px 10px 0; background: rgba(185,163,255,.08); color: var(--muted); font-size: 12px; line-height: 1.6; }
.guide-callout strong { color: var(--text); white-space: nowrap; }
.guide-editorial { width: min(1120px, 100%); max-width: 1120px; margin: 0 auto; padding: 0 28px 110px; }
.guide-hero { min-height: calc(100vh - 74px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 0; }
.guide-hero .eyebrow { justify-content: center; }
.guide-editorial .guide-hero h1 { width: 100%; font-family: 'Press Start 2P', monospace !important; font-size: clamp(30px, 5.1vw, 64px); line-height: 1.42; letter-spacing: -.035em; margin: 28px 0 22px; text-shadow: 4px 4px 0 rgba(71,46,132,.42); }
.guide-editorial .guide-hero h1 em { color: #b9a3ff; text-shadow: 4px 4px 0 rgba(71,46,132,.5); }
.guide-intro { max-width: 620px !important; margin: 0 auto !important; }
.guide-steps { display: grid; gap: 22px; }
.guide-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(28px, 6vw, 84px); min-height: 250px; }
.guide-row.reverse .guide-media { order: 2; }
.guide-row.reverse .guide-copy { order: 1; }
.guide-media { min-height: 220px; border: 1px dashed rgba(185,163,255,.35); border-radius: 16px; display: grid; place-items: center; align-content: center; gap: 8px; color: #756d87; background: linear-gradient(145deg, rgba(29,27,40,.58), rgba(10,11,14,.54)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.guide-media span { font: 10px 'DM Mono', monospace; letter-spacing: .12em; color: var(--purple); }
.guide-media b { font-size: 14px; font-weight: 500; }
.guide-copy i { display: block; margin-bottom: 16px; color: #f5f1ff; font: 28px 'Press Start 2P', monospace; font-style: normal; text-shadow: 3px 3px 0 #493179; }
.guide-copy > b { color: var(--muted); font: 11px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.guide-copy h2 { margin: 10px 0 10px; font-size: 30px; }
.guide-copy p { max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.guide-copy a { color: var(--purple); text-decoration: none; }
.guide-ip-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.guide-ip { display: grid; gap: 6px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16,17,20,.7); color: var(--text); cursor: pointer; transition: transform 180ms var(--motion-ease), border-color 180ms ease, background 180ms ease; }
.guide-ip:hover { transform: translateY(-2px); border-color: rgba(185,163,255,.46); background: rgba(185,163,255,.1); }
.guide-ip small { color: var(--muted); font-size: 9px; }
.guide-ip strong { font: 10px 'DM Mono',monospace; overflow-wrap: anywhere; }
.guide-ip span { color: var(--purple); font-size: 10px; }
.faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms var(--motion-ease), opacity 280ms ease; }
.faq-answer > p { display: block !important; min-height: 0; max-height: none !important; overflow: hidden; margin: 0 !important; opacity: 1 !important; }
.faq details[open] .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.step b, .tier-line b, .rank { font-family: 'Press Start 2P', 'DM Mono', monospace !important; font-weight: 400; letter-spacing: .02em; }
.how { background: radial-gradient(circle at 50% 0%, rgba(118,96,197,.14), transparent 58%), linear-gradient(145deg,#151020,#0c0d10) !important; }
.how-copy { text-align: center; }
.how-copy .eyebrow, .how-copy p, .how-copy .hero-actions { justify-content: center; margin-left: auto; margin-right: auto; }
.how h2 { font-family: 'Press Start 2P', monospace !important; text-transform: uppercase; font-size: clamp(27px, 4vw, 47px) !important; line-height: 1.38; letter-spacing: -.035em; }
.how h2 em { color: #b9a3ff; text-shadow: 3px 3px 0 rgba(71,46,132,.35); }
.step b { font-size: 22px; color: #f1edff; text-shadow: 2px 2px 0 #493179; }
@media (max-width: 780px) { .guide-hero { min-height: 70vh; padding: 60px 0; } .guide-editorial .guide-hero h1 { font-size: clamp(22px, 8vw, 34px); line-height: 1.55; text-shadow: 3px 3px 0 rgba(71,46,132,.42); } .guide-row, .guide-row.reverse { grid-template-columns: 1fr; gap: 18px; min-height: 0; } .guide-row.reverse .guide-media, .guide-row.reverse .guide-copy { order: initial; } .guide-media { min-height: 170px; } .guide-copy { padding: 0 4px 18px; } .guide-copy h2 { font-size: 25px; } }
@media (max-width: 780px) { .guide-ip-grid { grid-template-columns: 1fr; } }
.tier-scale { margin: 70px 0 40px; text-align: center; }
.tier-scale h2 { margin: 12px 0 8px; font-size: 34px; }
.tier-scale > p { color: var(--muted); font-size: 12px; margin-bottom: 28px; }
.tier-line { display: grid; grid-template-columns: 44px 1fr 80px; align-items: center; gap: 12px; max-width: 620px; margin: 8px auto; text-align: left; }
.tier-line b { font: 600 13px 'DM Mono', monospace; }
.tier-line i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #c7f36b, #7e57d9); transform-origin: left; transform: scaleX(calc(var(--level) / 10)); }
.tier-line small { color: var(--muted); font-size: 10px; text-align: right; }
@media (max-width: 780px) { .rules-page { padding: 58px 18px 78px; } .server-card { grid-template-columns: 1fr; } .server-option button { width: 100%; } .rules-list li { padding: 21px 18px 21px 58px; } .rules-list li::before { left: 18px; } }
@media (max-width: 780px) { .rules-page h1 { font-size: clamp(27px, 10vw, 42px); line-height: 1.45; margin-bottom: 34px; text-shadow: 3px 3px 0 rgba(71,46,132,.42); } }
@media (max-width: 780px) { .guide-grid-wide { grid-template-columns: 1fr; } .guide-callout { align-items: flex-start; flex-direction: column; gap: 5px; } }
@media (max-width: 780px) { .tier-scale { margin-top: 52px; } .tier-line { grid-template-columns: 38px 1fr 68px; gap: 8px; } }
.legal-card { max-width: 1120px; margin: 34px auto 70px; padding: 42px 48px 54px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: linear-gradient(145deg, rgba(24,24,29,.82), rgba(10,11,14,.72)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.22); }
.legal-card h1 em { color: var(--purple); font-style: normal; }
.legal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 42px; }
.legal-grid section { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: rgba(16,17,20,.64); }
.legal-grid h2 { margin: 0 0 9px; font-size: 16px; }
.legal-grid p { margin: 0; font-size: 12px; line-height: 1.7; }
.privacy-language { display: flex; justify-content: center; gap: 9px; margin: 14px 0 6px; font-size: 12px; }
.privacy-language button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; padding: 3px 5px; }
.privacy-language button.active, .privacy-language button:hover { color: var(--text); }
.privacy-en { margin-top: 42px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: rgba(16,17,20,.64); animation: faq-copy-in 300ms var(--motion-ease) both; }
.privacy-en h2 { margin: 0 0 8px; font-size: 17px; }
.privacy-en p { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.social-links { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.social-links h2 { margin: 0 0 6px; font-size: 18px; }
.social-links > p { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.social-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.social-grid a { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; font-size: 12px; background: rgba(16,17,20,.6); transition: transform 180ms var(--motion-ease), border-color 180ms ease, background 180ms ease; }
.social-grid a:hover { transform: translateY(-2px); border-color: rgba(185,163,255,.4); background: rgba(185,163,255,.1); }
.social-grid svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.legal-bubble { max-width: 860px; margin: 24px auto 18px; padding: 0 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(20,20,25,.66); backdrop-filter: blur(18px); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.2); }
.legal-bubble summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; cursor: pointer; color: var(--text); font-size: 13px; list-style: none; }
.legal-bubble summary::-webkit-details-marker { display: none; }
.legal-bubble summary b { font-size: 20px; color: var(--purple); transition: transform 260ms var(--motion-ease); }
.legal-bubble[open] summary b { transform: rotate(45deg); }
.legal-bubble-body { display: grid; gap: 14px; padding: 0 0 18px; color: var(--muted); font-size: 12px; animation: faq-copy-in 320ms var(--motion-ease) both; }
.legal-bubble-body p { margin: 0; }
.legal-bubble-links { display: flex; gap: 16px; }
.legal-bubble-links a { color: var(--purple); text-decoration: none; }
.legal-bubble .social-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.legal-bubble .social-grid a { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); text-decoration: none; font-size: 11px; background: rgba(16,17,20,.52); }
.social-glyph { color: var(--purple); font-size: 15px; }
.last-update { color: #686b75; font: 10px 'DM Mono',monospace; }
.site-footer-card { max-width: 1120px; margin: 58px auto 34px; padding: 28px 30px 22px; display: block; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: linear-gradient(145deg, rgba(25,25,29,.92), rgba(15,16,19,.88)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.24); color: var(--text); font: 12px 'Space Grotesk',sans-serif; letter-spacing: 0; }
.footer-main { display: grid; grid-template-columns: 1.4fr .75fr .75fr auto; gap: 32px; align-items: start; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.footer-brand img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.footer-brand strong { font: 20px 'Press Start 2P',monospace; }
.footer-column { display: grid; gap: 8px; }
.footer-column small { color: #6f737d; margin-bottom: 3px; }
.footer-column a { color: #b2b5bd; text-decoration: none; }
.footer-column a:hover { color: #fff; }
.footer-column .support-contact { color: #777c87; font-size: 12px; line-height: 1.45; }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #fff; background: rgba(255,255,255,.035); transition: transform 180ms var(--motion-ease), background 180ms ease, box-shadow 180ms ease; }
.footer-socials .discord, .social-grid a[aria-label="Discord"] { position: relative; --discord-eye: #17181c; }
.footer-socials .discord::after, .social-grid a[aria-label="Discord"]::after { content: ''; position: absolute; width: 2.7px; height: 3.4px; border-radius: 50%; background: var(--discord-eye); box-shadow: 6px 0 0 var(--discord-eye); pointer-events: none; }
.footer-socials .discord::after { left: 13px; top: 16px; }
.social-grid a[aria-label="Discord"]::after { left: 17px; top: 17px; }
.footer-socials a:hover { transform: translateY(-3px); }
.footer-socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer-socials .telegram:hover { background: #229ed9; box-shadow: 0 8px 22px rgba(34,158,217,.25); }
.footer-socials .discord:hover { --discord-eye: #5865f2; background: #5865f2; box-shadow: 0 8px 22px rgba(88,101,242,.25); }
.footer-socials .youtube:hover { background: #ff0000; box-shadow: 0 8px 22px rgba(255,0,0,.22); }
.footer-socials .tiktok:hover { background: #111; box-shadow: 3px 3px 0 #25f4ee,-3px -3px 0 #fe2c55; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); color: #6e727c; font-size: 10px; }
.footer-bottom small { margin-left: auto; color: #676b75; }
@media (max-width: 780px) { .site-footer-card { margin: 40px 18px 24px; padding: 22px 20px; } .footer-main { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1/-1; } .footer-socials { grid-column: 1/-1; } .footer-bottom { display: grid; } .footer-bottom small { margin-left: 0; } }
@media (max-width: 780px) { .legal-bubble { margin: 18px; } .legal-bubble .social-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 780px) { .social-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 780px) { .legal-card { margin: 18px; padding: 30px 22px 38px; } .legal-card h1 { font-size: 38px; } .legal-grid { grid-template-columns: 1fr; margin-top: 30px; } }

.hero-actions a, .secondary-btn, .primary-btn, .discord-btn, .icon-btn,
.telegram-top, .tab, .player-row, .faq details, footer a {
  transition: transform 220ms var(--motion-ease), opacity 180ms ease,
    box-shadow 220ms var(--motion-ease), border-color 220ms ease,
    background-color 220ms ease, color 180ms ease;
}

.hero-actions a:hover, .secondary-btn:hover, .primary-btn:hover,
.discord-btn:hover, .telegram-top:hover, footer a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28), 0 0 0 1px rgba(185, 163, 255, .2);
}
.hero-actions a:active, .secondary-btn:active, .primary-btn:active,
.discord-btn:active, .icon-btn:active { transform: translateY(0) scale(.97); }
.icon-btn:hover { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(185,163,255,.1); }

/* Discord mark: crisp white glyph, never a stretched or clipped bitmap. */
.discord-btn svg, .modal-icon svg { width: 24px; height: 24px; display: block; fill: currentColor; flex: 0 0 auto; }
.discord-btn svg path, .modal-icon svg path { fill: currentColor; fill-rule: evenodd; clip-rule: evenodd; }
.discord-btn { min-width: 174px; justify-content: center; }
.discord-btn svg { width: 19px; height: 19px; }
.modal-icon { position: relative; color: #fff; width: 52px !important; height: 52px !important; border-radius: 15px !important; background: linear-gradient(145deg, #7463ff, #5141d4) !important; border: 1px solid rgba(255,255,255,.24); box-shadow: 0 12px 28px rgba(81,65,212,.42), inset 0 1px rgba(255,255,255,.2); }
.modal-icon::after { content: ''; position: absolute; left: 18px; top: 24px; width: 4px; height: 4px; border-radius: 50%; background: #6473ff; box-shadow: 12px 0 0 #6473ff; pointer-events: none; }
.modal-icon { display: none !important; }
#demo-login { background: #5865f2 !important; color: #fff !important; border-radius: 9px; min-height: 44px; justify-content: center; box-shadow: 0 8px 20px rgba(88,101,242,.28); }
#demo-login:hover { background: #6975ff !important; box-shadow: 0 12px 28px rgba(88,101,242,.38); }
#demo-login svg { width: 19px; height: 19px; fill: #fff !important; }
#demo-login svg path { fill: #fff !important; fill-rule: evenodd; clip-rule: evenodd; }

/* The account menu stays mounted so moving the pointer into it does not close it. */
.account-menu { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity 220ms ease, transform 280ms var(--motion-ease), visibility 0s linear 220ms; }
.account-trigger:hover .account-menu, .account-trigger:focus-within .account-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
/* JS owns the delayed/pinned state; these rules prevent hover CSS from
   reopening a menu while its 1.5s/10s close timer is running. */
.account-trigger[data-open="false"] .account-menu { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98); }
.account-trigger[data-open="true"] .account-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* Premium glass account popover. */
.account-menu {
  width: 224px !important;
  padding: 16px !important;
  gap: 9px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(28,31,37,.94), rgba(12,14,18,.92)) !important;
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  box-shadow: 0 22px 65px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.04);
}
.account-menu::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); opacity: .9; }
.account-menu strong { font-family: 'Space Grotesk', Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.account-menu strong { display: grid; justify-items: center; gap: 9px; padding-top: 2px; text-align: center; }
.account-menu strong::before { content: ''; display: block; width: 64px; height: 62px; border-radius: 8px; background: url('https://mc-heads.net/body/MHF_Alex/100') center top / auto 116px no-repeat; border: 0; box-shadow: 0 10px 20px rgba(0,0,0,.38); image-rendering: pixelated; transform: translateY(-6px); }
.account-menu small { padding: 2px 0 12px !important; color: #b6df7b !important; font-size: 11px !important; border-bottom-color: rgba(255,255,255,.1) !important; }
.account-menu small { margin: 2px 0 4px; padding: 8px 10px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 8px; background: rgba(255,255,255,.04); text-align: center; letter-spacing: .04em; }
.account-menu a, .account-menu button { display: flex; align-items: center; min-height: 36px; padding: 7px 9px !important; border-radius: 9px; color: #d7dbe2 !important; font-family: 'Space Grotesk', Manrope, sans-serif !important; font-size: 13px !important; font-weight: 500; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.account-menu .menu-icon { width: 18px; height: 18px; margin-right: 8px; display: inline-grid; place-items: center; color: #b6bdc8; opacity: .9; }
.account-menu .menu-icon svg { width: 16px; height: 16px; fill: currentColor; }
.account-menu a:hover, .account-menu button:hover { color: #fff !important; background: rgba(255,255,255,.09); text-shadow: none !important; transform: translateX(2px); }

/* Show full Minecraft bodies in leaderboard rows instead of head-only avatars. */
.player { min-height: 68px; }
.skin { width: 76px !important; height: 108px !important; object-fit: contain; object-position: center top; background: transparent !important; border-radius: 0 !important; clip-path: inset(0 0 32% 0); margin-bottom: -34px; filter: drop-shadow(0 9px 9px rgba(0,0,0,.35)); }
.rank { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 9px; color: #fff; font: italic 700 25px 'Space Grotesk', sans-serif !important; letter-spacing: -.08em; text-shadow: 2px 2px 0 rgba(0,0,0,.3); background: linear-gradient(135deg,#273047,#141924); border: 1px solid rgba(255,255,255,.06); transition: transform 240ms var(--motion-ease), box-shadow 240ms ease, filter 240ms ease; overflow: hidden; }
.profile-views { color: #b5bdc9 !important; }
.rank.medal-1 { background: linear-gradient(135deg,#36b8ec,#1665a7 58%,#0f345f); border-color: rgba(116,218,255,.55); }
.rank.medal-2 { background: linear-gradient(135deg,#f5d56b,#b77b18 58%,#6b3d12); border-color: rgba(255,222,120,.55); }
.rank.medal-3 { background: linear-gradient(135deg,#efad70,#b76436 58%,#6e3425); border-color: rgba(255,180,120,.5); }
.rank.medal-purple { background: linear-gradient(135deg,#4d477d,#292643 58%,#1b1a2a); border-color: rgba(167,139,250,.32); }
.rank.medal-muted { background: linear-gradient(135deg,#343942,#20242b); color: #a5abb4; border-color: rgba(255,255,255,.1); }
.rank { font-family: 'Press Start 2P', monospace !important; font-style: normal; font-size: 24px !important; text-shadow: 2px 2px 0 rgba(0,0,0,.38); }
.rank.medal-1:hover, .rank.medal-2:hover, .rank.medal-3:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.18) saturate(1.12); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 24px rgba(240,202,93,.3); animation: medal-pulse 1.25s ease-in-out infinite alternate; }
@keyframes medal-pulse { from { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 14px rgba(240,202,93,.18); } to { box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 30px rgba(240,202,93,.42); } }
.tier { width: 62px !important; min-height: 34px; display: inline-grid; place-items: center; border-radius: 8px !important; font-family: 'Press Start 2P', monospace !important; font-size: 10px !important; letter-spacing: -.02em; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 5px 12px rgba(0,0,0,.2); }
.tier-ht1, .tier-ht2, .tier-ht3, .tier-ht4, .tier-ht5 { background: linear-gradient(135deg,#59408d,#302452) !important; border-color: rgba(190,164,255,.36); }
.tier-lt1, .tier-lt2, .tier-lt3, .tier-lt4, .tier-lt5 { background: linear-gradient(135deg,#3e315f,#25213b) !important; border-color: rgba(166,145,226,.26); }
.player-row { border-color: rgba(255,255,255,.045); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.12); }

/* Keep the dialog in the layout while hidden so its entrance can animate. */
.modal-backdrop {
  display: grid !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.modal-backdrop .modal {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity 260ms ease, transform 320ms var(--motion-ease);
}
.modal-backdrop .modal { background: linear-gradient(145deg, rgba(28,24,42,.9), rgba(12,13,17,.94)); border: 1px solid rgba(214,203,255,.28); box-shadow: 0 30px 100px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(24px) saturate(130%); }
.modal-backdrop .modal::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 10% 0%, rgba(185,163,255,.16), transparent 42%); }
.modal-backdrop.open .modal { opacity: 1; transform: none; }

.search { transition: width 320ms var(--motion-ease), box-shadow 220ms ease, border-color 220ms ease; }
.search:focus-within { box-shadow: 0 0 0 4px rgba(185,163,255,.12); }
.search { width: 42px; height: 42px; min-width: 42px; aspect-ratio: 1; padding: 0 !important; justify-content: center; border-radius: 8px; transition: width 360ms var(--motion-ease), box-shadow 220ms ease, border-color 220ms ease; }
.search.expanded { width: min(250px, 100%); aspect-ratio: auto; padding: 0 12px !important; justify-content: flex-start; }
.search span { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: transparent; font-size: 0; }
.search span::before, .search span::after { content: none !important; display: none !important; }
.search span svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; transition: transform 260ms var(--motion-ease), stroke 180ms ease; }
.search:hover span svg, .search:focus-within span svg { stroke: var(--text); transform: scale(1.08); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.ranking-wrap, .how { scroll-margin-top: 92px; }

.faq details { overflow: hidden; }
.faq details summary::after { transition: transform 320ms var(--motion-ease), background-color 220ms ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details:not([open]) summary::after { transform: rotate(0deg) !important; }
.faq details p { animation: faq-copy-in 360ms var(--motion-ease) both; }
@keyframes faq-copy-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* FAQ answers stay mounted; data-open is the single animated state. */
.faq-answer { display: block; max-height: 0; overflow: hidden; transition: max-height 420ms var(--motion-ease), opacity 280ms ease; }
.faq details[data-open="false"] .faq-answer { max-height: 0; opacity: 0; }
.faq details[data-open="true"] .faq-answer { max-height: 220px; opacity: 1; }
.faq details[data-open="false"] summary::after { transform: rotate(0deg) !important; }
.faq details[data-open="true"] summary::after { transform: rotate(180deg) !important; }

/* The compact search control expands without jumping or clipping its icon. */
.search input { width: 0; min-width: 0; opacity: 0; padding-left: 0; padding-right: 0; transition: width 360ms var(--motion-ease), opacity 180ms ease, padding 360ms var(--motion-ease); }
.search.expanded input { width: 190px; opacity: 1; padding-left: 0; padding-right: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  /* FAQ/search are explicit product interactions requested by the user.
     Keep their state change animated even when the browser advertises the
     reduced-motion preference; decorative page effects remain reduced. */
  .faq-answer { transition-duration: 420ms, 280ms !important; }
  .search, .search input, .search span svg { transition-duration: 360ms, 180ms, 260ms !important; }
  .account-menu { transition-duration: 220ms, 280ms, 0s !important; }
}

/* Keep the Discord action understandable on phones too; icon-only login was confusing. */
@media (max-width: 780px) {
  .search { width: 40px !important; }
  .search.expanded { width: min(240px, calc(100vw - 36px)) !important; }
  .discord-btn { min-width: 0; padding: 10px 13px !important; font-size: 12px !important; gap: 8px; }
  .discord-btn svg { width: 18px; height: 18px; }
}

/* Final narrow-phone layout: keep every header/control inside the viewport. */
@media (max-width: 600px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .topbar { height: 64px; padding: 0 12px; gap: 8px; }
  .brand { min-width: 0; max-width: calc(100vw - 125px); gap: 7px; font-size: 10px; letter-spacing: .045em; white-space: nowrap; }
  .brand-logo { width: 25px !important; height: 25px !important; flex: 0 0 25px; }
  .top-actions { flex: 0 0 auto; gap: 5px; }
  .top-actions .discord-btn { width: 42px; min-width: 42px; height: 40px; padding: 0 !important; justify-content: center; font-size: 0 !important; gap: 0; }
  .top-actions .discord-btn svg { width: 18px; height: 18px; margin: 0; }
  .icon-btn { width: 40px; min-width: 40px; height: 40px; }
  .telegram-top { width: calc(100% - 24px); margin: 14px 12px 0; padding: 9px 11px; gap: 9px; }
  .telegram-top small { max-width: 190px; line-height: 1.3; }
  .hero { padding: 72px 16px 58px; }
  .hero h1 { max-width: 100%; font-size: clamp(34px, 12.5vw, 52px) !important; letter-spacing: -.045em; line-height: 1.08; overflow-wrap: anywhere; }
  .hero p { font-size: 14px; line-height: 1.65; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions a { width: 100%; justify-content: center; }
  .ranking-wrap, .faq, .telegram-card { padding-left: 16px; padding-right: 16px; }
  .section-heading h2 { font-size: 28px; }
  .toolbar { gap: 10px; }
  .toolbar .search { align-self: stretch; width: 42px; }
  .toolbar .search.expanded { width: 100%; }
  .toolbar .search.expanded input { width: calc(100% - 42px); }
  .table-head { grid-template-columns: 34px 1fr 76px; }
  .table-head span:nth-child(3), .player-row > .time { display: none; }
  .player-row { grid-template-columns: 34px 1fr 44px; }
  .player-row .tier { justify-self: end; }
  .how { margin-left: 12px; margin-right: 12px; padding: 28px 20px; }
  .how h2 { font-size: clamp(26px, 8vw, 38px) !important; }
}

@media (max-width: 780px) {
  .guide-editorial { width: 100%; padding: 0 18px 70px; }
  .account-menu { width: min(224px, calc(100vw - 24px)) !important; right: 0; }
  .player { min-height: 58px; }
  .skin { width: 58px !important; height: 88px !important; margin-bottom: -29px; }
  .rank { width: 46px; height: 46px; font-size: 18px !important; }
  .player-row { grid-template-columns: 46px 1fr 44px; }
  .tier { width: 52px !important; min-height: 30px; font-size: 8px !important; }
}