/* =============================================================================
   及時樂新人訓練 — 全站共用視覺主題 v1
   Jishile Training — Shared Game Theme v1

   風格基準(唯一):public/assembly_burger_rush_game_v1.html
   風格名稱:藍灰學院遊戲化版(C 版色票)

   用途:把最終遊戲版的「全站可用」視覺語彙抽成共用 CSS,讓其他頁面對齊。
   原則:
     - 只放全站可用的基礎樣式(色票 / topbar / 卡片 / 按鈕 / 表單 / 表格 / 標籤…)。
     - 不放遊戲專用樣式(漢堡舞台、材料區、托盤、SVG 動畫等),避免污染其他頁。
     - 不使用外部圖片、不使用 CDN、不導入任何框架。
     - 共用類別以 jg- 前綴命名,避免與既有頁面 class 衝突。
   ============================================================================= */

/* ====== 1) :root 色票(藍灰學院版) ====== */
:root {
  --jg-bg: #eef3f6;
  --jg-panel: #ffffff;
  --jg-panel-soft: #f7fafc;
  --jg-ink: #243746;
  --jg-muted: #6b7f8f;
  --jg-primary: #527a95;
  --jg-primary-dark: #34576f;
  --jg-primary-darker: #2b4659;
  --jg-primary-soft: #dceaf1;
  --jg-line: #c8d6df;
  --jg-accent: #8aa9bd;
  --jg-success: #5f9f7a;
  --jg-success-dark: #3d7a5b;
  --jg-success-soft: #e6f3ec;
  --jg-danger: #c96a63;
  --jg-danger-dark: #b0463f;
  --jg-danger-soft: #fae8e6;
  --jg-warning: #c9924b;
  --jg-warning-ink: #6f4c31;
  --jg-warning-soft: #fff2dc;

  --jg-radius: 18px;
  --jg-radius-sm: 12px;
  --jg-shadow-soft: 0 10px 30px rgba(36, 55, 70, 0.10), 0 1px 3px rgba(0, 0, 0, 0.03);
  --jg-shadow-card: 0 2px 8px rgba(36, 55, 70, 0.08);
  --jg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
             "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
}

/* ====== 2) body 背景(藍灰柔和網格 + 漸層) ====== */
.jg-body {
  margin: 0;
  padding: 0;
  font-family: var(--jg-font);
  color: var(--jg-ink);
  -webkit-font-smoothing: antialiased;
  background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(82, 122, 149, 0.04) 60px 62px),
    repeating-linear-gradient(0deg,  transparent 0 90px, rgba(82, 122, 149, 0.03) 90px 91px),
    radial-gradient(ellipse 80% 50% at 0% 0%, #e3eef3 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, #dceaf1 0%, transparent 60%),
    var(--jg-bg);
  background-attachment: fixed;
}

/* ====== 3) 共用容器 ====== */
.jg-container { max-width: 1080px; margin: 0 auto; }
.jg-narrow { max-width: 480px; margin: 0 auto; }
.jg-mid { max-width: 720px; margin: 0 auto; }

/* ====== 4) topbar(深藍木牌風) / page-header ====== */
.jg-topbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 25%),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0, 0, 0, 0.07) 12px 13px),
    linear-gradient(180deg, #527a95 0%, #3d6076 50%, #2b4659 100%);
  color: #fff;
  border-radius: var(--jg-radius);
  border: 3px solid var(--jg-primary-dark);
  box-shadow:
    0 6px 0 -2px var(--jg-primary-dark),
    0 12px 28px rgba(36, 55, 70, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
}
/* 木牌兩側螺絲釘 */
.jg-topbar::before,
.jg-topbar::after {
  content: '';
  position: absolute; top: 12px;
  width: 12px; height: 12px;
  background: radial-gradient(circle at 35% 35%, #aeb4ba 0%, #6b7f8f 60%, #1b2c38 100%);
  border-radius: 50%;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.30);
}
.jg-topbar::before { left: 16px; }
.jg-topbar::after  { right: 16px; }
.jg-topbar-title {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 900;
  letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.jg-topbar-title small { display: block; font-size: 11px; font-weight: 700; opacity: 0.85; }

/* 木牌上的小膠囊按鈕(返回 / 登出等) */
.jg-tb-btn {
  background: rgba(255, 255, 255, 0.20);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800;
}
.jg-tb-btn:hover { background: rgba(255, 255, 255, 0.30); }
.jg-tb-btn:active { transform: translateY(1px); }

/* 簡化版 page-header(淺藍木牌,放標題與說明) */
.jg-page-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 30%),
    linear-gradient(180deg, #527a95 0%, #34576f 100%);
  color: #fff;
  border-radius: var(--jg-radius);
  border: 3px solid var(--jg-primary-dark);
  padding: 18px 20px;
  box-shadow: 0 6px 0 -2px var(--jg-primary-dark), 0 12px 24px rgba(36, 55, 70, 0.28);
}
.jg-page-header h1 { font-size: 22px; font-weight: 900; margin: 0 0 6px; line-height: 1.3; }
.jg-page-header p { font-size: 14px; line-height: 1.6; margin: 0; opacity: 0.95; }

/* ====== 5) card / panel(厚邊框 + 柔和立體陰影) ====== */
.jg-card {
  background: var(--jg-panel);
  border: 1.5px solid var(--jg-line);
  border-radius: var(--jg-radius);
  box-shadow: var(--jg-shadow-card);
  padding: 16px 18px;
}

/* 白色面板 / 陶瓷盤感(較強立體) */
.jg-panel {
  background: var(--jg-panel);
  border: 3px solid var(--jg-primary-dark);
  border-radius: var(--jg-radius);
  box-shadow:
    0 6px 0 -2px var(--jg-primary-dark),
    0 12px 22px rgba(36, 55, 70, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  padding: 14px 16px;
}

/* ====== 6) section title / 小標籤(深藍木牌小標) ====== */
.jg-section-title {
  font-size: 15px; font-weight: 800; color: var(--jg-primary-dark);
  margin: 0 0 12px; display: flex; align-items: center; gap: 6px;
}
.jg-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 900; color: var(--jg-primary-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 50%), var(--jg-ink);
  padding: 4px 11px; border-radius: 8px;
  letter-spacing: 2px;
  border: 2px solid #1b2c38;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 3px 6px rgba(0, 0, 0, 0.22);
}
.jg-head small { font-weight: 700; opacity: 0.8; letter-spacing: 1px; font-size: 10px; }

/* ====== 7) button(遊戲化按鈕) ====== */
.jg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 18px; border-radius: 14px;
  font-size: 13.5px; font-weight: 900; cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #e6eef3 100%);
  color: var(--jg-primary-dark);
  border: 2.5px solid var(--jg-primary-dark);
  transition: transform .1s cubic-bezier(.34, 1.5, .55, 1), box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 4px 0 var(--jg-primary-dark), 0 6px 10px rgba(36, 55, 70, 0.25);
  letter-spacing: 1px;
}
.jg-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--jg-primary-dark), 0 7px 12px rgba(36, 55, 70, 0.28); }
.jg-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--jg-primary-dark), 0 2px 4px rgba(36, 55, 70, 0.25); }
.jg-btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.jg-btn.jg-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, transparent 35%),
    linear-gradient(180deg, #6e97ae 0%, #527a95 50%, #34576f 100%);
  color: #fff; border-color: var(--jg-primary-dark);
  box-shadow: 0 5px 0 var(--jg-primary-darker), 0 8px 18px rgba(82, 122, 149, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.40);
  font-size: 15px; letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(20, 40, 55, 0.40);
}
.jg-btn.jg-primary:hover { filter: brightness(1.04); }
.jg-btn.jg-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--jg-primary-darker), 0 3px 8px rgba(82, 122, 149, 0.40); }
.jg-btn.jg-primary:disabled { background: linear-gradient(180deg, #c8d6df, #9fb0bc); box-shadow: 0 5px 0 #6b7f8f; }

.jg-btn.jg-success {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, transparent 35%),
    linear-gradient(180deg, #8fc9aa 0%, #5f9f7a 50%, #5f9f7a 100%);
  color: #fff; border-color: var(--jg-success-dark);
  box-shadow: 0 5px 0 var(--jg-success-dark), 0 8px 18px rgba(95, 159, 122, 0.40), inset 0 1px 0 rgba(230, 243, 236, 0.50);
  font-size: 15px; letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(20, 45, 40, 0.40);
}
.jg-btn.jg-success:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--jg-success-dark); }

.jg-btn.jg-danger {
  background: linear-gradient(180deg, #d98981 0%, #c96a63 100%);
  color: #fff; border-color: var(--jg-danger-dark);
  box-shadow: 0 5px 0 var(--jg-danger-dark), 0 8px 18px rgba(201, 106, 99, 0.35);
}

.jg-btn.jg-ghost {
  background: #fff; color: var(--jg-primary-dark);
  border: 1.5px solid var(--jg-line);
  box-shadow: none;
}
.jg-btn.jg-ghost:hover { background: var(--jg-panel-soft); transform: none; box-shadow: none; }
.jg-btn.jg-block { width: 100%; }

/* ====== 8) badge / chip ====== */
.jg-badge {
  display: inline-block; font-size: 12px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.jg-badge.jg-done, .jg-badge.completed { background: var(--jg-success-soft); color: var(--jg-success-dark); }
.jg-badge.jg-doing, .jg-badge.in_progress, .jg-badge.started { background: var(--jg-primary-soft); color: var(--jg-primary-dark); }
.jg-badge.jg-todo, .jg-badge.not_started { background: #eee7da; color: #8a6a4f; }
.jg-badge.jg-fail, .jg-badge.failed { background: var(--jg-danger-soft); color: var(--jg-danger-dark); }

.jg-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 800;
  color: var(--jg-primary-dark); background: var(--jg-primary-soft);
  border: 1.5px solid var(--jg-accent);
  padding: 4px 11px; border-radius: 999px; letter-spacing: 0.5px;
}

/* ====== 9) link card / 入口卡(遊戲選單卡感) ====== */
.jg-linkcard {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 2px solid var(--jg-line); background: var(--jg-panel);
  color: var(--jg-ink); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 0 -1px var(--jg-line), 0 6px 12px rgba(36, 55, 70, 0.10);
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.jg-linkcard:hover { transform: translateY(-1px); background: var(--jg-panel-soft); }
.jg-linkcard:active { transform: translateY(3px); box-shadow: 0 1px 0 -1px var(--jg-line); }
.jg-linkcard .jg-arrow { float: right; color: var(--jg-primary); font-weight: 900; }
.jg-linkcard.jg-primary {
  background: linear-gradient(180deg, #6e97ae, #527a95); color: #fff; border-color: var(--jg-primary-dark);
  box-shadow: 0 5px 0 var(--jg-primary-darker), 0 8px 16px rgba(82, 122, 149, 0.35);
}
.jg-linkcard.jg-primary .jg-arrow { color: #fff; }

/* ====== 10) form input ====== */
.jg-input {
  width: 100%; height: 48px; padding: 0 14px;
  font-size: 16px; color: var(--jg-ink);
  border: 2px solid var(--jg-line); border-radius: 12px;
  background: var(--jg-panel-soft); outline: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.jg-input::placeholder { color: #9fb0bc; }
.jg-input:focus {
  border-color: var(--jg-primary); background: #fff;
  box-shadow: 0 0 0 4px rgba(82, 122, 149, 0.15);
}
.jg-label { display: block; font-size: 14px; font-weight: 700; color: var(--jg-ink); margin-bottom: 6px; }

/* ====== 11) table / mobile card table ====== */
.jg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jg-table thead th {
  text-align: left; color: var(--jg-muted); font-size: 12px; font-weight: 800;
  padding: 8px 10px; border-bottom: 2px solid #e3eef3; white-space: nowrap;
}
.jg-table tbody td { padding: 10px 10px; border-bottom: 1px solid var(--jg-bg); vertical-align: top; }
.jg-table tbody tr:hover { background: var(--jg-panel-soft); }

/* 手機:表格轉卡片(避免水平爆版) */
@media (max-width: 600px) {
  .jg-table.jg-responsive,
  .jg-table.jg-responsive thead,
  .jg-table.jg-responsive tbody,
  .jg-table.jg-responsive th,
  .jg-table.jg-responsive td,
  .jg-table.jg-responsive tr { display: block; }
  .jg-table.jg-responsive thead { display: none; }
  .jg-table.jg-responsive tbody tr {
    border: 1.5px solid var(--jg-line); border-radius: 12px;
    padding: 8px 10px; margin-bottom: 10px; background: #fff;
  }
  .jg-table.jg-responsive tbody td {
    border: none; padding: 4px 0; display: flex; justify-content: space-between; gap: 10px;
  }
  .jg-table.jg-responsive tbody td::before {
    content: attr(data-label); color: var(--jg-muted); font-size: 12px; font-weight: 800; flex: 0 0 42%;
  }
  .jg-table.jg-responsive tbody td > * { text-align: right; }
}

/* ====== 12) guide page layout(訓練卡片式說明) ====== */
.jg-step {
  background: var(--jg-panel); border: 1.5px solid var(--jg-line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--jg-shadow-card);
  display: flex; gap: 12px; align-items: flex-start;
}
.jg-step .jg-num {
  flex: 0 0 30px; height: 30px; border-radius: 999px;
  background: var(--jg-primary-soft); color: var(--jg-primary-dark);
  font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--jg-accent);
}
.jg-step.jg-final { border: 2px solid var(--jg-success); }
.jg-step.jg-final .jg-num { background: var(--jg-success); color: #fff; border-color: var(--jg-success-dark); }

.jg-note { background: var(--jg-success-soft); border: 1px solid #9fd0b3; color: var(--jg-success-dark);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.65; }
.jg-warn { background: var(--jg-warning-soft); border: 1px solid var(--jg-warning); color: var(--jg-warning-ink);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.65; }
.jg-danger-box { background: var(--jg-danger-soft); border: 1px solid var(--jg-danger); color: var(--jg-danger-dark);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; }

/* ====== 13) print page 基礎樣式 ====== */
@media print {
  .jg-body { background: #fff; }
  .jg-no-print { display: none !important; }
  .jg-print-plain { box-shadow: none !important; border-color: #243746 !important; }
}

/* ====== 14) 390px 手機優化 ====== */
@media (max-width: 390px) {
  .jg-page-header h1 { font-size: 20px; }
  .jg-topbar-title { font-size: 15px; }
  .jg-btn { height: 46px; font-size: 13px; letter-spacing: 0.5px; }
  .jg-card, .jg-panel { padding: 14px 13px; }
  .jg-linkcard { font-size: 14.5px; }
}