/**
 * Loading Screen Styles
 * 包含字体定义、loading screen 样式、PWA 适配
 */

/* Local Roboto Font */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Roboto.ttf') format('truetype');
  font-display: swap;
}

/* 确保所有文本使用本地字体 */
* {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* PWA 全屏适配 - 让内容延伸到状态栏区域 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  height: 100dvh; /* 动态视口高度，自动适应虚拟键盘 */
  width: 100%;
  overflow: hidden;
  /* 背景色与 theme-color 一致，避免状态栏区域空白 */
  /* background-color: #00D4AA; */
}

/* Loading Screen Styles */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.4s ease-out;
}

#loading.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  text-align: center;
}

.app-logo {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 212, 170, 0.2);
}

.app-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progress-container {
  width: 180px;
  margin: 32px auto 0;
}

.progress-bar {
  width: 100%;
  height: 3px;
  background: #E8E8E8;
  border-radius: 1.5px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00D4AA, #00E4BA, #00D4AA);
  background-size: 200% 100%;
  border-radius: 1.5px;
  animation: shimmer 1.2s infinite linear, progress 2s ease-out forwards;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes progress {
  0% { width: 0%; }
  30% { width: 30%; }
  60% { width: 60%; }
  80% { width: 80%; }
  100% { width: 90%; }
}

/* ==================== PC端固定手机画布 ==================== */

:root {
  --mobile-max-width: 430px;
  --mobile-aspect-ratio: 375 / 812;
  --brand-color: #00D4AA;
}

/* Flutter 容器基础样式 */
#flutter-container {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

/* 确保 Flutter 画布填满容器 */
#flutter-container flt-glass-pane {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* PC端：宽度大于 768px */
@media screen and (min-width: 769px) {
  html {
    background: #f0f2f5;  /* 中性灰色背景 */
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent;
  }

  #flutter-container {
    position: relative;
    width: var(--mobile-max-width);
    max-width: 100vw;
    height: auto;
    aspect-ratio: var(--mobile-aspect-ratio);
    max-height: 95vh;
    max-height: 95dvh;
    border-radius: 32px;
    overflow: hidden;
    box-shadow:
      0 25px 50px -12px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  #loading {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 32px !important;
  }
}

/* 移动端：保持原有全屏行为 */
@media screen and (max-width: 768px) {
  #flutter-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  #loading {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
}