/* The sleeping country mascot is the focus; the shell and navigation remain. */
:is(#today, #home, #practice, #learn, #cards, #unlock).show:has(.offline-page),
#reel:has(.offline-page) {
  display: flex;
  padding: 20px 16px calc(100px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  background: var(--paper);
}
#unlock.show:has(.offline-page) {
  z-index: 29;
  border-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) solid var(--paper);
}
:is(#todayInner, #homeInner, #practiceInner, #learnInner, #cardsInner, #unlockInner):has(.offline-page) {
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.offline-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}
.offline-banner {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 900;
}
.offline-banner svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offline-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}
.offline-mascot {
  position: relative;
  width: clamp(160px, 28dvh, 260px);
  max-width: 75%;
  aspect-ratio: 1;
}
.offline-mascot img,
.offline-mascot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.offline-mascot video {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.offline-page.is-playing video {
  visibility: visible;
}
.offline-page.is-playing img {
  visibility: hidden;
}
:is(#today, #home, #practice, #learn, #cards, #unlock, #reel, #appOpening) .offline-title {
  max-width: 20ch;
  margin: 24px 0 14px;
  color: var(--ink);
  font: 900 clamp(22px, 5.8vw, 28px)/1.25 var(--sans);
  letter-spacing: -0.2px;
  text-wrap: balance;
  outline: none;
}
.offline-description {
  max-width: 34ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}
.offline-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 280px);
  margin-top: 28px;
}
.offline-actions .ghost {
  color: var(--brand-ink);
}
#startupOffline {
  position: absolute;
  inset: 0;
  display: flex;
  min-height: 100dvh;
  padding: max(24px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px
    max(24px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  background: var(--paper);
}
#appOpening[data-startup-offline="true"] .opening-splash-mascot,
#appOpening[data-startup-offline="true"] .opening-wordmark {
  display: none;
}
@media (min-width: 960px) {
  :is(#today, #home, #practice, #learn, #cards, #unlock).show:has(.offline-page),
  #reel:has(.offline-page) {
    padding: 28px 32px;
  }
}
@media (max-height: 600px) {
  .offline-content {
    padding: 12px 0;
  }
  .offline-mascot {
    width: 100px;
  }
  :is(#today, #home, #practice, #learn, #cards, #unlock, #reel, #appOpening) .offline-title {
    margin: 16px 0 10px;
  }
  .offline-description {
    font-size: 15px;
    line-height: 1.45;
  }
  .offline-actions {
    margin-top: 14px;
  }
}