@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@700;900&family=Chakra+Petch:wght@500;600;700&display=swap');

/* ───────────── 基本 ───────────── */
html, body { margin: 0; padding: 0; background: #05030F; color: #F7F2FF; font-family: 'Noto Sans TC', sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #FFE29A; } a:hover { color: #FFF1C9; }
input, button, select, textarea { font: inherit; }
.num { font-family: 'Chakra Petch', sans-serif; }
.serif { font-family: 'Noto Serif TC', serif; }

/* 手機版面：網頁上置中成一支手機寬，手機上滿版。 */
.phone { position: relative; width: 100%; max-width: 430px; min-height: 100vh; margin: 0 auto; overflow-x: hidden; background: #0B0620; padding-bottom: 92px; }
.phone.no-nav { padding-bottom: 24px; }
.bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.bg-wrap { position: fixed; top: 0; bottom: 0; left: 50%; width: 100%; max-width: 430px; transform: translateX(-50%); z-index: 0; overflow: hidden; pointer-events: none; }
.page { position: relative; z-index: 1; padding: 46px 12px 12px; display: flex; flex-direction: column; gap: 12px; }

/* ───────────── 按鈕特效：滑過發亮、按下縮一下並閃金光 ───────────── */
a, button { transition: transform .12s ease, filter .15s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; cursor: pointer; }
a:hover, button:hover { filter: brightness(1.18) saturate(1.15); }
a:active, button:active { transform: scale(.93) !important; filter: brightness(1.4) !important; box-shadow: 0 0 0 3px rgba(255,211,107,.55), 0 0 26px rgba(255,211,107,.9) !important; }
a:focus-visible, button:focus-visible { outline: 2px solid #FFD36B; outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }

/* ───────────── 共用元件 ───────────── */
.frame { padding: 1.5px; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.frame > .in { background: rgba(14,8,40,.95); clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card { padding: 14px; border-radius: 14px; background: rgba(20,10,46,.92); border: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.card.row { flex-direction: row; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.muted { color: #BFB2E6; }
.small { font-size: 12px; }
.h1 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: .1em; }
.kicker { font-family: 'Chakra Petch', sans-serif; font-size: 12px; letter-spacing: .35em; color: #FFD36B; }
.title { font-size: 16px; font-weight: 900; }
.btn { height: 52px; border: 0; border-radius: 14px; color: #fff; font-size: 16px; font-weight: 900; letter-spacing: .08em; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 14px; }
.btn.pink { background: linear-gradient(135deg, #FF4FA3, #8A2BE2); }
.btn.cyan { background: linear-gradient(135deg, #3FD4FF, #3B5BFF); }
.btn.gold { background: linear-gradient(135deg, #FFE29A, #FFB13B); color: #2A1300; }
.btn.green { background: linear-gradient(135deg, #4BE3A4, #1F9E74); color: #04221A; }
.btn.ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.35); }
.chip { border: 0; border-radius: 10px; padding: 0 12px; height: 36px; font-size: 13px; font-weight: 900; background: rgba(255,255,255,.08); color: #BFB2E6; }
.chip.on { background: #FFD36B; color: #2A1300; }
.tab { flex: 1; height: 36px; border: 0; font-size: 13px; font-weight: 900; background: rgba(255,255,255,.08); color: #BFB2E6; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.tab.on { background: #FFD36B; color: #2A1300; }
.input { height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #F7F2FF; width: 100%; }
.input:focus { outline: 2px solid #FFD36B; }
.back { width: 44px; height: 44px; border-radius: 12px; background: rgba(11,6,32,.6); display: flex; align-items: center; justify-content: center; color: #fff; border: 0; text-decoration: none; flex: none; }
.bar { height: 10px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.bar > span { display: block; height: 100%; transition: width .5s; }
.badge { font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 6px; }
.err { padding: 10px 12px; border-radius: 10px; background: rgba(255,59,107,.15); border: 1px solid rgba(255,59,107,.6); color: #FFB3C4; font-size: 13px; }
.rest { padding: 10px 12px; border-radius: 12px; background: rgba(63,212,255,.12); border: 1px solid rgba(63,212,255,.6); font-size: 13px; display: flex; gap: 10px; align-items: center; }

/* 白的對話框 */
.say { position: relative; flex: 1; padding: 16px 12px 10px; border-radius: 12px; background: rgba(11,6,32,.92); border: 1px solid rgba(255,211,107,.55); }
.say > .who { position: absolute; left: 10px; top: -11px; font-size: 12px; font-weight: 900; padding: 2px 10px; border-radius: 6px; background: #FFD36B; color: #2A1300; }
.say > p { margin: 0; font-size: 14px; line-height: 1.6; }
.face { object-fit: cover; object-position: 50% 15%; border-radius: 12px; border: 1px solid rgba(255,211,107,.6); flex: none; }

/* 底部選單 */
.nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 430px; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); height: 78px; padding-bottom: 14px; background: linear-gradient(180deg, rgba(11,6,32,.7), #0B0620); border-top: 1px solid rgba(255,211,107,.4); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; color: #BFB2E6; text-decoration: none; }
.nav a.on { color: #FFD36B; }
.nav img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }

/* ───────────── 動畫 ───────────── */
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes glow { 0%,100% { box-shadow: 0 0 12px rgba(255,79,163,.55) } 50% { box-shadow: 0 0 26px rgba(255,79,163,.95) } }
@keyframes shine { 0% { background-position: -160px 0 } 100% { background-position: 260px 0 } }
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes boom { 0% { transform: scale(2.4); opacity: 0 } 60% { transform: scale(.92); opacity: 1 } 100% { transform: scale(1) } }
@keyframes rise { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes shake { 0%,100% { transform: none } 20% { transform: translate(-6px,2px) } 40% { transform: translate(6px,-2px) } 60% { transform: translate(-4px,0) } 80% { transform: translate(4px,0) } }
@keyframes vs { 0%,100% { transform: scale(1) rotate(-6deg) } 50% { transform: scale(1.12) rotate(-6deg) } }
@keyframes stamp { 0% { transform: scale(2.2) rotate(-12deg); opacity: 0 } 60% { transform: scale(.92) rotate(-12deg); opacity: 1 } 100% { transform: scale(1) rotate(-12deg) } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,211,107,.8) } 50% { box-shadow: 0 0 0 12px rgba(255,211,107,0) } }
@keyframes wiggle { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }
@keyframes radar { 0% { transform: scale(.2); opacity: .8 } 100% { transform: scale(1.6); opacity: 0 } }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 1 } 100% { transform: translateY(-60px); opacity: 0 } }
@keyframes open { from { transform: perspective(600px) rotateY(-70deg); opacity: 0 } to { transform: none; opacity: 1 } }
/* 書頁翻進來：從右側轉入、淡入，停在正面（圖書館內容用；cover-open 是封面翻走，不能用在內容上） */
.page-in { animation: pagein .5s cubic-bezier(.2,.7,.2,1) both; transform-origin: left center; }
@keyframes pagein { from { transform: perspective(1200px) rotateY(-70deg); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes cover { 0% { transform: perspective(1200px) rotateY(0) } 100% { transform: perspective(1200px) rotateY(-165deg) } }
@keyframes fly { from { transform: translateY(260px) scale(.35) rotate(-8deg); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes dim { from { opacity: 0 } to { opacity: 1 } }
@keyframes inL { from { transform: translateX(-40px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes inR { from { transform: translateX(40px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes draw { from { stroke-dashoffset: 1400 } to { stroke-dashoffset: 0 } }
.floaty { animation: floaty 4s ease-in-out infinite; }
.glowbtn { animation: glow 2.4s ease-in-out infinite; }
.shine { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); background-size: 160px 100%; background-repeat: no-repeat; animation: shine 2.8s linear infinite; }
.blink { animation: blink 1.2s steps(2) infinite; }
.boom { animation: boom .8s cubic-bezier(.2,.8,.2,1) both; }
.rise { animation: rise .5s ease-out both; }
.shake { animation: shake .45s ease-in-out; }
.vs { animation: vs 1.6s ease-in-out infinite; }
.stamp { animation: stamp .8s ease-out both; }
.pulse { animation: pulse 1.6s ease-out infinite; }
.wiggle { animation: wiggle 1.2s ease-in-out infinite; }
.radar { animation: radar 2.4s ease-out infinite; }
.float-up { animation: floatUp 1.2s ease-out both; }
.fly { animation: fly .55s cubic-bezier(.2,.8,.2,1) both; }
.cover-open { animation: cover 1s cubic-bezier(.5,0,.2,1) .55s both; transform-origin: left center; backface-visibility: hidden; }
.dim { animation: dim .3s ease-out both; }
.inL { animation: inL .5s ease-out both; } .inR { animation: inR .5s ease-out both; }
.draw { stroke-dasharray: 1400; animation: draw 2.2s ease-out both; }

/* Blazor 錯誤列 */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: #3a0d1c; color: #fff; z-index: 1000; font-size: 13px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* 2026 UI legibility / mobile layout repair */
:root { color-scheme: dark; --ui-panel:rgba(34,27,67,.94); --ui-line:rgba(216,207,255,.35); --ui-ink:#FAF8FF; }
html,body { background:#17112D; color:var(--ui-ink); }
.phone { background:#191330; min-height:100dvh; isolation:isolate; }
.bg-wrap { height:100dvh; bottom:auto; }
.bg-wrap .bg { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; object-position:center center; }
.page { min-width:0; padding-left:clamp(12px,3.5vw,18px); padding-right:clamp(12px,3.5vw,18px); }
.page > *, .row > *, .between > * { min-width:0; }
.card,.frame>.in { background:var(--ui-panel); border-color:var(--ui-line); }
.say { background:rgba(34,26,65,.96); }
.muted,.nav a,.chip,.tab { color:#DDD3F4; }
.btn,button,.chip,.tab,.back { color:#FAF8FF; }
.btn:not(.pink):not(.cyan):not(.gold):not(.green):not(.ghost) { background:linear-gradient(135deg,#6454B3,#443C86); border:1px solid rgba(235,224,255,.45); }
button:not([class]), button[class=""] { background:#514591; color:#fff; border:1px solid #8D7CC8; border-radius:10px; }
.btn.ghost,.chip,.tab,.back { background:rgba(65,55,111,.88); border:1px solid rgba(227,215,255,.38); }
.btn.cyan { background:linear-gradient(135deg,#2877B4,#3452AC); }
.btn.pink { background:linear-gradient(135deg,#C33C83,#7935AE); }
.btn.gold,.chip.on,.tab.on { color:#2C1B06; }
.btn:disabled,button:disabled { opacity:.64; filter:grayscale(.15); }
.input, input, select, textarea { color:#FCFAFF; }
.input { background:rgba(36,29,71,.96); border-color:#8273A7; }
.nav { background:linear-gradient(180deg,rgba(32,24,61,.95),#19122F); padding-bottom:max(10px,env(safe-area-inset-bottom)); height:calc(72px + env(safe-area-inset-bottom)); }
.phone { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
.phone.no-nav { padding-bottom:24px; }
img { max-width:100%; }
@media(max-width:350px) { .page { gap:10px; } .grid3 { gap:5px; } .btn { font-size:14px; padding:0 8px; } }
@media(prefers-reduced-motion:reduce) { .floaty,.glowbtn,.shine,.blink,.wiggle,.pulse { animation:none!important; } }