/* =========================================================
   來源 brand-system.css 對齊層（遊戲館／AI／資源）
   來源載入順序：各頁內嵌 <style> → brand-system.css
   →（遊戲館）最後的「強制一列兩個」<style>。本區塊必須維持在這個位置。
   memory.css 為四頁共用，故限定在 .page-games／.page-ai／.page-resources。
   來源以元素選擇器寫的規則（body / h1-h3 / p,li / button…）改寫成
   body:where(...) :where(...)，讓特異度仍停留在「元素欄」，
   否則會反過來蓋掉元件自己的 class 規則。
   ========================================================= */
.page-games,
.page-ai,
.page-resources {
  --pink:#FB6C8A;
  --pink-dark:#D85A78;
  --pink-deep:#B74360;
  --pink-deep-hover:#9F3853;
  --pink-light:#FBB7C6;
  --pink-soft:#FFF2F5;
  --pink-soft-2:#FFE8EE;
  --cream:#FFF8F4;
  --warm-white:#FFFDFC;
  --text:#3A2D31;
  --sub:#75676B;
  --light-text:#6F6669;
  --line:#F0D9E0;
  --line-strong:#E4B8C4;
  --bg:#FFF9FA;
  --white:#FFFFFF;
  --card-bg:#FFFFFF;
  --shadow:0 6px 20px rgba(183,67,96,.08);
  --shadow-sm:0 3px 12px rgba(183,67,96,.06);
  --shadow-lg:0 10px 28px rgba(183,67,96,.14);

  /* 來源把舊分頁的主題變數改用首頁品牌色，只留 --purple／--orange 當功能性狀態色 */
  --teal-deep:#B74360;
  --teal:#D85A78;
  --teal-soft:#FFF2F5;
  --teal-line:#F0D9E0;
  --green-deep:#B74360;
  --green:#D85A78;
  --green-soft:#FFF2F5;
  --green-line:#F0D9E0;
  --navy:#3A2D31;
  --blue-deep:#B74360;
  --blue:#D85A78;
  --blue-soft:#FFF2F5;
  --blue-line:#F0D9E0;
}

html { color-scheme: light; }

/* Tailwind CDN 在執行期注入樣式，順序在 memory.css 之後，其 Preflight
   `body{line-height:inherit}` 會贏過同特異度的規則，因此這裡用 body.page-games
   把特異度拉到 0-1-1。 */
body.page-games,
body.page-ai,
body.page-resources {
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

body:where(.page-games, .page-ai, .page-resources) :where(button, input, textarea, select) {
  font: inherit;
}

body:where(.page-games, .page-ai, .page-resources) :where(button, a, input, textarea, select, summary) {
  -webkit-tap-highlight-color: transparent;
}

body:where(.page-games, .page-ai, .page-resources) :focus-visible {
  outline: 3px solid rgba(251, 108, 138, .42);
  outline-offset: 3px;
}

.page-games .memory-game-main,
.page-ai .memory-ai-main,
.page-resources .memory-resource-main { color: var(--text); }

body:where(.page-games, .page-ai, .page-resources) :where(h1, h2, h3) {
  color: var(--text);
  letter-spacing: .01em;
}

body:where(.page-games, .page-ai, .page-resources) :where(p, li) {
  line-height: 1.75;
}

/* 卡片：邊框優先、淡陰影、小至中圓角 */
.page-games :is(.featured-game, .game-card, .game-dialog-card) {
  border-color: var(--line) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}
.page-games .game-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* 主要行動按鈕 */
.page-games :is(.featured-cta, .game-btn-start, .sudoku-submit-btn) {
  min-height: 48px;
  border: 1px solid var(--pink-deep) !important;
  border-radius: 10px !important;
  background: var(--pink-deep) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 5px 14px rgba(183, 67, 96, .16) !important;
  font-size: 18px !important;
  font-weight: 800;
}
.page-games :is(.featured-cta, .game-btn-start, .sudoku-submit-btn):hover {
  background: var(--pink-deep-hover) !important;
  border-color: var(--pink-deep-hover) !important;
  transform: translateY(-1px);
}

/* 次要行動按鈕 */
.page-games .game-btn-secondary {
  min-height: 44px;
  border: 1.5px solid var(--pink-deep) !important;
  border-radius: 10px !important;
  background: var(--warm-white) !important;
  color: var(--pink-deep) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 700;
}
.page-games .game-btn-secondary:hover {
  background: var(--pink-soft) !important;
  border-color: var(--pink-dark) !important;
}

/* 遊戲頁框架改用粉色；遊戲內容本身保留必要狀態色 */
.page-games :is(.page-eyebrow, .featured-howto, .game-arrow) {
  color: var(--pink-deep);
}
.page-games .featured-game {
  background: var(--warm-white);
}
.page-games :is(.featured-tag, .game-tag) {
  border: 1px solid var(--line);
  background: var(--pink-soft) !important;
  color: var(--pink-deep) !important;
}
.page-games .filter-pill {
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--warm-white);
  color: var(--text);
  font-size: 15px !important;
}
.page-games .filter-pill.active {
  border-color: var(--pink-deep);
  background: var(--pink-deep);
  color: #FFFFFF;
}
.page-games .game-icon {
  border-radius: 50% !important;
  background: var(--pink-soft) !important;
  color: var(--pink-deep) !important;
  box-shadow: none;
}

/* AI／社群頁：移除獨立綠色主題，保留角色徽章的辨識功能。 */
.page-ai .live-pill,
.page-ai .community-intro b,
.page-ai .tab-item.active {
  color: var(--pink-deep);
}
.page-ai .live-pill {
  border-color: var(--line);
  background: var(--pink-soft);
}
.page-ai .tab-item {
  min-height: 44px;
  font-size: 15px !important;
}
.page-ai .tab-item.active::after {
  background: var(--pink);
}
.page-ai .reaction-btn {
  min-height: 42px;
  border-color: var(--line);
  background: var(--warm-white);
  color: var(--pink-deep);
}
.page-ai .reply-box input:focus,
.page-ai .field-input:focus,
.page-ai .field-textarea:focus,
.page-ai .field-select:focus {
  outline-color: rgba(251, 108, 138, .42);
  border-color: var(--pink);
}

/* 資源頁：以照片與暖白為主，分類與 CTA 使用品牌粉。 */
.page-resources .category-item {
  min-height: 44px;
  color: var(--sub);
  font-size: 15px !important;
}
.page-resources .category-item.active {
  color: var(--pink-deep);
  border-bottom-color: var(--pink);
}
.page-resources .tool-icon {
  background: var(--pink-soft) !important;
  color: var(--pink-deep) !important;
  box-shadow: none;
}
.page-resources .reco-badge,
.page-resources .content-tag {
  background: var(--pink-soft) !important;
  color: var(--pink-deep) !important;
}
.page-resources .help-cta {
  background: var(--warm-white);
}

/* 來源把原分頁的小字級統一提升；不縮小資訊來換取排版空間。
   這條在來源排在 .filter-pill／.game-btn-secondary／.tab-item／.category-item
   的 15px 之後，特異度打平由順序取勝，所以那些實際都是 18px。 */
.page-games :is(
  .page-eyebrow, .featured-tag, .featured-time, .featured-howto,
  .filter-pill, .game-body h3, .game-tag, .game-time,
  .toast, .game-hdr-btn, .game-cat-badge, .game-hud, .game-hud-val,
  .game-target-tag, .game-dialog-desc, .game-btn-secondary,
  .game-stat-lbl, .game-praise-msg, .fish-penalty-badge,
  .path-penalty-badge, .dobble-penalty-badge, .trail-penalty-badge,
  .word-penalty-badge, .maze-regen-btn, .father-round-tag,
  .father-options-label
),
.page-ai :is(
  .live-pill, .ask-button, .community-intro, .tab-item, .post-tag,
  .post-time, .meta-anon, .meta-category, .meta-resolved, .post-body,
  .reaction-btn, .answers-title, .answers-sort, .answer-name,
  .answer-badge, .answer-time, .answer-body, .reply-box input,
  .reply-send, .field-label, .field-input, .field-textarea,
  .field-select, .anon-toggle-copy, .anon-toggle-sub, .toast
),
.page-resources :is(
  .section-more, .category-item, .reco-badge, .reco-copy p,
  .content-tag, .content-card-body h3, .content-meta,
  .service-card-body h3, .service-card-body p, .tool-card h3,
  .tool-card p, .map-locate h3, .map-locate p, .help-cta-copy p,
  .help-cta-button, .category-placeholder p, .toast
) {
  font-size: 18px !important;
}

.page-games .game-body h3,
.page-ai .post-body,
.page-ai .answer-body,
.page-resources .content-card-body h3,
.page-resources .service-card-body h3,
.page-resources .tool-card h3,
.page-resources .tool-card p,
.page-resources .service-card-body p,
.page-resources .reco-copy p,
.page-resources .help-cta-copy p {
  font-size: 16px !important;
}

@media (max-width: 600px) {
  /* 來源手機版 body 仍是 16px，與桌機同值 */
  body.page-games,
  body.page-ai,
  body.page-resources { font-size: 16px; }
  /* 這條 0-2-0 會贏過檔案最後那段「強制一列兩個」的 .games-grid（0-1-0），
     來源也是這個結果：≤600px 實際渲染為一欄。 */
  .page-games .games-grid,
  .page-resources .content-grid,
  .page-resources .service-grid,
  .page-resources .tools-grid { grid-template-columns: 1fr !important; }
  .page-games .game-card { min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-games, .page-ai, .page-resources),
  :is(.page-games, .page-ai, .page-resources) *,
  :is(.page-games, .page-ai, .page-resources) *::before,
  :is(.page-games, .page-ai, .page-resources) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* 手機版遊戲卡：最終強制一列兩個
   放在 brand-system.css 之後，避免外部樣式覆蓋 */
@media (max-width: 768px){
  .games-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:11px !important;
    width:100% !important;
  }

  .games-grid > .game-card{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    grid-column:auto !important;
    margin:0 !important;
  }

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

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

/* 全螢幕遊戲頂欄／HUD：不套用列表頁 18px 放大，避免手機寬度折行 */
.page-games .game-fullscreen :is(
  .game-hdr-btn,
  .game-cat-badge,
  .game-hud,
  .game-hud-item,
  .game-hud-val
){
  font-size:13px !important;
}
.page-games .game-fullscreen .game-fullscreen-title{
  font-size:16px !important;
}
@media (max-width: 480px){
  .page-games .game-fullscreen :is(
    .game-hdr-btn,
    .game-cat-badge,
    .game-hud,
    .game-hud-item,
    .game-hud-val
  ){
    font-size:12px !important;
  }
  .page-games .game-fullscreen .game-fullscreen-title{
    font-size:14px !important;
  }
  .page-games .game-fullscreen .game-hud-val{
    font-size:13px !important;
  }
}