/* Shared mobile navigation; existing focused game and checkout controls have separate owners.
 * Colours inherit the shared light/main and dark/Arcade tokens, including the body-level dialog.
 */
:is(#dice-mobile-top, #dice-mobile-tabs, #dice-mobile-more, .dice-mobile-nojs) { color-scheme: light; }
:is(.dice-design-lobby, .dice-design-playroom) :is(#dice-mobile-top, #dice-mobile-tabs, #dice-mobile-more, .dice-mobile-nojs) { color-scheme: dark; }
/* The existing transparent logo artwork is white. */
#dice-mobile-top .dice-mobile-brand img { filter: brightness(0); }
:is(.dice-design-lobby, .dice-design-playroom) #dice-mobile-top .dice-mobile-brand img { filter: none; }
#dice-mobile-top, #dice-mobile-tabs, #dice-mobile-more { display: none; }
@media (max-width: 980px) {
  body.dice-mobile-shell-ready {
    --dice-mobile-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    --dice-mobile-top: calc(60px + env(safe-area-inset-top, 0px));
    --dice-mobile-nav-layer: 80;
    padding-bottom: var(--dice-mobile-bottom);
  }
  html:has(body.dice-mobile-shell-ready) { scroll-padding-top: var(--dice-header-height,60px); scroll-padding-bottom: 80px; }
  body.dice-mobile-shell-ready .site-shell > .site-header { display: none; }
  body.dice-mobile-shell-ready #dice-mobile-top {
    box-sizing: border-box; display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: var(--dice-mobile-nav-layer);
    height: var(--dice-mobile-top); min-height: var(--dice-mobile-top); width: 100%;
    padding: calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));
    border-bottom: 1px solid var(--dice-ds-border); background: var(--dice-ds-surface); color: var(--dice-ds-strong);
  }
  #dice-mobile-top .dice-mobile-brand { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 44px; color: inherit; }
  #dice-mobile-top .dice-mobile-brand img { display: block; width: 30px; height: 32px; object-fit: contain; }
  #dice-mobile-top .dice-mobile-icon-button {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 44px; padding: 10px; border: 1px solid var(--dice-ds-border); border-radius: 4px;
    background: var(--dice-ds-surface); color: var(--dice-ds-strong); cursor: pointer;
  }
  #dice-mobile-top svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
  body.dice-mobile-shell-ready #dice-mobile-tabs {
    box-sizing: border-box; position: fixed; inset: auto 0 0; z-index: var(--dice-mobile-nav-layer);
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 2px;
    height: var(--dice-mobile-bottom); padding: 4px max(4px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));
    border-top: 1px solid var(--dice-ds-border); background: var(--dice-ds-surface); color: var(--dice-ds-muted);
  }
  #dice-mobile-tabs > a {
    box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    min-width: 0; min-height: 44px; padding: 4px 0; border: 0; border-radius: 4px;
    color: inherit; text-decoration: none; background: transparent; -webkit-tap-highlight-color: transparent;
  }
  #dice-mobile-tabs > a[aria-current="page"] { background: var(--dice-ds-raised); color: var(--dice-ds-strong); }
  #dice-mobile-tabs .dice-mobile-tab-label { font: 700 12px/1.15 var(--dice-font-display); letter-spacing: 0; text-transform: none; white-space: nowrap; }
  #dice-mobile-tabs .dice-mobile-tab-icon { position: relative; display: block; width: 22px; height: 22px; }
  #dice-mobile-tabs svg { display: block; width: 22px; height: 22px; }
  #dice-mobile-tabs .site-header__cart-count { position: absolute; inset: -4px -10px auto auto; min-width: 16px; height: 16px; padding: 0 3px; border: 0; border-radius: 2px; color: var(--dice-ds-on-yellow); background: var(--dice-ds-yellow); font: 700 10px/16px var(--dice-font-body); text-align: center; }
  #dice-mobile-tabs .site-header__cart-count[hidden] { display: none; }
  #dice-mobile-top :is(a,button,input):focus-visible,#dice-mobile-tabs a:focus-visible { outline: 2px solid var(--dice-ds-focus); outline-offset: -3px; }
  #dice-mobile-top .dice-mobile-icon-button:active { background: var(--dice-ds-yellow); color: var(--dice-ds-on-yellow); }
  #dice-mobile-top [data-mobile-arcade-search] { display: none; }
  .dice-design-lobby #dice-mobile-top [data-mobile-arcade-search] { display: inline-flex; }
  #dice-mobile-top .dice-mobile-search-slot:empty { display: none; }
  #dice-mobile-top .site-header__search { position: static; display: block; width: 44px; }
  #dice-mobile-top .site-header__search-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 1px solid var(--dice-ds-border); border-radius: 4px; color: var(--dice-ds-strong); background: var(--dice-ds-surface); }
  #dice-mobile-top .site-header__search-field { display: none; }
  #dice-mobile-top .site-header__search.is-open .site-header__search-field { display: block; position: absolute; top: 100%; left: 8px; right: 8px; width: auto; background: var(--dice-ds-surface); padding: 8px; border: 1px solid var(--dice-ds-border); }
  #dice-mobile-top .site-header__search-form { display: block; width: 100%; }
  #dice-mobile-top .site-header__search-input { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 44px; padding: 10px 12px; border: 1px solid var(--dice-ds-border); border-radius: 4px; font: 400 16px/1.4 var(--dice-font-body); background: var(--dice-ds-raised); color: var(--dice-ds-strong); }
  #dice-mobile-top .site-header__search-panel { position: absolute; top: calc(100% + 60px); left: 8px; right: 8px; width: auto; max-height: var(--dice-search-available-height, calc(100dvh - var(--dice-mobile-top) - var(--dice-mobile-bottom) - 76px)); overflow: hidden; }
  body.dice-mobile-shell-ready :is(.woocommerce-store-notice,p.demo_store) { bottom: calc(var(--dice-mobile-bottom) + 12px); }
  body.dice-mobile-shell-ready .woocommerce-notices-wrapper:has(.dice-snackbar-notice) { bottom: calc(var(--dice-mobile-bottom) + 12px + var(--dice-store-notice-space,0px)); max-height: max(44px,calc(100dvh - var(--dice-mobile-top) - var(--dice-mobile-bottom) - var(--dice-store-notice-space,0px) - 24px)); }
  /* Arcade has a bounded content viewport between the two navigation bars. */
  body.dice-mobile-shell-ready.dice-design-lobby { padding: 0; }
  body.dice-mobile-shell-ready.dice-design-lobby .dice-instant-game-shell { height: calc(100dvh - var(--dice-mobile-top) - var(--dice-mobile-bottom)); max-height: calc(100dvh - var(--dice-mobile-top) - var(--dice-mobile-bottom)); }
  body.dice-mobile-shell-ready.dice-design-lobby #dice-arcade-lobby { scroll-padding-top: 8px; scroll-padding-bottom: 8px; }
  body.dice-mobile-shell-ready.dice-design-lobby #dice-arcade-lobby > .dice-instant-arcade-sidebar { display: none; }
  body.dice-mobile-shell-ready #dice-arcade-lobby .dice-instant-game-nav > :is(.dice-instant-game-player-control,.dice-instant-game-exit) { display: none; }
  body.dice-mobile-shell-ready #dice-arcade-lobby .dice-instant-arcade-utility .dice-instant-game-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.dice-mobile-shell-ready #dice-arcade-lobby .dice-instant-game-nav { margin: 0; }
}
@media (max-width:980px) and (hover:hover) {
  #dice-mobile-tabs > a:hover { background: var(--dice-ds-raised); color: var(--dice-ds-strong); }
  #dice-mobile-top .dice-mobile-icon-button:hover { background: var(--dice-ds-yellow); color: var(--dice-ds-on-yellow); }
}

@media(max-width:980px) { #dice-mobile-top .dice-mobile-brand { gap: 8px; } #dice-mobile-top .dice-mobile-brand span { font: 700 20px/1.1 var(--dice-font-display); text-transform: uppercase; } }

.dice-mobile-more-primary { display: block; }
@media(max-width:980px) { .dice-mobile-more-primary { display: none; } }
.dice-mobile-nojs { display: none; }
@media(max-width:980px) {
  .dice-mobile-nojs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); box-sizing: border-box; height: 64px; padding: 4px; background: var(--dice-ds-surface); color: var(--dice-ds-strong); }
  .dice-mobile-nojs a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; color: inherit; font: 700 12px/1.3 var(--dice-font-display); text-decoration: none; }
  body.dice-design-lobby:has(.dice-mobile-nojs) .dice-instant-game-shell { height: calc(100dvh - 64px); max-height: calc(100dvh - 64px); }
}
  #dice-mobile-more .dice-mobile-icon-button {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 44px; padding: 10px; border: 1px solid var(--dice-ds-border); border-radius: 4px;
    background: var(--dice-ds-surface); color: var(--dice-ds-strong); cursor: pointer;
  }
  #dice-mobile-more svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
  #dice-mobile-more :is(a,button):focus-visible { outline: 2px solid var(--dice-ds-focus); outline-offset: -3px; }
  #dice-mobile-more .dice-mobile-icon-button:active { background: var(--dice-ds-yellow); color: var(--dice-ds-on-yellow); }
  #dice-mobile-more[open] { box-sizing: border-box; display: block; position: fixed; inset: auto 0 0; width: 100%; max-width: 560px; max-height: calc(100dvh - 16px); margin: 0 auto; padding: 20px 20px max(20px,env(safe-area-inset-bottom,0px)); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--dice-ds-border); border-radius: 8px 8px 0 0; background: var(--dice-ds-surface); color: var(--dice-ds-strong); }
  #dice-mobile-more::backdrop { background: rgb(0 0 0 / .65); }
  #dice-mobile-more .dice-mobile-more-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  #dice-mobile-more h2 { margin: 0; color: inherit; font: 700 24px/1.2 var(--dice-font-display); text-transform: uppercase; }
  #dice-mobile-more h3 { margin: 24px 0 8px; color: var(--dice-ds-muted); font: 700 12px/1.4 var(--dice-font-display); text-transform: uppercase; letter-spacing: .08em; }
  #dice-mobile-more nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 8px; border-radius: 4px; color: inherit; text-decoration: none; font: 400 16px/1.4 var(--dice-font-body); }
  #dice-mobile-more nav a:active { background: var(--dice-ds-raised); }
  #dice-mobile-more nav a:hover { background: var(--dice-ds-raised); color: var(--dice-ds-strong); }
  #dice-mobile-more .dice-mobile-icon-button:hover { background: var(--dice-ds-yellow); color: var(--dice-ds-on-yellow); }

/* Keep the block basket action above the app navigation and its safe area. */
@media(max-width:980px) { body.dice-mobile-shell-ready .wc-block-cart .wc-block-cart__submit-container--sticky { bottom: var(--dice-mobile-bottom); padding-bottom: 12px; z-index: calc(var(--dice-mobile-nav-layer) - 1); } }

/* Match the mobile brand bar to the black-and-white Dice header. */
@media (max-width: 980px) {
  body.dice-mobile-shell-ready #dice-mobile-top {
    --dice-ds-surface: #000;
    --dice-ds-raised: #191919;
    --dice-ds-strong: #fff;
    --dice-ds-muted: #ccc;
    --dice-ds-border: #333;
    background: #000;
    color: #fff;
    color-scheme: dark;
  }
  #dice-mobile-top .dice-mobile-brand,
  #dice-mobile-top .dice-mobile-brand span { color: #fff; }
  #dice-mobile-top .dice-mobile-brand img { filter: none; opacity: 1; }
  #dice-mobile-top .dice-mobile-icon-button:hover,
  #dice-mobile-top .site-header__search-toggle:hover { background: #191919; color: #fff; }
}