/* 第 14 輪：更新公告視窗、成就頁（分類頁籤／進度／稀有度）、成就解鎖通知（動畫）。顏色沿用 hall.css 的主題變數，夜間自動跟著換。 */

/* ---------- A1 更新公告 ---------- */
.ann-card { max-width: min(480px, 100%); }
.ann-ver { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 4px; }
.ann-ver b { font-size: 18px; } .ann-ver span { opacity: .7; font-size: 13px; }
.ann-hist { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ann-hist select { min-height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--tx); padding: 0 8px; font-size: 14px; }
.ann-title { margin: 4px 0 8px; font-weight: 800; font-size: 15px; }
.ann-body { max-height: min(46vh, 340px); overflow-y: auto; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.ann-h { margin: 12px 0 4px; font-size: 14px; display: block; padding: 3px 10px; border-radius: 999px; width: fit-content; background: rgba(120, 90, 140, .14); }
.ann-h.ann-system { background: rgba(255, 176, 46, .28); } .ann-h.ann-feature { background: rgba(91, 141, 239, .22); } .ann-h.ann-fix { background: rgba(79, 179, 106, .24); }
.ann-ul { margin: 2px 0 0; padding-left: 20px; } .ann-ul li { margin: 4px 0; line-height: 1.5; font-size: 14px; }
.ann-hide { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; min-height: 44px; cursor: pointer; }
.ann-hide input { width: 20px; height: 20px; }
.ann-note { display: block; opacity: .7; margin-top: 2px; }
#btnAnn { position: relative; }

/* ---------- A3 成就頁 ---------- */
.ach-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ach-rate b { font-size: 15px; display: block; margin-bottom: 4px; }
.ach-rate .bar.big { height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.ach-rate .bar.big i { display: block; height: 100%; background: linear-gradient(90deg, #4fb36a, #f2c14e, #e0509a); transition: width .5s; }
.ach-titles small { display: block; opacity: .75; margin-bottom: 3px; }
.ach-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ach-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-height: 44px; padding: 4px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--tx); font-weight: 800; font-size: 14px; line-height: 1.2; cursor: pointer; }
.ach-tab small { font-size: 12px; font-weight: 600; opacity: .7; }
.ach-tab.on { border-color: var(--acc); background: var(--acc); color: var(--acc-tx); }
.ach-list { display: block; }
.ach-row { display: flex; gap: 10px; align-items: center; background: var(--card); color: var(--tx); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; border: 2px solid var(--line); }
.ach-row .ach-ic { font-size: 22px; flex: 0 0 auto; width: 28px; text-align: center; }
.ach-row .ach-mid { flex: 1; min-width: 0; } .ach-row .ach-mid b { display: block; } .ach-row .ach-mid small { display: block; opacity: .78; font-size: 13px; line-height: 1.35; }
.ach-row .bar { height: 6px; background: rgba(0, 0, 0, .12); border-radius: 3px; margin-top: 4px; overflow: hidden; } .ach-row .bar i { display: block; height: 100%; background: #4fb36a; }
.ach-row .r { margin-left: auto; text-align: right; font-size: 12px; max-width: 38%; line-height: 1.35; }
.ach-row .ach-rar { display: block; font-style: normal; font-weight: 800; }
.ach-row.r-bronze { border-left: 6px solid #b87333; } .ach-row.r-silver { border-left: 6px solid #a8b2bd; } .ach-row.r-gold { border-left: 6px solid #f2c14e; }
.ach-row.r-rainbow { border-left: 6px solid transparent; border-image: linear-gradient(180deg, #ff5d5d, #ffd23a, #4fd18b, #5b8def, #b25cff) 1; }
.ach-row.got { background: color-mix(in srgb, var(--card) 80%, #f2c14e); }
.ach-row.r-rainbow.got { background: linear-gradient(90deg, color-mix(in srgb, var(--card) 85%, #ff9ad5), color-mix(in srgb, var(--card) 85%, #8fd8ff)); }
.ach-row.hid:not(.got) { opacity: .85; border-style: dashed; }
@media (max-width: 520px) { .ach-row { padding: 7px 8px; gap: 8px; } .ach-row .r { max-width: 34%; font-size: 11.5px; } }

/* ---------- A3 解鎖通知（動畫）：掛在 #wnotes 裡，稀有度越高動畫越大 ---------- */
#wnotes .ach-pop { pointer-events: none; display: flex; gap: 10px; align-items: center; padding: 10px 18px 10px 12px; border-radius: 18px; color: #fff; background: rgba(40, 30, 70, .94); box-shadow: 0 6px 22px rgba(0, 0, 0, .35); max-width: 100%; animation: achIn .5s cubic-bezier(.2, 1.4, .4, 1) both; position: relative; overflow: hidden; }
#wnotes .ach-pop.out { animation: achOut .5s ease-in both; }
#wnotes .ach-pop .ach-pop-ic { font-size: 34px; line-height: 1; animation: achSpin .9s ease-out both; }
#wnotes .ach-pop small { display: block; opacity: .88; font-size: 12px; } #wnotes .ach-pop b { display: block; font-size: 16px; }
#wnotes .ach-pop.r-bronze { background: linear-gradient(90deg, #6e4421, #b87333); }
#wnotes .ach-pop.r-silver { background: linear-gradient(90deg, #56616d, #a8b2bd); color: #10151b; }
#wnotes .ach-pop.r-gold { background: linear-gradient(90deg, #d9981a, #f2c14e); color: #3a2400; box-shadow: 0 0 22px rgba(242, 193, 78, .8); }
#wnotes .ach-pop.r-rainbow { background: linear-gradient(110deg, #ff5d5d, #ffd23a, #4fd18b, #5b8def, #b25cff, #ff5d5d); background-size: 300% 100%; animation: achIn .6s cubic-bezier(.2, 1.4, .4, 1) both, achRainbow 2.4s linear infinite; box-shadow: 0 0 30px rgba(255, 255, 255, .85); color: #1d1030; transform-origin: center; }
#wnotes .ach-pop.r-gold::after, #wnotes .ach-pop.r-rainbow::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-100%); animation: achShine 1.6s .3s ease-out 2; }
@keyframes achIn { from { transform: translateY(-30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes achOut { to { transform: translateY(-14px) scale(.9); opacity: 0; } }
@keyframes achSpin { from { transform: rotate(-200deg) scale(.2); } to { transform: none; } }
@keyframes achShine { to { transform: translateX(100%); } }
@keyframes achRainbow { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { #wnotes .ach-pop, #wnotes .ach-pop .ach-pop-ic, #wnotes .ach-pop::after { animation: none !important; } }