/* ================== 遊戲館（memory_0916/games.html） ================== */
.page-games {
  --pink:#df809b;
  --pink-dark:#bd5b78;
  --pink-deep:#99465f;
  --pink-soft:#fbf0f3;
  --text:#332d2f;
  --sub:#72686b;
  --light-text:#7a7275;
  --line:#e7dde0;
  --line-strong:#d7bdc5;
  --bg:#faf7f6;
  --white:#ffffff;
  --shadow:0 3px 16px rgba(80,40,55,.07);

  /* 遊戲專屬色系：深青綠為主色 */
  --teal-deep:#0d6e76;
  --teal:#1a8089;
  --teal-soft:#e6f4f3;
  --teal-line:#cfe8e6;

  --purple:#8b5fc9;
  --purple-soft:#efe6fa;
  --blue:#3d87c4;
  --blue-soft:#dceefb;
  --orange:#d97a3f;
  --orange-soft:#fbe7d8;
  --green:#5c9a4d;
  --green-soft:#e6f3e1;
}

.page-games {
  --game-brand:#FB6C8A;
  --game-brand-dark:#B74360;
  --game-brand-pale:#FFF2F5;
  --game-brand-line:#F0D9E0;
  --game-card-shadow:0 6px 20px rgba(183,67,96,.08);
  --game-card-shadow-hover:0 12px 30px rgba(183,67,96,.14);
  background: var(--bg);
  color: var(--text);
}
/* 來源是 `button{font:inherit}`（特異度 0-0-1），只用來壓掉瀏覽器預設。
   直接寫成 `.page-games button` 會升到 0-1-1，反過來蓋掉各元件自己的
   font-size／font-weight，因此用 :where() 把 .page-games 的權重歸零。 */
body:where(.page-games) :where(button) {
  font: inherit;
  cursor: pointer;
}
/* 來源 games.html 的 img reset 只作用於頁面內容；此處限定 main 內，
   避免蓋掉 header logo 由 Tailwind 工具類別設定的尺寸。 */
.page-games main img {
  display: block;
  width: 100%;
}
/* 來源只以 `*` 設定 border-box，不包含虛擬元素；Tailwind Preflight 會包含，
   因此明確還原來源虛擬元素的 content-box 計算基準。 */
.page-games *::before,
.page-games *::after {
  box-sizing: content-box;
}
.memory-game-main{ width:100%; max-width:1180px; margin:auto; padding:26px 24px 100px; }
.page-eyebrow{ display:flex; align-items:center; gap:7px; margin-bottom:14px; color:#c99a2e; font-size:14px; font-weight:800; }
.page-eyebrow svg{ width:18px; height:18px; }

/* 今日推薦挑戰 卡片 */
.featured-game{
  position:relative;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  align-items:stretch;
  gap:0;
  margin-bottom:34px;
  border:1px solid var(--teal-line);
  border-radius:20px;
  background:linear-gradient(135deg, var(--teal-soft) 0%, #ffffff 78%);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.featured-game-art{
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 30% 35%, #6fc4c2 0%, #2f9a97 60%, #1c7c7a 100%);
}
.featured-game-art svg{ width:100%; height:100%; display:block; }
.featured-game-body{
  padding:26px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.featured-game-body h2{ margin:0 0 12px; font-size:24px; color:var(--text); }
.featured-game-tags{ display:flex; gap:8px; margin-bottom:14px; }
.featured-tag{ padding:5px 13px; border-radius:20px; background:var(--teal-soft); border:1px solid var(--teal-line); color:var(--teal-deep); font-size:12px; font-weight:700; }
.featured-time{ display:flex; align-items:center; gap:6px; margin-bottom:20px; color:var(--sub); font-size:13px; }
.featured-time svg{ width:15px; height:15px; }
.featured-cta{
  align-self:flex-start;
  padding:13px 28px;
  border:0;
  border-radius:24px;
  background:var(--teal-deep);
  color:#fff;
  font-size:15px;
  font-weight:800;
  transition:.2s;
}
.featured-cta:hover{ background:var(--teal); }
.featured-howto{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  color:var(--sub);
  font-size:12px;
}
.featured-howto svg{ width:14px; height:14px; }

/* 依能力選遊戲 */
.games-heading{ margin-bottom:16px; font-size:19px; font-weight:800; }
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.filter-pill{
  padding:9px 20px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#f2f0ef;
  color:#5c5457;
  font-size:13px;
  font-weight:700;
  transition:.2s;
}
.filter-pill.active{
  border-color:var(--teal-deep);
  background:var(--teal-deep);
  color:#fff;
}
.filter-pill:hover:not(.active){ background:#e7e3e2; }

/* 遊戲卡片 grid */
.games-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-bottom:24px;
}
.game-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  box-shadow:var(--shadow);
  text-align:left;
  transition:.2s;
}
.game-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,60,60,.1); }
.game-icon{
  width:64px;
  height:64px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.game-icon svg{ width:36px; height:36px; }
.game-icon.icon-purple{ background:var(--purple-soft); color:var(--purple); }
.game-icon.icon-blue{ background:var(--blue-soft); color:var(--blue); }
.game-icon.icon-orange{ background:var(--orange-soft); color:var(--orange); }
.game-icon.icon-green{ background:var(--green-soft); color:var(--green); }
.game-body{ min-width:0; }
.game-body h3{ margin:0 0 7px; font-size:14px; line-height:1.4; color:var(--text); }
.game-tag{ display:inline-block; margin-bottom:7px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.tag-memory{ background:var(--purple-soft); color:var(--purple); }
.tag-attention{ background:var(--blue-soft); color:var(--blue); }
.tag-reaction{ background:var(--orange-soft); color:var(--orange); }
.tag-logic{ background:var(--green-soft); color:var(--green); }
.game-time{ display:flex; align-items:center; gap:5px; color:var(--light-text); font-size:11px; }
.game-time svg{ width:12px; height:12px; }
.game-arrow{
  width:34px;
  height:34px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border:1.5px solid var(--teal-line);
  border-radius:50%;
  color:var(--teal-deep);
}
.game-arrow svg{ width:16px; height:16px; }


/* =========================================================
   [全螢幕遊戲框架與 9 款健腦遊戲樣式] START
   ========================================================= */
.game-fullscreen{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  flex-direction:column;
  background:radial-gradient(circle at 50% 15%, #16646b 0%, #0a4046 60%, #05262a 100%);
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.game-fullscreen.is-open{ opacity:1; pointer-events:auto; }

/* 頂部導航與功能列 */
.game-fullscreen-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:rgba(8,54,59,.82);
  backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:20;
}
.game-hdr-btn{
  border:0;
  border-radius:24px;
  background:rgba(255,255,255,.14);
  color:#fff;
  padding:7px 14px;
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:.15s;
}
.game-hdr-btn:hover{ background:rgba(255,255,255,.24); transform:scale(1.02); }
.game-hdr-btn svg{ width:16px; height:16px; }

.game-title-wrap{
  display:flex;
  align-items:center;
  gap:9px;
}
.game-fullscreen-title{ font-size:16px; font-weight:800; letter-spacing:.5px; }
.game-cat-badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.2);
  font-weight:700;
}

/* 遊戲即時 HUD 狀態列 */
.game-hud{
  display:none;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:8px 16px;
  background:rgba(0,0,0,.28);
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.game-hud.is-active{
  display:flex;
  position:sticky;
  top:52px;
  z-index:25;
}
.game-hud-item{ display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.9); }
.game-hud-item svg{ width:15px; height:15px; color:#5ce2dc; }
.game-hud-val{ color:#ffd859; font-weight:800; font-size:14px; }

/* 頂欄／HUD：窄螢幕維持單行（不直排折字、標題過長省略） */
.game-fullscreen-top{
  gap:8px;
  min-width:0;
}
.game-title-wrap{
  flex:1 1 auto;
  min-width:0;
  justify-content:center;
}
.game-fullscreen-title{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.game-cat-badge{
  flex-shrink:0;
  white-space:nowrap;
}
.game-fullscreen-top > .game-hdr-btn,
.game-fullscreen-top > div:last-child{
  flex-shrink:0;
}
.game-hdr-btn{
  white-space:nowrap;
}
.game-hud{
  flex-wrap:nowrap;
  gap:clamp(10px, 4vw, 24px);
  padding-left:10px;
  padding-right:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.game-hud::-webkit-scrollbar{
  display:none;
}
.game-hud-item{
  flex-shrink:0;
  white-space:nowrap;
}
.game-hud-item span{
  white-space:nowrap;
}

@media (max-width: 480px){
  .game-fullscreen-top{
    padding:8px 10px;
  }
  .game-hdr-btn{
    padding:6px 10px;
    gap:4px;
  }
  .game-title-wrap{
    gap:6px;
  }
  .game-fullscreen-top .game-cat-badge{
    display:none;
  }
  .game-hud{
    gap:8px;
    justify-content:space-between;
  }
  .game-hud.is-active{
    top:46px;
  }
}

/* 手機遊戲中的提示改為懸浮在頁頂（疊在頂欄上，不推擠畫面）。
   全站 toast 預設置底（≤899px 時 bottom:80px），會蓋住數獨下方數字鍵與送出鈕；
   toast 本身 pointer-events:none，疊在頂欄上不影響離開／重新開始按鈕。 */
@media (max-width: 600px) {
  /* left:50% 時 shrink-to-fit 只會用到半個視窗寬，長句會被擠成很高的直條而壓到盤面，故明訂 max-content 寬度 */
  body:has(#gameFullscreen.is-open) .toast {
    top: 6px;
    bottom: auto;
    width: max-content;
    max-width: calc(100% - 24px);
    transform: translateX(-50%) translateY(-16px);
  }
  body:has(#gameFullscreen.is-open) .toast.is-visible {
    transform: translateX(-50%) translateY(0);
  }
}

/* 進行中：舞台由頂往下排，避免置中時說明文字往上蓋住 HUD */
.game-fullscreen:has(.game-hud.is-active) .game-stage{
  justify-content:flex-start;
  padding-top:10px;
  padding-bottom:28px;
  min-height:0;
}

/* 遊戲內容主舞台 */
.game-stage{
  flex:1;
  width:100%;
  max-width:680px;
  margin:0 auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:480px;
  position:relative;
}

/* 通用彈窗卡片（遊戲引導、結算成果） */
.game-dialog-card{
  background:#ffffff;
  color:var(--text);
  border-radius:22px;
  padding:28px 24px;
  width:100%;
  max-width:460px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  text-align:center;
  animation:gamePopIn .3s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes gamePopIn{
  from{ opacity:0; transform:scale(.92) translateY(12px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.game-intro-icon{
  width:72px;
  height:72px;
  border-radius:20px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  font-size:36px;
  background:var(--teal-soft);
  color:var(--teal-deep);
}
.game-dialog-card h2{ margin:0 0 6px; font-size:22px; font-weight:800; color:#124e54; }
.game-target-tag{
  display:inline-block;
  padding:3px 12px;
  border-radius:20px;
  background:var(--teal-soft);
  color:var(--teal-deep);
  font-size:12px;
  font-weight:700;
  margin-bottom:14px;
}
.game-dialog-desc{
  font-size:13.5px;
  line-height:1.75;
  color:#554e50;
  margin:0 0 20px;
  text-align:left;
  background:#f8faf9;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #e1ece9;
}
.game-dialog-desc ul{ margin:4px 0 0; padding-left:20px; }
.game-dialog-desc li{ margin-bottom:4px; }
.game-btn-start{
  width:100%;
  padding:13px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg, var(--teal-deep) 0%, #158b95 100%);
  color:#fff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(13,110,118,.35);
  transition:.15s;
}
.game-btn-start:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(13,110,118,.45); }
.game-btn-secondary{
  width:100%;
  padding:11px;
  margin-top:10px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:#fff;
  color:var(--sub);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.game-btn-secondary:hover{ background:#f5f3f2; }

/* 結算專屬樣式 */
.game-stars{ font-size:32px; color:#f6c342; margin-bottom:8px; letter-spacing:4px; }
.game-score-banner{ font-size:32px; font-weight:900; color:var(--teal-deep); margin-bottom:4px; }
.game-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:16px 0;
  text-align:left;
}
.game-stat-cell{
  background:#f8faf9;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e1ece9;
}
.game-stat-lbl{ font-size:11.5px; color:#7d7477; margin-bottom:2px; }
.game-stat-num{ font-size:15px; font-weight:800; color:var(--text); }
.game-praise-msg{
  font-size:13.5px;
  font-weight:700;
  color:#156970;
  background:var(--teal-soft);
  padding:12px;
  border-radius:10px;
  margin-bottom:18px;
}

/* 遊戲來源標示（魚兒往哪游、穿搭好爸氣、一日收銀員） */
.game-source{
  width:100%;
  margin:2px 0 0;
  text-align:center;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  color:rgba(255,255,255,.92);
}
.game-source a{
  color:#ffd859;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.game-source a:hover{ color:#fff6d0; }

/* =========================================================
   各遊戲專屬樣式
   ========================================================= */

/* 1. 魚兒往哪游 - 視知覺方向辨識與水感畫布 (參考 index.html) */
.fish-board{
  width:100%;
  max-width:600px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
.fish-prompt{
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.fish-prompt-title{
  font-size:clamp(17px, 4.2vw, 20px);
  font-weight:900;
  color:#ffd859;
  letter-spacing:0.5px;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
.fish-round-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:3px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  color:#ffffff;
  letter-spacing:0.5px;
  border:1px solid rgba(255,255,255,.25);
}
.fish-ocean{
  width:100%;
  height:390px;
  background:linear-gradient(180deg, #e8f4f8 0%, #d5edf6 100%);
  border-radius:24px;
  position:relative;
  overflow:hidden;
  border:2.5px solid #bae6fd;
  box-shadow:inset 0 2px 14px rgba(14, 116, 144, 0.15), 0 10px 30px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing:border-box;
  transition:all .2s ease;
}
.fish-watermark{
  position:absolute;
  top:12px;
  left:16px;
  font-size:38px;
  font-weight:900;
  color:rgba(8, 145, 178, 0.13);
  pointer-events:none;
  user-select:none;
  line-height:1;
  font-family:inherit;
}
.fish-bubble-container{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.fish-bubble-item{
  position:absolute;
  bottom:-30px;
  background:rgba(56, 189, 248, 0.28);
  border-radius:50%;
  animation:fishBubbleFloat 7s infinite linear;
  pointer-events:none;
}
@keyframes fishBubbleFloat{
  0% { transform:translateY(0) translateX(0); opacity:0; }
  15% { opacity:0.85; }
  85% { opacity:0.85; }
  100% { transform:translateY(-390px) translateX(30px); opacity:0; }
}

/* 魚群九宮格陣列 (加大網格以容納大魚) */
.fish-grid{
  position:relative;
  width:100%;
  max-width:500px;
  height:100%;
  max-height:350px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:12px;
  justify-items:center;
  align-items:center;
  z-index:2;
}
.fish-cell{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fish-node{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  transition:transform .2s ease;
}
.fish-node:hover{
  transform:scale(1.08);
}
.fish-svg-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 答題反饋遮罩與動畫 */
.fish-feedback-overlay{
  position:absolute;
  inset:0;
  border-radius:24px;
  pointer-events:none;
  transition:background-color .2s ease;
  z-index:10;
}
.fish-ocean.feedback-correct .fish-feedback-overlay{
  background-color:rgba(34, 197, 94, 0.25);
}
.fish-ocean.feedback-wrong .fish-feedback-overlay{
  background-color:rgba(239, 68, 68, 0.25);
}
.shake-anim{
  animation:fishShake 0.4s ease-in-out;
}
@keyframes fishShake{
  0%, 100% { transform:translateX(0); }
  20%, 60% { transform:translateX(-10px); }
  40%, 80% { transform:translateX(10px); }
}

/* 浮動提示標籤 */
.fish-floating-badge{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  padding:9px 20px;
  border-radius:24px;
  font-size:16px;
  font-weight:900;
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:30;
  animation:fishBadgePop .8s cubic-bezier(.175,.885,.32,1.275) forwards;
  pointer-events:none;
  white-space:nowrap;
}
.fish-floating-badge.correct{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  border:2px solid #a7f3d0;
}
.fish-floating-badge.wrong{
  background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border:2px solid #fecaca;
}
@keyframes fishBadgePop{
  0% { opacity:0; transform:translate(-50%, -30%) scale(0.7); }
  25% { opacity:1; transform:translate(-50%, -50%) scale(1.1); }
  75% { opacity:1; transform:translate(-50%, -50%) scale(1); }
  100% { opacity:0; transform:translate(-50%, -70%) scale(0.9); }
}

/* 雙向方向控制大按鈕 */
.fish-controls{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:2px;
}
.fish-dir-btn{
  background:#ffffff;
  border:2px solid rgba(255,255,255,.8);
  border-radius:18px;
  padding:14px 12px;
  color:#1e293b;
  font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
  transition:all .16s ease;
  user-select:none;
}
.fish-dir-btn:hover{
  background:#ffffff;
  border-color:#38bdf8;
  color:#0284c7;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(56,189,248,.35);
}
.fish-dir-btn:active{
  transform:scale(0.96) translateY(0);
}
.fish-dir-btn .dir-icon{
  font-size:26px;
  line-height:1;
  transition:transform .16s ease;
}
.fish-dir-btn:hover .dir-icon.left{ transform:translateX(-5px); }
.fish-dir-btn:hover .dir-icon.right{ transform:translateX(5px); }
.fish-dir-btn .dir-label{
  font-size:18px;
  letter-spacing:0.5px;
}
.fish-dir-btn .dir-sub{
  font-size:11px;
  font-weight:600;
  color:#64748b;
}
@media (max-width: 520px) {
  .fish-ocean{
    height:340px;
    padding:10px;
  }
  .fish-grid{
    max-width:100%;
    max-height:300px;
    gap:8px;
  }
}

/* 2. 認知翻牌配對 */
.memory-board{ width:100%; max-width:560px; }
.memory-hint{
  font-size:clamp(17px, 4.5vw, 21px);
  font-weight:800;
  color:#ffd859;
  text-align:center;
  margin-bottom:16px;
  letter-spacing:0.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.memory-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(8px, 2vw, 14px);
  width:100%;
}
.memory-card{
  aspect-ratio:3/3.8;
  perspective:1000px;
  cursor:pointer;
  user-select:none;
}
.memory-card-inner{
  width:100%;
  height:100%;
  border-radius:16px;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.memory-card.is-flipped .memory-card-inner,
.memory-card.is-matched .memory-card-inner{
  transform:rotateY(180deg);
}
.card-front, .card-back{
  position:absolute;
  inset:0;
  border-radius:16px;
  backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.card-back{
  background:linear-gradient(145deg, #187a83 0%, #0b4e54 100%);
  border:2.5px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:clamp(32px, 8vw, 48px);
  font-weight:900;
  text-shadow:0 2px 6px rgba(0,0,0,.3);
}
.card-front{
  background:#ffffff;
  border:3px solid #6fc4c2;
  color:var(--text);
  transform:rotateY(180deg);
  padding:6px 2px;
}
.card-front .icon{
  font-size:clamp(40px, 11vw, 62px);
  line-height:1.1;
  display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.15));
}
.card-front .label{
  font-size:clamp(14px, 3.8vw, 20px);
  font-weight:800;
  color:#221b1e;
  margin-top:6px;
  letter-spacing:1px;
}
.memory-card.is-matched .card-front{
  border-color:#ffd859;
  background:#fffdf2;
  box-shadow:0 0 18px rgba(255,216,89,.7);
}

/* 3. AI 數獨填空 */
.sudoku-board-wrap{ width:100%; max-width:480px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.sudoku-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  width:380px;
  height:380px;
  max-width:92vw;
  max-height:92vw;
  aspect-ratio:1/1;
  background:#ffffff;
  border:3.5px solid #0c4d53;
  border-radius:16px;
  box-shadow:0 12px 36px rgba(0,0,0,.32);
  overflow:hidden;
}
.sudoku-cell{
  border:1px solid #c2e0dd;
  display:grid;
  place-items:center;
  font-size:34px;
  font-weight:900;
  color:#0d555c;
  cursor:pointer;
  user-select:none;
  background:#fff;
  transition:.15s;
}
.sudoku-cell.preset{ background:#f1f7f6; color:#444; cursor:default; font-weight:800; }
.sudoku-cell.selected{ background:#d6f0ee; outline:3.5px solid #1a8a94; outline-offset:-3.5px; }
.sudoku-cell.conflict, .sudoku-cell.error-cell{
  background:#ffebe8 !important;
  color:#d63031 !important;
  outline:3.5px solid #ff4d4f !important;
  outline-offset:-3.5px;
  animation:wiggleWrong .35s ease;
}
.sudoku-numpad{
  display:flex;
  gap:10px;
  width:100%;
  max-width:380px;
  justify-content:center;
}
.sudoku-num-btn{
  flex:1;
  height:54px;
  border:0;
  border-radius:12px;
  background:#ffffff;
  color:#0d555c;
  font-size:26px;
  font-weight:900;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  cursor:pointer;
  transition:.15s;
}
.sudoku-num-btn:hover{ background:#e6f5f4; transform:translateY(-2px); }
.sudoku-action-row{ display:flex; gap:12px; width:100%; max-width:380px; }
.sudoku-act-btn{
  flex:1;
  padding:12px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:.15s;
}
.sudoku-act-btn:hover{ background:rgba(255,255,255,.28); }
.sudoku-submit-btn{
  flex:1.4;
  padding:12px 18px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg, #0d6e76 0%, #158b95 100%);
  color:#fff;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(13,110,118,.35);
  transition:.15s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.sudoku-submit-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(13,110,118,.45);
  filter:brightness(1.08);
}

/* 4. 顏色干擾辨識 (Stroop) */
.stroop-board{ width:100%; max-width:460px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.stroop-rule-tag{
  padding:8px 18px 8px 22px;
  border-radius:999px;
  background:#ffffff;
  color:#3c3235;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  user-select:none;
}
.stroop-rule-label{
  font-size:18px;
  font-weight:800;
  color:#4a3f42;
}
.stroop-target-highlight{
  font-size:24px;
  font-weight:900;
  padding:4px 16px;
  border-radius:999px;
  background:#ffd859;
  color:#3d2700;
  border:2.5px solid #ffbe1a;
  box-shadow:0 3px 12px rgba(255,216,89,.6);
  letter-spacing:1.5px;
  display:inline-block;
}
.stroop-feedback{
  min-height:28px;
  font-size:15px;
  font-weight:800;
  color:#d63031;
  background:#fff0f0;
  border:1.5px solid #ff7675;
  padding:5px 20px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.stroop-feedback.is-visible{
  opacity:1;
  transform:translateY(0);
}
.stroop-word-card{
  width:100%;
  padding:34px 20px;
  background:#ffffff;
  border-radius:20px;
  border:3px solid transparent;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  transition:border-color .2s, box-shadow .2s;
}
.stroop-word-card.wrong{
  border-color:#ff4d4f !important;
  box-shadow:0 0 24px rgba(255,77,79,.6) !important;
  animation:wiggleWrong .35s ease;
}
.stroop-word{ font-size:72px; font-weight:900; line-height:1; letter-spacing:2px; user-select:none; }
.stroop-options{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  width:100%;
}
.stroop-btn{
  padding:16px 12px;
  border:0;
  border-radius:14px;
  font-size:18px;
  font-weight:800;
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
  transition:.15s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
}
.stroop-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.stroop-btn:active{ transform:scale(.97); }
.stroop-btn.wrong{
  outline:3.5px solid #ff4d4f !important;
  outline-offset:2px;
  animation:wiggleWrong .35s ease;
}

/* 5. 路線記憶 */
.path-board{ width:100%; max-width:500px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.path-prompt{ font-size:clamp(16px, 4vw, 20px); font-weight:800; color:#ffd859; text-align:center; min-height:30px; letter-spacing:0.5px; }
.path-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-rows:repeat(3, minmax(0, 1fr));
  gap:16px;
  width:min(440px, 86vw, 55vh);
  height:min(440px, 86vw, 55vh);
  max-width:440px;
  max-height:440px;
}
.path-stone{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  padding:0;
  margin:0;
  background:rgba(255,255,255,.15);
  border:2.5px solid rgba(255,255,255,.3);
  border-radius:20px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:clamp(32px, 7vw, 44px);
  font-weight:900;
  line-height:1;
  color:#fff;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  user-select:none;
}
@media (hover: hover){
  .path-stone:hover:not(.lit):not(.success):not(.wrong){
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.45);
  }
}
.path-stone.lit{
  background:#ffd859;
  border-color:#fff;
  color:#3a2800;
  box-shadow:0 0 26px rgba(255,216,89,.9);
}
.path-stone.success{
  background:#52c41a;
  border-color:#fff;
  color:#fff;
  box-shadow:0 0 22px rgba(82,196,26,.8);
}
.path-stone.wrong{
  background:#ff4d4f !important;
  border-color:#ff7875 !important;
  animation:wiggleWrong .3s ease;
  box-shadow:0 0 18px rgba(255,77,79,.8) !important;
}
.path-penalty-badge{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translate(-50%, 0);
  background:linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color:#ffffff;
  font-size:13px;
  font-weight:900;
  padding:3px 10px;
  border-radius:14px;
  box-shadow:0 4px 12px rgba(231, 76, 60, 0.6);
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
  animation:floatUpFade .75s ease forwards;
}

/* 6. 圖像快速配對 (Dobble) */
.dobble-board{ width:100%; max-width:660px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.dobble-prompt{ font-size:16px; font-weight:800; color:#ffd859; text-align:center; }
.dobble-cards{
  display:flex;
  gap:20px;
  justify-content:center;
  width:100%;
  flex-wrap:wrap;
}
.dobble-circle{
  width:290px;
  height:290px;
  border-radius:50%;
  background:#ffffff;
  border:4px solid #48b0b5;
  box-shadow:0 10px 32px rgba(0,0,0,.32);
  position:relative;
  overflow:hidden;
  color:#111111; /* 確保所有符號繼承深色，絕不因父層白色而在白底卡片上隱形 */
  transition:border-color .2s, box-shadow .2s;
}
.dobble-circle.card-wrong-flash{
  border-color:#ff4d4f !important;
  box-shadow:0 0 28px rgba(255, 77, 79, 0.85) !important;
}
.dobble-item{
  position:absolute;
  width:62px;
  height:62px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease, filter .15s ease, background-color .15s ease;
  line-height:1;
  border-radius:50%;
  border:2px solid transparent;
}
.dobble-item:hover{
  transform:scale(1.18) !important;
  background:rgba(72,176,181,.18);
}
.dobble-item.matched-glow{
  animation:pulseGlow .35s ease infinite alternate;
  background:rgba(255,216,89,.4);
  box-shadow:0 0 16px #ffd859;
}
.dobble-item.hint-glow{
  animation:pulseGlow .3s ease infinite alternate;
  background:rgba(243,156,18,.35);
  box-shadow:0 0 18px #f39c12;
}
.dobble-item.is-wrong{
  animation:wiggleWrong .45s ease;
  background:#ffebe8 !important;
  box-shadow:0 0 18px rgba(255, 77, 79, 0.8) !important;
  border:2.5px solid #ff4d4f !important;
}
.dobble-penalty-badge{
  position:absolute;
  top:-20px;
  left:50%;
  transform:translate(-50%, 0);
  background:linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  padding:3px 9px;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(231, 76, 60, 0.6);
  white-space:nowrap;
  pointer-events:none;
  z-index:30;
  animation:floatUpFade .85s ease forwards;
}
.dobble-actions{
  display:flex;
  gap:10px;
  margin-top:4px;
}

/* 7. 數字順序 */
.trail-board{ width:100%; max-width:660px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.trail-prompt{ font-size:clamp(16px, 4vw, 20px); font-weight:800; color:#ffd859; text-align:center; }
.trail-canvas-wrap{
  width:100%;
  height:min(500px, 62vh);
  background:rgba(255,255,255,.08);
  border:2px dashed rgba(255,255,255,.28);
  border-radius:24px;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 2px 24px rgba(0,0,0,.25);
}
.trail-node{
  position:absolute;
  width:72px;
  height:72px;
  border-radius:50%;
  background:#ffffff;
  color:#0c4d53;
  font-size:34px; /* 全部號碼字體明顯放大，利於長輩清晰閱讀 */
  font-weight:900;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  transition:transform .15s, background .2s, border .2s;
  user-select:none;
  border:2.5px solid transparent;
}
.trail-node:hover{ transform:scale(1.12); border-color:#4cd137; }
.trail-node.done{
  background:#2ed573;
  color:#fff;
  box-shadow:0 0 16px rgba(46,213,115,.7);
  cursor:default;
  border-color:#fff;
}
/* 規則：只有 1 號保持提示樣式，其餘號碼不提示 */
.trail-node.start-hint{
  background:#ffd859;
  color:#3a2900;
  border-color:#fff;
  animation:pulseGlow .6s infinite alternate;
  box-shadow:0 0 18px #ffd859;
}
/* 點到錯誤號碼時的顯著錯誤樣式 */
.trail-node.is-wrong{
  animation:wiggleWrong .45s ease;
  background:#ffebe8 !important;
  color:#d63031 !important;
  border:3px solid #ff4d4f !important;
  box-shadow:0 0 18px #ff4757 !important;
}
.trail-penalty-badge{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translate(-50%, 0);
  background:linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  padding:3px 9px;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(231, 76, 60, 0.6);
  white-space:nowrap;
  pointer-events:none;
  z-index:30;
  animation:floatUpFade .85s ease forwards;
}

/* 8. 字詞連連看 */
.word-board{ width:100%; max-width:580px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.word-prompt{ font-size:16px; font-weight:800; color:#ffd859; text-align:center; }
.word-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; }
.word-col{ display:flex; flex-direction:column; gap:12px; }
.word-card{
  padding:16px 20px;
  min-height:74px;
  background:#ffffff;
  color:var(--text);
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:16px;
  cursor:pointer;
  border:3.5px solid transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  transition:all .15s ease;
  user-select:none;
  position:relative;
}
.word-card .word-icon{
  font-size:36px; /* 關鍵：插圖顯著放大，生動鮮明 */
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.word-card .word-text{
  font-size:22px; /* 關鍵：文字顯著放大，粗體清晰 */
  font-weight:900;
  color:#1c3d40;
  letter-spacing:.5px;
}
.word-card:hover{
  transform:translateY(-2px);
  border-color:#65c4c9;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.word-card.selected{
  border-color:#0d6e76;
  background:#e8f7f6;
  transform:scale(1.03);
  box-shadow:0 0 18px rgba(13,110,118,.45);
}
.word-card.matched{
  background:#e8f7ec;
  border-color:#52c41a;
  pointer-events:none;
  opacity:0.88;
}
.word-card.matched .word-text{
  color:#27670e;
}
.word-card.matched::after{
  content:"✓";
  position:absolute;
  right:16px;
  font-size:20px;
  font-weight:900;
  color:#52c41a;
}
/* 答錯時區塊樣式顯著提示 */
.word-card.is-wrong{
  animation:wiggleWrong .45s ease;
  background:#ffebe8 !important;
  border-color:#ff4d4f !important;
  box-shadow:0 0 20px rgba(255,77,79,.75) !important;
}
.word-card.is-wrong .word-text{
  color:#d63031 !important;
}
.word-penalty-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translate(-50%, 0);
  background:linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  padding:3px 12px;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(231, 76, 60, 0.6);
  white-space:nowrap;
  pointer-events:none;
  z-index:30;
  animation:floatUpFade .85s ease forwards;
}

/* 9. 迷宮挑戰 (加大版) */
.maze-board{ width:100%; max-width:580px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.maze-prompt{
  font-size:clamp(17px, 4.2vw, 21px);
  font-weight:800;
  color:#ffd859;
  text-align:center;
  line-height:1.45;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
  padding:0 8px;
  width:100%;
  max-width:100%;
  flex-shrink:0;
  position:relative;
  z-index:0;
}
.maze-prompt-detail{
  display:block;
  font-size:14px;
  opacity:0.88;
  font-weight:700;
  margin-top:4px;
}
.maze-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  width:480px;
  height:480px;
  max-width:92vw;
  max-height:92vw;
  aspect-ratio:1/1;
  background:#093b40;
  border:4px solid #6fc4c2;
  border-radius:20px;
  padding:8px;
  gap:5px;
  box-shadow:0 12px 36px rgba(0,0,0,.35), inset 0 2px 10px rgba(0,0,0,.4);
}
.maze-cell{
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:36px;
  line-height:1;
  user-select:none;
  cursor:pointer;
  transition:all .12s ease;
}
.maze-cell.wall{ background:#062629; cursor:default; }
.maze-cell.path{ background:rgba(255,255,255,.18); }
.maze-cell.path:hover{ background:rgba(255,255,255,.34); transform:scale(1.05); }
.maze-cell.player{
  background:#ffd859;
  color:#000;
  box-shadow:0 0 18px #ffd859;
  font-size:42px;
  line-height:1;
  transform:scale(1.05);
}
.maze-cell.goal{
  background:#ff6b6b;
  color:#fff;
  box-shadow:0 0 18px rgba(255,107,107,.7);
  font-size:42px;
  line-height:1;
}
.maze-cell.coin{
  background:rgba(255,255,255,.18);
  font-size:38px;
  line-height:1;
  animation:pulseGlow 1.2s infinite alternate;
}
.maze-dpad{
  display:grid;
  grid-template-columns:repeat(3, 72px);
  gap:10px;
  margin-top:12px;
}
.dpad-btn{
  width:72px;
  height:72px;
  border:0;
  border-radius:18px;
  background:rgba(255,255,255,.22);
  color:#fff;
  font-size:34px;
  font-weight:900;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  transition:.15s;
  border:1.5px solid rgba(255,255,255,.25);
}
.dpad-btn:hover{
  background:rgba(255,255,255,.35);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.3);
}
.dpad-btn:active{ transform:scale(.92) translateY(0); }
.maze-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:10px;
}
.maze-regen-btn{
  padding:12px 26px;
  border-radius:16px;
  border:0;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:all .15s ease;
  display:flex;
  align-items:center;
  gap:8px;
  border:1.5px solid rgba(255,255,255,.25);
}
.maze-regen-btn:hover{
  background:rgba(255,255,255,.32);
  transform:translateY(-1px);
}
@media (max-width: 520px) {
  .maze-prompt{
    font-size:clamp(14px, 3.7vw, 17px);
    line-height:1.35;
  }
  .maze-prompt-detail{
    font-size:12px;
    line-height:1.4;
  }
  .maze-grid {
    width: 330px;
    height: 330px;
  }
  .maze-dpad {
    grid-template-columns: repeat(3, 58px);
    gap: 8px;
  }
  .dpad-btn {
    width: 58px;
    height: 58px;
    font-size: 24px;
    border-radius: 14px;
  }
}
/* 10. 穿搭好爸氣 */
.father-board{
  width:100%;
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.father-prompt{
  font-size:16px;
  font-weight:800;
  color:#ffd859;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:580px;
  padding:0 4px;
}
.father-round-tag{
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:3px 10px;
  border-radius:12px;
}
.father-img-wrap{
  width:100%;
  max-width:580px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.36);
  border:3px solid rgba(255,255,255,.2);
  background:#ffffff;
  display:flex;
  justify-content:center;
  align-items:center;
}
.father-img-wrap img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.father-options-label{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.9);
  text-align:center;
  margin-top:2px;
}
.father-options-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
  width:100%;
  max-width:580px;
}
.father-opt-btn{
  height:54px;
  border-radius:14px;
  border:2.5px solid rgba(255,255,255,.25);
  background:#ffffff;
  color:#0d555c;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:all .15s ease;
  display:grid;
  place-items:center;
}
.father-opt-btn:hover{
  transform:translateY(-2px);
  border-color:#48b0b5;
  background:#e6f5f4;
}
.father-opt-btn.correct{
  background:#52c41a !important;
  color:#ffffff !important;
  border-color:#ffffff !important;
  box-shadow:0 0 20px rgba(82,196,26,.85) !important;
  transform:scale(1.06);
}
.father-opt-btn.wrong{
  background:#ff4d4f !important;
  color:#ffffff !important;
  border-color:#ffffff !important;
  animation:wiggleWrong .35s ease;
  box-shadow:0 0 18px rgba(255,77,79,.85) !important;
}
.father-opt-btn.correct-hint{
  background:#ffd859 !important;
  color:#3a2900 !important;
  border-color:#ffffff !important;
  box-shadow:0 0 16px #ffd859 !important;
  transform:scale(1.04);
}
@media (max-width: 520px) {
  .father-options-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
  }
  .father-opt-btn{
    height:50px;
    font-size:22px;
  }
}

/* 11. 一日收銀員 */
.cashier-board{
  width:100%;
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.cashier-prompt{
  font-size:16px;
  font-weight:800;
  color:#ffd859;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:580px;
  padding:0 4px;
}
.cashier-round-tag{
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:3px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
}
.cashier-img-wrap{
  width:100%;
  max-width:580px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.36);
  border:3px solid rgba(255,255,255,.25);
  background:#ffffff;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}
.cashier-img-wrap img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.cashier-edge-hint{
  width:100%;
  max-width:580px;
  margin:0;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
}
.cashier-options-label{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.92);
  text-align:center;
  margin-top:2px;
  letter-spacing:0.5px;
}
.cashier-options-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  width:100%;
  max-width:580px;
}
.cashier-opt-btn{
  min-height:56px;
  border-radius:16px;
  border:2.5px solid rgba(255,255,255,.3);
  background:#ffffff;
  color:#0d555c;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:all .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  user-select:none;
}
.cashier-opt-btn:hover{
  transform:translateY(-2px);
  border-color:#38bdf8;
  background:#f0f9ff;
  color:#0284c7;
  box-shadow:0 6px 18px rgba(56,189,248,.25);
}
.cashier-opt-btn:active{
  transform:scale(0.97) translateY(0);
}
.cashier-opt-btn.correct{
  background:#10b981 !important;
  color:#ffffff !important;
  border-color:#ffffff !important;
  box-shadow:0 0 20px rgba(16,185,129,.85) !important;
  transform:scale(1.04);
}
.cashier-opt-btn.wrong{
  background:#ef4444 !important;
  color:#ffffff !important;
  border-color:#ffffff !important;
  animation:wiggleWrong .35s ease;
  box-shadow:0 0 18px rgba(239,68,68,.85) !important;
}
.cashier-opt-btn.correct-hint{
  background:#ffd859 !important;
  color:#3a2900 !important;
  border-color:#ffffff !important;
  box-shadow:0 0 16px #ffd859 !important;
  transform:scale(1.03);
}
.cashier-feedback-wrap{
  width:100%;
  max-width:580px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.cashier-feedback-wrap[hidden]{
  display:none !important;
}
.cashier-breakdown-box{
  width:100%;
  max-width:580px;
  background:rgba(0,0,0,.35);
  border-radius:12px;
  padding:8px 14px;
  color:#ffd859;
  font-size:13px;
  font-weight:700;
  text-align:center;
  border:1px solid rgba(255,255,255,.15);
}
.cashier-breakdown-box--wrong{
  background:rgba(0,0,0,.45);
  border-color:rgba(255,216,89,.35);
  padding:12px 14px;
  text-align:left;
}
.cashier-breakdown-title{
  margin:0 0 8px;
  font-size:15px;
  font-weight:800;
  color:#fff;
  text-align:center;
}
.cashier-breakdown-title strong{
  color:#ffd859;
}
.cashier-breakdown-text{
  margin:0;
  line-height:1.45;
  font-size:13px;
}
.cashier-next-btn{
  width:100%;
  padding:12px 20px;
  border-radius:16px;
  border:0;
  background:linear-gradient(135deg, #ffd859 0%, #f5b942 100%);
  color:#3a2900;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cashier-next-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.cashier-next-btn:active{
  transform:scale(0.98);
}
.cashier-opt-btn:disabled{
  cursor:default;
  opacity:0.92;
}
@media (max-width: 520px) {
  .cashier-options-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .cashier-opt-btn{
    min-height:50px;
    font-size:19px;
  }
}

/* 動畫效果 */
@keyframes pulseGlow{
  from{ transform:scale(1); filter:drop-shadow(0 0 4px rgba(255,216,89,.5)); }
  to{ transform:scale(1.08); filter:drop-shadow(0 0 14px rgba(255,216,89,.9)); }
}
@keyframes wiggleWrong{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}
/* =========================================================
   [全螢幕遊戲框架與 9 款健腦遊戲樣式] END
   ========================================================= */


/* TABLET / DESKTOP：遊戲卡片可更寬 */
@media(min-width:701px){
  .games-grid{ grid-template-columns:repeat(4,1fr); }
}


@media(max-width:700px){
  .featured-game{ grid-template-columns:1fr; border-radius:16px; }
  .featured-game-art{ height:170px; }
  .featured-game-body{ padding:20px; }
}


@media(max-width:600px){
  .memory-game-main{ padding:16px 15px 90px; }
  .games-grid{ grid-template-columns:repeat(2,1fr); gap:11px; }
  .game-card{ grid-template-columns:52px minmax(0,1fr) auto; padding:12px; border-radius:12px; }
  .game-icon{ width:52px; height:52px; border-radius:12px; }
  .game-icon svg{ width:28px; height:28px; }
  .game-arrow{ width:28px; height:28px; }
  .game-arrow svg{ width:14px; height:14px; }
}

/* =========================================================
   遊戲入口 V3｜單一 3:2 圖片規格＋隨機今日推薦
   延續首頁珊瑚粉品牌系統；遊戲本體維持原功能
   ========================================================= */
.page-games {
  --game-brand:#FB6C8A;
  --game-brand-dark:#B74360;
  --game-brand-pale:#FFF2F5;
  --game-brand-line:#F0D9E0;
  --game-card-shadow:0 6px 20px rgba(183,67,96,.08);
  --game-card-shadow-hover:0 12px 30px rgba(183,67,96,.14);
}

.page-eyebrow{
  margin:0 0 14px;
  color:var(--game-brand-dark);
  font-size:16px;
}

.featured-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.featured-head .page-eyebrow{ margin:0; }
.featured-refresh{
  border:0;
  background:transparent;
  color:var(--game-brand-dark);
  font-size:17px;
  font-weight:800;
  padding:8px 0;
}
.featured-refresh:hover{ color:#9F3853; }

.featured-game{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  margin-bottom:38px;
  border:1px solid #F0D5DD;
  border-radius:20px;
  background:#FFFDFD;
  box-shadow:var(--game-card-shadow);
  overflow:hidden;
}
.featured-game-art{
  width:100%;
  aspect-ratio:3 / 2;
  min-height:0;
  background:none;
}
.featured-game-body{
  padding:32px 34px;
  justify-content:center;
  background:linear-gradient(145deg,#FFFDFD 0%,#FFF3F6 100%);
}
.featured-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-bottom:12px;
  padding:5px 12px;
  border-radius:999px;
  background:#FFE5EC;
  color:var(--game-brand-dark);
  font-size:15px;
  font-weight:800;
}
.featured-game-body h2{
  margin:0 0 9px;
  font-size:30px;
  line-height:1.35;
  color:#3A2D31;
}
.featured-game-desc{
  margin:0 0 18px;
  color:#75676B;
  font-size:16px;
  line-height:1.7;
}
.featured-time{
  margin-bottom:20px;
  color:#75676B;
  font-size:15px;
}
.featured-cta{
  align-self:flex-start;
  min-width:150px;
  padding:13px 24px;
  border-radius:10px;
  background:var(--game-brand-dark);
  font-size:16px;
  box-shadow:0 5px 14px rgba(183,67,96,.16);
}
.featured-cta:hover{ background:#9F3853; }
.featured-howto{ display:none; }
.featured-game-tags{ display:none; }

.games-heading{
  margin:0 0 14px;
  font-size:22px;
  color:#3A2D31;
}
.filter-row{
  gap:8px;
  margin-bottom:20px;
}
.filter-pill{
  padding:9px 17px;
  border-color:#EFD9DF;
  background:#FFFDFD;
  color:#74696C;
  font-size:15px;
}
.filter-pill.active{
  border-color:var(--game-brand-dark);
  background:var(--game-brand-dark);
  color:#fff;
}
.filter-pill:hover:not(.active){
  border-color:#E8BCCA;
  background:#FFF4F6;
}

.games-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:28px;
}
.game-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:0;
  border:0;
  border-radius:16px;
  background:transparent;
  box-shadow:none;
  text-align:left;
  overflow:visible;
  transition:transform .2s ease;
}
.game-card:hover{
  transform:translateY(-3px);
}
.game-card-media{
  position:relative;
  width:100%;
  aspect-ratio:3 / 2;
  overflow:hidden;
  border:1px solid #F0DDE2;
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:#fff;
  box-shadow:var(--game-card-shadow);
}
.game-card-media img,
.featured-game-art img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.game-card-footer{
  display:block;
  width:100%;
  padding:0;
  margin:0;
}
.game-start-button{
  display:block;
  width:100%;
  min-height:56px;
  padding:13px 18px;
  border:0;
  border-radius:0 0 16px 16px;
  background:var(--game-brand-dark);
  color:#fff;
  font-size:18px;
  font-weight:800;
  text-align:center;
  box-shadow:0 7px 18px rgba(183,67,96,.14);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.game-start-button:hover{
  background:#9F3853;
  box-shadow:0 9px 22px rgba(183,67,96,.20);
}
.game-start-button:active{
  transform:translateY(1px);
}

/* demo 封面：日後可直接替換成 picture/img，不需改卡片版型 */
.demo-cover{
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
}
.demo-cover::before,
.demo-cover::after{
  content:"";
  position:absolute;
  border-radius:50%;
  z-index:-1;
}
.demo-cover::before{
  width:46%;
  aspect-ratio:1;
  top:-18%;
  right:-7%;
  background:rgba(255,255,255,.34);
}
.demo-cover::after{
  width:34%;
  aspect-ratio:1;
  left:-7%;
  bottom:-20%;
  background:rgba(255,255,255,.25);
}
.cover-symbol{
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 24px rgba(65,35,48,.12);
  font-size:42px;
  line-height:1;
}
.featured-game-art .cover-symbol{
  width:118px;
  height:118px;
  border-radius:32px;
  font-size:62px;
}
.cover-fish{ background:linear-gradient(135deg,#BEEDE9 0%,#78CFC9 100%); }
.cover-memory{ background:linear-gradient(135deg,#EFE1FA 0%,#CBB2ED 100%); }
.cover-sudoku{ background:linear-gradient(135deg,#DCEFFC 0%,#A8D4F1 100%); }
.cover-stroop{ background:linear-gradient(135deg,#FFE8D8 0%,#F8B77D 100%); }
.cover-path{ background:linear-gradient(135deg,#E5F3DE 0%,#ACD79C 100%); }
.cover-dobble{ background:linear-gradient(135deg,#DBF4F2 0%,#95D7D2 100%); }
.cover-number{ background:linear-gradient(135deg,#FFF0DB 0%,#F7C681 100%); }
.cover-word{ background:linear-gradient(135deg,#E8E4FA 0%,#BBB0E8 100%); }
.cover-maze{ background:linear-gradient(135deg,#DCECF9 0%,#9BC5E8 100%); }
.cover-father{ background:linear-gradient(135deg,#FFE4EA 0%,#F5AFC1 100%); }

@media(max-width:900px){
  .featured-game{ grid-template-columns:1fr 1fr; }
  .games-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:700px){
  .featured-game{
    grid-template-columns:1fr;
    min-height:0;
    border-radius:16px;
  }
  .featured-game-art{
    height:auto;
    min-height:0;
    aspect-ratio:3 / 2;
  }
  .featured-game-body{ padding:20px; }
  .featured-game-body h2{ font-size:24px; }
  .featured-game-desc,
  .featured-time,
  .featured-kicker,
  .featured-refresh,
  .filter-pill,
  .game-start-button{ font-size:16px; }
}

@media(max-width:600px){
  .memory-game-main{ padding:18px 15px 90px; }
  .featured-head{ margin-bottom:10px; }
  .page-eyebrow{ font-size:16px; }
  .featured-game{ margin-bottom:30px; }
  .featured-game-body{ padding:18px 16px 20px; }
  .featured-game-body h2{ font-size:23px; }
  .featured-cta{
    width:100%;
    text-align:center;
    justify-content:center;
    font-size:16px;
  }
  .games-heading{ font-size:21px; }
  .filter-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    margin:0 -15px 18px;
    padding:0 15px 3px;
    scrollbar-width:none;
  }
  .filter-row::-webkit-scrollbar{ display:none; }
  .filter-pill{ flex:0 0 auto; }
  .games-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
  }
  .game-card{ border-radius:14px; }
  .game-card-media{
    border-radius:14px 14px 0 0;
  }
  .game-card-footer{
    padding:0;
  }
  .game-start-button{
    width:100%;
    min-height:52px;
    padding:11px 12px;
    border-radius:0 0 14px 14px;
    font-size:17px;
  }
  .cover-symbol{
    width:62px;
    height:62px;
    border-radius:18px;
    font-size:32px;
  }
}


/* =========================================================
   手機版遊戲列表：固定一列兩個
   ========================================================= */
@media(max-width:768px){
  .games-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .game-card{
    width:100%;
    min-width:0;
  }

  .game-card-media{
    width:100%;
    aspect-ratio:3 / 2;
  }

  .game-start-button{
    width:100%;
  }
}