/* --- 頂級視覺核心變數 --- */
:root {
  --bg-gradient: linear-gradient(135deg, #e0e9f5 0%, #f5eef0 100%);
  --panel-bg: rgba(255, 255, 255, 0.75);
  --primary-accent: #5a7fa8;
  --success-accent: #6fa887;
  --text-main: #3a4750;
  --text-muted: #7e8b96;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow-sm: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
  --shadow-md: 0 12px 40px 0 rgba(31, 38, 135, 0.12);
}

/* ==========================================================================
   舒爾特方塊：藍色莫蘭迪背景 + 全元件防放大鎖定
   ========================================================================== */
   html, body {
    margin: 0; padding: 0; width: 100%; height: 100dvh;
    overflow: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #eef2f7 0%, #dfe6e9 100%) !important; /* 恢復舒爾特優雅藍 */
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* 核心關鍵：強制畫面上所有文字、格子、按鈕全部停用 iOS 縮放手勢 */
  *, *::before, *::after {
    box-sizing: border-box;
    touch-action: none !important; /* 釘死每一個元件，徹底阻止 iPhone 雙擊放大 */
  }

.container {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
}

/* --- 遊戲主容器 --- */
.game-dashboard {
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 25px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-sizing: border-box;
}

.meta-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-box {
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  flex: 1;
  margin: 0 6px;
  display: flex;
  flex-direction: column;
}

.stat-box .label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 2px;
}

.stat-box .value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.pulse {
  animation: gentlePulse 2s infinite ease-in-out;
}
@keyframes gentlePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); color: var(--primary-accent); }
  100% { transform: scale(1); }
}

.progress-container {
  height: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  margin: 0 6px 20px 6px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-accent), var(--success-accent));
  transition: width 0.2s linear;
}

.mode-selector {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.mode-btn {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-btn.active {
  background: var(--primary-accent);
  color: white;
  box-shadow: 0 4px 12px rgba(90, 127, 168, 0.3);
}

.matrix-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-3x3, .grid-4x4, .grid-5x5 {
  display: grid;
  gap: 10px;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.grid-3x3 { grid-template-columns: repeat(3, 1fr); }
.grid-4x4 { grid-template-columns: repeat(4, 1fr) !important; }
.grid-5x5 { grid-template-columns: repeat(5, 1fr) !important; }

.cell {
  background: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: calc(1.4rem + 0.5vw);
  font-weight: 700;
  color: var(--primary-accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.cell:active {
  transform: scale(0.92);
}

.cell.correct {
  background: var(--success-accent);
  color: white;
  transform: scale(0.96);
  box-shadow: none;
  pointer-events: none;
}

.grid-4x4 .cell { font-size: calc(1.1rem + 0.3vw) !important; border-radius: 12px; }
.grid-5x5 .cell { font-size: calc(0.9rem + 0.2vw) !important; border-radius: 10px; }

/* ==========================================================================
   舒爾特方塊：結算彈窗全螢幕完美置中修正
   ========================================================================== */
   .overlay {
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0; /* 四向撐滿，解決手機瀏覽器 100vh 偏下 Bug */
    background: rgba(43, 58, 66, 0.5); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
  }
  
  .modal {
    background: white; 
    padding: 26px 20px; 
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); 
    width: 82%; 
    max-width: 280px; 
    text-align: center; 
    box-sizing: border-box;
    
    /* 絕對座標強制螢幕中央置中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.trophy-icon {
  font-size: 54px;
  margin-bottom: 10px;
}

.score-relative-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.result-score-box {
  background: rgba(0, 0, 0, 0.03);
  padding: 12px 10px;
  border-radius: 16px;
  margin-bottom: 14px;
}

.result-score-box p {
  margin: 0;
  font-size: 15px;
  color: var(--text-main);
}

.result-score-box span {
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* --- 【完美貼合】精緻細小的亮紅新紀錄標籤（剛好碰到時間但不遮擋） --- */
.new-badge {
  position: absolute;
  top: -15px;         /* 從 -24px 降到 -15px，讓它剛好親到時間的右上角 */
  right: -2px;        /* 稍微調整水平位置，讓它靠得更自然 */
  background: #ff4757 !important;
  color: white !important;
  font-weight: 800;
  font-size: 12px !important; 
  padding: 1px 5px !important;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(255, 71, 87, 0.2);
  white-space: nowrap;
  
  /* 保持 0.72 倍的精緻比例與 12 度俏皮旋轉 */
  transform: rotate(12deg) scale(0.72) !important;
  transform-origin: center center;
  display: inline-block;
}

/* 歷史最佳：縮小精緻，雙皇冠置中 */
.best-record-line {
  font-size: 13px;
  color: #c48b00 !important;
  font-weight: 600;
  margin: 0 0 18px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.best-record-line span {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.restart-btn {
  background: #5a7fa8;
  color: white;
  border: none;
  padding: 11px 0;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 6px 16px #5a7fa8;
}

.hidden {
  display: none !important; /* 直接強制完全移除不占空間，避免跟彈窗動畫衝突 */
}
/* --- 【新增】返回大廳按鈕樣式 --- */
.back-lobby-wrapper {
  text-align: left;
  margin-bottom: 14px;
}

.back-lobby-btn {
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.back-lobby-btn:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.08);
}