/*
 * RAIENS — shared application shell
 * One spacing scale, one safe-area policy and one mobile layout contract
 * across every public page.
 */

:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-header-height: 92px;
  --app-page-gutter: clamp(18px, 4vw, 32px);
  --app-content-max: 1240px;
  --app-content-width: min(
    calc(100% - max(36px, 8%, calc(var(--app-safe-left) + var(--app-safe-right)))),
    var(--app-content-max)
  );
  --app-content-top: calc(var(--app-header-height) + var(--app-safe-top) + 32px);
  --app-dock-clearance: calc(var(--app-nav-height, 76px) + var(--app-safe-bottom) + 24px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  --app-section-space: clamp(80px, 9vw, 120px);
  --app-section-space-tight: clamp(48px, 6vw, 72px);
  --app-card-padding: clamp(20px, 3vw, 32px);
  --app-grid-gap: clamp(14px, 2vw, 20px);
  --app-touch-size: 48px;
}

html {
  min-height: 100%;
  scroll-padding-top: calc(var(--app-header-height) + var(--app-safe-top) + 16px);
  background: #06110d;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

main,
section,
article,
nav,
div {
  min-width: 0;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.raiens-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

:is(
  .profile-avatar,
  .ready-avatar,
  .account-avatar,
  .status-avatar,
  .summary-avatar,
  .friend-avatar,
  .table-avatar,
  .invite-emblem,
  [data-account-avatar],
  [data-app-profile-avatar]
) {
  overflow: hidden;
}

nav.app-bottom-nav [data-app-profile-avatar].has-avatar {
  width: 27px;
  height: 27px;
  border: 1px solid rgba(141, 255, 31, .65);
  border-radius: 50%;
  background: #13251b;
  box-shadow: 0 0 10px rgba(141, 255, 31, .2);
  filter: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.topbar {
  position: fixed !important;
  z-index: 80;
  inset: 0 0 auto;
  height: calc(var(--app-header-height) + var(--app-safe-top));
  padding:
    var(--app-safe-top)
    max(var(--app-page-gutter), var(--app-safe-right))
    0
    max(var(--app-page-gutter), var(--app-safe-left));
  background: rgba(3, 13, 8, .82);
  border-bottom-color: rgba(218, 255, 227, .12);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

/* The persistent application dock owns primary navigation on every screen. */
.topbar > nav,
.games-header-actions > nav {
  display: none !important;
}

.brand,
.auth-back,
.invite-back,
footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

a,
button,
summary,
select,
input {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button,
a,
summary {
  overflow-wrap: anywhere;
}

:is(
  .button,
  .play-card,
  .card-button,
  .panel-button,
  .secondary-button,
  .auth-submit,
  .profile-button,
  .invite-button,
  .invite-secondary,
  .status-action,
  .refresh-button,
  .logout-button,
  .friend-code-card button
) {
  min-height: 52px;
}

:is(.modal-close, .text-button, .score-link, .friend-action) {
  min-height: 44px;
}

.account-pill,
.account-chip {
  min-height: var(--app-touch-size);
}

.text-button,
.score-link {
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.friend-action {
  padding-block: 8px;
  font-size: 9px;
  line-height: 1.25;
}

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--lime, #8dff1f);
  outline-offset: 3px;
}

.scoreboard-page main,
.friends-page main {
  overflow: visible;
}

:is(
  .section,
  .games-section,
  .league-section,
  .friends-section,
  .friends-tools,
  .squad-section,
  .team-board-section,
  .guest-panel,
  .profile-loading,
  .profile-guest,
  .profile-dashboard,
  .app-install-section
) {
  width: var(--app-content-width);
}

.power.section {
  width: 100%;
}

.arcade-hero,
.friends-hero,
.scoreboard-hero,
.profile-intro {
  padding-right: max(
    var(--app-page-gutter),
    4%,
    var(--app-safe-right),
    calc((100% - var(--app-content-max)) / 2)
  );
  padding-left: max(
    var(--app-page-gutter),
    4%,
    var(--app-safe-left),
    calc((100% - var(--app-content-max)) / 2)
  );
}

.auth-promo {
  padding-right: max(
    5vw,
    var(--app-safe-right),
    calc((100vw - var(--app-content-max)) / 2)
  );
  padding-left: max(5vw, var(--app-safe-left));
}

.auth-panel {
  padding-right: max(clamp(24px, 5vw, 76px), var(--app-safe-right));
  padding-left: max(clamp(24px, 5vw, 76px), var(--app-safe-left));
}

.invite-main {
  padding-right: max(var(--app-page-gutter), var(--app-safe-right));
  padding-left: max(var(--app-page-gutter), var(--app-safe-left));
}

.hero-content {
  width: var(--app-content-width);
}

:is(
  .section,
  .games-section,
  .league-section,
  .friends-tools,
  .profile-dashboard
) {
  padding-block: var(--app-section-space);
}

:is(.squad-section, .team-board-section, .profile-guest) {
  padding-block: var(--app-section-space-tight) var(--app-section-space);
}

.guest-panel {
  margin-block: var(--app-section-space);
}

:is(.game-select-grid, .profile-shell, .profile-side, .tool-grid) {
  gap: var(--app-grid-gap);
}

.scoreboard-hero .hero-copy h1 {
  font-size: clamp(48px, 14vw, 118px);
}

/* Install surface is part of the page flow, never an obstructive pop-up. */
.app-install-section {
  width: var(--app-content-width);
  margin: 0 auto;
  padding-block: var(--app-section-space-tight);
}

.app-install-section[hidden] {
  display: none;
}

.app-install-section:not([hidden]) + .section {
  padding-top: var(--app-section-space-tight);
}

.app-install-card {
  position: relative;
  padding: var(--app-card-padding);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(141, 255, 31, .26);
  border-left: 4px solid var(--lime);
  background:
    radial-gradient(circle at 88% 10%, rgba(66, 198, 255, .12), transparent 36%),
    linear-gradient(135deg, rgba(141, 255, 31, .09), transparent 58%),
    #081a12;
  box-shadow: 14px 14px 0 rgba(141, 255, 31, .07);
}

.app-install-icon {
  width: clamp(72px, 9vw, 104px);
  aspect-ratio: 1;
  padding: 5px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(141, 255, 31, .32);
  border-radius: 22%;
  background: rgba(141, 255, 31, .07);
}

.app-install-icon img {
  width: 100%;
  height: 100%;
  border-radius: 18%;
  object-fit: cover;
}

.app-install-copy small {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--lime);
  font: 850 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}

.app-install-copy h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(28px, 4vw, 48px);
  line-height: .95;
}

.app-install-copy p {
  max-width: 680px;
  margin: 0;
  color: #a7b7ad;
  font-size: 14px;
  line-height: 1.6;
}

.app-install-hint {
  margin-top: var(--space-3) !important;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid #42c6ff;
  color: #dcebe1 !important;
  background: rgba(66, 198, 255, .08);
}

.app-install-action {
  min-width: 196px;
  min-height: 54px;
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border: 0;
  color: #061008;
  background: var(--lime);
  cursor: pointer;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: 6px 6px 0 rgba(141, 255, 31, .14);
}

.app-install-action b {
  font-size: 19px;
}

@media (display-mode: standalone) {
  html {
    background: #06110d;
  }

  .app-install-section {
    display: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --app-header-height: 72px;
    --app-page-gutter: 18px;
    --app-content-top: calc(var(--app-header-height) + var(--app-safe-top) + 32px);
    --app-dock-clearance: calc(var(--app-nav-height, 70px) + var(--app-safe-bottom) + 24px);
    --app-section-space: 80px;
    --app-section-space-tight: 48px;
    --app-card-padding: 20px;
    --app-grid-gap: 16px;
  }

  .topbar {
    height: calc(var(--app-header-height) + var(--app-safe-top));
    padding:
      var(--app-safe-top)
      max(16px, var(--app-safe-right))
      0
      max(16px, var(--app-safe-left));
  }

  .topbar .brand {
    min-width: 44px;
  }

  .hero {
    padding-top: calc(var(--app-header-height) + var(--app-safe-top));
  }

  .hero-content {
    margin-bottom: var(--app-dock-clearance);
  }

  .arcade-hero,
  .friends-hero,
  .scoreboard-hero,
  .profile-intro,
  .auth-panel,
  .invite-main {
    padding-top: var(--app-content-top);
  }

  .friends-hero,
  .scoreboard-hero,
  .profile-intro,
  .auth-panel,
  .invite-main {
    padding-bottom: var(--app-dock-clearance);
  }

  .arcade-hero {
    padding-bottom: calc(var(--app-dock-clearance) + 150px);
  }

  .xp-dock {
    bottom: var(--app-dock-clearance);
  }

  :is(.section, .games-section, .league-section, .friends-tools, .profile-dashboard) {
    padding-block: var(--app-section-space);
  }

  :is(.squad-section, .team-board-section, .profile-guest) {
    padding-block: var(--app-section-space-tight) var(--app-section-space);
  }

  .guest-panel {
    margin-block: var(--app-section-space);
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }

  footer {
    padding-right: max(18px, var(--app-safe-right));
    padding-left: max(18px, var(--app-safe-left));
  }

  .app-install-card {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-4);
    box-shadow: 9px 9px 0 rgba(141, 255, 31, .07);
  }

  .app-install-icon {
    width: 64px;
  }

  .app-install-copy h2 {
    font-size: clamp(26px, 9vw, 38px);
  }

  .app-install-action {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }

  .game-modal {
    padding:
      var(--app-safe-top)
      var(--app-safe-right)
      var(--app-safe-bottom)
      var(--app-safe-left);
    background: #07150e;
  }

  .recovery-modal {
    padding:
      max(18px, var(--app-safe-top))
      max(18px, var(--app-safe-right))
      max(18px, var(--app-safe-bottom))
      max(18px, var(--app-safe-left));
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .recovery-card {
    margin: auto;
  }

  .modal-window {
    height: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom));
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .game-panel:not([hidden]) {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  :is(
    .clicker-stage,
    .catch-stage,
    .quiz-stage,
    .outline-stage,
    .penalty-stage,
    .memory-stage,
    .worldcup-stage,
    .swipe-stage,
    .accuracy-stage
  ) {
    height: auto;
    min-height: 0;
  }

  :is(.quiz-stage, .outline-stage, .memory-stage, .worldcup-stage) {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 390px) {
  :root {
    --app-page-gutter: 16px;
    --app-section-space: 72px;
  }

  .app-install-card {
    grid-template-columns: 1fr;
  }

  .app-install-icon {
    width: 70px;
  }
}

@media (max-width: 760px) and (max-height: 620px) {
  .modal-head {
    min-height: 62px;
    padding-block: 8px;
  }

  .modal-head h2 {
    font-size: 20px;
  }

  .mini-hud {
    height: 56px;
  }

  .worldcup-visual {
    height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-install-action {
    transition: none;
  }
}