/* MahjongYuk player app shell.
   Loaded only by layouts/app.php, on top of app.css, which supplies the palette and every
   component the pages themselves use. Nothing here restyles those components; this file is
   only the frame around them.

   One navigation, three shapes:
     phone   bottom tabs, where the thumb already is
     tablet  side rail, narrow
     desktop side rail, full width, content capped so lines stay readable */

:root {
  --app-bar:  56px;
  --app-tabs: 58px;
  --app-rail: 232px;
}

/* The bars are fixed, so the page needs its own scroll container to sit between them. */
.app-body { background: var(--cream); }

/* --------------------------------------------------------------------- app bar */
.app-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .7rem;
  height: calc(var(--app-bar) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) clamp(.8rem, 3vw, 1.15rem) 0;
  background: var(--jade-900);
  color: #fff;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
}
.app-brand:hover { color: #fff; }
.app-brand img { display: block; width: 26px; height: 26px; }

/* On a phone the page name earns the space; on a rail layout the rail already says
   where you are, so the product name goes back in its place. */
.app-brand-name { display: none; }
.app-title {
  min-width: 0;
  font-weight: 700;
  font-size: .98rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-bar-spacer { flex: 1 1 auto; }

.app-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 40vw;
  padding: .32rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-chip:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.app-chip-gold { background: var(--gold-500); color: var(--jade-900); }
.app-chip-gold:hover { background: var(--gold-100); color: var(--jade-900); }

/* ------------------------------------------------------------------ navigation */
.app-nav {
  position: fixed;
  z-index: 50;
  background: var(--paper);
}

.app-tab {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.app-tab:hover { color: var(--jade-700); }
.app-tab.is-active { color: var(--jade-700); }
.app-tab-icon { line-height: 1; }

/* The log-out control is a form button because logging out is a write, but it has to sit
   in the rail looking like every other row. */
.app-tab-button {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.app-main { padding-top: calc(var(--app-bar) + env(safe-area-inset-top)); }

/* ------------------------------------------------------------- phone: bottom tabs */
@media (max-width: 767px) {
  .app-nav {
    inset: auto 0 0 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-tab {
    flex-direction: column;
    justify-content: center;
    gap: .18rem;
    min-height: var(--app-tabs);
    padding: .45rem .2rem;
    font-size: .68rem;
    letter-spacing: .01em;
  }
  .app-tab.is-active { box-shadow: inset 0 2px 0 var(--gold-500); }
  .app-tab-icon { font-size: 1.12rem; }

  /* The website link and log-out belong in the rail, not in a four-tab bar. */
  .app-nav-aside { display: none; }

  .app-main { padding-bottom: calc(var(--app-tabs) + env(safe-area-inset-bottom) + .75rem); }
  .app-main.is-bare { padding-bottom: 1.5rem; }
}

/* -------------------------------------------------------------- tablet & desktop */
@media (min-width: 768px) {
  .app-nav {
    top: calc(var(--app-bar) + env(safe-area-inset-top));
    bottom: 0;
    left: 0;
    width: var(--app-rail);
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .9rem .7rem;
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }

  .app-tab {
    gap: .7rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .94rem;
  }
  .app-tab:hover { background: var(--jade-050); }
  .app-tab.is-active { background: var(--jade-050); }
  .app-tab-icon { width: 1.5rem; font-size: 1.05rem; text-align: center; }

  .app-nav-aside {
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
  }
  .app-nav-aside .app-tab { font-size: .85rem; font-weight: 600; }

  .app-brand-name { display: inline; }
  .app-title { display: none; }

  .app-main { margin-left: var(--app-rail); padding-bottom: 2.5rem; }
  .app-main.is-bare { margin-left: 0; }
}

/* A tablet has the width for a rail but not to spare, so the rail gets narrower. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --app-rail: 188px; }
  .app-tab { padding: .55rem .6rem; font-size: .88rem; }
}

/* ------------------------------------------------------------------- page rhythm */
/* The marketing site breathes; an app should not make you scroll past its own whitespace
   to reach the thing you opened it for. */
.app-main .section { padding: clamp(1rem, 3vw, 1.75rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.app-main .section-head { margin-bottom: 1.4rem; }
.app-main .section-head h1,
.app-main .section-head h2 { margin-top: 0; }

/* Beyond this width the rail stops growing, so cap the text instead of letting lines run. */
@media (min-width: 1240px) {
  .app-main > .section > .wrap { width: min(1040px, calc(100% - 3rem)); margin-inline: auto; }
  .app-main > .section > .narrow { width: min(820px, calc(100% - 3rem)); margin-inline: auto; }
}