/* A SPORTS LIFE — UI V2
   Fresh shell. This file intentionally owns the visible app layout.
   Legacy style.css is retained only for legacy detail-panel internals. */

:root{
  --v2-bg:#06070a;
  --v2-surface:#11151b;
  --v2-surface-2:#171c23;
  --v2-surface-3:#20262e;
  --v2-border:#303741;
  --v2-border-strong:#424a56;
  --v2-text:#f5f7fa;
  --v2-muted:#8e96a1;
  --v2-faint:#5f6670;
  --v2-red:#e42f3f;
  --v2-red-2:#b6202e;
  --v2-red-glow:rgba(228,47,63,.24);
  --v2-radius:18px;
  --v2-radius-sm:12px;
  --v2-shadow:0 16px 36px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--v2-bg);color:var(--v2-text)}
body.ui-v2{
  min-height:100dvh;
  overflow:hidden;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  background:
    linear-gradient(180deg,rgba(5,6,9,.08),rgba(5,6,9,.86)),
    url("assets/menu-stadium.svg") center/cover fixed no-repeat;
}
body.ui-v2::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse at 50% 27%,rgba(173,24,38,.20),transparent 30%),
    linear-gradient(90deg,rgba(0,0,0,.38),transparent 22%,transparent 78%,rgba(0,0,0,.38));
}

/* Hide old boot/header chrome that belonged to the prototype. */
body.ui-v2 .boot-status{display:none!important}
body.ui-v2 .app-shell{height:100dvh;min-height:100dvh;background:transparent!important;overflow:hidden}

/* ------------------------ MAIN MENU ------------------------ */

body.ui-v2 .setup-screen{
  width:100%;
  height:100dvh;
  min-height:100dvh;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  padding:max(14px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom))!important;
  background:transparent!important;
  overflow:hidden!important;
}

body.ui-v2 .setup-card-mobile{
  width:min(100%,430px)!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-rows:minmax(260px,39%) minmax(0,1fr) 22px!important;
  gap:14px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

/* Everything from old setup that's not the new title block/menu is hidden unless routed open. */
body.ui-v2 .launch-brand{
  grid-row:1;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-height:0!important;
  padding:0 0 2px!important;
}
body.ui-v2 .launch-brand::before{
  content:"";
  position:absolute;
  width:390px;height:220px;
  top:22%;
  left:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(196,28,44,.28),transparent 66%);
  filter:blur(15px);
  pointer-events:none;
}
body.ui-v2 .launch-brand-logo{
  width:min(90%,390px)!important;
  max-height:300px!important;
  object-fit:contain;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.52));
}
body.ui-v2 .launch-brand-tagline{
  margin-top:-10px!important;
  color:#b7bdc6!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.27em!important;
  text-transform:uppercase;
}

body.ui-v2 #setup-menu-panel{
  grid-row:2;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:repeat(6,minmax(62px,1fr))!important;
  gap:10px!important;
  align-content:stretch!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
body.ui-v2 #setup-menu-panel .main-menu-action{
  width:100%!important;
  min-height:62px!important;
  height:auto!important;
  max-height:78px!important;
  margin:0!important;
  padding:8px 14px!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) 24px!important;
  gap:13px!important;
  align-items:center!important;
  border-radius:20px!important;
  background:linear-gradient(110deg,rgba(29,34,42,.98),rgba(15,18,24,.98))!important;
  border:1px solid var(--v2-border-strong)!important;
  color:var(--v2-text)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 12px 26px rgba(0,0,0,.26)!important;
  text-align:left!important;
}
body.ui-v2 #setup-menu-panel .main-menu-action-primary{
  background:linear-gradient(110deg,rgba(180,29,43,.96),rgba(76,24,31,.92) 53%,rgba(18,18,23,.98))!important;
  border-color:#d73646!important;
  box-shadow:inset 5px 0 var(--v2-red),0 16px 32px rgba(112,8,20,.27)!important;
}
body.ui-v2 #setup-menu-panel .main-menu-icon{
  width:50px!important;height:50px!important;
  border-radius:14px!important;
  display:grid!important;place-items:center!important;
  background:#242a33!important;
  border:1px solid #454d58!important;
  color:#eef1f5!important;
}
body.ui-v2 #setup-menu-panel .main-menu-action-primary .main-menu-icon{
  background:#c72a39!important;border-color:#ed4856!important;
}
body.ui-v2 #setup-menu-panel .main-menu-copy{
  display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important;
}
body.ui-v2 #setup-menu-panel .main-menu-copy strong{
  color:#fff!important;font-size:19px!important;line-height:1!important;font-weight:950!important;letter-spacing:0!important;
}
body.ui-v2 #setup-menu-panel .main-menu-copy small{
  color:#959da8!important;font-size:11px!important;line-height:1.1!important;font-weight:650!important;
}
body.ui-v2 #setup-menu-panel .main-menu-arrow{
  justify-self:end!important;color:#858d98!important;font-size:28px!important;line-height:1!important;
}
body.ui-v2 #setup-menu-panel .main-menu-action-primary .main-menu-arrow{color:#f2f4f7!important}

body.ui-v2 .mockup-menu-footer{
  grid-row:3;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  color:#626a75!important;
  font-size:7px!important;
  letter-spacing:.12em!important;
}

/* Routed setup subpages are independent scrollable cards. */
body.ui-v2 .setup-route-panel:not(#setup-menu-panel){
  position:absolute!important;
  inset:max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  max-width:430px!important;
  margin:0 auto!important;
  overflow-y:auto!important;
  background:linear-gradient(180deg,rgba(18,21,27,.98),rgba(9,11,15,.98))!important;
  border:1px solid var(--v2-border)!important;
  border-radius:22px!important;
  padding:16px!important;
  box-shadow:var(--v2-shadow)!important;
  z-index:30!important;
}

/* ------------------------ IN-GAME SHELL ------------------------ */

body.ui-v2 .game-screen{
  width:min(100%,460px)!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  background:linear-gradient(180deg,rgba(8,10,14,.92),rgba(5,6,9,.97))!important;
  border-left:1px solid rgba(255,255,255,.025)!important;
  border-right:1px solid rgba(255,255,255,.025)!important;
  overflow:hidden!important;
}
body.ui-v2 .game-screen.hidden{display:none!important}
body.ui-v2 .game-screen>.player-card,
body.ui-v2 .game-screen>.energy-card,
body.ui-v2 .game-screen>.status-strip,
body.ui-v2 .game-screen>.top-tabs{display:none!important}

body.ui-v2 .content-area{
  grid-row:1!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
}
body.ui-v2 .content-section,
body.ui-v2 .bottom-view{height:100%!important;min-height:0!important;overflow:hidden!important}

/* Router shell owns full visible page. */
body.ui-v2 .screen-page{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr)!important;
  background:transparent!important;
}
body.ui-v2 .screen-page>.screen-page-head{display:none!important}
body.ui-v2 .screen-page-body{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:max(16px,env(safe-area-inset-top)) 16px 18px!important;
  scrollbar-width:none!important;
}
body.ui-v2 .screen-page-body::-webkit-scrollbar{display:none!important}
body.ui-v2 .screen-page[data-level="hub"] .screen-page-body{overflow:hidden!important}
body.ui-v2 .screen-page[data-level="panel"] .screen-page-body{overflow-y:auto!important;padding-top:52px!important}

/* Page title */
body.ui-v2 .launch-page-head{
  height:42px;
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 12px;
}
body.ui-v2 .launch-page-head h2{
  margin:0;color:#fff;font-size:24px;line-height:1;font-weight:950;letter-spacing:.025em;
}
body.ui-v2 .launch-energy-pill{
  height:32px;padding:0 11px;border-radius:999px;
  display:flex;align-items:center;gap:6px;
  background:#13171d;border:1px solid #353c46;color:#f0f2f5;
}
body.ui-v2 .launch-energy-pill i{
  width:8px;height:15px;background:var(--v2-red);
  clip-path:polygon(50% 0,100% 0,66% 43%,100% 43%,26% 100%,42% 55%,0 55%);
}
body.ui-v2 .launch-energy-pill span{font-size:7px;color:#7d8590;font-weight:900;letter-spacing:.11em}
body.ui-v2 .launch-energy-pill strong{font-size:10px}

/* Home */
body.ui-v2 .launch-home-dashboard{
  height:100%;display:flex;flex-direction:column;gap:10px;overflow:hidden;
}
body.ui-v2 .launch-home-hero{
  flex:0 0 auto;
  padding:13px;
  border-radius:20px;
  background:linear-gradient(145deg,#1b2027,#101319)!important;
  border:1px solid #3b434e!important;
  box-shadow:var(--v2-shadow)!important;
}
body.ui-v2 .launch-home-id{
  display:grid;grid-template-columns:68px minmax(0,1fr) 54px;gap:12px;align-items:center;
}
body.ui-v2 .launch-home-portrait{
  width:66px;height:66px;border-radius:18px;overflow:hidden;
  border:1px solid #555d68;box-shadow:0 0 0 3px rgba(228,47,63,.22);
}
body.ui-v2 .launch-home-portrait img{width:100%;height:100%;display:block;object-fit:cover}
body.ui-v2 .launch-home-copy h1{margin:0 0 5px;font-size:20px;color:#fff;font-weight:950}
body.ui-v2 .launch-home-copy p{margin:0;color:#e6e9ed;font-size:10px;font-weight:800}
body.ui-v2 .launch-home-copy small{display:block;margin-top:4px;color:#838b96;font-size:9px}
body.ui-v2 .launch-ovr{
  width:52px;height:52px;border-radius:50%;
  display:grid;align-content:center;place-items:center;
  background:#0f1217;border:2px solid var(--v2-red);box-shadow:inset 0 0 0 3px #232831;
}
body.ui-v2 .launch-ovr strong{font-size:16px;line-height:1}.launch-ovr span{font-size:6px;color:#8c949f;margin-top:2px;font-weight:900}
body.ui-v2 .launch-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
body.ui-v2 .launch-stat-row>div{
  min-width:0;padding:8px 4px;text-align:center;background:#0f1217;border:1px solid #303640;border-radius:11px
}
body.ui-v2 .launch-stat-row strong{display:block;color:#fff;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ui-v2 .launch-stat-row span{display:block;margin-top:2px;color:#6d7580;font-size:6px;font-weight:900;letter-spacing:.08em}

body.ui-v2 .launch-info-card{
  width:100%;min-height:76px;flex:0 0 auto;
  padding:11px 13px;border-radius:16px!important;
  background:linear-gradient(180deg,#181d24,#111419)!important;
  border:1px solid #343b45!important;
  color:#f5f7fa!important;text-align:left!important;box-shadow:none!important;
}
body.ui-v2 .launch-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
body.ui-v2 .launch-card-head span{font-size:8px;color:#8c949f;font-weight:950;letter-spacing:.12em}
body.ui-v2 .launch-card-head b{font-size:20px;color:#707884;font-weight:400}
body.ui-v2 .launch-info-card>strong{font-size:13px;color:#fff}
body.ui-v2 .launch-info-card>small{display:block;margin-top:3px;color:#828a95;font-size:8.5px}
body.ui-v2 .launch-news-card{flex:1 1 auto;min-height:84px;overflow:hidden}

/* Hubs */
body.ui-v2 .launch-hub-page{
  height:100%;display:flex;flex-direction:column;overflow:hidden;
}
body.ui-v2 .launch-hub-stack{
  min-height:0;display:grid;gap:10px;align-content:start;
}
body.ui-v2 .launch-hub-stack.compact{gap:8px}
body.ui-v2 .launch-hub-card{
  width:100%;min-height:70px;
  display:grid;grid-template-columns:48px minmax(0,1fr) 22px;gap:12px;align-items:center;
  padding:9px 12px;border-radius:17px!important;
  background:linear-gradient(110deg,#1a1f26,#101319)!important;
  border:1px solid #373e48!important;
  color:#fff!important;text-align:left!important;box-shadow:none!important;
}
body.ui-v2 .launch-hub-stack.compact .launch-hub-card{min-height:60px}
body.ui-v2 .launch-hub-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:#232932;border:1px solid #3d4550;color:#e6e9ed;
  font:800 18px/1 Arial,sans-serif;
}
body.ui-v2 .launch-hub-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
body.ui-v2 .launch-hub-copy strong{font-size:14px;color:#fff;font-weight:950}
body.ui-v2 .launch-hub-copy small{font-size:8.5px;color:#808894}
body.ui-v2 .launch-hub-arrow{justify-self:end;color:#737b86;font-size:25px}

/* Detail pages inherit legacy components but use V2 frame and colors. */
body.ui-v2 .screen-page[data-level="panel"] .panel,
body.ui-v2 .screen-page[data-level="panel"] .status-box,
body.ui-v2 .screen-page[data-level="panel"] .list-row,
body.ui-v2 .screen-page[data-level="panel"] .schedule-row,
body.ui-v2 .screen-page[data-level="panel"] .world-star,
body.ui-v2 .screen-page[data-level="panel"] .relationship-card{
  background:linear-gradient(180deg,#181d24,#111419)!important;
  border:1px solid #353c46!important;
  color:#f4f6f8!important;
  border-radius:15px!important;
}
body.ui-v2 .screen-page[data-level="panel"] .panel{padding:12px!important;margin:0 0 10px!important}
body.ui-v2 .screen-page[data-level="panel"] .panel-title{color:#fff!important}
body.ui-v2 .screen-router-back{
  position:fixed!important;top:max(12px,env(safe-area-inset-top));left:12px;z-index:100!important;
  min-height:32px!important;padding:7px 11px!important;border-radius:999px!important;
  background:#171b21!important;border:1px solid #3a414b!important;color:#f3f5f7!important;
  font-size:8px!important;font-weight:900!important;
}
body.ui-v2 .screen-page[data-level="hub"] .screen-router-back{display:none!important}

/* Bottom navigation */
body.ui-v2 .bottom-nav{
  grid-row:2!important;
  width:100%!important;
  height:calc(66px + env(safe-area-inset-bottom))!important;
  min-height:66px!important;
  display:grid!important;grid-template-columns:repeat(5,1fr)!important;
  padding:4px 6px env(safe-area-inset-bottom)!important;
  background:rgba(7,8,11,.99)!important;
  border-top:1px solid #2c323a!important;
  backdrop-filter:blur(16px)!important;
}
body.ui-v2 .nav-btn{
  position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
  background:transparent!important;border:0!important;color:#6c7480!important;border-radius:10px!important;
}
body.ui-v2 .nav-btn.active{color:#fff!important;background:linear-gradient(180deg,rgba(228,47,63,.15),rgba(228,47,63,.025))!important}
body.ui-v2 .nav-btn.active::before{
  content:"";position:absolute;top:0;width:30px;height:2px;border-radius:99px;background:var(--v2-red)
}
body.ui-v2 .nav-line-icon{font-size:18px!important;line-height:1!important;color:inherit!important}
body.ui-v2 .nav-btn span{font-size:7px!important;font-weight:850!important;color:inherit!important}

/* Standard controls */
body.ui-v2 button{font-family:inherit}
body.ui-v2 .primary-btn,
body.ui-v2 .age-next-btn{
  background:linear-gradient(180deg,#e73747,#b6202e)!important;border:1px solid #ed4a58!important;color:#fff!important;border-radius:12px!important
}
body.ui-v2 .secondary-btn{
  background:#1a1f26!important;border:1px solid #39414b!important;color:#e6e9ed!important;border-radius:12px!important
}
body.ui-v2 input,
body.ui-v2 textarea,
body.ui-v2 select{
  background:#0e1116!important;border:1px solid #39414b!important;color:#f2f4f7!important;border-radius:12px!important
}

/* Scale down gracefully on shorter in-app browser windows without turning tiny. */
@media(max-height:900px){
  body.ui-v2 .setup-card-mobile{
    grid-template-rows:minmax(220px,33%) minmax(0,1fr) 18px!important;
    gap:10px!important;
  }
  body.ui-v2 .launch-brand-logo{width:min(82%,340px)!important;max-height:235px!important}
  body.ui-v2 #setup-menu-panel{gap:7px!important;grid-template-rows:repeat(6,minmax(54px,1fr))!important}
  body.ui-v2 #setup-menu-panel .main-menu-action{min-height:54px!important;max-height:68px!important}
  body.ui-v2 #setup-menu-panel .main-menu-icon{width:42px!important;height:42px!important}
  body.ui-v2 #setup-menu-panel .main-menu-copy strong{font-size:16px!important}
  body.ui-v2 #setup-menu-panel .main-menu-copy small{font-size:9px!important}
}

@media(max-height:760px){
  body.ui-v2 .setup-card-mobile{
    grid-template-rows:minmax(190px,30%) minmax(0,1fr) 16px!important;
  }
  body.ui-v2 .launch-brand-logo{width:min(72%,300px)!important;max-height:200px!important}
  body.ui-v2 .launch-brand-tagline{font-size:8px!important}
  body.ui-v2 #setup-menu-panel{gap:6px!important;grid-template-rows:repeat(6,minmax(48px,1fr))!important}
  body.ui-v2 #setup-menu-panel .main-menu-action{min-height:48px!important;max-height:60px!important;padding:6px 11px!important;grid-template-columns:38px minmax(0,1fr) 18px!important}
  body.ui-v2 #setup-menu-panel .main-menu-icon{width:36px!important;height:36px!important}
  body.ui-v2 #setup-menu-panel .main-menu-copy strong{font-size:14px!important}
  body.ui-v2 #setup-menu-panel .main-menu-copy small{font-size:8px!important}
}


/* ==========================================================================
   RC72 — SCREENSHOT-MEASURED MENU PROPORTIONS
   Based on deployed RC71 screenshot:
   - brand block ended too early
   - cards started ~200px too high
   - cards ended ~350px too high
   - footer position was acceptable
   ========================================================================== */

body.ui-v2 .setup-card-mobile{
  grid-template-rows:minmax(430px,45%) minmax(0,1fr) 22px!important;
  gap:12px!important;
  align-content:stretch!important;
}

/* The hero should occupy the upper half instead of collapsing upward. */
body.ui-v2 .launch-brand{
  justify-content:end!important;
  padding:0 0 28px!important;
}
body.ui-v2 .launch-brand-logo{
  width:min(96%,410px)!important;
  max-height:340px!important;
}
body.ui-v2 .launch-brand-tagline{
  margin-top:-8px!important;
  font-size:10px!important;
}

/* Larger cards and denser lower-half composition. */
body.ui-v2 #setup-menu-panel{
  grid-template-rows:repeat(6,minmax(74px,1fr))!important;
  gap:9px!important;
  align-content:stretch!important;
}
body.ui-v2 #setup-menu-panel .main-menu-action{
  min-height:74px!important;
  max-height:88px!important;
  padding:10px 16px!important;
  grid-template-columns:54px minmax(0,1fr) 26px!important;
  border-radius:21px!important;
}
body.ui-v2 #setup-menu-panel .main-menu-icon{
  width:52px!important;
  height:52px!important;
  border-radius:15px!important;
}
body.ui-v2 #setup-menu-panel .main-menu-copy strong{
  font-size:20px!important;
}
body.ui-v2 #setup-menu-panel .main-menu-copy small{
  font-size:11px!important;
}
body.ui-v2 #setup-menu-panel .main-menu-arrow{
  font-size:29px!important;
}

/* The screenshot's browser viewport is tall, so keep cards large rather than
   triggering the prior shrink rules too early. */
@media(max-height:1180px){
  body.ui-v2 .setup-card-mobile{
    grid-template-rows:minmax(350px,43%) minmax(0,1fr) 20px!important;
    gap:10px!important;
  }
  body.ui-v2 .launch-brand{
    padding-bottom:22px!important;
  }
  body.ui-v2 .launch-brand-logo{
    width:min(92%,390px)!important;
    max-height:300px!important;
  }
  body.ui-v2 #setup-menu-panel{
    grid-template-rows:repeat(6,minmax(68px,1fr))!important;
    gap:8px!important;
  }
  body.ui-v2 #setup-menu-panel .main-menu-action{
    min-height:68px!important;
    max-height:82px!important;
  }
}

/* Only genuinely short viewports shrink materially. */
@media(max-height:900px){
  body.ui-v2 .setup-card-mobile{
    grid-template-rows:minmax(285px,39%) minmax(0,1fr) 18px!important;
  }
  body.ui-v2 .launch-brand-logo{
    width:min(86%,355px)!important;
    max-height:255px!important;
  }
  body.ui-v2 #setup-menu-panel{
    grid-template-rows:repeat(6,minmax(60px,1fr))!important;
    gap:7px!important;
  }
  body.ui-v2 #setup-menu-panel .main-menu-action{
    min-height:60px!important;
    max-height:72px!important;
  }
  body.ui-v2 #setup-menu-panel .main-menu-icon{
    width:46px!important;
    height:46px!important;
  }
  body.ui-v2 #setup-menu-panel .main-menu-copy strong{
    font-size:17px!important;
  }
  body.ui-v2 #setup-menu-panel .main-menu-copy small{
    font-size:9.5px!important;
  }
}

@media(max-height:760px){
  body.ui-v2 .setup-card-mobile{
    grid-template-rows:minmax(230px,35%) minmax(0,1fr) 16px!important;
  }
  body.ui-v2 .launch-brand-logo{
    width:min(78%,320px)!important;
    max-height:215px!important;
  }
  body.ui-v2 #setup-menu-panel{
    grid-template-rows:repeat(6,minmax(52px,1fr))!important;
    gap:6px!important;
  }
  body.ui-v2 #setup-menu-panel .main-menu-action{
    min-height:52px!important;
    max-height:62px!important;
  }
}


/* ==========================================================================
   RC73 — MAIN MENU FROM-SCRATCH REBUILD
   Mock-target proportions:
   - cinematic stadium/tunnel hero
   - large crest/title group
   - large six-card stack
   - minimal dead space
   - footer near bottom
   ========================================================================== */

body.ui-v2 #setup-screen{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  display:flex!important;
  justify-content:center!important;
  align-items:stretch!important;
  overflow:hidden!important;
  padding:max(10px,env(safe-area-inset-top)) 18px max(10px,env(safe-area-inset-bottom))!important;
  background:
    linear-gradient(180deg,rgba(3,4,6,.03) 0%,rgba(3,4,6,.20) 46%,rgba(3,4,6,.78) 100%),
    url("assets/menu-stadium.svg") center/cover no-repeat!important;
}

body.ui-v2 #setup-screen .setup-card-mobile{
  width:min(100%,430px)!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  grid-template-rows:minmax(0,39%) minmax(0,1fr) 18px!important;
  gap:12px!important;
  padding:0!important;
  margin:0 auto!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* HERO: one coherent crest/title/tagline unit */
body.ui-v2 #setup-screen .launch-brand{
  grid-row:1!important;
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:center!important;
  padding:0 0 16px!important;
  margin:0!important;
}
body.ui-v2 #setup-screen .launch-brand::before{
  content:"";
  position:absolute!important;
  left:50%!important;
  top:44%!important;
  transform:translate(-50%,-50%)!important;
  width:390px!important;
  height:210px!important;
  background:radial-gradient(ellipse,rgba(202,31,47,.32),rgba(90,14,23,.13) 38%,transparent 70%)!important;
  filter:blur(12px)!important;
  pointer-events:none!important;
}
body.ui-v2 #setup-screen .launch-brand-logo{
  position:relative!important;
  width:min(88vw,380px)!important;
  max-width:380px!important;
  max-height:285px!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0 auto!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.56))!important;
}
body.ui-v2 #setup-screen .launch-brand-tagline{
  position:relative!important;
  margin-top:-7px!important;
  padding:0!important;
  color:#b9bec7!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* STACK: independent from every legacy menu class */
body.ui-v2 #setup-screen .v2-menu-stack{
  grid-row:2!important;
  position:static!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  grid-template-rows:repeat(6,minmax(66px,1fr))!important;
  gap:9px!important;
  align-content:stretch!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  z-index:auto!important;
}

body.ui-v2 #setup-screen .v2-menu-card{
  appearance:none!important;
  width:100%!important;
  height:100%!important;
  min-height:66px!important;
  max-height:84px!important;
  margin:0!important;
  padding:9px 14px!important;
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr) 22px!important;
  align-items:center!important;
  gap:12px!important;
  text-align:left!important;
  border-radius:19px!important;
  background:linear-gradient(105deg,rgba(27,32,40,.98),rgba(14,17,22,.985))!important;
  border:1px solid #3d4550!important;
  color:#f6f7f9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 26px rgba(0,0,0,.25)!important;
}
body.ui-v2 #setup-screen .v2-menu-card-primary{
  background:
    linear-gradient(105deg,rgba(180,28,43,.96),rgba(87,26,34,.94) 46%,rgba(20,19,24,.985) 100%)!important;
  border-color:#d33a48!important;
  box-shadow:inset 5px 0 0 #ef3949,0 15px 30px rgba(100,9,18,.30)!important;
}

body.ui-v2 #setup-screen .v2-menu-icon{
  position:relative!important;
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  background:#222832!important;
  border:1px solid #46505c!important;
  color:#eef1f5!important;
  overflow:hidden!important;
}
body.ui-v2 #setup-screen .v2-menu-card-primary .v2-menu-icon{
  background:#ca2b3a!important;
  border-color:#f04b59!important;
}

body.ui-v2 #setup-screen .v2-menu-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}
body.ui-v2 #setup-screen .v2-menu-copy strong{
  color:#fff!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:0!important;
}
body.ui-v2 #setup-screen .v2-menu-copy small{
  color:#949ca7!important;
  font-size:10px!important;
  line-height:1.12!important;
  font-weight:650!important;
  white-space:normal!important;
}
body.ui-v2 #setup-screen .v2-menu-chevron{
  justify-self:end!important;
  color:#858d98!important;
  font-size:28px!important;
  line-height:1!important;
  font-weight:300!important;
}
body.ui-v2 #setup-screen .v2-menu-card-primary .v2-menu-chevron{color:#f0f2f5!important}

/* CSS-drawn monochrome icons, never emoji */
body.ui-v2 .v2-icon-play::before{
  content:"";width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor;margin-left:3px
}
body.ui-v2 .v2-icon-continue::before{
  content:"";width:18px;height:14px;border:2px solid currentColor;border-top:0;border-radius:2px;position:absolute;bottom:10px
}
body.ui-v2 .v2-icon-continue::after{
  content:"";width:2px;height:17px;background:currentColor;position:absolute;top:8px;left:23px;box-shadow:-5px 5px 0 -1px currentColor,5px 5px 0 -1px currentColor
}
body.ui-v2 .v2-icon-edit::before{
  content:"";width:17px;height:5px;border:2px solid currentColor;border-radius:2px;transform:rotate(-43deg)
}
body.ui-v2 .v2-icon-settings::before{
  content:"";width:18px;height:18px;border:4px solid currentColor;border-radius:50%;box-shadow:0 -9px 0 -6px currentColor,0 9px 0 -6px currentColor,9px 0 0 -6px currentColor,-9px 0 0 -6px currentColor
}
body.ui-v2 .v2-icon-settings::after{
  content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor
}
body.ui-v2 .v2-icon-help::before{
  content:"?";font:900 24px/1 Arial,sans-serif;color:currentColor
}
body.ui-v2 .v2-icon-star::before{
  content:"";width:20px;height:20px;background:currentColor;clip-path:polygon(50% 0%,61% 34%,98% 34%,68% 56%,79% 93%,50% 71%,21% 93%,32% 56%,2% 34%,39% 34%)
}

/* Footer stays near bottom */
body.ui-v2 #setup-screen .mockup-menu-footer{
  grid-row:3!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  align-self:center!important;
  justify-self:center!important;
  color:#626a74!important;
  font-size:6.5px!important;
  line-height:1!important;
  letter-spacing:.12em!important;
}

/* Responsive priority:
   1) reduce hero a little
   2) reduce gaps
   3) reduce card height
   4) typography last */
@media(max-height:950px){
  body.ui-v2 #setup-screen .setup-card-mobile{
    grid-template-rows:minmax(0,35%) minmax(0,1fr) 16px!important;
    gap:9px!important;
  }
  body.ui-v2 #setup-screen .launch-brand{padding-bottom:10px!important}
  body.ui-v2 #setup-screen .launch-brand-logo{
    width:min(80vw,340px)!important;
    max-height:235px!important;
  }
  body.ui-v2 #setup-screen .v2-menu-stack{
    grid-template-rows:repeat(6,minmax(58px,1fr))!important;
    gap:7px!important;
  }
  body.ui-v2 #setup-screen .v2-menu-card{
    min-height:58px!important;
    max-height:72px!important;
    grid-template-columns:44px minmax(0,1fr) 20px!important;
    padding:7px 12px!important;
  }
  body.ui-v2 #setup-screen .v2-menu-icon{width:42px!important;height:42px!important}
  body.ui-v2 #setup-screen .v2-menu-copy strong{font-size:16px!important}
  body.ui-v2 #setup-screen .v2-menu-copy small{font-size:9px!important}
}

@media(max-height:780px){
  body.ui-v2 #setup-screen .setup-card-mobile{
    grid-template-rows:minmax(0,30%) minmax(0,1fr) 14px!important;
    gap:7px!important;
  }
  body.ui-v2 #setup-screen .launch-brand-logo{
    width:min(72vw,305px)!important;
    max-height:195px!important;
  }
  body.ui-v2 #setup-screen .launch-brand-tagline{font-size:8px!important}
  body.ui-v2 #setup-screen .v2-menu-stack{
    grid-template-rows:repeat(6,minmax(50px,1fr))!important;
    gap:6px!important;
  }
  body.ui-v2 #setup-screen .v2-menu-card{
    min-height:50px!important;max-height:62px!important;
  }
}

/* ==========================================================================
   RC74 — sports collage hero replaces crest logo
   ========================================================================== */
body.ui-v2 #setup-screen .launch-brand{
  justify-content:flex-end!important;
  padding:0 0 14px!important;
}
body.ui-v2 #setup-screen .launch-brand::before{
  width:430px!important;
  height:250px!important;
  top:44%!important;
}
body.ui-v2 #setup-screen .launch-brand-collage{
  position:relative!important;
  width:100%!important;
  height:min(31vh,248px)!important;
  margin:0 auto 8px!important;
  background:url("assets/menu-sports-collage.svg") center 42% / contain no-repeat!important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.42))!important;
}
body.ui-v2 #setup-screen .launch-brand-logo{
  display:none!important;
}
body.ui-v2 #setup-screen .launch-brand-tagline{
  margin-top:2px!important;
}
@media(max-height:950px){
  body.ui-v2 #setup-screen .launch-brand-collage{
    height:min(28vh,215px)!important;
    margin-bottom:6px!important;
  }
}
@media(max-height:780px){
  body.ui-v2 #setup-screen .launch-brand-collage{
    height:min(24vh,180px)!important;
    margin-bottom:4px!important;
  }
}


/* ==========================================================================
   RC75 — restore locked title/tagline over sports hero
   ========================================================================== */

body.ui-v2 #setup-screen .launch-brand{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  text-align:center!important;
  padding:0 0 12px!important;
}

body.ui-v2 #setup-screen .launch-brand-collage{
  width:100%!important;
  height:min(25vh,205px)!important;
  margin:0 auto 2px!important;
  background:url("assets/menu-sports-collage.svg") center 48% / contain no-repeat!important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.42))!important;
}

body.ui-v2 #setup-screen .launch-brand-title{
  position:relative!important;
  z-index:2!important;
  margin:0!important;
  color:#f7f8fa!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.015em!important;
  text-shadow:0 3px 12px rgba(0,0,0,.7)!important;
  white-space:nowrap!important;
}

body.ui-v2 #setup-screen .launch-brand-title .launch-brand-a{
  color:#e42f3f!important;
  font-style:italic!important;
}

body.ui-v2 #setup-screen .launch-brand-tagline{
  position:relative!important;
  z-index:2!important;
  margin:8px 0 0!important;
  color:#b6bdc6!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.20em!important;
  white-space:nowrap!important;
}

@media(max-height:950px){
  body.ui-v2 #setup-screen .launch-brand-collage{
    height:min(21vh,175px)!important;
  }
  body.ui-v2 #setup-screen .launch-brand-title{
    font-size:30px!important;
  }
  body.ui-v2 #setup-screen .launch-brand-tagline{
    font-size:8px!important;
  }
}

@media(max-height:780px){
  body.ui-v2 #setup-screen .launch-brand-collage{
    height:min(18vh,145px)!important;
  }
  body.ui-v2 #setup-screen .launch-brand-title{
    font-size:27px!important;
  }
}


/* ==========================================================================
   RC76 — sports hero artwork aspect-ratio fix
   Root cause: oversized 1200x800 SVG canvas made the actual sport marks tiny.
   The SVG viewport is now cropped around the artwork, and this block gives it
   enough room without changing the menu/title proportions.
   ========================================================================== */

body.ui-v2 #setup-screen .launch-brand-collage{
  width:min(100%,410px)!important;
  height:min(19vh,170px)!important;
  margin:0 auto 8px!important;
  background-image:url("assets/menu-sports-collage.svg")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
}

@media(max-height:950px){
  body.ui-v2 #setup-screen .launch-brand-collage{
    height:min(17vh,150px)!important;
  }
}

@media(max-height:780px){
  body.ui-v2 #setup-screen .launch-brand-collage{
    height:min(15vh,128px)!important;
  }
}


/* ==========================================================================
   RC77 — illustrated sports icon hero
   ========================================================================== */
body.ui-v2 #setup-screen .launch-brand-collage{
  width:min(100%,420px)!important;
  height:min(20vh,185px)!important;
  margin:0 auto 7px!important;
  background:url("assets/menu-sports-collage.svg") center / contain no-repeat!important;
  filter:drop-shadow(0 15px 22px rgba(0,0,0,.46))!important;
}

@media(max-height:950px){
  body.ui-v2 #setup-screen .launch-brand-collage{
    height:min(18vh,165px)!important;
  }
}

@media(max-height:780px){
  body.ui-v2 #setup-screen .launch-brand-collage{
    height:min(16vh,145px)!important;
  }
}


/* ==========================================================================
   RC78 — NEW GAME START ACTION FIX
   Confirmed issue: #setup-basics-panel is an absolute z-index:30 route panel
   while #setup-basics-actions was a separate sibling beneath it. The panel
   intercepted the action area. Actions now live inside the route panel.
   ========================================================================== */

body.ui-v2 #setup-screen[data-setup-route="basics"] #setup-basics-panel{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding:22px 16px 16px!important;
}

body.ui-v2 #setup-screen[data-setup-route="basics"] .setup-basics-fields{
  flex:0 0 auto!important;
}

body.ui-v2 #setup-screen[data-setup-route="basics"] #setup-basics-actions{
  display:grid!important;
  visibility:visible!important;
  pointer-events:auto!important;
  position:sticky!important;
  bottom:0!important;
  z-index:5!important;
  grid-template-columns:1fr 1.25fr!important;
  gap:10px!important;
  margin-top:auto!important;
  padding-top:18px!important;
  padding-bottom:2px!important;
  background:linear-gradient(180deg,rgba(9,11,15,0),rgba(9,11,15,.96) 34%,rgba(9,11,15,.99) 100%)!important;
}

body.ui-v2 #setup-screen[data-setup-route="basics"] #setup-basics-actions button{
  min-height:54px!important;
  width:100%!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}

body.ui-v2 #setup-screen[data-setup-route="basics"] #setup-basics-next{
  background:linear-gradient(180deg,#ef3545,#b8202e)!important;
  border:1px solid #f04b58!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(185,28,44,.24)!important;
}

body.ui-v2 #setup-screen[data-setup-route="basics"] #setup-basics-back{
  background:#171b21!important;
  border:1px solid #3b434e!important;
  color:#e8ebef!important;
}

@media(max-height:760px){
  body.ui-v2 #setup-screen[data-setup-route="basics"] #setup-basics-actions button{
    min-height:48px!important;
  }
}


/* ==========================================================================
   RC79 — BIRTH CONTINUE / SETUP VISIBILITY FIX
   The V2 setup-screen display:flex!important selector was more specific than
   the legacy .hidden rule. Ensure the setup screen can actually disappear.
   ========================================================================== */
body.ui-v2 #setup-screen.hidden{
  display:none!important;
}


/* ==========================================================================
   RC80 — CHILDHOOD AGE-UP ACTION
   ========================================================================== */
body.ui-v2 .launch-upnext-card.launch-age-ready{
  border-color:#c92e3d!important;
  background:
    linear-gradient(105deg,rgba(145,25,38,.92),rgba(57,21,29,.96) 55%,rgba(19,22,28,.98))!important;
  box-shadow:
    inset 4px 0 0 #ee394a,
    0 12px 28px rgba(111,15,27,.22)!important;
}

body.ui-v2 .launch-upnext-card.launch-age-ready .launch-card-head span,
body.ui-v2 .launch-upnext-card.launch-age-ready > strong{
  color:#fff!important;
}

body.ui-v2 .launch-upnext-card.launch-age-ready .launch-card-head b{
  color:#f2f4f7!important;
}


/* ==========================================================================
   RC81 — GLOBAL BACK NAVIGATION
   One persistent back control for every routed game/setup page except Main Menu.
   ========================================================================== */
body.ui-v2 .asl-global-back{
  position:fixed!important;
  top:max(12px,env(safe-area-inset-top))!important;
  left:12px!important;
  z-index:240!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  border:1px solid #3a424d!important;
  background:rgba(18,22,28,.96)!important;
  color:#f4f6f8!important;
  box-shadow:0 10px 24px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)!important;
  font:700 34px/1 Arial,sans-serif!important;
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation!important;
}

body.ui-v2 .asl-global-back.hidden{
  display:none!important;
}

/* The global back control replaces duplicate detail-only router buttons. */
body.ui-v2 .screen-router-back{
  display:none!important;
}

/* Reserve a little breathing room on routed detail pages for the global control. */
body.ui-v2 .screen-page[data-level="panel"] .screen-page-body{
  padding-top:62px!important;
}


/* ==========================================================================
   RC84 — AGE 7+ JOIN SPORT ENTRY
   ========================================================================== */
body.ui-v2 .launch-join-sport-card{
  border-color:#c92e3d!important;
  background:
    linear-gradient(105deg,rgba(142,24,37,.92),rgba(55,20,28,.96) 58%,rgba(18,21,27,.98))!important;
  box-shadow:
    inset 4px 0 0 #ee394a,
    0 12px 28px rgba(111,15,27,.22)!important;
}

body.ui-v2 .launch-join-sport-card strong{
  color:#fff!important;
}