/* UDN site chrome (dark) — swappable via game/chrome/header.html & footer.html */

:root {
  --udn-chrome-night: #131a2c;
  --udn-chrome-night-2: #0d1322;
  --udn-chrome-text: #e8ecf4;
  --udn-chrome-muted: #9aa3ba;
  --udn-chrome-line: rgba(243, 237, 226, 0.12);
  --udn-chrome-header-h: 48px;
  /* Expanded footer only — collapsed band is fixed to --udn-chrome-header-h */
  --udn-chrome-footer-safe: max(env(safe-area-inset-bottom, 0px), 12px);
  --udn-chrome-orange: #f39800;
  --udn-chrome-column-w: 430px;
  --udn-chrome-footer-reserve: 80px;
}

.udn-chrome-page:has(.udn-chrome-footer--collapsed) {
  --udn-chrome-footer-reserve: var(--udn-chrome-header-h);
}

/* —— Page shell: header / #app / footer —— */
.udn-chrome-page {
  flex-direction: column !important;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  background: var(--udn-chrome-night-2);
}

/* Intro & tall pages: document scrolls; chat pages lock viewport below */
.udn-chrome-page:not(:has(#bar)) {
  height: auto;
  overflow-x: hidden;
}

.udn-chrome-page:has(#bar) {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.udn-chrome-page #udn-header,
.udn-chrome-page #udn-footer,
.udn-chrome-page #app {
  width: 100%;
  max-width: var(--udn-chrome-column-w);
  box-sizing: border-box;
  flex: none;
}

.udn-chrome-page #udn-footer {
  margin-top: 0;
}

/* Mobile: natural height — no squeeze between header and footer */
.udn-chrome-page #app {
  min-height: 0;
  height: auto !important;
  max-height: none;
}

.udn-chrome-page:has(#bar) #app {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 500px) {
  .udn-chrome-page {
    padding-top: 0;
    padding-bottom: 0;
  }

  .udn-chrome-page:has(#bar) {
    height: auto;
    max-height: none;
    min-height: 100dvh;
    overflow: visible;
  }

  .udn-chrome-page #app {
    flex: 0 1 auto;
  }

  .udn-chrome-page #app,
  .udn-chrome-page:has(#bar) #app {
    height: min(860px, calc(100dvh - 32px - var(--udn-chrome-header-h) - var(--udn-chrome-footer-reserve))) !important;
    max-height: min(860px, calc(100dvh - 32px - var(--udn-chrome-header-h) - var(--udn-chrome-footer-reserve)));
    overflow: hidden;
  }

  /* Square #app bottom so footer top rule aligns with column edges (no radius wedge) */
  .udn-chrome-page:has(#udn-footer) #app {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* —— Header —— */
.udn-chrome-header {
  background: linear-gradient(180deg, rgba(13, 19, 34, 0.98), rgba(19, 26, 44, 0.92));
  border-bottom: 1px solid var(--udn-chrome-line);
  color: var(--udn-chrome-text);
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

.udn-chrome-header__inner {
  width: 100%;
  max-width: var(--udn-chrome-column-w);
  margin: 0 auto;
  min-height: var(--udn-chrome-header-h);
  padding: 8px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.udn-chrome-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--udn-chrome-text);
}

.udn-chrome-brand:focus-visible {
  outline: 2px solid var(--udn-chrome-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.udn-chrome-logo-img {
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.udn-chrome-brand__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.udn-chrome-member {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #b8c0d4;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 2px;
}

.udn-chrome-member__icon {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.udn-chrome-member--in {
  color: var(--udn-chrome-text);
}

.udn-chrome-member--in .udn-chrome-member__icon circle,
.udn-chrome-member--in .udn-chrome-member__icon path {
  fill: currentColor;
  stroke: none;
}

.udn-chrome-member:focus-visible {
  outline: 2px solid var(--udn-chrome-muted);
  outline-offset: 3px;
  border-radius: 4px;
}

/* —— Footer —— */
/* Shell is full column width; band (bg + top rule) sits on __inner to match #app edges */
.udn-chrome-footer {
  background: transparent;
  color: var(--udn-chrome-muted);
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.udn-chrome-footer__inner {
  width: 100%;
  max-width: var(--udn-chrome-column-w);
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--udn-chrome-night);
  border-top: 1px solid var(--udn-chrome-line);
  padding: 6px 20px calc(4px + var(--udn-chrome-footer-safe));
  position: relative;
}

.udn-chrome-footer--collapsed .udn-chrome-footer__inner {
  box-sizing: border-box;
  height: var(--udn-chrome-header-h);
  min-height: var(--udn-chrome-header-h);
  max-height: var(--udn-chrome-header-h);
  padding: 0 22px env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.udn-chrome-footer__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
}

.udn-chrome-footer__copy--bar {
  margin: 0;
  font-size: 11px;
  line-height: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.udn-chrome-footer__toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--udn-chrome-text);
  cursor: pointer;
}

.udn-chrome-footer__toggle:hover {
  background: rgba(243, 237, 226, 0.08);
}

.udn-chrome-footer__toggle:focus-visible {
  outline: 2px solid var(--udn-chrome-muted);
  outline-offset: 2px;
}

.udn-chrome-footer__chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.udn-chrome-footer:not(.udn-chrome-footer--collapsed) .udn-chrome-footer__chevron {
  transform: rotate(180deg);
}

.udn-chrome-footer__details .udn-chrome-footer__copy {
  margin-top: 2px;
}

.udn-chrome-footer--collapsed .udn-chrome-footer__details {
  display: none;
}

.udn-chrome-footer:not(.udn-chrome-footer--collapsed) .udn-chrome-footer__copy--bar {
  display: none;
}

.udn-chrome-footer:not(.udn-chrome-footer--collapsed) .udn-chrome-footer__bar {
  position: absolute;
  top: 6px;
  right: 12px;
  width: auto;
}

.udn-chrome-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
  min-height: 32px;
  padding: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.udn-chrome-footer__links a {
  color: var(--udn-chrome-text);
  text-decoration: none;
  white-space: nowrap;
}

.udn-chrome-footer__links a:hover {
  text-decoration: underline;
}

.udn-chrome-footer__links a:focus-visible {
  outline: 2px solid var(--udn-chrome-muted);
  outline-offset: 2px;
}

.udn-chrome-footer__copy {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--udn-chrome-muted);
}