:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f8fc;
  background: #06090e;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #06090e;
  --surface: #0d131c;
  --surface2: #111a26;
  --border: #222d3d;
  --text: #f5f8fc;
  --muted: #8492a5;
  --cyan: #55e5db;
  --blue: #6ea9ff;
  --violet: #9a77ff;
  --danger: #ff646c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button, a, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #72dedc; outline-offset: 3px; }
.site-shell { min-height: 100vh; position: relative; isolation: isolate; }
.home-view, .studio-view { position: relative; z-index: 2; }

.ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: #06090e; }
.ambient:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% -20%, rgba(68,103,174,.18), transparent 38%), linear-gradient(180deg, transparent, rgba(3,6,10,.3)); }
.ambient-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(120,160,205,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,205,.13) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(to bottom, #000, transparent 82%); animation: gridDrift 22s linear infinite; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .75; }
.orb-a { width: 560px; height: 560px; top: -250px; right: -110px; background: radial-gradient(circle, rgba(91,113,255,.17), transparent 69%); animation: orbFloatA 13s ease-in-out infinite alternate; }
.orb-b { width: 500px; height: 500px; left: -270px; top: 38%; background: radial-gradient(circle, rgba(55,233,210,.12), transparent 70%); animation: orbFloatB 16s ease-in-out infinite alternate; }
.orb-c { width: 420px; height: 420px; right: 18%; bottom: -280px; background: radial-gradient(circle, rgba(155,103,255,.1), transparent 69%); animation: orbFloatC 18s ease-in-out infinite alternate; }

.topbar {
  height: 74px;
  width: 100%;
  padding: 0 max(28px, calc((100vw - 1440px) / 2 + 38px));
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(6,9,14,.78);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 10px 36px rgba(0,0,0,.12);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 23px; font-weight: 900; letter-spacing: -.82px; white-space: nowrap; }
.brand-button { border: 0; background: transparent; padding: 0; cursor: pointer; }
.brand-word { display: inline-flex; align-items: baseline; }
.brand-tld { color: #ff2d42; font-weight: 950; text-shadow: 0 0 20px rgba(255,45,66,.26); }
.brand-mark { width: 37px; height: 37px; border-radius: 11px; background: linear-gradient(135deg,var(--cyan),var(--blue)); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 8px; box-shadow: 0 0 28px rgba(69,230,219,.14); transition: transform .25s, box-shadow .25s; }
.brand:hover .brand-mark { transform: rotate(-5deg) scale(1.05); box-shadow: 0 0 32px rgba(69,230,219,.26); }
.brand-mark i { display: block; height: 2px; border-radius: 5px; background: #061217; }
.brand-mark i:nth-child(2) { width: 65%; }
.nav-links { display: flex; align-items: center; gap: 30px; margin: auto; }
.nav-links a, .nav-links button { color: #94a2b4; text-decoration: none; font-size: 13px; font-weight: 850; transition: color .2s, transform .2s; border: 0; padding: 10px 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.nav-links a:hover, .nav-links button:hover { color: #fff; transform: translateY(-1px); }
.nav-links button span { color: #63ded7; font-size: 15px; }
.workspace-home-link { margin-left: 32px; border: 1px solid transparent; background: transparent; color: #8998aa; border-radius: 9px; padding: 8px 11px; font-size: 10px; font-weight: 800; cursor: pointer; display: flex; gap: 7px; align-items: center; transition: .2s; }
.workspace-home-link:hover { color: #fff; border-color: #293648; background: #101722; }
.workspace-home-link span { color: #61dcd5; }
.top-actions, .account-box, .auth-actions { display: flex; align-items: center; gap: 8px; }
.language-switch { display: flex; padding: 3px; border: 1px solid #283446; background: #0a1018; border-radius: 10px; }
.language-switch button { border: 0; background: transparent; color: #627287; border-radius: 7px; padding: 6px 7px; font-size: 8px; font-weight: 900; cursor: pointer; transition: .2s; }
.language-switch button:hover { color: #b7c4d2; }
.language-switch button.active { background: #1b2837; color: #a7e9ff; box-shadow: inset 0 0 0 1px rgba(117,213,231,.08); }
.primary-button, .ghost-button, .danger-button {
  border-radius: 11px;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .22s, filter .22s, border-color .22s, background .22s, box-shadow .22s;
}
.primary-button:before { content: ""; position: absolute; width: 70px; height: 180%; top: -40%; left: -100px; transform: rotate(22deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.27),transparent); transition: left .48s ease; }
.primary-button:hover:before { left: calc(100% + 40px); }
.primary-button { border: 0; background: linear-gradient(135deg,#62e6dd,#6fa8ff); color: #071018; box-shadow: 0 10px 32px rgba(77,193,255,.13); }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 15px 38px rgba(77,193,255,.2); }
.ghost-button { color: #dfe7ef; background: #101722; border: 1px solid #2a3546; }
.ghost-button:hover { transform: translateY(-1px); border-color: #455771; background: #141d2a; }
.danger-button { color: #ff969b; background: rgba(85,25,30,.34); border: 1px solid rgba(255,100,108,.28); }
.danger-button:hover { color: #fff; background: #d94b53; border-color: #e95a62; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(226,68,77,.2); }
.small { min-height: 36px; padding: 0 13px; font-size: 9px; }
.login-link { border: 0; background: transparent; color: #9eacbd; font-size: 10px; font-weight: 800; cursor: pointer; padding: 9px; display: flex; align-items: center; gap: 5px; transition: .2s; }
.login-link span { color: #63d8d5; font-size: 13px; }
.login-link:hover { color: #fff; transform: translateX(1px); }
.user-chip { display: flex; align-items: center; gap: 7px; color: #cdd7e4; font-size: 10px; font-weight: 800; }
.user-chip b { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: #172536; color: #78d9e6; border: 1px solid #294055; }

.hero { max-width: 1440px; min-height: 690px; margin: auto; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 42px; padding: 74px 58px 92px; position: relative; }
.hero-copy { position: relative; z-index: 2; max-width: 690px; }
.eyebrow, .section-kicker { font-size: 9px; letter-spacing: 2px; font-weight: 900; color: #82a9c5; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 29px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero h1 { font-size: clamp(48px,5.2vw,78px); line-height: .99; letter-spacing: -4.2px; margin: 23px 0 26px; max-width: 730px; }
.hero h1 em { font-style: normal; color: transparent; background: linear-gradient(110deg,#6fe2dc,#82b0ff 48%,#b38cff); background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 45px rgba(98,168,255,.08); }
.hero-copy > p { color: #929fb0; font-size: 14px; line-height: 1.78; max-width: 590px; margin: 0; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.hero-button { min-height: 54px; padding: 0 22px; }
.button-icon { width: 23px; height: 23px; display: grid; place-items: center; background: rgba(4,16,23,.1); border-radius: 7px; font-size: 15px; }
.hero-button .arrow { margin-left: 4px; }
.text-button { color: #b5c0cd; text-decoration: none; font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 9px; transition: color .2s, transform .2s; }
.text-button:hover { color: #fff; transform: translateY(1px); }
.play-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #324155; border-radius: 50%; color: #67d8d7; }
.hero-proof { display: flex; gap: 28px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); max-width: 590px; }
.hero-proof span { font-size: 7px; text-transform: uppercase; letter-spacing: .75px; color: #647285; display: flex; align-items: center; gap: 6px; }
.hero-proof b { font-size: 13px; color: #d6e0ea; letter-spacing: -.4px; }
.hero-visual { position: relative; z-index: 2; justify-self: end; width: min(100%,625px); height: 440px; border: 1px solid #2a3547; border-radius: 25px; background: linear-gradient(145deg,rgba(18,25,38,.95),rgba(6,10,16,.98)); box-shadow: 0 38px 100px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.05); padding: 24px; animation: visualFloat 6s ease-in-out infinite; }
.hero-visual:before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 25px; background: linear-gradient(120deg,rgba(79,229,219,.22),transparent 28%,transparent 70%,rgba(124,108,255,.2)); filter: blur(16px); opacity: .42; }
.visual-noise { position: absolute; inset: 0; border-radius: 25px; overflow: hidden; opacity: .18; background: radial-gradient(circle at 80% 20%,rgba(111,129,255,.3),transparent 24%),radial-gradient(circle at 20% 83%,rgba(67,229,214,.24),transparent 28%); }
.preview-topline { position: relative; display: flex; justify-content: space-between; color: #647388; font-size: 8px; font-weight: 900; letter-spacing: 1.5px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.preview-topline span { display: flex; gap: 7px; align-items: center; }
.preview-topline span i, .status-dot { width: 5px; height: 5px; border-radius: 50%; background: #4de0c9; box-shadow: 0 0 10px #4de0c9; animation: blink 1.8s ease-in-out infinite; }
.preview-topline b { color: #6edfd9; }
.mirror-preview { position: relative; height: 276px; display: grid; grid-template-columns: 1fr 70px 126px 70px 1fr; align-items: center; gap: 4px; padding-top: 18px; }
.preview-side { display: flex; flex-direction: column; justify-content: space-around; height: 246px; }
.preview-side span { height: 29px; padding: 0 10px; display: flex; align-items: center; border: 1px solid #2a3547; border-radius: 6px; background: #101722; color: #b9c4d3; font-size: 8px; font-weight: 900; }
.preview-left span { border-left: 2px solid #58d9ca; animation: bracketPulseL 4s ease-in-out infinite; }
.preview-right span { border-right: 2px solid #7a79ff; animation: bracketPulseR 4s 1s ease-in-out infinite; }
.preview-branch { height: 190px; position: relative; }
.preview-branch:before, .preview-branch:after { content: ""; position: absolute; width: 65px; height: 54px; top: 18px; border-color: #3b5269; border-style: solid; }
.preview-branch:after { top: auto; bottom: 18px; }
.left-branch:before, .left-branch:after { border-width: 1px 1px 1px 0; }
.right-branch:before, .right-branch:after { border-width: 1px 0 1px 1px; }
.preview-branch i { position: absolute; width: 35px; height: 1px; top: 50%; background: #3b5269; }
.left-branch i { right: 0; }
.right-branch i { left: 0; }
.preview-center { height: 145px; border: 1px solid #3b5869; background: linear-gradient(160deg,#112532,#11152d); border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.25); }
.preview-center small { color: #6eddd7; font-size: 8px; font-weight: 900; letter-spacing: 1.7px; }
.preview-center strong { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#58ddd3,#707fff); color: #081116; font-size: 17px; box-shadow: 0 0 30px rgba(89,217,212,.18); animation: trophyGlow 2.8s ease-in-out infinite; }
.preview-center span { font-size: 8px; color: #aab6c6; font-weight: 900; letter-spacing: 1.2px; }
.preview-caption { height: 44px; position: relative; border: 1px solid #263547; border-radius: 9px; background: #0d151f; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 8px; text-transform: uppercase; color: #66778d; letter-spacing: .8px; }
.preview-caption b { color: #80e0d8; }
.preview-caption i { width: 3px; height: 3px; border-radius: 50%; background: #405164; }
.floating-chip { position: absolute; border: 1px solid rgba(107,143,178,.25); border-radius: 8px; background: rgba(14,22,33,.84); backdrop-filter: blur(8px); color: #8da0b5; padding: 8px 10px; font-size: 7px; font-weight: 900; letter-spacing: 1px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.chip-a { left: -23px; top: 83px; animation: chipFloat 5s .2s ease-in-out infinite; color: #6edfd9; }
.chip-b { right: -19px; bottom: 63px; animation: chipFloat 5s 1.2s ease-in-out infinite; }

.home-section { max-width: 1324px; margin: auto; padding: 100px 0; border-top: 1px solid rgba(255,255,255,.07); }
.section-copy { max-width: 680px; }
.section-copy h2 { font-size: clamp(34px,4vw,53px); line-height: 1.04; letter-spacing: -2.4px; margin: 13px 0 18px; }
.section-copy p { color: #8290a1; font-size: 12px; line-height: 1.8; max-width: 600px; }
.showcase-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-top: 42px; }
.showcase-card { position: relative; min-height: 128px; border: 1px solid #242e3c; border-radius: 17px; background: linear-gradient(145deg,#0e141d,#0a0f16); display: flex; align-items: center; gap: 15px; padding: 22px; overflow: hidden; transition: transform .28s,border-color .28s,box-shadow .28s; }
.showcase-card:hover { transform: translateY(-5px); border-color: #42546a; box-shadow: 0 20px 44px rgba(0,0,0,.22); }
.showcase-card > i { position: absolute; width: 160px; height: 160px; right: -90px; bottom: -100px; border-radius: 50%; filter: blur(2px); opacity: .2; transition: transform .35s; }
.showcase-card:hover > i { transform: scale(1.28); }
.showcase-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; z-index: 1; }
.showcase-card > div { display: flex; flex-direction: column; gap: 7px; z-index: 1; }
.showcase-card b { font-size: 12px; }
.showcase-card small { color: #748397; font-size: 8px; line-height: 1.5; }
.showcase-football .showcase-icon { background: #123d2d; color: #5bea9f; }.showcase-football > i { background: #23d87c; }
.showcase-esports .showcase-icon { background: #25194e; color: #ad90ff; }.showcase-esports > i { background: #8257ff; }
.showcase-gaming .showcase-icon { background: #0c3541; color: #56eaff; }.showcase-gaming > i { background: #00d9ff; }
.showcase-sport .showcase-icon { background: #45191d; color: #ff7d84; }.showcase-sport > i { background: #ff4d55; }
.showcase-academy .showcase-icon { background: #142f55; color: #72adff; }.showcase-academy > i { background: #3b82f6; }
.showcase-classic .showcase-icon { background: #292e34; color: #e0e5eb; }.showcase-classic > i { background: #bfc7d1; }
.split-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 75px; align-items: center; }
.limit-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.limit-card { border: 1px solid #232e3d; border-radius: 19px; background: rgba(12,17,24,.88); padding: 25px; min-height: 310px; position: relative; }
.limit-card.featured { border-color: #315662; background: linear-gradient(150deg,#10242c,#0b1119); box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.plan-icon { width: 38px; height: 38px; border: 1px solid #2d3b4e; border-radius: 11px; display: grid; place-items: center; color: #75dcd8; margin-bottom: 23px; }
.limit-card small { font-size: 8px; letter-spacing: 1.4px; color: #6f8196; font-weight: 900; }
.limit-card h3 { margin: 7px 0; font-size: 22px; letter-spacing: -.8px; }
.limit-card p { color: #748397; font-size: 9px; line-height: 1.55; margin: 0; }
.limit-row { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #263244; border-radius: 10px; overflow: hidden; margin: 25px 0 18px; }
.limit-row span { min-height: 48px; display: grid; place-items: center; gap: 2px; border-right: 1px solid #263244; padding: 7px 2px; }
.limit-row span:last-child { border-right: 0; }
.limit-row b { font-size: 11px; }
.limit-row i { font-style: normal; font-size: 8px; color: #63d9d1; }
.full { width: 100%; }
.section-copy.centered { text-align: center; max-width: 740px; margin: auto; }
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 47px; }
.how-grid article { min-height: 180px; border: 1px solid #232e3d; border-radius: 18px; background: rgba(11,16,23,.76); padding: 25px; position: relative; overflow: hidden; transition: .25s; }
.how-grid article:hover { border-color: #3c5067; transform: translateY(-3px); }
.how-grid article > span { position: absolute; right: 20px; top: 15px; color: #263446; font-size: 28px; font-weight: 900; }
.how-grid article > i { width: 40px; height: 40px; border-radius: 12px; background: #14202d; color: #69ddd7; display: grid; place-items: center; font-style: normal; font-weight: 900; }
.how-grid article h3 { font-size: 17px; max-width: 230px; margin: 38px 0 0; letter-spacing: -.5px; }
.center-cta { margin: 34px auto 0; display: flex; width: fit-content; }
.site-footer { max-width: 1324px; margin: 38px auto 0; padding: 58px 0 27px; border-top: 1px solid rgba(93,225,215,.18); color: #708094; position: relative; z-index: 2; }
.site-footer:before { content: ""; position: absolute; left: 0; top: -1px; width: 140px; height: 1px; background: linear-gradient(90deg,#5be1d9,#768dff,transparent); box-shadow: 0 0 18px rgba(88,224,216,.24); }
.footer-grid { display: grid; grid-template-columns: 1.35fr .8fr .92fr 1.15fr; gap: 56px; }
.footer-brand-column { max-width: 310px; }
.footer-brand-column > p { margin: 22px 0 24px; color: #718196; font-size: 10px; line-height: 1.75; }
.footer-socials { display: flex; align-items: center; gap: 12px; }
.footer-socials a { width: 50px; height: 50px; border: 0; display: grid; place-items: center; text-decoration: none; transition: transform .22s,background .22s,color .22s,box-shadow .22s; position: relative; }
.footer-socials a b { position: absolute; width: max-content; left: 50%; bottom: -24px; transform: translateX(-50%) translateY(-3px); opacity: 0; pointer-events: none; color: #7c8ea3; font-size: 6px; transition: .2s; }
.footer-socials a:hover { transform: translateY(-4px) scale(1.07); }
.footer-socials a:hover b { opacity: 1; transform: translateX(-50%); }
.footer-socials svg { width: 25px; height: 25px; transition: transform .22s,filter .22s; }
.footer-socials .social-telegram { color: #fff; background: #229ed9; border-radius: 50%; box-shadow: 0 8px 24px rgba(34,158,217,.2); }
.footer-socials .social-youtube { width: 56px; color: #fff; background: #ff0033; border-radius: 14px; box-shadow: 0 8px 24px rgba(255,0,51,.18); }
.footer-socials .social-telegram:hover { background: #32ace3; box-shadow: 0 12px 32px rgba(34,158,217,.38); }
.footer-socials .social-youtube:hover { background: #ff1745; box-shadow: 0 12px 32px rgba(255,0,51,.35); }
.footer-socials a:hover svg { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 0 7px rgba(255,255,255,.45)); }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.footer-column h3 { margin: 5px 0 8px; color: #dfe9f3; font-size: 13px; letter-spacing: -.3px; }
.footer-column > a,.footer-column > button,.footer-column > span { border: 0; background: transparent; padding: 0; color: #7a8ca1; text-decoration: none; font-size: 9px; line-height: 1.5; display: inline-flex; align-items: center; gap: 8px; text-align: left; transition: color .2s,transform .2s; }
.footer-column > a,.footer-column > button { cursor: pointer; }
.footer-column > a:hover,.footer-column > button:hover { color: #dbe8f2; transform: translateX(3px); }
.footer-column > a > i,.footer-column > button > i,.footer-column > span > i { width: 4px; height: 4px; border-radius: 50%; background: #42cfc5; box-shadow: 0 0 7px rgba(66,207,197,.28); flex: 0 0 auto; }
.footer-product-column > span:nth-of-type(2) i { background: #8d75ff; }
.footer-contact-column { gap: 10px; }
.footer-contact-column .footer-contact-item { width: 100%; min-height: 43px; padding: 0 11px; border: 1px solid #253345; border-radius: 10px; background: rgba(15,23,34,.72); gap: 10px; }
.footer-contact-item > span { width: 25px; height: 25px; border-radius: 7px; background: #172333; color: #70dcd7; display: grid; place-items: center; flex: 0 0 auto; }
.footer-contact-item b { min-width: 0; overflow-wrap: anywhere; color: #9bacc0; font-size: 8px; }
.footer-contact-column .footer-contact-item:hover { transform: translateY(-1px); border-color: #38536a; }
.footer-contact-column .footer-message-button { margin-top: 3px; color: #70ddd7; font-weight: 900; }
.footer-bottom { margin-top: 52px; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #4f6074; font-size: 8px; }
.footer-bottom nav { display: flex; gap: 22px; }
.footer-bottom a { color: #61758c; text-decoration: none; transition: .2s; }
.footer-bottom a:hover { color: #8de7e1; }

.info-page { position: relative; z-index: 2; min-height: calc(100vh - 74px); padding: 54px 30px 84px; }
.info-shell { width: min(1080px,100%); margin: 0 auto; }
.info-tabs { width: fit-content; max-width: 100%; margin: 0 auto 56px; padding: 5px; border: 1px solid #243244; border-radius: 13px; background: rgba(9,15,23,.82); display: flex; gap: 3px; overflow-x: auto; box-shadow: 0 16px 50px rgba(0,0,0,.18); }
.info-tabs button { min-width: max-content; border: 0; border-radius: 9px; background: transparent; padding: 10px 14px; color: #6f8093; font-size: 9px; font-weight: 900; cursor: pointer; transition: .22s; }
.info-tabs button:hover { color: #d5e2ec; background: #101b27; transform: translateY(-1px); }
.info-tabs button.active { color: #071116; background: linear-gradient(135deg,#59e1d8,#78a7ff); box-shadow: 0 8px 24px rgba(70,185,211,.15); }
.info-hero { min-height: 285px; padding: 52px 54px; border: 1px solid #283546; border-radius: 24px; background: radial-gradient(circle at 88% 10%,rgba(102,118,255,.15),transparent 30%),radial-gradient(circle at 8% 100%,rgba(74,228,211,.09),transparent 28%),linear-gradient(145deg,rgba(15,23,34,.96),rgba(7,12,18,.96)); box-shadow: 0 30px 90px rgba(0,0,0,.24); display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: end; position: relative; overflow: hidden; }
.info-hero:after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -120px; border: 1px solid rgba(114,183,255,.16); border-radius: 50%; box-shadow: 0 0 0 32px rgba(92,220,213,.018),0 0 0 64px rgba(124,111,255,.018); }
.info-hero > div:first-child { position: relative; z-index: 1; max-width: 760px; }
.info-hero h1 { margin: 16px 0 18px; max-width: 780px; font-size: clamp(38px,5vw,61px); line-height: 1.02; letter-spacing: -3px; }
.info-hero p { max-width: 720px; margin: 0; color: #8b99aa; font-size: 12px; line-height: 1.8; }
.info-meta { position: relative; z-index: 1; min-width: 165px; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.info-meta span { padding: 7px 9px; border: 1px solid rgba(91,222,214,.22); border-radius: 8px; background: rgba(29,99,96,.17); color: #7de2dc; font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.info-meta small { color: #586a7e; font-size: 7px; }
.info-card-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.info-card-grid article { min-height: 190px; padding: 27px 29px; border: 1px solid #243141; border-radius: 17px; background: linear-gradient(145deg,rgba(13,20,29,.91),rgba(8,13,19,.88)); position: relative; overflow: hidden; transition: transform .25s,border-color .25s,box-shadow .25s; }
.info-card-grid article:hover { transform: translateY(-3px); border-color: #3a5267; box-shadow: 0 18px 48px rgba(0,0,0,.2); }
.info-card-grid article > span { position: absolute; right: 21px; top: 17px; color: #25364a; font-size: 25px; font-weight: 900; }
.info-card-grid h2 { margin: 7px 0 15px; padding-right: 42px; font-size: 18px; letter-spacing: -.55px; }
.info-card-grid p { margin: 0; color: #7d8da0; font-size: 10px; line-height: 1.75; }
.info-faq-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.info-faq-list details { border: 1px solid #253243; border-radius: 15px; background: rgba(11,17,25,.9); overflow: hidden; transition: border-color .2s,background .2s; }
.info-faq-list details[open] { border-color: #345864; background: linear-gradient(135deg,rgba(15,34,39,.86),rgba(11,18,29,.94)); }
.info-faq-list summary { min-height: 65px; padding: 0 20px; display: grid; grid-template-columns: 38px 1fr 28px; align-items: center; gap: 9px; list-style: none; cursor: pointer; }
.info-faq-list summary::-webkit-details-marker { display: none; }
.info-faq-list summary > span { color: #4c6277; font-size: 9px; font-weight: 900; }
.info-faq-list summary b { font-size: 11px; letter-spacing: -.2px; }
.info-faq-list summary i { width: 27px; height: 27px; border-radius: 8px; background: #131f2c; color: #69ddd6; display: grid; place-items: center; font-size: 13px; font-style: normal; transition: transform .2s,background .2s; }
.info-faq-list details[open] summary i { transform: rotate(45deg); background: #163238; }
.info-faq-list details p { margin: -2px 58px 0 67px; padding: 0 0 21px; color: #8293a6; font-size: 10px; line-height: 1.75; }
.info-call-card { margin-top: 14px; min-height: 108px; padding: 20px 24px; border: 1px solid rgba(83,218,208,.25); border-radius: 17px; background: linear-gradient(115deg,rgba(18,62,63,.56),rgba(18,28,46,.75)); color: inherit; text-decoration: none; display: grid; grid-template-columns: 50px 1fr 35px; align-items: center; gap: 15px; transition: .25s; }
.info-call-card:hover { transform: translateY(-3px); border-color: rgba(95,232,221,.5); box-shadow: 0 20px 55px rgba(34,132,131,.12); }
.info-call-card > span { width: 48px; height: 48px; border-radius: 14px; background: #173d40; color: #74e4dc; display: grid; place-items: center; font-size: 18px; }
.info-call-card div { display: flex; flex-direction: column; gap: 4px; }
.info-call-card small { color: #6f8898; font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.info-call-card strong { color: #dffefa; font-size: 19px; letter-spacing: -.5px; }
.info-call-card p { margin: 0; color: #73a7a8; font-size: 8px; }
.info-call-card > i { color: #73e1db; font-size: 18px; font-style: normal; }
.contact-direct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-direct-grid .email-card { border-color: rgba(119,116,255,.24); background: linear-gradient(115deg,rgba(31,34,75,.55),rgba(14,26,43,.78)); }
.contact-direct-grid .email-card > span { background: #252752; color: #aaa0ff; }
.contact-direct-grid .email-card > i { color: #a89cff; }
.contact-form-card { margin-top: 14px; padding: 34px; border: 1px solid #293749; border-radius: 20px; background: radial-gradient(circle at 0 0,rgba(75,224,214,.07),transparent 35%),linear-gradient(145deg,rgba(13,20,29,.95),rgba(8,13,20,.95)); display: grid; grid-template-columns: .85fr 1.15fr; gap: 42px; }
.contact-form-copy h2 { margin: 12px 0 13px; font-size: 28px; letter-spacing: -1.2px; }
.contact-form-copy p { margin: 0; color: #788a9f; font-size: 10px; line-height: 1.75; }
.contact-form-copy > small { display: block; margin-top: 22px; padding: 11px 12px; border: 1px solid rgba(102,167,188,.14); border-radius: 10px; background: rgba(21,40,50,.4); color: #62808c; font-size: 7px; line-height: 1.55; }
.contact-form-card form { display: flex; flex-direction: column; gap: 13px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-form-card label { display: flex; flex-direction: column; gap: 7px; color: #7e90a5; font-size: 8px; font-weight: 900; }
.contact-form-card input,.contact-form-card textarea { width: 100%; border: 1px solid #2a394b; border-radius: 11px; background: #090f17; color: #eaf3fb; padding: 0 13px; outline: 0; font: inherit; transition: border-color .2s,box-shadow .2s; }
.contact-form-card input { height: 46px; }
.contact-form-card textarea { min-height: 128px; padding-top: 13px; resize: vertical; line-height: 1.55; }
.contact-form-card input:focus,.contact-form-card textarea:focus { border-color: #4d8f99; box-shadow: 0 0 0 4px rgba(74,221,211,.05); }
.contact-form-card textarea::placeholder { color: #394a5e; }
.contact-status { min-height: 38px; padding: 9px 11px; border-radius: 9px; display: flex; align-items: center; gap: 8px; font-size: 8px; font-weight: 800; }
.contact-status.success { border: 1px solid rgba(78,207,157,.22); background: rgba(21,87,61,.22); color: #8ae1ba; }
.contact-status.error { border: 1px solid rgba(230,91,105,.22); background: rgba(88,25,34,.24); color: #ef9ba5; }
.contact-send { align-self: flex-end; min-width: 160px; }
.info-bottom-bar { margin-top: 28px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.info-bottom-bar > span { color: #526276; font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }

.studio-view { max-width: 1440px; min-height: calc(100vh - 74px); margin: auto; display: grid; grid-template-columns: 276px 1fr; }
.studio-sidebar { padding: 52px 29px 32px 38px; border-right: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg,rgba(10,15,23,.88),rgba(7,11,17,.52)); display: flex; flex-direction: column; min-height: calc(100vh - 74px); position: sticky; top: 74px; align-self: start; height: calc(100vh - 74px); }
.studio-sidebar h2 { margin: 10px 0 8px; font-size: 22px; letter-spacing: -.8px; overflow: hidden; text-overflow: ellipsis; }
.studio-sidebar > div:first-child p { color: #5f7084; font-size: 8px; display: flex; align-items: center; gap: 7px; margin: 0; }
.step-list { margin-top: 43px; display: flex; flex-direction: column; position: relative; }
.step-list:before { content: ""; position: absolute; width: 1px; background: #263245; left: 17px; top: 34px; bottom: 34px; }
.step-item { min-height: 66px; display: grid; grid-template-columns: 36px 1fr 12px; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; padding: 7px 5px 7px 0; cursor: pointer; position: relative; color: #657488; }
.step-item:disabled { cursor: default; }
.step-icon { width: 35px; height: 35px; border-radius: 10px; background: #0e151f; border: 1px solid #273244; display: grid; place-items: center; font-size: 10px; font-weight: 900; position: relative; z-index: 2; transition: .25s; }
.step-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.step-item small { color: #4e5c6f; font-size: 7px; font-weight: 900; }
.step-item b { font-size: 9px; color: #738297; transition: .2s; }
.step-item > i { width: 5px; height: 5px; border-radius: 50%; background: #283547; }
.step-item.active .step-icon { background: linear-gradient(135deg,#55e3d9,#6fa6ff); border-color: transparent; color: #081118; box-shadow: 0 0 24px rgba(85,227,217,.18); }
.step-item.active b { color: #edf6ff; }.step-item.active small { color: #72d8d8; }.step-item.active > i { background: #5ce0d5; box-shadow: 0 0 10px #5ce0d5; }
.step-item.done .step-icon { color: #68dcd4; border-color: #2b595b; background: #0f2227; }.step-item.done b { color: #9aacbf; }
.sidebar-cancel { margin-top: auto; min-height: 42px; border: 1px solid #283446; border-radius: 10px; background: #0c121b; color: #75869b; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9px; font-weight: 800; cursor: pointer; transition: .2s; }
.sidebar-cancel:hover { color: #fff; background: #121b27; border-color: #3b4a5e; }
.studio-main { min-width: 0; padding: 48px 52px 76px; position: relative; }
.workspace-progress { max-width: 900px; margin: 0 auto 34px; display: grid; grid-template-columns: 60px 1fr 65px; align-items: center; gap: 13px; color: #536277; font-size: 8px; font-weight: 900; }
.workspace-progress > span b { color: #7fdedb; font-size: 11px; }
.workspace-progress > div { height: 3px; border-radius: 6px; background: #1c2736; overflow: hidden; }
.workspace-progress > div i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#55e2d7,#748eff); transition: width .35s ease; }
.workspace-progress small { text-align: right; color: #596a7e; font-size: 8px; }
.wizard-panel { max-width: 900px; margin: auto; min-height: 540px; border: 1px solid #232f3f; border-radius: 23px; background: linear-gradient(155deg,rgba(16,23,34,.94),rgba(8,13,20,.95)); padding: 48px; box-shadow: 0 28px 80px rgba(0,0,0,.22); position: relative; overflow: hidden; }
.wizard-panel:after { content: ""; position: absolute; width: 280px; height: 280px; right: -160px; top: -150px; border-radius: 50%; background: radial-gradient(circle,rgba(89,126,242,.11),transparent 70%); pointer-events: none; }
.wizard-panel.wide { max-width: 1050px; }
.pairing-panel { max-width: 980px; }
.pairing-choice-grid { margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pairing-choice-card { min-height: 166px; padding: 22px; border: 1px solid #29384a; border-radius: 17px; background: linear-gradient(145deg,#0b141e,#0b111a); color: #dfeaf3; text-align: left; display: grid; grid-template-columns: 52px 1fr 26px; gap: 14px; align-items: center; cursor: pointer; transition: .24s ease; position: relative; overflow: hidden; }
.pairing-choice-card:before { content: ""; position: absolute; inset: auto -60px -95px auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle,rgba(83,224,214,.12),transparent 68%); pointer-events: none; }.pairing-choice-card.manual:before { background: radial-gradient(circle,rgba(221,79,190,.12),transparent 68%); }
.pairing-choice-card:hover { transform: translateY(-3px); border-color: #426679; box-shadow: 0 18px 48px rgba(0,0,0,.2); }.pairing-choice-card.manual:hover { border-color: #704b73; }
.pairing-choice-card.active { border-color: #4cbfc4; background: linear-gradient(145deg,#0d2129,#0d1721); box-shadow: inset 0 0 0 1px rgba(92,226,218,.07),0 16px 45px rgba(37,192,189,.08); }.pairing-choice-card.manual.active { border-color: #bc5fae; background: linear-gradient(145deg,#171526,#251528); box-shadow: inset 0 0 0 1px rgba(245,102,214,.07),0 16px 45px rgba(190,60,160,.08); }
.pairing-choice-icon { width: 52px; height: 52px; border: 1px solid #31515c; border-radius: 14px; background: #10252d; color: #6ce1dc; display: grid; place-items: center; font-size: 18px; font-weight: 1000; }.manual .pairing-choice-icon { border-color: #543653; background: #251727; color: #f08bd7; font-size: 12px; }
.pairing-choice-card div { display: flex; flex-direction: column; gap: 8px; }.pairing-choice-card b { font-size: 13px; }.pairing-choice-card p { margin: 0; color: #6e8092; font-size: 8px; line-height: 1.6; }.pairing-choice-card em { width: 25px; height: 25px; border: 1px solid #314354; border-radius: 8px; display: grid; place-items: center; color: #63778a; font-size: 10px; font-style: normal; font-weight: 1000; }.pairing-choice-card.active em { color: #86efe8; border-color: #3f716f; background: #153433; }.pairing-choice-card.manual.active em { color: #ff9de3; border-color: #704165; background: #351c31; }
.pairing-flow-preview { margin-top: 18px; min-height: 52px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: #080e15; display: flex; align-items: center; gap: 8px; color: #728396; }.pairing-flow-preview > span { min-width: 32px; height: 28px; padding: 0 9px; border-radius: 7px; background: #10242b; color: #73dcd8; display: grid; place-items: center; font-size: 7px; font-weight: 1000; }.pairing-flow-preview > i { color: #db71c2; font-size: 7px; font-style: normal; font-weight: 1000; }.pairing-flow-preview > b { color: #4a6175; }.pairing-flow-preview > small { margin-left: auto; color: #66798b; font-size: 7px; font-weight: 900; }
.next-button:disabled { opacity: .42; cursor: not-allowed; transform: none !important; filter: saturate(.55); }
.wizard-heading { max-width: 690px; }
.wizard-heading h1, .result-top h1 { font-size: clamp(33px,4vw,49px); letter-spacing: -2.2px; line-height: 1.04; margin: 12px 0 14px; }
.wizard-heading p, .result-top p { color: #7d8b9d; line-height: 1.7; font-size: 11px; margin: 0; max-width: 650px; }
.tournament-name-field { display: block; margin-top: 55px; }
.tournament-name-field > span { display: block; color: #8b9aad; font-size: 9px; font-weight: 800; margin: 0 0 9px 3px; }
.tournament-name-field > div { height: 67px; border: 1px solid #2b384b; border-radius: 14px; background: #090f17; display: flex; align-items: center; padding: 0 14px; transition: .2s; }
.tournament-name-field > div:focus-within { border-color: #4b8f9d; box-shadow: 0 0 0 4px rgba(74,218,212,.05), 0 15px 40px rgba(0,0,0,.15); }
.input-icon { width: 35px; height: 35px; border-radius: 9px; background: #14202e; color: #70dcd9; display: grid; place-items: center; }
.tournament-name-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; color: #f3f8fd; background: transparent; padding: 0 14px; font-size: 15px; font-weight: 800; }
.tournament-name-field input::placeholder { color: #3c4a5c; font-weight: 600; }
.tournament-name-field small { color: #4e5f72; font-size: 8px; white-space: nowrap; }
.wizard-actions { margin-top: 43px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.next-button { min-width: 128px; }
.error-banner { margin-top: 15px; border: 1px solid #61303a; background: rgba(57,18,24,.72); color: #f1a4ad; border-radius: 11px; padding: 12px 14px; font-size: 9px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.error-banner > span { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: #6a2b35; color: #ffb7bf; }
.studio-size-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 40px; }
.studio-size-card { min-height: 155px; border: 1px solid #263244; border-radius: 17px; background: #0a1018; color: #dce7f1; padding: 22px; text-align: left; display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; position: relative; overflow: hidden; cursor: pointer; transition: .25s; }
.studio-size-card:after { content: ""; position: absolute; width: 120px; height: 120px; right: -75px; top: -70px; border-radius: 50%; background: #54d9d6; opacity: 0; filter: blur(5px); transition: opacity .25s; }
.studio-size-card:hover { border-color: #40536a; transform: translateY(-2px); }
.studio-size-card.active { border-color: #4d8d9b; background: linear-gradient(145deg,#0e252b,#0b141e); box-shadow: 0 16px 42px rgba(0,0,0,.18); }
.studio-size-card.active:after { opacity: .11; }
.size-check { grid-row: 1/3; width: 24px; height: 24px; border-radius: 8px; border: 1px solid #344255; color: #071419; font-size: 10px; font-weight: 900; display: grid; place-items: center; }
.studio-size-card.active .size-check { border-color: transparent; background: #61ded8; }
.studio-size-card strong { font-size: 34px; letter-spacing: -2px; line-height: .85; }
.studio-size-card > b { grid-column: 2; font-size: 9px; color: #8999ac; margin-top: 7px; }
.studio-size-card > div { grid-column: 2/4; display: flex; align-items: center; gap: 7px; color: #5d6f83; font-size: 8px; margin-top: 15px; }
.studio-size-card > div i { width: 3px; height: 3px; border-radius: 50%; background: #435164; }
.studio-size-card > small { grid-column: 3; grid-row: 1; color: #68d7d1; font-size: 8px; font-weight: 900; }
.studio-size-card.account-locked { border-color: #30394b; background: linear-gradient(145deg,#0b1119,#121421); }
.studio-size-card.account-locked .size-check { border-color: #455269; color: #9b8eff; background: rgba(93,73,170,.13); }
.studio-size-card.account-locked > small { color: #ad9cff; }
.studio-size-card.account-locked:hover { border-color: #695c9c; box-shadow: 0 13px 34px rgba(94,70,170,.11); }
.row-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; max-width: none; }
.demo-button { white-space: nowrap; }
.names-toolbar { margin-top: 30px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; color: #68798d; font-size: 8px; font-weight: 800; }
.names-toolbar span b { color: #73dbd7; }
.names-toolbar > i { height: 3px; background: #1d2938; border-radius: 4px; overflow: hidden; }
.names-toolbar > i b { display: block; height: 100%; background: linear-gradient(90deg,#54dfd5,#718fff); transition: width .25s; }
.names-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 16px; max-height: 450px; overflow: auto; padding-right: 6px; }
.names-grid::-webkit-scrollbar, .bracket-canvas::-webkit-scrollbar { width: 7px; height: 7px; }
.names-grid::-webkit-scrollbar-thumb, .bracket-canvas::-webkit-scrollbar-thumb { background: #293749; border-radius: 8px; }
.name-field { height: 50px; border: 1px solid #202b39; border-radius: 10px; background: #0a1017; display: flex; align-items: center; transition: .2s; }
.name-field:focus-within { border-color: #487f91; background: #0d161f; box-shadow: 0 0 0 3px rgba(69,230,219,.04); }
.name-field > span { width: 38px; text-align: center; color: #516075; font-size: 7px; font-weight: 900; border-right: 1px solid #202b39; }
.name-field input { height: 100%; min-width: 0; flex: 1; background: transparent; border: 0; outline: 0; color: #edf4fb; padding: 0 10px; font-size: 10px; font-weight: 700; }
.name-field input::placeholder { color: #39485a; }
.manual-pairs-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 16px; max-height: 470px; overflow: auto; padding-right: 6px; }.manual-pairs-grid::-webkit-scrollbar { width: 7px; }.manual-pairs-grid::-webkit-scrollbar-thumb { background: #293749; border-radius: 8px; }
.manual-pair-card { border: 1px solid #253443; border-radius: 13px; background: linear-gradient(145deg,#0a121a,#091018); overflow: hidden; transition: .2s; }.manual-pair-card:focus-within { border-color: #3f6975; box-shadow: 0 0 0 3px rgba(69,222,215,.035); }.manual-pair-card header { min-height: 32px; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.055); background: #0c1720; display: flex; align-items: center; justify-content: space-between; }.manual-pair-card header span { color: #7bcfcf; font-size: 7px; font-weight: 1000; text-transform: uppercase; letter-spacing: .45px; }.manual-pair-card header small { color: #465d70; font-size: 6px; font-weight: 900; }
.manual-pair-fields { min-height: 64px; padding: 9px; display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); align-items: center; gap: 6px; }.manual-pair-fields > b { color: #c963b3; text-align: center; font-size: 7px; }.manual-pair-fields label { height: 42px; border: 1px solid #263948; border-radius: 9px; background: #071018; display: grid; grid-template-columns: 28px 1fr; align-items: center; overflow: hidden; }.manual-pair-fields label:focus-within { border-color: #47838a; }.manual-pair-fields label > span { height: 100%; border-right: 1px solid #263948; color: #5bdcd9; display: grid; place-items: center; font-size: 7px; font-weight: 1000; }.manual-pair-fields label:last-child > span { color: #ec79cd; }.manual-pair-fields input { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: #edf6fb; padding: 0 8px; font-size: 8px; font-weight: 750; }.manual-pair-fields input::placeholder { color: #344454; }
.studio-theme-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 38px; }
.theme-card { position: relative; min-height: 105px; border: 1px solid #242e3d; border-radius: 14px; background: #0b1017; display: flex; align-items: center; gap: 13px; padding: 16px; text-align: left; cursor: pointer; overflow: hidden; transition: .24s; }
.theme-card:hover { transform: translateY(-2px); border-color: #405168; }
.theme-card.active { border-color: #527f8e; box-shadow: 0 13px 36px rgba(0,0,0,.16); }
.theme-icon { width: 43px; height: 43px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; position: relative; z-index: 1; flex: 0 0 auto; }
.theme-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 1; }
.theme-card b { font-size: 10px; }.theme-card small { font-size: 7px; line-height: 1.45; color: #748397; }
.theme-card > i { position: absolute; width: 120px; height: 120px; border-radius: 50%; right: -62px; bottom: -70px; opacity: .19; }
.theme-card > em { position: absolute; right: 10px; top: 9px; width: 20px; height: 20px; border: 1px solid #344255; background: #111a25; color: #7890a7; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 9px; z-index: 2; }
.theme-card.active > em { background: #69ddd7; border-color: transparent; color: #081317; }
.theme-football .theme-icon { background: #123d2d; color: #5bea9f; }.theme-football > i { background: #20d879; }
.theme-esports .theme-icon { background: #25194e; color: #ad90ff; }.theme-esports > i { background: #8257ff; }
.theme-gaming .theme-icon { background: #0c3541; color: #56eaff; }.theme-gaming > i { background: #00d9ff; }
.theme-sport .theme-icon { background: #45191d; color: #ff7d84; }.theme-sport > i { background: #ff4d55; }
.theme-academy .theme-icon { background: #142f55; color: #72adff; }.theme-academy > i { background: #3b82f6; }
.theme-classic .theme-icon { background: #292e34; color: #e0e5eb; }.theme-classic > i { background: #bfc7d1; }
.create-summary-card { margin-top: 24px; border: 1px solid #253142; border-radius: 14px; background: #0a1018; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.create-summary-card h3 { margin: 6px 0 0; font-size: 17px; letter-spacing: -.4px; }
.summary-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.summary-pills span { border: 1px solid #273447; background: #101824; border-radius: 8px; padding: 7px 9px; color: #718197; font-size: 7px; font-weight: 800; }
.summary-pills b { color: #70dcd6; margin-right: 3px; }
.create-final-button { min-width: 170px; }
.result-workspace { max-width: 1120px; margin: auto; }
.result-top { display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.result-top > div:first-child { max-width: 650px; }
.success-kicker { color: #5ee1c1; }
.result-secondary-actions { display: flex; gap: 8px; }
.bracket-frame { margin-top: 30px; border: 1px solid #273344; border-radius: 19px; background: #05080d; padding: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.bracket-canvas { border-radius: 12px; overflow: auto; max-height: 720px; }
.bracket-canvas svg { display: block; width: 100%; height: auto; min-width: 850px; }
.export-bar { margin-top: 12px; border: 1px solid #263244; border-radius: 14px; background: #0d141e; padding: 12px 13px 12px 17px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.export-bar > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.export-icon { width: 35px; height: 35px; border-radius: 10px; background: #14222e; color: #66ddd7; display: grid; place-items: center; flex: 0 0 auto; }
.export-bar > div:first-child > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.export-bar > div:first-child b { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-bar > div:first-child small { color: #647388; font-size: 7px; }
.download-actions { display: flex; gap: 6px; }
.download-button { height: 49px; min-width: 84px; border: 1px solid #293548; background: #101722; border-radius: 10px; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: #dbe5ef; cursor: pointer; transition: .2s; }
.download-button:hover { transform: translateY(-2px); border-color: #486076; }
.download-button:disabled { opacity: .55; cursor: wait; transform: none; }
.download-icon { width: 25px; height: 25px; border-radius: 7px; background: #182332; display: grid; place-items: center; color: #7edce8; font-size: 14px; font-weight: 900; }
.download-button > span:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.download-button small { font-size: 5px; text-transform: uppercase; color: #67778b; }
.download-button b { font-size: 9px; }
.primary-download { background: linear-gradient(135deg,#5de4dc,#6aa9ff); border-color: transparent; color: #071018; }
.primary-download .download-icon { background: rgba(6,18,25,.16); color: #071018; }
.primary-download small { color: #28526a; }

.modal-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(2,5,10,.78); backdrop-filter: blur(15px); display: grid; place-items: center; padding: 20px; animation: fadeIn .2s ease-out; }
.auth-modal { width: min(100%,445px); position: relative; border: 1px solid #2b3749; border-radius: 22px; background: linear-gradient(155deg,#111927,#090e16); box-shadow: 0 30px 90px rgba(0,0,0,.48); padding: 34px; animation: modalIn .28s ease-out; }
.modal-close { position: absolute; right: 16px; top: 14px; width: 34px; height: 34px; border: 1px solid #2c3747; background: #111823; color: #8090a3; border-radius: 10px; font-size: 20px; cursor: pointer; transition: .2s; }
.modal-close:hover { background: #4c1f26; color: #ff9ca2; border-color: #68313a; transform: rotate(4deg); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 17px; }
.auth-modal h2 { font-size: 30px; letter-spacing: -1.3px; margin: 8px 0; }
.auth-note { font-size: 9px; color: #67768a; margin: 0 0 24px; }
.auth-modal form { display: flex; flex-direction: column; gap: 13px; }
.auth-modal label { display: flex; flex-direction: column; gap: 7px; }
.auth-modal label > span { font-size: 9px; color: #8391a3; font-weight: 800; }
.auth-modal input { height: 48px; border: 1px solid #283447; border-radius: 10px; background: #0a1019; color: #eef5fc; outline: 0; padding: 0 13px; font-size: 11px; }
.auth-modal input:focus { border-color: #4c8ca6; box-shadow: 0 0 0 3px rgba(69,230,219,.05); }
.auth-modal input::placeholder { color: #435064; }
.password-input-wrap { position: relative; width: 100%; }
.password-input-wrap input { width: 100%; padding-right: 48px; }
.password-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 34px; height: 34px; border: 1px solid #2d3c50; border-radius: 9px; background: #111b28; color: #7bdedb; display: grid; place-items: center; cursor: pointer; font-size: 17px; transition: .18s; }
.password-eye:hover { border-color: #4d8c9d; color: #d8ffff; background: #172737; }
.auth-submit { margin-top: 4px; height: 49px; }
.auth-error { padding: 11px 12px; border: 1px solid #63303a; background: #221216; border-radius: 9px; color: #f1a7b0; font-size: 9px; font-weight: 700; }
.auth-switch { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; font-size: 9px; color: #68778a; }
.auth-switch button { border: 0; background: transparent; color: #74d4e3; font-size: 9px; font-weight: 900; cursor: pointer; padding: 0; }
.forgot-password-button { align-self: flex-end; border: 0; background: transparent; color: #66cbd6; font-size: 9px; font-weight: 850; cursor: pointer; padding: 0 1px 2px; transition: .2s; }
.forgot-password-button:hover { color: #a38cff; transform: translateX(-2px); }
.reset-email-pill { min-height: 38px; display: flex; align-items: center; padding: 0 12px; border: 1px solid #223d4b; border-radius: 10px; background: #08151e; color: #77aeb9; font-size: 9px; }
.reset-dev-code { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #365a42; border-radius: 11px; background: linear-gradient(120deg,#0c211c,#0c1721); }
.reset-dev-code small { color: #74a88a; font-size: 8px; font-weight: 800; }.reset-dev-code strong { color: #8af2ac; font-size: 18px; letter-spacing: 4px; }.reset-dev-code span { border: 1px solid #40604a; border-radius: 6px; padding: 3px 5px; color: #6eb986; font-size: 7px; font-weight: 900; }
.auth-modal .reset-code-input { text-align: center; font-size: 20px; font-weight: 900; letter-spacing: 9px; }

.motion-beam { position: absolute; width: 75vw; height: 180px; left: -18vw; border-radius: 50%; filter: blur(32px); opacity: .16; mix-blend-mode: screen; }
.beam-one { top: 16%; background: linear-gradient(90deg,transparent,#30e2cd 35%,#5b72ff 65%,transparent); transform: rotate(-16deg); animation: beamSweep 11s ease-in-out infinite alternate; }
.beam-two { top: 63%; left: 38vw; background: linear-gradient(90deg,transparent,#8a62ff 35%,#31d7ff 67%,transparent); transform: rotate(18deg); animation: beamSweepTwo 14s ease-in-out infinite alternate; }
.motion-ring { position: absolute; border: 1px solid rgba(105,218,224,.14); border-radius: 50%; box-shadow: 0 0 35px rgba(71,197,221,.06), inset 0 0 30px rgba(86,119,255,.05); }
.ring-one { width: 470px; height: 470px; right: -150px; top: 24%; animation: ringSpin 18s linear infinite; }
.ring-two { width: 330px; height: 330px; left: 8%; bottom: -160px; border-color: rgba(154,112,255,.13); animation: ringSpinReverse 15s linear infinite; }
.motion-ring:before, .motion-ring:after { content: ""; position: absolute; border-radius: 50%; background: #6be0db; box-shadow: 0 0 20px #55d9d6; }
.motion-ring:before { width: 7px; height: 7px; top: 12%; left: 17%; }.motion-ring:after { width: 4px; height: 4px; right: 6%; bottom: 32%; background: #8b79ff; box-shadow: 0 0 18px #8b79ff; }
.particle-field { position: absolute; inset: 0; }
.particle-field i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #7ce4dd; box-shadow: 0 0 11px currentColor; opacity: .55; animation: particleRise 8s ease-in-out infinite; }
.particle-field i:nth-child(1){left:7%;top:22%;animation-delay:-1s}.particle-field i:nth-child(2){left:17%;top:65%;animation-delay:-4s;color:#8e7aff}.particle-field i:nth-child(3){left:29%;top:34%;animation-delay:-6s}.particle-field i:nth-child(4){left:41%;top:82%;animation-delay:-2s;color:#70a8ff}.particle-field i:nth-child(5){left:53%;top:13%;animation-delay:-5s}.particle-field i:nth-child(6){left:66%;top:46%;animation-delay:-7s;color:#9b7cff}.particle-field i:nth-child(7){left:78%;top:75%;animation-delay:-3s}.particle-field i:nth-child(8){left:91%;top:29%;animation-delay:-5.5s;color:#67a5ff}.particle-field i:nth-child(9){left:23%;top:91%;animation-delay:-4.5s}.particle-field i:nth-child(10){left:72%;top:8%;animation-delay:-2.8s}.particle-field i:nth-child(11){left:86%;top:55%;animation-delay:-6.2s;color:#9e72ff}.particle-field i:nth-child(12){left:47%;top:55%;animation-delay:-1.7s}

.nav-links a span, .nav-links button span { width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; transition: transform .3s, background .3s, color .3s, box-shadow .3s; }
.nav-create span { color: #65ddd7 !important; background: rgba(68,216,207,.08); }
.nav-final span { color: #ff75cf !important; background: rgba(255,73,195,.09); }
.nav-themes span { color: #a98cff; background: rgba(152,115,255,.08); }
.nav-limits span { color: #ffbe69; background: rgba(255,181,86,.08); }
.nav-how span { color: #74adff; background: rgba(93,151,255,.08); }
.nav-create:hover { color: #73eee6 !important; }.nav-final:hover { color: #ff9ade !important; }.nav-themes:hover { color: #bea9ff !important; }.nav-limits:hover { color: #ffd08f !important; }.nav-how:hover { color: #8fbdff !important; }
.nav-links a:hover span, .nav-links button:hover span { transform: translateY(-2px) rotate(10deg) scale(1.13); }
.nav-create:hover span { box-shadow: 0 0 18px rgba(76,226,213,.22); }.nav-themes:hover span { box-shadow: 0 0 18px rgba(160,118,255,.2); }.nav-limits:hover span { box-shadow: 0 0 18px rgba(255,187,91,.2); }.nav-how:hover span { box-shadow: 0 0 18px rgba(103,164,255,.2); }
.nav-final:hover span { box-shadow: 0 0 18px rgba(255,73,195,.22); }

.account-box { position: relative; }
.account-trigger { width: 38px; height: 38px; border: 1px solid #345064; border-radius: 12px; background: linear-gradient(145deg,#162638,#101925); color: #8be5e3; display: grid; place-items: center; font-size: 12px; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); transition: .24s; }
.account-trigger:hover, .account-trigger.active { transform: translateY(-2px); border-color: #61bfc3; color: #c4fffb; box-shadow: 0 8px 25px rgba(50,193,193,.14),inset 0 0 18px rgba(73,223,212,.05); }
.account-menu { position: absolute; width: 275px; right: 0; top: 48px; padding: 10px; border: 1px solid #2b394b; border-radius: 16px; background: rgba(11,17,26,.97); backdrop-filter: blur(20px); box-shadow: 0 24px 70px rgba(0,0,0,.44); animation: accountDrop .22s cubic-bezier(.2,.8,.2,1) both; }
.account-menu:before { content: ""; position: absolute; right: 12px; top: -5px; width: 9px; height: 9px; transform: rotate(45deg); background: #101822; border-left: 1px solid #2b394b; border-top: 1px solid #2b394b; }
.account-identity { display: flex; align-items: center; gap: 10px; padding: 8px 8px 14px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 6px; }
.account-identity > span { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg,#58ddd5,#6f8fff); color: #071116; display: grid; place-items: center; font-size: 11px; font-weight: 900; flex: 0 0 auto; }
.account-identity > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.account-identity b { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.account-identity small { color: #65758a; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu-link { width: 100%; min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: #a9b7c7; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 7px; padding: 0 10px; text-align: left; cursor: pointer; transition: .2s; }
.account-menu-link > span { width: 25px; height: 25px; border-radius: 7px; background: #162231; color: #6fdcd7; display: grid; place-items: center; transition: .2s; }.account-menu-link b { font-size: 9px; }.account-menu-link em { min-width: 22px; height: 20px; border-radius: 7px; background: #1a2635; color: #7f91a6; display: grid; place-items: center; font-style: normal; font-size: 7px; }
.saved-link:hover { background: #111f2b; color: #eaf7ff; }.saved-link:hover > span { transform: rotate(-6deg); background: #17323b; color: #84eee7; }
.final-link > span { color: #ff80d4; background: rgba(112,33,89,.28); }.final-link:hover { background: rgba(75,28,66,.27); color: #ffe8f8; }.final-link:hover > span { transform: rotate(8deg) scale(1.06); background: rgba(145,45,112,.35); }
.logout-link { color: #e88b92; }.logout-link > span { background: rgba(108,35,43,.35); color: #ff7e86; }.logout-link:hover { background: rgba(112,30,39,.32); color: #ffb4b9; }.logout-link:hover > span { transform: translateX(2px); background: #762e37; color: #fff; }

.saved-page { max-width: 1324px; min-height: calc(100vh - 74px); margin: auto; padding: 72px 38px 100px; position: relative; z-index: 2; }
.saved-page-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.07); }
.saved-page-head > div { max-width: 720px; }.saved-page-head h1 { font-size: clamp(38px,5vw,58px); letter-spacing: -2.6px; margin: 12px 0 10px; }.saved-page-head p { color: #7a899c; font-size: 10px; line-height: 1.65; margin: 0; }
.saved-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; margin-top: 32px; }
.saved-card { border: 1px solid #263244; border-radius: 18px; background: rgba(10,15,22,.9); overflow: hidden; transition: transform .26s,border-color .26s,box-shadow .26s; }
.saved-card:hover { transform: translateY(-4px); border-color: #40566d; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.saved-preview { width: 100%; height: 280px; border: 0; border-bottom: 1px solid #263244; background: #05090e; padding: 9px; cursor: pointer; display: grid; place-items: center; overflow: hidden; }
.saved-preview svg { display: block; width: 100%; height: 100%; }
.saved-card-body { padding: 19px; }.saved-meta { display: flex; gap: 7px; }.saved-meta span { padding: 5px 7px; border: 1px solid #293649; border-radius: 7px; background: #111923; color: #6f8197; font-size: 7px; font-weight: 900; }.saved-meta span:first-child { color: #67ddd6; }
.saved-card h2 { margin: 11px 0 5px; font-size: 18px; letter-spacing: -.6px; }.saved-card-body > small { color: #596a7f; font-size: 7px; }
.saved-actions { display: flex; gap: 7px; margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.06); }.saved-actions .ghost-button { flex: 1; min-height: 39px; }.delete-button { min-height: 39px; padding: 0 13px; border: 1px solid rgba(255,100,108,.25); border-radius: 10px; background: rgba(87,28,35,.28); color: #f18b92; font-size: 9px; font-weight: 900; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: .2s; }.delete-button:hover { background: #c8434d; border-color: #dc5660; color: #fff; transform: translateY(-1px); }
.progress-edit-button { border-color: rgba(75,220,223,.31) !important; color: #8be8e4 !important; background: rgba(20,59,63,.32) !important; }.progress-edit-button:hover { background: rgba(30,91,94,.5) !important; }.final-progress-button { min-height: 44px; padding: 0 15px; border: 1px solid rgba(255,78,197,.35); border-radius: 10px; background: linear-gradient(135deg,rgba(101,32,86,.7),rgba(45,30,74,.72)); color: #ffd7f2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 8px; font-weight: 950; cursor: pointer; transition: .2s; }.final-progress-button span { color: #ff79d2; font-size: 14px; }.final-progress-button:hover { transform: translateY(-1px); border-color: #d667b4; box-shadow: 0 10px 28px rgba(191,48,147,.13); }.saved-actions .final-progress-button { flex: 1; min-height: 39px; }

/* Tournament progress / RECREATE workspace */
.advance-page { position: relative; z-index: 2; min-height: calc(100vh - 74px); padding: 58px 28px 96px; }.advance-shell { width: min(1360px,100%); margin: 0 auto; }.advance-head { display: flex; align-items: end; justify-content: space-between; gap: 34px; padding: 0 4px 30px; border-bottom: 1px solid rgba(255,255,255,.075); }.advance-head > div:first-child { max-width: 820px; }.advance-head h1 { margin: 11px 0 12px; font-size: clamp(38px,4.7vw,61px); line-height: 1.01; letter-spacing: -2.7px; }.advance-head p { max-width: 760px; margin: 0; color: #74889a; font-size: 10px; line-height: 1.75; }.advance-stage { min-width: 230px; padding: 15px 16px; border: 1px solid #31505a; border-radius: 16px; background: linear-gradient(135deg,rgba(18,55,62,.8),rgba(30,24,55,.78)); box-shadow: 0 20px 60px rgba(0,0,0,.24); }.advance-stage small { max-width: 200px; display: block; color: #7a94a5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; }.advance-stage > div { margin: 6px 0 2px; display: flex; align-items: center; gap: 12px; }.advance-stage strong { color: #e9fdff; font-size: 31px; line-height: 1; }.advance-stage > div span { color: #61e5df; font-size: 22px; }.advance-stage em { color: #6ddfd7; font-size: 8px; font-style: normal; font-weight: 900; }
.advance-free-note { margin: 22px 0; padding: 15px 17px; border: 1px solid rgba(76,208,197,.2); border-radius: 14px; background: linear-gradient(110deg,rgba(22,70,67,.34),rgba(18,25,38,.7)); display: flex; align-items: center; gap: 13px; }.advance-free-note > span { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 12px; background: rgba(68,208,196,.13); color: #6de1d8; display: grid; place-items: center; font-size: 25px; }.advance-free-note div { display: flex; flex-direction: column; gap: 3px; }.advance-free-note b { font-size: 9px; }.advance-free-note p,.advance-free-note small { margin: 0; color: #688093; font-size: 7px; line-height: 1.5; }.advance-free-note small { color: #5b9d97; }
.advance-pairs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.advance-match { padding: 13px; border: 1px solid #263746; border-radius: 15px; background: rgba(8,15,22,.82); box-shadow: 0 12px 34px rgba(0,0,0,.12); }.advance-match-head { min-height: 24px; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.advance-match-head > span { color: #647b8e; font-size: 6.5px; font-weight: 950; letter-spacing: .8px; text-transform: uppercase; }.advance-match-head small { color: #557082; font-size: 6px; font-weight: 850; }.advance-team-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.advance-team-options button { min-width: 0; min-height: 53px; padding: 8px 10px; border: 1px solid #2e4453; border-radius: 11px; background: #0b1721; color: #d5e5eb; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; gap: 8px; align-items: center; text-align: left; cursor: pointer; transition: transform .18s,border-color .18s,background .18s,opacity .18s; }.advance-team-options button:hover { transform: translateY(-1px); border-color: #3b6973; background: #10232c; }.advance-team-options button > span { width: 27px; height: 27px; border-radius: 8px; background: #152a36; color: #70dcd8; display: grid; place-items: center; font-size: 7px; font-weight: 950; }.advance-team-options button b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }.advance-team-options button em { color: #577083; font-size: 5.5px; font-style: normal; font-weight: 950; white-space: nowrap; }.advance-team-options button.winner { border-color: rgba(72,223,191,.5); background: linear-gradient(120deg,rgba(22,77,66,.55),rgba(10,30,36,.9)); box-shadow: inset 3px 0 #52dfbd,0 0 25px rgba(55,215,184,.05); }.advance-team-options button.winner > span { background: #1d6656; color: #a8ffe7; }.advance-team-options button.winner em { color: #67e1bc; }.advance-team-options button.eliminated { border-color: rgba(189,74,84,.2); background: rgba(56,20,26,.32); opacity: .43; }.advance-team-options button.eliminated b { text-decoration: line-through; color: #9b7378; }.advance-team-options button.eliminated > span { background: #341c22; color: #b87980; }.advance-team-options button.eliminated em { color: #b66d75; }
.advance-final-note { margin-top: 14px; min-height: 47px; padding: 10px 14px; border: 1px solid rgba(255,75,197,.25); border-radius: 12px; background: rgba(82,25,68,.24); color: #d79bc9; display: flex; align-items: center; gap: 9px; font-size: 7.5px; font-weight: 850; }.advance-final-note span { color: #ff72cd; font-size: 16px; }.advance-actions { position: sticky; bottom: 16px; z-index: 6; margin-top: 22px; padding: 12px; border: 1px solid rgba(67,87,103,.46); border-radius: 15px; background: rgba(6,13,19,.88); backdrop-filter: blur(18px); display: flex; justify-content: space-between; gap: 10px; box-shadow: 0 22px 55px rgba(0,0,0,.32); }.advance-recreate { min-width: 330px; }.advance-recreate b { margin-left: 8px; padding: 5px 7px; border-radius: 7px; background: rgba(0,0,0,.18); color: #b6fff8; font-size: 7px; }
.saved-empty { min-height: 420px; margin-top: 32px; border: 1px dashed #2d3b4d; border-radius: 20px; background: rgba(10,15,22,.65); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.saved-empty > span { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: #12202d; border: 1px solid #2e4255; color: #69ddd7; font-size: 24px; animation: emptyFloat 3.2s ease-in-out infinite; }.saved-empty h2 { font-size: 23px; margin: 18px 0 7px; }.saved-empty p { max-width: 430px; margin: 0 0 23px; color: #68788b; font-size: 9px; line-height: 1.6; }

.guest-save-warning { margin-top: 23px; border: 1px solid rgba(244,170,80,.3); border-radius: 14px; background: linear-gradient(100deg,rgba(74,45,16,.42),rgba(28,20,13,.55)); padding: 14px 15px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; }
.warning-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(237,156,63,.15); border: 1px solid rgba(244,170,80,.24); color: #ffc272; display: grid; place-items: center; font-weight: 900; }.guest-save-warning b { color: #ffcf91; font-size: 10px; }.guest-save-warning p { margin: 4px 0 0; color: #a99173; font-size: 8px; line-height: 1.5; }.guest-save-warning button,.limit-signup { border: 1px solid rgba(245,181,94,.25); background: rgba(112,69,22,.35); color: #ffd49c; border-radius: 9px; min-height: 37px; padding: 0 12px; font-size: 8px; font-weight: 900; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: .2s; }.guest-save-warning button:hover,.limit-signup:hover { background: #b36c27; color: #fff; transform: translateY(-1px); }.limit-signup { width: fit-content; margin-top: 10px; }.limit-signup i { font-style: normal; margin-left: 3px; }
.limit-row { grid-template-columns: repeat(5,1fr); }

/* One-off access package */
.package-home-button { width: 100%; min-height: 42px; margin-top: 13px; border: 1px solid rgba(104,222,213,.26); border-radius: 11px; background: linear-gradient(115deg,rgba(28,105,107,.27),rgba(58,57,125,.24)); color: #b9f8f2; padding: 0 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 8px; font-weight: 900; transition: .22s; }
.package-home-button span { color: #68e2d9; font-size: 15px; }.package-home-button i { margin-left: auto; color: #8497ac; font-style: normal; font-size: 7px; }.package-home-button:hover { transform: translateY(-2px); border-color: #55d6ce; box-shadow: 0 13px 34px rgba(52,197,190,.12); }
.package-limit-button { border-color: rgba(92,225,216,.28); background: rgba(28,101,104,.32); color: #aaf4ee; }.package-limit-button:hover { background: #258d89; }
.package-modal { width: min(470px,100%); position: relative; overflow: hidden; border: 1px solid #2d5360; border-radius: 24px; padding: 34px; background: radial-gradient(circle at 100% 0,rgba(82,107,255,.16),transparent 38%),linear-gradient(145deg,#101b26,#091118 72%); box-shadow: 0 35px 120px rgba(0,0,0,.62),0 0 55px rgba(63,213,202,.08); animation: modalIn .28s cubic-bezier(.2,.8,.2,1); }
.package-symbol { width: 62px; height: 62px; margin-bottom: 22px; position: relative; display: grid; place-items: center; border: 1px solid #35616a; border-radius: 19px; background: linear-gradient(135deg,#17383e,#1e2344); color: #84eee4; font-size: 28px; box-shadow: 0 0 35px rgba(72,222,210,.13); }.package-symbol i { position: absolute; width: 7px; height: 7px; right: -3px; top: 7px; border-radius: 50%; background: #7ef0df; box-shadow: 0 0 18px #59ddd0; animation: blink 1.8s infinite; }
.package-modal h2 { margin: 9px 0 8px; font-size: 30px; letter-spacing: -1.4px; }.package-modal > p { margin: 0; color: #7d8fa2; font-size: 9px; line-height: 1.7; }
.package-price { margin: 24px 0 13px; padding: 17px 18px; border: 1px solid rgba(93,220,211,.17); border-radius: 14px; background: rgba(18,41,48,.6); display: flex; align-items: baseline; gap: 8px; }.package-price small { margin-right: auto; color: #6d8296; font-size: 8px; font-weight: 800; }.package-price strong { color: #a9fff7; font-size: 24px; }.package-price b { color: #5ed9d0; font-size: 8px; }
.package-phone { min-height: 62px; padding: 10px 13px; border: 1px solid #29384a; border-radius: 13px; background: #0a121a; display: flex; align-items: center; gap: 11px; }.package-phone > span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #172d31; color: #6ce5dc; }.package-phone div { display: flex; flex-direction: column; gap: 4px; }.package-phone small { color: #617388; font-size: 7px; }.package-phone a { color: #e7f8fa; text-decoration: none; font-weight: 900; font-size: 14px; }
.package-call-button { margin-top: 12px; width: 100%; min-height: 48px; justify-content: center; text-decoration: none; }.activation-promise { margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: 7px; color: #7b8da0; font-size: 8px; }.activation-promise span { color: #6de3da; }.package-brand-note { display: block; text-align: center; color: #43566a; margin-top: 19px; font-size: 6px; letter-spacing: 1.2px; text-transform: uppercase; }

/* Package logo */
.logo-panel { margin-top: 16px; padding: 16px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.logo-panel.active { border: 1px solid rgba(84,219,208,.23); background: linear-gradient(110deg,rgba(20,67,70,.34),rgba(16,25,37,.73)); }.logo-panel.locked { border: 1px dashed #34404e; background: rgba(11,18,25,.63); }.logo-panel-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }.logo-panel-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; background: #173038; color: #69dfd7; border: 1px solid #2a5058; }.logo-panel-copy h3 { margin: 4px 0; font-size: 11px; max-width: 620px; line-height: 1.4; }.logo-panel-copy small { color: #5f7185; font-size: 7px; }.logo-upload-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }.logo-preview { width: 48px; height: 48px; padding: 6px; border-radius: 11px; border: 1px solid #33485c; background: #fff; }.logo-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }.logo-upload-button,.package-mini-button { min-height: 39px; border: 1px solid #35656a; border-radius: 10px; background: #173638; color: #aaf6f0; padding: 0 13px; display: flex; align-items: center; gap: 7px; font-size: 8px; font-weight: 900; cursor: pointer; transition: .2s; }.logo-upload-button:hover,.package-mini-button:hover { transform: translateY(-1px); background: #215255; }.logo-upload-button input { display: none; }.package-mini-button { border-color: #394967; background: #182034; color: #b8c7ff; }

/* GL Admin */
.admin-page { position: relative; z-index: 3; min-height: calc(100vh - 74px); display: grid; grid-template-columns: 232px 1fr; background: rgba(5,9,14,.42); }
.admin-sidebar { min-height: calc(100vh - 74px); position: sticky; top: 74px; align-self: start; padding: 26px 17px; border-right: 1px solid #202c39; background: rgba(7,12,18,.9); backdrop-filter: blur(18px); display: flex; flex-direction: column; }.admin-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 9px 23px; border-bottom: 1px solid rgba(255,255,255,.06); }.admin-sidebar-brand .brand-mark { transform: scale(.78); transform-origin: left; }.admin-sidebar-brand div { display: flex; flex-direction: column; }.admin-sidebar-brand b { font-size: 13px; }.admin-sidebar-brand small { color: #57d6cf; margin-top: 2px; font-size: 6px; letter-spacing: 1.4px; text-transform: uppercase; }
.admin-person { margin: 15px 4px 19px; padding: 10px; border: 1px solid #263443; border-radius: 12px; background: #0d151e; display: flex; align-items: center; gap: 9px; }.admin-person > span { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 9px; background: linear-gradient(135deg,#54d9d0,#667cff); display: grid; place-items: center; color: #071014; font-weight: 900; }.admin-person div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.admin-person b { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.admin-person small { color: #627488; font-size: 5.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 6px; }.admin-sidebar nav button,.admin-exit { min-height: 46px; width: 100%; border: 0; border-radius: 10px; background: transparent; color: #8395aa; padding: 0 11px; display: flex; align-items: center; gap: 11px; cursor: pointer; text-align: left; font-size: 10px; font-weight: 900; transition: .2s; }.admin-sidebar nav button > span,.admin-exit > span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #111c27; color: #6a8197; font-size: 11px; transition: .2s; }.admin-sidebar nav button:hover { color: #d4e8ec; background: #0f1b25; }.admin-sidebar nav button:hover > span { transform: rotate(-7deg) scale(1.07); color: #76e3dc; }.admin-sidebar nav button.active { background: linear-gradient(90deg,rgba(34,114,113,.28),rgba(20,29,42,.35)); color: #e8fffd; }.admin-sidebar nav button.active > span { background: #173b3c; color: #72e8df; box-shadow: 0 0 18px rgba(65,215,205,.1); }.admin-exit { margin-top: auto; color: #d9848c; }.admin-exit > span { color: #e67c86; background: rgba(111,38,47,.3); }.admin-exit:hover { background: rgba(101,29,38,.22); color: #ffabb2; }
.admin-nav-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #d65360; color: #fff; display: grid; place-items: center; font-size: 7px; font-style: normal; box-shadow: 0 0 15px rgba(214,83,96,.24); }
.admin-main { padding: 42px clamp(25px,4vw,60px) 80px; min-width: 0; }.admin-topline { min-height: 76px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.admin-topline h1 { margin: 7px 0 0; font-size: 28px; letter-spacing: -1.3px; }.admin-live { padding: 7px 10px; border: 1px solid #2b3d4c; border-radius: 8px; color: #6c8193; font-size: 6px; font-weight: 900; text-transform: uppercase; letter-spacing: .7px; }.admin-live i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #55d9b5; box-shadow: 0 0 10px #55d9b5; }
.admin-lead { max-width: 760px; color: #708296; font-size: 9px; line-height: 1.7; margin: 23px 0; }.admin-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.admin-stat-grid article { min-height: 135px; padding: 18px; border: 1px solid #263343; border-radius: 15px; background: linear-gradient(145deg,rgba(15,24,34,.94),rgba(9,15,22,.8)); display: flex; flex-direction: column; }.admin-stat-grid article > span { width: 31px; height: 31px; border-radius: 9px; background: #132a2e; color: #62ded6; display: grid; place-items: center; font-size: 8px; font-weight: 900; }.admin-stat-grid small { margin-top: auto; color: #687b8e; font-size: 7px; }.admin-stat-grid strong { margin-top: 4px; font-size: 23px; letter-spacing: -1px; }
.admin-quick-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.admin-quick-grid article { min-height: 82px; padding: 14px; border: 1px solid #202e3d; border-radius: 13px; background: rgba(10,17,24,.72); display: flex; align-items: center; gap: 12px; }.admin-quick-grid article > span { width: 36px; height: 36px; border-radius: 10px; background: #131f2c; color: #8b9cb1; display: grid; place-items: center; }.admin-quick-grid div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }.admin-quick-grid b { color: #677b8e; font-size: 6px; }.admin-quick-grid strong { font-size: 10px; overflow-wrap: anywhere; }
.message-summary { max-width: 520px; margin: 16px 0; padding: 13px; border: 1px solid #273545; border-radius: 13px; background: #0c151f; display: grid; grid-template-columns: 38px 1fr 1fr; gap: 12px; align-items: center; }.message-summary > span { width: 38px; height: 38px; border-radius: 10px; background: #173136; color: #70ded6; display: grid; place-items: center; }.message-summary > div { display: flex; flex-direction: column; gap: 2px; }.message-summary small { color: #617589; font-size: 6px; text-transform: uppercase; }.message-summary strong { font-size: 16px; }
.admin-message-list { display: flex; flex-direction: column; gap: 9px; }.admin-message-list article { padding: 15px 17px; border: 1px solid #263544; border-radius: 13px; background: rgba(10,17,24,.86); }.admin-message-list article.unread { border-color: #34535b; background: linear-gradient(125deg,rgba(17,48,50,.62),rgba(10,17,25,.9)); box-shadow: inset 3px 0 #50d4ca; }.message-person { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }.message-person > span { width: 36px; height: 36px; border-radius: 10px; background: #17283a; color: #76deda; display: grid; place-items: center; font-weight: 900; }.message-person > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.message-person b { font-size: 9px; }.message-person a { color: #6d8298; text-decoration: none; font-size: 7px; overflow-wrap: anywhere; }.message-person em { padding: 5px 7px; border-radius: 7px; background: rgba(55,161,150,.2); color: #76dfd6; font-size: 6px; font-style: normal; font-weight: 900; }.admin-message-list article > p { margin: 13px 0; padding: 12px 13px; border: 1px solid rgba(255,255,255,.05); border-radius: 9px; background: #080f16; color: #9aabbd; font-size: 9px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }.message-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.message-actions > small { color: #53677b; font-size: 6px; }.message-actions > div { display: flex; gap: 7px; }.message-actions button { min-height: 30px; padding: 0 9px; border: 1px solid #2d4650; border-radius: 8px; background: #11232a; color: #7edbd4; display: inline-flex; align-items: center; gap: 5px; font-size: 7px; font-weight: 900; cursor: pointer; }.message-actions .message-delete { border-color: rgba(182,66,79,.3); background: rgba(78,27,34,.28); color: #dc8890; }
.admin-security-note { margin-top: 18px; padding: 13px 15px; border: 1px solid rgba(230,167,80,.19); border-radius: 12px; background: rgba(74,48,19,.17); display: flex; align-items: center; gap: 10px; color: #a18664; }.admin-security-note span { color: #e8a958; }.admin-security-note p { margin: 0; font-size: 7px; line-height: 1.6; }.admin-alert { margin-top: 16px; min-height: 42px; padding: 9px 12px; border-radius: 10px; display: flex; align-items: center; gap: 9px; font-size: 8px; font-weight: 800; }.admin-alert.success { color: #92e8c5; border: 1px solid rgba(86,211,161,.25); background: rgba(24,87,65,.23); }.admin-alert.error { color: #f0a1a7; border: 1px solid rgba(231,94,107,.24); background: rgba(93,31,40,.23); }
.admin-search { height: 45px; max-width: 440px; border: 1px solid #2b394a; border-radius: 11px; background: #0b131c; padding: 0 13px; display: flex; align-items: center; gap: 9px; color: #65798e; }.admin-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #dceaf0; font: inherit; font-size: 9px; }
.admin-user-list { margin-top: 18px; border: 1px solid #243140; border-radius: 15px; overflow: hidden; background: rgba(8,14,20,.77); }.admin-user-row { min-height: 67px; padding: 9px 15px; border-bottom: 1px solid rgba(255,255,255,.055); display: grid; grid-template-columns: minmax(200px,1.7fr) .7fr .45fr .9fr .8fr; gap: 12px; align-items: center; color: #9aacbc; font-size: 8px; }.admin-user-row:last-child { border-bottom: 0; }.admin-user-row.head { min-height: 36px; background: #0d1721; color: #526578; text-transform: uppercase; letter-spacing: .5px; font-size: 6px; font-weight: 900; }.admin-user-cell { min-width: 0; display: flex; align-items: center; gap: 9px; }.admin-user-cell > span { width: 33px; height: 33px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: #152535; color: #70dcd7; font-weight: 900; }.admin-user-cell div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.admin-user-cell b,.admin-user-cell small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.admin-user-cell b { color: #dce8ed; font-size: 8px; }.admin-user-cell small { color: #5d7185; font-size: 6px; }.online-pill,.offline-pill { width: fit-content; display: flex; align-items: center; gap: 5px; }.online-pill i,.offline-pill i { width: 5px; height: 5px; border-radius: 50%; }.online-pill { color: #69d8af; }.online-pill i { background: #5ce1ad; box-shadow: 0 0 8px #5ce1ad; }.offline-pill { color: #66788b; }.offline-pill i { background: #566474; }.package-pill { width: fit-content; padding: 5px 7px; border-radius: 7px; background: #121b25; color: #697b8c; }.package-pill.active { background: rgba(32,106,102,.25); color: #77ddd5; }.access-user-button { min-height: 31px; width: fit-content; border: 1px solid #305057; border-radius: 8px; background: #14292e; color: #85dfd9; padding: 0 9px; display: flex; align-items: center; gap: 5px; font-size: 7px; font-weight: 900; cursor: pointer; }.access-user-button:hover { background: #205156; transform: translateY(-1px); }
.admin-field { max-width: 650px; display: flex; flex-direction: column; gap: 7px; color: #75889a; font-size: 7px; font-weight: 900; }.admin-field > input,.admin-field select,.input-with-suffix { height: 48px; border: 1px solid #2b394a; border-radius: 11px; background: #0b131c; color: #dceaf0; padding: 0 13px; outline: 0; font: inherit; font-size: 9px; }.admin-field select { width: 100%; }.selected-access-user { max-width: 650px; margin-top: 12px; padding: 12px; border: 1px solid #2c3b4b; border-radius: 12px; background: #0e1721; display: flex; align-items: center; gap: 10px; }.selected-access-user > span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #19333a; color: #73e1d8; }.selected-access-user div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.selected-access-user b { font-size: 9px; }.selected-access-user small { color: #63768a; font-size: 6px; }.selected-access-user em { margin-left: auto; color: #68d9cf; font-style: normal; font-size: 7px; }
.credit-panel { margin-top: 18px; padding: 20px; border: 1px solid #273544; border-radius: 16px; background: rgba(10,17,24,.82); }.credit-panel h3 { margin: 5px 0 16px; font-size: 18px; }.credit-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }.credit-grid label { padding: 11px; border: 1px solid #273747; border-radius: 11px; background: #0c151f; display: flex; flex-direction: column; gap: 7px; }.credit-grid label > span { color: #88a0b3; font-size: 7px; font-weight: 900; }.credit-grid input { width: 100%; height: 40px; border: 1px solid #304252; border-radius: 8px; background: #080e14; color: #a8f7f1; text-align: center; font: inherit; font-size: 14px; font-weight: 900; outline: 0; }.credit-grid small { color: #60758a; font-size: 6.2px; line-height: 1.4; }.credit-grid small b { color: #b9d0dd; font-size: 7px; }.credit-grid .credit-after { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.055); color: #6aa39e; }.credit-grid .credit-after b { color: #78e8de; }.logo-access-line { margin-top: 13px; padding: 12px 13px; border: 1px solid rgba(82,210,201,.17); border-radius: 11px; background: rgba(25,71,71,.18); display: flex; align-items: center; gap: 10px; }.logo-access-line > span { color: #67e0d7; }.logo-access-line div { display: flex; flex-direction: column; gap: 3px; }.logo-access-line b { font-size: 8px; }.logo-access-line small { color: #63778b; font-size: 6px; }.logo-access-line em { margin-left: auto; padding: 4px 6px; border-radius: 6px; background: #1f625b; color: #9dfff5; font-size: 6px; font-style: normal; font-weight: 900; }.activate-access { margin-top: 14px; min-height: 44px; }.activate-access:disabled { cursor: wait; opacity: .82; }.activate-access.loading { box-shadow: 0 0 0 1px rgba(87,231,219,.22),0 0 28px rgba(48,207,196,.12); }.activation-spinner { display: inline-flex; animation: activationSpin .8s linear infinite; }
@keyframes activationSpin { to { transform: rotate(360deg); } }
.settings-card { max-width: 650px; padding: 20px; border: 1px solid #273544; border-radius: 16px; background: rgba(10,17,24,.82); display: flex; flex-direction: column; gap: 15px; }.settings-card .admin-field { max-width: none; }.input-with-suffix { padding: 0; display: flex; align-items: center; }.input-with-suffix input { height: 100%; flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #dceaf0; padding: 0 13px; font: inherit; }.input-with-suffix b { padding: 0 13px; color: #58d6ce; font-size: 7px; }.package-settings-preview { padding: 13px; border: 1px solid rgba(94,219,210,.19); border-radius: 12px; background: linear-gradient(110deg,rgba(24,72,73,.31),rgba(25,28,56,.24)); display: flex; align-items: center; gap: 11px; }.package-settings-preview > span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #173438; color: #67ddd5; }.package-settings-preview div { display: flex; flex-direction: column; gap: 3px; }.package-settings-preview small { color: #6e8295; font-size: 6px; }.package-settings-preview b { color: #b5fbf6; font-size: 13px; }.package-settings-preview em { color: #677b8f; font-size: 6px; font-style: normal; }
.activation-list { display: flex; flex-direction: column; gap: 8px; }.activation-list article { min-height: 62px; padding: 10px 13px; border: 1px solid #273442; border-radius: 11px; background: #0b131c; display: grid; grid-template-columns: 33px minmax(170px,1.2fr) 1.5fr auto; gap: 11px; align-items: center; }.activation-icon { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: rgba(31,104,81,.3); color: #70d9ad; }.activation-person { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.activation-person b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 8px; }.activation-person small { color: #596d80; font-size: 6px; }.activation-credits { display: flex; flex-wrap: wrap; gap: 4px; }.activation-credits span { padding: 4px 6px; border-radius: 6px; background: #13222f; color: #6f96ad; font-size: 6px; }.activation-list article > strong { color: #83e9e1; font-size: 9px; }.admin-empty { min-height: 240px; border: 1px dashed #2c3a49; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; color: #5c7084; }.admin-empty span { font-size: 27px; }.admin-empty b { font-size: 8px; }

.denied-page { position: relative; z-index: 3; min-height: calc(100vh - 74px); padding: 30px; display: grid; place-items: center; }.denied-card { width: min(560px,100%); padding: 44px; border: 1px solid #303b49; border-radius: 22px; background: radial-gradient(circle at 50% 0,rgba(196,64,76,.1),transparent 42%),rgba(10,16,23,.94); text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.38); }.denied-icon { width: 69px; height: 69px; margin: 0 auto 22px; border: 1px solid rgba(234,90,103,.27); border-radius: 20px; background: rgba(104,28,37,.25); color: #ed7d87; display: grid; place-items: center; font-size: 28px; }.denied-card h1 { margin: 10px 0; font-size: 34px; letter-spacing: -1.5px; }.denied-card p { max-width: 430px; margin: 0 auto; color: #78899a; font-size: 9px; line-height: 1.7; }.denied-card > div { margin-top: 25px; display: flex; justify-content: center; gap: 9px; }

/* Game-specific artwork */
.game-context-card { margin-top: 16px; min-height: 112px; padding: 17px; border: 1px solid rgba(70,203,213,.24); border-radius: 16px; background: radial-gradient(circle at 0 50%,rgba(45,218,226,.1),transparent 32%),linear-gradient(115deg,rgba(10,34,45,.92),rgba(15,18,35,.9)); display: grid; grid-template-columns: 48px minmax(210px,1fr) minmax(240px,.75fr); align-items: center; gap: 15px; }
.game-context-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg,#163a45,#2b1d49); border: 1px solid #315866; color: #78eff2; font-size: 18px; box-shadow: 0 0 25px rgba(55,220,223,.08); }
.game-context-copy h3 { margin: 5px 0 4px; font-size: 15px; }.game-context-copy p { margin: 0; max-width: 540px; color: #6e8396; font-size: 8px; line-height: 1.55; }
.game-picker-field { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; }.game-picker-field > small { color: #6fa29f; font-size: 7px; font-weight: 800; }.game-picker-trigger { width: 100%; height: 48px; border: 1px solid #315166; border-radius: 11px; background: #07131c; color: #e5f9ff; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; outline: 0; cursor: pointer; text-align: left; font: inherit; font-size: 10px; }.game-picker-trigger i { color: #6d8a9e; font-style: normal; font-size: 14px; transition: transform .18s ease; }.game-picker-trigger[aria-expanded="true"] i { transform: rotate(180deg); }.game-picker-trigger:focus-visible { border-color: #4ccbd3; box-shadow: 0 0 0 3px rgba(66,203,213,.08); }.game-picker-menu { position: absolute; z-index: 40; left: 0; right: 0; top: 54px; max-height: 290px; padding: 6px; overflow-y: auto; border: 1px solid #315166; border-radius: 12px; background: #07131c; box-shadow: 0 22px 55px rgba(0,0,0,.55); }.game-picker-menu button { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #c8dce6; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; font: inherit; font-size: 8px; font-weight: 800; }.game-picker-menu button:hover,.game-picker-menu button[aria-selected="true"] { background: #10232e; color: #f2fbff; }.game-picker-menu button.champions-game-option { border-color: rgba(72,132,255,.42); background: linear-gradient(120deg,#071a43,#0d2f70); color: #8fc3ff; font-weight: 1000; box-shadow: inset 0 0 22px rgba(58,113,255,.1); }.game-picker-menu button.champions-game-option:hover,.game-picker-menu button.champions-game-option[aria-selected="true"] { border-color: #5b9cff; background: linear-gradient(120deg,#0a235b,#164190); color: #c5e1ff; }
.game-picker-trigger.champions-selected { border-color: #347fff; background: linear-gradient(120deg,#07152d,#0a2054); color: #9ac8ff; font-weight: 900; box-shadow: 0 0 0 3px rgba(52,127,255,.12),0 0 26px rgba(44,103,255,.16); }.game-picker-trigger.champions-selected:focus-visible { border-color: #70a8ff; box-shadow: 0 0 0 3px rgba(72,136,255,.18),0 0 30px rgba(44,103,255,.22); }
.locked-game-art { width: 100%; color: inherit; cursor: pointer; text-align: left; }.locked-game-art:hover { border-color: #6f5ea1; transform: translateY(-1px); }.game-auth-arrow { color: #a98bff; font-size: 24px; justify-self: end; }

/* Final Match Banner */
.final-banner-hero { min-height: 54px; padding: 0 18px; border: 1px solid rgba(255,93,200,.28); border-radius: 11px; background: linear-gradient(135deg,rgba(86,24,74,.42),rgba(30,31,74,.45)); color: #ffd7f3; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 10px; font-weight: 900; transition: .22s; }.final-banner-hero span { color: #ff75cf; font-size: 16px; }.final-banner-hero:hover { transform: translateY(-2px); border-color: #c65aa8; box-shadow: 0 13px 32px rgba(200,62,154,.12); }
.final-banner-page { position: relative; z-index: 2; width: min(1320px,calc(100% - 52px)); min-height: calc(100vh - 74px); margin: 0 auto; padding: 58px 0 90px; }.final-banner-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 0 5px 30px; border-bottom: 1px solid rgba(255,255,255,.07); }.final-banner-head > div:first-child { max-width: 760px; }.final-banner-head h1 { margin: 10px 0; font-size: clamp(35px,4.5vw,56px); line-height: 1.02; letter-spacing: -2.5px; }.final-banner-head p { margin: 0; color: #75889a; font-size: 10px; line-height: 1.65; }
.final-banner-quota { min-width: 168px; padding: 12px 14px; border: 1px solid #3c3458; border-radius: 14px; background: linear-gradient(130deg,rgba(57,32,75,.54),rgba(19,30,47,.72)); display: flex; align-items: center; gap: 12px; }.final-banner-quota > span { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(130,48,107,.28); color: #ff78d1; }.final-banner-quota div { display: flex; flex-direction: column; }.final-banner-quota b { font-size: 19px; }.final-banner-quota small { color: #876f91; font-size: 7px; font-weight: 900; }
.final-builder-card { margin-top: 24px; padding: 28px; border: 1px solid #293849; border-radius: 22px; background: radial-gradient(circle at 50% 0,rgba(76,47,121,.08),transparent 37%),rgba(8,14,21,.88); box-shadow: 0 25px 80px rgba(0,0,0,.2); }.final-builder-grid { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 18px; align-items: end; }.final-builder-grid > label { display: flex; flex-direction: column; gap: 8px; }.final-builder-grid > label > span { color: #8496a9; font-size: 8px; font-weight: 900; }.final-builder-grid > label > input { height: 54px; border: 1px solid #2d4052; border-radius: 12px; background: #08121b; color: #eefaff; padding: 0 14px; outline: 0; font-size: 11px; }.final-builder-grid > label > input:focus { border-color: #6f60a1; box-shadow: 0 0 0 3px rgba(143,95,211,.08); }.final-builder-grid > label:first-child,.final-logo-field { grid-column: span 3; }
.final-logo-field > div { min-height: 72px; padding: 10px 12px; border: 1px dashed #33465a; border-radius: 12px; background: #09131c; display: flex; align-items: center; gap: 11px; }.final-logo-field img { width: 52px; height: 52px; object-fit: contain; border-radius: 9px; background: #fff; padding: 5px; }.final-logo-field small { color: #5e7388; font-size: 7px; }.final-logo-field .logo-upload-button { min-width: 145px; justify-content: center; }
.final-team-media { display: flex; flex-direction: column; gap: 8px; }.final-team-media > span { color: #8496a9; font-size: 8px; font-weight: 900; }.final-team-media > div { min-height: 112px; padding: 11px; border: 1px dashed #30465a; border-radius: 13px; background: linear-gradient(135deg,#08151e,#0b121e); display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }.final-team-media.left > div { border-color: rgba(52,205,215,.3); }.final-team-media.right > div { border-color: rgba(255,77,197,.28); }.final-team-media img { width: 96px; height: 82px; grid-row: span 2; border-radius: 11px; object-fit: cover; background: #061019; border: 1px solid rgba(255,255,255,.09); }.team-image-upload { width: fit-content; min-height: 38px; padding: 0 12px; border: 1px solid #345766; border-radius: 9px; background: #11262f; color: #9de9e9; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 7.5px; font-weight: 900; transition: .2s; }.final-team-media.right .team-image-upload { border-color: #5a3558; background: #25172a; color: #f0addd; }.team-image-upload:hover { transform: translateY(-1px); filter: brightness(1.13); }.team-image-upload input { display: none; }.final-team-media small { color: #5e7388; font-size: 6.5px; line-height: 1.4; }.final-team-media-spacer { height: 112px; display: grid; place-items: center; color: #556a7c; font-size: 10px; font-weight: 1000; letter-spacing: 2px; opacity: .5; }
.final-versus { height: 74px; display: grid; place-items: center; color: #eefbff; font-size: 30px; font-weight: 1000; letter-spacing: -2px; text-shadow: -14px 0 28px rgba(50,225,231,.24),14px 0 28px rgba(255,65,194,.25); }.final-side-field.left input { border-color: rgba(54,211,221,.32); }.final-side-field.right input { border-color: rgba(255,75,197,.3); }.final-builder-card .wizard-actions { margin-top: 25px; }
.final-banner-result { margin-top: 24px; }.final-banner-result .result-top { margin-bottom: 15px; padding: 21px; border: 1px solid #293849; border-radius: 16px; background: rgba(10,17,25,.8); }.final-banner-result .result-top h2 { margin: 5px 0; font-size: 24px; }.final-banner-preview { padding: 9px; border: 1px solid #324257; border-radius: 18px; background: #04090e; overflow: hidden; box-shadow: 0 28px 90px rgba(0,0,0,.32); }.final-banner-preview svg { display: block; width: 100%; height: auto; border-radius: 11px; }.final-banner-download { display: flex; justify-content: flex-end; align-items: center; gap: 13px; margin-top: 15px; }.final-banner-download small { color: #53697d; font-size: 7px; }
.banner-credit-card { border-color: rgba(223,72,181,.3) !important; background: linear-gradient(135deg,rgba(68,26,61,.38),#0c151f) !important; }.banner-credit-card > span { color: #f28ed5 !important; }

.scroll-reveal { opacity: 0; transform: translateY(42px) scale(.985); filter: blur(3px); transition: opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1),filter .72s; }
.scroll-reveal.in-view { opacity: 1; transform: none; filter: none; }
.scroll-reveal.in-view .showcase-card { animation: cardCascade .58s cubic-bezier(.2,.8,.2,1) both; }
.scroll-reveal.in-view .showcase-card:nth-child(2){animation-delay:.06s}.scroll-reveal.in-view .showcase-card:nth-child(3){animation-delay:.12s}.scroll-reveal.in-view .showcase-card:nth-child(4){animation-delay:.18s}.scroll-reveal.in-view .showcase-card:nth-child(5){animation-delay:.24s}.scroll-reveal.in-view .showcase-card:nth-child(6){animation-delay:.3s}
.reveal { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(2px); animation: revealIn .78s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal-1 { animation-delay: .06s; }.reveal-2 { animation-delay: .18s; }.reveal-3 { animation-delay: .32s; }.reveal-4 { animation-delay: .47s; }.reveal-5 { animation-delay: .62s; }
.wizard-enter { animation: wizardIn .36s cubic-bezier(.2,.8,.2,1) both; }

@keyframes revealIn { to { opacity: 1; transform: translateY(0) scale(1); filter:none; } }
@keyframes cardCascade { from { opacity:0; transform:translateY(18px) scale(.97) } to { opacity:1; transform:none } }
@keyframes wizardIn { from { opacity: 0; transform: translateX(12px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes visualFloat { 0%,100% { transform: translateY(0) rotate(.15deg); } 50% { transform: translateY(-8px) rotate(-.15deg); } }
@keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes trophyGlow { 0%,100% { box-shadow: 0 0 24px rgba(89,217,212,.12); } 50% { box-shadow: 0 0 36px rgba(89,217,212,.32); } }
@keyframes blink { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes bracketPulseL { 0%,100% { border-left-color:#58d9ca; } 50% { border-left-color:#94fff4; } }
@keyframes bracketPulseR { 0%,100% { border-right-color:#7a79ff; } 50% { border-right-color:#b9a8ff; } }
@keyframes gridDrift { from { transform: translateY(0); } to { transform: translateY(76px); } }
@keyframes orbFloatA { to { transform: translate(-70px,90px) scale(1.12); } }
@keyframes orbFloatB { to { transform: translate(80px,-50px) scale(.9); } }
@keyframes orbFloatC { to { transform: translate(-100px,-70px) scale(1.14); } }
@keyframes beamSweep { 0% { transform: translate3d(-8vw,-20px,0) rotate(-16deg) scale(.9); opacity:.08 } 50% { opacity:.22 } 100% { transform: translate3d(25vw,120px,0) rotate(-10deg) scale(1.12); opacity:.15 } }
@keyframes beamSweepTwo { 0% { transform: translate3d(20vw,60px,0) rotate(18deg) scale(1.1); opacity:.08 } 100% { transform: translate3d(-34vw,-90px,0) rotate(12deg) scale(.9); opacity:.2 } }
@keyframes ringSpin { to { transform: rotate(360deg) scale(1.08); } } @keyframes ringSpinReverse { to { transform: rotate(-360deg) scale(.92); } }
@keyframes particleRise { 0%,100% { transform: translateY(18px) scale(.7); opacity:.22 } 50% { transform: translateY(-34px) scale(1.35); opacity:.8 } }
@keyframes accountDrop { from { opacity:0; transform:translateY(-8px) scale(.97) } to { opacity:1; transform:none } }
@keyframes emptyFloat { 0%,100% { transform:translateY(0) rotate(-3deg) } 50% { transform:translateY(-7px) rotate(3deg) } }

@media (max-width: 1380px) {
  .home-section { margin-left: 38px; margin-right: 38px; }
  .hero { padding-left: 38px; padding-right: 38px; }
  .site-footer { margin-left: 38px; margin-right: 38px; }
}
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .top-actions { margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding: 62px 32px 85px; }
  .hero-copy { max-width: 780px; }
  .hero-visual { justify-self: stretch; width: 100%; max-width: 770px; }
  .showcase-grid { grid-template-columns: repeat(2,1fr); }
  .split-section { grid-template-columns: 1fr; gap: 35px; }
  .limit-cards { max-width: 760px; }
  .studio-view { grid-template-columns: 220px 1fr; }
  .studio-sidebar { padding-left: 24px; padding-right: 20px; }
  .studio-main { padding-left: 30px; padding-right: 30px; }
  .names-grid { grid-template-columns: repeat(2,1fr); }
  .studio-theme-grid { grid-template-columns: repeat(2,1fr); }
  .result-top, .export-bar { align-items: flex-start; flex-direction: column; }
  .saved-page { padding-left: 28px; padding-right: 28px; }
  .footer-grid { grid-template-columns: 1.15fr 1fr 1fr; gap: 38px; }
  .footer-brand-column { grid-column: 1/-1; max-width: 520px; }
  .contact-form-card { grid-template-columns: 1fr; gap: 24px; }
  .admin-page { grid-template-columns: 190px 1fr; }.admin-main { padding-left: 25px; padding-right: 25px; }.admin-stat-grid { grid-template-columns: repeat(2,1fr); }.credit-grid { grid-template-columns: repeat(3,1fr); }.admin-user-row { grid-template-columns: minmax(175px,1.5fr) .6fr .4fr .8fr .7fr; }
}
@media (max-width: 820px) {
  .topbar { height: auto; min-height: 68px; padding: 10px 18px; flex-wrap: wrap; gap: 8px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 32px; height: 32px; }
  .workspace-home-link { display: none; }
  .account-box .user-chip { display: none; }
  .auth-actions .login-link { display: none; }
  .hero { padding: 48px 20px 67px; min-height: auto; }
  .hero h1 { font-size: 47px; letter-spacing: -2.9px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero-proof { gap: 14px; flex-wrap: wrap; }
  .hero-visual { height: 370px; padding: 17px; animation: none; }
  .mirror-preview { grid-template-columns: 1fr 35px 96px 35px 1fr; height: 248px; }
  .preview-branch { height: 165px; }
  .preview-branch:before, .preview-branch:after { width: 31px; }
  .preview-center { height: 128px; }
  .floating-chip { display: none; }
  .home-section { padding: 72px 0; margin-left: 18px; margin-right: 18px; }
  .section-copy h2 { font-size: 35px; letter-spacing: -1.7px; }
  .showcase-grid, .limit-cards, .how-grid { grid-template-columns: 1fr; }
  .site-footer { margin: 28px 18px 0; padding: 42px 0 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 22px; }
  .footer-brand-column { grid-column: 1/-1; }
  .footer-contact-column { grid-column: 1/-1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; margin-top: 38px; }
  .info-page { min-height: calc(100vh - 68px); padding: 32px 18px 58px; }
  .info-tabs { width: 100%; margin-bottom: 25px; justify-content: flex-start; }
  .info-hero { min-height: 0; padding: 34px 25px; grid-template-columns: 1fr; gap: 24px; }
  .info-hero h1 { font-size: 38px; letter-spacing: -2px; }
  .info-meta { align-items: flex-start; }
  .info-card-grid { grid-template-columns: 1fr; }
  .info-card-grid article { min-height: 0; }
  .contact-direct-grid { grid-template-columns: 1fr; }
  .contact-form-card { padding: 24px; }
  .contact-form-row { grid-template-columns: 1fr; }
  .info-faq-list summary { grid-template-columns: 28px 1fr 28px; padding: 0 14px; }
  .info-faq-list details p { margin: -2px 50px 0 51px; }
  .info-bottom-bar { align-items: flex-start; flex-direction: column; }
  .studio-view { display: block; }
  .studio-sidebar { display: none; }
  .studio-main { padding: 34px 18px 60px; min-height: calc(100vh - 68px); }
  .wizard-panel, .wizard-panel.wide { padding: 28px 20px; min-height: auto; }
  .wizard-heading h1, .result-top h1 { font-size: 34px; letter-spacing: -1.6px; }
  .pairing-choice-grid { grid-template-columns: 1fr; margin-top: 28px; }.pairing-choice-card { min-height: 138px; }.manual-pairs-grid { grid-template-columns: 1fr; max-height: 520px; }
  .tournament-name-field { margin-top: 37px; }
  .studio-size-grid, .studio-theme-grid { grid-template-columns: 1fr; }
  .game-context-card { grid-template-columns: 48px 1fr; }.game-picker-field,.game-auth-arrow { grid-column: 1/3; }.game-auth-arrow { justify-self: end; }.game-picker-menu { max-height: 250px; }
  .row-heading { align-items: flex-start; flex-direction: column; }
  .names-grid { grid-template-columns: 1fr; max-height: 500px; }
  .create-summary-card { align-items: flex-start; flex-direction: column; }
  .summary-pills { justify-content: flex-start; }
  .result-top { align-items: flex-start; flex-direction: column; }
  .result-secondary-actions { width: 100%; }
  .result-secondary-actions button { flex: 1; }
  .download-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .download-button { width: 100%; }
  .bracket-frame { margin-left: -7px; margin-right: -7px; }
  .export-bar { padding: 13px; }
  .auth-modal { padding: 28px 20px; }
  .auth-modal h2 { font-size: 27px; }
  .saved-page { padding: 48px 18px 70px; min-height: calc(100vh - 68px); }
  .saved-page-head { align-items: flex-start; flex-direction: column; }
  .saved-page-head h1 { font-size: 39px; letter-spacing: -1.9px; }
  .saved-grid { grid-template-columns: 1fr; }
  .saved-preview { height: 235px; }
  .advance-page { min-height: calc(100vh - 68px); padding: 40px 18px 70px; }.advance-head { align-items: flex-start; flex-direction: column; }.advance-head h1 { font-size: 39px; letter-spacing: -1.9px; }.advance-stage { width: 100%; }.advance-pairs { grid-template-columns: 1fr; }.advance-actions { bottom: 8px; }.advance-recreate { min-width: 0; flex: 1; }
  .final-banner-page { width: calc(100% - 36px); min-height: calc(100vh - 68px); padding-top: 36px; }.final-banner-head { align-items: flex-start; flex-direction: column; }.final-banner-head h1 { font-size: 38px; letter-spacing: -1.8px; }.final-banner-quota { width: 100%; }.final-builder-card { padding: 20px; }.final-builder-grid { grid-template-columns: 1fr; }.final-builder-grid > label:first-child,.final-logo-field { grid-column: auto; }.final-versus { height: 48px; }.final-team-media-spacer { display: none; }.final-team-media > div { grid-template-columns: 82px 1fr; }.final-team-media img { width: 82px; height: 74px; }.final-banner-download { align-items: flex-start; flex-direction: column; }.final-banner-download button { width: 100%; }
  .guest-save-warning { grid-template-columns: 36px 1fr; }
  .guest-save-warning button { grid-column: 1/3; width: 100%; justify-content: center; }
  .logo-panel { align-items: flex-start; flex-direction: column; }.logo-upload-actions { width: 100%; }.logo-upload-button,.package-mini-button { justify-content: center; flex: 1; }
  .package-modal { padding: 28px 20px; }.package-modal h2 { font-size: 27px; }
  .admin-page { display: block; min-height: calc(100vh - 68px); }.admin-sidebar { min-height: auto; position: static; padding: 12px 14px; border-right: 0; border-bottom: 1px solid #202c39; display: block; }.admin-sidebar-brand,.admin-person { display: none; }.admin-sidebar nav { overflow-x: auto; flex-direction: row; padding-bottom: 3px; }.admin-sidebar nav button { min-width: max-content; width: auto; padding-right: 13px; }.admin-exit { display: none; }.admin-main { padding: 28px 18px 60px; }.admin-topline { align-items: flex-start; flex-direction: column; }.admin-stat-grid { grid-template-columns: repeat(2,1fr); }.admin-quick-grid { grid-template-columns: repeat(2,1fr); }.admin-user-list { overflow-x: auto; }.admin-user-row { width: 770px; }.credit-grid { grid-template-columns: repeat(2,1fr); }.activation-list article { grid-template-columns: 33px 1fr auto; }.activation-credits { grid-column: 2/4; }.denied-page { min-height: calc(100vh - 68px); padding: 18px; }.denied-card { padding: 35px 20px; }
}
@media (max-width: 460px) {
  .language-switch button { padding: 6px 5px; }
  .top-actions { gap: 5px; }
  .primary-button.small { padding: 0 10px; }
  .hero h1 { font-size: 40px; }
  .hero-visual { height: 348px; }
  .mirror-preview { grid-template-columns: 1fr 24px 78px 24px 1fr; }
  .preview-side span { padding: 0 6px; font-size: 6px; }
  .preview-center small, .preview-center span { font-size: 6px; }
  .preview-caption { gap: 8px; }
  .workspace-progress { grid-template-columns: 52px 1fr 52px; }
  .pairing-choice-card { grid-template-columns: 44px 1fr 24px; padding: 16px 14px; }.pairing-choice-icon { width: 44px; height: 44px; }.pairing-flow-preview > small { display: none; }.manual-pair-fields { grid-template-columns: 1fr; gap: 5px; }.manual-pair-fields > b { padding: 2px 0; }.manual-pair-fields label { height: 40px; }
  .wizard-actions { gap: 8px; }
  .wizard-actions button { flex: 1; }
  .tournament-name-field > div { height: 61px; padding: 0 10px; }
  .tournament-name-field input { font-size: 12px; padding: 0 9px; }
  .tournament-name-field small { display: none; }
  .result-secondary-actions { flex-direction: column; }
  .account-menu { position: fixed; top: 65px; right: 10px; width: min(275px,calc(100vw - 20px)); }
  .saved-preview { height: 200px; }
  .saved-actions { flex-direction: column; }
  .delete-button { justify-content: center; }
  .advance-page { padding-left: 12px; padding-right: 12px; }.advance-head h1 { font-size: 34px; }.advance-team-options { grid-template-columns: 1fr; }.advance-free-note { align-items: flex-start; }.advance-actions { position: static; flex-direction: column; }.advance-actions button { width: 100%; }.advance-recreate { min-width: 0; }.advance-recreate b { margin-left: 4px; }
  .info-page { padding-left: 12px; padding-right: 12px; }
  .info-tabs button { padding-left: 11px; padding-right: 11px; }
  .info-hero { padding: 29px 20px; border-radius: 19px; }
  .info-hero h1 { font-size: 33px; }
  .info-call-card { grid-template-columns: 42px 1fr 22px; padding: 17px; }
  .info-call-card > span { width: 42px; height: 42px; }
  .info-call-card strong { font-size: 16px; }
  .info-faq-list details p { margin: 0; padding: 0 50px 19px 51px; }
  .site-footer { margin-left: 12px; margin-right: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand-column,.footer-contact-column { grid-column: auto; }
  .footer-bottom nav { flex-wrap: wrap; gap: 10px 17px; }
  .contact-form-card { padding: 20px 16px; }
  .contact-send { width: 100%; }
  .message-person { grid-template-columns: 34px 1fr; }.message-person em { grid-column: 2; width: fit-content; }.message-actions { align-items: flex-start; flex-direction: column; }.message-actions > div { width: 100%; flex-wrap: wrap; }
  .credit-grid,.admin-stat-grid { grid-template-columns: 1fr; }.logo-upload-actions { flex-wrap: wrap; }.package-price strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* v21: optional final schedule + reusable admin game-art library */
.final-schedule-field { grid-column: 1 / -1; margin-top: 8px; padding: 16px 18px; border: 1px solid #263a49; border-radius: 14px; background: linear-gradient(135deg,rgba(14,39,49,.82),rgba(19,18,37,.75)); }
.final-schedule-toggle { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; cursor: pointer; color: #dffbff; font-size: 10px; font-weight: 900; }.final-schedule-toggle input { width: 18px; height: 18px; accent-color: #57dfe4; }.final-schedule-inputs { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.final-schedule-inputs label { display: flex; flex-direction: column; gap: 7px; color: #8496a9; font-size: 8px; font-weight: 900; }.final-schedule-inputs input { height: 48px; border: 1px solid #315061; border-radius: 10px; background: #07151e; color: #eefaff; padding: 0 13px; color-scheme: dark; }
.game-art-admin-card { display: grid; grid-template-columns: minmax(220px,.65fr) 1.35fr; gap: 18px; align-items: stretch; margin: 22px 0; }.game-art-upload-zone { min-height: 132px; border: 1px dashed #3b6375; border-radius: 16px; background: radial-gradient(circle at 50% 0,rgba(75,228,231,.08),transparent 60%),#08151e; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; text-align: center; cursor: pointer; transition: .22s; }.game-art-upload-zone:hover { transform: translateY(-2px); border-color: #58dce2; box-shadow: 0 16px 35px rgba(31,191,201,.08); }.game-art-upload-zone > span { font-size: 24px; color: #5ce8e8; }.game-art-upload-zone b { color: #eafcff; font-size: 11px; }.game-art-upload-zone small { color: #70869a; font-size: 8px; }.game-art-upload-zone input { display: none; }.game-art-upload-zone.loading > span { animation: v21spin 1s linear infinite; }.game-art-library { margin-top: 26px; }.game-art-library-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }.game-art-library-head b { color: #eafcff; font-size: 15px; }.game-art-library-head span { color: #6ce0df; font-size: 9px; }.game-art-thumb-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.game-art-thumb-grid article { overflow: hidden; border: 1px solid #263c4b; border-radius: 14px; background: #08131c; }.game-art-thumb-grid img { display: block; width: 100%; aspect-ratio: 2/1; object-fit: cover; }.game-art-thumb-grid article > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }.game-art-thumb-grid b { color: #e4f5fa; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.game-art-thumb-grid small { color: #657b8e; font-size: 6.5px; }
@keyframes v21spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .final-schedule-inputs,.game-art-admin-card { grid-template-columns: 1fr; }.game-art-thumb-grid { grid-template-columns: 1fr 1fr; } }


/* v22: TournaGrid random picker / realistic spinner */
.nav-spinner span { color: #79efe3 !important; background: rgba(70,223,210,.09); }
.nav-spinner:hover { color: #93fff4 !important; }
.nav-spinner:hover span { box-shadow: 0 0 20px rgba(72,226,213,.24); }

.spinner-page {
  position: relative;
  z-index: 1;
  width: min(1450px, calc(100% - 48px));
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: 56px 0 90px;
  overflow: hidden;
}
.spinner-page:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(55,225,211,.10), transparent 28%),
    radial-gradient(circle at 73% 28%, rgba(129,102,255,.08), transparent 25%),
    radial-gradient(circle at 24% 72%, rgba(51,136,255,.06), transparent 24%);
  opacity: .95;
}
.spinner-aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.spinner-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .16; animation: spinnerAurora 10s ease-in-out infinite alternate; }
.spinner-aurora i:nth-child(1) { width: 360px; height: 360px; left: -150px; top: 120px; background: #24d7cb; }
.spinner-aurora i:nth-child(2) { width: 420px; height: 420px; right: -190px; top: 30px; background: #7e64ff; animation-delay: -3s; }
.spinner-aurora i:nth-child(3) { width: 300px; height: 300px; left: 47%; bottom: -180px; background: #2478ff; animation-delay: -6s; }

.spinner-page-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto 34px;
  padding: 0 14px;
}
.spinner-page-head > div:first-child { max-width: 760px; }
.spinner-page-head h1 {
  margin: 10px 0 13px;
  color: #f4fbff;
  font-size: clamp(40px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -3.8px;
}
.spinner-page-head p { margin: 0; max-width: 690px; color: #8597aa; font-size: 14px; line-height: 1.75; }
.spinner-head-badge {
  flex: 0 0 auto;
  min-width: 185px;
  height: 58px;
  padding: 0 16px;
  border: 1px solid rgba(99,232,223,.18);
  border-radius: 17px;
  background: linear-gradient(135deg,rgba(13,28,39,.9),rgba(11,20,31,.72));
  box-shadow: inset 0 1px rgba(255,255,255,.035),0 16px 38px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  gap: 11px;
}
.spinner-head-badge > span {
  width: 35px;
  height: 35px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #7ff7ef;
  background: rgba(64,218,207,.09);
  border: 1px solid rgba(84,226,216,.12);
  font-size: 17px;
}
.spinner-head-badge div { display: flex; flex-direction: column; gap: 3px; }
.spinner-head-badge b { color: #dffefa; font-size: 9px; letter-spacing: 1.8px; }
.spinner-head-badge small { color: #607488; font-size: 6.5px; letter-spacing: 1.1px; }

.spinner-stage {
  position: relative;
  max-width: 1220px;
  min-height: 760px;
  margin: 0 auto;
  padding: 28px 28px 38px;
  border: 1px solid rgba(66,93,113,.38);
  border-radius: 30px;
  background:
    linear-gradient(180deg,rgba(12,20,30,.82),rgba(6,12,20,.93)),
    radial-gradient(circle at 50% 0,rgba(66,235,220,.07),transparent 42%);
  box-shadow: 0 35px 90px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(15px);
}
.spinner-stage:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,rgba(255,255,255,.02),transparent 22%,transparent 74%,rgba(110,96,255,.025));
}
.spinner-control-panel { position: relative; z-index: 5; width: min(920px,100%); margin: 0 auto 10px; text-align: center; }

.spinner-start-button {
  min-width: 305px;
  height: 64px;
  margin: 0 auto;
  padding: 0 19px;
  border: 1px solid rgba(112,248,238,.38);
  border-radius: 18px;
  background: linear-gradient(135deg,#54e3d8,#51c5df 58%,#7788ff);
  color: #061318;
  box-shadow: 0 18px 44px rgba(51,213,205,.18), inset 0 1px rgba(255,255,255,.65);
  display: inline-grid;
  grid-template-columns: 38px 1fr 28px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .24s, box-shadow .24s, filter .24s;
}
.spinner-start-button:hover { transform: translateY(-3px) scale(1.015); filter: brightness(1.06); box-shadow: 0 23px 58px rgba(57,220,212,.26), inset 0 1px rgba(255,255,255,.7); }
.spinner-start-button .spinner-start-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(6,29,31,.13); font-size: 12px; }
.spinner-start-button b { font-size: 13px; letter-spacing: .3px; }
.spinner-start-button i { font-style: normal; font-size: 17px; }
.spinner-start-hint { display: block; margin-top: 10px; color: #586d7f; font-size: 8px; letter-spacing: .7px; }

.spinner-step-card {
  position: relative;
  width: min(680px,100%);
  margin: 0 auto;
  padding: 24px 26px;
  border: 1px solid rgba(65,92,111,.55);
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(12,24,34,.96),rgba(9,16,26,.94));
  box-shadow: 0 22px 50px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
  text-align: left;
  animation: spinnerPanelIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.spinner-step-card h2, .spinner-ready-bar h2 { margin: 8px 0 8px; color: #edfaff; font-size: 25px; letter-spacing: -1px; }
.spinner-step-card > p, .spinner-step-heading p, .spinner-ready-bar p { margin: 0; color: #74889b; font-size: 10px; line-height: 1.7; }
.spinner-count-picker {
  margin: 21px 0 17px;
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  gap: 9px;
  align-items: stretch;
}
.spinner-count-picker > button {
  border: 1px solid #304758;
  border-radius: 13px;
  background: #09141e;
  color: #9cf7ef;
  font-size: 22px;
  cursor: pointer;
  transition: .2s;
}
.spinner-count-picker > button:hover { border-color: #55d8d0; background: #0d2029; transform: translateY(-1px); }
.spinner-count-picker label {
  height: 58px;
  padding: 0 15px;
  border: 1px solid #355063;
  border-radius: 13px;
  background: linear-gradient(180deg,#0b1822,#08121b);
  display: flex;
  align-items: center;
}
.spinner-count-picker input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f3ffff;
  text-align: center;
  font: inherit;
  font-size: 24px;
  font-weight: 900;
}
.spinner-count-picker input::-webkit-inner-spin-button { appearance: none; }
.spinner-count-picker label span { color: #657b8d; font-size: 8px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }

.spinner-primary-action,
.spinner-secondary-action {
  min-height: 46px;
  border-radius: 12px;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  transition: .22s;
}
.spinner-primary-action {
  padding: 0 18px;
  border: 1px solid rgba(91,235,225,.3);
  background: linear-gradient(135deg,#4fdbd0,#58c9dc);
  color: #061316;
  box-shadow: 0 11px 25px rgba(55,210,200,.12);
}
.spinner-primary-action:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 15px 31px rgba(55,210,200,.18); }
.spinner-secondary-action {
  padding: 0 16px;
  border: 1px solid #2b4050;
  background: #0a151f;
  color: #91a6b6;
}
.spinner-secondary-action:hover { border-color: #466475; color: #d8eaf3; transform: translateY(-1px); }
.spinner-step-card > .spinner-primary-action { width: 100%; }

.names-card { width: min(900px,100%); }
.spinner-step-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.spinner-step-heading > div { max-width: 610px; }
.spinner-entered-count {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid #28414f;
  border-radius: 10px;
  background: #09151e;
  color: #61788a;
  font-size: 7px;
}
.spinner-entered-count b { color: #73e7de; font-size: 10px; }
.spinner-name-grid {
  max-height: 285px;
  margin-top: 18px;
  padding: 2px 4px 2px 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #31505f transparent;
}
.spinner-name-grid label {
  height: 45px;
  border: 1px solid #293e4d;
  border-radius: 11px;
  background: #08131c;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  overflow: hidden;
}
.spinner-name-grid label > span {
  height: 100%;
  display: grid;
  place-items: center;
  border-right: 1px solid #223544;
  color: #5adbd2;
  font-size: 7px;
  font-weight: 900;
}
.spinner-name-grid input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #dcecf3;
  padding: 0 10px;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
}
.spinner-name-grid input::placeholder { color: #405263; }
.spinner-name-grid label:focus-within { border-color: #53cfc8; box-shadow: 0 0 0 2px rgba(72,212,204,.06); }
.spinner-error {
  margin-top: 12px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255,103,121,.25);
  border-radius: 10px;
  background: rgba(123,27,39,.14);
  color: #ff9eaa;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  font-weight: 850;
}
.spinner-error span { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,102,119,.12); }
.spinner-form-actions { margin-top: 15px; display: flex; justify-content: space-between; gap: 10px; }
.spinner-form-actions .spinner-primary-action { min-width: 190px; }

.spinner-ready-bar {
  width: min(900px,100%);
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(70,104,122,.48);
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(12,28,37,.95),rgba(10,18,29,.93));
  box-shadow: 0 18px 42px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  animation: spinnerPanelIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.spinner-ready-bar > div { max-width: 610px; }
.spinner-remaining-badge {
  flex: 0 0 auto;
  min-width: 108px;
  min-height: 58px;
  padding: 8px 14px;
  border: 1px solid rgba(86,223,210,.22);
  border-radius: 15px;
  background: rgba(41,192,174,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.spinner-remaining-badge b { color: #7af0e5; font-size: 22px; line-height: 1; }
.spinner-remaining-badge small { max-width: 55px; color: #728a99; font-size: 7px; font-weight: 900; line-height: 1.25; text-transform: uppercase; }
.spinner-remaining-badge.final { border-color: rgba(132,241,122,.34); background: rgba(86,202,80,.09); }
.spinner-remaining-badge.final b { color: #9bf08d; }
.spinner-spin-button {
  min-width: 174px;
  height: 54px;
  border: 1px solid rgba(91,235,225,.35);
  border-radius: 14px;
  background: linear-gradient(135deg,#50e0d4,#55c3df 65%,#7886ff);
  color: #061315;
  box-shadow: 0 14px 33px rgba(56,215,206,.17), inset 0 1px rgba(255,255,255,.62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: .22s;
}
.spinner-spin-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 19px 39px rgba(58,221,211,.25), inset 0 1px rgba(255,255,255,.7); }
.spinner-spin-button span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: rgba(0,0,0,.1); font-size: 10px; }
.spinner-spin-button b { font-size: 10px; letter-spacing: .9px; }
.spinner-spin-button:disabled { cursor: wait; opacity: .92; }
.spinner-spin-button.spinning span { animation: spinnerButtonSpin .8s linear infinite; }

.spinner-machine-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 590px;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.spinner-machine {
  --machine-size: min(590px, 78vw);
  --light-radius: calc(var(--machine-size) / 2 - 36px);
  position: relative;
  width: var(--machine-size);
  aspect-ratio: 1;
  margin: 0 auto;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.34));
}
.spinner-rim {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background:
    linear-gradient(145deg,#d7e4e8 0%,#4f6370 8%,#111b24 19%,#8fa1a9 34%,#263743 49%,#a5b5bb 63%,#17242e 79%,#d1dde0 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 0 0 7px rgba(4,10,16,.9),
    0 0 0 9px rgba(115,151,168,.15),
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 0 28px rgba(0,0,0,.8),
    0 22px 45px rgba(0,0,0,.46);
}
.spinner-rim:before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: #071019;
  box-shadow: inset 0 0 20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08);
}
.spinner-rim-lights { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.spinner-rim-lights i {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 50%;
  top: 50%;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #b9fff9;
  box-shadow: 0 0 5px #7ff7ed,0 0 12px rgba(85,231,221,.56);
  transform: rotate(var(--light-angle)) translateX(var(--light-radius));
  opacity: .8;
}
.spinner-rim-lights i:nth-child(3n) { background: #d9d4ff; box-shadow: 0 0 5px #a695ff,0 0 12px rgba(132,108,255,.48); }
.spinner-rim-lights i:nth-child(4n) { opacity: .42; }

.spinner-wheel {
  position: absolute;
  z-index: 4;
  inset: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--wheel-gradient);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.15),
    inset 0 0 42px rgba(0,0,0,.33),
    0 0 0 2px rgba(3,9,14,.88);
  transition: transform 5.85s cubic-bezier(.10,.60,.04,1);
  will-change: transform;
}
.spinner-wheel:before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-conic-gradient(from 0deg, transparent 0 calc(var(--segment-angle) - .65deg), rgba(4,10,16,.48) calc(var(--segment-angle) - .65deg) var(--segment-angle)),
    radial-gradient(circle at 50% 50%,transparent 0 57%,rgba(0,0,0,.12) 78%,rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.spinner-wheel-gloss {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(145deg,rgba(255,255,255,.24),transparent 20%,transparent 58%,rgba(0,0,0,.14)),
    radial-gradient(ellipse at 35% 20%,rgba(255,255,255,.22),transparent 22%);
  mix-blend-mode: screen;
  opacity: .55;
}
.spinner-label-layer {
  position: absolute;
  z-index: 8;
  inset: 48px;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
}
.spinner-wheel-label {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: transform 5.85s cubic-bezier(.10,.60,.04,1);
  will-change: transform;
}
.spinner-wheel-label > span {
  position: absolute;
  top: 17%;
  left: 50%;
  width: 27%;
  padding: 3px 5px;
  overflow: hidden;
  color: #f6fbff;
  background: rgba(3,10,16,.34);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  box-shadow: 0 2px 7px rgba(0,0,0,.16);
  text-shadow: 0 1px 2px rgba(0,0,0,.98), 0 0 4px rgba(0,0,0,.72);
  -webkit-text-stroke: .12px rgba(0,0,0,.72);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  transform-origin: center center;
  transition: transform 5.85s cubic-bezier(.10,.60,.04,1), font-size .25s ease, width .25s ease, top .25s ease;
  will-change: transform;
}
.spinner-label-layer.sparse .spinner-wheel-label > span { top: 18%; width: 29%; font-size: clamp(12px,1.15vw,16px); }
.spinner-label-layer.medium .spinner-wheel-label > span { top: 13%; width: 23%; font-size: clamp(9px,.88vw,11.5px); }
.spinner-label-layer.dense .spinner-wheel-label > span { top: 9%; width: 18%; font-size: clamp(7.2px,.7vw,9px); padding: 2px 4px; }
.spinner-label-layer.very-dense .spinner-wheel-label > span { top: 6.5%; width: 14%; font-size: clamp(6px,.58vw,7.2px); padding: 2px 3px; border-radius: 4px; }
.spinner-label-layer.ultra-dense .spinner-wheel-label > span { top: 4.5%; width: 11.5%; font-size: clamp(5px,.48vw,6.1px); padding: 1.5px 2px; border-radius: 3px; }
.spinner-hub {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 108px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 10px 24px rgba(0,0,0,.54),inset 0 1px 6px rgba(255,255,255,.28),0 0 0 7px rgba(7,15,22,.54);
  display: grid;
  place-items: center;
}
.spinner-hub-idle {
  background: radial-gradient(circle at 35% 28%,#f5ffff 0 3%,#9eafb6 5%,#344751 27%,#111b23 55%,#677984 74%,#15222b 100%);
}
.spinner-hub-idle span {
  color: #dffdf9;
  font-size: 24px;
  font-weight: 950;
  text-shadow: 0 1px 4px rgba(0,0,0,.6),0 0 12px rgba(70,230,216,.22);
}
.spinner-hub i {
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(210,255,239,.22);
  border-radius: 50%;
  pointer-events: none;
}
.spinner-center-spin {
  padding: 14px 10px;
  appearance: none;
  outline: 0;
  background:
    radial-gradient(circle at 35% 23%,rgba(255,255,255,.48),transparent 12%),
    linear-gradient(145deg,#91f17f 0%,#45d974 38%,#20ac68 72%,#147c56 100%);
  color: #052114;
  cursor: pointer;
  transition: transform .2s ease,filter .2s ease,box-shadow .2s ease;
  font: inherit;
}
.spinner-center-spin:hover:not(:disabled) {
  transform: translate(-50%,-50%) scale(1.055);
  filter: brightness(1.07) saturate(1.08);
  box-shadow: 0 13px 30px rgba(0,0,0,.54),0 0 30px rgba(64,225,117,.25),inset 0 1px 7px rgba(255,255,255,.45),0 0 0 7px rgba(7,15,22,.54);
}
.spinner-center-spin:active:not(:disabled) { transform: translate(-50%,-50%) scale(.98); }
.spinner-center-spin:disabled { cursor: wait; filter: saturate(.8); }
.spinner-center-spin > span {
  display: grid;
  place-items: center;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}
.spinner-center-spin > b {
  display: block;
  max-width: 86px;
  font-size: 7.6px;
  font-weight: 1000;
  line-height: 1.12;
  letter-spacing: .45px;
  text-align: center;
}
.spinner-center-spin.spinning > span { animation: spinnerButtonSpin .72s linear infinite; }
.spinner-center-spin.replay {
  background:
    radial-gradient(circle at 35% 23%,rgba(255,255,255,.5),transparent 12%),
    linear-gradient(145deg,#b1f28a 0%,#60dc70 40%,#26b56a 72%,#167c54 100%);
}
.spinner-machine.is-spinning .spinner-hub i { animation: spinnerHub 1.1s linear infinite; }

.spinner-pointer {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: -2px;
  width: 62px;
  height: 83px;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.5));
}
.spinner-pointer:before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  width: 44px;
  height: 58px;
  clip-path: polygon(50% 100%,0 0,100% 0);
  background: linear-gradient(90deg,#e7f0f3,#758996 35%,#263a45 52%,#b9c9ce 78%,#f0f6f8);
  box-shadow: inset 0 1px rgba(255,255,255,.6);
}
.spinner-pointer i {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 11px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #6ff2e8;
  box-shadow: 0 0 8px #5ee8df,0 0 18px rgba(75,227,217,.62);
}
.spinner-pointer b {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 26px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(#536875,#17252f);
  border: 1px solid rgba(255,255,255,.12);
}
.spinner-machine.is-spinning .spinner-pointer { animation: pointerTick .12s ease-in-out infinite alternate; }
.spinner-floor-shadow {
  position: absolute;
  z-index: -1;
  left: 11%;
  right: 11%;
  bottom: -11px;
  height: 45px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 68%);
  filter: blur(7px);
}
.spinner-machine.has-winner { animation: spinnerWinnerPulse .75s ease-out 1; }

.spinner-fair-note {
  margin-top: 4px;
  color: #5f7485;
  font-size: 7.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.spinner-fair-note span { color: #69dcd4; }

.spinner-winner-card {
  position: relative;
  z-index: 10;
  width: min(520px,calc(100% - 20px));
  margin-top: -8px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(93,237,226,.3);
  border-radius: 19px;
  background:
    linear-gradient(135deg,rgba(15,42,46,.96),rgba(14,23,38,.97)),
    radial-gradient(circle at 50% 0,rgba(89,231,220,.12),transparent 55%);
  box-shadow: 0 20px 48px rgba(0,0,0,.32),0 0 35px rgba(56,215,204,.07),inset 0 1px rgba(255,255,255,.05);
  text-align: center;
  animation: winnerCardIn .45s cubic-bezier(.18,.9,.25,1.2) both;
}
.spinner-winner-card > span { color: #6ce9df; font-size: 7px; font-weight: 950; letter-spacing: 2.6px; }
.spinner-winner-card > strong {
  display: block;
  margin: 7px auto 15px;
  max-width: 100%;
  overflow: hidden;
  color: #f2ffff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(24px,4vw,37px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  text-shadow: 0 0 18px rgba(83,224,214,.16);
}
.spinner-winner-card > div:not(.winner-sparks) { display: flex; justify-content: center; gap: 8px; }
.spinner-remove-action {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255,144,111,.32);
  border-radius: 12px;
  background: linear-gradient(135deg,#ffb45f,#ff795f);
  color: #2a0d08;
  font: inherit;
  font-size: 9px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 11px 25px rgba(255,116,80,.12);
  transition: .22s;
}
.spinner-remove-action:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 15px 31px rgba(255,116,80,.18); }
.spinner-remove-action span { font-size: 16px; line-height: 1; }
.final-survivor-card { border-color: rgba(143,241,118,.38); background: linear-gradient(135deg,rgba(24,57,37,.97),rgba(13,28,29,.97)); }
.final-survivor-card > span { color: #9af18a; }
.final-survivor-card > strong { text-shadow: 0 0 21px rgba(104,230,111,.2); }
.final-survivor-card > small { display: block; margin-top: -6px; color: #6f8e7c; font-size: 7px; font-weight: 900; letter-spacing: 1.4px; }
.winner-sparks { position: absolute; inset: 0; pointer-events: none; }
.winner-sparks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #72eee5; box-shadow: 0 0 8px currentColor; animation: winnerSpark 1.6s ease-out infinite; }
.winner-sparks i:nth-child(1){left:8%;top:24%;animation-delay:-.1s}.winner-sparks i:nth-child(2){left:17%;top:72%;animation-delay:-.7s}.winner-sparks i:nth-child(3){left:28%;top:15%;animation-delay:-1.1s}.winner-sparks i:nth-child(4){left:38%;top:83%;animation-delay:-.4s}.winner-sparks i:nth-child(5){left:48%;top:11%;animation-delay:-1.4s}.winner-sparks i:nth-child(6){left:58%;top:78%;animation-delay:-.2s}.winner-sparks i:nth-child(7){left:68%;top:18%;animation-delay:-1s}.winner-sparks i:nth-child(8){left:79%;top:73%;animation-delay:-.55s}.winner-sparks i:nth-child(9){left:90%;top:28%;animation-delay:-1.25s}.winner-sparks i:nth-child(10){left:12%;top:47%;animation-delay:-1.5s}.winner-sparks i:nth-child(11){left:85%;top:52%;animation-delay:-.85s}.winner-sparks i:nth-child(12){left:53%;top:48%;animation-delay:-.35s}

.spinner-reset-link {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px auto 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #5f7485;
  font: inherit;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
  transition: .2s;
}
.spinner-reset-link:hover { color: #a5bbc9; transform: translateY(-1px); }

@keyframes spinnerAurora { to { transform: translate3d(55px,-25px,0) scale(1.08); opacity:.23; } }
@keyframes spinnerPanelIn { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes spinnerButtonSpin { to { transform:rotate(360deg); } }
@keyframes spinnerHub { to { transform:rotate(360deg); } }
@keyframes pointerTick { from { transform:translateX(-50%) rotate(-1.3deg); } to { transform:translateX(-50%) rotate(1.7deg); } }
@keyframes spinnerWinnerPulse { 0%{filter:drop-shadow(0 30px 30px rgba(0,0,0,.34))} 45%{filter:drop-shadow(0 30px 30px rgba(0,0,0,.34)) drop-shadow(0 0 34px rgba(83,228,217,.3))} 100%{filter:drop-shadow(0 30px 30px rgba(0,0,0,.34))} }
@keyframes winnerCardIn { from { opacity:0; transform:translateY(12px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes winnerSpark { 0%,100%{transform:translateY(5px) scale(.5);opacity:.15} 45%{transform:translateY(-9px) scale(1.4);opacity:.85} }

@media (max-width: 900px) {
  .spinner-page { width: calc(100% - 28px); padding-top: 38px; }
  .spinner-page-head { align-items: flex-start; flex-direction: column; }
  .spinner-head-badge { display: none; }
  .spinner-stage { min-height: 690px; padding: 22px 15px 34px; border-radius: 24px; }
  .spinner-page-head h1 { letter-spacing: -2.7px; }
  .spinner-ready-bar { align-items: stretch; flex-direction: column; }
  .spinner-remaining-badge { align-self: flex-start; }
  .spinner-spin-button { width: 100%; }
  .spinner-machine-wrap { min-height: 520px; }
  .spinner-machine { --machine-size: min(540px, 82vw); }
  .spinner-name-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .spinner-page { width: calc(100% - 20px); padding: 27px 0 55px; }
  .spinner-page-head { padding: 0 4px; margin-bottom: 22px; }
  .spinner-page-head h1 { font-size: 39px; letter-spacing: -2.3px; }
  .spinner-page-head p { font-size: 11px; }
  .spinner-stage { padding: 17px 10px 28px; min-height: 600px; border-radius: 20px; }
  .spinner-start-button { min-width: min(295px,100%); height: 58px; }
  .spinner-step-card { padding: 20px 15px; }
  .spinner-step-card h2,.spinner-ready-bar h2 { font-size: 22px; }
  .spinner-step-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .spinner-entered-count { align-self: flex-start; }
  .spinner-name-grid { grid-template-columns: 1fr; max-height: 270px; }
  .spinner-form-actions { flex-direction: column-reverse; }
  .spinner-form-actions button { width: 100%; }
  .spinner-machine-wrap { min-height: 410px; padding-top: 6px; }
  .spinner-machine { --machine-size: min(430px, 90vw); }
  .spinner-rim { inset: 12px; }
  .spinner-rim:before { inset: 15px; }
  .spinner-wheel { inset: 36px; }
  .spinner-label-layer { inset: 36px; }
  .spinner-hub { width: 88px; height: 88px; }
  .spinner-hub-idle span { font-size: 19px; }
  .spinner-center-spin { padding: 11px 7px; }
  .spinner-center-spin > span { margin-bottom: 4px; font-size: 13px; }
  .spinner-center-spin > b { max-width: 68px; font-size: 6.2px; letter-spacing: .2px; }
  .spinner-label-layer.sparse .spinner-wheel-label > span { font-size: 8.5px; }
  .spinner-label-layer.medium .spinner-wheel-label > span { font-size: 6.5px; }
  .spinner-label-layer.dense .spinner-wheel-label > span { font-size: 5.4px; }
  .spinner-label-layer.very-dense .spinner-wheel-label > span { font-size: 4.7px; }
  .spinner-label-layer.ultra-dense .spinner-wheel-label > span { font-size: 4.1px; }
  .spinner-pointer { top: -8px; transform: translateX(-50%) scale(.82); transform-origin: top center; }
  .spinner-winner-card { padding: 18px 13px; }
  .spinner-winner-card > div:not(.winner-sparks) { flex-direction: column; }
  .spinner-winner-card button { width: 100%; }
  .spinner-remaining-badge { min-height: 50px; }
}

/* ================= TOURNAGRID GAMES HUB ================= */
.games-page,.games-selected-page{position:relative;width:min(1180px,calc(100% - 36px));margin:0 auto;padding:52px 0 76px;isolation:isolate}.games-selected-page{width:100%;padding-top:18px}.games-aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.games-aurora i{position:absolute;border-radius:50%;filter:blur(74px);opacity:.16}.games-aurora i:nth-child(1){width:340px;height:340px;left:-120px;top:110px;background:#3ee6d5}.games-aurora i:nth-child(2){width:300px;height:300px;right:2%;top:18px;background:#7d6cff}.games-aurora i:nth-child(3){width:280px;height:280px;right:26%;bottom:0;background:#ef5aa8}.games-head{max-width:790px;margin:0 auto 34px;text-align:center}.games-head h1{margin:10px 0 12px;font-size:clamp(38px,5vw,66px);line-height:.98;letter-spacing:-3.3px;color:#f2fbff}.games-head p{margin:0;color:#8297aa;font-size:14px;line-height:1.75}.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tourna-game-card{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:17px;align-items:center;min-height:148px;padding:22px 58px 22px 22px;text-align:left;color:#f5fbff;border:1px solid rgba(130,162,184,.16);border-radius:24px;background:linear-gradient(145deg,rgba(10,26,37,.94),rgba(7,18,28,.88));box-shadow:0 18px 55px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025);cursor:pointer;overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}.tourna-game-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 20%,var(--game-glow,rgba(80,220,210,.13)),transparent 34%);opacity:.95;pointer-events:none}.tourna-game-card:hover{transform:translateY(-4px);border-color:rgba(102,220,215,.32);box-shadow:0 24px 65px rgba(0,0,0,.25)}.tourna-game-card.tone-mint{--game-glow:rgba(49,220,194,.18)}.tourna-game-card.tone-blue{--game-glow:rgba(65,130,255,.19)}.tourna-game-card.tone-pink{--game-glow:rgba(238,74,151,.16)}.tourna-game-card.tone-purple{--game-glow:rgba(145,91,255,.18)}.tourna-game-card.tone-cyan{--game-glow:rgba(38,193,224,.18)}.tourna-game-card.is-locked{filter:saturate(.72);opacity:.82}.game-card-icon{position:relative;z-index:1;width:66px;height:66px;border-radius:20px;display:grid;place-items:center;font-size:27px;font-weight:950;color:#eaffff;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px rgba(255,255,255,.18),0 12px 30px rgba(0,0,0,.24)}.game-card-icon.mint{background:linear-gradient(145deg,#32cbb6,#177f78)}.game-card-icon.blue{background:linear-gradient(145deg,#4e8dff,#2850ae)}.game-card-icon.pink{background:linear-gradient(145deg,#ef5da8,#a22e70)}.game-card-icon.purple{background:linear-gradient(145deg,#9e72ff,#5b39bd)}.game-card-icon.cyan{background:linear-gradient(145deg,#40cce4,#197c9c)}.tourna-game-card-copy{position:relative;z-index:1;min-width:0}.tourna-game-card-copy>span{font-size:9px;font-weight:900;letter-spacing:2px;color:#66849a}.tourna-game-card-copy h2{margin:5px 0 7px;font-size:21px;letter-spacing:-.55px}.tourna-game-card-copy p{margin:0;color:#8093a4;font-size:11px;line-height:1.55}.tourna-game-card-meta{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:9px;min-width:110px}.game-best-mini{display:flex;gap:7px;align-items:baseline}.game-best-mini small{font-size:8px;color:#688397;font-weight:900;letter-spacing:1px}.game-best-mini b{font-size:13px;color:#dffdf8}.game-access-chip{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(58,214,174,.08);border:1px solid rgba(61,212,177,.18);color:#79d9c8;font-size:8px;font-weight:900;letter-spacing:.6px}.game-access-chip.locked{background:rgba(238,101,94,.08);border-color:rgba(238,101,94,.18);color:#ef9a91}.game-card-arrow{position:absolute;right:19px;top:50%;transform:translateY(-50%);font-size:21px;color:#5c7a8d}.games-back-link{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:#8fa4b4;font:inherit;font-size:11px;font-weight:850;cursor:pointer;padding:8px 0;transition:color .2s ease}.games-back-link:hover{color:#e7fbff}.game-play-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.game-best-pill{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:#0a1a25;border:1px solid #173244}.game-best-pill span{font-size:8px;color:#6f8a9d;font-weight:900;letter-spacing:1px}.game-best-pill b{font-size:12px;color:#e7fff9}.game-arena-shell,.game-lock-card{border:1px solid rgba(117,151,175,.18);border-radius:28px;background:linear-gradient(150deg,rgba(8,24,35,.96),rgba(5,15,24,.92));box-shadow:0 28px 80px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.03)}.game-arena-shell{padding:28px;min-height:590px}.game-arena-head{display:flex;align-items:center;gap:18px;padding-bottom:22px;border-bottom:1px solid rgba(115,147,166,.12)}.game-arena-head h1{margin:3px 0 3px;color:#f4fbff;font-size:30px;letter-spacing:-1.4px}.game-arena-head p{margin:0;color:#7e93a4;font-size:11px}.game-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:700px;margin:70px auto 0}.game-mode-grid button{min-height:170px;border:1px solid rgba(117,157,182,.18);border-radius:24px;background:rgba(11,31,43,.72);color:#f1fbff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:.2s ease}.game-mode-grid button:hover{transform:translateY(-4px);border-color:rgba(82,213,203,.36);background:rgba(14,39,52,.86)}.game-mode-grid button>span{font-size:26px;color:#66dbce}.game-mode-grid button b{font-size:18px}.game-mode-grid button small{color:#7692a3;font-size:9px}.mini-game-stage{max-width:720px;margin:42px auto 0;display:flex;flex-direction:column;align-items:center;text-align:center}.player-chip{display:inline-flex;padding:7px 12px;border:1px solid rgba(91,222,210,.16);border-radius:999px;background:rgba(70,201,188,.06);color:#77d9cf;font-size:8px;font-weight:900;letter-spacing:1.2px}.mini-status{margin-top:22px;font-size:24px;font-weight:950;color:#f4fbff}.mini-timer{margin:10px 0 4px;font-variant-numeric:tabular-nums;font-size:58px;line-height:1;font-weight:950;letter-spacing:-3px;color:#ffc45d;text-shadow:0 6px 24px rgba(240,170,59,.12)}.mini-score{margin:10px 0;color:#8298a8;font-size:13px}.mini-score b{color:#e8faff}.game-primary-button,.game-secondary-button{appearance:none;border:0;border-radius:14px;padding:13px 22px;font:inherit;font-size:10px;font-weight:950;letter-spacing:.45px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.game-primary-button{color:#052019;background:linear-gradient(145deg,#89eadc,#47cbbd);box-shadow:0 12px 28px rgba(48,192,176,.13)}.game-secondary-button{color:#9eb2c0;background:#102431;border:1px solid #1d394a}.click-target{width:min(430px,92%);height:220px;margin-top:18px;border:1px solid rgba(92,220,206,.27);border-radius:30px;background:radial-gradient(circle at 50% 42%,rgba(66,226,203,.25),rgba(16,78,75,.68) 58%,rgba(8,35,42,.9));color:#eaffff;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.12),0 22px 50px rgba(0,0,0,.22)}.click-target:active{transform:scale(.985)}.click-target span{display:block;font-size:46px;font-weight:950}.click-target small{display:block;margin-top:7px;color:#8de4d9;font-weight:900}.reaction-target{width:min(620px,94%);height:280px;margin-top:28px;border-radius:28px;border:1px solid rgba(255,255,255,.11);color:#f8ffff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:background .12s ease}.reaction-target b{font-size:28px}.reaction-target small{font-size:10px;opacity:.72}.reaction-target.state-idle,.reaction-target.state-waiting{background:linear-gradient(145deg,#5e242b,#351a22)}.reaction-target.state-ready{background:linear-gradient(145deg,#2dbb75,#17643f);box-shadow:0 0 42px rgba(53,215,133,.14)}.reaction-target.state-early{background:linear-gradient(145deg,#b77b2f,#6b431d);color:#fff4d9}.reaction-target.state-done{background:linear-gradient(145deg,#245f93,#173a5e)}.mini-instruction{margin:20px 0 0;color:#7f94a5;font-size:11px}.math-problem-display,.typing-word-display{margin:20px 0 16px;padding:16px 24px;border-radius:17px;background:#0c2230;border:1px solid #17384b;color:#95ead7;font-size:42px;font-weight:950;letter-spacing:-1px}.typing-word-display{min-width:280px;color:#dffbff;letter-spacing:2px}.math-stage form,.typing-stage form{display:flex;gap:8px}.math-stage input,.typing-stage input{width:260px;padding:14px 16px;border-radius:13px;border:1px solid #214255;background:#081923;color:#f3fbff;outline:0;text-align:center;font:inherit;font-size:18px;font-weight:850}.math-stage input:focus,.typing-stage input:focus{border-color:#4bcbbd;box-shadow:0 0 0 3px rgba(65,202,187,.08)}.math-stage form button,.typing-stage form button{width:48px;border:0;border-radius:13px;background:#3dc7b7;color:#08241f;font-weight:950;cursor:pointer}.game-result-panel{max-width:680px;margin:56px auto 0;padding:30px;border-radius:24px;background:#0a1d28;border:1px solid #183748;text-align:center}.game-result-panel.compact{max-width:560px}.game-result-panel h2{margin:8px 0 20px;font-size:28px;color:#effbff}.game-result-lines{display:grid;gap:9px}.game-result-row{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:12px;background:#0f2937;color:#7f96a5;font-size:11px}.game-result-row b{color:#f0fbff}.game-result-actions{display:flex;justify-content:center;gap:9px;margin-top:20px}.game-lock-card{max-width:720px;margin:70px auto 0;padding:54px;text-align:center}.game-lock-card .game-card-icon{margin:0 auto 18px}.game-lock-card h1{margin:10px 0 12px;font-size:34px;color:#f2fbff;letter-spacing:-1.4px}.game-lock-card p{max-width:560px;margin:0 auto 24px;color:#8397a7;font-size:12px;line-height:1.75}
@media(max-width:800px){.games-page{width:calc(100% - 22px);padding-top:34px}.games-grid{grid-template-columns:1fr}.games-head h1{font-size:42px;letter-spacing:-2.3px}.tourna-game-card{grid-template-columns:58px 1fr;padding:18px 48px 18px 16px}.game-card-icon{width:54px;height:54px;border-radius:17px;font-size:22px}.tourna-game-card-meta{grid-column:2;align-items:flex-start;flex-direction:row;flex-wrap:wrap}.game-mode-grid{grid-template-columns:1fr;margin-top:35px}.game-arena-shell{padding:18px;min-height:540px}.game-arena-head h1{font-size:24px}.mini-timer{font-size:48px}.math-problem-display,.typing-word-display{font-size:32px}.game-lock-card{margin-top:35px;padding:32px 20px}.spinner-label-layer{inset:36px}}

/* Games V4: invisible 2.75s preparation phase + input focus feedback */
.mini-status.is-preparing,.mini-instruction.is-preparing{color:#a8f3e8;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.math-problem-display.is-preparing,.typing-word-display.is-preparing{color:#6c8798;letter-spacing:6px}
.math-stage input[aria-disabled="true"],.typing-stage input[aria-disabled="true"]{caret-color:#70dfd2;border-color:#294a5b;color:#7e95a4}
.math-stage form button:disabled,.typing-stage form button:disabled{opacity:.38;cursor:default}
.prepare-pulse{height:54px;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px}
.prepare-pulse i{width:7px;height:7px;border-radius:50%;background:#72e1d3;animation:tgPreparePulse .9s ease-in-out infinite}
.prepare-pulse i:nth-child(2){animation-delay:.12s}.prepare-pulse i:nth-child(3){animation-delay:.24s}
@keyframes tgPreparePulse{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-7px);opacity:1}}

/* =========================================================
   V5 CINEMATIC ARENA UI — approved TournaGrid direction
   Background + rain persist across every page without touching
   the application/account/bracket/game logic.
   ========================================================= */
:root {
  --arena-cyan: #35d8ff;
  --arena-blue: #497dff;
  --arena-violet: #885cff;
  --arena-pink: #ec4f9e;
  --arena-red: #ff566e;
  --arena-glass: rgba(7, 14, 28, .72);
  --arena-line: rgba(126, 166, 255, .20);
}
html, body, #root { min-height: 100%; }
body { background: #030712; }
.site-shell { background: transparent; overflow: clip visible; }
.home-view, .studio-view, .games-page, .spinner-page, .info-page, .final-banner-page, .saved-view, .advance-view { position: relative; z-index: 2; }

/* Persistent animated arena */
.cinematic-backdrop { display: contents; pointer-events: none; }
.arena-backdrop-image,
.arena-depth,
.arena-light,
.arena-laser,
.crowd-motion-layer,
.arena-particles,
.rain-glass,
.glass-vignette { position: fixed; inset: 0; pointer-events: none; }
.arena-backdrop-image {
  z-index: -10;
  background-image: url('/visuals/arena-cinematic.webp');
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: saturate(1.18) contrast(1.08);
  opacity: .92;
  animation: arenaCamera 22s ease-in-out infinite alternate;
}
.arena-depth {
  z-index: -9;
  background:
    radial-gradient(circle at 51% 37%, rgba(33, 79, 182, .12), transparent 33%),
    radial-gradient(circle at 15% 54%, rgba(45, 130, 255, .18), transparent 24%),
    radial-gradient(circle at 86% 52%, rgba(194, 46, 169, .16), transparent 28%),
    linear-gradient(180deg, rgba(2, 7, 17, .18) 0%, rgba(2, 7, 17, .38) 52%, rgba(2, 7, 17, .80) 100%);
  backdrop-filter: blur(2px);
}
.arena-light { z-index: -8; opacity: .45; filter: blur(30px); mix-blend-mode: screen; }
.light-left { left: -18%; right: auto; width: 42%; background: conic-gradient(from 230deg at 50% 0%, transparent 0 20%, rgba(33, 113, 255, .5) 30%, transparent 48%); animation: stageSweepLeft 9s ease-in-out infinite alternate; }
.light-right { left: auto; right: -14%; width: 40%; background: conic-gradient(from 130deg at 50% 0%, transparent 0 20%, rgba(220, 53, 181, .42) 31%, transparent 49%); animation: stageSweepRight 10.5s ease-in-out infinite alternate; }
.light-center { left: 30%; right: 30%; background: radial-gradient(ellipse at 50% 20%, rgba(91, 119, 255, .24), transparent 58%); animation: centerGlow 5.6s ease-in-out infinite alternate; }
.arena-laser { z-index: -7; height: 1px; inset: auto; width: 60vw; opacity: .32; transform-origin: left center; filter: drop-shadow(0 0 5px currentColor); }
.laser-a { left: 3vw; top: 37vh; color: #34caff; background: linear-gradient(90deg, transparent, currentColor, transparent); transform: rotate(-5deg); animation: laserSweepA 7s ease-in-out infinite alternate; }
.laser-b { right: -5vw; top: 31vh; color: #e84ca3; background: linear-gradient(90deg, transparent, currentColor, transparent); transform: rotate(4deg); animation: laserSweepB 8s ease-in-out infinite alternate; }
.laser-c { left: 22vw; top: 67vh; color: #8e71ff; background: linear-gradient(90deg, transparent, currentColor, transparent); transform: rotate(1deg); animation: laserSweepC 11s ease-in-out infinite alternate; }

/* Moving people: deliberately dark silhouettes so they add life, not distraction. */
.crowd-motion-layer { z-index: -6; overflow: hidden; top: 56%; opacity: .72; mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 100%); }
.crowd-person {
  --person-w: calc(19px * var(--scale));
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--person-w);
  height: calc(68px * var(--scale));
  border-radius: 46% 46% 18% 18%;
  background: linear-gradient(180deg, rgba(7, 10, 21, .93), rgba(1, 3, 8, .98));
  filter: drop-shadow(0 0 12px rgba(28, 69, 147, .23));
  transform-origin: 50% 100%;
  animation: crowdWalk var(--duration) var(--delay) ease-in-out infinite alternate;
}
.crowd-person:before { content: ""; position: absolute; width: calc(16px * var(--scale)); height: calc(16px * var(--scale)); border-radius: 50%; left: 50%; top: calc(-11px * var(--scale)); transform: translateX(-50%); background: #050812; box-shadow: 0 1px 0 rgba(126, 150, 255, .08); }
.crowd-person:after { content: ""; position: absolute; left: 50%; bottom: calc(-16px * var(--scale)); width: calc(28px * var(--scale)); height: calc(22px * var(--scale)); transform: translateX(-50%); background: linear-gradient(90deg, transparent 0 22%, #03050a 22% 40%, transparent 40% 60%, #03050a 60% 78%, transparent 78%); }

.arena-particles { z-index: -5; overflow: hidden; opacity: .52; }
.arena-particles i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #81dfff; box-shadow: 0 0 9px currentColor; animation: particleLift 9s linear infinite; }
.arena-particles i:nth-child(3n) { color: #be70ff; background: currentColor; }
.arena-particles i:nth-child(4n) { color: #ff6b9d; background: currentColor; }
.arena-particles i:nth-child(1){left:5%;top:78%;animation-delay:-1s}.arena-particles i:nth-child(2){left:12%;top:64%;animation-delay:-7s}.arena-particles i:nth-child(3){left:18%;top:86%;animation-delay:-3s}.arena-particles i:nth-child(4){left:25%;top:72%;animation-delay:-5s}.arena-particles i:nth-child(5){left:31%;top:90%;animation-delay:-8s}.arena-particles i:nth-child(6){left:37%;top:69%;animation-delay:-2s}.arena-particles i:nth-child(7){left:43%;top:82%;animation-delay:-6s}.arena-particles i:nth-child(8){left:48%;top:62%;animation-delay:-4s}.arena-particles i:nth-child(9){left:53%;top:88%;animation-delay:-7.5s}.arena-particles i:nth-child(10){left:59%;top:74%;animation-delay:-1.8s}.arena-particles i:nth-child(11){left:64%;top:92%;animation-delay:-5.2s}.arena-particles i:nth-child(12){left:69%;top:67%;animation-delay:-8.2s}.arena-particles i:nth-child(13){left:73%;top:83%;animation-delay:-3.4s}.arena-particles i:nth-child(14){left:78%;top:73%;animation-delay:-6.4s}.arena-particles i:nth-child(15){left:83%;top:89%;animation-delay:-2.6s}.arena-particles i:nth-child(16){left:88%;top:65%;animation-delay:-4.8s}.arena-particles i:nth-child(17){left:93%;top:84%;animation-delay:-7.2s}.arena-particles i:nth-child(18){left:98%;top:70%;animation-delay:-1.4s}.arena-particles i:nth-child(19){left:7%;top:52%;animation-delay:-5.8s}.arena-particles i:nth-child(20){left:55%;top:54%;animation-delay:-3.8s}.arena-particles i:nth-child(21){left:77%;top:51%;animation-delay:-8.6s}.arena-particles i:nth-child(22){left:34%;top:57%;animation-delay:-2.2s}

/* Foreground rain-on-glass layer. It stays above pages but below header/modals. */
.rain-glass { z-index: 52; overflow: hidden; opacity: .94; }
.rain-glass:before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.22) 0 1px, transparent 1.8px),
    radial-gradient(ellipse at 72% 28%, rgba(148,210,255,.16) 0 1px, transparent 1.8px),
    radial-gradient(ellipse at 42% 70%, rgba(255,255,255,.13) 0 1px, transparent 2px);
  background-size: 83px 111px, 127px 149px, 171px 203px;
  opacity: .48;
  animation: rainMicroShift 16s linear infinite;
}
.rain-drop {
  position: absolute;
  left: var(--x);
  top: -18vh;
  width: var(--size);
  height: var(--height);
  border-radius: 999px 999px 70% 70%;
  opacity: var(--opacity);
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(140,207,255,.50) 15%, rgba(72,131,190,.16) 72%, transparent 100%);
  box-shadow: inset 1px 0 rgba(255,255,255,.48), 0 0 5px rgba(97,176,255,.22);
  filter: blur(.15px);
  animation: rainSlide var(--duration) var(--delay) cubic-bezier(.25,.05,.55,1) infinite;
}
.rain-drop:before { content:""; position:absolute; left:50%; top:-3px; width:calc(var(--size) + 3px); height:calc(var(--size) + 3px); transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff 0 10%,rgba(184,224,255,.63) 16%,rgba(91,148,201,.22) 52%,transparent 70%); box-shadow: 0 0 4px rgba(143,205,255,.18); }
.glass-vignette { z-index: 50; background: radial-gradient(ellipse at center, transparent 48%, rgba(1,4,11,.18) 79%, rgba(1,4,11,.46) 100%); }

/* Top navigation matches the approved mockup. */
.topbar {
  height: 86px;
  padding-left: max(28px, calc((100vw - 1320px) / 2));
  padding-right: max(28px, calc((100vw - 1320px) / 2));
  border-bottom-color: rgba(129, 157, 255, .12);
  background: linear-gradient(180deg, rgba(2,7,17,.93), rgba(3,8,20,.68));
  backdrop-filter: blur(24px) saturate(155%);
  box-shadow: 0 15px 50px rgba(0,0,0,.18);
}
.brand { font-size: 25px; }
.brand-mark { width: 39px; height: 39px; border-radius: 11px; background: linear-gradient(150deg,#2ce3ff,#4b7cff 52%,#8b53ff); box-shadow: 0 0 28px rgba(45,142,255,.28); transform: skewX(-7deg); }
.brand-mark i { background: rgba(2,8,22,.86); height: 3px; transform: skewX(7deg); }
.nav-links { gap: clamp(18px,2vw,34px); }
.nav-links a, .nav-links button { color: #c2cbda; font-size: 12px; font-weight: 780; }
.nav-links a span, .nav-links button span { opacity: .78; }
.nav-links a:hover, .nav-links button:hover { color:#fff; text-shadow:0 0 18px rgba(96,177,255,.35); }
.language-switch { background: rgba(8,14,29,.68); border-color: rgba(126,151,226,.22); border-radius: 12px; }
.login-link { min-height: 38px; border:1px solid rgba(126,151,226,.19); border-radius:12px; padding:0 13px; background:rgba(7,13,27,.48); }
.account-trigger { box-shadow: 0 0 18px rgba(45,199,228,.10); }

/* Hero */
.cinematic-home { padding-bottom: 1px; }
.cinematic-hero {
  max-width: 1320px;
  min-height: 720px;
  grid-template-columns: .88fr 1.12fr;
  gap: 52px;
  padding: 74px 0 86px;
}
.cinematic-hero:before { content:""; position:absolute; inset:8% -8% -4%; z-index:-1; background:radial-gradient(circle at 25% 36%,rgba(31,117,255,.15),transparent 26%),radial-gradient(circle at 78% 43%,rgba(164,52,208,.12),transparent 31%); filter:blur(20px); }
.cinematic-hero .hero-copy { max-width: 590px; }
.cinematic-hero .eyebrow { color:#8fc9dd; font-size:8px; letter-spacing:2.4px; text-shadow:0 0 12px rgba(80,213,255,.20); }
.cinematic-hero h1 { margin: 25px 0 24px; font-size: clamp(50px,5vw,76px); line-height:.98; letter-spacing:-4.5px; max-width:650px; }
.cinematic-hero h1 > span { display:block; }
.cinematic-hero h1 em { display:inline-block; margin-top:5px; background:linear-gradient(96deg,#42d8ff 0%,#5eb7ff 29%,#886dff 61%,#ec5a9d 100%); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 18px rgba(74,142,255,.13)); }
.cinematic-hero .hero-copy > p { max-width:560px; color:#abb7c8; font-size:13px; line-height:1.8; text-shadow:0 2px 12px rgba(0,0,0,.55); }
.cinematic-hero .hero-actions { margin-top:31px; gap:13px; }
.cinematic-hero .hero-button { min-height:58px; padding:0 24px; color:#fff; border:1px solid rgba(148,220,255,.38); background:linear-gradient(110deg,#36c9ff,#397dff 55%,#7b5fff); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 10px 30px rgba(39,126,255,.29),0 0 34px rgba(49,198,255,.18); }
.cinematic-secondary { min-height:58px; padding:0 22px; border:1px solid rgba(143,155,229,.25); border-radius:12px; background:rgba(7,13,29,.62); backdrop-filter:blur(14px); color:#e8edf7; display:inline-flex; align-items:center; gap:10px; font-size:10px; font-weight:900; cursor:pointer; transition:.22s ease; }
.cinematic-secondary:hover { transform:translateY(-2px); border-color:rgba(196,113,255,.45); background:rgba(22,19,48,.72); box-shadow:0 12px 35px rgba(65,37,127,.18); }
.cinematic-secondary > span { color:#de69be; }
.hero-benefits { display:flex; align-items:center; gap:24px; margin-top:36px; }
.hero-benefits > span { min-width:0; display:grid; grid-template-columns:25px auto; grid-template-rows:auto auto; column-gap:8px; }
.hero-benefits .benefit-icon { grid-row:1 / 3; width:25px; height:25px; border-radius:8px; display:grid; place-items:center; font-style:normal; font-size:14px; }
.hero-benefits b { font-size:9px; color:#edf3fb; line-height:1.2; }
.hero-benefits small { margin-top:3px; color:#7f90a6; font-size:7px; white-space:nowrap; }
.benefit-fast { color:#ffd15c; background:rgba(255,188,58,.08); }.benefit-safe { color:#55e6e7; background:rgba(74,225,225,.08); }.benefit-modern { color:#d673ff; background:rgba(178,77,255,.08); }

/* Hero bracket glass card */
.premium-bracket-card {
  width:min(100%, 685px);
  height:465px;
  padding:23px 26px 20px;
  border-radius:26px;
  border:1px solid rgba(108,145,255,.34);
  background:
    linear-gradient(145deg,rgba(9,20,48,.82),rgba(10,9,31,.75)),
    radial-gradient(circle at 12% 15%,rgba(54,184,255,.18),transparent 36%),
    radial-gradient(circle at 94% 65%,rgba(236,72,158,.15),transparent 34%);
  box-shadow: 0 35px 100px rgba(0,0,0,.40), inset 0 1px rgba(255,255,255,.08), -14px 0 50px rgba(41,117,255,.08), 17px 0 50px rgba(221,61,159,.07);
  backdrop-filter: blur(18px) saturate(135%);
  animation: premiumCardFloat 7s ease-in-out infinite;
  transform: perspective(1200px) rotateY(-1.8deg) rotateX(.6deg);
}
.premium-bracket-card:after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(120deg,#45d9ff 0%,transparent 25%,transparent 69%,#e954b1 100%); opacity:.55; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.bracket-glass-rain { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; opacity:.7; }
.bracket-glass-rain i { position:absolute; top:-20%; width:2px; height:60px; border-radius:999px; background:linear-gradient(transparent,rgba(199,231,255,.46),transparent); animation:cardRain 5.8s linear infinite; }
.bracket-glass-rain i:nth-child(1){left:8%;animation-delay:-1.1s}.bracket-glass-rain i:nth-child(2){left:24%;animation-delay:-4s;height:95px}.bracket-glass-rain i:nth-child(3){left:43%;animation-delay:-2.2s;height:52px}.bracket-glass-rain i:nth-child(4){left:61%;animation-delay:-5.1s;height:76px}.bracket-glass-rain i:nth-child(5){left:78%;animation-delay:-3.4s;height:104px}.bracket-glass-rain i:nth-child(6){left:91%;animation-delay:-.4s;height:66px}
.arena-card-top { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.arena-card-top > div { display:flex; flex-direction:column; gap:4px; }
.arena-card-top span { color:#f2f6ff; font-size:12px; font-weight:950; letter-spacing:.1px; }
.arena-card-top small { color:#7f90ae; font-size:7px; }
.arena-share { padding:7px 10px; border:1px solid rgba(142,165,255,.20); border-radius:8px; background:rgba(8,14,31,.50); color:#aebbd1 !important; font-size:7px !important; }
.arena-card-tabs { position:relative; z-index:2; margin:12px auto 0; width:190px; padding:3px; display:grid; grid-template-columns:1fr 1fr; gap:2px; border:1px solid rgba(130,153,219,.12); border-radius:8px; background:rgba(7,12,27,.55); }
.arena-card-tabs span { padding:5px 8px; border-radius:5px; color:#71819d; font-size:7px; text-align:center; font-weight:850; }
.arena-card-tabs .active { color:#d9f8ff; background:linear-gradient(110deg,rgba(37,172,255,.46),rgba(56,112,245,.32)); box-shadow:0 0 18px rgba(48,161,255,.16); }
.cinematic-preview { height:310px; grid-template-columns:1fr 72px 132px 72px 1fr; padding-top:7px; }
.cinematic-preview .preview-side { height:258px; }
.cinematic-preview .preview-side span { height:31px; border-color:rgba(111,139,190,.25); background:rgba(7,16,35,.78); color:#dbe6f7; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.cinematic-preview .preview-left span { border-left-color:#32d7ff; }.cinematic-preview .preview-right span { border-right-color:#ef5b9d; }
.cinematic-preview .preview-branch:before,.cinematic-preview .preview-branch:after,.cinematic-preview .preview-branch i { border-color:#3e7fc9; background:#3e7fc9; filter:drop-shadow(0 0 5px rgba(61,143,255,.45)); }
.cinematic-preview .right-branch:before,.cinematic-preview .right-branch:after,.cinematic-preview .right-branch i { border-color:#bc477f; background:#bc477f; filter:drop-shadow(0 0 5px rgba(233,78,151,.34)); }
.cinematic-final { height:158px; border-color:rgba(128,111,255,.46); background:linear-gradient(160deg,rgba(14,41,74,.90),rgba(37,13,49,.90)); box-shadow:0 0 35px rgba(78,104,255,.10), inset 0 0 30px rgba(255,74,158,.04); }
.cinematic-final strong { background:linear-gradient(145deg,#ffd95b,#ff8c42); color:#411b00; box-shadow:0 0 27px rgba(255,166,55,.22); }
.cinematic-final em { color:#788ca8; font-size:6.5px; font-style:normal; }
.arena-live-strip { position:absolute; left:26px; right:26px; bottom:16px; min-height:34px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid rgba(119,148,215,.14); border-radius:9px; background:rgba(5,12,27,.67); backdrop-filter:blur(12px); color:#788ba8; }
.arena-live-strip span { display:flex; align-items:center; gap:6px; font-size:6.5px; font-weight:900; letter-spacing:.7px; }.arena-live-strip span i { width:5px;height:5px;border-radius:50%;background:#42e8dc;box-shadow:0 0 10px #42e8dc;animation:blink 1.6s ease-in-out infinite }.arena-live-strip b{color:#9af7ef;font-size:11px}.arena-live-strip small{font-size:6px}.arena-live-strip em{margin-left:auto;color:#667c9c;font-size:6px;font-style:normal;letter-spacing:1px;text-transform:uppercase}
.floating-card { position:absolute; z-index:5; width:137px; padding:13px; border:1px solid rgba(127,153,229,.20); border-radius:13px; background:rgba(8,15,34,.78); backdrop-filter:blur(17px); box-shadow:0 15px 40px rgba(0,0,0,.28); display:flex; flex-direction:column; gap:4px; }
.floating-card b { font-size:15px; color:#5fe1ff; }.floating-card span{font-size:8px;font-weight:900;color:#edf4ff}.floating-card small{color:#72839f;font-size:6px;line-height:1.45}.fc-fast{left:-38px;top:100px;animation:floatingPanel 5.8s ease-in-out infinite}.fc-final{right:-42px;bottom:82px;animation:floatingPanel 6.4s -2.1s ease-in-out infinite}.fc-final b{color:#ee62ae}

/* Approved feature deck */
.home-feature-section { width:min(1320px,calc(100% - 44px)); margin:0 auto; padding:28px 0 84px; }
.feature-section-head { max-width:650px; margin-bottom:24px; }
.feature-section-head h2 { margin:9px 0 0; font-size:clamp(27px,3vw,40px); letter-spacing:-1.6px; }
.home-feature-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.home-feature-card { position:relative; min-height:220px; padding:22px 20px 20px; overflow:hidden; border:1px solid rgba(123,150,213,.17); border-radius:17px; background:linear-gradient(150deg,rgba(9,18,38,.84),rgba(5,11,24,.72)); backdrop-filter:blur(16px) saturate(135%); color:#eef4ff; text-align:left; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.03),0 18px 45px rgba(0,0,0,.15); transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease; }
.home-feature-card:before { content:""; position:absolute; inset:auto -50px -80px auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,var(--feature-glow),transparent 66%); opacity:.32; transition:.3s ease; }
.home-feature-card:hover { transform:translateY(-7px); border-color:var(--feature-border); box-shadow:0 25px 60px rgba(0,0,0,.27),0 0 32px color-mix(in srgb,var(--feature-glow) 22%,transparent); }
.home-feature-card:hover:before { transform:scale(1.2); opacity:.48; }
.home-feature-card .feature-icon { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--feature-bg); color:var(--feature-color); font-size:18px; font-weight:950; box-shadow:0 0 22px color-mix(in srgb,var(--feature-color) 16%,transparent); }
.home-feature-card h3 { position:relative; margin:24px 0 9px; font-size:14px; letter-spacing:-.3px; }
.home-feature-card p { position:relative; margin:0; color:#8a9ab1; font-size:9px; line-height:1.65; }
.home-feature-card > i { position:absolute; left:20px; bottom:17px; color:var(--feature-color); font-style:normal; font-size:17px; transition:transform .2s ease; }.home-feature-card:hover>i{transform:translateX(5px)}
.feature-create{--feature-glow:#319aff;--feature-border:rgba(64,173,255,.38);--feature-bg:rgba(46,151,255,.17);--feature-color:#59c8ff}.feature-banner{--feature-glow:#ec4e7f;--feature-border:rgba(236,78,127,.35);--feature-bg:rgba(236,78,127,.14);--feature-color:#ff6f94}.feature-themes{--feature-glow:#925dff;--feature-border:rgba(146,93,255,.36);--feature-bg:rgba(146,93,255,.15);--feature-color:#ad82ff}.feature-games{--feature-glow:#31d8e7;--feature-border:rgba(49,216,231,.35);--feature-bg:rgba(49,216,231,.13);--feature-color:#53e5ef}.feature-saved{--feature-glow:#f4ad4b;--feature-border:rgba(244,173,75,.32);--feature-bg:rgba(244,173,75,.13);--feature-color:#ffc365}

/* Existing lower homepage sections, now matching the same glass/rain visual language. */
.home-section { width:min(1320px,calc(100% - 44px)); max-width:none; border-top:1px solid rgba(117,148,225,.12); }
.section-kicker { color:#67cfe9; text-shadow:0 0 12px rgba(66,191,238,.12); }
.section-copy p { color:#8d9cb1; }
.showcase-card,.limit-card,.how-grid article { border-color:rgba(126,151,215,.16); background:linear-gradient(150deg,rgba(8,17,36,.78),rgba(5,11,23,.68)); backdrop-filter:blur(15px); box-shadow:inset 0 1px rgba(255,255,255,.025),0 18px 45px rgba(0,0,0,.12); }
.showcase-card:hover,.how-grid article:hover { border-color:rgba(102,194,255,.30); box-shadow:0 22px 60px rgba(0,0,0,.24),0 0 25px rgba(70,123,255,.06); }
.limit-card.featured { border-color:rgba(80,206,218,.27); background:linear-gradient(145deg,rgba(10,36,51,.82),rgba(12,14,35,.76)); }
.limit-row { border-color:rgba(125,149,208,.15); background:rgba(4,10,23,.36); }.limit-row span{border-color:rgba(125,149,208,.15)}

/* Scroll-triggered count-up stats */
.growth-section { width:min(1320px,calc(100% - 44px)); margin:0 auto; padding:82px 0 96px; border-top:1px solid rgba(117,148,225,.12); }
.growth-heading { max-width:650px; margin-bottom:28px; }.growth-heading h2{margin:10px 0 0;font-size:clamp(29px,3.3vw,44px);letter-spacing:-1.8px}
.growth-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(125,151,222,.19); border-radius:18px; overflow:hidden; background:linear-gradient(100deg,rgba(9,20,45,.79),rgba(11,10,34,.72)); backdrop-filter:blur(18px); box-shadow:0 20px 65px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.035); }
.growth-stat { min-height:116px; display:flex; align-items:center; justify-content:center; gap:16px; position:relative; }
.growth-stat:not(:last-child):after{content:"";position:absolute;right:0;top:24%;bottom:24%;width:1px;background:linear-gradient(transparent,rgba(127,155,229,.25),transparent)}
.growth-stat>span{width:47px;height:47px;border-radius:14px;display:grid;place-items:center;font-size:23px;color:#9a7cff;background:rgba(131,92,255,.11);box-shadow:0 0 25px rgba(130,80,255,.09)}.growth-stat:nth-child(2)>span{color:#5b9cff;background:rgba(60,111,255,.11)}.growth-stat:nth-child(3)>span{color:#d066ff;background:rgba(176,73,255,.11)}.growth-stat:nth-child(4)>span{color:#4fe1e5;background:rgba(61,215,224,.10)}
.growth-stat>div{display:flex;flex-direction:column;gap:4px}.growth-stat b{font-size:26px;line-height:1;font-weight:950;letter-spacing:-1px;color:#f4f7ff;font-variant-numeric:tabular-nums}.growth-stat small{font-size:8px;color:#8596af}

/* Shared glass styling on non-home pages. All existing buttons/logic remain untouched. */
.studio-sidebar { border-right-color:rgba(119,149,214,.13); background:linear-gradient(180deg,rgba(6,13,29,.83),rgba(4,9,21,.69)); backdrop-filter:blur(20px); }
.wizard-panel,.final-builder-card,.final-banner-result,.advance-panel,.saved-card,.info-card,.info-tabs,.contact-form-card { border-color:rgba(123,153,220,.17) !important; background:linear-gradient(150deg,rgba(8,18,39,.84),rgba(5,11,25,.75)) !important; backdrop-filter:blur(20px) saturate(130%); box-shadow:0 24px 75px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.03); }
.info-page,.final-banner-page,.games-page,.spinner-page { background:transparent !important; }
.info-hero h1,.final-banner-head h1,.games-head h1,.spinner-page-head h1 { text-shadow:0 8px 30px rgba(0,0,0,.38); }
.games-aurora,.spinner-aurora { opacity:.50; }
.tourna-game-card,.game-arena-shell,.game-lock-card,.spinner-stage,.spinner-step-card,.spinner-winner-card { backdrop-filter:blur(18px) saturate(130%); border-color:rgba(116,157,219,.18); box-shadow:0 25px 75px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.035); }
.tourna-game-card { background:linear-gradient(150deg,rgba(8,22,43,.82),rgba(7,12,28,.72)); }
.game-arena-shell,.game-lock-card { background:linear-gradient(150deg,rgba(7,22,40,.87),rgba(6,12,28,.80)); }
.spinner-stage { background:linear-gradient(150deg,rgba(7,20,36,.86),rgba(5,11,25,.78)); }
.account-menu,.auth-modal,.package-modal { backdrop-filter:blur(24px) saturate(150%); }
.site-footer { border-top-color:rgba(111,152,228,.16); background:linear-gradient(180deg,transparent,rgba(3,7,17,.42)); padding-left:12px; padding-right:12px; }

/* Animations */
@keyframes arenaCamera { 0%{transform:scale(1.06) translate3d(-.5%,0,0)} 100%{transform:scale(1.09) translate3d(.7%,-.5%,0)} }
@keyframes stageSweepLeft { 0%{transform:translateX(-7%) rotate(-3deg);opacity:.24} 100%{transform:translateX(16%) rotate(6deg);opacity:.56} }
@keyframes stageSweepRight { 0%{transform:translateX(8%) rotate(4deg);opacity:.24} 100%{transform:translateX(-17%) rotate(-5deg);opacity:.53} }
@keyframes centerGlow { from{opacity:.3;transform:scale(.92)} to{opacity:.58;transform:scale(1.08)} }
@keyframes laserSweepA { from{transform:rotate(-7deg) translateX(-8%);opacity:.14} to{transform:rotate(1deg) translateX(12%);opacity:.45} }
@keyframes laserSweepB { from{transform:rotate(7deg) translateX(9%);opacity:.13} to{transform:rotate(-2deg) translateX(-12%);opacity:.40} }
@keyframes laserSweepC { from{transform:rotate(-2deg) translateX(-4%);opacity:.08} to{transform:rotate(3deg) translateX(8%);opacity:.28} }
@keyframes crowdWalk { 0%{transform:translateX(calc(-14px * var(--direction))) scale(var(--scale));opacity:.55} 45%{transform:translateX(0) scale(var(--scale));opacity:.84} 100%{transform:translateX(calc(20px * var(--direction))) scale(var(--scale));opacity:.60} }
@keyframes particleLift { 0%{transform:translate3d(0,30px,0) scale(.7);opacity:0} 20%{opacity:.65} 100%{transform:translate3d(14px,-230px,0) scale(1.2);opacity:0} }
@keyframes rainSlide { 0%{transform:translate3d(0,-18vh,0) scaleY(.72);opacity:0} 8%{opacity:var(--opacity)} 72%{opacity:var(--opacity)} 100%{transform:translate3d(var(--drift),125vh,0) scaleY(1.12);opacity:0} }
@keyframes rainMicroShift { to{background-position:17px 111px,-23px 149px,28px 203px} }
@keyframes premiumCardFloat { 0%,100%{transform:perspective(1200px) rotateY(-1.8deg) rotateX(.6deg) translateY(0)} 50%{transform:perspective(1200px) rotateY(-.5deg) rotateX(0deg) translateY(-8px)} }
@keyframes cardRain { from{transform:translateY(-30px);opacity:0} 15%{opacity:.65} to{transform:translateY(550px);opacity:0} }
@keyframes floatingPanel { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

@media (max-width: 1180px) {
  .topbar { padding-left:24px; padding-right:24px; }.nav-links{gap:16px}.nav-links a,.nav-links button{font-size:10px}
  .cinematic-hero{width:calc(100% - 44px);grid-template-columns:.92fr 1.08fr;gap:28px}.premium-bracket-card{height:430px}.floating-card{display:none}.cinematic-preview{grid-template-columns:1fr 52px 115px 52px 1fr}.cinematic-hero h1{font-size:58px}
  .home-feature-grid{grid-template-columns:repeat(3,1fr)}.home-feature-card:nth-child(4),.home-feature-card:nth-child(5){min-height:190px}.growth-strip{grid-template-columns:repeat(2,1fr)}.growth-stat:nth-child(2):after{display:none}
}
@media (max-width: 900px) {
  .rain-glass{opacity:.68}.crowd-motion-layer{opacity:.45}.arena-backdrop-image{filter:saturate(1.12) contrast(1.06) brightness(.86)}
  .topbar{height:72px}.brand{font-size:20px}.brand-mark{width:34px;height:34px}.nav-links{display:none}
  .cinematic-hero{grid-template-columns:1fr;padding:56px 0 62px;min-height:auto}.cinematic-hero .hero-copy{max-width:680px}.cinematic-hero h1{font-size:clamp(48px,9vw,70px)}.premium-bracket-card{justify-self:center;width:min(100%,680px)}
  .home-feature-grid{grid-template-columns:repeat(2,1fr)}.showcase-grid{grid-template-columns:repeat(2,1fr)}.split-section{grid-template-columns:1fr;gap:34px}.limit-cards{max-width:700px}.hero-benefits{flex-wrap:wrap}
}
@media (max-width: 620px) {
  .rain-glass{opacity:.48}.arena-backdrop-image{transform:scale(1.16);background-position:center top}.arena-depth{background:linear-gradient(180deg,rgba(2,7,17,.34),rgba(2,7,17,.72))}.crowd-motion-layer{display:none}.arena-laser{opacity:.18}
  .topbar{padding:0 13px}.brand-word{font-size:18px}.auth-actions .primary-button.small{display:none}.login-link{font-size:8px}.language-switch button{padding:5px;font-size:7px}
  .cinematic-hero{width:calc(100% - 24px);padding-top:42px}.cinematic-hero h1{font-size:46px;letter-spacing:-3px}.cinematic-hero .hero-copy>p{font-size:11px}.cinematic-hero .hero-actions{flex-direction:column;align-items:stretch}.cinematic-hero .hero-button,.cinematic-secondary{width:100%;justify-content:center}.hero-benefits{gap:14px}.hero-benefits>span{min-width:calc(50% - 8px)}
  .premium-bracket-card{height:360px;padding:17px 14px;border-radius:20px;transform:none}.arena-card-top span{font-size:10px}.arena-card-tabs{margin-top:8px}.cinematic-preview{height:238px;grid-template-columns:1fr 24px 88px 24px 1fr}.cinematic-preview .preview-side{height:205px}.cinematic-preview .preview-side span{height:25px;font-size:6px;padding:0 5px}.cinematic-preview .preview-branch{height:150px}.cinematic-preview .preview-branch:before,.cinematic-preview .preview-branch:after{width:25px;height:40px}.cinematic-final{height:115px;gap:5px}.cinematic-final strong{width:32px;height:32px}.arena-live-strip{left:14px;right:14px;bottom:10px}.arena-live-strip em{display:none}
  .home-feature-section,.home-section,.growth-section{width:calc(100% - 24px)}.home-feature-grid{grid-template-columns:1fr}.home-feature-card{min-height:175px}.showcase-grid{grid-template-columns:1fr}.limit-cards{grid-template-columns:1fr}.growth-strip{grid-template-columns:1fr}.growth-stat{min-height:96px}.growth-stat:not(:last-child):after{top:auto;bottom:0;left:12%;right:12%;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(127,155,229,.25),transparent)}.how-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce) {
  .arena-backdrop-image,.arena-light,.arena-laser,.crowd-person,.arena-particles i,.rain-drop,.rain-glass:before,.premium-bracket-card,.bracket-glass-rain i,.floating-card { animation:none !important; }
  .rain-glass{opacity:.34}
}
/* Cascade safety: keep the global navigation sticky above the rain layer. */
.topbar { position: sticky; top: 0; z-index: 80; }

/* ================= V6 — REAL RAIN / LIVE ARENA / LARGE UI ================= */
/* Keep every existing click/backend flow intact; this block only overrides visuals. */

.site-shell { isolation:isolate; }
.home-view, .studio-view, .games-page, .spinner-page, .info-page, .final-banner-page, .saved-view, .advance-view { z-index:10; }

/* A visible stadium scene replaces the abstract V5 backdrop. Two closely related
   scenes cross-fade + pan slowly so the backdrop feels like a 10–12s video loop. */
.arena-backdrop-image {
  z-index:0;
  overflow:hidden;
  opacity:.82;
  background-image:
    linear-gradient(180deg,rgba(1,5,15,.26),rgba(1,6,16,.40) 48%,rgba(1,5,12,.72) 100%),
    url('/game-art/champions-night.png');
  background-size:cover;
  background-position:center 47%;
  filter:saturate(1.22) contrast(1.08) brightness(.80);
  transform:scale(1.035);
  animation:arenaCameraV6 18s ease-in-out infinite alternate;
}
.arena-backdrop-image::after {
  content:"";
  position:absolute;
  inset:-2%;
  background-image:
    linear-gradient(180deg,rgba(0,6,19,.31),rgba(0,5,16,.43) 50%,rgba(0,4,11,.76) 100%),
    url('/game-art/football-duel-v3.png');
  background-size:cover;
  background-position:center 48%;
  opacity:0;
  transform:scale(1.045) translate3d(-.4%,0,0);
  filter:saturate(1.17) contrast(1.08) brightness(.77);
  animation:arenaSceneSwap 24s ease-in-out infinite, arenaAltDrift 12s ease-in-out infinite alternate;
}
.arena-depth {
  z-index:1;
  background:
    radial-gradient(ellipse at 50% 19%,rgba(41,95,211,.11),transparent 34%),
    radial-gradient(ellipse at 12% 52%,rgba(31,132,255,.19),transparent 28%),
    radial-gradient(ellipse at 88% 48%,rgba(215,53,167,.17),transparent 28%),
    linear-gradient(180deg,rgba(1,5,15,.05),rgba(2,6,17,.22) 43%,rgba(2,6,15,.57) 100%);
  backdrop-filter:none;
}
.arena-light { z-index:2; opacity:.57; }
.arena-laser { z-index:3; }
.arena-particles { z-index:4; }
.glass-vignette { z-index:5; }

/* Crowd is deliberately more visible than V5. People drift laterally and sway,
   while remaining dark enough not to compete with buttons/text. */
.crowd-motion-layer {
  z-index:4;
  top:50%;
  opacity:.96;
  overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.36) 9%,#000 24%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.36) 9%,#000 24%,#000 100%);
}
.crowd-motion-layer::before {
  content:"";
  position:absolute;
  left:-4%; right:-4%; bottom:-18px; height:155px;
  opacity:.55;
  background:
    radial-gradient(circle at 3% 50%,#050711 0 10px,transparent 11px),
    radial-gradient(circle at 9% 35%,#050711 0 8px,transparent 9px),
    radial-gradient(circle at 15% 54%,#04060e 0 11px,transparent 12px),
    radial-gradient(circle at 23% 38%,#050711 0 9px,transparent 10px),
    radial-gradient(circle at 31% 50%,#03050c 0 10px,transparent 11px),
    radial-gradient(circle at 39% 33%,#050711 0 8px,transparent 9px),
    radial-gradient(circle at 48% 50%,#03050c 0 12px,transparent 13px),
    radial-gradient(circle at 57% 36%,#050711 0 9px,transparent 10px),
    radial-gradient(circle at 66% 51%,#03050c 0 11px,transparent 12px),
    radial-gradient(circle at 74% 35%,#050711 0 8px,transparent 9px),
    radial-gradient(circle at 83% 53%,#03050c 0 11px,transparent 12px),
    radial-gradient(circle at 92% 39%,#050711 0 9px,transparent 10px),
    linear-gradient(180deg,transparent 34%,rgba(1,3,8,.94) 75%,#010207 100%);
  filter:blur(.15px) drop-shadow(0 -8px 25px rgba(37,79,182,.10));
  animation:crowdMassBreathe 7s ease-in-out infinite alternate;
}
.crowd-person {
  --person-w:calc(28px * var(--scale));
  bottom:3px;
  width:var(--person-w);
  height:calc(91px * var(--scale));
  border-radius:44% 44% 16% 16%;
  background:linear-gradient(180deg,rgba(8,11,22,.94),rgba(1,3,8,.99));
  box-shadow:inset 1px 0 rgba(80,127,255,.035),inset -1px 0 rgba(229,74,168,.025);
  filter:drop-shadow(0 -1px 10px rgba(72,115,210,.16));
  animation:crowdWalkV6 var(--duration) var(--delay) ease-in-out infinite alternate;
}
.crowd-person:before {
  width:calc(21px * var(--scale));
  height:calc(21px * var(--scale));
  top:calc(-14px * var(--scale));
  background:radial-gradient(circle at 42% 35%,#0a0d18 0 42%,#03050b 67%);
  box-shadow:-2px -1px 7px rgba(72,127,255,.10),2px 1px 7px rgba(216,75,160,.06);
}
.crowd-person:after {
  bottom:calc(-21px * var(--scale));
  width:calc(37px * var(--scale));
  height:calc(30px * var(--scale));
  background:linear-gradient(90deg,transparent 0 20%,#02040a 20% 42%,transparent 42% 58%,#02040a 58% 80%,transparent 80%);
}

/* -------- True rain-on-glass --------
   V5 used tall bright streaks. V6 uses lens-like beads/teardrops that actually
   slide down the glass; the short wet trail is intentionally subtle. */
.rain-glass {
  z-index:56;
  opacity:1;
  overflow:hidden;
  mix-blend-mode:screen;
}
.rain-glass::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(ellipse 5px 7px at 18% 15%,rgba(255,255,255,.42) 0 10%,rgba(141,204,255,.17) 34%,rgba(20,54,95,.13) 58%,transparent 72%),
    radial-gradient(ellipse 4px 5px at 72% 24%,rgba(255,255,255,.34) 0 12%,rgba(143,205,255,.13) 37%,transparent 72%),
    radial-gradient(ellipse 6px 8px at 42% 70%,rgba(255,255,255,.30) 0 9%,rgba(133,193,244,.13) 35%,rgba(16,44,80,.11) 59%,transparent 73%),
    radial-gradient(ellipse 3px 4px at 83% 62%,rgba(255,255,255,.30) 0 11%,rgba(139,199,244,.12) 37%,transparent 72%);
  background-size:149px 181px,193px 229px,241px 277px,113px 157px;
  background-position:17px 5px,71px 37px,33px 91px,8px 69px;
  opacity:.72;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.20));
  animation:rainBeadsDrift 21s linear infinite;
}
.rain-glass::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 16% 24%,rgba(255,255,255,.11),transparent 1.1%),
    radial-gradient(ellipse at 57% 15%,rgba(255,255,255,.09),transparent 1%),
    radial-gradient(ellipse at 89% 39%,rgba(255,255,255,.08),transparent .9%),
    radial-gradient(ellipse at 36% 83%,rgba(255,255,255,.08),transparent 1%);
  opacity:.62;
  animation:rainRefractionPulse 8s ease-in-out infinite alternate;
}
.rain-drop {
  position:absolute;
  left:var(--x);
  top:-12vh;
  width:var(--size);
  height:calc(var(--size) * 1.28);
  border-radius:48% 52% 58% 42% / 37% 42% 58% 63%;
  opacity:var(--opacity);
  background:
    radial-gradient(circle at 31% 21%,rgba(255,255,255,.92) 0 8%,rgba(226,244,255,.48) 9% 18%,transparent 20%),
    radial-gradient(ellipse at 50% 56%,rgba(154,213,255,.18) 0 41%,rgba(34,82,132,.13) 62%,transparent 75%);
  border:1px solid rgba(206,235,255,.20);
  box-shadow:
    inset -1px -2px 2px rgba(13,44,83,.21),
    inset 1px 1px 1px rgba(255,255,255,.28),
    0 2px 5px rgba(4,12,28,.24);
  backdrop-filter:blur(1.15px) saturate(1.2) brightness(1.07);
  -webkit-backdrop-filter:blur(1.15px) saturate(1.2) brightness(1.07);
  transform-origin:50% 10%;
  animation:glassDropletSlide var(--duration) var(--delay) cubic-bezier(.31,.03,.46,.98) infinite;
}
.rain-drop::after {
  content:"";
  position:absolute;
  left:50%;
  top:72%;
  width:max(1px,calc(var(--size) * .12));
  height:calc(var(--size) * 1.35);
  transform:translateX(-50%) rotate(2deg);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(166,216,255,.17),rgba(124,188,237,.06) 52%,transparent);
  filter:blur(.35px);
  opacity:.42;
}

/* Card-local rain is now beads too, not white vertical streaks. */
.bracket-glass-rain { opacity:.82; }
.bracket-glass-rain i {
  top:-12%;
  width:7px !important;
  height:9px !important;
  border-radius:46% 54% 59% 41% / 39% 42% 58% 61%;
  background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.86) 0 9%,rgba(175,219,255,.25) 22%,rgba(58,105,161,.13) 58%,transparent 73%);
  border:1px solid rgba(201,229,255,.16);
  box-shadow:inset 1px 1px rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.18);
  animation:cardDropletSlide 7.7s linear infinite !important;
}
.bracket-glass-rain i:nth-child(2),.bracket-glass-rain i:nth-child(5){width:10px !important;height:13px !important}

/* Restore the original TournaGrid hero wording while retaining the approved V5 visual language. */
.cinematic-hero {
  max-width:1480px;
  min-height:760px;
  grid-template-columns:.94fr 1.06fr;
  gap:68px;
  padding:76px 38px 92px;
}
.cinematic-hero .hero-copy { max-width:700px; }
.cinematic-hero h1 {
  max-width:760px;
  margin:25px 0 27px;
  font-size:clamp(56px,4.9vw,82px);
  line-height:.98;
  letter-spacing:-4.6px;
}
.cinematic-hero h1 > span { display:inline; }
.cinematic-hero h1 em { display:inline; margin-top:0; }
.cinematic-hero .hero-copy > p { max-width:620px; font-size:15px; line-height:1.78; }
.cinematic-hero .hero-actions { margin-top:35px; gap:16px; }
.cinematic-hero .hero-button,.cinematic-secondary { min-height:64px; padding-left:27px; padding-right:27px; font-size:11px; }
.hero-benefits { gap:30px; margin-top:39px; }
.hero-benefits .benefit-icon { width:31px; height:31px; font-size:16px; }
.hero-benefits b { font-size:10px; }.hero-benefits small{font-size:8px}

/* V5 had .reveal and float animations fighting each other; make the preview visible. */
.premium-bracket-card {
  opacity:1;
  filter:none;
  width:min(100%,735px);
  height:505px;
  padding:27px 29px 22px;
  animation:premiumCardFloat 7s ease-in-out infinite;
}
.cinematic-preview { height:337px; grid-template-columns:1fr 78px 145px 78px 1fr; }
.cinematic-preview .preview-side { height:278px; }
.cinematic-preview .preview-side span { height:34px; padding:0 12px; font-size:9px; }
.cinematic-final { height:172px; }
.arena-card-top span{font-size:13px}.arena-card-top small{font-size:8px}.arena-card-tabs{width:214px;margin-top:14px}.arena-card-tabs span{font-size:8px;padding:6px 9px}.arena-live-strip{left:29px;right:29px;bottom:17px;min-height:39px}.arena-live-strip span{font-size:7px}.arena-live-strip b{font-size:12px}.arena-live-strip small,.arena-live-strip em{font-size:6.5px}

/* Larger feature cards: 3 on first row, 2 wider cards on second row. */
.home-feature-section { width:min(1450px,calc(100% - 48px)); padding:34px 0 92px; }
.feature-section-head { max-width:760px; margin-bottom:30px; }
.feature-section-head h2 { font-size:clamp(31px,3.25vw,46px); }
.home-feature-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:17px; }
.home-feature-card { grid-column:span 2; min-height:258px; padding:27px 25px 24px; border-radius:21px; }
.home-feature-card:nth-child(4),.home-feature-card:nth-child(5) { grid-column:span 3; min-height:245px; }
.home-feature-card .feature-icon { width:50px; height:50px; border-radius:14px; font-size:21px; }
.home-feature-card h3 { margin:28px 0 11px; font-size:18px; }
.home-feature-card p { max-width:92%; font-size:12px; line-height:1.68; }
.home-feature-card > i { left:25px; bottom:20px; font-size:21px; }

.home-section,.growth-section { width:min(1420px,calc(100% - 48px)); }
.growth-stat { min-height:130px; }.growth-stat b{font-size:30px}.growth-stat small{font-size:9px}.growth-stat>span{width:52px;height:52px;font-size:25px}

/* Slightly larger global desktop chrome. */
@media (min-width:1181px) {
  .topbar { height:90px; padding-left:max(32px,calc((100vw - 1450px)/2)); padding-right:max(32px,calc((100vw - 1450px)/2)); }
  .brand { font-size:27px; }.brand-mark{width:43px;height:43px}.nav-links a,.nav-links button{font-size:13px}.language-switch button{font-size:9px;padding:7px 8px}
}

@media (max-width:1180px) {
  .cinematic-hero { max-width:900px; grid-template-columns:1fr; gap:42px; padding-left:32px; padding-right:32px; }
  .cinematic-hero .hero-copy { max-width:760px; }
  .premium-bracket-card { justify-self:center; width:min(100%,760px); }
  .home-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-feature-card,.home-feature-card:nth-child(4),.home-feature-card:nth-child(5){grid-column:auto;min-height:238px}
}
@media (max-width:760px) {
  .cinematic-hero { padding:50px 20px 70px; min-height:auto; }
  .cinematic-hero h1 { font-size:clamp(43px,13vw,62px); letter-spacing:-3px; }
  .cinematic-hero .hero-copy > p { font-size:13px; }
  .cinematic-hero .hero-actions { flex-direction:column; align-items:stretch; }
  .cinematic-hero .hero-button,.cinematic-secondary { width:100%; min-height:58px; }
  .hero-benefits { flex-wrap:wrap; gap:16px 22px; }
  .premium-bracket-card { height:390px; padding:19px 17px; transform:none; animation:none; }
  .cinematic-preview { height:260px; grid-template-columns:1fr 42px 93px 42px 1fr; }.cinematic-preview .preview-side{height:218px}.cinematic-preview .preview-side span{height:28px;font-size:7px;padding:0 7px}.cinematic-final{height:132px}
  .floating-card { display:none; }
  .home-feature-section,.home-section,.growth-section { width:min(100% - 30px,690px); }
  .home-feature-grid { grid-template-columns:1fr; }.home-feature-card,.home-feature-card:nth-child(4),.home-feature-card:nth-child(5){min-height:215px}
  .growth-strip { grid-template-columns:1fr 1fr; }.growth-stat:nth-child(2):after{display:none}
  .crowd-motion-layer { top:58%; opacity:.66; }.crowd-person{height:calc(70px * var(--scale));}
  .rain-glass { opacity:.78; }
}
@media (prefers-reduced-motion:reduce) {
  .arena-backdrop-image,.arena-backdrop-image::after,.crowd-person,.crowd-motion-layer::before,.rain-drop,.rain-glass::before,.rain-glass::after { animation:none !important; }
  .arena-backdrop-image::after { opacity:0; }
}

@keyframes arenaCameraV6 { 0%{transform:scale(1.035) translate3d(-.35%,0,0)} 100%{transform:scale(1.075) translate3d(.7%,-.45%,0)} }
@keyframes arenaSceneSwap { 0%,42%{opacity:0} 48%,88%{opacity:.46} 94%,100%{opacity:0} }
@keyframes arenaAltDrift { from{transform:scale(1.045) translate3d(-.5%,.2%,0)} to{transform:scale(1.09) translate3d(.8%,-.5%,0)} }
@keyframes crowdMassBreathe { from{transform:translate3d(-.2%,2px,0) scaleY(.99);opacity:.47} to{transform:translate3d(.25%,-3px,0) scaleY(1.025);opacity:.64} }
@keyframes crowdWalkV6 { 0%{transform:translate3d(calc(-24px * var(--direction)),2px,0) scale(var(--scale)) rotate(-1deg);opacity:.58} 28%{transform:translate3d(calc(-6px * var(--direction)),-2px,0) scale(var(--scale)) rotate(.6deg);opacity:.88} 58%{transform:translate3d(calc(10px * var(--direction)),1px,0) scale(var(--scale)) rotate(-.4deg);opacity:.78} 100%{transform:translate3d(calc(31px * var(--direction)),-3px,0) scale(var(--scale)) rotate(1deg);opacity:.62} }
@keyframes rainBeadsDrift { from{background-position:17px 5px,71px 37px,33px 91px,8px 69px} to{background-position:23px 91px,65px 159px,41px 227px,13px 177px} }
@keyframes rainRefractionPulse { from{opacity:.34;filter:blur(.2px)} to{opacity:.70;filter:blur(.5px)} }
@keyframes glassDropletSlide { 0%{transform:translate3d(0,-18vh,0) scale(.86);opacity:0} 7%{opacity:var(--opacity)} 38%{transform:translate3d(calc(var(--drift) * .28),34vh,0) scale(1)} 66%{transform:translate3d(calc(var(--drift) * .72),70vh,0) scale(.98,1.08)} 93%{opacity:var(--opacity)} 100%{transform:translate3d(var(--drift),120vh,0) scale(.94,1.13);opacity:0} }
@keyframes cardDropletSlide { 0%{transform:translate3d(0,-25px,0);opacity:0} 10%{opacity:.75} 100%{transform:translate3d(4px,520px,0);opacity:0} }

/* ================= V7 — NO RAIN / FULL ABOUT GUIDE ================= */
/* Rain was removed by product decision. Keep these selectors hidden as a
   cascade-safety fallback in case an old cached component ever renders them. */
.rain-glass,
.rain-drop,
.bracket-glass-rain,
.arena-particles { display: none !important; }

.info-guide-list { gap: 10px; }
.info-guide-list details { background: linear-gradient(145deg,rgba(10,19,35,.93),rgba(6,12,24,.91)); border-color: rgba(102,142,195,.22); }
.info-guide-list details[open] { border-color: rgba(91,225,216,.36); background: linear-gradient(140deg,rgba(11,31,47,.96),rgba(12,18,39,.95)); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.info-guide-list summary { min-height: 72px; }
.info-guide-list summary b { font-size: 12px; color: #e7f1fb; }
.info-guide-list details p { color: #91a6bb; font-size: 10.5px; line-height: 1.85; }
.info-about .info-hero { background: radial-gradient(circle at 82% 12%,rgba(80,119,255,.16),transparent 32%),radial-gradient(circle at 7% 98%,rgba(75,226,211,.10),transparent 30%),linear-gradient(145deg,rgba(10,22,42,.96),rgba(6,12,25,.96)); }
@media (min-width: 900px) {
  .info-about .info-shell { width: min(1180px,100%); }
  .info-guide-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .info-guide-list details { min-width: 0; }
}
@media (max-width: 720px) {
  .info-guide-list summary { min-height: 64px; }
  .info-guide-list summary b { font-size: 11px; }
  .info-guide-list details p { font-size: 10px; line-height: 1.78; }
}