/* App containers may override --safe-area-inset-* and --native-toolbar-offset. */
:root {
  --safe-top: var(--safe-area-inset-top, 0px);
  --safe-bottom: var(--safe-area-inset-bottom, 0px);
  --native-toolbar-offset: 0px;
  --viewport-height: 100vh;
}
@supports (padding: env(safe-area-inset-top)) {
  :root {
    --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  }
  body {
    padding-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
    padding-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  }
}
body { position: relative; inset: auto; height: var(--viewport-height); -webkit-text-size-adjust: 100%; }
#app, .app-shell { height: var(--viewport-height); }
.app-shell { width: 100%; max-width: 520px; }
button, a, input, select, summary { touch-action: manipulation; }
button { -webkit-appearance: none; }
input, select, textarea { font-size: 16px; -webkit-user-select: text; user-select: text; }
input { scroll-margin: 24px; }
.screen { overflow-x: hidden; scroll-padding: 24px; }
.screen.home-screen { padding-bottom: calc(30px + var(--safe-bottom)); }
.naming-screen { justify-content: flex-start; }
.naming-screen > * { flex-shrink: 0; }
.naming-art { margin-top: auto; }
.naming-screen > .primary-button { margin-bottom: auto; }
.icon-button, .nav-back, .chip { min-width: 44px; min-height: 44px; }
.header-actions { flex-shrink: 0; }
.stage-line { min-width: 0; overflow-wrap: break-word; }
.home-spirit { touch-action: pan-y; }
.fragment-tabs { touch-action: pan-x; min-height: 44px; }
.modal-layer, .video-recording-overlay { height: var(--viewport-height); bottom: auto; }
.modal-card { width: 100%; max-width: 480px; max-height: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal-layer { -webkit-backdrop-filter: blur(10px); }
.share-preview, .export-image { -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.share-help { color: var(--paper-soft); font-size: 13px; line-height: 1.7; text-align: center; }
.export-image, .export-video { display: block; width: 100%; max-height: 48vh; object-fit: contain; border-radius: 10px; background: #0b1e1d; }
.export-copy { display: block; width: 100%; min-height: 100px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--paper); background: #0b1e1d; }
.export-download { display: flex; justify-content: center; align-items: center; text-decoration: none; }
.export-panel .modal-title { font-size: 23px; }
.toast { bottom: calc(20px + var(--safe-bottom)); max-width: 92vw; }
@media (min-width: 700px) and (min-height: 600px) {
  body { padding-top: 18px; padding-bottom: 18px; }
  #app, .app-shell { height: calc(var(--viewport-height) - 36px); }
}
@media (max-height: 599px) {
  body { padding-top: 0; padding-bottom: 0; }
  .app-shell { border-radius: 0; }
  .cover-screen { min-height: 100%; }
  .cover-art { min-height: 160px; }
  .naming-art { max-width: 200px; }
  .feed-arena { height: 270px; min-height: 240px; }
}
@media (max-width: 359px) {
  .home-header { align-items: flex-start; }
  .stage-line { font-size: 11px; line-height: 1.6; }
  .header-actions { gap: 4px; }
  .modal-card { padding: 18px; }
  .pouch-energy-head { grid-template-columns: 88px 1fr; }
  .pouch-ratings { gap: 4px; }
  .pouch-ratings strong { font-size: 12px; letter-spacing: 0; }
}