@charset "UTF-8";
/* === Shell（外殼）樣式 ===
   index.html 變成輕量 shell：固定全螢幕的 iframe 載入 lobby/level，
   shell 自己掌握音訊管線、音訊偏好對話框、右上角全域 audio toggle，
   永不重新載入 → user activation 在 iOS 上一勞永逸。 */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #F0E8DC;
  overflow: hidden;
  font-family: 'Noto Sans TC', system-ui, sans-serif;
  color: #2D3436;
  -webkit-tap-highlight-color: transparent;
}

/* iframe 鋪滿 viewport */
#shell-game {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* shell 右上角 audio toggle 容器（覆蓋在 iframe 之上） */
.shell-top-right {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 10000;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
@media (min-width: 900px) {
  .shell-top-right { top: 20px; right: 24px; gap: 10px; }
}
/* 手機（直向 < 600px 或橫向高度 < 500px）：壓縮且直向排列；
   平板（iPad / Android Tab 等 ≥ 600px 寬、且高度 ≥ 500px）維持桌機橫排 */
@media (max-width: 599px),
       (orientation: landscape) and (max-height: 500px) {
  .shell-top-right { flex-direction: column; align-items: flex-end; top: 10px; right: 10px; gap: 6px; }
}
/* class-based 兜底（給三星 S Pen 機型 viewport 失準），只在 1023px 以下生效避免影響平板 */
@media (max-width: 1023px) {
  .is-landscape.is-touch .shell-top-right {
    flex-direction: column;
    align-items: flex-end;
    top: 10px;
    right: 10px;
    gap: 6px;
  }
}

/* 回主選單 / 暫停 按鈕（過去在各 level 自帶，現由 shell 統一持有） */
.shell-btn-ghost {
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #0d1320;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .15s ease;
}
.shell-btn-ghost:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.shell-btn-ghost:active:not(:disabled) { transform: translateY(0) scale(.96); }
.shell-btn-ghost[hidden] { display: none; }
@media (max-width: 599px),
       (orientation: landscape) and (max-height: 500px) {
  .shell-btn-ghost { padding: 6px 12px; font-size: 12px; }
}
@media (max-width: 1023px) {
  .is-landscape.is-touch .shell-btn-ghost { padding: 6px 12px; font-size: 12px; }
}


/* 行動裝置直向時的旋轉提示 */
.rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(20, 25, 40, .92);
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.7;
  padding: 32px;
}
.rotate-hint .ico {
  font-size: 64px;
  animation: rotateHintSpin 2s ease-in-out infinite;
}
@keyframes rotateHintSpin {
  0%   { transform: rotate(-90deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(-90deg); }
}
.is-touch.is-portrait .rotate-hint { display: flex; }
/* 登入頁不顯示橫向提示，讓登入畫面保持乾淨 */
html.login-active .rotate-hint { display: none !important; }

/* ===== 登入 overlay ===== */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #2A8FC4 0%, #0E3953 60%, #07212F 100%);
  padding: 24px;
}
.login-overlay[hidden] { display: none; }
.login-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.login-card {
  position: relative;
  z-index: 1;
  width: min(760px, 94vw);
  background: #fff;
  border-radius: 24px;
  padding: 0 0 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.login-card-header {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
  padding: 20px 36px 18px;
  border-bottom: 1px solid #e2e6ec;
}
.login-card .login-columns,
.login-card > .login-error,
.login-card > .login-note,
.login-card > .login-links {
  margin-left: 36px;
  margin-right: 36px;
}
.login-card > .login-error,
.login-card > .login-note,
.login-card > .login-links { margin-left: auto; margin-right: auto; padding: 0 36px; }

/* 雙欄佈局 */
.login-columns {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  text-align: left;
}
.login-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Google 欄：按鈕往上推、留 39% 下緣空間，視覺重心與右欄輸入框對齊 */
.login-col-google .login-oauth-btn {
  margin-top: auto;
  margin-bottom: 39%;
}
.login-col-title {
  font: 800 16px "Noto Sans TC", system-ui, sans-serif;
  color: #1c2a3f;
  margin: 0 0 2px;
  text-align: center;
}
.login-col-desc {
  font: 500 12px "Noto Sans TC", system-ui, sans-serif;
  color: #98a4b3;
  margin: 0 0 10px;
  text-align: center;
}

/* 欄位中央垂直分隔線（含「或」字） */
.login-col-divider {
  flex: 0 0 auto;
  position: relative;
  width: 1px;
  background: #e2e6ec;
  margin: 4px 0;
}
.login-col-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 6px 0;
  color: #98a4b3;
  font: 700 12px "Noto Sans TC", system-ui, sans-serif;
}

/* 回鍋玩家的代碼入口。
   原本只是一行 11px 淺灰的小分隔，緊貼在「開始遊戲」那顆黃色膠囊按鈕下方——
   兩者的視覺重量差太多，回鍋玩家的視線會被黃色按鈕接走而直接重新註冊，
   而重新註冊會發一個新的隨機 guest id（見 leaderboard.js 的 signInAsGuest），
   舊成績就再也接不回來了。改成獨立的淺色面板，讓它是「另一個入口」而不是附註。 */
.login-return {
  margin-top: 16px;
  padding: 12px 14px 14px;
  background: #f4f7fa;
  border: 1.5px solid #dbe2ea;
  border-radius: 14px;
}
.login-return-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 4px;
  color: #1c2a3f;
  font: 700 13px "Noto Sans TC", system-ui, sans-serif;
}
.login-return-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.login-return-desc {
  margin: 0 0 10px;
  text-align: center;
  color: #5a6878;
  font: 500 11px "Noto Sans TC", system-ui, sans-serif;
}
.login-logo {
  width: 120px;
  height: 63px;
  object-fit: contain;
  margin: 0 auto 4px;
  display: block;
}
.login-title {
  font: 800 20px "Noto Sans TC", system-ui, sans-serif;
  color: #1c2a3f;
  margin: 0 0 4px;
}
.login-desc {
  font: 500 12px "Noto Sans TC", system-ui, sans-serif;
  color: #5a6878;
  margin: 0;
}
.login-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: 2px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  color: #1c2a3f;
  font: 600 16px "Noto Sans TC", system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.login-oauth-btn + .login-oauth-btn { margin-top: 10px; }
.login-oauth-btn:hover {
  background: #f7f9fc;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.login-oauth-btn:active {
  transform: scale(.97);
}
.login-oauth-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* 分隔線 */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: #98a4b3;
  font: 500 12px "Noto Sans TC", system-ui, sans-serif;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e6ec;
}
.login-divider span { flex: 0 0 auto; }

/* 訪客代碼登入：input + button 並排 */
.login-code-form {
  display: flex;
  gap: 8px;
}
.login-code-input {
  flex: 1;
  letter-spacing: 1px;
  text-transform: lowercase;
}
.login-code-btn {
  flex: 0 0 auto;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: #1c2a3f;
  color: #fff;
  font: 700 15px "Noto Sans TC", system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  white-space: nowrap;
}
.login-code-btn:hover { background: #2a3a52; }
.login-code-btn:active { transform: scale(.96); }
.login-code-btn:disabled { background: #98a4b3; cursor: not-allowed; transform: none; }

/* 訪客表單 */
.login-guest-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #dadce0;
  border-radius: 12px;
  font: 500 15px "Noto Sans TC", system-ui, sans-serif;
  color: #1c2a3f;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input:focus {
  outline: none;
  border-color: #0096C7;
  box-shadow: 0 0 0 3px rgba(0, 150, 199, 0.15);
}
.login-input::placeholder { color: #b0bac5; }
.login-guest-btn {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: #FFD54F;
  color: #1c2a3f;
  font: 800 16px "Noto Sans TC", system-ui, sans-serif;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px rgba(255, 213, 79, 0.4);
}
.login-guest-btn:hover {
  background: #ffc926;
  box-shadow: 0 6px 18px rgba(255, 213, 79, 0.55);
}
.login-guest-btn:active { transform: scale(.97); }
.login-error {
  font: 600 13px "Noto Sans TC", system-ui, sans-serif;
  color: #c0392b;
  background: #fdecea;
  border: 1px solid #f5b7b1;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 14px 0 0;
}
.login-error[hidden] { display: none; }
.login-note {
  font: 500 12px "Noto Sans TC", system-ui, sans-serif;
  color: #98a4b3;
  margin: 16px 0 0;
}
.login-links {
  font: 500 12px "Noto Sans TC", system-ui, sans-serif;
  color: #98a4b3;
  margin: 8px 0 0;
}
.login-links a {
  color: #0096c7;
  text-decoration: none;
}
.login-links a:hover { text-decoration: underline; }

/* === 註冊完成後的「記下玩家代碼」步驟 ===
   刻意做在 shell 的登入卡片內、而不是進大廳後彈 lobby 的 guestCodeModal：
   進大廳的同時 _hideLoginOverlay() 會叫出音訊偏好 <dialog>，showModal() 會把它
   放進瀏覽器 top layer，永遠蓋在 iframe 內任何 z-index 之上——代碼視窗會被整個
   遮掉，玩家只看得到「要播放背景音樂嗎」。改成登入頁的一個步驟就沒有這層競爭：
   註冊 → 記下代碼 → 進大廳 → 才問音樂。 */
.login-issued {
  padding: 24px 36px 4px;
  text-align: center;
}
.login-issued[hidden] { display: none; }
.login-card.is-code-issued > .login-columns,
.login-card.is-code-issued > .login-error,
.login-card.is-code-issued > .login-note,
.login-card.is-code-issued > .login-links { display: none; }
.login-issued-title {
  font: 800 20px "Noto Sans TC", system-ui, sans-serif;
  color: #1c2a3f;
  margin: 0 0 6px;
}
.login-issued-desc {
  font: 500 13px "Noto Sans TC", system-ui, sans-serif;
  color: #5a6878;
  margin: 0 0 18px;
  line-height: 1.6;
}
.login-issued-code {
  display: block;
  font: 900 34px "Inter", "Consolas", monospace;
  color: #a85f00;
  background: linear-gradient(135deg, #FFF7E0 0%, #FFE9A8 100%);
  border: 2px dashed #E6A800;
  border-radius: 14px;
  padding: 20px 16px;
  margin-bottom: 14px;
  letter-spacing: 4px;
  user-select: all;
  word-break: break-all;
}
.login-issued-copy {
  width: 100%;
  padding: 12px 20px;
  border: 1.5px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  color: #1c2a3f;
  font: 700 15px "Noto Sans TC", system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.login-issued-copy:hover { background: #f1f4f8; }
.login-issued-copy:active { transform: scale(.97); }
.login-issued-copy.is-copied {
  background: #2d7a55;
  border-color: #2d7a55;
  color: #fff;
}
.login-issued-hint {
  font: 500 12px "Noto Sans TC", system-ui, sans-serif;
  color: #98a4b3;
  margin: 14px 0 18px;
}
.login-issued-enter {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: #FFD54F;
  color: #1c2a3f;
  font: 800 16px "Noto Sans TC", system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  box-shadow: 0 4px 14px rgba(255, 213, 79, 0.4);
}
.login-issued-enter:hover { background: #ffc926; }
.login-issued-enter:active { transform: scale(.97); }

/* 窄螢幕：兩欄改為上下堆疊（僅直向；橫向手機保持兩欄並排避免過長） */
@media (max-width: 680px) and (orientation: portrait) {
  /* 直向手機：頂部對齊 + 允許滾動，避免內容超出時頂部被切掉 */
  .login-overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: 16px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .login-card .login-columns,
  .login-card > .login-error,
  .login-card > .login-note,
  .login-card > .login-links {
    margin-left: 20px;
    margin-right: 20px;
  }
  .login-card > .login-error,
  .login-card > .login-note,
  .login-card > .login-links {
    margin-left: auto; margin-right: auto;
    padding: 0 20px;
  }
  .login-card-header { padding: 16px 20px 14px; }
  .login-columns { flex-direction: column; gap: 6px; margin-top: 14px; }
  .login-issued { padding: 20px 20px 4px; }
  .login-col-divider {
    width: 100%;
    height: 1px;
    margin: 12px 0;
  }
  .login-col-divider span { padding: 0 12px; }
  /* 堆疊模式下：Google 按鈕不再保留 39% 下緣空白，直接貼著欄位下方 */
  .login-col-google .login-oauth-btn {
    margin-top: 8px;
    margin-bottom: 0;
  }
}
/* 極窄手機 (≤320px) 才把代碼表單堆疊；一般 iPhone (~375px) 仍維持並排 */
@media (max-width: 320px) {
  .login-code-form { flex-direction: column; gap: 8px; }
  .login-code-btn { padding: 12px 20px; }
}

/* 行動版直向（觸控且 width 較窄）：放大字級與按鈕內距 */
@media (max-width: 599px) and (orientation: portrait) {
  html.is-touch .login-title { font-size: 26px; }
  html.is-touch .login-desc { font-size: 14px; }
  html.is-touch .login-col-title { font-size: 18px; }
  html.is-touch .login-col-desc { font-size: 13px; }
  html.is-touch .login-oauth-btn { font-size: 17px; padding: 14px 18px; }
  html.is-touch .login-divider,
  html.is-touch .login-col-divider span { font-size: 13px; }
  html.is-touch .login-return-title { font-size: 15px; }
  html.is-touch .login-return-desc { font-size: 13px; }
  html.is-touch .login-input { font-size: 16px; padding: 13px 16px; }
  html.is-touch .login-code-btn { font-size: 15px; padding: 0 20px; }
  html.is-touch .login-guest-btn { font-size: 17px; padding: 14px 18px; }
  html.is-touch .login-note { font-size: 13px; }
  html.is-touch .login-issued-title { font-size: 22px; }
  html.is-touch .login-issued-desc { font-size: 14px; }
  html.is-touch .login-issued-copy { font-size: 16px; padding: 13px 20px; }
  html.is-touch .login-issued-hint { font-size: 13px; }
  html.is-touch .login-issued-enter { font-size: 17px; padding: 14px 18px; }
}

/* 短高度（行動版橫向）：整體壓縮並允許滾動；觸控也套用 */
@media (max-height: 560px) {
  .login-overlay { padding: 10px; align-items: flex-start; overflow-y: auto; }
  .login-card { padding-bottom: 14px; }
  .login-card-header { padding: 8px 20px 6px; }
  .login-logo { width: 78px; height: 41px; margin-bottom: 2px; }
  .login-title { font-size: 15px; margin-bottom: 2px; }
  .login-desc { font-size: 10px; }
  .login-columns { margin-top: 10px; gap: 16px; }
  .login-col-title { font-size: 13px; margin-bottom: 0; }
  .login-col-desc { font-size: 10px; margin-bottom: 6px; }
  .login-oauth-btn { padding: 9px 14px; font-size: 13px; }
  .login-oauth-icon { width: 18px; height: 18px; }
  .login-input { padding: 8px 12px; font-size: 12px; border-radius: 10px; }
  .login-code-form { gap: 6px; }
  .login-code-btn { font-size: 12px; padding: 0 14px; border-radius: 10px; }
  .login-guest-form { gap: 7px; }
  .login-guest-btn { padding: 9px 16px; font-size: 13px; margin-top: 0; }
  .login-return { margin-top: 8px; padding: 8px 10px 10px; border-radius: 10px; }
  .login-return-title { font-size: 11px; margin-bottom: 2px; gap: 4px; }
  .login-return-icon { width: 12px; height: 12px; }
  .login-return-desc { font-size: 9px; margin-bottom: 6px; }
  .login-note { font-size: 10px; margin-top: 10px; }
  .login-links { font-size: 10px; margin-top: 4px; }
  /* 兩欄之間的中央分隔：縮短與細化 */
  .login-col-divider span { padding: 4px 0; font-size: 10px; }
  /* 代碼確認步驟：壓到不用捲動就能看到「我記下了」按鈕 */
  .login-issued { padding: 12px 20px 2px; }
  .login-issued-title { font-size: 14px; margin-bottom: 3px; }
  .login-issued-desc { font-size: 10px; margin-bottom: 10px; }
  .login-issued-code { font-size: 24px; padding: 12px 12px; margin-bottom: 10px; letter-spacing: 3px; }
  .login-issued-copy { font-size: 12px; padding: 8px 16px; }
  .login-issued-hint { font-size: 10px; margin: 8px 0 10px; }
  .login-issued-enter { font-size: 13px; padding: 9px 16px; }
}