/* =============================================================
   GAME圈 — 文章內頁 / 發文編輯器 / 個人頁 / 找隊友
   只使用 app.css 的 CSS 變數，亮 / 暗色自動切換
   ============================================================= */

/* ---------- 發文編輯器 ---------- */
.editor-body { padding: 1.1rem 1rem 1.4rem; display: grid; gap: 1.6rem; }
@media (min-width: 768px) { .editor-body { padding: 1.6rem 1.75rem 1.8rem; } }
.editor-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.editor-section > .form-label, .editor-section > legend.form-label { display: flex; align-items: center; gap: .35rem; font-size: .9375rem; font-weight: 700; }
.editor-section > legend.form-label { float: left; width: 100%; padding: 0; }
.type-section { padding: 1rem 1rem 1.1rem; border-radius: 18px; background: var(--gq-surface-2); border: 1px solid var(--gq-border); }
.type-section legend { margin-bottom: .6rem; }
.editor-title { font-weight: 700; font-size: 1.15rem; }
.gp-search { position: relative; }
.gp-search .form-control { padding-left: 2.4rem; }
.gp-search-icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--gq-muted); pointer-events: none; }
.game-picker .gq-suggest a { cursor: pointer; }
.game-picker .gq-suggest .gp-none { color: var(--gq-text-2); font-weight: 600; }
.game-picker .picked .game-icon { width: 36px; height: 36px; border-radius: 10px; font-size: .9rem; }
.type-picker.is-locked input:disabled + label { opacity: .4; cursor: not-allowed; }
.type-picker label { user-select: none; }
.type-picker label:hover { border-color: rgba(var(--gq-primary-rgb), .35); }

.editor-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--gq-surface-3); }
.editor-mode button { border: 0; background: transparent; color: var(--gq-muted); font-size: .8125rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }
.editor-mode button.active { background: var(--gq-surface); color: var(--gq-text); box-shadow: var(--gq-shadow-sm); }
.editor-toolbar { align-items: center; }
.editor-toolbar .tb-sep { width: 1px; height: 20px; background: var(--gq-border-strong); margin: 0 .2rem; }
.editor-toolbar button:focus-visible { outline: 2px solid var(--gq-primary); outline-offset: -2px; }
.editor-textarea { resize: vertical; }
.editor-preview { min-height: 260px; padding: 1rem 1.1rem; border: 1px solid var(--gq-border-strong); border-radius: 16px; background: var(--gq-surface); }
.editor-preview .post-page-title { margin-top: 0; }
.editor-preview .preview-empty { color: var(--gq-muted); text-align: center; padding: 3rem 0; }
.poll-opt-row { display: flex; align-items: center; gap: .5rem; }
.poll-opt-num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--gq-primary-soft); color: var(--gq-primary); font-weight: 800; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.editor-actions {
  position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem;
  border-top: 1px solid var(--gq-border); border-radius: 0 0 24px 24px;
  background: var(--gq-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
@media (max-width: 991.98px) { .editor-actions { bottom: calc(62px + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) { .editor-actions { padding: .85rem 1.75rem; } }
.editor-actions .btn[disabled] { opacity: .6; }
.editor-tips { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .8125rem; color: var(--gq-text-2); }
.editor-tips code { background: var(--gq-surface-3); color: var(--gq-accent); padding: .05em .35em; border-radius: 6px; }
.editor-tips kbd, .comment-box kbd { font-size: .7rem; padding: .05rem .3rem; border-radius: 5px; background: var(--gq-surface-3); color: var(--gq-text-2); box-shadow: inset 0 -1px 0 var(--gq-border-strong); }
.editor-draft-alert { background: var(--gq-primary-soft); color: var(--gq-text); }
.tag-preview-note { font-size: .75rem; color: var(--gq-danger); align-self: center; }

/* ---------- 文章內頁 ---------- */
.post-article-body { padding: 1.1rem 1rem .4rem; }
@media (min-width: 768px) { .post-article-body { padding: 1.6rem 1.9rem .6rem; } }
.post-breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: var(--gq-muted); margin-bottom: .9rem; min-width: 0; white-space: nowrap; overflow: hidden; }
.post-breadcrumb a { color: var(--gq-muted); max-width: 14rem; }
.post-breadcrumb a:hover { color: var(--gq-primary); }
.post-breadcrumb .bi-chevron-right { font-size: .65rem; opacity: .6; }
.post-status-banner { display: flex; gap: .8rem; padding: .9rem 1rem; border-radius: 16px; margin-bottom: 1rem; background: var(--gq-surface-3); border: 1px solid var(--gq-border); }
.post-status-banner.status-pending { background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .35); }
.post-status-banner.status-hidden { background: rgba(255, 77, 94, .1); border-color: rgba(255, 77, 94, .3); }
.post-status-banner.status-draft { background: var(--gq-primary-soft); border-color: rgba(var(--gq-primary-rgb), .25); }
.post-page-head { display: flex; align-items: center; gap: .7rem; }
.post-page-head .author { font-weight: 700; color: var(--gq-text); }
.post-page-head .author:hover { color: var(--gq-primary); }
.presence-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--gq-surface); display: inline-block; }
.spoiler-badge { background: rgba(255, 176, 32, .16); color: #c07a00; font-size: .72rem; font-weight: 700; padding: .18rem .5rem; border-radius: 8px; vertical-align: 2px; }
[data-bs-theme="dark"] .spoiler-badge { color: #ffc75a; }
.post-page-title .type-badge, .post-page-title .solved-badge, .post-page-title .adult-badge { font-size: .8rem; vertical-align: 4px; }

.post-gate { position: relative; border-radius: 20px; overflow: hidden; margin: .5rem 0 1rem; background: var(--gq-surface-2); border: 1px solid var(--gq-border); min-height: 260px; }
.post-gate-lines { padding: 1.4rem; display: grid; gap: .8rem; filter: blur(6px); opacity: .7; }
.post-gate-lines span { display: block; height: 14px; border-radius: 7px; background: var(--gq-border-strong); }
.post-gate-lines span:nth-child(2) { width: 92%; } .post-gate-lines span:nth-child(3) { width: 80%; }
.post-gate-lines span:nth-child(4) { width: 96%; } .post-gate-lines span:nth-child(5) { width: 60%; }
.post-gate-cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; background: linear-gradient(180deg, transparent, var(--gq-surface) 45%); }

.post-toc-mobile { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 14px; background: var(--gq-surface-2); border: 1px solid var(--gq-border); }
.post-toc-mobile summary { font-weight: 700; font-size: .875rem; cursor: pointer; }
.toc a.lv1 { font-weight: 600; }
.toc a.active { color: var(--gq-primary); border-left-color: var(--gq-primary); }
.spoiler-notice { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-radius: 18px; margin-bottom: 1rem; background: rgba(255, 176, 32, .1); border: 1px dashed rgba(255, 176, 32, .5); }

.post-media-grid .pm-item { position: relative; }
.post-media-grid .pm-item img { display: block; height: 100%; }
.post-media-grid.n2 .pm-item, .post-media-grid.n3 .pm-item, .post-media-grid.n4plus .pm-item { aspect-ratio: 1; }
.post-media-grid.n3 .pm-item:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (min-width: 576px) { .post-media-grid.n4plus { grid-template-columns: repeat(3, 1fr); } }
.post-media-grid .pm-video { background: #000; }
.post-media-grid .pm-video video { display: block; border-radius: 0; }

.post-poll, .post-team { margin: 1.2rem 0; padding: 1rem 1rem 1.1rem; border-radius: 20px; border: 1px solid var(--gq-border); background: var(--gq-surface-2); }
@media (min-width: 768px) { .post-poll, .post-team { padding: 1.2rem 1.3rem; } }
.post-poll-head, .post-team-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.poll-choice { cursor: pointer; background: var(--gq-surface); border: 2px solid var(--gq-border); }
.poll-choice:has(input:checked) { border-color: var(--gq-primary); background: var(--gq-primary-soft); }
.post-poll .poll-option { margin-bottom: .45rem; }
.post-poll .poll-voted .poll-option { background: var(--gq-surface); }

.post-team { background: var(--gq-grad-soft); border-color: rgba(var(--gq-primary-rgb), .15); }
.team-count-lg { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.team-count-lg span { font-size: .875rem; font-weight: 600; color: var(--gq-muted); }
.team-slots-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 1rem; }
.team-slots-row .slot { width: 14px; height: 14px; border-radius: 50%; background: var(--gq-border-strong); }
.team-slots-row .slot.on { background: var(--gq-primary); box-shadow: 0 0 0 3px rgba(var(--gq-primary-rgb), .18); }
.team-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1rem; }
@media (min-width: 768px) { .team-info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-info-grid > div { background: var(--gq-surface); border-radius: 14px; padding: .55rem .7rem; min-width: 0; }
.team-info-grid dt { font-size: .72rem; color: var(--gq-muted); font-weight: 600; }
.team-info-grid dd { margin: 0; font-weight: 700; font-size: .875rem; overflow-wrap: anywhere; }
.team-members { margin-bottom: 1rem; }
.team-member { display: inline-flex; align-items: center; gap: .15rem; padding: .25rem .35rem .25rem .3rem; border-radius: 999px; background: var(--gq-surface); max-width: 100%; }
.team-member > a { padding-right: .35rem; }
.team-member.is-empty { gap: .4rem; padding-right: .75rem; border: 1px dashed var(--gq-border-strong); background: transparent; }
.team-member .empty-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gq-surface-3); color: var(--gq-muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.team-contact { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 14px; background: var(--gq-surface); margin-bottom: 1rem; }
.team-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.team-manage { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--gq-border-strong); }
.team-request { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 14px; background: var(--gq-surface); margin-bottom: .4rem; }
.team-invite { margin-top: .75rem; max-width: 420px; }
.team-invite .input-group-text { border-radius: 14px 0 0 14px; background: var(--gq-surface-3); border-color: var(--gq-border-strong); color: var(--gq-muted); }
.team-invite .form-control { border-radius: 0; }
.team-invite .btn { border-radius: 0 14px 14px 0; }

.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.post-actions-bar { flex-wrap: wrap; margin-bottom: .6rem; }
.post-actions-bar .act-btn.active[data-subscribe-post] { color: var(--gq-primary); }

.post-comments .gq-card-body { padding: 1.1rem 1rem 0; }
@media (min-width: 768px) { .post-comments .gq-card-body { padding: 1.3rem 1.9rem 0; } }
.comments-head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .4rem; }
.comment-sorts { margin-left: auto; }
.comment-sorts button { padding: .3rem .75rem; font-size: .8125rem; }
.comment-list .comment:first-child { padding-top: .6rem; }
.comment { scroll-margin-top: 90px; }
.comment.flash { animation: gq-comment-flash 2.2s ease; border-radius: 14px; }
@keyframes gq-comment-flash { 0%, 30% { background: rgba(var(--gq-primary-rgb), .14); } 100% { background: transparent; } }
.comment .c-edit { margin: .4rem 0; }
.comment .c-edit textarea { border-radius: 14px; font-size: .9375rem; min-height: 80px; }
.comment-cta { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: 1rem 1.1rem; margin: .5rem 0 1.2rem; border-radius: 18px; background: var(--gq-grad-soft); }
.comment-notice { padding: .8rem 1rem; border-radius: 14px; background: var(--gq-surface-3); font-size: .875rem; font-weight: 600; color: var(--gq-text-2); margin: .5rem 0 1.2rem; }
.comment-box { margin: 0 -1rem; padding: .75rem 1rem .7rem; border-radius: 0 0 20px 20px; background: var(--gq-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
@media (min-width: 768px) { .comment-box { margin: 0 -1.9rem; padding-left: 1.9rem; padding-right: 1.9rem; } }
.comment-box textarea { padding-top: .6rem; padding-bottom: .6rem; }
.comment-attach-item { width: 84px; }

.author-card .author-bio { overflow-wrap: anywhere; }
.author-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: .3rem; margin: .9rem 0; padding: .6rem 0; border-top: 1px solid var(--gq-border); border-bottom: 1px solid var(--gq-border); }
.author-stats b { display: block; font-size: 1.05rem; font-weight: 800; }
.author-stats span { font-size: .72rem; color: var(--gq-muted); font-weight: 600; }
.presence-online, .presence-playing { background: rgba(34, 197, 94, .12); color: #15803d; }
[data-bs-theme="dark"] .presence-online, [data-bs-theme="dark"] .presence-playing { color: #4ade80; }
.related-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.related-title .type-badge { font-size: .65rem; padding: .1rem .35rem; }

/* ---------- 個人頁 ---------- */
.profile-card { overflow: hidden; border-radius: 24px; }
.profile-card .profile-cover { border-radius: 0; }
.profile-card .avatar-xl { position: relative; z-index: 2; }
.profile-head { position: relative; }
.profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding-bottom: .35rem; }
.profile-name { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 900; letter-spacing: -.01em; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; word-break: break-word; }
.profile-name .role-badge { font-size: .72rem; }
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .7rem; font-size: .8125rem; color: var(--gq-text-2); font-weight: 600; }
.profile-meta .bi { color: var(--gq-muted); }
.profile-bio { margin: .8rem 0 0; font-size: .9375rem; line-height: 1.7; color: var(--gq-text-2); max-width: 46rem; overflow-wrap: anywhere; }
.level-box { margin-top: 1rem; max-width: 420px; }
.level-bar { height: 8px; border-radius: 4px; background: var(--gq-surface-3); overflow: hidden; }
.level-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--gq-grad); }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: 1.1rem; }
@media (min-width: 768px) { .profile-stats { grid-template-columns: repeat(6, 1fr); max-width: 640px; } }
.profile-stats > a, .profile-stats > div { display: flex; flex-direction: column; align-items: center; padding: .45rem .2rem; border-radius: 14px; color: var(--gq-text); }
.profile-stats > a:hover, .profile-stats > a.active { background: var(--gq-surface-3); color: var(--gq-text); }
.profile-stats b { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.profile-stats span { font-size: .72rem; color: var(--gq-muted); font-weight: 600; }
.profile-tabs { position: sticky; top: 60px; z-index: 5; background: var(--gq-bg); }
.profile-locked { max-width: 640px; }
.answer-row { display: block; padding: .9rem 1rem; color: var(--gq-text); transition: border-color .15s, box-shadow .15s; }
.answer-row:hover { color: var(--gq-text); border-color: var(--gq-border-strong); box-shadow: var(--gq-shadow); }
.answer-row.is-accepted { border-color: rgba(34, 199, 169, .35); }
.answer-q { line-height: 1.45; }
.answer-excerpt { font-size: .875rem; color: var(--gq-text-2); margin-top: .3rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 576px) { .lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .lib-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lib-tile { display: block; color: var(--gq-text); min-width: 0; }
.lib-tile:hover { color: var(--gq-primary); }
.lib-cover { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--gq-surface-3); transition: transform .15s; }
.lib-tile:hover .lib-cover { transform: translateY(-2px); }
.lib-cover img { width: 100%; height: 100%; object-fit: cover; }
.lib-cover .game-cover-fallback { padding: .6rem; }
.lib-cover .gc-name { font-size: .8rem; }
.lib-cover .gc-initial { font-size: 2.2rem; }
.lib-fav { position: absolute; top: .35rem; right: .35rem; font-size: .8rem; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.lib-name { font-size: .8125rem; font-weight: 700; margin-top: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .5rem; border-bottom: 1px solid var(--gq-border); }
.person-row:last-child { border-bottom: 0; }

/* ---------- 找隊友 ---------- */
.lfg-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.3rem 1.4rem; border-radius: 24px; background: var(--gq-surface); border: 1px solid var(--gq-border); }
.lfg-hero::after { content: "🎮"; position: absolute; right: .5rem; bottom: -22px; font-size: 5rem; opacity: .07; transform: rotate(-14deg); pointer-events: none; }
.lfg-hero::before { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -180px; background: radial-gradient(circle, rgba(255, 122, 176, .25), transparent 65%); pointer-events: none; }
.lfg-hero > * { position: relative; z-index: 1; }
.lfg-invite-banner { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: 16px; background: var(--gq-grad); color: #fff; font-weight: 700; font-size: .9rem; }
.lfg-invite-banner:hover { color: #fff; filter: brightness(1.05); }
.lfg-platforms { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-top: .9rem; padding-bottom: .1rem; }
.lfg-platforms::-webkit-scrollbar { display: none; }
.lfg-platforms .chip { flex: none; }
.lfg-platforms .chip .plat-icons { color: inherit; font-size: .8rem; }
/* API 回傳的欄位為 col-md-6，在超寬螢幕統一成三欄 */
@media (min-width: 1200px) { .lfg-grid > [data-post-id] { flex: 0 0 auto; width: 33.33333333%; } }

/* 以 JS 切換 hidden 的元素：不用 .d-flex（utility 的 !important 會蓋過 [hidden]） */
.editor-draft-alert:not([hidden]), .reply-hint:not([hidden]) { display: flex; }
.btn-light-2.active, .btn-light-2.active:hover { background: var(--gq-surface-3); color: var(--gq-text); }
.team-contact .btn, .team-request .btn { white-space: nowrap; }
/* 已刪除樓層底下的回覆維持正常樣式 */
.comment.is-deleted .comment:not(.is-deleted) .c-text { color: var(--gq-text); font-style: normal; }
@media (max-width: 575.98px) {
  .post-actions-bar { gap: 0; }
  .post-actions-bar .act-btn { padding: .45rem .5rem; }
}

/* 所見即所得編輯區（editor.js）：外觀和文章頁一致 */
.editor-rich { min-height: 260px; max-height: 70vh; overflow-y: auto; resize: vertical; height: auto; padding: .9rem 1rem; cursor: text; }
.editor-rich:focus { outline: none; }
.editor-rich > :first-child { margin-top: 0; }
.editor-rich > :last-child { margin-bottom: 0; }
.editor-rich:empty::before { content: attr(data-placeholder); color: var(--gq-text-3, #9a9aa8); pointer-events: none; }
.editor-rich.is-loading { opacity: .55; }
.editor-rich .spoiler { color: inherit; background: repeating-linear-gradient(45deg, var(--gq-surface-3), var(--gq-surface-3) 6px, transparent 6px, transparent 12px); user-select: auto; cursor: text; }
.editor-rich .content-figure img { max-height: 320px; cursor: default; }
.editor-rich .editor-embed { margin: 1em 0; padding: .9rem 1rem; border-radius: 14px; background: #16161d; color: #e6e6f0; font-size: .875rem; word-break: break-all; user-select: none; }
.editor-toolbar .tb-source { width: auto; padding: 0 .6rem; font-size: .8rem; }
.editor-toolbar .tb-source.active { background: var(--gq-surface); color: var(--gq-primary); }