/* =====================================================
 *  卦象遊戲 · 共享樣式
 *  延續 site.css 設計系統：宣紙 / 墨黑 / 硃砂 / 金 / 玉
 * ===================================================== */

/* ============ 爻線（八卦 / 六十四卦基本圖形） ============ */
.gua-stack { display:flex; flex-direction:column; gap:var(--yao-gap,4px); }
.gua-yao { display:flex; justify-content:space-between; height:var(--yao-h,8px); }
.gua-yao > i { display:block; background:var(--ink); border-radius:2px; }
.gua-yao.yang > i { flex:1; }
.gua-yao.yin > i { flex:0 0 42%; }

/* ============ 銅錢 ============ */
.coin {
  width:52px; height:52px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--kai); font-size:22px; font-weight:700;
  color:var(--gold-deep);
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.75), rgba(255,255,255,0) 42%),
    linear-gradient(155deg, #d9bc76 0%, #b58b3d 48%, #8f6b2c 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,246,220,0.5),
    inset 0 0 0 5px rgba(143,107,44,0.55),
    0 3px 8px rgba(45,40,32,0.3);
  position:relative;
}
.coin::after {
  content:""; position:absolute; inset:14px; border-radius:3px;
  border:2px solid rgba(122,32,38,0.55); box-sizing:border-box;
}
.coin.small { width:38px; height:38px; font-size:16px; }
.coin.small::after { inset:10px; }
.coin.tossing { animation:coinToss .9s cubic-bezier(.3,.9,.4,1) infinite; }
@keyframes coinToss {
  0%   { transform:translateY(0) rotateX(0) scale(1); }
  45%  { transform:translateY(-26px) rotateX(360deg) scale(1.06); }
  100% { transform:translateY(0) rotateX(720deg) scale(1); }
}
.coin.flip-text { color:var(--cinnabar-deep); }

/* ============ 遊戲按鈕 ============ */
.gbtn {
  font-family:var(--kai); font-size:15px; letter-spacing:.18em;
  padding:10px 26px; border-radius:4px; cursor:pointer;
  border:1px solid var(--cinnabar); color:var(--cinnabar); background:transparent;
  transition:all .15s ease;
}
.gbtn:hover { background:rgba(168,50,58,0.08); }
.gbtn.primary {
  background:linear-gradient(160deg, var(--cinnabar), var(--cinnabar-deep));
  color:#f6faf5; box-shadow:0 3px 10px rgba(122,32,38,0.3);
}
.gbtn.primary:hover { filter:brightness(1.08); }
.gbtn.ghost { border-color:var(--gold); color:var(--gold-deep); }
.gbtn.ghost:hover { background:rgba(181,139,61,0.1); }
.gbtn:disabled { opacity:.45; cursor:not-allowed; }
.gbtn.small { font-size:13px; padding:6px 14px; letter-spacing:.1em; }

/* ============ 彈窗 ============ */
.gmodal-mask {
  position:fixed; inset:0; z-index:1500;
  background:rgba(29,29,31,0.45); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:gmFade .18s ease;
}
@keyframes gmFade { from { opacity:0; } to { opacity:1; } }
.gmodal {
  background:var(--paper-card);
  border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(181,139,61,0.2);
  max-width:520px; width:100%; max-height:86vh; overflow-y:auto;
  padding:26px 28px; position:relative;
  animation:gmUp .22s cubic-bezier(.22,.9,.36,1);
}
@keyframes gmUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.gmodal h3 {
  font-family:var(--kai); font-weight:500; font-size:20px; letter-spacing:.14em;
  margin:0 0 14px; color:var(--ink);
}
.gmodal h3::after {
  content:""; display:block; width:48px; height:2px; margin-top:8px;
  background:linear-gradient(90deg, var(--gold), rgba(181,139,61,0));
}
.gmodal .gm-close {
  position:absolute; top:12px; right:14px; width:32px; height:32px;
  border:none; background:transparent; font-size:18px; color:var(--ink-soft);
  cursor:pointer; border-radius:4px;
}
.gmodal .gm-close:hover { background:rgba(168,50,58,0.08); color:var(--cinnabar); }

/* ============ 輕提示 ============ */
.gtoast {
  position:fixed; left:50%; bottom:36px; transform:translateX(-50%);
  z-index:1600; background:var(--ink); color:var(--paper);
  font-size:14px; letter-spacing:.08em; padding:10px 22px; border-radius:4px;
  box-shadow:var(--shadow-lg); animation:gtUp .25s ease; pointer-events:none;
  max-width:86vw; text-align:center;
}
@keyframes gtUp { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }

/* ============ 通用佈局 ============ */
.game-wrap { max-width:960px; margin:0 auto; }

/* 輸入框（宣紙卡片內） */
.ginput, .gtextarea {
  width:100%; font-family:var(--serif); font-size:15px; color:var(--ink);
  background:rgba(255,250,235,0.75);
  border:1px solid var(--line); border-radius:4px;
  padding:10px 12px; line-height:1.6;
}
.ginput:focus, .gtextarea:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(181,139,61,0.14);
}
.ginput::placeholder, .gtextarea::placeholder { color:rgba(74,74,74,0.5); }
.game-panel { margin-top:22px; }
.game-statusbar {
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  padding:10px 16px; margin-top:18px;
  background:var(--paper-card); border:1px solid var(--line); border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(181,139,61,0.12);
  font-size:14px;
}
.game-statusbar .sb-item { display:flex; align-items:baseline; gap:6px; }
.game-statusbar .sb-item[hidden] { display:none; }
.game-statusbar .sb-label { font-size:12px; color:var(--ink-soft); letter-spacing:.15em; }
.game-statusbar .sb-val { font-family:var(--kai); font-size:18px; color:var(--cinnabar-deep); font-weight:700; }
.game-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; align-items:center; }
.game-note { font-size:12.5px; color:var(--ink-soft); margin-top:14px; line-height:1.8; }

@media (max-width:640px) {
  .gmodal { padding:20px 18px; }
  .coin { width:44px; height:44px; font-size:18px; }
}

/* ============ 卦象配對（match） ============ */
.board-frame {
  display:inline-block; padding:10px; border-radius:8px;
  background:var(--paper-deep);
  border:2px solid var(--cinnabar);
  box-shadow:inset 0 0 0 1px rgba(181,139,61,0.3), var(--shadow);
}
.board {
  display:grid; grid-template-columns:repeat(4, var(--cell,86px)); gap:8px;
}
.mt-cell {
  width:var(--cell,86px); height:var(--cell,86px);
  background:var(--paper-card);
  border:1px solid var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
}
.mt-cell:hover { border-color:var(--gold); }
.mt-cell.sel {
  border-color:var(--cinnabar);
  box-shadow:0 0 0 3px rgba(168,50,58,0.25);
  transform:scale(1.05);
}
.mt-cell.hinted {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(181,139,61,0.4);
  animation:hintPulse 0.9s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { transform:scale(1); box-shadow:0 0 0 2px rgba(181,139,61,0.25); }
  50% { transform:scale(1.06); box-shadow:0 0 0 5px rgba(181,139,61,0.45); }
}
.mt-yao { width:52%; display:flex; justify-content:space-between; }
.mt-yao i { display:block; height:14px; background:var(--ink); border-radius:3px; }
.mt-yao.mt-yang i { flex:1; }
.mt-yao.mt-yin i { flex:0 0 42%; }
.mt-gua { display:flex; flex-direction:column; align-items:center; gap:6px; }
.mt-gua span { font-family:var(--kai); font-size:15px; color:var(--cinnabar-deep); }
.mt-gua .gua-yao i { background:var(--cinnabar-deep); }
.mt-gua.mt-pure span { color:var(--gold-deep); font-size:12.5px; }
.mt-gua.mt-pure .gua-yao i { background:var(--gold-deep); }

/* 圖鑑格 */
.cdx {
  border:1px dashed var(--line); border-radius:6px; padding:10px 4px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-family:var(--kai); font-size:14px; color:rgba(74,74,74,0.45);
  background:rgba(255,250,235,0.5);
}
.cdx.got { border:1px solid var(--gold); color:var(--ink); background:var(--paper-card); }
.cdx-q { font-size:20px; color:rgba(74,74,74,0.35); }
@media (max-width:520px) {
  .board { --cell:72px; }
  .mt-cell { width:72px; height:72px; }
}

/* ============ 卦盤人生（guapan） ============ */
.gua-ring-wrap { position:relative; width:100%; max-width:430px; aspect-ratio:1; margin:0 auto; }
.gua-ring { position:absolute; inset:0; }
.gcell {
  position:absolute; left:50%; top:50%;
  width:62px; height:62px; margin:-31px;
  background:var(--paper-card);
  border:1px solid var(--line); border-radius:8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:var(--kai); font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  transform:
    rotate(var(--ang)) translateY(calc(-1 * var(--ring-r, 172px))) rotate(calc(-1 * var(--ang)));
}
.gcell .gua-yao i { background:var(--cinnabar-deep); }
.gcell b { font-weight:500; }
.gcell.g-fortune { color:var(--gold-deep); border-color:rgba(181,139,61,0.5); }
.gcell.g-trade { color:var(--jade); border-color:rgba(79,122,82,0.5); }
.gcell.g-empty { color:var(--ink-soft); }
.gcell .lv { position:absolute; bottom:2px; font-size:8px; color:var(--gold-deep); font-style:normal; letter-spacing:1px; }
.gcell.own-p { border-color:var(--cinnabar); background:rgba(168,50,58,0.14); box-shadow:0 0 0 2px rgba(168,50,58,0.28); }
.gcell.own-n0 { border-color:var(--jade); background:rgba(79,122,82,0.14); box-shadow:0 0 0 2px rgba(79,122,82,0.28); }
.gcell.own-n1 { border-color:var(--gold); background:rgba(181,139,61,0.16); box-shadow:0 0 0 2px rgba(181,139,61,0.32); }
.pawn {
  position:absolute; top:-9px; right:-6px;
  font-size:9px; padding:1px 4px; border-radius:3px; font-style:normal;
  font-family:var(--serif); box-shadow:0 1px 3px rgba(45,40,32,0.35);
}
.pawn.me { background:var(--cinnabar); color:#f6faf5; }
.pawn.npc { background:var(--jade); color:#f6faf5; }
.pawn.npc.pn1 { background:var(--gold-deep); color:#f6faf5; }
.gfloat {
  position:absolute; z-index:30; transform:translate(-50%,-50%);
  font-family:var(--kai); font-size:15px; font-weight:700; white-space:nowrap;
  padding:2px 8px; border-radius:4px; pointer-events:none;
  background:rgba(251,246,230,0.95); box-shadow:0 2px 8px rgba(45,40,32,0.25);
  animation:gfloatUp 1.4s ease-out forwards;
}
.gfloat.pos { color:var(--jade); }
.gfloat.neg { color:var(--cinnabar); }
@keyframes gfloatUp {
  0% { opacity:0; margin-top:0; }
  15% { opacity:1; }
  100% { opacity:0; margin-top:-34px; }
}
.gweather { margin-left:auto; }
.gweather.good { color:var(--jade); }
.gweather.bad { color:var(--cinnabar); }
.gweather:not([hidden]) {
  font-size:12.5px; letter-spacing:.08em;
  border:1px solid currentColor; border-radius:3px; padding:2px 10px;
}
.gnpc-card {
  display:flex; gap:12px; align-items:baseline;
  font-size:12.5px; color:var(--ink-soft); padding:6px 0;
  border-bottom:1px dashed var(--line-soft);
}
.gnpc-card:last-child { border-bottom:none; }
.gnpc-card b { font-family:var(--kai); font-size:14px; color:var(--ink); }
.goal-row {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--ink-soft); margin-bottom:6px;
}
.goal-row .goal-track {
  flex:1; height:8px; border-radius:4px; overflow:hidden;
  background:rgba(29,29,31,0.08); display:inline-block;
}
.goal-row .goal-track i { display:block; height:100%; border-radius:4px; transition:width .4s ease; }
.goal-row .goal-pct { width:34px; text-align:right; font-family:var(--kai); color:var(--ink); }
.gua-ring-center {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:92px; height:92px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fdf8ea, var(--paper-deep));
  border:2px solid var(--gold);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 0 0 5px rgba(181,139,61,0.15), var(--shadow);
}
@media (max-width:480px) {
  .gcell { width:52px; height:52px; margin:-26px; }
  .gua-ring-wrap { --ring-r:132px; }
}

/* ============ 陰陽五行昆特（gwent） ============ */
.gw-row {
  display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:center;
  padding:7px 8px; border-radius:6px;
}
.gw-row + .gw-row { border-top:1px dashed var(--line-soft); }
.gw-row-label { text-align:right; font-size:12px; color:var(--ink-soft); line-height:1.5; }
.gw-row-label b { display:block; font-family:var(--kai); font-size:21px; color:var(--ink); }
.gw-row-label i { display:block; font-style:normal; font-size:10.5px; color:var(--gold-deep); }
.gw-slots { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; min-height:78px; }
.gw-slot-empty {
  border:1px dashed var(--line-soft); border-radius:6px; min-height:78px;
}
.gw-card {
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 82% 8%, color-mix(in srgb, var(--el) 20%, transparent), transparent 55%),
    linear-gradient(165deg, #fdf8ea, #f6ecd3);
  border:1px solid var(--line); border-left:3px solid var(--el, var(--gold));
  border-radius:6px; padding:5px 7px; min-height:78px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  user-select:none;
}
/* 五行圖騰水印 */
.gw-mark {
  position:absolute; right:-6px; bottom:-8px; width:58px; height:58px;
  opacity:.16; pointer-events:none;
}
.gw-mark .totem { width:100%; height:100%; }
/* 稀有度：卡片級 */
.gw-card.gw-elite { box-shadow:inset 0 0 0 1px rgba(181,139,61,0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
.gw-card.gw-legend {
  background:
    radial-gradient(ellipse at 82% 8%, color-mix(in srgb, var(--el) 22%, transparent), transparent 55%),
    linear-gradient(160deg, #fbf3dd, #f3e4c0 60%, #eedbb2);
  box-shadow:
    inset 0 0 0 1px rgba(168,50,58,0.4),
    inset 0 0 18px rgba(181,139,61,0.18),
    0 2px 6px rgba(122,32,38,0.18);
}
.gw-card .gw-top {
  display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--ink-soft);
  position:relative; z-index:1;
}
.gw-card .gw-gua { font-size:14px; color:var(--cinnabar-deep); }
.gw-card .gw-yy {
  font-size:9px; padding:0 4px; border-radius:2px; letter-spacing:.05em;
  border:1px solid var(--line);
}
.gw-card .gw-yy.yy-yang { background:#fdf8ea; color:var(--ink); }
.gw-card .gw-yy.yy-yin { background:#2a2a2c; color:#f0e8d0; }
.gw-card .gw-pw {
  font-family:var(--kai); font-weight:700; font-size:22px; line-height:1.1;
  color:var(--cinnabar-deep); position:relative; z-index:1;
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
}
.gw-card .gw-name {
  font-family:var(--kai); font-size:13px; letter-spacing:.05em;
  display:flex; align-items:center; gap:5px;
  position:relative; z-index:1;
}
.gw-card .gw-rar {
  font-size:8.5px; padding:0 4px; border-radius:2px; letter-spacing:.1em;
  background:rgba(29,29,31,0.1); color:var(--ink-soft); font-family:var(--serif);
}
.gw-card .gw-rar.rar-精英 { background:rgba(181,139,61,0.2); color:var(--gold-deep); }
.gw-card .gw-rar.rar-傳奇 { background:var(--cinnabar); color:#f6faf5; }
.gw-card .gw-el {
  display:inline-block; font-size:10px; padding:0 5px; border-radius:3px;
  background:var(--el); color:#f6faf5; margin-top:2px;
  position:relative; z-index:1;
}
.gw-card .gw-ab {
  font-size:10.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5;
  position:relative; z-index:1;
}
.gw-card.handable { cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.gw-card.handable:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.gw-card.picked { outline:2px solid var(--cinnabar); transform:translateY(-6px); }
@media (max-width:560px) {
  .gw-row { grid-template-columns:64px 1fr; }
  .gw-row-label b { font-size:17px; }
  .gw-slots { min-height:66px; }
  .gw-card { min-height:66px; padding:4px 5px; }
  .gw-card .gw-pw { font-size:18px; }
}

/* 關卡選擇 */
.w-ch {
  position:relative;
  border:1px solid var(--line); border-radius:6px; padding:16px 14px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  background:var(--paper-card); cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
  font-size:13px; color:var(--ink-soft);
}
.w-ch:hover { border-color:var(--gold); transform:translateY(-2px); }
.w-ch b { font-family:var(--kai); font-size:16px; color:var(--ink); letter-spacing:.06em; }
.w-ch .gua-stack { margin-bottom:2px; }
.w-ch.locked { opacity:.5; cursor:not-allowed; }
.w-ch.won { border-color:var(--jade); }
.w-ch .won-mark {
  position:absolute; top:10px; right:12px; font-style:normal;
  font-size:11px; color:var(--jade);
}
.w-lock { font-size:20px; }

/* ============ 玩法說明彈窗（match 規則） ============ */
.rule-body { font-size:14px; line-height:1.95; color:var(--ink); }
.rule-body p { margin:10px 0 4px; }
.rule-body b { color:var(--cinnabar-deep); }
.rule-demo {
  display:flex; align-items:center; gap:14px;
  margin:10px 0 4px; padding:12px 16px;
  background:rgba(29,29,31,0.04); border:1px dashed var(--line); border-radius:6px;
}
.rule-demo-col { display:flex; flex-direction:column; gap:4px; }
.rule-cell {
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-card); border:1px solid var(--line); border-radius:8px;
}
.rule-cell.result { border-color:var(--cinnabar); box-shadow:0 0 0 2px rgba(168,50,58,0.18); }
.rule-cell .mt-yao { width:60%; }
.rule-cell .mt-yao i { height:10px; }
.rule-arrow { font-family:var(--kai); font-size:13px; color:var(--gold-deep); letter-spacing:.08em; }
.rule-list { margin:8px 0 4px; padding-left:20px; line-height:1.95; }
.rule-list li { margin-bottom:2px; }
.rule-tip {
  margin-top:12px; padding:10px 14px;
  background:rgba(181,139,61,0.09); border-left:3px solid var(--gold);
  font-size:13px; color:var(--ink-soft); line-height:1.9;
}

/* ============ 昆特玩法指引 ============ */
.wrule-table { margin:6px 0 10px; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.wrule-tr {
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 12px; font-size:13px;
  background:var(--paper-card);
}
.wrule-tr + .wrule-tr { border-top:1px solid var(--line-soft); }
.wrule-tr span { color:var(--ink-soft); }
.wrule-tr b { color:var(--cinnabar-deep); font-weight:500; font-family:var(--kai); }
.wx-wrap {
  display:flex; gap:14px; align-items:center; margin:8px 0 12px;
  padding:10px 12px; border:1px dashed var(--line); border-radius:6px;
  background:rgba(29,29,31,0.03);
}
.wx-svg { width:196px; flex-shrink:0; }
.wx-note { font-size:12.5px; color:var(--ink-soft); line-height:2; }

/* ============ 遊戲大廳入口卡 ============ */
/* 大廳網格：各行等高（grid-auto-rows:1fr）→ 全部卡片同尺寸；卡片自身 flex 列佈局使內部元素對齊 */
.game-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows:1fr;
  gap:16px;
  margin-top:22px;
  align-items:stretch;
}
/* 覆蓋 site.css 的 .card + .card 16px 上邊距（網格內由 gap 統一間距，否則第 2 張起錯位） */
.game-grid > .card.game-entry { margin-top:0; height:100%; }

a.game-entry { display:flex; flex-direction:column; height:100%; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease; }
a.game-entry:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); color:var(--ink); }
/* 頂部行：固定高度，圖標佔固定方框（自繪 SVG 線描，統一尺寸不再錯位） */
.game-entry .ge-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; min-height:38px; }
/* 圖標：印章盤底座 + 線描圖形（--ge-accent 逐卡指定；stroke 走 currentColor 隨主題） */
.game-entry .ge-icon {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color:var(--ge-accent, var(--cinnabar-deep));
  background:
    radial-gradient(circle at 36% 28%, rgba(255,250,235,0.95), rgba(181,139,61,0.10) 70%, rgba(181,139,61,0.16));
  border:1px solid rgba(181,139,61,0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 0 12px rgba(181,139,61,0.10),
    0 1px 3px rgba(45,40,32,0.08);
}
.game-entry .ge-icon svg { width:22px; height:22px; display:block; }
.game-entry .ge-tag {
  flex:0 0 auto; font-size:11px; letter-spacing:.15em; color:var(--gold-deep);
  border:1px solid rgba(181,139,61,0.45); border-radius:3px; padding:2px 8px;
  white-space:nowrap;
}
/* 標題：單行（內容均已確認可容於最小欄寬）；下限高度統一，令所有卡片的描述起點一致 */
.game-entry .ge-title {
  font-family:var(--kai); font-weight:500; font-size:21px; letter-spacing:.12em;
  margin:0 0 8px; min-height:1.5em; line-height:1.5;
}
/* 描述佔滿剩餘高度（將 CTA 推到底部），行數不同不影響對齊 */
.game-entry .ge-desc { flex:1 1 auto; font-size:13.5px; color:var(--ink-soft); line-height:1.85; margin:0 0 12px; }
/* CTA 沉底，各卡片「進入…」在同一水平線 */
.game-entry .ge-go { flex:0 0 auto; margin-top:auto; font-family:var(--kai); font-size:13px; color:var(--cinnabar); letter-spacing:.1em; }

/* ============ 卦象合成 2048 ============ */
.t2048-frame {
  position:relative; max-width:430px; margin:22px auto 0;
  padding:12px; border-radius:10px;
  background:var(--paper-deep);
  border:2px solid var(--cinnabar);
  box-shadow:inset 0 0 0 1px rgba(181,139,61,0.3), var(--shadow);
}
.t2048-board {
  display:grid; grid-template-columns:repeat(4,1fr); gap:9px;
  aspect-ratio:1;
}
.t2048-cell {
  position:relative; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,250,235,0.4);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  animation:t2048Spawn .16s ease;
}
.t2048-cell.pop { animation:t2048Pop .28s cubic-bezier(.3,1.4,.5,1); }
@keyframes t2048Spawn { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes t2048Pop {
  0% { transform:scale(1); }
  45% { transform:scale(1.22); box-shadow:0 0 0 4px rgba(181,139,61,0.35); }
  100% { transform:scale(1); }
}
/* 爻格 */
.t2048-cell.lv1 { background:var(--paper-card); border-color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); }
.g2048-yao { display:flex; gap:7px; width:62%; }
.g2048-yao i { display:block; flex:1; height:12px; background:var(--ink); border-radius:3px; }
.g2048-yao.yin i:first-child { flex:0 0 40%; }
/* 單卦格（硃砂） */
.t2048-cell.lv2 { background:rgba(168,50,58,0.1); border-color:var(--cinnabar); }
.t2048-trig { font-family:var(--kai); font-size:24px; color:var(--cinnabar-deep); display:flex; align-items:baseline; gap:3px; }
.t2048-trig i { font-style:normal; font-size:12px; color:var(--cinnabar); opacity:.75; }
/* 八純卦格（金） */
.t2048-cell.lv3 {
  background:linear-gradient(155deg, rgba(217,188,118,0.28), rgba(181,139,61,0.4));
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(255,246,220,0.35), var(--shadow);
}
.t2048-pure-name { font-family:var(--kai); font-size:16px; letter-spacing:.08em; color:var(--gold-deep); font-weight:700; }
/* 太極 */
.t2048-cell.lv4 {
  background:radial-gradient(circle at 50% 42%, #fdf8ea, #efe6cf);
  border:2px solid var(--ink);
  box-shadow:0 0 18px rgba(29,29,31,0.28);
}
.t2048-taiji { font-size:40px; line-height:1; filter:drop-shadow(0 2px 4px rgba(45,40,32,0.35)); }
/* 方位表疊層（data-dir 由 JS 寫入格標） */
.t2048-cell::after {
  content:attr(data-dir);
  position:absolute; left:4px; bottom:2px;
  font-family:var(--serif); font-size:9.5px; color:var(--gold-deep);
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.t2048-frame.show-dir .t2048-cell::after { opacity:.9; }
.t2048-hint { text-align:center; font-size:12px; color:var(--ink-soft); margin:12px 0 2px; letter-spacing:.06em; }
/* 方位表幫助 */
.t2048-dir-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:8px; }
.t2048-dir-grid i {
  font-style:normal; text-align:center; padding:7px 0; border-radius:4px;
  border:1px solid var(--line); background:var(--paper-card);
  font-family:var(--kai); color:var(--cinnabar-deep); font-size:14px;
}
/* 圖鑑 */
.t2048-cdx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:52vh; overflow-y:auto; padding-right:4px; }
.t2048-cdx-glyph { font-family:var(--kai); font-size:20px; line-height:1.4; }
/* 卦辭引文 */
.rule-quote { color:var(--cinnabar-deep); font-family:var(--kai); letter-spacing:.04em; margin:6px 0 2px; }
.rule-quote-sub { font-size:12.5px; color:var(--ink-soft); line-height:1.85; }
@media (max-width:480px) {
  .t2048-cell .t2048-pure-name { font-size:13px; }
  .t2048-taiji { font-size:32px; }
}

/* ============ 今日之卦（today，起卦動作） ============ */
.qd-wrap { max-width:560px; }
.qd-stage {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:28px 20px 22px; margin-top:20px;
  background:linear-gradient(165deg, rgba(var(--paper-rgb),0.85), rgba(var(--paper-rgb),0.6));
  border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(181,139,61,0.16);
}
/* 起卦台：三枚銅錢 + 六爻位 */
.qd-cast { position:relative; width:230px; height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.qd-coins { display:flex; gap:16px; }
.qd-coin {
  width:44px; height:44px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #efd98c, #c79a3e 58%, #8f6b2c);
  border:2px solid var(--gold-deep);
  box-shadow:0 3px 8px rgba(45,40,32,0.28), inset 0 2px 3px rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(0) rotateY(0);
}
.qd-coin i { width:14px; height:14px; border:1.5px solid rgba(122,32,38,0.6); border-radius:2px; display:block; }
/* 六搖時銅錢翻騰（三枚錯開相位） */
.qd-cast.casting .qd-coin { animation:qdCoinToss .62s cubic-bezier(.3,.9,.4,1) infinite; }
.qd-cast.casting .qd-coin:nth-child(2) { animation-delay:.14s; }
.qd-cast.casting .qd-coin:nth-child(3) { animation-delay:.28s; }
@keyframes qdCoinToss {
  0%   { transform:translateY(0) rotateY(0) scale(1); }
  40%  { transform:translateY(-30px) rotateY(540deg) scale(1.06); }
  100% { transform:translateY(0) rotateY(1080deg) scale(1); }
}
.qd-cast.settled .qd-coin { animation:qdBounce .36s cubic-bezier(.3,1.4,.5,1); }
.qd-cast.settled .qd-coin:nth-child(2) { animation-delay:.06s; }
.qd-cast.settled .qd-coin:nth-child(3) { animation-delay:.12s; }
@keyframes qdBounce { 0%{transform:translateY(-10px);} 60%{transform:translateY(2px);} 100%{transform:translateY(0);} }
/* 六爻位（自上而下＝上爻→初爻；JS 依動畫延遲自下而上顯出） */
.qd-yao { display:flex; flex-direction:column; gap:8px; align-items:center; min-height:24px; }
.qd-yao-row {
  position:relative; display:flex; justify-content:space-between; gap:12px; width:118px; height:12px;
  opacity:0; transform:translateY(8px); animation:qdYaoIn .34s ease forwards;
}
@keyframes qdYaoIn { to { opacity:1; transform:translateY(0); } }
.qd-yao-row i { display:block; background:var(--ink); border-radius:3px; height:12px; }
.qd-yao-row.yang i { flex:1; }
.qd-yao-row.yin i:first-child { flex:0 0 42%; }
.qd-yao-row.yin i:last-child { flex:0 0 42%; }
.qd-yao-row.moving i { background:var(--cinnabar); box-shadow:0 0 0 2px rgba(168,50,58,0.18); }
.qd-yao-mk {
  position:absolute; right:-30px; top:-1px; font-family:var(--serif); font-size:11px;
  color:var(--cinnabar); font-weight:400;
}
.qd-actions { display:flex; gap:12px; }
.qd-draw {
  font-size:16px; letter-spacing:.3em; padding:12px 44px;
  box-shadow:0 4px 14px rgba(122,32,38,0.28);
}
.qd-hint { font-size:12.5px; color:var(--ink-soft); letter-spacing:.06em; text-align:center; margin:0; }

.qd-result { margin-top:20px; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.qd-result.in { opacity:1; transform:none; }
.qd-result[hidden] { display:none; }
.qd-slip {
  position:relative; max-width:360px; margin:0 auto; padding:24px 28px 22px;
  background:linear-gradient(170deg, #fdf8ea, #f1e3c4);
  border:1px solid rgba(181,139,61,0.55); border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(255,246,220,0.5), 0 10px 26px rgba(45,40,32,0.16);
  text-align:center;
}
.qd-slip::before {
  content:""; position:absolute; inset:7px; border:1px dashed rgba(168,50,58,0.35); border-radius:3px; pointer-events:none;
}
.qd-slip-cap { font-family:var(--kai); font-size:13px; letter-spacing:.42em; color:var(--cinnabar); padding-left:.42em; margin-bottom:10px; }
.qd-slip-sym { font-size:52px; line-height:1; color:var(--cinnabar-deep); }
.qd-slip-hex { font-family:var(--kai); font-size:34px; letter-spacing:.1em; color:var(--ink); margin:6px 0 10px; }
.qd-slip-guaci { font-size:13.5px; line-height:1.9; color:var(--ink); padding:0 4px; }
.qd-slip-meta { font-size:11.5px; color:var(--ink-soft); letter-spacing:.08em; margin-top:12px; padding-top:10px; border-top:1px solid rgba(181,139,61,0.3); }
.qd-result-actions { display:flex; gap:12px; justify-content:center; margin-top:16px; }
@media (max-width:480px) {
  .qd-cast { width:200px; height:180px; }
  .qd-coin { width:38px; height:38px; }
  .qd-yao-row { width:100px; }
}

/* 六事分類（複用 app 端結構，樣式歸此） */
.tm-hex { font-family:var(--kai); font-size:26px; letter-spacing:.1em; color:var(--ink); }
.tm-sub { font-size:12.5px; color:var(--ink-soft); margin-top:4px; letter-spacing:.06em; }
.tm-tags { margin:10px 0 2px; display:flex; gap:8px; flex-wrap:wrap; }
.tm-tag {
  font-size:11.5px; letter-spacing:.1em; color:var(--gold-deep);
  border:1px solid rgba(181,139,61,0.45); border-radius:3px; padding:2px 9px;
}
.tm-cat { padding:13px 0; border-top:1px dashed var(--line); }
.tm-cat:first-of-type { border-top:none; }
.tm-cat-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tm-cat-name { font-family:var(--kai); font-size:17px; letter-spacing:.14em; color:var(--cinnabar-deep); }
.tm-cat-st { font-size:11.5px; color:var(--ink-soft); letter-spacing:.08em; }
.tm-meter { height:6px; background:rgba(29,29,31,0.09); border-radius:3px; overflow:hidden; margin:8px 0 7px; }
.tm-meter i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--jade), var(--gold)); transition:width .5s ease; }
.tm-cat-text { font-size:13.5px; line-height:1.9; color:var(--ink); margin:0; }
.tm-foot { margin-top:16px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--ink-soft); line-height:1.7; }
@media (max-width:480px) {
  .qd-slip-hex { font-size:28px; }
  .qd-slip-sym { font-size:44px; }
}