/* ========================================================================
   BOMBARERA — MAIN MENU FOUNDATION V30
   One clean active stylesheet for the home screen.
   Desktop-first. Mobile remains intentionally blocked by product UI.
   ======================================================================== */

:root{
  --menu-font:'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  --menu-display:'Exo 2','Exo 2',system-ui,sans-serif;
  --menu-edge:clamp(18px,2vw,30px);
  --menu-gap:clamp(12px,1vw,16px);
  --menu-surface:rgba(4,12,29,.88);
  --menu-surface-soft:rgba(6,17,38,.76);
  --menu-line:rgba(135,205,255,.22);
  --menu-line-strong:rgba(153,219,255,.36);
  --menu-shadow:0 20px 54px rgba(0,0,0,.36);
  --menu-shadow-soft:0 12px 30px rgba(0,0,0,.28);
  --menu-story:#ffc85a;
  --menu-survival:#ff61b5;
  --menu-skins:#3fd9ff;
  --menu-achievements:#78e76d;
}

/* ------------------------------------------------------------------------
   Screen frame
   ------------------------------------------------------------------------ */
body:has(#screenMenu:not(.hidden)){
  margin:0;
  overflow:hidden;
  background:#030a17;
}
body:has(#screenMenu:not(.hidden)) .app,
body:has(#screenMenu:not(.hidden)) #screenMenu{
  position:relative;
  inset:auto;
  width:100%;
  height:100dvh;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  transform:none;
}
body:has(#screenMenu:not(.hidden)) .bg-glow,
body:has(#screenMenu:not(.hidden)) #homeCanvas{
  display:none;
}

#screenMenu .home-v12,
#screenMenu .home-v12 *{
  box-sizing:border-box;
}
#screenMenu .home-v12{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  font-family:var(--menu-font);
  background:#06101f;
}
#screenMenu .home-v12__art{
  position:absolute;
  inset:-8px;
  z-index:-6;
  background:url('/assets/menu/generated/main-bg-v14.webp') center 50%/cover no-repeat;
  filter:saturate(1.06) contrast(1.03) brightness(.98);
}
#screenMenu .home-v12__grade{
  position:absolute;
  inset:0;
  z-index:-5;
  pointer-events:none;
  background:
    radial-gradient(circle at 54% 57%,rgba(255,145,38,.13),transparent 22%),
    radial-gradient(circle at 83% 29%,rgba(81,151,255,.10),transparent 23%),
    linear-gradient(90deg,rgba(2,7,17,.60) 0%,rgba(2,7,17,.28) 24%,rgba(2,7,17,.05) 53%,rgba(2,7,17,.14) 100%),
    linear-gradient(180deg,rgba(2,6,14,.22) 0%,rgba(2,6,14,.06) 42%,rgba(2,6,14,.16) 61%,rgba(2,6,14,.82) 100%);
}
#screenMenu .home-v12::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:42%;
  z-index:-4;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(2,7,17,.36) 38%,rgba(2,7,17,.86) 100%);
}

/* ------------------------------------------------------------------------
   Static atmospheric focus. No cursor parallax; no positional movement.
   ------------------------------------------------------------------------ */
#screenMenu .home-v23__scene{
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  overflow:hidden;
}
#screenMenu .home-v23__scene-layer,
#screenMenu .home-v23__scene-aura{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .28s ease;
  transform:none;
}
#screenMenu .home-v23__scene-layer--story{
  background:radial-gradient(circle at 49% 42%,rgba(255,183,64,.16),transparent 28%);
}
#screenMenu .home-v23__scene-layer--survival{
  background:radial-gradient(circle at 50% 42%,rgba(255,71,148,.17),transparent 29%);
}
#screenMenu .home-v23__scene-layer--skins{
  background:radial-gradient(circle at 54% 43%,rgba(56,205,255,.15),transparent 30%);
}
#screenMenu .home-v23__scene-layer--achievements{
  background:radial-gradient(circle at 54% 42%,rgba(116,236,114,.14),transparent 30%);
}
#screenMenu .home-v12[data-v23-focus="story"] .home-v23__scene-layer--story,
#screenMenu .home-v12[data-v23-focus="survival"] .home-v23__scene-layer--survival,
#screenMenu .home-v12[data-v23-focus="skins"] .home-v23__scene-layer--skins,
#screenMenu .home-v12[data-v23-focus="achievements"] .home-v23__scene-layer--achievements{
  opacity:1;
}

/* ------------------------------------------------------------------------
   Brand
   ------------------------------------------------------------------------ */
#screenMenu .home-v12__brand-row{
  position:absolute;
  z-index:30;
  top:var(--menu-edge);
  left:var(--menu-edge);
}
#screenMenu .home-v12__brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  width:clamp(330px,27vw,430px);
  min-height:82px;
  padding:12px 20px 12px 12px;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(127,199,255,.24);
  border-radius:24px;
  background:linear-gradient(100deg,rgba(5,15,34,.92),rgba(5,15,34,.70) 72%,rgba(5,15,34,.34));
  box-shadow:var(--menu-shadow);
  backdrop-filter:blur(12px) saturate(120%);
}
#screenMenu .home-v12__brand::after{
  content:'ARENA ONLINE';
  position:absolute;
  left:18px;
  bottom:-18px;
  color:#83efac;
  font:900 9px/1 var(--menu-display);
  letter-spacing:.14em;
  text-shadow:0 3px 12px rgba(0,0,0,.65);
}
#screenMenu .home-v12__brand-mark{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  flex:0 0 56px;
  border:1px solid rgba(101,206,255,.64);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(12,39,82,.98),rgba(5,19,44,.98));
  box-shadow:inset 0 0 18px rgba(68,183,255,.12),0 0 0 3px rgba(5,20,42,.30);
}
#screenMenu .home-v12__brand-mark img{
  display:block;
  width:42px;
  height:42px;
}
#screenMenu .home-v12__brand-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:6px;
}
#screenMenu .home-v12__brand-copy strong{
  font:1000 clamp(32px,2.55vw,46px)/.9 var(--menu-font);
  letter-spacing:-.055em;
  color:#fff;
  white-space:nowrap;
  text-shadow:0 5px 18px rgba(0,0,0,.38);
}
#screenMenu .home-v12__brand-copy small{
  font:900 9px/1 var(--menu-display);
  letter-spacing:.19em;
  color:#8ce8ff;
  white-space:nowrap;
}

/* ------------------------------------------------------------------------
   Top utility bar
   ------------------------------------------------------------------------ */
body:has(#screenMenu:not(.hidden)) .header{
  position:fixed!important;
  z-index:170!important;
  top:18px!important;
  right:20px!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  pointer-events:none!important;
}
body:has(#screenMenu:not(.hidden)) .header__brand,
body:has(#screenMenu:not(.hidden)) .header-context,
body:has(#screenMenu:not(.hidden)) .stars{
  display:none!important;
}
body:has(#screenMenu:not(.hidden)) .header__right{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:8px!important;
  border:1px solid rgba(126,200,255,.18)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(6,17,38,.84),rgba(3,10,24,.92))!important;
  box-shadow:var(--menu-shadow)!important;
  backdrop-filter:blur(16px) saturate(130%)!important;
  pointer-events:auto!important;
}
body:has(#screenMenu:not(.hidden)) .header__right>*{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  float:none!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility{
  border:1px solid rgba(143,210,255,.28)!important;
  border-radius:18px!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.10)!important;
  transition:filter .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility--coins{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  min-width:146px!important;
  height:54px!important;
  padding:0 16px!important;
  background:linear-gradient(180deg,rgba(85,62,14,.96),rgba(23,24,39,.98))!important;
  border-color:rgba(255,211,101,.40)!important;
}
body:has(#screenMenu:not(.hidden)) .header-currency-icon--coins{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
}
body:has(#screenMenu:not(.hidden)) .header-currency-icon--coins img{
  display:block!important;
  width:30px!important;
  height:30px!important;
  object-fit:contain!important;
}
body:has(#screenMenu:not(.hidden)) .coins__value{
  color:#fff4c8!important;
  font:1000 16px/1 var(--menu-font)!important;
  letter-spacing:.02em!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility--reward{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:196px!important;
  min-width:196px!important;
  height:54px!important;
  min-height:54px!important;
  padding:0 14px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(126,41,171,.96),rgba(56,17,91,.98))!important;
  border-color:rgba(255,133,225,.42)!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility--icon{
  display:grid!important;
  place-items:center!important;
  width:54px!important;
  min-width:54px!important;
  height:54px!important;
  min-height:54px!important;
  padding:0!important;
  overflow:hidden!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility--sound{
  background:linear-gradient(180deg,rgba(30,153,184,.54),rgba(7,24,49,.98))!important;
  border-color:rgba(90,229,255,.42)!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility--settings{
  background:linear-gradient(180deg,rgba(91,107,220,.50),rgba(8,22,51,.98))!important;
  border-color:rgba(137,173,255,.42)!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility--fullscreen{
  background:linear-gradient(180deg,rgba(49,104,196,.50),rgba(7,22,50,.98))!important;
  border-color:rgba(103,174,255,.42)!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility__icon{
  display:block!important;
  width:36px!important;
  height:36px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.28));
}
body:has(#screenMenu:not(.hidden)) .menu-utility--reward .menu-utility__icon{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
}
body:has(#screenMenu:not(.hidden)) .menu-utility__label{
  display:block!important;
  color:#fff!important;
  font:1000 12px/1.05 var(--menu-font)!important;
  letter-spacing:-.01em!important;
  text-align:left!important;
  text-shadow:0 2px 8px rgba(0,0,0,.28);
}
body:has(#screenMenu:not(.hidden)) #soundToggle[aria-pressed="true"]::after{
  content:'';
  position:absolute;
  width:34px;
  height:3px;
  z-index:5;
  border-radius:999px;
  background:#ff6579;
  transform:rotate(-45deg);
  box-shadow:0 0 8px rgba(255,101,121,.5);
}
@media (hover:hover) and (pointer:fine){
  body:has(#screenMenu:not(.hidden)) .menu-utility:hover{
    filter:brightness(1.08);
    border-color:rgba(184,227,255,.54)!important;
    box-shadow:0 15px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.12)!important;
  }
}

/* ------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */
#screenMenu .home-v12__hero{
  position:absolute;
  z-index:28;
  top:122px;
  right:var(--menu-edge);
  width:min(30vw,390px);
  padding:24px;
  overflow:hidden;
  border:1px solid rgba(139,207,255,.22);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(6,17,38,.86),rgba(4,12,29,.88));
  box-shadow:var(--menu-shadow);
  backdrop-filter:blur(14px) saturate(120%);
  text-shadow:0 6px 22px rgba(0,0,0,.42);
}
#screenMenu .home-v12__hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 90% 18%,rgba(69,140,255,.19),transparent 28%),
    linear-gradient(135deg,rgba(255,255,255,.06),transparent 31%);
}
#screenMenu .home-v12__season{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin:0 0 14px;
  padding:0 12px;
  border:1px solid rgba(255,207,100,.24);
  border-radius:999px;
  background:rgba(255,189,55,.08);
  color:#ffd372;
  font:900 9px/1 var(--menu-display);
  letter-spacing:.13em;
}
#screenMenu .home-v12__hero h1{
  margin:0;
  max-width:8.8ch;
  color:#fff;
  font:1000 clamp(54px,4.7vw,78px)/.90 var(--menu-font);
  letter-spacing:-.055em;
}
#screenMenu .home-v12__hero p{
  margin:14px 0 0;
  max-width:24ch;
  color:#eff6ff;
  font:900 14px/1.3 var(--menu-font);
}
#screenMenu .home-v23__continue{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 30px;
  align-items:center;
  gap:10px;
  min-height:64px;
  margin-top:18px;
  padding:10px 12px;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,203,92,.32);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(102,67,14,.96),rgba(57,35,8,.98));
  box-shadow:0 12px 26px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
  transition:filter .16s ease,border-color .16s ease;
}
#screenMenu .home-v23__continue-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  color:#7a4b00;
  background:#ffc65b;
  font:1000 16px/1 var(--menu-font);
  box-shadow:0 7px 16px rgba(0,0,0,.20);
}
#screenMenu .home-v23__continue-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}
#screenMenu .home-v23__continue-copy small{
  color:#ffd477;
  font:1000 8px/1 var(--menu-display);
  letter-spacing:.11em;
}
#screenMenu .home-v23__continue-copy strong{
  min-width:0;
  overflow:hidden;
  color:#fff;
  font:1000 14px/1.05 var(--menu-font);
  white-space:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
#screenMenu .home-v23__continue-copy em{
  min-width:0;
  overflow:hidden;
  color:rgba(255,245,222,.84);
  font:800 9px/1.1 var(--menu-font);
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#screenMenu .home-v23__continue-arrow{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(255,221,146,.28);
  border-radius:50%;
  color:#ffe1a4;
  background:rgba(0,0,0,.12);
}
@media (hover:hover) and (pointer:fine){
  #screenMenu .home-v23__continue:hover{
    filter:brightness(1.07);
    border-color:rgba(255,213,121,.52);
  }
}

/* ------------------------------------------------------------------------
   Dock
   ------------------------------------------------------------------------ */
#screenMenu .home-v12__dock{
  position:absolute;
  z-index:42;
  left:var(--menu-edge);
  right:var(--menu-edge);
  bottom:14px;
  padding:14px;
  border:1px solid rgba(122,195,255,.16);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(5,14,31,.34),rgba(3,10,24,.84));
  box-shadow:0 24px 64px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(10px) saturate(116%);
}
#screenMenu .home-v12__dock::before{
  content:'LIVE HUB // SEASON 01';
  position:absolute;
  left:14px;
  top:-20px;
  color:#89dcff;
  font:900 8px/1 var(--menu-display);
  letter-spacing:.12em;
  text-shadow:0 3px 12px rgba(0,0,0,.65);
}
#screenMenu .home-v12__modes{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--menu-gap);
}
#screenMenu .home-v12__mode{
  --accent:#78dfff;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  height:162px!important;
  min-height:162px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  cursor:var(--bm-cursor-action)!important;
  isolation:isolate;
  text-align:left!important;
  border:1px solid color-mix(in srgb,var(--accent) 54%,transparent)!important;
  border-radius:20px!important;
  background:#06101f!important;
  color:#fff!important;
  box-shadow:var(--menu-shadow-soft),inset 0 1px 0 rgba(255,255,255,.05)!important;
  font-family:var(--menu-font)!important;
  transform:none!important;
  transition:filter .17s ease,border-color .17s ease,box-shadow .17s ease!important;
}
#screenMenu .home-v12__mode--story{--accent:var(--menu-story)}
#screenMenu .home-v12__mode--survival{--accent:var(--menu-survival)}
#screenMenu .home-v12__mode--skins{--accent:var(--menu-skins)}
#screenMenu .home-v12__mode--achievements{--accent:var(--menu-achievements)}
#screenMenu .home-v12__mode::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  z-index:7;
  background:linear-gradient(90deg,var(--accent) 0 var(--v23-progress,0%),rgba(255,255,255,.10) var(--v23-progress,0%) 100%);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 42%,transparent);
}
#screenMenu .home-v12__thumb{
  position:absolute;
  inset:0 0 auto;
  z-index:0;
  height:88px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:saturate(1.13) contrast(1.04) brightness(1.02);
}
#screenMenu .home-v12__thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(2,7,17,.01) 0%,rgba(2,7,17,.08) 46%,rgba(3,10,23,.90) 100%);
}
#screenMenu .home-v12__mode--story .home-v12__thumb{background-image:url('/assets/menu/generated/story-card-bg-v14.webp')}
#screenMenu .home-v12__mode--survival .home-v12__thumb{background-image:url('/assets/menu/generated/survival-card-bg-v14.webp')}
#screenMenu .home-v12__mode--skins .home-v12__thumb{background-image:url('/assets/menu/generated/skins-card-bg-v14.webp')}
#screenMenu .home-v12__mode--achievements .home-v12__thumb{background-image:url('/assets/menu/generated/achievements-card-bg-v14.webp')}
#screenMenu .home-v12__body{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  height:78px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 32px;
  align-items:center;
  gap:10px;
  padding:11px 12px 12px;
  background:linear-gradient(180deg,rgba(4,11,25,.40),rgba(3,9,21,.99) 30%);
}
#screenMenu .home-v12__mode-icon{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  border:1px solid color-mix(in srgb,var(--accent) 62%,transparent)!important;
  border-radius:13px!important;
  background:color-mix(in srgb,var(--accent) 10%,rgba(7,16,32,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 16px rgba(0,0,0,.18)!important;
}
#screenMenu .home-v12__mode-icon img{
  display:block!important;
  width:32px!important;
  height:32px!important;
  object-fit:contain!important;
}
#screenMenu .home-v12__mode-copy{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  gap:5px!important;
}
#screenMenu .home-v12__mode-copy b{
  overflow:hidden!important;
  color:#fff!important;
  font:1000 clamp(18px,1.35vw,23px)/1 var(--menu-font)!important;
  letter-spacing:-.025em!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-shadow:0 3px 10px rgba(0,0,0,.32);
}
#screenMenu .home-v12__mode-copy small{
  overflow:hidden!important;
  color:#d9e6f6!important;
  font:800 clamp(10px,.72vw,12px)/1.12 var(--menu-font)!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#screenMenu .home-v12__mode-arrow{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent)!important;
  border-radius:50%!important;
  background:rgba(5,15,31,.82)!important;
  color:var(--accent)!important;
  font:1000 17px/1 var(--menu-font)!important;
}
#screenMenu .home-v12__loadout{display:none!important}
#screenMenu .home-v23__mode-status{
  position:absolute;
  z-index:6;
  top:9px;
  right:9px;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  max-width:58%;
  padding:0 9px;
  border:1px solid color-mix(in srgb,var(--accent) 56%,transparent);
  border-radius:999px;
  background:rgba(3,10,23,.82);
  color:#fff;
  box-shadow:0 7px 16px rgba(0,0,0,.24);
  backdrop-filter:blur(8px);
}
#screenMenu .home-v23__mode-status i{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent);
}
#screenMenu .home-v23__mode-status b{
  overflow:hidden;
  color:#f7fbff;
  font:900 9px/1 var(--menu-font);
  text-overflow:ellipsis;
  white-space:nowrap;
}
#screenMenu .home-v23__mode-meter{display:none!important}
@media (hover:hover) and (pointer:fine){
  #screenMenu .home-v12__mode:hover,
  #screenMenu .home-v12__mode.is-v23-focus{
    filter:brightness(1.07);
    border-color:color-mix(in srgb,var(--accent) 86%,transparent)!important;
    box-shadow:0 20px 42px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--accent) 15%,transparent)!important;
  }
}

/* ------------------------------------------------------------------------
   Secondary actions
   ------------------------------------------------------------------------ */
#screenMenu .home-v12__secondary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  margin-top:14px!important;
}
#screenMenu .home-v12__secondary button{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 24px!important;
  align-items:center!important;
  gap:11px!important;
  width:236px!important;
  max-width:236px!important;
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  padding:0 14px!important;
  overflow:hidden!important;
  border:1px solid rgba(126,199,255,.24)!important;
  border-radius:18px!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08)!important;
  font-family:var(--menu-font)!important;
  text-align:left!important;
  transform:none!important;
  transition:filter .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
#screenMenu .home-v12__secondary #btnContactDev{
  background:
    linear-gradient(90deg,rgba(3,14,31,.60),rgba(3,14,31,.88)),
    url('/assets/menu/generated/main-bg-v14.webp') 44% 55%/cover no-repeat!important;
  border-color:rgba(80,196,255,.32)!important;
}
#screenMenu .home-v12__secondary #btnPromoCodes{
  background:
    linear-gradient(90deg,rgba(15,8,35,.54),rgba(9,8,32,.88)),
    url('/assets/menu/generated/promocodes-bg-v14.webp') center 48%/cover no-repeat!important;
  border-color:rgba(213,105,255,.34)!important;
}
#screenMenu .home-v12__secondary-art{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:12px!important;
  background:rgba(4,13,29,.60)!important;
  box-shadow:0 7px 16px rgba(0,0,0,.22)!important;
}
#screenMenu .home-v12__secondary-art img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
#screenMenu .home-v12__secondary button>span:nth-child(2){
  position:relative!important;
  z-index:2!important;
  overflow:hidden!important;
  color:#fff!important;
  font:1000 15px/1 var(--menu-font)!important;
  letter-spacing:-.01em!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-shadow:0 2px 9px rgba(0,0,0,.44)!important;
}
#screenMenu .home-v12__secondary button b{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  place-items:center!important;
  width:24px!important;
  height:24px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:50%!important;
  background:rgba(3,10,23,.46)!important;
  color:#fff!important;
  font:1000 13px/1 var(--menu-font)!important;
}
@media (hover:hover) and (pointer:fine){
  #screenMenu .home-v12__secondary button:hover{
    filter:brightness(1.08);
    border-color:rgba(166,221,255,.48)!important;
    box-shadow:0 16px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.10)!important;
  }
}

/* ------------------------------------------------------------------------
   Focus states
   ------------------------------------------------------------------------ */
#screenMenu .home-v12__mode:focus-visible,
#screenMenu .home-v12__secondary button:focus-visible,
#screenMenu .home-v23__continue:focus-visible,
body:has(#screenMenu:not(.hidden)) .menu-utility:focus-visible{
  outline:3px solid rgba(137,226,255,.88)!important;
  outline-offset:3px!important;
}

/* ------------------------------------------------------------------------
   1366x768 browser / short desktop. Chrome content viewport can be ~640px.
   ------------------------------------------------------------------------ */
@media (min-width:1051px) and (max-height:700px){
  :root{
    --menu-edge:18px;
    --menu-gap:10px;
  }
  #screenMenu .home-v12__brand{
    width:330px;
    min-height:70px;
    padding:10px 16px 10px 10px;
  }
  #screenMenu .home-v12__brand-mark{
    width:48px;
    height:48px;
    flex-basis:48px;
  }
  #screenMenu .home-v12__brand-mark img{width:36px;height:36px}
  #screenMenu .home-v12__brand-copy strong{font-size:31px}
  #screenMenu .home-v12__brand-copy small{font-size:10px}
  #screenMenu .home-v12__brand::after{bottom:-16px;font-size:10px}

  body:has(#screenMenu:not(.hidden)) .header{
    top:14px!important;
    right:16px!important;
  }
  body:has(#screenMenu:not(.hidden)) .header__right{
    gap:7px!important;
    padding:6px!important;
    border-radius:19px!important;
  }
  body:has(#screenMenu:not(.hidden)) .menu-utility--coins{
    min-width:130px!important;
    height:46px!important;
  }
  body:has(#screenMenu:not(.hidden)) .menu-utility--reward{
    width:174px!important;
    min-width:174px!important;
    height:46px!important;
    min-height:46px!important;
  }
  body:has(#screenMenu:not(.hidden)) .menu-utility--reward .menu-utility__icon{width:32px!important;height:32px!important;flex-basis:32px!important}
  body:has(#screenMenu:not(.hidden)) .menu-utility__label{font-size:10px!important}
  body:has(#screenMenu:not(.hidden)) .menu-utility--icon{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
  }
  body:has(#screenMenu:not(.hidden)) .menu-utility--icon .menu-utility__icon{width:30px!important;height:30px!important}

  #screenMenu .home-v12__hero{
    top:94px;
    right:18px;
    width:350px;
    padding:18px;
    border-radius:22px;
  }
  #screenMenu .home-v12__season{
    min-height:26px;
    margin-bottom:10px;
    padding:0 10px;
    font-size:10px;
  }
  #screenMenu .home-v12__hero h1{font-size:50px}
  #screenMenu .home-v12__hero p{margin-top:9px;font-size:12px}
  #screenMenu .home-v23__continue{
    grid-template-columns:34px minmax(0,1fr) 26px;
    min-height:52px;
    margin-top:12px;
    padding:7px 10px;
    border-radius:14px;
  }
  #screenMenu .home-v23__continue-icon{width:34px;height:34px;border-radius:10px;font-size:13px}
  #screenMenu .home-v23__continue-copy small{font-size:10px}
  #screenMenu .home-v23__continue-copy strong{font-size:12px}
  #screenMenu .home-v23__continue-copy em{font-size:10px}
  #screenMenu .home-v23__continue-arrow{width:26px;height:26px}

  #screenMenu .home-v12__dock{
    left:18px;
    right:18px;
    bottom:10px;
    padding:10px;
    border-radius:22px;
  }
  #screenMenu .home-v12__dock::before{top:-16px;font-size:10px}
  #screenMenu .home-v12__mode{
    height:148px!important;
    min-height:148px!important;
    border-radius:18px!important;
  }
  #screenMenu .home-v12__thumb{height:78px}
  #screenMenu .home-v12__body{
    height:74px;
    grid-template-columns:38px minmax(0,1fr) 28px;
    gap:8px;
    padding:8px 9px 9px;
  }
  #screenMenu .home-v12__mode-icon{width:36px!important;height:36px!important;border-radius:10px!important}
  #screenMenu .home-v12__mode-icon img{width:25px!important;height:25px!important}
  #screenMenu .home-v12__mode-copy{gap:3px!important}
  #screenMenu .home-v12__mode-copy b{font-size:16px!important}
  #screenMenu .home-v12__mode-copy small{font-size:10px!important}
  #screenMenu .home-v12__mode-arrow{width:28px!important;height:28px!important;font-size:13px!important}
  #screenMenu .home-v23__mode-status{top:6px;right:6px;min-height:19px;padding:0 7px}
  #screenMenu .home-v23__mode-status b{font-size:10px}
  #screenMenu .home-v23__mode-status i{width:5px;height:5px;flex-basis:5px}
  #screenMenu .home-v12__secondary{
    gap:10px!important;
    margin-top:9px!important;
  }
  #screenMenu .home-v12__secondary button{
    width:190px!important;
    max-width:190px!important;
    height:48px!important;
    min-height:48px!important;
    grid-template-columns:30px minmax(0,1fr) 18px!important;
    gap:8px!important;
    padding:0 10px!important;
    border-radius:12px!important;
  }
  #screenMenu .home-v12__secondary-art{width:28px!important;height:28px!important;border-radius:9px!important}
  #screenMenu .home-v12__secondary button>span:nth-child(2){font-size:11px!important}
  #screenMenu .home-v12__secondary button b{width:18px!important;height:18px!important;font-size:10px!important}
}

/* ------------------------------------------------------------------------
   Medium desktop fallback. Mobile is intentionally blocked by product UI.
   ------------------------------------------------------------------------ */
@media (max-width:1050px){
  body:has(#screenMenu:not(.hidden)) .header{
    top:12px!important;
    right:12px!important;
  }
  body:has(#screenMenu:not(.hidden)) .header__right{gap:6px!important;padding:6px!important}
  body:has(#screenMenu:not(.hidden)) .menu-utility--reward{width:54px!important;min-width:54px!important;padding:0!important;justify-content:center!important}
  body:has(#screenMenu:not(.hidden)) .menu-utility--reward .menu-utility__label{display:none!important}
  body:has(#screenMenu:not(.hidden)) .menu-utility--coins{min-width:112px!important}

  #screenMenu .home-v12__brand-row{top:14px;left:14px}
  #screenMenu .home-v12__brand{width:300px;min-height:70px}
  #screenMenu .home-v12__brand-copy strong{font-size:30px}

  #screenMenu .home-v12__hero{
    top:108px;
    right:14px;
    width:min(46vw,400px);
  }
  #screenMenu .home-v12__dock{left:14px;right:14px;bottom:10px}
  #screenMenu .home-v12__modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  #screenMenu .home-v12__mode{height:126px!important;min-height:126px!important}
  #screenMenu .home-v12__thumb{height:66px}
  #screenMenu .home-v12__body{height:64px}
  #screenMenu .home-v12__secondary button{width:210px!important;max-width:210px!important}
}

@media (prefers-reduced-motion:reduce){
  #screenMenu .home-v23__scene-layer,
  #screenMenu .home-v12__mode,
  #screenMenu .home-v12__secondary button,
  #screenMenu .home-v23__continue,
  body:has(#screenMenu:not(.hidden)) .menu-utility{
    transition:none!important;
  }
}