/* BrainStars Arcade Heroes — Phase 1: arcade lobby (home) and game navigation.
   Everything here is namespaced (.bs-*, html.bs-arcade) so it can't collide with the rest of the app.
   Switch off with ARCADE_HOME = false in js/config.js (or ?arcade=0 in the address). */
:root { --bs-bg:#121737; --bs-deep:#080D28; --bs-surface:#202451; --bs-surface2:#302B67; --bs-cyan:#2CB9FC; --bs-yellow:#FFD447; --bs-pink:#FF5C9F; --bs-purple:#9267FF; --bs-green:#52DE9C; --bs-orange:#FF9849; --bs-white:#F9FBFF; --bs-muted:#BBC6E9 }

/* page */
html.bs-arcade body { background:radial-gradient(ellipse at 15% 15%,#423D9C 0,transparent 34%),radial-gradient(ellipse at 95% 3%,#216199 0,transparent 37%),#101638 !important; color:var(--bs-white) }
html.bs-arcade .wrap { max-width:1500px; padding-left:clamp(12px,3vw,52px); padding-right:clamp(12px,3vw,52px) }
html.bs-arcade footer { color:#98A9E5 }
.bs-ico { width:20px; height:20px; flex:none; filter:brightness(0) invert(1) }
.bs-ico.dark { filter:brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(2000%) hue-rotate(220deg) }

/* top bar */
.bs-top { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:18px 0 4px }
.bs-brand { background:none; border:0; padding:0; color:var(--bs-white); font-weight:900; font-size:clamp(24px,2.35vw,36px); font-style:italic; letter-spacing:-.06em; white-space:nowrap; text-shadow:0 4px 0 #111733; line-height:1 }
.bs-brand span { color:var(--bs-yellow) }
.bs-brand i { display:inline-block; width:9px; height:9px; background:#F966A1; transform:rotate(45deg); margin:0 4px 11px 8px }
.bs-dnav { display:flex; gap:5px; background:#0e153c9c; padding:6px; border-radius:16px; border:1px solid #53629955 }
.bs-dnav button { padding:11px 16px; display:flex; gap:8px; align-items:center; border-radius:12px; background:transparent; border:0; color:var(--bs-white); font-size:13px; font-weight:850; min-height:44px }
.bs-dnav button[aria-current="page"], .bs-dnav button:hover { background:#33396E }
.bs-dnav .bs-ico { width:17px; height:17px }
.bs-me { display:flex; gap:12px; align-items:center }
.bs-pill { border:1px solid #7b69a46e; border-radius:999px; background:#151839c9; padding:9px 14px; display:flex; gap:7px; align-items:center; font-weight:900; color:#FFDA54; white-space:nowrap; font-variant-numeric:tabular-nums; min-height:44px }
.bs-pill .st { width:18px; height:18px } .bs-pill .st path { fill:#FFDA54; stroke:#FFDA54 }
.bs-pill.streak { color:#FFB067 } .bs-pill.streak .ico { fill:#FF9849; stroke:#FF9849; width:18px; height:18px }
.bs-pill.streak.off { color:#98A9E5 } .bs-pill.streak.off .ico { fill:#5d6aa0; stroke:#5d6aa0 }
.bs-pill.bump { animation:bump .6s cubic-bezier(.3,1.6,.5,1) }
.bs-profile { position:relative; width:50px; height:50px; flex:none; border-radius:14px; padding:0; background:linear-gradient(135deg,#FF73A5,#843AF8); border:3px solid #ffffff55; display:grid; place-items:center }
.bs-profile .ava { width:40px; height:40px }
.bs-profile .lv { position:absolute; right:-10px; bottom:-8px; background:#FFCB43; color:#202040; border-radius:7px; font-size:10px; font-weight:900; padding:2px 5px; border:1px solid #fff; white-space:nowrap }

/* lobby layout */
.bs-eyebrow { display:flex; gap:10px; align-items:center; color:#D2D7FF; font-size:12px; font-weight:900; letter-spacing:.15em; margin:4px 0 -6px; text-transform:uppercase }
.bs-dot { height:8px; width:8px; flex:none; background:#54E6AB; box-shadow:0 0 12px #54E6AB; border-radius:50% }
.bs-rule { height:1px; flex:1; background:linear-gradient(90deg,#9d8fda,#9d8fda00) }
.bs-eyebrow .bs-right { font-size:10px; color:#98A9E5 }
.bs-grid { display:grid; grid-template-columns:minmax(0,1.33fr) minmax(320px,.8fr); gap:22px; align-items:stretch }

/* hero card */
.bs-hero { border-radius:25px; overflow:hidden; background:#19224D; border:2px solid #7477C4ad; box-shadow:0 16px 30px #03051b8c; display:flex; flex-direction:column; min-width:0 }
.bs-scene { position:relative; min-height:520px; flex:1; overflow:hidden; background:linear-gradient(#17133810,#12173743), url("../img/arcade/arcade_islands.jpg") center 52%/cover no-repeat }
@supports (background-image:url("x.webp")) { .bs-scene { background:linear-gradient(#17133810,#12173743), url("../img/arcade/arcade_islands.webp") center 52%/cover no-repeat } }
.bs-scene::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#06123931 0%,transparent 35%,transparent 50%,#0A0B2Dcc 100%); pointer-events:none; z-index:1 }
.bs-hud { position:relative; z-index:4; display:flex; justify-content:space-between; padding:20px; gap:10px; flex-wrap:wrap }
.bs-tag { font-size:11px; font-weight:900; letter-spacing:.09em; padding:9px 12px; border-radius:10px; box-shadow:0 4px 0 #090d2a5d; text-transform:uppercase }
.bs-tag.hot { background:#FFDA55; color:#312246 }
.bs-tag.mode { background:#201B52d0; border:1px solid #c3c2ff5f; color:var(--bs-white) }
.bs-halo { z-index:2; position:absolute; left:49%; top:48%; width:330px; height:330px; border-radius:50%; border:2px dashed #FFE27C66; transform:translate(-50%,-50%) rotate(-20deg); pointer-events:none }
.bs-halo.b { width:425px; height:425px; border-color:#EF7AFF55; border-style:dotted }
.bs-champ { position:absolute; z-index:3; object-fit:contain; height:min(80%,500px); width:min(75%,430px); left:50%; top:48%; transform:translate(-50%,-50%); filter:drop-shadow(0 23px 10px #11133A99); animation:bs-float 3.3s ease-in-out infinite }
.bs-champ.jump { animation:bs-jump .7s cubic-bezier(.3,1.4,.5,1), bs-float 3.3s .7s ease-in-out infinite }
@keyframes bs-float { 0%,100% { transform:translate(-50%,-49%) } 50% { transform:translate(-50%,-52%) } }
@keyframes bs-jump { 30% { transform:translate(-50%,-60%) scale(1.05,.96) } 60% { transform:translate(-50%,-48%) scale(.97,1.03) } 100% { transform:translate(-50%,-49%) } }
.bs-floor { position:absolute; z-index:2; left:23%; width:54%; height:38px; bottom:78px; background:radial-gradient(ellipse,#7ff0ffb3,#1967b000 73%); border-radius:50%; filter:blur(7px); pointer-events:none }
.bs-caption { position:absolute; z-index:5; left:22px; bottom:22px; right:180px; text-shadow:0 3px 12px #070C1C }
.bs-role { display:inline-block; font-size:11px; background:#4F43C8; padding:7px 10px; border-radius:8px; letter-spacing:.08em; font-weight:900; text-transform:uppercase; text-shadow:none }
.bs-caption h1 { font-size:clamp(44px,5vw,78px); margin:4px 0 -4px; letter-spacing:-.06em; font-weight:900; font-style:italic; text-transform:uppercase; line-height:1; color:var(--bs-white) }
.bs-meta { font-size:13px; font-weight:750; color:#E4E2FF }
.bs-change { z-index:5; position:absolute; right:18px; bottom:19px; background:#19235ee3; border:2px solid #BABEFCa6; color:var(--bs-white); padding:12px 14px; border-radius:13px; font-size:12px; font-weight:900; letter-spacing:.04em; display:flex; align-items:center; gap:7px; box-shadow:0 4px 0 #07092c; min-height:44px; text-transform:uppercase }
.bs-change:hover { transform:translateY(-1px) } .bs-change:active { transform:translateY(3px); box-shadow:0 1px 0 #07092c }
.bs-change .bs-ico { width:16px; height:16px }

/* play zone */
.bs-play { padding:19px 22px 23px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:linear-gradient(105deg,#20245B,#2A2466 65%,#352D81) }
.bs-kicker { font-weight:900; color:#C4B8FF; font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.bs-play h2 { font-size:clamp(24px,3vw,36px); letter-spacing:-.04em; margin:2px 0; font-weight:900; color:var(--bs-white); line-height:1.1 }
.bs-play h2 em { color:#FFDB47; font-style:normal }
.bs-sub { font-size:13px; color:#C6CEEC; display:flex; flex-direction:column; gap:6px }
.bs-dots { display:flex; gap:4px; margin-top:4px } .bs-dots i { width:16px; height:8px; border-radius:99px; background:#0D1234; border:1px solid #6d72a6 } .bs-dots i.on { background:linear-gradient(90deg,#FF8F36,#FFE04D); border-color:#FFE04D }
.bs-playbtn { min-width:218px; min-height:82px; border:3px solid #FFF19B; background:linear-gradient(180deg,#FFF36F 0,#FFC135 56%,#FF9B21); color:#252145; border-radius:18px; font-weight:900; font-size:clamp(19px,2vw,25px); letter-spacing:-.02em; box-shadow:0 8px 0 #CA6E16,0 16px 26px #05062f80; display:flex; justify-content:center; align-items:center; gap:10px; transition:transform .12s, box-shadow .12s; white-space:nowrap; padding:0 22px; flex:none }
.bs-playbtn:hover { transform:translateY(-3px) } .bs-playbtn:active { transform:translateY(7px); box-shadow:0 1px 0 #CA6E16 }
.bs-playbtn .bs-ico { width:22px; height:22px; filter:none }
.bs-playbtn:disabled, .bs-playbtn.off { background:linear-gradient(180deg,#c9cde6,#9aa2c4); border-color:#e6e9f7; box-shadow:0 8px 0 #59607f; color:#1b1f3d }
.bs-playbtn:focus-visible, .bs-tile:focus-visible, .bs-change:focus-visible, .bs-mini button:focus-visible, .bs-nav button:focus-visible, .bs-dnav button:focus-visible, .bs-profile:focus-visible { outline:3px solid #fff; outline-offset:4px }

/* side stack */
.bs-side { display:flex; flex-direction:column; gap:12px; min-width:0 }
.bs-label { display:flex; align-items:center; justify-content:space-between; color:#E7E6FF; font-size:11px; font-weight:900; letter-spacing:.15em; text-transform:uppercase }
.bs-diamond { width:7px; height:7px; background:#FFDD4B; transform:rotate(45deg); box-shadow:0 0 9px #FFD447; flex:none }
.bs-panel { border-radius:21px; border:2px solid #8A7FCD56; background:linear-gradient(130deg,#302D66,#1B224E); box-shadow:0 12px 25px #04051c50; color:var(--bs-white) }
.bs-xp { padding:17px 19px 14px }
.bs-xp-top { display:flex; gap:12px; align-items:center }
.bs-lvchip { width:49px; height:49px; display:grid; place-items:center; flex-shrink:0; border-radius:13px; background:linear-gradient(#FFD75A,#FF9933); box-shadow:0 4px 0 #AB502B; color:#24133F; font-weight:900; font-size:26px }
.bs-xp-top strong { font-size:17px; font-weight:900; display:block } .bs-xp-top small { font-size:12px; display:block; color:#BDC8EF; font-weight:700 }
.bs-next { margin-left:auto; font-size:11px; color:#FFD856; font-weight:900; white-space:nowrap }
.bs-track { height:13px; border-radius:999px; background:#0D1234; overflow:hidden; margin-top:14px; border:1px solid #6d72a6 }
.bs-track i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#FF8F36,#FFE04D); box-shadow:inset 0 3px 0 #fff7 }
.bs-xp p { color:#B9BFE5; font-size:12px; margin:8px 0 0 }
.bs-tiles { display:grid; grid-template-columns:1fr 1fr; gap:11px }
.bs-tile { min-height:119px; position:relative; text-align:left; border-radius:19px; padding:14px 13px; border:2px solid #fff5; color:#fff; box-shadow:0 7px 0 #070e34,0 10px 20px #0003; transition:transform .13s; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; min-width:0 }
.bs-tile:hover { transform:translateY(-3px) } .bs-tile:active { transform:translateY(6px); box-shadow:0 1px 0 #070e34 }
.bs-tile .bs-ico { width:26px; height:26px; margin-bottom:auto }
.bs-tile strong { font-size:17px; font-weight:900; letter-spacing:-.02em; display:block; text-transform:uppercase; line-height:1.1 }
.bs-tile small { font-size:12px; display:block; opacity:.95; font-weight:650; line-height:1.3 }
.bs-tile .bs-arr { position:absolute; right:13px; top:11px; font-size:20px; font-weight:900 }
.bs-cyan { background:linear-gradient(145deg,#158EE7,#0D4AB2) } .bs-pinkbg { background:linear-gradient(145deg,#FC5F9F,#BD2867) }
.bs-purplebg { background:linear-gradient(145deg,#8C64F1,#5833B5) } .bs-greenbg { background:linear-gradient(145deg,#38CB9E,#0B8B8D) }
.bs-today { padding:14px 16px; display:flex; flex-direction:column; gap:12px }
.bs-row { display:flex; align-items:center; gap:12px }
.bs-row .grow strong { display:block; font-weight:900 } .bs-row .grow small { display:block; color:#BDC8EF; font-size:12px; font-weight:650 }
.bs-row .bs-icbox { width:42px; height:42px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; background:#ffffff1f }
.bs-today .toggle { border-color:#fff; background:#444a85 } .bs-today .toggle[aria-checked="true"] { background:#38CB9E }
.bs-stars { font-size:24px; font-weight:900; color:#FFDA54; display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums }
.bs-stars .st { width:22px; height:22px } .bs-stars .st path { fill:#FFDA54; stroke:#FFDA54 }
.bs-rates { margin:0; padding-left:18px; color:#BDC8EF; font-size:12px; display:flex; flex-direction:column; gap:3px } .bs-rates strong { color:#fff }
.bs-event { padding:14px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 12px 25px #04051c50, inset 6px 0 0 var(--ev) }
.bs-event .ev-ic { width:42px; height:42px; border-radius:12px; background:var(--ev); color:#fff; display:grid; place-items:center; flex:none } .bs-event .ev-ic .ico { width:24px; height:24px }
.bs-event .ev-dots i { background:#0D1234; border:1px solid #6d72a6 } .bs-event .ev-dots i.on { background:var(--ev) }

/* bottom row */
.bs-bottom { display:grid; grid-template-columns:repeat(3,1fr); gap:15px }
.bs-mini { display:flex; align-items:center; gap:12px; border:2px solid #ffffff2c; padding:14px; border-radius:16px; box-shadow:0 5px 0 #080E30; color:#fff; min-width:0 }
.bs-mini.p { background:#47359C } .bs-mini.o { background:#92522F } .bs-mini.b { background:#184D93 }
.bs-mini .bs-icbox { width:42px; height:42px; flex-shrink:0; background:#ffffff27; border-radius:12px; display:grid; place-items:center }
.bs-mini strong { display:block; font-weight:900; font-size:14px; text-transform:uppercase } .bs-mini small { display:block; color:#EAECFF; font-size:12px }
.bs-mini button { font-size:12px; font-weight:900; background:#141B47; color:#fff; border:0; padding:10px 12px; border-radius:10px; margin-left:auto; min-height:44px; white-space:nowrap }

/* game navigation (all kid screens) */
.bs-nav { position:fixed; z-index:40; bottom:0; left:0; right:0; display:flex; justify-content:space-around; align-items:center; gap:4px; background:#161A48f7; border-top:2px solid #7773C0; padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)) }
.bs-nav button { flex:1; max-width:110px; display:flex; align-items:center; gap:4px; flex-direction:column; font-size:11px; font-weight:900; letter-spacing:.04em; background:transparent; border:0; padding:7px 4px; border-radius:12px; color:#D2D8FC; min-height:56px; justify-content:center; text-transform:uppercase }
.bs-nav button[aria-current="page"] { color:#FFE264; background:#383A79 }
.bs-nav button[aria-current="page"] .bs-ico { filter:brightness(0) saturate(100%) invert(86%) sepia(55%) saturate(700%) hue-rotate(338deg) }
.bs-nav .bs-ico { width:24px; height:24px }
.wrap.bs-tabbed { padding-bottom:calc(104px + env(safe-area-inset-bottom,0px)) }
.wrap.bs-tabbed ~ .toast { bottom:calc(96px + env(safe-area-inset-bottom,0px)) }

/* responsive */
@media (max-width:1100px) { .bs-grid { grid-template-columns:1.1fr .9fr } .bs-scene { min-height:470px } .bs-play { flex-direction:column; align-items:stretch } .bs-playbtn { width:100% } .bs-next { display:none } .bs-bottom { grid-template-columns:1fr 1fr } }
@media (min-width:901px) { html.bs-arcade[data-view="home"] .bs-nav { display:none } html.bs-arcade[data-view="home"] .wrap.bs-tabbed { padding-bottom:48px } }
@media (max-width:900px) { .bs-dnav { display:none } .bs-grid { grid-template-columns:1fr } .bs-scene { min-height:420px } .bs-play { flex-direction:row; align-items:center } .bs-playbtn { width:auto } .bs-bottom { grid-template-columns:repeat(3,1fr) } .bs-mini { flex-direction:column; align-items:flex-start } .bs-mini button { margin-left:0 } }
@media (max-width:600px) {
  .bs-top { padding-top:12px } .bs-brand { font-size:25px } .bs-pill { padding:6px 10px; font-size:13px } .bs-profile { width:44px; height:44px } .bs-profile .ava { width:34px; height:34px } .bs-me { gap:8px }
  .bs-eyebrow { font-size:10px } .bs-eyebrow .bs-right { display:none }
  .bs-hero { border-radius:20px } .bs-scene { min-height:340px } .bs-champ { height:76%; width:78%; top:47% } .bs-halo { width:250px; height:250px } .bs-halo.b { width:320px; height:320px }
  .bs-caption { left:14px; bottom:14px; right:150px } .bs-caption h1 { font-size:40px } .bs-role { font-size:10px } .bs-meta { font-size:12px }
  .bs-change { right:12px; bottom:14px; font-size:11px; padding:9px 10px } .bs-hud { padding:12px } .bs-tag { font-size:9px; padding:7px 8px } .bs-floor { bottom:52px }
  .bs-play { flex-direction:column; gap:12px; align-items:stretch; padding:15px } .bs-play h2 { font-size:26px } .bs-playbtn { height:64px; min-height:64px; min-width:0; width:100% }
  .bs-bottom { grid-template-columns:1fr; gap:10px } .bs-mini { flex-direction:row; align-items:center } .bs-mini button { margin-left:auto }
}
@media (max-width:380px) { .bs-pill.streak { display:none } .bs-tile strong { font-size:15px } .bs-caption { right:130px } }
@media (max-width:340px) { .bs-tiles { grid-template-columns:1fr } }
html.reduce-motion .bs-champ, html.reduce-motion .bs-tile, html.reduce-motion .bs-playbtn { animation:none !important; transition:none !important }
@media (prefers-reduced-motion:reduce) { .bs-champ { animation:none !important } }
/* fixes: the nav also carries the old .tabbar class, and the hero must not stretch past the fold */
.bs-nav.tabbar { transform:none; width:auto; left:0; right:0; bottom:0; border-radius:0; border-left:0; border-right:0; border-bottom:0; box-shadow:0 -8px 24px rgba(5,8,30,.35); padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)) }
.bs-grid { align-items:start }
@media (min-width:901px) { .bs-scene { flex:none; min-height:0; height:clamp(380px, calc(100vh - 390px), 560px) } }
.bs-top { flex-wrap:wrap; row-gap:10px } .bs-me { flex-wrap:wrap; justify-content:flex-end; margin-left:auto }
@media (max-width:600px) { .bs-top { gap:10px } .bs-brand { font-size:23px } .bs-brand i { margin-left:4px } .bs-me { gap:6px } }
.bs-scene { contain:paint } @media (max-width:420px) { .bs-halo.b { display:none } }