/* Steam 特賣日曆（/steam-sale） */
.ss-hero { background: var(--gq-grad); color: #fff; border-radius: 20px; padding: 1.4rem 1.5rem; box-shadow: var(--gq-shadow); }
.ss-hero h2 { color: #fff; }
.ss-hero a { color: #fff; }
.ss-hero .btn-light { color: #3b2fb0; }
.ss-hero-label { font-size: .8rem; font-weight: 700; opacity: .9; margin-bottom: .25rem; }
.ss-hero-note { opacity: .88; }
.ss-hero .ss-badge { vertical-align: middle; font-size: .7rem; }
.ss-cd-label { font-size: .8rem; opacity: .9; margin-bottom: .35rem; }
.ss-cd-units { display: flex; gap: .5rem; flex-wrap: wrap; }
.ss-cd-units > div { background: rgba(255, 255, 255, .18); border-radius: 14px; min-width: 4.2rem; padding: .45rem .6rem; text-align: center; }
.ss-cd-units b { display: block; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ss-cd-units span { font-size: .72rem; opacity: .9; }

.ss-badge { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.ss-active { background: var(--gq-accent-soft); color: var(--gq-accent); }
.ss-upcoming { background: var(--gq-primary-soft); color: var(--gq-primary-text); }
.ss-ended { background: var(--gq-surface-3); color: var(--gq-muted); }
.ss-confirmed { background: rgba(34, 199, 169, .14); color: #138a75; }
.ss-estimated { background: rgba(255, 176, 32, .18); color: #9a6200; }
[data-bs-theme="dark"] .ss-confirmed { color: var(--gq-mint); }
[data-bs-theme="dark"] .ss-estimated { color: var(--gq-sun); }
.ss-hero .ss-confirmed, .ss-hero .ss-estimated { background: rgba(255, 255, 255, .22); color: #fff; }

.ss-timeline { display: flex; flex-direction: column; gap: .6rem; }
.ss-item { display: flex; gap: .75rem; align-items: stretch; scroll-margin-top: 80px; }
.ss-date { flex: none; width: 3.4rem; border-radius: 14px; background: var(--gq-surface); box-shadow: var(--gq-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .35rem 0; }
.ss-item.is-seasonal .ss-date { background: var(--gq-primary-soft); }
.ss-month { font-size: .7rem; color: var(--gq-muted); font-weight: 700; }
.ss-day { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.ss-card { flex: 1 1 auto; min-width: 0; }
.ss-item.ss-ended { opacity: .55; }
.ss-item.ss-active .ss-card { box-shadow: 0 0 0 2px var(--gq-accent); }
.ss-item:target .ss-card { box-shadow: 0 0 0 2px var(--gq-primary); }

.ss-deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.ss-deal { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; color: var(--gq-text); text-decoration: none; min-width: 0; }
.ss-deal:hover { color: var(--gq-text); box-shadow: 0 0 0 2px var(--gq-primary-soft); }
.ss-deal-name { flex: 1 1 auto; min-width: 0; font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-deal .discount-tag { font-size: .72rem; padding: .1rem .4rem; }
.ss-deal-price { font-size: .8rem; font-weight: 700; white-space: nowrap; }

.ss-faq details { padding: .8rem 1rem; border-bottom: 1px solid var(--gq-border); }
.ss-faq details:last-child { border-bottom: 0; }
.ss-faq summary { cursor: pointer; }
.ss-faq details p { margin-top: .4rem; }

/* 特價頁 / 價格頁的特賣橫幅 */
.ss-banner { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 16px; background: var(--gq-grad-soft); color: var(--gq-text); text-decoration: none; font-size: .9rem; }
.ss-banner:hover { color: var(--gq-text); box-shadow: 0 0 0 2px var(--gq-primary-soft); }
.ss-banner .ss-banner-emoji { font-size: 1.3rem; }
.ss-banner b { color: var(--gq-primary-text); }