/* ark_ai_xian.css — 8/11 由 ARK_AI_XIAN.html 抽出的 <style>(原封不動) */
 *{box-sizing:border-box;margin:0;padding:0;user-select:none}
 /* 7/26 兔兔在 iPhone 上抓到「原本的標楷體怎不見了」:舊字族只寫了 Windows/macOS 的名字
    (DFKai-SB=Win 標楷體、BiauKai=mac),**手機兩個都沒有**→掉進 serif=宋體,字一放大就看得出來。
    iOS 內建也沒有楷體可指名 → **把楷體包進網站**:霞鶩文楷 TC(LXGW WenKai TC,OFL 開源可轉散布,
    授權書放 assets/fonts/LICENSE_LXGWWenKaiTC.txt),只留這頁真的會用到的 1595 個字元=483KB,
    手機載一次就快取。桌機仍優先用她本機的標楷體(名字排在前面),沒有才用內建這支。 */
 @font-face{font-family:"ArkKai";src:url("assets/fonts/ArkKai-xian.woff2") format("woff2");
   font-weight:100 900;font-style:normal;font-display:swap}
 body{background:#F3ECDD;color:#2B2320;font-weight:700;min-height:100vh;overflow-x:hidden;
   font-family:"DFKai-SB","BiauKai","標楷體","TW-Kai","STKaiti","Kaiti TC","Kaiti SC","KaiTi","楷體","楷体","ArkKai",serif;
   background-image:radial-gradient(circle at 30% 8%,rgba(168,50,42,.045),transparent 60%)}
 #w{max-width:600px;margin:0 auto;padding:18px 14px 60px;text-align:center}
 @media(max-width:600px){#w{padding-left:6px;padding-right:6px}}/* 手機:內距收窄=盤畫得大又置中 */
 h1{font-size:24px;letter-spacing:10px;color:#A8322A;font-weight:700;
   text-shadow:1px 1px 0 rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;gap:6px}
 h1 span{letter-spacing:10px;padding-left:10px}
 .figi{filter:drop-shadow(0 0 7px rgba(150,110,180,.4));flex:none}
 .sub{font-size:13.5px;color:#5C5147;letter-spacing:2px;margin:6px 0 10px}
 /* 7/29 兔兔(pengod1.jpg):「上面小字是不是太多 導致圈字時跳出一個地方寫答案擋住圓盤」
    量出來她 iPhone 可視高 694 時:上面吃掉 240px → 盤到 619 才結束,
    吸底答案條壓盤 49px、右下那顆膠囊壓盤 31px(就是她截圖蓋住盤右下的那個)。
    → 她 7/12 寫的指引語**一個字都沒刪**,只在手機上收成一行可點開的;桌機照舊全開(桌機沒有高度壓力)。*/
 .rulerow{display:flex;gap:7px;align-items:center;justify-content:center;margin:1px 0 5px}
 .mini{font-size:11px;color:#9C8F79;letter-spacing:1px;text-decoration:none;
   background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
 .rulebtn{border-bottom:1px dotted #9C8F79}
 .xrule{font-size:11.5px;color:#8a7a5c;margin:2px 0 4px;line-height:1.75}
 @media(max-width:600px){.xrule{display:none}.xrule.open{display:block}}
 @media(min-width:601px){.rulebtn,.rulerow .dot{display:none}}
 .fig{line-height:0;margin:0 0 6px;filter:drop-shadow(0 0 8px rgba(150,110,180,.35))}
 /* 圓盤:真碟仙盤=圓的、滿滿的字、中間放碟 */
 /* 7/26 兔兔:「圓圈的字太小,因為字增多了…字體變大,可以密集點,方便老年人閱讀」
    → 盤加大(88vw/500 → 96vw/560)+字級改「照盤面實際擠得下的最大值」現算(layout()),
      階層照她定的:①是/否 最大 ②中式數字第二 ③盤上一堆字第三(密集排,圈到時放大+盤下大字浮現) */
 /* ⚠️ 7/26 兔兔手機抓到「整個圓盤偏右邊,不在螢幕中間」:上一版寫 100vw-10px,**比外框(#w 有左右內距)還寬**
    → 溢出去=看起來偏一邊。改回吃滿外框(100%)+窄螢幕把 #w 的左右內距收到 6px,盤才會真的置中 */
 .board{position:relative;width:min(100%,560px);aspect-ratio:1;margin:0 auto;border-radius:50%;
   background:radial-gradient(circle at 50% 42%,#EBE1CC,#E0D3B4 80%);
   border:4px solid #A8322A;
   box-shadow:inset 0 0 40px rgba(168,50,42,.07),0 2px 14px rgba(0,0,0,.1)}
 .board::before{content:"";position:absolute;inset:7px;border-radius:50%;
   border:1px solid rgba(168,50,42,.3);pointer-events:none}
 /* 7/26 兔兔:「筆尖回原位只有筆尖的位置重要,所以中間圓圈可改小一點」→ 23%→14%,空間讓給字 */
 .well{position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;transform:translate(-50%,-50%);
   border-radius:50%;border:1px dashed rgba(168,50,42,.35)}
 .ch{position:absolute;transform:translate(-50%,-50%);color:#4A3A2C;transition:.2s;line-height:1}
 /* 字級由 layout() 現算(擠得下的最大值);這裡只留顏色——圈與圈深淺差一點才看得出層次。
    7/26 兔兔要「方便老年人閱讀」→ 顏色一律加深(原本 r3/r4 淺到 #75665A/#7E7064 幾乎看不見) */
 .ch.r0{color:#3E3125} .ch.r1{color:#453729} .ch.r2{color:#4C3E2F} .ch.r3{color:#534434} .ch.r4{color:#59493A}
 /* 圈到的字:放大+米色光暈壓住旁邊的字(盤變密了,不加光暈會跟鄰居糊在一起) */
 .ch.lit{color:#A8322A;transform:translate(-50%,-50%) scale(1.6);z-index:12;
   text-shadow:0 0 5px #F0E6D2,0 0 9px #F0E6D2,0 0 13px #F0E6D2,0 0 16px rgba(168,50,42,.4)}
 /* 7/26 二修(兔兔):是/否再小一點、數字跟是/否**同一圈**也再小一點——都往中間收,把外圈空間讓出來 */
 .yn{font-size:clamp(22px,5.6vw,32px);color:#A8322A;text-shadow:0 0 6px rgba(168,50,42,.3)}/* ①仍最大 */
 .ch.num{color:#7A5A18}/* ②第二;字級由 layout() 依同圈弧長現算(排得下十個字又不擠) */
 .yn.lit{color:#8F2A22;text-shadow:0 0 14px rgba(168,50,42,.5);transform:translate(-50%,-50%) scale(1.5)}
 /* 硃砂毛筆(取代碟):筆身斜22°像有人執筆,筆尖指字,停下時繞一小圈=圈字;退駕歸位盤心圓內 */
 #pl{position:absolute;width:64px;height:96px;pointer-events:none;z-index:10;left:0;top:0;
   transition:left 1.1s cubic-bezier(.4,.05,.35,1),top 1.1s cubic-bezier(.4,.05,.35,1)}
 #pl svg{filter:drop-shadow(3px 4px 6px rgba(0,0,0,.55))}
 /* 圈字要像人手:先頓筆.15s才起筆,1.15s慢慢繞,速度不均勻(ease),半圈處微微外擴像手抖 */
 #pl.cir{animation:orb 1.15s cubic-bezier(.42,.08,.4,1) .15s}
 @keyframes orb{0%{transform:rotate(0turn) translate(11px) rotate(0turn)}
   50%{transform:rotate(.5turn) translate(12.5px) rotate(-.5turn)}
   100%{transform:rotate(1turn) translate(11px) rotate(-1turn)}}
 /* 筆圈出的硃砂圈:跟著筆速慢慢畫出來,收筆後停一拍才淡掉 */
 .ink{position:absolute;width:44px;height:44px;pointer-events:none;z-index:9}
 .ink circle{fill:none;stroke:#A8322A;stroke-width:2.6;stroke-linecap:round;opacity:.9;
   stroke-dasharray:104;stroke-dashoffset:104;
   animation:inkdraw 1.15s cubic-bezier(.42,.08,.4,1) .15s forwards,inkfade .6s 1.9s forwards}
 @keyframes inkdraw{to{stroke-dashoffset:0}}
 @keyframes inkfade{to{opacity:0}}
 /* 問答區 */
 .ask{margin:14px 0 6px}
 input{width:74%;background:#fff;border:1px solid #CBB98F;color:#2B2320;
   padding:10px;border-radius:8px;font-family:inherit;font-size:15px;text-align:center}
 .btn{background:#A8322A;color:#F3ECDD;border:none;border-radius:8px;
   padding:10px 20px;font-family:inherit;font-size:15px;cursor:pointer;margin:6px 3px;letter-spacing:2px}
 .btn:hover{background:#8F2A22} .btn:disabled{opacity:.4;cursor:wait}
 /* 7/26 兔兔:老年人要讀得到→筆現在圈到哪個字,盤下就用大字浮現(盤上再密也不用瞇眼看) */
 .pick{height:58px;line-height:58px;margin:6px 0 0;font-size:clamp(34px,9vw,50px);color:#A8322A;
   letter-spacing:8px;text-shadow:0 0 12px rgba(168,50,42,.28);transition:transform .18s}
 .pick.pop{transform:scale(1.14)}
 .answer{min-height:40px;font-size:clamp(26px,6.5vw,32px);letter-spacing:7px;color:#A8322A;margin:8px 0 4px;
   text-shadow:0 0 10px rgba(168,50,42,.25)}
 .plain{font-size:15.5px;color:#5A4E42;font-style:italic;min-height:20px;line-height:1.7}
 #ansbar{min-height:104px}/* 佔住位子,吸底時版面不會跳 */
 /* 🗑 7/30 兔兔(b1.jpg):「還是會跳出一個分開的格線然後寫答案　雖然可以看到整個圓形
    可是我是不想看見那個跳出來的格線　想直接出現在圓盤下」
    → **吸底那條(`#ansin.stick`:position:fixed + border-top + 自己的底色)整組刪掉**。
    那條 border-top 加上跟頁面不同的底色,看起來就是「跳出來的一格」。
    答案現在寫在它本來的位置＝圓盤正下方;要她看得到改用**捲動**達成(boardClear),不靠浮層。
    ⚠️ 不要再把它加回來:她 7/26 要的是「圈字時同一畫面看得到紅色答案」,
       那個需求用捲動就滿足了,不需要浮出一條。*/
 .ritual{font-size:12px;color:#9C8F79;margin-top:10px;line-height:1.6}
 /* 7/26 兔兔:「十個排成兩排,請仙指點跟送仙退駕排在那兩排隔壁」=上面這塊壓扁,
    圓盤才擠得上來→仙在圈答案時,手機同一畫面就看得到盤下的紅色答案 */
 .ctl{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 8px}
 .quick{display:grid;grid-template-columns:repeat(5,auto);gap:5px;justify-content:center;margin:0}
 .quick .q{font-size:12px;color:#7A5A18;border:1px solid #CBB98F;border-radius:16px;
   padding:3px 9px;cursor:pointer;white-space:nowrap} .quick .q:hover{border-color:#A8322A;color:#2B2320}
 .acts{display:flex;flex-direction:column;gap:5px}
 .acts .btn{margin:0;padding:8px 12px;font-size:14px;white-space:nowrap}
 @media(max-width:600px){/* 手機:兩排籤+兩顆鈕要並排塞得下 */
   .ctl{gap:6px} .quick{gap:4px} .quick .q{font-size:11px;padding:2px 6px;letter-spacing:0}
   .acts .btn{font-size:12.5px;padding:7px 8px;letter-spacing:1px}
   .ask{margin:8px 0 4px} input{width:92%;padding:8px;font-size:14px}
   /* 盤上面的東西再收一輪=盤往上移,圈答案時同一畫面就看得到紅字 */
   #w{padding-top:8px} h1{font-size:20px;letter-spacing:6px} .sub{font-size:12px;margin:4px 0 6px}
   .fig{transform:scale(.72);margin:-4px 0 -2px}}