/* Home, simplified (founder 2026-10-31): the hero, then six big section cards, nothing else.
   Games live behind the Games card (#games): the grid and its filters, with a way back home. */
#lobbyFeats { display:none !important; }
#lobby.games-on #lobbyRecent { display:none !important; } /* the scrolling recent-wins bar is back on home (2026-10-31) */
/* back by request (2026-10-31): the Rio jackpot board, the daily missions banner, promotions and recent big wins, under the six cards (home only) */
#lobby.games-on #lobbyTicker, #lobby.games-on #lobbyBanner, #lobby.games-on > .lobby-cols { display:none !important; }
#lobby:not(.games-on) #lobbyGamesHead, #lobby:not(.games-on) #lobbyGames { display:none !important; }
#lobby.games-on > .hero, #lobby.games-on #lobbyStrip { display:none !important; }
#lobbyCta:empty { display:none; }
.gm-back { display:none; }
#lobby.games-on .gm-back { display:inline-flex; align-items:center; gap:6px; min-height:40px; margin:0 12px 0 0; padding:0 16px 0 10px; border:1px solid var(--ne-line, rgba(255,255,255,.12)); border-radius:999px; background:rgba(255,255,255,.06); color:#fff; font:700 13px/1 Inter, sans-serif; cursor:pointer; }
#lobby.games-on #lobbyGamesHead { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
#lobby.games-on #lobbyGamesHead h2 { margin-right:auto; }

/* the six section cards: two per row on phones, three on wider screens, big enough to read at a glance */
#lobbyStrip.ne-strip { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
#lobbyStrip.ne-strip button { position:relative; display:flex; align-items:flex-end; aspect-ratio:4 / 3; padding:0; border:1px solid var(--ne-line, rgba(255,255,255,.12)); border-radius:18px; overflow:hidden; background:#140a28; color:#fff; cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s; }
#lobbyStrip.ne-strip img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#lobbyStrip.ne-strip span { position:relative; width:100%; padding:30px 14px 12px; text-align:left; font:400 26px/1 "Bebas Neue", Inter, sans-serif; letter-spacing:.05em; background:linear-gradient(180deg, transparent, rgba(7,4,15,.94) 62%); }
#lobbyStrip.ne-strip button:hover { border-color:rgba(255,209,92,.6); }
#lobbyStrip.ne-strip button:active { transform:scale(.98); }
@media (min-width:761px) {
  #lobbyStrip.ne-strip { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
  #lobbyStrip.ne-strip button { aspect-ratio:16 / 9; border-radius:20px; }
  #lobbyStrip.ne-strip span { padding:40px 20px 16px; font-size:34px; }
}

/* portal header (founder 2026-10-31, take 2; 2026-11-01: the same on every page, not just home): a smaller logo, no messages
   button (chats live in Nights), and coins / sound / account side by side on one row */
header.topbar #msgBtn { display:none !important; }
@media (max-width:760px) {
  header.topbar, header.topbar:has(#acctBtn:not([hidden])), header.topbar:has(#acctBtn:not([hidden])):not(:has(#msgBtn:not([hidden]))) { grid-template-columns:minmax(0, 1fr) auto 36px 36px !important; grid-template-areas:"logo coin snd acct" !important; column-gap:8px !important; row-gap:0 !important; }
  header.topbar .logo { grid-area:logo; align-self:center; height:auto; margin:0; }
  header.topbar .logo img { height:38px !important; max-width:100% !important; }
  header.topbar .coin-pill { grid-area:coin; justify-self:end; align-self:center; margin:0 !important; }
  header.topbar #soundBtn, header.topbar #acctBtn { align-self:center; justify-self:end; }
}

/* Featured games (founder 2026-10-31): Motherlode big, Chicken Escape and Juicy Island beneath it, above the six section cards */
/* sections in order: hero, recent wins, featured games, the six section cards, then the rest; each section has its own heading and space */
#lobbyStrip { order:1; } #lobbyRecent { order:2 !important; } #lobbyFeatured { order:3; } #lobbyStripHead { display:none !important; } /* the six cards sit right under the hero, no heading (2026-10-31) */
#lobby.games-on #lobbyStripHead { display:none !important; }
.ne-sec-h { margin:0 0 14px; font:400 28px/1 "Bebas Neue", Inter, sans-serif; letter-spacing:.06em; color:#fff; }
#lobbyFeatured, #lobbyStripHead { margin-top:18px; }
#lobbyStripHead { padding-top:26px; border-top:1px solid rgba(255,255,255,.08); }
#lobbyStrip { margin-bottom:18px; }
@media (min-width:761px) { .ne-sec-h { font-size:34px; margin-bottom:18px; } #lobbyFeatured, #lobbyStripHead { margin-top:26px; } #lobbyStripHead { padding-top:34px; } }
#lobby.games-on #lobbyFeatured { display:none !important; }
.nf-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.nf { position:relative; padding:0; border:1px solid rgba(255,209,92,.35); border-radius:18px; overflow:hidden; background:#140a28; aspect-ratio:16 / 10; cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s; }
.nf.big { grid-column:1 / -1; aspect-ratio:16 / 9; border-color:rgba(255,209,92,.6); }
.nf img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.nf:hover { border-color:#ffd15c; } .nf:hover img { transform:scale(1.04); } .nf:active { transform:scale(.98); }
@media (min-width:761px) {
  .nf-grid { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:18px; }
  .nf.big { grid-column:1; grid-row:1 / span 2; aspect-ratio:auto; min-height:100%; }
  .nf { aspect-ratio:16 / 10; }
}
/* each heading sits tight on its own section (the lobby's 34px row gap goes between sections, not under a heading) */
#lobbyStripHead { margin-bottom:-20px; }
@media (min-width:761px) { #lobbyStripHead { margin-bottom:-16px; } }
/* a heading over the Rio jackpot board, shown only with the board */
#lobbyTickerHead { order:6; margin-bottom:-20px; }
#lobbyTickerHead:has(+ #lobbyTicker[hidden]), #lobby.games-on #lobbyTickerHead { display:none !important; }
@media (min-width:761px) { #lobbyTickerHead { margin-bottom:-16px; } }

/* New Games (founder 2026-11-03): BLACKOUT and BORA! side by side under the hero, each the size of the Chicken Escape
   featured card (phone: full width 16:9; desktop: two thirds of the row, 16:10), sliding sideways with dots and arrows */
#lobbyNew { order: 0; margin-top: 18px; }
#lobby.games-on #lobbyNew { display: none !important; }
.nwg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nwg-head .ne-sec-h { margin: 0; }
.nwg-arrows { display: none; gap: 8px; }
.nwg-arrow { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.nwg-arrow:hover { background: rgba(255, 255, 255, .14); } .nwg-arrow:disabled { opacity: .3; cursor: default; }
.nwg-arrow svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nwg-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -2px; padding: 0 2px; }
.nwg-track::-webkit-scrollbar { display: none; }
.nwg-card { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgba(255, 209, 92, .6); border-radius: 18px; overflow: hidden; background: #140a28; scroll-snap-align: start; cursor: pointer; text-decoration: none; color: #fff; transition: border-color .2s; }
.nwg-card:hover { border-color: #ffd15c; } .nwg-card:active { transform: scale(.98); }
.nwg-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.nwg-card:hover .nwg-art { transform: scale(1.04); }
.nwg-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8, 5, 14, .9) 0%, rgba(8, 5, 14, .45) 34%, transparent 60%); }
.nwg-bo .nwg-art { object-position: 55% 35%; } .nwg-bora .nwg-art { object-position: 70% 40%; }
.nwg-bora::after { background: linear-gradient(0deg, rgba(42, 6, 80, .92) 0%, rgba(42, 6, 80, .45) 36%, transparent 62%); }
.nwg-txt { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; justify-items: start; gap: 4px; text-align: left; }
.nwg-txt small { font: 700 10px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #f2c76a; }
.nwg-bora .nwg-txt small { color: #ffd23a; }
.nwg-logo { height: clamp(40px, 13vw, 60px); width: auto; max-width: 80%; object-fit: contain; margin-left: -3px; }
.nwg-tag { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 5px 10px; border-radius: 8px; background: #e9b44c; color: #2a1c08; font: 800 11px/1 Inter, sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.nwg-bora .nwg-tag { background: #ff4fa3; color: #fff; }
.nwg-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.nwg-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .25); transition: width .25s, background .25s; }
.nwg-dots i.on { width: 22px; background: #ffd15c; }
@media (min-width: 761px) {
  #lobbyNew { margin-top: 26px; } .nwg-head { margin-bottom: 18px; } .nwg-arrows { display: flex; }
  .nwg-track { gap: 18px; }
  .nwg-card { flex-basis: calc((100% - 18px) * 2 / 3); aspect-ratio: 1.55; }
  .nwg-txt { left: 26px; bottom: 22px; gap: 8px; } .nwg-txt small { font-size: 11px; } .nwg-logo { height: 92px; }
  .nwg-tag { top: 18px; right: 18px; }
}
/* ---------------- signed-out home polish (audit 2026-11-03) ---------------- */
/* top bar: a Sign in button instead of the sound switch (body.ne-out is set by renderLobby while signed out) */
.hd-signin { display: none; }
body.ne-out .hd-signin { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 15px; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ne-pink, #ff2fb4), #b44dff); color: #fff; font: 700 13px/1 Inter, sans-serif; letter-spacing: .02em; cursor: pointer; white-space: nowrap; transition: filter .2s, transform .12s; }
body.ne-out .hd-signin:hover { filter: brightness(1.08); } body.ne-out .hd-signin:active { transform: scale(.97); }
body.ne-out:has(#login:not([hidden])) .hd-signin { display: none; } /* not on the sign-in page itself */
body.ne-out header.topbar #soundBtn { display: none !important; }
@media (max-width: 760px) {
  body.ne-out header.topbar:not(#_) { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "logo signin" !important; }
  body.ne-out header.topbar .hd-signin { grid-area: signin; align-self: center; height: 28px; padding: 0 12px; font-size: 12.5px; }
  body.ne-out header.topbar .coin-pill, body.ne-out header.topbar #msgBtn { display: none !important; }
}
/* hero buttons sized for a big screen */
@media (min-width: 1001px) { #lobby .hero-text .row .btn { padding: 14px 26px; font-size: 16px; border-radius: 999px; } }
/* tablets (761-1000px): the hero stacks, picture on top, words and stats below it, so the words never sit on the art */
@media (min-width: 761px) and (max-width: 1000px) {
  #lobby .hero { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 18px; min-height: 0; padding: calc((100vw - 32px) * .5) 28px 26px; }
  #lobby .hero-video { left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: none; -webkit-mask: none; mask: none; }
  #lobby .hero-fade { background: linear-gradient(180deg, transparent 0, transparent calc((100vw - 32px) * .28), rgba(11, 6, 20, .88) calc((100vw - 32px) * .5), #0b0614 calc((100vw - 32px) * .56)); }
  #lobby .hero-text { max-width: none; } #lobby .hero-stats { justify-content: flex-start; }
  /* the jackpot board: one column, the ladder under the big amount, so the numbers keep their width */
  .jp-board { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 26px 26px 40%; }
  .jp-board .odo { font-size: 48px; } .lj-row .odo { font-size: 28px; }
  /* the daily missions banner: a dark side so the words read over the chips */
  .promo-banner { background: linear-gradient(90deg, rgba(12, 5, 26, .94) 0%, rgba(12, 5, 26, .7) 48%, rgba(12, 5, 26, .1) 78%), url(assets/brand/banner.jpg) right center / cover !important; }
}
/* one "recent wins" is enough: the live strip near the top; Promotions takes the row, two to a line on wide screens */
#lobbyWins { display: none !important; }
#lobby .lobby-cols { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 761px) { #lobbyPromos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #lobbyPromos > h2 { grid-column: 1 / -1; } #lobbyPromos > .promo { margin: 0; } }
/* small type, read on a phone */
.nwg-txt small { font-size: 11px; } .nwg-tag { font-size: 12px; padding: 6px 11px; }
.lj-fixed { font-size: 12px; }
@media (min-width: 761px) { .nwg-txt small { font-size: 12px; } }

/* page side margins line up with the N of the logo; app.js syncEdge() measures it, these are the starting values */
html main { padding-left: var(--ne-edge, 19px); padding-right: var(--ne-edge, 19px); }
@media (min-width: 761px) { html main { padding-left: var(--ne-edge, 26px); padding-right: var(--ne-edge, 26px); } }
@media (max-width: 760px) { .lj-tag { letter-spacing: .12em; font-size: 10.5px; } }
/* the logo's middle is above its lettering (the crown sits on top): line the Sign in button up with the letters */
body.ne-out .hd-signin { transform: translateY(9px); } body.ne-out .hd-signin:active { transform: translateY(9px) scale(.97); }
@media (max-width: 760px) { body.ne-out .hd-signin { transform: translateY(6px); } body.ne-out .hd-signin:active { transform: translateY(6px) scale(.97); } }
/* the "Daily missions, chests and weekly tournaments" banner is off the home (founder 2026-11-03); the details stay in Promotions and My Casino */
#lobby #lobbyBanner { display: none !important; }

/* sign-in / create account: Close sits in the top bar where Sign in was (founder: not on the card's picture) */
.hd-close { display: none; }
body.ne-out:has(#login:not([hidden])) .hd-close { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: 700 13px/1 Inter, sans-serif; letter-spacing: .02em; cursor: pointer; white-space: nowrap; transform: translateY(9px); transition: background .2s; }
body.ne-out:has(#login:not([hidden])) .hd-close:hover { background: rgba(255, 255, 255, .14); }
.hd-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 760px) {
  body.ne-out:has(#login:not([hidden])) header.topbar:not(#_) { grid-template-areas: "logo close" !important; }
  body.ne-out:has(#login:not([hidden])) .hd-close { grid-area: close; align-self: center; height: 28px; padding: 0 12px 0 9px; font-size: 12.5px; transform: translateY(6px); }
}