/* hub.css（星核寶庫獨立站 v2.0）：全篇章入口列、匯入勳章碼、各篇章實驗艙面板 */
.hub-bar{position:relative;margin:0 0 22px;padding:16px 22px 14px;border-radius:20px;border:1px solid #786649;background:radial-gradient(ellipse at 15% 0%,rgba(243,217,155,.12),transparent 55%),linear-gradient(140deg,#172930,#142028);box-shadow:0 10px 45px #0002,inset 0 1px 0 #f4deac15;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.hub-left{flex:1 1 360px;min-width:0}
.hub-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:21px;font-weight:700;letter-spacing:.04em;color:#f1d7a3}
.hub-title b{font-size:30px;line-height:1;color:#f6dfa6;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(246,223,166,.35)}
.hub-title small{font-size:13px;color:var(--muted,#8fa6ad);font-weight:500}
.hub-title .hub-tix{margin-left:6px;padding:4px 12px;border-radius:999px;border:1px solid rgba(243,217,155,.45);background:rgba(243,217,155,.08);font-size:13.5px;font-weight:700;color:#f6dfa6;white-space:nowrap}
.hub-title .hub-tix i{font-style:normal;font-size:16px;font-variant-numeric:tabular-nums}
.hub-sub{margin-top:6px;font-size:13px;line-height:1.65;color:#c9d6d8}
.hub-sub b{color:#f1d7a3;font-weight:600}
.hub-msg{margin-top:8px;padding:9px 14px;border-radius:10px;background:rgba(129,222,209,.1);border:1px solid rgba(129,222,209,.4);font-size:13.5px;line-height:1.6;color:#dff7f2;animation:hubIn .5s ease}
.hub-msg b{color:#9df0e3}
.hub-msg.warn{background:rgba(255,159,125,.1);border-color:rgba(255,159,125,.45);color:#ffe0d3}
@keyframes hubIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.hub-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hub-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;border:1px solid #c8aa70;background:#10232a;color:#f1d7a3;font-size:14px;font-weight:700;letter-spacing:.04em;cursor:pointer;line-height:1.2;white-space:nowrap;transition:.18s}
.hub-btn:hover{background:linear-gradient(110deg,#dfbe7c,#f1d7a3);color:#1e2928}
.hub-btn.gold{background:linear-gradient(110deg,#dfbe7c,#f1d7a3);color:#1e2928;border-color:#f3d99b;box-shadow:0 3px 15px #debb7c22}
.hub-btn.gold:hover{background:#f8dea5}
.hub-btn .n{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;background:#1e2928;color:#f6dfa6;font-size:12px;font-variant-numeric:tabular-nums}
.hub-btn.gold .n{background:#1e2928cc}
.hub-box{flex-basis:100%;margin-top:2px;padding:12px 14px;border-radius:12px;background:#0c1b22;border:1px solid #334a53;font-size:13px;line-height:1.65;color:#c9d6d8}
.hub-box b{color:#f1d7a3}
.hub-box textarea{width:100%;box-sizing:border-box;min-height:84px;margin-top:8px;padding:10px;border-radius:9px;border:1px solid #38515a;background:#091a22;color:#dbe8eb;font:600 12px/1.5 "IBM Plex Mono",Menlo,Consolas,monospace;word-break:break-all;resize:vertical}
.hub-box .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.hub-box .row small{color:#9df0e3;font-size:12.5px}
.hub-box .row small.bad{color:#f1b8b6}
/* 各篇章實驗艙 */
.hub-dlg{background:#10212a;color:var(--text,#dbe8eb);border:1px solid #c8aa70;border-radius:22px;padding:26px 28px 24px;width:min(760px,calc(100% - 32px));box-shadow:0 0 100px #000b;max-height:90vh;overflow-y:auto}
.hub-dlg h2{font-size:22px;margin:0 0 4px;color:#f1d7a3}
.hub-dlg .lead{font-size:13.5px;color:var(--muted,#8fa6ad);margin:0 0 16px;line-height:1.65}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.hub-ch{display:flex;flex-direction:column;gap:6px;padding:14px 15px 13px;border-radius:14px;border:1px solid #334a53;background:linear-gradient(140deg,#122830,#0e1e26);min-width:0}
.hub-ch.soon{opacity:.55}
.hub-ch .ct{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#eef6f6}
.hub-ch .ct span{font-size:22px}
.hub-ch .ct .g{margin-left:auto;font-size:15px}
.hub-ch .bar{height:6px;border-radius:999px;background:#0a161b;overflow:hidden;border:1px solid #243b46}
.hub-ch .bar i{display:block;height:100%;background:linear-gradient(90deg,#dfbe7c,#f1d7a3);border-radius:999px}
.hub-ch .num{font-size:12px;color:var(--muted,#8fa6ad)}
.hub-ch .go{margin-top:4px;align-self:flex-start;padding:7px 13px;border-radius:999px;border:1px solid #c8aa70;background:#10232a;color:#f1d7a3;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;line-height:1.2}
.hub-ch .go:hover{background:linear-gradient(110deg,#dfbe7c,#f1d7a3);color:#1e2928}
.hub-ch .go.dim{border-color:#334a53;color:#8fa6ad;cursor:default}
.hub-dlg .hub-foot{margin-top:16px;font-size:12.5px;color:var(--muted,#8fa6ad);line-height:1.65}
.hub-dlg .hub-foot b{color:#c9d6d8;font-weight:600}
.hub-dlg .close-button{position:absolute;top:12px;right:15px;border:0;background:transparent;font-size:26px;color:var(--muted,#8fa6ad);cursor:pointer}
/* 殿堂牆裡的「匯入／匯出勳章碼」與寶庫說明 */
#hsuBadgeWall .hbwFoot b{color:#F6DFA6}
.hbw-vault-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 20px 8px;padding:10px 14px;border-radius:12px;background:rgba(6,12,23,.55);border:1px solid rgba(140,162,196,.25);font:600 13px/1.6 "Noto Sans TC",sans-serif;color:#c6d4ea}
.hbw-vault-row b{color:#F6DFA6}.hbw-vault-row>span{flex:1;min-width:200px}
.hbw-vault-row button{border:1px solid rgba(246,223,166,.55);cursor:pointer;padding:6px 13px;border-radius:999px;font:900 12.5px "Noto Sans TC",sans-serif;color:#F6DFA6;background:rgba(6,12,23,.6)}
.hbw-vault-row button:hover{color:#0a1222;background:linear-gradient(135deg,#F6DFA6,#E8C87A)}
@media(max-width:760px){.hub-bar{padding:14px 16px 12px}.hub-title{font-size:18px}.hub-title b{font-size:26px}.hub-btn{padding:8px 12px;font-size:13px}.hub-dlg{padding:20px 18px 18px}}
/* 手機：頂欄錢包不要直排 */
@media(max-width:760px){.topbar{flex-wrap:wrap;padding:14px 16px;gap:10px 14px}.topbar .edition{display:none}.wallet{gap:12px;font-size:13px;flex-wrap:wrap}.wallet span{white-space:nowrap}.wallet b{font-size:18px;margin-left:5px}}

/* v2.2：隱藏角色未解鎖時角色列只有兩顆 → 兩欄；老師預覽（?preview=heroes）時隱藏角色鈕加虛線與「預覽」小字 */
/* v2.3：角色鈕依「看得到的人數」排版（2～5 位；app.js 設 data-count） */
.role-switch[data-count] button[data-character] { grid-column: auto !important; }
.role-switch.two, .role-switch[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.role-switch[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.role-switch[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.role-switch[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
/* v2.10（寶物程式 v1.15）：六、七位——桌機 3／4 欄，窄螢幕 2 欄、最後一顆跨欄 */
.role-switch[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.role-switch[data-count="7"] { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }   /* 上排 3 位主角各跨 4 欄、下排 4 位隱藏各跨 3 欄（完整版／老師預覽／知棠開放時） */
.role-switch[data-count="7"] button[data-character]:nth-of-type(-n+3) { grid-column: span 4 !important; }
.role-switch[data-count="7"] button[data-character]:nth-of-type(n+4) { grid-column: span 3 !important; }
/* v2.11（v20）：只看得到兩位（星曜、星澄）＋五位「？」→ 10 欄：上排兩位各跨 5、下排五位各跨 2（app.js 設 data-visible） */
.role-switch[data-count="7"][data-visible="2"] { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.role-switch[data-count="7"][data-visible="2"] button[data-character]:nth-of-type(-n+2) { grid-column: span 5 !important; }
.role-switch[data-count="7"][data-visible="2"] button[data-character]:nth-of-type(n+3) { grid-column: span 2 !important; }
.role-switch[data-count="7"][data-visible="2"] button.mystery { padding: 3px 4px; gap: 4px; }
.role-switch[data-count="7"][data-visible="2"] button.mystery .mystery-name { font-size: 12px; letter-spacing: .06em; }
/* v2.12（v21）：八顆——看得到兩位：上排兩位各跨 6 欄、下排六位「？」各跨 2 欄（12 欄）；完整版／預覽八位全名：4 欄兩排 */
.role-switch[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.role-switch[data-count="8"][data-visible="2"] { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
.role-switch[data-count="8"][data-visible="2"] button[data-character]:nth-of-type(-n+2) { grid-column: span 6 !important; }
.role-switch[data-count="8"][data-visible="2"] button[data-character]:nth-of-type(n+3) { grid-column: span 2 !important; }
.role-switch[data-count="8"][data-visible="2"] button.mystery { padding: 3px 3px; gap: 3px; }
.role-switch[data-count="8"][data-visible="2"] button.mystery .mystery-name { font-size: 11px; letter-spacing: .04em; }
.role-switch[data-count="8"][data-visible="2"] button.mystery .mystery-thumb { flex-basis: 22px; width: 22px; height: 42px; }
/* v2.13（v22）：九顆——看得到兩位：上排兩位各跨 7 欄、下排七位「？」各跨 2 欄（14 欄）；完整版／預覽九位全名：上排 5、下排 4（20 欄） */
.role-switch[data-count="9"] { grid-template-columns: repeat(20, minmax(0, 1fr)) !important; }
.role-switch[data-count="9"] button[data-character]:nth-of-type(-n+5) { grid-column: span 4 !important; }
.role-switch[data-count="9"] button[data-character]:nth-of-type(n+6) { grid-column: span 5 !important; }
.role-switch[data-count="9"][data-visible="2"] { grid-template-columns: repeat(14, minmax(0, 1fr)) !important; }
.role-switch[data-count="9"][data-visible="2"] button[data-character]:nth-of-type(-n+2) { grid-column: span 7 !important; }
.role-switch[data-count="9"][data-visible="2"] button[data-character]:nth-of-type(n+3) { grid-column: span 2 !important; }
.role-switch[data-count="9"][data-visible="2"] button.mystery { padding: 3px 2px; gap: 2px; }
.role-switch[data-count="9"][data-visible="2"] button.mystery .mystery-name { font-size: 10px; letter-spacing: .02em; }
.role-switch[data-count="9"][data-visible="2"] button.mystery .mystery-thumb { flex-basis: 20px; width: 20px; height: 40px; }
/* v2.33（v44）：十顆（小昭加入）——完整版／全解鎖：5 欄兩排；看得到兩位：上排兩位各跨 6 欄、八位「？」分兩排各跨 3 欄（12 欄；一排八顆太擠） */
.role-switch[data-count="10"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.role-switch[data-count="10"][data-visible="2"] { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
.role-switch[data-count="10"][data-visible="2"] button[data-character]:nth-of-type(-n+2) { grid-column: span 6 !important; }
.role-switch[data-count="10"][data-visible="2"] button[data-character]:nth-of-type(n+3) { grid-column: span 3 !important; }
.role-switch[data-count="10"] button[data-character] { min-width: 0; }
.role-switch[data-count="10"]:not([data-visible="2"]) button[data-character] { font-size: 12px; padding-left: 4px; padding-right: 4px; }
@media (max-width: 1100px) {
  .role-switch[data-count="4"], .role-switch[data-count="5"], .role-switch[data-count="6"], .role-switch[data-count="7"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .role-switch[data-count="7"] button[data-character]:nth-of-type(n), .role-switch[data-count="7"][data-visible="2"] button[data-character]:nth-of-type(n) { grid-column: auto !important; }
  .role-switch[data-count="7"][data-visible="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .role-switch[data-count="8"], .role-switch[data-count="8"][data-visible="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .role-switch[data-count="8"] button[data-character]:nth-of-type(n), .role-switch[data-count="8"][data-visible="2"] button[data-character]:nth-of-type(n) { grid-column: auto !important; }
  .role-switch[data-count="9"], .role-switch[data-count="9"][data-visible="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .role-switch[data-count="9"] button[data-character]:nth-of-type(n), .role-switch[data-count="9"][data-visible="2"] button[data-character]:nth-of-type(n) { grid-column: auto !important; }
  .role-switch[data-count="9"] button[data-character]:last-of-type { grid-column: 1 / -1 !important; }
  .role-switch[data-count="10"], .role-switch[data-count="10"][data-visible="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .role-switch[data-count="10"] button[data-character]:nth-of-type(n), .role-switch[data-count="10"][data-visible="2"] button[data-character]:nth-of-type(n) { grid-column: auto !important; }
  .role-switch[data-count="5"] button[data-character]:last-of-type, .role-switch[data-count="7"] button[data-character]:last-of-type { grid-column: 1 / -1 !important; }
}
.role-switch button.hero-preview { position: relative; outline: 1px dashed rgba(243,217,155,.55); outline-offset: -3px; }
.role-switch button.hero-preview::after { content: "預覽"; position: absolute; top: 2px; right: 5px; font-size: 10px; line-height: 1; color: #f3d99b; opacity: .85; }

/* v2.4：隱藏角色鈕＝背影＋「？」（未解鎖、不能選）；點了開「？？？」視窗只看背影 */
.role-switch button.mystery { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 6px; color: #9fb3b8; border: 1px dashed rgba(243,217,155,.4); cursor: help; }
.role-switch button.mystery:hover { color: #e9efe9; border-color: rgba(243,217,155,.8); }
.role-switch button.mystery .mystery-thumb { flex: 0 0 26px; width: 26px; height: 48px; border-radius: 5px; background-color: rgba(255,255,255,.06); filter: saturate(.55) brightness(.85); }
.role-switch button.mystery .mystery-name { font-size: 13px; letter-spacing: .12em; }
.role-switch button.mystery .mystery-q { position: absolute; top: 3px; right: 6px; font: 900 12px/1 'Noto Sans TC', sans-serif; color: #f3d99b; opacity: .9; }
.role-switch button.mystery.hero-preview { border-style: solid; }
@media (max-width: 1100px) { .role-switch button.mystery .mystery-thumb { height: 40px; width: 22px; } }
.mystery-stage { position: relative; width: 220px; height: 400px; margin: 10px auto 4px; border-radius: 16px; background: radial-gradient(ellipse at 50% 30%, #f6f9fb 0, #dde8ef 60%, #b9cbd8 110%); overflow: hidden; }
.mystery-figure { position: absolute; inset: 0; filter: saturate(.6) brightness(.92); }
.mystery-big { position: absolute; right: 12px; bottom: 8px; font: 900 72px/1 'Noto Sans TC', sans-serif; color: #f3d99b; text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 18px rgba(243,217,155,.35); }
.mystery-text { text-align: center; color: #cfd9d6; }
body.full .edition::after { content: " · 完整版"; color: #f3d99b; }

/* v12：題庫切換（物理／小五數學） */
.question-bank { display: inline-flex; gap: 3px; margin-left: auto; margin-right: 10px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #09181e; }
.question-bank button { border: 0; border-radius: 6px; background: transparent; padding: 4px 10px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.question-bank button[aria-pressed="true"] { background: #25414a; color: #effffb; box-shadow: 0 2px 8px #0003; }
.question-top > span:last-child { white-space: nowrap; }
@media (max-width: 760px) { .question-top { flex-wrap: wrap; row-gap: 6px; } .question-top .eyebrow { width: 100%; margin-bottom: 0; } .question-bank { margin-left: 0; margin-right: 6px; } .question-bank button { padding: 4px 8px; } }

/* v18：標題下提示「請先選擇你想要冒險角色」（徐博士 2026-10-10） */
.character-panel .panel-top .choose-hint { margin-top: 5px; font-size: 13px; letter-spacing: .06em; color: #cfe0d2; display: flex; align-items: center; gap: 6px; }
.character-panel .panel-top .choose-hint::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px #e9c98a88; flex: none; animation: choose-pulse 1.6s ease-in-out infinite; }
@keyframes choose-pulse { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .character-panel .panel-top .choose-hint::before { animation: none; } }
@media (max-width: 760px) { .character-panel .panel-top .choose-hint { font-size: 12px; } }

/* v2.15：隱藏角色的解鎖進度（探索值） */
.mystery-text b { color: #f6dfa6; }
.mystery-bar { display: block; width: 220px; height: 8px; margin: 8px auto 4px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.mystery-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c8a368, #57e6a8); }
.mystery-hint { text-align: center; font-size: 12px; color: #93a3a0; max-width: 360px; margin: 6px auto 0; line-height: 1.6; }

/* ═══ v2.17（寶庫 v31）：答錯——紅叉、印章、哭哭 ═══ */
.question-panel { position: relative; }
.answer-button { position: relative; }
.answer-mark { position: absolute; right: 9px; top: 50%; transform: translateY(-50%) scale(1); font-size: 22px; line-height: 1; font-weight: 900; pointer-events: none; }
.answer-mark.mark-x { color: #ff5a5a; text-shadow: 0 0 12px #ff4d4d99; animation: markPop .5s cubic-bezier(.2,1.4,.4,1) both, markShake .45s .08s ease-in-out both; }
.answer-mark.mark-ok { color: #6ff0b4; text-shadow: 0 0 10px #57e6a877; animation: markPop .45s cubic-bezier(.2,1.4,.4,1) both; }
.answer-button.wrong { border-color: #ff6b6b; background: #4a2426; color: #ffd0cd; box-shadow: 0 0 0 1px #ff6b6b55, 0 0 18px #ff4d4d33; animation: wrongShake .5s ease-in-out both; }
.answer-feedback .answer-mark { position: static; transform: none; display: inline-block; margin-right: 6px; font-size: 16px; vertical-align: -1px; }
.answer-feedback .feedback-x { color: #ff5a5a; }
.answer-feedback .feedback-ok { color: #6ff0b4; }
.wrong-stamp { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%) rotate(-12deg); z-index: 9; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #ff4b4b; text-shadow: 0 0 22px #ff2e2e88, 0 2px 0 #5a0d0d; animation: stampIn .55s cubic-bezier(.15,1.3,.35,1) both, stampOut .45s 1.0s ease-in both; }
.wrong-stamp span { font-size: 112px; line-height: .9; font-weight: 900; }
.wrong-stamp small { font-size: 15px; letter-spacing: .32em; font-weight: 800; padding: 3px 12px 3px 15px; border: 2px solid #ff4b4b; border-radius: 6px; background: #2a0f12cc; }
@keyframes markPop { 0% { transform: translateY(-50%) scale(0); opacity: 0 } 60% { transform: translateY(-50%) scale(1.35); opacity: 1 } 100% { transform: translateY(-50%) scale(1) } }
@keyframes markShake { 0%,100% { margin-right: 0 } 25% { margin-right: 3px } 50% { margin-right: -3px } 75% { margin-right: 2px } }
@keyframes wrongShake { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-5px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(3px) } }
@keyframes stampIn { 0% { transform: translate(-50%,-50%) rotate(-12deg) scale(2.6); opacity: 0 } 55% { transform: translate(-50%,-50%) rotate(-12deg) scale(.92); opacity: 1 } 100% { transform: translate(-50%,-50%) rotate(-12deg) scale(1); opacity: 1 } }
@keyframes stampOut { to { opacity: 0; transform: translate(-50%,-56%) rotate(-12deg) scale(1.06) } }
/* 舞臺：難過色調；近景與守護神垂頭抽泣 */
.character-stage.crying { animation: sadTone 3.4s ease-in-out both; }
@keyframes sadTone { 0%,100% { filter: none } 15%,80% { filter: saturate(.78) brightness(.93) } }
.character-stage.crying .character-detail img { animation: sob 3.4s ease-in-out both; transform-origin: 50% 30%; }
@keyframes sob { 0% { transform: none } 10%,88% { transform: translateY(5px) rotate(-1.2deg) } 14%,22%,30%,38%,46%,54%,62%,70%,78% { transform: translateY(6px) rotate(-1.2deg) translateX(1.2px) } 18%,26%,34%,42%,50%,58%,66%,74%,82% { transform: translateY(5px) rotate(-1.2deg) translateX(-1.2px) } 100% { transform: none } }
.character-detail canvas.cry-tears { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
.mount-companion { overflow: visible; }
.mount-companion.crying .item-art { animation: guardianSob 3.4s ease-in-out both; transform-origin: 50% 85%; filter: drop-shadow(0 0 18px #70d9cf44) saturate(.8); }
@keyframes guardianSob { 0% { transform: none } 10%,88% { transform: translateY(5px) rotate(-9deg) } 14%,22%,30%,38%,46%,54%,62%,70%,78% { transform: translateY(6px) rotate(-9deg) scale(1,.96) translateX(1.5px) } 18%,26%,34%,42%,50%,58%,66%,74%,82% { transform: translateY(5px) rotate(-9deg) scale(1,1.02) translateX(-1.5px) } 100% { transform: none } }
.mount-companion.crying .mount-label::after { content: ' 嗚嗚…'; color: #9fc3ff; }
.cry-drop { position: absolute; top: 36%; width: 7px; height: 10px; margin-left: -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #f2faff 0, #9fd0ff 45%, #5aa0eb 100%); box-shadow: 0 0 6px #9fd0ff99; opacity: 0; pointer-events: none; z-index: 7; animation: dropFall 1.25s ease-in both; }
@keyframes dropFall { 0% { opacity: 0; transform: translate(0,0) scale(.6) } 15% { opacity: .95; transform: translate(calc(var(--dx) * .2), 4px) scale(1) } 85% { opacity: .9 } 100% { opacity: 0; transform: translate(var(--dx), 46px) scale(.9) } }
@media (prefers-reduced-motion: reduce) { .answer-mark, .answer-button.wrong, .wrong-stamp, .character-stage.crying .character-detail img, .mount-companion.crying .item-art { animation: none !important } .wrong-stamp { display: none } }

/* ═══ v31：站在人物旁邊的守護神（雪鈴的極寒哈士奇，三維模型渲染的八方向圖） ═══ */
.guardian-layer { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; filter: drop-shadow(0 10px 18px #0005); transform-origin: 50% 100%; }
.guardian-layer[data-behind="1"] { z-index: 1; }
.guardian-layer[data-behind="0"] { z-index: 4; }
.detail-active .guardian-layer { visibility: hidden !important; }
.guardian-layer.crying { animation: guardianSob2 3.4s ease-in-out both; filter: drop-shadow(0 10px 18px #0005) saturate(.85); }
@keyframes guardianSob2 { 0% { transform: none } 10%,88% { transform: translateY(3px) rotate(-3deg) } 14%,22%,30%,38%,46%,54%,62%,70%,78% { transform: translateY(4px) rotate(-3deg) translateX(1.5px) } 18%,26%,34%,42%,50%,58%,66%,74%,82% { transform: translateY(3px) rotate(-3deg) translateX(-1.5px) } 100% { transform: none } }
.guardian-layer .cry-drop { top: calc(var(--head-y, 25%) + 10%); }
@media (prefers-reduced-motion: reduce) { .guardian-layer.crying { animation: none } }

/* ═══ v33：「細看角色」動態肖像（知棠與貓頭鷹）——影片蓋在靜態肖像上，載入前／不能播時看到的是靜態圖 ═══ */
.portrait-frame { position: relative; }
.portrait-frame video.portrait-video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100%; width: auto; max-width: 100%; object-fit: cover; object-position: 50% 18%; opacity: 0; transition: opacity .6s; pointer-events: none; }
.portrait-frame.has-video video.portrait-video.playing { opacity: 1; }
.portrait-frame.has-video::after { content: '▶ 動態肖像'; position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(8,14,28,.62); border: 1px solid rgba(232,200,122,.45); color: #F6DFA6; font-size: 11px; letter-spacing: .08em; }

/* v35（express.js）：答對／獲得寶物的表情框（知棠「面部設定」四格） */
.expression-bubble { position: absolute; top: 10px; right: 10px; z-index: 8; margin: 0; width: 138px; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.expression-ring { display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 2px solid #e5c78b; box-shadow: 0 6px 22px #0007, 0 0 0 4px #10212acc; background: #10212a; }
.expression-ring img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.expression-bubble figcaption { background: #10212aee; border: 1px solid #c8aa7088; border-radius: 10px; padding: 4px 8px; font-size: 11px; line-height: 1.4; color: #f2e6cf; text-align: center; max-width: 138px; }
.expression-bubble .expression-name { display: block; color: #e5c78b; font-size: 11px; }
.expression-bubble .expression-line { display: block; color: #dbe8eb; }
.expression-bubble.expression-in { animation: exprIn .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.expression-bubble.expression-out { animation: exprOut .42s ease-in both; }
@keyframes exprIn { from { opacity: 0; transform: translateY(-10px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes exprOut { to { opacity: 0; transform: translateY(-6px) scale(.85); } }
.reward-expression { position: absolute; top: 14px; left: 14px; margin: 0; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 3; pointer-events: none; text-align: center; }
.reward-expression .expression-ring { width: 64px; height: 64px; }
.reward-expression figcaption { font-size: 10.5px; color: #e5c78b; line-height: 1.35; }
@media (max-width: 760px) { .expression-bubble { width: 112px; top: 8px; right: 8px; } .expression-bubble .expression-ring { width: 72px; height: 72px; } .expression-bubble figcaption { font-size: 10px; } .reward-expression { width: 80px; } .reward-expression .expression-ring { width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { .expression-bubble.expression-in, .expression-bubble.expression-out { animation: none !important } }

/* v38（app.js 2.24）：六套角色的「造型」選單 */
.outfit-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 24px 14px; }
.outfit-picker-label { font-size: 12px; color: var(--muted, #9fb3b8); margin-right: 2px; letter-spacing: .1em; }
.outfit-chip { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 58px; padding: 5px 9px; border: 1px solid #3a535c; border-radius: 9px; background: #10232a; color: #dbe8eb; font-size: 12px; cursor: pointer; }
.outfit-chip b { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.outfit-chip small { font-size: 10px; color: #8fa7ad; }
.outfit-chip:hover:not(:disabled) { border-color: #e5c78b; background: #183942; }
.outfit-chip.on { border-color: #e5c78b; background: linear-gradient(140deg, #3a3220, #1d2e30); box-shadow: 0 0 0 1px #e5c78b55, 0 0 14px #e5c78b33; }
.outfit-chip.on small { color: #e5c78b; }
.outfit-chip.locked { opacity: .5; cursor: not-allowed; }
.outfit-chip.empty { border-style: dashed; background: transparent; opacity: .55; }   /* v42：空著的套（星汐經典／史詩） */
@media (max-width: 760px) { .outfit-picker { padding: 0 16px 12px; gap: 5px; } .outfit-chip { min-width: 52px; padding: 4px 7px; } .outfit-chip b { font-size: 11.5px; } }

/* v2.25（v39）：作答倒數、道具卡、星塵獎勵收藏袋 */
.q-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.q-timer{position:relative;flex:1 1 160px;min-width:140px;height:26px;border:1px solid #3d5a63;border-radius:14px;background:#0a1a20;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:12px;color:#cfe3e6}
.q-timer i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#2e8f86,#5fd0c0);opacity:.35;transition:width .2s linear}
.q-timer span{position:relative}.q-timer b{font-variant-numeric:tabular-nums;color:#fff;font-size:14px}
.q-timer.low i{background:linear-gradient(90deg,#b4483f,#f0806f);opacity:.55}.q-timer.low b{color:#ffd2cb}
.q-timer.frozen{border-color:#8fd3ff;box-shadow:0 0 12px #8fd3ff44}.q-timer.frozen i{background:linear-gradient(90deg,#4a8fd0,#bfe6ff)}
.q-timer.done{opacity:.55}
.card-bar{display:flex;gap:6px;flex-wrap:wrap}
.card-bar button{border:1px solid #4b5d66;background:#10232b;color:#9fb3b8;border-radius:8px;padding:4px 9px;font-size:12px;white-space:nowrap}
.card-bar button.has{border-color:#d8b46e;color:#f3dfb2}
.card-bar button:not(:disabled):hover{background:#2a3d34}
.card-bar button b{color:#fff;margin-left:2px}
.answer-button.erased{opacity:.25;text-decoration:line-through;filter:grayscale(1)}
.cosmic-bag{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #5c583930;font-size:11px;color:#7f969d}
.cosmic-bag .cb-title{color:var(--gold);letter-spacing:.1em;font-size:11px;margin-right:2px}
.cosmic-bag .cb-item{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border:1px solid #2c4048;border-radius:10px;white-space:nowrap}
.cosmic-bag .cb-item.has{color:#d5e6e8;border-color:#56707a}.cosmic-bag .cb-item.card.has{border-color:#b89a62;color:#f1dcae}
.cosmic-bag .cb-item i{font-style:normal;color:#9fd8cf}.cosmic-bag .cb-item b{color:#fff;font-weight:600}
.cosmic-bag .cb-total{margin-left:auto;color:#cfe3e6}.cosmic-bag .cb-total b{color:var(--gold);font-size:13px}
@media(max-width:760px){.q-tools{gap:7px}.card-bar button{padding:4px 7px;font-size:11px}.cosmic-bag .cb-total{margin-left:0;width:100%}}

/* v2.26（v40）：測試題的試抽——按鈕、機台淡紫提示、收藏卡蓋「測試」章 */
.primary-button.test-spin{flex:0 0 auto;background:linear-gradient(110deg,#3a3550,#4e4670);border-color:#9d8fd6;color:#e9e3ff;font-weight:600;font-size:13px;padding:10px 14px;box-shadow:none}
.primary-button.test-spin:hover{background:#5a5182}
.machine-panel.test-draw .reel-frame{border-color:#9d8fd6;box-shadow:0 0 0 4px #0a151b,0 0 26px #9d8fd655,inset 0 0 20px #0007}
.reward-dialog.test-card::after{content:'測試 · 不存';position:absolute;top:18px;right:-34px;transform:rotate(35deg);background:#5a4f8c;color:#fff;font-size:12px;letter-spacing:.12em;padding:4px 40px;box-shadow:0 2px 10px #0006;pointer-events:none}
.reward-dialog.test-card .duplicate-line{color:#cdbfff!important}
@media(max-width:760px){.primary-button.test-spin{font-size:12px;padding:9px 8px}}

/* v2.31（徐博士 10/15）：保底券（線上評量 金牌／紫心／榮譽勳章）——機台按鈕下面一列，顏色＝保底稀有度；錢包「保底券 N」（手機不顯示，按鈕上有張數） */
.floor-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.machine-panel .floor-controls .primary-button.floor-spin{flex:1 1 0;min-width:0;min-height:42px;padding:9px 10px;border-radius:6px;font-size:13px;font-weight:700;letter-spacing:.02em;color:#17212a;text-shadow:none;box-shadow:0 3px 0 #0007,inset 0 0 0 2px #ffffff40}
.machine-panel .floor-controls .primary-button.floor-spin{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;line-height:1.3}
.floor-spin small{font-size:inherit;font-weight:inherit;white-space:nowrap}.floor-spin small::before{content:'·';margin:0 .4em}
.machine-panel .floor-controls .primary-button.floor-spin:hover:enabled{filter:brightness(1.08)}
.machine-panel .floor-controls .primary-button.floor-spin:disabled{opacity:.6}
.primary-button.floor-spin.floor-rare{background:linear-gradient(110deg,#56b8ff,#b5e1ff);border-color:#d3edff}
.primary-button.floor-spin.floor-epic{background:linear-gradient(110deg,#b48aff,#e0cfff);border-color:#ece2ff}
.primary-button.floor-spin.floor-legend{background:linear-gradient(110deg,#ffcf65,#fff1bf);border-color:#fff5d3;box-shadow:0 3px 0 #0007,0 0 18px rgba(255,207,101,.45),inset 0 0 0 2px #ffffff55}
.floor-wallet b{color:#ffcf65}
@media(max-width:760px){.floor-wallet{display:none!important}.machine-panel .floor-controls .primary-button.floor-spin{flex-direction:column;font-size:12px;padding:7px 4px;min-height:46px}
  .floor-spin small{font-size:11px;font-weight:600;opacity:.85}.floor-spin small::before{content:none}}
/* v58c（2026-10-22）：隱藏版功能卡（星澄：收齊某一稀有度 36 件 → 星核競技場 PK 勝利加發星塵）——app.js renderPerkCard */
.perk-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 24px 14px; padding: 7px 10px; width: calc(100% - 48px); border: 1px dashed #4b6169; border-radius: 11px; background: #0d1d23; color: #dbe8eb; font: inherit; text-align: left; cursor: pointer; }
.perk-card[hidden] { display: none; }
.perk-card:hover { border-color: #e5c78b; }
.perk-card:focus-visible { outline: 2px solid #e5c78b; outline-offset: 2px; }
.perk-card.has-perk { border-style: solid; border-color: #e5c78b88; background: linear-gradient(140deg, #2c2717, #10232a 70%); }
.perk-label { font-size: 12px; color: #e5c78b; letter-spacing: .1em; margin-right: 2px; }
.perk-chip { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 56px; padding: 4px 8px; border: 1px solid #33494f; border-radius: 8px; color: #8fa7ad; font-size: 11px; }
.perk-chip b { font-weight: 600; font-size: 12px; white-space: nowrap; }
.perk-chip small { font-size: 10px; }
.perk-chip.on { color: #fff6df; border-color: var(--rarity, #e5c78b); box-shadow: 0 0 10px color-mix(in srgb, var(--rarity, #e5c78b) 45%, transparent); background: color-mix(in srgb, var(--rarity, #e5c78b) 14%, #10232a); }
.perk-chip.on small { color: var(--rarity, #e5c78b); }
.perk-total { margin-left: auto; font-size: 12px; font-weight: 600; color: #e5c78b; white-space: nowrap; }
.perk-card.reveal { animation: perkReveal 1.6s ease-out; }
@keyframes perkReveal { 0% { box-shadow: 0 0 0 0 #e5c78b00; } 20% { box-shadow: 0 0 0 4px #e5c78b88, 0 0 28px #e5c78b88; } 100% { box-shadow: 0 0 0 0 #e5c78b00; } }
@media (prefers-reduced-motion: reduce) { .perk-card.reveal { animation: none; } }
@media (max-width: 760px) { .perk-card { margin: 0 16px 12px; width: calc(100% - 32px); gap: 5px; } .perk-chip { min-width: 50px; padding: 3px 6px; } .perk-total { margin-left: 0; } }
.perk-note { font-size: 12px; color: var(--muted, #9fb3b8); }