:root{
  --bg:#ffffff;--bg2:#f5f4f2;--bg3:#ebebea;--bg4:#e0dedc;
  --text:#1a1917;--text2:#5a5855;--text3:#9a9895;
  --border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.15);
  --wolf:#b83828;--vil:#3a7a2a;--seer:#2a65a8;
  --witch:#7c3aed;--hunter:#5f3e96;--guard:#1e887a;
  --cupid:#c23b7a;
  --thief:#8a6d1f;
  --diviner:#4338ca;
  --accent:#b83828;--gold:#9a7c28;
  --r:12px;--r-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100vh;background:var(--bg);font-family:-apple-system,'PingFang TC','Noto Sans TC',sans-serif;color:var(--text);overscroll-behavior:none;}
html{scroll-behavior:smooth;}
/* 上次為了擋掉手機版某個元素意外撐寬畫面造成的空白，在 body 加了 overflow-x:hidden——
   結果 html 跟 body 兩層都設、又多加了 max-width:100vw，這個組合在某些瀏覽器會讓垂直
   滾輪跟著不順（100vw 沒有扣掉捲軸寬度，容易跟實際可視寬度對不起來，引發捲動計算問題）。
   改成只在 body 這一層設 overflow-x:hidden、拿掉 max-width:100vw，一樣能擋住意外的水平
   溢出，滑鼠滾輪垂直捲動就不會受影響了。 */
body{overflow-x:hidden;}

/* ── NAV ──
   左邊固定放「狼吞虎嚥」品牌字（用跟內文不同的襯線字體 Noto Serif TC 做出區隔），右邊
   五個分頁純文字、等寬平均分配（跟原本的版型一樣，只是拿掉了 emoji）——上一版加了
   overflow-x:auto／margin-left:auto 想做「靠右對齊＋可橫向捲動」，結果在某些瀏覽器上
   讓巢狀 flex 容器算錯寬度，五個按鈕擠成看起來只剩一個，所以這裡改回最單純、原本就
   驗證過沒問題的等寬排列方式，不用可能有相容性風險的寫法。 */
.nav{display:flex;align-items:center;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;padding:0 10px;gap:6px;max-width:100%;box-sizing:border-box;}
.nav-brand{display:flex;align-items:center;flex-shrink:0;}
.nav-logo{height:56px;width:auto;display:block;}
.nav-btns{display:flex;margin-left:auto;gap:6px;}
.nav-btn{padding:14px 12px 12px;font-size:14px;color:var(--text3);background:none;border:none;cursor:pointer;text-align:center;transition:color 0.15s;-webkit-user-select:none;white-space:nowrap;}
.nav-btn.active{color:var(--text);font-weight:700;}
.nav-hamburger{display:none;align-items:center;justify-content:center;gap:6px;width:auto;margin:0;background:none;border:none;font-size:15px;font-weight:600;line-height:1;color:var(--text);cursor:pointer;padding:8px 4px;margin-left:auto;flex-shrink:0;-webkit-user-select:none;}
.nav-hamburger .hb-icon{font-size:20px;}
/* 手機版（螢幕較窄）：橫排五個分頁容易被 logo 擠到超出畫面、要左右滑動才看得到最後一個，
   乾脆改成「三條線」漢堡選單——平常收起來，點了才往下展開一個直排選單（每個分頁字比較
   大、方便手指點），選完分頁選單會自動收合。這樣不管螢幕多窄、以後分頁再增加，都不會有
   排版擠不下的問題，不用再靠字體大小去硬湊寬度。漢堡按鈕本身沒有另外再往右推——`.nav`
   已經是 flex 兩端對齊（logo 靠左、`.nav-hamburger` 用 margin-left:auto 貼齊最右邊），
   已經是視覺上能貼到的最右側了。 */
@media (max-width:600px){
  .nav-logo{height:48px;}
  .nav-btns{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;margin-left:0;gap:0;background:var(--bg2);border-bottom:1px solid var(--border);box-shadow:0 4px 10px rgba(0,0,0,0.08);}
  .nav-btns.open{display:flex;}
  .nav-btn{width:100%;text-align:left;padding:14px 18px;font-size:15px;}
  .nav-hamburger{display:flex;}
}

/* ── TABS ── */
.tab{display:none;padding:20px 16px 60px;max-width:540px;margin:0 auto;overflow-x:hidden;}
/* 頁尾版權字：小小一行、不搶眼，放在所有分頁共用（不屬於任何一個 .tab，所以切分頁的時候
   不會跟著消失）。 */
.site-footer{text-align:center;font-size:11px;color:var(--text3);padding:16px 0 24px;}
.tab.on{display:block;}

/* ── TYPOGRAPHY ── */
h1{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-0.5px;}
h2{font-size:20px;font-weight:700;color:var(--text);}
h3{font-size:16px;font-weight:700;color:var(--text);}
.sub{font-size:14px;color:var(--text2);line-height:1.65;margin-bottom:14px;}

/* ── CARDS & ROWS ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:4px 14px;margin-bottom:10px;}
.row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);}
.row:last-child{border-bottom:none;}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.av-wolf{background:rgba(184,56,40,0.12);color:var(--wolf);}
.av-vil{background:rgba(58,122,42,0.12);color:var(--vil);}
.av-seer{background:rgba(42,101,168,0.12);color:var(--seer);}
.av-witch{background:rgba(124,58,237,0.12);color:var(--witch);}
.av-hunter{background:rgba(95,62,150,0.12);color:var(--hunter);}
.av-guard{background:rgba(30,136,122,0.12);color:var(--guard);}
.av-cupid{background:rgba(194,59,122,0.12);color:var(--cupid);}
.av-thief{background:rgba(138,109,31,0.14);color:var(--thief);}
.av-diviner{background:rgba(67,56,202,0.12);color:var(--diviner);}
.av-dead{background:rgba(0,0,0,0.06);color:var(--text3);}
.nm{flex:1;font-size:15px;color:var(--text);}
.dead-nm{text-decoration:line-through;color:var(--text3);}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.3px;}
.bw{background:rgba(184,56,40,0.1);color:#922418;}.bv{background:rgba(58,122,42,0.1);color:#2a601c;}.bthird{background:rgba(194,59,122,0.1);color:#8f2a5e;}
.bs{background:rgba(42,101,168,0.1);color:#1a4e88;}.bwt{background:rgba(124,58,237,0.1);color:#5b21b6;}.bdiviner{background:rgba(67,56,202,0.1);color:#3730a3;}
.bh{background:rgba(95,62,150,0.1);color:#4a2e80;}.bg2{background:rgba(30,136,122,0.1);color:#0e6a5e;}
.bcupid{background:rgba(194,59,122,0.1);color:#8f2a5e;}
.bthief{background:rgba(138,109,31,0.14);color:#6b5417;}
.rp-tag-lover{display:inline-block;margin-left:4px;font-size:11px;}

/* ── INPUTS ── */
label{font-size:13px;color:var(--text2);display:block;margin:12px 0 5px;}
input[type=text],input[type=number],select{
  width:100%;padding:13px 14px;font-size:16px;color:var(--text);
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r-sm);
  outline:none;-webkit-appearance:none;appearance:none;
}
input:focus,select:focus{border-color:var(--accent);}
input::placeholder{color:var(--text3);}
select option{background:var(--bg3);}

/* ── BUTTONS ── */
button{
  width:100%;padding:15px 16px;font-size:16px;font-weight:700;
  color:var(--text);background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--r);cursor:pointer;margin-top:8px;-webkit-user-select:none;
  transition:opacity 0.1s,background 0.1s;letter-spacing:0.2px;
}
button:active{opacity:0.65;}
button:disabled{opacity:0.28;pointer-events:none;}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
button.gold{background:var(--gold);color:#fff;border-color:var(--gold);}
button.ghost{background:transparent;border-color:var(--border2);}
button.danger{background:rgba(184,56,40,0.08);color:#922418;border-color:rgba(184,56,40,0.25);}
button.success{background:rgba(58,122,42,0.08);color:#2a601c;border-color:rgba(58,122,42,0.25);}
/* 鵝黃色調的「問題回報」按鈕——原本跟 .ghost 一樣透明無色，在白底頁面上太不顯眼容易被忽略，
   改用跟 .danger／.success 同一套「淺色調＋同色邊框」的語彙，只是換成偏黃的 --gold。 */
button.report{background:rgba(154,124,40,0.1);color:var(--gold);border-color:rgba(154,124,40,0.3);}
.btn2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.btn2 button{margin-top:0;}

/* ── INFO BOXES ── */
.info{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 14px;font-size:14px;color:var(--text);line-height:1.8;margin:10px 0;}
.info-danger{background:rgba(184,56,40,0.06);border:1px solid rgba(184,56,40,0.2);border-radius:var(--r-sm);padding:13px 14px;font-size:14px;color:#922418;margin:10px 0;line-height:1.7;}
.info-success{background:rgba(58,122,42,0.06);border:1px solid rgba(58,122,42,0.2);border-radius:var(--r-sm);padding:13px 14px;font-size:14px;color:#2a601c;margin:10px 0;line-height:1.7;}
.info-warn{background:rgba(168,94,16,0.06);border:1px solid rgba(168,94,16,0.2);border-radius:var(--r-sm);padding:13px 14px;font-size:14px;color:#864a08;margin:10px 0;line-height:1.7;}

/* ── BANNERS ── */
.nbanner{text-align:center;padding:2rem 0 1.5rem;}
.nicon{font-size:52px;margin-bottom:10px;}
.ntitle{font-size:24px;font-weight:800;margin-bottom:6px;}
.step-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--bg3);border-radius:20px;font-size:12px;color:var(--text2);margin-bottom:12px;}

/* ── ROLE CARDS (rules page) ── */
.role-grid{display:grid;gap:10px;margin:16px 0;}
.role-card{border-radius:var(--r);padding:16px;border:1px solid var(--border);}
.role-card-wolf{background:rgba(184,56,40,0.05);border-color:rgba(184,56,40,0.18);}
.role-card-vil{background:rgba(58,122,42,0.05);border-color:rgba(58,122,42,0.18);}
.role-card-seer{background:rgba(42,101,168,0.05);border-color:rgba(42,101,168,0.18);}
.role-card-witch{background:rgba(124,58,237,0.05);border-color:rgba(124,58,237,0.18);}
.role-card-hunter{background:rgba(95,62,150,0.05);border-color:rgba(95,62,150,0.18);}
.role-card-guard{background:rgba(30,136,122,0.05);border-color:rgba(30,136,122,0.18);}
.rc-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.rc-icon{font-size:26px;}
.rc-name{font-size:17px;font-weight:700;}
.rc-team{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:auto;}
.team-wolf{background:rgba(184,56,40,0.1);color:#922418;}
.team-good{background:rgba(58,122,42,0.1);color:#2a601c;}
.rc-desc{font-size:14px;color:var(--text2);line-height:1.7;}

/* ── COMP TABLE ── */
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:14px 0;}
.comp-item{background:var(--bg3);border-radius:var(--r-sm);padding:12px 6px;text-align:center;}
.comp-count{font-size:26px;font-weight:800;}
.comp-label{font-size:11px;color:var(--text2);margin-top:3px;}

/* ── AWARDS STRIP ── 全部橫排一列，放不下用左右滑動（拉桿）瀏覽，不換行 */
.awards-strip{display:flex;gap:10px;overflow-x:auto;margin:8px 0 4px;padding:2px 2px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.award-card{flex:0 0 112px;background:var(--bg3);border:1px solid transparent;border-radius:var(--r-sm);padding:12px 8px 10px;text-align:center;cursor:pointer;-webkit-user-select:none;}
.award-card:active{opacity:0.7;}
.award-card.sel{border-color:var(--accent);}
.award-card .aw-icon{font-size:22px;}
/* 獎項名稱（超強女巫／查狼專家…）是重點，字放大加粗；得獎人名字相對次要，縮小 */
.award-card .aw-title{font-size:13.5px;font-weight:800;color:var(--text);margin-top:6px;line-height:1.3;}
.award-card .aw-name{font-size:11px;font-weight:600;color:var(--text2);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.award-card .aw-count{font-size:10px;color:var(--text3);margin-top:1px;}
.award-detail{display:none;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;margin:6px 0 16px;font-size:12.5px;color:var(--text2);line-height:1.85;}
.award-detail.open{display:block;}
.award-detail b{color:var(--text);}
.award-detail .aw-note{font-size:11px;color:var(--text3);margin-top:6px;}
.guide-tag-card{flex:0 0 240px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;}
.guide-tag-card .gt-title{font-size:14px;font-weight:800;color:var(--text);}
.guide-tag-card .gt-desc{font-size:12.5px;color:var(--text2);line-height:1.7;margin-top:6px;white-space:normal;}

/* ── TAP GRID ── */
.tap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin:12px 0;}
.ptap{border:2px solid var(--border2);border-radius:var(--r-sm);padding:13px 4px;text-align:center;cursor:pointer;background:var(--bg3);}
.ptap:active{opacity:0.65;}
.ptap.sel{border-color:var(--accent);}
.ptap .pn{font-size:20px;font-weight:800;color:var(--text);}
.ptap .pp{font-size:11px;color:var(--text2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── PAGES ── */
.pg{display:none;}
.pg.on{display:block;}

/* ── KILLED BOX ── */
.killed-box{background:rgba(184,56,40,0.05);border:1px solid rgba(184,56,40,0.2);border-radius:var(--r);padding:20px 16px;margin:14px 0;text-align:center;}
.killed-label{font-size:12px;color:#922418;margin-bottom:6px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.killed-num{font-size:38px;font-weight:800;color:#922418;}
.killed-name{font-size:20px;color:#922418;margin-top:4px;font-weight:600;}

/* ── ROLE REVEAL ── */
.role-reveal{border-radius:var(--r);padding:2rem 1rem;text-align:center;margin:14px 0;}
.rv-wolf{background:rgba(184,56,40,0.07);border:1px solid rgba(184,56,40,0.2);}
.rv-villager{background:rgba(58,122,42,0.07);border:1px solid rgba(58,122,42,0.2);}
.rv-seer{background:rgba(42,101,168,0.07);border:1px solid rgba(42,101,168,0.2);}
.rv-witch{background:rgba(124,58,237,0.07);border:1px solid rgba(124,58,237,0.2);}
.rv-hunter{background:rgba(95,62,150,0.07);border:1px solid rgba(95,62,150,0.2);}
.rv-guard{background:rgba(30,136,122,0.07);border:1px solid rgba(30,136,122,0.2);}

/* ── SCRIPT STEP (judge tab) ── */
.script-step{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;overflow:hidden;}
.ss-header{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;}
.ss-num{width:26px;height:26px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text2);flex-shrink:0;}
.ss-num.active{background:var(--accent);color:#fff;}
.ss-title{flex:1;font-size:15px;font-weight:600;}
.ss-state{font-size:12px;color:var(--text3);}
.ss-body{padding:0 16px 16px;border-top:1px solid var(--border);}
.speech{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;font-size:15px;color:var(--text);line-height:1.85;margin:12px 0;}
.speech em{color:#924a00;font-style:normal;font-weight:700;}
.speech mark{background:transparent;color:#922418;font-weight:700;}

/* ── WIN CHECK ── */
.win-bar{display:flex;gap:8px;margin:14px 0;}
.win-side{flex:1;border-radius:var(--r-sm);padding:14px;text-align:center;}
.win-wolf{background:rgba(184,56,40,0.07);border:1px solid rgba(184,56,40,0.18);}
.win-good{background:rgba(58,122,42,0.07);border:1px solid rgba(58,122,42,0.18);}
.win-count{font-size:28px;font-weight:800;margin-bottom:4px;}
.win-wolf .win-count{color:#922418;}
.win-good .win-count{color:#2a601c;}
.win-label{font-size:12px;color:var(--text2);}

/* ── TIMER ── */
.timer-ring{text-align:center;padding:20px 0;margin:10px 0;}
.timer-num{font-size:52px;font-weight:800;color:var(--accent);}
.timer-sub{font-size:13px;color:var(--text2);margin-top:4px;}

/* ── DIVIDER ── */
.divider{height:1px;background:var(--border);margin:18px 0;}
.section-title{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:1.2px;text-transform:uppercase;margin:20px 0 10px;}

/* ── PLAYER ROSTER (judge tab bottom panel) ── */
.roster-panel{background:var(--bg2);border-top:1px solid var(--border);padding:10px 16px 14px;width:100%;}
.roster-title{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px;}
.rp{border-radius:var(--r-sm);padding:7px 5px;text-align:center;border:1px solid var(--border);background:var(--bg);transition:opacity 0.2s;position:relative;}
.rp-toggle-btn{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;margin:0;border-radius:50%;font-size:11px;line-height:1;background:var(--bg3);border:1px solid var(--border);color:var(--text3);opacity:0.55;}
.rp-toggle-btn:hover{opacity:1;}
.rp.rp-dead{opacity:0.4;background:var(--bg2);}
.rp .rp-num{font-size:16px;font-weight:800;color:var(--text);}
.rp.rp-dead .rp-num{text-decoration:line-through;color:var(--text3);}
.rp .rp-name{font-size:10px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;}
.rp .rp-role{font-size:9px;font-weight:700;margin-top:3px;padding:1px 5px;border-radius:8px;display:inline-block;}
/* 女巫解藥／毒藥使用狀況：兩個小圈圈，還沒用＝紫色，已經用掉＝灰色 */
.rp-potions{display:flex;gap:4px;justify-content:center;margin-top:4px;}
.rp-potion-dot{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;font-size:9px;font-weight:700;background:rgba(124,58,237,0.14);color:var(--witch);border:1px solid rgba(124,58,237,0.35);}
.rp-potion-dot.used{background:rgba(0,0,0,0.05);color:var(--text3);border-color:rgba(0,0,0,0.12);}
/* 狼隊角色（含血月使者、機械狼、夢魘、狼兄狼弟、狼巫、假面……）全部統一同一種紅色，方便法官一眼認出敵我 */
.rp-wolf .rp-role,.rp-wolfking .rp-role,.rp-whitewolf .rp-role,.rp-wolfbeauty .rp-role,.rp-evilknight .rp-role,.rp-gargoyle .rp-role,.rp-awgargoyle .rp-role,.rp-bloodmoon .rp-role,.rp-mechanicalwolf .rp-role,.rp-nightmare .rp-role,.rp-wolfbrother_e .rp-role,.rp-wolfbrother_y .rp-role,.rp-wolfshaman .rp-role,.rp-mask .rp-role,.rp-bigbadwolf .rp-role,.rp-bigmechwolf .rp-role,.rp-smallmechwolf .rp-role,.rp-biggreywolf .rp-role,.rp-trickster .rp-role{background:rgba(184,56,40,0.1);color:#922418;}
/* 平民／混血兒全部維持同一種綠色（混血兒陣營未知，好人視角一律當平民看待） */
.rp-villager .rp-role,.rp-hybrid .rp-role{background:rgba(58,122,42,0.1);color:#2a601c;}
/* 女巫刻意避開紅色，其餘神職彼此也各自分開一個顏色，方便快速辨識 */
.rp-witch .rp-role{background:rgba(124,58,237,0.1);color:#5b21b6;}
.rp-seer .rp-role{background:rgba(42,101,168,0.1);color:#1a4e88;}
.rp-hunter .rp-role{background:rgba(95,62,150,0.1);color:#4a2e80;}
.rp-guard .rp-role{background:rgba(30,136,122,0.1);color:#0e6a5e;}
.rp-medium .rp-role{background:rgba(61,58,138,0.1);color:#332f80;}
.rp-demonhunter .rp-role{background:rgba(138,42,110,0.1);color:#7e195f;}
.rp-gravkeeper .rp-role{background:rgba(90,74,58,0.12);color:#4a3a2a;}
.rp-dreamcatcher .rp-role{background:rgba(26,110,136,0.1);color:#0f5c74;}
.rp-knight .rp-role{background:rgba(122,106,26,0.12);color:#5f5110;}
.rp-magician .rp-role{background:rgba(106,58,154,0.1);color:#582e88;}
.rp-cupid .rp-role{background:rgba(194,59,122,0.1);color:#8f2a5e;}
.rp-thief .rp-role{background:rgba(138,109,31,0.14);color:#6b5417;}
.rp-blackmarket .rp-role{background:rgba(122,74,26,0.12);color:#5e3810;}
/* 動物夢境：熊／子狐／河豚／白貓 */
.rp-bear .rp-role{background:rgba(110,78,46,0.12);color:#5a3c1e;}
.rp-foxcub .rp-role{background:rgba(196,98,30,0.12);color:#8a4410;}
.rp-pufferfish .rp-role{background:rgba(26,110,136,0.1);color:#0f5c74;}
.rp-whitecat .rp-role{background:rgba(0,0,0,0.04);color:var(--text);border:1px solid var(--border2);}
/* 純白之女：維持白色（跟她名字呼應），用淺灰邊框跟背景色區塊區分開來，不跟其他神職搶顏色 */
.rp-purewhitemaiden .rp-role{background:#ffffff;color:#3a3a3a;border:1px solid rgba(0,0,0,0.14);}
/* 舞者：假面舞會板專屬，用金黃色——跟狼隊的紅色/假面舞會裡的暖橘色都拉開，不會被誤認成狼隊 */
.rp-dancer .rp-role{background:rgba(191,144,0,0.14);color:#8a6800;}
/* 小女孩：大野狼+小女孩板專屬，用粉紫色，跟其他神職顏色都拉開 */
.rp-littlegirl .rp-role{background:rgba(150,90,200,0.12);color:#6a3a9e;}
/* 占卜師：全新的靛藍色，跟其他神職／狼隊顏色都拉開 */
.rp-diviner .rp-role{background:rgba(67,56,202,0.12);color:#3730a3;}
/* 魔術師（詭術之境變體）：沿用一般魔術師的配色 */
.rp-trickmage .rp-role{background:rgba(106,58,154,0.1);color:#582e88;}
/* 定序王子：詭術之境專屬，用跟騎士相近但區隔開的金褐色 */
.rp-sequenceprince .rp-role{background:rgba(150,110,20,0.12);color:#6e4f0e;}
/* 殭屍：第三方陣營，用跟邱比特相近但明顯不同色相的深綠色，避免跟好人的綠色混淆 */
.rp-zombie .rp-role{background:rgba(20,120,90,0.14);color:#0d5c44;}
.rp-unknown .rp-role{background:var(--bg3);color:var(--text3);}
.rp-tag-lucky{display:inline-block;margin-left:3px;font-size:8px;font-weight:800;padding:0 3px;border-radius:5px;background:rgba(154,124,40,0.18);color:var(--gold);vertical-align:1px;}
#jg-p-main{display:none;flex-direction:column;min-height:calc(100vh - 52px);padding:0;}
#jg-p-main.on{display:flex;}
#jg-play-area{display:flex;flex-direction:column;flex:1;min-height:0;}
#jg-main-scroll{flex:1;overflow-y:auto;padding:14px 16px 16px;max-width:540px;margin:0 auto;width:100%;}
#jg-side-panel{flex-shrink:0;}
#jg-roster-wrap{flex-shrink:0;position:sticky;bottom:0;z-index:50;max-width:540px;margin:0 auto;width:100%;}
#jg-vote-history-wrap{max-width:540px;margin:0 auto;width:100%;}
#jg-vote-history-wrap .roster-panel{border-top:1px solid var(--border);}
#jg-vote-history{max-height:220px;overflow-y:auto;}
.vh-block{margin-bottom:10px;}
.vh-block:last-child{margin-bottom:0;}
.vh-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px;}
.vh-pre{white-space:pre-wrap;font-size:11.5px;line-height:1.6;color:var(--text2);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:0;font-family:inherit;}
.vh-empty{font-size:12px;color:var(--text3);}
/* 電腦版：玩家狀態＋投票紀錄改成固定在右側的欄位，跟左側遊玩內容並排；
   手機版（預設）維持原本上下堆疊：內容在上、玩家狀態在中、投票紀錄在最下面。 */
@media (min-width:920px){
  #jg-play-area{flex-direction:row;align-items:flex-start;gap:20px;padding:14px 16px 16px;max-width:1180px;margin:0 auto;width:100%;}
  #jg-main-scroll{flex:1 1 auto;max-width:640px;padding:0;}
  #jg-side-panel{width:300px;display:flex;flex-direction:column;gap:14px;position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;}
  #jg-roster-wrap,#jg-vote-history-wrap{position:static;max-width:none;width:100%;}
  #jg-vote-history-wrap .roster-panel{border-top:none;border:1px solid var(--border);border-radius:var(--r);}
  .roster-panel{border-radius:var(--r);}
}
/* ── COLLAPSIBLE ROLE CARDS ── */
.rcol{border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;overflow:hidden;}
/* ── 角色與規則：搜尋框、目錄 ── */
.rules-search-wrap{margin:14px 0 10px;position:relative;}
.rules-search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:17px;color:var(--text3);pointer-events:none;line-height:0;}
.rules-search-input{width:100%;padding:13px 14px 13px 40px;font-size:15px;color:var(--text);background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r-sm);outline:none;-webkit-appearance:none;appearance:none;}
.rules-search-input:focus{border-color:var(--accent);}
.rules-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.toc-btn{display:inline-block;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:20px;text-decoration:none;white-space:nowrap;}
.toc-btn:active{opacity:0.65;}
/* 每個大區塊獨立成一個有邊框的卡片，彼此拉開間距，一眼就能看出區塊分界 */
.rules-section{scroll-margin-top:64px;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:18px 16px 20px;margin-bottom:18px;}
/* 第一層標題（對應目錄）：明顯大一號、粗體、底線分隔，跟底下的第二層標題拉開視覺層級 */
.rules-h1{font-size:19px;font-weight:800;color:var(--text);letter-spacing:0;text-transform:none;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--border2);display:flex;align-items:center;gap:8px;}
/* 第二層標題（區塊內的分類，如「平民／神職」「查驗結果／警長競選」）：維持小標籤感，但比卡片名稱明顯 */
.rules-h2{font-size:12.5px;font-weight:800;color:var(--accent);letter-spacing:0.6px;text-transform:none;margin:20px 0 10px;padding-left:9px;border-left:3px solid var(--accent);}
.rules-h2:first-of-type{margin-top:2px;}
/* ── RESPONSIVE CARD GRID (板子介紹／角色卡／名詞卡 在平板、電腦上彈性排列) ── */
.card-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-items:start;margin:16px 0;}
.card-grid > .rcol,.card-grid > .gcard{margin-bottom:0;max-width:460px;width:100%;}
/* 內容較長的頁籤在平板／電腦上放寬可視寬度，讓卡片有機會排成多欄 */
@media (min-width:680px){
  .tab-wide{max-width:680px;}
}
@media (min-width:920px){
  .tab-wide{max-width:900px;}
}
@media (min-width:1240px){
  .tab-wide{max-width:1180px;}
}
/* ── 法官の助手：設定表單與遊戲進行畫面維持一致的可讀寬度，不隨螢幕變寬而跳動 ── */
#jg-p-setup,#jg-p-roster{max-width:640px;margin:0 auto;}
#jg-main-scroll,#jg-roster-wrap{max-width:640px;}
/* 遊玩數據：總覽／排行榜維持較窄寬度（比手機寬一點即可），場次紀錄卡片維持較寬多欄 */
.data-narrow{max-width:460px;margin:0 auto;}
@media (min-width:680px){
  .data-narrow{max-width:560px;}
}
/* 連線房間入口畫面：手機／平板維持原本「設定板子卡片→加入房間卡片→目前進度」上下堆疊；
   電腦寬螢幕（≥680px）把設定板子、加入房間兩張卡片併成左右兩欄，目前進度仍固定在最下方
   整欄顯示，版面比單欄堆疊更緊湊好讀。 */
#room-entry-grid{display:flex;flex-direction:column;}
@media (min-width:680px){
  #room-entry-grid{flex-direction:row;align-items:stretch;gap:14px;}
  #room-entry-grid > .card{flex:1 1 0;margin-top:14px;}
}
/* ── 大型桌機螢幕（≥1440px）再放寬一階，兩側留白才不會隨螢幕越寬越誇張；1440px 以下
   （含手機、平板、一般筆電）完全不受影響，沿用上面原本那幾階。卡片類網格（.card-grid／
   .rpick-grid／.pgrid 等）本來就是 grid auto-fill，容器一變寬就會自動多排幾欄、不用
   逐一改每個網格本身；這裡只需要放寬外層容器的 max-width。法官の助手設定表單、遊玩數據
   總覽這類「閱讀寬度」頁面也跟著放寬一點，但刻意只放寬到 760px／680px，不跟著無上限
   拉伸，避免輸入欄位、按鈕在超寬螢幕上被拉得太誇張難以操作。 */
@media (min-width:1440px){
  .tab-wide{max-width:1400px;}
  #jg-p-setup,#jg-p-roster,#jg-main-scroll,#jg-roster-wrap{max-width:760px;}
  .data-narrow{max-width:680px;}
  #jg-play-area{max-width:1400px;}
  #jg-side-panel{width:340px;}
}
/* 法官の助手設定頁：手機、平板依序堆疊四個區塊；電腦寬螢幕（≥1240px）改成左右兩欄，
   左欄放基本設定／警長設定／開始遊戲，右欄整欄給選板子（角色格子最多，需要最寬的空間），
   兩側空間才不會空著。 */
@media (min-width:680px){
  #jg-p-setup{max-width:none;}
  .rpick-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));}
  .rpick .rp-ico{font-size:27px;}
  .rpick .rp-nm{font-size:14px;}
}
@media (min-width:1240px){
  .jg-setup-grid{display:grid;grid-template-columns:minmax(320px,380px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"basic board" "start board";column-gap:18px;align-items:start;}
  .jg-sec-basic{grid-area:basic;}
  .jg-sec-start{grid-area:start;}
  .jg-sec-board{grid-area:board;}
}
.rcol-hd{display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;background:var(--bg2);-webkit-user-select:none;user-select:none;}
.rcol-icon{font-size:22px;flex-shrink:0;}
.rcol-name{flex:1;font-size:15px;font-weight:700;}
.rcol-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;}
.rcol-arrow{font-size:12px;color:var(--text3);transition:transform 0.2s;flex-shrink:0;}
.rcol-hd.open .rcol-arrow{transform:rotate(90deg);}
.rcol-body{display:none;padding:12px 14px;background:var(--bg);border-top:1px solid var(--border);font-size:13px;color:var(--text2);line-height:1.75;}
.rcol-body.open{display:block;}
.rcol-body strong{color:var(--text);font-weight:600;}
.rcol-body ul{padding-left:16px;margin:4px 0;}
.rcol-body li{margin-bottom:4px;}
.role-link{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.board-role{font-weight:700;color:var(--text);}
/* 連線房間上帝視角的玩家狀態格子：橫向排列、自動換行成好幾排（人數多的話自然變成兩排以上），
   跟本機法官助手的「玩家狀態」欄位是同樣的用途（號碼＋姓名＋角色一目了然），只是排版改成
   適合手機小螢幕的格子狀，而不是本機版那種固定寬度的側欄。 */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px;}
.pcell{border:1px solid var(--border);border-radius:10px;padding:8px 6px;text-align:center;background:var(--bg2);}
.pcell.dead{opacity:0.55;}
.pcell .pnum{font-size:12px;font-weight:800;color:var(--text3);}
.pcell .pname{font-size:13px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcell .prole{font-size:11px;margin-top:4px;}
/* 上帝視角的文字紀錄：本機法官助手匯出格式的捲動視窗版本——等寬字體、可以上下滑動，
   一行一件事，跟本機的匯出文字框視覺上是同一種東西。 */
.godlog{max-height:320px;overflow-y:auto;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;background:var(--bg2);border-radius:10px;padding:10px 12px;white-space:pre-wrap;}
.godlog .gl-head{font-weight:800;color:var(--accent);margin-top:8px;}
.godlog .gl-head:first-child{margin-top:0;}
.godlog .gl-sub{padding-left:4px;color:var(--text2);}
/* ── ROLE PICKER ── */
.rpick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:10px 0;}
.rpick{border:2px solid var(--border2);border-radius:var(--r-sm);padding:10px 6px 8px;text-align:center;cursor:pointer;background:var(--bg3);transition:border-color 0.15s,background 0.15s;-webkit-user-select:none;user-select:none;position:relative;}
.rpick:active{opacity:0.7;}
.rpick.sel{border-color:var(--accent);background:rgba(184,56,40,0.07);}
.rpick .rp-ico{font-size:24px;}
.rpick .rp-nm{font-size:13px;font-weight:700;margin-top:4px;color:var(--text);line-height:1.3;}
.rpick .rp-nm.rp-nm-long{font-size:12px;white-space:nowrap;letter-spacing:-0.3px;}
.rpick .rp-cnt{position:absolute;top:4px;right:6px;font-size:12px;font-weight:800;color:var(--accent);}
.rpick.locked{cursor:default;border-color:var(--gold);background:rgba(154,124,40,0.08);}
.rpick.locked:active{opacity:1;}
.rpick .rp-lock{position:absolute;top:4px;right:6px;font-size:11px;}

/* ── 玩家名單設定：姓名輸入＋自動比對 ── */
.rname-row{display:flex;gap:6px;align-items:center;margin-bottom:8px;}
.rname-num{width:32px;height:32px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.rname-field{flex:1;position:relative;}
.rname-field input{width:100%;}
.rname-suggest{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);max-height:190px;overflow-y:auto;z-index:50;box-shadow:0 6px 16px rgba(0,0,0,0.15);display:none;}
.rname-suggest-item{padding:11px 12px;font-size:14px;cursor:pointer;border-bottom:1px solid var(--border);-webkit-user-select:none;user-select:none;}
.rname-suggest-item:last-child{border-bottom:none;}
.rname-suggest-item:active{background:var(--bg3);}
.rname-suggest-item.dup{color:var(--text3);}
.rname-suggest-item .rname-tag{float:right;font-size:11px;color:var(--text3);}
.rname-btn{width:38px;height:38px;flex-shrink:0;padding:0;margin:0;border-radius:10px;font-size:15px;}
/* 新版設定玩家名單：空格區（橫向分兩行）＋常用玩家按鈕區 */
.rname-slots-grid{display:grid;gap:8px;margin-bottom:16px;}
.rname-slot{position:relative;border:2px solid var(--border2);border-radius:var(--r-sm);padding:8px 6px;text-align:center;cursor:pointer;background:var(--bg);transition:border-color 0.15s,background 0.15s;}
.rname-slot.active{border-color:var(--accent);background:rgba(184,56,40,0.06);}
.rname-slot-num{font-size:12px;font-weight:800;color:var(--text3);}
.rname-slot-name{font-size:14px;font-weight:700;margin-top:2px;word-break:break-all;min-height:20px;}
.rname-slot-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;margin:0;border-radius:50%;font-size:11px;line-height:1;background:var(--bg3);border:1px solid var(--border);color:var(--text3);}
.rname-pool-grid{display:flex;flex-wrap:wrap;gap:6px;}
.rname-pool-btn{width:auto;flex:0 0 auto;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--bg2);border:1px solid var(--border2);margin:0;position:relative;white-space:nowrap;}
.rname-pool-btn.dup{opacity:0.55;}
.rname-pool-btn .rname-tag{margin-left:6px;font-size:11px;color:var(--text3);}
.rname-pool-btn.here{background:var(--accent);color:#fff;}
.rname-pool-btn .rname-count{margin-left:6px;font-size:11px;font-weight:600;color:var(--text3);}
.rname-pool-btn.here .rname-count{color:rgba(255,255,255,0.8);}
.rname-more-btn,.rname-edit-btn{width:auto;margin:10px 8px 0 0;padding:6px 14px;font-size:12.5px;}
.rname-pool-x{display:inline-block;margin-right:5px;color:var(--text3);font-size:11px;}
.rname-pool-x:hover{color:var(--wolf);}
.rname-dup-warn{font-size:12px;color:#922418;margin:-2px 0 10px;}

/* ══════ 遊玩數據分頁專用樣式 ══════ */

:root{
  --bg:#ffffff;--bg2:#f5f4f2;--bg3:#ebebea;--bg4:#e0dedc;
  --text:#1a1917;--text2:#5a5855;--text3:#9a9895;
  --border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.15);
  --wolf:#b83828;--vil:#3a7a2a;--seer:#2a65a8;
  --witch:#7c3aed;--hunter:#5f3e96;--guard:#1e887a;
  --cupid:#c23b7a;
  --thief:#8a6d1f;
  --diviner:#4338ca;
  --accent:#b83828;--gold:#9a7c28;
  --r:12px;--r-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100vh;background:var(--bg);font-family:-apple-system,'PingFang TC','Noto Sans TC',sans-serif;color:var(--text);}
.wrap{max-width:560px;margin:0 auto;padding:20px 16px 60px;}
.nbanner{text-align:center;padding:1.6rem 0 1.2rem;}
.nicon{font-size:44px;margin-bottom:8px;}
h1{font-size:26px;font-weight:800;letter-spacing:-0.5px;}
.sub{font-size:13px;color:var(--text2);line-height:1.6;margin-top:6px;}
.section-title{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:1.2px;text-transform:uppercase;margin:26px 0 10px;}
.big-section-title{font-size:19px;font-weight:800;color:var(--text);letter-spacing:0.2px;text-transform:none;margin:28px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--border2);}
.big-section-title:first-child{margin-top:4px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;text-align:center;}
.stat-num{font-size:24px;font-weight:800;}
.stat-lbl{font-size:11px;color:var(--text2);margin-top:3px;}
.stat-card.evil .stat-num{color:#922418;}
.stat-card.good .stat-num{color:#2a601c;}
.bar{height:8px;border-radius:4px;background:var(--bg3);overflow:hidden;display:flex;margin-top:10px;}
.bar>span{display:block;height:100%;}
.bar .g{background:var(--vil);}
.bar .e{background:var(--wolf);}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:4px 14px;margin-bottom:10px;}
.row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;}
.row:last-child{border-bottom:none;}
.rank{width:22px;font-size:13px;font-weight:800;color:var(--text3);flex-shrink:0;text-align:center;}
.rank-nr{font-size:10px;font-weight:700;color:var(--text3);}
.pd-unranked-details{border-top:1px dashed var(--border2);margin-top:4px;}
.pd-unranked-details>summary{padding:10px 0 6px;font-size:11.5px;color:var(--text3);cursor:pointer;list-style:none;}
.pd-unranked-details>summary::-webkit-details-marker{display:none;}
.pd-unranked-details>summary::before{content:'▶';display:inline-block;margin-right:6px;font-size:9px;transition:transform 0.15s;}
.pd-unranked-details[open]>summary::before{transform:rotate(90deg);}
.row.unranked{opacity:0.6;}
.av{width:38px;height:38px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:var(--text2);}
.nm-wrap{flex:1;min-width:0;}
.nm{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.streak-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;font-size:10.5px;font-weight:800;background:rgba(230,126,34,0.15);color:#b8560f;vertical-align:middle;}
.nm-sub{font-size:11px;color:var(--text3);margin-top:1px;}
.wr{font-size:17px;font-weight:800;flex-shrink:0;}
.wr-sub{font-size:10px;color:var(--text3);text-align:right;}
.arrow{font-size:11px;color:var(--text3);transition:transform .2s;flex-shrink:0;margin-left:2px;}
.arrow.open{transform:rotate(90deg);}
.detail{display:none;padding:4px 0 14px;}
.detail.open{display:block;}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px;}
.chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;background:var(--bg3);color:var(--text2);}
.chip.evil{background:rgba(184,56,40,0.1);color:#922418;}
.chip.good{background:rgba(58,122,42,0.1);color:#2a601c;}
.chip.third{background:rgba(194,59,122,0.1);color:#8f2a5e;}
.chip.clickable{cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid transparent;}
.chip.clickable.active{border-color:currentColor;}

/* ── GUIDE ARTICLE TAGS ── */
.guide-hd-main{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;}
.guide-tag{font-size:9px;font-weight:800;padding:1px 6px;border-radius:6px;line-height:1.5;white-space:nowrap;}
.hist{display:flex;flex-direction:column;gap:6px;}
.hist-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text2);padding:7px 10px;background:var(--bg);border-radius:var(--r-sm);border:1px solid var(--border);}
.hist-res{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;}
.hist-res.win{background:var(--vil);}
.hist-res.lose{background:var(--wolf);}
.hist-res.unclear{background:var(--text3);}
.hist-role{font-weight:700;color:var(--text);flex-shrink:0;}
.hist-date{margin-left:auto;color:var(--text3);font-size:11px;flex-shrink:0;}
.pd-formula-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px;font-size:12.5px;color:var(--text2);line-height:1.7;}
.pd-formula-box b{color:var(--text);}
.pd-formula-box code{display:block;background:var(--bg3);border-radius:6px;padding:8px 10px;margin:6px 0;font-size:12px;color:var(--text);white-space:pre-wrap;}
.pd-formula-toggle{font-size:12px;color:var(--text2);cursor:pointer;margin:0 0 10px;user-select:none;}
.pd-seg{display:flex;background:var(--bg3);border-radius:20px;padding:2px;gap:2px;flex-shrink:0;}
.pd-seg-btn{border:none;background:none;font-size:11px;padding:5px 10px;border-radius:16px;color:var(--text3);cursor:pointer;white-space:nowrap;font-weight:600;width:auto;margin-top:0;}
.pd-seg-btn.active{background:var(--accent);color:#fff;}
.filters{display:flex;gap:8px;margin-bottom:12px;}
select{
  flex:1;padding:11px 10px;font-size:13px;color:var(--text);
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r-sm);
  outline:none;-webkit-appearance:none;appearance:none;
}
.gcount{font-size:12px;color:var(--text3);margin-bottom:10px;}
.gcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px;cursor:pointer;-webkit-user-select:none;user-select:none;}
.gcard-hd{display:flex;align-items:center;gap:10px;}
.gcard-title{flex:1;min-width:0;}
.gcard-board{font-size:15px;font-weight:700;color:var(--text);}
.gcard-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.3px;flex-shrink:0;}
.bw{background:rgba(184,56,40,0.1);color:#922418;}
.bv{background:rgba(58,122,42,0.1);color:#2a601c;}
.bthird{background:rgba(194,59,122,0.1);color:#8f2a5e;}
.bu{background:var(--bg3);color:var(--text3);}
.gcard-body{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.gcard-body.open{display:block;}
.roster-table{width:100%;border-collapse:collapse;margin-bottom:12px;}
.roster-table td{padding:6px 4px;font-size:13px;border-bottom:1px solid var(--border);}
.roster-table td:first-child{width:24px;color:var(--text3);font-weight:700;}
.roster-table td:last-child{text-align:right;}
.log-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;line-height:1.8;color:var(--text2);white-space:pre-wrap;font-family:ui-monospace,'SF Mono',Menlo,monospace;max-height:340px;overflow-y:auto;}
.note{background:rgba(168,94,16,0.06);border:1px solid rgba(168,94,16,0.2);border-radius:var(--r-sm);padding:13px 14px;font-size:13px;color:#864a08;margin:6px 0 10px;line-height:1.7;}
.note b{display:block;margin-bottom:4px;}
.empty{text-align:center;color:var(--text3);font-size:13px;padding:24px 0;}

/* ── 盜賊候選身分大字報：左右兩張卡牌，點擊挑選、動畫收合 ── */
.jg-thief-cards-wrap{display:flex;gap:5vw;align-items:center;justify-content:center;flex-wrap:nowrap;width:100%;}
.jg-thief-card{width:44vw;max-width:440px;height:min(66vh,600px,135vw);border:3px solid rgba(255,255,255,0.65);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;padding:16px 8px;background:rgba(255,255,255,0.04);cursor:pointer;transition:transform 0.45s cubic-bezier(.22,.8,.32,1),opacity 0.4s ease,filter 0.4s ease,flex-basis 0.45s ease,width 0.45s ease,margin 0.45s ease,border-width 0.3s ease;flex:0 0 auto;box-sizing:border-box;}
.jg-thief-card .jg-tc-num{font-size:clamp(36px,min(12vw,10vh),110px);font-weight:900;line-height:1;opacity:0.85;}
.jg-thief-card .jg-tc-name{font-size:clamp(34px,min(13vw,20vh),96px);font-weight:900;line-height:1.2;word-break:break-word;}
/* 手機直拿：卡片又高又窄，角色名改成一字一行直排，字才能放到最大 */
@media (orientation:portrait) and (max-width:600px){.jg-thief-card .jg-tc-name{font-size:min(22vw,10vh);line-height:1.1;}.jg-thief-card .jg-tc-name span{display:block;}}
.jg-thief-card.picked{transform:scale(1.08);border-color:#ffd166;box-shadow:0 0 24px rgba(255,209,102,0.35);}
.jg-thief-card.faded{transform:scale(0.6);opacity:0;width:0;max-width:0;min-height:0;padding:0;margin:0;border-width:0;pointer-events:none;overflow:hidden;}
.jg-thief-card.jtc-disabled{opacity:0.32;filter:grayscale(1);cursor:default;}
.jg-thief-bigcard-bottom{margin-top:20px;min-height:1px;}
.jg-thief-bigcard-bottom .jtc-picked-label{font-size:clamp(18px,5vw,28px);color:#ffd166;font-weight:800;}
.jg-thief-bigcard-bottom .jtc-forced-warn{font-size:clamp(15px,3.6vw,20px);color:#ff7a7a;font-weight:700;}
.jg-thief-bigcard-bottom .jtc-btn-row{display:flex;gap:14px;margin-top:16px;justify-content:center;}
.jg-thief-bigcard-bottom .jtc-btn-row button{width:auto;margin:0;padding:13px 24px;font-size:16px;border-radius:12px;}

/* ── 連線房間幾個主要階段的橫幅：拿掉 emoji 圖示之後，改用淡色底區分「現在是夜晚／
   白天／上帝視角／哪一方獲勝」，不用圖案也能一眼看出現在是什麼狀態。── */
.nbanner-night{background:rgba(30,41,88,0.08);border-radius:var(--r);}
.nbanner-day{background:rgba(184,131,11,0.1);border-radius:var(--r);}
.nbanner-god{background:rgba(124,58,237,0.08);border-radius:var(--r);}
.nbanner-good{background:rgba(58,122,42,0.12);border-radius:var(--r);}
.nbanner-evil{background:rgba(184,56,40,0.12);border-radius:var(--r);}

/* ══════════════════════════════════════════════════════════════════
   Apple 介面風格：從「遊玩數據」單頁試套用開始，確認滿意後逐步推廣到
   其他分頁。.apple-ui-preview 這個 class 目前掛在 index.html 的
   #t-data／#t-rules／#t-judge／#t-guide／#t-room／#jg-p-roster 這幾個
   容器上——法官の助手「主持中」的實際遊戲流程畫面（#jg-p-main）因為
   裡面還有些自訂的深色背景特效（例如盜賊候選卡）沒有一併盤點過，這次
   故意先不動，避免半套樣式讓正在進行的遊戲畫面變得不一致，等之後另外
   仔細過一輪再套用。參考 Apple Human Interface Guidelines 的幾個核心
   原則：更大的字級層級對比、iOS 分組列表（grouped list）的卡片＋內嵌
   分隔線手法、柔和陰影取代生硬邊框、iOS 慣用的彈性緩動曲線與輕觸回饋
   （按下縮小＋變淡，而不是整塊變色）。頁面背景維持原本的 var(--bg)／
   卡片維持原本的 var(--bg2)，不整頁換成灰底＋白卡對比（試過那個版本，
   按鈕在灰底上會糊在一起看不清楚，所以改回只調陰影/圓角/字級這種比較
   內斂的做法）。全部規則都包在 .apple-ui-preview
   底下，不會影響沒掛這個 class 的畫面；原本的規則完全沒有刪改，只是被
   這裡的規則覆蓋——要復原某一頁的話，把 index.html 裡對應容器上的
   apple-ui-preview 這個 class 拿掉即可，其餘完全不用動。
   只調視覺樣式，沒有動到任何 .js 邏輯或 HTML 結構／按鈕行為。
   ══════════════════════════════════════════════════════════════════ */
.apple-ui-preview{
  --au-radius-lg:20px; --au-radius-md:14px; --au-radius-sm:10px;
  --au-ease:cubic-bezier(.22,1,.36,1);
  --au-shadow-sm:0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.03);
  --au-shadow-md:0 2px 6px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.05);
  --au-sep:rgba(0,0,0,0.08);
}

/* 大標題區：比照 iOS Large Title，字級拉大、字距收緊，副標用較輕的顏色跟字重，
   整體留白也拉大一截，讓頁首更有「呼吸感」。 */
.apple-ui-preview .nbanner{padding:2.2rem 0 1.4rem;}
.apple-ui-preview h1{font-size:34px;font-weight:800;letter-spacing:-0.6px;}
.apple-ui-preview .sub{font-size:14px;font-weight:500;color:var(--text2);margin-top:5px;}

/* 區塊標題：拿掉原本略生硬的底線分隔，改用字級與字距本身建立層級（iOS Title2 的感覺），
   段落之間留白也加大，區塊彼此更容易一眼分開。 */
.apple-ui-preview .big-section-title{
  font-size:22px;font-weight:800;letter-spacing:-0.2px;color:var(--text);
  border-bottom:none;padding-bottom:0;margin:32px 0 12px;
}
.apple-ui-preview .big-section-title:first-child{margin-top:2px;}
.apple-ui-preview .section-title{letter-spacing:0.8px;margin:24px 0 8px;}

/* 卡片：柔和陰影取代生硬的 1px 邊框，圓角加大（iOS 的「連續圓角」手感），
   輕觸有回饋（按下微縮＋變淡），呼應 iOS 分組列表卡片的觸感。 */
.apple-ui-preview .card,
.apple-ui-preview .stat-card,
.apple-ui-preview .gcard,
.apple-ui-preview .pd-formula-box{
  border:none;border-radius:var(--au-radius-lg);box-shadow:var(--au-shadow-sm);
  background:var(--bg2);
}
.apple-ui-preview .gcard{
  cursor:pointer;transition:transform .35s var(--au-ease),box-shadow .35s var(--au-ease);
}
.apple-ui-preview .gcard:active{transform:scale(0.98);box-shadow:var(--au-shadow-sm);}

/* 總覽數字卡：字級拉大、字距收緊，卡片本身也加上輕觸回饋，數字是這個區塊的主角。 */
.apple-ui-preview .stat-num{font-size:28px;font-weight:800;letter-spacing:-0.5px;}
.apple-ui-preview .stat-lbl{font-size:11.5px;font-weight:600;color:var(--text3);margin-top:4px;}
.apple-ui-preview .stat-card{padding:16px 14px;}
.apple-ui-preview .bar{height:6px;border-radius:3px;margin-top:12px;}

/* 排行榜：拿掉每一列各自的邊框感（原本靠 .card 的外框＋列與列之間的分隔線），
   改成 iOS 分組列表常見的「內縮分隔線」——線不會頂到卡片左右邊緣，會跟頭像對齊，
   看起來更像一份連續的名單而不是一格一格分開的元件。輕觸整列會有淡淡的回饋。 */
.apple-ui-preview #leaderboard.card{padding:6px 16px;}
.apple-ui-preview #leaderboard .row{
  border-bottom:none;padding:13px 0;position:relative;
  transition:opacity .15s var(--au-ease);
}
.apple-ui-preview #leaderboard .row:not(:last-child)::after{
  content:'';position:absolute;left:48px;right:0;bottom:0;height:1px;background:var(--au-sep);
}
.apple-ui-preview #leaderboard .row:active{opacity:0.5;}
.apple-ui-preview .av{border-radius:12px;} /* 頭像圓角改成 iOS App Icon 常見的「圓角方形」，跟純圓形拉開一點層次 */

/* 分段控制（簡單勝率／積分）：改成 iOS 原生 UISegmentedControl 的配色與觸感——
   淡灰底、選中的那一段是白底＋柔和陰影浮起，而不是純色填滿。 */
.apple-ui-preview .pd-seg{background:rgba(120,120,128,0.12);border-radius:999px;padding:3px;}
.apple-ui-preview .pd-seg-btn{border-radius:999px;font-weight:700;transition:background .25s var(--au-ease),color .25s var(--au-ease),box-shadow .25s var(--au-ease);}
.apple-ui-preview .pd-seg-btn.active{background:var(--bg);color:var(--text);box-shadow:var(--au-shadow-sm);}

/* 特別獎項：卡片圓角加大、加上柔和陰影，選中狀態改成陰影加深＋微縮，比原本純色外框更立體。
   背景也一併改成白色，跟排行榜/總覽卡片同一套「白卡浮在灰底上」的邏輯一致。 */
.apple-ui-preview .award-card{background:var(--bg2);border-radius:var(--au-radius-md);box-shadow:var(--au-shadow-sm);transition:transform .3s var(--au-ease),box-shadow .3s var(--au-ease);}
.apple-ui-preview .award-card:active{transform:scale(0.95);}
.apple-ui-preview .award-card.sel{box-shadow:0 0 0 2px var(--accent),var(--au-shadow-sm);}
.apple-ui-preview .award-detail{background:var(--bg2);border:none;border-radius:var(--au-radius-md);box-shadow:var(--au-shadow-sm);}

/* 篩選下拉選單：圓角加大、拿掉生硬邊框改陰影，背景改白色，維持原本的排列方式不變。 */
.apple-ui-preview .filters select{border:none;border-radius:var(--au-radius-sm);box-shadow:var(--au-shadow-sm);background:var(--bg2);}

/* 標籤（陣營 chip）：改成藥丸狀更飽滿的觸感，可點擊的加上輕觸回饋。 */
.apple-ui-preview .chip{border-radius:999px;font-weight:700;}
.apple-ui-preview .chip.clickable{transition:transform .2s var(--au-ease);}
.apple-ui-preview .chip.clickable:active{transform:scale(0.94);}

/* 按鈕（問題回報）：拿掉生硬邊框，統一走陰影，輕觸回饋改成 iOS 常見的「微縮＋淡化」而不是整塊變半透明。 */
.apple-ui-preview button{border:none;box-shadow:var(--au-shadow-sm);transition:transform .2s var(--au-ease),opacity .2s var(--au-ease);}
.apple-ui-preview button:active{transform:scale(0.97);opacity:0.7;}
.apple-ui-preview button.primary{box-shadow:0 2px 8px rgba(184,56,40,0.25);}

/* ── 以下是「遊玩數據」之外，把同一套風格延伸套用到其他分頁時額外需要的規則——
   角色與規則、攻略參考、法官の助手、連線房間都共用上面那些卡片/按鈕/分段控制的規則
   （選擇器本來就沒有寫死只認 #t-data，只要外層有 .apple-ui-preview 這個 class 就會套用），
   這裡只補這幾頁專屬、上面還沒涵蓋到的元件。一樣完全沒有動任何 .js 邏輯或 HTML 結構，
   純粹是視覺樣式；也一樣只在有掛 .apple-ui-preview 這個 class 的分頁才生效。── */

/* 表單欄位（文字輸入/數字輸入/下拉選單）：拿掉生硬邊框改陰影，背景改白色，跟卡片同一套語彙。 */
.apple-ui-preview input[type=text],
.apple-ui-preview input[type=number],
.apple-ui-preview select{
  border:none;box-shadow:var(--au-shadow-sm);background:var(--bg2);border-radius:var(--au-radius-sm);
}
.apple-ui-preview input[type=text]:focus,
.apple-ui-preview input[type=number]:focus,
.apple-ui-preview select:focus{box-shadow:0 0 0 2px var(--accent),var(--au-shadow-sm);}

/* 提示框（info／警告／成功／危險四種語氣）：拿掉邊框改陰影，背景改白色，色彩只保留文字顏色
   跟左側語氣，看起來更像 iOS 的提示卡片而不是傳統網頁的警告框。 */
.apple-ui-preview .info,
.apple-ui-preview .info-warn,
.apple-ui-preview .info-danger,
.apple-ui-preview .info-success,
.apple-ui-preview .note{
  border:none;box-shadow:var(--au-shadow-sm);border-radius:var(--au-radius-sm);background:var(--bg2);
}

/* 角色卡（角色與規則）：拿掉外框改陰影，圓角加大，各陣營底色維持（半透明色調在白卡上一樣看得出來）。 */
.apple-ui-preview .role-card{border:none;box-shadow:var(--au-shadow-sm);border-radius:var(--au-radius-md);}

/* 可收合的角色卡片／夜晚流程步驟（.rcol／.script-step，角色與規則／法官の助手共用同一種
   「標題列可點開、展開內容」的手風琴元件）：拿掉外框改陰影，展開後的內容區塊背景維持白色
   跟標題列一致（不像原本刻意用 --bg／--bg2 區分兩層）。 */
.apple-ui-preview .rcol,
.apple-ui-preview .script-step{
  border:none;box-shadow:var(--au-shadow-sm);border-radius:var(--au-radius-md);
}
.apple-ui-preview .rcol-hd,
.apple-ui-preview .ss-header{background:var(--bg2);border-radius:var(--au-radius-md);}
.apple-ui-preview .rcol-body,
.apple-ui-preview .ss-body{background:var(--bg2);border-top:1px solid var(--au-sep);}
.apple-ui-preview .rcol-hd.open{border-radius:var(--au-radius-md) var(--au-radius-md) 0 0;}

/* 板子人數配置格（.comp-item）、名詞卡（.guide-tag-card）：背景改白色，陰影取代邊框。 */
.apple-ui-preview .comp-item,
.apple-ui-preview .guide-tag-card{background:var(--bg2);border:none;box-shadow:var(--au-shadow-sm);border-radius:var(--au-radius-sm);}

/* 法官助手玩家狀態欄（.roster-panel／.rp）：整條面板背景改白色，跟頁面灰底拉開層次；
   每個玩家格子拿掉邊框改陰影，死亡格子維持原本的變灰效果。 */
.apple-ui-preview .roster-panel{background:var(--bg2);border-top:none;box-shadow:0 -1px 8px rgba(0,0,0,0.04);}
.apple-ui-preview .rp{border:none;box-shadow:var(--au-shadow-sm);background:var(--bg);}

/* 連線房間上帝視角的玩家狀態格（.pgrid／.pcell）：跟 .rp 同一種處理，白底頁面上用淺灰格子，
   拉開跟卡片本身的層次。 */
.apple-ui-preview .pcell{border:none;box-shadow:var(--au-shadow-sm);background:var(--bg2);}

/* 選人格子（開槍/查驗/自爆帶人等圓點格 .tap-grid .ptap、.rpick-grid .rpick）：拿掉方形
   外框改陰影＋圓角，選中狀態用外框強調色標示，輕觸有微縮回饋。 */
.apple-ui-preview .ptap,
.apple-ui-preview .rpick{
  border:none;box-shadow:var(--au-shadow-sm);border-radius:var(--au-radius-sm);
  background:var(--bg2);transition:transform .15s var(--au-ease),box-shadow .15s var(--au-ease);
}
.apple-ui-preview .ptap:active,
.apple-ui-preview .rpick:active{transform:scale(0.93);}
.apple-ui-preview .ptap.sel,
.apple-ui-preview .rpick.sel{box-shadow:0 0 0 2px var(--accent),var(--au-shadow-sm);}
.apple-ui-preview .rpick.locked{box-shadow:0 0 0 2px var(--gold),var(--au-shadow-sm);}

/* 台詞框（.speech，法官助手念給玩家聽的台詞）：維持既有的「引言」視覺重點，只是邊框換陰影。 */
.apple-ui-preview .speech{border:none;box-shadow:var(--au-shadow-sm);background:var(--bg2);border-radius:var(--au-radius-sm);}

/* 死訊/勝負/倒數這幾種game-state banner：拿掉邊框改陰影，色調底色維持，看起來更像卡片而不是警告框。 */
.apple-ui-preview .killed-box,
.apple-ui-preview .role-reveal,
.apple-ui-preview .win-side{border:none;box-shadow:var(--au-shadow-sm);}
.apple-ui-preview .timer-ring{background:var(--bg2);border-radius:var(--au-radius-md);box-shadow:var(--au-shadow-sm);}

/* 文字紀錄／log 區塊（.godlog／.log-box）、警長參選圓形編號牌（.step-badge）：拿掉邊框改陰影。 */
.apple-ui-preview .godlog,
.apple-ui-preview .log-box{border:none;box-shadow:var(--au-shadow-sm);background:var(--bg2);}
.apple-ui-preview .step-badge{background:var(--bg2);box-shadow:var(--au-shadow-sm);}

/* 玩家名單設定（.rname-slot／.rname-pool-btn）：跟其餘選人格子同一套處理。 */
.apple-ui-preview .rname-slot,
.apple-ui-preview .rname-pool-btn{border:none;box-shadow:var(--au-shadow-sm);background:var(--bg2);}
.apple-ui-preview .rname-pool-btn.here{background:var(--accent);color:#fff;}
.apple-ui-preview .rname-slot.active{box-shadow:0 0 0 2px var(--accent),var(--au-shadow-sm);}

/* 個人遊玩紀錄（.hist-item）：跟其餘卡片同一套白底陰影處理。 */
.apple-ui-preview .hist-item{border:none;box-shadow:var(--au-shadow-sm);background:var(--bg2);}


/* 發牌房認領座位：手機一列一位，電腦一列三位（跟「角色與規則」的卡片排法一樣）。 */
.deal-seat-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px;}
.deal-seat-grid .deal-seat{margin:0;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm,10px);background:var(--bg2);}
@media (min-width:720px){ .deal-seat-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* 發牌房／連線房間的玩家名單：手機一欄依序排下來，電腦一列三人。 */
.pi-grid{display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px;}
@media (min-width:720px){ .pi-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.pi-cell{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm,10px);background:var(--bg2);min-width:0;}
.pi-cell.pi-me{border-color:var(--accent);}
.pi-cell.pi-dead{opacity:0.5;}
.pi-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--bg);border:1px solid var(--border);}
.pi-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pi-tag{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--bg);border:1px solid var(--border);}
/* 名單標籤：每種一欄（固定寬度，上下對齊），各自不同顏色。 */
.pi-cell .pi-name{flex:1 1 auto;min-width:0;}
.pi-slot{display:flex;justify-content:center;flex:0 0 3.4em;font-size:10.5px;margin-left:-4px;}
.pi-slot-sheriff{flex-basis:4.9em;}
.pi-slot-infected{flex-basis:4.4em;}
.pi-slot .pi-tag{font-size:10.5px;padding:1px 5px;}
.pi-tag .jg-ico{width:1em;height:1em;}
.pi-tag{white-space:nowrap;display:inline-flex;align-items:center;gap:2px;}
.pi-tag-sheriff{background:#f6c445;border-color:#e0aa1f;color:#4a3500;}
.pi-tag-candidate{background:#dbe8f7;border-color:#9dbbe0;color:#1f4f86;}
.pi-tag-withdrawn{background:#ececec;border-color:#c9c9c9;color:#555;}
.pi-tag-lover{background:#fbe0ea;border-color:#eba6bf;color:#9c2457;}
.pi-tag-infected{background:#e2f2dc;border-color:#a6d394;color:#2f6a1d;}
.pi-votes{font-size:13.5px;line-height:1.8;padding:2px 0 6px 2px;}
.pi-sheriff{margin-top:14px;line-height:1.9;font-size:14px;}
.pi-muted{font-size:12px;color:var(--text2);margin-left:4px;}

/* ── 版本切換：公開版沒有的功能（見 js/edition.js 的 data-feature）一律藏起來 ── */
[data-feature-off]{display:none!important;}

/* ── 首頁（公開版）：logo、標語、翻卡動畫、兩個主要按鈕、功能介紹 ── */
.home-hero{max-width:720px;margin:0 auto;text-align:center;padding:12px 0 8px;}
.home-logo{height:96px;width:auto;display:block;margin:0 auto 6px;}
.home-title{font-family:'Noto Serif TC',serif;font-size:32px;font-weight:900;letter-spacing:2px;margin-top:4px;}
.home-sub{font-size:15px;color:var(--text2);line-height:1.8;margin-top:10px;}
.home-nb{display:inline-block;}
/* 開始主持：獨立在設定區塊最後（手機排在選板子下面；電腦寬螢幕在左欄基本設定下面） */
.jg-sec-start{margin:4px 0 8px;}
.jg-start-btn{margin-top:0;font-size:17px;padding:16px 12px;}
/* 設定玩家名單頁：取消／完成兩顆小按鈕並排、靠右 */
.jg-roster-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.jg-roster-actions button{width:auto;min-width:96px;margin-top:0;padding:10px 22px;font-size:15px;}
.home-cards{display:flex;justify-content:center;gap:10px;margin:26px auto 22px;perspective:900px;}
.home-card{width:84px;height:118px;flex-shrink:0;}
.home-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.3,1);}
.home-card.flipped .home-card-inner{transform:rotateY(180deg);}
.home-card-side{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 3px 10px rgba(0,0,0,0.12);}
.home-card-back{background:#2b2420;color:#e8d9b0;font-size:38px;border:2px solid #9a7c28;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0.04) 0 6px,transparent 6px 12px);}
.home-card-front{background:var(--bg);border:2px solid var(--border2);transform:rotateY(180deg);}
.home-card-ico{font-size:34px;line-height:1;}
.home-card-wolf{color:var(--wolf);}
.home-card-good{color:var(--seer);}
.home-card-name{font-size:14px;font-weight:800;color:var(--text);}
.home-actions{display:flex;gap:10px;max-width:440px;margin:0 auto;}
.home-actions button{flex:1;margin-top:0;font-size:16px;padding:14px 10px;}
@media (max-width:600px){
  .home-logo{height:72px;}
  .home-title{font-size:26px;}
  .home-sub{font-size:14px;}
  .home-cards{gap:6px;}
  .home-card{width:58px;height:84px;}
  .home-card-back{font-size:26px;}
  .home-card-ico{font-size:24px;}
  .home-card-name{font-size:11.5px;}
}
@media (prefers-reduced-motion: reduce){
  .home-card-inner{transition:none;}
}

/* ── 公開版選板子：自己畫的下拉選單（上鎖的板子畫一個小鎖、不能選），外觀比照 apple-ui-preview 的 select ── */
.jg-bp{position:relative;}
.jg-bp-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0;padding:11px 14px;font-size:13px;font-weight:400;text-align:left;color:var(--text);background:var(--bg2);border:none;border-radius:var(--au-radius-sm,10px);box-shadow:var(--au-shadow-sm,0 1px 3px rgba(0,0,0,0.08));cursor:pointer;}
.jg-bp-arrow{color:var(--text3);transform:rotate(90deg);display:inline-flex;}
.jg-bp-btn[aria-expanded="true"] .jg-bp-arrow{transform:rotate(-90deg);}
.jg-bp-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;max-height:360px;overflow-y:auto;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,0.14);padding:4px;}
.jg-bp-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;font-size:14px;border-radius:var(--r-sm);cursor:pointer;}
.jg-bp-item:hover{background:var(--bg2);}
.jg-bp-item.sel{font-weight:700;color:var(--accent);}
.jg-bp-item.locked{color:var(--text3);cursor:not-allowed;}
.jg-bp-item.locked:hover{background:none;}
.jg-bp-lock{display:inline-flex;font-size:15px;color:var(--text3);}

/* ── 新手導覽／演練（js/tour.js）：最下面固定的說明面板＋要按的東西加外框 ── */
body.tour-on{padding-bottom:220px;}
#jg-tour{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9990;width:calc(100% - 24px);max-width:560px;background:var(--bg);border:2px solid var(--accent);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.22);padding:14px 16px 12px;}
#jg-tour.jg-tour-top{bottom:auto;top:12px;z-index:10000;}
.jg-tour-head{font-size:13px;font-weight:800;color:var(--accent);}
.jg-tour-body{font-size:15px;line-height:1.7;margin-top:6px;color:var(--text);}
.jg-tour-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap;}
.jg-tour-btns button{width:auto;margin-top:0;padding:9px 18px;font-size:14px;}
.tour-hl{outline:3px solid var(--gold)!important;outline-offset:3px;position:relative;z-index:2;animation:jgTourPulse 1.4s ease-in-out infinite;}
@keyframes jgTourPulse{0%,100%{box-shadow:0 0 0 0 rgba(154,124,40,0.55);}50%{box-shadow:0 0 0 9px rgba(154,124,40,0);}}
#jg-tour.jg-tour-nudge{animation:jgTourNudge .4s;}
@keyframes jgTourNudge{0%,100%{transform:translateX(-50%);}25%{transform:translateX(calc(-50% - 6px));}75%{transform:translateX(calc(-50% + 6px));}}
.jg-tour-open{width:auto;margin-top:0;padding:6px 14px;font-size:13px;}
@media (prefers-reduced-motion: reduce){
  .tour-hl{animation:none;}
  #jg-tour.jg-tour-nudge{animation:none;}
}