/* 副本 / 收集頁與頂部導覽。所有選擇器都以 .topnav / .q- 開頭,不影響看板首頁(G3)。 */
:root { --q-ink:#34313b; --q-sub:#6e6b76; --q-line:#d9d6e0; --q-bg:#f6f5f8; --q-card:#fff;
        --q-purple:#4f2a93; --q-red:#f74e52; --q-red-bg:#f3c9cb; --q-blue:#2995cd; --q-warn:#c00; }
body { margin:0; background:var(--q-bg); color:var(--q-ink);
       font-family:system-ui,-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }
.topnav { display:flex; gap:4px; padding:0 8px; background:var(--q-purple); }
.topnav a { color:#e4daf5; text-decoration:none; padding:12px 14px; font-size:15px; border-bottom:3px solid transparent; }
.topnav a:hover { color:#fff; }
.topnav a[aria-current="page"] { color:#fff; border-bottom-color:#fff; }
.q-main { max-width:1200px; margin:0 auto; padding:16px; }
.q-title { font-size:22px; margin:8px 0 16px; }
.q-h2 { font-size:17px; margin:28px 0 8px; }
.q-sub { color:var(--q-sub); font-size:14px; margin:6px 0; }
.q-foot { color:var(--q-sub); font-size:13px; margin:32px 0 8px; }
.q-error { background:var(--q-warn); color:#fff; padding:8px 12px; margin:0 0 12px; font-weight:600; }
.q-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.q-card { position:relative; background:var(--q-card); border:1px solid var(--q-line); border-radius:6px;
          padding:16px; overflow:hidden; }
.q-card[data-defeated="1"] { background:#f0eff3; }
.q-boss { font-size:18px; margin:0 0 4px; padding-right:84px; overflow-wrap:anywhere; }
.q-goal { color:var(--q-sub); font-size:13px; margin:0 0 12px; overflow-wrap:anywhere; min-height:2.6em;
          display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.q-hp { position:relative; height:22px; background:var(--q-red-bg); border-radius:3px; overflow:hidden; }
.q-hp-fill { position:absolute; left:0; top:0; bottom:0; background:var(--q-red); }
.q-hp-text { position:relative; display:block; text-align:center; line-height:22px; font-size:13px;
             font-weight:600; color:#3b1214; font-variant-numeric:tabular-nums; }
.q-count { font-size:14px; margin:10px 0 0; font-variant-numeric:tabular-nums; }
.q-hits { list-style:none; margin:0; padding:0; min-height:3.9em; font-size:13px; color:var(--q-sub); }
.q-hits li { padding:1px 0; }
.q-stamp { position:absolute; top:14px; right:14px; border:3px solid var(--q-blue); color:var(--q-blue);
           padding:2px 8px; font-weight:700; font-size:15px; transform:rotate(8deg); border-radius:3px; }
.q-toasts { position:fixed; top:56px; right:12px; left:12px; display:flex; flex-direction:column; align-items:flex-end;
            gap:8px; pointer-events:none; z-index:10; }
.q-toast { background:var(--q-blue); color:#fff; padding:10px 16px; border-radius:4px; font-size:14px; font-weight:600;
           box-shadow:0 2px 8px rgba(0,0,0,.2); animation:q-toast-life 7s ease-out both; max-width:100%; }
@keyframes q-toast-life { 0% { opacity:0; transform:translateY(-8px); } 8% { opacity:1; transform:none; }
                          85% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
.q-eggs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:12px; }
.q-egg { background:var(--q-card); border:1px solid var(--q-line); border-radius:6px; padding:10px 6px; text-align:center;
         display:flex; flex-direction:column; align-items:center; gap:4px; }
.q-egg img { image-rendering:pixelated; width:68px; height:68px; }
.q-egg[data-state="none"] img { filter:grayscale(1) brightness(1.15); opacity:.35; }
.q-egg-name { font-size:13px; }
.q-egg-n { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.q-egg[data-state="none"] .q-egg-n { color:var(--q-sub); font-weight:400; }
.q-recent { list-style:none; margin:0; padding:0; font-size:14px; }
.q-recent li { padding:4px 0; border-bottom:1px solid var(--q-line); overflow-wrap:anywhere; }
@media (min-width:768px) { .q-grid { grid-template-columns:repeat(2,1fr); } .q-main { padding:24px; } }
@media (min-width:1024px) { .q-grid { grid-template-columns:repeat(3,1fr); }
                            .q-toasts { left:auto; max-width:360px; } }
@media (prefers-reduced-motion:reduce) { .q-toast { animation:none; } }