/* Global Shell + Home UI V2. Presentation only: routes, IDs and actions remain canonical. */
:root {
  --shell-v2-height: 58px;
  --shell-v2-mobile-nav: 62px;
}

body:not(.public-landing-active):not(.public-landing-pending) > .app > .global-shell-v2 {
  position: relative;
  z-index: 70;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 7px 8px;
  border: 1px solid rgba(196, 154, 74, .25);
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(196, 154, 74, .07), transparent 28%),
    rgba(9, 13, 10, .96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .035);
}

.global-shell-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.global-shell-v2 .global-shell-brand h1 {
  flex: 0 0 auto;
  color: #fff8e7;
  font-family: Georgia, serif;
  font-size: 23px;
  letter-spacing: .015em;
}

.global-shell-location {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding-left: 11px;
  border-left: 1px solid rgba(196, 154, 74, .22);
}

.global-shell-location span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.global-shell-location strong {
  overflow: hidden;
  color: #e8c779;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-shell-character {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 5px;
  border: 1px solid rgba(200, 208, 198, .15);
  border-radius: 999px;
  background: rgba(31, 37, 31, .76);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.global-shell-character:hover,
.global-shell-character:focus-visible {
  border-color: rgba(228, 189, 103, .56);
  outline: 0;
}

.global-shell-avatar {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 189, 103, .42);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #544326, #111510 70%);
  color: #f3d892;
  font-family: Georgia, serif;
  font-weight: 900;
}

.global-shell-avatar img {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  object-fit: cover;
  object-position: 50% 15%;
}

.global-shell-character-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.global-shell-character-copy strong,
.global-shell-character-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-shell-character-copy strong { font-size: 12px; }
.global-shell-character-copy small { color: var(--muted); font-size: 9px; }

.global-shell-battle-mark {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef765f;
  box-shadow: 0 0 0 4px rgba(239, 118, 95, .12), 0 0 12px rgba(239, 118, 95, .65);
}

.global-shell-v2 .gm-screen-tab .screen-tab-mark { display: none; }

.global-shell-utility { position: relative; }
.global-shell-utility > summary {
  width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(200, 208, 198, .16);
  border-radius: 50%;
  background: rgba(31, 37, 31, .8);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.global-shell-utility > summary::-webkit-details-marker { display: none; }
.global-shell-utility > summary svg { width: 17px; height: 17px; fill: currentColor; }
.global-shell-utility[open] > summary,
.global-shell-utility > summary:hover,
.global-shell-utility > summary:focus-visible { border-color: var(--gold); color: var(--gold); outline: 0; }

.global-shell-utility-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(300px, calc(100vw - 20px));
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(196, 154, 74, .38);
  border-radius: 12px;
  background: rgba(12, 16, 13, .985);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .6);
}

.global-shell-utility-popover > strong { color: #fff8e7; font-family: Georgia, serif; font-size: 18px; }
.global-shell-v2 .display-panel {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.global-shell-v2 .display-panel label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.global-shell-v2 .display-panel select { width: 100%; min-height: 42px; font-size: 13px; }
.global-shell-v2 .display-panel button { grid-column: 1 / -1; min-height: 42px; }

/* Home reads as Character -> current state -> consequences -> optional paths. */
body[data-game-screen="overview"] #overviewHeroPanel.home-identity-shell {
  border-radius: 16px;
}

body[data-game-screen="overview"] .home-current-state {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(196, 154, 74, .34);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0, rgba(196, 154, 74, .12), transparent 38%),
    rgba(7, 11, 8, .82);
}

.home-current-state-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.home-current-state-heading .home-kicker { margin: 0; }
.home-current-state-heading h3 { margin: 0; color: #fff8e7; font-family: Georgia, serif; font-size: 20px; }
.home-current-state > #returnActiveBattleButton { min-height: 52px; font-size: 15px; }
.home-current-state:has(#returnActiveBattleButton:not([hidden])) #homeArenaEntry { display: none; }
.home-current-state .home-arena-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px 13px;
  border: 0;
  background: linear-gradient(90deg, rgba(96, 57, 29, .42), rgba(39, 43, 32, .7));
}
.home-current-state .home-arena-entry h3 { font-family: Georgia, serif; }
.home-current-state .home-arena-entry button { min-width: 150px; }
.home-current-state .home-journey-card,
.home-current-state .home-battle-outcome,
.home-current-state .home-recovery-status { margin: 0; }
.home-current-state .home-recovery-status { padding: 0; border: 0; background: transparent; }
.home-current-state .recovery-status-row { padding: 9px 11px; border: 1px solid rgba(101, 212, 138, .18); border-radius: 10px; background: rgba(101, 212, 138, .055); }

body[data-game-screen="overview"] .home-resource-row { order: initial; }
body[data-game-screen="overview"] .home-history-disclosure,
body[data-game-screen="overview"] .home-training-access { border-color: rgba(200, 208, 198, .13); }

@media (min-width: 960px) and (min-height: 600px) {
  body:not(.public-landing-active):not(.public-landing-pending) > .app {
    grid-template-rows: var(--shell-v2-height) minmax(0, 1fr);
    padding-top: 8px;
  }

  body:not(.public-landing-active):not(.public-landing-pending) > .app > .global-shell-v2 {
    min-height: var(--shell-v2-height);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    flex-wrap: nowrap;
    margin-bottom: 8px;
  }

  body:not(.public-landing-active):not(.public-landing-pending) > .app > .global-shell-v2 .screen-tabs {
    width: auto;
    justify-content: center;
    overflow: visible;
    scrollbar-width: none;
  }

  body:not(.public-landing-active):not(.public-landing-pending) > .app > .global-shell-v2 .screen-tab {
    min-width: 0;
    min-height: 38px;
    flex: 1 1 72px;
    padding-inline: 9px;
  }

  .global-shell-v2 .identity-shell-compact { margin: 0; }

  body[data-game-screen="overview"] #overviewHeroPanel.home-identity-shell {
    grid-template-columns: minmax(310px, .7fr) minmax(520px, 1.3fr);
  }
  body[data-game-screen="overview"] .home-character-stage { grid-column: 1; grid-row: 1; border-left: 0; border-right: 1px solid rgba(196,154,74,.17); }
  body[data-game-screen="overview"] .home-identity-content { grid-column: 2; grid-row: 1; border-right: 0; }
}

@media (max-width: 959px), (max-height: 599px) {
  body:not(.public-landing-active):not(.public-landing-pending) {
    padding-bottom: calc(var(--shell-v2-mobile-nav) + env(safe-area-inset-bottom));
  }

  body:not(.public-landing-active):not(.public-landing-pending) > .app {
    width: min(var(--app-width), calc(100vw - 16px));
    padding-top: 8px;
    padding-bottom: 10px;
  }

  body:not(.public-landing-active):not(.public-landing-pending) > .app > .global-shell-v2 {
    min-height: 54px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    flex-wrap: nowrap;
    margin-bottom: 8px;
    padding: 5px 6px 5px 9px;
  }

  .global-shell-brand { display: grid; gap: 0; }
  .global-shell-v2 .global-shell-brand h1 { font-size: 19px; line-height: 1; }
  .global-shell-location { padding: 0; border: 0; }
  .global-shell-location span { display: none; }
  .global-shell-location strong { max-width: 112px; font-size: 10px; }

  body:not(.public-landing-active):not(.public-landing-pending) > .app > .global-shell-v2 .screen-tabs {
    position: fixed;
    z-index: 95;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--shell-v2-mobile-nav) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding: 5px max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
    overflow: visible;
    border-top: 1px solid rgba(196, 154, 74, .34);
    background: rgba(8, 12, 9, .965);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .45);
    backdrop-filter: blur(12px);
  }

  .global-shell-v2 .screen-tab {
    min-width: 0;
    min-height: 50px;
    display: grid;
    grid-template-rows: 20px auto;
    place-items: center;
    gap: 1px;
    padding: 4px 2px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
  }
  .global-shell-v2 .screen-tab.active { background: rgba(196, 154, 74, .12); box-shadow: inset 0 0 0 1px rgba(228, 189, 103, .2); }
  .global-shell-v2 .screen-tab-mark { width: 18px; height: 18px; }
  .global-shell-v2 .screen-tab-label { width: 100%; overflow: hidden; font-size: 8px; line-height: 1.05; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .global-shell-v2 .gm-screen-tab { display: none !important; }
  .global-shell-v2 .identity-dev-badge { display: none; }

  .global-shell-character { max-width: 142px; min-height: 40px; }
  .global-shell-avatar { flex-basis: 30px; width: 30px; height: 30px; }
  .global-shell-character-copy strong { max-width: 86px; }
  .global-shell-character-copy small { max-width: 94px; }

  .global-shell-utility > summary,
  .identity-account-trigger { width: 40px; min-height: 40px; }
  .global-shell-utility-popover { position: fixed; top: 68px; right: 8px; }
  .identity-account-popover { top: 58px; right: 8px; }

  body[data-game-screen="overview"] #overviewHeroPanel.home-identity-shell {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-game-screen="overview"] .home-character-stage {
    grid-row: 1;
    min-height: 270px;
    max-height: 270px;
  }
  body[data-game-screen="overview"] .home-identity-content { grid-row: 2; padding: 16px; }
  body[data-game-screen="overview"] .home-character-art,
  body[data-game-screen="overview"] .home-character-base,
  body[data-game-screen="overview"] .home-character-attachment { height: 330px; bottom: -8px; }
  body[data-game-screen="overview"] .home-world-anchor { max-width: 48%; top: 10px; right: 10px; }
  body[data-game-screen="overview"] .home-identity-heading h2 { font-size: 31px; }
  body[data-game-screen="overview"] .home-current-state .home-arena-entry { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-game-screen="overview"] .home-current-state .home-arena-entry button { min-width: 118px; }
  body[data-game-screen="overview"] .home-resource-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .global-shell-character { max-width: 112px; padding-right: 5px; }
  .global-shell-character-copy strong { max-width: 57px; }
  .global-shell-character-copy small { max-width: 66px; }
  .global-shell-character-copy small > span:first-child,
  .global-shell-character-copy small #globalShellLevel { display: none; }
  body[data-game-screen="overview"] .home-current-state .home-arena-entry { grid-template-columns: 1fr; }
  body[data-game-screen="overview"] .home-current-state .home-arena-entry button { width: 100%; }
}

@media (max-height: 599px) and (orientation: landscape) {
  :root { --shell-v2-mobile-nav: 54px; }
  body:not(.public-landing-active):not(.public-landing-pending) > .app > .global-shell-v2 { min-height: 46px; }
  .global-shell-v2 .global-shell-brand h1 { font-size: 18px; }
  .global-shell-character { min-height: 36px; }
  .global-shell-avatar { flex-basis: 27px; width: 27px; height: 27px; }
  .global-shell-utility > summary,
  .identity-account-trigger { width: 36px; min-height: 36px; }
  .global-shell-v2 .screen-tab { min-height: 43px; grid-template-rows: 17px auto; }
  .global-shell-v2 .screen-tab-mark { width: 16px; height: 16px; }
  body[data-game-screen="overview"] #overviewHeroPanel.home-identity-shell { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); }
  body[data-game-screen="overview"] .home-character-stage { grid-column: 1; grid-row: 1; min-height: 420px; height: 420px; max-height: 420px; align-self: start; }
  body[data-game-screen="overview"] .home-identity-content { grid-column: 2; grid-row: 1; padding: 14px; }
  body[data-game-screen="overview"] .home-character-appearance {
    inset: 0;
    transform: none;
  }
  body[data-game-screen="overview"] .home-character-appearance[data-mode="modular"] .home-character-base,
  body[data-game-screen="overview"] .home-character-appearance[data-mode="modular"] .home-character-attachment { display: none; }
  body[data-game-screen="overview"] .home-character-appearance #overviewHeroArt {
    display: block !important;
    width: calc(100% - 18px);
    height: calc(100% - 10px);
    bottom: 0;
    object-fit: contain;
    object-position: 50% 100%;
  }
  body[data-game-screen="overview"] .home-identity-heading h2 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .global-shell-battle-mark { box-shadow: none; }
}