/* PHONES (owner, 11 Nov 2026): loaded last, only under 760 px.
   1. The menu of the whole site (Buy, Sell, Status, Value, Casino) is a tab bar at the BOTTOM of the screen, in the place of the old fixed footer bar; the legal links of the footer stay at the end of every page.
   2. On the Casino pages there is NO header bar at all: the progressive jackpot is fixed at the top instead (#cxTop, drawn by casino-ui.js), with a Login button for a visitor who is not signed in.
   The page is told to the CSS by body[data-page] (app.js, showPage). */
.cx-top { display:none }
@media (max-width:760px) {
  /* a fixed child inside a header with a backdrop filter would be placed relative to the header, so the filter goes on phones */
  .topbar { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface); z-index:85 }   /* z-index: the menu inside it must be above the cart bar */

  /* ---- the menu at the bottom ---- */
  header.topbar nav#nav { position:fixed; left:0; right:0; bottom:0; top:auto; z-index:80; display:flex; flex-direction:row; align-items:stretch; gap:2px; width:100%; flex:none; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); overflow:visible; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 28px rgba(0,0,0,.3) }
  header.topbar nav#nav a { flex:1 1 0; min-width:0; height:auto; flex-direction:column; justify-content:center; align-items:center; gap:2px; padding:6px 2px; font-size:10.5px; font-weight:700; border:0; border-radius:12px; white-space:nowrap; line-height:1.1 }
  header.topbar nav#nav a .ni { display:grid; place-items:center; height:26px } header.topbar nav#nav a .ni svg { width:22px; height:22px }
  header.topbar nav#nav a.on { background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent) }
  /* the footer is no longer a fixed bar: it ends the page; room is left for the menu and for the cart bar */
  .sitefoot { position:static !important; left:auto !important; bottom:auto !important; margin:24px 0 8px; box-shadow:none; background:transparent; border-top:1px solid var(--line) }
  .fbar { height:auto; flex-wrap:wrap; padding:10px 4px; row-gap:6px }
  .content { padding-bottom:96px }
  .bar { bottom:calc(62px + env(safe-area-inset-bottom,0px)) !important }
  #toast { bottom:calc(150px + env(safe-area-inset-bottom,0px)) !important } .cbanner { bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important }

  /* ---- the Casino: no header, the jackpot fixed at the top ---- */
  body[data-page="casino"] .pagehead, body[data-page="casino"] #tuBanner, body[data-page="casino"] #pauseBanner, body[data-page="casino"] #loginErr { display:none !important }
  body[data-page="casino"] .content { padding-top:calc(58px + env(safe-area-inset-top,0px)) }
  body[data-page="casino"] .cx-top { display:flex; align-items:center; gap:10px; position:fixed; top:0; left:0; right:0; z-index:90; height:calc(48px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 12px 0; background:linear-gradient(180deg,rgba(6,12,26,.98),rgba(9,17,34,.96)); border-bottom:1px solid rgba(245,192,74,.55); box-shadow:0 8px 26px rgba(0,0,0,.45) }
  .cx-top img { width:30px; height:30px; border-radius:9px; flex:0 0 auto; box-shadow:0 0 0 2px rgba(245,192,74,.5) }
  .cx-top-l { font:700 10.5px/1.15 'Chakra Petch',ui-sans-serif,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; background:linear-gradient(90deg,#ffe9a8,#f5c04a); -webkit-background-clip:text; background-clip:text; color:transparent; flex:1 1 auto; min-width:0 }
  .cx-top-v { display:inline-flex; align-items:center; gap:6px; font:700 22px/1 'Chakra Petch',ui-sans-serif,system-ui,sans-serif; letter-spacing:.03em; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fffbe8,#ffd978 55%,#f2a900); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 1px 8px rgba(245,192,74,.5)); flex:0 0 auto }
  .cx-top-login { flex:0 0 auto; padding:7px 12px; border-radius:10px; background:linear-gradient(135deg,#19d9b9,#0a9fd0); color:#032a2a !important; font:900 12px/1 'Chakra Petch',ui-sans-serif,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; text-decoration:none }
  .cx-top-login[hidden] { display:none }
  body[data-page="casino"] .cx-game .cx-jp { display:none }   /* the jackpot is fixed at the top: the pill of the game page is not needed */
  body[data-page="casino"] .cx-bar { scroll-margin-top:60px }

  /* ---- bigger Roulette, Mines and Tower (there is room now: no header, no jackpot pill) ---- */
  #p-mines .sg-host, #p-mines .sgslot { max-width:300px !important }
  #p-tower .sg-tile { height:38px !important; border-radius:9px } #p-tower .sg-cells { gap:5px } #p-tower .sg-tower { gap:4px }
  #p-roulette .rwslot { max-width:200px !important } #p-roulette .rtwheel { padding:10px }
}
@media (max-width:760px) {
  /* the hidden cart / sell bar must slide completely out of the screen (it sits above the menu now) */
  .bar:not(.show) { transform:translateY(calc(100% + 100px)) !important; visibility:hidden; pointer-events:none }
  /* casino pages: of the header only the menu stays (it is a child of the header, fixed at the bottom) */
  body[data-page="casino"] .topbar { display:flex !important; height:0; min-height:0; padding:0; border:0; background:none; box-shadow:none; overflow:visible }
  body[data-page="casino"] .topbar > *:not(#nav) { display:none !important }
}
@media (max-width:760px) { body[data-page="casino"] .cx-pot { display:none } }
@media (max-width:760px) { #p-wheel .xw-host, #p-wheel .xw-svg { max-width:250px !important } #p-plinko .pl-host { max-width:300px !important } }
@media (max-width:760px) { #p-roulette .rwslot { max-width:236px !important } #p-roulette .rtwheel { padding:6px 10px; gap:2px } #p-roulette .rtwheel .cfres { padding:5px 10px; margin:2px 0 0; font-size:12.5px } }

/* ---------- Hi-Lo: during a round the cards and the Higher / Lower buttons live in the controls card: they stay visible (casino-ui.js CX_KEEP); the text-only card is not shown ---------- */
@media (max-width:760px) {
  #p-hilo .card:not(.cx-ctl):not(:has(.xhcards, .xrrow, .plres)) { display:none }
  #p-hilo .cx-ctl .xhacts { gap:8px; margin:4px 0 2px } #p-hilo .cx-ctl .xhbtn { flex:1 1 0; min-width:0 }
  /* ---------- bigger Plinko and Roulette: narrower margins on the casino pages ---------- */
  body[data-page="casino"] .content { padding-left:8px; padding-right:8px }
  #p-casino { padding:8px 6px; border-radius:18px }
  .cx-game .cx-stage .card { padding:8px }
  #p-plinko .pl-host { max-width:none !important } #p-plinko .plboard { padding:6px }
  #p-roulette .rwslot { max-width:262px !important }
}

/* ---------- the LIVE strip of the latest results of all the players, above every game, also on a phone: one thin scrolling line ---------- */
@media (max-width:760px) {
  .cx-game .casstrip { display:flex !important; padding:3px 10px; margin:0 0 6px; border-radius:12px; min-height:0; gap:8px }
  .cx-game .casstrip .cl { font-size:10px; white-space:nowrap } .cx-game .casstrip .cr { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:5px } .cx-game .casstrip .cr::-webkit-scrollbar { display:none }
  .cx-game .casstrip .cas-c, .cx-game .casstrip .cas-n { transform:scale(.82); margin:-3px -2px }
}
/* the live strip takes a line: Roulette and Tower give it back so that the play button stays above the menu */
@media (max-width:760px) {
  #p-roulette .rwslot { max-width:218px !important } #p-roulette .rtwheel .cfres { padding:4px 10px; font-size:12px; margin:0 }
  #p-tower .sg-tile { height:33px !important } #p-tower .sg-cells { gap:4px }
}