/* ============ GOLASO.ORG auth page — pixel-mapped to the master mock (1448x1086) ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #000006; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
img { display: block; }

body { background: radial-gradient(140% 130% at 50% 30%, #08061a 0%, #030210 55%, #000005 100%) fixed; }
#viewport { width: 100%; overflow: hidden; }
#stage {
  position: relative; z-index: 1; width: 1448px; height: 1086px; margin: 0 auto;
  background: url(../img/bg.png) 0 0 / 1448px 1086px no-repeat;
  transform-origin: top left;
}
/* side fill: real outpainted locker-room continuations (purple wing on the
   left, green wing on the right). Drawn at native 960px anchored at the
   stage junction and clipped by the gap (--extw, set by fit()) so the room
   simply continues as far as the screen goes — never squished. The edge
   color backstops gaps beyond 960px. */
#stage::before, #stage::after {
  content: ""; position: absolute; top: 0; width: var(--extw, 720px); height: 1086px; pointer-events: none;
}
#stage::before { right: 100%; background: #06030f url(../img/ext_l.png) right top / 960px 1086px no-repeat; }
#stage::after  { left: 100%;  background: #182522 url(../img/ext_r.png) left top / 960px 1086px no-repeat; }

/* ================= AUTH PANEL ================= */
/* enlarged panel: the wrapper carries scale + glow (a drop-shadow directly on
   #auth would be clipped away by its own clip-path). Anchored to the panel's
   BOTTOM edge (655) so all height growth goes upward: the baked headline bar
   below stays exactly as the mock, and the top stops short of the logo
   tagline (letters end at y≈206; scaled top lands at ≈213). */
#auth-fx {
  position: absolute; inset: 0; pointer-events: none;
  transform-origin: 724px 655px; transform: scale(1.08, 1.04);
  filter: brightness(1.03)
          drop-shadow(0 0 22px rgba(120,50,235,.40))
          drop-shadow(0 6px 45px rgba(70,190,110,.15));
}
#auth-fx #auth { pointer-events: auto; }
#auth {
  position: absolute; left: 349px; top: 230px; width: 750px; height: 425px;
  clip-path: polygon(16px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 16px);
  background: #010517;
}
/* right half: dark teal-green gradient (measured) */
#auth::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; pointer-events: none;
  background: linear-gradient(180deg, #021618 0%, #011414 55%, #011211 100%);
}
/* thin edge frame: purple-blue left/top -> teal right */
#auth::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  padding: 1px;
  background: linear-gradient(90deg, #42479d 0%, #33357f 45%, #156765 70%, #1e8172 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---- tabs ---- */
#tabs { position: absolute; left: 0; top: 0; width: 100%; height: 50px; display: flex; z-index: 3; }
.tab { position: relative; height: 50px; }
.tab-signin { width: 345px; z-index: 2; }
.tab-join { width: 405px; }
.tab span {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: 'Saira Semi Condensed', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: 1.7px; color: #fff;
  text-shadow: 0 0 8px rgba(190,120,255,.75), 0 0 18px rgba(150,60,255,.4);
}
.tab-join span { font-size: 20px; letter-spacing: 1.1px; padding-left: 22px; color: #fff; text-shadow: 0 0 6px rgba(150,255,150,.9), 0 0 16px rgba(80,230,90,.55); }
.tab::before { content: ""; position: absolute; inset: 0; transition: filter .15s; }
.tab-signin::before {
  width: calc(100% + 27px);
  clip-path: polygon(0 0, calc(100% - 51px) 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #2c0663 0%, #16033d 45%, #1c0347 72%, #360381 94%, #6a24b2 100%);
  box-shadow: inset 0 1px 0 rgba(190,140,255,.75), inset 0 -12px 22px rgba(95,20,200,.5);
}
.tab-signin::after { /* lavender divider slash */
  content: ""; position: absolute; top: 0; left: 346px; width: 2px; height: 100%; z-index: 3;
  background: linear-gradient(180deg, #a678e0, #8776cf); transform: skewX(45deg);
}
.tab-join::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 51px 100%);
  left: -24px; width: calc(100% + 24px);
  background:
    radial-gradient(58% 65% at 30% 100%, rgba(75,190,50,.45), transparent 70%),
    linear-gradient(180deg, #12201b 0%, #112218 50%, #143317 78%, #398b1c 96%, #88d659 100%);
  box-shadow: inset 0 1px 0 rgba(120,255,140,.35);
}
/* inactive/active swap (register mode) */
#auth[data-mode="join"] .tab-signin::before {
  background: linear-gradient(180deg, #1b1434 0%, #130f26 55%, #161129 100%);
  box-shadow: inset 0 1px 0 rgba(160,130,240,.25);
}
#auth[data-mode="join"] .tab-signin span { text-shadow: none; }
#auth[data-mode="join"] .tab-join::before {
  background:
    radial-gradient(58% 65% at 30% 100%, rgba(90,220,70,.5), transparent 70%),
    linear-gradient(180deg, #17672b 0%, #0d411a 45%, #114d1e 72%, #2c8c25 94%, #8fdd5e 100%);
  box-shadow: inset 0 1px 0 rgba(150,255,170,.7), inset 0 -12px 22px rgba(45,190,75,.5);
}
.tab:hover::before { filter: brightness(1.12); }
#tabs::after { /* hairline under the tab bar */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, #6a24b2 0%, #6a24b2 45%, #88d659 52%, #88d659 100%); opacity: 1;
}

/* ---- columns ---- */
.col { position: absolute; top: 50px; bottom: 0; z-index: 2; }
.col-left { left: 0; width: 375px; }
.col-right { left: 375px; width: 375px; }
.is-hidden { display: none; }

/* left column layout (panel-relative: content x=49..326) */
.col-left .hd {
  position: absolute; left: 49px; top: 19px;
  font: 600 16px/1.25 'Saira Semi Condensed', sans-serif; color: #fff; letter-spacing: .3px;
}
.col-left .sub { position: absolute; left: 49px; top: 43px; font: 400 11px/1.3 'Inter', sans-serif; color: #9a9db5; }

.field { position: absolute; left: 49px; width: 277px; height: 35px; display: block; }
#viewSignin .f-email { top: 73px; }
#viewSignin .f-pass  { top: 120px; }
.field input {
  width: 100%; height: 100%; padding: 0 34px 0 37px;
  background: #050618; border: 1px solid #2b2b4c; border-radius: 10px;
  color: #e8e9f2; font: 400 12.5px 'Inter', sans-serif; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: #a2a6bd; }
.field input:focus { border-color: #6d3fd6; box-shadow: 0 0 0 1px rgba(109,63,214,.35), 0 0 14px rgba(109,63,214,.25); }
#auth[data-mode="join"] .field input:focus { border-color: #2f9e4a; box-shadow: 0 0 0 1px rgba(47,158,74,.35), 0 0 14px rgba(47,158,74,.25); }
.fi { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: #8a8fb0; pointer-events: none; }
.eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: #8a8fb0; }
.eye:hover { color: #c9cce0; }
.eye svg { width: 18px; height: 18px; }

.row-remember { position: absolute; left: 49px; top: 172px; width: 277px; display: flex; align-items: center; justify-content: space-between; }
.chk { display: flex; align-items: center; gap: 7px; font: 400 12px 'Inter', sans-serif; color: #c4c2d0; cursor: pointer; }
.chk input { display: none; }
.chk .box {
  width: 16px; height: 16px; border-radius: 4px; background: #7524f2;
  box-shadow: 0 0 8px rgba(135,80,243,.5); position: relative; flex: 0 0 16px;
}
.chk .box::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
#auth[data-mode="join"] .chk .box { background: #2fae3e; box-shadow: 0 0 8px rgba(60,200,80,.5); }
.chk input:not(:checked) + .box { background: #12132a; box-shadow: inset 0 0 0 1px #34365a; }
.chk input:not(:checked) + .box::after { display: none; }
.forgot { font: 400 12px 'Inter', sans-serif; color: #bd79f1; }
.forgot:hover { color: #d9a6ff; text-decoration: underline; }

.btn {
  position: absolute; left: 49px; width: 277px; height: 38px; border: 0; border-radius: 0;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  font-family: 'Saira Semi Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1.4px; color: #fff;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
#viewSignin .btn { top: 205px; height: 42px; }
.btn-purple {
  background:
    radial-gradient(90px 26px at 13% 0%, rgba(193,127,246,.5), transparent 65%),
    linear-gradient(180deg, #5b05d1 0%, #46079e 40%, #30037c 65%, #2a0273 82%, #400396 100%);
  box-shadow: inset 0 1px 0 #c17ff6, inset 0 -1px 0 #7b35c4;
  filter: drop-shadow(1px 0 0 #8a55d8) drop-shadow(-1px 0 0 #8a55d8) drop-shadow(0 1px 0 #8a55d8) drop-shadow(0 -1px 0 #8a55d8) drop-shadow(0 0 8px rgba(130,50,240,.5));
  text-shadow: 0 0 8px rgba(255,255,255,.4);
}
.btn-purple:hover { filter: drop-shadow(1px 0 0 #8a55d8) drop-shadow(-1px 0 0 #8a55d8) drop-shadow(0 1px 0 #8a55d8) drop-shadow(0 -1px 0 #8a55d8) drop-shadow(0 0 12px rgba(150,70,255,.7)) brightness(1.12); }
.btn-green {
  background:
    radial-gradient(130px 30px at 12% 0%, rgba(208,252,190,.55), transparent 65%),
    linear-gradient(180deg, #4faa23 0%, #2b6f16 30%, #1a4e0c 58%, #164a08 78%, #24690f 100%);
  box-shadow: inset 0 1px 0 #d0fcbe, inset 0 2px 3px rgba(149,212,111,.55), inset 0 -1px 0 #4b962a;
  filter: drop-shadow(1px 0 0 #5da344) drop-shadow(-1px 0 0 #5da344) drop-shadow(0 1px 0 #5da344) drop-shadow(0 -1px 0 #5da344) drop-shadow(0 0 9px rgba(90,200,60,.5));
  text-shadow: 0 0 8px rgba(255,255,255,.4);
}
.btn-green:hover { filter: drop-shadow(1px 0 0 #5da344) drop-shadow(-1px 0 0 #5da344) drop-shadow(0 1px 0 #5da344) drop-shadow(0 -1px 0 #5da344) drop-shadow(0 0 13px rgba(110,230,70,.7)) brightness(1.1); }
.form-msg { position: absolute; left: 49px; top: 251px; width: 277px; font: 500 11px 'Inter', sans-serif; color: #ff7a7a; text-align: center; min-height: 13px; }
.form-msg.ok { color: #6fdd2b; }

.divider { position: absolute; left: 49px; top: 264px; width: 277px; display: flex; align-items: center; gap: 10px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #262742; }
.divider span { font: 400 10px 'Inter', sans-serif; color: #8f8aa6; white-space: nowrap; }

.socials { position: absolute; left: 49px; top: 290px; width: 277px; display: flex; gap: 10px; }
.social {
  flex: 1; height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #060718; border: 1px solid #232538; border-radius: 9px;
  font: 500 12px 'Inter', sans-serif; color: #dfe2e8;
  transition: border-color .15s, background .15s;
}
.social:hover { border-color: #4a4e78; background: #14162e; }
.social svg { width: 16px; height: 16px; flex: 0 0 16px; }

.legal { position: absolute; left: 0; top: 345px; width: 375px; text-align: center; white-space: nowrap; font: 400 10px/1.35 'Inter', sans-serif; color: #6b6787; }
.legal a { color: #bf76d6; }
.legal a:hover { text-decoration: underline; }

/* register view spacing */
#viewJoin .f-user  { top: 62px; }
#viewJoin .f-email { top: 106px; }
#viewJoin .f-club    { top: 150px; width: 158px; }
#viewJoin .f-country { top: 150px; left: 215px; width: 111px; }
#viewJoin .f-pass  { top: 194px; }
#viewJoin .f-pass2 { top: 238px; }
#viewJoin .row-remember { top: 282px; }
#viewJoin .btn { top: 308px; }
#viewJoin .form-msg { top: 350px; }

/* country dropdown — styled like the inputs (the open list is the UA's own) */
.field select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 100%; padding: 0 22px 0 37px;
  background: #050618 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8fb0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 9px center / 10px 6px no-repeat;
  border: 1px solid #2b2b4c; border-radius: 10px;
  color: #e8e9f2; font: 400 12.5px 'Inter', sans-serif; outline: none; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.field select:invalid { color: #a2a6bd; } /* placeholder tint until a country is picked */
.field select option { background: #0a0b20; color: #e8e9f2; }
.field select:focus { border-color: #6d3fd6; box-shadow: 0 0 0 1px rgba(109,63,214,.35), 0 0 14px rgba(109,63,214,.25); }
#auth[data-mode="join"] .field select:focus { border-color: #2f9e4a; box-shadow: 0 0 0 1px rgba(47,158,74,.35), 0 0 14px rgba(47,158,74,.25); }
/* picked-country flag swaps in over the globe icon (JS un-hides it) */
.cflag { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.cflag[hidden] { display: none; }

/* right column */
.col-right .hd2 { position: absolute; left: 31px; top: 25px; font: 600 16px/1.3 'Saira Semi Condensed', sans-serif; color: #fff; letter-spacing: .1px; }
.bullet { position: absolute; left: 31px; width: 330px; display: flex; gap: 13px; }
.bullet.b1 { top: 70px; }
.bullet.b2 { top: 124px; }
.bullet.b3 { top: 179px; }
.bullet.b4 { top: 234px; }
.bullet img { width: 37px; height: 37px; flex: 0 0 37px; }
.bullet b { display: block; font: 600 13px/1.2 'Saira Semi Condensed', sans-serif; color: #fff; margin-top: 2px; }
.bullet i { display: block; font: 400 11.5px/1.3 'Inter', sans-serif; font-style: normal; color: #a7bab2; margin-top: 3px; }
.btn-create { left: 31px !important; top: 293px !important; width: 293px !important; height: 45px !important; font-size: 14.5px !important; letter-spacing: 1.5px; }

/* ================= FEATURE CARDS ================= */
#cards { position: absolute; left: 0; top: 693px; width: 1448px; height: 228px; }
.card {
  position: absolute; top: 0; width: 194px; height: 228px;
  background: linear-gradient(180deg, #0a0526 0%, #0a0327 60%, #05011a 85%, #030113 100%);
  border: 1px solid #16062f; border-radius: 12px;
  box-shadow: 0 0 18px rgba(110,55,220,.30);
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: #6d4fd0; box-shadow: 0 0 22px rgba(123,92,255,.45); }
.c1 { left: 14px; --tx: 10px; } .c2 { left: 218px; --tx: 19px; } .c3 { left: 422px; --tx: 20px; }
.c4 { left: 626px; --tx: 12px; } .c5 { left: 830px; --tx: 7px; } .c6 { left: 1034px; --tx: 1px; }
.c7 { left: 1238px; --tx: -7px; }
.card header {
  position: absolute; left: 0; top: 0; width: 100%; height: 30px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-top: 3px;
  background: linear-gradient(180deg, #1c0641 0%, #0a021e 30%, #09021b 100%);
  border-bottom: 1px solid #0a031c; border-radius: 11px 11px 0 0;
  box-shadow: inset 0 1px 0 rgba(88,40,160,.55);
}
.card header img { width: auto; height: auto; transform: translateX(var(--tx, 0)); }
.card h3 { font: 600 12.5px 'Exo 2', sans-serif; letter-spacing: 0; color: #e2def2; white-space: nowrap; transform: translateX(var(--tx, 0)); }
.card .shot { position: absolute; left: 2px; top: 30px; width: 188px; height: 148px; border-radius: 5px; }
.card p {
  position: absolute; left: 19px; top: 201px; width: 156px; text-align: center;
  font: 400 11.5px/15px 'Exo 2', sans-serif; color: #b7a2e2;
  transform: translate(var(--tx, 0), -50%);
}

/* ================= LIVE BAND overlays ================= */
#band { position: absolute; left: 0; top: 938px; width: 1448px; height: 96px; font-family: 'Inter', sans-serif; }
.ev-title { position: absolute; left: 120px; top: 22px; font: 600 13px 'Exo 2', sans-serif; letter-spacing: 1.2px; color: #cc87fa; text-shadow: 0 0 9px rgba(180,110,255,.5); }
.ev-name  { position: absolute; left: 120px; top: 46px; font: 400 11px 'Inter', sans-serif; color: #b7c1d9; }
.ev-starts{ position: absolute; left: 120px; top: 66px; font: 400 11px 'Inter', sans-serif; color: #9fb3d0; }
.ev-starts span { font: 600 11px 'Inter', sans-serif; color: #5fc02a; text-shadow: 0 0 4px rgba(110,200,50,.3); }

.stat b { display: block; font: 600 18.5px/1 'Exo 2', sans-serif; color: #e8e2f5; letter-spacing: .3px; text-shadow: 0 0 7px rgba(140,110,255,.45); }
.stat i { display: block; font: 500 10px 'Inter', sans-serif; font-style: normal; letter-spacing: 1.4px; color: #9a92c6; margin-top: 9px; }
.stat.s1 { position: absolute; left: 500px; top: 34px; }
.stat.s1 i { margin-left: -42px; width: 150px; text-align: center; }
.stat.s2 { position: absolute; left: 646px; top: 34px; }
.stat.s2 i { margin-left: -46px; width: 150px; text-align: center; }
.stat.s3 { position: absolute; left: 801px; top: 34px; }
.stat.s3 i { margin-left: -48px; width: 160px; text-align: center; letter-spacing: .3px; transform: translateX(-14px); }

.btn-play {
  position: absolute; left: 940px; top: 62px; width: 350px; height: 27px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 15px) 100%, 14px 100%, 0 50%);
  background: linear-gradient(180deg, #2a5c12 4%, #4fae22 40%, #65c22a 52%, #398c1a 80%, #2f7a15 96%);
  border: 0;
  box-shadow: inset 0 1px 0 #82c54d, inset 0 -1px 0 #7bc33e;
  font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1.6px; color: #fff;
  padding: 0 36px 2px 0;
  text-shadow: 0 0 8px rgba(255,255,255,.4);
  transition: filter .15s;
}
.btn-play:hover { filter: brightness(1.15); }
#band .ball { position: absolute; left: 1280px; top: 0; width: 162px; height: 97px; pointer-events: none; }

/* ================= FOOTER ================= */
#foot { position: absolute; left: 0; top: 1035px; width: 1448px; height: 51px; }
.fl { position: absolute; top: 17px; font: 400 10.5px 'Inter', sans-serif; color: #8c81b3; letter-spacing: -.85px; }
.fl:hover { color: #cfc6ff; }
.fl.l1 { left: 81px; } .fl.l2 { left: 170px; } .fl.l3 { left: 247px; } .fl.l4 { left: 322px; }
.copy { position: absolute; left: 711px; top: 17px; transform: translateX(-50%); font: 400 11px 'Inter', sans-serif; color: #b1aaed; white-space: nowrap; letter-spacing: .97px; }
.soc { position: absolute; top: 11px; display: block; transition: filter .15s; }
.soc:hover { filter: brightness(1.35); }
.soc.s1 { left: 1212px; } .soc.s2 { left: 1243px; } .soc.s3 { left: 1274px; } .soc.s4 { left: 1305px; } .soc.s5 { left: 1336px; }

/* ============================================================================
   MOBILE MODE — html.mob (toggled by golaso.js when the stage would scale
   below .52). The fixed 1448x1086 stage is hidden and #mob (a normal-flow
   scrollable column bound to the SAME handlers/endpoints) is shown instead.
   Everything below is namespaced under #mob / html.mob: zero desktop impact.
   ============================================================================ */
#mob { display: none; }
html.mob #viewport { display: none; }
html.mob #mob { display: block; }
html.mob body { overflow-x: hidden; }

#mob {
  position: relative; min-height: 100vh; max-width: 100vw;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
#mob .mbg {
  /* z-index 0 (NOT -1): body has its own painted background, and negative-z
     children render BENEATH it — at -1 this layer is simply invisible. */
  position: fixed; left: -10px; right: -10px; top: -10px; bottom: -10px; z-index: 0;
  pointer-events: none;
  /* mbg_gol.jpg = the locker-room wing's content zone, exposure-lifted in the
     asset itself (the raw ext_l averages 6/255 luminance — CSS filters can't save it) */
  background: #0a0618 url(../img/ld_bg_stadium.jpg?v=1) center 42% / cover no-repeat;
}
#mob > :not(.mbg) { position: relative; z-index: 1; }
#mob .mbg::after { /* readability gradient over the locker-room art */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,2,12,0) 0%, rgba(3,2,12,.1) 55%, rgba(2,1,10,.4) 100%);
}

/* ---- hero ---- */
#mob .m-hero { display: flex; justify-content: center; padding: 4px 0 10px; }
/* logo_m.png = transparent neon logo (unpremultiplied from the mock's black
   backdrop) — no baked plate, so it can run a little wider */
#mob .m-logo { width: min(352px, 86vw); height: auto; filter: drop-shadow(0 6px 26px rgba(0,0,0,.6)); }

/* ---- shared card shell ---- */
#mob .m-card {
  position: relative; margin: 0 auto 16px; max-width: 470px;
  background: linear-gradient(180deg, rgba(6,8,30,.55), rgba(3,4,18,.64));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(122,92,220,.42); border-radius: 18px;
  box-shadow: 0 0 30px rgba(120,50,235,.30), 0 16px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(180,150,255,.18);
}

/* ---- auth card ---- */
#mob .m-auth { padding: 0 18px 20px; overflow: hidden; }
#mob .m-tabs { display: flex; margin: 0 -18px 18px; border-bottom: 1px solid #34365a; }
#mob .m-tab {
  flex: 1; height: 54px;
  font-family: 'Saira Semi Condensed', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: 1.5px; color: #8f8aa6; background: #0a0722;
  transition: filter .15s;
}
#mob .m-tab.is-active { color: #fff; }
#mob .m-tab-signin { border-radius: 15px 0 0 0; }
#mob .m-tab-join { border-radius: 0 15px 0 0; }
#mob .m-tab-signin.is-active {
  background: linear-gradient(180deg, #2c0663 0%, #16033d 45%, #1c0347 72%, #360381 96%);
  text-shadow: 0 0 8px rgba(190,120,255,.75), 0 0 18px rgba(150,60,255,.4);
  box-shadow: inset 0 1px 0 rgba(190,140,255,.7), inset 0 -2px 0 #a66bf0;
}
#mob .m-tab-join.is-active {
  background:
    radial-gradient(58% 65% at 50% 100%, rgba(90,220,70,.45), transparent 70%),
    linear-gradient(180deg, #17672b 0%, #0d411a 45%, #114d1e 72%, #2c8c25 96%);
  text-shadow: 0 0 6px rgba(150,255,150,.9), 0 0 16px rgba(80,230,90,.55);
  box-shadow: inset 0 1px 0 rgba(150,255,170,.6), inset 0 -2px 0 #7ed653;
}
#mob .m-hd { font: 600 21px/1.25 'Saira Semi Condensed', sans-serif; color: #fff; letter-spacing: .3px; }
#mob .m-sub { font: 400 13.5px/1.35 'Inter', sans-serif; color: #9a9db5; margin: 4px 0 16px; }

/* fields (inputs >=16px so iOS doesn't zoom) */
#mob .m-field { position: relative; display: block; margin-bottom: 12px; }
#mob .m-field input {
  width: 100%; height: 50px; padding: 0 48px 0 44px;
  background: #050618; border: 1px solid #2b2b4c; border-radius: 12px;
  color: #e8e9f2; font: 400 16px 'Inter', sans-serif; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#mob .m-field input::placeholder { color: #a2a6bd; }
#mob .m-field input:focus { border-color: #6d3fd6; box-shadow: 0 0 0 1px rgba(109,63,214,.35), 0 0 14px rgba(109,63,214,.25); }
#authM[data-mode="join"] .m-field input:focus { border-color: #2f9e4a; box-shadow: 0 0 0 1px rgba(47,158,74,.35), 0 0 14px rgba(47,158,74,.25); }
#mob .m-field .fi { width: 20px; height: 20px; }
#mob .m-field select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 50px; padding: 0 44px 0 44px;
  background: #050618 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8fb0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 18px center / 12px 7px no-repeat;
  border: 1px solid #2b2b4c; border-radius: 12px;
  color: #e8e9f2; font: 400 16px 'Inter', sans-serif; outline: none; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
#mob .m-field select:invalid { color: #a2a6bd; }
#mob .m-field select option { background: #0a0b20; color: #e8e9f2; }
#authM[data-mode="join"] .m-field select:focus { border-color: #2f9e4a; box-shadow: 0 0 0 1px rgba(47,158,74,.35), 0 0 14px rgba(47,158,74,.25); }
#mob .m-field .cflag { left: 14px; }
#mob .eye {
  width: 44px; height: 44px; right: 3px;
  display: flex; align-items: center; justify-content: center;
}
#mob .eye svg { width: 22px; height: 22px; }

/* remember / agree row */
#mob .m-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 14px; min-height: 44px; flex-wrap: wrap; }
#mob .chk { font-size: 14px; gap: 10px; padding: 8px 0; }
#mob .chk .box { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 5px; }
#mob .chk .box::after { left: 7px; top: 3px; width: 5px; height: 10px; }
#authM[data-mode="join"] .chk .box { background: #2fae3e; box-shadow: 0 0 8px rgba(60,200,80,.5); }
#authM[data-mode="join"] .chk input:not(:checked) + .box { background: #12132a; box-shadow: inset 0 0 0 1px #34365a; }
#mob .forgot { font-size: 14px; padding: 8px 0; }

/* buttons (glow via drop-shadow: box-shadow would be clipped by the clip-path) */
#mob .m-btn {
  display: block; width: 100%; height: 52px; border: 0;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  font-family: 'Saira Semi Condensed', sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 1.5px; color: #fff; text-shadow: 0 0 8px rgba(255,255,255,.4);
  transition: filter .15s, transform .05s;
}
#mob .m-btn:active { transform: translateY(1px); }
#mob .m-btn:disabled { filter: grayscale(.45) brightness(.8); cursor: default; }
#mob .m-btn-purple {
  background:
    radial-gradient(120px 30px at 13% 0%, rgba(193,127,246,.5), transparent 65%),
    linear-gradient(180deg, #5b05d1 0%, #46079e 40%, #30037c 65%, #2a0273 82%, #400396 100%);
  box-shadow: inset 0 1px 0 #c17ff6, inset 0 -1px 0 #7b35c4;
  filter: drop-shadow(0 0 9px rgba(130,50,240,.5));
}
#mob .m-btn-green {
  background:
    radial-gradient(150px 34px at 12% 0%, rgba(208,252,190,.55), transparent 65%),
    linear-gradient(180deg, #4faa23 0%, #2b6f16 30%, #1a4e0c 58%, #164a08 78%, #24690f 100%);
  box-shadow: inset 0 1px 0 #d0fcbe, inset 0 2px 3px rgba(149,212,111,.55), inset 0 -1px 0 #4b962a;
  filter: drop-shadow(0 0 9px rgba(90,200,60,.5));
}
#mob .form-msg { position: static; width: auto; margin-top: 12px; font-size: 13.5px; }

/* divider + socials */
#mob .m-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; }
#mob .m-divider::before, #mob .m-divider::after { content: ""; flex: 1; height: 1px; background: #262742; }
#mob .m-divider span { font: 400 12px 'Inter', sans-serif; color: #8f8aa6; white-space: nowrap; }
#mob .m-socials { display: flex; gap: 10px; }
#mob .m-socials .social { height: 48px; border-radius: 11px; font-size: 13px; }
#mob .m-socials .social svg { width: 18px; height: 18px; flex: 0 0 18px; }
#mob .m-legal { margin-top: 14px; text-align: center; font: 400 11.5px/1.5 'Inter', sans-serif; color: #6b6787; }
#mob .m-legal a { color: #bf76d6; }

/* ---- "your empire awaits" card ---- */
#mob .m-pitch { padding: 20px 18px; }
#mob .m-hd2 { font: 600 19px/1.3 'Saira Semi Condensed', sans-serif; color: #fff; margin-bottom: 16px; }
#mob .m-bullet { display: flex; gap: 13px; margin-bottom: 15px; }
#mob .m-bullet img { width: 40px; height: 40px; flex: 0 0 40px; }
#mob .m-bullet b { display: block; font: 600 15px/1.2 'Saira Semi Condensed', sans-serif; color: #fff; margin-top: 2px; }
#mob .m-bullet i { display: block; font: 400 13px/1.35 'Inter', sans-serif; font-style: normal; color: #a7bab2; margin-top: 3px; }
#mob .m-pitch .m-btn { margin-top: 4px; }

/* ---- feature cards: swipeable rail ---- */
#mob .m-rail-wrap {
  margin: 0 -16px 8px;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
#mob .m-rail {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 4px 20px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#mob .m-rail::-webkit-scrollbar { display: none; }
#mob .m-fcard {
  position: relative; flex: 0 0 226px; height: 182px; scroll-snap-align: center;
  background: linear-gradient(180deg, #0a0526 0%, #0a0327 60%, #05011a 85%, #030113 100%);
  border: 1px solid rgba(110,60,210,.4); border-radius: 14px;
  box-shadow: 0 0 22px rgba(110,55,220,.34), 0 10px 28px rgba(0,0,0,.5);
}
#mob .m-fcard header {
  position: absolute; left: 0; top: 0; width: 100%; height: 32px;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 3px;
  background: linear-gradient(180deg, #1c0641 0%, #0a021e 30%, #09021b 100%);
  border-bottom: 1px solid #0a031c; border-radius: 13px 13px 0 0;
  box-shadow: inset 0 1px 0 rgba(88,40,160,.55);
}
#mob .m-fcard h3 { font: 600 13px 'Exo 2', sans-serif; color: #e2def2; white-space: nowrap; }
#mob .m-fcard .ldc-art { position: absolute; left: 19px; right: auto; top: 36px; width: 188px; height: 86px; border-radius: 6px; overflow: hidden; }
#mob .m-fcard p {
  position: absolute; left: 13px; top: 130px; width: 200px; text-align: center;
  font: 400 12px/16px 'Exo 2', sans-serif; color: #b7a2e2;
}

/* ---- live events card ---- */
#mob .m-band { padding: 20px 18px; }
#mob .m-ev-title { display: block; font: 600 15px 'Exo 2', sans-serif; letter-spacing: 1.2px; color: #cc87fa; text-shadow: 0 0 9px rgba(180,110,255,.5); }
#mob .m-ev-name { display: block; font: 400 13.5px 'Inter', sans-serif; color: #b7c1d9; margin-top: 6px; }
#mob .m-ev-starts { display: block; font: 400 13px 'Inter', sans-serif; color: #9fb3d0; margin-top: 3px; }
#mob .m-ev-starts span { font-weight: 600; color: #5fc02a; text-shadow: 0 0 4px rgba(110,200,50,.3); }
#mob .m-stats { display: flex; justify-content: space-around; text-align: center; gap: 8px; margin: 18px 0; }
#mob .m-stat b { display: block; font: 600 20px/1 'Exo 2', sans-serif; color: #e8e2f5; letter-spacing: .3px; text-shadow: 0 0 7px rgba(140,110,255,.45); }
#mob .m-stat i { display: block; font: 500 9.5px 'Inter', sans-serif; font-style: normal; letter-spacing: 1px; color: #9a92c6; margin-top: 7px; }
#mob .m-btn-play {
  background: linear-gradient(180deg, #2a5c12 4%, #4fae22 40%, #65c22a 52%, #398c1a 80%, #2f7a15 96%);
  box-shadow: inset 0 1px 0 #82c54d, inset 0 -1px 0 #7bc33e;
  font-family: 'Exo 2', sans-serif; letter-spacing: 1.6px;
  filter: drop-shadow(0 0 9px rgba(90,200,60,.4));
}

/* ---- footer ---- */
#mob .m-foot { padding: 6px 4px 0; text-align: center; }
#mob .m-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-bottom: 12px; }
#mob .m-links a { font: 400 13px 'Inter', sans-serif; color: #8c81b3; padding: 7px 2px; }
#mob .m-links a:hover { color: #cfc6ff; }
#mob .m-socs { display: flex; justify-content: center; gap: 14px; margin-bottom: 10px; }
#mob .m-socs a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: rgba(40,32,78,.72); border: 1px solid rgba(150,120,240,.42); color: #cabfe8; transition: background .18s, color .18s, border-color .18s; }
#mob .m-socs a:hover { background: #a6e63c; color: #0b1502; border-color: #a6e63c; }
#mob .m-socs a svg { width: 17px; height: 17px; display: block; }
#mob .m-socs img { width: 29px; height: 29px; }
#mob .m-copy { font: 400 11.5px 'Inter', sans-serif; color: #b1aaed; letter-spacing: .5px; }


/* ========================================================================
   GOLASO.ORG — FM26 EXECUTIVE AUTH THEME
   ======================================================================== */
:root {
  --auth-bg: #04090d;
  --auth-panel: rgba(12, 21, 29, .95);
  --auth-panel-2: rgba(18, 30, 40, .94);
  --auth-line: rgba(163, 194, 214, .18);
  --auth-text: #f3f7fa;
  --auth-muted: #8fa1af;
  --auth-aqua: #45d6c7;
  --auth-sky: #70d9ff;
  --auth-hot: #ff5575;
  --auth-good: #a8e85a;
}
html, body { background: var(--auth-bg) !important; }
body {
  color: var(--auth-text);
  background:
    linear-gradient(180deg, rgba(2,7,11,.12), rgba(2,7,11,.78)),
    url('../img/game/fm26_tunnel.svg') center / cover fixed no-repeat !important;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 300px at 50% 20%, rgba(112,217,255,.14), transparent 72%),
    linear-gradient(90deg, rgba(3,8,12,.58), transparent 28%, transparent 72%, rgba(3,8,12,.58));
}
#viewport { position:relative; isolation:isolate; }
#stage {
  background:
    linear-gradient(180deg, rgba(4,9,13,.10), rgba(4,9,13,.48)),
    url('../img/game/fm26_tunnel.svg') center / 1448px 1086px no-repeat !important;
  box-shadow: 0 36px 120px rgba(0,0,0,.48);
}
#stage::before, #stage::after { filter:saturate(.72) contrast(1.04) brightness(.82); }

#auth-fx {
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.52)) !important;
}
#auth {
  background:
    linear-gradient(105deg, rgba(15,25,34,.985), rgba(8,16,23,.99) 50%, rgba(13,28,29,.985)) !important;
  border-radius: 20px;
  clip-path: none !important;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
#auth::before {
  left:50% !important;
  background:
    linear-gradient(180deg, rgba(69,214,199,.055), transparent 44%),
    rgba(9,22,23,.34) !important;
}
#auth::after {
  padding:1px !important;
  background: linear-gradient(90deg, rgba(112,217,255,.52), rgba(164,194,214,.16) 48%, rgba(69,214,199,.52)) !important;
}
#auth-fx::before {
  content:""; position:absolute; left:349px; top:230px; width:750px; height:425px; pointer-events:none; z-index:5;
  border-radius:20px;
  background: url('../img/game/fm26_data_mesh.svg') right top / 430px auto no-repeat;
  opacity:.055;
}

#tabs {
  height:56px !important;
  background: rgba(4,10,15,.46);
  border-bottom:1px solid rgba(160,190,211,.13);
}
.tab { height:56px !important; }
.tab-signin, .tab-join { width:50% !important; }
.tab span {
  font-size:16px !important;
  letter-spacing:2.5px !important;
  color:#a9b6c0 !important;
  text-shadow:none !important;
}
.tab::before {
  inset:0 !important;
  width:auto !important;
  left:0 !important;
  clip-path:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.tab::after {
  content:""; position:absolute; left:42px; right:42px; bottom:0; height:3px;
  background:transparent; transform:none !important;
}
.tab-signin::after { left:42px !important; width:auto !important; }
#auth[data-mode="signin"] .tab-signin span,
#auth:not([data-mode]) .tab-signin span { color:#fff !important; }
#auth[data-mode="signin"] .tab-signin::after,
#auth:not([data-mode]) .tab-signin::after {
  background:linear-gradient(90deg,var(--auth-sky),var(--auth-aqua));
  box-shadow:0 0 16px rgba(69,214,199,.22);
}
#auth[data-mode="join"] .tab-join span { color:#fff !important; }
#auth[data-mode="join"] .tab-join::after {
  background:linear-gradient(90deg,var(--auth-aqua),var(--auth-good));
  box-shadow:0 0 16px rgba(69,214,199,.22);
}
#tabs::after { display:none !important; }

.col { top:56px !important; }
.col-left .hd, .col-right .hd { color:#f5f8fa !important; letter-spacing:.2px !important; }
.col-left .sub, .col-right .sub { color:var(--auth-muted) !important; }
.field input, .field select {
  background:rgba(4,11,16,.78) !important;
  border:1px solid rgba(159,190,211,.22) !important;
  color:#f1f6f8 !important;
  border-radius:9px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.field input::placeholder { color:#758793 !important; }
.field input:focus, .field select:focus {
  border-color:rgba(69,214,199,.64) !important;
  box-shadow:0 0 0 3px rgba(69,214,199,.11) !important;
}
.field .fi, .eye { color:#8095a3 !important; }
.row-remember, .forgot, .legal { color:#8fa1af !important; }
.forgot:hover { color:#dffcff !important; }
.chk input:checked + span { background:var(--auth-aqua) !important; border-color:var(--auth-aqua) !important; }

.btn, .btn-purple, .btn-green, .btn-create, .btn-play {
  border-radius:9px !important;
  border:1px solid rgba(194,249,241,.22) !important;
  background:linear-gradient(135deg,#62e7d5,#35bcae) !important;
  color:#03110f !important;
  text-shadow:0 1px 0 rgba(255,255,255,.25) !important;
  box-shadow:0 10px 24px rgba(53,188,174,.18), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.btn:hover, .btn-purple:hover, .btn-green:hover, .btn-create:hover, .btn-play:hover { filter:brightness(1.06); transform:translateY(-1px); }
.divider::before, .divider::after { background:rgba(159,190,211,.14) !important; }
.divider { color:#788a96 !important; }
.social {
  background:linear-gradient(180deg,rgba(24,39,50,.90),rgba(9,18,26,.92)) !important;
  border-color:rgba(159,190,211,.17) !important;
  color:#cbd7de !important;
  border-radius:9px !important;
}
.social:hover { border-color:rgba(112,217,255,.30) !important; background:rgba(112,217,255,.07) !important; color:#fff !important; }

.card, #cards .card, #band {
  background:linear-gradient(180deg,rgba(18,30,40,.94),rgba(7,15,22,.97)) !important;
  border-color:rgba(160,191,211,.16) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.card::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('../img/game/fm26_data_mesh.svg') right top / 330px auto no-repeat;
  opacity:.045;
}
#mob {
  background:
    linear-gradient(180deg,rgba(3,8,12,.24),rgba(3,8,12,.82)),
    url('../img/game/fm26_tunnel.svg') center top / cover no-repeat !important;
}
#mob .m-auth, #mob .m-card, #mob .m-fcard, #mob .m-band {
  background:linear-gradient(180deg,rgba(18,30,40,.965),rgba(7,15,22,.98)) !important;
  border-color:rgba(160,191,211,.17) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
#mob .m-tab.on::after { background:linear-gradient(90deg,var(--auth-sky),var(--auth-aqua)) !important; }
#mob .m-field input, #mob .m-field select {
  background:rgba(4,11,16,.82) !important;
  border-color:rgba(159,190,211,.21) !important;
}
#mob .m-field input:focus, #mob .m-field select:focus {
  border-color:rgba(69,214,199,.62) !important;
  box-shadow:0 0 0 3px rgba(69,214,199,.10) !important;
}
#mob .m-btn { background:linear-gradient(135deg,#62e7d5,#35bcae) !important; color:#03110f !important; }
#mob .m-socs a { background:rgba(21,35,46,.88) !important; border-color:rgba(160,191,211,.18) !important; }
#mob .m-socs a:hover { background:var(--auth-aqua) !important; border-color:var(--auth-aqua) !important; color:#03110f !important; }

::selection { background:rgba(69,214,199,.34); color:#fff; }
:focus-visible { outline:2px solid var(--auth-sky) !important; outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ========================================================================
   GOLASO FM26 — AUTH LOGO SAFE-AREA FIX (2026-07-12)
   The brand is rendered as its own layer instead of depending on a cropped
   background. It stays fully visible on desktop and mobile at every scale.
   ======================================================================== */
#viewport {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
#stage {
  overflow: visible !important;
}

/* Desktop logo: uses the existing transparent logo_m.png asset. */
#auth-fx::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 72px;
  width: 430px;
  height: 142px;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  background: url('../img/logo_m.png') center / contain no-repeat;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.58));
}

/* Create real breathing room between the logo and the form. */
#auth {
  top: 248px !important;
}
#auth-fx::before {
  top: 248px !important;
}

/* Avoid a parent transform enlarging the logo beyond its safe area. */
#auth-fx {
  transform-origin: 724px 673px !important;
  transform: scale(1.04, 1.02) !important;
}

/* Mobile logo is constrained by both width and height and can never be cut. */
#mob .m-hero {
  min-height: 104px;
  padding: 12px 12px 16px !important;
  overflow: visible !important;
  align-items: center;
}
#mob .m-logo {
  display: block;
  width: min(330px, 82vw) !important;
  max-width: 100% !important;
  max-height: 116px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  transform: none !important;
}

@media (max-width: 980px) and (min-width: 761px) {
  #auth-fx::after { top: 78px; width: 390px; height: 126px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  #auth-fx::after { top: 42px; width: 350px; height: 112px; }
  #auth { top: 205px !important; }
  #auth-fx::before { top: 205px !important; }
}

/* GOLASO FM26 v4 — mobile logo safe area */
#mob .m-hero { padding-top: 12px !important; overflow: visible !important; }
#mob .m-logo { display: block !important; height: auto !important; object-fit: contain !important; }
/* GOLASO FM26 — PURPLE PORTAL AUTH / WOW EDITION v6 */
:root{
  --auth-bg:#07050d;--auth-panel:rgba(25,16,42,.97);--auth-panel-2:rgba(40,25,65,.96);
  --auth-line:rgba(209,183,255,.20);--auth-text:#f8f4ff;--auth-muted:#9589a6;
  --auth-aqua:#a96cff;--auth-sky:#737dff;--auth-hot:#ff5b9d;--auth-good:#66e391;
  --auth-violet:#8d55ff;--auth-magenta:#eb3fa6;
}
html,body{background:#07050d!important}
body{
  color:var(--auth-text)!important;
  background:
    radial-gradient(880px 430px at 50% 10%,rgba(141,85,255,.25),transparent 72%),
    linear-gradient(180deg,rgba(8,5,16,.22),rgba(8,5,16,.88)),
    url('../img/game/fm26_violet_tunnel.svg') center/cover fixed no-repeat!important;
}
body::before{
  background:
    radial-gradient(650px 300px at 50% 18%,rgba(235,63,166,.13),transparent 72%),
    linear-gradient(90deg,rgba(7,4,14,.64),transparent 28%,transparent 72%,rgba(7,4,14,.64))!important;
}
#stage{
  background:
    linear-gradient(180deg,rgba(9,5,17,.08),rgba(9,5,17,.50)),
    url('../img/game/fm26_violet_tunnel.svg') center/1448px 1086px no-repeat!important;
  box-shadow:0 38px 126px rgba(0,0,0,.58)!important;
}
#auth-fx{filter:drop-shadow(0 30px 80px rgba(0,0,0,.60))!important}
#auth{
  background:linear-gradient(108deg,rgba(38,24,62,.985),rgba(17,10,31,.992) 50%,rgba(29,16,48,.986))!important;
  border-radius:16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 0 1px rgba(212,187,255,.08)!important;
}
#auth::before{background:linear-gradient(180deg,rgba(141,85,255,.07),transparent 45%),rgba(23,13,39,.48)!important}
#auth::after{background:linear-gradient(90deg,var(--auth-violet),rgba(211,184,255,.17) 48%,var(--auth-magenta))!important;opacity:.82!important}
#auth-fx::before{background:url('../img/game/fm26_prism_grid.svg') right top/430px auto no-repeat!important;opacity:.085!important}
#auth-fx::after{filter:drop-shadow(0 12px 32px rgba(0,0,0,.64)) saturate(1.05)!important}
#tabs{background:rgba(9,5,17,.55)!important;border-bottom-color:rgba(209,183,255,.14)!important}
.tab span{color:#b5a8c5!important;text-shadow:none!important}
.tab.on span,.tab.active span{color:#fff!important}
.tab::before{background:transparent!important}
.tab::after{background:transparent!important}
.tab.on::after,.tab.active::after{content:"";position:absolute;left:16%;right:16%;bottom:0;height:3px;background:linear-gradient(90deg,var(--auth-violet),var(--auth-magenta))!important;box-shadow:0 0 18px rgba(235,63,166,.34)}
.auth-side,.auth-form,.form-side{color:#f7f2ff!important}
.auth-side h1,.auth-side h2,.auth-form h1,.auth-form h2{color:#fff!important;text-shadow:0 8px 26px rgba(0,0,0,.40)}
.auth-side p,.auth-form p,.micro,.help{color:var(--auth-muted)!important}
.field input,.field select,.field textarea,#mob .m-field input,#mob .m-field select{
  background:rgba(9,5,17,.78)!important;border-color:rgba(209,183,255,.21)!important;color:#f8f4ff!important;border-radius:8px!important;
}
.field input::placeholder,#mob .m-field input::placeholder{color:#776b88!important}
.field input:focus,.field select:focus,.field textarea:focus,#mob .m-field input:focus,#mob .m-field select:focus{
  border-color:rgba(169,108,255,.70)!important;box-shadow:0 0 0 3px rgba(141,85,255,.14)!important;
}
.btn,.auth-btn,.submit,#mob .m-btn{
  background:linear-gradient(100deg,var(--auth-violet),var(--auth-magenta))!important;color:#fff!important;
  border-color:rgba(255,255,255,.14)!important;border-radius:8px!important;
  box-shadow:0 12px 28px rgba(174,47,177,.25),inset 0 1px 0 rgba(255,255,255,.20)!important;
}
.btn:hover,.auth-btn:hover,.submit:hover,#mob .m-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.social,.social-btn,#mob .m-socs a{background:linear-gradient(180deg,rgba(49,31,78,.88),rgba(20,12,36,.94))!important;border-color:rgba(209,183,255,.18)!important;color:#d5c9e4!important;border-radius:8px!important}
.social:hover,.social-btn:hover,#mob .m-socs a:hover{background:rgba(141,85,255,.18)!important;border-color:rgba(235,63,166,.36)!important;color:#fff!important}
.feature,.feat,.fcard,.auth-card,#mob .m-card{
  background:linear-gradient(180deg,rgba(39,25,64,.96),rgba(15,9,28,.99))!important;
  border-color:rgba(209,183,255,.17)!important;box-shadow:0 20px 58px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.feature::before,.feat::before,.fcard::before{background:url('../img/game/fm26_prism_grid.svg') right top/320px auto no-repeat!important;opacity:.09!important}
.feature:hover,.feat:hover,.fcard:hover{border-color:rgba(227,205,255,.28)!important;transform:translateY(-2px)!important}
#liveBand,.live-band,.footer-band{background:linear-gradient(90deg,rgba(39,24,64,.96),rgba(18,10,33,.98),rgba(34,18,55,.96))!important;border-color:rgba(209,183,255,.14)!important}
#mob{background:linear-gradient(180deg,#10091f,#080510)!important}
#mob .m-box{background:linear-gradient(180deg,rgba(38,24,62,.98),rgba(15,9,28,.995))!important;border-color:rgba(209,183,255,.18)!important;box-shadow:0 24px 66px rgba(0,0,0,.50)!important}
#mob .m-tab.on::after{background:linear-gradient(90deg,var(--auth-violet),var(--auth-magenta))!important}
::selection{background:rgba(235,63,166,.35)!important;color:#fff!important}
:focus-visible{outline:2px solid #a96cff!important;outline-offset:2px}
@media(max-width:760px){body{background:#080510!important}.btn:hover,.auth-btn:hover,.submit:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}