/* TournaGrid V16 — Safe Monetag breaks; V15 visuals preserved unchanged. */
: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; }
}


/* ================= V9 — PERFORMANCE / SMOOTH SCROLL =================
   Keep the approved cinematic look while reducing expensive repaint work.
   The sticky header and glass cards no longer blur the live fixed backdrop on
   every scroll frame. Crowd density is reduced in App.js from 32 to 14.
   ================================================================ */

/* Promote only the large animated layers to compositor surfaces. */
.arena-backdrop-image,
.arena-backdrop-image::after,
.crowd-motion-layer,
.arena-light,
.arena-laser {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
.arena-backdrop-image,
.arena-backdrop-image::after,
.crowd-motion-layer { will-change: transform, opacity; }

/* A sticky 24px backdrop blur was the most expensive operation during scroll. */
.topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(180deg,rgba(2,7,17,.985),rgba(3,8,20,.955)) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.20) !important;
}

/* The arena remains animated, but only one scene moves continuously. */
.arena-backdrop-image {
  filter: none !important;
  opacity: .84 !important;
  animation: arenaCameraV9 34s ease-in-out infinite alternate !important;
}
.arena-backdrop-image::after {
  filter: none !important;
  animation: arenaSceneSwapV9 38s ease-in-out infinite !important;
  opacity: 0;
}
.arena-depth { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.arena-light { filter: blur(18px) !important; opacity: .43 !important; }
.light-center { animation: none !important; opacity: .62; }
.arena-laser { filter: none !important; opacity: .24 !important; }
.laser-c { display: none !important; }

/* Fewer, cheaper crowd silhouettes. Keep motion but remove per-frame shadow filters. */
.crowd-motion-layer { opacity: .78 !important; }
.crowd-motion-layer::before {
  filter: none !important;
  animation: crowdMassBreatheV9 12s ease-in-out infinite alternate !important;
}
.crowd-person {
  filter: none !important;
  box-shadow: none !important;
  animation-duration: calc(var(--duration) * 1.35) !important;
  will-change: transform;
}
.crowd-person:before { box-shadow: none !important; }
.crowd-person:nth-child(n+15) { display:none !important; }

/* Blur-over-fixed-background causes large repaints. Use more opaque glass instead. */
.cinematic-secondary,
.premium-bracket-card,
.arena-live-strip,
.floating-card,
.home-feature-card,
.showcase-card,
.limit-card,
.how-grid article,
.growth-strip,
.studio-sidebar,
.wizard-panel,
.final-builder-card,
.final-banner-result,
.advance-panel,
.saved-card,
.info-card,
.info-tabs,
.contact-form-card,
.tourna-game-card,
.game-arena-shell,
.game-lock-card,
.spinner-stage,
.spinner-step-card,
.spinner-winner-card,
.account-menu,
.auth-modal,
.package-modal,
.admin-sidebar,
.advance-actions,
.modal-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cinematic-secondary { background: rgba(7,13,29,.91) !important; }
.premium-bracket-card {
  background: linear-gradient(145deg,rgba(9,20,48,.96),rgba(10,9,31,.95)) !important;
  animation: none !important;
  transform: perspective(1200px) rotateY(-1deg) rotateX(.35deg);
  box-shadow: 0 24px 65px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.07) !important;
}
.arena-live-strip { background: rgba(5,12,27,.93) !important; }
.floating-card { background: rgba(8,15,34,.95) !important; animation: none !important; }
.home-feature-card,
.showcase-card,
.limit-card,
.how-grid article { background: linear-gradient(150deg,rgba(9,18,38,.95),rgba(5,11,24,.93)) !important; }
.growth-strip { background: linear-gradient(100deg,rgba(9,20,45,.95),rgba(11,10,34,.93)) !important; }
.wizard-panel,.final-builder-card,.final-banner-result,.advance-panel,.saved-card,.info-card,.info-tabs,.contact-form-card,
.tourna-game-card,.game-arena-shell,.game-lock-card,.spinner-stage,.spinner-step-card,.spinner-winner-card {
  background-color: rgba(7,14,28,.95) !important;
}
.account-menu { background: rgba(8,13,22,.99) !important; }
.modal-backdrop { background: rgba(2,5,10,.86) !important; }

/* Remove static blur filters that can trigger extra offscreen surfaces. */
.cinematic-hero:before { filter: none !important; opacity: .9; }
.cinematic-hero h1 em { filter: none !important; }
.cinematic-preview .preview-branch:before,
.cinematic-preview .preview-branch:after,
.cinematic-preview .preview-branch i,
.cinematic-preview .right-branch:before,
.cinematic-preview .right-branch:after,
.cinematic-preview .right-branch i { filter: none !important; }

/* Let Chrome skip painting lower home blocks until they approach the viewport. */
@supports (content-visibility: auto) {
  .home-feature-section,
  .home-section,
  .growth-section,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }
}

/* Smaller screens get a static secondary arena scene and no moving people. */
@media (max-width: 900px) {
  .arena-backdrop-image::after { display:none !important; }
  .crowd-person:nth-child(n+9) { display:none !important; }
  .arena-light { opacity:.28 !important; }
  .laser-b,.laser-c { display:none !important; }
}
@media (max-width: 620px) {
  .crowd-motion-layer { display:none !important; }
  .arena-backdrop-image { animation:none !important; transform:scale(1.08) !important; }
  .arena-light,.arena-laser { animation:none !important; }
}

/* Respect OS battery/accessibility preferences. */
@media (prefers-reduced-motion: reduce) {
  .arena-backdrop-image,.arena-backdrop-image::after,.arena-light,.arena-laser,.crowd-person,.crowd-motion-layer::before { animation:none !important; }
}

@keyframes arenaCameraV9 {
  from { transform:translate3d(-.2%,0,0) scale(1.035); }
  to   { transform:translate3d(.35%,-.2%,0) scale(1.055); }
}
@keyframes arenaSceneSwapV9 {
  0%,46% { opacity:0; }
  55%,86% { opacity:.28; }
  95%,100% { opacity:0; }
}
@keyframes crowdMassBreatheV9 {
  from { transform:translate3d(-.1%,1px,0); opacity:.45; }
  to   { transform:translate3d(.12%,-1px,0); opacity:.55; }
}

/* Pause decorative motion only during active scroll; it resumes after 140ms idle. */
.tg-is-scrolling .arena-backdrop-image,
.tg-is-scrolling .arena-backdrop-image::after,
.tg-is-scrolling .arena-light,
.tg-is-scrolling .arena-laser,
.tg-is-scrolling .crowd-person,
.tg-is-scrolling .crowd-motion-layer::before { animation-play-state: paused !important; }

/* V10 public-share control */
.share-bracket-button {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(86, 205, 226, .34);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(19, 62, 79, .82), rgba(34, 43, 89, .82));
  color: #dffcff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 8px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.share-bracket-button span { font-size: 14px; color: #66e8e2; }
.share-bracket-button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(103, 233, 232, .72); box-shadow: 0 10px 28px rgba(24, 190, 195, .12); }
.share-bracket-button:disabled { cursor: wait; opacity: .72; }
.share-bracket-button.copied {
  color: #dcffe9;
  border-color: rgba(67, 226, 131, .58);
  background: linear-gradient(135deg, rgba(24, 105, 63, .78), rgba(18, 72, 59, .86));
  box-shadow: 0 10px 30px rgba(32, 201, 112, .14);
}
.share-bracket-button.copied span { color: #77f3ab; }
.share-bracket-button.share-error { border-color: rgba(255, 105, 122, .48); color: #ffd8de; background: rgba(92, 28, 43, .72); }
@media (max-width: 760px) {
  .share-bracket-button { width: 100%; min-height: 45px; }
}

/* V11 — saved bracket sharing + clearer two-row action layout */
.saved-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}
.saved-actions > button { width: 100%; min-height: 40px; justify-content: center; }
.saved-share-button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(74, 223, 218, .34);
  border-radius: 10px;
  background: rgba(16, 67, 72, .34);
  color: #8cece7;
  font-size: 9px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: .2s ease;
}
.saved-share-button span { font-size: 13px; color: #69ebe4; }
.saved-share-button:hover:not(:disabled) { transform: translateY(-1px); background: rgba(24, 93, 97, .48); border-color: rgba(105, 237, 230, .62); }
.saved-share-button:disabled { cursor: wait; opacity: .72; }
.saved-share-button.copied { border-color: rgba(83, 230, 142, .62); background: rgba(22, 89, 56, .46); color: #b9ffd3; }
.saved-share-button.copied span { color: #78f0a5; }
.saved-share-button.share-error { border-color: rgba(255, 105, 122, .48); background: rgba(92, 28, 43, .62); color: #ffd8de; }
@media (max-width: 720px) {
  .saved-actions { grid-template-columns: 1fr !important; }
}

.share-download-button { border-color: rgba(98, 208, 214, .38); background: linear-gradient(180deg, rgba(16, 32, 44, .95), rgba(11, 23, 34, .96)); }
.share-download-button .download-icon { color: #69ebe4; }
.share-download-button.copied { border-color: rgba(83, 230, 142, .62); background: rgba(22, 89, 56, .46); color: #b9ffd3; }
.share-download-button.share-error { border-color: rgba(255, 105, 122, .48); background: rgba(92, 28, 43, .62); color: #ffd8de; }
.game-delete-button { margin-left: auto; }

/* V12 admin game catalog */
.game-art-new-game { max-width: 760px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid rgba(69,109,132,.36); border-radius: 16px; background: linear-gradient(145deg,rgba(10,25,36,.88),rgba(10,18,30,.92)); }
.game-art-new-game .admin-field { max-width: none; }
.game-add-button { height: 48px; white-space: nowrap; padding-inline: 20px; }
.game-art-library-head > div { display: flex; flex-direction: column; gap: 4px; }
.game-delete-button { min-height: 38px; padding: 0 13px; border-radius: 10px; }
@media (max-width: 760px) {
  .game-art-new-game { grid-template-columns: 1fr; }
  .game-add-button { width: 100%; }
  .game-art-library-head { align-items: flex-start; gap: 10px; flex-wrap: wrap; }
}

/* V13: performance-first static arena background. */
.static-arena-backdrop { pointer-events:none; }
.static-arena-backdrop .arena-backdrop-image {
  animation:none !important;
  transform:none !important;
  opacity:.82 !important;
  filter:brightness(.82) saturate(.96) contrast(1.03) !important;
  will-change:auto !important;
  background-position:center center !important;
}
.static-arena-backdrop .arena-backdrop-image::after { display:none !important; animation:none !important; }

/* Admin global unlimited control. */
.global-unlimited-card {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin:0 0 18px; padding:18px 20px; border-radius:16px;
  border:1px solid rgba(74,112,143,.38); background:rgba(8,18,31,.76);
  box-shadow:0 14px 34px rgba(0,0,0,.15);
}
.global-unlimited-card.enabled { border-color:rgba(77,222,147,.46); background:rgba(11,47,37,.50); }
.global-unlimited-card h3 { margin:5px 0 6px; font-size:17px; color:#eef8ff; }
.global-unlimited-card p { margin:0; max-width:700px; color:#8398aa; font-size:11px; line-height:1.55; }
.unlimited-switch {
  position:relative; flex:0 0 auto; width:84px; height:42px; border-radius:999px;
  border:1px solid #34465b; background:#141d29; color:#8092a4; cursor:pointer;
  display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:0 12px;
  font-weight:900; transition:.18s ease;
}
.unlimited-switch i { position:absolute; width:30px; height:30px; border-radius:50%; left:5px; top:5px; background:#637386; transition:.18s ease; }
.unlimited-switch.on { justify-content:flex-start; border-color:rgba(84,229,148,.62); background:rgba(19,103,65,.55); color:#baffd5; }
.unlimited-switch.on i { left:47px; background:#56e391; box-shadow:0 0 18px rgba(86,227,145,.25); }
.unlimited-switch b { font-size:10px; letter-spacing:.8px; }
@media(max-width:700px){.global-unlimited-card{align-items:flex-start;flex-direction:column}.unlimited-switch{align-self:flex-end}}

/* ========================= V14 MOBILE HEADER ========================= */
.mobile-nav-menu,.mobile-guest-account{display:none}
.language-dropdown{position:relative;z-index:95}
.language-dropdown summary{list-style:none;min-width:58px;height:38px;padding:0 11px;border:1px solid rgba(116,154,192,.32);border-radius:11px;background:rgba(7,15,27,.88);color:#d8edf7;display:flex;align-items:center;justify-content:center;gap:8px;font-size:9px;font-weight:950;cursor:pointer;letter-spacing:.06em}
.language-dropdown summary::-webkit-details-marker,.mobile-nav-menu summary::-webkit-details-marker,.mobile-guest-account summary::-webkit-details-marker{display:none}
.language-dropdown summary span{color:#6fe5e0;font-size:11px}
.language-dropdown>div{position:absolute;top:44px;right:0;min-width:72px;padding:6px;border:1px solid #283a4d;border-radius:12px;background:#0a111d;box-shadow:0 16px 42px rgba(0,0,0,.42)}
.language-dropdown>div button{width:100%;height:32px;border:0;border-radius:8px;background:transparent;color:#92a8bc;font-size:9px;font-weight:900;cursor:pointer}.language-dropdown>div button:hover{background:#152435;color:#fff}
.account-language-row{display:none;padding:10px;border-top:1px solid rgba(115,145,177,.13);border-bottom:1px solid rgba(115,145,177,.13);margin:6px 0}.account-language-row small{display:block;color:#71849a;font-size:8px;font-weight:900;text-transform:uppercase;margin-bottom:7px}.account-language-row>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.account-language-row button{height:30px;border:1px solid #25364a;border-radius:8px;background:#0e1825;color:#6f8092;font-size:8px;font-weight:900;cursor:pointer}.account-language-row button.active{background:#173442;border-color:#3d8891;color:#9ff9f0}

@media(max-width:900px){
  .desktop-nav,.desktop-language,.desktop-auth-actions{display:none!important}
  .topbar{height:66px!important;min-height:66px!important;padding:0 12px!important;flex-wrap:nowrap!important;gap:8px!important;overflow:visible!important}
  .brand{flex:0 1 auto;min-width:0}.brand-word{font-size:17px!important}.brand-mark{width:35px!important;height:35px!important;flex:none}
  .workspace-home-link{font-size:8px!important;padding:7px 8px!important}
  .mobile-nav-menu{display:block;position:relative;margin-left:auto;z-index:96}
  .mobile-nav-menu>summary{height:38px;padding:0 10px;border:1px solid #26384d;border-radius:11px;background:#0a1420;color:#c6d8e8;display:flex;align-items:center;gap:6px;font-size:9px;font-weight:900;cursor:pointer;white-space:nowrap}.mobile-nav-menu>summary span{color:#62e4df;font-size:12px}.mobile-nav-menu>summary i{font-style:normal;color:#71869a}
  .mobile-nav-panel{position:absolute;right:0;top:45px;width:min(260px,calc(100vw - 24px));padding:8px;border:1px solid #293b50;border-radius:15px;background:rgba(7,13,23,.99);box-shadow:0 22px 65px rgba(0,0,0,.5);display:grid;gap:4px}
  .mobile-nav-panel button{height:43px;border:0;border-radius:10px;background:transparent;color:#b9c8d6;display:flex;align-items:center;gap:10px;padding:0 11px;font-size:9px;font-weight:900;text-align:left;cursor:pointer}.mobile-nav-panel button:hover{background:#121f2e;color:#fff}.mobile-nav-panel button span{width:26px;height:26px;border-radius:8px;background:#132837;color:#6ee5df;display:grid;place-items:center}
  .top-actions{margin-left:0!important;gap:6px!important}.account-box{display:block}.account-trigger{width:38px!important;height:38px!important}
  .account-menu{position:fixed!important;top:66px!important;right:8px!important;width:min(290px,calc(100vw - 16px))!important;max-height:calc(100vh - 78px);overflow:auto}.account-language-row{display:block}
  .mobile-guest-account{display:block;position:relative;z-index:97}.mobile-guest-account>summary{width:38px;height:38px;border:1px solid #2c4358;border-radius:11px;background:#0b1723;display:grid;place-items:center;font-size:15px;cursor:pointer;list-style:none}
  .mobile-account-panel{position:absolute;right:0;top:45px;width:min(270px,calc(100vw - 18px));padding:9px;border:1px solid #2b3d51;border-radius:15px;background:rgba(7,13,23,.99);box-shadow:0 22px 65px rgba(0,0,0,.5)}
  .mobile-account-panel>button{width:100%;height:42px;border:0;border-radius:9px;background:transparent;color:#b9c9d8;display:flex;align-items:center;gap:9px;padding:0 10px;font-size:9px;font-weight:900;cursor:pointer}.mobile-account-panel>button.register{background:linear-gradient(135deg,#35d7d1,#7088ff);color:#07121c;margin-top:4px}.mobile-account-panel .account-language-row{margin-top:9px}
}
@media(max-width:420px){.brand-word{font-size:15px!important}.brand-mark{width:32px!important;height:32px!important}.mobile-nav-menu>summary{padding:0 8px}.workspace-home-link span{display:none}}

/* ========================= V14 ONLINE DUEL HUB ========================= */
.online-duel-section{margin:28px 0 20px;padding:22px;border:1px solid rgba(89,205,205,.22);border-radius:24px;background:linear-gradient(135deg,rgba(5,28,36,.88),rgba(18,13,42,.84));display:grid;grid-template-columns:1fr minmax(310px,430px);gap:22px;align-items:center;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.online-duel-copy h2{font-size:27px;margin:8px 0;color:#f4fbff;letter-spacing:-1px}.online-duel-copy p{max-width:650px;color:#8499ad;line-height:1.7;font-size:11px;margin:0}
.online-duel-card{min-height:112px;border:1px solid rgba(86,225,215,.35);border-radius:18px;background:radial-gradient(circle at 20% 20%,rgba(49,232,213,.16),transparent 38%),linear-gradient(145deg,#0c1d2a,#10172d);color:#fff;display:flex;align-items:center;gap:16px;padding:16px;cursor:pointer;text-align:left;transition:.22s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}.online-duel-card:hover{transform:translateY(-3px);border-color:#55ddd7;box-shadow:0 18px 48px rgba(26,189,190,.12)}
.duel-ball-icon{width:68px;height:68px;border-radius:22px;background:linear-gradient(145deg,#51e3dd,#6081ff);display:grid;place-items:center;font-size:30px;box-shadow:0 12px 30px rgba(59,184,213,.2)}.online-duel-card div{display:grid;gap:4px}.online-duel-card small{font-size:7px;font-weight:900;color:#72dcd7;letter-spacing:1.4px}.online-duel-card b{font-size:17px}.online-duel-card em{font-style:normal;color:#8fa5b8;font-size:9px;font-weight:800}

/* ========================= V14 PENALTY DUEL ========================= */
.penalty-duel-page{width:min(1240px,calc(100% - 34px));margin:0 auto;padding:34px 0 70px;position:relative;z-index:3;color:#eaf5ff}.penalty-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}.penalty-top .games-back-link{margin-right:auto}.penalty-live-pill,.penalty-sound{height:34px;border:1px solid #293e51;border-radius:10px;background:#0b1521;color:#859bb0;padding:0 10px;display:flex;align-items:center;gap:6px;font-size:7px;font-weight:900;letter-spacing:.8px}.penalty-sound{cursor:pointer}.penalty-sound.on{color:#a9fbdb}.penalty-live-pill i{width:6px;height:6px;border-radius:50%;background:#647488}.penalty-live-pill i.on{background:#60e5a0;box-shadow:0 0 12px #60e5a0}
.penalty-create-hero{min-height:470px;border:1px solid rgba(71,142,178,.3);border-radius:28px;background:radial-gradient(circle at 70% 40%,rgba(39,193,188,.15),transparent 34%),linear-gradient(145deg,rgba(6,19,31,.97),rgba(12,16,35,.96));display:grid;grid-template-columns:.85fr 1.15fr;overflow:hidden;box-shadow:0 32px 90px rgba(0,0,0,.3)}.penalty-create-copy{padding:62px 48px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.penalty-create-copy h1{font-size:clamp(38px,5vw,68px);line-height:.96;letter-spacing:-3.5px;margin:12px 0 18px}.penalty-create-copy p{color:#8da0b3;line-height:1.75;font-size:12px;max-width:500px}.penalty-create-button{margin-top:22px;min-height:54px;padding:0 22px;border:0;border-radius:14px;background:linear-gradient(135deg,#4ae1da,#6987ff);color:#07121c;font-size:10px;font-weight:950;cursor:pointer;display:flex;align-items:center;gap:10px;box-shadow:0 15px 40px rgba(68,195,214,.19)}
.penalty-goal-preview{position:relative;min-height:470px;background:radial-gradient(circle at 50% 25%,rgba(91,154,255,.17),transparent 55%),linear-gradient(#091426,#040a11);overflow:hidden}.penalty-goal-preview:after{content:"";position:absolute;inset:auto 0 0;height:31%;background:linear-gradient(transparent,rgba(38,116,68,.18))}.goal-net{position:absolute;left:8%;right:8%;top:17%;height:54%;border:7px solid rgba(225,244,255,.82);border-bottom-width:5px;border-radius:7px 7px 2px 2px;background-image:linear-gradient(rgba(183,210,226,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(183,210,226,.12) 1px,transparent 1px);background-size:26px 26px;transform:perspective(450px) rotateX(-2deg);box-shadow:0 0 35px rgba(132,197,236,.09)}.preview-ball{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);font-size:45px;filter:drop-shadow(0 8px 9px #000);z-index:5}.preview-keeper{position:absolute;left:50%;top:42%;width:42px;height:95px;transform:translateX(-50%);z-index:4}.preview-keeper:before{content:"";position:absolute;width:27px;height:27px;border-radius:50%;background:#172432;left:7px;top:0}.preview-keeper i{position:absolute;left:12px;top:25px;width:18px;height:50px;border-radius:9px;background:linear-gradient(#2f7fa0,#153b51);box-shadow:-23px 13px 0 -7px #245d78,23px 13px 0 -7px #245d78}.preview-zones{position:absolute;left:10%;right:10%;top:72%;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;z-index:6}.preview-zones span{text-align:center;color:#5b7186;font-size:7px;font-weight:900;letter-spacing:1px}
.penalty-stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.penalty-stat-strip>div{min-height:72px;border:1px solid #223346;border-radius:15px;background:#0b1420;padding:13px 16px;display:flex;flex-direction:column;justify-content:center}.penalty-stat-strip small{font-size:7px;color:#65798e;font-weight:900;letter-spacing:.8px}.penalty-stat-strip b{font-size:21px;margin-top:5px}.penalty-stat-strip.compact{width:min(620px,100%);margin:22px auto 0}
.penalty-account-card,.penalty-error-card{max-width:680px;margin:70px auto;padding:48px;border:1px solid #263b4e;border-radius:26px;background:linear-gradient(145deg,#091724,#101329);text-align:center}.penalty-big-icon{width:80px;height:80px;border-radius:26px;background:linear-gradient(145deg,#42ddd6,#6b7eff);display:grid;place-items:center;font-size:34px;margin:0 auto 18px}.penalty-account-card h1{font-size:32px;margin:12px 0}.penalty-account-card p{color:#869aaf;line-height:1.7}.penalty-account-card .game-primary-button{margin:22px auto 0}
.penalty-room-head{display:grid;grid-template-columns:1fr minmax(360px,520px);gap:18px;align-items:end;margin-bottom:16px}.penalty-room-head h1{font-size:38px;margin:7px 0 2px;letter-spacing:-2px}.penalty-room-head small{color:#657c91;font-size:8px;font-weight:900;letter-spacing:1.2px}.penalty-invite{border:1px solid #293c50;border-radius:16px;background:#0a1521;padding:11px;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}.penalty-invite>span{grid-column:1/-1;color:#657d91;font-size:7px;font-weight:900;letter-spacing:1px}.penalty-invite code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9bb2c7;font-size:9px}.penalty-invite button{height:34px;border:1px solid #315167;border-radius:9px;background:#102534;color:#77ded8;font-size:7px;font-weight:900;cursor:pointer}.penalty-invite button.copied{border-color:#347e58;background:#113422;color:#79e7a3}
.penalty-scoreboard{display:grid;grid-template-columns:1fr 64px 1fr;gap:10px;align-items:center;margin-bottom:16px}.penalty-scoreboard article{min-height:91px;border:1px solid #253a4c;border-radius:18px;background:#0a1420;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;padding:13px 16px;position:relative}.penalty-scoreboard article.is-you{border-color:rgba(71,215,207,.48);box-shadow:inset 0 0 24px rgba(50,183,185,.04)}.penalty-scoreboard article>span{width:45px;height:45px;border-radius:15px;background:#142536;color:#74e6df;display:grid;place-items:center;font-weight:950}.penalty-scoreboard article div{display:grid;gap:3px}.penalty-scoreboard article div b{font-size:12px}.penalty-scoreboard article div small{font-size:6px;color:#597086}.penalty-scoreboard article>strong{font-size:31px}.penalty-scoreboard article>em{position:absolute;right:16px;bottom:9px;font-style:normal;color:#657c91;font-size:6px;font-weight:900}.penalty-vs{text-align:center;font-weight:950;color:#7189a0;font-size:10px}.penalty-disconnect-note{margin:-4px 0 14px;padding:10px 14px;border:1px solid #704a37;border-radius:11px;background:#271b13;color:#f0ad7d;font-size:8px;font-weight:800;text-align:center}
.penalty-lobby{min-height:390px;border:1px solid #263a4e;border-radius:26px;background:radial-gradient(circle at 50% 30%,rgba(68,213,205,.1),transparent 32%),#08121d;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}.lobby-ball{font-size:52px;animation:duelFloat 2.4s ease-in-out infinite}.penalty-lobby h2{font-size:28px;margin:16px 0 8px}.penalty-lobby p{color:#71879b;font-size:10px;max-width:560px;line-height:1.6}.ready-row{display:flex;gap:8px;margin:20px 0}.ready-row span{border:1px solid #27394d;border-radius:9px;background:#0d1825;color:#657a90;padding:7px 10px;font-size:7px;font-weight:900}.ready-row span.ready{border-color:#34765a;background:#102c20;color:#75dfa0}.penalty-ready-button{min-width:170px;height:48px;border:0;border-radius:13px;background:linear-gradient(135deg,#48e0d7,#637fff);color:#07131b;font-size:10px;font-weight:950;cursor:pointer}.penalty-ready-button:disabled{background:#153228;color:#78d9a0}
.penalty-countdown{min-height:420px;border:1px solid #25394d;border-radius:26px;background:radial-gradient(circle,#143052,#07111c 60%);display:grid;place-items:center;align-content:center;gap:8px}.penalty-countdown span{font-size:9px;color:#6cded8;font-weight:900;letter-spacing:2px}.penalty-countdown strong{font-size:112px;line-height:1;color:#fff;text-shadow:0 0 50px rgba(92,173,255,.32);animation:countPop .75s ease infinite}
.penalty-arena{border:1px solid #293e52;border-radius:28px;background:linear-gradient(180deg,#071426,#050a10);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.32)}.penalty-round-meta{height:54px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1d2e40;background:#091521}.penalty-round-meta span{font-size:8px;font-weight:950;color:#69ddd7;letter-spacing:1.2px}.penalty-round-meta b{font-size:9px;color:#8da2b6}.penalty-goal{height:360px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 15%,rgba(92,155,255,.13),transparent 53%),linear-gradient(#0b1b31,#061019 70%,#092116)}.penalty-goal .goal-net{top:9%;left:13%;right:13%;height:66%}.goal-zone-lines{position:absolute;left:13%;right:13%;top:9%;height:66%;display:grid;grid-template-columns:repeat(3,1fr);z-index:2}.goal-zone-lines i{border-right:1px dashed rgba(149,190,218,.24)}.goal-zone-lines i:last-child{border-right:0}
.duel-keeper{position:absolute;left:50%;top:42%;width:38px;height:105px;transform:translate(-50%,-50%);z-index:5;transition:transform .38s cubic-bezier(.2,.8,.2,1)}.duel-keeper span{position:relative;display:block;width:100%;height:100%}.duel-keeper span i:nth-child(1){position:absolute;left:8px;top:0;width:23px;height:23px;border-radius:50%;background:#172a39}.duel-keeper span i:nth-child(2){position:absolute;left:9px;top:21px;width:21px;height:53px;border-radius:10px;background:linear-gradient(#35a1b6,#16475b);box-shadow:-25px 15px 0 -8px #28778c,25px 15px 0 -8px #28778c}.duel-keeper span i:nth-child(3){position:absolute;left:10px;top:68px;width:8px;height:32px;background:#142d3a;box-shadow:12px 0 #142d3a}.duel-keeper.dive-left{transform:translate(-250%,-55%) rotate(-55deg)}.duel-keeper.dive-right{transform:translate(150%,-55%) rotate(55deg)}.duel-keeper.dive-center{transform:translate(-50%,-58%) scale(1.12)}
.duel-ball{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);font-size:39px;z-index:7;filter:drop-shadow(0 8px 8px rgba(0,0,0,.6))}.penalty-arena.resolving .duel-ball{transition:all .48s cubic-bezier(.2,.9,.3,1)}.duel-ball.shot-left{left:26%;bottom:49%;font-size:27px}.duel-ball.shot-center{left:50%;bottom:48%;font-size:27px}.duel-ball.shot-right{left:74%;bottom:49%;font-size:27px}.duel-ball.blocked{filter:grayscale(.1) drop-shadow(0 0 12px rgba(90,222,221,.35))}.penalty-result-flash{position:absolute;inset:0;display:grid;place-items:center;z-index:12;font-size:clamp(46px,8vw,96px);font-weight:1000;letter-spacing:-4px;text-shadow:0 8px 28px rgba(0,0,0,.65);animation:resultFlash .85s ease both;pointer-events:none}.penalty-result-flash.goal{color:#7dffb0;background:radial-gradient(circle,rgba(19,133,68,.22),transparent 55%)}.penalty-result-flash.save{color:#73e7ff;background:radial-gradient(circle,rgba(23,120,163,.22),transparent 55%)}.penalty-result-flash.miss{color:#ff9292}
.penalty-controls{padding:19px 20px 22px;background:#07121d;text-align:center}.role-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#142438;color:#7db5e0;font-size:7px;font-weight:950;letter-spacing:1px}.role-chip.shoot{background:#2b2411;color:#ffd879}.role-chip.keep{background:#0f2930;color:#72e0e3}.penalty-controls h2{font-size:19px;margin:10px 0 4px}.penalty-controls p{font-size:8px;color:#70869a;margin:0 0 10px}.direction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:720px;margin:15px auto 0}.direction-grid button{height:70px;border:1px solid #2a4054;border-radius:16px;background:linear-gradient(145deg,#0e1c29,#0a1420);color:#afc2d2;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.18s}.direction-grid button span{font-size:24px;color:#60dcd6}.direction-grid button b{font-size:9px}.direction-grid button:hover:not(:disabled){transform:translateY(-2px);border-color:#4b8b9b;background:#112634}.direction-grid button.selected{border-color:#54d69e;background:#113024;color:#9ff1bd}.direction-grid button:disabled{cursor:default;opacity:.55}.direction-grid button.selected:disabled{opacity:1}
.penalty-finish{min-height:470px;border:1px solid #2a3e51;border-radius:28px;background:radial-gradient(circle at 50% 28%,rgba(84,225,166,.12),transparent 35%),#08131e;text-align:center;padding:43px 24px}.penalty-finish.loser{background:radial-gradient(circle at 50% 28%,rgba(77,136,198,.1),transparent 35%),#08131e}.winner-cup{font-size:60px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35))}.penalty-finish h2{font-size:42px;margin:10px 0}.final-score{display:flex;justify-content:center;align-items:center;gap:18px;margin:12px 0 20px}.final-score b{font-size:56px}.final-score span{font-size:24px;color:#566e84}.attempt-history{max-width:580px;margin:0 auto;display:grid;gap:8px}.attempt-history>div{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;text-align:left}.attempt-history>div>span{font-size:8px;font-weight:900;color:#8499ad;overflow:hidden;text-overflow:ellipsis}.attempt-history>div>div{display:flex;gap:6px}.attempt-history i{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:900}.attempt-history i.goal{background:#123b26;color:#7beaa4}.attempt-history i.miss{background:#3b1d24;color:#ff8a99}.penalty-finish-actions{display:flex;justify-content:center;gap:9px;margin-top:24px}.penalty-rematch{min-width:160px;height:45px;border:0;border-radius:12px;background:linear-gradient(135deg,#46ded6,#6985ff);color:#07131c;font-size:9px;font-weight:950;cursor:pointer}.penalty-rematch:disabled{background:#123124;color:#74d69b}
@keyframes duelFloat{50%{transform:translateY(-9px) rotate(5deg)}}@keyframes countPop{0%{transform:scale(.84);opacity:.4}40%{transform:scale(1.06);opacity:1}100%{transform:scale(.9);opacity:.7}}@keyframes resultFlash{0%{opacity:0;transform:scale(.7)}30%{opacity:1;transform:scale(1.08)}100%{opacity:.92;transform:scale(1)}}

@media(max-width:820px){
 .online-duel-section{grid-template-columns:1fr;padding:17px}.online-duel-card{min-height:92px}.duel-ball-icon{width:56px;height:56px;border-radius:17px;font-size:25px}
 .penalty-duel-page{width:calc(100% - 18px);padding-top:20px}.penalty-create-hero{grid-template-columns:1fr;min-height:0}.penalty-create-copy{padding:35px 24px}.penalty-create-copy h1{font-size:45px}.penalty-goal-preview{min-height:330px}.penalty-room-head{grid-template-columns:1fr}.penalty-room-head h1{font-size:30px}.penalty-scoreboard{grid-template-columns:1fr 38px 1fr}.penalty-scoreboard article{min-height:106px;grid-template-columns:38px 1fr;padding:10px}.penalty-scoreboard article>span{width:36px;height:36px}.penalty-scoreboard article>strong{grid-column:1/-1;font-size:25px}.penalty-scoreboard article>em{right:9px;bottom:7px}.penalty-goal{height:300px}.direction-grid button{height:65px}.penalty-stat-strip{grid-template-columns:1fr 1fr}.penalty-countdown{min-height:360px}.penalty-countdown strong{font-size:90px}
}
@media(max-width:520px){
 .penalty-top{gap:5px}.penalty-live-pill{display:none}.penalty-sound{margin-left:auto}.penalty-create-copy h1{font-size:38px;letter-spacing:-2px}.penalty-create-copy p{font-size:10px}.penalty-goal-preview{min-height:270px}.preview-ball{font-size:34px}.penalty-room-head{margin-top:10px}.penalty-invite{grid-template-columns:1fr}.penalty-invite button{width:100%}.penalty-scoreboard{gap:5px;grid-template-columns:1fr 26px 1fr}.penalty-scoreboard article{min-width:0;padding:8px;grid-template-columns:30px 1fr}.penalty-scoreboard article>span{width:30px;height:30px;border-radius:9px}.penalty-scoreboard article div b{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.penalty-scoreboard article div small{font-size:5px}.penalty-scoreboard article>strong{font-size:22px}.penalty-scoreboard article>em{font-size:5px}.penalty-vs{font-size:7px}.penalty-goal{height:245px}.penalty-goal .goal-net{left:6%;right:6%;top:9%;height:65%}.goal-zone-lines{left:6%;right:6%;top:9%;height:65%}.duel-ball{font-size:32px}.duel-ball.shot-left{left:22%}.duel-ball.shot-right{left:78%}.direction-grid{gap:6px}.direction-grid button{height:60px;border-radius:13px;flex-direction:column;gap:3px}.direction-grid button span{font-size:20px}.penalty-controls{padding:15px 9px 18px}.penalty-finish{padding:32px 12px}.penalty-finish h2{font-size:32px}.final-score b{font-size:44px}.attempt-history>div{grid-template-columns:95px 1fr}.attempt-history i{width:20px;height:20px}.penalty-finish-actions{flex-direction:column}.penalty-rematch,.penalty-finish-actions .game-secondary-button{width:100%}
}
@media(prefers-reduced-motion:reduce){.lobby-ball,.penalty-result-flash,.penalty-countdown strong{animation:none!important}.duel-ball,.duel-keeper{transition:none!important}}
.duel-shooter{position:absolute;left:50%;bottom:4%;width:34px;height:92px;transform:translateX(-50%);z-index:4;transform-origin:50% 90%;transition:transform .32s ease}.duel-shooter span{display:block;position:relative;width:100%;height:100%}.duel-shooter span i:nth-child(1){position:absolute;left:8px;top:0;width:19px;height:19px;border-radius:50%;background:#101a24}.duel-shooter span i:nth-child(2){position:absolute;left:7px;top:18px;width:21px;height:43px;border-radius:8px 8px 5px 5px;background:linear-gradient(180deg,#314b62,#172839);box-shadow:-17px 12px 0 -7px #22394c,17px 12px 0 -7px #22394c}.duel-shooter span i:nth-child(3){position:absolute;left:8px;top:57px;width:7px;height:30px;background:#111e2a;box-shadow:13px 0 #111e2a}.duel-shooter.kick{animation:shooterKick .62s cubic-bezier(.2,.8,.2,1) both}.penalty-arena.resolving .duel-shooter{opacity:.82}@keyframes shooterKick{0%{transform:translateX(-50%) rotate(0)}35%{transform:translateX(-50%) rotate(-9deg)}70%{transform:translateX(-48%) rotate(12deg)}100%{transform:translateX(-50%) rotate(0)}}
@media(max-width:520px){.duel-shooter{height:75px;bottom:2%;transform:translateX(-50%) scale(.86);transform-origin:center bottom}.duel-shooter.kick{animation:none}}
.duel-shooter{position:absolute;left:50%;bottom:3%;width:34px;height:92px;transform:translateX(-50%);z-index:4;transform-origin:50% 90%;transition:transform .32s ease}.duel-shooter span{display:block;position:relative;width:100%;height:100%}.duel-shooter span i:nth-child(1){position:absolute;left:8px;top:0;width:19px;height:19px;border-radius:50%;background:#101a24}.duel-shooter span i:nth-child(2){position:absolute;left:7px;top:18px;width:21px;height:43px;border-radius:8px 8px 5px 5px;background:linear-gradient(180deg,#314b62,#172839);box-shadow:-17px 12px 0 -7px #22394c,17px 12px 0 -7px #22394c}.duel-shooter span i:nth-child(3){position:absolute;left:8px;top:57px;width:7px;height:30px;background:#111e2a;box-shadow:13px 0 #111e2a}.duel-shooter.kick{animation:shooterKick .62s cubic-bezier(.2,.8,.2,1) both}.penalty-arena.resolving .duel-shooter{opacity:.82}@keyframes shooterKick{0%{transform:translateX(-50%) rotate(0)}35%{transform:translateX(-50%) rotate(-9deg)}70%{transform:translateX(-48%) rotate(12deg)}100%{transform:translateX(-50%) rotate(0)}}
@media(max-width:520px){.duel-shooter{height:75px;bottom:1%;transform:translateX(-50%) scale(.86);transform-origin:center bottom}.duel-shooter.kick{animation:none}}
@media (min-width:901px) and (max-width:1120px){
  .desktop-nav{display:none!important}.mobile-nav-menu{display:block;position:relative;margin-left:auto;z-index:96}
  .mobile-nav-menu>summary{height:38px;padding:0 10px;border:1px solid #26384d;border-radius:11px;background:#0a1420;color:#c6d8e8;display:flex;align-items:center;gap:6px;font-size:9px;font-weight:900;cursor:pointer;white-space:nowrap;list-style:none}.mobile-nav-menu>summary span{color:#62e4df;font-size:12px}.mobile-nav-menu>summary i{font-style:normal;color:#71869a}
  .mobile-nav-panel{position:absolute;right:0;top:45px;width:260px;padding:8px;border:1px solid #293b50;border-radius:15px;background:rgba(7,13,23,.99);box-shadow:0 22px 65px rgba(0,0,0,.5);display:grid;gap:4px}.mobile-nav-panel button{height:43px;border:0;border-radius:10px;background:transparent;color:#b9c8d6;display:flex;align-items:center;gap:10px;padding:0 11px;font-size:9px;font-weight:900;text-align:left;cursor:pointer}.mobile-nav-panel button span{width:26px;height:26px;border-radius:8px;background:#132837;color:#6ee5df;display:grid;place-items:center}
}

/* ========================= V15 PENALTY VISUAL UPGRADE ========================= */
.v15-penalty{--duel-blue:#45c8ff;--duel-red:#ff5c6f;--duel-green:#73f3a3;--duel-gold:#ffd44b}
.penalty-create-hero.v15-cinematic{background:#050b12;position:relative;border-color:rgba(116,171,213,.34);box-shadow:0 34px 100px rgba(0,0,0,.46);isolation:isolate}
.penalty-create-hero.v15-cinematic:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,14,.98) 0%,rgba(4,12,20,.88) 39%,rgba(2,7,12,.15) 64%,rgba(2,7,12,.28) 100%),url('/game-art/football-duel-v2.png') center/cover no-repeat;z-index:-1}
.penalty-create-hero.v15-cinematic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.72));pointer-events:none;z-index:-1}
.v15-cinematic .penalty-create-copy{background:linear-gradient(90deg,rgba(3,8,14,.86),rgba(3,8,14,.24));z-index:2}.v15-cinematic .penalty-create-copy h1{text-transform:uppercase;font-style:italic;text-shadow:0 8px 28px #000}.v15-cinematic .penalty-create-button{background:linear-gradient(135deg,#ffd84a,#ffb20e);color:#171000;box-shadow:0 18px 45px rgba(255,189,25,.22)}
.penalty-goal-preview.v15-preview{background:transparent;min-height:470px}.v15-preview .stadium-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 37%,rgba(255,255,255,.16),transparent 28%),linear-gradient(180deg,transparent 68%,rgba(31,115,59,.2));pointer-events:none}.v15-preview .goal-net{left:16%;right:14%;top:23%;height:44%;border-width:6px;background-size:17px 17px;box-shadow:0 12px 38px rgba(0,0,0,.45),0 0 26px rgba(216,241,255,.13)}
.preview-keeper-v15{position:absolute;left:55%;top:43%;width:38px;height:88px;transform:translate(-50%,-50%);z-index:5;background:linear-gradient(180deg,#ff8c29 12%,#d85114 70%);border-radius:16px 16px 10px 10px;box-shadow:-33px 23px 0 -14px #e26a1b,33px 23px 0 -14px #e26a1b,0 20px 0 -13px #1d232b,16px 20px 0 -13px #1d232b;filter:drop-shadow(0 12px 8px rgba(0,0,0,.42))}.preview-keeper-v15:before{content:"";position:absolute;left:8px;top:-24px;width:23px;height:25px;border-radius:48% 48% 45% 45%;background:linear-gradient(#c98b6a,#9a5d43)}.preview-keeper-v15:after{content:"1";position:absolute;inset:16px 0 auto;text-align:center;font-size:18px;font-weight:950;color:rgba(255,255,255,.68)}
.preview-shooter-v15{position:absolute;left:48%;bottom:7%;width:33px;height:84px;z-index:5;background:linear-gradient(#eef4f8 0 58%,#d7e1ea 58%);border-radius:13px 13px 7px 7px;transform:rotate(-5deg);box-shadow:-22px 17px 0 -11px #e5edf3,18px 19px 0 -11px #e5edf3,2px 37px 0 -12px #e9f0f5,17px 38px 0 -12px #d9e4ed;filter:drop-shadow(0 10px 8px #0008)}.preview-shooter-v15:before{content:"";position:absolute;width:22px;height:23px;border-radius:50%;background:#a86d50;left:6px;top:-22px}.preview-shooter-v15:after{content:"7";position:absolute;top:14px;left:0;right:0;text-align:center;color:#18202a;font-size:16px;font-weight:950}.preview-ball-v15{position:absolute;left:49%;bottom:6.5%;width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 25%,#dce2e5 62%,#8e969b 100%);box-shadow:0 8px 12px #0009;z-index:7}.preview-ball-v15:after{content:"";position:absolute;left:8px;top:7px;width:9px;height:9px;background:#15191c;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}

.v15-lobby{position:relative;overflow:hidden;background:#06101a;isolation:isolate}.v15-lobby .lobby-stadium{position:absolute;inset:0;background:linear-gradient(rgba(4,10,16,.67),rgba(4,12,18,.88)),url('/game-art/football-duel-v3.png') center 68%/cover no-repeat;z-index:-1;transform:scale(1.02)}.v15-lobby:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(88,205,255,.13),transparent 38%);pointer-events:none;z-index:-1}.v15-lobby h2,.v15-lobby p,.v15-lobby .ready-row,.v15-lobby .penalty-ready-button,.v15-lobby .lobby-ball{position:relative;z-index:2}.v15-lobby .lobby-ball{filter:drop-shadow(0 14px 17px rgba(0,0,0,.55))}
.v15-scoreboard article{background:linear-gradient(145deg,#07121d,#0b1824);overflow:hidden}.v15-scoreboard article.blue-player:before,.v15-scoreboard article.red-player:before{content:"";position:absolute;inset:0;pointer-events:none}.v15-scoreboard article.blue-player:before{background:linear-gradient(90deg,rgba(38,167,255,.1),transparent 50%)}.v15-scoreboard article.red-player:before{background:linear-gradient(270deg,rgba(255,67,92,.1),transparent 50%)}.penalty-avatar{width:45px!important;height:45px!important;border-radius:50%!important;border:2px solid rgba(255,255,255,.17);position:relative;z-index:1}.penalty-avatar.blue{background:radial-gradient(circle at 38% 30%,#79deff,#144c75 72%);color:#fff!important}.penalty-avatar.red{background:radial-gradient(circle at 38% 30%,#ff9b98,#742334 72%);color:#fff!important}

.v15-arena{border-color:rgba(101,150,187,.34);background:#050b12;box-shadow:0 34px 100px rgba(0,0,0,.44);overflow:hidden}.v15-arena .penalty-round-meta{background:linear-gradient(90deg,#07131e,#0a111b);border-bottom:1px solid rgba(132,176,207,.16)}
.penalty-goal.v15-stadium{height:520px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(2,6,10,.28)),url('/game-art/football-duel-v2.png') center 62%/cover no-repeat;isolation:isolate;perspective:900px;transform-origin:center 68%;will-change:transform}
.v15-stadium:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 25%,rgba(217,240,255,.19),transparent 28%),linear-gradient(180deg,rgba(4,11,18,.12) 0,transparent 50%,rgba(3,8,11,.44) 100%);z-index:0;pointer-events:none}.stadium-crowd-glow{position:absolute;left:8%;right:8%;top:8%;height:42%;background:radial-gradient(ellipse,rgba(98,167,214,.15),transparent 66%);filter:blur(16px);z-index:0}.stadium-lights{position:absolute;top:8%;width:29%;height:22%;filter:blur(.2px);opacity:.8;z-index:1;pointer-events:none}.stadium-lights.left{left:5%;background:radial-gradient(ellipse at 35% 0,#fff 0 1%,#c8ecff 2%,transparent 33%)}.stadium-lights.right{right:5%;background:radial-gradient(ellipse at 65% 0,#fff 0 1%,#ffe0d8 2%,transparent 33%)}
.pitch-perspective{position:absolute;left:-5%;right:-5%;bottom:-2%;height:39%;background:linear-gradient(90deg,rgba(17,93,47,.15),rgba(38,147,70,.18),rgba(17,93,47,.15));clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);z-index:1}.pitch-perspective:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(229,255,237,.24);transform:translateX(-50%)}
.goal-shadow-v15{position:absolute;left:21%;right:21%;top:18%;height:54%;background:rgba(0,0,0,.16);filter:blur(18px);z-index:1}.goal-net.v15-net{left:18%;right:18%;top:14%;height:52%;border:8px solid #eff8fd;border-bottom-width:5px;border-radius:5px;background-image:linear-gradient(rgba(224,240,249,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(224,240,249,.28) 1px,transparent 1px);background-size:19px 19px;box-shadow:0 0 0 1px rgba(155,201,228,.18),0 16px 38px rgba(0,0,0,.45),0 0 28px rgba(213,240,255,.12);z-index:3;transform:perspective(650px) rotateX(-1deg);transform-origin:top center;will-change:transform,background-position}.goal-net.v15-net:before{content:"";position:absolute;left:-8px;right:-8px;top:-8px;height:8px;background:#fff;border-radius:6px;box-shadow:0 2px 7px #0008}.goal-net.v15-net:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);pointer-events:none}
.v15-stadium .goal-zone-lines{left:18%;right:18%;top:14%;height:52%;z-index:4;opacity:.18}.v15-stadium .goal-zone-lines i{border-color:#fff}.penalty-spot-v15{position:absolute;left:50%;bottom:12%;width:9px;height:5px;border-radius:50%;background:#e9f0e8;transform:translateX(-50%);box-shadow:0 0 12px #fff8;z-index:3}

.duel-keeper-v15{position:absolute;left:50%;top:40%;width:64px;height:138px;transform:translate(-50%,-50%);z-index:7;transform-origin:50% 72%;will-change:transform;filter:drop-shadow(0 14px 11px rgba(0,0,0,.52))}.duel-keeper-v15 i,.duel-keeper-v15 em,.duel-keeper-v15 b{position:absolute;display:block}.keeper-head{left:21px;top:0;width:26px;height:29px;border-radius:48% 48% 45% 45%;background:linear-gradient(135deg,#c5896a,#8c503b);box-shadow:inset -5px -3px 8px rgba(0,0,0,.18)}.keeper-head:before{content:"";position:absolute;left:2px;top:-3px;width:23px;height:9px;border-radius:70% 70% 30% 30%;background:#15191d}.keeper-neck{left:28px;top:25px;width:12px;height:10px;background:#a96d52}.keeper-torso{left:16px;top:31px;width:36px;height:63px;border-radius:14px 14px 9px 9px;background:linear-gradient(90deg,#e45f13,#ff9b2f 46%,#cf4910);box-shadow:inset 0 -10px 15px rgba(65,18,3,.22)}.keeper-torso:before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;background:rgba(255,255,255,.2)}.keeper-shirt-number{left:27px;top:45px;color:#fff;font-style:normal;font-size:22px;font-weight:950;z-index:2;text-shadow:0 2px 4px #7a240c}.keeper-arm{top:39px;width:15px;height:59px;border-radius:9px;background:linear-gradient(#f38224,#d35012);transform-origin:50% 8%}.keeper-arm-left{left:7px;transform:rotate(26deg)}.keeper-arm-right{right:7px;transform:rotate(-26deg)}.keeper-glove{left:-3px;bottom:-10px;width:21px;height:18px;border-radius:8px 10px;background:#eaf6ff;border:2px solid #c1dbea;box-shadow:0 3px 7px #0005}.keeper-leg{top:88px;width:15px;height:49px;background:linear-gradient(#252c34,#10151b);border-radius:8px;transform-origin:50% 5%}.keeper-leg-left{left:18px;transform:rotate(7deg)}.keeper-leg-right{right:17px;transform:rotate(-7deg)}
.duel-keeper-v15.dive-left{animation:keeperDiveLeft .72s cubic-bezier(.18,.82,.22,1) both}.duel-keeper-v15.dive-right{animation:keeperDiveRight .72s cubic-bezier(.18,.82,.22,1) both}.duel-keeper-v15.dive-center{animation:keeperCenter .62s cubic-bezier(.18,.82,.22,1) both}.duel-keeper-v15.dive-left .keeper-arm-left,.duel-keeper-v15.dive-right .keeper-arm-right{animation:keeperReach .7s ease both}

.duel-shooter-v15{position:absolute;left:50%;bottom:6%;width:76px;height:164px;transform:translateX(-50%);z-index:6;transform-origin:50% 88%;will-change:transform;filter:drop-shadow(0 17px 12px rgba(0,0,0,.54))}.duel-shooter-v15 i,.duel-shooter-v15 em{position:absolute;display:block}.shooter-head{left:26px;top:0;width:27px;height:30px;border-radius:48%;background:linear-gradient(135deg,#bf8366,#8e543f)}.shooter-head:before{content:"";position:absolute;left:1px;top:-3px;width:25px;height:9px;border-radius:70% 70% 30% 30%;background:#14181d}.shooter-torso{left:19px;top:29px;width:42px;height:68px;border-radius:13px 13px 8px 8px;background:linear-gradient(90deg,#e6eef4,#fff 50%,#cedbe4);box-shadow:inset 0 -12px 15px rgba(44,72,92,.12)}.shooter-shirt-number{left:32px;top:47px;color:#1f2730;font-style:normal;font-weight:950;font-size:23px}.shooter-arm{top:38px;width:13px;height:58px;border-radius:8px;background:#d6e2eb;transform-origin:50% 8%}.shooter-arm-left{left:10px;transform:rotate(19deg)}.shooter-arm-right{right:9px;transform:rotate(-18deg)}.shooter-leg{top:92px;width:16px;height:67px;border-radius:9px;background:linear-gradient(#f0f4f6 0 51%,#1f2934 52%);transform-origin:50% 7%}.shooter-leg-plant{left:21px;transform:rotate(5deg)}.shooter-leg-kick{right:20px;transform:rotate(-5deg)}
.duel-shooter-v15.kick-left{animation:shooterLeanLeft .72s ease both}.duel-shooter-v15.kick-center{animation:shooterLeanCenter .72s ease both}.duel-shooter-v15.kick-right{animation:shooterLeanRight .72s ease both}.duel-shooter-v15.kick .shooter-leg-kick{animation:kickingLeg .66s cubic-bezier(.18,.88,.27,1) both}.duel-shooter-v15.kick .shooter-arm-left{animation:shootArmL .62s ease both}.duel-shooter-v15.kick .shooter-arm-right{animation:shootArmR .62s ease both}

.duel-ball-v15{position:absolute;left:50%;bottom:8%;width:31px;height:31px;border-radius:50%;z-index:10;background:radial-gradient(circle at 33% 27%,#fff 0 22%,#e1e6e8 49%,#8e999f 100%);box-shadow:0 8px 12px #0009,inset -4px -5px 8px rgba(0,0,0,.13);transform:translateX(-50%) rotate(0);will-change:left,bottom,transform}.duel-ball-v15 i{position:absolute;left:9px;top:8px;width:13px;height:13px;background:#171a1d;clip-path:polygon(50% 0,98% 35%,80% 100%,20% 100%,2% 35%)}.duel-ball-v15 b:before,.duel-ball-v15 b:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#24282b}.duel-ball-v15 b:before{left:1px;top:3px}.duel-ball-v15 b:after{right:1px;bottom:4px}.v15-arena.resolving .duel-ball-v15{transition:left .58s cubic-bezier(.12,.75,.18,1),bottom .58s cubic-bezier(.12,.75,.18,1),transform .58s cubic-bezier(.12,.75,.18,1),width .58s,height .58s}.duel-ball-v15.shot-left{left:28%;bottom:50%;transform:translateX(-50%) rotate(690deg) scale(.69)}.duel-ball-v15.shot-center{left:50%;bottom:49%;transform:translateX(-50%) rotate(720deg) scale(.69)}.duel-ball-v15.shot-right{left:72%;bottom:50%;transform:translateX(-50%) rotate(750deg) scale(.69)}.duel-ball-v15.blocked{filter:drop-shadow(0 0 10px rgba(111,229,255,.62))}.duel-ball-v15.goal{filter:drop-shadow(0 0 8px rgba(255,255,255,.28))}

.v15-arena.is-goal .v15-net{animation:netImpact .88s cubic-bezier(.2,.82,.25,1) both}.v15-arena.is-goal .v15-stadium{animation:cameraGoal .52s ease both}.v15-arena.is-save .v15-stadium{animation:cameraSave .42s ease both}.v15-arena.is-goal .stadium-crowd-glow{animation:crowdFlash .9s ease both}
.v15-arena .penalty-result-flash{z-index:20;font-style:italic;text-transform:uppercase;text-shadow:0 8px 35px #000,0 0 30px currentColor}.v15-arena .penalty-result-flash.goal{background:radial-gradient(circle,rgba(24,170,75,.25),transparent 55%)}.v15-arena .penalty-result-flash.save{background:radial-gradient(circle,rgba(25,157,209,.22),transparent 55%)}

.v15-controls{background:linear-gradient(180deg,#071019,#050b12);border-top:1px solid rgba(111,155,188,.15)}.v15-directions{max-width:860px}.v15-directions button{height:78px;border-radius:14px;border-color:#273a4d;background:linear-gradient(180deg,#0c1823,#060d15);position:relative;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.035),0 9px 22px rgba(0,0,0,.2)}.v15-directions button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(64,197,255,.08),transparent 45%);opacity:.8}.v15-directions button:nth-child(3):before{background:linear-gradient(225deg,rgba(255,82,104,.09),transparent 45%)}.v15-directions button span{width:35px;height:35px;border-radius:10px;background:#102635;display:grid;place-items:center;color:#69dfff;font-size:21px;position:relative}.v15-directions button:nth-child(3) span{color:#ff7d8d;background:#2a1520}.v15-directions button b{font-size:10px;letter-spacing:.7px;position:relative}.v15-directions button small{position:absolute;right:10px;bottom:8px;color:#4f6477;font-size:5px;font-weight:950;letter-spacing:1px}.v15-directions button:hover:not(:disabled){border-color:#58c9e7;transform:translateY(-3px);box-shadow:0 14px 30px rgba(38,171,217,.1)}

.penalty-resolution-footer{padding:12px 18px 16px;background:linear-gradient(180deg,#08131e,#050c13);border-top:1px solid rgba(122,164,195,.14);display:grid;gap:9px;text-align:center}.penalty-resolution-footer>span{font-size:7px;font-weight:900;letter-spacing:1.2px;color:#61768a}.penalty-reaction-panel{width:min(720px,100%);margin:0 auto;border:1px solid rgba(87,135,167,.25);border-radius:14px;background:#081522;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:9px 11px}.reaction-panel-copy{display:grid;text-align:left;gap:2px}.reaction-panel-copy small{font-size:6px;font-weight:950;letter-spacing:1px;color:#6bded8}.reaction-panel-copy span{font-size:7px;color:#61768a}.reaction-buttons{display:flex;gap:6px}.reaction-buttons button{width:38px;height:36px;border:1px solid #24394c;border-radius:10px;background:#0d1b29;font-size:18px;cursor:pointer;transition:.16s;filter:saturate(.92)}.reaction-buttons button:hover:not(:disabled){transform:translateY(-3px) scale(1.05);border-color:#4bc9c4;background:#102b35}.reaction-buttons button:disabled{opacity:.34;cursor:default;filter:grayscale(.3)}
.duel-reaction-toast{position:fixed;right:22px;bottom:24px;z-index:1000;min-width:210px;max-width:min(310px,calc(100vw - 28px));display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(93,224,214,.42);border-radius:15px;background:linear-gradient(145deg,rgba(7,20,31,.98),rgba(10,16,28,.98));box-shadow:0 18px 55px rgba(0,0,0,.5),0 0 28px rgba(55,211,205,.09);pointer-events:none;animation:reactionToastIn 1.7s ease both}.duel-reaction-toast>span{width:43px;height:43px;border-radius:13px;background:#102737;display:grid;place-items:center;font-size:24px}.duel-reaction-toast>div{display:grid;gap:2px}.duel-reaction-toast b{font-size:10px}.duel-reaction-toast small{font-size:7px;color:#7e94a8}
.v15-countdown{background:linear-gradient(rgba(4,10,17,.72),rgba(4,10,17,.88)),url('/game-art/football-duel-v2.png') center/cover no-repeat}.v15-countdown strong{text-shadow:0 10px 45px #000,0 0 32px rgba(111,215,255,.25)}
.v15-finish{background:linear-gradient(rgba(4,10,17,.72),rgba(4,11,18,.94)),url('/game-art/football-duel-v3.png') center/cover no-repeat}.v15-finish.winner{box-shadow:inset 0 0 100px rgba(255,199,35,.08)}

@keyframes keeperDiveLeft{0%{transform:translate(-50%,-50%) rotate(0) scale(1)}28%{transform:translate(-75%,-55%) rotate(-16deg) scale(1.02)}70%,100%{transform:translate(-290%,-52%) rotate(-73deg) scale(1.06)}}
@keyframes keeperDiveRight{0%{transform:translate(-50%,-50%) rotate(0) scale(1)}28%{transform:translate(-25%,-55%) rotate(16deg) scale(1.02)}70%,100%{transform:translate(190%,-52%) rotate(73deg) scale(1.06)}}
@keyframes keeperCenter{0%{transform:translate(-50%,-50%) scale(1)}36%{transform:translate(-50%,-67%) scale(1.13,1.03)}100%{transform:translate(-50%,-54%) scale(1.08)}}
@keyframes keeperReach{40%,100%{height:72px;transform:rotate(76deg)}}
@keyframes kickingLeg{0%{transform:rotate(-5deg)}30%{transform:rotate(42deg)}67%{transform:rotate(-70deg) translateY(-5px)}100%{transform:rotate(-30deg)}}
@keyframes shooterLeanLeft{0%{transform:translateX(-50%) rotate(0)}45%{transform:translateX(-53%) rotate(-9deg)}100%{transform:translateX(-50%) rotate(-3deg)}}
@keyframes shooterLeanCenter{0%{transform:translateX(-50%) rotate(0)}45%{transform:translateX(-50%) rotate(-7deg)}100%{transform:translateX(-50%) rotate(0)}}
@keyframes shooterLeanRight{0%{transform:translateX(-50%) rotate(0)}45%{transform:translateX(-47%) rotate(9deg)}100%{transform:translateX(-50%) rotate(3deg)}}
@keyframes shootArmL{50%,100%{transform:rotate(-38deg)}}@keyframes shootArmR{50%,100%{transform:rotate(42deg)}}
@keyframes netImpact{0%{transform:perspective(650px) rotateX(-1deg) translateZ(0);background-position:0 0}30%{transform:perspective(650px) rotateX(-1deg) translateZ(-18px) scaleX(1.015);background-position:6px 3px}55%{transform:perspective(650px) rotateX(-1deg) translateZ(8px) scaleX(.994);background-position:-3px -2px}78%{transform:perspective(650px) rotateX(-1deg) translateZ(-4px)}100%{transform:perspective(650px) rotateX(-1deg) translateZ(0);background-position:0 0}}
@keyframes cameraGoal{0%,100%{transform:translate3d(0,0,0) scale(1)}22%{transform:translate3d(-2px,1px,0) scale(1.008)}42%{transform:translate3d(3px,-1px,0) scale(1.012)}64%{transform:translate3d(-1px,0,0) scale(1.007)}}
@keyframes cameraSave{0%,100%{transform:translate3d(0,0,0)}45%{transform:translate3d(2px,0,0)}}@keyframes crowdFlash{30%{opacity:1;filter:blur(10px);transform:scale(1.06)}}
@keyframes reactionToastIn{0%{opacity:0;transform:translateY(18px) scale(.94)}12%{opacity:1;transform:translateY(0) scale(1)}78%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(8px) scale(.98)}}

@media(max-width:820px){
 .penalty-goal.v15-stadium{height:390px}.goal-net.v15-net{left:11%;right:11%;top:14%;height:52%}.v15-stadium .goal-zone-lines{left:11%;right:11%;top:14%;height:52%}.duel-shooter-v15{transform:translateX(-50%) scale(.82);transform-origin:center bottom;bottom:2%}.duel-keeper-v15{transform:translate(-50%,-50%) scale(.85)}.v15-directions button{height:70px}.penalty-reaction-panel{align-items:stretch;flex-direction:column}.reaction-panel-copy{text-align:center}.reaction-buttons{justify-content:center}.duel-reaction-toast{right:12px;bottom:13px}.v15-preview .goal-net{left:10%;right:10%}
}
@media(max-width:520px){
 .penalty-create-hero.v15-cinematic:before{background:linear-gradient(180deg,rgba(3,8,14,.42),rgba(3,8,14,.9)),url('/game-art/football-duel-v2.png') center/cover no-repeat}.penalty-goal.v15-stadium{height:320px;background-position:center 65%}.goal-net.v15-net{left:7%;right:7%;top:13%;height:51%;border-width:5px;background-size:14px 14px}.v15-stadium .goal-zone-lines{left:7%;right:7%;top:13%;height:51%}.duel-keeper-v15{top:39%;transform:translate(-50%,-50%) scale(.68)}.duel-shooter-v15{bottom:-2%;transform:translateX(-50%) scale(.65)}.duel-ball-v15{width:24px;height:24px}.duel-ball-v15 i{left:7px;top:6px;width:10px;height:10px}.duel-ball-v15.shot-left{left:25%;bottom:50%}.duel-ball-v15.shot-right{left:75%;bottom:50%}.v15-directions{gap:6px}.v15-directions button{height:64px;padding:0 4px;flex-direction:column;gap:2px}.v15-directions button span{width:28px;height:28px;font-size:17px}.v15-directions button b{font-size:8px}.v15-directions button small{display:none}.reaction-buttons{gap:4px}.reaction-buttons button{width:34px;height:33px;font-size:16px}.duel-reaction-toast{left:10px;right:10px;bottom:12px;min-width:0}.v15-scoreboard article{padding:8px 7px}.penalty-avatar{width:30px!important;height:30px!important}.penalty-resolution-footer{padding-left:8px;padding-right:8px}
}
@media(prefers-reduced-motion:reduce){.duel-keeper-v15,.duel-shooter-v15,.duel-ball-v15,.v15-net,.v15-stadium,.duel-reaction-toast{animation:none!important;transition:none!important}}


/* V17 — clearly-labeled Monetag Direct Link sponsor placements */
.sponsor-offer{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:860px;
  min-height:82px;
  margin:18px auto;
  padding:14px 16px;
  border:1px solid rgba(255,204,86,.28);
  border-radius:20px;
  background:
    radial-gradient(circle at 8% 0%,rgba(255,196,74,.17),transparent 34%),
    linear-gradient(135deg,rgba(23,25,37,.96),rgba(10,14,25,.97));
  box-shadow:0 18px 48px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.05);
  color:#f7f9ff;
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.sponsor-offer::after{
  content:"";
  position:absolute;
  inset:-120% -15%;
  z-index:-1;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.08) 50%,transparent 58%);
  transform:translateX(-55%);
  transition:transform .55s ease;
  pointer-events:none;
}
.sponsor-offer:hover{
  transform:translateY(-2px);
  border-color:rgba(255,210,93,.58);
  box-shadow:0 22px 58px rgba(0,0,0,.34),0 0 30px rgba(255,184,56,.08);
}
.sponsor-offer:hover::after{transform:translateX(55%)}
.sponsor-offer-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,203,80,.24),rgba(255,119,52,.12));
  border:1px solid rgba(255,214,115,.26);
  color:#ffd76d;
  font-size:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.sponsor-offer-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.sponsor-offer-copy small{
  color:#f1ba49;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.sponsor-offer-copy b{
  color:#fff;
  font-size:16px;
  line-height:1.2;
}
.sponsor-offer-copy em{
  color:#9da8bb;
  font-size:12px;
  line-height:1.35;
  font-style:normal;
}
.sponsor-offer>strong{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  padding:11px 13px;
  border-radius:13px;
  background:linear-gradient(135deg,#f5c451,#ee9b36);
  color:#18130a;
  font-size:12px;
  font-weight:950;
  box-shadow:0 8px 22px rgba(230,162,55,.18);
}
.sponsor-offer>strong i{font-style:normal;font-size:15px}
.sponsor-hero{
  max-width:650px;
  margin:15px 0 8px;
  min-height:72px;
  border-radius:17px;
}
.sponsor-hero .sponsor-offer-icon{width:42px;height:42px;border-radius:13px}
.sponsor-hero .sponsor-offer-copy em{max-width:390px}
.sponsor-result{margin:18px auto 22px}
.sponsor-games{
  max-width:980px;
  margin:20px auto 26px;
}
.sponsor-compact{
  margin:16px 0 0;
  min-height:70px;
  border-radius:16px;
}
.sponsor-compact .sponsor-offer-icon{width:40px;height:40px;border-radius:12px}
.sponsor-compact .sponsor-offer-copy em{display:none}
.sponsor-penalty{
  margin:18px auto 8px;
  max-width:720px;
}
.penalty-finish .sponsor-offer{width:min(100%,720px)}
@media (max-width:720px){
  .sponsor-offer{
    grid-template-columns:auto minmax(0,1fr);
    gap:11px;
    min-height:0;
    padding:12px;
    border-radius:17px;
    margin:14px auto;
  }
  .sponsor-offer-icon{width:42px;height:42px;border-radius:13px}
  .sponsor-offer-copy b{font-size:14px}
  .sponsor-offer-copy em{font-size:11px}
  .sponsor-offer>strong{
    grid-column:1/-1;
    justify-content:center;
    width:100%;
    padding:10px 12px;
  }
  .sponsor-hero{margin:13px 0 6px}
  .sponsor-compact .sponsor-offer-copy em{display:block}
}

/* ========================= V18 PENALTY REALISTIC GAMEPLAY ========================= */
.v18-penalty{--v18-blue:#36a9ff;--v18-red:#ff4d64;--v18-lime:#9be53c;--v18-glass:rgba(5,12,18,.82)}
.v18-arena{position:relative;border-radius:24px;background:#05090e;overflow:hidden}
.v18-stadium{height:570px;background:linear-gradient(180deg,rgba(5,8,12,.03),rgba(3,9,7,.2) 62%,rgba(2,15,7,.28)),url('/game-art/football-duel-v2.png') center 58%/cover no-repeat;perspective:1050px}
.v18-stadium:after{content:"";position:absolute;inset:53% -8% -6%;z-index:1;background:repeating-linear-gradient(90deg,rgba(24,119,51,.18) 0 8%,rgba(12,91,38,.14) 8% 16%),linear-gradient(180deg,rgba(42,154,68,.06),rgba(9,75,29,.34));transform:perspective(800px) rotateX(64deg) scale(1.18);transform-origin:top;pointer-events:none}
.v18-stadium .pitch-perspective{z-index:2;height:42%;bottom:-2%;background:linear-gradient(90deg,rgba(18,108,48,.08),rgba(63,170,82,.18),rgba(18,108,48,.08));opacity:.86}
.v18-stadium .penalty-spot-v15{z-index:11;bottom:13%;width:10px;height:6px}

/* A goal with visible depth: front posts, roof, side netting and recessed back net. */
.goal-depth-v18{position:absolute;left:19%;right:19%;top:14%;height:51%;z-index:4;transform-style:preserve-3d;perspective:850px;pointer-events:none;filter:drop-shadow(0 15px 18px rgba(0,0,0,.45))}
.goal-back-net-v18{position:absolute;left:5.8%;right:5.8%;top:8%;bottom:4%;border:1px solid rgba(240,248,250,.58);background-image:linear-gradient(rgba(237,246,249,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(237,246,249,.35) 1px,transparent 1px);background-size:18px 18px;transform:translateZ(-70px) scale(.91,.92);transform-origin:center top;box-shadow:inset 0 0 36px rgba(6,12,16,.25)}
.goal-roof-net-v18{position:absolute;left:4%;right:4%;top:0;height:18%;background-image:linear-gradient(rgba(237,246,249,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(237,246,249,.32) 1px,transparent 1px);background-size:18px 18px;clip-path:polygon(2% 0,98% 0,91% 100%,9% 100%);transform:perspective(500px) rotateX(67deg);transform-origin:top;opacity:.9}
.goal-side-net-v18{position:absolute;top:3%;bottom:4%;width:10%;background-image:linear-gradient(rgba(237,246,249,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(237,246,249,.34) 1px,transparent 1px);background-size:15px 15px;opacity:.88}
.goal-side-net-v18.left{left:-1%;clip-path:polygon(0 0,100% 5%,88% 95%,0 100%);transform:perspective(420px) rotateY(58deg);transform-origin:left center}
.goal-side-net-v18.right{right:-1%;clip-path:polygon(0 5%,100% 0,100% 100%,12% 95%);transform:perspective(420px) rotateY(-58deg);transform-origin:right center}
.goal-front-frame-v18{position:absolute;inset:0;z-index:8}
.goal-front-frame-v18 i{position:absolute;display:block;background:linear-gradient(90deg,#d9e2e5,#fff 48%,#c6d0d4);box-shadow:0 2px 5px rgba(0,0,0,.55),0 0 7px rgba(255,255,255,.22)}
.goal-front-frame-v18 .post-left,.goal-front-frame-v18 .post-right{top:0;bottom:0;width:8px;border-radius:5px}
.goal-front-frame-v18 .post-left{left:0}.goal-front-frame-v18 .post-right{right:0}
.goal-front-frame-v18 .crossbar{left:0;right:0;top:0;height:8px;border-radius:5px}
.v18-stadium .goal-zone-lines{left:19%;right:19%;top:14%;height:51%;z-index:6;opacity:.09}

/* Compact game-like score in the top-left corner. */
.v18-corner-scoreboard{position:absolute;left:15px;top:14px;z-index:30;width:min(250px,42%);border:1px solid rgba(255,255,255,.28);background:rgba(7,15,29,.9);box-shadow:0 10px 30px rgba(0,0,0,.42);backdrop-filter:blur(7px);overflow:hidden}
.v18-score-row{height:39px;display:grid;grid-template-columns:minmax(0,1fr) 34px 62px;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}.v18-score-row:last-child{border-bottom:0}
.v18-score-row:before{content:"";width:8px;height:8px;border-radius:50%;margin-left:10px;position:absolute}.v18-score-row.blue:before{background:#2ec4ff}.v18-score-row.red:before{background:#ff5268}
.v18-score-row span{padding-left:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:900;text-transform:uppercase;color:#eaf4ff}
.v18-score-row b{display:grid;place-items:center;height:100%;font-size:24px;background:rgba(255,255,255,.06);color:#fff}
.v18-score-row i{font-style:normal;font-size:6px;font-weight:900;letter-spacing:.5px;color:#8fa2b5;text-align:center}

/* More human proportions and visible faces. */
.v18-keeper{top:39%;width:72px;height:151px;z-index:12;filter:drop-shadow(0 15px 9px rgba(0,0,0,.62))}
.v18-keeper .keeper-head{left:22px;width:30px;height:34px;border-radius:48% 48% 43% 43%;background:linear-gradient(135deg,#c98f6f,#9b6048);box-shadow:inset -5px -4px 7px rgba(0,0,0,.17)}
.v18-keeper .keeper-head:before{left:1px;top:-4px;width:29px;height:11px;background:linear-gradient(#191c21,#0b0e11);border-radius:80% 70% 32% 32%}
.v18-keeper .keeper-eye{top:14px;width:3px;height:3px;border-radius:50%;background:#15100e;z-index:4}.v18-keeper .keeper-eye.left{left:8px}.v18-keeper .keeper-eye.right{right:8px}
.v18-keeper .keeper-mouth{left:11px;top:23px;width:9px;height:3px;border-bottom:1px solid #6f392d;border-radius:50%;z-index:4}
.v18-keeper .keeper-neck{left:30px;top:29px;height:12px}.v18-keeper .keeper-torso{left:14px;top:37px;width:46px;height:70px;border-radius:15px 15px 10px 10px;background:linear-gradient(90deg,#df5c13,#ff9b26 49%,#d94c10)}
.v18-keeper .keeper-torso:after{content:"";position:absolute;left:4px;right:4px;bottom:-8px;height:15px;background:#222a32;border-radius:3px 3px 9px 9px}
.v18-keeper .keeper-arm{top:45px;height:62px;width:16px}.v18-keeper .keeper-arm-left{left:4px}.v18-keeper .keeper-arm-right{right:4px}
.v18-keeper .keeper-leg{top:104px;height:46px;width:16px}.v18-keeper .keeper-leg:after{content:"";position:absolute;left:-2px;bottom:-5px;width:22px;height:8px;border-radius:70% 25% 25% 35%;background:#0d1115}.v18-keeper .keeper-shirt-number{left:29px;top:56px}

.v18-shooter{left:63%;bottom:7.5%;width:82px;height:174px;z-index:13;transform:translateX(-50%) scale(1.04);filter:drop-shadow(0 17px 11px rgba(0,0,0,.58))}
.v18-shooter .shooter-head{left:27px;width:31px;height:34px;border-radius:48% 48% 44% 44%;background:linear-gradient(135deg,#c68b69,#965942)}
.v18-shooter .shooter-head:before{left:0;top:-4px;width:31px;height:11px;background:linear-gradient(#17191d,#090b0e);border-radius:75% 75% 34% 34%}
.v18-shooter .shooter-eye{position:absolute;left:20px;top:14px;width:3px;height:3px;border-radius:50%;background:#1c1210;z-index:5}.v18-shooter .shooter-brow{position:absolute;left:18px;top:10px;width:7px;height:2px;background:#37221d;transform:rotate(-8deg);z-index:5}.v18-shooter .shooter-mouth{position:absolute;left:19px;top:23px;width:8px;height:3px;border-bottom:1px solid #6d3a2d;border-radius:50%;z-index:5}
.v18-shooter .shooter-torso{left:17px;top:33px;width:50px;height:72px;border-radius:14px 14px 7px 7px;background:linear-gradient(90deg,#edf2f4,#fff 48%,#d9e2e7);box-shadow:inset 0 -12px 15px rgba(29,50,63,.13)}
.v18-shooter .shooter-torso:after{content:"";position:absolute;left:2px;right:2px;bottom:-10px;height:18px;background:#eef2f4;border-top:2px solid #1d252d;border-radius:2px 2px 7px 7px}
.v18-shooter .shooter-arm{top:43px;height:58px;width:14px}.v18-shooter .shooter-arm:after{content:"";position:absolute;left:2px;bottom:-7px;width:11px;height:12px;border-radius:50%;background:#b9785a}
.v18-shooter .shooter-leg{top:108px;height:63px;width:17px;background:linear-gradient(#f1f4f5 0 22%,#262d34 23% 51%,#f2f2ed 52% 88%,#12161b 89%)}
.v18-shooter .shooter-leg:after{content:"";position:absolute;left:-3px;bottom:-2px;width:23px;height:7px;border-radius:70% 15% 25% 30%;background:#0a0e12}
.v18-shooter .shooter-shirt-number{left:34px;top:50px;font-size:25px}

/* Real run-up first, then the kick. */
.v18-penalty .v18-shooter.kick-left{animation:v18RunKickLeft 1.14s cubic-bezier(.2,.72,.22,1) both}.v18-penalty .v18-shooter.kick-center{animation:v18RunKickCenter 1.14s cubic-bezier(.2,.72,.22,1) both}.v18-penalty .v18-shooter.kick-right{animation:v18RunKickRight 1.14s cubic-bezier(.2,.72,.22,1) both}
.v18-penalty .v18-shooter.kick .shooter-leg-kick{animation:v18KickLeg 1.08s ease both}.v18-penalty .v18-shooter.kick .shooter-leg-plant{animation:v18PlantLeg 1.08s ease both}.v18-penalty .v18-shooter.kick .shooter-arm-left{animation:v18RunArmL 1.05s ease both}.v18-penalty .v18-shooter.kick .shooter-arm-right{animation:v18RunArmR 1.05s ease both}
@keyframes v18RunKickLeft{0%{left:66%;bottom:6%;transform:translateX(-50%) scale(1.04) rotate(0)}20%{left:60%;bottom:7%;transform:translateX(-50%) scale(1.035) rotate(-2deg)}42%{left:54%;bottom:8.2%;transform:translateX(-50%) scale(1.025) rotate(2deg)}60%{left:50.7%;bottom:8.5%;transform:translateX(-50%) scale(1.02) rotate(-7deg)}100%{left:50%;bottom:8.3%;transform:translateX(-50%) scale(1.02) rotate(-5deg)}}
@keyframes v18RunKickCenter{0%{left:66%;bottom:6%;transform:translateX(-50%) scale(1.04) rotate(0)}20%{left:60%;bottom:7%;transform:translateX(-50%) scale(1.035) rotate(-2deg)}42%{left:54%;bottom:8.2%;transform:translateX(-50%) scale(1.025) rotate(2deg)}60%{left:50.7%;bottom:8.5%;transform:translateX(-50%) scale(1.02) rotate(-5deg)}100%{left:50%;bottom:8.3%;transform:translateX(-50%) scale(1.02) rotate(-1deg)}}
@keyframes v18RunKickRight{0%{left:66%;bottom:6%;transform:translateX(-50%) scale(1.04) rotate(0)}20%{left:60%;bottom:7%;transform:translateX(-50%) scale(1.035) rotate(-2deg)}42%{left:54%;bottom:8.2%;transform:translateX(-50%) scale(1.025) rotate(2deg)}60%{left:50.7%;bottom:8.5%;transform:translateX(-50%) scale(1.02) rotate(6deg)}100%{left:50%;bottom:8.3%;transform:translateX(-50%) scale(1.02) rotate(4deg)}}
@keyframes v18KickLeg{0%,35%{transform:rotate(-8deg)}47%{transform:rotate(29deg)}63%{transform:rotate(43deg)}76%{transform:rotate(-78deg) translateY(-7px)}100%{transform:rotate(-36deg)}}
@keyframes v18PlantLeg{0%,40%{transform:rotate(5deg)}63%{transform:rotate(14deg) translateY(2px)}100%{transform:rotate(9deg)}}
@keyframes v18RunArmL{0%{transform:rotate(18deg)}20%{transform:rotate(-24deg)}42%{transform:rotate(28deg)}70%,100%{transform:rotate(-43deg)}}@keyframes v18RunArmR{0%{transform:rotate(-18deg)}20%{transform:rotate(25deg)}42%{transform:rotate(-27deg)}70%,100%{transform:rotate(46deg)}}

/* Keeper reads the direction and dives naturally after the strike. */
.v18-penalty .v18-keeper.dive-left{animation:v18KeeperLeft .92s cubic-bezier(.17,.77,.2,1) both}.v18-penalty .v18-keeper.dive-right{animation:v18KeeperRight .92s cubic-bezier(.17,.77,.2,1) both}.v18-penalty .v18-keeper.dive-center{animation:v18KeeperCenter .82s cubic-bezier(.17,.77,.2,1) both}
@keyframes v18KeeperLeft{0%,22%{transform:translate(-50%,-50%) rotate(0) scale(1)}38%{transform:translate(-80%,-57%) rotate(-18deg) scale(1.02)}72%,100%{transform:translate(-310%,-58%) rotate(-70deg) scale(1.06)}}
@keyframes v18KeeperRight{0%,22%{transform:translate(-50%,-50%) rotate(0) scale(1)}38%{transform:translate(-20%,-57%) rotate(18deg) scale(1.02)}72%,100%{transform:translate(210%,-58%) rotate(70deg) scale(1.06)}}
@keyframes v18KeeperCenter{0%,20%{transform:translate(-50%,-50%) scale(1)}48%{transform:translate(-50%,-76%) scale(1.1,1.04)}100%{transform:translate(-50%,-57%) scale(1.06)}}

/* Ball waits until the run-up reaches the kick, then travels into the goal. */
.v18-arena.resolving .duel-ball-v15{transition:left .58s cubic-bezier(.12,.76,.2,1) .58s,bottom .58s cubic-bezier(.12,.76,.2,1) .58s,transform .58s cubic-bezier(.12,.76,.2,1) .58s,width .58s .58s,height .58s .58s}
.v18-arena .duel-ball-v15.shot-left{left:31%;bottom:48%;transform:translateX(-50%) rotate(720deg) scale(.66)}.v18-arena .duel-ball-v15.shot-center{left:50%;bottom:49%;transform:translateX(-50%) rotate(750deg) scale(.66)}.v18-arena .duel-ball-v15.shot-right{left:69%;bottom:48%;transform:translateX(-50%) rotate(780deg) scale(.66)}


/* Result appears after the foot reaches the ball, keeping the animation sequence natural. */
.v18-arena .penalty-result-flash{animation:resultFlash .82s ease .92s both}

/* Goal-net deformation affects the recessed and side meshes as one object. */
.v18-arena.is-goal .goal-back-net-v18{animation:v18BackNetImpact 1s cubic-bezier(.2,.8,.22,1) .64s both}.v18-arena.is-goal .goal-side-net-v18,.v18-arena.is-goal .goal-roof-net-v18{animation:v18SideNetImpact .9s ease .64s both}
@keyframes v18BackNetImpact{0%{transform:translateZ(-70px) scale(.91,.92);background-position:0 0}26%{transform:translateZ(-98px) scale(.925,.94);background-position:8px 4px}52%{transform:translateZ(-52px) scale(.902,.915);background-position:-4px -2px}75%{transform:translateZ(-80px) scale(.915,.93)}100%{transform:translateZ(-70px) scale(.91,.92);background-position:0 0}}
@keyframes v18SideNetImpact{0%,100%{filter:none}35%{filter:brightness(1.3);background-position:6px 3px}65%{background-position:-3px -2px}}

/* Controls sit on the grass, not in a separate dark panel. */
.v18-controls{position:absolute;left:50%;bottom:12px;z-index:40;width:min(760px,calc(100% - 30px));transform:translateX(-50%);padding:10px 12px 11px;border:1px solid rgba(255,255,255,.25);border-radius:17px;background:linear-gradient(180deg,rgba(7,17,13,.82),rgba(4,11,8,.9));backdrop-filter:blur(8px);box-shadow:0 14px 38px rgba(0,0,0,.44);text-align:center}
.v18-controls .role-chip{display:inline-flex;padding:4px 9px;margin-bottom:3px;border-radius:999px;background:rgba(0,0,0,.38);font-size:6px;font-weight:950;letter-spacing:1px;color:#dfffe7}.v18-controls h2{margin:2px 0 6px;font-size:13px;color:#fff}.v18-controls p{margin:0 0 5px;color:#b8cbbd;font-size:7px}
.v18-directions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:none}.v18-directions button{min-height:57px;border:1px solid rgba(184,233,164,.33);border-radius:12px;background:linear-gradient(180deg,rgba(54,91,36,.94),rgba(18,47,22,.96));color:#fff;display:flex;align-items:center;justify-content:center;gap:7px;position:relative;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 18px rgba(0,0,0,.26);transition:.18s ease}.v18-directions button:hover:not(:disabled){transform:translateY(-2px);border-color:#b9f079;background:linear-gradient(180deg,#527d31,#234a24)}.v18-directions button.selected{border-color:#d6ff7c;box-shadow:0 0 0 2px rgba(193,245,98,.13),0 10px 24px rgba(0,0,0,.32)}.v18-directions button:disabled{cursor:default;opacity:.64}
.v18-directions button>span{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.28);font-size:17px;color:#d9ff8a}.v18-directions button b{font-size:9px;letter-spacing:.5px}.v18-directions button small{position:absolute;right:7px;bottom:5px;font-size:5px;color:#9ebd92;font-weight:900;letter-spacing:.7px}

.v18-resolution-footer{min-height:96px;padding-top:13px}.v18-resolution-footer>span{font-size:7px}.v18-finish{border-radius:25px}
.v18-rematch-wait{width:min(650px,100%);margin:18px auto 4px;display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(91,199,255,.32);border-radius:15px;background:linear-gradient(135deg,rgba(8,27,40,.92),rgba(11,19,32,.92));text-align:left;box-shadow:0 14px 36px rgba(0,0,0,.23)}
.v18-rematch-icon{width:42px;height:42px;border-radius:13px;background:#123049;display:grid;place-items:center;font-size:22px;color:#6bd7ff}.v18-rematch-wait div{display:grid;gap:3px}.v18-rematch-wait b{font-size:10px;color:#f2fbff}.v18-rematch-wait small{font-size:7px;color:#839bae}.v18-rematch-wait strong{min-width:60px;text-align:center;font-size:15px;color:#ffd866}

/* Cross-page rematch notification (rendered by App V18). */
.global-rematch-toast{position:fixed;left:50%;top:76px;z-index:10050;width:min(620px,calc(100vw - 26px));transform:translateX(-50%);display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid rgba(101,203,255,.42);border-radius:17px;background:linear-gradient(145deg,rgba(5,17,28,.98),rgba(9,15,27,.98));box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 28px rgba(66,186,255,.08);animation:globalRematchIn .3s ease both}.global-rematch-toast.status{grid-template-columns:48px 1fr}.global-rematch-toast-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#102b41;color:#7adeff;font-size:23px}.global-rematch-toast-copy{display:grid;gap:3px}.global-rematch-toast-copy b{font-size:11px;color:#f5fbff}.global-rematch-toast-copy span{font-size:8px;color:#8499ab;line-height:1.45}.global-rematch-toast-copy small{font-size:7px;color:#f0c65d;font-weight:900}.global-rematch-actions{display:flex;gap:7px}.global-rematch-actions button{height:38px;padding:0 12px;border-radius:10px;border:1px solid #2f485c;background:#102334;color:#c6d6e1;font-size:7px;font-weight:950;cursor:pointer}.global-rematch-actions button.accept{background:linear-gradient(135deg,#80e4a0,#4ecb7b);border:0;color:#092115}.global-rematch-actions button.reject{border-color:#65323d;color:#ff9da9;background:#28141a}
@keyframes globalRematchIn{from{opacity:0;transform:translate(-50%,-12px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

@media(max-width:820px){
 .v18-stadium{height:460px;background-position:center 61%}.goal-depth-v18{left:12%;right:12%;top:16%;height:45%}.v18-stadium .goal-zone-lines{left:12%;right:12%;top:16%;height:45%}.v18-corner-scoreboard{left:9px;top:9px;width:min(230px,61%)}.v18-score-row{height:34px;grid-template-columns:minmax(0,1fr) 30px 52px}.v18-score-row span{font-size:8px}.v18-score-row b{font-size:20px}.v18-keeper{top:37%;transform:translate(-50%,-50%) scale(.84)}.v18-shooter{bottom:10%;transform:translateX(-50%) scale(.82)}.v18-controls{bottom:8px;width:calc(100% - 18px);padding:8px}.v18-directions button{min-height:52px}.v18-resolution-footer{min-height:104px}
}
@media(max-width:520px){
 .v18-stadium{height:390px;background-position:center 62%}.goal-depth-v18{left:7%;right:7%;top:18%;height:39%}.v18-stadium .goal-zone-lines{left:7%;right:7%;top:18%;height:39%}.goal-front-frame-v18 .post-left,.goal-front-frame-v18 .post-right{width:6px}.goal-front-frame-v18 .crossbar{height:6px}.goal-back-net-v18{background-size:13px 13px}.goal-roof-net-v18,.goal-side-net-v18{background-size:12px 12px}.v18-corner-scoreboard{width:68%;left:7px;top:7px}.v18-score-row{height:29px;grid-template-columns:minmax(0,1fr) 27px 46px}.v18-score-row span{font-size:7px;padding-left:22px}.v18-score-row:before{width:6px;height:6px;margin-left:8px}.v18-score-row b{font-size:17px}.v18-score-row i{font-size:5px}.v18-keeper{top:36%;transform:translate(-50%,-50%) scale(.66)}.v18-shooter{bottom:13%;transform:translateX(-50%) scale(.63)}.v18-arena .duel-ball-v15{bottom:16%;width:23px;height:23px}.v18-controls{bottom:6px;border-radius:13px}.v18-controls h2{font-size:10px}.v18-directions{gap:5px}.v18-directions button{min-height:47px;gap:3px}.v18-directions button>span{width:23px;height:23px;font-size:14px}.v18-directions button b{font-size:7px}.v18-directions button small{display:none}.v18-rematch-wait{grid-template-columns:40px 1fr;padding:10px}.v18-rematch-wait strong{grid-column:1/-1;text-align:right}.global-rematch-toast{top:64px;grid-template-columns:42px 1fr;padding:11px}.global-rematch-toast-icon{width:40px;height:40px}.global-rematch-actions{grid-column:1/-1}.global-rematch-actions button{flex:1}
}