/* Home v2: gamer layout. Overlay only, the 3D studio and bull behind it are untouched. */
#menu.hscr { padding: max(12px, env(safe-area-inset-top)) 12px calc(max(10px, env(safe-area-inset-bottom)) + 84px) !important; }
#menu .hbg { display: none !important; }
#menu.hscr::before { display: block !important; content: ""; position: absolute; inset: 0 0 auto 0; height: 190px; background: linear-gradient(rgba(3,8,5,.78), transparent); pointer-events: none; }
#menu.hscr::after { display: block !important; content: ""; position: absolute; inset: auto 0 0 0; height: 52%; background: linear-gradient(transparent, rgba(3,8,5,.55) 35%, rgba(3,8,5,.94)); pointer-events: none; z-index: -1; }
/* top bar */
#menu .ht { position: relative; z-index: 3; display: flex; align-items: center; gap: 7px; }
#menu .hp2 { flex: none; }
#menu .cu2 { height: 38px; border-radius: 99px; padding: 0 13px 0 8px; gap: 7px; font: 400 18px var(--display) !important; background: rgba(5,9,7,.7) !important; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255,198,31,.55) !important; color: #ffd166; }
#menu .cu2.sol { box-shadow: inset 0 0 0 1.5px rgba(20,241,149,.55) !important; color: #14f195; cursor: pointer; }
#menu .cu2.sol .solic { width: 20px; height: 20px; } #menu .cu2.sol #hSolN { font: 800 12px var(--ui); letter-spacing: .08em; text-transform: uppercase; }
#menu #gearM { margin-left: auto; }
#menu .hp2 .avw .av { box-shadow: 0 0 0 3px #46f07c, 0 0 18px rgba(70,240,124,.55) !important; }
/* wordmark */
#menu .hword { position: relative; z-index: 2; margin: 14px 4px 0; pointer-events: none; }
#menu .hword b { display: block; font: 400 46px/.86 var(--f-logo, var(--display)); text-transform: uppercase; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 30px rgba(70,240,124,.25); letter-spacing: .01em; }
#menu .hword em { display: block; font-style: normal; background: linear-gradient(180deg, #e6ffa8, #46f07c 70%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(10,60,20,.6)); }
#menu .hword small { display: block; margin-top: 8px; font: 800 10px var(--ui); letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.7); }
/* right rail */
#menu #frBtn, #menu #rbGift { position: absolute; z-index: 3; right: 12px; width: 52px; height: 52px; border-radius: 18px; background: rgba(5,9,7,.7); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); display: grid; place-items: center; }
#menu #rbGift { top: 112px; box-shadow: inset 0 0 0 1.5px rgba(255,198,31,.7), 0 0 20px rgba(255,198,31,.25); } #menu #frBtn { top: 176px; }
#menu #frBtn svg, #menu #rbGift svg { width: 24px; height: 24px; } #menu #rbGift svg { fill: #ffd166; }
#menu .hrail { position: absolute; z-index: 3; right: 12px; top: 240px; display: flex; flex-direction: column; gap: 12px; }
#menu .rl { width: 52px; height: 52px; border: 0; border-radius: 18px; display: grid; place-items: center; padding: 0; background: rgba(5,9,7,.7); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); color: #fff; cursor: pointer; position: relative; }
#menu .rl svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } #menu .rl:first-child svg { fill: #ffd166; stroke: none; }
#menu .rl span { display: none; }
#menu .rl:active, #menu #frBtn:active, #menu #rbGift:active { transform: scale(.94); }
#menu #rbGift.pulse { animation: hGiftP 1.6s ease-in-out infinite; } @keyframes hGiftP { 50% { transform: scale(1.07); } }
/* world chip */
#menu .hmid2 { position: absolute; left: 12px; top: 214px; z-index: 3; }
#menu .hworld { height: 36px; padding: 0 13px; font: 800 11px var(--ui) !important; letter-spacing: .12em; text-transform: uppercase; background: rgba(5,9,7,.7) !important; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(70,240,124,.55) !important; color: #fff; }
/* bottom: stat chips + hero play button */
#menu .hbot2 { margin-top: auto; position: relative; z-index: 3; }
#menu .hcards { display: flex; gap: 10px; margin-bottom: 14px; }
#menu .hcd { flex: 1; min-width: 0; height: 58px; border-radius: 18px; background: rgba(5,9,7,.72) !important; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14) !important; }
#menu .hplayw { padding: 0 !important; }
#menu .hplay2 { position: relative; width: 100%; height: 84px; border: 0; border-radius: 26px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 14px; cursor: pointer; color: #06140a;
  background: linear-gradient(180deg, #e2ff9b 0%, #8cf537 38%, #3fc713 100%) !important; clip-path: none !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.65), inset 0 -6px 0 rgba(0,70,10,.28), 0 8px 0 #1f7a0a, 0 16px 44px rgba(70,240,60,.5) !important; }
#menu .hplay2::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46px; left: -80px; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: hSheen 3.2s ease-in-out infinite; }
@keyframes hSheen { 0%, 55% { left: -80px; } 100% { left: 120%; } }
#menu .hplay2 .pt { font: 400 46px/1 var(--f-logo, var(--display)) !important; letter-spacing: .05em; color: #06140a !important; text-shadow: 0 2px 0 rgba(255,255,255,.5); }
#menu .hplay2 .bullic { width: 54px; height: 36px; fill: #06140a; } #menu .hplay2 .dbl { width: 28px; height: 28px; fill: #06140a; opacity: .85; }
#menu .hplay2:active { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255,255,255,.65), inset 0 -6px 0 rgba(0,70,10,.28), 0 3px 0 #1f7a0a, 0 8px 28px rgba(70,240,60,.45) !important; }
#menu .hplayw::before { display: none !important; }
body.rm #menu .hplay2::after { animation: none; }
#menu .hplay2::before { display: none !important; }
#menu .hplay2 > * { z-index: 2; }
#menu .hpt b.nm { display: none; } #menu .hp2 { padding: 0 12px 0 0 !important; } #menu .hpt { min-width: 52px; } #menu .hpt small { font: 800 11px var(--ui); letter-spacing: .1em; color: #fff; }
#menu .cu2 { font-size: 17px !important; padding: 0 11px 0 7px; } #menu .cu2.sol #hSolN { font-size: 11px; letter-spacing: .06em; }
#menu .hrail { top: 268px; } #menu #frBtn { top: 190px !important; } #menu #rbGift { top: 124px !important; }
#menu .ht { position: static !important; }
#menu #rbGift { top: 130px !important; } #menu #frBtn { top: 194px !important; } #menu .hrail { top: 258px; }
#menu .hmid2 { top: 138px; }
#menu .hmid2 { top: 262px !important; } #menu .rl svg, #menu .rl:first-child svg { fill: none; stroke: #ffd166; }
/* ---- bottom nav v2: 4 slots + raised centre PLAY ---- */
#tabbar { left: 12px !important; right: 12px !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; height: 70px !important; padding: 0 6px !important; border: 0 !important; border-radius: 26px !important; display: grid !important; grid-template-columns: 1fr 1fr 96px 1fr 1fr; align-items: center; background: rgba(8,13,10,.94) !important; backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 36px rgba(0,0,0,.55) !important; overflow: visible !important; }
#tabbar .tab { position: relative; height: 62px; padding: 0 !important; border: 0; background: none !important; box-shadow: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #7d8c84; }
#tabbar .tab::before, #tabbar .tab::after { display: none !important; }
#tabbar .tab svg { position: static !important; width: 26px !important; height: 26px !important; margin: 0 !important; padding: 0 !important; background: none !important; fill: none !important; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
#tabbar .tab span { position: static !important; font: 800 9.5px var(--ui) !important; letter-spacing: .08em !important; text-transform: uppercase; color: inherit; }
#tabbar .tab.on { color: #8cf537; } #tabbar .tab.on svg { stroke: #8cf537; filter: drop-shadow(0 0 7px rgba(140,245,55,.75)); transform: translateY(-1px); }
#tabbar .tab.on::after { display: block !important; content: ""; position: absolute; bottom: 3px; width: 18px; height: 3px; border-radius: 3px; background: #8cf537; box-shadow: 0 0 10px #8cf537; }
#tabbar .tplay { height: 70px; }
#tabbar .tpc { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: #06140a;
  background: radial-gradient(circle at 50% 22%, #f0ffb8, #8cf537 48%, #3fc713); box-shadow: inset 0 3px 0 rgba(255,255,255,.7), inset 0 -5px 0 rgba(0,70,10,.3), 0 6px 0 #1f7a0a, 0 0 0 5px rgba(8,13,10,.94), 0 0 38px rgba(91,214,23,.6); transition: transform .12s; }
#tabbar .tpc svg { width: 52px !important; height: 34px !important; fill: currentColor !important; stroke: none !important; filter: none !important; transform: none !important; }
#tabbar .tpc b { font: 400 16px/1 var(--f-logo, var(--display)); letter-spacing: .06em; margin-top: -1px; }
#tabbar .tplay:active .tpc { transform: translateX(-50%) translateY(4px); }
#tabbar .tpc::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(140,245,55,.55); animation: tPing 2.2s ease-out infinite; }
@keyframes tPing { 0% { transform: scale(.96); opacity: .9; } 100% { transform: scale(1.28); opacity: 0; } }
body.rm #tabbar .tpc::after { animation: none; }
/* home: the centre button is now the PLAY control, so the old big one goes */
#menu .hplayw { display: none !important; }
#menu .hbot2 { padding-bottom: 36px; }
#menu .hrail { top: 258px; } #menu .rl svg, #menu .rl:first-child svg { fill: none; stroke: #ffd166; }
#menu #hPlayer .dt { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 2px #050805; display: none; } #menu #hPlayer .dt.on { display: block; }
#menu .rl .dt { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 2px #050805; display: none; } #menu .rl .dt.on { display: block; }
#tabbar .tab.on, #tabbar .tab:focus, #tabbar .tab:focus-visible { background: none !important; box-shadow: none !important; border: 0 !important; outline: none !important; }
#tabbar .tpc { font-style: normal; }
#tabbar .tab:not(.tplay) svg { stroke: currentColor !important; stroke-width: 1.9 !important; opacity: 1 !important; filter: none !important; }
#tabbar .tab.on:not(.tplay) svg { stroke: #8cf537 !important; filter: drop-shadow(0 0 7px rgba(140,245,55,.75)) !important; }
#tabbar { grid-template-columns: 1fr 1fr 88px 1fr 1fr !important; }
#tabbar .tab span { letter-spacing: .04em !important; }
#tabbar .tpc { width: 86px; height: 86px; }
#tabbar.hidden { display: none !important; }
