/* =============================================================
   GAME圈 — 發售日曆（/calendar）與隨機遊戲（/random）
   只使用 app.css 的 CSS 變數，亮 / 暗色自動切換；手機優先
   ============================================================= */

/* ---------- 頁首 ---------- */
.cal-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--gq-muted); margin-bottom: .5rem; }
.cal-crumb a { color: var(--gq-muted); font-weight: 600; }
.cal-crumb a:hover { color: var(--gq-primary); }
.cal-crumb .bi { font-size: .7rem; opacity: .6; }
.cal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.cal-head > .btn { white-space: nowrap; }
.cal-head h1 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .25rem; font-size: clamp(1.35rem, 4.6vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; }
.cal-sub { margin: 0; color: var(--gq-muted); font-size: .875rem; }

/* ---------- 篩選：平台 chips + 月份列 ---------- */
.cal-filters { padding: .8rem 1rem .85rem; margin-bottom: 1.1rem; }
.cal-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: .1rem 1rem; }
.cal-chips::-webkit-scrollbar { display: none; }
.cal-chips .chip { flex: none; padding: .38rem .8rem; font-size: .8125rem; }
.cal-chips .chip .bi { font-size: .85rem; }
.cal-months { display: flex; align-items: center; gap: .4rem; margin-top: .75rem; }
.cal-months-scroll { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; scroll-snap-type: x proximity; padding: .1rem 0; }
.cal-months-scroll::-webkit-scrollbar { display: none; }
.cal-mon { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3.5rem; padding: .35rem .5rem; border-radius: 14px; background: var(--gq-surface-3); color: var(--gq-text-2); font-weight: 800; font-size: .8125rem; line-height: 1.2; transition: background-color .15s, color .15s, transform .12s; }
.cal-mon:hover { color: var(--gq-text); transform: translateY(-1px); }
.cal-mon small { font-size: .62rem; font-weight: 600; color: var(--gq-muted); }
.cal-mon small.y { font-size: .58rem; font-weight: 700; letter-spacing: .02em; }
.cal-mon.empty { opacity: .6; }
.cal-mon.current:not(.active) { box-shadow: inset 0 0 0 1.5px var(--gq-primary); color: var(--gq-primary); }
.cal-mon.active { background: var(--gq-primary); color: #fff; opacity: 1; }
.cal-mon.active small { color: rgba(255, 255, 255, .82); }
.cal-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gq-surface-3); color: var(--gq-text); }
.cal-arrow:hover { background: var(--gq-primary-soft); color: var(--gq-primary); }

/* ---------- 月份分組 ---------- */
.cal-month { margin-bottom: 1.5rem; }
.cal-month-title {
  position: sticky; top: 60px; z-index: 5;
  display: flex; align-items: center; gap: .45rem;
  margin: 0 -.25rem .55rem; padding: .55rem .25rem;
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em;
  background: var(--gq-bg);
  background: color-mix(in srgb, var(--gq-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
.cal-month-title .bi { color: var(--gq-primary); }
.cal-count { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--gq-muted); background: var(--gq-surface-3); padding: .15rem .55rem; border-radius: 999px; }

/* ---------- 時間軸 ---------- */
.cal-list { list-style: none; margin: 0; padding: 0; position: relative; }
.cal-list::before { content: ""; position: absolute; left: 23px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--gq-border-strong); }
.cal-item { position: relative; display: flex; gap: .65rem; padding-bottom: .6rem; }
.cal-date { flex: none; width: 48px; position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; padding-top: .45rem; }
.cal-badge { width: 48px; padding: .32rem 0 .28rem; border-radius: 14px; text-align: center; background: var(--gq-surface); border: 1px solid var(--gq-border-strong); box-shadow: var(--gq-shadow-sm); }
.cal-badge b { display: block; font-size: 1.15rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cal-badge small { display: block; font-size: .62rem; font-weight: 700; color: var(--gq-muted); margin-top: .05rem; }
.cal-item.is-tbd .cal-badge { border-style: dashed; background: var(--gq-surface-2); }
.cal-item.is-tbd .cal-badge b { font-size: .92rem; }
.cal-item.is-today .cal-badge { background: var(--gq-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(176, 108, 255, .35); }
.cal-item.is-today .cal-badge small { color: rgba(255, 255, 255, .88); }
.cal-dot { width: 12px; height: 12px; margin-top: 1.05rem; border-radius: 50%; background: var(--gq-surface); border: 2.5px solid var(--gq-border-strong); }

.cal-card { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem .7rem .7rem; border-radius: 18px; background: var(--gq-surface); border: 1px solid var(--gq-border); box-shadow: var(--gq-shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cal-card:hover { transform: translateY(-1px); box-shadow: var(--gq-shadow); border-color: rgba(var(--gq-primary-rgb), .25); }
.cal-body { flex: 1; min-width: 0; }
.cal-name { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-name a { color: var(--gq-text); }
.cal-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cal-card:hover .cal-name a { color: var(--gq-primary); }
.cal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; margin-top: .12rem; font-size: .75rem; color: var(--gq-muted); font-weight: 600; }
.cal-meta .plat-icons { font-size: .8rem; }
.cal-pills { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.cal-pills:empty { display: none; }
.cal-pills .badge { font-size: .62rem; }
.cal-pill { display: inline-flex; align-items: center; gap: .2rem; font-size: .66rem; font-weight: 800; padding: .12rem .45rem; border-radius: 7px; white-space: nowrap; }
.cal-pill.released { background: rgba(34, 199, 169, .15); color: #0f9b82; }
.cal-pill.today { background: var(--gq-accent-soft); color: #e0457a; }
.cal-pill.tbd { background: var(--gq-surface-3); color: var(--gq-muted); }
.cal-pill.free { background: rgba(0, 153, 255, .13); color: #0a84d6; }
[data-bs-theme="dark"] .cal-pill.released { color: #4fe0c4; }
[data-bs-theme="dark"] .cal-pill.today { color: #ff8fb3; }
[data-bs-theme="dark"] .cal-pill.free { color: #5cb8ff; }

/* 追蹤按鈕：比一般 btn-primary 柔和，避免整頁都是實心按鈕 */
.cal-follow { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; gap: .3rem; }
.cal-follow.btn-primary { background: var(--gq-primary-soft); color: var(--gq-primary); border: 0; box-shadow: none; }
.cal-follow.btn-primary:hover, .cal-follow.btn-primary:focus-visible { background: var(--gq-primary); color: #fff; }
.cal-follow.active { background: var(--gq-surface-3); color: var(--gq-muted); }
@media (max-width: 400px) {
  .cal-follow { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .cal-follow-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.cal-legend { display: flex; gap: .4rem; font-size: .75rem; color: var(--gq-muted); line-height: 1.6; margin: .25rem 0 0; }

@media (min-width: 768px) {
  .cal-list::before { left: 27px; }
  .cal-date { width: 56px; }
  .cal-badge { width: 56px; }
  .cal-badge b { font-size: 1.3rem; }
  .cal-card { padding: .8rem 1rem .8rem .85rem; }
  .cal-name { font-size: 1rem; }
}

/* ---------- 側欄 ---------- */
.cal-dice { position: relative; overflow: hidden; border-radius: 22px; padding: 1.15rem 1.2rem 1.2rem; background: var(--gq-grad); color: #fff; }
.cal-dice h2 { font-size: 1.05rem; font-weight: 800; margin: .15rem 0 .3rem; padding-right: 3rem; }
.cal-dice p { font-size: .8125rem; opacity: .92; margin: 0 0 .8rem; line-height: 1.6; padding-right: 2.6rem; }
.cal-dice .btn { color: #6d5df6; font-weight: 700; }
.cal-dice-emoji { position: absolute; right: .6rem; top: .3rem; font-size: 2.6rem; transform: rotate(14deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.cal-tips { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .45rem; font-size: .8125rem; color: var(--gq-text-2); }
.cal-tips .cal-pill { margin-right: .35rem; }

/* ---------- /random 找不到遊戲 ---------- */
.rnd-wrap { max-width: 560px; margin: 1rem auto 2rem; text-align: center; padding: 2.25rem 1.25rem 2rem; border-radius: 28px; }
.rnd-dice { display: inline-block; font-size: 4.2rem; line-height: 1; animation: rnd-roll 2.6s ease-in-out infinite; transform-origin: 50% 60%; }
.rnd-shadow { width: 64px; height: 10px; margin: .6rem auto 1.1rem; border-radius: 50%; background: var(--gq-border-strong); animation: rnd-shadow 2.6s ease-in-out infinite; }
.rnd-wrap h1 { font-size: clamp(1.25rem, 4.5vw, 1.55rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
.rnd-wrap p { color: var(--gq-muted); font-size: .9rem; line-height: 1.7; }
.rnd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 1.1rem 0 1.3rem; }
.rnd-chips .chip { padding: .42rem .85rem; font-size: .8125rem; }
@keyframes rnd-roll {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-18px) rotate(-90deg); }
  40% { transform: translateY(0) rotate(-180deg); }
  55% { transform: translateY(-6px) rotate(-200deg); }
  70% { transform: translateY(0) rotate(-180deg); }
}
@keyframes rnd-shadow {
  0%, 40%, 70%, 100% { transform: scaleX(1); opacity: 1; }
  20% { transform: scaleX(.6); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .rnd-dice, .rnd-shadow { animation: none; }
  .cal-card, .cal-mon { transition: none; }
}