/* SoftGlow /games/ 共用樣式
   2026/08/14 新增。沿用 /tools/tools.css 的卡片/文章/FAQ/more-tools 樣式，
   這裡只補遊戲頁面特有的：遊戲舞台、開始按鈕、分數面板、排行小卡。
   顏色數值集中在這裡（CONFIG精神延伸到CSS層），未來新遊戲共用，不要每頁各自寫一份。
*/
:root{
  --game-primary:#3b82f6;
  --game-primary-dark:#2563eb;
  --game-success:#22c55e;
  --game-danger:#ef4444;
  --game-warn:#f59e0b;
  --game-bg:#f8fafc;
  --game-border:#e2e8f0;
}
.game-card{position:relative;background:#fff;border-radius:16px;padding:28px 24px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:20px}
.game-card h1{font-size:24px;margin:0 0 6px}
.game-subtitle{color:#6b7280;font-size:14px;margin:0 0 20px}
.game-stage{
  position:relative;width:100%;max-width:480px;margin:0 auto;
  aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--game-bg);border:2px solid var(--game-border);
  cursor:pointer;user-select:none;touch-action:manipulation;
  transition:background-color .15s ease;
}
.game-stage:active{transform:scale(0.99)}
.game-stage .stage-text{font-size:20px;font-weight:700;color:#334155;text-align:center;padding:0 24px}
.game-stage .stage-sub{font-size:13px;color:#94a3b8;margin-top:8px}
.game-controls{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.game-btn{background:var(--game-primary);color:#fff;border:none;border-radius:24px;padding:10px 24px;font-size:14px;font-weight:700;cursor:pointer}
.game-btn:hover{background:var(--game-primary-dark)}
.game-btn.secondary{background:#e2e8f0;color:#334155}
.game-btn:disabled{opacity:.5;cursor:not-allowed}
.game-score-row{display:flex;justify-content:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.game-score-tile{background:var(--game-bg);border-radius:12px;padding:12px 20px;text-align:center;min-width:100px}
.game-score-tile .gs-label{font-size:12px;color:#6b7280}
.game-score-tile .gs-value{font-size:22px;font-weight:800;color:#1e3a5f;margin-top:2px}
.game-rating{margin-top:16px;text-align:center;font-size:15px;font-weight:600;color:#1e3a5f;min-height:22px}
.game-history{margin-top:14px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.game-history span{background:var(--game-bg);border-radius:8px;padding:4px 10px;font-size:12px;color:#64748b}
@media(max-width:480px){.game-card{padding:20px 14px}.game-card h1{font-size:20px}}

/* 排行榜/登入widget（2026/08/15 新增，games-auth.js共用）*/
.ga-widget{display:flex;justify-content:center;margin:14px 0}
/* 2026/08/16：帥哥鴻反饋原本的登入提示太不顯眼，改成醒目的卡片樣式（背景色+邊框+圖示），
   而不是一行灰色小字，讓沒登入的玩家一眼就注意到可以登入拿排行榜 */
.ga-login-prompt{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:linear-gradient(135deg,#fff7ed,#fef3c7);border:1.5px solid #fcd34d;
  border-radius:14px;padding:14px 20px;font-size:14px;color:#92400e;width:100%;box-sizing:border-box;
}
.ga-login-icon{font-size:22px;flex-shrink:0}
.ga-login-tip{font-weight:700;color:#78350f}
.ga-login-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-left:auto}
.ga-google-btn{display:inline-block;min-height:36px}
.ga-line-btn{background:#06c755;color:#fff;text-decoration:none;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.ga-line-btn:hover{background:#05b34c}
@media(max-width:480px){.ga-login-prompt{padding:12px 14px}.ga-login-actions{margin-left:0;width:100%;justify-content:center}}
.ga-logged-in{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#1e3a5f}
.ga-logout-btn{background:#e2e8f0;color:#334155;border:none;border-radius:16px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
.ga-leaderboard{background:var(--game-bg);border-radius:14px;padding:16px;margin-top:18px}
.ga-leaderboard h3{margin:0 0 10px;font-size:15px;color:#1e3a5f;text-align:center}
.ga-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:14px}
.ga-row:nth-child(odd){background:rgba(255,255,255,.6)}
.ga-row.ga-top3{font-weight:800}
.ga-rank{width:32px;text-align:center;flex-shrink:0}
.ga-name{flex:1;color:#1e3a5f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga-score{color:var(--game-primary-dark);font-weight:700}
.ga-empty{text-align:center;color:#94a3b8;font-size:13px;padding:12px 0}

/* 全螢幕放大遊戲（2026/08/16新增，games-auth.js的gaInitFullscreenToggle()共用）*/
.ga-fullscreen-btn{
  position:absolute;top:16px;right:16px;z-index:5;
  background:#eef2ff;color:var(--game-primary-dark);border:1px solid #c7d2fe;
  border-radius:20px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;
}
.ga-fullscreen-btn:hover{background:#e0e7ff}
@media(max-width:480px){.ga-fullscreen-btn{top:10px;right:10px;padding:6px 10px;font-size:11px}}
/* 進入全螢幕時：卡片本身撐滿螢幕、內容置中，盤面（各遊戲的xx-board或.game-stage）
   放大到接近視窗高度，不再受原本max-width限制，兩種瀏覽器前綴都要處理（Safari用webkit前綴）*/
.game-card:fullscreen{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow-y:auto;padding:36px 20px;background:#fff;width:100vw;height:100vh;
}
.game-card:-webkit-full-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow-y:auto;padding:36px 20px;background:#fff;width:100vw;height:100vh;
}
.game-card:fullscreen [id$="Board"],.game-card:fullscreen .game-stage,
.game-card:-webkit-full-screen [id$="Board"],.game-card:-webkit-full-screen .game-stage{
  max-width:min(88vw,75vh)!important;width:min(88vw,75vh)!important;
  /* 2026/08/16修正：帥哥鴻反饋「全螢幕時長度會變短」——.game-card:fullscreen是
     flex-direction:column的容器，盤面預設flex-shrink:1，當內容總高度超過視窗高度時，
     瀏覽器會直接把盤面往矮壓縮（違背aspect-ratio跟width設定的比例），而不是交給
     overflow-y:auto捲動。加flex-shrink:0強制盤面維持自己該有的高度，超出視窗的部分改用捲動處理。*/
  flex-shrink:0;
}
.game-card:fullscreen h1,.game-card:-webkit-full-screen h1{font-size:22px}

/* 登入提醒：進場彈窗＋盤面常駐小提示（2026/08/17新增，games-auth.js的
   gaInitLoginReminder()共用，涵蓋5款有排行榜的遊戲）*/
.ga-reminder-overlay{
  position:fixed;inset:0;z-index:10000;background:rgba(15,23,42,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;
  animation:gaReminderFadeIn .2s ease;
}
@keyframes gaReminderFadeIn{from{opacity:0}to{opacity:1}}
.ga-reminder-modal{
  position:relative;background:#fff;border-radius:18px;padding:30px 24px 22px;
  max-width:340px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.ga-reminder-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:18px;line-height:1;color:#94a3b8;cursor:pointer;padding:6px}
.ga-reminder-close:hover{color:#334155}
.ga-reminder-icon{font-size:34px;margin-bottom:8px}
.ga-reminder-title{font-size:16px;font-weight:800;color:#1e3a5f;margin-bottom:6px;line-height:1.45}
.ga-reminder-sub{font-size:12.5px;color:#94a3b8;margin-bottom:20px}
.ga-reminder-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:14px}
.ga-reminder-skip{background:none;border:none;color:#94a3b8;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:4px}
.ga-reminder-skip:hover{color:#64748b}
/* 盤面常駐小提示：疊在遊戲盤面（跟全螢幕按鈕共用同一套[id$="Board"]/.game-stage選擇器）左上角，
   半透明徽章，pointer-events:none確保完全不擋任何遊戲點擊/觸控 */
.game-card [id$="Board"],.game-card .game-stage{position:relative}
.ga-board-badge{
  position:absolute;top:8px;left:8px;z-index:3;pointer-events:none;
  background:rgba(30,41,59,.82);color:#fff;border-radius:14px;padding:5px 10px;
  font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
@media(max-width:480px){.ga-board-badge{font-size:10px;padding:4px 8px}}