/* 玄鑑 — 視覺基調：深墨底 × 金線，避開一般命理站的紫色廉價感 */
:root{
  --bg:#0e1014; --bg2:#161a21; --panel:#1b2029; --line:#2a3140;
  --ink:#e8e6e1; --ink2:#a5adba; --ink3:#6f7889;
  --gold:#c8a45c; --gold2:#e5c987; --accent:#7ea6c9;
  --wood:#6fae7a; --fire:#d9705f; --earth:#c6a15b; --metal:#b9c2cc; --water:#6f95c9;
  --radius:14px; --maxw:960px;
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC",-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.75;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse at 50% -10%,rgba(200,164,92,.10),transparent 60%);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* 頁首 */
header{text-align:center;padding:64px 20px 36px}
/* 標題本身就是站名，放到最大；字距內縮一個字元寬，
   避免最後一個字右邊多出一塊空白導致視覺不置中。 */
header h1{font-family:var(--serif);font-weight:900;
  font-size:clamp(40px,10vw,76px);
  letter-spacing:.2em;text-indent:.2em;margin:0;line-height:1.15;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
header .rule{width:88px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:26px auto 0}

/* 單頁式版面：今日指引／牌陣占卜一路往下捲，區塊之間用一條
   細金線隔開，不再需要分頁切換那套樣式。 */
.section-rule{height:1px;margin:30px 0;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

.panel{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:20px}
.panel h2{font-family:var(--serif);font-size:19px;letter-spacing:.16em;margin:0 0 4px;color:var(--gold2)}
.hint{color:var(--ink3);font-size:13px;margin:0 0 18px}

/* 表單 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
label{display:block;font-size:12px;color:var(--ink3);letter-spacing:.1em;margin-bottom:6px}
input,select{width:100%;background:#12161d;border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:11px 12px;font-size:15px;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,164,92,.12)}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{flex:1;background:#12161d;border:0;color:var(--ink2);padding:11px 4px;cursor:pointer;font-size:14px;font-family:inherit}
.seg button[aria-pressed="true"]{background:var(--gold);color:#191308;font-weight:600}
.btn{display:block;width:100%;margin-top:22px;padding:15px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#191308;
  font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.3em;text-indent:.3em}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink2);font-size:14px;letter-spacing:.15em}

/* ══ 全部翻開之後：複製結果／加官方 LINE ═══════════════ */
.result-actions{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.result-actions .btn{margin-top:0;text-indent:0;font-family:var(--sans);
  font-size:15px;font-weight:600;letter-spacing:.05em}
.result-actions .line-btn{background:#06c755;color:#fff;text-align:center;
  text-decoration:none;box-sizing:border-box}
.result-actions .line-btn:hover{filter:brightness(1.08)}

.row{display:flex;gap:10px}
.row>*{flex:1}
.chk{display:flex;align-items:center;gap:8px;color:var(--ink2);font-size:14px;margin-top:8px}
.chk input{width:auto}


/* ══ 牌面（SVG 即時繪製） ═════════════════════════════ */
.cardart{display:block;width:100%;height:auto;border-radius:9px}
.cardart .bg{fill:#12161d}
.cardart .ln{stroke:var(--gold);fill:none}
.cardart .fl{fill:var(--gold)}
.cardart .nm{fill:var(--ink);font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:.08em}
.cardart .attr{fill:var(--ink3);font-family:var(--sans);font-size:13px;letter-spacing:.12em}
.cardart .roman{fill:var(--gold2);font-family:var(--serif);font-size:30px;letter-spacing:.14em}
.cardart .astro{fill:var(--gold2);font-size:132px;font-variant-emoji:text;
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",var(--serif),sans-serif}
.cardart .rk{fill:var(--gold2);font-family:var(--serif);font-size:26px;font-weight:600}
.cardart .court{fill:var(--gold2);font-family:var(--serif);font-size:44px;letter-spacing:.1em}

/* 大牌用金；小牌依元素換色，讓四個花色一眼可辨 */
.ca-major .bg{fill:#14161f}
.sw-fire  .ln,.sw-fire  .fl{stroke:var(--fire);fill:var(--fire)}
.sw-fire  .ln{fill:none}
.sw-water .ln,.sw-water .fl{stroke:var(--water);fill:var(--water)}
.sw-water .ln{fill:none}
.sw-air   .ln,.sw-air   .fl{stroke:var(--metal);fill:var(--metal)}
.sw-air   .ln{fill:none}
.sw-earth .ln,.sw-earth .fl{stroke:var(--earth);fill:var(--earth)}
.sw-earth .ln{fill:none}
.sw-fire  .rk,.sw-fire  .court{fill:var(--fire)}
.sw-water .rk,.sw-water .court{fill:var(--water)}
.sw-air   .rk,.sw-air   .court{fill:var(--metal)}
.sw-earth .rk,.sw-earth .court{fill:var(--earth)}
.ca-back .bg{fill:#151922}
/* 牌背上的開牌順序號碼——牌陣有讀法順序時，蓋著也看得出該先翻哪張 */
.ca-back .back-num{fill:var(--gold);font-family:var(--serif);font-size:130px;font-weight:700}
.ca-photo{border:1px solid var(--line)}

/* ══ 抽牌區：翻牌動畫 ═════════════════════════════════ */
.cards{display:grid;gap:16px;justify-content:center;margin:20px 0 6px;
  grid-template-columns:repeat(auto-fit,minmax(132px,150px))}
.cards.one{grid-template-columns:minmax(150px,180px)}

.card{position:relative;margin:0}
.card .slot{font-size:10px;color:var(--gold);letter-spacing:.14em;text-align:center;
  min-height:26px;line-height:1.4;padding:0 2px}
.card .flip{position:relative;aspect-ratio:3/5;perspective:1100px}
.card .fc{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .62s cubic-bezier(.4,.05,.2,1);transition-delay:var(--d,0ms);
  border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.card .back{transform:rotateY(0deg)}
.card .front{transform:rotateY(180deg)}
.card.revealed .back{transform:rotateY(-180deg)}
.card.revealed .front{transform:rotateY(0deg)}
/* 逆位：牌翻開後整張倒轉 */
.card.is-rev .front .cardart{transform:rotate(180deg)}
.card figcaption{text-align:center;margin-top:10px;opacity:0;
  transition:opacity .35s ease;transition-delay:calc(var(--d,0ms) + .45s)}
.card.revealed figcaption{opacity:1}
.card figcaption b{display:block;font-family:var(--serif);font-size:15px;letter-spacing:.06em}
.card .rv{display:inline-block;font-size:10px;color:var(--fire);border:1px solid var(--fire);
  border-radius:99px;padding:1px 7px;margin-top:5px}
.card .rv.up{color:var(--wood);border-color:var(--wood)}
.card .flip:hover .fc{box-shadow:0 10px 26px rgba(0,0,0,.6)}

/* 牌蓋著的時候整張都能點，滑鼠變成手指提示可以翻 */
.card:not(.revealed){cursor:pointer}
.card:not(.revealed) .flip:hover .back{transform:translateY(-3px) rotateY(0deg)}
.card:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:9px}
.card.revealed{cursor:default}

/* 點錯順序：搖頭提示，不用等看 toast 文字就知道「這張還不能翻」 */
.card.shake .flip{animation:card-shake .38s ease}
@keyframes card-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}
}

@media(prefers-reduced-motion:reduce){
  .card .fc,.card figcaption,.card:not(.revealed) .flip:hover .back,.card.shake .flip{
    animation:none;transition:none}
}

/* ══ 解讀 ═════════════════════════════════════════════ */
.read{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.read .item{margin-bottom:18px}
.read .item b{font-family:var(--serif);color:var(--gold2);letter-spacing:.06em;font-size:16px}
.read .item .s{color:var(--gold);font-size:11px;letter-spacing:.12em;margin-right:8px}
.read .item .en{color:var(--ink3);font-size:12px}
.read .item p{margin:6px 0 0;color:var(--ink2);font-size:14px}
.read .item p.lbl{color:var(--ink3);font-size:12px;margin-top:3px}

/* 解讀跟著對應的牌一起鎖住：牌沒翻開之前，只看得到位置名稱和一句提示 */
.read .item.locked .item-body{display:none}
.read .item:not(.locked) .item-hint{display:none}
.read .item .item-hint{margin:6px 0 0;color:var(--ink3);font-size:13px;font-style:italic}

/* 大阿卡納比例摘要也是劇透，鎖到全部翻開才顯示，跟上面同一套邏輯 */
.ratio-hint.locked .real-text{display:none}
.ratio-hint:not(.locked) .locked-text{display:none}
.ratio-hint .locked-text{font-style:italic}
.hint.mid{text-align:center;margin:14px 0 0}

/* ══ 牌義速查（deckgrid／dcard／note-box：只有 deck-reference.html
   這個獨立的個人查閱頁在用，塔羅占卜首頁已經不含這個功能） ═══════ */
.deckgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.dcard{display:grid;grid-template-columns:78px 1fr;gap:14px;background:#12161d;
  border:1px solid var(--line);border-radius:11px;padding:13px}
.dcard .dart{align-self:start}
.dcard .dtxt b{font-family:var(--serif);font-size:16px;color:var(--gold2);letter-spacing:.06em}
.dcard .da{font-size:11px;color:var(--ink3);margin-left:8px;letter-spacing:.1em}
.dcard p{margin:7px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.7}
.dcard p.rev{color:var(--ink3)}
.dcard em{font-style:normal;display:inline-block;width:17px;height:17px;line-height:17px;
  text-align:center;border-radius:4px;font-size:10px;margin-right:7px;vertical-align:1px;
  background:var(--wood);color:#0e1014;font-weight:700}
.dcard p.rev em{background:var(--fire)}

/* ══ 通用 ═════════════════════════════════════════════ */
footer{text-align:center;color:var(--ink3);font-size:12px;padding:34px 20px 56px;line-height:2}
footer a{color:var(--ink2)}
.hidden{display:none!important}

@media(max-width:640px){
  .cards{grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:12px}
  .cards.one{grid-template-columns:minmax(150px,62%)}
  .deckgrid{grid-template-columns:1fr}
}

/* ══ toast ═════════════════════════════════ */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);
  background:#12161d;border:1px solid var(--gold);color:var(--ink);
  padding:12px 22px;border-radius:99px;font-size:14px;letter-spacing:.08em;
  box-shadow:0 8px 28px rgba(0,0,0,.55);opacity:0;pointer-events:none;z-index:99;
  transition:opacity .28s ease,transform .28s ease}
.toast.in{opacity:1;transform:translate(-50%,0)}

/* 單張牌陣與今日指引尺寸一致 */
.cards.n1{grid-template-columns:minmax(150px,180px)}

/* 鍵盤可見焦點 */
.btn:focus-visible,.seg button:focus-visible,
input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(prefers-reduced-motion:reduce){.toast{transition:none}}
@media(max-width:640px){.cards.n1{grid-template-columns:minmax(150px,62%)}}

.hint.qlead{margin:14px 0 0;color:var(--ink2);font-style:normal}

.opts{margin-top:18px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,220px))}

/* 選牌陣（點表格列）＋開牌，同一個區塊，只剩說明文字和按鈕。 */
.spread-pick{margin-top:18px;padding:16px;border:1px solid var(--line);
  border-radius:11px;background:#12161d}
.spread-pick .btn{margin-top:0}

/* ══ 說明框（78 張牌意大表／使用時機） ═══════════════════ */
.note-box{margin:14px 0 18px;padding:14px 16px;border-radius:10px;
  background:#12161d;border:1px solid var(--line)}
.note-box b{font-family:var(--serif);color:var(--gold2);font-size:14px;letter-spacing:.04em}
.note-box p{margin:8px 0 0;font-size:13px;color:var(--ink2);line-height:1.8}

/* t-scope 是三選一，字比 t-rev 的兩選一長，縮小字級與間距避免擠壓換行 */
#t-scope button{font-size:12.5px;padding:11px 6px;letter-spacing:0}

/* ══ 牌陣一覽表（進階區塊） ═══════════════════════════ */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:9px;background:#12161d}
.spread-table{border-collapse:collapse;width:100%;min-width:480px;font-size:12.5px}
.spread-table caption{text-align:left;padding:10px 14px;font-family:var(--serif);
  font-size:13px;color:var(--gold2);letter-spacing:.08em;border-bottom:1px solid var(--line)}
.spread-table th,.spread-table td{padding:9px 14px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.spread-table thead th{font-size:11px;color:var(--ink3);letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap}
.spread-table tbody tr:last-child td{border-bottom:0}
.spread-table td:first-child{font-family:var(--serif);color:var(--ink);white-space:nowrap}
.spread-table td:nth-child(2){color:var(--gold);font-variant-numeric:tabular-nums;text-align:center}
.spread-table td:last-child{color:var(--ink2)}

/* 表格列本身就是選項——點一列＝選那個牌陣，取代原本另外一排卡片。 */
.spread-table tbody tr{cursor:pointer;transition:background .15s}
.spread-table tbody tr:hover{background:#161b24}
.spread-table tbody tr:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.spread-table tbody tr[aria-checked="true"]{background:#191b16}
.spread-table tbody tr[aria-checked="true"] td:first-child{
  color:var(--gold2);font-weight:600;position:relative;padding-left:26px}
.spread-table tbody tr[aria-checked="true"] td:first-child::before{
  content:'●';position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:9px}

/* 窄螢幕下表格改成每列直排的卡片，牌陣名稱＋張數在同一行，
 * 使用時機另起一行 —— 不然三欄硬擠在一起只能靠左右滑才看得完，
 * 「在有限寬度內完整顯示」比維持表格外觀更重要。 */
@media(max-width:640px){
  .tw{overflow-x:visible}
  .spread-table{min-width:0}
  .spread-table caption{padding:9px 12px}
  .spread-table thead{display:none}
  .spread-table tbody tr{display:grid;
    grid-template-columns:1fr auto;column-gap:10px;
    padding:11px 12px;border-bottom:1px solid var(--line)}
  .spread-table tbody tr:last-child{border-bottom:0}
  .spread-table td{display:block;padding:0;border:0;white-space:normal}
  .spread-table td:first-child{grid-column:1}
  .spread-table td:nth-child(2){grid-column:2;text-align:right;color:var(--gold)}
  .spread-table td:nth-child(2)::after{content:' 張'}
  .spread-table td:last-child{grid-column:1 / -1;margin-top:5px;font-size:12px}
  .spread-table tbody tr[aria-checked="true"] td:first-child{padding-left:20px}
  .spread-table tbody tr[aria-checked="true"] td:first-child::before{left:0}
}

/* 大張數牌陣（十二宮 12 張／生命之樹與塞爾特十字 10 張）縮小卡片，避免版面過長 */
.cards.n10,.cards.n12{grid-template-columns:repeat(auto-fit,minmax(96px,112px));gap:10px}
.cards.n7{grid-template-columns:repeat(auto-fit,minmax(114px,132px))}

@media(max-width:640px){
  .cards.n10,.cards.n12{grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px}
}

/* ══ 空間牌陣版面 ═══════════════════════════════════════
 * 二選一／六芒星／塞爾特十字／生命之樹／黃道十二宮這五種牌陣，
 * 牌位之間的相對位置本身就是意義的一部分（誰跟誰交叉、誰居中、
 * 誰圍成一圈），排成一直排網格會把這層資訊丟掉。
 * 用 nth-child 對應 mod-tarot.js 裡 slots 陣列的順序 —— 兩邊改動
 * 要一起改，對不上牌會疊在一起或占錯位置。
 */

/* ── 二選一：中心現狀，左右各兩張分別是 A／B 的過程與結果 ── */
.layout-twoOptions{
  display:grid;justify-content:center;gap:12px;
  grid-template-columns:repeat(5,minmax(76px,120px));
  grid-template-areas:
    ".    resA .    resB ."
    "procA procA now procB procB";
}
.layout-twoOptions .card:nth-child(1){grid-area:now}
.layout-twoOptions .card:nth-child(2){grid-area:procA}
.layout-twoOptions .card:nth-child(3){grid-area:resA}
.layout-twoOptions .card:nth-child(4){grid-area:procB}
.layout-twoOptions .card:nth-child(5){grid-area:resB}

/* ── 六芒星：過去在上、現在右下、未來左中，中心是結果，底部是建議 ── */
.layout-hexagram{
  display:grid;justify-content:center;gap:12px;
  grid-template-columns:repeat(3,minmax(84px,124px));
  grid-template-areas:
    "p5 p1 p6"
    "p3 p7 p2"
    ".  p4 .";
}
.layout-hexagram .card:nth-child(1){grid-area:p1}
.layout-hexagram .card:nth-child(2){grid-area:p2}
.layout-hexagram .card:nth-child(3){grid-area:p3}
.layout-hexagram .card:nth-child(4){grid-area:p4}
.layout-hexagram .card:nth-child(5){grid-area:p5}
.layout-hexagram .card:nth-child(6){grid-area:p6}
.layout-hexagram .card:nth-child(7){grid-area:p7}

/* ── 塞爾特十字：十字（1~6）+ 右側直列（7~10） ──
 * 傳統畫法會把第2張橫壓在第1張上，這裡簡化成並排（不旋轉牌面），
 * 避免旋轉跟翻牌動畫、逆位翻轉疊在一起造成顯示錯亂。
 * 位置關係仍然正確：4過去在左、5期望在上、3潛意識在下、6未來在右。 */
.layout-celtic{
  display:grid;justify-content:center;gap:10px;
  grid-template-columns:repeat(4,minmax(72px,104px)) minmax(72px,104px);
  grid-template-rows:repeat(4,auto);
  grid-template-areas:
    ".  p5 p5 .  p10"
    "p4 p1 p2 p6 p9"
    ".  p3 p3 .  p8"
    ".  .  .  .  p7";
}
.layout-celtic .card:nth-child(1) { grid-area:p1 }
.layout-celtic .card:nth-child(2) { grid-area:p2 }
.layout-celtic .card:nth-child(3) { grid-area:p3 }
.layout-celtic .card:nth-child(4) { grid-area:p4 }
.layout-celtic .card:nth-child(5) { grid-area:p5 }
.layout-celtic .card:nth-child(6) { grid-area:p6 }
.layout-celtic .card:nth-child(7) { grid-area:p7 }
.layout-celtic .card:nth-child(8) { grid-area:p8 }
.layout-celtic .card:nth-child(9) { grid-area:p9 }
.layout-celtic .card:nth-child(10){ grid-area:p10 }

/* ── 生命之樹：三柱（左嚴厲／中平衡／右慈悲），由上而下十個位置 ── */
.layout-treeOfLife{
  display:grid;justify-content:center;gap:10px;
  grid-template-columns:repeat(3,minmax(76px,112px));
  grid-template-areas:
    ".  p1 ."
    "p3 .  p2"
    "p5 .  p4"
    ".  p6 ."
    "p8 .  p7"
    ".  p9 ."
    ".  p10 .";
}
.layout-treeOfLife .card:nth-child(1) { grid-area:p1 }
.layout-treeOfLife .card:nth-child(2) { grid-area:p2 }
.layout-treeOfLife .card:nth-child(3) { grid-area:p3 }
.layout-treeOfLife .card:nth-child(4) { grid-area:p4 }
.layout-treeOfLife .card:nth-child(5) { grid-area:p5 }
.layout-treeOfLife .card:nth-child(6) { grid-area:p6 }
.layout-treeOfLife .card:nth-child(7) { grid-area:p7 }
.layout-treeOfLife .card:nth-child(8) { grid-area:p8 }
.layout-treeOfLife .card:nth-child(9) { grid-area:p9 }
.layout-treeOfLife .card:nth-child(10){ grid-area:p10 }

/* ── 黃道十二宮：命宮在 9 點鐘方向逆時針圍成一圈，跟真實占星盤
 * 畫法一致（4 田宅宮落在正下方＝IC、7 夫妻宮在 3 點鐘＝Descendant、
 * 10 官祿宮在正上方＝MC）。座標用三角函數算好直接寫死，不用 JS 算。 */
.layout-zodiac{
  /* 12 個點沿圓周只間隔 30 度，在 3、9 點鐘方向切線是垂直的，
   * 卡片又是直式的，那兩側最容易疊在一起 —— 半徑要留夠，卡片要縮小。
   * 寬度用 100%（相對容器，而不是 94vw 相對整個視窗）：容器已經扣掉
   * .wrap 和 .panel 的內距，用 vw 算會沒扣到這兩層 padding，手機上
   * 反而讓圓圈比看起來能用的空間更寬，被裁切或需要橫向捲動。 */
  position:relative;width:min(640px,100%);aspect-ratio:1;margin:16px auto 64px;
}
.layout-zodiac .card{
  position:absolute;width:9.5%;min-width:46px;
  transform:translate(-50%,-50%);
}
/* 宮位名稱（命宮·自我）留給下方逐張解讀顯示，圓圈上放不下這麼多字，
 * 硬留只會疊字看不清。圓圈上只留牌名和正逆位，夠辨認就好。 */
.layout-zodiac .card .slot{display:none}
.layout-zodiac .card figcaption{position:absolute;top:100%;left:50%;
  transform:translateX(-50%);width:max-content;max-width:88px;
  font-size:11px;margin-top:2px}
.layout-zodiac .card figcaption b{font-size:11px}
.layout-zodiac .card .rv{font-size:9px;padding:0 5px}
.layout-zodiac .card:nth-child(1) { left:10.0%; top:50.0%; }
.layout-zodiac .card:nth-child(2) { left:15.4%; top:70.0%; }
.layout-zodiac .card:nth-child(3) { left:30.0%; top:84.6%; }
.layout-zodiac .card:nth-child(4) { left:50.0%; top:90.0%; }
.layout-zodiac .card:nth-child(5) { left:70.0%; top:84.6%; }
.layout-zodiac .card:nth-child(6) { left:84.6%; top:70.0%; }
.layout-zodiac .card:nth-child(7) { left:90.0%; top:50.0%; }
.layout-zodiac .card:nth-child(8) { left:84.6%; top:30.0%; }
.layout-zodiac .card:nth-child(9) { left:70.0%; top:15.4%; }
.layout-zodiac .card:nth-child(10){ left:50.0%; top:10.0%; }
.layout-zodiac .card:nth-child(11){ left:30.0%; top:15.4%; }
.layout-zodiac .card:nth-child(12){ left:15.4%; top:30.0%; }

@media(max-width:640px){
  .layout-twoOptions{grid-template-columns:repeat(5,minmax(56px,1fr));gap:6px}
  .layout-hexagram{grid-template-columns:repeat(3,minmax(64px,1fr));gap:8px}
  .layout-celtic{grid-template-columns:repeat(4,minmax(48px,1fr)) minmax(48px,1fr);gap:6px}
  .layout-treeOfLife{grid-template-columns:repeat(3,minmax(58px,1fr));gap:8px}
  /* 手機上維持跟桌機一樣的圓圈排法（不改用網格）。純把寬度縮小、
   * 圓圈維持正圓（aspect-ratio:1）的話，3、9 點鐘方向那三張牌
   * （彼此只差 20% 的垂直距離，水平幾乎沒有錯開）卡片本身就會疊在
   * 一起，文字說明更不用談。把圓圈拉高成橢圓，垂直方向留出更多
   * 實際像素間距，卡片和文字則盡量縮小，兩邊一起讓最擠的那幾個
   * 位置留得住不重疊的空間。 */
  .layout-zodiac{aspect-ratio:3/4;margin-bottom:90px}
  .layout-zodiac .card{min-width:30px}
  .layout-zodiac .card figcaption{font-size:8px;max-width:60px;line-height:1.3}
  .layout-zodiac .card figcaption b{font-size:8px}
  .layout-zodiac .card .rv{font-size:7px;padding:0 3px;margin-top:1px}
}