:root {
  --hybrid-nav-height: clamp(64px, 9.5vh, 92px);
  --hybrid-top-height: clamp(62px, 10vh, 96px);
  --hybrid-gap: clamp(5px, 0.9vh, 12px);
}

html,
body {
  height: 100%;
}

body:not(.in-game) {
  overflow: hidden;
}

#screen-title {
  /* Home panel top: the usual top space, but always room for the BrainPang logo that straddles the
     panel's top border (the UI Tool picture #ui-add-picture-1 is placed from this value). The logo box
     sits 44px above the border; its artwork must stay clear of the top bar (--lobby-bar-bottom, set by
     js/hybridLobby.js from the real bar). */
  --home-panel-top: max(var(--hybrid-top-height), calc(var(--lobby-bar-bottom, 62px) + 42px));
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
}

#screen-title > .lobby-main {
  grid-area: 1 / 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding: var(--home-panel-top) 10px var(--hybrid-gap);
  box-sizing: border-box;
}

/* The logo added with the UI Tool belongs to the home panel: hidden on World, Collection and the others. */
#screen-title.hybrid-view-active > #ui-add-panel-1 {
  display: none;
}

#screen-title.hybrid-view-active #lobby-main > :not(.lobby-topbar) {
  display: none !important;
}

#screen-title .lobby-topbar {
  position: fixed;
  z-index: 40;
  top: max(6px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 12px));
}

#screen-title .lobby-topbar .resource-bar {
  width: 100%;
}

#screen-title .lobby-content-menu,
#screen-title > .lobby-footer,
#screen-title .play-row {
  display: none;
}

.hybrid-home-panel {
  width: calc(100vw - 20px);
  max-width: 760px;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--hybrid-gap);
  padding: clamp(8px, 1.4vh, 16px);
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid #0878df;
  border-radius: clamp(18px, 3vw, 30px);
  background: linear-gradient(#fffdf2, #fff3cf);
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 #c89235, 0 6px 16px #0b2f6570;
}

#hybrid-home-logo-wrap {
  grid-area: auto;
  display: flex;
  justify-content: center;
  min-height: 0;
}

#hybrid-home-logo-wrap .brainpang-logo {
  width: clamp(116px, 24vw, 220px);
  max-height: clamp(42px, 7vh, 72px);
  object-fit: contain;
}

.home-main-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(4px, 0.8vh, 10px);
}

.home-daily-cta {
  grid-column: 1 / -1;
  min-height: clamp(42px, 7vh, 68px);
  font-size: clamp(21px, 3.5vh, 38px);
}

/* Set by fitText when the label does not fit on one line even at 14px
   (Vietnamese, Latin-American Spanish, Turkish at 320px): two lines. */
.home-daily-cta.is-wrapped {
  white-space: normal;
  text-align: center;
  word-break: keep-all;
  line-height: 1.1;
  padding-top: 4px;
  padding-bottom: 6px;
}

/* No spaces to keep words together in Chinese/Japanese: break between phrases. */
:lang(ja) .home-daily-cta.is-wrapped,
:lang(zh) .home-daily-cta.is-wrapped,
:lang(ja) .home-stage-title.is-wrapped,
:lang(zh) .home-stage-title.is-wrapped {
  word-break: auto-phrase;
}

/* Phones: the big home button (today's picks / extra round) at 70% of its size,
   words included, so the stage card and the level strip below keep their room. */
@media (max-width: 899px) {
  .home-daily-cta {
    --cta-h: 64px;
    width: min(252px, 55vw);
    min-height: clamp(29px, 4.9vh, 48px);
    padding: 0 20px 3px;
    font-size: clamp(15px, 2.45vh, 27px);
  }
}

.home-stage-card {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(72px, 15vw, 144px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: clamp(54px, 9vh, 86px);
  padding: 6px 10px;
  border: 2px solid #e5bd6e;
  border-radius: 16px;
  background: #fffaf0;
}

.home-stage-thumb {
  width: 100%;
  height: clamp(44px, 7vh, 72px);
  object-fit: cover;
  border-radius: 10px;
}

.home-stage-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-stage-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: clamp(15px, 2.6vh, 25px);
}

/* Narrow phones (320~360px): a smaller picture and gaps leave the title room
   for a long single word ("Weiterspielen") at the 14px floor. */
@media (max-width: 360px) {
  .home-stage-card {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px 8px;
  }
}

/* Set by fitText when even 14px does not fit on one line: two lines, breaking
   between words only (keep-all keeps Korean words whole). */
.home-stage-title.is-wrapped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.15;
}

.home-stage-level {
  color: #633517;
  font-weight: 700;
}

.home-stage-button {
  min-width: clamp(74px, 17vw, 132px);
  min-height: 44px;
  border: 3px solid #ffc421;
  border-radius: 14px;
  background: linear-gradient(#1686ff, #0053c5);
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 2px 0 #fff8, 0 3px 0 #713b00;
}

#level-gallery {
  grid-area: auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 8px 4px;
  justify-self: stretch;
}

#level-gallery .stage-panel-body {
  min-height: 0;
  overflow: hidden;
}

#level-gallery .stage-panel-header {
  position: static;
  transform: none;
  display: flex;
  justify-content: center;
}

#level-gallery .stage-panel-title {
  height: clamp(28px, 4vh, 40px);
  min-width: 120px;
  padding-inline: 20px;
}

#level-gallery .stage-panel-frame {
  display: none;
}

#level-gallery .level-gallery-progress {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
}

#level-gallery-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  gap: 8px;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#level-gallery-grid::after {
  display: none;
}

.hybrid-sub-actions {
  flex: 0 0 auto;
  width: min(700px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: var(--hybrid-gap);
}

.hybrid-sub-button {
  position: relative;
  min-width: 0;
  height: clamp(42px, 6.5vh, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 3px solid #ffd14a;
  border-radius: 14px;
  background: linear-gradient(#177dff, #064cc1);
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 2px 0 #fff8, 0 3px 0 #6e3b00;
}

.hybrid-sub-button img {
  width: clamp(26px, 4.5vh, 44px);
  height: clamp(26px, 4.5vh, 44px);
  object-fit: contain;
}

/* Not-ready menus (attendance, event, tournament, Memory Challenge): only the
   icon turns gray and the level gallery lock sits in front of it. The button
   keeps its colours and still opens the "coming soon" notice. */
.menu-lock-slot {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.menu-icon--locked {
  filter: grayscale(1);
}

.bottom-nav-btn img.menu-icon--locked {
  filter: grayscale(1) var(--bp-layer-filter, drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)));
}

.menu-lock-slot > .menu-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 62%;
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

#bottom-nav {
  grid-area: 2 / 1;
  position: relative;
  bottom: auto;
  z-index: 30;
  width: 100vw;
  height: var(--hybrid-nav-height);
  box-sizing: border-box;
  /* The buttons run to the screen edge, so the separators and the buttons' bottom line reach it too, and keep
     their content above the system's area through their own padding. The height the UI tool writes for
     #bottom-nav (css/ui-layer-overrides.css) still applies: this minimum is 0 when the safe area is 0, and
     its 70px is that height, so change them together. */
  --bottom-nav-edge: var(--safe-bottom);
  min-height: min(calc(70px + var(--bottom-nav-edge)), calc(var(--bottom-nav-edge) * 100));
  padding-bottom: 0;
}

/* iOS only (owner 2026-11-05): the labels end 10px above the screen edge, over the home indicator area. */
html.ios-device #bottom-nav {
  --bottom-nav-edge: min(var(--safe-bottom), 8px);
}

#bottom-nav .bottom-nav-btn {
  padding-bottom: var(--bottom-nav-edge);
}

#bottom-nav .bottom-nav-btn[aria-current="page"] {
  background: linear-gradient(#168dff, #0756cc);
  box-shadow: inset 0 3px 0 #fff8, inset 0 -3px 0 #063b9d;
}

.hybrid-lobby-view {
  grid-area: 1 / 1;
  position: relative;
  z-index: 20;
  inset: auto;
  height: 100%;
  width: 100%;
  min-height: 0;
  /* Title and tabs stay put; only the list region below them scrolls
     (css/contentScreens.css marks the scroll regions). */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* The drawn title about 12px under the real bottom of the fixed top bar (owner 2026-10-31): the
     World/Collection ribbon art is clear for its top 9/297 (about 2px). The shop and the tournament set
     their own (css/shop.css, css/contest.css). --lobby-bar-bottom is measured by js/hybridLobby.js. */
  padding: calc(var(--lobby-bar-bottom, 62px) + 10px) 12px 0;
  box-sizing: border-box;
}

/* World and Collection layouts and looks: css/contentScreens.css. */
.world-grid,
.collection-grid {
  margin-inline: auto;
}

/* Animal Rescue screen styles: css/village.css (rescue village map). */

@media (max-height: 720px) {
  :root {
    --hybrid-top-height: 66px;
    --hybrid-nav-height: 64px;
    --hybrid-gap: 4px;
  }

  .hybrid-home-panel {
    padding: 6px 8px;
  }

  #hybrid-home-logo-wrap .brainpang-logo {
    max-height: 42px;
  }

  #level-gallery .stage-panel-header,
  #level-gallery .level-gallery-progress {
    display: none;
  }
}

@media (max-width: 520px) {
  /* Icon over a bigger word, close together and centred: the icon takes what the
     button height leaves after the word. The row keeps a little room above the
     bottom menu so the raised Home tab never covers a word. */
  .hybrid-sub-actions {
    margin-bottom: 8px;
  }

  .hybrid-sub-button {
    --hybrid-sub-h: clamp(48px, 7vh, 64px);
    height: var(--hybrid-sub-h);
    flex-direction: column;
    gap: 1px;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1.05;
    container-type: inline-size;
  }

  .hybrid-sub-button img:not(.menu-lock) {
    width: calc(var(--hybrid-sub-h) - 26px);
    height: calc(var(--hybrid-sub-h) - 26px);
  }

  .hybrid-sub-label {
    max-width: 100%;
    white-space: nowrap;
  }

  /* Longer English / Japanese words take the largest size that fits the button. */
  html:not([lang="ko"]) .hybrid-sub-label {
    font-size: clamp(10px, 12cqi, 13px);
  }
}

/* 320px: "Tournament" is wider than its 63px tab and ran into the neighbours. */
@media (max-width: 340px) {
  html:not(:lang(ko)):not(:lang(ja)):not(:lang(zh)) #bottom-nav #nav-tournament-label {
    font-size: 11px;
    letter-spacing: -0.03em;
  }
}